v7.4.0

feat(serviceworker): Add persistent event store, cumulative metrics and dashboard events UI for service worker observability
v7.3.0
2025-12-04 15:13:48 +00:00 · 2025-12-04 15:13:48 +00:00 · 2025-12-04 14:36:35 +00:00 · 2025-12-04 14:36:35 +00:00 · 2025-12-04 14:09:10 +00:00 · 2025-12-04 14:09:10 +00:00
28 changed files with 3799 additions and 829 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,79 @@
 # Changelog

+## 2025-12-04 - 7.4.0 - feat(serviceworker)
+Add persistent event store, cumulative metrics and dashboard events UI for service worker observability
+
+- Add PersistentStore (ts_web_serviceworker/classes.persistentstore.ts) to persist event log and cumulative metrics with retention policy and periodic saving.
+- Introduce persistent event types and interfaces for event log and cumulative metrics (ts_interfaces/serviceworker.ts).
+- Log lifecycle, update, network and speedtest events to the persistent store (install, activate, update available/applied/error, network online/offline, speedtest started/completed/failed, cache invalidation).
+- Expose persistent-store APIs via typed handlers in the service worker backend: serviceworker_getEventLog, serviceworker_getCumulativeMetrics, serviceworker_clearEventLog, serviceworker_getEventCount.
+- Serve new dashboard endpoints from the service worker: /sw-dash/events (GET), /sw-dash/events/count (GET), /sw-dash/cumulative-metrics (GET) and DELETE /sw-dash/events to clear the log (handled in classes.cachemanager and classes.dashboard).
+- Add sw-dash events panel component (ts_swdash/sw-dash-events.ts) and integrate an Events tab into the dashboard UI (ts_swdash/sw-dash-app.ts, sw-dash-overview.ts shows 1h event count).
+- Reset cumulative metrics on cache invalidation and increment swRestartCount on PersistentStore.init().
+- Record speedtest lifecycle events (started/completed/failed) and include details in the event log.
+
+## 2025-12-04 - 7.3.0 - feat(serviceworker)
+Modernize SW dashboard UI and improve service worker backend and server tooling
+
+- Revamped sw-dash UI: new header/logo, uptime badge, live auto-refresh indicator, reorganized panels and improved speedtest UI and controls
+- Shared styles overhaul: new theming variables, spacing scale, badges, refined progress/pulse animations and cleaner typography
+- Dashboard internals: metrics endpoint and SPA shell updated; Lit bundle loading and table sort icon changed to ↑/↓
+- Service worker: added request deduplication (in-flight request coalescing), safer caching logic, consistent CORS/caching headers, and cache revalidation
+- Metrics: richer MetricsCollector with per-resource tracking, domain/content-type stats, speedtest metrics and better summary/stat helpers
+- Update & network managers: rate-limited update checks, debounced update/revalidation tasks, online/offline checks and improved retry/backoff logic
+- TypedServer & tooling: addRoute API for custom routes, improved HTML reload script injection, TypedSocket integration and a backend speedtest handler
+- servertools: improved static/proxy handlers (more robust path extraction, compression handling) and deprecation notice for addTypedSocket()
+
+## 2025-12-04 - 7.2.0 - feat(serviceworker)
+Add service worker status updates, EventBus and UI status pill for realtime observability
+
+- Introduce a status update protocol for service worker <-> clients (IStatusUpdate, IMessage_Serviceworker_StatusUpdate, IRequest_Serviceworker_GetStatus).
+- Add typedserver-statuspill Lit component to display backend/serviceworker/network status in the UI, with expand/collapse details and persistent/error states.
+- Wire ReloadChecker to use the new status pill: show network/backend/serviceworker status, handle online/offline events, and subscribe to service worker status broadcasts.
+- Extend ActionManager (client) with subscribeToStatusUpdates and getServiceWorkerStatus helpers; forward serviceworker_statusUpdate broadcasts to registered callbacks.
+- Serviceworker backend: add serviceworker_getStatus handler and broadcastStatusUpdate API; subscribe to EventBus lifecycle/network/update events to broadcast status changes to clients.
+- Add EventBus for decoupled service worker internal events (ServiceWorkerEvent enum, pub/sub API, history and convenience emitters).
+- Ensure proper subscribe/unsubscribe lifecycle (ReloadChecker stops SW subscription on stop).
+- Improve cache/connection status reporting integration so status updates include details like cacheHitRate, resourceCount and connected clients.
+
+## 2025-12-04 - 7.1.0 - feat(swdash)
+Add live speedtest progress UI to service worker dashboard
+
+- Introduce reactive speedtest state (phase, progress, elapsed) in sw-dash-overview component
+- Start a progress interval to animate overall test progress and estimate phases (latency, download, upload)
+- Dispatch 'speedtest-complete' event and show a brief complete state before resetting UI
+- Add helper methods for phase labels and elapsed time formatting
+- Add CSS for progress bar, shimmer animation and phase pulse to sw-dash-styles
+
+## 2025-12-04 - 7.0.0 - BREAKING CHANGE(serviceworker)
+Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract
+
+- Change speedtest protocol to time-based chunk transfers: new request types 'download_chunk' and 'upload_chunk' plus 'latency'. Clients should call chunk requests in a loop for the desired test duration.
+- IRequest_Serviceworker_Speedtest interface updated: request fields renamed/changed (chunkSizeKB, payload) and response no longer includes durationMs or speedMbps — server now returns bytesTransferred, timestamp, and optional payload.
+- TypedServer speedtest handler updated to support 'download_chunk' and 'upload_chunk' semantics and to return bytesTransferred/timestamp/payload only (removed server-side duration/speed calculation).
+- Dashboard runSpeedtest now performs time-based tests (TEST_DURATION_MS = 5000, CHUNK_SIZE_KB = 64) by repeatedly requesting chunks and computing throughput on the client side.
+- Documentation/comments updated to clarify new speedtest behavior and default chunk sizes.
+
+## 2025-12-04 - 6.8.1 - fix(web_serviceworker)
+Move service worker initialization to init.ts and remove exports from service worker entrypoint to avoid ESM bundle output
+
+- Remove exports from ts_web_serviceworker/index.ts so the service worker entrypoint does not export symbols (prevents tsbundle from producing ESM output).
+- Add ts_web_serviceworker/init.ts which initializes the ServiceWorker instance and exports getServiceWorkerInstance() for internal imports.
+- Update ts_web_serviceworker/classes.dashboard.ts to import getServiceWorkerInstance from init.ts instead of index.ts.
+
+## 2025-12-04 - 6.8.0 - feat(swdash)
+Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
+
+- Add a new sw-dash frontend (ts_swdash) implemented with Lit: sw-dash-app, sw-dash-overview, sw-dash-urls, sw-dash-domains, sw-dash-types, sw-dash-table, shared styles and plugin shims.
+- Wire sw-dash into build pipeline and packaging: add ts_swdash bundle to npm build script and include ts_swdash in package files.
+- Serve the dashboard bundle: add paths (swdashBundleDir / swdashBundlePath) and a built-in route (/sw-dash/bundle.js) in BuiltInRoutesController.
+- Simplify service-worker dashboard HTML output to a minimal shell that mounts <sw-dash-app> and loads the module /sw-dash/bundle.js (reduces inline HTML/CSS/JS duplication).
+- Lazy-load service worker bundle and source map in servertools.tools.serviceworker and expose /sw-typedrequest endpoints for SW typed requests (including speedtest handler).
+- Enhance compression utilities and static serving: Compressor now caches compressed results, prioritizes preferred compression methods, provides safer zlib calls, and exposes createCompressionStream; HandlerStatic gained improved path resolution, Express 5 wildcard handling and optional compression flow.
+- Improve proxy/static handler path handling to be compatible with Express 5 wildcard parameters and more robust fallback logic.
+- Deprecate Server.addTypedSocket (no-op) and document recommended SmartServe/TypedServer integration for WebSocket support.
+- Various minor packaging/path updates (paths.ts, plugins exports) to support the new dashboard and bundles.
+
 ## 2025-12-04 - 6.7.0 - feat(web_serviceworker)
 Add per-resource metrics and request deduplication to service worker cache manager

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@api.global/typedserver",
-  "version": "6.7.0",
+  "version": "7.4.0",
  "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
  "type": "module",
  "exports": {
@@ -15,7 +15,7 @@
  "scripts": {
    "test": "npm run build && tstest test/ --verbose --logfile --timeout 60",
    "build": "tsbuild tsfolders --web --allowimplicitany && npm run bundle",
-    "bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js",
+    "bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js && tsbundle --from ./ts_swdash/index.ts --to ./dist_ts_swdash/bundle.js",
    "interfaces": "tsbuild interfaces --web --allowimplicitany --skiplibcheck",
    "docs": "tsdoc aidoc"
  },
@@ -47,6 +47,7 @@
  "files": [
    "ts/**/*",
    "ts_web/**/*",
+    "ts_swdash/**/*",
    "dist/**/*",
    "dist_*/**/*",
    "dist_ts/**/*",
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@api.global/typedserver',
-  version: '6.7.0',
+  version: '7.4.0',
  description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }
--- a/ts/classes.typedserver.ts
+++ b/ts/classes.typedserver.ts
@@ -308,31 +308,31 @@ export class TypedServer {
      );

      // Speedtest handler for service worker dashboard
+      // Client calls this in a loop for the test duration to get accurate time-based measurements
      this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
        new plugins.typedrequest.TypedHandler('serviceworker_speedtest', async (reqArg) => {
-          const startTime = Date.now();
-          const payloadSizeKB = reqArg.payloadSizeKB || 100;
-          const sizeBytes = payloadSizeKB * 1024;
+          const chunkSizeKB = reqArg.chunkSizeKB || 64;
+          const sizeBytes = chunkSizeKB * 1024;
          let payload: string | undefined;
          let bytesTransferred = 0;

          switch (reqArg.type) {
-            case 'download':
+            case 'download_chunk':
+              // Generate chunk data for download test
              payload = 'x'.repeat(sizeBytes);
              bytesTransferred = sizeBytes;
              break;
-            case 'upload':
+            case 'upload_chunk':
+              // Acknowledge received upload data
              bytesTransferred = reqArg.payload?.length || 0;
              break;
            case 'latency':
-              bytesTransferred = 1;
+              // Simple ping - minimal data
+              bytesTransferred = 0;
              break;
          }

-          const durationMs = Date.now() - startTime;
-          const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
-
-          return { durationMs, bytesTransferred, speedMbps, timestamp: Date.now(), payload };
+          return { bytesTransferred, timestamp: Date.now(), payload };
        })
      );
    } catch (error) {
--- a/ts/controllers/controller.builtin.ts
+++ b/ts/controllers/controller.builtin.ts
@@ -1,4 +1,5 @@
 import * as plugins from '../plugins.js';
+import * as paths from '../paths.js';

 /**
 * Built-in routes controller for TypedServer
@@ -122,4 +123,25 @@ export class BuiltInRoutesController {
      headers: { 'Content-Type': 'text/plain' },
    });
  }
+
+  @plugins.smartserve.Get('/sw-dash/bundle.js')
+  async getSwDashBundle(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
+    try {
+      const bundleContent = (await plugins.fsInstance
+        .file(paths.swdashBundlePath)
+        .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 sw-dash bundle:', error);
+      return new Response('SW-Dash bundle not found', { status: 404 });
+    }
+  }
 }
--- a/ts/paths.ts
+++ b/ts/paths.ts
@@ -8,4 +8,7 @@ export const packageDir = plugins.path.join(
 export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inject');
 export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');

-export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+
+export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
+export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');
--- a/ts/servertools/tools.serviceworker.ts
+++ b/ts/servertools/tools.serviceworker.ts
@@ -84,43 +84,36 @@ export const addServiceWorkerRoute = (
        )
      );

-      // Speedtest handler for measuring connection speed
+      // 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 startTime = Date.now();
-            const payloadSizeKB = reqArg.payloadSizeKB || 100;
-            const sizeBytes = payloadSizeKB * 1024;
+            const chunkSizeKB = reqArg.chunkSizeKB || 64;
+            const sizeBytes = chunkSizeKB * 1024;
            let payload: string | undefined;
            let bytesTransferred = 0;

            switch (reqArg.type) {
-              case 'download':
-                // Generate random payload for download test
+              case 'download_chunk':
+                // Generate chunk payload for download test
                payload = 'x'.repeat(sizeBytes);
                bytesTransferred = sizeBytes;
                break;
-              case 'upload':
+              case 'upload_chunk':
                // For upload, measure bytes received from client
                bytesTransferred = reqArg.payload?.length || 0;
                break;
              case 'latency':
-                // Minimal payload for latency test
-                bytesTransferred = 1;
+                // Simple ping - no payload needed
+                bytesTransferred = 0;
                break;
            }

-            const durationMs = Date.now() - startTime;
-            // Speed in Mbps: (bytes * 8 bits/byte) / (ms * 1000 to get seconds) / 1,000,000 for Mbps
-            const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
-
            return {
-              durationMs,
              bytesTransferred,
-              speedMbps,
              timestamp: Date.now(),
-              payload, // Only for download tests
+              payload, // Only for download_chunk tests
            };
          }
        )
--- a/ts_interfaces/serviceworker.ts
+++ b/ts_interfaces/serviceworker.ts
@@ -215,6 +215,14 @@ export interface IRequest_Serviceworker_CacheInvalidate

 /**
 * Speedtest request between service worker and backend
+ *
+ * Types:
+ * - 'latency': Simple ping to measure round-trip time
+ * - 'download_chunk': Request a chunk of data (64KB default)
+ * - 'upload_chunk': Send a chunk of data to server
+ *
+ * The client runs a loop calling download_chunk or upload_chunk
+ * until the desired test duration (e.g., 5 seconds) elapses.
 */
 export interface IRequest_Serviceworker_Speedtest
  extends plugins.typedrequestInterfaces.implementsTR<
@@ -223,15 +231,209 @@ export interface IRequest_Serviceworker_Speedtest
  > {
  method: 'serviceworker_speedtest';
  request: {
-    type: 'download' | 'upload' | 'latency';
-    payloadSizeKB?: number;  // Size of test payload in KB (default: 100)
-    payload?: string;        // For upload tests, the payload to send
+    type: 'latency' | 'download_chunk' | 'upload_chunk';
+    chunkSizeKB?: number;    // Size of chunk in KB (default: 64)
+    payload?: string;        // For upload_chunk, the data to send
  };
  response: {
-    durationMs: number;
    bytesTransferred: number;
-    speedMbps: number;
    timestamp: number;
-    payload?: string;        // For download tests, the payload received
+    payload?: string;        // For download_chunk, the data received
+  };
+}
+
+// ===============
+// Status update interfaces
+// ===============
+
+/**
+ * Status update source types
+ */
+export type TStatusSource = 'backend' | 'serviceworker' | 'network';
+
+/**
+ * Status update event types
+ */
+export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
+
+/**
+ * Status update details
+ */
+export interface IStatusDetails {
+  version?: string;
+  cacheHitRate?: number;
+  resourceCount?: number;
+  connectionType?: string;
+  latencyMs?: number;
+  message?: string;
+}
+
+/**
+ * Status update payload sent from SW to clients
+ */
+export interface IStatusUpdate {
+  source: TStatusSource;
+  type: TStatusType;
+  message: string;
+  details?: IStatusDetails;
+  persist?: boolean;  // Stay visible until resolved
+  timestamp: number;
+}
+
+/**
+ * Message for status updates from service worker to clients
+ */
+export interface IMessage_Serviceworker_StatusUpdate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_StatusUpdate
+  > {
+  method: 'serviceworker_statusUpdate';
+  request: IStatusUpdate;
+  response: {};
+}
+
+/**
+ * Request to get current service worker status
+ */
+export interface IRequest_Serviceworker_GetStatus
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetStatus
+  > {
+  method: 'serviceworker_getStatus';
+  request: {};
+  response: {
+    isActive: boolean;
+    isOnline: boolean;
+    version?: string;
+    cacheHitRate: number;
+    resourceCount: number;
+    connectionType?: string;
+    connectedClients: number;
+    lastUpdateCheck: number;
+  };
+}
+
+// ===============
+// Persistent Store interfaces
+// ===============
+
+/**
+ * Event types for the persistent event log
+ */
+export type TEventType =
+  | 'sw_installed'
+  | 'sw_activated'
+  | 'sw_updated'
+  | 'sw_stopped'
+  | 'speedtest_started'
+  | 'speedtest_completed'
+  | 'speedtest_failed'
+  | 'backend_connected'
+  | 'backend_disconnected'
+  | 'cache_invalidated'
+  | 'network_online'
+  | 'network_offline'
+  | 'update_check'
+  | 'error';
+
+/**
+ * Event log entry structure
+ * Survives both SW restarts AND cache invalidation
+ */
+export interface IEventLogEntry {
+  id: string;
+  timestamp: number;
+  type: TEventType;
+  message: string;
+  details?: Record<string, any>;
+}
+
+/**
+ * Cumulative metrics that persist across SW restarts
+ * Reset on cache invalidation
+ */
+export interface ICumulativeMetrics {
+  firstSeenTimestamp: number;
+  totalCacheHits: number;
+  totalCacheMisses: number;
+  totalCacheErrors: number;
+  totalBytesServedFromCache: number;
+  totalBytesFetched: number;
+  totalNetworkRequests: number;
+  totalNetworkSuccesses: number;
+  totalNetworkFailures: number;
+  totalNetworkTimeouts: number;
+  totalBytesTransferred: number;
+  totalUpdateChecks: number;
+  totalUpdatesApplied: number;
+  totalSpeedtests: number;
+  swRestartCount: number;
+  lastUpdatedTimestamp: number;
+}
+
+/**
+ * Request to get event log from service worker
+ */
+export interface IRequest_Serviceworker_GetEventLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetEventLog
+  > {
+  method: 'serviceworker_getEventLog';
+  request: {
+    limit?: number;
+    type?: TEventType;
+    since?: number;
+  };
+  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;
  };
 }
--- a/ts_swdash/index.ts
+++ b/ts_swdash/index.ts
@@ -0,0 +1,13 @@
+// SW-Dash: Service Worker Dashboard
+// Entry point for the Lit-based dashboard application
+
+// Import the main app component (which imports all others)
+import './sw-dash-app.js';
+
+// Export components for external use if needed
+export { SwDashApp } from './sw-dash-app.js';
+export { SwDashOverview } from './sw-dash-overview.js';
+export { SwDashTable } from './sw-dash-table.js';
+export { SwDashUrls } from './sw-dash-urls.js';
+export { SwDashDomains } from './sw-dash-domains.js';
+export { SwDashTypes } from './sw-dash-types.js';
--- a/ts_swdash/plugins.ts
+++ b/ts_swdash/plugins.ts
@@ -0,0 +1,15 @@
+// Lit imports
+import { LitElement, html, css } from 'lit';
+import type { CSSResult, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+export {
+  LitElement,
+  html,
+  css,
+  customElement,
+  property,
+  state,
+};
+
+export type { CSSResult, TemplateResult };
--- a/ts_swdash/sw-dash-app.ts
+++ b/ts_swdash/sw-dash-app.ts
@@ -0,0 +1,277 @@
+import { LitElement, html, css, state, customElement } 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 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-table.js';
+
+type ViewType = 'overview' | 'urls' | 'domains' | 'types' | 'events';
+
+interface IResourceData {
+  resources: ICachedResource[];
+  domains: IDomainStats[];
+  contentTypes: IContentTypeStats[];
+  resourceCount: number;
+}
+
+/**
+ * Main SW Dashboard application shell
+ */
+@customElement('sw-dash-app')
+export class SwDashApp extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    terminalStyles,
+    navStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--bg-primary);
+        min-height: 100vh;
+        padding: var(--space-5);
+      }
+
+      .view {
+        display: none;
+      }
+
+      .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; }
+      }
+    `
+  ];
+
+  @state() accessor currentView: ViewType = 'overview';
+  @state() accessor metrics: IMetricsData | null = null;
+  @state() accessor resourceData: IResourceData = {
+    resources: [],
+    domains: [],
+    contentTypes: [],
+    resourceCount: 0
+  };
+  @state() accessor lastRefresh = new Date().toLocaleTimeString();
+
+  private refreshInterval: ReturnType<typeof setInterval> | null = null;
+
+  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);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+    }
+  }
+
+  private async loadMetrics(): Promise<void> {
+    try {
+      const response = await fetch('/sw-dash/metrics');
+      this.metrics = await response.json();
+      this.lastRefresh = new Date().toLocaleTimeString();
+    } catch (err) {
+      console.error('Failed to load metrics:', err);
+    }
+  }
+
+  private async loadResourceData(): Promise<void> {
+    try {
+      const response = await fetch('/sw-dash/resources');
+      this.resourceData = await response.json();
+    } catch (err) {
+      console.error('Failed to load resources:', err);
+    }
+  }
+
+  private setView(view: ViewType): void {
+    this.currentView = view;
+    if (view !== 'overview') {
+      this.loadResourceData();
+    }
+  }
+
+  private handleSpeedtestComplete(_e: CustomEvent): void {
+    // Refresh metrics after speedtest
+    this.loadMetrics();
+  }
+
+  private formatUptime(ms: number): string {
+    const s = Math.floor(ms / 1000);
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    const d = Math.floor(h / 24);
+    if (d > 0) return `${d}d ${h % 24}h`;
+    if (h > 0) return `${h}h ${m % 60}m`;
+    if (m > 0) return `${m}m ${s % 60}s`;
+    return `${s}s`;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="terminal">
+        <div class="header">
+          <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">
+          <button
+            class="nav-tab ${this.currentView === 'overview' ? 'active' : ''}"
+            @click="${() => this.setView('overview')}"
+          >Overview</button>
+          <button
+            class="nav-tab ${this.currentView === 'urls' ? 'active' : ''}"
+            @click="${() => this.setView('urls')}"
+          >URLs <span class="count">${this.resourceData.resourceCount}</span></button>
+          <button
+            class="nav-tab ${this.currentView === 'domains' ? 'active' : ''}"
+            @click="${() => this.setView('domains')}"
+          >Domains</button>
+          <button
+            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>
+        </nav>
+
+        <div class="content">
+          <div class="view ${this.currentView === 'overview' ? 'active' : ''}">
+            <sw-dash-overview
+              .metrics="${this.metrics}"
+              @speedtest-complete="${this.handleSpeedtestComplete}"
+            ></sw-dash-overview>
+          </div>
+
+          <div class="view ${this.currentView === 'urls' ? 'active' : ''}">
+            <sw-dash-urls .resources="${this.resourceData.resources}"></sw-dash-urls>
+          </div>
+
+          <div class="view ${this.currentView === 'domains' ? 'active' : ''}">
+            <sw-dash-domains .domains="${this.resourceData.domains}"></sw-dash-domains>
+          </div>
+
+          <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></sw-dash-events>
+          </div>
+        </div>
+
+        <div class="footer">
+          <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>
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-domains.ts
+++ b/ts_swdash/sw-dash-domains.ts
@@ -0,0 +1,52 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface IDomainStats {
+  domain: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Domains table view component
+ */
+@customElement('sw-dash-domains')
+export class SwDashDomains extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor domains: IDomainStats[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'domain', label: 'Domain' },
+    { key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.domains}"
+        filterPlaceholder="Filter domains..."
+        infoLabel="domains"
+      ></sw-dash-table>
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-events.ts
+++ b/ts_swdash/sw-dash-events.ts
@@ -0,0 +1,353 @@
+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
+ */
+@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);
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor events: IEventLogEntry[] = [];
+  @state() accessor filter: TEventFilter = 'all';
+  @state() accessor searchText = '';
+  @state() accessor totalCount = 0;
+  @state() accessor isLoading = true;
+  @state() accessor page = 1;
+  private readonly pageSize = 50;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadEvents();
+  }
+
+  private async loadEvents(): Promise<void> {
+    this.isLoading = true;
+    try {
+      const params = new URLSearchParams();
+      params.set('limit', String(this.pageSize * this.page));
+      if (this.filter !== 'all') {
+        params.set('type', this.filter);
+      }
+
+      const response = await fetch(`/sw-dash/events?${params}`);
+      const data = await response.json();
+      this.events = data.events;
+      this.totalCount = data.totalCount;
+    } catch (err) {
+      console.error('Failed to load events:', err);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private handleFilterChange(e: Event): void {
+    this.filter = (e.target as HTMLSelectElement).value as TEventFilter;
+    this.page = 1;
+    this.loadEvents();
+  }
+
+  private handleSearch(e: Event): void {
+    this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
+  }
+
+  private async handleClear(): Promise<void> {
+    if (!confirm('Are you sure you want to clear the event log? This cannot be undone.')) {
+      return;
+    }
+    try {
+      await fetch('/sw-dash/events', { method: 'DELETE' });
+      this.loadEvents();
+    } catch (err) {
+      console.error('Failed to clear events:', err);
+    }
+  }
+
+  private loadMore(): void {
+    this.page++;
+    this.loadEvents();
+  }
+
+  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, ' ');
+  }
+
+  private getFilteredEvents(): IEventLogEntry[] {
+    if (!this.searchText) return this.events;
+    return this.events.filter(e =>
+      e.message.toLowerCase().includes(this.searchText) ||
+      e.type.toLowerCase().includes(this.searchText) ||
+      (e.details && JSON.stringify(e.details).toLowerCase().includes(this.searchText))
+    );
+  }
+
+  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.isLoading && this.events.length === 0 ? html`
+        <div class="empty-state">Loading events...</div>
+      ` : filteredEvents.length === 0 ? html`
+        <div class="empty-state">No events found</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.isLoading}">
+              ${this.isLoading ? 'Loading...' : 'Load More'}
+            </button>
+            <span class="page-info">${this.events.length} of ${this.totalCount} events</span>
+          </div>
+        ` : ''}
+      `}
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-overview.ts
+++ b/ts_swdash/sw-dash-overview.ts
@@ -0,0 +1,318 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, panelStyles, gaugeStyles, buttonStyles, speedtestStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+
+export interface IMetricsData {
+  cache: {
+    hits: number;
+    misses: number;
+    errors: number;
+    bytesServedFromCache: number;
+    bytesFetched: number;
+    averageResponseTime: number;
+  };
+  network: {
+    totalRequests: number;
+    successfulRequests: number;
+    failedRequests: number;
+    timeouts: number;
+    averageLatency: number;
+    totalBytesTransferred: number;
+  };
+  update: {
+    totalChecks: number;
+    successfulChecks: number;
+    failedChecks: number;
+    updatesFound: number;
+    updatesApplied: number;
+    lastCheckTimestamp: number;
+    lastUpdateTimestamp: number;
+  };
+  connection: {
+    connectedClients: number;
+    totalConnectionAttempts: number;
+    successfulConnections: number;
+    failedConnections: number;
+  };
+  speedtest: {
+    lastDownloadSpeedMbps: number;
+    lastUploadSpeedMbps: number;
+    lastLatencyMs: number;
+    lastTestTimestamp: number;
+    testCount: number;
+    isOnline: boolean;
+  };
+  startTime: number;
+  uptime: number;
+  cacheHitRate: number;
+  networkSuccessRate: number;
+  resourceCount: number;
+}
+
+/**
+ * Overview panel component with metrics gauges and stats
+ */
+@customElement('sw-dash-overview')
+export class SwDashOverview extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    panelStyles,
+    gaugeStyles,
+    buttonStyles,
+    speedtestStyles,
+    css`
+      :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;
+  @state() accessor speedtestRunning = false;
+  @state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
+  @state() accessor speedtestProgress = 0;
+  @state() accessor speedtestElapsed = 0;
+  @state() accessor eventCountLastHour = 0;
+
+  // Speedtest timing constants (must match service worker)
+  private static readonly TEST_DURATION_MS = 5000;  // 5 seconds per test
+  private progressInterval: number | null = null;
+  private eventCountInterval: number | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.fetchEventCount();
+    // Refresh event count every 30 seconds
+    this.eventCountInterval = window.setInterval(() => this.fetchEventCount(), 30000);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.eventCountInterval) {
+      window.clearInterval(this.eventCountInterval);
+      this.eventCountInterval = null;
+    }
+  }
+
+  private async fetchEventCount(): Promise<void> {
+    try {
+      const oneHourAgo = Date.now() - 3600000;
+      const response = await fetch(`/sw-dash/events/count?since=${oneHourAgo}`);
+      const data = await response.json();
+      this.eventCountLastHour = data.count;
+    } catch (err) {
+      console.error('Failed to fetch event count:', err);
+    }
+  }
+
+  private async runSpeedtest(): Promise<void> {
+    if (this.speedtestRunning) return;
+    this.speedtestRunning = true;
+    this.speedtestPhase = 'latency';
+    this.speedtestProgress = 0;
+    this.speedtestElapsed = 0;
+
+    // Start progress animation (total ~10.5s: latency ~0.5s + 5s download + 5s upload)
+    const totalEstimatedMs = 10500;
+    const startTime = Date.now();
+
+    this.progressInterval = window.setInterval(() => {
+      this.speedtestElapsed = Date.now() - startTime;
+      this.speedtestProgress = Math.min(100, (this.speedtestElapsed / totalEstimatedMs) * 100);
+
+      // Estimate phase based on elapsed time
+      if (this.speedtestElapsed < 500) {
+        this.speedtestPhase = 'latency';
+      } else if (this.speedtestElapsed < 5500) {
+        this.speedtestPhase = 'download';
+      } else {
+        this.speedtestPhase = 'upload';
+      }
+    }, 100);
+
+    try {
+      const response = await fetch('/sw-dash/speedtest');
+      const result = await response.json();
+
+      this.speedtestPhase = 'complete';
+      this.speedtestProgress = 100;
+
+      // Dispatch event to parent to update metrics
+      this.dispatchEvent(new CustomEvent('speedtest-complete', {
+        detail: result,
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error('Speedtest failed:', err);
+      this.speedtestPhase = 'idle';
+    } finally {
+      if (this.progressInterval) {
+        window.clearInterval(this.progressInterval);
+        this.progressInterval = null;
+      }
+      // Keep showing complete state briefly, then reset
+      setTimeout(() => {
+        this.speedtestRunning = false;
+        this.speedtestPhase = 'idle';
+        this.speedtestProgress = 0;
+      }, 1500);
+    }
+  }
+
+  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';
+      default: return '';
+    }
+  }
+
+  private formatElapsed(): string {
+    const seconds = Math.floor(this.speedtestElapsed / 1000);
+    return `${seconds}s`;
+  }
+
+  public render(): TemplateResult {
+    if (!this.metrics) {
+      return html`<div class="panel"><div class="panel-content">Loading metrics...</div></div>`;
+    }
+
+    const m = this.metrics;
+    const gaugeClass = SwDashTable.getGaugeClass;
+
+    return html`
+      <div class="grid">
+        <!-- Cache Panel -->
+        <div class="panel">
+          <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>
+
+        <!-- Network Panel -->
+        <div class="panel">
+          <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>
+
+        <!-- Updates Panel -->
+        <div class="panel">
+          <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="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="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>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-styles.ts
+++ b/ts_swdash/sw-dash-styles.ts
@@ -0,0 +1,667 @@
+import { css } from './plugins.js';
+import type { CSSResult } from './plugins.js';
+
+/**
+ * Modern professional theme for sw-dash components
+ * Inspired by Bloomberg terminals, Vercel dashboards, and shadcn/ui
+ */
+export const sharedStyles: CSSResult = css`
+  :host {
+    /* Neutral backgrounds - zinc scale */
+    --bg-primary: #09090b;
+    --bg-secondary: #18181b;
+    --bg-tertiary: #27272a;
+    --bg-elevated: #3f3f46;
+
+    /* 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;
+  }
+`;
+
+export const terminalStyles: CSSResult = css`
+  .terminal {
+    max-width: 1200px;
+    margin: 0 auto;
+    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(--border-default);
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-secondary);
+  }
+
+  .title {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: -0.01em;
+  }
+
+  .uptime {
+    color: var(--text-tertiary);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .content {
+    padding: var(--space-5);
+    min-height: 400px;
+    background: var(--bg-primary);
+  }
+
+  .footer {
+    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(--bg-secondary);
+    font-size: 12px;
+  }
+
+  .refresh-info {
+    color: var(--text-tertiary);
+    font-size: 11px;
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent-success);
+  }
+
+  .status-dot.offline {
+    background: var(--accent-error);
+  }
+
+  .prompt {
+    color: var(--text-secondary);
+    font-size: 11px;
+  }
+`;
+
+export const navStyles: CSSResult = css`
+  .nav {
+    display: flex;
+    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: var(--space-2) var(--space-4);
+    cursor: pointer;
+    color: var(--text-secondary);
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    border-radius: var(--radius-sm);
+  }
+
+  .nav-tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+  }
+
+  .nav-tab.active {
+    color: var(--text-primary);
+    background: var(--bg-elevated);
+  }
+
+  .nav-tab .count {
+    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;
+    font-weight: 500;
+    margin-left: var(--space-2);
+    color: var(--text-secondary);
+  }
+
+  .nav-tab.active .count {
+    background: var(--accent-primary);
+    color: white;
+  }
+`;
+
+export const panelStyles: CSSResult = css`
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    gap: var(--space-4);
+  }
+
+  .panel {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .panel-title {
+    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;
+    align-items: center;
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--border-muted);
+  }
+
+  .row:last-child {
+    border-bottom: none;
+  }
+
+  .label {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+
+  .value {
+    color: var(--text-primary);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .value.warning {
+    color: var(--accent-warning);
+  }
+
+  .value.error {
+    color: var(--accent-error);
+  }
+
+  .value.success {
+    color: var(--accent-success);
+  }
+`;
+
+export const gaugeStyles: CSSResult = css`
+  .gauge {
+    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: 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(--accent-success);
+  }
+
+  .gauge-fill.warning {
+    background: var(--accent-warning);
+  }
+
+  .gauge-fill.bad {
+    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: 13px;
+  }
+
+  .data-table th {
+    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: var(--bg-elevated);
+    color: var(--text-primary);
+  }
+
+  .data-table th .sort-icon {
+    margin-left: var(--space-1);
+    opacity: 0.4;
+    font-size: 10px;
+  }
+
+  .data-table th.sorted .sort-icon {
+    opacity: 1;
+    color: var(--accent-primary);
+  }
+
+  .data-table td {
+    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 {
+    max-width: 400px;
+    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;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  .table-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-4);
+    gap: var(--space-3);
+  }
+
+  .search-input {
+    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: 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(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .table-info {
+    color: var(--text-tertiary);
+    font-size: 12px;
+  }
+
+  .hit-rate-bar {
+    width: 60px;
+    height: 4px;
+    background: var(--bg-tertiary);
+    border-radius: 2px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: var(--space-2);
+    overflow: hidden;
+  }
+
+  .hit-rate-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  .hit-rate-fill.good {
+    background: var(--accent-success);
+  }
+
+  .hit-rate-fill.warning {
+    background: var(--accent-warning);
+  }
+
+  .hit-rate-fill.bad {
+    background: var(--accent-error);
+  }
+`;
+
+export const buttonStyles: CSSResult = css`
+  .btn {
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-md);
+    font-family: inherit;
+    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-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 {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    margin-top: var(--space-4);
+  }
+`;
+
+export const speedtestStyles: CSSResult = css`
+  .online-indicator {
+    display: inline-flex;
+    align-items: center;
+    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: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .speedtest-results {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    margin-top: var(--space-4);
+  }
+
+  .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: 4px;
+    background: var(--bg-tertiary);
+    border-radius: 2px;
+    margin: var(--space-1) 0;
+    overflow: hidden;
+  }
+
+  .speed-fill {
+    height: 100%;
+    background: var(--accent-success);
+    border-radius: 2px;
+    transition: width 0.5s ease;
+  }
+
+  /* Speedtest progress indicator */
+  .speedtest-progress {
+    padding: var(--space-4) 0;
+  }
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-3);
+  }
+
+  .progress-phase {
+    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(--text-tertiary);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .progress-bar {
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: var(--accent-info);
+    border-radius: 3px;
+    transition: width 0.1s linear;
+  }
+
+  .progress-fill.complete {
+    background: var(--accent-success);
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    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;
+  }
+`;
--- a/ts_swdash/sw-dash-table.ts
+++ b/ts_swdash/sw-dash-table.ts
@@ -0,0 +1,173 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+
+export interface IColumnConfig {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  formatter?: (value: any, row: any) => string;
+  className?: string;
+}
+
+/**
+ * Base sortable table component for sw-dash
+ */
+@customElement('sw-dash-table')
+export class SwDashTable extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor columns: IColumnConfig[] = [];
+  @property({ type: Array }) accessor data: any[] = [];
+  @property({ type: String }) accessor filterPlaceholder = 'Filter...';
+  @property({ type: String }) accessor infoLabel = 'items';
+
+  @state() accessor sortColumn = '';
+  @state() accessor sortDirection: 'asc' | 'desc' = 'desc';
+  @state() accessor filterText = '';
+
+  // Utility formatters
+  static formatNumber(n: number): string {
+    return n.toLocaleString();
+  }
+
+  static formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
+  static formatTimestamp(ts: number): string {
+    if (!ts || ts === 0) return 'never';
+    const ago = Date.now() - ts;
+    if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
+    if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
+    if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
+    return new Date(ts).toLocaleDateString();
+  }
+
+  static getGaugeClass(rate: number): string {
+    if (rate >= 80) return 'good';
+    if (rate >= 50) return 'warning';
+    return 'bad';
+  }
+
+  private handleSort(column: string): void {
+    if (this.sortColumn === column) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortColumn = column;
+      this.sortDirection = 'desc';
+    }
+  }
+
+  private handleFilter(e: Event): void {
+    this.filterText = (e.target as HTMLInputElement).value;
+  }
+
+  private getSortedFilteredData(): any[] {
+    let result = [...this.data];
+
+    // Filter
+    if (this.filterText) {
+      const search = this.filterText.toLowerCase();
+      result = result.filter(row => {
+        return this.columns.some(col => {
+          const val = row[col.key];
+          if (val == null) return false;
+          return String(val).toLowerCase().includes(search);
+        });
+      });
+    }
+
+    // Sort
+    if (this.sortColumn) {
+      result.sort((a, b) => {
+        let valA = a[this.sortColumn];
+        let valB = b[this.sortColumn];
+        if (typeof valA === 'string') valA = valA.toLowerCase();
+        if (typeof valB === 'string') valB = valB.toLowerCase();
+        if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
+        if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return result;
+  }
+
+  private renderHitRateBar(rate: number): TemplateResult {
+    const cls = SwDashTable.getGaugeClass(rate);
+    return html`
+      <span class="hit-rate-bar">
+        <span class="hit-rate-fill ${cls}" style="width: ${rate}%"></span>
+      </span>${rate}%
+    `;
+  }
+
+  protected renderCellValue(value: any, row: any, column: IColumnConfig): any {
+    if (column.formatter) {
+      return column.formatter(value, row);
+    }
+    // Special handling for hitRate
+    if (column.key === 'hitRate') {
+      return this.renderHitRateBar(value);
+    }
+    return value;
+  }
+
+  public render(): TemplateResult {
+    const sortedData = this.getSortedFilteredData();
+
+    return html`
+      <div class="table-controls">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="${this.filterPlaceholder}"
+          .value="${this.filterText}"
+          @input="${this.handleFilter}"
+        >
+        <span class="table-info">${sortedData.length} of ${this.data.length} ${this.infoLabel}</span>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              ${this.columns.map(col => html`
+                <th
+                  class="${this.sortColumn === col.key ? 'sorted' : ''}"
+                  @click="${() => col.sortable !== false && this.handleSort(col.key)}"
+                >
+                  ${col.label}
+                  ${col.sortable !== false ? html`
+                    <span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '↑' : '↓'}</span>
+                  ` : ''}
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${sortedData.map(row => html`
+              <tr>
+                ${this.columns.map(col => html`
+                  <td class="${col.className || ''}">${this.renderCellValue(row[col.key], row, col)}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-types.ts
+++ b/ts_swdash/sw-dash-types.ts
@@ -0,0 +1,52 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface IContentTypeStats {
+  contentType: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Content types table view component
+ */
+@customElement('sw-dash-types')
+export class SwDashTypes extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'contentType', label: 'Content Type' },
+    { key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.contentTypes}"
+        filterPlaceholder="Filter types..."
+        infoLabel="content types"
+      ></sw-dash-table>
+    `;
+  }
+}
--- a/ts_swdash/sw-dash-urls.ts
+++ b/ts_swdash/sw-dash-urls.ts
@@ -0,0 +1,66 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface ICachedResource {
+  url: string;
+  domain: string;
+  contentType: string;
+  size: number;
+  hitCount: number;
+  missCount: number;
+  lastAccessed: number;
+  cachedAt: number;
+  hitRate?: number;
+}
+
+/**
+ * URLs table view component
+ */
+@customElement('sw-dash-urls')
+export class SwDashUrls extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor resources: ICachedResource[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'url', label: 'URL', className: 'url' },
+    { key: 'contentType', label: 'Type' },
+    { key: 'size', label: 'Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'hitCount', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'missCount', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+    { key: 'lastAccessed', label: 'Last Access', formatter: SwDashTable.formatTimestamp },
+  ];
+
+  private getDataWithHitRate(): ICachedResource[] {
+    return this.resources.map(r => {
+      const total = r.hitCount + r.missCount;
+      return {
+        ...r,
+        hitRate: total > 0 ? Math.round((r.hitCount / total) * 100) : 0
+      };
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.getDataWithHitRate()}"
+        filterPlaceholder="Filter URLs..."
+        infoLabel="resources"
+      ></sw-dash-table>
+    `;
+  }
+}
--- a/ts_web_inject/index.ts
+++ b/ts_web_inject/index.ts
@@ -3,12 +3,12 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
 import { logger } from './typedserver_web.logger.js';
 logger.log('info', `TypedServer-Devtools initialized!`);

-import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
+import { TypedserverStatusPill } from './typedserver_web.statuspill.js';

 export class ReloadChecker {
  public reloadJustified = false;
  public backendConnectionLost = false;
-  public infoscreen = new TypedserverInfoscreen();
+  public statusPill = new TypedserverStatusPill();
  public store = new plugins.webstore.WebStore({
    dbName: 'apiglobal__typedserver',
    storeName: 'apiglobal__typedserver',
@@ -17,14 +17,90 @@ export class ReloadChecker {

  public typedsocket: plugins.typedsocket.TypedSocket;
  public typedrouter = new plugins.typedrequest.TypedRouter();
+  private swStatusUnsubscribe: (() => void) | null = null;

-  constructor() {}
+  constructor() {
+    // Listen to browser online/offline events
+    window.addEventListener('online', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'online',
+        message: 'Back online',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    window.addEventListener('offline', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'offline',
+        message: 'No internet connection',
+        persist: true,
+        timestamp: Date.now(),
+      });
+    });
+  }

  public async reload() {
    // this looks a bit hacky, but apparently is the safest way to really reload stuff
    window.location.reload();
  }

+  /**
+   * Subscribe to service worker status updates
+   */
+  public subscribeToServiceWorker(): void {
+    // Check if service worker client is available
+    if (globalThis.globalSw?.actionManager) {
+      this.swStatusUnsubscribe = globalThis.globalSw.actionManager.subscribeToStatusUpdates((status) => {
+        this.statusPill.updateStatus({
+          source: status.source,
+          type: status.type,
+          message: status.message,
+          details: status.details,
+          persist: status.persist || false,
+          timestamp: status.timestamp,
+        });
+      });
+      logger.log('info', 'Subscribed to service worker status updates');
+
+      // Get initial SW status
+      this.fetchServiceWorkerStatus();
+    } else {
+      logger.log('note', 'Service worker client not available yet, will retry...');
+      // Retry after a delay
+      setTimeout(() => this.subscribeToServiceWorker(), 2000);
+    }
+  }
+
+  /**
+   * Fetch and display initial service worker status
+   */
+  private async fetchServiceWorkerStatus(): Promise<void> {
+    if (!globalThis.globalSw?.actionManager) return;
+
+    try {
+      const status = await globalThis.globalSw.actionManager.getServiceWorkerStatus();
+      if (status) {
+        this.statusPill.updateStatus({
+          source: 'serviceworker',
+          type: status.isActive ? 'connected' : 'disconnected',
+          message: status.isActive ? 'Service worker active' : 'Service worker inactive',
+          details: {
+            cacheHitRate: status.cacheHitRate,
+            resourceCount: status.resourceCount,
+            connectionType: status.connectionType,
+          },
+          persist: false,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      logger.log('warn', `Failed to get SW status: ${error}`);
+    }
+  }
+
  /**
   * starts the reload checker
   */
@@ -50,11 +126,23 @@ export class ReloadChecker {
    if (response?.status !== 200) {
      this.backendConnectionLost = true;
      logger.log('warn', `got a status ${response?.status}.`);
-      this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'disconnected',
+        message: `Backend connection lost (${response?.status || 'timeout'})`,
+        persist: true,
+        timestamp: Date.now(),
+      });
    }
    if (response?.status === 200 && this.backendConnectionLost) {
      this.backendConnectionLost = false;
-      this.infoscreen.setSuccess('regained connection to backend...');
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'connected',
+        message: 'Backend connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
    }
    return response;
  }
@@ -69,10 +157,15 @@ export class ReloadChecker {

    if (reloadJustified) {
      this.store.set(this.storeKey, lastServerChange);
-      const reloadText = `upgrading... ${
-        globalThis.globalSw ? '(purging the sw cache first...)' : ''
-      }`;
-      this.infoscreen.setText(reloadText);
+      const hasSw = !!globalThis.globalSw;
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'update',
+        message: hasSw ? 'Updating app...' : 'Upgrading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
+
      if (globalThis.globalSw?.purgeCache) {
        await globalThis.globalSw.purgeCache();
      } else if ('caches' in window) {
@@ -87,14 +180,19 @@ export class ReloadChecker {
      } else {
        console.log('globalThis.globalSw not found and Cache API not available...');
      }
-      this.infoscreen.setText(`cleaned caches`);
+
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Cache cleared, reloading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
      await plugins.smartdelay.delayFor(200);
      this.reload();
      return;
    } else {
-      if (this.infoscreen) {
-        this.infoscreen.hide();
-      }
+      // All good, hide after brief show
      return;
    }
  }
@@ -116,10 +214,22 @@ export class ReloadChecker {
        console.log(`typedsocket status: ${statusArg}`);
        if (statusArg === 'disconnected' || statusArg === 'reconnecting') {
          this.backendConnectionLost = true;
-          this.infoscreen.setText(`typedsocket ${statusArg}!`);
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: statusArg === 'disconnected' ? 'disconnected' : 'reconnecting',
+            message: `TypedSocket ${statusArg}`,
+            persist: true,
+            timestamp: Date.now(),
+          });
        } else if (statusArg === 'connected' && this.backendConnectionLost) {
          this.backendConnectionLost = false;
-          this.infoscreen.setSuccess('typedsocket connected!');
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: 'connected',
+            message: 'TypedSocket connected',
+            persist: false,
+            timestamp: Date.now(),
+          });
          // lets check if a reload is necessary
          const getLatestServerChangeTime =
            this.typedsocket.createTypedRequest<interfaces.IReq_GetLatestServerChangeTime>(
@@ -137,9 +247,13 @@ export class ReloadChecker {
  public async start() {
    this.started = true;
    logger.log('info', `starting ReloadChecker...`);
+
+    // Subscribe to service worker status updates
+    this.subscribeToServiceWorker();
+
    while (this.started) {
      const response = await this.performHttpRequest();
-      if (response.status === 200) {
+      if (response?.status === 200) {
        logger.log('info', `ReloadChecker reached backend!`);
        await this.checkReload(parseInt(await response.text()));
        await this.connectTypedsocket();
@@ -150,6 +264,10 @@ export class ReloadChecker {

  public async stop() {
    this.started = false;
+    if (this.swStatusUnsubscribe) {
+      this.swStatusUnsubscribe();
+      this.swStatusUnsubscribe = null;
+    }
  }
 }

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

 // Add type definitions for ServiceWorker APIs
 declare global {
@@ -75,8 +77,177 @@ export class ServiceworkerBackend {
      return await optionsArg.purgeCache?.(reqArg);
    });

+    // Handler for getting current SW status
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus', async () => {
+      const metrics = getMetricsCollector();
+      const metricsData = metrics.getMetrics();
+      return {
+        isActive: true,
+        isOnline: metricsData.speedtest.isOnline,
+        cacheHitRate: metrics.getCacheHitRate(),
+        resourceCount: metrics.getResourceCount(),
+        connectedClients: metricsData.connection.connectedClients,
+        lastUpdateCheck: metricsData.update.lastCheckTimestamp,
+      };
+    });
+
+    // Handler for getting event log
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog', async (reqArg) => {
+      const persistentStore = getPersistentStore();
+      return await persistentStore.getEventLog({
+        limit: reqArg.limit,
+        type: reqArg.type,
+        since: reqArg.since,
+      });
+    });
+
+    // 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 };
+    });
+
    // Periodically update connected clients count
    this.startClientCountUpdates();
+
+    // Subscribe to EventBus and broadcast status updates
+    this.setupEventBusSubscriptions();
+  }
+
+  /**
+   * Sets up subscriptions to EventBus events and broadcasts them to clients
+   */
+  private setupEventBusSubscriptions(): void {
+    const eventBus = getEventBus();
+    const persistentStore = getPersistentStore();
+
+    // Network status changes
+    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, async () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'online',
+        message: 'Connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('network_online', 'Network connection restored');
+    });
+
+    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, async () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'offline',
+        message: 'Connection lost - offline mode',
+        persist: true,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('network_offline', 'Network connection lost');
+    });
+
+    // Update events
+    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update available',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('update_check', `Update available: ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update applied',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('sw_updated', `Service worker updated to ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, async (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'error',
+        message: `Update error: ${payload.error || 'Unknown error'}`,
+        persist: true,
+        timestamp: Date.now(),
+      });
+      // Log to persistent store
+      await persistentStore.logEvent('error', `Update error: ${payload.error || 'Unknown error'}`, {
+        error: payload.error,
+      });
+    });
+
+    // Cache invalidation
+    eventBus.on(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Clearing cache...',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Note: cache_invalidated event is logged in the ServiceWorker class
+    });
+
+    // Lifecycle events
+    eventBus.on(ServiceWorkerEvent.ACTIVATE, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'connected',
+        message: 'Service worker activated',
+        persist: false,
+        timestamp: Date.now(),
+      });
+      // Note: sw_activated event is logged in the ServiceWorker class
+    });
+  }
+
+  /**
+   * Broadcasts a status update to all connected clients
+   */
+  public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
+    try {
+      await this.deesComms.postMessage({
+        method: 'serviceworker_statusUpdate',
+        request: status,
+        messageId: `sw_status_${Date.now()}`
+      });
+      logger.log('info', `Status update broadcast: ${status.source}:${status.type} - ${status.message}`);
+    } catch (error) {
+      logger.log('warn', `Failed to broadcast status update: ${error}`);
+    }
  }

  /**
--- a/ts_web_serviceworker/classes.cachemanager.ts
+++ b/ts_web_serviceworker/classes.cachemanager.ts
@@ -225,6 +225,27 @@ export class CacheManager {
          fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
          return;
        }
+        if (parsedUrl.pathname === '/sw-dash/events') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(dashboard.serveEventLog(parsedUrl.searchParams));
+          return;
+        }
+        if (parsedUrl.pathname === '/sw-dash/events/count') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(dashboard.serveEventCount(parsedUrl.searchParams));
+          return;
+        }
+        if (parsedUrl.pathname === '/sw-dash/cumulative-metrics') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(Promise.resolve(dashboard.serveCumulativeMetrics()));
+          return;
+        }
+        // DELETE method for clearing events
+        if (parsedUrl.pathname === '/sw-dash/events' && originalRequest.method === 'DELETE') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(dashboard.clearEventLog());
+          return;
+        }

        // Block requests that we don't want the service worker to handle.
        if (
--- a/ts_web_serviceworker/classes.dashboard.ts
+++ b/ts_web_serviceworker/classes.dashboard.ts
@@ -1,6 +1,10 @@
 import { getMetricsCollector } from './classes.metrics.js';
-import { getServiceWorkerInstance } from './index.js';
+import { getServiceWorkerInstance } from './init.js';
+import { getPersistentStore } from './classes.persistentstore.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
@@ -44,18 +48,95 @@ export class DashboardGenerator {
  }

  /**
-   * Runs a speedtest and returns the results
+   * Serves event log data
+   */
+  public async serveEventLog(searchParams: URLSearchParams): Promise<Response> {
+    const persistentStore = getPersistentStore();
+
+    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();
+
+    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 serveCumulativeMetrics(): Response {
+    const persistentStore = getPersistentStore();
+    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();
+    const success = await persistentStore.clearEventLog();
+
+    return new Response(JSON.stringify({ success }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  // Speedtest configuration
+  private static readonly TEST_DURATION_MS = 5000;  // 5 seconds per test
+  private static readonly CHUNK_SIZE_KB = 64;       // 64KB chunks
+
+  /**
+   * Runs a time-based speedtest and returns the results
+   * Each test (download/upload) runs for TEST_DURATION_MS, transferring chunks continuously
   */
  public async runSpeedtest(): Promise<Response> {
    const metrics = getMetricsCollector();
+    const persistentStore = getPersistentStore();
    const results: {
-      latency?: { durationMs: number; speedMbps: number };
+      latency?: { durationMs: number };
      download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
      upload?: { durationMs: number; speedMbps: number; bytesTransferred: number };
      error?: string;
      isOnline: boolean;
    } = { isOnline: false };

+    // Log speedtest start
+    await persistentStore.logEvent('speedtest_started', 'Speedtest initiated');
+
    try {
      const sw = getServiceWorkerInstance();

@@ -75,37 +156,66 @@ export class DashboardGenerator {
        interfaces.serviceworker.IRequest_Serviceworker_Speedtest
      >('serviceworker_speedtest');

-      // Latency test
+      // Latency test - simple ping
      const latencyStart = Date.now();
      await speedtestRequest.fire({ type: 'latency' });
      const latencyDuration = Date.now() - latencyStart;
-      results.latency = { durationMs: latencyDuration, speedMbps: 0 };
+      results.latency = { durationMs: latencyDuration };
      metrics.recordSpeedtest('latency', latencyDuration);
      results.isOnline = true;
      metrics.setOnlineStatus(true);

-      // Download test (100KB)
-      const downloadStart = Date.now();
-      const downloadResult = await speedtestRequest.fire({ type: 'download', payloadSizeKB: 100 });
-      const downloadDuration = Date.now() - downloadStart;
-      const bytesTransferred = downloadResult.payload?.length || 0;
-      const downloadSpeedMbps = downloadDuration > 0 ? (bytesTransferred * 8) / (downloadDuration * 1000) : 0;
-      results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred };
-      metrics.recordSpeedtest('download', downloadSpeedMbps);
+      // Download test - request chunks for TEST_DURATION_MS
+      {
+        const downloadStart = Date.now();
+        let totalBytes = 0;
+        while (Date.now() - downloadStart < DashboardGenerator.TEST_DURATION_MS) {
+          const chunkResult = await speedtestRequest.fire({
+            type: 'download_chunk',
+            chunkSizeKB: DashboardGenerator.CHUNK_SIZE_KB,
+          });
+          totalBytes += chunkResult.bytesTransferred;
+        }
+        const downloadDuration = Date.now() - downloadStart;
+        const downloadSpeedMbps = downloadDuration > 0 ? (totalBytes * 8) / (downloadDuration * 1000) : 0;
+        results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred: totalBytes };
+        metrics.recordSpeedtest('download', downloadSpeedMbps);
+      }

-      // Upload test (100KB)
-      const uploadPayload = 'x'.repeat(100 * 1024);
-      const uploadStart = Date.now();
-      await speedtestRequest.fire({ type: 'upload', payload: uploadPayload });
-      const uploadDuration = Date.now() - uploadStart;
-      const uploadSpeedMbps = uploadDuration > 0 ? (uploadPayload.length * 8) / (uploadDuration * 1000) : 0;
-      results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: uploadPayload.length };
-      metrics.recordSpeedtest('upload', uploadSpeedMbps);
+      // Upload test - send chunks for TEST_DURATION_MS
+      {
+        const uploadPayload = 'x'.repeat(DashboardGenerator.CHUNK_SIZE_KB * 1024);
+        const uploadStart = Date.now();
+        let totalBytes = 0;
+        while (Date.now() - uploadStart < DashboardGenerator.TEST_DURATION_MS) {
+          const chunkResult = await speedtestRequest.fire({
+            type: 'upload_chunk',
+            payload: uploadPayload,
+          });
+          totalBytes += chunkResult.bytesTransferred;
+        }
+        const uploadDuration = Date.now() - uploadStart;
+        const uploadSpeedMbps = uploadDuration > 0 ? (totalBytes * 8) / (uploadDuration * 1000) : 0;
+        results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: totalBytes };
+        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), {
@@ -144,15 +254,9 @@ export class DashboardGenerator {
  }

  /**
-   * Generates the complete HTML dashboard page as a SPA with tab navigation
+   * Generates a minimal HTML shell that loads the Lit-based dashboard bundle
   */
  public generateDashboardHtml(): string {
-    const metrics = getMetricsCollector();
-    const data = metrics.getMetrics();
-    const hitRate = metrics.getCacheHitRate();
-    const successRate = metrics.getNetworkSuccessRate();
-    const resourceCount = metrics.getResourceCount();
-
    return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -163,754 +267,17 @@ export class DashboardGenerator {
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #0a0a0a;
-      color: #00ff00;
-      font-family: 'Courier New', Courier, monospace;
-      font-size: 14px;
-      line-height: 1.4;
-      padding: 20px;
      min-height: 100vh;
    }
-    .terminal {
-      max-width: 1200px;
-      margin: 0 auto;
-      border: 1px solid #00ff00;
-      background: #0d0d0d;
-      box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
-    }
-    .header {
-      border-bottom: 1px solid #00ff00;
-      padding: 10px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #111;
-    }
-    .title { color: #00ff00; font-weight: bold; font-size: 16px; }
-    .uptime { color: #888; }
-
-    /* Navigation tabs */
-    .nav {
-      display: flex;
-      background: #111;
-      border-bottom: 1px solid #333;
-      padding: 0 10px;
-    }
-    .nav-tab {
-      padding: 10px 20px;
-      cursor: pointer;
-      color: #888;
-      border: none;
-      background: transparent;
-      font-family: inherit;
-      font-size: 13px;
-      transition: all 0.2s;
-      border-bottom: 2px solid transparent;
-    }
-    .nav-tab:hover { color: #00ff00; }
-    .nav-tab.active {
-      color: #00ff00;
-      border-bottom-color: #00ff00;
-      background: #1a1a1a;
-    }
-    .nav-tab .count {
-      background: #333;
-      padding: 1px 6px;
-      border-radius: 8px;
-      font-size: 11px;
-      margin-left: 6px;
-    }
-
-    .content { padding: 15px; min-height: 400px; }
-    .view { display: none; }
-    .view.active { display: block; }
-
-    /* Grid layout for overview */
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-      gap: 15px;
-    }
-    .panel {
-      border: 1px solid #333;
-      padding: 12px;
-      background: #0a0a0a;
-    }
-    .panel-title {
-      color: #00ffff;
-      font-weight: bold;
-      margin-bottom: 10px;
-      padding-bottom: 5px;
-      border-bottom: 1px dashed #333;
-    }
-    .row { display: flex; justify-content: space-between; padding: 3px 0; }
-    .label { color: #888; }
-    .value { color: #00ff00; }
-    .value.warning { color: #ffff00; }
-    .value.error { color: #ff4444; }
-    .value.success { color: #00ff00; }
-
-    /* Gauge */
-    .gauge { margin: 8px 0; }
-    .gauge-bar {
-      height: 16px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      position: relative;
-      font-size: 12px;
-    }
-    .gauge-fill { height: 100%; transition: width 0.3s ease; }
-    .gauge-fill.good { background: #00aa00; }
-    .gauge-fill.warning { background: #aaaa00; }
-    .gauge-fill.bad { background: #aa0000; }
-    .gauge-text {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: #fff;
-      font-weight: bold;
-      text-shadow: 1px 1px 2px #000;
-    }
-
-    /* Sortable table */
-    .table-container { overflow-x: auto; }
-    .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 #333;
-    }
-    .data-table th {
-      background: #1a1a1a;
-      color: #00ffff;
-      cursor: pointer;
-      user-select: none;
-      white-space: nowrap;
-    }
-    .data-table th:hover { background: #252525; }
-    .data-table th .sort-icon { margin-left: 5px; opacity: 0.5; }
-    .data-table th.sorted .sort-icon { opacity: 1; color: #00ff00; }
-    .data-table tr:hover { background: #151515; }
-    .data-table td { color: #ccc; }
-    .data-table td.url {
-      max-width: 400px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .data-table td.num { text-align: right; color: #00ff00; }
-
-    /* Search/filter */
-    .table-controls {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
-      gap: 10px;
-    }
-    .search-input {
-      background: #1a1a1a;
-      border: 1px solid #333;
-      color: #00ff00;
-      padding: 6px 10px;
-      font-family: inherit;
-      font-size: 12px;
-      width: 250px;
-    }
-    .search-input:focus { outline: none; border-color: #00ff00; }
-    .table-info { color: #888; font-size: 12px; }
-
-    /* Speed bars */
-    .speed-bar {
-      height: 8px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      margin: 4px 0;
-    }
-    .speed-fill { height: 100%; background: #00aa00; transition: width 0.5s ease; }
-
-    /* Online indicator */
-    .online-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px dashed #333; }
-    .online-dot { width: 12px; height: 12px; border-radius: 50%; transition: background-color 0.3s ease; }
-    .online-dot.online { background: #00ff00; box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
-    .online-dot.offline { background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
-
-    /* Buttons */
-    .btn {
-      background: #1a1a1a;
-      border: 1px solid #00ff00;
-      color: #00ff00;
-      padding: 8px 16px;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 12px;
-      transition: all 0.2s ease;
-    }
-    .btn:hover { background: #00ff00; color: #000; }
-    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .btn-row { display: flex; justify-content: flex-end; margin-top: 10px; }
-
-    /* Footer */
-    .footer {
-      border-top: 1px solid #00ff00;
-      padding: 10px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #111;
-      font-size: 12px;
-    }
-    .refresh-info { color: #888; }
-    .status { display: flex; align-items: center; gap: 8px; }
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #00ff00;
-      animation: pulse 2s infinite;
-    }
-    .prompt { color: #00ff00; }
-    .cursor {
-      display: inline-block;
-      width: 8px;
-      height: 14px;
-      background: #00ff00;
-      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; } }
-
-    /* Hit rate bar in tables */
-    .hit-rate-bar {
-      width: 60px;
-      height: 10px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 6px;
-    }
-    .hit-rate-fill { height: 100%; }
-    .hit-rate-fill.good { background: #00aa00; }
-    .hit-rate-fill.warning { background: #aaaa00; }
-    .hit-rate-fill.bad { background: #aa0000; }
  </style>
 </head>
 <body>
-  <div class="terminal">
-    <div class="header">
-      <span class="title">[SW-DASH] Service Worker Dashboard</span>
-      <span class="uptime" id="uptime">Uptime: ${this.formatDuration(data.uptime)}</span>
-    </div>
-
-    <nav class="nav">
-      <button class="nav-tab active" data-view="overview">Overview</button>
-      <button class="nav-tab" data-view="urls">URLs <span class="count" id="url-count">${resourceCount}</span></button>
-      <button class="nav-tab" data-view="domains">Domains</button>
-      <button class="nav-tab" data-view="types">Types</button>
-    </nav>
-
-    <div class="content">
-      <!-- Overview View -->
-      <div id="view-overview" class="view active">
-        <div class="grid">
-          <div class="panel">
-            <div class="panel-title">[ CACHE ]</div>
-            <div class="gauge">
-              <div class="gauge-bar">
-                <div class="gauge-fill ${this.getGaugeClass(hitRate)}" id="cache-gauge" style="width: ${hitRate}%"></div>
-                <span class="gauge-text" id="cache-gauge-text">${hitRate}% hit rate</span>
-              </div>
-            </div>
-            <div class="row"><span class="label">Hits:</span><span class="value success" id="cache-hits">${this.formatNumber(data.cache.hits)}</span></div>
-            <div class="row"><span class="label">Misses:</span><span class="value warning" id="cache-misses">${this.formatNumber(data.cache.misses)}</span></div>
-            <div class="row"><span class="label">Errors:</span><span class="value ${data.cache.errors > 0 ? 'error' : ''}" id="cache-errors">${this.formatNumber(data.cache.errors)}</span></div>
-            <div class="row"><span class="label">From Cache:</span><span class="value" id="cache-bytes">${this.formatBytes(data.cache.bytesServedFromCache)}</span></div>
-            <div class="row"><span class="label">Fetched:</span><span class="value" id="cache-fetched">${this.formatBytes(data.cache.bytesFetched)}</span></div>
-            <div class="row"><span class="label">Resources:</span><span class="value" id="cache-resources">${resourceCount}</span></div>
-          </div>
-
-          <div class="panel">
-            <div class="panel-title">[ NETWORK ]</div>
-            <div class="gauge">
-              <div class="gauge-bar">
-                <div class="gauge-fill ${this.getGaugeClass(successRate)}" id="net-gauge" style="width: ${successRate}%"></div>
-                <span class="gauge-text" id="net-gauge-text">${successRate}% success</span>
-              </div>
-            </div>
-            <div class="row"><span class="label">Total Requests:</span><span class="value" id="net-total">${this.formatNumber(data.network.totalRequests)}</span></div>
-            <div class="row"><span class="label">Successful:</span><span class="value success" id="net-success">${this.formatNumber(data.network.successfulRequests)}</span></div>
-            <div class="row"><span class="label">Failed:</span><span class="value ${data.network.failedRequests > 0 ? 'error' : ''}" id="net-failed">${this.formatNumber(data.network.failedRequests)}</span></div>
-            <div class="row"><span class="label">Timeouts:</span><span class="value ${data.network.timeouts > 0 ? 'warning' : ''}" id="net-timeouts">${this.formatNumber(data.network.timeouts)}</span></div>
-            <div class="row"><span class="label">Avg Latency:</span><span class="value" id="net-latency">${data.network.averageLatency}ms</span></div>
-            <div class="row"><span class="label">Transferred:</span><span class="value" id="net-bytes">${this.formatBytes(data.network.totalBytesTransferred)}</span></div>
-          </div>
-
-          <div class="panel">
-            <div class="panel-title">[ UPDATES ]</div>
-            <div class="row"><span class="label">Total Checks:</span><span class="value" id="upd-checks">${this.formatNumber(data.update.totalChecks)}</span></div>
-            <div class="row"><span class="label">Successful:</span><span class="value success" id="upd-success">${this.formatNumber(data.update.successfulChecks)}</span></div>
-            <div class="row"><span class="label">Failed:</span><span class="value ${data.update.failedChecks > 0 ? 'error' : ''}" id="upd-failed">${this.formatNumber(data.update.failedChecks)}</span></div>
-            <div class="row"><span class="label">Updates Found:</span><span class="value" id="upd-found">${this.formatNumber(data.update.updatesFound)}</span></div>
-            <div class="row"><span class="label">Updates Applied:</span><span class="value success" id="upd-applied">${this.formatNumber(data.update.updatesApplied)}</span></div>
-            <div class="row"><span class="label">Last Check:</span><span class="value" id="upd-last-check">${this.formatTimestamp(data.update.lastCheckTimestamp)}</span></div>
-          </div>
-
-          <div class="panel">
-            <div class="panel-title">[ CONNECTIONS ]</div>
-            <div class="row"><span class="label">Active Clients:</span><span class="value success" id="conn-clients">${this.formatNumber(data.connection.connectedClients)}</span></div>
-            <div class="row"><span class="label">Total Attempts:</span><span class="value" id="conn-attempts">${this.formatNumber(data.connection.totalConnectionAttempts)}</span></div>
-            <div class="row"><span class="label">Successful:</span><span class="value success" id="conn-success">${this.formatNumber(data.connection.successfulConnections)}</span></div>
-            <div class="row"><span class="label">Failed:</span><span class="value ${data.connection.failedConnections > 0 ? 'error' : ''}" id="conn-failed">${this.formatNumber(data.connection.failedConnections)}</span></div>
-            <div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed #333;">
-              <span class="label">Started:</span><span class="value" id="start-time">${this.formatTimestamp(data.startTime)}</span>
-            </div>
-          </div>
-
-          <div class="panel">
-            <div class="panel-title">[ SPEEDTEST ]</div>
-            <div class="online-indicator">
-              <span class="online-dot ${data.speedtest.isOnline ? 'online' : 'offline'}" id="online-dot"></span>
-              <span class="value ${data.speedtest.isOnline ? 'success' : 'error'}" id="online-status">${data.speedtest.isOnline ? 'Online' : 'Offline'}</span>
-            </div>
-            <div class="row"><span class="label">Download:</span><span class="value" id="speed-download">${data.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
-            <div class="speed-bar"><div class="speed-fill" id="speed-download-bar" style="width: ${Math.min(data.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
-            <div class="row"><span class="label">Upload:</span><span class="value" id="speed-upload">${data.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
-            <div class="speed-bar"><div class="speed-fill" id="speed-upload-bar" style="width: ${Math.min(data.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
-            <div class="row"><span class="label">Latency:</span><span class="value" id="speed-latency">${data.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
-            <div class="btn-row"><button class="btn" id="run-speedtest">Run Test</button></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- URLs View -->
-      <div id="view-urls" class="view">
-        <div class="table-controls">
-          <input type="text" class="search-input" id="url-search" placeholder="Filter URLs...">
-          <span class="table-info" id="url-info">Loading...</span>
-        </div>
-        <div class="table-container">
-          <table class="data-table" id="url-table">
-            <thead>
-              <tr>
-                <th data-sort="url">URL <span class="sort-icon">^</span></th>
-                <th data-sort="contentType">Type <span class="sort-icon">^</span></th>
-                <th data-sort="size">Size <span class="sort-icon">^</span></th>
-                <th data-sort="hitCount">Hits <span class="sort-icon">^</span></th>
-                <th data-sort="missCount">Misses <span class="sort-icon">^</span></th>
-                <th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
-                <th data-sort="lastAccessed">Last Access <span class="sort-icon">^</span></th>
-              </tr>
-            </thead>
-            <tbody id="url-tbody"></tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- Domains View -->
-      <div id="view-domains" class="view">
-        <div class="table-controls">
-          <input type="text" class="search-input" id="domain-search" placeholder="Filter domains...">
-          <span class="table-info" id="domain-info">Loading...</span>
-        </div>
-        <div class="table-container">
-          <table class="data-table" id="domain-table">
-            <thead>
-              <tr>
-                <th data-sort="domain">Domain <span class="sort-icon">^</span></th>
-                <th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
-                <th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
-                <th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
-                <th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
-                <th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
-              </tr>
-            </thead>
-            <tbody id="domain-tbody"></tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- Types View -->
-      <div id="view-types" class="view">
-        <div class="table-controls">
-          <input type="text" class="search-input" id="type-search" placeholder="Filter types...">
-          <span class="table-info" id="type-info">Loading...</span>
-        </div>
-        <div class="table-container">
-          <table class="data-table" id="type-table">
-            <thead>
-              <tr>
-                <th data-sort="contentType">Content Type <span class="sort-icon">^</span></th>
-                <th data-sort="totalResources">Resources <span class="sort-icon">^</span></th>
-                <th data-sort="totalSize">Total Size <span class="sort-icon">^</span></th>
-                <th data-sort="totalHits">Hits <span class="sort-icon">^</span></th>
-                <th data-sort="totalMisses">Misses <span class="sort-icon">^</span></th>
-                <th data-sort="hitRate">Hit Rate <span class="sort-icon">^</span></th>
-              </tr>
-            </thead>
-            <tbody id="type-tbody"></tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div class="footer">
-      <span class="refresh-info">
-        <span class="prompt">$</span> Last refresh: <span id="last-refresh">${new Date().toLocaleTimeString()}</span><span class="cursor"></span>
-      </span>
-      <div class="status">
-        <span class="status-dot"></span>
-        <span>Auto-refresh: 2s</span>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    // State
-    let resourceData = { resources: [], domains: [], contentTypes: [] };
-    let sortState = {
-      urls: { column: 'lastAccessed', direction: 'desc' },
-      domains: { column: 'totalHits', direction: 'desc' },
-      types: { column: 'totalHits', direction: 'desc' }
-    };
-
-    // Utilities
-    const formatNumber = n => n.toLocaleString();
-    const formatBytes = bytes => {
-      if (bytes === 0) return '0 B';
-      const k = 1024, sizes = ['B', 'KB', 'MB', 'GB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    };
-    const formatDuration = ms => {
-      const s = Math.floor(ms / 1000), m = Math.floor(s / 60), h = Math.floor(m / 60), d = Math.floor(h / 24);
-      if (d > 0) return d + 'd ' + (h % 24) + 'h';
-      if (h > 0) return h + 'h ' + (m % 60) + 'm';
-      if (m > 0) return m + 'm ' + (s % 60) + 's';
-      return s + 's';
-    };
-    const formatTimestamp = ts => {
-      if (!ts || ts === 0) return 'never';
-      const ago = Date.now() - ts;
-      if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
-      if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
-      if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
-      return new Date(ts).toLocaleDateString();
-    };
-    const getGaugeClass = rate => rate >= 80 ? 'good' : rate >= 50 ? 'warning' : 'bad';
-
-    // Navigation
-    document.querySelectorAll('.nav-tab').forEach(tab => {
-      tab.addEventListener('click', () => {
-        document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-        document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-        tab.classList.add('active');
-        document.getElementById('view-' + tab.dataset.view).classList.add('active');
-        if (tab.dataset.view !== 'overview') loadResourceData();
-      });
-    });
-
-    // Sort function
-    function sortData(data, column, direction) {
-      return [...data].sort((a, b) => {
-        let valA = a[column], valB = b[column];
-        if (typeof valA === 'string') valA = valA.toLowerCase();
-        if (typeof valB === 'string') valB = valB.toLowerCase();
-        if (valA < valB) return direction === 'asc' ? -1 : 1;
-        if (valA > valB) return direction === 'asc' ? 1 : -1;
-        return 0;
-      });
-    }
-
-    // Hit rate bar HTML
-    function hitRateBar(rate) {
-      const cls = getGaugeClass(rate);
-      return '<span class="hit-rate-bar"><span class="hit-rate-fill ' + cls + '" style="width:' + rate + '%"></span></span>' + rate + '%';
-    }
-
-    // Render URL table
-    function renderUrlTable(filter = '') {
-      const tbody = document.getElementById('url-tbody');
-      let data = resourceData.resources;
-      if (filter) data = data.filter(r => r.url.toLowerCase().includes(filter.toLowerCase()));
-      data = sortData(data, sortState.urls.column, sortState.urls.direction);
-
-      // Add computed hitRate
-      data.forEach(r => {
-        const total = r.hitCount + r.missCount;
-        r.hitRate = total > 0 ? Math.round((r.hitCount / total) * 100) : 0;
-      });
-
-      tbody.innerHTML = data.map(r =>
-        '<tr>' +
-        '<td class="url" title="' + r.url + '">' + r.url + '</td>' +
-        '<td>' + (r.contentType || 'unknown') + '</td>' +
-        '<td class="num">' + formatBytes(r.size) + '</td>' +
-        '<td class="num">' + formatNumber(r.hitCount) + '</td>' +
-        '<td class="num">' + formatNumber(r.missCount) + '</td>' +
-        '<td>' + hitRateBar(r.hitRate) + '</td>' +
-        '<td>' + formatTimestamp(r.lastAccessed) + '</td>' +
-        '</tr>'
-      ).join('');
-
-      document.getElementById('url-info').textContent = data.length + ' of ' + resourceData.resources.length + ' resources';
-    }
-
-    // Render domain table
-    function renderDomainTable(filter = '') {
-      const tbody = document.getElementById('domain-tbody');
-      let data = resourceData.domains;
-      if (filter) data = data.filter(d => d.domain.toLowerCase().includes(filter.toLowerCase()));
-      data = sortData(data, sortState.domains.column, sortState.domains.direction);
-
-      tbody.innerHTML = data.map(d =>
-        '<tr>' +
-        '<td>' + d.domain + '</td>' +
-        '<td class="num">' + formatNumber(d.totalResources) + '</td>' +
-        '<td class="num">' + formatBytes(d.totalSize) + '</td>' +
-        '<td class="num">' + formatNumber(d.totalHits) + '</td>' +
-        '<td class="num">' + formatNumber(d.totalMisses) + '</td>' +
-        '<td>' + hitRateBar(d.hitRate) + '</td>' +
-        '</tr>'
-      ).join('');
-
-      document.getElementById('domain-info').textContent = data.length + ' domains';
-    }
-
-    // Render type table
-    function renderTypeTable(filter = '') {
-      const tbody = document.getElementById('type-tbody');
-      let data = resourceData.contentTypes;
-      if (filter) data = data.filter(t => t.contentType.toLowerCase().includes(filter.toLowerCase()));
-      data = sortData(data, sortState.types.column, sortState.types.direction);
-
-      tbody.innerHTML = data.map(t =>
-        '<tr>' +
-        '<td>' + t.contentType + '</td>' +
-        '<td class="num">' + formatNumber(t.totalResources) + '</td>' +
-        '<td class="num">' + formatBytes(t.totalSize) + '</td>' +
-        '<td class="num">' + formatNumber(t.totalHits) + '</td>' +
-        '<td class="num">' + formatNumber(t.totalMisses) + '</td>' +
-        '<td>' + hitRateBar(t.hitRate) + '</td>' +
-        '</tr>'
-      ).join('');
-
-      document.getElementById('type-info').textContent = data.length + ' content types';
-    }
-
-    // Sort handlers
-    function setupSortHandlers(tableId, stateKey, renderFn) {
-      document.querySelectorAll('#' + tableId + ' th[data-sort]').forEach(th => {
-        th.addEventListener('click', () => {
-          const col = th.dataset.sort;
-          if (sortState[stateKey].column === col) {
-            sortState[stateKey].direction = sortState[stateKey].direction === 'asc' ? 'desc' : 'asc';
-          } else {
-            sortState[stateKey].column = col;
-            sortState[stateKey].direction = 'desc';
-          }
-          // Update sort icons
-          document.querySelectorAll('#' + tableId + ' th').forEach(h => h.classList.remove('sorted'));
-          th.classList.add('sorted');
-          th.querySelector('.sort-icon').textContent = sortState[stateKey].direction === 'asc' ? '^' : 'v';
-          renderFn();
-        });
-      });
-    }
-
-    setupSortHandlers('url-table', 'urls', () => renderUrlTable(document.getElementById('url-search').value));
-    setupSortHandlers('domain-table', 'domains', () => renderDomainTable(document.getElementById('domain-search').value));
-    setupSortHandlers('type-table', 'types', () => renderTypeTable(document.getElementById('type-search').value));
-
-    // Search handlers
-    document.getElementById('url-search').addEventListener('input', e => renderUrlTable(e.target.value));
-    document.getElementById('domain-search').addEventListener('input', e => renderDomainTable(e.target.value));
-    document.getElementById('type-search').addEventListener('input', e => renderTypeTable(e.target.value));
-
-    // Load resource data
-    async function loadResourceData() {
-      try {
-        const response = await fetch('/sw-dash/resources');
-        resourceData = await response.json();
-        document.getElementById('url-count').textContent = resourceData.resourceCount;
-        renderUrlTable(document.getElementById('url-search').value);
-        renderDomainTable(document.getElementById('domain-search').value);
-        renderTypeTable(document.getElementById('type-search').value);
-      } catch (err) {
-        console.error('Failed to load resource data:', err);
-      }
-    }
-
-    // Update overview
-    function updateOverview(data) {
-      document.getElementById('uptime').textContent = 'Uptime: ' + formatDuration(data.uptime);
-      document.getElementById('cache-hits').textContent = formatNumber(data.cache.hits);
-      document.getElementById('cache-misses').textContent = formatNumber(data.cache.misses);
-      document.getElementById('cache-errors').textContent = formatNumber(data.cache.errors);
-      document.getElementById('cache-bytes').textContent = formatBytes(data.cache.bytesServedFromCache);
-      document.getElementById('cache-fetched').textContent = formatBytes(data.cache.bytesFetched);
-      document.getElementById('cache-resources').textContent = data.resourceCount || 0;
-
-      const cacheGauge = document.getElementById('cache-gauge');
-      cacheGauge.style.width = data.cacheHitRate + '%';
-      cacheGauge.className = 'gauge-fill ' + getGaugeClass(data.cacheHitRate);
-      document.getElementById('cache-gauge-text').textContent = data.cacheHitRate + '% hit rate';
-
-      document.getElementById('net-total').textContent = formatNumber(data.network.totalRequests);
-      document.getElementById('net-success').textContent = formatNumber(data.network.successfulRequests);
-      document.getElementById('net-failed').textContent = formatNumber(data.network.failedRequests);
-      document.getElementById('net-timeouts').textContent = formatNumber(data.network.timeouts);
-      document.getElementById('net-latency').textContent = data.network.averageLatency + 'ms';
-      document.getElementById('net-bytes').textContent = formatBytes(data.network.totalBytesTransferred);
-
-      const netGauge = document.getElementById('net-gauge');
-      netGauge.style.width = data.networkSuccessRate + '%';
-      netGauge.className = 'gauge-fill ' + getGaugeClass(data.networkSuccessRate);
-      document.getElementById('net-gauge-text').textContent = data.networkSuccessRate + '% success';
-
-      document.getElementById('upd-checks').textContent = formatNumber(data.update.totalChecks);
-      document.getElementById('upd-success').textContent = formatNumber(data.update.successfulChecks);
-      document.getElementById('upd-failed').textContent = formatNumber(data.update.failedChecks);
-      document.getElementById('upd-found').textContent = formatNumber(data.update.updatesFound);
-      document.getElementById('upd-applied').textContent = formatNumber(data.update.updatesApplied);
-      document.getElementById('upd-last-check').textContent = formatTimestamp(data.update.lastCheckTimestamp);
-
-      document.getElementById('conn-clients').textContent = formatNumber(data.connection.connectedClients);
-      document.getElementById('conn-attempts').textContent = formatNumber(data.connection.totalConnectionAttempts);
-      document.getElementById('conn-success').textContent = formatNumber(data.connection.successfulConnections);
-      document.getElementById('conn-failed').textContent = formatNumber(data.connection.failedConnections);
-      document.getElementById('start-time').textContent = formatTimestamp(data.startTime);
-
-      if (data.speedtest) {
-        document.getElementById('online-dot').className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
-        document.getElementById('online-status').textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
-        document.getElementById('online-status').className = 'value ' + (data.speedtest.isOnline ? 'success' : 'error');
-        document.getElementById('speed-download').textContent = data.speedtest.lastDownloadSpeedMbps.toFixed(2) + ' Mbps';
-        document.getElementById('speed-upload').textContent = data.speedtest.lastUploadSpeedMbps.toFixed(2) + ' Mbps';
-        document.getElementById('speed-latency').textContent = data.speedtest.lastLatencyMs.toFixed(0) + ' ms';
-        document.getElementById('speed-download-bar').style.width = Math.min(data.speedtest.lastDownloadSpeedMbps, 100) + '%';
-        document.getElementById('speed-upload-bar').style.width = Math.min(data.speedtest.lastUploadSpeedMbps, 100) + '%';
-      }
-
-      document.getElementById('url-count').textContent = data.resourceCount || 0;
-      document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
-    }
-
-    // Speedtest
-    let speedtestRunning = false;
-    document.getElementById('run-speedtest').addEventListener('click', async () => {
-      if (speedtestRunning) return;
-      speedtestRunning = true;
-      const btn = document.getElementById('run-speedtest');
-      btn.textContent = 'Testing...';
-      btn.disabled = true;
-
-      try {
-        const response = await fetch('/sw-dash/speedtest');
-        const result = await response.json();
-        document.getElementById('online-dot').className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
-        document.getElementById('online-status').textContent = result.isOnline ? 'Online' : 'Offline';
-        document.getElementById('online-status').className = 'value ' + (result.isOnline ? 'success' : 'error');
-        if (result.download) {
-          document.getElementById('speed-download').textContent = result.download.speedMbps.toFixed(2) + ' Mbps';
-          document.getElementById('speed-download-bar').style.width = Math.min(result.download.speedMbps, 100) + '%';
-        }
-        if (result.upload) {
-          document.getElementById('speed-upload').textContent = result.upload.speedMbps.toFixed(2) + ' Mbps';
-          document.getElementById('speed-upload-bar').style.width = Math.min(result.upload.speedMbps, 100) + '%';
-        }
-        if (result.latency) {
-          document.getElementById('speed-latency').textContent = result.latency.durationMs.toFixed(0) + ' ms';
-        }
-      } catch (err) {
-        console.error('Speedtest failed:', err);
-        document.getElementById('online-dot').className = 'online-dot offline';
-        document.getElementById('online-status').textContent = 'Offline';
-        document.getElementById('online-status').className = 'value error';
-      } finally {
-        speedtestRunning = false;
-        btn.textContent = 'Run Test';
-        btn.disabled = false;
-      }
-    });
-
-    // Auto-refresh
-    setInterval(async () => {
-      try {
-        const response = await fetch('/sw-dash/metrics');
-        const data = await response.json();
-        updateOverview(data);
-      } catch (err) {
-        console.error('Failed to fetch metrics:', err);
-      }
-    }, 2000);
-
-    // Initial load
-    loadResourceData();
-  </script>
+  <sw-dash-app></sw-dash-app>
+  <script type="module" src="/sw-dash/bundle.js"></script>
 </body>
 </html>`;
  }

-  /**
-   * Format bytes to human-readable string
-   */
-  private formatBytes(bytes: number): string {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
-
-  /**
-   * Format duration to human-readable string
-   */
-  private formatDuration(ms: number): string {
-    const seconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-
-    if (days > 0) return `${days}d ${hours % 24}h`;
-    if (hours > 0) return `${hours}h ${minutes % 60}m`;
-    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
-    return `${seconds}s`;
-  }
-
-  /**
-   * Format timestamp to relative time string
-   */
-  private formatTimestamp(ts: number): string {
-    if (!ts || ts === 0) return 'never';
-    const ago = Date.now() - ts;
-    if (ago < 60000) return `${Math.floor(ago / 1000)}s ago`;
-    if (ago < 3600000) return `${Math.floor(ago / 60000)}m ago`;
-    if (ago < 86400000) return `${Math.floor(ago / 3600000)}h ago`;
-    return new Date(ts).toLocaleDateString();
-  }
-
-  /**
-   * Format number with thousands separator
-   */
-  private formatNumber(num: number): string {
-    return num.toLocaleString();
-  }
-
-  /**
-   * Get gauge class based on percentage
-   */
-  private getGaugeClass(rate: number): string {
-    if (rate >= 80) return 'good';
-    if (rate >= 50) return 'warning';
-    return 'bad';
-  }
 }

 // Export singleton getter
--- a/ts_web_serviceworker/classes.persistentstore.ts
+++ b/ts_web_serviceworker/classes.persistentstore.ts
@@ -0,0 +1,399 @@
+import * as plugins from './plugins.js';
+import { logger } from './logging.js';
+import type { serviceworker } from '../dist_ts_interfaces/index.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: 'losslessServiceworker',
+      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 {
+      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}`);
+      throw error;
+    }
+  }
+
+  /**
+   * 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 {
+      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}`);
+    } 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;
+  }): 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);
+      }
+
+      // 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();
--- a/ts_web_serviceworker/classes.serviceworker.ts
+++ b/ts_web_serviceworker/classes.serviceworker.ts
@@ -12,6 +12,7 @@ import { UpdateManager } from './classes.updatemanager.js';
 import { NetworkManager } from './classes.networkmanager.js';
 import { TaskManager } from './classes.taskmanager.js';
 import { ServiceworkerBackend } from './classes.backend.js';
+import { getPersistentStore } from './classes.persistentstore.js';

 export class ServiceWorker {
  // STATIC
@@ -63,6 +64,14 @@ export class ServiceWorker {
      // its important to not go async before event.waitUntil
      try {
        logger.log('success', `service worker installed! TimeStamp = ${new Date().toISOString()}`);
+
+        // Log installation event
+        const persistentStore = getPersistentStore();
+        await persistentStore.init();
+        await persistentStore.logEvent('sw_installed', 'Service worker installed', {
+          timestamp: new Date().toISOString(),
+        });
+
        selfArg.skipWaiting();
        logger.log('note', `Called skip waiting!`);
        done.resolve();
@@ -84,6 +93,12 @@ 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.logEvent('sw_activated', 'Service worker activated', {
+          timestamp: new Date().toISOString(),
+        });
+
        done.resolve();
        logger.log('success', `Service worker activated at ${new Date().toISOString()}`);

@@ -105,6 +120,17 @@ export class ServiceWorker {
      this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
        new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
          logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
+
+          // Log cache invalidation event (survives)
+          const persistentStore = getPersistentStore();
+          await persistentStore.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();
--- a/ts_web_serviceworker/index.ts
+++ b/ts_web_serviceworker/index.ts
@@ -1,10 +1,4 @@
-// TypeScript declatations
-import * as env from './env.js';
-declare var self: env.ServiceWindow;
-
-import { ServiceWorker } from './classes.serviceworker.js';
-
-const sw = new ServiceWorker(self);
-
-// Export getter for service worker instance (used by dashboard for TypedSocket access)
-export const getServiceWorkerInstance = (): ServiceWorker => sw;
+// Service worker entry point - NO EXPORTS here!
+// Exports at entry point cause tsbundle to output ESM format which service workers can't use.
+// The actual initialization happens in init.ts which other modules can import from.
+import './init.js';
--- a/ts_web_serviceworker/init.ts
+++ b/ts_web_serviceworker/init.ts
@@ -0,0 +1,10 @@
+// Service worker initialization - creates and exports the SW instance
+// Other modules in the bundle can import from here
+import * as env from './env.js';
+declare var self: env.ServiceWindow;
+
+import { ServiceWorker } from './classes.serviceworker.js';
+
+const sw = new ServiceWorker(self);
+
+export const getServiceWorkerInstance = (): ServiceWorker => sw;
--- a/ts_web_serviceworker_client/classes.actionmanager.ts
+++ b/ts_web_serviceworker_client/classes.actionmanager.ts
@@ -26,8 +26,14 @@ const DEFAULT_CONNECTION_OPTIONS: IConnectionOptions = {
 * * the serviceWorker method
 * * the deesComms method using BroadcastChannel
 */
+/**
+ * Callback type for status update subscriptions
+ */
+export type TStatusUpdateCallback = (status: interfaces.serviceworker.IStatusUpdate) => void;
+
 export class ActionManager {
  public deesComms = new plugins.deesComms.DeesComms();
+  private statusCallbacks: Set<TStatusUpdateCallback> = new Set();

  constructor() {
    // lets define handlers on the client/tab side
@@ -37,6 +43,49 @@ export class ActionManager {
      }, 200);
      return {};
    });
+
+    // Handler for status updates from service worker
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_StatusUpdate>('serviceworker_statusUpdate', async (status) => {
+      // Forward to all registered callbacks
+      for (const callback of this.statusCallbacks) {
+        try {
+          callback(status);
+        } catch (error) {
+          logger.log('warn', `Status callback error: ${error}`);
+        }
+      }
+      return {};
+    });
+  }
+
+  /**
+   * Subscribe to status updates from the service worker
+   * @returns Unsubscribe function
+   */
+  public subscribeToStatusUpdates(callback: TStatusUpdateCallback): () => void {
+    this.statusCallbacks.add(callback);
+    logger.log('info', 'Subscribed to service worker status updates');
+    return () => {
+      this.statusCallbacks.delete(callback);
+      logger.log('info', 'Unsubscribed from service worker status updates');
+    };
+  }
+
+  /**
+   * Get current service worker status
+   */
+  public async getServiceWorkerStatus(): Promise<interfaces.serviceworker.IRequest_Serviceworker_GetStatus['response'] | null> {
+    try {
+      const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus');
+      const response = await Promise.race([
+        tr.fire({}),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000)),
+      ]);
+      return response;
+    } catch (error) {
+      logger.log('warn', `Failed to get service worker status: ${error}`);
+      return null;
+    }
  }

  /**
Author	SHA1	Message	Date
Juergen Kunz	5bc24ad88b	v7.4.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 15:13:48 +00:00
Juergen Kunz	a35775499b	feat(serviceworker): Add persistent event store, cumulative metrics and dashboard events UI for service worker observability	2025-12-04 15:13:48 +00:00
Juergen Kunz	f9a8b61743	v7.3.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 14:36:35 +00:00
Juergen Kunz	ffad23e6cf	feat(serviceworker): Modernize SW dashboard UI and improve service worker backend and server tooling	2025-12-04 14:36:35 +00:00
Juergen Kunz	cb429b1f5f	v7.2.0 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 14:09:10 +00:00
Juergen Kunz	c4e0e9b915	feat(serviceworker): Add service worker status updates, EventBus and UI status pill for realtime observability	2025-12-04 14:09:10 +00:00
Juergen Kunz	8bb4814350	v7.1.0 Some checks failed Default (tags) / security (push) Failing after 17s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 13:47:14 +00:00
Juergen Kunz	9c7e17bdbb	feat(swdash): Add live speedtest progress UI to service worker dashboard	2025-12-04 13:47:14 +00:00
Juergen Kunz	cbff5a2126	v7.0.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 13:42:19 +00:00
Juergen Kunz	43a335ab3a	BREAKING CHANGE(serviceworker): Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract	2025-12-04 13:42:19 +00:00
Juergen Kunz	5f015380be	v6.8.1 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 13:29:43 +00:00
Juergen Kunz	ba12ba561b	fix(web_serviceworker): Move service worker initialization to init.ts and remove exports from service worker entrypoint to avoid ESM bundle output	2025-12-04 13:29:43 +00:00
Juergen Kunz	aadec22023	v6.8.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-04 13:10:15 +00:00
Juergen Kunz	4db6fa6771	feat(swdash): Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers	2025-12-04 13:10:15 +00:00