v8.0.0

Introduce structured security headers support (CSP, HSTS, X-Frame-Options, COOP/COEP/CORP, Permissions-Policy, Referrer-Policy, X-XSS-Protection, etc.) and apply them to responses and OPTIONS preflight. Expose configuration via the server API and document usage. Also update UtilityWebsiteServer defaults (SPA fallback enabled by default) and related docs.

.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,177 @@
 # Changelog
 
+## 2025-12-20 - 8.0.0 - BREAKING CHANGE(typedserver)
+migrate route handlers to use IRequestContext and lazy body parsers
+
+- Route handlers now receive plugins.smartserve.IRequestContext instead of Request (breaking API change). addRoute no longer wraps handlers to convert context → Request.
+- createContext() is now synchronous and provides lazy body accessors: ctx.json(), ctx.text(), ctx.arrayBuffer(), ctx.formData(); ctx.body property was removed.
+- DevToolsController constructor now accepts optional options and supplies no-op defaults so controllers can be auto-instantiated without args.
+- TypedRequest controller now reads the request via await ctx.json() and forwards typed requests accordingly.
+- Utility website server handlers and other internal callsites updated to use ctx.params and the new context API.
+- Tests updated to the new TypedServer API, improved assertions, changed test port and reduced delays, and switched tap runner export to default.
+- Bumped dependency @push.rocks/smartserve to ^2.0.1 to match API changes.
+- npmextra.json reorganized git.zone/tsdoc entries and added release registries and @ship.zone/szci metadata.
+
+## 2025-12-08 - 7.11.1 - fix(dependencies)
+Upgrade dependencies: bump @design.estate/dees-catalog to v3.1.1 and @push.rocks/smartwatch to v6.0.0; update migration notes in readme.hints.md
+
+- package.json: @design.estate/dees-catalog updated from ^2.0.3 to ^3.1.1 (includes new icons, components and DeesIcon unified icon property; legacy iconFA deprecated)
+- package.json: @push.rocks/smartwatch updated from ^5.0.0 to ^6.0.0 (cross-runtime support, native fs.watch, API compatibility maintained: new Smartwatch class methods and events documented)
+- readme.hints.md: added migration notes for smartwatch v6 and dees-catalog v3, plus other dependency update summaries
+
+## 2025-12-08 - 7.11.0 - feat(typedserver)
+Add configurable response compression (Brotli + Gzip) with defaults enabled and documentation
+
+- Expose a new compression option on IServerOptions (plugins.smartserve.ICompressionConfig | boolean).
+- Pass the compression setting through to SmartServe (smartServeOptions.compression = this.options.compression).
+- Add compression option to UtilityWebsiteServer and forward it when creating SmartServe options.
+- Update README: new Compression section with global config examples, per-route decorator usage, and options reference.
+- Add a small readme.todo.md with service worker wake/reload TODO notes.
+
+## 2025-12-05 - 7.10.2 - fix(docs)
+Update README with routing examples and utility server config; bump @cloudflare/workers-types and @push.rocks/smartserve versions
+
+- Bumped dependency @cloudflare/workers-types to ^4.20251205.0
+- Bumped dependency @push.rocks/smartserve to ^1.3.0
+- Expanded README: added decorator-based routing examples (Route/Get/Post) using smartserve
+- Added programmatic routing examples (addRoute) and SPA/wildcard route samples
+- Enhanced UtilityWebsiteServer and UtilityServiceServer docs: default port, ads.txt, feedMetadata, addCustomRoutes example and other config options
+- Clarified security headers descriptions and configuration reference
+- Updated Quick Start console message to show running port ("Server running on port 3000!")
+- Documented EdgeWorker/domain routing caching example and noted service worker version update behavior
+- Adjusted TypedSocket example tag to use 'allClients' in README
+
+## 2025-12-05 - 7.10.1 - fix(typedserver)
+Use smartserve ControllerRegistry for custom routes and remove custom route parsing
+
+- addRoute now delegates to plugins.smartserve.ControllerRegistry instead of building its own regex-based matcher
+- Backwards compatibility: incoming smartserve IRequestContext is converted to a Request and ctx.params is attached to request.params before invoking the handler
+- Removed internal IRegisteredRoute, customRoutes storage, and parseRouteParams helper
+- Request handling now uses ControllerRegistry.matchRoute and registered controllers are compiled via ControllerRegistry.compileRoutes()
+
+## 2025-12-05 - 7.10.0 - feat(website-server)
+Add configurable ads.txt support to website server
+
+- Introduce adsTxt?: string[] option to the server options to allow configuring ads.txt entries.
+- Serve /ads.txt only when adsTxt is provided; the route is not registered if no entries are configured.
+- Replace previous hard-coded Google ads.txt entry with values joined from the provided adsTxt array and served as text/plain.
+- Preserves existing behavior when adsTxt is not set (no /ads.txt endpoint will be exposed).
+
+## 2025-12-05 - 7.9.0 - feat(typedserver)
+Add configurable security headers and default SPA behavior
+
+Introduce structured security headers support (CSP, HSTS, X-Frame-Options, COOP/COEP/CORP, Permissions-Policy, Referrer-Policy, X-XSS-Protection, etc.) and apply them to responses and OPTIONS preflight. Expose configuration via the server API and document usage. Also update UtilityWebsiteServer defaults (SPA fallback enabled by default) and related docs.
+
+- Add ISecurityHeaders and IContentSecurityPolicy TypeScript interfaces to configure CSP, HSTS and other security-related headers.
+- Implement buildCspHeader to serialize CSP config and applyResponseHeaders to add CORS and all configured security headers to outgoing responses.
+- Apply security headers to OPTIONS preflight responses and all other responses by default when securityHeaders option is provided.
+- Add securityHeaders option to IServerOptions and wire it through TypedServer and UtilityWebsiteServer constructors.
+- Update UtilityWebsiteServer: renamed template to UtilityWebsiteServer, enable SPA fallback by default, expose options (cors, spaFallback, securityHeaders, forceSsl, port, feedMetadata, etc.) and forward them into the TypedServer instance.
+- Documentation: add Security Headers section and example usage to readme.md; document the UtilityWebsiteServer defaults and example.
+- Ensure CORS headers are only added when cors option is enabled.
+
+## 2025-12-05 - 7.8.18 - fix(readme)
+Update README to reflect new features and updated examples (SPA/PWA/Edge/ServiceWorker) and clarify API usage
+
+- Rewrite project introduction and features list to highlight Service Worker, Edge Workers, SPA support, and PWA readiness
+- Replace and expand example sections: Basic Server, Full Configuration, TypedRequest handlers, WebSocket usage, Edge Worker entrypoint, and Service Worker client usage
+- Update configuration reference: remove legacy compression flags, add spaFallback, defaultAnswer, feedMetadata, and blockWaybackMachine options
+- Document package exports and add examples for utility servers (WebsiteServer, ServiceServer)
+- Clarify TypedRequest/TypedSocket usage by showing server.typedrouter and service worker client initializer (getServiceworkerClient)
+
+## 2025-12-04 - 7.8.11 - fix(web_inject)
+Improve logging in web injection (TypedRequest) and update dees-comms dependency
+
+- Add debug logging to ts_web_inject to explicitly filter serviceworker_* methods and avoid infinite loops
+- Log incoming TypedRequest methods for better visibility during debugging
+- Bump dependency @design.estate/dees-comms from ^1.0.27 to ^1.0.28
+
+## 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
 

npmextra.json

@@ -1,8 +1,5 @@
 {
-  "npmci": {
-    "npmAccessLevel": "public"
-  },
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "npm",
     "module": {
       "githost": "code.foss.global",
@@ -27,9 +24,17 @@
         "robots.txt",
         "compression (gzip, deflate, brotli)"
       ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
     }
   },
-  "tsdoc": {
+  "@git.zone/tsdoc": {
     "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
-  }
+  },
+  "@ship.zone/szci": {}
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "7.2.0",
+  "version": "8.0.0",
   "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,11 +58,12 @@
   ],
   "homepage": "https://code.foss.global/api.global/typedserver",
   "dependencies": {
-    "@api.global/typedrequest": "^3.1.11",
+    "@api.global/typedrequest": "^3.2.5",
     "@api.global/typedrequest-interfaces": "^3.0.19",
     "@api.global/typedsocket": "^4.1.0",
-    "@cloudflare/workers-types": "^4.20251202.0",
-    "@design.estate/dees-comms": "^1.0.27",
+    "@cloudflare/workers-types": "^4.20251205.0",
+    "@design.estate/dees-catalog": "^3.1.1",
+    "@design.estate/dees-comms": "^1.0.30",
     "@push.rocks/lik": "^6.2.2",
     "@push.rocks/smartdelay": "^3.0.5",
     "@push.rocks/smartenv": "^6.0.0",
@@ -83,20 +83,15 @@
     "@push.rocks/smartpromise": "^4.2.3",
     "@push.rocks/smartrequest": "^5.0.1",
     "@push.rocks/smartrx": "^3.0.10",
-    "@push.rocks/smartserve": "^1.1.2",
+    "@push.rocks/smartserve": "^2.0.1",
     "@push.rocks/smartsitemap": "^2.0.4",
     "@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/smartwatch": "^6.0.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": {

readme.hints.md

@@ -3,7 +3,9 @@
 ## Recent Changes (December 2025)
 
 ### Dependency Updates
-- `@push.rocks/smartchok` replaced with `@push.rocks/smartwatch` (renamed package, same API)
+- `@push.rocks/smartwatch` upgraded to v6.0.0 (cross-runtime, native fs.watch)
+- `@design.estate/dees-catalog` upgraded to v3.1.1 (new icons, components)
+- `@push.rocks/smartchok` replaced with `@push.rocks/smartwatch` (renamed package)
 - `@push.rocks/smartfile` upgraded from v11 to v13 (major API change - `fs` module removed)
 - `@push.rocks/smartfs` added for filesystem operations (v1.2.0+)
 - `@push.rocks/smartenv` upgraded to v6.0.0
@@ -14,6 +16,26 @@
 
 ### Code Migration Notes
 
+#### smartwatch v6.0.0
+- Cross-runtime support: Node.js 20+, Deno, Bun
+- Uses native `fs.watch({ recursive: true })` for performance
+- Minimal dependencies (no chokidar, no FSEvents bindings)
+- API unchanged: `new Smartwatch([patterns])`, `.start()`, `.stop()`, `.getObservableFor(event)`
+- Events: `add`, `addDir`, `change`, `unlink`, `unlinkDir`, `error`, `ready`
+- Dynamic watching: `.add(patterns)`, `.remove(pattern)`
+- Status property: `'idle' | 'starting' | 'watching'`
+
+#### dees-catalog v3.0.0+ Migration
+- **DeesIcon**: New unified `icon` property with library prefixes:
+  - FontAwesome: `icon="fa:check"` (prefix `fa:`)
+  - Lucide: `icon="lucide:menu"` (prefix `lucide:`)
+  - Legacy `iconFA` property deprecated but still supported
+- **DeesToast**: New convenience methods and positioning:
+  - `DeesToast.info()`, `.success()`, `.warning()`, `.error()`
+  - Position options: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`
+- New components: DeesInputTags, DeesInputDatepicker, DeesStatsGrid, DeesPagination, DeesAppuiBase
+- DeesAppuiAppbar: Hierarchical menus with keyboard navigation
+
 #### smartfile v13 Migration
 - Old: `plugins.smartfile.fs.toStringSync(path)` / `plugins.smartfile.fs.toBufferSync(path)`
 - New: Use `plugins.fsInstance` (SmartFs instance with Node provider)
@@ -24,10 +46,6 @@
 - Old: `plugins.smartfile.fs.fileTreeToHash(dir, pattern)`
 - New: `await plugins.fsInstance.directory(dir).recursive().treeHash()`
 
-#### smartwatch (formerly smartchok)
-- Class renamed: `Smartchok` → `Smartwatch`
-- API remains the same: `new Smartwatch([paths])`, `.start()`, `.stop()`, `.getObservableFor(event)`
-
 #### webrequest v4
 - Class renamed: `WebRequest` → `WebrequestClient`
 

readme.md

@@ -1,6 +1,6 @@
 # @api.global/typedserver
 
-A powerful TypeScript-first web server framework featuring static file serving, live reload, compression, and seamless type-safe API integration. Part of the `@api.global` ecosystem, it provides a modern foundation for building full-stack TypeScript applications with first-class support for typed HTTP requests and WebSocket communication.
+A powerful TypeScript-first web server framework for building modern full-stack applications. Features static file serving, live reload, type-safe API integration, decorator-based routing, service worker support, and edge computing capabilities. Part of the `@api.global` ecosystem.
 
 ## Issue Reporting and Security
 
@@ -8,15 +8,16 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ## ✨ Features
 
-- 🔒 **Type-Safe API Ecosystem** - Full TypeScript support with `@api.global/typedrequest` and `@api.global/typedsocket`
+- 🔒 **Type-Safe API** - Full TypeScript support with `@api.global/typedrequest` and `@api.global/typedsocket`
+- 🎯 **Decorator Routing** - Clean, expressive routing with `@Route`, `@Get`, `@Post` decorators via smartserve
+- 🛡️ **Security Headers** - Built-in CSP, HSTS, X-Frame-Options, and comprehensive security configuration
 - ⚡ **Live Reload** - Automatic browser refresh on file changes during development
-- 🗜️ **Compression** - Built-in support for gzip, deflate, and brotli compression
-- 🌐 **CORS Management** - Flexible cross-origin resource sharing configuration
-- 🔧 **Service Worker Integration** - Advanced caching and offline capabilities
-- ☁️ **Edge Worker Support** - Cloudflare Workers compatible edge computing
-- 📡 **WebSocket Support** - Real-time bidirectional communication via TypedSocket
-- 🗺️ **Sitemap & Feeds** - Automatic sitemap and RSS feed generation
-- 🤖 **Robots.txt** - Built-in robots.txt handling
+- 🛠️ **Service Worker** - Advanced caching, offline support, and background sync
+- ☁️ **Edge Workers** - Cloudflare Workers compatible edge computing with domain routing
+- 📡 **WebSocket** - Real-time bidirectional communication via TypedSocket
+- 🗺️ **SEO Tools** - Built-in sitemap, RSS feed, and robots.txt generation
+- 🎯 **SPA Support** - Single-page application fallback routing
+- 📱 **PWA Ready** - Web App Manifest generation for progressive web apps
 
 ## 📦 Installation
 
@@ -30,7 +31,7 @@ npm install @api.global/typedserver
 
 ## 🚀 Quick Start
 
-### Basic Static File Server
+### Basic Server
 
 ```typescript
 import { TypedServer } from '@api.global/typedserver';
@@ -43,10 +44,10 @@ const server = new TypedServer({
 });
 
 await server.start();
-console.log('Server running on port 3000');
+console.log('Server running on port 3000!');
 ```
 
-### Server with All Options
+### Full Configuration
 
 ```typescript
 import { TypedServer } from '@api.global/typedserver';
@@ -55,15 +56,23 @@ const server = new TypedServer({
   port: 8080,
   serveDir: './dist',
   cors: true,
+
+  // Development
   watch: true,
   injectReload: true,
-  enableCompression: true,
-  preferredCompressionMethod: 'brotli',
-  forceSsl: false,
+
+  // Production
+  forceSsl: true,
+  spaFallback: true,      // Serve index.html for client-side routes
+
+  // SEO
   sitemap: true,
   feed: true,
   robots: true,
   domain: 'example.com',
+  blockWaybackMachine: false,
+
+  // PWA
   appVersion: 'v1.0.0',
   manifest: {
     name: 'My App',
@@ -78,16 +87,95 @@ const server = new TypedServer({
 await server.start();
 ```
 
+## 🛣️ Routing
+
+TypedServer uses a unified routing system powered by `@push.rocks/smartserve`. You can add routes using decorators or the programmatic API.
+
+### Decorator-Based Routing
+
+Create clean, expressive controllers using decorators:
+
+```typescript
+import * as smartserve from '@push.rocks/smartserve';
+
+@smartserve.Route('/api/users')
+class UserController {
+  @smartserve.Get('/')
+  async listUsers(ctx: smartserve.IRequestContext): Promise<Response> {
+    const users = await getUsersFromDb();
+    return new Response(JSON.stringify(users), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @smartserve.Get('/:id')
+  async getUser(ctx: smartserve.IRequestContext): Promise<Response> {
+    const userId = ctx.params.id;
+    const user = await getUserById(userId);
+    return new Response(JSON.stringify(user), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  @smartserve.Post('/')
+  async createUser(ctx: smartserve.IRequestContext): Promise<Response> {
+    const userData = await ctx.json();
+    const newUser = await createUserInDb(userData);
+    return new Response(JSON.stringify(newUser), {
+      status: 201,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+}
+
+// Register the controller
+smartserve.ControllerRegistry.registerInstance(new UserController());
+```
+
+### Programmatic Routes with `addRoute()`
+
+Add routes dynamically using the `addRoute()` API:
+
+```typescript
+import { TypedServer } from '@api.global/typedserver';
+
+const server = new TypedServer({ serveDir: './public', cors: true });
+
+// Simple route
+server.addRoute('/api/health', 'GET', async (request) => {
+  return new Response(JSON.stringify({ status: 'ok' }), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+});
+
+// Route with parameters (Express-style :param syntax)
+server.addRoute('/api/items/:id', 'GET', async (request) => {
+  const itemId = (request as any).params.id;
+  return new Response(JSON.stringify({ id: itemId }), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+});
+
+// Wildcard routes
+server.addRoute('/files/*path', 'GET', async (request) => {
+  const filePath = (request as any).params.path;
+  // Handle file serving logic
+  return new Response(`Requested: ${filePath}`);
+});
+
+await server.start();
+```
+
 ## 🔌 Type-Safe API Integration
 
 ### Adding TypedRequest Handlers
 
 ```typescript
-import { TypedServer, servertools } from '@api.global/typedserver';
+import { TypedServer } from '@api.global/typedserver';
 import * as typedrequest from '@api.global/typedrequest';
 
 // Define your typed request interface
-interface IGetUser {
+interface IGetUser extends typedrequest.implementsTR<IGetUser> {
   method: 'getUser';
   request: { userId: string };
   response: { name: string; email: string };
@@ -95,133 +183,233 @@ interface IGetUser {
 
 const server = new TypedServer({ serveDir: './public', cors: true });
 
-// Create a typed router
-const typedRouter = new typedrequest.TypedRouter();
-
-// Add a typed handler
-typedRouter.addTypedHandler<IGetUser>(
+// Add a typed handler directly to the server's router
+server.typedrouter.addTypedHandler<IGetUser>(
   new typedrequest.TypedHandler('getUser', async (data) => {
-    // Your logic here
     return { name: 'John Doe', email: 'john@example.com' };
   })
 );
 
-// Attach the router to the server
-server.server.addRoute('/api', new servertools.HandlerTypedRouter(typedRouter));
-
 await server.start();
 ```
 
-### WebSocket Communication with TypedSocket
+### Real-Time WebSocket Communication
+
+TypedServer automatically sets up TypedSocket for real-time communication:
 
 ```typescript
 import { TypedServer } from '@api.global/typedserver';
 import * as typedrequest from '@api.global/typedrequest';
-import * as typedsocket from '@api.global/typedsocket';
 
-const server = new TypedServer({ serveDir: './public', cors: true });
-const typedRouter = new typedrequest.TypedRouter();
-
-await server.start();
-
-// Create WebSocket server attached to the HTTP server
-const socketServer = await typedsocket.TypedSocket.createServer(
-  typedRouter,
-  server.server
-);
-
-// Handle real-time events
-interface IChatMessage {
+interface IChatMessage extends typedrequest.implementsTR<IChatMessage> {
   method: 'sendMessage';
   request: { text: string; room: string };
   response: { messageId: string; timestamp: number };
 }
 
-typedRouter.addTypedHandler<IChatMessage>(
+const server = new TypedServer({ serveDir: './public', cors: true });
+
+// Handle real-time messages
+server.typedrouter.addTypedHandler<IChatMessage>(
   new typedrequest.TypedHandler('sendMessage', async (data) => {
     return { messageId: crypto.randomUUID(), timestamp: Date.now() };
   })
 );
-```
 
-## 🛠️ Server Tools
+await server.start();
 
-### Custom Route Handlers
-
-```typescript
-import { servertools } from '@api.global/typedserver';
-
-const server = new servertools.Server({
-  cors: true,
-  domain: 'example.com',
-});
-
-// Add a custom route with handler
-server.addRoute('/api/hello', new servertools.Handler('GET', async (req, res) => {
-  res.json({ message: 'Hello, World!' });
-}));
-
-// Serve static files from a directory
-server.addRoute('/{*splat}', new servertools.HandlerStatic('./public', {
-  serveIndexHtmlDefault: true,
-  enableCompression: true,
-}));
-
-await server.start(3000);
-```
-
-### Proxy Handler
-
-```typescript
-import { servertools } from '@api.global/typedserver';
-
-const server = new servertools.Server({ cors: true });
-
-// Proxy requests to another server
-server.addRoute('/proxy/{*splat}', new servertools.HandlerProxy({
-  target: 'https://api.example.com',
-}));
-
-await server.start(3000);
+// Push messages to connected clients
+const connections = await server.typedsocket.findAllTargetConnectionsByTag('allClients');
+for (const conn of connections) {
+  // Push to specific clients via TypedSocket
+}
 ```
 
 ## ☁️ Edge Worker (Cloudflare Workers)
 
+Deploy your application to the edge with Cloudflare Workers:
+
 ```typescript
 import { EdgeWorker, DomainRouter } from '@api.global/typedserver/edgeworker';
 
-const router = new DomainRouter();
+const worker = new EdgeWorker();
 
-router.addDomainInstruction({
+// Configure domain routing with caching
+worker.domainRouter.addDomainInstruction({
   domainPattern: '*.example.com',
   originUrl: 'https://origin.example.com',
+  type: 'cache',
   cacheConfig: { maxAge: 3600 },
 });
 
-const worker = new EdgeWorker(router);
+// Pass-through to origin for API routes
+worker.domainRouter.addDomainInstruction({
+  domainPattern: 'api.example.com',
+  originUrl: 'https://api-origin.example.com',
+  type: 'origin',
+});
 
-// In your Cloudflare Worker entry point
+// Cloudflare Worker entry point
 export default {
-  fetch: (request: Request, env: any, ctx: any) => worker.handleRequest(request, env, ctx),
+  fetch: worker.fetchFunction.bind(worker),
 };
 ```
 
 ## 🔧 Service Worker Client
 
+Manage service workers in your frontend application:
+
 ```typescript
-import { ServiceWorkerClient } from '@api.global/typedserver/web_serviceworker_client';
+import { getServiceworkerClient } from '@api.global/typedserver/web_serviceworker_client';
 
-const swClient = new ServiceWorkerClient();
+// Initialize and register service worker
+const swClient = await getServiceworkerClient({
+  pollInterval: 30000,  // Poll for updates every 30s
+});
 
-// Register and manage service worker
-await swClient.register('/serviceworker.bundle.js');
+// The service worker handles:
+// - Cache invalidation from server
+// - Offline support
+// - Background sync
+// - Version updates
+```
 
-// Listen for updates
-swClient.onUpdate(() => {
-  console.log('New version available!');
+## 🛡️ Security Headers
+
+Configure comprehensive security headers including CSP, HSTS, and more:
+
+```typescript
+import { TypedServer } from '@api.global/typedserver';
+
+const server = new TypedServer({
+  serveDir: './dist',
+  cors: true,
+
+  securityHeaders: {
+    // Content Security Policy
+    csp: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'", "'unsafe-inline'", 'https://cdn.example.com'],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      imgSrc: ["'self'", 'data:', 'https:'],
+      connectSrc: ["'self'", 'wss:', 'https://api.example.com'],
+      fontSrc: ["'self'", 'https://fonts.gstatic.com'],
+      frameAncestors: ["'none'"],
+      upgradeInsecureRequests: true,
+    },
+
+    // HSTS (HTTP Strict Transport Security)
+    hstsMaxAge: 31536000,         // 1 year
+    hstsIncludeSubDomains: true,
+    hstsPreload: true,
+
+    // Other security headers
+    xFrameOptions: 'DENY',
+    xContentTypeOptions: true,
+    xXssProtection: true,
+    referrerPolicy: 'strict-origin-when-cross-origin',
+
+    // Cross-Origin policies
+    crossOriginOpenerPolicy: 'same-origin',
+    crossOriginEmbedderPolicy: 'require-corp',
+    crossOriginResourcePolicy: 'same-origin',
+
+    // Permissions Policy
+    permissionsPolicy: {
+      camera: [],
+      microphone: [],
+      geolocation: ['self'],
+    },
+  },
+});
+
+await server.start();
+```
+
+### Security Headers Reference
+
+| Header | Option | Description |
+|--------|--------|-------------|
+| `Content-Security-Policy` | `csp` | Controls resources the browser can load |
+| `Strict-Transport-Security` | `hstsMaxAge`, `hstsIncludeSubDomains`, `hstsPreload` | Forces HTTPS connections |
+| `X-Frame-Options` | `xFrameOptions` | Prevents clickjacking attacks |
+| `X-Content-Type-Options` | `xContentTypeOptions` | Prevents MIME-sniffing |
+| `X-XSS-Protection` | `xXssProtection` | Legacy XSS filter |
+| `Referrer-Policy` | `referrerPolicy` | Controls referrer information |
+| `Permissions-Policy` | `permissionsPolicy` | Controls browser features |
+| `Cross-Origin-Opener-Policy` | `crossOriginOpenerPolicy` | Isolates browsing context |
+| `Cross-Origin-Embedder-Policy` | `crossOriginEmbedderPolicy` | Controls cross-origin embedding |
+| `Cross-Origin-Resource-Policy` | `crossOriginResourcePolicy` | Controls cross-origin resource sharing |
+
+## 🗜️ Compression
+
+TypedServer supports automatic response compression using Brotli and Gzip. Compression is powered by smartserve and enabled by default.
+
+### Global Configuration
+
+```typescript
+import { TypedServer } from '@api.global/typedserver';
+
+const server = new TypedServer({
+  serveDir: './dist',
+  cors: true,
+
+  // Enable with defaults (brotli + gzip, threshold: 1024 bytes)
+  compression: true,
+
+  // Or disable completely
+  compression: false,
+
+  // Or configure in detail
+  compression: {
+    enabled: true,
+    algorithms: ['br', 'gzip'],    // Preferred order
+    threshold: 1024,               // Min size to compress (bytes)
+    level: 4,                      // Compression level (1-11 for brotli, 1-9 for gzip)
+    exclude: ['/api/stream/*'],    // Skip these paths
+  },
 });
 ```
 
+### Per-Route Control with Decorators
+
+Use `@Compress` and `@NoCompress` decorators for fine-grained control:
+
+```typescript
+import * as smartserve from '@push.rocks/smartserve';
+
+@smartserve.Route('/api')
+class ApiController {
+  // Force maximum compression for this endpoint
+  @smartserve.Get('/large-data')
+  @smartserve.Compress({ level: 11 })
+  async getLargeData(ctx: smartserve.IRequestContext): Promise<Response> {
+    return new Response(JSON.stringify(largeDataset));
+  }
+
+  // Disable compression for streaming endpoint
+  @smartserve.Get('/events')
+  @smartserve.NoCompress()
+  async streamEvents(ctx: smartserve.IRequestContext): Promise<Response> {
+    // Server-Sent Events shouldn't be compressed
+    return new Response(eventStream, {
+      headers: { 'Content-Type': 'text/event-stream' },
+    });
+  }
+}
+```
+
+### Compression Options Reference
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `enabled` | `boolean` | `true` | Enable/disable compression |
+| `algorithms` | `string[]` | `['br', 'gzip']` | Preferred algorithms in order |
+| `threshold` | `number` | `1024` | Minimum response size (bytes) to compress |
+| `level` | `number` | `4` | Compression level (1-11 for brotli, 1-9 for gzip) |
+| `compressibleTypes` | `string[]` | auto | MIME types to compress |
+| `exclude` | `string[]` | `[]` | Path patterns to skip |
+
 ## 📋 Configuration Reference
 
 ### IServerOptions
@@ -233,9 +421,8 @@ swClient.onUpdate(() => {
 | `cors` | `boolean` | `true` | Enable CORS headers |
 | `watch` | `boolean` | `false` | Watch files for changes |
 | `injectReload` | `boolean` | `false` | Inject live reload script into HTML |
-| `enableCompression` | `boolean` | `false` | Enable response compression |
-| `preferredCompressionMethod` | `'gzip' \| 'deflate' \| 'brotli'` | - | Preferred compression algorithm |
 | `forceSsl` | `boolean` | `false` | Redirect HTTP to HTTPS |
+| `spaFallback` | `boolean` | `false` | Serve index.html for non-file routes |
 | `sitemap` | `boolean` | `false` | Generate sitemap at `/sitemap` |
 | `feed` | `boolean` | `false` | Generate RSS feed at `/feed` |
 | `robots` | `boolean` | `false` | Serve robots.txt |
@@ -244,16 +431,131 @@ swClient.onUpdate(() => {
 | `manifest` | `object` | - | Web App Manifest configuration |
 | `publicKey` | `string` | - | SSL certificate |
 | `privateKey` | `string` | - | SSL private key |
+| `defaultAnswer` | `function` | - | Custom default response handler |
+| `feedMetadata` | `object` | - | RSS feed metadata options |
+| `blockWaybackMachine` | `boolean` | `false` | Block Wayback Machine archiving |
+| `securityHeaders` | `ISecurityHeaders` | - | Security headers configuration |
+| `compression` | `ICompressionConfig \| boolean` | `true` | Response compression configuration |
 
-## 🏗️ Architecture
+## 🏗️ Package Exports
 
 ```
 @api.global/typedserver
-├── /backend         - Main server exports (TypedServer, servertools)
-├── /edgeworker      - Cloudflare Workers edge computing
-├── /web_inject      - Live reload script injection
-├── /web_serviceworker - Service Worker implementation
-└── /web_serviceworker_client - Service Worker client utilities
+├── .                           - Main server (TypedServer)
+├── /backend                    - Alias for main server
+├── /edgeworker                 - Cloudflare Workers edge computing
+├── /web_inject                 - Live reload script injection
+├── /web_serviceworker          - Service Worker implementation
+└── /web_serviceworker_client   - Service Worker client utilities
+```
+
+## 🔄 Utility Servers
+
+Pre-configured server templates with best practices built-in.
+
+### UtilityWebsiteServer
+
+Optimized for modern web applications with SPA support enabled by default:
+
+```typescript
+import { utilityservers } from '@api.global/typedserver';
+
+const websiteServer = new utilityservers.UtilityWebsiteServer({
+  serveDir: './dist',
+  domain: 'example.com',
+
+  // SPA fallback enabled by default
+  spaFallback: true,   // default: true
+
+  // Security headers
+  securityHeaders: {
+    csp: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'", "'unsafe-inline'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+    },
+    xFrameOptions: 'SAMEORIGIN',
+    xContentTypeOptions: true,
+  },
+
+  // Compression (enabled by default)
+  compression: true,  // or { level: 6, threshold: 512 }
+
+  // Other options
+  cors: true,          // default: true
+  forceSsl: false,     // default: false
+  appSemVer: '1.0.0',
+  port: 3000,          // default: 3000
+
+  // Optional ads.txt entries (only served if configured)
+  adsTxt: [
+    'google.com, pub-1234567890, DIRECT, f08c47fec0942fa0',
+  ],
+
+  // RSS feed metadata
+  feedMetadata: {
+    title: 'My Blog',
+    description: 'A cool blog',
+    link: 'https://example.com',
+  },
+
+  // Add custom routes
+  addCustomRoutes: async (typedserver) => {
+    typedserver.addRoute('/api/custom', 'GET', async () => {
+      return new Response('Custom route!');
+    });
+  },
+});
+
+await websiteServer.start();
+```
+
+### UtilityServiceServer
+
+Optimized for API services with auto-generated info page:
+
+```typescript
+import { utilityservers } from '@api.global/typedserver';
+
+const serviceServer = new utilityservers.UtilityServiceServer({
+  serviceName: 'My API',
+  serviceVersion: '1.0.0',
+  serviceDomain: 'api.example.com',
+  port: 8080,
+
+  // Add custom routes
+  addCustomRoutes: async (typedserver) => {
+    typedserver.addRoute('/api/status', 'GET', async () => {
+      return new Response(JSON.stringify({ status: 'healthy' }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    });
+  },
+});
+
+await serviceServer.start();
+```
+
+## 🧩 Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      TypedServer                            │
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
+│  │ SmartServe  │  │ TypedRouter │  │    TypedSocket      │ │
+│  │ (Routing)   │  │ (RPC)       │  │    (WebSocket)      │ │
+│  └─────────────┘  └─────────────┘  └─────────────────────┘ │
+│         │                │                    │             │
+│         ▼                ▼                    ▼             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │              Request Handler Pipeline               │   │
+│  │  1. Controller Registry (Decorated Routes)          │   │
+│  │  2. TypedRequest/TypedSocket handlers               │   │
+│  │  3. Static File Serving                             │   │
+│  │  4. SPA Fallback                                    │   │
+│  └─────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────┘
 ```
 
 ## License and Legal Information

readme.todo.md

@@ -0,0 +1,5 @@
+- Wake up the service worker before sending stuff.
+
+Handle reload properly. Make sure service worker is up.
+
+Pill handling of service worker status.

test/test.reload.ts

@@ -7,7 +7,7 @@ let testTypedServer: TypedServer;
 tap.test('should create a valid instance of TypedServer', async () => {
   testTypedServer = new TypedServer({
     injectReload: true,
-    port: 3000,
+    port: 3001,
     serveDir: smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
     watch: true,
     cors: true,
@@ -17,15 +17,15 @@ tap.test('should create a valid instance of TypedServer', async () => {
 
 tap.test('should start to serve files', async (tools) => {
   await testTypedServer.start();
-  await tools.delayFor(5000);
+  await tools.delayFor(1000);
   await testTypedServer.reload();
-  await tools.delayFor(5000);
+  await tools.delayFor(1000);
   await testTypedServer.reload();
 });
 
-tap.test('should stop to serve files ', async (tools) => {
-  await tools.delayFor(5000);
+tap.test('should stop to serve files', async (tools) => {
+  await tools.delayFor(1000);
   await testTypedServer.stop();
 });
 
-tap.start();
+export default tap.start();

test/test.server.ts

@@ -1,28 +1,21 @@
-// tslint:disable-next-line:no-implicit-dependencies
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-
-// helper dependencies
-// tslint:disable-next-line:no-implicit-dependencies
-
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartrequest from '@push.rocks/smartrequest';
 
 import * as typedserver from '../ts/index.js';
 
-let testServer: typedserver.servertools.Server;
-let testRoute: typedserver.servertools.Route;
-let testRoute2: typedserver.servertools.Route;
-let testHandler: typedserver.servertools.Handler;
+let testServer: typedserver.TypedServer;
 
 // =================
-// Test class Server
+// Test TypedServer
 // =================
 
-tap.test('should create a valid Server', async () => {
-  testServer = new typedserver.servertools.Server({
+tap.test('should create a valid TypedServer', async () => {
+  testServer = new typedserver.TypedServer({
     cors: true,
     domain: 'testing.git.zone',
     forceSsl: false,
+    port: 3000,
     appVersion: 'v3.2.1',
     manifest: {
       name: 'Test App',
@@ -38,101 +31,137 @@ tap.test('should create a valid Server', async () => {
     feed: true,
     sitemap: true,
     robots: true,
+    serveDir: smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
   });
-  expect(testServer).toBeInstanceOf(typedserver.servertools.Server);
+  expect(testServer).toBeInstanceOf(typedserver.TypedServer);
 });
 
 // ================
-// Test class Route
+// Test addRoute
 // ================
 
-tap.test('should create a valid Route', async () => {
-  testRoute = testServer.addRoute('/someroute');
-  testRoute2 = testServer.addRoute('/someroute/*splat');
-  expect(testRoute).toBeInstanceOf(typedserver.servertools.Route);
-});
-
-// ==================
-// Test class Handler
-// ==================
-
-tap.test('should produce a valid handler', async () => {
-  testHandler = new typedserver.servertools.Handler('POST', (request, response) => {
+tap.test('should add a POST route', async () => {
+  testServer.addRoute('/someroute', 'POST', async (ctx) => {
+    const body = await ctx.json();
     console.log('request body is:');
-    console.log(request.body);
-    response.send('hi');
+    console.log(body);
+    return new Response(JSON.stringify({ message: 'hi', received: body }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
   });
-  expect(testHandler).toBeInstanceOf(typedserver.servertools.Handler);
 });
 
-tap.test('should add handler to route', async () => {
-  testRoute.addHandler(testHandler);
-});
-
-tap.test('should create a valid StaticHandler', async () => {
-  testRoute2.addHandler(
-    new typedserver.servertools.HandlerStatic(
-      smartpath.get.dirnameFromImportMetaUrl(import.meta.url)
-    )
-  );
-});
-
-tap.test('should add typedrequest and typedsocket', async () => {
-  const typedrequest = await import('@api.global/typedrequest');
-
-  const typedrouter = new typedrequest.TypedRouter();
-  testServer.addTypedRequest(typedrouter);
-  testServer.addTypedSocket(typedrouter);
+tap.test('should add a GET route with params', async () => {
+  testServer.addRoute('/users/:id', 'GET', async (ctx) => {
+    const userId = ctx.params.id;
+    return new Response(JSON.stringify({ userId }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  });
 });
 
 // =====================
-// start the server and test the configuration
+// Test typedrouter integration
 // =====================
 
-tap.test('should start the server allright', async () => {
-  await testServer.start(3000);
+tap.test('should have a typedrouter', async () => {
+  expect(testServer.typedrouter).toBeDefined();
 });
 
-// see if a demo request holds up
-tap.test('should issue a request', async (tools) => {
+// =====================
+// Start the server and test
+// =====================
+
+tap.test('should start the server', async () => {
+  await testServer.start();
+});
+
+// Test POST route
+tap.test('should handle a POST request', async () => {
   const smartRequestInstance = smartrequest.SmartRequest.create();
   const response = await smartRequestInstance
     .url('http://127.0.0.1:3000/someroute')
     .headers({
       'X-Forwarded-Proto': 'https',
+      'Content-Type': 'application/json',
     })
     .json({
-      someprop: 'hi',
+      someprop: 'hello world',
     })
     .post();
-  const responseBody = await response.text();
-  console.log(responseBody);
+  const responseBody = await response.json();
+  console.log('POST response:', responseBody);
+  expect(responseBody.message).toEqual('hi');
+  expect(responseBody.received.someprop).toEqual('hello world');
 });
 
-tap.test('should get a file from disk', async () => {
-  const response = await fetch('http://127.0.0.1:3000/someroute/testresponse.js');
-  console.log(response.status);
-  console.log(response.headers);
+// Test GET route with params
+tap.test('should handle a GET request with params', async () => {
+  const response = await fetch('http://127.0.0.1:3000/users/123');
+  const body = await response.json();
+  console.log('GET response:', body);
+  expect(body.userId).toEqual('123');
 });
 
+// Test static file serving
+tap.test('should serve a static file', async () => {
+  const response = await fetch('http://127.0.0.1:3000/test.server.ts');
+  console.log('Static file status:', response.status);
+  expect(response.status).toEqual(200);
+});
+
+// Test CORS preflight
 tap.test('should answer a preflight request', async () => {
   const response = await fetch('http://127.0.0.1:3000/some/randompath/', {
     method: 'OPTIONS',
   });
-  console.log(response.headers);
+  console.log('Preflight headers:', Object.fromEntries(response.headers.entries()));
+  // CORS should return appropriate headers
+  expect(response.headers.get('access-control-allow-origin')).toBeDefined();
 });
 
+// Test sitemap endpoint
 tap.test('should expose a sitemap', async () => {
   const response = await fetch('http://127.0.0.1:3000/sitemap');
-  console.log(await response.text());
+  const text = await response.text();
+  console.log('Sitemap:', text);
+  expect(response.status).toEqual(200);
+});
+
+// Test robots.txt endpoint
+tap.test('should expose robots.txt', async () => {
+  const response = await fetch('http://127.0.0.1:3000/robots.txt');
+  const text = await response.text();
+  console.log('Robots.txt:', text);
+  expect(response.status).toEqual(200);
+});
+
+// Test manifest endpoint
+tap.test('should expose manifest.json', async () => {
+  const response = await fetch('http://127.0.0.1:3000/manifest.json');
+  const json = await response.json();
+  console.log('Manifest:', json);
+  expect(response.status).toEqual(200);
+  expect(json.name).toEqual('Test App');
+});
+
+// Test appversion endpoint
+tap.test('should expose appversion', async () => {
+  const response = await fetch('http://127.0.0.1:3000/appversion');
+  const text = await response.text();
+  console.log('App version:', text);
+  expect(response.status).toEqual(200);
+  expect(text).toEqual('v3.2.1');
 });
 
 // ========
-// clean up
+// Clean up
 // ========
 
 tap.test('should stop the server', async () => {
   await testServer.stop();
 });
 
-tap.start();
+export default tap.start();

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@api.global/typedserver',
-  version: '7.2.0',
+  version: '8.0.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

@@ -1,10 +1,80 @@
 import * as plugins from './plugins.js';
-import * as paths from './paths.js';
 import * as interfaces from '../dist_ts_interfaces/index.js';
 import { DevToolsController } from './controllers/controller.devtools.js';
 import { TypedRequestController } from './controllers/controller.typedrequest.js';
 import { BuiltInRoutesController } from './controllers/controller.builtin.js';
 
+/**
+ * Content Security Policy configuration
+ * Each directive can be a string or array of sources
+ */
+export interface IContentSecurityPolicy {
+  /** Fallback for other directives */
+  defaultSrc?: string | string[];
+  /** Valid sources for scripts */
+  scriptSrc?: string | string[];
+  /** Valid sources for stylesheets */
+  styleSrc?: string | string[];
+  /** Valid sources for images */
+  imgSrc?: string | string[];
+  /** Valid sources for fonts */
+  fontSrc?: string | string[];
+  /** Valid sources for AJAX, WebSockets, etc. */
+  connectSrc?: string | string[];
+  /** Valid sources for media (audio/video) */
+  mediaSrc?: string | string[];
+  /** Valid sources for frames */
+  frameSrc?: string | string[];
+  /** Valid sources for <object>, <embed>, <applet> */
+  objectSrc?: string | string[];
+  /** Valid sources for web workers */
+  workerSrc?: string | string[];
+  /** Valid sources for form actions */
+  formAction?: string | string[];
+  /** Controls which URLs can embed the page */
+  frameAncestors?: string | string[];
+  /** Restricts URLs for <base> element */
+  baseUri?: string | string[];
+  /** Report violations to this URL */
+  reportUri?: string;
+  /** Report violations to this endpoint */
+  reportTo?: string;
+  /** Upgrade insecure requests to HTTPS */
+  upgradeInsecureRequests?: boolean;
+  /** Block all mixed content */
+  blockAllMixedContent?: boolean;
+}
+
+/**
+ * Security headers configuration
+ */
+export interface ISecurityHeaders {
+  /** Content Security Policy */
+  csp?: IContentSecurityPolicy;
+  /** X-Frame-Options: DENY, SAMEORIGIN, or ALLOW-FROM uri */
+  xFrameOptions?: 'DENY' | 'SAMEORIGIN' | string;
+  /** X-Content-Type-Options: nosniff */
+  xContentTypeOptions?: boolean;
+  /** X-XSS-Protection header (legacy, but still useful) */
+  xXssProtection?: boolean | string;
+  /** Referrer-Policy header */
+  referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+  /** Strict-Transport-Security (HSTS) max-age in seconds */
+  hstsMaxAge?: number;
+  /** Include subdomains in HSTS */
+  hstsIncludeSubDomains?: boolean;
+  /** HSTS preload flag */
+  hstsPreload?: boolean;
+  /** Permissions-Policy (formerly Feature-Policy) */
+  permissionsPolicy?: Record<string, string[]>;
+  /** Cross-Origin-Opener-Policy */
+  crossOriginOpenerPolicy?: 'unsafe-none' | 'same-origin-allow-popups' | 'same-origin';
+  /** Cross-Origin-Embedder-Policy */
+  crossOriginEmbedderPolicy?: 'unsafe-none' | 'require-corp' | 'credentialless';
+  /** Cross-Origin-Resource-Policy */
+  crossOriginResourcePolicy?: 'same-site' | 'same-origin' | 'cross-origin';
+}
+
 export interface IServerOptions {
   /**
    * serve a particular directory
@@ -56,20 +126,29 @@ 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;
+
+  /**
+   * Security headers configuration (CSP, HSTS, X-Frame-Options, etc.)
+   */
+  securityHeaders?: ISecurityHeaders;
+
+  /**
+   * Response compression configuration
+   * Set to true for defaults (brotli + gzip), false to disable, or provide detailed config
+   */
+  compression?: plugins.smartserve.ICompressionConfig | boolean;
 }
 
 export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'ALL';
 
 export interface IRouteHandler {
-  (request: Request): Promise<Response | null>;
-}
-
-export interface IRegisteredRoute {
-  pattern: string;
-  regex: RegExp;
-  paramNames: string[];
-  method: THttpMethod;
-  handler: IRouteHandler;
+  (ctx: plugins.smartserve.IRequestContext): Promise<Response | null>;
 }
 
 export class TypedServer {
@@ -94,9 +173,6 @@ export class TypedServer {
   // File server for static files
   private fileServer: plugins.smartserve.FileServer;
 
-  // Custom route handlers (for addRoute API)
-  private customRoutes: IRegisteredRoute[] = [];
-
   public lastReload: number = Date.now();
   public ended = false;
 
@@ -126,50 +202,11 @@ export class TypedServer {
    * Supports Express-style path patterns like '/path/:param' and '/path/*splat'
    * @param path - The route path pattern
    * @param method - HTTP method (GET, POST, PUT, DELETE, PATCH, ALL)
-   * @param handler - Async function that receives Request and returns Response or null
+   * @param handler - Async function that receives IRequestContext and returns Response or null
    */
   public addRoute(path: string, method: THttpMethod, handler: IRouteHandler): void {
-    // Convert Express-style path to regex
-    const paramNames: string[] = [];
-    let regexPattern = path
-      // Handle named parameters :param
-      .replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
-        paramNames.push(paramName);
-        return '([^/]+)';
-      })
-      // Handle wildcard *splat (matches everything including slashes)
-      .replace(/\*([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
-        paramNames.push(paramName);
-        return '(.*)';
-      });
-
-    // Ensure exact match
-    regexPattern = `^${regexPattern}$`;
-
-    this.customRoutes.push({
-      pattern: path,
-      regex: new RegExp(regexPattern),
-      paramNames,
-      method,
-      handler,
-    });
-  }
-
-  /**
-   * Parse route parameters from a path using a registered route
-   */
-  private parseRouteParams(
-    route: IRegisteredRoute,
-    pathname: string
-  ): Record<string, string> | null {
-    const match = pathname.match(route.regex);
-    if (!match) return null;
-
-    const params: Record<string, string> = {};
-    route.paramNames.forEach((name, index) => {
-      params[name] = match[index + 1];
-    });
-    return params;
+    // Delegate to smartserve's ControllerRegistry
+    plugins.smartserve.ControllerRegistry.addRoute(path, method, handler);
   }
 
   /**
@@ -229,6 +266,9 @@ export class TypedServer {
     });
 
     // Register controllers with SmartServe's ControllerRegistry
+    // Note: @Route decorators auto-register classes at import time.
+    // Controllers with constructor args (like DevToolsController) use default no-op
+    // constructors to handle auto-instantiation gracefully.
     if (this.options.injectReload) {
       plugins.smartserve.ControllerRegistry.registerInstance(this.devToolsController);
     }
@@ -242,6 +282,7 @@ export class TypedServer {
     const smartServeOptions: plugins.smartserve.ISmartServeOptions = {
       port,
       hostname: '0.0.0.0',
+      compression: this.options.compression,
       tls:
         this.options.privateKey && this.options.publicKey
           ? {
@@ -252,7 +293,7 @@ export class TypedServer {
       websocket: {
         typedRouter: this.typedrouter,
         onConnectionOpen: (peer) => {
-          peer.tags.add('typedserver_frontend');
+          peer.tags.add('allClients');
           console.log(`WebSocket connected: ${peer.id}`);
         },
         onConnectionClose: (peer) => {
@@ -343,10 +384,10 @@ export class TypedServer {
   /**
    * Create an IRequestContext from a Request
    */
-  private async createContext(
+  private createContext(
     request: Request,
     params: Record<string, string>
-  ): Promise<plugins.smartserve.IRequestContext> {
+  ): plugins.smartserve.IRequestContext {
     const url = new URL(request.url);
     const method = request.method.toUpperCase() as THttpMethod;
 
@@ -356,20 +397,14 @@ export class TypedServer {
       query[key] = value;
     });
 
-    // Parse body
-    let body: unknown = undefined;
-    const contentType = request.headers.get('content-type');
-    if (contentType?.includes('application/json')) {
-      try {
-        body = await request.clone().json();
-      } catch {
-        body = {};
-      }
-    }
+    // Cached body parsers (lazy evaluation)
+    let jsonCache: unknown;
+    let textCache: string;
+    let arrayBufferCache: ArrayBuffer;
+    let formDataCache: FormData;
 
     return {
       request,
-      body,
       params,
       query,
       headers: request.headers,
@@ -378,9 +413,169 @@ export class TypedServer {
       url,
       runtime: 'node' as const,
       state: {},
+      async json<T = unknown>(): Promise<T> {
+        if (jsonCache === undefined) {
+          jsonCache = await request.clone().json();
+        }
+        return jsonCache as T;
+      },
+      async text(): Promise<string> {
+        if (textCache === undefined) {
+          textCache = await request.clone().text();
+        }
+        return textCache;
+      },
+      async arrayBuffer(): Promise<ArrayBuffer> {
+        if (arrayBufferCache === undefined) {
+          arrayBufferCache = await request.clone().arrayBuffer();
+        }
+        return arrayBufferCache;
+      },
+      async formData(): Promise<FormData> {
+        if (formDataCache === undefined) {
+          formDataCache = await request.clone().formData();
+        }
+        return formDataCache;
+      },
     };
   }
 
+  /**
+   * Build CSP header string from configuration
+   */
+  private buildCspHeader(csp: IContentSecurityPolicy): string {
+    const directives: string[] = [];
+
+    const addDirective = (name: string, value: string | string[] | undefined) => {
+      if (value) {
+        const sources = Array.isArray(value) ? value.join(' ') : value;
+        directives.push(`${name} ${sources}`);
+      }
+    };
+
+    addDirective('default-src', csp.defaultSrc);
+    addDirective('script-src', csp.scriptSrc);
+    addDirective('style-src', csp.styleSrc);
+    addDirective('img-src', csp.imgSrc);
+    addDirective('font-src', csp.fontSrc);
+    addDirective('connect-src', csp.connectSrc);
+    addDirective('media-src', csp.mediaSrc);
+    addDirective('frame-src', csp.frameSrc);
+    addDirective('object-src', csp.objectSrc);
+    addDirective('worker-src', csp.workerSrc);
+    addDirective('form-action', csp.formAction);
+    addDirective('frame-ancestors', csp.frameAncestors);
+    addDirective('base-uri', csp.baseUri);
+
+    if (csp.reportUri) {
+      directives.push(`report-uri ${csp.reportUri}`);
+    }
+    if (csp.reportTo) {
+      directives.push(`report-to ${csp.reportTo}`);
+    }
+    if (csp.upgradeInsecureRequests) {
+      directives.push('upgrade-insecure-requests');
+    }
+    if (csp.blockAllMixedContent) {
+      directives.push('block-all-mixed-content');
+    }
+
+    return directives.join('; ');
+  }
+
+  /**
+   * Apply all configured headers (CORS, security) to a response
+   */
+  private applyResponseHeaders(response: Response): Response {
+    const headers = new Headers(response.headers);
+
+    // CORS headers
+    if (this.options.cors) {
+      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');
+    }
+
+    // Security headers
+    const security = this.options.securityHeaders;
+    if (security) {
+      // Content Security Policy
+      if (security.csp) {
+        const cspHeader = this.buildCspHeader(security.csp);
+        if (cspHeader) {
+          headers.set('Content-Security-Policy', cspHeader);
+        }
+      }
+
+      // X-Frame-Options
+      if (security.xFrameOptions) {
+        headers.set('X-Frame-Options', security.xFrameOptions);
+      }
+
+      // X-Content-Type-Options
+      if (security.xContentTypeOptions) {
+        headers.set('X-Content-Type-Options', 'nosniff');
+      }
+
+      // X-XSS-Protection
+      if (security.xXssProtection) {
+        const value = typeof security.xXssProtection === 'string'
+          ? security.xXssProtection
+          : '1; mode=block';
+        headers.set('X-XSS-Protection', value);
+      }
+
+      // Referrer-Policy
+      if (security.referrerPolicy) {
+        headers.set('Referrer-Policy', security.referrerPolicy);
+      }
+
+      // Strict-Transport-Security (HSTS)
+      if (security.hstsMaxAge !== undefined) {
+        let hsts = `max-age=${security.hstsMaxAge}`;
+        if (security.hstsIncludeSubDomains) {
+          hsts += '; includeSubDomains';
+        }
+        if (security.hstsPreload) {
+          hsts += '; preload';
+        }
+        headers.set('Strict-Transport-Security', hsts);
+      }
+
+      // Permissions-Policy
+      if (security.permissionsPolicy) {
+        const policies = Object.entries(security.permissionsPolicy)
+          .map(([feature, allowlist]) => `${feature}=(${allowlist.join(' ')})`)
+          .join(', ');
+        if (policies) {
+          headers.set('Permissions-Policy', policies);
+        }
+      }
+
+      // Cross-Origin-Opener-Policy
+      if (security.crossOriginOpenerPolicy) {
+        headers.set('Cross-Origin-Opener-Policy', security.crossOriginOpenerPolicy);
+      }
+
+      // Cross-Origin-Embedder-Policy
+      if (security.crossOriginEmbedderPolicy) {
+        headers.set('Cross-Origin-Embedder-Policy', security.crossOriginEmbedderPolicy);
+      }
+
+      // Cross-Origin-Resource-Policy
+      if (security.crossOriginResourcePolicy) {
+        headers.set('Cross-Origin-Resource-Policy', security.crossOriginResourcePolicy);
+      }
+    }
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers
+    });
+  }
+
   /**
    * Main request handler - routes to appropriate sub-handlers
    */
@@ -389,11 +584,29 @@ 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.applyResponseHeaders(new Response(null, { status: 204 }));
+    }
+
+    // Process the request and wrap response with all configured headers
+    const response = await this.handleRequestInternal(request, path, method);
+    return this.applyResponseHeaders(response);
+  }
+
+  /**
+   * Internal request handler - routes to appropriate sub-handlers
+   */
+  private async handleRequestInternal(
+    request: Request,
+    path: string,
+    method: THttpMethod
+  ): Promise<Response> {
     // First, try to match via ControllerRegistry (decorated routes)
     const match = plugins.smartserve.ControllerRegistry.matchRoute(path, method);
     if (match) {
       try {
-        const context = await this.createContext(request, match.params);
+        const context = this.createContext(request, match.params);
         const result = await match.route.handler(context);
 
         // Handle Response or convert to Response
@@ -414,18 +627,6 @@ export class TypedServer {
       }
     }
 
-    // Custom routes (registered via addRoute)
-    for (const route of this.customRoutes) {
-      if (route.method === 'ALL' || route.method === method) {
-        const params = this.parseRouteParams(route, path);
-        if (params !== null) {
-          (request as any).params = params;
-          const response = await route.handler(request);
-          if (response) return response;
-        }
-      }
-    }
-
     // HTML injection for reload (if enabled)
     if (this.options.injectReload && this.options.serveDir) {
       const response = await this.handleHtmlWithInjection(request);
@@ -453,6 +654,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 });
   }
@@ -565,6 +801,8 @@ export class TypedServer {
           );
         pushTime.fire({
           time: this.lastReload,
+        }).catch(err => {
+          console.warn('Failed to push latest server change time to client:', err);
         });
       }
     } catch (error) {

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.devtools.ts

@@ -10,9 +10,10 @@ export class DevToolsController {
   private getLastReload: () => number;
   private getEnded: () => boolean;
 
-  constructor(options: { getLastReload: () => number; getEnded: () => boolean }) {
-    this.getLastReload = options.getLastReload;
-    this.getEnded = options.getEnded;
+  constructor(options?: { getLastReload: () => number; getEnded: () => boolean }) {
+    // Default no-op functions for when controller is auto-instantiated without options
+    this.getLastReload = options?.getLastReload ?? (() => 0);
+    this.getEnded = options?.getEnded ?? (() => false);
   }
 
   @plugins.smartserve.Get('/devtools')

ts/controllers/controller.typedrequest.ts

@@ -11,10 +11,11 @@ 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);
+      const body = await ctx.json() as plugins.typedrequestInterfaces.ITypedRequest;
+      const response = await this.typedRouter.routeAndAddResponse(body);
 
       return new Response(plugins.smartjson.stringify(response), {
         status: 200,
@@ -31,4 +32,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,14 +1,32 @@
 import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { type IServerOptions, TypedServer } from '../classes.typedserver.js';
+import { type IServerOptions, type ISecurityHeaders, TypedServer } from '../classes.typedserver.js';
 import * as plugins from '../plugins.js';
-import * as servertools from '../servertools/index.js';
 
 export interface IUtilityWebsiteServerConstructorOptions {
+  /** Custom route handler to add additional routes */
   addCustomRoutes?: (typedserver: TypedServer) => Promise<any>;
+  /** Application semantic version */
   appSemVer?: string;
+  /** Domain name for the website */
   domain: string;
+  /** Directory to serve static files from */
   serveDir: string;
-  feedMetadata: IServerOptions['feedMetadata'];
+  /** RSS feed metadata */
+  feedMetadata?: IServerOptions['feedMetadata'];
+  /** Enable/disable CORS (default: true) */
+  cors?: boolean;
+  /** Enable/disable SPA fallback (default: true) */
+  spaFallback?: boolean;
+  /** Security headers configuration */
+  securityHeaders?: ISecurityHeaders;
+  /** Force SSL redirect (default: false) */
+  forceSsl?: boolean;
+  /** Port to listen on (default: 3000) */
+  port?: number;
+  /** ads.txt entries (only served if configured) */
+  adsTxt?: string[];
+  /** Response compression configuration (default: enabled with brotli + gzip) */
+  compression?: plugins.smartserve.ICompressionConfig | boolean;
 }
 
 /**
@@ -30,14 +48,31 @@ export class UtilityWebsiteServer {
   /**
    * Start the website server
    */
-  public async start(portArg = 3000) {
+  public async start(portArg?: number) {
+    const port = portArg ?? this.options.port ?? 3000;
+
     this.typedserver = new TypedServer({
-      cors: true,
-      injectReload: true,
-      watch: true,
+      // Core settings
+      cors: this.options.cors ?? true,
       serveDir: this.options.serveDir,
       domain: this.options.domain,
-      forceSsl: false,
+      port,
+
+      // Development features
+      injectReload: true,
+      watch: true,
+
+      // SPA support (enabled by default for modern web apps)
+      spaFallback: this.options.spaFallback ?? true,
+
+      // Security
+      forceSsl: this.options.forceSsl ?? false,
+      securityHeaders: this.options.securityHeaders,
+
+      // Compression
+      compression: this.options.compression,
+
+      // PWA manifest
       manifest: {
         name: this.options.domain,
         short_name: this.options.domain,
@@ -47,11 +82,11 @@ export class UtilityWebsiteServer {
         background_color: '#000000',
         scope: '/',
       },
-      port: portArg,
 
-      // features
+      // SEO features
       robots: true,
       sitemap: true,
+      feedMetadata: this.options.feedMetadata,
     });
 
     let lswData: interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo['response'] = {
@@ -59,27 +94,30 @@ 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 () => {
-      const adsTxt =
-        ['google.com, pub-4104137977476459, DIRECT, f08c47fec0942fa0'].join('\n') + '\n';
-      return new Response(adsTxt, {
-        status: 200,
-        headers: { 'Content-Type': 'text/plain' },
+    // ads.txt handler (only if configured)
+    if (this.options.adsTxt && this.options.adsTxt.length > 0) {
+      this.typedserver.addRoute('/ads.txt', 'GET', async () => {
+        const adsTxt = this.options.adsTxt.join('\n') + '\n';
+        return new Response(adsTxt, {
+          status: 200,
+          headers: { 'Content-Type': 'text/plain' },
+        });
       });
-    });
+    }
 
     // Asset broker manifest handler
     this.typedserver.addRoute(
       '/assetbroker/manifest/:manifestAsset',
       'GET',
-      async (request: Request) => {
-        let manifestAssetName = (request as any).params?.manifestAsset;
+      async (ctx) => {
+        let manifestAssetName = ctx.params?.manifestAsset;
         if (manifestAssetName === 'favicon.png') {
           manifestAssetName = `favicon_${this.options.domain
             .replace('.', '')

ts_interfaces/serviceworker.ts

@@ -313,4 +313,329 @@ export interface IRequest_Serviceworker_GetStatus
     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,12 @@ 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';
+
+// Dees-catalog for UI components
+import { DeesContextmenu } from '@design.estate/dees-catalog';
+
 export {
   LitElement,
   html,
@@ -10,6 +16,8 @@ export {
   customElement,
   property,
   state,
+  deesComms,
+  DeesContextmenu,
 };
 
 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,999 @@
+import { LitElement, html, css, property, state, customElement, DeesContextmenu } 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;
+}
+
+/**
+ * Grouped request/response pair by correlationId
+ */
+export interface IGroupedRequest {
+  correlationId: string;
+  method: string;
+  request?: ITypedRequestLogEntry;
+  response?: ITypedRequestLogEntry;
+  timestamp: number;
+  durationMs?: number;
+  hasError: boolean;
+}
+
+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-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);
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .method-stat-card:hover {
+        background: var(--bg-secondary);
+      }
+
+      .method-stat-card.active {
+        background: rgba(99, 102, 241, 0.15);
+        border: 1px solid var(--accent-primary);
+      }
+
+      .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);
+      }
+
+      .correlation-id {
+        font-size: 10px;
+        color: var(--text-tertiary);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      /* Grouped request card */
+      .request-card .request-response-badges {
+        display: flex;
+        gap: var(--space-2);
+        margin-top: var(--space-1);
+      }
+
+      .request-card .status-badge {
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: var(--radius-sm);
+      }
+
+      .status-badge.has-request {
+        background: rgba(251, 191, 36, 0.15);
+        color: var(--accent-warning);
+      }
+
+      .status-badge.has-response {
+        background: rgba(99, 102, 241, 0.15);
+        color: var(--accent-primary);
+      }
+
+      .status-badge.pending {
+        background: rgba(156, 163, 175, 0.15);
+        color: var(--text-tertiary);
+      }
+
+      .btn-show-payload {
+        background: var(--bg-tertiary);
+        border: 1px solid var(--border-default);
+        color: var(--accent-primary);
+        font-size: 11px;
+        padding: var(--space-1) var(--space-2);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        margin-top: var(--space-2);
+      }
+
+      .btn-show-payload:hover {
+        background: var(--accent-primary);
+        color: white;
+      }
+
+      /* Modal styles */
+      .payload-modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.8);
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-4);
+      }
+
+      .payload-modal {
+        background: var(--bg-primary);
+        border-radius: var(--radius-lg);
+        border: 1px solid var(--border-default);
+        width: 100%;
+        max-width: 1400px;
+        height: 90vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--border-default);
+        background: var(--bg-secondary);
+      }
+
+      .modal-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--text-primary);
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      .modal-subtitle {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        margin-top: var(--space-1);
+      }
+
+      .modal-close {
+        background: transparent;
+        border: none;
+        color: var(--text-tertiary);
+        font-size: 24px;
+        cursor: pointer;
+        padding: var(--space-1);
+        line-height: 1;
+      }
+
+      .modal-close:hover {
+        color: var(--text-primary);
+      }
+
+      .modal-body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1px;
+        flex: 1;
+        overflow: hidden;
+        background: var(--border-default);
+      }
+
+      .payload-panel {
+        background: var(--bg-primary);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .payload-panel-header {
+        padding: var(--space-2) var(--space-3);
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border-default);
+        font-size: 12px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      .payload-panel-header .badge {
+        font-size: 10px;
+      }
+
+      .payload-panel-content {
+        flex: 1;
+        overflow: auto;
+        padding: var(--space-3);
+      }
+
+      .payload-json {
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 12px;
+        color: var(--text-secondary);
+        white-space: pre-wrap;
+        word-break: break-all;
+        line-height: 1.5;
+      }
+
+      .payload-empty {
+        color: var(--text-tertiary);
+        font-style: italic;
+        font-size: 12px;
+        padding: var(--space-4);
+        text-align: center;
+      }
+
+      .payload-meta {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        padding: var(--space-2) var(--space-3);
+        border-top: 1px solid var(--border-default);
+        background: var(--bg-tertiary);
+      }
+
+      .payload-error {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--accent-error);
+        padding: var(--space-2) var(--space-3);
+        font-size: 12px;
+        border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+      }
+    `
+  ];
+
+  // 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 isLoadingMore = false;
+
+  // Modal state
+  @state() accessor modalOpen = false;
+  @state() accessor selectedGroup: IGroupedRequest | null = null;
+
+  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 setMethodFilter(method: string): void {
+    // Toggle: clicking the same method clears the filter
+    this.methodFilter = this.methodFilter === method ? '' : method;
+  }
+
+  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 openPayloadModal(group: IGroupedRequest): void {
+    this.selectedGroup = group;
+    this.modalOpen = true;
+  }
+
+  private handleContextMenu(event: MouseEvent, group: IGroupedRequest): void {
+    // Build full message object for copying
+    const fullMessage = {
+      correlationId: group.correlationId,
+      method: group.method,
+      timestamp: group.timestamp,
+      durationMs: group.durationMs,
+      request: group.request ? {
+        direction: group.request.direction,
+        phase: group.request.phase,
+        timestamp: group.request.timestamp,
+        payload: group.request.payload,
+      } : null,
+      response: group.response ? {
+        direction: group.response.direction,
+        phase: group.response.phase,
+        timestamp: group.response.timestamp,
+        durationMs: group.response.durationMs,
+        payload: group.response.payload,
+        error: group.response.error,
+      } : null,
+    };
+
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'Copy Full Message',
+        iconName: 'copy',
+        action: async () => {
+          await navigator.clipboard.writeText(JSON.stringify(fullMessage, null, 2));
+        },
+      },
+      {
+        name: 'Copy Request Payload',
+        iconName: 'upload',
+        disabled: !group.request,
+        action: async () => {
+          if (group.request) {
+            await navigator.clipboard.writeText(JSON.stringify(group.request.payload, null, 2));
+          }
+        },
+      },
+      {
+        name: 'Copy Response Payload',
+        iconName: 'download',
+        disabled: !group.response,
+        action: async () => {
+          if (group.response) {
+            await navigator.clipboard.writeText(JSON.stringify(group.response.payload, null, 2));
+          }
+        },
+      },
+      { divider: true },
+      {
+        name: 'Copy Correlation ID',
+        iconName: 'hash',
+        action: async () => {
+          await navigator.clipboard.writeText(group.correlationId);
+        },
+      },
+      {
+        name: 'Copy Method Name',
+        iconName: 'tag',
+        action: async () => {
+          await navigator.clipboard.writeText(group.method);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Filter by Method',
+        iconName: 'filter',
+        action: async () => {
+          this.setMethodFilter(group.method);
+        },
+      },
+      {
+        name: 'Show Payload',
+        iconName: 'eye',
+        action: async () => {
+          this.openPayloadModal(group);
+        },
+      },
+    ]);
+  }
+
+  private closeModal(): void {
+    this.modalOpen = false;
+    this.selectedGroup = null;
+  }
+
+  private handleModalOverlayClick(e: Event): void {
+    if ((e.target as HTMLElement).classList.contains('payload-modal-overlay')) {
+      this.closeModal();
+    }
+  }
+
+  private handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape' && this.modalOpen) {
+      this.closeModal();
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this.handleKeydown);
+  }
+
+  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;
+  }
+
+  /**
+   * Group filtered logs by correlationId to show request/response pairs together
+   */
+  private getGroupedLogs(): IGroupedRequest[] {
+    const filtered = this.getFilteredLogs();
+    const groups = new Map<string, IGroupedRequest>();
+
+    for (const log of filtered) {
+      let group = groups.get(log.correlationId);
+
+      if (!group) {
+        group = {
+          correlationId: log.correlationId,
+          method: log.method,
+          timestamp: log.timestamp,
+          hasError: false,
+        };
+        groups.set(log.correlationId, group);
+      }
+
+      if (log.phase === 'request') {
+        group.request = log;
+        // Update timestamp to the earliest (request time)
+        if (log.timestamp < group.timestamp) {
+          group.timestamp = log.timestamp;
+        }
+      } else if (log.phase === 'response') {
+        group.response = log;
+        if (log.durationMs !== undefined) {
+          group.durationMs = log.durationMs;
+        }
+      }
+
+      if (log.error) {
+        group.hasError = true;
+      }
+    }
+
+    // Convert to array and sort by timestamp (newest first)
+    return Array.from(groups.values()).sort((a, b) => b.timestamp - a.timestamp);
+  }
+
+  /**
+   * Render the payload modal
+   */
+  private renderModal(): TemplateResult | null {
+    if (!this.modalOpen || !this.selectedGroup) {
+      return null;
+    }
+
+    const group = this.selectedGroup;
+
+    return html`
+      <div class="payload-modal-overlay" @click="${this.handleModalOverlayClick}">
+        <div class="payload-modal">
+          <div class="modal-header">
+            <div>
+              <div class="modal-title">${group.method}</div>
+              <div class="modal-subtitle">
+                Correlation ID: ${group.correlationId}
+                ${group.durationMs !== undefined ? html` | Duration: ${this.formatDuration(group.durationMs)}` : ''}
+              </div>
+            </div>
+            <button class="modal-close" @click="${this.closeModal}">&times;</button>
+          </div>
+          <div class="modal-body">
+            <!-- Request Panel (Left) -->
+            <div class="payload-panel">
+              <div class="payload-panel-header">
+                <span class="badge phase-request">REQUEST</span>
+                ${group.request ? html`
+                  <span class="badge direction-${group.request.direction}">${group.request.direction}</span>
+                ` : ''}
+              </div>
+              ${group.request ? html`
+                <div class="payload-meta">
+                  Timestamp: ${this.formatTimestamp(group.request.timestamp)}
+                </div>
+                <div class="payload-panel-content">
+                  <pre class="payload-json">${JSON.stringify(group.request.payload, null, 2)}</pre>
+                </div>
+              ` : html`
+                <div class="payload-empty">No request data captured</div>
+              `}
+            </div>
+
+            <!-- Response Panel (Right) -->
+            <div class="payload-panel">
+              <div class="payload-panel-header">
+                <span class="badge phase-response">RESPONSE</span>
+                ${group.response ? html`
+                  <span class="badge direction-${group.response.direction}">${group.response.direction}</span>
+                ` : ''}
+              </div>
+              ${group.response?.error ? html`
+                <div class="payload-error">Error: ${group.response.error}</div>
+              ` : ''}
+              ${group.response ? html`
+                <div class="payload-meta">
+                  Timestamp: ${this.formatTimestamp(group.response.timestamp)}
+                  ${group.response.durationMs !== undefined ? html` | Duration: ${this.formatDuration(group.response.durationMs)}` : ''}
+                </div>
+                <div class="payload-panel-content">
+                  <pre class="payload-json">${JSON.stringify(group.response.payload, null, 2)}</pre>
+                </div>
+              ` : html`
+                <div class="payload-empty">No response yet (pending)</div>
+              `}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    const groupedLogs = this.getGroupedLogs();
+
+    return html`
+      ${this.renderModal()}
+
+      <!-- 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">${groupedLogs.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 ${this.methodFilter === method ? 'active' : ''}"
+                @click="${() => this.setMethodFilter(method)}"
+              >
+                <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" .value="${this.methodFilter}" @change="${this.handleMethodFilterChange}">
+            <option value="">All Methods</option>
+            ${this.methods.map(m => html`<option value="${m}" ?selected="${this.methodFilter === 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 (Grouped by correlationId) -->
+      ${this.logs.length === 0 ? html`
+        <div class="empty-state">No request logs found. Traffic will appear here as TypedRequests are made.</div>
+      ` : groupedLogs.length === 0 ? html`
+        <div class="empty-state">No logs match filter</div>
+      ` : html`
+        <div class="requests-list">
+          ${groupedLogs.map(group => html`
+            <div
+              class="request-card ${group.hasError ? 'has-error' : ''}"
+              @contextmenu="${(e: MouseEvent) => this.handleContextMenu(e, group)}"
+            >
+              <div class="request-header">
+                <div>
+                  <div class="request-badges">
+                    ${group.request ? html`
+                      <span class="badge direction-${group.request.direction}">${group.request.direction}</span>
+                    ` : ''}
+                    ${group.hasError ? html`<span class="badge error">error</span>` : ''}
+                  </div>
+                  <div class="method-name">${group.method}</div>
+                  <div class="correlation-id">${group.correlationId}</div>
+                  <div class="request-response-badges">
+                    <span class="status-badge ${group.request ? 'has-request' : 'pending'}">
+                      ${group.request ? 'REQ' : 'REQ pending'}
+                    </span>
+                    <span class="status-badge ${group.response ? 'has-response' : 'pending'}">
+                      ${group.response ? 'RES' : 'RES pending'}
+                    </span>
+                  </div>
+                </div>
+                <div class="request-meta">
+                  <span class="request-time">${this.formatTimestamp(group.timestamp)}</span>
+                  ${group.durationMs !== undefined ? html`
+                    <span class="request-duration ${this.getDurationClass(group.durationMs)}">
+                      ${this.formatDuration(group.durationMs)}
+                    </span>
+                  ` : ''}
+                </div>
+              </div>
+
+              ${group.response?.error ? html`
+                <div class="request-error">${group.response.error}</div>
+              ` : ''}
+
+              <button class="btn-show-payload" @click="${() => this.openPayloadModal(group)}">
+                Show Payload
+              </button>
+            </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

@@ -5,6 +5,9 @@ logger.log('info', `TypedServer-Devtools initialized!`);
 
 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;
@@ -18,6 +21,7 @@ export class ReloadChecker {
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
   private swStatusUnsubscribe: (() => void) | null = null;
+  private trafficLoggingEnabled = false;
 
   constructor() {
     // Listen to browser online/offline events
@@ -240,6 +244,9 @@ export class ReloadChecker {
         }
       });
       logger.log('success', `ReloadChecker connected through typedsocket!`);
+
+      // Enable traffic logging for sw-dash
+      this.enableTrafficLogging();
     }
   }
 
@@ -268,6 +275,52 @@ export class ReloadChecker {
       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 serviceworker_* methods to avoid infinite loops
+      // These are internal SW communication methods, not app traffic
+      if (entry.method.startsWith('serviceworker_')) {
+        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_serviceworker/classes.backend.ts

@@ -3,6 +3,8 @@ 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 {
@@ -46,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']>;
@@ -90,6 +113,80 @@ export class ServiceworkerBackend {
       };
     });
 
+    // 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();
 
@@ -102,9 +199,10 @@ export class ServiceworkerBackend {
    */
   private setupEventBusSubscriptions(): void {
     const eventBus = getEventBus();
+    const persistentStore = getPersistentStore();
 
     // Network status changes
-    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, () => {
+    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, async () => {
       this.broadcastStatusUpdate({
         source: 'network',
         type: 'online',
@@ -112,9 +210,11 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('network_online', 'Network connection restored');
     });
 
-    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, () => {
+    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, async () => {
       this.broadcastStatusUpdate({
         source: 'network',
         type: 'offline',
@@ -122,10 +222,12 @@ export class ServiceworkerBackend {
         persist: true,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('network_offline', 'Network connection lost');
     });
 
     // Update events
-    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'update',
@@ -136,9 +238,13 @@ export class ServiceworkerBackend {
         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, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'update',
@@ -149,9 +255,13 @@ export class ServiceworkerBackend {
         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, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'error',
@@ -159,6 +269,10 @@ export class ServiceworkerBackend {
         persist: true,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('error', `Update error: ${payload.error || 'Unknown error'}`, {
+        error: payload.error,
+      });
     });
 
     // Cache invalidation
@@ -170,6 +284,7 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Note: cache_invalidated event is logged in the ServiceWorker class
     });
 
     // Lifecycle events
@@ -181,6 +296,7 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Note: sw_activated event is logged in the ServiceWorker class
     });
   }
 
@@ -189,17 +305,24 @@ export class ServiceworkerBackend {
    */
   public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
     try {
-      await this.deesComms.postMessage({
-        method: 'serviceworker_statusUpdate',
-        request: status,
-        messageId: `sw_status_${Date.now()}`
-      });
+      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}`);
+    }
+  }
+
   /**
    * Start periodic updates of connected client count
    */
@@ -235,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' });
@@ -302,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,233 @@
+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
+   * Rejects entries for serviceworker_* methods to prevent pollution from SW internal messages
+   */
+  public addEntry(entry: interfaces.serviceworker.ITypedRequestLogEntry): void {
+    // Reject serviceworker_* methods - these are internal SW messages, not app traffic
+    // This prevents infinite loop pollution if hooks bypass somehow
+    if (entry.method && entry.method.startsWith('serviceworker_')) {
+      logger.log('note', `Rejecting serviceworker_* entry: ${entry.method}`);
+      return;
+    }
+
+    // Also reject entries with deeply nested payloads (sign of previous loop corruption)
+    if (this.hasNestedServiceworkerPayload(entry)) {
+      logger.log('warn', `Rejecting corrupted entry with nested serviceworker_* payload`);
+      return;
+    }
+
+    // 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);
+  }
+
+  /**
+   * Check if an entry has nested serviceworker_* methods in its payload (corruption from old loops)
+   */
+  private hasNestedServiceworkerPayload(entry: interfaces.serviceworker.ITypedRequestLogEntry, depth = 0): boolean {
+    // Limit recursion depth to prevent stack overflow
+    if (depth > 3) return false;
+
+    const payload = entry.payload;
+    if (!payload || typeof payload !== 'object') return false;
+
+    // Check if payload looks like a TypedRequest log entry with serviceworker_* method
+    if (payload.method && typeof payload.method === 'string' && payload.method.startsWith('serviceworker_')) {
+      return true;
+    }
+
+    // Check nested payload
+    if (payload.payload) {
+      return this.hasNestedServiceworkerPayload({ ...entry, payload: payload.payload }, depth + 1);
+    }
+
+    return false;
+  }
+
+  /**
+   * 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
@@ -30,6 +31,7 @@ export class ServiceWorker {
   // TypedSocket connection for server communication
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
+  private handlersInitialized = false;
 
   constructor(selfArg: interfaces.ServiceWindow) {
     logger.log('info', `Service worker instantiating at ${Date.now()}`);
@@ -63,6 +65,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 +94,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 +111,44 @@ 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();
+    }
+  }
+
+  /**
+   * Initialize typed handlers (idempotent - safe to call multiple times)
+   */
+  private initHandlers(): void {
+    if (this.handlersInitialized) return;
+    this.handlersInitialized = true;
+
+    // Register handler for cache invalidation from server
+    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();
+        return { success: true };
+      })
+    );
   }
 
   /**
@@ -101,16 +156,7 @@ export class ServiceWorker {
    */
   private async connectToServer(): Promise<void> {
     try {
-      // Register handler for cache invalidation from server
-      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}`);
-          await this.cacheManager.cleanCaches(reqArg.reason);
-          // Notify all clients to reload
-          await this.leleServiceWorkerBackend.triggerReloadAll();
-          return { success: true };
-        })
-      );
+      this.initHandlers();
 
       // Connect to server via TypedSocket
       this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(

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

@@ -191,4 +191,89 @@ 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');
+      tr.skipHooks = true; // Prevent infinite loops - don't log the logging request
+      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)');
+    };
+  }
 }

ts_web_serviceworker_client/classes.globalsw.ts

@@ -1,5 +1,6 @@
 import * as plugins from './plugins.js';
 import { ServiceworkerClient } from './classes.serviceworkerclient.js';
+import { ActionManager } from './classes.actionmanager.js';
 
 export class GlobalSW {
   losslessSw: ServiceworkerClient;
@@ -8,6 +9,13 @@ export class GlobalSW {
     globalThis.globalSw = this;
   };
 
+  /**
+   * Exposes the action manager for traffic logging and SW communication
+   */
+  public get actionManager(): ActionManager {
+    return this.losslessSw.actionManager;
+  }
+
   /**
    * purges the cache of the app's serviceworker
    * @returns