7.8.6

.serena/.gitignore

@@ -1 +0,0 @@
-/cache

.serena/project.yml

@@ -1,68 +0,0 @@
-# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
-#  * For C, use cpp
-#  * For JavaScript, use typescript
-# Special requirements:
-#  * csharp: Requires the presence of a .sln file in the project folder.
-language: typescript
-
-# whether to use the project's gitignore file to ignore files
-# Added on 2025-04-07
-ignore_all_files_in_gitignore: true
-# list of additional paths to ignore
-# same syntax as gitignore, so you can use * and **
-# Was previously called `ignored_dirs`, please update your config if you are using that.
-# Added (renamed) on 2025-04-07
-ignored_paths: []
-
-# whether the project is in read-only mode
-# If set to true, all editing tools will be disabled and attempts to use them will result in an error
-# Added on 2025-04-18
-read_only: false
-
-
-# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
-# Below is the complete list of tools for convenience.
-# To make sure you have the latest list of tools, and to view their descriptions, 
-# execute `uv run scripts/print_tool_overview.py`.
-#
-#  * `activate_project`: Activates a project by name.
-#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
-#  * `create_text_file`: Creates/overwrites a file in the project directory.
-#  * `delete_lines`: Deletes a range of lines within a file.
-#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
-#  * `execute_shell_command`: Executes a shell command.
-#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
-#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
-#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
-#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
-#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
-#  * `initial_instructions`: Gets the initial instructions for the current project.
-#     Should only be used in settings where the system prompt cannot be set,
-#     e.g. in clients you have no control over, like Claude Desktop.
-#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
-#  * `insert_at_line`: Inserts content at a given line in a file.
-#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
-#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
-#  * `list_memories`: Lists memories in Serena's project-specific memory store.
-#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
-#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
-#  * `read_file`: Reads a file within the project directory.
-#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
-#  * `remove_project`: Removes a project from the Serena configuration.
-#  * `replace_lines`: Replaces a range of lines within a file with new content.
-#  * `replace_symbol_body`: Replaces the full definition of a symbol.
-#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
-#  * `search_for_pattern`: Performs a search for a pattern in the project.
-#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
-#  * `switch_modes`: Activates modes by providing a list of their names
-#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
-#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
-#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
-#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
-excluded_tools: []
-
-# initial prompt for the project. It will always be given to the LLM upon activating the project
-# (contrary to the memories, which are loaded on demand).
-initial_prompt: ""
-
-project_name: "typedserver"

changelog.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## 2025-12-04 - 7.8.0 - feat(serviceworker)
+Add TypedRequest traffic monitoring and SW dashboard 'Requests' panel
+
+- Add TypedRequest traffic monitoring interfaces and shared SW dashboard HTML (SW_DASH_HTML) to ts_interfaces/serviceworker.ts.
+- Introduce RequestLogStore (ts_web_serviceworker/classes.requestlogstore.ts) to collect, persist in-memory, and compute stats for TypedRequest traffic (logs, counts, methods, averages).
+- Add service worker backend handlers to receive and broadcast TypedRequest logs and to expose endpoints: serviceworker_typedRequestLog, serviceworker_getTypedRequestLogs, serviceworker_getTypedRequestStats, serviceworker_clearTypedRequestLogs.
+- Expose HTTP routes and fallback behaviors in the server built-in controller to serve the SW dashboard (GET /sw-dash and /sw-dash/bundle.js) and to return sensible 503 placeholders when the SW is not active.
+- Extend the service worker CacheManager and DashboardGenerator to serve TypedRequest-related endpoints (/sw-dash/requests, /sw-dash/requests/stats, /sw-dash/requests/methods) and to integrate RequestLogStore data into the dashboard APIs.
+- Add a Lit-based dashboard component sw-dash-requests (ts_swdash/sw-dash-requests.ts) and integrate it into the main sw-dash-app UI to display live TypedRequest traffic with filtering, payload toggles, pagination and clear logs action.
+- Enable client-side traffic logging from the injected reload checker (ts_web_inject/index.ts) by setting global TypedRouter hooks that send log entries to the service worker, with safeguards to avoid logging the logging requests themselves.
+- Add action manager utilities (ts_web_serviceworker_client/classes.actionmanager.ts) to log TypedRequest entries to the SW, query logs and stats, clear logs, and subscribe to real-time TypedRequest broadcasts.
+- Refactor Dashboard HTML generation to use the shared SW_DASH_HTML constant so server and service worker serve the same UI shell.
+- Integrate broadcasting of TypedRequest log events from service worker backend to connected clients so the SW dashboard updates in real time.
+
+## 2025-12-04 - 7.7.1 - fix(web_serviceworker)
+Standardize DeesComms message format in service worker backend
+
+- Add createMessage helper to generate consistent TypedRequest-shaped messages (includes messageId and correlation.id/phase).
+- Replace inline postMessage payloads with createMessage(...) calls across ServiceworkerBackend (status updates, new-version broadcasts, alerts, event pushes, metrics updates, resource-cached notifications).
+- Improves message consistency and enables easier correlation/tracing of DeesComms messages; behavior should remain backward-compatible.
+
+## 2025-12-04 - 7.7.0 - feat(typedserver)
+Add SPA fallback support to TypedServer
+
+- Introduce new IServerOptions.spaFallback boolean to enable SPA routing fallback.
+- When enabled, GET requests for paths without a file extension will serve serveDir/index.html.
+- Preserves existing HTML injection behavior: injectReload still injects devtools script and typedserver metadata into <head> when enabled.
+- Responses from SPA fallback include Cache-Control: no-cache and appHash header for cache-busting; falls through to 404 on errors.
+- Non-file routes that contain a dot (.) are not considered for SPA fallback to avoid interfering with asset requests.
+
+## 2025-12-04 - 7.6.0 - feat(typedserver)
+Remove legacy Express-based servertools, drop express deps, and refactor TypedServer to SmartServe + typedrouter with CORS support
+
+- Remove legacy ts/servertools module and many Express-based helpers (classes.server, handler, handlerstatic, handlerproxy, compressor, sitemap, feed, tools.*). The servertools compatibility layer is no longer available.
+- Drop express-related dependencies from package.json (@types/express, express, body-parser, cors, express-force-ssl).
+- Refactor core API: ts/index.ts no longer exports servertools and ts/plugins.ts no longer re-exports Express middleware — consumers must migrate to SmartServe/typedrequest/typedsocket primitives.
+- TypedServer rewritten: integrates with @push.rocks/smartserve ControllerRegistry, adds custom route parsing, CORS header helper and OPTIONS preflight handling, improved static file handling with optional reload injection, file watching, typedrouter and typedsocket integration.
+- UtilityWebsiteServer now registers the serviceworker versionInfo handler on typedrouter instead of using the removed servertools.serviceworker helper.
+- This is a breaking change — public APIs and dependency surface changed; bump major version.
+
+## 2025-12-04 - 7.5.0 - feat(serviceworker)
+Add real-time service worker push updates and DeesComms integration (metrics, events, resource caching)
+
+- Integrate DeesComms push channel for real-time SW → client communication and export/consume deesComms in relevant plugin modules.
+- Add typed push message interfaces for events, metrics snapshots and resource-cached notifications in serviceworker interfaces.
+- Implement backend push methods: pushEvent, pushMetricsUpdate (with 500ms throttle) and pushResourceCached in ServiceworkerBackend.
+- Trigger push updates from MetricsCollector and PersistentStore so metrics and logged events are broadcast to connected clients.
+- Add client-side DeesComms handlers in sw-dash app: receive metrics, event logs and resource notifications; add heartbeat and initial HTTP seed to maintain SW health state.
+- Add event push listener and cleanup in sw-dash-events component to prepend incoming events and avoid leaks.
+- Expose getServiceWorkerBackend() from SW init for internal modules to call push methods.
+- Misc: implement request deduplication and various robustness improvements (throttling, heartbeat, safer polling, removed noisy debug logs).
+
+## 2025-12-04 - 7.4.1 - fix(web_serviceworker)
+Improve service worker persistence, metrics and caching robustness
+
+- Ensure persistent store is initialized before use in dashboard handlers and service worker activation/handlers (calls to persistentStore.init())
+- Make serveCumulativeMetrics async and align fetchEvent.respondWith usage (remove unnecessary Promise.resolve)
+- Change persistent WebStore database name to 'losslessServiceworkerPersistent' to separate durable store from runtime store
+- Make PersistentStore.init() more resilient: add detailed logging, avoid throwing on init failure, mark initialized to prevent retry loops, and start periodic save only after load
+- Ensure logEvent awaits initialization and adds defensive logging around reading/writing the event log
+- Add request deduplication logic and improved cache handling in CacheManager (fetchWithDeduplication usage and safer respondWith)
+
+## 2025-12-04 - 7.4.0 - feat(serviceworker)
+Add persistent event store, cumulative metrics and dashboard events UI for service worker observability
+
+- Add PersistentStore (ts_web_serviceworker/classes.persistentstore.ts) to persist event log and cumulative metrics with retention policy and periodic saving.
+- Introduce persistent event types and interfaces for event log and cumulative metrics (ts_interfaces/serviceworker.ts).
+- Log lifecycle, update, network and speedtest events to the persistent store (install, activate, update available/applied/error, network online/offline, speedtest started/completed/failed, cache invalidation).
+- Expose persistent-store APIs via typed handlers in the service worker backend: serviceworker_getEventLog, serviceworker_getCumulativeMetrics, serviceworker_clearEventLog, serviceworker_getEventCount.
+- Serve new dashboard endpoints from the service worker: /sw-dash/events (GET), /sw-dash/events/count (GET), /sw-dash/cumulative-metrics (GET) and DELETE /sw-dash/events to clear the log (handled in classes.cachemanager and classes.dashboard).
+- Add sw-dash events panel component (ts_swdash/sw-dash-events.ts) and integrate an Events tab into the dashboard UI (ts_swdash/sw-dash-app.ts, sw-dash-overview.ts shows 1h event count).
+- Reset cumulative metrics on cache invalidation and increment swRestartCount on PersistentStore.init().
+- Record speedtest lifecycle events (started/completed/failed) and include details in the event log.
+
+## 2025-12-04 - 7.3.0 - feat(serviceworker)
+Modernize SW dashboard UI and improve service worker backend and server tooling
+
+- Revamped sw-dash UI: new header/logo, uptime badge, live auto-refresh indicator, reorganized panels and improved speedtest UI and controls
+- Shared styles overhaul: new theming variables, spacing scale, badges, refined progress/pulse animations and cleaner typography
+- Dashboard internals: metrics endpoint and SPA shell updated; Lit bundle loading and table sort icon changed to ↑/↓
+- Service worker: added request deduplication (in-flight request coalescing), safer caching logic, consistent CORS/caching headers, and cache revalidation
+- Metrics: richer MetricsCollector with per-resource tracking, domain/content-type stats, speedtest metrics and better summary/stat helpers
+- Update & network managers: rate-limited update checks, debounced update/revalidation tasks, online/offline checks and improved retry/backoff logic
+- TypedServer & tooling: addRoute API for custom routes, improved HTML reload script injection, TypedSocket integration and a backend speedtest handler
+- servertools: improved static/proxy handlers (more robust path extraction, compression handling) and deprecation notice for addTypedSocket()
+
+## 2025-12-04 - 7.2.0 - feat(serviceworker)
+Add service worker status updates, EventBus and UI status pill for realtime observability
+
+- Introduce a status update protocol for service worker <-> clients (IStatusUpdate, IMessage_Serviceworker_StatusUpdate, IRequest_Serviceworker_GetStatus).
+- Add typedserver-statuspill Lit component to display backend/serviceworker/network status in the UI, with expand/collapse details and persistent/error states.
+- Wire ReloadChecker to use the new status pill: show network/backend/serviceworker status, handle online/offline events, and subscribe to service worker status broadcasts.
+- Extend ActionManager (client) with subscribeToStatusUpdates and getServiceWorkerStatus helpers; forward serviceworker_statusUpdate broadcasts to registered callbacks.
+- Serviceworker backend: add serviceworker_getStatus handler and broadcastStatusUpdate API; subscribe to EventBus lifecycle/network/update events to broadcast status changes to clients.
+- Add EventBus for decoupled service worker internal events (ServiceWorkerEvent enum, pub/sub API, history and convenience emitters).
+- Ensure proper subscribe/unsubscribe lifecycle (ReloadChecker stops SW subscription on stop).
+- Improve cache/connection status reporting integration so status updates include details like cacheHitRate, resourceCount and connected clients.
+
 ## 2025-12-04 - 7.1.0 - feat(swdash)
 Add live speedtest progress UI to service worker dashboard
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "7.1.0",
+  "version": "7.8.6",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {
@@ -32,7 +32,6 @@
     "HTTP server",
     "SSL",
     "cors",
-    "express middleware",
     "proxy",
     "sitemap",
     "feeds",
@@ -59,7 +58,7 @@
   ],
   "homepage": "https://code.foss.global/api.global/typedserver",
   "dependencies": {
-    "@api.global/typedrequest": "^3.1.11",
+    "@api.global/typedrequest": "^3.2.0",
     "@api.global/typedrequest-interfaces": "^3.0.19",
     "@api.global/typedsocket": "^4.1.0",
     "@cloudflare/workers-types": "^4.20251202.0",
@@ -88,15 +87,10 @@
     "@push.rocks/smartstream": "^3.2.5",
     "@push.rocks/smarttime": "^4.1.1",
     "@push.rocks/smartwatch": "^5.0.0",
-    "@push.rocks/taskbuffer": "^3.4.0",
+    "@push.rocks/taskbuffer": "^3.5.0",
     "@push.rocks/webrequest": "^4.0.1",
     "@push.rocks/webstore": "^2.0.20",
     "@tsclass/tsclass": "^9.3.0",
-    "@types/express": "^5.0.6",
-    "body-parser": "^2.2.1",
-    "cors": "^2.8.5",
-    "express": "^5.2.1",
-    "express-force-ssl": "^0.3.2",
     "lit": "^3.3.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@api.global/typedrequest':
-        specifier: ^3.1.11
-        version: 3.1.11
+        specifier: ^3.2.0
+        version: 3.2.0
       '@api.global/typedrequest-interfaces':
         specifier: ^3.0.19
         version: 3.0.19
@@ -96,8 +96,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
       '@push.rocks/taskbuffer':
-        specifier: ^3.4.0
-        version: 3.4.0
+        specifier: ^3.5.0
+        version: 3.5.0
       '@push.rocks/webrequest':
         specifier: ^4.0.1
         version: 4.0.1
@@ -107,21 +107,6 @@ importers:
       '@tsclass/tsclass':
         specifier: ^9.3.0
         version: 9.3.0
-      '@types/express':
-        specifier: ^5.0.6
-        version: 5.0.6
-      body-parser:
-        specifier: ^2.2.1
-        version: 2.2.1
-      cors:
-        specifier: ^2.8.5
-        version: 2.8.5
-      express:
-        specifier: ^5.2.1
-        version: 5.2.1
-      express-force-ssl:
-        specifier: ^0.3.2
-        version: 0.3.2
       lit:
         specifier: ^3.3.1
         version: 3.3.1
@@ -150,8 +135,8 @@ packages:
   '@api.global/typedrequest-interfaces@3.0.19':
     resolution: {integrity: sha512-uuHUXJeOy/inWSDrwD0Cwax2rovpxYllDhM2RWh+6mVpQuNmZ3uw6IVg6dA2G1rOe24Ebs+Y9SzEogo+jYN7vw==}
 
-  '@api.global/typedrequest@3.1.11':
-    resolution: {integrity: sha512-j8EO3na0WMw8pFkAfEaEui2a4TaAL1G/dv1CYl8LEPXckSKkl1BCAS1kFOW2xuI9pwZkmSqlo3xpQ3KmkmHaGQ==}
+  '@api.global/typedrequest@3.2.0':
+    resolution: {integrity: sha512-XOPYK7vKy4GJupKcWlgNGR+TZRBncs1FAnDMFH2aIc9Z9KhZVYh1vpIKhn96Gn+E0n4mJTNZmF+CpRlPsjaV9w==}
 
   '@api.global/typedserver@3.0.80':
     resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
@@ -1271,8 +1256,8 @@ packages:
   '@push.rocks/smartyaml@3.0.4':
     resolution: {integrity: sha512-1JRt+hnoc2zHw3AW+vXKlCdSVwqOmY/01fu+2HBviS0UDjoZCa+/rp6E3GaQb5lEEafKi8ENbffAfjXXp3N2xQ==}
 
-  '@push.rocks/taskbuffer@3.4.0':
-    resolution: {integrity: sha512-Rvwr1CzYztB9PMboojRzVSq3xGp8288kvtvWx4Mg3rvps913znMja1UOjNn52ivOxu3dHUNYE3NDSP+j84cUWQ==}
+  '@push.rocks/taskbuffer@3.5.0':
+    resolution: {integrity: sha512-Y9WwIEIyp6oVFdj06j84tfrZIvjhbMb3DF52rYxlTeYLk3W7RPhSg1bGPCbtkXWeKdBrSe37V90BkOG7Qq8Pqg==}
 
   '@push.rocks/webrequest@3.0.37':
     resolution: {integrity: sha512-fLN7kP6GeHFxE4UH4r9C9pjcQb0QkJxHeAMwXvbOqB9hh0MFNKhtGU7GoaTn8SVRGRMPc9UqZVNwo6u5l8Wn0A==}
@@ -3911,7 +3896,7 @@ snapshots:
 
   '@api.global/typedrequest-interfaces@3.0.19': {}
 
-  '@api.global/typedrequest@3.1.11':
+  '@api.global/typedrequest@3.2.0':
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isounique': 1.0.5
@@ -3925,7 +3910,7 @@ snapshots:
 
   '@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@api.global/typedrequest-interfaces': 3.0.19
       '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.1.2)
       '@cloudflare/workers-types': 4.20251202.0
@@ -3952,7 +3937,7 @@ snapshots:
       '@push.rocks/smartsitemap': 2.0.4
       '@push.rocks/smartstream': 3.2.5
       '@push.rocks/smarttime': 4.1.1
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@push.rocks/webrequest': 3.0.37
       '@push.rocks/webstore': 2.0.20
       '@tsclass/tsclass': 9.3.0
@@ -3973,7 +3958,7 @@ snapshots:
 
   '@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isohash': 2.0.1
       '@push.rocks/smartjson': 5.2.0
@@ -3993,7 +3978,7 @@ snapshots:
 
   '@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isohash': 2.0.1
       '@push.rocks/smartdelay': 3.0.5
@@ -5274,14 +5259,14 @@ snapshots:
 
   '@design.estate/dees-comms@1.0.27':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/smartdelay': 3.0.5
       broadcast-channel: 7.0.0
 
   '@design.estate/dees-domtools@2.0.65':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@design.estate/dees-comms': 1.0.27
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
@@ -5303,7 +5288,7 @@ snapshots:
 
   '@design.estate/dees-domtools@2.3.6':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@design.estate/dees-comms': 1.0.27
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
@@ -5864,7 +5849,7 @@ snapshots:
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smartunique': 3.0.9
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@tsclass/tsclass': 9.3.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -5904,7 +5889,7 @@ snapshots:
 
   '@push.rocks/qenv@6.1.3':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@configvault.io/interfaces': 1.0.17
       '@push.rocks/smartfile': 11.2.7
       '@push.rocks/smartlog': 3.1.10
@@ -6030,7 +6015,7 @@ snapshots:
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarttime': 4.1.1
       '@push.rocks/smartunique': 3.0.9
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@tsclass/tsclass': 9.3.0
       mongodb: 6.21.0(@aws-sdk/credential-providers@3.787.0)(socks@2.8.7)
     transitivePeerDependencies:
@@ -6391,7 +6376,7 @@ snapshots:
 
   '@push.rocks/smartserve@1.1.2':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.0
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0
       '@push.rocks/smartlog': 3.1.10
@@ -6538,7 +6523,7 @@ snapshots:
     dependencies:
       yaml: 2.8.1
 
-  '@push.rocks/taskbuffer@3.4.0':
+  '@push.rocks/taskbuffer@3.5.0':
     dependencies:
       '@design.estate/dees-element': 2.1.3
       '@push.rocks/lik': 6.2.2

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@api.global/typedserver',
-  version: '7.1.0',
+  version: '7.8.0',
   description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }

ts/classes.typedserver.ts

@@ -56,6 +56,12 @@ export interface IServerOptions {
   feedMetadata?: plugins.smartfeed.IFeedOptions;
   articleGetterFunction?: () => Promise<plugins.tsclass.content.IArticle[]>;
   blockWaybackMachine?: boolean;
+
+  /**
+   * SPA fallback - serve index.html for non-file routes (e.g., /login, /dashboard)
+   * Useful for single-page applications with client-side routing
+   */
+  spaFallback?: boolean;
 }
 
 export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'ALL';
@@ -381,6 +387,25 @@ export class TypedServer {
     };
   }
 
+  /**
+   * Add CORS headers to a response
+   */
+  private addCorsHeaders(response: Response): Response {
+    if (!this.options.cors) return response;
+
+    const headers = new Headers(response.headers);
+    headers.set('Access-Control-Allow-Origin', '*');
+    headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
+    headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
+    headers.set('Access-Control-Max-Age', '86400');
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers
+    });
+  }
+
   /**
    * Main request handler - routes to appropriate sub-handlers
    */
@@ -389,6 +414,25 @@ export class TypedServer {
     const path = url.pathname;
     const method = request.method.toUpperCase() as THttpMethod;
 
+    // Handle OPTIONS preflight for CORS
+    if (method === 'OPTIONS' && this.options.cors) {
+      return this.addCorsHeaders(new Response(null, { status: 204 }));
+    }
+
+    // Process the request and wrap response with CORS headers
+    const response = await this.handleRequestInternal(request, url, path, method);
+    return this.addCorsHeaders(response);
+  }
+
+  /**
+   * Internal request handler - routes to appropriate sub-handlers
+   */
+  private async handleRequestInternal(
+    request: Request,
+    url: URL,
+    path: string,
+    method: THttpMethod
+  ): Promise<Response> {
     // First, try to match via ControllerRegistry (decorated routes)
     const match = plugins.smartserve.ControllerRegistry.matchRoute(path, method);
     if (match) {
@@ -453,6 +497,41 @@ export class TypedServer {
       });
     }
 
+    // SPA fallback - serve index.html for non-file routes
+    if (this.options.spaFallback && this.options.serveDir && method === 'GET' && !path.includes('.')) {
+      try {
+        const indexPath = plugins.path.join(this.options.serveDir, 'index.html');
+        let html = await plugins.fsInstance.file(indexPath).encoding('utf8').read() as string;
+
+        // Inject reload script if enabled
+        if (this.options.injectReload && html.includes('<head>')) {
+          const injection = `<head>
+                <!-- injected by @apiglobal/typedserver start -->
+                <script async defer type="module" src="/typedserver/devtools"></script>
+                <script>
+                  globalThis.typedserver = {
+                    lastReload: ${this.lastReload},
+                    versionInfo: ${JSON.stringify({}, null, 2)},
+                  }
+                </script>
+                <!-- injected by @apiglobal/typedserver stop -->
+              `;
+          html = html.replace('<head>', injection);
+        }
+
+        return new Response(html, {
+          status: 200,
+          headers: {
+            'Content-Type': 'text/html; charset=utf-8',
+            'Cache-Control': 'no-cache, no-store, must-revalidate',
+            appHash: this.serveHash,
+          },
+        });
+      } catch {
+        // Fall through to 404
+      }
+    }
+
     // Not found
     return new Response('Not Found', { status: 404 });
   }

ts/controllers/controller.builtin.ts

@@ -124,6 +124,65 @@ export class BuiltInRoutesController {
     });
   }
 
+  @plugins.smartserve.Get('/sw-dash')
+  async getSwDash(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
+    // Import shared HTML from interfaces
+    const { SW_DASH_HTML } = await import('../../dist_ts_interfaces/serviceworker.js');
+    return new Response(SW_DASH_HTML, {
+      status: 200,
+      headers: { 'Content-Type': 'text/html' },
+    });
+  }
+
+  // SW-dash data routes - return empty/unavailable when SW isn't active
+  @plugins.smartserve.Get('/sw-dash/metrics')
+  async getSwDashMetrics(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active', data: null }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @plugins.smartserve.Get('/sw-dash/resources')
+  async getSwDashResources(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active', resources: [], domains: [], contentTypes: [], resourceCount: 0 }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @plugins.smartserve.Get('/sw-dash/events')
+  async getSwDashEvents(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active', events: [], total: 0 }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @plugins.smartserve.Get('/sw-dash/events/count')
+  async getSwDashEventsCount(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active', count: 0 }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @plugins.smartserve.Get('/sw-dash/cumulative-metrics')
+  async getSwDashCumulativeMetrics(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active', data: null }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @plugins.smartserve.Get('/sw-dash/speedtest')
+  async getSwDashSpeedtest(): Promise<Response> {
+    return new Response(JSON.stringify({ error: 'Service worker not active - speedtest unavailable' }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
   @plugins.smartserve.Get('/sw-dash/bundle.js')
   async getSwDashBundle(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
     try {
@@ -144,4 +203,25 @@ export class BuiltInRoutesController {
       return new Response('SW-Dash bundle not found', { status: 404 });
     }
   }
+
+  @plugins.smartserve.Get('/serviceworker.bundle.js')
+  async getServiceWorkerBundle(): Promise<Response> {
+    try {
+      const bundleContent = (await plugins.fsInstance
+        .file(paths.serviceworkerBundlePath)
+        .encoding('utf8')
+        .read()) as string;
+
+      return new Response(bundleContent, {
+        status: 200,
+        headers: {
+          'Content-Type': 'text/javascript',
+          'Cache-Control': 'no-cache',
+        },
+      });
+    } catch (error) {
+      console.error('Failed to serve serviceworker bundle:', error);
+      return new Response('ServiceWorker bundle not found', { status: 404 });
+    }
+  }
 }

ts/controllers/controller.typedrequest.ts

@@ -11,7 +11,7 @@ export class TypedRequestController {
     this.typedRouter = typedRouter;
   }
 
-  @plugins.smartserve.Post('/')
+  @plugins.smartserve.Post('')
   async handleTypedRequest(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
     try {
       const response = await this.typedRouter.routeAndAddResponse(ctx.body as plugins.typedrequestInterfaces.ITypedRequest);
@@ -31,4 +31,15 @@ export class TypedRequestController {
       });
     }
   }
+
+  @plugins.smartserve.Head('')
+  async handleTypedRequestHead(): Promise<Response> {
+    // HEAD request for online checking from service worker
+    return new Response(null, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
 }

ts/index.ts

@@ -1,15 +1,7 @@
 import * as plugins from './plugins.js';
 
-import * as servertools from './servertools/index.js';
-
-export { servertools };
-
 export * from './classes.typedserver.js';
 
-// Type helpers - using native Web API Request/Response types
-// Native Request and Response are available in Node.js 18+ and all modern browsers
-// Legacy Express types are available via servertools for backward compatibility
-
 // lets export utilityservers
 import * as utilityservers from './utilityservers/index.js';
 export { utilityservers };

ts/paths.ts

@@ -9,6 +9,7 @@ export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inje
 export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');
 
 export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+export const serviceworkerBundlePath = plugins.path.join(serviceworkerBundleDir, './serviceworker.bundle.js');
 
 export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
 export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');

ts/plugins.ts

@@ -65,12 +65,3 @@ export const fsInstance = new smartfs.SmartFs(new smartfs.SmartFsProviderNode())
 import * as smartserve from '@push.rocks/smartserve';
 
 export { smartserve };
-
-// Legacy Express dependencies - kept for backward compatibility with deprecated servertools
-// These will be removed in the next major version
-import express from 'express';
-import bodyParser from 'body-parser';
-import cors from 'cors';
-import expressForceSsl from 'express-force-ssl';
-
-export { express, bodyParser, cors, expressForceSsl };

ts/servertools/classes.compressor.ts

@@ -1,131 +0,0 @@
-import * as plugins from '../plugins.js';
-
-export type TCompressionMethod = 'gzip' | 'deflate' | 'br' | 'none';
-export interface ICompressionResult {
-  result: Buffer;
-  compressionMethod: TCompressionMethod;
-}
-
-export class Compressor {
-  private _cache: Map<string, Buffer>;
-  private MAX_CACHE_SIZE: number = 100 * 1024 * 1024; // 100 MB
-
-  constructor() {
-    this._cache = new Map<string, Buffer>();
-  }
-
-  private _addToCache(key: string, value: Buffer) {
-    this._cache.set(key, value);
-    this._manageCacheSize();
-  }
-
-  private _manageCacheSize() {
-    let currentSize = Array.from(this._cache.values()).reduce((acc, buffer) => acc + buffer.length, 0);
-
-    while (currentSize > this.MAX_CACHE_SIZE) {
-      const firstKey = this._cache.keys().next().value;
-      const firstValue = this._cache.get(firstKey)!;
-      currentSize -= firstValue.length;
-      this._cache.delete(firstKey);
-    }
-  }
-
-  public async compressContent(
-    content: Buffer,
-    method: 'gzip' | 'deflate' | 'br' | 'none'
-  ): Promise<Buffer> {
-    const cacheKey = content.toString('base64') + method;
-    const cachedResult = this._cache.get(cacheKey);
-
-    if (cachedResult) {
-      return cachedResult;
-    }
-
-    return new Promise((resolve, reject) => {
-      const callback = (err: Error | null, result: Buffer) => {
-        if (err) reject(err);
-        else {
-          this._addToCache(cacheKey, result);
-          resolve(result);
-        }
-      };
-
-      switch (method) {
-        case 'gzip':
-          plugins.zlib.gzip(content, {
-            level: 1,
-          },callback,);
-          break;
-        case 'br':
-          plugins.zlib.brotliCompress(content, {}, callback);
-          break;
-        case 'deflate':
-          plugins.zlib.deflate(content, callback);
-          break;
-        default:
-          this._addToCache(cacheKey, content);
-          resolve(content);
-      }
-    });
-  }
-
-  public determineCompression(acceptEncoding: string | string[], preferredCompressionMethodsArg: TCompressionMethod[] = []) {
-    // Ensure acceptEncoding is a single string
-    const encodingString = Array.isArray(acceptEncoding)
-      ? acceptEncoding.join(', ')
-      : acceptEncoding;
-
-    let compressionMethod: TCompressionMethod = 'none';
-
-    // Prioritize preferred compression methods if provided
-    for (const preferredMethod of preferredCompressionMethodsArg) {
-      if (new RegExp(`\\b${preferredMethod}\\b`).test(encodingString)) {
-        return preferredMethod;
-      }
-    }
-
-    // Fallback to default prioritization if no preferred method matches
-    if (/\bbr\b/.test(encodingString)) {
-      compressionMethod = 'br';
-    } else if (/\bgzip\b/.test(encodingString)) {
-      compressionMethod = 'gzip';
-    } else if (/\bdeflate\b/.test(encodingString)) {
-      compressionMethod = 'deflate';
-    }
-
-    return compressionMethod;
-  }
-
-  public async maybeCompress(requestHeaders: plugins.http.IncomingHttpHeaders, content: Buffer, preferredCompressionMethodsArg?: TCompressionMethod[]): Promise<ICompressionResult> {
-    const acceptEncoding = requestHeaders['accept-encoding'];
-    const compressionMethod = this.determineCompression(acceptEncoding, preferredCompressionMethodsArg);
-    const result = await this.compressContent(content, compressionMethod);
-    return {
-      result,
-      compressionMethod,
-    };
-  }
-
-  public createCompressionStream(method: 'gzip' | 'deflate' | 'br' | 'none') {
-    let compressionStream: any;
-    switch (method) {
-      case 'gzip':
-        compressionStream = plugins.zlib.createGzip();
-        return compressionStream;
-      case 'br':
-        compressionStream = plugins.zlib.createBrotliCompress({
-          chunkSize: 16 * 1024,
-          params: {
-            
-          },
-        });
-        return compressionStream;
-      case 'deflate':
-        compressionStream = plugins.zlib.createDeflate();
-        return compressionStream;
-      default:
-        compressionStream = plugins.smartstream.createPassThrough();
-        return compressionStream;
-    }
-  }
-}

ts/servertools/classes.feed.ts

@@ -1,35 +0,0 @@
-import { Handler } from './classes.handler.js';
-import { Server } from './classes.server.js';
-import * as plugins from '../plugins.js';
-
-export class Feed {
-  public smartexpressRef: Server;
-  public smartfeedInstance = new plugins.smartfeed.Smartfeed();
-
-  public feedHandler = new Handler('GET', async (req, res) => {
-    if (!this.smartexpressRef.options.feedMetadata) {
-      res.status(500);
-      res.write('feed metadata is missing');
-      res.end();
-      return;
-    }
-    if (!this.smartexpressRef.options.articleGetterFunction) {
-      res.status(500);
-      res.write('no article getter function defined.');
-      res.end();
-      return;
-    }
-    const xmlString = await this.smartfeedInstance.createFeedFromArticleArray(
-      this.smartexpressRef.options.feedMetadata,
-      await this.smartexpressRef.options.articleGetterFunction()
-    );
-    res.type('.xml');
-    res.write(xmlString);
-    res.end();
-  });
-
-  constructor(smartexpressRefArg: Server) {
-    this.smartexpressRef = smartexpressRefArg;
-    this.smartexpressRef.addRouteBefore('/feed', this.feedHandler);
-  }
-}

ts/servertools/classes.handler.ts

@@ -1,17 +0,0 @@
-import * as plugins from '../plugins.js';
-import { type Request, type Response } from 'express';
-
-export interface IHandlerFunction {
-  (requestArg: Request, responseArg: Response): void;
-}
-
-export type THttpMethods = 'ALL' | 'GET' | 'POST' | 'PUT' | 'DELETE';
-
-export class Handler {
-  httpMethod: THttpMethods;
-  handlerFunction: IHandlerFunction;
-  constructor(httpMethodArg: THttpMethods, handlerArg: IHandlerFunction) {
-    this.httpMethod = httpMethodArg;
-    this.handlerFunction = handlerArg;
-  }
-}

ts/servertools/classes.handlerproxy.ts

@@ -1,132 +0,0 @@
-import * as plugins from '../plugins.js';
-import { Handler } from './classes.handler.js';
-
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-
-export class HandlerProxy extends Handler {
-  /**
-   * The constuctor of HandlerProxy
-   * @param remoteMountPointArg
-   */
-  constructor(
-    remoteMountPointArg: string,
-    optionsArg?: {
-      responseModifier?: interfaces.TResponseModifier;
-      headers?: { [key: string]: string };
-    }
-  ) {
-    super('ALL', async (req, res) => {
-      // Extract the path using Express 5's params or fallback methods
-      let relativeRequestPath: string;
-      if (req.params && req.params.splat !== undefined) {
-        // Express 5 wildcard route (/*splat or /{*splat})
-        // Handle array values - join them if array, otherwise use as-is
-        relativeRequestPath = Array.isArray(req.params.splat) ? req.params.splat.join('/') : String(req.params.splat || '');
-      } else if (req.params && req.params[0] !== undefined) {
-        // Numbered parameter fallback
-        relativeRequestPath = Array.isArray(req.params[0]) ? req.params[0].join('/') : String(req.params[0] || '');
-      } else if (req.baseUrl) {
-        // If there's a baseUrl, remove it from the path
-        relativeRequestPath = req.path.slice(req.baseUrl.length);
-      } else if (req.route && req.route.path === '/') {
-        // Root route - use full path minus leading slash
-        relativeRequestPath = req.path.slice(1);
-      } else {
-        // Fallback to the original slicing logic for compatibility
-        relativeRequestPath = req.path.slice(req.route.path.length - 1);
-      }
-      
-      // Ensure relativeRequestPath is a string and has no leading slash
-      relativeRequestPath = String(relativeRequestPath || '');
-      if (relativeRequestPath.startsWith('/')) {
-        relativeRequestPath = relativeRequestPath.slice(1);
-      }
-      const proxyRequestUrl = remoteMountPointArg + relativeRequestPath;
-      console.log(`proxy ${req.path} to ${proxyRequestUrl}`);
-      let proxiedResponse: plugins.smartrequest.ICoreResponse;
-      try {
-        const smartRequest = plugins.smartrequest.SmartRequest.create()
-          .url(proxyRequestUrl);
-        
-        // Execute request based on method
-        switch (req.method.toUpperCase()) {
-          case 'GET':
-            proxiedResponse = await smartRequest.get();
-            break;
-          case 'POST':
-            proxiedResponse = await smartRequest.post();
-            break;
-          case 'PUT':
-            proxiedResponse = await smartRequest.put();
-            break;
-          case 'DELETE':
-            proxiedResponse = await smartRequest.delete();
-            break;
-          case 'PATCH':
-            proxiedResponse = await smartRequest.patch();
-            break;
-          default:
-            // For other methods, default to GET
-            proxiedResponse = await smartRequest.get();
-            break;
-        }
-      } catch {
-        res.end('failed to fullfill request');
-        return;
-      }
-      const headers = proxiedResponse.headers;
-      for (const header of Object.keys(headers)) {
-        res.set(header, headers[header] as string);
-      }
-
-      // set additional headers
-      if (optionsArg && optionsArg.headers) {
-        for (const key of Object.keys(optionsArg.headers)) {
-          res.set(key, optionsArg.headers[key]);
-        }
-      }
-
-      // Get response body as buffer
-      let responseToSend: Buffer;
-      try {
-        const arrayBuffer = await proxiedResponse.arrayBuffer();
-        responseToSend = Buffer.from(arrayBuffer);
-      } catch {
-        // If we can't get arrayBuffer, try text
-        try {
-          const text = await proxiedResponse.text();
-          responseToSend = Buffer.from(text);
-        } catch {
-          // Provide a default empty buffer if body cannot be read
-          responseToSend = Buffer.from('');
-        }
-      }
-
-      if (optionsArg && optionsArg.responseModifier) {
-        const modifiedResponse = await optionsArg.responseModifier({
-          headers: res.getHeaders(),
-          path: req.path,
-          responseContent: responseToSend,
-        });
-
-        // headers
-        for (const key of Object.keys(res.getHeaders())) {
-          if (!modifiedResponse.headers[key]) {
-            res.removeHeader(key);
-          }
-        }
-
-        for (const key of Object.keys(modifiedResponse.headers)) {
-          res.setHeader(key, modifiedResponse.headers[key]);
-        }
-
-        // responseContent
-        responseToSend = modifiedResponse.responseContent;
-      }
-
-      res.status(200);
-      res.write(responseToSend);
-      res.end();
-    });
-  }
-}

ts/servertools/classes.handlerstatic.ts

@@ -1,168 +0,0 @@
-import * as plugins from '../plugins.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-
-import { Handler } from './classes.handler.js';
-import { Compressor, type TCompressionMethod, type ICompressionResult } from './classes.compressor.js';
-
-export class HandlerStatic extends Handler {
-  public compressor = new Compressor();
-  constructor(
-    pathArg: string,
-    optionsArg?: {
-      requestModifier?: interfaces.TRequestModifier;
-      responseModifier?: interfaces.TResponseModifier;
-      headers?: { [key: string]: string };
-      serveIndexHtmlDefault?: boolean;
-      enableCompression?: boolean;
-      preferredCompressionMethod?: TCompressionMethod;
-    }
-  ) {
-    super('GET', async (req, res) => {
-      let requestPath = req.path;
-      let requestHeaders = req.headers;
-      let requestBody = req.body;
-      let travelData: unknown;
-      if (optionsArg && optionsArg.requestModifier) {
-        const modifiedRequest = await optionsArg.requestModifier({
-          headers: requestHeaders,
-          path: requestPath,
-          body: requestBody,
-        });
-
-        requestHeaders = modifiedRequest.headers;
-        requestPath = modifiedRequest.path;
-        requestBody = modifiedRequest.body;
-        travelData = modifiedRequest.travelData;
-      }
-
-      // lets compute some paths
-      // Extract the path using Express 5's params or fallback methods
-      let filePath: string;
-      if (req.params && req.params.splat !== undefined) {
-        // Express 5 wildcard route (/*splat or /{*splat})
-        // Handle array values - join them if array, otherwise use as-is
-        filePath = Array.isArray(req.params.splat) ? req.params.splat.join('/') : String(req.params.splat || '');
-      } else if (req.params && req.params[0] !== undefined) {
-        // Numbered parameter fallback
-        filePath = Array.isArray(req.params[0]) ? req.params[0].join('/') : String(req.params[0] || '');
-      } else if (req.baseUrl) {
-        // If there's a baseUrl, remove it from the path
-        filePath = requestPath.slice(req.baseUrl.length);
-      } else if (req.route && req.route.path === '/') {
-        // Root route - use full path minus leading slash
-        filePath = requestPath.slice(1);
-      } else {
-        // Fallback to the original slicing logic for compatibility
-        filePath = requestPath.slice(req.route.path.length - 1);
-      }
-      
-      // Ensure filePath is a string and has no leading slash
-      filePath = String(filePath || '');
-      if (filePath.startsWith('/')) {
-        filePath = filePath.slice(1);
-      }
-      if (requestPath === '') {
-        console.log('replaced root with index.html');
-        filePath = 'index.html';
-      }
-      console.log(filePath);
-      const joinedPath = plugins.path.join(pathArg, filePath);
-      const defaultPath = plugins.path.join(pathArg, 'index.html');
-      let parsedPath = plugins.path.parse(joinedPath);
-      let usedPath: string;
-
-      // important security checks
-      if (
-        requestPath.includes('..') || // don't allow going up the filePath
-        requestPath.includes('~') || // don't allow referencing of home directory
-        !joinedPath.startsWith(pathArg) // make sure the joined path is within the directory
-      ) {
-        res.writeHead(500);
-        res.end();
-        return;
-      }
-
-      // set additional headers
-      if (optionsArg && optionsArg.headers) {
-        for (const key of Object.keys(optionsArg.headers)) {
-          res.set(key, optionsArg.headers[key]);
-        }
-      }
-
-      // lets actually care about serving, if security checks pass
-      let fileBuffer: Buffer;
-      try {
-        fileBuffer = await plugins.fsInstance.file(joinedPath).read() as Buffer;
-        usedPath = joinedPath;
-      } catch (err) {
-        // try serving index.html instead
-        console.log(`could not resolve ${joinedPath}`);
-        if (optionsArg && optionsArg.serveIndexHtmlDefault) {
-          console.log(`serving default path ${defaultPath} instead of ${joinedPath}`);
-          try {
-            parsedPath = plugins.path.parse(defaultPath);
-            fileBuffer = await plugins.fsInstance.file(defaultPath).read() as Buffer;
-            usedPath = defaultPath;
-          } catch (err) {
-            res.writeHead(500);
-            res.end('File not found!');
-            return;
-          }
-        } else {
-          res.writeHead(500);
-          res.end('File not found!');
-          return;
-        }
-      }
-
-      res.type(parsedPath.ext);
-
-      const headers = res.getHeaders();
-
-      // lets modify the response at last
-      if (optionsArg && optionsArg.responseModifier) {
-        const modifiedResponse = await optionsArg.responseModifier({
-          headers: res.getHeaders(),
-          path: usedPath,
-          responseContent: fileBuffer,
-          travelData,
-        });
-
-        // headers
-        for (const key of Object.keys(res.getHeaders())) {
-          if (!modifiedResponse.headers[key]) {
-            res.removeHeader(key);
-          }
-        }
-
-        for (const key of Object.keys(modifiedResponse.headers)) {
-          res.setHeader(key, modifiedResponse.headers[key]);
-        }
-
-        // responseContent
-        fileBuffer = modifiedResponse.responseContent;
-      }
-
-      // lets finally deal with compression
-      let compressionResult: ICompressionResult;
-
-      if (optionsArg && optionsArg.enableCompression) {
-        compressionResult = await this.compressor.maybeCompress(requestHeaders, fileBuffer, [optionsArg.preferredCompressionMethod]);
-      } else {
-        compressionResult = {
-          compressionMethod: 'none',
-          result: fileBuffer,
-        };
-      }
-
-      res.status(200);
-      if (compressionResult?.compressionMethod) {
-        res.header('Content-Encoding', compressionResult.compressionMethod);
-        res.write(compressionResult.result);
-      } else {
-        res.write(fileBuffer);
-      }
-      res.end();
-    });
-  }
-}

ts/servertools/classes.handlertypedrouter.ts

@@ -1,19 +0,0 @@
-import * as plugins from '../plugins.js';
-import { Handler } from './classes.handler.js';
-
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-
-export class HandlerTypedRouter extends Handler {
-  /**
-   * The constuctor of HandlerProxy
-   * @param remoteMountPointArg
-   */
-  constructor(typedrouter: plugins.typedrequest.TypedRouter) {
-    super('POST', async (req, res) => {
-      const response = await typedrouter.routeAndAddResponse(req.body);
-      res.type('json');
-      res.write(plugins.smartjson.stringify(response));
-      res.end();
-    });
-  }
-}

ts/servertools/classes.route.ts

@@ -1,37 +0,0 @@
-import * as plugins from '../plugins.js';
-import { Handler } from './classes.handler.js';
-import { Server } from './classes.server.js';
-
-import { type IRoute as IExpressRoute } from 'express';
-
-export class Route {
-  public routeString: string;
-
-  /**
-   * an object map of handlers
-   * Why multiple? Because GET, POST, PUT, DELETE, etc. can all have different handlers
-   */
-  public handlerObjectMap = new plugins.lik.ObjectMap<Handler>();
-  
-  public expressMiddlewareObjectMap = new plugins.lik.ObjectMap<any>();
-  public expressRoute: IExpressRoute; // will be set to server route on server start
-  constructor(ServerArg: Server, routeStringArg: string) {
-    this.routeString = routeStringArg;
-  }
-
-  /**
-   * add a handler to do something with requests
-   * @param handlerArg
-   */
-  public addHandler(handlerArg: Handler) {
-    this.handlerObjectMap.add(handlerArg);
-  }
-
-  /**
-   * add a express middleware
-   * @param middlewareArg
-   */
-  public addExpressMiddleWare(middlewareArg: plugins.express.Application) {
-    this.expressMiddlewareObjectMap.add(middlewareArg);
-  }
-}

ts/servertools/classes.server.ts

@@ -1,345 +0,0 @@
-import * as plugins from '../plugins.js';
-
-import { Route } from './classes.route.js';
-import { Handler } from './classes.handler.js';
-import { HandlerTypedRouter } from './classes.handlertypedrouter.js';
-
-// export types
-import { setupRobots } from './tools.robots.js';
-import { setupManifest } from './tools.manifest.js';
-import { Sitemap } from './classes.sitemap.js';
-import { Feed } from './classes.feed.js';
-import { type IServerOptions } from '../classes.typedserver.js';
-export type TServerStatus = 'initiated' | 'running' | 'stopped';
-
-/**
- * can be used to spawn a server to answer http/https calls
- * for constructor options see [[IServerOptions]]
- */
-export class Server {
-  public httpServer: plugins.http.Server | plugins.https.Server;
-  public expressAppInstance: plugins.express.Application;
-  public routeObjectMap = new Array<Route>();
-  public options: IServerOptions;
-  public serverStatus: TServerStatus = 'initiated';
-
-  public feed: Feed;
-  public sitemap: Sitemap;
-
-  public executeAfterStartFunctions: (() => Promise<void>)[] = [];
-
-  // do stuff when server is ready
-  private startedDeferred = plugins.smartpromise.defer();
-  // tslint:disable-next-line:member-ordering
-  public startedPromise = this.startedDeferred.promise;
-
-  private socketMap = new plugins.lik.ObjectMap<plugins.net.Socket>();
-
-  constructor(optionsArg: IServerOptions) {
-    this.options = {
-      ...optionsArg,
-    };
-  }
-
-  /**
-   * allows updating of server options
-   * @param optionsArg
-   */
-  public updateServerOptions(optionsArg: IServerOptions) {
-    Object.assign(this.options, optionsArg);
-  }
-
-  public addTypedRequest(typedrouter: plugins.typedrequest.TypedRouter) {
-    this.addRoute('/typedrequest', new HandlerTypedRouter(typedrouter));
-  }
-
-  /**
-   * @deprecated This method is deprecated. Use TypedServer with SmartServe integration instead.
-   * TypedSocket v4 no longer supports attaching to an existing Express server.
-   */
-  public addTypedSocket(typedrouter: plugins.typedrequest.TypedRouter): void {
-    console.warn(
-      '[DEPRECATED] servertools.Server.addTypedSocket() is deprecated and has no effect. ' +
-      'Use TypedServer with SmartServe integration for WebSocket support.'
-    );
-    // TypedSocket v4 creates its own server, which would conflict with Express.
-    // This method is now a no-op for backward compatibility.
-  }
-
-  public addRoute(routeStringArg: string, handlerArg?: Handler) {
-    const route = new Route(this, routeStringArg);
-    if (handlerArg) {
-      route.addHandler(handlerArg);
-    }
-    this.routeObjectMap.push(route);
-    return route;
-  }
-
-  public addRouteBefore(routeStringArg: string, handlerArg?: Handler) {
-    const route = new Route(this, routeStringArg);
-    if (handlerArg) {
-      route.addHandler(handlerArg);
-    }
-    this.routeObjectMap.unshift(route);
-    return route;
-  }
-
-  /**
-   * starts the server and sets up the routes
-   * @param portArg
-   * @param doListen
-   */
-  public async start(portArg: number | string = this.options.port, doListen = true) {
-    const done = plugins.smartpromise.defer();
-
-    if (typeof portArg === 'string') {
-      portArg = parseInt(portArg);
-    }
-
-    this.expressAppInstance = plugins.express();
-    if (!this.httpServer && (!this.options.privateKey || !this.options.publicKey)) {
-      console.log('Got no SSL certificates. Please ensure encryption using e.g. a reverse proxy');
-      this.httpServer = plugins.http.createServer(this.expressAppInstance);
-    } else if (!this.httpServer) {
-      console.log('Got SSL certificate. Using it for the http server');
-      this.httpServer = plugins.https.createServer(
-        {
-          key: this.options.privateKey,
-          cert: this.options.publicKey,
-        },
-        this.expressAppInstance
-      );
-    } else {
-      console.log('Using externally supplied http server');
-    }
-    this.httpServer.keepAliveTimeout = 600 * 1000;
-    this.httpServer.headersTimeout = 20 * 1000;
-
-    // general request handlling
-    this.expressAppInstance.use((req, res, next) => {
-      next();
-    });
-
-    // forceSsl
-    if (this.options.forceSsl) {
-      this.expressAppInstance.set('forceSSLOptions', {
-        enable301Redirects: true,
-        trustXFPHeader: true,
-        sslRequiredMessage: 'SSL Required.',
-      });
-      this.expressAppInstance.use(plugins.expressForceSsl);
-    }
-
-    // cors
-    if (this.options.cors) {
-      const cors = plugins.cors({
-        allowedHeaders: '*',
-        methods: '*',
-        origin: '*',
-      });
-
-      this.expressAppInstance.use(cors);
-      this.expressAppInstance.options('/{*splat}', cors);
-    }
-
-    this.expressAppInstance.use((req, res, next) => {
-      res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
-      res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
-      res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
-      res.setHeader('Access-Control-Allow-Origin', '*');
-      res.setHeader('SERVEZONE_ROUTE', 'LOSSLESS_ORIGIN_CONTAINER');
-      res.setHeader('Cache-Control', 'no-cache');
-      res.setHeader('Expires', new Date(Date.now()).toUTCString());
-      next();
-    });
-
-    // body parsing
-    this.expressAppInstance.use(async (req, res, next) => {
-      if (req.headers['content-type'] === 'application/json') {
-        let data = '';
-        req.on('data', chunk => {
-          data += chunk;
-        });
-        req.on('end', () => {
-          try {
-            req.body = plugins.smartjson.parse(data);
-            next();
-          } catch (error) {
-            res.status(400).send('Invalid JSON');
-          }
-        });
-      } else {
-        next();
-      }
-    });
-    this.expressAppInstance.use(plugins.bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
-
-    // robots
-    if (this.options.robots && this.options.domain) {
-      await setupRobots(this, this.options.domain);
-    }
-
-    // manifest.json
-    if (this.options.manifest) {
-      await setupManifest(this.expressAppInstance, this.options.manifest);
-    }
-
-    // sitemaps
-    if (this.options.sitemap) {
-      this.sitemap = new Sitemap(this);
-    }
-
-    if (this.options.feed) {
-      // feed
-      this.feed = new Feed(this);
-    }
-
-    // appVersion
-    if (this.options.appVersion) {
-      this.expressAppInstance.use((req, res, next) => {
-        res.set('appversion', this.options.appVersion);
-        next();
-      });
-      this.addRoute(
-        '/appversion',
-        new Handler('GET', async (req, res) => {
-          res.write(this.options.appVersion);
-          res.end();
-        })
-      );
-    }
-
-    // set up routes in for express
-    await this.routeObjectMap.forEach(async (routeArg) => {
-      console.log(
-        `"${routeArg.routeString}" maps to ${routeArg.handlerObjectMap.getArray().length} handlers`
-      );
-      const expressRoute = this.expressAppInstance.route(routeArg.routeString);
-      routeArg.handlerObjectMap.forEach(async (handler) => {
-        console.log(` -> ${handler.httpMethod}`);
-        switch (handler.httpMethod) {
-          case 'GET':
-            expressRoute.get(handler.handlerFunction);
-            return;
-          case 'POST':
-            expressRoute.post(handler.handlerFunction);
-            return;
-          case 'PUT':
-            expressRoute.put(handler.handlerFunction);
-            return;
-          case 'ALL':
-            expressRoute.all(handler.handlerFunction);
-            return;
-          case 'DELETE':
-            expressRoute.delete(handler.handlerFunction);
-            return;
-          default:
-            return;
-        }
-      });
-    });
-
-    if (this.options.defaultAnswer) {
-      this.expressAppInstance.get('/', async (request, response) => {
-        response.send(await this.options.defaultAnswer());
-      });
-    }
-
-    this.httpServer.on('connection', (connection: plugins.net.Socket) => {
-      this.socketMap.add(connection);
-      console.log(`added connection. now ${this.socketMap.getArray().length} sockets connected.`);
-      
-      const closeListener = () => {
-        console.log('connection closed');
-        cleanupConnection();
-      };
-      
-      const errorListener = () => {
-        console.log('connection errored');
-        cleanupConnection();
-      };
-      
-      const endListener = () => {
-        console.log('connection ended');
-        cleanupConnection();
-      };
-      
-      const timeoutListener = () => {
-        console.log('connection timed out');
-        cleanupConnection();
-      };
-      
-      connection.addListener('close', closeListener);
-      connection.addListener('error', errorListener);
-      connection.addListener('end', endListener);
-      connection.addListener('timeout', timeoutListener);
-      
-      const cleanupConnection = async () => {
-        connection.removeListener('close', closeListener);
-        connection.removeListener('error', errorListener);
-        connection.removeListener('end', endListener);
-        connection.removeListener('timeout', timeoutListener);
-        
-        if (this.socketMap.checkForObject(connection)) {
-          this.socketMap.remove(connection);
-          console.log(`removed connection. ${this.socketMap.getArray().length} sockets remaining.`);
-          await plugins.smartdelay.delayFor(0);
-          if (connection.destroyed === false) {
-            connection.destroy();
-          }
-        }
-      };
-    });
-
-    // finally listen on a port
-    if (doListen) {
-      this.httpServer.listen(portArg, '0.0.0.0', () => {
-        console.log(`now listening on ${portArg}!`);
-        this.startedDeferred.resolve();
-        this.serverStatus = 'running';
-        done.resolve();
-      });
-    } else {
-      console.log(
-        'The server does not listen on a network stack and instead expects to get handed requests by other mechanics'
-      );
-    }
-    await done.promise;
-    for (const executeAfterStartFunction of this.executeAfterStartFunctions) {
-      await executeAfterStartFunction();
-    }
-  }
-
-  public getHttpServer() {
-    return this.httpServer;
-  }
-
-  public getExpressAppInstance() {
-    return this.expressAppInstance;
-  }
-
-  public async stop() {
-    const done = plugins.smartpromise.defer();
-    if (this.httpServer) {
-      this.httpServer.close(async () => {
-        this.serverStatus = 'stopped';
-        done.resolve();
-      });
-      await this.socketMap.forEach(async (socket) => {
-        socket.destroy();
-      });
-    } else {
-      throw new Error('There is no Server to be stopped. Have you started it?');
-    }
-    return await done.promise;
-  }
-
-  /**
-   * allows handling requests and responses that come from other
-   * @param req
-   * @param res
-   */
-  public async handleReqRes(req: plugins.express.Request, res: plugins.express.Response) {
-    this.expressAppInstance(req, res);
-  }
-}

ts/servertools/classes.sitemap.ts

@@ -1,68 +0,0 @@
-import { Server } from './classes.server.js';
-import { Handler } from './classes.handler.js';
-import * as plugins from '../plugins.js';
-import { type IUrlInfo } from '@push.rocks/smartsitemap';
-
-export class Sitemap {
-  public smartexpressRef: Server;
-  public smartSitemap = new plugins.smartsitemap.SmartSitemap();
-  public urls: plugins.smartsitemap.IUrlInfo[] = [];
-
-  /**
-   * handles the normal sitemap request
-   */
-  public sitemapHandler = new Handler('GET', async (req, res) => {
-    const sitemapXmlString = await this.smartSitemap.createSitemapFromUrlInfoArray(this.urls);
-    res.type('.xml');
-    res.write(sitemapXmlString);
-    res.end();
-  });
-
-  /**
-   * handles the sitemap-news request
-   */
-  public sitemapNewsHandler = new Handler('GET', async (req, res) => {
-    if (!this.smartexpressRef.options.articleGetterFunction) {
-      res.status(500);
-      res.write('no article getter function defined.');
-      res.end();
-      return;
-    }
-    const sitemapNewsXml = await this.smartSitemap.createSitemapNewsFromArticleArray(
-      await this.smartexpressRef.options.articleGetterFunction()
-    );
-    res.type('.xml');
-    res.write(sitemapNewsXml);
-    res.end();
-  });
-
-  constructor(smartexpressRefArg: Server) {
-    this.smartexpressRef = smartexpressRefArg;
-    this.smartexpressRef.addRouteBefore('/sitemap', this.sitemapHandler);
-    this.smartexpressRef.addRouteBefore('/sitemap-news', this.sitemapNewsHandler);
-
-    // lets set the default url
-    if (this.smartexpressRef.options.domain) {
-      this.urls.push({
-        url: `https://${this.smartexpressRef.options.domain}/`,
-        timestamp: Date.now(),
-        frequency: 'daily',
-      });
-    }
-  }
-
-  /**
-   * replaces the current urlsArray
-   * @param urlsArg
-   */
-  public replaceUrls(urlsArg: IUrlInfo[]) {
-    this.urls = urlsArg;
-  }
-
-  /**
-   * adds urls to the current set of urls
-   */
-  public addUrls(urlsArg: IUrlInfo[]) {
-    this.urls = this.urls.concat(urlsArg);
-  }
-}

ts/servertools/index.ts

@@ -1,22 +0,0 @@
-// Core utilities that don't depend on Express
-export * from './classes.compressor.js';
-
-// Legacy Express-based classes - deprecated, will be removed in next major version
-// These are kept for backward compatibility but should not be used for new code
-// Use SmartServe decorator-based controllers instead
-/** @deprecated Use SmartServe directly */
-export * from './classes.server.js';
-/** @deprecated Use SmartServe @Route decorator */
-export * from './classes.route.js';
-/** @deprecated Use SmartServe @Get/@Post decorators */
-export * from './classes.handler.js';
-/** @deprecated Use SmartServe static file serving */
-export * from './classes.handlerstatic.js';
-/** @deprecated Use SmartServe custom handler */
-export * from './classes.handlerproxy.js';
-/** @deprecated Use SmartServe TypedRouter integration */
-export * from './classes.handlertypedrouter.js';
-
-// Service worker utilities - uses legacy patterns, will be migrated
-import * as serviceworker from './tools.serviceworker.js';
-export { serviceworker };

ts/servertools/tools.manifest.ts

@@ -1,14 +0,0 @@
-import * as plugins from '../plugins.js';
-
-export const setupManifest = async (
-  expressInstanceArg: plugins.express.Application,
-  manifestArg: plugins.smartmanifest.ISmartManifestConstructorOptions
-) => {
-  const smartmanifestInstance = new plugins.smartmanifest.SmartManifest(manifestArg);
-  expressInstanceArg.get('/manifest.json', async (req, res) => {
-    res.status(200);
-    res.type('json');
-    res.write(smartmanifestInstance.jsonString());
-    res.end();
-  });
-};

ts/servertools/tools.robots.ts

@@ -1,33 +0,0 @@
-import * as plugins from '../plugins.js';
-import { Server } from './classes.server.js';
-import { Handler } from './classes.handler.js';
-
-export const setupRobots = async (smartexpressRefArg: Server, domainArg: string) => {
-  smartexpressRefArg.addRouteBefore(
-    '/robots.txt',
-    new Handler('GET', async (req, res) => {
-      res.type('text/plain');
-      res.send(`
-User-agent: Googlebot-News
-Disallow: /account
-Disallow: /login
-
-User-agent: *
-Disallow: /account
-Disallow: /login
-
-${
-  smartexpressRefArg.options.blockWaybackMachine
-    ? `
-User-Agent: ia_archiver
-Disallow: /
-`
-    : ``
-}
-
-Sitemap: https://${domainArg}/sitemap
-Sitemap: https://${domainArg}/sitemap-news
-`);
-    })
-  );
-};

ts/servertools/tools.serviceworker.ts

@@ -1,134 +0,0 @@
-import * as plugins from '../plugins.js';
-import * as paths from '../paths.js';
-
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import type { TypedServer } from '../classes.typedserver.js';
-
-// Lazy-loaded service worker bundle content
-let swBundleJs: string | null = null;
-let swBundleJsMap: string | null = null;
-
-const loadServiceWorkerBundle = async (): Promise<void> => {
-  if (swBundleJs === null) {
-    swBundleJs = (await plugins.fsInstance
-      .file(plugins.path.join(paths.serviceworkerBundleDir, './serviceworker.bundle.js'))
-      .encoding('utf8')
-      .read()) as string;
-  }
-  if (swBundleJsMap === null) {
-    swBundleJsMap = (await plugins.fsInstance
-      .file(plugins.path.join(paths.serviceworkerBundleDir, './serviceworker.bundle.js.map'))
-      .encoding('utf8')
-      .read()) as string;
-  }
-};
-
-let swVersionInfo: interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo['response'] =
-  null;
-
-export const addServiceWorkerRoute = (
-  typedserverInstance: TypedServer,
-  swDataFunc: () => interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo['response']
-) => {
-  // Set the version info
-  swVersionInfo = swDataFunc();
-
-  // Handler function for serviceworker bundle requests
-  const handleServiceWorkerRequest = async (request: Request): Promise<Response> => {
-    await loadServiceWorkerBundle();
-    const url = new URL(request.url);
-    const path = url.pathname;
-
-    if (path === '/serviceworker/serviceworker.bundle.js' || path === '/serviceworker.bundle.js') {
-      return new Response(
-        swBundleJs + '\n' + `/** appSemVer: ${swVersionInfo?.appSemVer || 'not set'} */`,
-        {
-          status: 200,
-          headers: { 'Content-Type': 'text/javascript' },
-        }
-      );
-    } else if (
-      path === '/serviceworker/serviceworker.bundle.js.map' ||
-      path === '/serviceworker.bundle.js.map'
-    ) {
-      return new Response(swBundleJsMap, {
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-      });
-    }
-
-    return null;
-  };
-
-  // Service worker bundle handler - nested path
-  typedserverInstance.addRoute('/serviceworker/*splat', 'GET', handleServiceWorkerRequest);
-
-  // Service worker bundle handler - root level (for /serviceworker.bundle.js)
-  typedserverInstance.addRoute('/serviceworker.bundle.js', 'GET', handleServiceWorkerRequest);
-  typedserverInstance.addRoute('/serviceworker.bundle.js.map', 'GET', handleServiceWorkerRequest);
-
-  // Typed request handler for service worker
-  typedserverInstance.addRoute('/sw-typedrequest', 'POST', async (request: Request) => {
-    try {
-      const body = await request.json();
-
-      // Create a local typed router for service worker requests
-      const typedrouter = new plugins.typedrequest.TypedRouter();
-
-      typedrouter.addTypedHandler(
-        new plugins.typedrequest.TypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo>(
-          'serviceworker_versionInfo',
-          async () => {
-            return swDataFunc();
-          }
-        )
-      );
-
-      // Speedtest handler for measuring connection speed (time-based chunked approach)
-      typedrouter.addTypedHandler(
-        new plugins.typedrequest.TypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
-          'serviceworker_speedtest',
-          async (reqArg) => {
-            const chunkSizeKB = reqArg.chunkSizeKB || 64;
-            const sizeBytes = chunkSizeKB * 1024;
-            let payload: string | undefined;
-            let bytesTransferred = 0;
-
-            switch (reqArg.type) {
-              case 'download_chunk':
-                // Generate chunk payload for download test
-                payload = 'x'.repeat(sizeBytes);
-                bytesTransferred = sizeBytes;
-                break;
-              case 'upload_chunk':
-                // For upload, measure bytes received from client
-                bytesTransferred = reqArg.payload?.length || 0;
-                break;
-              case 'latency':
-                // Simple ping - no payload needed
-                bytesTransferred = 0;
-                break;
-            }
-
-            return {
-              bytesTransferred,
-              timestamp: Date.now(),
-              payload, // Only for download_chunk tests
-            };
-          }
-        )
-      );
-
-      const response = await typedrouter.routeAndAddResponse(body);
-      return new Response(plugins.smartjson.stringify(response), {
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-      });
-    } catch (error) {
-      return new Response(JSON.stringify({ error: 'Invalid request' }), {
-        status: 400,
-        headers: { 'Content-Type': 'application/json' },
-      });
-    }
-  });
-};

ts/servertools/tools.sslredirect.ts

@@ -1,22 +0,0 @@
-import * as plugins from '../plugins.js';
-import { Server } from './classes.server.js';
-import { Handler } from './classes.handler.js';
-
-export const redirectFrom80To443 = async () => {
-  const smartexpressInstance = new Server({
-    cors: true,
-    forceSsl: true,
-    port: 80,
-  });
-
-  smartexpressInstance.addRoute(
-    '/{*splat}',
-    new Handler('ALL', async (req, res) => {
-      res.redirect('https://' + req.headers.host + req.url);
-    })
-  );
-
-  await smartexpressInstance.start();
-
-  return smartexpressInstance;
-};

ts/utilityservers/classes.websiteserver.ts

@@ -1,7 +1,6 @@
 import * as interfaces from '../../dist_ts_interfaces/index.js';
 import { type IServerOptions, TypedServer } from '../classes.typedserver.js';
 import * as plugins from '../plugins.js';
-import * as servertools from '../servertools/index.js';
 
 export interface IUtilityWebsiteServerConstructorOptions {
   addCustomRoutes?: (typedserver: TypedServer) => Promise<any>;
@@ -59,10 +58,12 @@ export class UtilityWebsiteServer {
       appSemVer: this.options.appSemVer || 'x.x.x',
     };
 
-    // -> /lsw* - anything regarding serviceworker
-    servertools.serviceworker.addServiceWorkerRoute(this.typedserver, () => {
-      return lswData;
-    });
+    // -> Service worker version info handler
+    this.typedserver.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo>(
+      new plugins.typedrequest.TypedHandler('serviceworker_versionInfo', async () => {
+        return lswData;
+      })
+    );
 
     // ads.txt handler
     this.typedserver.addRoute('/ads.txt', 'GET', async () => {

ts_interfaces/serviceworker.ts

@@ -240,4 +240,402 @@ export interface IRequest_Serviceworker_Speedtest
     timestamp: number;
     payload?: string;        // For download_chunk, the data received
   };
-}
+}
+
+// ===============
+// Status update interfaces
+// ===============
+
+/**
+ * Status update source types
+ */
+export type TStatusSource = 'backend' | 'serviceworker' | 'network';
+
+/**
+ * Status update event types
+ */
+export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
+
+/**
+ * Status update details
+ */
+export interface IStatusDetails {
+  version?: string;
+  cacheHitRate?: number;
+  resourceCount?: number;
+  connectionType?: string;
+  latencyMs?: number;
+  message?: string;
+}
+
+/**
+ * Status update payload sent from SW to clients
+ */
+export interface IStatusUpdate {
+  source: TStatusSource;
+  type: TStatusType;
+  message: string;
+  details?: IStatusDetails;
+  persist?: boolean;  // Stay visible until resolved
+  timestamp: number;
+}
+
+/**
+ * Message for status updates from service worker to clients
+ */
+export interface IMessage_Serviceworker_StatusUpdate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_StatusUpdate
+  > {
+  method: 'serviceworker_statusUpdate';
+  request: IStatusUpdate;
+  response: {};
+}
+
+/**
+ * Request to get current service worker status
+ */
+export interface IRequest_Serviceworker_GetStatus
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetStatus
+  > {
+  method: 'serviceworker_getStatus';
+  request: {};
+  response: {
+    isActive: boolean;
+    isOnline: boolean;
+    version?: string;
+    cacheHitRate: number;
+    resourceCount: number;
+    connectionType?: string;
+    connectedClients: number;
+    lastUpdateCheck: number;
+  };
+}
+
+// ===============
+// Persistent Store interfaces
+// ===============
+
+/**
+ * Event types for the persistent event log
+ */
+export type TEventType =
+  | 'sw_installed'
+  | 'sw_activated'
+  | 'sw_updated'
+  | 'sw_stopped'
+  | 'speedtest_started'
+  | 'speedtest_completed'
+  | 'speedtest_failed'
+  | 'backend_connected'
+  | 'backend_disconnected'
+  | 'cache_invalidated'
+  | 'network_online'
+  | 'network_offline'
+  | 'update_check'
+  | 'error';
+
+/**
+ * Event log entry structure
+ * Survives both SW restarts AND cache invalidation
+ */
+export interface IEventLogEntry {
+  id: string;
+  timestamp: number;
+  type: TEventType;
+  message: string;
+  details?: Record<string, any>;
+}
+
+/**
+ * Cumulative metrics that persist across SW restarts
+ * Reset on cache invalidation
+ */
+export interface ICumulativeMetrics {
+  firstSeenTimestamp: number;
+  totalCacheHits: number;
+  totalCacheMisses: number;
+  totalCacheErrors: number;
+  totalBytesServedFromCache: number;
+  totalBytesFetched: number;
+  totalNetworkRequests: number;
+  totalNetworkSuccesses: number;
+  totalNetworkFailures: number;
+  totalNetworkTimeouts: number;
+  totalBytesTransferred: number;
+  totalUpdateChecks: number;
+  totalUpdatesApplied: number;
+  totalSpeedtests: number;
+  swRestartCount: number;
+  lastUpdatedTimestamp: number;
+}
+
+/**
+ * Request to get event log from service worker
+ */
+export interface IRequest_Serviceworker_GetEventLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetEventLog
+  > {
+  method: 'serviceworker_getEventLog';
+  request: {
+    limit?: number;
+    type?: TEventType;
+    since?: number;
+    before?: number;  // For pagination: get events before this timestamp
+  };
+  response: {
+    events: IEventLogEntry[];
+    totalCount: number;
+  };
+}
+
+/**
+ * Request to get cumulative metrics from service worker
+ */
+export interface IRequest_Serviceworker_GetCumulativeMetrics
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetCumulativeMetrics
+  > {
+  method: 'serviceworker_getCumulativeMetrics';
+  request: {};
+  response: ICumulativeMetrics;
+}
+
+/**
+ * Request to clear event log
+ */
+export interface IRequest_Serviceworker_ClearEventLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_ClearEventLog
+  > {
+  method: 'serviceworker_clearEventLog';
+  request: {};
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Request to get event count since a timestamp
+ */
+export interface IRequest_Serviceworker_GetEventCount
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetEventCount
+  > {
+  method: 'serviceworker_getEventCount';
+  request: {
+    since: number;
+  };
+  response: {
+    count: number;
+  };
+}
+
+// ===============
+// Push message interfaces (SW → Clients via DeesComms)
+// ===============
+
+/**
+ * Push notification when a new event is logged
+ * Sent via DeesComms BroadcastChannel
+ */
+export interface IMessage_Serviceworker_EventLogged
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_EventLogged
+  > {
+  method: 'serviceworker_eventLogged';
+  request: IEventLogEntry;
+  response: {};
+}
+
+/**
+ * Metrics snapshot for push updates
+ */
+export interface IMetricsSnapshot {
+  cache: {
+    hits: number;
+    misses: number;
+    errors: number;
+    bytesServedFromCache: number;
+    bytesFetched: number;
+  };
+  network: {
+    totalRequests: number;
+    successfulRequests: number;
+    failedRequests: number;
+  };
+  cacheHitRate: number;
+  networkSuccessRate: number;
+  resourceCount: number;
+  uptime: number;
+  timestamp: number;
+}
+
+/**
+ * Push notification for metrics updates
+ * Sent via DeesComms BroadcastChannel (throttled)
+ */
+export interface IMessage_Serviceworker_MetricsUpdate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_MetricsUpdate
+  > {
+  method: 'serviceworker_metricsUpdate';
+  request: IMetricsSnapshot;
+  response: {};
+}
+
+/**
+ * Push notification when a new resource is cached
+ */
+export interface IMessage_Serviceworker_ResourceCached
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_ResourceCached
+  > {
+  method: 'serviceworker_resourceCached';
+  request: {
+    url: string;
+    contentType: string;
+    size: number;
+    cached: boolean;
+  };
+  response: {};
+}
+
+// =============================
+// TypedRequest Traffic Monitoring
+// =============================
+
+/**
+ * Log entry for TypedRequest traffic monitoring
+ */
+export interface ITypedRequestLogEntry {
+  correlationId: string;
+  method: string;
+  direction: 'outgoing' | 'incoming';
+  phase: 'request' | 'response';
+  timestamp: number;
+  durationMs?: number;
+  payload: any;
+  error?: string;
+}
+
+/**
+ * Statistics for TypedRequest traffic
+ */
+export interface ITypedRequestStats {
+  totalRequests: number;
+  totalResponses: number;
+  methodCounts: Record<string, { requests: number; responses: number; errors: number; avgDurationMs: number }>;
+  errorCount: number;
+  avgDurationMs: number;
+}
+
+/**
+ * Message for logging TypedRequest traffic from client to SW
+ */
+export interface IMessage_Serviceworker_TypedRequestLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_TypedRequestLog
+  > {
+  method: 'serviceworker_typedRequestLog';
+  request: ITypedRequestLogEntry;
+  response: {};
+}
+
+/**
+ * Push notification when a TypedRequest is logged
+ */
+export interface IMessage_Serviceworker_TypedRequestLogged
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_TypedRequestLogged
+  > {
+  method: 'serviceworker_typedRequestLogged';
+  request: ITypedRequestLogEntry;
+  response: {};
+}
+
+/**
+ * Request to get TypedRequest logs
+ */
+export interface IRequest_Serviceworker_GetTypedRequestLogs
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetTypedRequestLogs
+  > {
+  method: 'serviceworker_getTypedRequestLogs';
+  request: {
+    limit?: number;
+    method?: string;
+    since?: number;
+    before?: number;  // For pagination: get logs before this timestamp
+  };
+  response: {
+    logs: ITypedRequestLogEntry[];
+    totalCount: number;
+  };
+}
+
+/**
+ * Request to get TypedRequest traffic statistics
+ */
+export interface IRequest_Serviceworker_GetTypedRequestStats
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetTypedRequestStats
+  > {
+  method: 'serviceworker_getTypedRequestStats';
+  request: {};
+  response: ITypedRequestStats;
+}
+
+/**
+ * Request to clear TypedRequest logs
+ */
+export interface IRequest_Serviceworker_ClearTypedRequestLogs
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_ClearTypedRequestLogs
+  > {
+  method: 'serviceworker_clearTypedRequestLogs';
+  request: {};
+  response: {
+    success: boolean;
+  };
+}
+
+// =============================
+// Shared Constants
+// =============================
+
+/**
+ * HTML shell for the SW Dashboard - shared between server and service worker
+ */
+export const SW_DASH_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SW Dashboard</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #0a0a0a; min-height: 100vh; }
+  </style>
+</head>
+<body>
+  <sw-dash-app></sw-dash-app>
+  <script type="module" src="/sw-dash/bundle.js"></script>
+</body>
+</html>`;

ts_swdash/plugins.ts

@@ -3,6 +3,9 @@ import { LitElement, html, css } from 'lit';
 import type { CSSResult, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+// DeesComms for push communication
+import * as deesComms from '@design.estate/dees-comms';
+
 export {
   LitElement,
   html,
@@ -10,6 +13,7 @@ export {
   customElement,
   property,
   state,
+  deesComms,
 };
 
 export type { CSSResult, TemplateResult };

ts_swdash/sw-dash-app.ts

@@ -1,19 +1,22 @@
-import { LitElement, html, css, state, customElement } from './plugins.js';
+import { LitElement, html, css, state, customElement, deesComms } from './plugins.js';
 import type { CSSResult, TemplateResult } from './plugins.js';
 import { sharedStyles, terminalStyles, navStyles } from './sw-dash-styles.js';
 import type { IMetricsData } from './sw-dash-overview.js';
 import type { ICachedResource } from './sw-dash-urls.js';
 import type { IDomainStats } from './sw-dash-domains.js';
 import type { IContentTypeStats } from './sw-dash-types.js';
+import type { serviceworker } from '../dist_ts_interfaces/index.js';
 
 // Import components to register them
 import './sw-dash-overview.js';
 import './sw-dash-urls.js';
 import './sw-dash-domains.js';
 import './sw-dash-types.js';
+import './sw-dash-events.js';
+import './sw-dash-requests.js';
 import './sw-dash-table.js';
 
-type ViewType = 'overview' | 'urls' | 'domains' | 'types';
+type ViewType = 'overview' | 'urls' | 'domains' | 'types' | 'events' | 'requests';
 
 interface IResourceData {
   resources: ICachedResource[];
@@ -24,6 +27,11 @@ interface IResourceData {
 
 /**
  * Main SW Dashboard application shell
+ *
+ * Architecture:
+ * - ONE initial HTTP seed request to /sw-dash/metrics (provides ALL data)
+ * - HTTP heartbeat every 30s for SW health check
+ * - Everything else via DeesComms (push from SW, requests to SW)
  */
 @customElement('sw-dash-app')
 export class SwDashApp extends LitElement {
@@ -34,9 +42,9 @@ export class SwDashApp extends LitElement {
     css`
       :host {
         display: block;
-        background: var(--sw-bg-dark);
+        background: var(--bg-primary);
         min-height: 100vh;
-        padding: 20px;
+        padding: var(--space-5);
       }
 
       .view {
@@ -46,70 +54,422 @@ export class SwDashApp extends LitElement {
       .view.active {
         display: block;
       }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+      }
+
+      .logo {
+        width: 24px;
+        height: 24px;
+        background: var(--accent-primary);
+        border-radius: var(--radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 12px;
+        color: white;
+      }
+
+      .uptime-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        padding: var(--space-1) var(--space-2);
+        background: var(--bg-tertiary);
+        border-radius: var(--radius-sm);
+        font-size: 11px;
+        color: var(--text-tertiary);
+      }
+
+      .uptime-badge .value {
+        color: var(--text-primary);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .footer-left {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+        color: var(--text-tertiary);
+        font-size: 11px;
+      }
+
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      .auto-refresh {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        padding: var(--space-1) var(--space-2);
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--accent-success);
+        border-radius: var(--radius-sm);
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .auto-refresh .dot {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background: currentColor;
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
     `
   ];
 
+  // Core metrics
   @state() accessor currentView: ViewType = 'overview';
   @state() accessor metrics: IMetricsData | null = null;
+  @state() accessor lastRefresh = new Date().toLocaleTimeString();
+  @state() accessor isConnected = false;
+
+  // Resource data (from initial seed)
   @state() accessor resourceData: IResourceData = {
     resources: [],
     domains: [],
     contentTypes: [],
     resourceCount: 0
   };
-  @state() accessor lastRefresh = new Date().toLocaleTimeString();
 
-  private refreshInterval: ReturnType<typeof setInterval> | null = null;
+  // Events data (from initial seed + push updates)
+  @state() accessor events: serviceworker.IEventLogEntry[] = [];
+  @state() accessor eventTotalCount = 0;
+  @state() accessor eventCountLastHour = 0;
+
+  // Request logs data (from initial seed + push updates)
+  @state() accessor requestLogs: serviceworker.ITypedRequestLogEntry[] = [];
+  @state() accessor requestTotalCount = 0;
+  @state() accessor requestStats: serviceworker.ITypedRequestStats | null = null;
+  @state() accessor requestMethods: string[] = [];
+
+  // DeesComms for communication with service worker
+  private comms: deesComms.DeesComms | null = null;
+
+  // Heartbeat interval (30 seconds) for SW health check
+  private heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+  private readonly HEARTBEAT_INTERVAL_MS = 30000;
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.loadMetrics();
-    this.loadResourceData();
-    // Auto-refresh every 2 seconds
-    this.refreshInterval = setInterval(() => {
-      this.loadMetrics();
-      if (this.currentView !== 'overview') {
-        this.loadResourceData();
-      }
-    }, 2000);
+    // Initial HTTP seed request to wake up SW and get ALL initial data
+    this.loadInitialData();
+    // Setup push listeners via DeesComms
+    this.setupPushListeners();
+    // Start heartbeat for SW health check
+    this.startHeartbeat();
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    if (this.refreshInterval) {
-      clearInterval(this.refreshInterval);
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
     }
   }
 
-  private async loadMetrics(): Promise<void> {
+  /**
+   * Initial HTTP request to seed ALL data and wake up service worker
+   * This is the ONE HTTP request that provides everything:
+   * - Core metrics
+   * - Resources, domains, content types
+   * - Events (initial 50)
+   * - Request logs (initial 50), stats, methods
+   */
+  private async loadInitialData(): Promise<void> {
     try {
       const response = await fetch('/sw-dash/metrics');
-      this.metrics = await response.json();
+      const data = await response.json();
+
+      // Core metrics
+      this.metrics = data;
+
+      // Resource data
+      this.resourceData = {
+        resources: data.resources || [],
+        domains: data.domains || [],
+        contentTypes: data.contentTypes || [],
+        resourceCount: data.resourceCount || 0,
+      };
+
+      // Events data
+      this.events = data.events || [];
+      this.eventTotalCount = data.eventTotalCount || 0;
+      this.eventCountLastHour = data.eventCountLastHour || 0;
+
+      // Request logs data
+      this.requestLogs = data.requestLogs || [];
+      this.requestTotalCount = data.requestTotalCount || 0;
+      this.requestStats = data.requestStats || null;
+      this.requestMethods = data.requestMethods || [];
+
       this.lastRefresh = new Date().toLocaleTimeString();
+      this.isConnected = true;
     } catch (err) {
-      console.error('Failed to load metrics:', err);
+      console.error('Failed to load initial data:', err);
+      this.isConnected = false;
     }
   }
 
-  private async loadResourceData(): Promise<void> {
+  /**
+   * Setup DeesComms handlers for receiving push updates from SW
+   * All real-time updates come through here
+   */
+  private setupPushListeners(): void {
+    this.comms = new deesComms.DeesComms();
+
+    // Handle metrics push updates
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_MetricsUpdate>(
+      'serviceworker_metricsUpdate',
+      async (snapshot) => {
+        // Update metrics from push
+        if (this.metrics) {
+          this.metrics = {
+            ...this.metrics,
+            cache: {
+              ...this.metrics.cache,
+              hits: snapshot.cache.hits,
+              misses: snapshot.cache.misses,
+              errors: snapshot.cache.errors,
+              bytesServedFromCache: snapshot.cache.bytesServedFromCache,
+              bytesFetched: snapshot.cache.bytesFetched,
+            },
+            network: {
+              ...this.metrics.network,
+              totalRequests: snapshot.network.totalRequests,
+              successfulRequests: snapshot.network.successfulRequests,
+              failedRequests: snapshot.network.failedRequests,
+            },
+            cacheHitRate: snapshot.cacheHitRate,
+            networkSuccessRate: snapshot.networkSuccessRate,
+            resourceCount: snapshot.resourceCount,
+            uptime: snapshot.uptime,
+          };
+        }
+        this.lastRefresh = new Date().toLocaleTimeString();
+        this.isConnected = true;
+        return {};
+      }
+    );
+
+    // Handle new event logged - add to our events array
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_EventLogged>(
+      'serviceworker_eventLogged',
+      async (entry) => {
+        // Prepend new event to array
+        this.events = [entry, ...this.events];
+        this.eventTotalCount++;
+        // Check if event is within last hour
+        const oneHourAgo = Date.now() - 3600000;
+        if (entry.timestamp >= oneHourAgo) {
+          this.eventCountLastHour++;
+        }
+        return {};
+      }
+    );
+
+    // Handle resource cached push updates
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_ResourceCached>(
+      'serviceworker_resourceCached',
+      async (resource) => {
+        // Update resource count optimistically
+        if (resource.cached && this.metrics) {
+          this.metrics = {
+            ...this.metrics,
+            resourceCount: this.metrics.resourceCount + 1,
+          };
+        }
+        return {};
+      }
+    );
+
+    // Handle new TypedRequest logged - add to our logs array
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_TypedRequestLogged>(
+      'serviceworker_typedRequestLogged',
+      async (entry) => {
+        // Prepend new log to array
+        this.requestLogs = [entry, ...this.requestLogs];
+        this.requestTotalCount++;
+
+        // Update stats optimistically
+        if (this.requestStats) {
+          const newStats = { ...this.requestStats };
+          if (entry.phase === 'request') {
+            newStats.totalRequests++;
+          } else {
+            newStats.totalResponses++;
+          }
+          if (entry.error) {
+            newStats.errorCount++;
+          }
+          // Update method counts
+          if (!newStats.methodCounts[entry.method]) {
+            newStats.methodCounts[entry.method] = { requests: 0, responses: 0, errors: 0, avgDurationMs: 0 };
+            // Add to methods list if new
+            if (!this.requestMethods.includes(entry.method)) {
+              this.requestMethods = [...this.requestMethods, entry.method];
+            }
+          }
+          if (entry.phase === 'request') {
+            newStats.methodCounts[entry.method].requests++;
+          } else {
+            newStats.methodCounts[entry.method].responses++;
+          }
+          if (entry.error) {
+            newStats.methodCounts[entry.method].errors++;
+          }
+          this.requestStats = newStats;
+        }
+        return {};
+      }
+    );
+  }
+
+  /**
+   * Heartbeat to check SW health periodically (HTTP)
+   * This is the ONLY periodic HTTP request
+   */
+  private startHeartbeat(): void {
+    this.heartbeatInterval = setInterval(async () => {
+      try {
+        const response = await fetch('/sw-dash/metrics');
+        if (response.ok) {
+          this.isConnected = true;
+          // Refresh all data from heartbeat response
+          const data = await response.json();
+          this.metrics = data;
+          this.resourceData = {
+            resources: data.resources || [],
+            domains: data.domains || [],
+            contentTypes: data.contentTypes || [],
+            resourceCount: data.resourceCount || 0,
+          };
+          this.events = data.events || [];
+          this.eventTotalCount = data.eventTotalCount || 0;
+          this.eventCountLastHour = data.eventCountLastHour || 0;
+          this.requestLogs = data.requestLogs || [];
+          this.requestTotalCount = data.requestTotalCount || 0;
+          this.requestStats = data.requestStats || null;
+          this.requestMethods = data.requestMethods || [];
+          this.lastRefresh = new Date().toLocaleTimeString();
+        } else {
+          this.isConnected = false;
+        }
+      } catch {
+        this.isConnected = false;
+      }
+    }, this.HEARTBEAT_INTERVAL_MS);
+  }
+
+  /**
+   * Handle "load more events" request from sw-dash-events component
+   * Uses DeesComms to request older events from SW
+   */
+  private async handleLoadMoreEvents(e: CustomEvent<{ before: number }>): Promise<void> {
+    if (!this.comms) return;
+
     try {
-      const response = await fetch('/sw-dash/resources');
-      this.resourceData = await response.json();
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog');
+      const result = await tr.fire({
+        limit: 50,
+        before: e.detail.before,
+      });
+      // Append older events to existing array
+      this.events = [...this.events, ...result.events];
+      this.eventTotalCount = result.totalCount;
     } catch (err) {
-      console.error('Failed to load resources:', err);
+      console.error('Failed to load more events:', err);
+    }
+  }
+
+  /**
+   * Handle "clear events" request from sw-dash-events component
+   * Uses DeesComms to clear event log in SW
+   */
+  private async handleClearEvents(): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_ClearEventLog>('serviceworker_clearEventLog');
+      await tr.fire({});
+      // Clear local state
+      this.events = [];
+      this.eventTotalCount = 0;
+      this.eventCountLastHour = 0;
+    } catch (err) {
+      console.error('Failed to clear events:', err);
+    }
+  }
+
+  /**
+   * Handle "load more requests" from sw-dash-requests component
+   * Uses DeesComms to request older request logs from SW
+   */
+  private async handleLoadMoreRequests(e: CustomEvent<{ before: number; method?: string }>): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_GetTypedRequestLogs>('serviceworker_getTypedRequestLogs');
+      const result = await tr.fire({
+        limit: 50,
+        before: e.detail.before,
+        method: e.detail.method,
+      });
+      // Append older logs to existing array
+      this.requestLogs = [...this.requestLogs, ...result.logs];
+      this.requestTotalCount = result.totalCount;
+    } catch (err) {
+      console.error('Failed to load more requests:', err);
+    }
+  }
+
+  /**
+   * Handle "clear requests" from sw-dash-requests component
+   * Uses DeesComms to clear request logs in SW
+   */
+  private async handleClearRequests(): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_ClearTypedRequestLogs>('serviceworker_clearTypedRequestLogs');
+      await tr.fire({});
+      // Clear local state
+      this.requestLogs = [];
+      this.requestTotalCount = 0;
+      this.requestStats = {
+        totalRequests: 0,
+        totalResponses: 0,
+        methodCounts: {},
+        errorCount: 0,
+        avgDurationMs: 0,
+      };
+      this.requestMethods = [];
+    } catch (err) {
+      console.error('Failed to clear requests:', err);
     }
   }
 
   private setView(view: ViewType): void {
     this.currentView = view;
-    if (view !== 'overview') {
-      this.loadResourceData();
-    }
+    // No HTTP fetch on view change - data is already loaded from initial seed
   }
 
   private handleSpeedtestComplete(_e: CustomEvent): void {
-    // Refresh metrics after speedtest
-    this.loadMetrics();
+    // Refresh metrics after speedtest via HTTP
+    this.loadInitialData();
   }
 
   private formatUptime(ms: number): string {
@@ -127,8 +487,13 @@ export class SwDashApp extends LitElement {
     return html`
       <div class="terminal">
         <div class="header">
-          <span class="title">[SW-DASH] Service Worker Dashboard</span>
-          <span class="uptime">Uptime: ${this.metrics ? this.formatUptime(this.metrics.uptime) : '...'}</span>
+          <div class="header-left">
+            <div class="logo">SW</div>
+            <span class="title">Service Worker Dashboard</span>
+          </div>
+          <div class="uptime-badge">
+            Uptime: <span class="value">${this.metrics ? this.formatUptime(this.metrics.uptime) : '--'}</span>
+          </div>
         </div>
 
         <nav class="nav">
@@ -148,12 +513,21 @@ export class SwDashApp extends LitElement {
             class="nav-tab ${this.currentView === 'types' ? 'active' : ''}"
             @click="${() => this.setView('types')}"
           >Types</button>
+          <button
+            class="nav-tab ${this.currentView === 'events' ? 'active' : ''}"
+            @click="${() => this.setView('events')}"
+          >Events</button>
+          <button
+            class="nav-tab ${this.currentView === 'requests' ? 'active' : ''}"
+            @click="${() => this.setView('requests')}"
+          >Requests</button>
         </nav>
 
         <div class="content">
           <div class="view ${this.currentView === 'overview' ? 'active' : ''}">
             <sw-dash-overview
               .metrics="${this.metrics}"
+              .eventCountLastHour="${this.eventCountLastHour}"
               @speedtest-complete="${this.handleSpeedtestComplete}"
             ></sw-dash-overview>
           </div>
@@ -169,15 +543,37 @@ export class SwDashApp extends LitElement {
           <div class="view ${this.currentView === 'types' ? 'active' : ''}">
             <sw-dash-types .contentTypes="${this.resourceData.contentTypes}"></sw-dash-types>
           </div>
+
+          <div class="view ${this.currentView === 'events' ? 'active' : ''}">
+            <sw-dash-events
+              .events="${this.events}"
+              .totalCount="${this.eventTotalCount}"
+              @load-more-events="${this.handleLoadMoreEvents}"
+              @clear-events="${this.handleClearEvents}"
+            ></sw-dash-events>
+          </div>
+
+          <div class="view ${this.currentView === 'requests' ? 'active' : ''}">
+            <sw-dash-requests
+              .logs="${this.requestLogs}"
+              .totalCount="${this.requestTotalCount}"
+              .stats="${this.requestStats}"
+              .methods="${this.requestMethods}"
+              @load-more-requests="${this.handleLoadMoreRequests}"
+              @clear-requests="${this.handleClearRequests}"
+            ></sw-dash-requests>
+          </div>
         </div>
 
         <div class="footer">
-          <span class="refresh-info">
-            <span class="prompt">$</span> Last refresh: ${this.lastRefresh}<span class="cursor"></span>
-          </span>
-          <div class="status">
-            <span class="status-dot"></span>
-            <span>Auto-refresh: 2s</span>
+          <div class="footer-left">
+            Last updated: ${this.lastRefresh}
+          </div>
+          <div class="footer-right">
+            <div class="auto-refresh">
+              <span class="dot"></span>
+              Live
+            </div>
           </div>
         </div>
       </div>

ts_swdash/sw-dash-events.ts

@@ -0,0 +1,359 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, panelStyles, tableStyles, buttonStyles } from './sw-dash-styles.js';
+
+export interface IEventLogEntry {
+  id: string;
+  timestamp: number;
+  type: string;
+  message: string;
+  details?: Record<string, any>;
+}
+
+type TEventFilter = 'all' | 'sw_installed' | 'sw_activated' | 'sw_updated' | 'sw_stopped'
+  | 'speedtest_started' | 'speedtest_completed' | 'speedtest_failed'
+  | 'backend_connected' | 'backend_disconnected'
+  | 'cache_invalidated' | 'network_online' | 'network_offline'
+  | 'update_check' | 'error';
+
+/**
+ * Events panel component for sw-dash
+ *
+ * Receives events via property from parent (sw-dash-app).
+ * Filtering is done locally.
+ * Load more and clear operations dispatch events to parent.
+ */
+@customElement('sw-dash-events')
+export class SwDashEvents extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    panelStyles,
+    tableStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .events-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--space-4);
+        gap: var(--space-3);
+        flex-wrap: wrap;
+      }
+
+      .filter-group {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      .filter-label {
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+
+      .filter-select {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        padding: var(--space-1) var(--space-2);
+        color: var(--text-primary);
+        font-size: 12px;
+      }
+
+      .filter-select:focus {
+        outline: none;
+        border-color: var(--accent-primary);
+      }
+
+      .events-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+        max-height: 600px;
+        overflow-y: auto;
+      }
+
+      .event-card {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-3);
+      }
+
+      .event-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: var(--space-2);
+      }
+
+      .event-type {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--space-1) var(--space-2);
+        border-radius: var(--radius-sm);
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .event-type.sw { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
+      .event-type.speedtest { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+      .event-type.network { background: rgba(34, 197, 94, 0.15); color: var(--accent-success); }
+      .event-type.cache { background: rgba(251, 191, 36, 0.15); color: var(--accent-warning); }
+      .event-type.error { background: rgba(239, 68, 68, 0.15); color: var(--accent-error); }
+
+      .event-time {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .event-message {
+        font-size: 13px;
+        color: var(--text-primary);
+        margin-bottom: var(--space-2);
+      }
+
+      .event-details {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        background: var(--bg-tertiary);
+        padding: var(--space-2);
+        border-radius: var(--radius-sm);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .stats-bar {
+        display: flex;
+        gap: var(--space-4);
+        margin-bottom: var(--space-4);
+        padding: var(--space-3);
+        background: var(--bg-secondary);
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+      }
+
+      .stat-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--text-primary);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .stat-label {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: var(--space-6);
+        color: var(--text-tertiary);
+      }
+
+      .clear-btn {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--accent-error);
+        border: 1px solid transparent;
+      }
+
+      .clear-btn:hover {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: var(--accent-error);
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--space-2);
+        margin-top: var(--space-4);
+      }
+
+      .page-info {
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+    `
+  ];
+
+  // Received from parent (sw-dash-app)
+  @property({ type: Array }) accessor events: IEventLogEntry[] = [];
+  @property({ type: Number }) accessor totalCount = 0;
+
+  // Local state for filtering
+  @state() accessor filter: TEventFilter = 'all';
+  @state() accessor searchText = '';
+  @state() accessor isLoadingMore = false;
+
+  private handleFilterChange(e: Event): void {
+    this.filter = (e.target as HTMLSelectElement).value as TEventFilter;
+    // Local filtering - no HTTP request
+  }
+
+  private handleSearch(e: Event): void {
+    this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
+  }
+
+  private handleClear(): void {
+    if (!confirm('Are you sure you want to clear the event log? This cannot be undone.')) {
+      return;
+    }
+    // Dispatch event to parent to clear via DeesComms
+    this.dispatchEvent(new CustomEvent('clear-events', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private loadMore(): void {
+    if (this.isLoadingMore || this.events.length === 0) return;
+
+    this.isLoadingMore = true;
+    const oldestEvent = this.events[this.events.length - 1];
+
+    // Dispatch event to parent to load more via DeesComms
+    this.dispatchEvent(new CustomEvent('load-more-events', {
+      detail: { before: oldestEvent.timestamp },
+      bubbles: true,
+      composed: true,
+    }));
+
+    // Reset loading state after a short delay (parent will update events prop)
+    setTimeout(() => {
+      this.isLoadingMore = false;
+    }, 1000);
+  }
+
+  private getTypeClass(type: string): string {
+    if (type.startsWith('sw_')) return 'sw';
+    if (type.startsWith('speedtest_')) return 'speedtest';
+    if (type.startsWith('network_') || type.startsWith('backend_')) return 'network';
+    if (type.startsWith('cache_') || type === 'update_check') return 'cache';
+    if (type === 'error') return 'error';
+    return 'sw';
+  }
+
+  private formatTimestamp(ts: number): string {
+    const date = new Date(ts);
+    return date.toLocaleString();
+  }
+
+  private formatTypeLabel(type: string): string {
+    return type.replace(/_/g, ' ');
+  }
+
+  /**
+   * Filter events locally based on type and search text
+   */
+  private getFilteredEvents(): IEventLogEntry[] {
+    let result = this.events;
+
+    // Filter by type
+    if (this.filter !== 'all') {
+      result = result.filter(e => e.type === this.filter);
+    }
+
+    // Filter by search text
+    if (this.searchText) {
+      result = result.filter(e =>
+        e.message.toLowerCase().includes(this.searchText) ||
+        e.type.toLowerCase().includes(this.searchText) ||
+        (e.details && JSON.stringify(e.details).toLowerCase().includes(this.searchText))
+      );
+    }
+
+    return result;
+  }
+
+  public render(): TemplateResult {
+    const filteredEvents = this.getFilteredEvents();
+
+    return html`
+      <div class="stats-bar">
+        <div class="stat-item">
+          <span class="stat-value">${this.totalCount}</span>
+          <span class="stat-label">Total Events</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">${filteredEvents.length}</span>
+          <span class="stat-label">Showing</span>
+        </div>
+      </div>
+
+      <div class="events-header">
+        <div class="filter-group">
+          <span class="filter-label">Filter:</span>
+          <select class="filter-select" @change="${this.handleFilterChange}">
+            <option value="all">All Events</option>
+            <option value="sw_installed">SW Installed</option>
+            <option value="sw_activated">SW Activated</option>
+            <option value="sw_updated">SW Updated</option>
+            <option value="speedtest_started">Speedtest Started</option>
+            <option value="speedtest_completed">Speedtest Completed</option>
+            <option value="speedtest_failed">Speedtest Failed</option>
+            <option value="network_online">Network Online</option>
+            <option value="network_offline">Network Offline</option>
+            <option value="cache_invalidated">Cache Invalidated</option>
+            <option value="error">Errors</option>
+          </select>
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search events..."
+            .value="${this.searchText}"
+            @input="${this.handleSearch}"
+            style="width: 200px;"
+          >
+        </div>
+        <button class="btn clear-btn" @click="${this.handleClear}">Clear Log</button>
+      </div>
+
+      ${this.events.length === 0 ? html`
+        <div class="empty-state">No events recorded</div>
+      ` : filteredEvents.length === 0 ? html`
+        <div class="empty-state">No events match filter</div>
+      ` : html`
+        <div class="events-list">
+          ${filteredEvents.map(event => html`
+            <div class="event-card">
+              <div class="event-header">
+                <span class="event-type ${this.getTypeClass(event.type)}">${this.formatTypeLabel(event.type)}</span>
+                <span class="event-time">${this.formatTimestamp(event.timestamp)}</span>
+              </div>
+              <div class="event-message">${event.message}</div>
+              ${event.details ? html`
+                <div class="event-details">${JSON.stringify(event.details, null, 2)}</div>
+              ` : ''}
+            </div>
+          `)}
+        </div>
+
+        ${this.events.length < this.totalCount ? html`
+          <div class="pagination">
+            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoadingMore}">
+              ${this.isLoadingMore ? 'Loading...' : 'Load More'}
+            </button>
+            <span class="page-info">${this.events.length} of ${this.totalCount} events</span>
+          </div>
+        ` : ''}
+      `}
+    `;
+  }
+}

ts_swdash/sw-dash-overview.ts

@@ -65,10 +65,21 @@ export class SwDashOverview extends LitElement {
       :host {
         display: block;
       }
+
+      .panel-content {
+        padding: var(--space-4);
+      }
+
+      .section-divider {
+        margin-top: var(--space-4);
+        padding-top: var(--space-4);
+        border-top: 1px solid var(--border-muted);
+      }
     `
   ];
 
   @property({ type: Object }) accessor metrics: IMetricsData | null = null;
+  @property({ type: Number }) accessor eventCountLastHour = 0;
   @state() accessor speedtestRunning = false;
   @state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
   @state() accessor speedtestProgress = 0;
@@ -135,10 +146,10 @@ export class SwDashOverview extends LitElement {
 
   private getPhaseLabel(): string {
     switch (this.speedtestPhase) {
-      case 'latency': return 'Testing latency...';
-      case 'download': return 'Download test...';
-      case 'upload': return 'Upload test...';
-      case 'complete': return 'Complete!';
+      case 'latency': return 'Testing latency';
+      case 'download': return 'Download test';
+      case 'upload': return 'Upload test';
+      case 'complete': return 'Complete';
       default: return '';
     }
   }
@@ -150,7 +161,7 @@ export class SwDashOverview extends LitElement {
 
   public render(): TemplateResult {
     if (!this.metrics) {
-      return html`<div class="panel">Loading metrics...</div>`;
+      return html`<div class="panel"><div class="panel-content">Loading metrics...</div></div>`;
     }
 
     const m = this.metrics;
@@ -160,89 +171,118 @@ export class SwDashOverview extends LitElement {
       <div class="grid">
         <!-- Cache Panel -->
         <div class="panel">
-          <div class="panel-title">[ CACHE ]</div>
-          <div class="gauge">
-            <div class="gauge-bar">
-              <div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
-              <span class="gauge-text">${m.cacheHitRate}% hit rate</span>
+          <div class="panel-title">Cache</div>
+          <div class="panel-content">
+            <div class="gauge">
+              <div class="gauge-header">
+                <span class="gauge-label">Hit Rate</span>
+                <span class="gauge-value">${m.cacheHitRate}%</span>
+              </div>
+              <div class="gauge-bar">
+                <div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
+              </div>
             </div>
+            <div class="row"><span class="label">Hits</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
+            <div class="row"><span class="label">Misses</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
+            <div class="row"><span class="label">Errors</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
+            <div class="row"><span class="label">From Cache</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
+            <div class="row"><span class="label">Fetched</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
+            <div class="row"><span class="label">Resources</span><span class="value">${m.resourceCount}</span></div>
           </div>
-          <div class="row"><span class="label">Hits:</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
-          <div class="row"><span class="label">Misses:</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
-          <div class="row"><span class="label">Errors:</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
-          <div class="row"><span class="label">From Cache:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
-          <div class="row"><span class="label">Fetched:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
-          <div class="row"><span class="label">Resources:</span><span class="value">${m.resourceCount}</span></div>
         </div>
 
         <!-- Network Panel -->
         <div class="panel">
-          <div class="panel-title">[ NETWORK ]</div>
-          <div class="gauge">
-            <div class="gauge-bar">
-              <div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
-              <span class="gauge-text">${m.networkSuccessRate}% success</span>
+          <div class="panel-title">Network</div>
+          <div class="panel-content">
+            <div class="gauge">
+              <div class="gauge-header">
+                <span class="gauge-label">Success Rate</span>
+                <span class="gauge-value">${m.networkSuccessRate}%</span>
+              </div>
+              <div class="gauge-bar">
+                <div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
+              </div>
             </div>
+            <div class="row"><span class="label">Total Requests</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
+            <div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
+            <div class="row"><span class="label">Failed</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
+            <div class="row"><span class="label">Timeouts</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
+            <div class="row"><span class="label">Avg Latency</span><span class="value">${m.network.averageLatency}ms</span></div>
+            <div class="row"><span class="label">Transferred</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
           </div>
-          <div class="row"><span class="label">Total Requests:</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
-          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
-          <div class="row"><span class="label">Failed:</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
-          <div class="row"><span class="label">Timeouts:</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
-          <div class="row"><span class="label">Avg Latency:</span><span class="value">${m.network.averageLatency}ms</span></div>
-          <div class="row"><span class="label">Transferred:</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
         </div>
 
         <!-- Updates Panel -->
         <div class="panel">
-          <div class="panel-title">[ UPDATES ]</div>
-          <div class="row"><span class="label">Total Checks:</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
-          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
-          <div class="row"><span class="label">Failed:</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
-          <div class="row"><span class="label">Updates Found:</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
-          <div class="row"><span class="label">Updates Applied:</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
-          <div class="row"><span class="label">Last Check:</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
+          <div class="panel-title">Updates</div>
+          <div class="panel-content">
+            <div class="row"><span class="label">Total Checks</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
+            <div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
+            <div class="row"><span class="label">Failed</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
+            <div class="row"><span class="label">Updates Found</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
+            <div class="row"><span class="label">Updates Applied</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
+            <div class="row"><span class="label">Last Check</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
+          </div>
         </div>
 
         <!-- Connections Panel -->
         <div class="panel">
-          <div class="panel-title">[ CONNECTIONS ]</div>
-          <div class="row"><span class="label">Active Clients:</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
-          <div class="row"><span class="label">Total Attempts:</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
-          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
-          <div class="row"><span class="label">Failed:</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
-          <div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed var(--sw-border);">
-            <span class="label">Started:</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span>
+          <div class="panel-title">Connections</div>
+          <div class="panel-content">
+            <div class="row"><span class="label">Active Clients</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
+            <div class="row"><span class="label">Total Attempts</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
+            <div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
+            <div class="row"><span class="label">Failed</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
+            <div class="section-divider">
+              <div class="row"><span class="label">Events (1h)</span><span class="value">${this.eventCountLastHour}</span></div>
+              <div class="row"><span class="label">Started</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span></div>
+            </div>
           </div>
         </div>
 
         <!-- Speedtest Panel -->
         <div class="panel">
-          <div class="panel-title">[ SPEEDTEST ]</div>
-          <div class="online-indicator">
-            <span class="online-dot ${m.speedtest.isOnline ? 'online' : 'offline'}"></span>
-            <span class="value ${m.speedtest.isOnline ? 'success' : 'error'}">${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
-          </div>
-          ${this.speedtestRunning ? html`
-            <div class="speedtest-progress">
-              <div class="progress-header">
-                <span class="progress-phase">${this.getPhaseLabel()}</span>
-                <span class="progress-time">${this.formatElapsed()}</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress-fill ${this.speedtestPhase === 'complete' ? 'complete' : ''}" style="width: ${this.speedtestProgress}%"></div>
-              </div>
+          <div class="panel-title">Speedtest</div>
+          <div class="panel-content">
+            <div class="online-indicator ${m.speedtest.isOnline ? 'online' : 'offline'}">
+              <span class="online-dot"></span>
+              <span>${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
+            </div>
+            ${this.speedtestRunning ? html`
+              <div class="speedtest-progress">
+                <div class="progress-header">
+                  <span class="progress-phase">${this.getPhaseLabel()}</span>
+                  <span class="progress-time">${this.formatElapsed()}</span>
+                </div>
+                <div class="progress-bar">
+                  <div class="progress-fill ${this.speedtestPhase === 'complete' ? 'complete' : ''}" style="width: ${this.speedtestProgress}%"></div>
+                </div>
+              </div>
+            ` : html`
+              <div class="speedtest-results">
+                <div class="speedtest-metric">
+                  <div class="speedtest-value">${m.speedtest.lastDownloadSpeedMbps.toFixed(1)}</div>
+                  <div class="speedtest-unit">Mbps</div>
+                  <div class="speedtest-label">Download</div>
+                </div>
+                <div class="speedtest-metric">
+                  <div class="speedtest-value">${m.speedtest.lastUploadSpeedMbps.toFixed(1)}</div>
+                  <div class="speedtest-unit">Mbps</div>
+                  <div class="speedtest-label">Upload</div>
+                </div>
+                <div class="speedtest-metric">
+                  <div class="speedtest-value">${m.speedtest.lastLatencyMs.toFixed(0)}</div>
+                  <div class="speedtest-unit">ms</div>
+                  <div class="speedtest-label">Latency</div>
+                </div>
+              </div>
+            `}
+            <div class="btn-row">
+              <button class="btn btn-secondary" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
+                ${this.speedtestRunning ? 'Testing...' : 'Run Test'}
+              </button>
             </div>
-          ` : html`
-            <div class="row"><span class="label">Download:</span><span class="value">${m.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
-            <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
-            <div class="row"><span class="label">Upload:</span><span class="value">${m.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
-            <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
-            <div class="row"><span class="label">Latency:</span><span class="value">${m.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
-          `}
-          <div class="btn-row">
-            <button class="btn" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
-              ${this.speedtestRunning ? 'Testing...' : 'Run Test'}
-            </button>
           </div>
         </div>
       </div>

ts_swdash/sw-dash-requests.ts

@@ -0,0 +1,581 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, panelStyles, tableStyles, buttonStyles } from './sw-dash-styles.js';
+
+export interface ITypedRequestLogEntry {
+  correlationId: string;
+  method: string;
+  direction: 'outgoing' | 'incoming';
+  phase: 'request' | 'response';
+  timestamp: number;
+  durationMs?: number;
+  payload: any;
+  error?: string;
+}
+
+export interface ITypedRequestStats {
+  totalRequests: number;
+  totalResponses: number;
+  methodCounts: Record<string, { requests: number; responses: number; errors: number; avgDurationMs: number }>;
+  errorCount: number;
+  avgDurationMs: number;
+}
+
+type TRequestFilter = 'all' | 'outgoing' | 'incoming';
+type TPhaseFilter = 'all' | 'request' | 'response';
+
+/**
+ * TypedRequest traffic monitoring panel for sw-dash
+ *
+ * Receives logs, stats, and methods via properties from parent (sw-dash-app).
+ * Filtering is done locally.
+ * Load more and clear operations dispatch events to parent.
+ */
+@customElement('sw-dash-requests')
+export class SwDashRequests extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    panelStyles,
+    tableStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .requests-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--space-4);
+        gap: var(--space-3);
+        flex-wrap: wrap;
+      }
+
+      .filter-group {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      .filter-label {
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+
+      .filter-select {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        padding: var(--space-1) var(--space-2);
+        color: var(--text-primary);
+        font-size: 12px;
+      }
+
+      .filter-select:focus {
+        outline: none;
+        border-color: var(--accent-primary);
+      }
+
+      .requests-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+        max-height: 600px;
+        overflow-y: auto;
+      }
+
+      .request-card {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-3);
+      }
+
+      .request-card.has-error {
+        border-color: var(--accent-error);
+      }
+
+      .request-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: var(--space-2);
+        gap: var(--space-2);
+      }
+
+      .request-badges {
+        display: flex;
+        gap: var(--space-2);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--space-1) var(--space-2);
+        border-radius: var(--radius-sm);
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .badge.direction-outgoing { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+      .badge.direction-incoming { background: rgba(34, 197, 94, 0.15); color: var(--accent-success); }
+      .badge.phase-request { background: rgba(251, 191, 36, 0.15); color: var(--accent-warning); }
+      .badge.phase-response { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
+      .badge.error { background: rgba(239, 68, 68, 0.15); color: var(--accent-error); }
+
+      .method-name {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-primary);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      .request-meta {
+        display: flex;
+        gap: var(--space-3);
+        align-items: center;
+        font-size: 11px;
+        color: var(--text-tertiary);
+      }
+
+      .request-time {
+        font-variant-numeric: tabular-nums;
+      }
+
+      .request-duration {
+        color: var(--accent-success);
+      }
+
+      .request-duration.slow {
+        color: var(--accent-warning);
+      }
+
+      .request-duration.very-slow {
+        color: var(--accent-error);
+      }
+
+      .request-payload {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        background: var(--bg-tertiary);
+        padding: var(--space-2);
+        border-radius: var(--radius-sm);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        white-space: pre-wrap;
+        word-break: break-all;
+        max-height: 150px;
+        overflow-y: auto;
+        margin-top: var(--space-2);
+      }
+
+      .request-error {
+        font-size: 12px;
+        color: var(--accent-error);
+        background: rgba(239, 68, 68, 0.1);
+        padding: var(--space-2);
+        border-radius: var(--radius-sm);
+        margin-top: var(--space-2);
+      }
+
+      .stats-bar {
+        display: flex;
+        gap: var(--space-4);
+        margin-bottom: var(--space-4);
+        padding: var(--space-3);
+        background: var(--bg-secondary);
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        flex-wrap: wrap;
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+      }
+
+      .stat-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--text-primary);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .stat-value.error {
+        color: var(--accent-error);
+      }
+
+      .stat-label {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .method-stats {
+        margin-bottom: var(--space-4);
+      }
+
+      .method-stats-title {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--text-secondary);
+        margin-bottom: var(--space-2);
+      }
+
+      .method-stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: var(--space-2);
+      }
+
+      .method-stat-card {
+        background: var(--bg-tertiary);
+        border-radius: var(--radius-sm);
+        padding: var(--space-2);
+      }
+
+      .method-stat-name {
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--text-primary);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        margin-bottom: var(--space-1);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .method-stat-details {
+        display: flex;
+        gap: var(--space-3);
+        font-size: 10px;
+        color: var(--text-tertiary);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: var(--space-6);
+        color: var(--text-tertiary);
+      }
+
+      .clear-btn {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--accent-error);
+        border: 1px solid transparent;
+      }
+
+      .clear-btn:hover {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: var(--accent-error);
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--space-2);
+        margin-top: var(--space-4);
+      }
+
+      .page-info {
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+
+      .toggle-payload {
+        font-size: 11px;
+        color: var(--accent-primary);
+        cursor: pointer;
+        margin-top: var(--space-1);
+      }
+
+      .toggle-payload:hover {
+        text-decoration: underline;
+      }
+
+      .correlation-id {
+        font-size: 10px;
+        color: var(--text-tertiary);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+    `
+  ];
+
+  // Received from parent (sw-dash-app)
+  @property({ type: Array }) accessor logs: ITypedRequestLogEntry[] = [];
+  @property({ type: Number }) accessor totalCount = 0;
+  @property({ type: Object }) accessor stats: ITypedRequestStats | null = null;
+  @property({ type: Array }) accessor methods: string[] = [];
+
+  // Local state for filtering
+  @state() accessor directionFilter: TRequestFilter = 'all';
+  @state() accessor phaseFilter: TPhaseFilter = 'all';
+  @state() accessor methodFilter = '';
+  @state() accessor searchText = '';
+  @state() accessor expandedPayloads: Set<string> = new Set();
+  @state() accessor isLoadingMore = false;
+
+  private handleDirectionFilterChange(e: Event): void {
+    this.directionFilter = (e.target as HTMLSelectElement).value as TRequestFilter;
+    // Local filtering - no HTTP request
+  }
+
+  private handlePhaseFilterChange(e: Event): void {
+    this.phaseFilter = (e.target as HTMLSelectElement).value as TPhaseFilter;
+    // Local filtering - no HTTP request
+  }
+
+  private handleMethodFilterChange(e: Event): void {
+    this.methodFilter = (e.target as HTMLSelectElement).value;
+    // Local filtering - no HTTP request
+  }
+
+  private handleSearch(e: Event): void {
+    this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
+  }
+
+  private handleClear(): void {
+    if (!confirm('Are you sure you want to clear the request logs? This cannot be undone.')) {
+      return;
+    }
+    // Dispatch event to parent to clear via DeesComms
+    this.dispatchEvent(new CustomEvent('clear-requests', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private loadMore(): void {
+    if (this.isLoadingMore || this.logs.length === 0) return;
+
+    this.isLoadingMore = true;
+    const oldestLog = this.logs[this.logs.length - 1];
+
+    // Dispatch event to parent to load more via DeesComms
+    this.dispatchEvent(new CustomEvent('load-more-requests', {
+      detail: {
+        before: oldestLog.timestamp,
+        method: this.methodFilter || undefined,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+
+    // Reset loading state after a short delay (parent will update logs prop)
+    setTimeout(() => {
+      this.isLoadingMore = false;
+    }, 1000);
+  }
+
+  private togglePayload(correlationId: string): void {
+    const newSet = new Set(this.expandedPayloads);
+    if (newSet.has(correlationId)) {
+      newSet.delete(correlationId);
+    } else {
+      newSet.add(correlationId);
+    }
+    this.expandedPayloads = newSet;
+  }
+
+  private formatTimestamp(ts: number): string {
+    const date = new Date(ts);
+    return date.toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3
+    });
+  }
+
+  private getDurationClass(durationMs: number | undefined): string {
+    if (!durationMs) return '';
+    if (durationMs > 5000) return 'very-slow';
+    if (durationMs > 1000) return 'slow';
+    return '';
+  }
+
+  private formatDuration(durationMs: number | undefined): string {
+    if (!durationMs) return '';
+    if (durationMs < 1000) return `${durationMs}ms`;
+    return `${(durationMs / 1000).toFixed(2)}s`;
+  }
+
+  /**
+   * Filter logs locally based on direction, phase, method, and search text
+   */
+  private getFilteredLogs(): ITypedRequestLogEntry[] {
+    let result = this.logs;
+
+    // Apply direction filter
+    if (this.directionFilter !== 'all') {
+      result = result.filter(l => l.direction === this.directionFilter);
+    }
+
+    // Apply phase filter
+    if (this.phaseFilter !== 'all') {
+      result = result.filter(l => l.phase === this.phaseFilter);
+    }
+
+    // Apply method filter
+    if (this.methodFilter) {
+      result = result.filter(l => l.method === this.methodFilter);
+    }
+
+    // Apply search
+    if (this.searchText) {
+      result = result.filter(l =>
+        l.method.toLowerCase().includes(this.searchText) ||
+        l.correlationId.toLowerCase().includes(this.searchText) ||
+        (l.error && l.error.toLowerCase().includes(this.searchText)) ||
+        JSON.stringify(l.payload).toLowerCase().includes(this.searchText)
+      );
+    }
+
+    return result;
+  }
+
+  public render(): TemplateResult {
+    const filteredLogs = this.getFilteredLogs();
+
+    return html`
+      <!-- Stats Bar -->
+      <div class="stats-bar">
+        <div class="stat-item">
+          <span class="stat-value">${this.stats?.totalRequests ?? 0}</span>
+          <span class="stat-label">Total Requests</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">${this.stats?.totalResponses ?? 0}</span>
+          <span class="stat-label">Total Responses</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value ${(this.stats?.errorCount ?? 0) > 0 ? 'error' : ''}">${this.stats?.errorCount ?? 0}</span>
+          <span class="stat-label">Errors</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">${this.stats?.avgDurationMs ?? 0}ms</span>
+          <span class="stat-label">Avg Duration</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">${filteredLogs.length}</span>
+          <span class="stat-label">Showing</span>
+        </div>
+      </div>
+
+      <!-- Method Stats -->
+      ${this.stats && Object.keys(this.stats.methodCounts).length > 0 ? html`
+        <div class="method-stats">
+          <div class="method-stats-title">Methods</div>
+          <div class="method-stats-grid">
+            ${Object.entries(this.stats.methodCounts).slice(0, 8).map(([method, data]) => html`
+              <div class="method-stat-card">
+                <div class="method-stat-name" title="${method}">${method}</div>
+                <div class="method-stat-details">
+                  <span>${data.requests} req</span>
+                  <span>${data.responses} res</span>
+                  ${data.errors > 0 ? html`<span style="color: var(--accent-error)">${data.errors} err</span>` : ''}
+                  <span>${data.avgDurationMs}ms avg</span>
+                </div>
+              </div>
+            `)}
+          </div>
+        </div>
+      ` : ''}
+
+      <!-- Filters -->
+      <div class="requests-header">
+        <div class="filter-group">
+          <span class="filter-label">Direction:</span>
+          <select class="filter-select" @change="${this.handleDirectionFilterChange}">
+            <option value="all">All</option>
+            <option value="outgoing">Outgoing</option>
+            <option value="incoming">Incoming</option>
+          </select>
+
+          <span class="filter-label">Phase:</span>
+          <select class="filter-select" @change="${this.handlePhaseFilterChange}">
+            <option value="all">All</option>
+            <option value="request">Request</option>
+            <option value="response">Response</option>
+          </select>
+
+          <span class="filter-label">Method:</span>
+          <select class="filter-select" @change="${this.handleMethodFilterChange}">
+            <option value="">All Methods</option>
+            ${this.methods.map(m => html`<option value="${m}">${m}</option>`)}
+          </select>
+
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search..."
+            .value="${this.searchText}"
+            @input="${this.handleSearch}"
+            style="width: 150px;"
+          >
+        </div>
+        <button class="btn clear-btn" @click="${this.handleClear}">Clear Logs</button>
+      </div>
+
+      <!-- Request List -->
+      ${this.logs.length === 0 ? html`
+        <div class="empty-state">No request logs found. Traffic will appear here as TypedRequests are made.</div>
+      ` : filteredLogs.length === 0 ? html`
+        <div class="empty-state">No logs match filter</div>
+      ` : html`
+        <div class="requests-list">
+          ${filteredLogs.map(log => html`
+            <div class="request-card ${log.error ? 'has-error' : ''}">
+              <div class="request-header">
+                <div>
+                  <div class="request-badges">
+                    <span class="badge direction-${log.direction}">${log.direction}</span>
+                    <span class="badge phase-${log.phase}">${log.phase}</span>
+                    ${log.error ? html`<span class="badge error">error</span>` : ''}
+                  </div>
+                  <div class="method-name">${log.method}</div>
+                  <div class="correlation-id">${log.correlationId}</div>
+                </div>
+                <div class="request-meta">
+                  <span class="request-time">${this.formatTimestamp(log.timestamp)}</span>
+                  ${log.durationMs !== undefined ? html`
+                    <span class="request-duration ${this.getDurationClass(log.durationMs)}">
+                      ${this.formatDuration(log.durationMs)}
+                    </span>
+                  ` : ''}
+                </div>
+              </div>
+
+              ${log.error ? html`
+                <div class="request-error">${log.error}</div>
+              ` : ''}
+
+              <div class="toggle-payload" @click="${() => this.togglePayload(log.correlationId)}">
+                ${this.expandedPayloads.has(log.correlationId) ? 'Hide payload' : 'Show payload'}
+              </div>
+
+              ${this.expandedPayloads.has(log.correlationId) ? html`
+                <div class="request-payload">${JSON.stringify(log.payload, null, 2)}</div>
+              ` : ''}
+            </div>
+          `)}
+        </div>
+
+        ${this.logs.length < this.totalCount ? html`
+          <div class="pagination">
+            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoadingMore}">
+              ${this.isLoadingMore ? 'Loading...' : 'Load More'}
+            </button>
+            <span class="page-info">${this.logs.length} of ${this.totalCount} logs</span>
+          </div>
+        ` : ''}
+      `}
+    `;
+  }
+}

ts_swdash/sw-dash-styles.ts

@@ -2,29 +2,58 @@ import { css } from './plugins.js';
 import type { CSSResult } from './plugins.js';
 
 /**
- * Shared terminal-style theme for sw-dash components
+ * Modern professional theme for sw-dash components
+ * Inspired by Bloomberg terminals, Vercel dashboards, and shadcn/ui
  */
 export const sharedStyles: CSSResult = css`
   :host {
-    --sw-bg-dark: #0a0a0a;
-    --sw-bg-panel: #0d0d0d;
-    --sw-bg-header: #111;
-    --sw-bg-input: #1a1a1a;
-    --sw-border: #333;
-    --sw-border-active: #00ff00;
-    --sw-text-primary: #00ff00;
-    --sw-text-secondary: #888;
-    --sw-text-cyan: #00ffff;
-    --sw-text-warning: #ffff00;
-    --sw-text-error: #ff4444;
-    --sw-gauge-good: #00aa00;
-    --sw-gauge-warning: #aaaa00;
-    --sw-gauge-bad: #aa0000;
+    /* Neutral backgrounds - zinc scale */
+    --bg-primary: #09090b;
+    --bg-secondary: #18181b;
+    --bg-tertiary: #27272a;
+    --bg-elevated: #3f3f46;
 
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 14px;
-    line-height: 1.4;
-    color: var(--sw-text-primary);
+    /* Text colors */
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #71717a;
+
+    /* Borders */
+    --border-default: #27272a;
+    --border-muted: #3f3f46;
+
+    /* Accent colors */
+    --accent-primary: #3b82f6;
+    --accent-success: #22c55e;
+    --accent-warning: #eab308;
+    --accent-error: #ef4444;
+    --accent-info: #06b6d4;
+
+    /* Spacing scale */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+
+    /* Border radius */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  * {
+    box-sizing: border-box;
   }
 `;
 
@@ -32,123 +61,129 @@ export const terminalStyles: CSSResult = css`
   .terminal {
     max-width: 1200px;
     margin: 0 auto;
-    border: 1px solid var(--sw-border-active);
-    background: var(--sw-bg-panel);
-    box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
+    border: 1px solid var(--border-default);
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
   }
 
   .header {
-    border-bottom: 1px solid var(--sw-border-active);
-    padding: 10px 15px;
+    border-bottom: 1px solid var(--border-default);
+    padding: var(--space-4) var(--space-5);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--sw-bg-header);
+    background: var(--bg-secondary);
   }
 
   .title {
-    color: var(--sw-text-primary);
-    font-weight: bold;
-    font-size: 16px;
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: -0.01em;
   }
 
   .uptime {
-    color: var(--sw-text-secondary);
+    color: var(--text-tertiary);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
   }
 
   .content {
-    padding: 15px;
+    padding: var(--space-5);
     min-height: 400px;
+    background: var(--bg-primary);
   }
 
   .footer {
-    border-top: 1px solid var(--sw-border-active);
-    padding: 10px 15px;
+    border-top: 1px solid var(--border-default);
+    padding: var(--space-3) var(--space-5);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--sw-bg-header);
+    background: var(--bg-secondary);
     font-size: 12px;
   }
 
   .refresh-info {
-    color: var(--sw-text-secondary);
+    color: var(--text-tertiary);
+    font-size: 11px;
   }
 
   .status {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .status-dot {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    background: var(--sw-text-primary);
-    animation: pulse 2s infinite;
+    background: var(--accent-success);
+  }
+
+  .status-dot.offline {
+    background: var(--accent-error);
   }
 
   .prompt {
-    color: var(--sw-text-primary);
-  }
-
-  .cursor {
-    display: inline-block;
-    width: 8px;
-    height: 14px;
-    background: var(--sw-text-primary);
-    animation: blink 1s step-end infinite;
-    vertical-align: middle;
-    margin-left: 2px;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-
-  @keyframes blink {
-    50% { opacity: 0; }
+    color: var(--text-secondary);
+    font-size: 11px;
   }
 `;
 
 export const navStyles: CSSResult = css`
   .nav {
     display: flex;
-    background: var(--sw-bg-header);
-    border-bottom: 1px solid var(--sw-border);
-    padding: 0 10px;
+    gap: var(--space-1);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-default);
+    padding: var(--space-2) var(--space-3);
   }
 
   .nav-tab {
-    padding: 10px 20px;
+    padding: var(--space-2) var(--space-4);
     cursor: pointer;
-    color: var(--sw-text-secondary);
+    color: var(--text-secondary);
     border: none;
     background: transparent;
     font-family: inherit;
     font-size: 13px;
-    transition: all 0.2s;
-    border-bottom: 2px solid transparent;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    border-radius: var(--radius-sm);
   }
 
   .nav-tab:hover {
-    color: var(--sw-text-primary);
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
   }
 
   .nav-tab.active {
-    color: var(--sw-text-primary);
-    border-bottom-color: var(--sw-text-primary);
-    background: var(--sw-bg-input);
+    color: var(--text-primary);
+    background: var(--bg-elevated);
   }
 
   .nav-tab .count {
-    background: var(--sw-border);
-    padding: 1px 6px;
-    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 18px;
+    background: var(--bg-tertiary);
+    padding: 0 6px;
+    border-radius: 9999px;
     font-size: 11px;
-    margin-left: 6px;
+    font-weight: 500;
+    margin-left: var(--space-2);
+    color: var(--text-secondary);
+  }
+
+  .nav-tab.active .count {
+    background: var(--accent-primary);
+    color: white;
   }
 `;
 
@@ -156,137 +191,167 @@ export const panelStyles: CSSResult = css`
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-    gap: 15px;
+    gap: var(--space-4);
   }
 
   .panel {
-    border: 1px solid var(--sw-border);
-    padding: 12px;
-    background: var(--sw-bg-dark);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
   }
 
   .panel-title {
-    color: var(--sw-text-cyan);
-    font-weight: bold;
-    margin-bottom: 10px;
-    padding-bottom: 5px;
-    border-bottom: 1px dashed var(--sw-border);
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border-default);
+    background: var(--bg-tertiary);
+  }
+
+  .panel-content {
+    padding: var(--space-4);
   }
 
   .row {
     display: flex;
     justify-content: space-between;
-    padding: 3px 0;
+    align-items: center;
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--border-muted);
+  }
+
+  .row:last-child {
+    border-bottom: none;
   }
 
   .label {
-    color: var(--sw-text-secondary);
+    color: var(--text-secondary);
+    font-size: 13px;
   }
 
   .value {
-    color: var(--sw-text-primary);
+    color: var(--text-primary);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
   }
 
   .value.warning {
-    color: var(--sw-text-warning);
+    color: var(--accent-warning);
   }
 
   .value.error {
-    color: var(--sw-text-error);
+    color: var(--accent-error);
   }
 
   .value.success {
-    color: var(--sw-text-primary);
+    color: var(--accent-success);
   }
 `;
 
 export const gaugeStyles: CSSResult = css`
   .gauge {
-    margin: 8px 0;
+    margin: var(--space-3) 0;
+  }
+
+  .gauge-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-2);
+    font-size: 12px;
+  }
+
+  .gauge-label {
+    color: var(--text-secondary);
+  }
+
+  .gauge-value {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
   }
 
   .gauge-bar {
-    height: 16px;
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border);
-    position: relative;
-    font-size: 12px;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
   }
 
   .gauge-fill {
     height: 100%;
+    border-radius: 3px;
     transition: width 0.3s ease;
   }
 
   .gauge-fill.good {
-    background: var(--sw-gauge-good);
+    background: var(--accent-success);
   }
 
   .gauge-fill.warning {
-    background: var(--sw-gauge-warning);
+    background: var(--accent-warning);
   }
 
   .gauge-fill.bad {
-    background: var(--sw-gauge-bad);
-  }
-
-  .gauge-text {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: #fff;
-    font-weight: bold;
-    text-shadow: 1px 1px 2px #000;
+    background: var(--accent-error);
   }
 `;
 
 export const tableStyles: CSSResult = css`
   .table-container {
     overflow-x: auto;
+    border-radius: var(--radius-md);
   }
 
   .data-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 12px;
-  }
-
-  .data-table th,
-  .data-table td {
-    padding: 8px 10px;
-    text-align: left;
-    border-bottom: 1px solid var(--sw-border);
+    font-size: 13px;
   }
 
   .data-table th {
-    background: var(--sw-bg-input);
-    color: var(--sw-text-cyan);
+    text-align: left;
+    padding: var(--space-3) var(--space-4);
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
+    border-bottom: 1px solid var(--border-default);
   }
 
   .data-table th:hover {
-    background: #252525;
+    background: var(--bg-elevated);
+    color: var(--text-primary);
   }
 
   .data-table th .sort-icon {
-    margin-left: 5px;
-    opacity: 0.5;
+    margin-left: var(--space-1);
+    opacity: 0.4;
+    font-size: 10px;
   }
 
   .data-table th.sorted .sort-icon {
     opacity: 1;
-    color: var(--sw-text-primary);
-  }
-
-  .data-table tr:hover {
-    background: #151515;
+    color: var(--accent-primary);
   }
 
   .data-table td {
-    color: #ccc;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border-default);
+    color: var(--text-primary);
+  }
+
+  .data-table tr:hover td {
+    background: var(--bg-tertiary);
   }
 
   .data-table td.url {
@@ -294,83 +359,119 @@ export const tableStyles: CSSResult = css`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: var(--text-secondary);
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 12px;
   }
 
   .data-table td.num {
     text-align: right;
-    color: var(--sw-text-primary);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
   }
 
   .table-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
-    gap: 10px;
+    margin-bottom: var(--space-4);
+    gap: var(--space-3);
   }
 
   .search-input {
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border);
-    color: var(--sw-text-primary);
-    padding: 6px 10px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-default);
+    color: var(--text-primary);
+    padding: var(--space-2) var(--space-3);
     font-family: inherit;
-    font-size: 12px;
-    width: 250px;
+    font-size: 13px;
+    width: 280px;
+    border-radius: var(--radius-md);
+    transition: all 0.15s ease;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-tertiary);
   }
 
   .search-input:focus {
     outline: none;
-    border-color: var(--sw-border-active);
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
 
   .table-info {
-    color: var(--sw-text-secondary);
+    color: var(--text-tertiary);
     font-size: 12px;
   }
 
   .hit-rate-bar {
     width: 60px;
-    height: 10px;
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border);
+    height: 4px;
+    background: var(--bg-tertiary);
+    border-radius: 2px;
     display: inline-block;
     vertical-align: middle;
-    margin-right: 6px;
+    margin-right: var(--space-2);
+    overflow: hidden;
   }
 
   .hit-rate-fill {
     height: 100%;
+    border-radius: 2px;
   }
 
   .hit-rate-fill.good {
-    background: var(--sw-gauge-good);
+    background: var(--accent-success);
   }
 
   .hit-rate-fill.warning {
-    background: var(--sw-gauge-warning);
+    background: var(--accent-warning);
   }
 
   .hit-rate-fill.bad {
-    background: var(--sw-gauge-bad);
+    background: var(--accent-error);
   }
 `;
 
 export const buttonStyles: CSSResult = css`
   .btn {
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border-active);
-    color: var(--sw-text-primary);
-    padding: 8px 16px;
-    cursor: pointer;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-md);
     font-family: inherit;
-    font-size: 12px;
-    transition: all 0.2s ease;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
   }
 
-  .btn:hover {
-    background: var(--sw-text-primary);
-    color: #000;
+  .btn-primary {
+    background: var(--accent-primary);
+    color: white;
+    border: none;
+  }
+
+  .btn-primary:hover {
+    background: #2563eb;
+  }
+
+  .btn-primary:active {
+    background: #1d4ed8;
+  }
+
+  .btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-default);
+  }
+
+  .btn-secondary:hover {
+    background: var(--bg-elevated);
+    border-color: var(--border-muted);
   }
 
   .btn:disabled {
@@ -381,114 +482,186 @@ export const buttonStyles: CSSResult = css`
   .btn-row {
     display: flex;
     justify-content: flex-end;
-    margin-top: 10px;
+    gap: var(--space-2);
+    margin-top: var(--space-4);
   }
 `;
 
 export const speedtestStyles: CSSResult = css`
   .online-indicator {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 0;
-    margin-bottom: 10px;
-    border-bottom: 1px dashed var(--sw-border);
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    border-radius: 9999px;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: var(--space-4);
+  }
+
+  .online-indicator.online {
+    background: rgba(34, 197, 94, 0.1);
+    color: var(--accent-success);
+  }
+
+  .online-indicator.offline {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--accent-error);
   }
 
   .online-dot {
-    width: 12px;
-    height: 12px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    transition: background-color 0.3s ease;
+    background: currentColor;
   }
 
-  .online-dot.online {
-    background: var(--sw-text-primary);
-    box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
+  .speedtest-results {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    margin-top: var(--space-4);
   }
 
-  .online-dot.offline {
-    background: var(--sw-text-error);
-    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
+  .speedtest-metric {
+    text-align: center;
+    padding: var(--space-4);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+  }
+
+  .speedtest-value {
+    font-size: 24px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-primary);
+    line-height: 1.2;
+  }
+
+  .speedtest-unit {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: var(--space-1);
+  }
+
+  .speedtest-label {
+    font-size: 11px;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: var(--space-2);
   }
 
   .speed-bar {
-    height: 8px;
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border);
-    margin: 4px 0;
+    height: 4px;
+    background: var(--bg-tertiary);
+    border-radius: 2px;
+    margin: var(--space-1) 0;
+    overflow: hidden;
   }
 
   .speed-fill {
     height: 100%;
-    background: var(--sw-gauge-good);
+    background: var(--accent-success);
+    border-radius: 2px;
     transition: width 0.5s ease;
   }
 
   /* Speedtest progress indicator */
   .speedtest-progress {
-    padding: 10px 0;
+    padding: var(--space-4) 0;
   }
 
   .progress-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: var(--space-3);
   }
 
   .progress-phase {
-    color: var(--sw-text-cyan);
-    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--accent-info);
+    font-weight: 500;
+    font-size: 13px;
+  }
+
+  .progress-phase::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
     animation: pulse 1s infinite;
   }
 
   .progress-time {
-    color: var(--sw-text-secondary);
+    color: var(--text-tertiary);
     font-size: 12px;
+    font-variant-numeric: tabular-nums;
   }
 
   .progress-bar {
-    height: 20px;
-    background: var(--sw-bg-input);
-    border: 1px solid var(--sw-border);
-    position: relative;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
     overflow: hidden;
   }
 
   .progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--sw-gauge-good), var(--sw-text-cyan));
+    background: var(--accent-info);
+    border-radius: 3px;
     transition: width 0.1s linear;
-    position: relative;
-  }
-
-  .progress-fill::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    animation: shimmer 1.5s infinite;
   }
 
   .progress-fill.complete {
-    background: var(--sw-text-primary);
-  }
-
-  .progress-fill.complete::after {
-    display: none;
-  }
-
-  @keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    background: var(--accent-success);
   }
 
   @keyframes pulse {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
+    50% { opacity: 0.4; }
+  }
+`;
+
+export const statusBadgeStyles: CSSResult = css`
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border-radius: 9999px;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .status-badge.success {
+    background: rgba(34, 197, 94, 0.1);
+    color: var(--accent-success);
+  }
+
+  .status-badge.warning {
+    background: rgba(234, 179, 8, 0.1);
+    color: var(--accent-warning);
+  }
+
+  .status-badge.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--accent-error);
+  }
+
+  .status-badge.info {
+    background: rgba(6, 182, 212, 0.1);
+    color: var(--accent-info);
+  }
+
+  .status-badge .badge-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: currentColor;
   }
 `;

ts_swdash/sw-dash-table.ts

@@ -151,7 +151,7 @@ export class SwDashTable extends LitElement {
                 >
                   ${col.label}
                   ${col.sortable !== false ? html`
-                    <span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '^' : 'v'}</span>
+                    <span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '↑' : '↓'}</span>
                   ` : ''}
                 </th>
               `)}

ts_web_inject/index.ts

@@ -3,12 +3,15 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
 import { logger } from './typedserver_web.logger.js';
 logger.log('info', `TypedServer-Devtools initialized!`);
 
-import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
+import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
+
+// Import hook types from typedrequest
+type ITypedRequestLogEntry = plugins.typedrequest.ITypedRequestLogEntry;
 
 export class ReloadChecker {
   public reloadJustified = false;
   public backendConnectionLost = false;
-  public infoscreen = new TypedserverInfoscreen();
+  public statusPill = new TypedserverStatusPill();
   public store = new plugins.webstore.WebStore({
     dbName: 'apiglobal__typedserver',
     storeName: 'apiglobal__typedserver',
@@ -17,14 +20,91 @@ export class ReloadChecker {
 
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
+  private swStatusUnsubscribe: (() => void) | null = null;
+  private trafficLoggingEnabled = false;
 
-  constructor() {}
+  constructor() {
+    // Listen to browser online/offline events
+    window.addEventListener('online', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'online',
+        message: 'Back online',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    window.addEventListener('offline', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'offline',
+        message: 'No internet connection',
+        persist: true,
+        timestamp: Date.now(),
+      });
+    });
+  }
 
   public async reload() {
     // this looks a bit hacky, but apparently is the safest way to really reload stuff
     window.location.reload();
   }
 
+  /**
+   * Subscribe to service worker status updates
+   */
+  public subscribeToServiceWorker(): void {
+    // Check if service worker client is available
+    if (globalThis.globalSw?.actionManager) {
+      this.swStatusUnsubscribe = globalThis.globalSw.actionManager.subscribeToStatusUpdates((status) => {
+        this.statusPill.updateStatus({
+          source: status.source,
+          type: status.type,
+          message: status.message,
+          details: status.details,
+          persist: status.persist || false,
+          timestamp: status.timestamp,
+        });
+      });
+      logger.log('info', 'Subscribed to service worker status updates');
+
+      // Get initial SW status
+      this.fetchServiceWorkerStatus();
+    } else {
+      logger.log('note', 'Service worker client not available yet, will retry...');
+      // Retry after a delay
+      setTimeout(() => this.subscribeToServiceWorker(), 2000);
+    }
+  }
+
+  /**
+   * Fetch and display initial service worker status
+   */
+  private async fetchServiceWorkerStatus(): Promise<void> {
+    if (!globalThis.globalSw?.actionManager) return;
+
+    try {
+      const status = await globalThis.globalSw.actionManager.getServiceWorkerStatus();
+      if (status) {
+        this.statusPill.updateStatus({
+          source: 'serviceworker',
+          type: status.isActive ? 'connected' : 'disconnected',
+          message: status.isActive ? 'Service worker active' : 'Service worker inactive',
+          details: {
+            cacheHitRate: status.cacheHitRate,
+            resourceCount: status.resourceCount,
+            connectionType: status.connectionType,
+          },
+          persist: false,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      logger.log('warn', `Failed to get SW status: ${error}`);
+    }
+  }
+
   /**
    * starts the reload checker
    */
@@ -50,11 +130,23 @@ export class ReloadChecker {
     if (response?.status !== 200) {
       this.backendConnectionLost = true;
       logger.log('warn', `got a status ${response?.status}.`);
-      this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'disconnected',
+        message: `Backend connection lost (${response?.status || 'timeout'})`,
+        persist: true,
+        timestamp: Date.now(),
+      });
     }
     if (response?.status === 200 && this.backendConnectionLost) {
       this.backendConnectionLost = false;
-      this.infoscreen.setSuccess('regained connection to backend...');
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'connected',
+        message: 'Backend connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
     }
     return response;
   }
@@ -69,10 +161,15 @@ export class ReloadChecker {
 
     if (reloadJustified) {
       this.store.set(this.storeKey, lastServerChange);
-      const reloadText = `upgrading... ${
-        globalThis.globalSw ? '(purging the sw cache first...)' : ''
-      }`;
-      this.infoscreen.setText(reloadText);
+      const hasSw = !!globalThis.globalSw;
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'update',
+        message: hasSw ? 'Updating app...' : 'Upgrading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
+
       if (globalThis.globalSw?.purgeCache) {
         await globalThis.globalSw.purgeCache();
       } else if ('caches' in window) {
@@ -87,14 +184,19 @@ export class ReloadChecker {
       } else {
         console.log('globalThis.globalSw not found and Cache API not available...');
       }
-      this.infoscreen.setText(`cleaned caches`);
+
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Cache cleared, reloading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
       await plugins.smartdelay.delayFor(200);
       this.reload();
       return;
     } else {
-      if (this.infoscreen) {
-        this.infoscreen.hide();
-      }
+      // All good, hide after brief show
       return;
     }
   }
@@ -116,10 +218,22 @@ export class ReloadChecker {
         console.log(`typedsocket status: ${statusArg}`);
         if (statusArg === 'disconnected' || statusArg === 'reconnecting') {
           this.backendConnectionLost = true;
-          this.infoscreen.setText(`typedsocket ${statusArg}!`);
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: statusArg === 'disconnected' ? 'disconnected' : 'reconnecting',
+            message: `TypedSocket ${statusArg}`,
+            persist: true,
+            timestamp: Date.now(),
+          });
         } else if (statusArg === 'connected' && this.backendConnectionLost) {
           this.backendConnectionLost = false;
-          this.infoscreen.setSuccess('typedsocket connected!');
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: 'connected',
+            message: 'TypedSocket connected',
+            persist: false,
+            timestamp: Date.now(),
+          });
           // lets check if a reload is necessary
           const getLatestServerChangeTime =
             this.typedsocket.createTypedRequest<interfaces.IReq_GetLatestServerChangeTime>(
@@ -130,6 +244,9 @@ export class ReloadChecker {
         }
       });
       logger.log('success', `ReloadChecker connected through typedsocket!`);
+
+      // Enable traffic logging for sw-dash
+      this.enableTrafficLogging();
     }
   }
 
@@ -137,9 +254,13 @@ export class ReloadChecker {
   public async start() {
     this.started = true;
     logger.log('info', `starting ReloadChecker...`);
+
+    // Subscribe to service worker status updates
+    this.subscribeToServiceWorker();
+
     while (this.started) {
       const response = await this.performHttpRequest();
-      if (response.status === 200) {
+      if (response?.status === 200) {
         logger.log('info', `ReloadChecker reached backend!`);
         await this.checkReload(parseInt(await response.text()));
         await this.connectTypedsocket();
@@ -150,6 +271,55 @@ export class ReloadChecker {
 
   public async stop() {
     this.started = false;
+    if (this.swStatusUnsubscribe) {
+      this.swStatusUnsubscribe();
+      this.swStatusUnsubscribe = null;
+    }
+    // Clear global hooks when stopping
+    if (this.trafficLoggingEnabled) {
+      plugins.typedrequest.TypedRouter.clearGlobalHooks();
+      this.trafficLoggingEnabled = false;
+    }
+  }
+
+  /**
+   * Enable TypedRequest traffic logging to the service worker
+   * Sets up global hooks on TypedRouter to capture all request/response traffic
+   */
+  public enableTrafficLogging(): void {
+    if (this.trafficLoggingEnabled) {
+      logger.log('note', 'Traffic logging already enabled');
+      return;
+    }
+
+    // Check if service worker client is available
+    if (!globalThis.globalSw?.actionManager) {
+      logger.log('note', 'Service worker client not available, will retry traffic logging setup...');
+      setTimeout(() => this.enableTrafficLogging(), 2000);
+      return;
+    }
+
+    const actionManager = globalThis.globalSw.actionManager;
+
+    // Helper function to log entries
+    const logEntry = (entry: ITypedRequestLogEntry) => {
+      // Skip logging our own logging requests to avoid infinite loops
+      if (entry.method === 'serviceworker_typedRequestLog') {
+        return;
+      }
+      actionManager.logTypedRequest(entry);
+    };
+
+    // Set up global hooks on TypedRouter
+    plugins.typedrequest.TypedRouter.setGlobalHooks({
+      onOutgoingRequest: logEntry,
+      onIncomingResponse: logEntry,
+      onIncomingRequest: logEntry,
+      onOutgoingResponse: logEntry,
+    });
+
+    this.trafficLoggingEnabled = true;
+    logger.log('success', 'TypedRequest traffic logging enabled');
   }
 }
 

ts_web_inject/typedserver_web.statuspill.ts

@@ -0,0 +1,534 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import * as plugins from './typedserver_web.plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typedserver-statuspill': TypedserverStatusPill;
+  }
+}
+
+/**
+ * Status source types
+ */
+export type TStatusSource = 'backend' | 'serviceworker' | 'network';
+
+/**
+ * Status type
+ */
+export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
+
+/**
+ * Status item with details
+ */
+export interface IStatusItem {
+  source: TStatusSource;
+  type: TStatusType;
+  message: string;
+  details?: {
+    version?: string;
+    cacheHitRate?: number;
+    resourceCount?: number;
+    connectionType?: string;
+    latencyMs?: number;
+  };
+  persist: boolean;
+  timestamp: number;
+}
+
+/**
+ * Modern status pill component that displays connection and service worker status
+ * - Shows at center-bottom on connectivity changes
+ * - Stays visible during error states
+ * - Expands on hover to show detailed status
+ */
+@customElement('typedserver-statuspill')
+export class TypedserverStatusPill extends LitElement {
+  // Current status items by source
+  @state() accessor backendStatus: IStatusItem | null = null;
+  @state() accessor swStatus: IStatusItem | null = null;
+  @state() accessor networkStatus: IStatusItem | null = null;
+
+  // UI state
+  @state() accessor visible = false;
+  @state() accessor expanded = false;
+  @state() accessor hasError = false;
+
+  // Hide timeout
+  private hideTimeout: number | null = null;
+  private appended = false;
+
+  public static styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      --pill-bg: rgba(20, 20, 20, 0.9);
+      --pill-bg-error: rgba(180, 40, 40, 0.95);
+      --pill-bg-success: rgba(40, 140, 60, 0.95);
+      --pill-text: #fff;
+      --pill-text-muted: rgba(255, 255, 255, 0.7);
+      --pill-border: rgba(255, 255, 255, 0.1);
+      --pill-accent: #4af;
+      --pill-success: #4f8;
+      --pill-warning: #fa4;
+      --pill-error: #f44;
+    }
+
+    .pill {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%) translateY(100px);
+      background: var(--pill-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-radius: 24px;
+      padding: 10px 20px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 13px;
+      color: var(--pill-text);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      opacity: 0;
+      pointer-events: none;
+      z-index: 10000;
+      max-width: 90vw;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+      border: 1px solid var(--pill-border);
+    }
+
+    .pill.visible {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .pill.error {
+      background: var(--pill-bg-error);
+    }
+
+    .pill.success {
+      background: var(--pill-bg-success);
+    }
+
+    .pill-main {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      white-space: nowrap;
+    }
+
+    .status-indicator {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--pill-text-muted);
+      transition: background 0.3s;
+    }
+
+    .status-dot.connected {
+      background: var(--pill-success);
+      box-shadow: 0 0 6px var(--pill-success);
+    }
+
+    .status-dot.disconnected,
+    .status-dot.offline,
+    .status-dot.error {
+      background: var(--pill-error);
+      box-shadow: 0 0 6px var(--pill-error);
+    }
+
+    .status-dot.reconnecting,
+    .status-dot.update {
+      background: var(--pill-warning);
+      animation: pulse 1s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .status-label {
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .status-message {
+      color: var(--pill-text);
+      font-weight: 400;
+    }
+
+    .separator {
+      width: 1px;
+      height: 16px;
+      background: var(--pill-border);
+    }
+
+    .pill-expanded {
+      display: none;
+      width: 100%;
+      padding-top: 8px;
+      border-top: 1px solid var(--pill-border);
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .pill.expanded .pill-expanded {
+      display: flex;
+    }
+
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      gap: 20px;
+    }
+
+    .detail-label {
+      color: var(--pill-text-muted);
+    }
+
+    .detail-value {
+      color: var(--pill-text);
+      font-weight: 500;
+    }
+
+    .detail-value.success {
+      color: var(--pill-success);
+    }
+
+    .detail-value.error {
+      color: var(--pill-error);
+    }
+
+    .detail-value.warning {
+      color: var(--pill-warning);
+    }
+
+    /* Click hint */
+    .pill::after {
+      content: '';
+      position: absolute;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 32px;
+      height: 3px;
+      background: var(--pill-border);
+      border-radius: 2px;
+      transition: background 0.2s;
+    }
+
+    .pill:hover::after {
+      background: var(--pill-text-muted);
+    }
+  `;
+
+  /**
+   * Update status from a specific source
+   */
+  public updateStatus(status: IStatusItem): void {
+    // Store by source
+    switch (status.source) {
+      case 'backend':
+        this.backendStatus = status;
+        break;
+      case 'serviceworker':
+        this.swStatus = status;
+        break;
+      case 'network':
+        this.networkStatus = status;
+        break;
+    }
+
+    // Determine if we have any errors (should persist)
+    this.hasError = this.hasAnyError();
+
+    // Show the pill
+    this.show();
+
+    // Auto-hide after delay if not persistent
+    if (!status.persist && !this.hasError) {
+      this.scheduleHide(2500);
+    } else {
+      this.cancelHide();
+    }
+  }
+
+  /**
+   * Check if any status is an error state
+   */
+  private hasAnyError(): boolean {
+    const errorTypes: TStatusType[] = ['disconnected', 'error', 'offline'];
+    return (
+      (this.backendStatus && errorTypes.includes(this.backendStatus.type)) ||
+      (this.networkStatus && errorTypes.includes(this.networkStatus.type)) ||
+      false
+    );
+  }
+
+  /**
+   * Get overall status class
+   */
+  private getStatusClass(): string {
+    if (this.hasError) return 'error';
+
+    const latestStatus = this.getLatestStatus();
+    if (latestStatus?.type === 'connected' || latestStatus?.type === 'online') {
+      return 'success';
+    }
+    return '';
+  }
+
+  /**
+   * Get the most recent status
+   */
+  private getLatestStatus(): IStatusItem | null {
+    const statuses = [this.backendStatus, this.swStatus, this.networkStatus].filter(Boolean) as IStatusItem[];
+    if (statuses.length === 0) return null;
+    return statuses.reduce((latest, current) =>
+      current.timestamp > latest.timestamp ? current : latest
+    );
+  }
+
+  /**
+   * Show the pill
+   */
+  public show(): void {
+    if (!this.appended) {
+      document.body.appendChild(this);
+      this.appended = true;
+    }
+    // Small delay to ensure DOM update
+    requestAnimationFrame(() => {
+      this.visible = true;
+    });
+  }
+
+  /**
+   * Hide the pill
+   */
+  public hide(): void {
+    this.visible = false;
+    this.expanded = false;
+  }
+
+  /**
+   * Schedule auto-hide
+   */
+  private scheduleHide(delayMs: number): void {
+    this.cancelHide();
+    this.hideTimeout = window.setTimeout(() => {
+      if (!this.hasError) {
+        this.hide();
+      }
+    }, delayMs);
+  }
+
+  /**
+   * Cancel scheduled hide
+   */
+  private cancelHide(): void {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+
+  /**
+   * Toggle expanded state
+   */
+  private toggleExpanded(): void {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.cancelHide();
+    }
+  }
+
+  /**
+   * Clear all status and hide
+   */
+  public clearStatus(): void {
+    this.backendStatus = null;
+    this.swStatus = null;
+    this.networkStatus = null;
+    this.hasError = false;
+    this.hide();
+  }
+
+  /**
+   * Set success message (auto-hides)
+   */
+  public setSuccess(message: string, source: TStatusSource = 'backend'): void {
+    this.updateStatus({
+      source,
+      type: 'connected',
+      message,
+      persist: false,
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Set error message (persists)
+   */
+  public setError(message: string, source: TStatusSource = 'backend'): void {
+    this.updateStatus({
+      source,
+      type: 'error',
+      message,
+      persist: true,
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Set transitional message (auto-hides)
+   */
+  public setText(message: string, source: TStatusSource = 'backend'): void {
+    this.updateStatus({
+      source,
+      type: 'reconnecting',
+      message,
+      persist: false,
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Render status indicators
+   */
+  private renderStatusIndicators() {
+    const indicators = [];
+
+    if (this.networkStatus) {
+      indicators.push(html`
+        <div class="status-indicator">
+          <span class="status-dot ${this.networkStatus.type}"></span>
+          <span class="status-label">Net</span>
+        </div>
+      `);
+    }
+
+    if (this.backendStatus) {
+      indicators.push(html`
+        <div class="status-indicator">
+          <span class="status-dot ${this.backendStatus.type}"></span>
+          <span class="status-label">API</span>
+        </div>
+      `);
+    }
+
+    if (this.swStatus) {
+      indicators.push(html`
+        <div class="status-indicator">
+          <span class="status-dot ${this.swStatus.type}"></span>
+          <span class="status-label">SW</span>
+        </div>
+      `);
+    }
+
+    return indicators;
+  }
+
+  /**
+   * Render expanded details
+   */
+  private renderDetails() {
+    const details = [];
+
+    if (this.networkStatus) {
+      details.push(html`
+        <div class="detail-row">
+          <span class="detail-label">Network</span>
+          <span class="detail-value ${this.networkStatus.type === 'online' ? 'success' : 'error'}">
+            ${this.networkStatus.message}
+            ${this.networkStatus.details?.connectionType ? ` (${this.networkStatus.details.connectionType})` : ''}
+          </span>
+        </div>
+      `);
+    }
+
+    if (this.backendStatus) {
+      details.push(html`
+        <div class="detail-row">
+          <span class="detail-label">Backend</span>
+          <span class="detail-value ${this.backendStatus.type === 'connected' ? 'success' : this.backendStatus.type === 'reconnecting' ? 'warning' : 'error'}">
+            ${this.backendStatus.message}
+          </span>
+        </div>
+      `);
+    }
+
+    if (this.swStatus) {
+      details.push(html`
+        <div class="detail-row">
+          <span class="detail-label">Service Worker</span>
+          <span class="detail-value ${this.swStatus.type === 'connected' ? 'success' : this.swStatus.type === 'update' ? 'warning' : ''}">
+            ${this.swStatus.message}
+            ${this.swStatus.details?.version ? ` v${this.swStatus.details.version}` : ''}
+          </span>
+        </div>
+      `);
+
+      if (this.swStatus.details?.cacheHitRate !== undefined) {
+        details.push(html`
+          <div class="detail-row">
+            <span class="detail-label">Cache Hit Rate</span>
+            <span class="detail-value">${this.swStatus.details.cacheHitRate.toFixed(1)}%</span>
+          </div>
+        `);
+      }
+
+      if (this.swStatus.details?.resourceCount !== undefined) {
+        details.push(html`
+          <div class="detail-row">
+            <span class="detail-label">Cached Resources</span>
+            <span class="detail-value">${this.swStatus.details.resourceCount}</span>
+          </div>
+        `);
+      }
+    }
+
+    return details;
+  }
+
+  public render() {
+    const latestStatus = this.getLatestStatus();
+    const message = latestStatus?.message || '';
+    const indicators = this.renderStatusIndicators();
+
+    return html`
+      <div
+        class="pill ${this.visible ? 'visible' : ''} ${this.getStatusClass()} ${this.expanded ? 'expanded' : ''}"
+        @click="${this.toggleExpanded}"
+      >
+        <div class="pill-main">
+          ${indicators.length > 0 ? html`
+            ${indicators}
+            ${message ? html`<span class="separator"></span>` : ''}
+          ` : ''}
+          ${message ? html`<span class="status-message">${message}</span>` : ''}
+        </div>
+        <div class="pill-expanded">
+          ${this.renderDetails()}
+        </div>
+      </div>
+    `;
+  }
+}

ts_web_serviceworker/classes.backend.ts

@@ -2,6 +2,9 @@ import * as plugins from './plugins.js';
 import * as interfaces from '../dist_ts_interfaces/index.js';
 import { logger } from './logging.js';
 import { getMetricsCollector } from './classes.metrics.js';
+import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
+import { getPersistentStore } from './classes.persistentstore.js';
+import { getRequestLogStore } from './classes.requestlogstore.js';
 
 // Add type definitions for ServiceWorker APIs
 declare global {
@@ -45,6 +48,27 @@ export class ServiceworkerBackend {
   private swSelf: ServiceWorkerGlobalScope;
   private clientUpdateInterval: ReturnType<typeof setInterval> | null = null;
 
+  // Throttling for metrics updates (max 1 per 500ms)
+  private metricsUpdateThrottle: ReturnType<typeof setTimeout> | null = null;
+  private pendingMetricsUpdate = false;
+  private readonly METRICS_THROTTLE_MS = 500;
+
+  /**
+   * Helper to create properly formatted TypedRequest messages for DeesComms
+   */
+  private createMessage<T>(method: string, request: T): any {
+    const id = `${method}_${Date.now()}`;
+    return {
+      method,
+      request,
+      messageId: id,
+      correlation: {
+        id,
+        phase: 'request' as const
+      }
+    };
+  }
+
   constructor(optionsArg: {
     self: any;
     purgeCache: (reqArg: interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['request']) => Promise<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['response']>;
@@ -75,8 +99,228 @@ export class ServiceworkerBackend {
       return await optionsArg.purgeCache?.(reqArg);
     });
 
+    // Handler for getting current SW status
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus', async () => {
+      const metrics = getMetricsCollector();
+      const metricsData = metrics.getMetrics();
+      return {
+        isActive: true,
+        isOnline: metricsData.speedtest.isOnline,
+        cacheHitRate: metrics.getCacheHitRate(),
+        resourceCount: metrics.getResourceCount(),
+        connectedClients: metricsData.connection.connectedClients,
+        lastUpdateCheck: metricsData.update.lastCheckTimestamp,
+      };
+    });
+
+    // Handler for getting event log
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog', async (reqArg) => {
+      const persistentStore = getPersistentStore();
+      return await persistentStore.getEventLog({
+        limit: reqArg.limit,
+        type: reqArg.type,
+        since: reqArg.since,
+        before: reqArg.before,
+      });
+    });
+
+    // Handler for getting cumulative metrics
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetCumulativeMetrics>('serviceworker_getCumulativeMetrics', async () => {
+      const persistentStore = getPersistentStore();
+      return persistentStore.getCumulativeMetrics();
+    });
+
+    // Handler for clearing event log
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_ClearEventLog>('serviceworker_clearEventLog', async () => {
+      const persistentStore = getPersistentStore();
+      const success = await persistentStore.clearEventLog();
+      return { success };
+    });
+
+    // Handler for getting event count since timestamp
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventCount>('serviceworker_getEventCount', async (reqArg) => {
+      const persistentStore = getPersistentStore();
+      const count = await persistentStore.getEventCount(reqArg.since);
+      return { count };
+    });
+
+    // ================================
+    // TypedRequest Traffic Monitoring
+    // ================================
+
+    // Handler for receiving TypedRequest logs from clients
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_TypedRequestLog>('serviceworker_typedRequestLog', async (reqArg) => {
+      const requestLogStore = getRequestLogStore();
+      requestLogStore.addEntry(reqArg);
+
+      // Broadcast to sw-dash viewers
+      await this.broadcastTypedRequestLogged(reqArg);
+      return {};
+    });
+
+    // Handler for getting TypedRequest logs
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetTypedRequestLogs>('serviceworker_getTypedRequestLogs', async (reqArg) => {
+      const requestLogStore = getRequestLogStore();
+      const logs = requestLogStore.getEntries({
+        limit: reqArg.limit,
+        method: reqArg.method,
+        since: reqArg.since,
+        before: reqArg.before,
+      });
+      const totalCount = requestLogStore.getTotalCount({
+        method: reqArg.method,
+        since: reqArg.since,
+      });
+      return { logs, totalCount };
+    });
+
+    // Handler for getting TypedRequest statistics
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetTypedRequestStats>('serviceworker_getTypedRequestStats', async () => {
+      const requestLogStore = getRequestLogStore();
+      return requestLogStore.getStats();
+    });
+
+    // Handler for clearing TypedRequest logs
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_ClearTypedRequestLogs>('serviceworker_clearTypedRequestLogs', async () => {
+      const requestLogStore = getRequestLogStore();
+      requestLogStore.clear();
+      return { success: true };
+    });
+
     // Periodically update connected clients count
     this.startClientCountUpdates();
+
+    // Subscribe to EventBus and broadcast status updates
+    this.setupEventBusSubscriptions();
+  }
+
+  /**
+   * Sets up subscriptions to EventBus events and broadcasts them to clients
+   */
+  private setupEventBusSubscriptions(): void {
+    const eventBus = getEventBus();
+    const persistentStore = getPersistentStore();
+
+    // Network status changes
+    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, async () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'online',
+        message: 'Connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('network_online', 'Network connection restored');
+    });
+
+    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, async () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'offline',
+        message: 'Connection lost - offline mode',
+        persist: true,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('network_offline', 'Network connection lost');
+    });
+
+    // Update events
+    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update available',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('update_check', `Update available: ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update applied',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('sw_updated', `Service worker updated to ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'error',
+        message: `Update error: ${payload.error || 'Unknown error'}`,
+        persist: true,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('error', `Update error: ${payload.error || 'Unknown error'}`, {
+        error: payload.error,
+      });
+    });
+
+    // Cache invalidation
+    eventBus.on(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Clearing cache...',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Note: cache_invalidated event is logged in the ServiceWorker class
+    });
+
+    // Lifecycle events
+    eventBus.on(ServiceWorkerEvent.ACTIVATE, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'connected',
+        message: 'Service worker activated',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Note: sw_activated event is logged in the ServiceWorker class
+    });
+  }
+
+  /**
+   * Broadcasts a status update to all connected clients
+   */
+  public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
+    try {
+      await this.deesComms.postMessage(this.createMessage('serviceworker_statusUpdate', status));
+      logger.log('info', `Status update broadcast: ${status.source}:${status.type} - ${status.message}`);
+    } catch (error) {
+      logger.log('warn', `Failed to broadcast status update: ${error}`);
+    }
+  }
+
+  /**
+   * Broadcasts a TypedRequest log entry to all connected clients (for sw-dash)
+   */
+  public async broadcastTypedRequestLogged(entry: interfaces.serviceworker.ITypedRequestLogEntry): Promise<void> {
+    try {
+      await this.deesComms.postMessage(this.createMessage('serviceworker_typedRequestLogged', entry));
+    } catch (error) {
+      logger.log('warn', `Failed to broadcast TypedRequest log: ${error}`);
+    }
   }
 
   /**
@@ -114,11 +358,7 @@ export class ServiceworkerBackend {
 
       // Send update message via DeesComms
       // This will be picked up by clients that have registered a handler for 'serviceworker_newVersion'
-      await this.deesComms.postMessage({
-        method: 'serviceworker_newVersion',
-        request: {},
-        messageId: `sw_update_${Date.now()}`
-      });
+      await this.deesComms.postMessage(this.createMessage('serviceworker_newVersion', {}));
 
       // As a fallback, also use the clients API to reload clients that might not catch the broadcast
       const clients = await this.swSelf.clients.matchAll({ type: 'window' });
@@ -181,17 +421,101 @@ export class ServiceworkerBackend {
       title: 'Alert',
       body: alertText
     });
-    
+
     // Send message to clients who might be able to show an actual alert
     try {
-      await this.deesComms.postMessage({
-        method: 'serviceworker_alert',
-        request: { message: alertText },
-        messageId: `sw_alert_${Date.now()}`
-      });
+      await this.deesComms.postMessage(this.createMessage('serviceworker_alert', { message: alertText }));
       logger.log('info', `Alert message sent to clients: ${alertText}`);
     } catch (error) {
       logger.log('error', `Failed to send alert to clients: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
+
+  // ===============
+  // Push methods for real-time updates
+  // ===============
+
+  /**
+   * Pushes a new event log entry to all connected clients
+   * Called immediately when an event is logged
+   */
+  public async pushEvent(entry: interfaces.serviceworker.IEventLogEntry): Promise<void> {
+    try {
+      await this.deesComms.postMessage(this.createMessage('serviceworker_eventLogged', entry));
+      logger.log('note', `Pushed event to clients: ${entry.type}`);
+    } catch (error) {
+      logger.log('warn', `Failed to push event: ${error}`);
+    }
+  }
+
+  /**
+   * Pushes a metrics update to all connected clients
+   * Throttled to max 1 update per 500ms to prevent spam
+   */
+  public pushMetricsUpdate(): void {
+    // Mark that we have a pending update
+    this.pendingMetricsUpdate = true;
+
+    // If we're already throttling, just wait for the next window
+    if (this.metricsUpdateThrottle) {
+      return;
+    }
+
+    // Send the update and start throttle window
+    this.sendMetricsUpdate();
+
+    this.metricsUpdateThrottle = setTimeout(() => {
+      this.metricsUpdateThrottle = null;
+      // If there was a pending update during the throttle window, send it now
+      if (this.pendingMetricsUpdate) {
+        this.sendMetricsUpdate();
+      }
+    }, this.METRICS_THROTTLE_MS);
+  }
+
+  /**
+   * Actually sends the metrics update via DeesComms
+   */
+  private async sendMetricsUpdate(): Promise<void> {
+    this.pendingMetricsUpdate = false;
+    const metrics = getMetricsCollector();
+    const metricsData = metrics.getMetrics();
+
+    const snapshot: interfaces.serviceworker.IMetricsSnapshot = {
+      cache: {
+        hits: metricsData.cache.hits,
+        misses: metricsData.cache.misses,
+        errors: metricsData.cache.errors,
+        bytesServedFromCache: metricsData.cache.bytesServedFromCache,
+        bytesFetched: metricsData.cache.bytesFetched,
+      },
+      network: {
+        totalRequests: metricsData.network.totalRequests,
+        successfulRequests: metricsData.network.successfulRequests,
+        failedRequests: metricsData.network.failedRequests,
+      },
+      cacheHitRate: metrics.getCacheHitRate(),
+      networkSuccessRate: metrics.getNetworkSuccessRate(),
+      resourceCount: metrics.getResourceCount(),
+      uptime: metricsData.uptime,
+      timestamp: Date.now(),
+    };
+
+    try {
+      await this.deesComms.postMessage(this.createMessage('serviceworker_metricsUpdate', snapshot));
+    } catch (error) {
+      logger.log('warn', `Failed to push metrics update: ${error}`);
+    }
+  }
+
+  /**
+   * Pushes notification when a resource is cached
+   */
+  public async pushResourceCached(url: string, contentType: string, size: number, cached: boolean): Promise<void> {
+    try {
+      await this.deesComms.postMessage(this.createMessage('serviceworker_resourceCached', { url, contentType, size, cached }));
+    } catch (error) {
+      logger.log('warn', `Failed to push resource cached: ${error}`);
+    }
+  }
 }

ts_web_serviceworker/classes.cachemanager.ts

@@ -210,21 +210,27 @@ export class CacheManager {
           fetchEventArg.respondWith(Promise.resolve(dashboard.serveDashboard()));
           return;
         }
+        // /sw-dash/metrics - THE initial seed endpoint (provides ALL data)
         if (parsedUrl.pathname === '/sw-dash/metrics') {
           const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.serveMetrics()));
+          fetchEventArg.respondWith(dashboard.serveMetrics());
           return;
         }
+        // /sw-dash/speedtest - user-triggered speedtest
         if (parsedUrl.pathname === '/sw-dash/speedtest') {
           const dashboard = getDashboardGenerator();
           fetchEventArg.respondWith(dashboard.runSpeedtest());
           return;
         }
+        // /sw-dash/resources - resource data (kept for now, could be merged into metrics)
         if (parsedUrl.pathname === '/sw-dash/resources') {
           const dashboard = getDashboardGenerator();
           fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
           return;
         }
+        // All other /sw-dash/* routes removed - use DeesComms instead:
+        // - Events: via serviceworker_getEventLog, serviceworker_clearEventLog
+        // - Requests: via serviceworker_getTypedRequestLogs, serviceworker_clearTypedRequestLogs
 
         // Block requests that we don't want the service worker to handle.
         if (

ts_web_serviceworker/classes.dashboard.ts

@@ -1,6 +1,11 @@
 import { getMetricsCollector } from './classes.metrics.js';
 import { getServiceWorkerInstance } from './init.js';
+import { getPersistentStore } from './classes.persistentstore.js';
+import { getRequestLogStore } from './classes.requestlogstore.js';
 import * as interfaces from './env.js';
+import type { serviceworker } from '../dist_ts_interfaces/index.js';
+
+type TEventType = serviceworker.TEventType;
 
 /**
  * Dashboard generator that creates a terminal-like metrics display
@@ -20,10 +25,94 @@ export class DashboardGenerator {
   }
 
   /**
-   * Serves the metrics JSON endpoint
+   * Serves the metrics JSON endpoint with ALL initial data
+   * This is the single HTTP seed request that provides:
+   * - Current metrics
+   * - Initial events (last 50)
+   * - Initial request logs (last 50)
+   * - Request stats and methods
+   * - Resource data
    */
-  public serveMetrics(): Response {
-    return new Response(this.generateMetricsJson(), {
+  public async serveMetrics(): Promise<Response> {
+    try {
+      const metrics = getMetricsCollector();
+      const persistentStore = getPersistentStore();
+      await persistentStore.init();
+      const requestLogStore = getRequestLogStore();
+
+      // Get event data
+      const eventResult = await persistentStore.getEventLog({ limit: 50 });
+      const oneHourAgo = Date.now() - 3600000;
+      const eventCountLastHour = await persistentStore.getEventCount(oneHourAgo);
+
+      // Build comprehensive initial response
+      const data = {
+        // Core metrics
+        ...metrics.getMetrics(),
+        cacheHitRate: metrics.getCacheHitRate(),
+        networkSuccessRate: metrics.getNetworkSuccessRate(),
+        resourceCount: metrics.getResourceCount(),
+        summary: metrics.getSummary(),
+
+        // Resources data
+        resources: metrics.getCachedResources(),
+        domains: metrics.getDomainStats(),
+        contentTypes: metrics.getContentTypeStats(),
+
+        // Events data (initial 50)
+        events: eventResult.events,
+        eventTotalCount: eventResult.totalCount,
+        eventCountLastHour,
+
+        // Request logs data (initial 50)
+        requestLogs: requestLogStore.getEntries({ limit: 50 }),
+        requestTotalCount: requestLogStore.getTotalCount(),
+        requestStats: requestLogStore.getStats(),
+        requestMethods: requestLogStore.getMethods(),
+      };
+
+      return new Response(JSON.stringify(data), {
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store',
+        },
+      });
+    } catch (error) {
+      console.error('[SW Dashboard] serveMetrics error:', error);
+      // Return error response with valid JSON structure so client doesn't crash
+      return new Response(JSON.stringify({
+        error: String(error),
+        cache: { hits: 0, misses: 0, errors: 0, bytesServedFromCache: 0, bytesFetched: 0, averageResponseTime: 0 },
+        network: { totalRequests: 0, successfulRequests: 0, failedRequests: 0, timeouts: 0, averageLatency: 0, totalBytesTransferred: 0 },
+        update: { totalChecks: 0, successfulChecks: 0, failedChecks: 0, updatesFound: 0, updatesApplied: 0, lastCheckTimestamp: 0, lastUpdateTimestamp: 0 },
+        connection: { connectedClients: 0, totalConnectionAttempts: 0, successfulConnections: 0, failedConnections: 0 },
+        speedtest: { lastDownloadSpeedMbps: 0, lastUploadSpeedMbps: 0, lastLatencyMs: 0, lastTestTimestamp: 0, testCount: 0, isOnline: false },
+        startTime: Date.now(),
+        uptime: 0,
+        cacheHitRate: 0,
+        networkSuccessRate: 0,
+        resourceCount: 0,
+        events: [],
+        eventTotalCount: 0,
+        eventCountLastHour: 0,
+        requestLogs: [],
+        requestTotalCount: 0,
+        requestStats: { totalRequests: 0, totalResponses: 0, methodCounts: {}, errorCount: 0, avgDurationMs: 0 },
+        requestMethods: [],
+      }), {
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store',
+        },
+      });
+    }
+  }
+
+  /**
+   * Serves detailed resource data for the SPA views
+   */
+  public serveResources(): Response {
+    return new Response(this.generateResourcesJson(), {
       headers: {
         'Content-Type': 'application/json',
         'Cache-Control': 'no-store',
@@ -32,10 +121,140 @@ export class DashboardGenerator {
   }
 
   /**
-   * Serves detailed resource data for the SPA views
+   * Serves event log data
    */
-  public serveResources(): Response {
-    return new Response(this.generateResourcesJson(), {
+  public async serveEventLog(searchParams: URLSearchParams): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+
+    const limit = searchParams.get('limit') ? parseInt(searchParams.get('limit')!, 10) : undefined;
+    const type = searchParams.get('type') as TEventType | undefined;
+    const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : undefined;
+
+    const result = await persistentStore.getEventLog({ limit, type, since });
+
+    return new Response(JSON.stringify(result), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves event count since a timestamp
+   */
+  public async serveEventCount(searchParams: URLSearchParams): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+
+    const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : Date.now() - 3600000; // Default: last hour
+
+    const count = await persistentStore.getEventCount(since);
+
+    return new Response(JSON.stringify({ count, since }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves cumulative metrics
+   */
+  public async serveCumulativeMetrics(): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+    const metrics = persistentStore.getCumulativeMetrics();
+
+    return new Response(JSON.stringify(metrics), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Clears the event log
+   */
+  public async clearEventLog(): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+    const success = await persistentStore.clearEventLog();
+
+    return new Response(JSON.stringify({ success }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  // ================================
+  // TypedRequest Traffic Endpoints
+  // ================================
+
+  /**
+   * Serves TypedRequest traffic logs
+   */
+  public serveTypedRequestLogs(searchParams: URLSearchParams): Response {
+    const requestLogStore = getRequestLogStore();
+
+    const limit = searchParams.get('limit') ? parseInt(searchParams.get('limit')!, 10) : undefined;
+    const method = searchParams.get('method') || undefined;
+    const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : undefined;
+
+    const logs = requestLogStore.getEntries({ limit, method, since });
+    const totalCount = requestLogStore.getTotalCount({ method, since });
+
+    return new Response(JSON.stringify({ logs, totalCount }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves TypedRequest traffic statistics
+   */
+  public serveTypedRequestStats(): Response {
+    const requestLogStore = getRequestLogStore();
+    const stats = requestLogStore.getStats();
+
+    return new Response(JSON.stringify(stats), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Clears TypedRequest traffic logs
+   */
+  public clearTypedRequestLogs(): Response {
+    const requestLogStore = getRequestLogStore();
+    requestLogStore.clear();
+
+    return new Response(JSON.stringify({ success: true }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves unique method names from TypedRequest logs
+   */
+  public serveTypedRequestMethods(): Response {
+    const requestLogStore = getRequestLogStore();
+    const methods = requestLogStore.getMethods();
+
+    return new Response(JSON.stringify({ methods }), {
       headers: {
         'Content-Type': 'application/json',
         'Cache-Control': 'no-store',
@@ -53,6 +272,8 @@ export class DashboardGenerator {
    */
   public async runSpeedtest(): Promise<Response> {
     const metrics = getMetricsCollector();
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
     const results: {
       latency?: { durationMs: number };
       download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
@@ -61,6 +282,9 @@ export class DashboardGenerator {
       isOnline: boolean;
     } = { isOnline: false };
 
+    // Log speedtest start
+    await persistentStore.logEvent('speedtest_started', 'Speedtest initiated');
+
     try {
       const sw = getServiceWorkerInstance();
 
@@ -124,10 +348,22 @@ export class DashboardGenerator {
         metrics.recordSpeedtest('upload', uploadSpeedMbps);
       }
 
+      // Log speedtest completion
+      await persistentStore.logEvent('speedtest_completed', 'Speedtest finished', {
+        downloadMbps: results.download?.speedMbps.toFixed(2),
+        uploadMbps: results.upload?.speedMbps.toFixed(2),
+        latencyMs: results.latency?.durationMs,
+      });
+
     } catch (error) {
       results.error = error instanceof Error ? error.message : String(error);
       results.isOnline = false;
       metrics.setOnlineStatus(false);
+
+      // Log speedtest failure
+      await persistentStore.logEvent('speedtest_failed', `Speedtest failed: ${results.error}`, {
+        error: results.error,
+      });
     }
 
     return new Response(JSON.stringify(results), {
@@ -169,25 +405,7 @@ export class DashboardGenerator {
    * Generates a minimal HTML shell that loads the Lit-based dashboard bundle
    */
   public generateDashboardHtml(): string {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SW Dashboard</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      background: #0a0a0a;
-      min-height: 100vh;
-    }
-  </style>
-</head>
-<body>
-  <sw-dash-app></sw-dash-app>
-  <script type="module" src="/sw-dash/bundle.js"></script>
-</body>
-</html>`;
+    return interfaces.serviceworker.SW_DASH_HTML;
   }
 
 }

ts_web_serviceworker/classes.metrics.ts

@@ -1,4 +1,5 @@
 import { logger } from './logging.js';
+import { getServiceWorkerBackend } from './init.js';
 
 /**
  * Interface for cache metrics
@@ -178,6 +179,20 @@ export class MetricsCollector {
     this.startTime = Date.now();
   }
 
+  /**
+   * Triggers a push metrics update to all connected clients (throttled in backend)
+   */
+  private triggerPushUpdate(): void {
+    try {
+      const backend = getServiceWorkerBackend();
+      if (backend) {
+        backend.pushMetricsUpdate();
+      }
+    } catch (error) {
+      // Silently ignore - push is best-effort
+    }
+  }
+
   /**
    * Gets the singleton instance
    */
@@ -196,11 +211,13 @@ export class MetricsCollector {
     this.cacheHits++;
     this.bytesServedFromCache += bytes;
     logger.log('note', `[Metrics] Cache hit: ${url} (${bytes} bytes)`);
+    this.triggerPushUpdate();
   }
 
   public recordCacheMiss(url: string): void {
     this.cacheMisses++;
     logger.log('note', `[Metrics] Cache miss: ${url}`);
+    this.triggerPushUpdate();
   }
 
   public recordCacheError(url: string, error?: string): void {
@@ -224,11 +241,13 @@ export class MetricsCollector {
     this.successfulRequests++;
     this.totalBytesTransferred += bytes;
     this.recordResponseTime(url, duration);
+    this.triggerPushUpdate();
   }
 
   public recordRequestFailure(url: string, error?: string): void {
     this.failedRequests++;
     logger.log('warn', `[Metrics] Request failed: ${url} - ${error || 'unknown'}`);
+    this.triggerPushUpdate();
   }
 
   public recordTimeout(url: string, duration: number): void {

ts_web_serviceworker/classes.networkmanager.ts

@@ -64,7 +64,7 @@ export class NetworkManager {
     }
 
     try {
-      const response = await fetch('/sw-typedrequest', {
+      const response = await fetch('/typedrequest', {
         method: 'HEAD',
         cache: 'no-cache'
       });

ts_web_serviceworker/classes.persistentstore.ts

@@ -0,0 +1,424 @@
+import * as plugins from './plugins.js';
+import { logger } from './logging.js';
+import type { serviceworker } from '../dist_ts_interfaces/index.js';
+import { getServiceWorkerBackend } from './init.js';
+
+type ICumulativeMetrics = serviceworker.ICumulativeMetrics;
+type IEventLogEntry = serviceworker.IEventLogEntry;
+type TEventType = serviceworker.TEventType;
+
+/**
+ * Generates a simple UUID
+ */
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+/**
+ * Default cumulative metrics
+ */
+function createDefaultMetrics(): ICumulativeMetrics {
+  return {
+    firstSeenTimestamp: Date.now(),
+    totalCacheHits: 0,
+    totalCacheMisses: 0,
+    totalCacheErrors: 0,
+    totalBytesServedFromCache: 0,
+    totalBytesFetched: 0,
+    totalNetworkRequests: 0,
+    totalNetworkSuccesses: 0,
+    totalNetworkFailures: 0,
+    totalNetworkTimeouts: 0,
+    totalBytesTransferred: 0,
+    totalUpdateChecks: 0,
+    totalUpdatesApplied: 0,
+    totalSpeedtests: 0,
+    swRestartCount: 0,
+    lastUpdatedTimestamp: Date.now(),
+  };
+}
+
+/**
+ * PersistentStore manages persistent data for the service worker:
+ * - Cumulative metrics: Persist across SW restarts, reset on cache invalidation
+ * - Event log: Persists across SW restarts AND cache invalidation
+ */
+export class PersistentStore {
+  private static instance: PersistentStore;
+  private store: plugins.webstore.WebStore;
+  private initialized = false;
+
+  // Storage keys
+  private readonly CUMULATIVE_KEY = 'metrics_cumulative';
+  private readonly EVENT_LOG_KEY = 'event_log';
+
+  // Retention settings
+  private readonly MAX_EVENTS = 10000;
+  private readonly MAX_AGE_DAYS = 30;
+  private readonly MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days in ms
+
+  // Save interval (60 seconds)
+  private readonly SAVE_INTERVAL_MS = 60000;
+  private saveInterval: ReturnType<typeof setInterval> | null = null;
+
+  // In-memory cache for cumulative metrics
+  private cumulativeMetrics: ICumulativeMetrics | null = null;
+  private isDirty = false;
+
+  private constructor() {
+    this.store = new plugins.webstore.WebStore({
+      dbName: 'losslessServiceworkerPersistent',
+      storeName: 'persistentStore',
+    });
+  }
+
+  /**
+   * Gets the singleton instance
+   */
+  public static getInstance(): PersistentStore {
+    if (!PersistentStore.instance) {
+      PersistentStore.instance = new PersistentStore();
+    }
+    return PersistentStore.instance;
+  }
+
+  /**
+   * Initializes the store and starts periodic saving
+   */
+  public async init(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    try {
+      // Initialize the WebStore (required before using any methods)
+      await this.store.init();
+      await this.loadCumulativeMetrics();
+
+      // Increment restart count
+      if (this.cumulativeMetrics) {
+        this.cumulativeMetrics.swRestartCount++;
+        this.isDirty = true;
+        await this.saveCumulativeMetrics();
+      }
+
+      // Start periodic save
+      this.startPeriodicSave();
+
+      this.initialized = true;
+      logger.log('ok', '[PersistentStore] Initialized successfully');
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to initialize: ${error}`);
+      // Don't throw - allow SW to continue even if persistent store fails
+      this.initialized = true; // Mark as initialized to prevent retry loops
+    }
+  }
+
+  /**
+   * Starts periodic saving of metrics
+   */
+  private startPeriodicSave(): void {
+    if (this.saveInterval) {
+      clearInterval(this.saveInterval);
+    }
+
+    this.saveInterval = setInterval(async () => {
+      if (this.isDirty) {
+        await this.saveCumulativeMetrics();
+      }
+    }, this.SAVE_INTERVAL_MS);
+  }
+
+  /**
+   * Stops periodic saving
+   */
+  public stopPeriodicSave(): void {
+    if (this.saveInterval) {
+      clearInterval(this.saveInterval);
+      this.saveInterval = null;
+    }
+  }
+
+  // ===================
+  // Cumulative Metrics
+  // ===================
+
+  /**
+   * Loads cumulative metrics from store
+   */
+  public async loadCumulativeMetrics(): Promise<ICumulativeMetrics> {
+    try {
+      if (await this.store.check(this.CUMULATIVE_KEY)) {
+        this.cumulativeMetrics = await this.store.get(this.CUMULATIVE_KEY);
+      } else {
+        this.cumulativeMetrics = createDefaultMetrics();
+        this.isDirty = true;
+      }
+    } catch (error) {
+      logger.log('warn', `[PersistentStore] Failed to load metrics: ${error}`);
+      this.cumulativeMetrics = createDefaultMetrics();
+      this.isDirty = true;
+    }
+
+    return this.cumulativeMetrics!;
+  }
+
+  /**
+   * Saves cumulative metrics to store
+   */
+  public async saveCumulativeMetrics(): Promise<void> {
+    if (!this.cumulativeMetrics) {
+      return;
+    }
+
+    try {
+      this.cumulativeMetrics.lastUpdatedTimestamp = Date.now();
+      await this.store.set(this.CUMULATIVE_KEY, this.cumulativeMetrics);
+      this.isDirty = false;
+      logger.log('note', '[PersistentStore] Cumulative metrics saved');
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to save metrics: ${error}`);
+    }
+  }
+
+  /**
+   * Gets the current cumulative metrics
+   */
+  public getCumulativeMetrics(): ICumulativeMetrics {
+    if (!this.cumulativeMetrics) {
+      return createDefaultMetrics();
+    }
+    return { ...this.cumulativeMetrics };
+  }
+
+  /**
+   * Updates cumulative metrics with session delta
+   */
+  public updateCumulativeMetrics(delta: Partial<ICumulativeMetrics>): void {
+    if (!this.cumulativeMetrics) {
+      this.cumulativeMetrics = createDefaultMetrics();
+    }
+
+    // Add delta values to cumulative
+    if (delta.totalCacheHits !== undefined) {
+      this.cumulativeMetrics.totalCacheHits += delta.totalCacheHits;
+    }
+    if (delta.totalCacheMisses !== undefined) {
+      this.cumulativeMetrics.totalCacheMisses += delta.totalCacheMisses;
+    }
+    if (delta.totalCacheErrors !== undefined) {
+      this.cumulativeMetrics.totalCacheErrors += delta.totalCacheErrors;
+    }
+    if (delta.totalBytesServedFromCache !== undefined) {
+      this.cumulativeMetrics.totalBytesServedFromCache += delta.totalBytesServedFromCache;
+    }
+    if (delta.totalBytesFetched !== undefined) {
+      this.cumulativeMetrics.totalBytesFetched += delta.totalBytesFetched;
+    }
+    if (delta.totalNetworkRequests !== undefined) {
+      this.cumulativeMetrics.totalNetworkRequests += delta.totalNetworkRequests;
+    }
+    if (delta.totalNetworkSuccesses !== undefined) {
+      this.cumulativeMetrics.totalNetworkSuccesses += delta.totalNetworkSuccesses;
+    }
+    if (delta.totalNetworkFailures !== undefined) {
+      this.cumulativeMetrics.totalNetworkFailures += delta.totalNetworkFailures;
+    }
+    if (delta.totalNetworkTimeouts !== undefined) {
+      this.cumulativeMetrics.totalNetworkTimeouts += delta.totalNetworkTimeouts;
+    }
+    if (delta.totalBytesTransferred !== undefined) {
+      this.cumulativeMetrics.totalBytesTransferred += delta.totalBytesTransferred;
+    }
+    if (delta.totalUpdateChecks !== undefined) {
+      this.cumulativeMetrics.totalUpdateChecks += delta.totalUpdateChecks;
+    }
+    if (delta.totalUpdatesApplied !== undefined) {
+      this.cumulativeMetrics.totalUpdatesApplied += delta.totalUpdatesApplied;
+    }
+    if (delta.totalSpeedtests !== undefined) {
+      this.cumulativeMetrics.totalSpeedtests += delta.totalSpeedtests;
+    }
+
+    this.isDirty = true;
+  }
+
+  /**
+   * Resets cumulative metrics (called on cache invalidation)
+   */
+  public async resetCumulativeMetrics(): Promise<void> {
+    this.cumulativeMetrics = createDefaultMetrics();
+    this.isDirty = true;
+    await this.saveCumulativeMetrics();
+    logger.log('info', '[PersistentStore] Cumulative metrics reset');
+  }
+
+  // ===================
+  // Event Log
+  // ===================
+
+  /**
+   * Logs an event to the persistent event log
+   */
+  public async logEvent(
+    type: TEventType,
+    message: string,
+    details?: Record<string, any>
+  ): Promise<void> {
+    const entry: IEventLogEntry = {
+      id: generateId(),
+      timestamp: Date.now(),
+      type,
+      message,
+      details,
+    };
+
+    try {
+      // Ensure initialized
+      if (!this.initialized) {
+        await this.init();
+      }
+
+      let events: IEventLogEntry[] = [];
+
+      if (await this.store.check(this.EVENT_LOG_KEY)) {
+        events = await this.store.get(this.EVENT_LOG_KEY);
+      }
+
+      // Add new entry
+      events.push(entry);
+
+      // Apply retention policy
+      events = this.applyRetentionPolicy(events);
+
+      await this.store.set(this.EVENT_LOG_KEY, events);
+      logger.log('note', `[PersistentStore] Logged event: ${type} - ${message}`);
+
+      // Push event to connected clients via DeesComms
+      try {
+        const backend = getServiceWorkerBackend();
+        if (backend) {
+          await backend.pushEvent(entry);
+        }
+      } catch (pushError) {
+        // Don't fail the log operation if push fails
+        logger.log('warn', `[PersistentStore] Failed to push event: ${pushError}`);
+      }
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to log event: ${error}`);
+    }
+  }
+
+  /**
+   * Gets event log entries
+   */
+  public async getEventLog(options?: {
+    limit?: number;
+    type?: TEventType;
+    since?: number;
+    before?: number;
+  }): Promise<{ events: IEventLogEntry[]; totalCount: number }> {
+    try {
+      let events: IEventLogEntry[] = [];
+
+      if (await this.store.check(this.EVENT_LOG_KEY)) {
+        events = await this.store.get(this.EVENT_LOG_KEY);
+      }
+
+      const totalCount = events.length;
+
+      // Filter by type if specified
+      if (options?.type) {
+        events = events.filter(e => e.type === options.type);
+      }
+
+      // Filter by since timestamp if specified
+      if (options?.since) {
+        events = events.filter(e => e.timestamp >= options.since);
+      }
+
+      // Filter by before timestamp (for pagination)
+      if (options?.before) {
+        events = events.filter(e => e.timestamp < options.before);
+      }
+
+      // Sort by timestamp (newest first)
+      events.sort((a, b) => b.timestamp - a.timestamp);
+
+      // Apply limit if specified
+      if (options?.limit && options.limit > 0) {
+        events = events.slice(0, options.limit);
+      }
+
+      return { events, totalCount };
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to get event log: ${error}`);
+      return { events: [], totalCount: 0 };
+    }
+  }
+
+  /**
+   * Gets count of events since a timestamp
+   */
+  public async getEventCount(since: number): Promise<number> {
+    try {
+      if (!(await this.store.check(this.EVENT_LOG_KEY))) {
+        return 0;
+      }
+
+      const events: IEventLogEntry[] = await this.store.get(this.EVENT_LOG_KEY);
+      return events.filter(e => e.timestamp >= since).length;
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to get event count: ${error}`);
+      return 0;
+    }
+  }
+
+  /**
+   * Clears all events from the log
+   */
+  public async clearEventLog(): Promise<boolean> {
+    try {
+      await this.store.set(this.EVENT_LOG_KEY, []);
+      logger.log('info', '[PersistentStore] Event log cleared');
+      return true;
+    } catch (error) {
+      logger.log('error', `[PersistentStore] Failed to clear event log: ${error}`);
+      return false;
+    }
+  }
+
+  /**
+   * Applies retention policy to event log:
+   * - Max 10,000 events
+   * - Max 30 days old
+   */
+  private applyRetentionPolicy(events: IEventLogEntry[]): IEventLogEntry[] {
+    const now = Date.now();
+    const cutoffTime = now - this.MAX_AGE_MS;
+
+    // Filter out events older than 30 days
+    let filtered = events.filter(e => e.timestamp >= cutoffTime);
+
+    // If still over limit, remove oldest entries
+    if (filtered.length > this.MAX_EVENTS) {
+      // Sort by timestamp (oldest first) then keep only newest MAX_EVENTS
+      filtered.sort((a, b) => a.timestamp - b.timestamp);
+      filtered = filtered.slice(filtered.length - this.MAX_EVENTS);
+    }
+
+    return filtered;
+  }
+
+  /**
+   * Flushes pending changes (call before SW stops)
+   */
+  public async flush(): Promise<void> {
+    if (this.isDirty && this.cumulativeMetrics) {
+      await this.saveCumulativeMetrics();
+    }
+  }
+}
+
+// Export singleton getter for convenience
+export const getPersistentStore = (): PersistentStore => PersistentStore.getInstance();

ts_web_serviceworker/classes.requestlogstore.ts

@@ -0,0 +1,196 @@
+import { logger } from './logging.js';
+import * as interfaces from '../dist_ts_interfaces/index.js';
+
+/**
+ * Store for TypedRequest traffic logs
+ * Keeps recent request/response logs in memory for dashboard display
+ */
+export class RequestLogStore {
+  private logs: interfaces.serviceworker.ITypedRequestLogEntry[] = [];
+  private maxEntries: number;
+
+  // Statistics
+  private stats: interfaces.serviceworker.ITypedRequestStats = {
+    totalRequests: 0,
+    totalResponses: 0,
+    methodCounts: {},
+    errorCount: 0,
+    avgDurationMs: 0,
+  };
+
+  // For calculating rolling average
+  private totalDuration = 0;
+  private durationCount = 0;
+
+  constructor(maxEntries = 500) {
+    this.maxEntries = maxEntries;
+    logger.log('info', `RequestLogStore initialized with max ${maxEntries} entries`);
+  }
+
+  /**
+   * Add a new log entry
+   */
+  public addEntry(entry: interfaces.serviceworker.ITypedRequestLogEntry): void {
+    // Add to log
+    this.logs.push(entry);
+
+    // Trim if over max
+    if (this.logs.length > this.maxEntries) {
+      this.logs.shift();
+    }
+
+    // Update statistics
+    this.updateStats(entry);
+  }
+
+  /**
+   * Update statistics based on new entry
+   */
+  private updateStats(entry: interfaces.serviceworker.ITypedRequestLogEntry): void {
+    // Count request/response
+    if (entry.phase === 'request') {
+      this.stats.totalRequests++;
+    } else {
+      this.stats.totalResponses++;
+    }
+
+    // Count errors
+    if (entry.error) {
+      this.stats.errorCount++;
+    }
+
+    // Update duration average
+    if (entry.durationMs !== undefined) {
+      this.totalDuration += entry.durationMs;
+      this.durationCount++;
+      this.stats.avgDurationMs = Math.round(this.totalDuration / this.durationCount);
+    }
+
+    // Update per-method counts
+    if (!this.stats.methodCounts[entry.method]) {
+      this.stats.methodCounts[entry.method] = {
+        requests: 0,
+        responses: 0,
+        errors: 0,
+        avgDurationMs: 0,
+      };
+    }
+
+    const methodStats = this.stats.methodCounts[entry.method];
+    if (entry.phase === 'request') {
+      methodStats.requests++;
+    } else {
+      methodStats.responses++;
+    }
+
+    if (entry.error) {
+      methodStats.errors++;
+    }
+
+    // Per-method duration tracking (simplified - just uses latest duration)
+    if (entry.durationMs !== undefined) {
+      // Rolling average for method
+      const currentAvg = methodStats.avgDurationMs || 0;
+      const count = methodStats.responses || 1;
+      methodStats.avgDurationMs = Math.round((currentAvg * (count - 1) + entry.durationMs) / count);
+    }
+  }
+
+  /**
+   * Get log entries with optional filters
+   */
+  public getEntries(options?: {
+    limit?: number;
+    method?: string;
+    since?: number;
+    before?: number;
+  }): interfaces.serviceworker.ITypedRequestLogEntry[] {
+    let result = [...this.logs];
+
+    // Filter by method
+    if (options?.method) {
+      result = result.filter((e) => e.method === options.method);
+    }
+
+    // Filter by timestamp (since)
+    if (options?.since) {
+      result = result.filter((e) => e.timestamp >= options.since);
+    }
+
+    // Filter by timestamp (before - for pagination)
+    if (options?.before) {
+      result = result.filter((e) => e.timestamp < options.before);
+    }
+
+    // Sort by timestamp descending (newest first)
+    result.sort((a, b) => b.timestamp - a.timestamp);
+
+    // Apply limit
+    if (options?.limit && options.limit > 0) {
+      result = result.slice(0, options.limit);
+    }
+
+    return result;
+  }
+
+  /**
+   * Get total count of entries (for pagination)
+   */
+  public getTotalCount(options?: { method?: string; since?: number }): number {
+    if (!options?.method && !options?.since) {
+      return this.logs.length;
+    }
+
+    let count = 0;
+    for (const entry of this.logs) {
+      if (options.method && entry.method !== options.method) continue;
+      if (options.since && entry.timestamp < options.since) continue;
+      count++;
+    }
+    return count;
+  }
+
+  /**
+   * Get statistics
+   */
+  public getStats(): interfaces.serviceworker.ITypedRequestStats {
+    return { ...this.stats };
+  }
+
+  /**
+   * Clear all logs and reset stats
+   */
+  public clear(): void {
+    this.logs = [];
+    this.stats = {
+      totalRequests: 0,
+      totalResponses: 0,
+      methodCounts: {},
+      errorCount: 0,
+      avgDurationMs: 0,
+    };
+    this.totalDuration = 0;
+    this.durationCount = 0;
+    logger.log('info', 'RequestLogStore cleared');
+  }
+
+  /**
+   * Get unique method names
+   */
+  public getMethods(): string[] {
+    return Object.keys(this.stats.methodCounts);
+  }
+}
+
+// Singleton instance
+let requestLogStoreInstance: RequestLogStore | null = null;
+
+/**
+ * Get the singleton RequestLogStore instance
+ */
+export function getRequestLogStore(): RequestLogStore {
+  if (!requestLogStoreInstance) {
+    requestLogStoreInstance = new RequestLogStore();
+  }
+  return requestLogStoreInstance;
+}

ts_web_serviceworker/classes.serviceworker.ts

@@ -12,6 +12,7 @@ import { UpdateManager } from './classes.updatemanager.js';
 import { NetworkManager } from './classes.networkmanager.js';
 import { TaskManager } from './classes.taskmanager.js';
 import { ServiceworkerBackend } from './classes.backend.js';
+import { getPersistentStore } from './classes.persistentstore.js';
 
 export class ServiceWorker {
   // STATIC
@@ -63,6 +64,14 @@ export class ServiceWorker {
       // its important to not go async before event.waitUntil
       try {
         logger.log('success', `service worker installed! TimeStamp = ${new Date().toISOString()}`);
+
+        // Log installation event
+        const persistentStore = getPersistentStore();
+        await persistentStore.init();
+        await persistentStore.logEvent('sw_installed', 'Service worker installed', {
+          timestamp: new Date().toISOString(),
+        });
+
         selfArg.skipWaiting();
         logger.log('note', `Called skip waiting!`);
         done.resolve();
@@ -84,6 +93,13 @@ export class ServiceWorker {
         await this.cacheManager.cleanCaches('new service worker loaded! :)');
         logger.log('ok', 'Caches cleaned successfully');
 
+        // Log activation event
+        const persistentStore = getPersistentStore();
+        await persistentStore.init();  // Ensure store is initialized (safe to call multiple times)
+        await persistentStore.logEvent('sw_activated', 'Service worker activated', {
+          timestamp: new Date().toISOString(),
+        });
+
         done.resolve();
         logger.log('success', `Service worker activated at ${new Date().toISOString()}`);
 
@@ -94,6 +110,13 @@ export class ServiceWorker {
         done.reject(error);
       }
     });
+
+    // Handle wake-up scenario: if already activated, connect immediately
+    // (install/activate events don't fire on wake-up)
+    if (selfArg.registration?.active) {
+      logger.log('info', 'SW woke up (already activated) - connecting to server');
+      this.connectToServer();
+    }
   }
 
   /**
@@ -105,6 +128,18 @@ export class ServiceWorker {
       this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
         new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
           logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
+
+          // Log cache invalidation event (survives)
+          const persistentStore = getPersistentStore();
+          await persistentStore.init();  // Ensure store is initialized
+          await persistentStore.logEvent('cache_invalidated', `Cache invalidated: ${reqArg.reason}`, {
+            reason: reqArg.reason,
+            timestamp: reqArg.timestamp,
+          });
+
+          // Reset cumulative metrics (they don't survive cache invalidation)
+          await persistentStore.resetCumulativeMetrics();
+
           await this.cacheManager.cleanCaches(reqArg.reason);
           // Notify all clients to reload
           await this.leleServiceWorkerBackend.triggerReloadAll();

ts_web_serviceworker/classes.updatemanager.ts

@@ -177,7 +177,7 @@ export class UpdateManager {
     try {
       const getAppHashRequest = new plugins.typedrequest.TypedRequest<
         interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo
-      >('/sw-typedrequest', 'serviceworker_versionInfo');
+      >('/typedrequest', 'serviceworker_versionInfo');
       
       // Use networkManager for the request with retries and timeout
       const response = await getAppHashRequest.fire({});

ts_web_serviceworker/env.ts

@@ -16,5 +16,6 @@ export interface ServiceWindow extends Window {
   location: any;
   skipWaiting: any;
   clients: any;
+  registration?: ServiceWorkerRegistration;
 }
 declare var self: Window;

ts_web_serviceworker/init.ts

@@ -4,7 +4,10 @@ import * as env from './env.js';
 declare var self: env.ServiceWindow;
 
 import { ServiceWorker } from './classes.serviceworker.js';
+import type { ServiceworkerBackend } from './classes.backend.js';
 
 const sw = new ServiceWorker(self);
 
 export const getServiceWorkerInstance = (): ServiceWorker => sw;
+
+export const getServiceWorkerBackend = (): ServiceworkerBackend => sw.leleServiceWorkerBackend;

ts_web_serviceworker_client/classes.actionmanager.ts

@@ -26,8 +26,14 @@ const DEFAULT_CONNECTION_OPTIONS: IConnectionOptions = {
  * * the serviceWorker method
  * * the deesComms method using BroadcastChannel
  */
+/**
+ * Callback type for status update subscriptions
+ */
+export type TStatusUpdateCallback = (status: interfaces.serviceworker.IStatusUpdate) => void;
+
 export class ActionManager {
   public deesComms = new plugins.deesComms.DeesComms();
+  private statusCallbacks: Set<TStatusUpdateCallback> = new Set();
 
   constructor() {
     // lets define handlers on the client/tab side
@@ -37,6 +43,49 @@ export class ActionManager {
       }, 200);
       return {};
     });
+
+    // Handler for status updates from service worker
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_StatusUpdate>('serviceworker_statusUpdate', async (status) => {
+      // Forward to all registered callbacks
+      for (const callback of this.statusCallbacks) {
+        try {
+          callback(status);
+        } catch (error) {
+          logger.log('warn', `Status callback error: ${error}`);
+        }
+      }
+      return {};
+    });
+  }
+
+  /**
+   * Subscribe to status updates from the service worker
+   * @returns Unsubscribe function
+   */
+  public subscribeToStatusUpdates(callback: TStatusUpdateCallback): () => void {
+    this.statusCallbacks.add(callback);
+    logger.log('info', 'Subscribed to service worker status updates');
+    return () => {
+      this.statusCallbacks.delete(callback);
+      logger.log('info', 'Unsubscribed from service worker status updates');
+    };
+  }
+
+  /**
+   * Get current service worker status
+   */
+  public async getServiceWorkerStatus(): Promise<interfaces.serviceworker.IRequest_Serviceworker_GetStatus['response'] | null> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus');
+      const response = await Promise.race([
+        tr.fire({}),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000)),
+      ]);
+      return response;
+    } catch (error) {
+      logger.log('warn', `Failed to get service worker status: ${error}`);
+      return null;
+    }
   }
 
   /**
@@ -142,4 +191,88 @@ export class ActionManager {
     const response = await tr.fire({});
     return response;
   }
+
+  // ================================
+  // TypedRequest Traffic Logging
+  // ================================
+
+  /**
+   * Log a TypedRequest entry to the service worker for dashboard display
+   */
+  public async logTypedRequest(entry: interfaces.serviceworker.ITypedRequestLogEntry): Promise<void> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IMessage_Serviceworker_TypedRequestLog>('serviceworker_typedRequestLog');
+      await tr.fire(entry);
+    } catch (error) {
+      // Silently ignore logging errors to avoid infinite loops
+      // (logging the error would trigger another log entry)
+    }
+  }
+
+  /**
+   * Get TypedRequest traffic logs from the service worker
+   */
+  public async getTypedRequestLogs(options?: {
+    limit?: number;
+    method?: string;
+    since?: number;
+  }): Promise<interfaces.serviceworker.IRequest_Serviceworker_GetTypedRequestLogs['response'] | null> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetTypedRequestLogs>('serviceworker_getTypedRequestLogs');
+      return await tr.fire(options || {});
+    } catch (error) {
+      logger.log('warn', `Failed to get TypedRequest logs: ${error}`);
+      return null;
+    }
+  }
+
+  /**
+   * Get TypedRequest traffic statistics from the service worker
+   */
+  public async getTypedRequestStats(): Promise<interfaces.serviceworker.ITypedRequestStats | null> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetTypedRequestStats>('serviceworker_getTypedRequestStats');
+      return await tr.fire({});
+    } catch (error) {
+      logger.log('warn', `Failed to get TypedRequest stats: ${error}`);
+      return null;
+    }
+  }
+
+  /**
+   * Clear TypedRequest traffic logs
+   */
+  public async clearTypedRequestLogs(): Promise<boolean> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_ClearTypedRequestLogs>('serviceworker_clearTypedRequestLogs');
+      const result = await tr.fire({});
+      return result.success;
+    } catch (error) {
+      logger.log('warn', `Failed to clear TypedRequest logs: ${error}`);
+      return false;
+    }
+  }
+
+  /**
+   * Subscribe to real-time TypedRequest log entries
+   * @returns Unsubscribe function
+   */
+  public subscribeToTypedRequestLogs(callback: (entry: interfaces.serviceworker.ITypedRequestLogEntry) => void): () => void {
+    // Create handler for broadcast messages
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_TypedRequestLogged>('serviceworker_typedRequestLogged', async (entry) => {
+      try {
+        callback(entry);
+      } catch (error) {
+        logger.log('warn', `TypedRequest log callback error: ${error}`);
+      }
+      return {};
+    });
+
+    logger.log('info', 'Subscribed to TypedRequest log updates');
+
+    // Return unsubscribe function (note: DeesComms doesn't support removing handlers)
+    return () => {
+      logger.log('info', 'Unsubscribed from TypedRequest log updates (handler remains active)');
+    };
+  }
 }