v7.2.0

changelog.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 2025-12-04 - 7.2.0 - feat(serviceworker)
+Add service worker status updates, EventBus and UI status pill for realtime observability
+
+- Introduce a status update protocol for service worker <-> clients (IStatusUpdate, IMessage_Serviceworker_StatusUpdate, IRequest_Serviceworker_GetStatus).
+- Add typedserver-statuspill Lit component to display backend/serviceworker/network status in the UI, with expand/collapse details and persistent/error states.
+- Wire ReloadChecker to use the new status pill: show network/backend/serviceworker status, handle online/offline events, and subscribe to service worker status broadcasts.
+- Extend ActionManager (client) with subscribeToStatusUpdates and getServiceWorkerStatus helpers; forward serviceworker_statusUpdate broadcasts to registered callbacks.
+- Serviceworker backend: add serviceworker_getStatus handler and broadcastStatusUpdate API; subscribe to EventBus lifecycle/network/update events to broadcast status changes to clients.
+- Add EventBus for decoupled service worker internal events (ServiceWorkerEvent enum, pub/sub API, history and convenience emitters).
+- Ensure proper subscribe/unsubscribe lifecycle (ReloadChecker stops SW subscription on stop).
+- Improve cache/connection status reporting integration so status updates include details like cacheHitRate, resourceCount and connected clients.
+
+## 2025-12-04 - 7.1.0 - feat(swdash)
+Add live speedtest progress UI to service worker dashboard
+
+- Introduce reactive speedtest state (phase, progress, elapsed) in sw-dash-overview component
+- Start a progress interval to animate overall test progress and estimate phases (latency, download, upload)
+- Dispatch 'speedtest-complete' event and show a brief complete state before resetting UI
+- Add helper methods for phase labels and elapsed time formatting
+- Add CSS for progress bar, shimmer animation and phase pulse to sw-dash-styles
+
+## 2025-12-04 - 7.0.0 - BREAKING CHANGE(serviceworker)
+Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract
+
+- Change speedtest protocol to time-based chunk transfers: new request types 'download_chunk' and 'upload_chunk' plus 'latency'. Clients should call chunk requests in a loop for the desired test duration.
+- IRequest_Serviceworker_Speedtest interface updated: request fields renamed/changed (chunkSizeKB, payload) and response no longer includes durationMs or speedMbps — server now returns bytesTransferred, timestamp, and optional payload.
+- TypedServer speedtest handler updated to support 'download_chunk' and 'upload_chunk' semantics and to return bytesTransferred/timestamp/payload only (removed server-side duration/speed calculation).
+- Dashboard runSpeedtest now performs time-based tests (TEST_DURATION_MS = 5000, CHUNK_SIZE_KB = 64) by repeatedly requesting chunks and computing throughput on the client side.
+- Documentation/comments updated to clarify new speedtest behavior and default chunk sizes.
+
+## 2025-12-04 - 6.8.1 - fix(web_serviceworker)
+Move service worker initialization to init.ts and remove exports from service worker entrypoint to avoid ESM bundle output
+
+- Remove exports from ts_web_serviceworker/index.ts so the service worker entrypoint does not export symbols (prevents tsbundle from producing ESM output).
+- Add ts_web_serviceworker/init.ts which initializes the ServiceWorker instance and exports getServiceWorkerInstance() for internal imports.
+- Update ts_web_serviceworker/classes.dashboard.ts to import getServiceWorkerInstance from init.ts instead of index.ts.
+
 ## 2025-12-04 - 6.8.0 - feat(swdash)
 Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "6.8.0",
+  "version": "7.2.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.2.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,86 @@ export interface IRequest_Serviceworker_Speedtest
   > {
   method: 'serviceworker_speedtest';
   request: {
-    type: 'download' | 'upload' | 'latency';
-    payloadSizeKB?: number;  // Size of test payload in KB (default: 100)
-    payload?: string;        // For upload tests, the payload to send
+    type: 'latency' | 'download_chunk' | 'upload_chunk';
+    chunkSizeKB?: number;    // Size of chunk in KB (default: 64)
+    payload?: string;        // For upload_chunk, the data to send
   };
   response: {
-    durationMs: number;
     bytesTransferred: number;
-    speedMbps: number;
     timestamp: number;
-    payload?: string;        // For download tests, the payload received
+    payload?: string;        // For download_chunk, the data received
+  };
+}
+
+// ===============
+// Status update interfaces
+// ===============
+
+/**
+ * Status update source types
+ */
+export type TStatusSource = 'backend' | 'serviceworker' | 'network';
+
+/**
+ * Status update event types
+ */
+export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
+
+/**
+ * Status update details
+ */
+export interface IStatusDetails {
+  version?: string;
+  cacheHitRate?: number;
+  resourceCount?: number;
+  connectionType?: string;
+  latencyMs?: number;
+  message?: string;
+}
+
+/**
+ * Status update payload sent from SW to clients
+ */
+export interface IStatusUpdate {
+  source: TStatusSource;
+  type: TStatusType;
+  message: string;
+  details?: IStatusDetails;
+  persist?: boolean;  // Stay visible until resolved
+  timestamp: number;
+}
+
+/**
+ * Message for status updates from service worker to clients
+ */
+export interface IMessage_Serviceworker_StatusUpdate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IMessage_Serviceworker_StatusUpdate
+  > {
+  method: 'serviceworker_statusUpdate';
+  request: IStatusUpdate;
+  response: {};
+}
+
+/**
+ * Request to get current service worker status
+ */
+export interface IRequest_Serviceworker_GetStatus
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_GetStatus
+  > {
+  method: 'serviceworker_getStatus';
+  request: {};
+  response: {
+    isActive: boolean;
+    isOnline: boolean;
+    version?: string;
+    cacheHitRate: number;
+    resourceCount: number;
+    connectionType?: string;
+    connectedClients: number;
+    lastUpdateCheck: number;
   };
 }

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_inject/index.ts

@@ -3,12 +3,12 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
 import { logger } from './typedserver_web.logger.js';
 logger.log('info', `TypedServer-Devtools initialized!`);
 
-import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
+import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
 
 export class ReloadChecker {
   public reloadJustified = false;
   public backendConnectionLost = false;
-  public infoscreen = new TypedserverInfoscreen();
+  public statusPill = new TypedserverStatusPill();
   public store = new plugins.webstore.WebStore({
     dbName: 'apiglobal__typedserver',
     storeName: 'apiglobal__typedserver',
@@ -17,14 +17,90 @@ export class ReloadChecker {
 
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
+  private swStatusUnsubscribe: (() => void) | null = null;
 
-  constructor() {}
+  constructor() {
+    // Listen to browser online/offline events
+    window.addEventListener('online', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'online',
+        message: 'Back online',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    window.addEventListener('offline', () => {
+      this.statusPill.updateStatus({
+        source: 'network',
+        type: 'offline',
+        message: 'No internet connection',
+        persist: true,
+        timestamp: Date.now(),
+      });
+    });
+  }
 
   public async reload() {
     // this looks a bit hacky, but apparently is the safest way to really reload stuff
     window.location.reload();
   }
 
+  /**
+   * Subscribe to service worker status updates
+   */
+  public subscribeToServiceWorker(): void {
+    // Check if service worker client is available
+    if (globalThis.globalSw?.actionManager) {
+      this.swStatusUnsubscribe = globalThis.globalSw.actionManager.subscribeToStatusUpdates((status) => {
+        this.statusPill.updateStatus({
+          source: status.source,
+          type: status.type,
+          message: status.message,
+          details: status.details,
+          persist: status.persist || false,
+          timestamp: status.timestamp,
+        });
+      });
+      logger.log('info', 'Subscribed to service worker status updates');
+
+      // Get initial SW status
+      this.fetchServiceWorkerStatus();
+    } else {
+      logger.log('note', 'Service worker client not available yet, will retry...');
+      // Retry after a delay
+      setTimeout(() => this.subscribeToServiceWorker(), 2000);
+    }
+  }
+
+  /**
+   * Fetch and display initial service worker status
+   */
+  private async fetchServiceWorkerStatus(): Promise<void> {
+    if (!globalThis.globalSw?.actionManager) return;
+
+    try {
+      const status = await globalThis.globalSw.actionManager.getServiceWorkerStatus();
+      if (status) {
+        this.statusPill.updateStatus({
+          source: 'serviceworker',
+          type: status.isActive ? 'connected' : 'disconnected',
+          message: status.isActive ? 'Service worker active' : 'Service worker inactive',
+          details: {
+            cacheHitRate: status.cacheHitRate,
+            resourceCount: status.resourceCount,
+            connectionType: status.connectionType,
+          },
+          persist: false,
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      logger.log('warn', `Failed to get SW status: ${error}`);
+    }
+  }
+
   /**
    * starts the reload checker
    */
@@ -50,11 +126,23 @@ export class ReloadChecker {
     if (response?.status !== 200) {
       this.backendConnectionLost = true;
       logger.log('warn', `got a status ${response?.status}.`);
-      this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'disconnected',
+        message: `Backend connection lost (${response?.status || 'timeout'})`,
+        persist: true,
+        timestamp: Date.now(),
+      });
     }
     if (response?.status === 200 && this.backendConnectionLost) {
       this.backendConnectionLost = false;
-      this.infoscreen.setSuccess('regained connection to backend...');
+      this.statusPill.updateStatus({
+        source: 'backend',
+        type: 'connected',
+        message: 'Backend connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
     }
     return response;
   }
@@ -69,10 +157,15 @@ export class ReloadChecker {
 
     if (reloadJustified) {
       this.store.set(this.storeKey, lastServerChange);
-      const reloadText = `upgrading... ${
-        globalThis.globalSw ? '(purging the sw cache first...)' : ''
-      }`;
-      this.infoscreen.setText(reloadText);
+      const hasSw = !!globalThis.globalSw;
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'update',
+        message: hasSw ? 'Updating app...' : 'Upgrading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
+
       if (globalThis.globalSw?.purgeCache) {
         await globalThis.globalSw.purgeCache();
       } else if ('caches' in window) {
@@ -87,14 +180,19 @@ export class ReloadChecker {
       } else {
         console.log('globalThis.globalSw not found and Cache API not available...');
       }
-      this.infoscreen.setText(`cleaned caches`);
+
+      this.statusPill.updateStatus({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Cache cleared, reloading...',
+        persist: true,
+        timestamp: Date.now(),
+      });
       await plugins.smartdelay.delayFor(200);
       this.reload();
       return;
     } else {
-      if (this.infoscreen) {
-        this.infoscreen.hide();
-      }
+      // All good, hide after brief show
       return;
     }
   }
@@ -116,10 +214,22 @@ export class ReloadChecker {
         console.log(`typedsocket status: ${statusArg}`);
         if (statusArg === 'disconnected' || statusArg === 'reconnecting') {
           this.backendConnectionLost = true;
-          this.infoscreen.setText(`typedsocket ${statusArg}!`);
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: statusArg === 'disconnected' ? 'disconnected' : 'reconnecting',
+            message: `TypedSocket ${statusArg}`,
+            persist: true,
+            timestamp: Date.now(),
+          });
         } else if (statusArg === 'connected' && this.backendConnectionLost) {
           this.backendConnectionLost = false;
-          this.infoscreen.setSuccess('typedsocket connected!');
+          this.statusPill.updateStatus({
+            source: 'backend',
+            type: 'connected',
+            message: 'TypedSocket connected',
+            persist: false,
+            timestamp: Date.now(),
+          });
           // lets check if a reload is necessary
           const getLatestServerChangeTime =
             this.typedsocket.createTypedRequest<interfaces.IReq_GetLatestServerChangeTime>(
@@ -137,9 +247,13 @@ export class ReloadChecker {
   public async start() {
     this.started = true;
     logger.log('info', `starting ReloadChecker...`);
+
+    // Subscribe to service worker status updates
+    this.subscribeToServiceWorker();
+
     while (this.started) {
       const response = await this.performHttpRequest();
-      if (response.status === 200) {
+      if (response?.status === 200) {
         logger.log('info', `ReloadChecker reached backend!`);
         await this.checkReload(parseInt(await response.text()));
         await this.connectTypedsocket();
@@ -150,6 +264,10 @@ export class ReloadChecker {
 
   public async stop() {
     this.started = false;
+    if (this.swStatusUnsubscribe) {
+      this.swStatusUnsubscribe();
+      this.swStatusUnsubscribe = null;
+    }
   }
 }
 

ts_web_inject/typedserver_web.statuspill.ts

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

ts_web_serviceworker/classes.backend.ts

@@ -2,6 +2,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';
+import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
 
 // Add type definitions for ServiceWorker APIs
 declare global {
@@ -75,8 +76,128 @@ export class ServiceworkerBackend {
       return await optionsArg.purgeCache?.(reqArg);
     });
 
+    // Handler for getting current SW status
+    this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus', async () => {
+      const metrics = getMetricsCollector();
+      const metricsData = metrics.getMetrics();
+      return {
+        isActive: true,
+        isOnline: metricsData.speedtest.isOnline,
+        cacheHitRate: metrics.getCacheHitRate(),
+        resourceCount: metrics.getResourceCount(),
+        connectedClients: metricsData.connection.connectedClients,
+        lastUpdateCheck: metricsData.update.lastCheckTimestamp,
+      };
+    });
+
     // Periodically update connected clients count
     this.startClientCountUpdates();
+
+    // Subscribe to EventBus and broadcast status updates
+    this.setupEventBusSubscriptions();
+  }
+
+  /**
+   * Sets up subscriptions to EventBus events and broadcasts them to clients
+   */
+  private setupEventBusSubscriptions(): void {
+    const eventBus = getEventBus();
+
+    // Network status changes
+    eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'online',
+        message: 'Connection restored',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, () => {
+      this.broadcastStatusUpdate({
+        source: 'network',
+        type: 'offline',
+        message: 'Connection lost - offline mode',
+        persist: true,
+        timestamp: Date.now(),
+      });
+    });
+
+    // Update events
+    eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update available',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'update',
+        message: 'Update applied',
+        details: {
+          version: payload.newVersion,
+        },
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, (_event, payload: any) => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'error',
+        message: `Update error: ${payload.error || 'Unknown error'}`,
+        persist: true,
+        timestamp: Date.now(),
+      });
+    });
+
+    // Cache invalidation
+    eventBus.on(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'cache',
+        message: 'Clearing cache...',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+
+    // Lifecycle events
+    eventBus.on(ServiceWorkerEvent.ACTIVATE, () => {
+      this.broadcastStatusUpdate({
+        source: 'serviceworker',
+        type: 'connected',
+        message: 'Service worker activated',
+        persist: false,
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /**
+   * Broadcasts a status update to all connected clients
+   */
+  public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
+    try {
+      await this.deesComms.postMessage({
+        method: 'serviceworker_statusUpdate',
+        request: status,
+        messageId: `sw_status_${Date.now()}`
+      });
+      logger.log('info', `Status update broadcast: ${status.source}:${status.type} - ${status.message}`);
+    } catch (error) {
+      logger.log('warn', `Failed to broadcast status update: ${error}`);
+    }
   }
 
   /**

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;

ts_web_serviceworker_client/classes.actionmanager.ts

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