v7.1.0

changelog.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 2025-12-04 - 7.1.0 - feat(swdash)
+Add live speedtest progress UI to service worker dashboard
+
+- Introduce reactive speedtest state (phase, progress, elapsed) in sw-dash-overview component
+- Start a progress interval to animate overall test progress and estimate phases (latency, download, upload)
+- Dispatch 'speedtest-complete' event and show a brief complete state before resetting UI
+- Add helper methods for phase labels and elapsed time formatting
+- Add CSS for progress bar, shimmer animation and phase pulse to sw-dash-styles
+
+## 2025-12-04 - 7.0.0 - BREAKING CHANGE(serviceworker)
+Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract
+
+- Change speedtest protocol to time-based chunk transfers: new request types 'download_chunk' and 'upload_chunk' plus 'latency'. Clients should call chunk requests in a loop for the desired test duration.
+- IRequest_Serviceworker_Speedtest interface updated: request fields renamed/changed (chunkSizeKB, payload) and response no longer includes durationMs or speedMbps — server now returns bytesTransferred, timestamp, and optional payload.
+- TypedServer speedtest handler updated to support 'download_chunk' and 'upload_chunk' semantics and to return bytesTransferred/timestamp/payload only (removed server-side duration/speed calculation).
+- Dashboard runSpeedtest now performs time-based tests (TEST_DURATION_MS = 5000, CHUNK_SIZE_KB = 64) by repeatedly requesting chunks and computing throughput on the client side.
+- Documentation/comments updated to clarify new speedtest behavior and default chunk sizes.
+
+## 2025-12-04 - 6.8.1 - fix(web_serviceworker)
+Move service worker initialization to init.ts and remove exports from service worker entrypoint to avoid ESM bundle output
+
+- Remove exports from ts_web_serviceworker/index.ts so the service worker entrypoint does not export symbols (prevents tsbundle from producing ESM output).
+- Add ts_web_serviceworker/init.ts which initializes the ServiceWorker instance and exports getServiceWorkerInstance() for internal imports.
+- Update ts_web_serviceworker/classes.dashboard.ts to import getServiceWorkerInstance from init.ts instead of index.ts.
+
 ## 2025-12-04 - 6.8.0 - feat(swdash)
 Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "6.8.0",
+  "version": "7.1.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.8.0',
+  version: '7.1.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

@@ -308,31 +308,31 @@ export class TypedServer {
       );
 
       // Speedtest handler for service worker dashboard
+      // Client calls this in a loop for the test duration to get accurate time-based measurements
       this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
         new plugins.typedrequest.TypedHandler('serviceworker_speedtest', async (reqArg) => {
-          const startTime = Date.now();
-          const payloadSizeKB = reqArg.payloadSizeKB || 100;
-          const sizeBytes = payloadSizeKB * 1024;
+          const chunkSizeKB = reqArg.chunkSizeKB || 64;
+          const sizeBytes = chunkSizeKB * 1024;
           let payload: string | undefined;
           let bytesTransferred = 0;
 
           switch (reqArg.type) {
-            case 'download':
+            case 'download_chunk':
+              // Generate chunk data for download test
               payload = 'x'.repeat(sizeBytes);
               bytesTransferred = sizeBytes;
               break;
-            case 'upload':
+            case 'upload_chunk':
+              // Acknowledge received upload data
               bytesTransferred = reqArg.payload?.length || 0;
               break;
             case 'latency':
-              bytesTransferred = 1;
+              // Simple ping - minimal data
+              bytesTransferred = 0;
               break;
           }
 
-          const durationMs = Date.now() - startTime;
-          const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
-
-          return { durationMs, bytesTransferred, speedMbps, timestamp: Date.now(), payload };
+          return { bytesTransferred, timestamp: Date.now(), payload };
         })
       );
     } catch (error) {

ts/servertools/tools.serviceworker.ts

@@ -84,43 +84,36 @@ export const addServiceWorkerRoute = (
         )
       );
 
-      // Speedtest handler for measuring connection speed
+      // Speedtest handler for measuring connection speed (time-based chunked approach)
       typedrouter.addTypedHandler(
         new plugins.typedrequest.TypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
           'serviceworker_speedtest',
           async (reqArg) => {
-            const startTime = Date.now();
-            const payloadSizeKB = reqArg.payloadSizeKB || 100;
-            const sizeBytes = payloadSizeKB * 1024;
+            const chunkSizeKB = reqArg.chunkSizeKB || 64;
+            const sizeBytes = chunkSizeKB * 1024;
             let payload: string | undefined;
             let bytesTransferred = 0;
 
             switch (reqArg.type) {
-              case 'download':
-                // Generate random payload for download test
+              case 'download_chunk':
+                // Generate chunk payload for download test
                 payload = 'x'.repeat(sizeBytes);
                 bytesTransferred = sizeBytes;
                 break;
-              case 'upload':
+              case 'upload_chunk':
                 // For upload, measure bytes received from client
                 bytesTransferred = reqArg.payload?.length || 0;
                 break;
               case 'latency':
-                // Minimal payload for latency test
-                bytesTransferred = 1;
+                // Simple ping - no payload needed
+                bytesTransferred = 0;
                 break;
             }
 
-            const durationMs = Date.now() - startTime;
-            // Speed in Mbps: (bytes * 8 bits/byte) / (ms * 1000 to get seconds) / 1,000,000 for Mbps
-            const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
-
             return {
-              durationMs,
               bytesTransferred,
-              speedMbps,
               timestamp: Date.now(),
-              payload, // Only for download tests
+              payload, // Only for download_chunk tests
             };
           }
         )

ts_interfaces/serviceworker.ts

@@ -215,6 +215,14 @@ export interface IRequest_Serviceworker_CacheInvalidate
 
 /**
  * Speedtest request between service worker and backend
+ *
+ * Types:
+ * - 'latency': Simple ping to measure round-trip time
+ * - 'download_chunk': Request a chunk of data (64KB default)
+ * - 'upload_chunk': Send a chunk of data to server
+ *
+ * The client runs a loop calling download_chunk or upload_chunk
+ * until the desired test duration (e.g., 5 seconds) elapses.
  */
 export interface IRequest_Serviceworker_Speedtest
   extends plugins.typedrequestInterfaces.implementsTR<
@@ -223,15 +231,13 @@ export interface IRequest_Serviceworker_Speedtest
   > {
   method: 'serviceworker_speedtest';
   request: {
-    type: 'download' | 'upload' | 'latency';
-    payloadSizeKB?: number;  // Size of test payload in KB (default: 100)
-    payload?: string;        // For upload tests, the payload to send
+    type: 'latency' | 'download_chunk' | 'upload_chunk';
+    chunkSizeKB?: number;    // Size of chunk in KB (default: 64)
+    payload?: string;        // For upload_chunk, the data to send
   };
   response: {
-    durationMs: number;
     bytesTransferred: number;
-    speedMbps: number;
     timestamp: number;
-    payload?: string;        // For download tests, the payload received
+    payload?: string;        // For download_chunk, the data received
   };
 }

ts_swdash/sw-dash-overview.ts

@@ -70,15 +70,46 @@ export class SwDashOverview extends LitElement {
 
   @property({ type: Object }) accessor metrics: IMetricsData | null = null;
   @state() accessor speedtestRunning = false;
+  @state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
+  @state() accessor speedtestProgress = 0;
+  @state() accessor speedtestElapsed = 0;
+
+  // Speedtest timing constants (must match service worker)
+  private static readonly TEST_DURATION_MS = 5000;  // 5 seconds per test
+  private progressInterval: number | null = null;
 
   private async runSpeedtest(): Promise<void> {
     if (this.speedtestRunning) return;
     this.speedtestRunning = true;
+    this.speedtestPhase = 'latency';
+    this.speedtestProgress = 0;
+    this.speedtestElapsed = 0;
+
+    // Start progress animation (total ~10.5s: latency ~0.5s + 5s download + 5s upload)
+    const totalEstimatedMs = 10500;
+    const startTime = Date.now();
+
+    this.progressInterval = window.setInterval(() => {
+      this.speedtestElapsed = Date.now() - startTime;
+      this.speedtestProgress = Math.min(100, (this.speedtestElapsed / totalEstimatedMs) * 100);
+
+      // Estimate phase based on elapsed time
+      if (this.speedtestElapsed < 500) {
+        this.speedtestPhase = 'latency';
+      } else if (this.speedtestElapsed < 5500) {
+        this.speedtestPhase = 'download';
+      } else {
+        this.speedtestPhase = 'upload';
+      }
+    }, 100);
 
     try {
       const response = await fetch('/sw-dash/speedtest');
       const result = await response.json();
 
+      this.speedtestPhase = 'complete';
+      this.speedtestProgress = 100;
+
       // Dispatch event to parent to update metrics
       this.dispatchEvent(new CustomEvent('speedtest-complete', {
         detail: result,
@@ -87,11 +118,36 @@ export class SwDashOverview extends LitElement {
       }));
     } catch (err) {
       console.error('Speedtest failed:', err);
+      this.speedtestPhase = 'idle';
     } finally {
-      this.speedtestRunning = false;
+      if (this.progressInterval) {
+        window.clearInterval(this.progressInterval);
+        this.progressInterval = null;
+      }
+      // Keep showing complete state briefly, then reset
+      setTimeout(() => {
+        this.speedtestRunning = false;
+        this.speedtestPhase = 'idle';
+        this.speedtestProgress = 0;
+      }, 1500);
     }
   }
 
+  private getPhaseLabel(): string {
+    switch (this.speedtestPhase) {
+      case 'latency': return 'Testing latency...';
+      case 'download': return 'Download test...';
+      case 'upload': return 'Upload test...';
+      case 'complete': return 'Complete!';
+      default: return '';
+    }
+  }
+
+  private formatElapsed(): string {
+    const seconds = Math.floor(this.speedtestElapsed / 1000);
+    return `${seconds}s`;
+  }
+
   public render(): TemplateResult {
     if (!this.metrics) {
       return html`<div class="panel">Loading metrics...</div>`;
@@ -166,11 +222,23 @@ export class SwDashOverview extends LitElement {
             <span class="online-dot ${m.speedtest.isOnline ? 'online' : 'offline'}"></span>
             <span class="value ${m.speedtest.isOnline ? 'success' : 'error'}">${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
           </div>
-          <div class="row"><span class="label">Download:</span><span class="value">${m.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
-          <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
-          <div class="row"><span class="label">Upload:</span><span class="value">${m.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
-          <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
-          <div class="row"><span class="label">Latency:</span><span class="value">${m.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
+          ${this.speedtestRunning ? html`
+            <div class="speedtest-progress">
+              <div class="progress-header">
+                <span class="progress-phase">${this.getPhaseLabel()}</span>
+                <span class="progress-time">${this.formatElapsed()}</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill ${this.speedtestPhase === 'complete' ? 'complete' : ''}" style="width: ${this.speedtestProgress}%"></div>
+              </div>
+            </div>
+          ` : html`
+            <div class="row"><span class="label">Download:</span><span class="value">${m.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span></div>
+            <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastDownloadSpeedMbps, 100)}%"></div></div>
+            <div class="row"><span class="label">Upload:</span><span class="value">${m.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span></div>
+            <div class="speed-bar"><div class="speed-fill" style="width: ${Math.min(m.speedtest.lastUploadSpeedMbps, 100)}%"></div></div>
+            <div class="row"><span class="label">Latency:</span><span class="value">${m.speedtest.lastLatencyMs.toFixed(0)} ms</span></div>
+          `}
           <div class="btn-row">
             <button class="btn" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
               ${this.speedtestRunning ? 'Testing...' : 'Run Test'}

ts_swdash/sw-dash-styles.ts

@@ -424,4 +424,71 @@ export const speedtestStyles: CSSResult = css`
     background: var(--sw-gauge-good);
     transition: width 0.5s ease;
   }
+
+  /* Speedtest progress indicator */
+  .speedtest-progress {
+    padding: 10px 0;
+  }
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .progress-phase {
+    color: var(--sw-text-cyan);
+    font-weight: bold;
+    animation: pulse 1s infinite;
+  }
+
+  .progress-time {
+    color: var(--sw-text-secondary);
+    font-size: 12px;
+  }
+
+  .progress-bar {
+    height: 20px;
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--sw-gauge-good), var(--sw-text-cyan));
+    transition: width 0.1s linear;
+    position: relative;
+  }
+
+  .progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: shimmer 1.5s infinite;
+  }
+
+  .progress-fill.complete {
+    background: var(--sw-text-primary);
+  }
+
+  .progress-fill.complete::after {
+    display: none;
+  }
+
+  @keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
 `;

ts_web_serviceworker/classes.dashboard.ts

@@ -1,5 +1,5 @@
 import { getMetricsCollector } from './classes.metrics.js';
-import { getServiceWorkerInstance } from './index.js';
+import { getServiceWorkerInstance } from './init.js';
 import * as interfaces from './env.js';
 
 /**
@@ -43,13 +43,18 @@ export class DashboardGenerator {
     });
   }
 
+  // Speedtest configuration
+  private static readonly TEST_DURATION_MS = 5000;  // 5 seconds per test
+  private static readonly CHUNK_SIZE_KB = 64;       // 64KB chunks
+
   /**
-   * Runs a speedtest and returns the results
+   * Runs a time-based speedtest and returns the results
+   * Each test (download/upload) runs for TEST_DURATION_MS, transferring chunks continuously
    */
   public async runSpeedtest(): Promise<Response> {
     const metrics = getMetricsCollector();
     const results: {
-      latency?: { durationMs: number; speedMbps: number };
+      latency?: { durationMs: number };
       download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
       upload?: { durationMs: number; speedMbps: number; bytesTransferred: number };
       error?: string;
@@ -75,32 +80,49 @@ export class DashboardGenerator {
         interfaces.serviceworker.IRequest_Serviceworker_Speedtest
       >('serviceworker_speedtest');
 
-      // Latency test
+      // Latency test - simple ping
       const latencyStart = Date.now();
       await speedtestRequest.fire({ type: 'latency' });
       const latencyDuration = Date.now() - latencyStart;
-      results.latency = { durationMs: latencyDuration, speedMbps: 0 };
+      results.latency = { durationMs: latencyDuration };
       metrics.recordSpeedtest('latency', latencyDuration);
       results.isOnline = true;
       metrics.setOnlineStatus(true);
 
-      // Download test (100KB)
-      const downloadStart = Date.now();
-      const downloadResult = await speedtestRequest.fire({ type: 'download', payloadSizeKB: 100 });
-      const downloadDuration = Date.now() - downloadStart;
-      const bytesTransferred = downloadResult.payload?.length || 0;
-      const downloadSpeedMbps = downloadDuration > 0 ? (bytesTransferred * 8) / (downloadDuration * 1000) : 0;
-      results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred };
-      metrics.recordSpeedtest('download', downloadSpeedMbps);
+      // Download test - request chunks for TEST_DURATION_MS
+      {
+        const downloadStart = Date.now();
+        let totalBytes = 0;
+        while (Date.now() - downloadStart < DashboardGenerator.TEST_DURATION_MS) {
+          const chunkResult = await speedtestRequest.fire({
+            type: 'download_chunk',
+            chunkSizeKB: DashboardGenerator.CHUNK_SIZE_KB,
+          });
+          totalBytes += chunkResult.bytesTransferred;
+        }
+        const downloadDuration = Date.now() - downloadStart;
+        const downloadSpeedMbps = downloadDuration > 0 ? (totalBytes * 8) / (downloadDuration * 1000) : 0;
+        results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred: totalBytes };
+        metrics.recordSpeedtest('download', downloadSpeedMbps);
+      }
 
-      // Upload test (100KB)
-      const uploadPayload = 'x'.repeat(100 * 1024);
-      const uploadStart = Date.now();
-      await speedtestRequest.fire({ type: 'upload', payload: uploadPayload });
-      const uploadDuration = Date.now() - uploadStart;
-      const uploadSpeedMbps = uploadDuration > 0 ? (uploadPayload.length * 8) / (uploadDuration * 1000) : 0;
-      results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: uploadPayload.length };
-      metrics.recordSpeedtest('upload', uploadSpeedMbps);
+      // Upload test - send chunks for TEST_DURATION_MS
+      {
+        const uploadPayload = 'x'.repeat(DashboardGenerator.CHUNK_SIZE_KB * 1024);
+        const uploadStart = Date.now();
+        let totalBytes = 0;
+        while (Date.now() - uploadStart < DashboardGenerator.TEST_DURATION_MS) {
+          const chunkResult = await speedtestRequest.fire({
+            type: 'upload_chunk',
+            payload: uploadPayload,
+          });
+          totalBytes += chunkResult.bytesTransferred;
+        }
+        const uploadDuration = Date.now() - uploadStart;
+        const uploadSpeedMbps = uploadDuration > 0 ? (totalBytes * 8) / (uploadDuration * 1000) : 0;
+        results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: totalBytes };
+        metrics.recordSpeedtest('upload', uploadSpeedMbps);
+      }
 
     } catch (error) {
       results.error = error instanceof Error ? error.message : String(error);

ts_web_serviceworker/index.ts

@@ -1,10 +1,4 @@
-// TypeScript declatations
-import * as env from './env.js';
-declare var self: env.ServiceWindow;
-
-import { ServiceWorker } from './classes.serviceworker.js';
-
-const sw = new ServiceWorker(self);
-
-// Export getter for service worker instance (used by dashboard for TypedSocket access)
-export const getServiceWorkerInstance = (): ServiceWorker => sw;
+// Service worker entry point - NO EXPORTS here!
+// Exports at entry point cause tsbundle to output ESM format which service workers can't use.
+// The actual initialization happens in init.ts which other modules can import from.
+import './init.js';

ts_web_serviceworker/init.ts

@@ -0,0 +1,10 @@
+// Service worker initialization - creates and exports the SW instance
+// Other modules in the bundle can import from here
+import * as env from './env.js';
+declare var self: env.ServiceWindow;
+
+import { ServiceWorker } from './classes.serviceworker.js';
+
+const sw = new ServiceWorker(self);
+
+export const getServiceWorkerInstance = (): ServiceWorker => sw;