v7.5.0

changelog.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 2025-12-04 - 7.5.0 - feat(serviceworker)
+Add real-time service worker push updates and DeesComms integration (metrics, events, resource caching)
+
+- Integrate DeesComms push channel for real-time SW → client communication and export/consume deesComms in relevant plugin modules.
+- Add typed push message interfaces for events, metrics snapshots and resource-cached notifications in serviceworker interfaces.
+- Implement backend push methods: pushEvent, pushMetricsUpdate (with 500ms throttle) and pushResourceCached in ServiceworkerBackend.
+- Trigger push updates from MetricsCollector and PersistentStore so metrics and logged events are broadcast to connected clients.
+- Add client-side DeesComms handlers in sw-dash app: receive metrics, event logs and resource notifications; add heartbeat and initial HTTP seed to maintain SW health state.
+- Add event push listener and cleanup in sw-dash-events component to prepend incoming events and avoid leaks.
+- Expose getServiceWorkerBackend() from SW init for internal modules to call push methods.
+- Misc: implement request deduplication and various robustness improvements (throttling, heartbeat, safer polling, removed noisy debug logs).
+
+## 2025-12-04 - 7.4.1 - fix(web_serviceworker)
+Improve service worker persistence, metrics and caching robustness
+
+- Ensure persistent store is initialized before use in dashboard handlers and service worker activation/handlers (calls to persistentStore.init())
+- Make serveCumulativeMetrics async and align fetchEvent.respondWith usage (remove unnecessary Promise.resolve)
+- Change persistent WebStore database name to 'losslessServiceworkerPersistent' to separate durable store from runtime store
+- Make PersistentStore.init() more resilient: add detailed logging, avoid throwing on init failure, mark initialized to prevent retry loops, and start periodic save only after load
+- Ensure logEvent awaits initialization and adds defensive logging around reading/writing the event log
+- Add request deduplication logic and improved cache handling in CacheManager (fetchWithDeduplication usage and safer respondWith)
+
+## 2025-12-04 - 7.4.0 - feat(serviceworker)
+Add persistent event store, cumulative metrics and dashboard events UI for service worker observability
+
+- Add PersistentStore (ts_web_serviceworker/classes.persistentstore.ts) to persist event log and cumulative metrics with retention policy and periodic saving.
+- Introduce persistent event types and interfaces for event log and cumulative metrics (ts_interfaces/serviceworker.ts).
+- Log lifecycle, update, network and speedtest events to the persistent store (install, activate, update available/applied/error, network online/offline, speedtest started/completed/failed, cache invalidation).
+- Expose persistent-store APIs via typed handlers in the service worker backend: serviceworker_getEventLog, serviceworker_getCumulativeMetrics, serviceworker_clearEventLog, serviceworker_getEventCount.
+- Serve new dashboard endpoints from the service worker: /sw-dash/events (GET), /sw-dash/events/count (GET), /sw-dash/cumulative-metrics (GET) and DELETE /sw-dash/events to clear the log (handled in classes.cachemanager and classes.dashboard).
+- Add sw-dash events panel component (ts_swdash/sw-dash-events.ts) and integrate an Events tab into the dashboard UI (ts_swdash/sw-dash-app.ts, sw-dash-overview.ts shows 1h event count).
+- Reset cumulative metrics on cache invalidation and increment swRestartCount on PersistentStore.init().
+- Record speedtest lifecycle events (started/completed/failed) and include details in the event log.
+
 ## 2025-12-04 - 7.3.0 - feat(serviceworker)
 Modernize SW dashboard UI and improve service worker backend and server tooling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "7.3.0",
+  "version": "7.5.0",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {

ts/00_commitinfo_data.ts

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

ts_interfaces/serviceworker.ts

@@ -313,4 +313,200 @@ export interface IRequest_Serviceworker_GetStatus
     connectedClients: number;
     lastUpdateCheck: number;
   };
+}
+
+// ===============
+// Persistent Store interfaces
+// ===============
+
+/**
+ * Event types for the persistent event log
+ */
+export type TEventType =
+  | 'sw_installed'
+  | 'sw_activated'
+  | 'sw_updated'
+  | 'sw_stopped'
+  | 'speedtest_started'
+  | 'speedtest_completed'
+  | 'speedtest_failed'
+  | 'backend_connected'
+  | 'backend_disconnected'
+  | 'cache_invalidated'
+  | 'network_online'
+  | 'network_offline'
+  | 'update_check'
+  | 'error';
+
+/**
+ * Event log entry structure
+ * Survives both SW restarts AND cache invalidation
+ */
+export interface IEventLogEntry {
+  id: string;
+  timestamp: number;
+  type: TEventType;
+  message: string;
+  details?: Record<string, any>;
+}
+
+/**
+ * Cumulative metrics that persist across SW restarts
+ * Reset on cache invalidation
+ */
+export interface ICumulativeMetrics {
+  firstSeenTimestamp: number;
+  totalCacheHits: number;
+  totalCacheMisses: number;
+  totalCacheErrors: number;
+  totalBytesServedFromCache: number;
+  totalBytesFetched: number;
+  totalNetworkRequests: number;
+  totalNetworkSuccesses: number;
+  totalNetworkFailures: number;
+  totalNetworkTimeouts: number;
+  totalBytesTransferred: number;
+  totalUpdateChecks: number;
+  totalUpdatesApplied: number;
+  totalSpeedtests: number;
+  swRestartCount: number;
+  lastUpdatedTimestamp: number;
+}
+
+/**
+ * Request to get event log from service worker
+ */
+export interface IRequest_Serviceworker_GetEventLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetEventLog
+  > {
+  method: 'serviceworker_getEventLog';
+  request: {
+    limit?: number;
+    type?: TEventType;
+    since?: number;
+  };
+  response: {
+    events: IEventLogEntry[];
+    totalCount: number;
+  };
+}
+
+/**
+ * Request to get cumulative metrics from service worker
+ */
+export interface IRequest_Serviceworker_GetCumulativeMetrics
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetCumulativeMetrics
+  > {
+  method: 'serviceworker_getCumulativeMetrics';
+  request: {};
+  response: ICumulativeMetrics;
+}
+
+/**
+ * Request to clear event log
+ */
+export interface IRequest_Serviceworker_ClearEventLog
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_ClearEventLog
+  > {
+  method: 'serviceworker_clearEventLog';
+  request: {};
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Request to get event count since a timestamp
+ */
+export interface IRequest_Serviceworker_GetEventCount
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetEventCount
+  > {
+  method: 'serviceworker_getEventCount';
+  request: {
+    since: number;
+  };
+  response: {
+    count: number;
+  };
+}
+
+// ===============
+// Push message interfaces (SW → Clients via DeesComms)
+// ===============
+
+/**
+ * Push notification when a new event is logged
+ * Sent via DeesComms BroadcastChannel
+ */
+export interface IMessage_Serviceworker_EventLogged
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_EventLogged
+  > {
+  method: 'serviceworker_eventLogged';
+  request: IEventLogEntry;
+  response: {};
+}
+
+/**
+ * Metrics snapshot for push updates
+ */
+export interface IMetricsSnapshot {
+  cache: {
+    hits: number;
+    misses: number;
+    errors: number;
+    bytesServedFromCache: number;
+    bytesFetched: number;
+  };
+  network: {
+    totalRequests: number;
+    successfulRequests: number;
+    failedRequests: number;
+  };
+  cacheHitRate: number;
+  networkSuccessRate: number;
+  resourceCount: number;
+  uptime: number;
+  timestamp: number;
+}
+
+/**
+ * Push notification for metrics updates
+ * Sent via DeesComms BroadcastChannel (throttled)
+ */
+export interface IMessage_Serviceworker_MetricsUpdate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_MetricsUpdate
+  > {
+  method: 'serviceworker_metricsUpdate';
+  request: IMetricsSnapshot;
+  response: {};
+}
+
+/**
+ * Push notification when a new resource is cached
+ */
+export interface IMessage_Serviceworker_ResourceCached
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_ResourceCached
+  > {
+  method: 'serviceworker_resourceCached';
+  request: {
+    url: string;
+    contentType: string;
+    size: number;
+    cached: boolean;
+  };
+  response: {};
 }

ts_swdash/plugins.ts

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

ts_swdash/sw-dash-app.ts

@@ -1,19 +1,21 @@
-import { LitElement, html, css, state, customElement } from './plugins.js';
+import { LitElement, html, css, state, customElement, deesComms } from './plugins.js';
 import type { CSSResult, TemplateResult } from './plugins.js';
 import { sharedStyles, terminalStyles, navStyles } from './sw-dash-styles.js';
 import type { IMetricsData } from './sw-dash-overview.js';
 import type { ICachedResource } from './sw-dash-urls.js';
 import type { IDomainStats } from './sw-dash-domains.js';
 import type { IContentTypeStats } from './sw-dash-types.js';
+import type { serviceworker } from '../dist_ts_interfaces/index.js';
 
 // Import components to register them
 import './sw-dash-overview.js';
 import './sw-dash-urls.js';
 import './sw-dash-domains.js';
 import './sw-dash-types.js';
+import './sw-dash-events.js';
 import './sw-dash-table.js';
 
-type ViewType = 'overview' | 'urls' | 'domains' | 'types';
+type ViewType = 'overview' | 'urls' | 'domains' | 'types' | 'events';
 
 interface IResourceData {
   resources: ICachedResource[];
@@ -133,39 +135,194 @@ export class SwDashApp extends LitElement {
     resourceCount: 0
   };
   @state() accessor lastRefresh = new Date().toLocaleTimeString();
+  @state() accessor isConnected = false;
 
-  private refreshInterval: ReturnType<typeof setInterval> | null = null;
+  // DeesComms for receiving push updates from service worker
+  private comms: deesComms.DeesComms | null = null;
+
+  // Heartbeat interval (30 seconds) for SW health check
+  private heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+  private readonly HEARTBEAT_INTERVAL_MS = 30000;
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.loadMetrics();
-    this.loadResourceData();
-    // Auto-refresh every 2 seconds
-    this.refreshInterval = setInterval(() => {
-      this.loadMetrics();
-      if (this.currentView !== 'overview') {
-        this.loadResourceData();
-      }
-    }, 2000);
+    // Initial HTTP seed request to wake up SW and get initial data
+    this.loadInitialData();
+    // Setup push listeners via DeesComms
+    this.setupPushListeners();
+    // Start heartbeat for SW health check
+    this.startHeartbeat();
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    if (this.refreshInterval) {
-      clearInterval(this.refreshInterval);
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
     }
   }
 
-  private async loadMetrics(): Promise<void> {
+  /**
+   * Initial HTTP request to seed data and wake up service worker
+   */
+  private async loadInitialData(): Promise<void> {
     try {
-      const response = await fetch('/sw-dash/metrics');
-      this.metrics = await response.json();
+      // Fetch metrics (wakes up SW)
+      const metricsResponse = await fetch('/sw-dash/metrics');
+      this.metrics = await metricsResponse.json();
       this.lastRefresh = new Date().toLocaleTimeString();
+      this.isConnected = true;
+
+      // Also load resources
+      const resourcesResponse = await fetch('/sw-dash/resources');
+      this.resourceData = await resourcesResponse.json();
     } catch (err) {
-      console.error('Failed to load metrics:', err);
+      console.error('Failed to load initial data:', err);
+      this.isConnected = false;
     }
   }
 
+  /**
+   * Setup DeesComms handlers for receiving push updates
+   */
+  private setupPushListeners(): void {
+    this.comms = new deesComms.DeesComms();
+
+    // Handle metrics push updates
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_MetricsUpdate>(
+      'serviceworker_metricsUpdate',
+      async (snapshot) => {
+        // Update metrics from push
+        if (this.metrics) {
+          this.metrics = {
+            ...this.metrics,
+            cache: {
+              ...this.metrics.cache,
+              hits: snapshot.cache.hits,
+              misses: snapshot.cache.misses,
+              errors: snapshot.cache.errors,
+              bytesServedFromCache: snapshot.cache.bytesServedFromCache,
+              bytesFetched: snapshot.cache.bytesFetched,
+            },
+            network: {
+              ...this.metrics.network,
+              totalRequests: snapshot.network.totalRequests,
+              successfulRequests: snapshot.network.successfulRequests,
+              failedRequests: snapshot.network.failedRequests,
+            },
+            cacheHitRate: snapshot.cacheHitRate,
+            networkSuccessRate: snapshot.networkSuccessRate,
+            resourceCount: snapshot.resourceCount,
+            uptime: snapshot.uptime,
+          };
+        } else {
+          // If no metrics yet, create minimal structure
+          this.metrics = {
+            cache: {
+              hits: snapshot.cache.hits,
+              misses: snapshot.cache.misses,
+              errors: snapshot.cache.errors,
+              bytesServedFromCache: snapshot.cache.bytesServedFromCache,
+              bytesFetched: snapshot.cache.bytesFetched,
+              averageResponseTime: 0,
+            },
+            network: {
+              totalRequests: snapshot.network.totalRequests,
+              successfulRequests: snapshot.network.successfulRequests,
+              failedRequests: snapshot.network.failedRequests,
+              timeouts: 0,
+              averageLatency: 0,
+              totalBytesTransferred: 0,
+            },
+            update: {
+              totalChecks: 0,
+              successfulChecks: 0,
+              failedChecks: 0,
+              updatesFound: 0,
+              updatesApplied: 0,
+              lastCheckTimestamp: 0,
+              lastUpdateTimestamp: 0,
+            },
+            connection: {
+              connectedClients: 0,
+              totalConnectionAttempts: 0,
+              successfulConnections: 0,
+              failedConnections: 0,
+            },
+            speedtest: {
+              lastDownloadSpeedMbps: 0,
+              lastUploadSpeedMbps: 0,
+              lastLatencyMs: 0,
+              lastTestTimestamp: 0,
+              testCount: 0,
+              isOnline: true,
+            },
+            startTime: Date.now() - snapshot.uptime,
+            uptime: snapshot.uptime,
+            cacheHitRate: snapshot.cacheHitRate,
+            networkSuccessRate: snapshot.networkSuccessRate,
+            resourceCount: snapshot.resourceCount,
+          };
+        }
+        this.lastRefresh = new Date().toLocaleTimeString();
+        this.isConnected = true;
+        return {};
+      }
+    );
+
+    // Handle event log push updates - dispatch to events component
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_EventLogged>(
+      'serviceworker_eventLogged',
+      async (entry) => {
+        // Dispatch custom event for sw-dash-events component
+        this.dispatchEvent(new CustomEvent('event-logged', {
+          detail: entry,
+          bubbles: true,
+          composed: true,
+        }));
+        return {};
+      }
+    );
+
+    // Handle resource cached push updates
+    this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_ResourceCached>(
+      'serviceworker_resourceCached',
+      async (resource) => {
+        // Update resource count optimistically
+        if (resource.cached && this.metrics) {
+          this.metrics = {
+            ...this.metrics,
+            resourceCount: this.metrics.resourceCount + 1,
+          };
+        }
+        return {};
+      }
+    );
+  }
+
+  /**
+   * Heartbeat to check SW health periodically
+   */
+  private startHeartbeat(): void {
+    this.heartbeatInterval = setInterval(async () => {
+      try {
+        const response = await fetch('/sw-dash/metrics');
+        if (response.ok) {
+          this.isConnected = true;
+          // Optionally refresh full metrics periodically
+          this.metrics = await response.json();
+          this.lastRefresh = new Date().toLocaleTimeString();
+        } else {
+          this.isConnected = false;
+        }
+      } catch {
+        this.isConnected = false;
+      }
+    }, this.HEARTBEAT_INTERVAL_MS);
+  }
+
+  /**
+   * Load resource data on demand (when switching to urls/domains/types view)
+   */
   private async loadResourceData(): Promise<void> {
     try {
       const response = await fetch('/sw-dash/resources');
@@ -183,8 +340,8 @@ export class SwDashApp extends LitElement {
   }
 
   private handleSpeedtestComplete(_e: CustomEvent): void {
-    // Refresh metrics after speedtest
-    this.loadMetrics();
+    // Refresh metrics after speedtest via HTTP
+    this.loadInitialData();
   }
 
   private formatUptime(ms: number): string {
@@ -228,6 +385,10 @@ export class SwDashApp extends LitElement {
             class="nav-tab ${this.currentView === 'types' ? 'active' : ''}"
             @click="${() => this.setView('types')}"
           >Types</button>
+          <button
+            class="nav-tab ${this.currentView === 'events' ? 'active' : ''}"
+            @click="${() => this.setView('events')}"
+          >Events</button>
         </nav>
 
         <div class="content">
@@ -249,6 +410,10 @@ export class SwDashApp extends LitElement {
           <div class="view ${this.currentView === 'types' ? 'active' : ''}">
             <sw-dash-types .contentTypes="${this.resourceData.contentTypes}"></sw-dash-types>
           </div>
+
+          <div class="view ${this.currentView === 'events' ? 'active' : ''}">
+            <sw-dash-events></sw-dash-events>
+          </div>
         </div>
 
         <div class="footer">

ts_swdash/sw-dash-events.ts

@@ -0,0 +1,386 @@
+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;
+
+  // Bound event handler reference for cleanup
+  private boundEventHandler: ((e: Event) => void) | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadEvents();
+    // Listen for pushed events from parent
+    this.setupPushEventListener();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // Clean up event listener
+    if (this.boundEventHandler) {
+      window.removeEventListener('event-logged', this.boundEventHandler);
+    }
+  }
+
+  /**
+   * Sets up listener for pushed events from service worker (via sw-dash-app)
+   */
+  private setupPushEventListener(): void {
+    this.boundEventHandler = (e: Event) => {
+      const customEvent = e as CustomEvent<IEventLogEntry>;
+      const newEvent = customEvent.detail;
+
+      // Only add if it matches current filter (or filter is 'all')
+      if (this.filter === 'all' || newEvent.type === this.filter) {
+        // Prepend new event to the list
+        this.events = [newEvent, ...this.events];
+        this.totalCount++;
+      }
+    };
+
+    // Listen at window level since events bubble up with composed: true
+    window.addEventListener('event-logged', this.boundEventHandler);
+  }
+
+  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>
+        ` : ''}
+      `}
+    `;
+  }
+}

ts_swdash/sw-dash-overview.ts

@@ -83,10 +83,38 @@ export class SwDashOverview extends LitElement {
   @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;
@@ -234,6 +262,7 @@ export class SwDashOverview extends LitElement {
             <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>

ts_web_serviceworker/classes.backend.ts

@@ -3,6 +3,7 @@ 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 {
@@ -46,6 +47,11 @@ export class ServiceworkerBackend {
   private swSelf: ServiceWorkerGlobalScope;
   private clientUpdateInterval: ReturnType<typeof setInterval> | null = null;
 
+  // Throttling for metrics updates (max 1 per 500ms)
+  private metricsUpdateThrottle: ReturnType<typeof setTimeout> | null = null;
+  private pendingMetricsUpdate = false;
+  private readonly METRICS_THROTTLE_MS = 500;
+
   constructor(optionsArg: {
     self: any;
     purgeCache: (reqArg: interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['request']) => Promise<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['response']>;
@@ -90,6 +96,36 @@ export class ServiceworkerBackend {
       };
     });
 
+    // Handler for getting event log
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog', async (reqArg) => {
+      const persistentStore = getPersistentStore();
+      return await persistentStore.getEventLog({
+        limit: reqArg.limit,
+        type: reqArg.type,
+        since: reqArg.since,
+      });
+    });
+
+    // 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();
 
@@ -102,9 +138,10 @@ export class ServiceworkerBackend {
    */
   private setupEventBusSubscriptions(): void {
     const eventBus = getEventBus();
+    const persistentStore = getPersistentStore();
 
     // Network status changes
-    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, () => {
+    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, async () => {
       this.broadcastStatusUpdate({
         source: 'network',
         type: 'online',
@@ -112,9 +149,11 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('network_online', 'Network connection restored');
     });
 
-    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, () => {
+    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, async () => {
       this.broadcastStatusUpdate({
         source: 'network',
         type: 'offline',
@@ -122,10 +161,12 @@ export class ServiceworkerBackend {
         persist: true,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('network_offline', 'Network connection lost');
     });
 
     // Update events
-    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'update',
@@ -136,9 +177,13 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('update_check', `Update available: ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
     });
 
-    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'update',
@@ -149,9 +194,13 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('sw_updated', `Service worker updated to ${payload.newVersion}`, {
+        newVersion: payload.newVersion,
+      });
     });
 
-    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, (_event, payload: any) => {
+    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, async (_event, payload: any) => {
       this.broadcastStatusUpdate({
         source: 'serviceworker',
         type: 'error',
@@ -159,6 +208,10 @@ export class ServiceworkerBackend {
         persist: true,
         timestamp: Date.now(),
       });
+      // Log to persistent store
+      await persistentStore.logEvent('error', `Update error: ${payload.error || 'Unknown error'}`, {
+        error: payload.error,
+      });
     });
 
     // Cache invalidation
@@ -170,6 +223,7 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Note: cache_invalidated event is logged in the ServiceWorker class
     });
 
     // Lifecycle events
@@ -181,6 +235,7 @@ export class ServiceworkerBackend {
         persist: false,
         timestamp: Date.now(),
       });
+      // Note: sw_activated event is logged in the ServiceWorker class
     });
   }
 
@@ -302,7 +357,7 @@ export class ServiceworkerBackend {
       title: 'Alert',
       body: alertText
     });
-    
+
     // Send message to clients who might be able to show an actual alert
     try {
       await this.deesComms.postMessage({
@@ -315,4 +370,104 @@ export class ServiceworkerBackend {
       logger.log('error', `Failed to send alert to clients: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
+
+  // ===============
+  // Push methods for real-time updates
+  // ===============
+
+  /**
+   * Pushes a new event log entry to all connected clients
+   * Called immediately when an event is logged
+   */
+  public async pushEvent(entry: interfaces.serviceworker.IEventLogEntry): Promise<void> {
+    try {
+      await this.deesComms.postMessage({
+        method: 'serviceworker_eventLogged',
+        request: entry,
+        messageId: `sw_event_${entry.id}`
+      });
+      logger.log('note', `Pushed event to clients: ${entry.type}`);
+    } catch (error) {
+      logger.log('warn', `Failed to push event: ${error}`);
+    }
+  }
+
+  /**
+   * Pushes a metrics update to all connected clients
+   * Throttled to max 1 update per 500ms to prevent spam
+   */
+  public pushMetricsUpdate(): void {
+    // Mark that we have a pending update
+    this.pendingMetricsUpdate = true;
+
+    // If we're already throttling, just wait for the next window
+    if (this.metricsUpdateThrottle) {
+      return;
+    }
+
+    // Send the update and start throttle window
+    this.sendMetricsUpdate();
+
+    this.metricsUpdateThrottle = setTimeout(() => {
+      this.metricsUpdateThrottle = null;
+      // If there was a pending update during the throttle window, send it now
+      if (this.pendingMetricsUpdate) {
+        this.sendMetricsUpdate();
+      }
+    }, this.METRICS_THROTTLE_MS);
+  }
+
+  /**
+   * Actually sends the metrics update via DeesComms
+   */
+  private async sendMetricsUpdate(): Promise<void> {
+    this.pendingMetricsUpdate = false;
+    const metrics = getMetricsCollector();
+    const metricsData = metrics.getMetrics();
+
+    const snapshot: interfaces.serviceworker.IMetricsSnapshot = {
+      cache: {
+        hits: metricsData.cache.hits,
+        misses: metricsData.cache.misses,
+        errors: metricsData.cache.errors,
+        bytesServedFromCache: metricsData.cache.bytesServedFromCache,
+        bytesFetched: metricsData.cache.bytesFetched,
+      },
+      network: {
+        totalRequests: metricsData.network.totalRequests,
+        successfulRequests: metricsData.network.successfulRequests,
+        failedRequests: metricsData.network.failedRequests,
+      },
+      cacheHitRate: metrics.getCacheHitRate(),
+      networkSuccessRate: metrics.getNetworkSuccessRate(),
+      resourceCount: metrics.getResourceCount(),
+      uptime: metricsData.uptime,
+      timestamp: Date.now(),
+    };
+
+    try {
+      await this.deesComms.postMessage({
+        method: 'serviceworker_metricsUpdate',
+        request: snapshot,
+        messageId: `sw_metrics_${Date.now()}`
+      });
+    } catch (error) {
+      logger.log('warn', `Failed to push metrics update: ${error}`);
+    }
+  }
+
+  /**
+   * Pushes notification when a resource is cached
+   */
+  public async pushResourceCached(url: string, contentType: string, size: number, cached: boolean): Promise<void> {
+    try {
+      await this.deesComms.postMessage({
+        method: 'serviceworker_resourceCached',
+        request: { url, contentType, size, cached },
+        messageId: `sw_resource_${Date.now()}`
+      });
+    } catch (error) {
+      logger.log('warn', `Failed to push resource cached: ${error}`);
+    }
+  }
 }

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(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 (

ts_web_serviceworker/classes.dashboard.ts

@@ -1,6 +1,10 @@
 import { getMetricsCollector } from './classes.metrics.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
@@ -43,6 +47,78 @@ export class DashboardGenerator {
     });
   }
 
+  /**
+   * Serves event log data
+   */
+  public async serveEventLog(searchParams: URLSearchParams): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+
+    const limit = searchParams.get('limit') ? parseInt(searchParams.get('limit')!, 10) : undefined;
+    const type = searchParams.get('type') as TEventType | undefined;
+    const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : undefined;
+
+    const result = await persistentStore.getEventLog({ limit, type, since });
+
+    return new Response(JSON.stringify(result), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves event count since a timestamp
+   */
+  public async serveEventCount(searchParams: URLSearchParams): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+
+    const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : Date.now() - 3600000; // Default: last hour
+
+    const count = await persistentStore.getEventCount(since);
+
+    return new Response(JSON.stringify({ count, since }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves cumulative metrics
+   */
+  public async serveCumulativeMetrics(): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+    const metrics = persistentStore.getCumulativeMetrics();
+
+    return new Response(JSON.stringify(metrics), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Clears the event log
+   */
+  public async clearEventLog(): Promise<Response> {
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
+    const success = await persistentStore.clearEventLog();
+
+    return new Response(JSON.stringify({ success }), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
   // Speedtest configuration
   private static readonly TEST_DURATION_MS = 5000;  // 5 seconds per test
   private static readonly CHUNK_SIZE_KB = 64;       // 64KB chunks
@@ -53,6 +129,8 @@ export class DashboardGenerator {
    */
   public async runSpeedtest(): Promise<Response> {
     const metrics = getMetricsCollector();
+    const persistentStore = getPersistentStore();
+    await persistentStore.init();
     const results: {
       latency?: { durationMs: number };
       download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
@@ -61,6 +139,9 @@ export class DashboardGenerator {
       isOnline: boolean;
     } = { isOnline: false };
 
+    // Log speedtest start
+    await persistentStore.logEvent('speedtest_started', 'Speedtest initiated');
+
     try {
       const sw = getServiceWorkerInstance();
 
@@ -124,10 +205,22 @@ export class DashboardGenerator {
         metrics.recordSpeedtest('upload', uploadSpeedMbps);
       }
 
+      // Log speedtest completion
+      await persistentStore.logEvent('speedtest_completed', 'Speedtest finished', {
+        downloadMbps: results.download?.speedMbps.toFixed(2),
+        uploadMbps: results.upload?.speedMbps.toFixed(2),
+        latencyMs: results.latency?.durationMs,
+      });
+
     } catch (error) {
       results.error = error instanceof Error ? error.message : String(error);
       results.isOnline = false;
       metrics.setOnlineStatus(false);
+
+      // Log speedtest failure
+      await persistentStore.logEvent('speedtest_failed', `Speedtest failed: ${results.error}`, {
+        error: results.error,
+      });
     }
 
     return new Response(JSON.stringify(results), {

ts_web_serviceworker/classes.metrics.ts

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

ts_web_serviceworker/classes.persistentstore.ts

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

ts_web_serviceworker/classes.serviceworker.ts

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

ts_web_serviceworker/init.ts

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