v6.4.0

changelog.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 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.4.0",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {

ts/00_commitinfo_data.ts

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

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,31 @@ export interface IConnectionResult {
   error?: string;
   attempts?: number;
   duration?: number;
+}
+
+// ===============
+// Speedtest interfaces
+// ===============
+
+/**
+ * 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_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,23 @@ 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;
+        }
+
         // Block requests that we don't want the service worker to handle.
         if (
           parsedUrl.hostname.includes('paddle.com') ||

ts_web_serviceworker/classes.dashboard.ts

@@ -0,0 +1,832 @@
+import { getMetricsCollector } from './classes.metrics.js';
+
+/**
+ * Dashboard generator that creates a terminal-like metrics display
+ * served directly from the service worker
+ */
+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',
+      },
+    });
+  }
+
+  /**
+   * 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 {
+      // Latency test
+      const latencyStart = Date.now();
+      const latencyResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'latency' },
+        }),
+      });
+
+      if (latencyResponse.ok) {
+        await latencyResponse.json(); // Consume response
+        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 downloadResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'download', payloadSizeKB: 100 },
+        }),
+      });
+
+      if (downloadResponse.ok) {
+        const downloadData = await downloadResponse.json();
+        const downloadDuration = Date.now() - downloadStart;
+        const bytesTransferred = downloadData.response?.payload?.length || 0;
+        // Speed in Mbps: (bytes * 8) / (ms / 1000) / 1000000 = bytes * 8 / ms / 1000
+        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();
+      const uploadResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'upload', payload: uploadPayload },
+        }),
+      });
+
+      if (uploadResponse.ok) {
+        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(),
+      summary: metrics.getSummary(),
+    });
+  }
+
+  /**
+   * Generates the complete HTML dashboard page with terminal-like styling
+   */
+  public generateDashboardHtml(): string {
+    const metrics = getMetricsCollector();
+    const data = metrics.getMetrics();
+    const hitRate = metrics.getCacheHitRate();
+    const successRate = metrics.getNetworkSuccessRate();
+
+    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: 900px;
+      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;
+    }
+
+    .content {
+      padding: 15px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(380px, 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 {
+      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;
+    }
+
+    .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;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .ascii-bar {
+      font-family: monospace;
+      letter-spacing: 0;
+    }
+
+    .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 blink {
+      50% { opacity: 0; }
+    }
+
+    .btn {
+      background: #1a1a1a;
+      border: 1px solid #00ff00;
+      color: #00ff00;
+      padding: 8px 16px;
+      cursor: pointer;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 12px;
+      transition: all 0.2s ease;
+    }
+
+    .btn:hover {
+      background: #00ff00;
+      color: #000;
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .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);
+    }
+
+    .speedtest-results {
+      margin-top: 10px;
+    }
+
+    .speed-bar {
+      height: 8px;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      margin: 4px 0;
+    }
+
+    .speed-fill {
+      height: 100%;
+      background: #00aa00;
+      transition: width 0.5s ease;
+    }
+
+    .btn-row {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="terminal">
+    <div class="header">
+      <span class="title">[SW-DASH] Service Worker Metrics</span>
+      <span class="uptime" id="uptime">Uptime: ${this.formatDuration(data.uptime)}</span>
+    </div>
+
+    <div class="content">
+      <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)}" style="width: ${hitRate}%"></div>
+              <span class="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">Avg Response:</span>
+            <span class="value" id="cache-response">${data.cache.averageResponseTime}ms</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)}" style="width: ${successRate}%"></div>
+              <span class="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 class="row">
+            <span class="label">Last Update:</span>
+            <span class="value" id="upd-last-update">${this.formatTimestamp(data.update.lastUpdateTimestamp)}</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="row">
+            <span class="label">Last Test:</span>
+            <span class="value" id="speed-last-test">${this.formatTimestamp(data.speedtest.lastTestTimestamp)}</span>
+          </div>
+          <div class="row">
+            <span class="label">Test Count:</span>
+            <span class="value" id="speed-test-count">${data.speedtest.testCount}</span>
+          </div>
+          <div class="btn-row">
+            <button class="btn" id="run-speedtest" onclick="runSpeedtest()">Run Test</button>
+          </div>
+        </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>
+    function formatNumber(num) {
+      return num.toLocaleString();
+    }
+
+    function formatBytes(bytes) {
+      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];
+    }
+
+    function formatDuration(ms) {
+      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';
+    }
+
+    function 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();
+    }
+
+    function getGaugeClass(rate) {
+      if (rate >= 80) return 'good';
+      if (rate >= 50) return 'warning';
+      return 'bad';
+    }
+
+    function updateDashboard(data) {
+      // Uptime
+      document.getElementById('uptime').textContent = 'Uptime: ' + formatDuration(data.uptime);
+
+      // Cache
+      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-response').textContent = data.cache.averageResponseTime + 'ms';
+
+      // Update cache gauge
+      const cacheGauge = document.querySelector('.panel:nth-child(1) .gauge-fill');
+      cacheGauge.style.width = data.cacheHitRate + '%';
+      cacheGauge.className = 'gauge-fill ' + getGaugeClass(data.cacheHitRate);
+      document.querySelector('.panel:nth-child(1) .gauge-text').textContent = data.cacheHitRate + '% hit rate';
+
+      // Network
+      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);
+
+      // Update network gauge
+      const netGauge = document.querySelector('.panel:nth-child(2) .gauge-fill');
+      netGauge.style.width = data.networkSuccessRate + '%';
+      netGauge.className = 'gauge-fill ' + getGaugeClass(data.networkSuccessRate);
+      document.querySelector('.panel:nth-child(2) .gauge-text').textContent = data.networkSuccessRate + '% success';
+
+      // Updates
+      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('upd-last-update').textContent = formatTimestamp(data.update.lastUpdateTimestamp);
+
+      // Connections
+      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);
+
+      // Speedtest
+      if (data.speedtest) {
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
+        onlineStatus.textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
+        onlineStatus.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-last-test').textContent = formatTimestamp(data.speedtest.lastTestTimestamp);
+        document.getElementById('speed-test-count').textContent = formatNumber(data.speedtest.testCount);
+
+        // Update speed bars (max 100 Mbps for visualization)
+        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) + '%';
+      }
+
+      // Last refresh
+      document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
+    }
+
+    // Speedtest function
+    let speedtestRunning = false;
+    async function runSpeedtest() {
+      if (speedtestRunning) return;
+
+      speedtestRunning = true;
+      const btn = document.getElementById('run-speedtest');
+      const originalText = btn.textContent;
+      btn.textContent = 'Testing...';
+      btn.disabled = true;
+
+      try {
+        const response = await fetch('/sw-dash/speedtest');
+        const result = await response.json();
+
+        // Update online status immediately
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
+        onlineStatus.textContent = result.isOnline ? 'Online' : 'Offline';
+        onlineStatus.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';
+        }
+        document.getElementById('speed-last-test').textContent = 'just now';
+
+        if (result.error) {
+          console.error('Speedtest error:', result.error);
+        }
+      } catch (err) {
+        console.error('Failed to run speedtest:', err);
+        // Mark as offline on error
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot offline';
+        onlineStatus.textContent = 'Offline';
+        onlineStatus.className = 'value error';
+      } finally {
+        speedtestRunning = false;
+        btn.textContent = originalText;
+        btn.disabled = false;
+      }
+    }
+
+    // Auto-refresh every 2 seconds
+    setInterval(async () => {
+      try {
+        const response = await fetch('/sw-dash/metrics');
+        const data = await response.json();
+        updateDashboard(data);
+      } catch (err) {
+        console.error('Failed to fetch metrics:', err);
+      }
+    }, 2000);
+  </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

@@ -47,6 +47,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 +67,7 @@ export interface IServiceWorkerMetrics {
   network: INetworkMetrics;
   update: IUpdateMetrics;
   connection: IConnectionMetrics;
+  speedtest: ISpeedtestMetrics;
   startTime: number;
   uptime: number;
 }
@@ -103,6 +116,14 @@ 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;
@@ -221,6 +242,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 +371,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,6 +433,13 @@ 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 = [];
 
     logger.log('info', '[Metrics] All metrics reset');