feat(serviceworker): Add TypedRequest traffic monitoring and SW dashboard Requests panel

ts_web_inject/index.ts

@@ -5,6 +5,9 @@ logger.log('info', `TypedServer-Devtools initialized!`);
 
 import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
 
+// Import hook types from typedrequest
+type ITypedRequestLogEntry = plugins.typedrequest.ITypedRequestLogEntry;
+
 export class ReloadChecker {
   public reloadJustified = false;
   public backendConnectionLost = false;
@@ -18,6 +21,7 @@ export class ReloadChecker {
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
   private swStatusUnsubscribe: (() => void) | null = null;
+  private trafficLoggingEnabled = false;
 
   constructor() {
     // Listen to browser online/offline events
@@ -240,6 +244,9 @@ export class ReloadChecker {
         }
       });
       logger.log('success', `ReloadChecker connected through typedsocket!`);
+
+      // Enable traffic logging for sw-dash
+      this.enableTrafficLogging();
     }
   }
 
@@ -268,6 +275,51 @@ export class ReloadChecker {
       this.swStatusUnsubscribe();
       this.swStatusUnsubscribe = null;
     }
+    // Clear global hooks when stopping
+    if (this.trafficLoggingEnabled) {
+      plugins.typedrequest.TypedRouter.clearGlobalHooks();
+      this.trafficLoggingEnabled = false;
+    }
+  }
+
+  /**
+   * Enable TypedRequest traffic logging to the service worker
+   * Sets up global hooks on TypedRouter to capture all request/response traffic
+   */
+  public enableTrafficLogging(): void {
+    if (this.trafficLoggingEnabled) {
+      logger.log('note', 'Traffic logging already enabled');
+      return;
+    }
+
+    // Check if service worker client is available
+    if (!globalThis.globalSw?.actionManager) {
+      logger.log('note', 'Service worker client not available, will retry traffic logging setup...');
+      setTimeout(() => this.enableTrafficLogging(), 2000);
+      return;
+    }
+
+    const actionManager = globalThis.globalSw.actionManager;
+
+    // Helper function to log entries
+    const logEntry = (entry: ITypedRequestLogEntry) => {
+      // Skip logging our own logging requests to avoid infinite loops
+      if (entry.method === 'serviceworker_typedRequestLog') {
+        return;
+      }
+      actionManager.logTypedRequest(entry);
+    };
+
+    // Set up global hooks on TypedRouter
+    plugins.typedrequest.TypedRouter.setGlobalHooks({
+      onOutgoingRequest: logEntry,
+      onIncomingResponse: logEntry,
+      onIncomingRequest: logEntry,
+      onOutgoingResponse: logEntry,
+    });
+
+    this.trafficLoggingEnabled = true;
+    logger.log('success', 'TypedRequest traffic logging enabled');
   }
 }