v6.7.0

changelog.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## 2025-12-04 - 6.7.0 - feat(web_serviceworker)
+Add per-resource metrics and request deduplication to service worker cache manager
+
+- Introduce per-resource tracking in metrics: ICachedResource, IDomainStats, IContentTypeStats and a resourceStats map.
+- Add MetricsCollector.recordResourceAccess(...) to record hits/misses, content-type and size; provide getters: getCachedResources, getDomainStats, getContentTypeStats and getResourceCount.
+- Reset resourceStats when metrics are reset and limit resource entries via cleanupResourceStats to avoid memory bloat.
+- Add request deduplication in CacheManager (fetchWithDeduplication) to coalesce identical concurrent fetches and a periodic safety cleanup for in-flight requests.
+- Record resource accesses on cache hit and when storing new cache entries (captures content-type and body size).
+- Expose a dashboard resources endpoint (/sw-dash/resources) served by the SW dashboard to return detailed resource data for SPA views.
+
+## 2025-12-04 - 6.6.0 - feat(web_serviceworker)
+Enable service worker dashboard speedtests via TypedSocket, expose ServiceWorker instance to dashboard, and add server-side speedtest handler
+
+- Add `serviceworker_speedtest` typed handler in TypedServer to support download/upload/latency tests from service workers
+- Export `getServiceWorkerInstance` from the web_serviceworker entrypoint so other modules (dashboard) can access the running ServiceWorker instance
+- Make ServiceWorker.typedsocket and ServiceWorker.typedrouter public to allow the dashboard to create and fire TypedSocket requests
+- Update dashboard to run latency, download and upload tests over TypedSocket instead of POSTing to /sw-typedrequest
+- Deprecate legacy servertools.Server.addTypedSocket (now a no-op) and recommend using TypedServer with SmartServe integration for WebSocket support
+
+## 2025-12-04 - 6.5.0 - feat(serviceworker)
+Add server-driven service worker cache invalidation and TypedSocket integration
+
+- TypedServer: push cache invalidation messages to service worker clients (tagged 'serviceworker') before notifying frontend clients on reload
+- Service Worker: connect to TypedServer via TypedSocket; handle 'serviceworker_cacheInvalidate' typed request to clean caches and trigger client reloads
+- Web inject: add fallback to clear caches via the Cache API when global service worker helper is not available
+- Interfaces: add IRequest_Serviceworker_CacheInvalidate typedrequest interface
+- Plugins: export typedsocket in web_serviceworker plugin surface
+- Service worker connection: retry logic and improved logging for TypedSocket connection attempts
+
+## 2025-12-04 - 6.4.0 - feat(serviceworker)
+Add speedtest support to service worker and dashboard
+
+- Add serviceworker_speedtest typed request handler to measure download, upload and latency
+- Expose dashboard speedtest endpoint (/sw-dash/speedtest) and integrate runSpeedtest flow
+- Dashboard UI: add speedtest panel, run button, visual speed bars and online indicator
+- Metrics: introduce ISpeedtestMetrics and methods (recordSpeedtest, setOnlineStatus, getSpeedtestMetrics) and include speedtest data in metrics output
+- Server/tools: add typedrequest handling for speedtest in sw-typedrequest and route service worker dashboard path in CacheManager
+
+## 2025-12-04 - 6.3.0 - feat(web_serviceworker)
+Add advanced service worker subsystems: cache deduplication, metrics, update & network managers, event bus and dashboard
+
+- CacheManager: request deduplication for concurrent fetches, safer caching (preserve CORS headers), periodic in-flight cleanup and full cache cleaning API
+- Fetch handling: improved handling for same-origin vs cross-origin requests, more robust 500 debug responses when upstream fetch fails
+- UpdateManager: rate-limited update checks, offline grace period, debounced update and cache revalidation tasks, forceUpdate logic and persisted version/cache timestamps
+- NetworkManager: online/offline detection, retry/backoff, request timeouts and more resilient makeRequest implementation
+- EventBus: singleton pub/sub with history, once/onMany/onAll helpers and convenience emitters for cache/network/update events
+- MetricsCollector: comprehensive metrics for cache, network, updates and connections with helper methods and JSON/HTML dashboard endpoints (/sw-dash, /sw-dash/metrics)
+- ErrorHandler & ServiceWorkerError: structured error types, severity, context, history and helper APIs for consistent error reporting
+- ServiceWorker & backend: improved install/activate flows, clients.claim(), cache cleaning on activation, backend APIs to purge cache and trigger reloads/notifications
+- TypedServer / servertools: addRoute path pattern parsing (named params & wildcards), safer HTML injection for reload script, TypedRequest controller and service worker route helpers
+- Various safety and compatibility improvements (response cloning, header normalization, cache-control decisions, and fallback behaviors)
+
+## 2025-12-04 - 6.2.0 - feat(web_serviceworker)
+Add service-worker dashboard and request deduplication; improve caching, metrics and error handling
+
+- Add DashboardGenerator to serve an interactive terminal-style dashboard at /sw-dash and a metrics JSON endpoint at /sw-dash/metrics
+- Introduce request deduplication in CacheManager to coalesce concurrent network fetches and avoid duplicate requests
+- Add periodic cleanup for in-flight request tracking to prevent unbounded memory growth
+- Improve caching flow: preserve response headers (excluding cache-control headers), ensure CORS headers and Cross-Origin-Resource-Policy, and store response bodies as blobs to avoid locked stream issues
+- Provide clearer 500 error HTML responses for failed fetches to aid debugging
+- Integrate metrics and event emissions for network and cache operations (record request success/failure, cache hits/misses, and emit corresponding events)
+
 ## 2025-12-04 - 6.1.0 - feat(web_serviceworker)
 Enhance service worker subsystem: add metrics, event bus, error handling, config and caching/update improvements; make client connection & polling robust
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "6.1.0",
+  "version": "6.7.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: '6.1.0',
+  version: '6.7.0',
   description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }

ts/classes.typedserver.ts

@@ -271,7 +271,11 @@ export class TypedServer {
     // Setup file watching
     if (this.options.watch && this.options.serveDir) {
       try {
-        this.smartwatchInstance = new plugins.smartwatch.Smartwatch([this.options.serveDir]);
+        // Use glob pattern to match all files recursively in serveDir
+        const watchGlob = this.options.serveDir.endsWith('/')
+          ? `${this.options.serveDir}**/*`
+          : `${this.options.serveDir}/**/*`;
+        this.smartwatchInstance = new plugins.smartwatch.Smartwatch([watchGlob]);
         await this.smartwatchInstance.start();
         (await this.smartwatchInstance.getObservableFor('change')).subscribe(async () => {
           await this.createServeDirHash();
@@ -302,6 +306,35 @@ export class TypedServer {
           };
         })
       );
+
+      // Speedtest handler for service worker dashboard
+      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;
+          let payload: string | undefined;
+          let bytesTransferred = 0;
+
+          switch (reqArg.type) {
+            case 'download':
+              payload = 'x'.repeat(sizeBytes);
+              bytesTransferred = sizeBytes;
+              break;
+            case 'upload':
+              bytesTransferred = reqArg.payload?.length || 0;
+              break;
+            case 'latency':
+              bytesTransferred = 1;
+              break;
+          }
+
+          const durationMs = Date.now() - startTime;
+          const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
+
+          return { durationMs, bytesTransferred, speedMbps, timestamp: Date.now(), payload };
+        })
+      );
     } catch (error) {
       console.error('Failed to initialize TypedSocket:', error);
     }
@@ -496,6 +529,30 @@ export class TypedServer {
       return;
     }
 
+    // Push cache invalidation to service workers first
+    try {
+      const swConnections = await this.typedsocket.findAllTargetConnectionsByTag('serviceworker');
+      for (const connection of swConnections) {
+        const pushCacheInvalidate =
+          this.typedsocket.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
+            'serviceworker_cacheInvalidate',
+            connection
+          );
+        pushCacheInvalidate.fire({
+          reason: 'File change detected',
+          timestamp: this.lastReload,
+        }).catch(err => {
+          console.warn('Failed to push cache invalidation to service worker:', err);
+        });
+      }
+      if (swConnections.length > 0) {
+        console.log(`Pushed cache invalidation to ${swConnections.length} service worker(s)`);
+      }
+    } catch (error) {
+      console.warn('Failed to notify service workers:', error);
+    }
+
+    // Notify frontend clients
     try {
       const connections = await this.typedsocket.findAllTargetConnectionsByTag(
         'typedserver_frontend'

ts/servertools/tools.serviceworker.ts

@@ -84,6 +84,48 @@ export const addServiceWorkerRoute = (
         )
       );
 
+      // Speedtest handler for measuring connection speed
+      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;
+            let payload: string | undefined;
+            let bytesTransferred = 0;
+
+            switch (reqArg.type) {
+              case 'download':
+                // Generate random payload for download test
+                payload = 'x'.repeat(sizeBytes);
+                bytesTransferred = sizeBytes;
+                break;
+              case 'upload':
+                // For upload, measure bytes received from client
+                bytesTransferred = reqArg.payload?.length || 0;
+                break;
+              case 'latency':
+                // Minimal payload for latency test
+                bytesTransferred = 1;
+                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
+            };
+          }
+        )
+      );
+
       const response = await typedrouter.routeAndAddResponse(body);
       return new Response(plugins.smartjson.stringify(response), {
         status: 200,

ts_interfaces/serviceworker.ts

@@ -189,4 +189,49 @@ export interface IConnectionResult {
   error?: string;
   attempts?: number;
   duration?: number;
+}
+
+// ===============
+// Speedtest interfaces
+// ===============
+
+/**
+ * Cache invalidation request from server to service worker
+ */
+export interface IRequest_Serviceworker_CacheInvalidate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_CacheInvalidate
+  > {
+  method: 'serviceworker_cacheInvalidate';
+  request: {
+    reason: string;
+    timestamp: number;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Speedtest request between service worker and backend
+ */
+export interface IRequest_Serviceworker_Speedtest
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  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
+  };
+  response: {
+    durationMs: number;
+    bytesTransferred: number;
+    speedMbps: number;
+    timestamp: number;
+    payload?: string;        // For download tests, the payload received
+  };
 }

ts_web_inject/index.ts

@@ -75,8 +75,17 @@ export class ReloadChecker {
       this.infoscreen.setText(reloadText);
       if (globalThis.globalSw?.purgeCache) {
         await globalThis.globalSw.purgeCache();
+      } else if ('caches' in window) {
+        // Fallback: clear caches via Cache API when service worker client isn't initialized
+        try {
+          const cacheKeys = await caches.keys();
+          await Promise.all(cacheKeys.map(key => caches.delete(key)));
+          logger.log('ok', 'Cleared caches via Cache API fallback');
+        } catch (err) {
+          logger.log('warn', `Failed to clear caches via Cache API: ${err}`);
+        }
       } else {
-        console.log('globalThis.globalSw not found...');
+        console.log('globalThis.globalSw not found and Cache API not available...');
       }
       this.infoscreen.setText(`cleaned caches`);
       await plugins.smartdelay.delayFor(200);

ts_web_serviceworker/classes.backend.ts

@@ -1,6 +1,7 @@
 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';
 
 // Add type definitions for ServiceWorker APIs
 declare global {
@@ -41,11 +42,15 @@ declare global {
  */
 export class ServiceworkerBackend {
   public deesComms = new plugins.deesComms.DeesComms();
+  private swSelf: ServiceWorkerGlobalScope;
+  private clientUpdateInterval: ReturnType<typeof setInterval> | null = null;
 
   constructor(optionsArg: {
     self: any;
     purgeCache: (reqArg: interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['request']) => Promise<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['response']>;
   }) {
+    this.swSelf = optionsArg.self as unknown as ServiceWorkerGlobalScope;
+    const metrics = getMetricsCollector();
 
     // lets handle wakestuff
     optionsArg.self.addEventListener('message', (event) => {
@@ -53,16 +58,51 @@ export class ServiceworkerBackend {
         console.log('sw-backend: got wake up call');
       }
     });
+
     this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Client_Serviceworker_ConnectionPolling>('broadcastConnectionPolling', async reqArg => {
+      // Record connection attempt
+      metrics.recordConnectionAttempt();
+      metrics.recordConnectionSuccess();
+      // Update connected clients count
+      await this.updateConnectedClientsCount();
       return {
         serviceworkerId: '123'
       };
-    })
+    });
 
     this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache>('purgeServiceWorkerCache', async reqArg => {
       console.log(`Executing purge cache in serviceworker backend.`)
       return await optionsArg.purgeCache?.(reqArg);
     });
+
+    // Periodically update connected clients count
+    this.startClientCountUpdates();
+  }
+
+  /**
+   * Start periodic updates of connected client count
+   */
+  private startClientCountUpdates(): void {
+    // Update immediately
+    this.updateConnectedClientsCount();
+
+    // Then update every 5 seconds
+    this.clientUpdateInterval = setInterval(() => {
+      this.updateConnectedClientsCount();
+    }, 5000);
+  }
+
+  /**
+   * Update the connected clients count using the Clients API
+   */
+  private async updateConnectedClientsCount(): Promise<void> {
+    try {
+      const clients = await this.swSelf.clients.matchAll({ type: 'window' });
+      const metrics = getMetricsCollector();
+      metrics.setConnectedClients(clients.length);
+    } catch (error) {
+      logger.log('warn', `Failed to update connected clients count: ${error}`);
+    }
   }
 
   /**
@@ -71,7 +111,7 @@ export class ServiceworkerBackend {
   public async triggerReloadAll() {
     try {
       logger.log('info', 'Triggering reload for all clients due to new version');
-      
+
       // Send update message via DeesComms
       // This will be picked up by clients that have registered a handler for 'serviceworker_newVersion'
       await this.deesComms.postMessage({
@@ -79,13 +119,15 @@ export class ServiceworkerBackend {
         request: {},
         messageId: `sw_update_${Date.now()}`
       });
-      
+
       // As a fallback, also use the clients API to reload clients that might not catch the broadcast
-      // We need to type-cast self since TypeScript doesn't recognize ServiceWorker API
-      const swSelf = self as unknown as ServiceWorkerGlobalScope;
-      const clients = await swSelf.clients.matchAll({ type: 'window' });
+      const clients = await this.swSelf.clients.matchAll({ type: 'window' });
       logger.log('info', `Found ${clients.length} clients to reload`);
-      
+
+      // Update metrics with current client count
+      const metrics = getMetricsCollector();
+      metrics.setConnectedClients(clients.length);
+
       for (const client of clients) {
         if ('navigate' in client) {
           // For modern browsers, navigate to the same URL to trigger reload

ts_web_serviceworker/classes.cachemanager.ts

@@ -5,6 +5,7 @@ import { ServiceWorker } from './classes.serviceworker.js';
 import { getMetricsCollector } from './classes.metrics.js';
 import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
 import { getErrorHandler, ServiceWorkerErrorType } from './classes.errorhandler.js';
+import { getDashboardGenerator } from './classes.dashboard.js';
 
 export class CacheManager {
   public losslessServiceWorkerRef: ServiceWorker;
@@ -203,6 +204,28 @@ export class CacheManager {
         const originalRequest: Request = fetchEventArg.request;
         const parsedUrl = new URL(originalRequest.url);
 
+        // Handle dashboard routes - serve directly from service worker
+        if (parsedUrl.pathname === '/sw-dash' || parsedUrl.pathname === '/sw-dash/') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(Promise.resolve(dashboard.serveDashboard()));
+          return;
+        }
+        if (parsedUrl.pathname === '/sw-dash/metrics') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(Promise.resolve(dashboard.serveMetrics()));
+          return;
+        }
+        if (parsedUrl.pathname === '/sw-dash/speedtest') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(dashboard.runSpeedtest());
+          return;
+        }
+        if (parsedUrl.pathname === '/sw-dash/resources') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
+          return;
+        }
+
         // Block requests that we don't want the service worker to handle.
         if (
           parsedUrl.hostname.includes('paddle.com') ||
@@ -242,7 +265,9 @@ export class CacheManager {
             // Record cache hit
             const contentLength = cachedResponse.headers.get('content-length');
             const bytes = contentLength ? parseInt(contentLength, 10) : 0;
+            const contentType = cachedResponse.headers.get('content-type') || 'unknown';
             metrics.recordCacheHit(matchRequest.url, bytes);
+            metrics.recordResourceAccess(matchRequest.url, true, contentType, bytes);
             eventBus.emitCacheHit(matchRequest.url, bytes);
 
             logger.log('ok', `CACHED: Found cached response for ${matchRequest.url}`);
@@ -317,6 +342,12 @@ export class CacheManager {
               });
 
               await cache.put(matchRequest, newCachedResponse);
+
+              // Record resource access for per-resource tracking
+              const cachedContentType = newResponse.headers.get('content-type') || 'unknown';
+              const cachedSize = bodyBlob.size;
+              metrics.recordResourceAccess(matchRequest.url, false, cachedContentType, cachedSize);
+
               logger.log('ok', `NOWCACHED: Cached response for ${matchRequest.url} for subsequent requests!`);
               done.resolve(newResponse);
             } catch (err) {

ts_web_serviceworker/classes.dashboard.ts

@@ -0,0 +1,923 @@
+import { getMetricsCollector } from './classes.metrics.js';
+import { getServiceWorkerInstance } from './index.js';
+import * as interfaces from './env.js';
+
+/**
+ * Dashboard generator that creates a terminal-like metrics display
+ * served directly from the service worker as a single-page app
+ */
+export class DashboardGenerator {
+  /**
+   * Serves the dashboard HTML page
+   */
+  public serveDashboard(): Response {
+    return new Response(this.generateDashboardHtml(), {
+      headers: {
+        'Content-Type': 'text/html; charset=utf-8',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves the metrics JSON endpoint
+   */
+  public serveMetrics(): Response {
+    return new Response(this.generateMetricsJson(), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Serves detailed resource data for the SPA views
+   */
+  public serveResources(): Response {
+    return new Response(this.generateResourcesJson(), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Runs a speedtest and returns the results
+   */
+  public async runSpeedtest(): Promise<Response> {
+    const metrics = getMetricsCollector();
+    const results: {
+      latency?: { durationMs: number; speedMbps: number };
+      download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
+      upload?: { durationMs: number; speedMbps: number; bytesTransferred: number };
+      error?: string;
+      isOnline: boolean;
+    } = { isOnline: false };
+
+    try {
+      const sw = getServiceWorkerInstance();
+
+      // Check if TypedSocket is connected
+      if (!sw.typedsocket) {
+        results.error = 'TypedSocket not connected';
+        return new Response(JSON.stringify(results), {
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store',
+          },
+        });
+      }
+
+      // Create typed request for speedtest
+      const speedtestRequest = sw.typedsocket.createTypedRequest<
+        interfaces.serviceworker.IRequest_Serviceworker_Speedtest
+      >('serviceworker_speedtest');
+
+      // Latency test
+      const latencyStart = Date.now();
+      await speedtestRequest.fire({ type: 'latency' });
+      const latencyDuration = Date.now() - latencyStart;
+      results.latency = { durationMs: latencyDuration, speedMbps: 0 };
+      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);
+
+      // 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);
+
+    } catch (error) {
+      results.error = error instanceof Error ? error.message : String(error);
+      results.isOnline = false;
+      metrics.setOnlineStatus(false);
+    }
+
+    return new Response(JSON.stringify(results), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
+  /**
+   * Generates JSON metrics response
+   */
+  public generateMetricsJson(): string {
+    const metrics = getMetricsCollector();
+    return JSON.stringify({
+      ...metrics.getMetrics(),
+      cacheHitRate: metrics.getCacheHitRate(),
+      networkSuccessRate: metrics.getNetworkSuccessRate(),
+      resourceCount: metrics.getResourceCount(),
+      summary: metrics.getSummary(),
+    });
+  }
+
+  /**
+   * Generates JSON response with detailed resource data
+   */
+  public generateResourcesJson(): string {
+    const metrics = getMetricsCollector();
+    return JSON.stringify({
+      resources: metrics.getCachedResources(),
+      domains: metrics.getDomainStats(),
+      contentTypes: metrics.getContentTypeStats(),
+      resourceCount: metrics.getResourceCount(),
+    });
+  }
+
+  /**
+   * Generates the complete HTML dashboard page as a SPA with tab navigation
+   */
+  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>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SW Dashboard</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      background: #0a0a0a;
+      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>
+</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
+let dashboardInstance: DashboardGenerator | null = null;
+export const getDashboardGenerator = (): DashboardGenerator => {
+  if (!dashboardInstance) {
+    dashboardInstance = new DashboardGenerator();
+  }
+  return dashboardInstance;
+};

ts_web_serviceworker/classes.metrics.ts

@@ -12,6 +12,44 @@ export interface ICacheMetrics {
   averageResponseTime: number;
 }
 
+/**
+ * Interface for per-resource tracking
+ */
+export interface ICachedResource {
+  url: string;
+  domain: string;
+  contentType: string;
+  size: number;
+  hitCount: number;
+  missCount: number;
+  lastAccessed: number;
+  cachedAt: number;
+}
+
+/**
+ * Interface for domain statistics
+ */
+export interface IDomainStats {
+  domain: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Interface for content-type statistics
+ */
+export interface IContentTypeStats {
+  contentType: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
 /**
  * Interface for network metrics
  */
@@ -47,6 +85,18 @@ export interface IConnectionMetrics {
   failedConnections: number;
 }
 
+/**
+ * Interface for speedtest metrics
+ */
+export interface ISpeedtestMetrics {
+  lastDownloadSpeedMbps: number;
+  lastUploadSpeedMbps: number;
+  lastLatencyMs: number;
+  lastTestTimestamp: number;
+  testCount: number;
+  isOnline: boolean;
+}
+
 /**
  * Combined metrics interface
  */
@@ -55,6 +105,7 @@ export interface IServiceWorkerMetrics {
   network: INetworkMetrics;
   update: IUpdateMetrics;
   connection: IConnectionMetrics;
+  speedtest: ISpeedtestMetrics;
   startTime: number;
   uptime: number;
 }
@@ -103,11 +154,23 @@ export class MetricsCollector {
   private successfulConnections = 0;
   private failedConnections = 0;
 
+  // Speedtest metrics
+  private lastDownloadSpeedMbps = 0;
+  private lastUploadSpeedMbps = 0;
+  private lastLatencyMs = 0;
+  private lastSpeedtestTimestamp = 0;
+  private speedtestCount = 0;
+  private isOnline = true;
+
   // Response time tracking
   private responseTimes: IResponseTimeEntry[] = [];
   private readonly maxResponseTimeEntries = 1000;
   private readonly responseTimeWindow = 5 * 60 * 1000; // 5 minutes
 
+  // Per-resource tracking
+  private resourceStats: Map<string, ICachedResource> = new Map();
+  private readonly maxResourceEntries = 500;
+
   // Start time
   private readonly startTime: number;
 
@@ -221,6 +284,47 @@ export class MetricsCollector {
     this.connectedClients = count;
   }
 
+  // ===================
+  // Speedtest Metrics
+  // ===================
+
+  public recordSpeedtest(type: 'download' | 'upload' | 'latency', value: number): void {
+    this.speedtestCount++;
+    this.lastSpeedtestTimestamp = Date.now();
+    this.isOnline = true;
+
+    switch (type) {
+      case 'download':
+        this.lastDownloadSpeedMbps = value;
+        logger.log('info', `[Metrics] Speedtest download: ${value.toFixed(2)} Mbps`);
+        break;
+      case 'upload':
+        this.lastUploadSpeedMbps = value;
+        logger.log('info', `[Metrics] Speedtest upload: ${value.toFixed(2)} Mbps`);
+        break;
+      case 'latency':
+        this.lastLatencyMs = value;
+        logger.log('info', `[Metrics] Speedtest latency: ${value.toFixed(0)} ms`);
+        break;
+    }
+  }
+
+  public setOnlineStatus(online: boolean): void {
+    this.isOnline = online;
+    logger.log('info', `[Metrics] Online status: ${online ? 'online' : 'offline'}`);
+  }
+
+  public getSpeedtestMetrics(): ISpeedtestMetrics {
+    return {
+      lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
+      lastUploadSpeedMbps: this.lastUploadSpeedMbps,
+      lastLatencyMs: this.lastLatencyMs,
+      lastTestTimestamp: this.lastSpeedtestTimestamp,
+      testCount: this.speedtestCount,
+      isOnline: this.isOnline,
+    };
+  }
+
   // ===================
   // Response Time Tracking
   // ===================
@@ -309,6 +413,14 @@ export class MetricsCollector {
         successfulConnections: this.successfulConnections,
         failedConnections: this.failedConnections,
       },
+      speedtest: {
+        lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
+        lastUploadSpeedMbps: this.lastUploadSpeedMbps,
+        lastLatencyMs: this.lastLatencyMs,
+        lastTestTimestamp: this.lastSpeedtestTimestamp,
+        testCount: this.speedtestCount,
+        isOnline: this.isOnline,
+      },
       startTime: this.startTime,
       uptime: now - this.startTime,
     };
@@ -363,7 +475,15 @@ export class MetricsCollector {
     this.successfulConnections = 0;
     this.failedConnections = 0;
 
+    this.lastDownloadSpeedMbps = 0;
+    this.lastUploadSpeedMbps = 0;
+    this.lastLatencyMs = 0;
+    this.lastSpeedtestTimestamp = 0;
+    this.speedtestCount = 0;
+    // Note: isOnline is not reset as it reflects current state
+
     this.responseTimes = [];
+    this.resourceStats.clear();
 
     logger.log('info', '[Metrics] All metrics reset');
   }
@@ -380,6 +500,178 @@ export class MetricsCollector {
       `Uptime: ${Math.round(metrics.uptime / 1000)}s`,
     ].join(' | ');
   }
+
+  // ===================
+  // Per-Resource Tracking
+  // ===================
+
+  /**
+   * Extracts domain from URL
+   */
+  private extractDomain(url: string): string {
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.hostname;
+    } catch {
+      return 'unknown';
+    }
+  }
+
+  /**
+   * Records a resource access (cache hit or miss) with details
+   */
+  public recordResourceAccess(
+    url: string,
+    isHit: boolean,
+    contentType: string = 'unknown',
+    size: number = 0
+  ): void {
+    const now = Date.now();
+    const domain = this.extractDomain(url);
+
+    let resource = this.resourceStats.get(url);
+
+    if (!resource) {
+      resource = {
+        url,
+        domain,
+        contentType,
+        size,
+        hitCount: 0,
+        missCount: 0,
+        lastAccessed: now,
+        cachedAt: now,
+      };
+      this.resourceStats.set(url, resource);
+    }
+
+    // Update resource stats
+    if (isHit) {
+      resource.hitCount++;
+    } else {
+      resource.missCount++;
+    }
+    resource.lastAccessed = now;
+
+    // Update content-type and size if provided (may come from response headers)
+    if (contentType !== 'unknown') {
+      resource.contentType = contentType;
+    }
+    if (size > 0) {
+      resource.size = size;
+    }
+
+    // Trim old entries if needed
+    this.cleanupResourceStats();
+  }
+
+  /**
+   * Cleans up old resource entries to prevent memory bloat
+   */
+  private cleanupResourceStats(): void {
+    if (this.resourceStats.size <= this.maxResourceEntries) {
+      return;
+    }
+
+    // Convert to array and sort by lastAccessed (oldest first)
+    const entries = Array.from(this.resourceStats.entries())
+      .sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
+
+    // Remove oldest entries until we're under the limit
+    const toRemove = entries.slice(0, entries.length - this.maxResourceEntries);
+    for (const [url] of toRemove) {
+      this.resourceStats.delete(url);
+    }
+  }
+
+  /**
+   * Gets all cached resources
+   */
+  public getCachedResources(): ICachedResource[] {
+    return Array.from(this.resourceStats.values());
+  }
+
+  /**
+   * Gets domain statistics
+   */
+  public getDomainStats(): IDomainStats[] {
+    const domainMap = new Map<string, IDomainStats>();
+
+    for (const resource of this.resourceStats.values()) {
+      let stats = domainMap.get(resource.domain);
+
+      if (!stats) {
+        stats = {
+          domain: resource.domain,
+          totalResources: 0,
+          totalSize: 0,
+          totalHits: 0,
+          totalMisses: 0,
+          hitRate: 0,
+        };
+        domainMap.set(resource.domain, stats);
+      }
+
+      stats.totalResources++;
+      stats.totalSize += resource.size;
+      stats.totalHits += resource.hitCount;
+      stats.totalMisses += resource.missCount;
+    }
+
+    // Calculate hit rates
+    for (const stats of domainMap.values()) {
+      const total = stats.totalHits + stats.totalMisses;
+      stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
+    }
+
+    return Array.from(domainMap.values());
+  }
+
+  /**
+   * Gets content-type statistics
+   */
+  public getContentTypeStats(): IContentTypeStats[] {
+    const typeMap = new Map<string, IContentTypeStats>();
+
+    for (const resource of this.resourceStats.values()) {
+      // Normalize content-type (extract base type)
+      const baseType = resource.contentType.split(';')[0].trim() || 'unknown';
+
+      let stats = typeMap.get(baseType);
+
+      if (!stats) {
+        stats = {
+          contentType: baseType,
+          totalResources: 0,
+          totalSize: 0,
+          totalHits: 0,
+          totalMisses: 0,
+          hitRate: 0,
+        };
+        typeMap.set(baseType, stats);
+      }
+
+      stats.totalResources++;
+      stats.totalSize += resource.size;
+      stats.totalHits += resource.hitCount;
+      stats.totalMisses += resource.missCount;
+    }
+
+    // Calculate hit rates
+    for (const stats of typeMap.values()) {
+      const total = stats.totalHits + stats.totalMisses;
+      stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
+    }
+
+    return Array.from(typeMap.values());
+  }
+
+  /**
+   * Gets resource count
+   */
+  public getResourceCount(): number {
+    return this.resourceStats.size;
+  }
 }
 
 // Export singleton getter for convenience

ts_web_serviceworker/classes.serviceworker.ts

@@ -27,6 +27,10 @@ export class ServiceWorker {
   public taskManager: TaskManager;
   public store: plugins.webstore.WebStore;
 
+  // TypedSocket connection for server communication
+  public typedsocket: plugins.typedsocket.TypedSocket;
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
   constructor(selfArg: interfaces.ServiceWindow) {
     logger.log('info', `Service worker instantiating at ${Date.now()}`);
     this.serviceWindowRef = selfArg;
@@ -76,16 +80,52 @@ export class ServiceWorker {
       try {
         await selfArg.clients.claim();
         logger.log('ok', 'Clients claimed successfully');
-        
+
         await this.cacheManager.cleanCaches('new service worker loaded! :)');
         logger.log('ok', 'Caches cleaned successfully');
-        
+
         done.resolve();
         logger.log('success', `Service worker activated at ${new Date().toISOString()}`);
+
+        // Connect to TypedServer for cache invalidation after activation
+        this.connectToServer();
       } catch (error) {
         logger.log('error', `Service worker activation error: ${error}`);
         done.reject(error);
       }
     });
   }
+
+  /**
+   * Connect to TypedServer via TypedSocket for cache invalidation
+   */
+  private async connectToServer(): Promise<void> {
+    try {
+      // Register handler for cache invalidation from server
+      this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
+        new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
+          logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
+          await this.cacheManager.cleanCaches(reqArg.reason);
+          // Notify all clients to reload
+          await this.leleServiceWorkerBackend.triggerReloadAll();
+          return { success: true };
+        })
+      );
+
+      // Connect to server via TypedSocket
+      this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
+        this.typedrouter,
+        this.serviceWindowRef.location.origin
+      );
+
+      // Tag this connection as a service worker for server-side filtering
+      await this.typedsocket.setTag('serviceworker', {});
+
+      logger.log('ok', 'Service worker connected to TypedServer via TypedSocket');
+    } catch (error: any) {
+      logger.log('warn', `Service worker TypedSocket connection failed: ${error?.message || error}`);
+      // Retry connection after a delay
+      setTimeout(() => this.connectToServer(), 10000);
+    }
+  }
 }

ts_web_serviceworker/index.ts

@@ -5,3 +5,6 @@ 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;

ts_web_serviceworker/plugins.ts

@@ -5,8 +5,9 @@ export { interfaces };
 
 // @apiglobal scope
 import * as typedrequest from '@api.global/typedrequest';
+import * as typedsocket from '@api.global/typedsocket';
 
-export { typedrequest };
+export { typedrequest, typedsocket };
 
 // @pushrocks scope
 import * as smartdelay from '@push.rocks/smartdelay';