v7.8.11

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-12-04 - 7.8.11 - fix(web_inject)
+Improve logging in web injection (TypedRequest) and update dees-comms dependency
+
+- Add debug logging to ts_web_inject to explicitly filter serviceworker_* methods and avoid infinite loops
+- Log incoming TypedRequest methods for better visibility during debugging
+- Bump dependency @design.estate/dees-comms from ^1.0.27 to ^1.0.28
+
 ## 2025-12-04 - 7.8.0 - feat(serviceworker)
 Add TypedRequest traffic monitoring and SW dashboard 'Requests' panel
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "7.8.0",
+  "version": "7.8.11",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {
@@ -58,11 +58,11 @@
   ],
   "homepage": "https://code.foss.global/api.global/typedserver",
   "dependencies": {
-    "@api.global/typedrequest": "^3.1.11",
+    "@api.global/typedrequest": "^3.2.2",
     "@api.global/typedrequest-interfaces": "^3.0.19",
     "@api.global/typedsocket": "^4.1.0",
     "@cloudflare/workers-types": "^4.20251202.0",
-    "@design.estate/dees-comms": "^1.0.27",
+    "@design.estate/dees-comms": "^1.0.28",
     "@push.rocks/lik": "^6.2.2",
     "@push.rocks/smartdelay": "^3.0.5",
     "@push.rocks/smartenv": "^6.0.0",
@@ -87,7 +87,7 @@
     "@push.rocks/smartstream": "^3.2.5",
     "@push.rocks/smarttime": "^4.1.1",
     "@push.rocks/smartwatch": "^5.0.0",
-    "@push.rocks/taskbuffer": "^3.4.0",
+    "@push.rocks/taskbuffer": "^3.5.0",
     "@push.rocks/webrequest": "^4.0.1",
     "@push.rocks/webstore": "^2.0.20",
     "@tsclass/tsclass": "^9.3.0",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@api.global/typedrequest':
-        specifier: ^3.1.11
-        version: 3.1.11
+        specifier: ^3.2.2
+        version: 3.2.2
       '@api.global/typedrequest-interfaces':
         specifier: ^3.0.19
         version: 3.0.19
@@ -21,8 +21,8 @@ importers:
         specifier: ^4.20251202.0
         version: 4.20251202.0
       '@design.estate/dees-comms':
-        specifier: ^1.0.27
-        version: 1.0.27
+        specifier: ^1.0.28
+        version: 1.0.28
       '@push.rocks/lik':
         specifier: ^6.2.2
         version: 6.2.2
@@ -96,8 +96,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
       '@push.rocks/taskbuffer':
-        specifier: ^3.4.0
-        version: 3.4.0
+        specifier: ^3.5.0
+        version: 3.5.0
       '@push.rocks/webrequest':
         specifier: ^4.0.1
         version: 4.0.1
@@ -135,8 +135,8 @@ packages:
   '@api.global/typedrequest-interfaces@3.0.19':
     resolution: {integrity: sha512-uuHUXJeOy/inWSDrwD0Cwax2rovpxYllDhM2RWh+6mVpQuNmZ3uw6IVg6dA2G1rOe24Ebs+Y9SzEogo+jYN7vw==}
 
-  '@api.global/typedrequest@3.1.11':
-    resolution: {integrity: sha512-j8EO3na0WMw8pFkAfEaEui2a4TaAL1G/dv1CYl8LEPXckSKkl1BCAS1kFOW2xuI9pwZkmSqlo3xpQ3KmkmHaGQ==}
+  '@api.global/typedrequest@3.2.2':
+    resolution: {integrity: sha512-tUmpq+JRcrj8mjb44zLfcWDnArKqqRxPra5oZo4Ghp0P/wf2MhEthZcaD9iz8goJ6PnvBrbmrIz94I7VrfLIcA==}
 
   '@api.global/typedserver@3.0.80':
     resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
@@ -533,8 +533,8 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.23.4':
-    resolution: {integrity: sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==}
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
   '@borewit/text-codec@0.1.1':
@@ -546,8 +546,8 @@ packages:
   '@configvault.io/interfaces@1.0.17':
     resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
 
-  '@design.estate/dees-comms@1.0.27':
-    resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==}
+  '@design.estate/dees-comms@1.0.28':
+    resolution: {integrity: sha512-xRbgAmW34FC31mrVFmkLZ0p/qcE5M7ALHTtzPNJ/pbYF4pFxKTQi+vABL0CHZL3D1RVcAP3lOemU2CPc6svO+A==}
 
   '@design.estate/dees-domtools@2.0.65':
     resolution: {integrity: sha512-BA+xfCqiCr3fDt2BLaUgW979083Vfm01W6QJ8IclcbINggSDBmAEhfU+CVdxeogwa/d9/ctxY12suG77dqBjaA==}
@@ -1256,8 +1256,8 @@ packages:
   '@push.rocks/smartyaml@3.0.4':
     resolution: {integrity: sha512-1JRt+hnoc2zHw3AW+vXKlCdSVwqOmY/01fu+2HBviS0UDjoZCa+/rp6E3GaQb5lEEafKi8ENbffAfjXXp3N2xQ==}
 
-  '@push.rocks/taskbuffer@3.4.0':
-    resolution: {integrity: sha512-Rvwr1CzYztB9PMboojRzVSq3xGp8288kvtvWx4Mg3rvps913znMja1UOjNn52ivOxu3dHUNYE3NDSP+j84cUWQ==}
+  '@push.rocks/taskbuffer@3.5.0':
+    resolution: {integrity: sha512-Y9WwIEIyp6oVFdj06j84tfrZIvjhbMb3DF52rYxlTeYLk3W7RPhSg1bGPCbtkXWeKdBrSe37V90BkOG7Qq8Pqg==}
 
   '@push.rocks/webrequest@3.0.37':
     resolution: {integrity: sha512-fLN7kP6GeHFxE4UH4r9C9pjcQb0QkJxHeAMwXvbOqB9hh0MFNKhtGU7GoaTn8SVRGRMPc9UqZVNwo6u5l8Wn0A==}
@@ -2018,8 +2018,8 @@ packages:
   brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
-  broadcast-channel@7.0.0:
-    resolution: {integrity: sha512-a2tW0Ia1pajcPBOGUF2jXlDnvE9d5/dg6BG9h60OmRUcZVr/veUrU8vEQFwwQIhwG3KVzYwSk3v2nRRGFgQDXQ==}
+  broadcast-channel@7.2.0:
+    resolution: {integrity: sha512-JgraikEriG/TxBUi2W/w2O0jhHjXZUtXAvCZH0Yr3whjxYVgAg0hSe6r/teM+I5H5Q/q6RhyuKdC2pHNlFyepQ==}
 
   brorand@1.1.0:
     resolution: {integrity: sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=}
@@ -3161,8 +3161,8 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  oblivious-set@1.4.0:
-    resolution: {integrity: sha512-szyd0ou0T8nsAqHtprRcP3WidfsN1TnAR5yWXf2mFCEr5ek3LEOkT6EZ/92Xfs74HIdyhG5WkGxIssMU0jBaeg==}
+  oblivious-set@2.0.0:
+    resolution: {integrity: sha512-QOUH5Xrsced9fKXaQTjWoDGKeS/Or7E2jB0FN63N4mkAO4qJdB7WR7e6qWAOHM5nk25FJ8TGjhP7DH4l6vFVLg==}
     engines: {node: '>=16'}
 
   observable-fns@0.6.1:
@@ -3384,9 +3384,6 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
   registry-auth-token@5.1.0:
     resolution: {integrity: sha512-GdekYuwLXLxMuFTwAPg5UKGLW/UXzQrZvH/Zj791BQif5T05T0RsaLfHc9q3ZOKi7n+BoprPD9mJ0O0k4xzUlw==}
     engines: {node: '>=14'}
@@ -3896,7 +3893,7 @@ snapshots:
 
   '@api.global/typedrequest-interfaces@3.0.19': {}
 
-  '@api.global/typedrequest@3.1.11':
+  '@api.global/typedrequest@3.2.2':
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isounique': 1.0.5
@@ -3910,11 +3907,11 @@ snapshots:
 
   '@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@api.global/typedrequest-interfaces': 3.0.19
       '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.1.2)
       '@cloudflare/workers-types': 4.20251202.0
-      '@design.estate/dees-comms': 1.0.27
+      '@design.estate/dees-comms': 1.0.28
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartchok': 1.1.1
       '@push.rocks/smartdelay': 3.0.5
@@ -3937,7 +3934,7 @@ snapshots:
       '@push.rocks/smartsitemap': 2.0.4
       '@push.rocks/smartstream': 3.2.5
       '@push.rocks/smarttime': 4.1.1
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@push.rocks/webrequest': 3.0.37
       '@push.rocks/webstore': 2.0.20
       '@tsclass/tsclass': 9.3.0
@@ -3958,7 +3955,7 @@ snapshots:
 
   '@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isohash': 2.0.1
       '@push.rocks/smartjson': 5.2.0
@@ -3978,7 +3975,7 @@ snapshots:
 
   '@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.1.2)':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/isohash': 2.0.1
       '@push.rocks/smartdelay': 3.0.5
@@ -5245,9 +5242,7 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/runtime@7.23.4':
-    dependencies:
-      regenerator-runtime: 0.14.1
+  '@babel/runtime@7.28.4': {}
 
   '@borewit/text-codec@0.1.1': {}
 
@@ -5257,17 +5252,17 @@ snapshots:
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
 
-  '@design.estate/dees-comms@1.0.27':
+  '@design.estate/dees-comms@1.0.28':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/smartdelay': 3.0.5
-      broadcast-channel: 7.0.0
+      broadcast-channel: 7.2.0
 
   '@design.estate/dees-domtools@2.0.65':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
-      '@design.estate/dees-comms': 1.0.27
+      '@api.global/typedrequest': 3.2.2
+      '@design.estate/dees-comms': 1.0.28
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartjson': 5.2.0
@@ -5288,8 +5283,8 @@ snapshots:
 
   '@design.estate/dees-domtools@2.3.6':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
-      '@design.estate/dees-comms': 1.0.27
+      '@api.global/typedrequest': 3.2.2
+      '@design.estate/dees-comms': 1.0.28
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartjson': 5.2.0
@@ -5849,7 +5844,7 @@ snapshots:
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smartunique': 3.0.9
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@tsclass/tsclass': 9.3.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -5889,7 +5884,7 @@ snapshots:
 
   '@push.rocks/qenv@6.1.3':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@configvault.io/interfaces': 1.0.17
       '@push.rocks/smartfile': 11.2.7
       '@push.rocks/smartlog': 3.1.10
@@ -6015,7 +6010,7 @@ snapshots:
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarttime': 4.1.1
       '@push.rocks/smartunique': 3.0.9
-      '@push.rocks/taskbuffer': 3.4.0
+      '@push.rocks/taskbuffer': 3.5.0
       '@tsclass/tsclass': 9.3.0
       mongodb: 6.21.0(@aws-sdk/credential-providers@3.787.0)(socks@2.8.7)
     transitivePeerDependencies:
@@ -6376,7 +6371,7 @@ snapshots:
 
   '@push.rocks/smartserve@1.1.2':
     dependencies:
-      '@api.global/typedrequest': 3.1.11
+      '@api.global/typedrequest': 3.2.2
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0
       '@push.rocks/smartlog': 3.1.10
@@ -6523,7 +6518,7 @@ snapshots:
     dependencies:
       yaml: 2.8.1
 
-  '@push.rocks/taskbuffer@3.4.0':
+  '@push.rocks/taskbuffer@3.5.0':
     dependencies:
       '@design.estate/dees-element': 2.1.3
       '@push.rocks/lik': 6.2.2
@@ -7463,10 +7458,10 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  broadcast-channel@7.0.0:
+  broadcast-channel@7.2.0:
     dependencies:
-      '@babel/runtime': 7.23.4
-      oblivious-set: 1.4.0
+      '@babel/runtime': 7.28.4
+      oblivious-set: 2.0.0
       p-queue: 6.6.2
       unload: 2.4.1
 
@@ -8886,7 +8881,7 @@ snapshots:
 
   object-keys@1.1.1: {}
 
-  oblivious-set@1.4.0: {}
+  oblivious-set@2.0.0: {}
 
   observable-fns@0.6.1: {}
 
@@ -9130,8 +9125,6 @@ snapshots:
 
   reflect-metadata@0.2.2: {}
 
-  regenerator-runtime@0.14.1: {}
-
   registry-auth-token@5.1.0:
     dependencies:
       '@pnpm/npm-conf': 2.3.1

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@api.global/typedserver',
-  version: '7.8.0',
+  version: '7.8.11',
   description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }

ts/controllers/controller.builtin.ts

@@ -203,4 +203,25 @@ export class BuiltInRoutesController {
       return new Response('SW-Dash bundle not found', { status: 404 });
     }
   }
+
+  @plugins.smartserve.Get('/serviceworker.bundle.js')
+  async getServiceWorkerBundle(): Promise<Response> {
+    try {
+      const bundleContent = (await plugins.fsInstance
+        .file(paths.serviceworkerBundlePath)
+        .encoding('utf8')
+        .read()) as string;
+
+      return new Response(bundleContent, {
+        status: 200,
+        headers: {
+          'Content-Type': 'text/javascript',
+          'Cache-Control': 'no-cache',
+        },
+      });
+    } catch (error) {
+      console.error('Failed to serve serviceworker bundle:', error);
+      return new Response('ServiceWorker bundle not found', { status: 404 });
+    }
+  }
 }

ts/controllers/controller.typedrequest.ts

@@ -11,7 +11,7 @@ export class TypedRequestController {
     this.typedRouter = typedRouter;
   }
 
-  @plugins.smartserve.Post('/')
+  @plugins.smartserve.Post('')
   async handleTypedRequest(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
     try {
       const response = await this.typedRouter.routeAndAddResponse(ctx.body as plugins.typedrequestInterfaces.ITypedRequest);
@@ -31,4 +31,15 @@ export class TypedRequestController {
       });
     }
   }
+
+  @plugins.smartserve.Head('')
+  async handleTypedRequestHead(): Promise<Response> {
+    // HEAD request for online checking from service worker
+    return new Response(null, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
 }

ts/paths.ts

@@ -9,6 +9,7 @@ export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inje
 export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');
 
 export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+export const serviceworkerBundlePath = plugins.path.join(serviceworkerBundleDir, './serviceworker.bundle.js');
 
 export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
 export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');

ts_interfaces/serviceworker.ts

@@ -386,6 +386,7 @@ export interface IRequest_Serviceworker_GetEventLog
     limit?: number;
     type?: TEventType;
     since?: number;
+    before?: number;  // For pagination: get events before this timestamp
   };
   response: {
     events: IEventLogEntry[];
@@ -579,6 +580,7 @@ export interface IRequest_Serviceworker_GetTypedRequestLogs
     limit?: number;
     method?: string;
     since?: number;
+    before?: number;  // For pagination: get logs before this timestamp
   };
   response: {
     logs: ITypedRequestLogEntry[];

ts_swdash/sw-dash-app.ts

@@ -27,6 +27,11 @@ interface IResourceData {
 
 /**
  * Main SW Dashboard application shell
+ *
+ * Architecture:
+ * - ONE initial HTTP seed request to /sw-dash/metrics (provides ALL data)
+ * - HTTP heartbeat every 30s for SW health check
+ * - Everything else via DeesComms (push from SW, requests to SW)
  */
 @customElement('sw-dash-app')
 export class SwDashApp extends LitElement {
@@ -127,18 +132,32 @@ export class SwDashApp extends LitElement {
     `
   ];
 
+  // Core metrics
   @state() accessor currentView: ViewType = 'overview';
   @state() accessor metrics: IMetricsData | null = null;
+  @state() accessor lastRefresh = new Date().toLocaleTimeString();
+  @state() accessor isConnected = false;
+
+  // Resource data (from initial seed)
   @state() accessor resourceData: IResourceData = {
     resources: [],
     domains: [],
     contentTypes: [],
     resourceCount: 0
   };
-  @state() accessor lastRefresh = new Date().toLocaleTimeString();
-  @state() accessor isConnected = false;
 
-  // DeesComms for receiving push updates from service worker
+  // Events data (from initial seed + push updates)
+  @state() accessor events: serviceworker.IEventLogEntry[] = [];
+  @state() accessor eventTotalCount = 0;
+  @state() accessor eventCountLastHour = 0;
+
+  // Request logs data (from initial seed + push updates)
+  @state() accessor requestLogs: serviceworker.ITypedRequestLogEntry[] = [];
+  @state() accessor requestTotalCount = 0;
+  @state() accessor requestStats: serviceworker.ITypedRequestStats | null = null;
+  @state() accessor requestMethods: string[] = [];
+
+  // DeesComms for communication with service worker
   private comms: deesComms.DeesComms | null = null;
 
   // Heartbeat interval (30 seconds) for SW health check
@@ -147,7 +166,7 @@ export class SwDashApp extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    // Initial HTTP seed request to wake up SW and get initial data
+    // Initial HTTP seed request to wake up SW and get ALL initial data
     this.loadInitialData();
     // Setup push listeners via DeesComms
     this.setupPushListeners();
@@ -163,19 +182,42 @@ export class SwDashApp extends LitElement {
   }
 
   /**
-   * Initial HTTP request to seed data and wake up service worker
+   * Initial HTTP request to seed ALL data and wake up service worker
+   * This is the ONE HTTP request that provides everything:
+   * - Core metrics
+   * - Resources, domains, content types
+   * - Events (initial 50)
+   * - Request logs (initial 50), stats, methods
    */
   private async loadInitialData(): Promise<void> {
     try {
-      // Fetch metrics (wakes up SW)
-      const metricsResponse = await fetch('/sw-dash/metrics');
-      this.metrics = await metricsResponse.json();
+      const response = await fetch('/sw-dash/metrics');
+      const data = await response.json();
+
+      // Core metrics
+      this.metrics = data;
+
+      // Resource data
+      this.resourceData = {
+        resources: data.resources || [],
+        domains: data.domains || [],
+        contentTypes: data.contentTypes || [],
+        resourceCount: data.resourceCount || 0,
+      };
+
+      // Events data
+      this.events = data.events || [];
+      this.eventTotalCount = data.eventTotalCount || 0;
+      this.eventCountLastHour = data.eventCountLastHour || 0;
+
+      // Request logs data
+      this.requestLogs = data.requestLogs || [];
+      this.requestTotalCount = data.requestTotalCount || 0;
+      this.requestStats = data.requestStats || null;
+      this.requestMethods = data.requestMethods || [];
+
       this.lastRefresh = new Date().toLocaleTimeString();
       this.isConnected = true;
-
-      // Also load resources
-      const resourcesResponse = await fetch('/sw-dash/resources');
-      this.resourceData = await resourcesResponse.json();
     } catch (err) {
       console.error('Failed to load initial data:', err);
       this.isConnected = false;
@@ -183,7 +225,8 @@ export class SwDashApp extends LitElement {
   }
 
   /**
-   * Setup DeesComms handlers for receiving push updates
+   * Setup DeesComms handlers for receiving push updates from SW
+   * All real-time updates come through here
    */
   private setupPushListeners(): void {
     this.comms = new deesComms.DeesComms();
@@ -215,54 +258,6 @@ export class SwDashApp extends LitElement {
             resourceCount: snapshot.resourceCount,
             uptime: snapshot.uptime,
           };
-        } else {
-          // If no metrics yet, create minimal structure
-          this.metrics = {
-            cache: {
-              hits: snapshot.cache.hits,
-              misses: snapshot.cache.misses,
-              errors: snapshot.cache.errors,
-              bytesServedFromCache: snapshot.cache.bytesServedFromCache,
-              bytesFetched: snapshot.cache.bytesFetched,
-              averageResponseTime: 0,
-            },
-            network: {
-              totalRequests: snapshot.network.totalRequests,
-              successfulRequests: snapshot.network.successfulRequests,
-              failedRequests: snapshot.network.failedRequests,
-              timeouts: 0,
-              averageLatency: 0,
-              totalBytesTransferred: 0,
-            },
-            update: {
-              totalChecks: 0,
-              successfulChecks: 0,
-              failedChecks: 0,
-              updatesFound: 0,
-              updatesApplied: 0,
-              lastCheckTimestamp: 0,
-              lastUpdateTimestamp: 0,
-            },
-            connection: {
-              connectedClients: 0,
-              totalConnectionAttempts: 0,
-              successfulConnections: 0,
-              failedConnections: 0,
-            },
-            speedtest: {
-              lastDownloadSpeedMbps: 0,
-              lastUploadSpeedMbps: 0,
-              lastLatencyMs: 0,
-              lastTestTimestamp: 0,
-              testCount: 0,
-              isOnline: true,
-            },
-            startTime: Date.now() - snapshot.uptime,
-            uptime: snapshot.uptime,
-            cacheHitRate: snapshot.cacheHitRate,
-            networkSuccessRate: snapshot.networkSuccessRate,
-            resourceCount: snapshot.resourceCount,
-          };
         }
         this.lastRefresh = new Date().toLocaleTimeString();
         this.isConnected = true;
@@ -270,16 +265,18 @@ export class SwDashApp extends LitElement {
       }
     );
 
-    // Handle event log push updates - dispatch to events component
+    // Handle new event logged - add to our events array
     this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_EventLogged>(
       'serviceworker_eventLogged',
       async (entry) => {
-        // Dispatch custom event for sw-dash-events component
-        this.dispatchEvent(new CustomEvent('event-logged', {
-          detail: entry,
-          bubbles: true,
-          composed: true,
-        }));
+        // Prepend new event to array
+        this.events = [entry, ...this.events];
+        this.eventTotalCount++;
+        // Check if event is within last hour
+        const oneHourAgo = Date.now() - 3600000;
+        if (entry.timestamp >= oneHourAgo) {
+          this.eventCountLastHour++;
+        }
         return {};
       }
     );
@@ -299,23 +296,51 @@ export class SwDashApp extends LitElement {
       }
     );
 
-    // Handle TypedRequest logged push updates - dispatch to requests component
+    // Handle new TypedRequest logged - add to our logs array
     this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_TypedRequestLogged>(
       'serviceworker_typedRequestLogged',
       async (entry) => {
-        // Dispatch custom event for sw-dash-requests component
-        this.dispatchEvent(new CustomEvent('typedrequest-logged', {
-          detail: entry,
-          bubbles: true,
-          composed: true,
-        }));
+        // Prepend new log to array
+        this.requestLogs = [entry, ...this.requestLogs];
+        this.requestTotalCount++;
+
+        // Update stats optimistically
+        if (this.requestStats) {
+          const newStats = { ...this.requestStats };
+          if (entry.phase === 'request') {
+            newStats.totalRequests++;
+          } else {
+            newStats.totalResponses++;
+          }
+          if (entry.error) {
+            newStats.errorCount++;
+          }
+          // Update method counts
+          if (!newStats.methodCounts[entry.method]) {
+            newStats.methodCounts[entry.method] = { requests: 0, responses: 0, errors: 0, avgDurationMs: 0 };
+            // Add to methods list if new
+            if (!this.requestMethods.includes(entry.method)) {
+              this.requestMethods = [...this.requestMethods, entry.method];
+            }
+          }
+          if (entry.phase === 'request') {
+            newStats.methodCounts[entry.method].requests++;
+          } else {
+            newStats.methodCounts[entry.method].responses++;
+          }
+          if (entry.error) {
+            newStats.methodCounts[entry.method].errors++;
+          }
+          this.requestStats = newStats;
+        }
         return {};
       }
     );
   }
 
   /**
-   * Heartbeat to check SW health periodically
+   * Heartbeat to check SW health periodically (HTTP)
+   * This is the ONLY periodic HTTP request
    */
   private startHeartbeat(): void {
     this.heartbeatInterval = setInterval(async () => {
@@ -323,8 +348,22 @@ export class SwDashApp extends LitElement {
         const response = await fetch('/sw-dash/metrics');
         if (response.ok) {
           this.isConnected = true;
-          // Optionally refresh full metrics periodically
-          this.metrics = await response.json();
+          // Refresh all data from heartbeat response
+          const data = await response.json();
+          this.metrics = data;
+          this.resourceData = {
+            resources: data.resources || [],
+            domains: data.domains || [],
+            contentTypes: data.contentTypes || [],
+            resourceCount: data.resourceCount || 0,
+          };
+          this.events = data.events || [];
+          this.eventTotalCount = data.eventTotalCount || 0;
+          this.eventCountLastHour = data.eventCountLastHour || 0;
+          this.requestLogs = data.requestLogs || [];
+          this.requestTotalCount = data.requestTotalCount || 0;
+          this.requestStats = data.requestStats || null;
+          this.requestMethods = data.requestMethods || [];
           this.lastRefresh = new Date().toLocaleTimeString();
         } else {
           this.isConnected = false;
@@ -336,22 +375,96 @@ export class SwDashApp extends LitElement {
   }
 
   /**
-   * Load resource data on demand (when switching to urls/domains/types view)
+   * Handle "load more events" request from sw-dash-events component
+   * Uses DeesComms to request older events from SW
    */
-  private async loadResourceData(): Promise<void> {
+  private async handleLoadMoreEvents(e: CustomEvent<{ before: number }>): Promise<void> {
+    if (!this.comms) return;
+
     try {
-      const response = await fetch('/sw-dash/resources');
-      this.resourceData = await response.json();
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog');
+      const result = await tr.fire({
+        limit: 50,
+        before: e.detail.before,
+      });
+      // Append older events to existing array
+      this.events = [...this.events, ...result.events];
+      this.eventTotalCount = result.totalCount;
     } catch (err) {
-      console.error('Failed to load resources:', err);
+      console.error('Failed to load more events:', err);
+    }
+  }
+
+  /**
+   * Handle "clear events" request from sw-dash-events component
+   * Uses DeesComms to clear event log in SW
+   */
+  private async handleClearEvents(): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_ClearEventLog>('serviceworker_clearEventLog');
+      await tr.fire({});
+      // Clear local state
+      this.events = [];
+      this.eventTotalCount = 0;
+      this.eventCountLastHour = 0;
+    } catch (err) {
+      console.error('Failed to clear events:', err);
+    }
+  }
+
+  /**
+   * Handle "load more requests" from sw-dash-requests component
+   * Uses DeesComms to request older request logs from SW
+   */
+  private async handleLoadMoreRequests(e: CustomEvent<{ before: number; method?: string }>): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_GetTypedRequestLogs>('serviceworker_getTypedRequestLogs');
+      const result = await tr.fire({
+        limit: 50,
+        before: e.detail.before,
+        method: e.detail.method,
+      });
+      // Append older logs to existing array
+      this.requestLogs = [...this.requestLogs, ...result.logs];
+      this.requestTotalCount = result.totalCount;
+    } catch (err) {
+      console.error('Failed to load more requests:', err);
+    }
+  }
+
+  /**
+   * Handle "clear requests" from sw-dash-requests component
+   * Uses DeesComms to clear request logs in SW
+   */
+  private async handleClearRequests(): Promise<void> {
+    if (!this.comms) return;
+
+    try {
+      const tr = this.comms.createTypedRequest<serviceworker.IRequest_Serviceworker_ClearTypedRequestLogs>('serviceworker_clearTypedRequestLogs');
+      await tr.fire({});
+      // Clear local state
+      this.requestLogs = [];
+      this.requestTotalCount = 0;
+      this.requestStats = {
+        totalRequests: 0,
+        totalResponses: 0,
+        methodCounts: {},
+        errorCount: 0,
+        avgDurationMs: 0,
+      };
+      this.requestMethods = [];
+    } catch (err) {
+      console.error('Failed to clear requests:', err);
     }
   }
 
   private setView(view: ViewType): void {
     this.currentView = view;
-    if (view !== 'overview') {
-      this.loadResourceData();
-    }
+    // No HTTP fetch on view change - data is already loaded from initial seed
   }
 
   private handleSpeedtestComplete(_e: CustomEvent): void {
@@ -414,6 +527,7 @@ export class SwDashApp extends LitElement {
           <div class="view ${this.currentView === 'overview' ? 'active' : ''}">
             <sw-dash-overview
               .metrics="${this.metrics}"
+              .eventCountLastHour="${this.eventCountLastHour}"
               @speedtest-complete="${this.handleSpeedtestComplete}"
             ></sw-dash-overview>
           </div>
@@ -431,11 +545,23 @@ export class SwDashApp extends LitElement {
           </div>
 
           <div class="view ${this.currentView === 'events' ? 'active' : ''}">
-            <sw-dash-events></sw-dash-events>
+            <sw-dash-events
+              .events="${this.events}"
+              .totalCount="${this.eventTotalCount}"
+              @load-more-events="${this.handleLoadMoreEvents}"
+              @clear-events="${this.handleClearEvents}"
+            ></sw-dash-events>
           </div>
 
           <div class="view ${this.currentView === 'requests' ? 'active' : ''}">
-            <sw-dash-requests></sw-dash-requests>
+            <sw-dash-requests
+              .logs="${this.requestLogs}"
+              .totalCount="${this.requestTotalCount}"
+              .stats="${this.requestStats}"
+              .methods="${this.requestMethods}"
+              @load-more-requests="${this.handleLoadMoreRequests}"
+              @clear-requests="${this.handleClearRequests}"
+            ></sw-dash-requests>
           </div>
         </div>
 

ts_swdash/sw-dash-events.ts

@@ -18,6 +18,10 @@ type TEventFilter = 'all' | 'sw_installed' | 'sw_activated' | 'sw_updated' | 'sw
 
 /**
  * Events panel component for sw-dash
+ *
+ * Receives events via property from parent (sw-dash-app).
+ * Filtering is done locally.
+ * Load more and clear operations dispatch events to parent.
  */
 @customElement('sw-dash-events')
 export class SwDashEvents extends LitElement {
@@ -189,97 +193,52 @@ export class SwDashEvents extends LitElement {
     `
   ];
 
+  // Received from parent (sw-dash-app)
   @property({ type: Array }) accessor events: IEventLogEntry[] = [];
+  @property({ type: Number }) accessor totalCount = 0;
+
+  // Local state for filtering
   @state() accessor filter: TEventFilter = 'all';
   @state() accessor searchText = '';
-  @state() accessor totalCount = 0;
-  @state() accessor isLoading = true;
-  @state() accessor page = 1;
-  private readonly pageSize = 50;
-
-  // Bound event handler reference for cleanup
-  private boundEventHandler: ((e: Event) => void) | null = null;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.loadEvents();
-    // Listen for pushed events from parent
-    this.setupPushEventListener();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // Clean up event listener
-    if (this.boundEventHandler) {
-      window.removeEventListener('event-logged', this.boundEventHandler);
-    }
-  }
-
-  /**
-   * Sets up listener for pushed events from service worker (via sw-dash-app)
-   */
-  private setupPushEventListener(): void {
-    this.boundEventHandler = (e: Event) => {
-      const customEvent = e as CustomEvent<IEventLogEntry>;
-      const newEvent = customEvent.detail;
-
-      // Only add if it matches current filter (or filter is 'all')
-      if (this.filter === 'all' || newEvent.type === this.filter) {
-        // Prepend new event to the list
-        this.events = [newEvent, ...this.events];
-        this.totalCount++;
-      }
-    };
-
-    // Listen at window level since events bubble up with composed: true
-    window.addEventListener('event-logged', this.boundEventHandler);
-  }
-
-  private async loadEvents(): Promise<void> {
-    this.isLoading = true;
-    try {
-      const params = new URLSearchParams();
-      params.set('limit', String(this.pageSize * this.page));
-      if (this.filter !== 'all') {
-        params.set('type', this.filter);
-      }
-
-      const response = await fetch(`/sw-dash/events?${params}`);
-      const data = await response.json();
-      this.events = data.events;
-      this.totalCount = data.totalCount;
-    } catch (err) {
-      console.error('Failed to load events:', err);
-    } finally {
-      this.isLoading = false;
-    }
-  }
+  @state() accessor isLoadingMore = false;
 
   private handleFilterChange(e: Event): void {
     this.filter = (e.target as HTMLSelectElement).value as TEventFilter;
-    this.page = 1;
-    this.loadEvents();
+    // Local filtering - no HTTP request
   }
 
   private handleSearch(e: Event): void {
     this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
   }
 
-  private async handleClear(): Promise<void> {
+  private handleClear(): void {
     if (!confirm('Are you sure you want to clear the event log? This cannot be undone.')) {
       return;
     }
-    try {
-      await fetch('/sw-dash/events', { method: 'DELETE' });
-      this.loadEvents();
-    } catch (err) {
-      console.error('Failed to clear events:', err);
-    }
+    // Dispatch event to parent to clear via DeesComms
+    this.dispatchEvent(new CustomEvent('clear-events', {
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   private loadMore(): void {
-    this.page++;
-    this.loadEvents();
+    if (this.isLoadingMore || this.events.length === 0) return;
+
+    this.isLoadingMore = true;
+    const oldestEvent = this.events[this.events.length - 1];
+
+    // Dispatch event to parent to load more via DeesComms
+    this.dispatchEvent(new CustomEvent('load-more-events', {
+      detail: { before: oldestEvent.timestamp },
+      bubbles: true,
+      composed: true,
+    }));
+
+    // Reset loading state after a short delay (parent will update events prop)
+    setTimeout(() => {
+      this.isLoadingMore = false;
+    }, 1000);
   }
 
   private getTypeClass(type: string): string {
@@ -300,13 +259,27 @@ export class SwDashEvents extends LitElement {
     return type.replace(/_/g, ' ');
   }
 
+  /**
+   * Filter events locally based on type and search text
+   */
   private getFilteredEvents(): IEventLogEntry[] {
-    if (!this.searchText) return this.events;
-    return this.events.filter(e =>
-      e.message.toLowerCase().includes(this.searchText) ||
-      e.type.toLowerCase().includes(this.searchText) ||
-      (e.details && JSON.stringify(e.details).toLowerCase().includes(this.searchText))
-    );
+    let result = this.events;
+
+    // Filter by type
+    if (this.filter !== 'all') {
+      result = result.filter(e => e.type === this.filter);
+    }
+
+    // Filter by search text
+    if (this.searchText) {
+      result = result.filter(e =>
+        e.message.toLowerCase().includes(this.searchText) ||
+        e.type.toLowerCase().includes(this.searchText) ||
+        (e.details && JSON.stringify(e.details).toLowerCase().includes(this.searchText))
+      );
+    }
+
+    return result;
   }
 
   public render(): TemplateResult {
@@ -352,10 +325,10 @@ export class SwDashEvents extends LitElement {
         <button class="btn clear-btn" @click="${this.handleClear}">Clear Log</button>
       </div>
 
-      ${this.isLoading && this.events.length === 0 ? html`
-        <div class="empty-state">Loading events...</div>
+      ${this.events.length === 0 ? html`
+        <div class="empty-state">No events recorded</div>
       ` : filteredEvents.length === 0 ? html`
-        <div class="empty-state">No events found</div>
+        <div class="empty-state">No events match filter</div>
       ` : html`
         <div class="events-list">
           ${filteredEvents.map(event => html`
@@ -374,8 +347,8 @@ export class SwDashEvents extends LitElement {
 
         ${this.events.length < this.totalCount ? html`
           <div class="pagination">
-            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoading}">
-              ${this.isLoading ? 'Loading...' : 'Load More'}
+            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoadingMore}">
+              ${this.isLoadingMore ? 'Loading...' : 'Load More'}
             </button>
             <span class="page-info">${this.events.length} of ${this.totalCount} events</span>
           </div>

ts_swdash/sw-dash-overview.ts

@@ -79,42 +79,15 @@ export class SwDashOverview extends LitElement {
   ];
 
   @property({ type: Object }) accessor metrics: IMetricsData | null = null;
+  @property({ type: Number }) accessor eventCountLastHour = 0;
   @state() accessor speedtestRunning = false;
   @state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
   @state() accessor speedtestProgress = 0;
   @state() accessor speedtestElapsed = 0;
-  @state() accessor eventCountLastHour = 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 eventCountInterval: number | null = null;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.fetchEventCount();
-    // Refresh event count every 30 seconds
-    this.eventCountInterval = window.setInterval(() => this.fetchEventCount(), 30000);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.eventCountInterval) {
-      window.clearInterval(this.eventCountInterval);
-      this.eventCountInterval = null;
-    }
-  }
-
-  private async fetchEventCount(): Promise<void> {
-    try {
-      const oneHourAgo = Date.now() - 3600000;
-      const response = await fetch(`/sw-dash/events/count?since=${oneHourAgo}`);
-      const data = await response.json();
-      this.eventCountLastHour = data.count;
-    } catch (err) {
-      console.error('Failed to fetch event count:', err);
-    }
-  }
 
   private async runSpeedtest(): Promise<void> {
     if (this.speedtestRunning) return;

ts_swdash/sw-dash-requests.ts

@@ -26,6 +26,10 @@ type TPhaseFilter = 'all' | 'request' | 'response';
 
 /**
  * TypedRequest traffic monitoring panel for sw-dash
+ *
+ * Receives logs, stats, and methods via properties from parent (sw-dash-app).
+ * Filtering is done locally.
+ * Load more and clear operations dispatch events to parent.
  */
 @customElement('sw-dash-requests')
 export class SwDashRequests extends LitElement {
@@ -303,137 +307,70 @@ export class SwDashRequests extends LitElement {
     `
   ];
 
+  // Received from parent (sw-dash-app)
   @property({ type: Array }) accessor logs: ITypedRequestLogEntry[] = [];
-  @state() accessor stats: ITypedRequestStats | null = null;
+  @property({ type: Number }) accessor totalCount = 0;
+  @property({ type: Object }) accessor stats: ITypedRequestStats | null = null;
+  @property({ type: Array }) accessor methods: string[] = [];
+
+  // Local state for filtering
   @state() accessor directionFilter: TRequestFilter = 'all';
   @state() accessor phaseFilter: TPhaseFilter = 'all';
   @state() accessor methodFilter = '';
   @state() accessor searchText = '';
-  @state() accessor totalCount = 0;
-  @state() accessor isLoading = true;
-  @state() accessor page = 1;
   @state() accessor expandedPayloads: Set<string> = new Set();
-  @state() accessor availableMethods: string[] = [];
-  private readonly pageSize = 50;
-
-  // Bound event handler reference for cleanup
-  private boundLogHandler: ((e: Event) => void) | null = null;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.loadLogs();
-    this.loadStats();
-    this.loadMethods();
-    this.setupPushListener();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.boundLogHandler) {
-      window.removeEventListener('typedrequest-logged', this.boundLogHandler);
-    }
-  }
-
-  private setupPushListener(): void {
-    this.boundLogHandler = (e: Event) => {
-      const customEvent = e as CustomEvent<ITypedRequestLogEntry>;
-      const newLog = customEvent.detail;
-
-      // Apply filters
-      if (this.directionFilter !== 'all' && newLog.direction !== this.directionFilter) return;
-      if (this.phaseFilter !== 'all' && newLog.phase !== this.phaseFilter) return;
-      if (this.methodFilter && newLog.method !== this.methodFilter) return;
-
-      // Prepend new log
-      this.logs = [newLog, ...this.logs];
-      this.totalCount++;
-
-      // Update available methods if new
-      if (!this.availableMethods.includes(newLog.method)) {
-        this.availableMethods = [...this.availableMethods, newLog.method];
-      }
-    };
-
-    window.addEventListener('typedrequest-logged', this.boundLogHandler);
-  }
-
-  private async loadLogs(): Promise<void> {
-    this.isLoading = true;
-    try {
-      const params = new URLSearchParams();
-      params.set('limit', String(this.pageSize * this.page));
-      if (this.methodFilter) {
-        params.set('method', this.methodFilter);
-      }
-
-      const response = await fetch(`/sw-dash/requests?${params}`);
-      const data = await response.json();
-      this.logs = data.logs;
-      this.totalCount = data.totalCount;
-    } catch (err) {
-      console.error('Failed to load request logs:', err);
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  private async loadStats(): Promise<void> {
-    try {
-      const response = await fetch('/sw-dash/requests/stats');
-      this.stats = await response.json();
-    } catch (err) {
-      console.error('Failed to load request stats:', err);
-    }
-  }
-
-  private async loadMethods(): Promise<void> {
-    try {
-      const response = await fetch('/sw-dash/requests/methods');
-      const data = await response.json();
-      this.availableMethods = data.methods;
-    } catch (err) {
-      console.error('Failed to load methods:', err);
-    }
-  }
+  @state() accessor isLoadingMore = false;
 
   private handleDirectionFilterChange(e: Event): void {
     this.directionFilter = (e.target as HTMLSelectElement).value as TRequestFilter;
-    this.page = 1;
-    this.loadLogs();
+    // Local filtering - no HTTP request
   }
 
   private handlePhaseFilterChange(e: Event): void {
     this.phaseFilter = (e.target as HTMLSelectElement).value as TPhaseFilter;
-    this.page = 1;
-    this.loadLogs();
+    // Local filtering - no HTTP request
   }
 
   private handleMethodFilterChange(e: Event): void {
     this.methodFilter = (e.target as HTMLSelectElement).value;
-    this.page = 1;
-    this.loadLogs();
+    // Local filtering - no HTTP request
   }
 
   private handleSearch(e: Event): void {
     this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
   }
 
-  private async handleClear(): Promise<void> {
+  private handleClear(): void {
     if (!confirm('Are you sure you want to clear the request logs? This cannot be undone.')) {
       return;
     }
-    try {
-      await fetch('/sw-dash/requests', { method: 'DELETE' });
-      this.loadLogs();
-      this.loadStats();
-    } catch (err) {
-      console.error('Failed to clear request logs:', err);
-    }
+    // Dispatch event to parent to clear via DeesComms
+    this.dispatchEvent(new CustomEvent('clear-requests', {
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   private loadMore(): void {
-    this.page++;
-    this.loadLogs();
+    if (this.isLoadingMore || this.logs.length === 0) return;
+
+    this.isLoadingMore = true;
+    const oldestLog = this.logs[this.logs.length - 1];
+
+    // Dispatch event to parent to load more via DeesComms
+    this.dispatchEvent(new CustomEvent('load-more-requests', {
+      detail: {
+        before: oldestLog.timestamp,
+        method: this.methodFilter || undefined,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+
+    // Reset loading state after a short delay (parent will update logs prop)
+    setTimeout(() => {
+      this.isLoadingMore = false;
+    }, 1000);
   }
 
   private togglePayload(correlationId: string): void {
@@ -469,6 +406,9 @@ export class SwDashRequests extends LitElement {
     return `${(durationMs / 1000).toFixed(2)}s`;
   }
 
+  /**
+   * Filter logs locally based on direction, phase, method, and search text
+   */
   private getFilteredLogs(): ITypedRequestLogEntry[] {
     let result = this.logs;
 
@@ -482,6 +422,11 @@ export class SwDashRequests extends LitElement {
       result = result.filter(l => l.phase === this.phaseFilter);
     }
 
+    // Apply method filter
+    if (this.methodFilter) {
+      result = result.filter(l => l.method === this.methodFilter);
+    }
+
     // Apply search
     if (this.searchText) {
       result = result.filter(l =>
@@ -563,7 +508,7 @@ export class SwDashRequests extends LitElement {
           <span class="filter-label">Method:</span>
           <select class="filter-select" @change="${this.handleMethodFilterChange}">
             <option value="">All Methods</option>
-            ${this.availableMethods.map(m => html`<option value="${m}">${m}</option>`)}
+            ${this.methods.map(m => html`<option value="${m}">${m}</option>`)}
           </select>
 
           <input
@@ -579,10 +524,10 @@ export class SwDashRequests extends LitElement {
       </div>
 
       <!-- Request List -->
-      ${this.isLoading && this.logs.length === 0 ? html`
-        <div class="empty-state">Loading request logs...</div>
-      ` : filteredLogs.length === 0 ? html`
+      ${this.logs.length === 0 ? html`
         <div class="empty-state">No request logs found. Traffic will appear here as TypedRequests are made.</div>
+      ` : filteredLogs.length === 0 ? html`
+        <div class="empty-state">No logs match filter</div>
       ` : html`
         <div class="requests-list">
           ${filteredLogs.map(log => html`
@@ -624,8 +569,8 @@ export class SwDashRequests extends LitElement {
 
         ${this.logs.length < this.totalCount ? html`
           <div class="pagination">
-            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoading}">
-              ${this.isLoading ? 'Loading...' : 'Load More'}
+            <button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoadingMore}">
+              ${this.isLoadingMore ? 'Loading...' : 'Load More'}
             </button>
             <span class="page-info">${this.logs.length} of ${this.totalCount} logs</span>
           </div>

ts_web_inject/index.ts

@@ -303,8 +303,9 @@ export class ReloadChecker {
 
     // Helper function to log entries
     const logEntry = (entry: ITypedRequestLogEntry) => {
-      // Skip logging our own logging requests to avoid infinite loops
-      if (entry.method === 'serviceworker_typedRequestLog') {
+      // Skip logging serviceworker_* methods to avoid infinite loops
+      // These are internal SW communication methods, not app traffic
+      if (entry.method.startsWith('serviceworker_')) {
         return;
       }
       actionManager.logTypedRequest(entry);

ts_web_serviceworker/classes.backend.ts

@@ -120,6 +120,7 @@ export class ServiceworkerBackend {
         limit: reqArg.limit,
         type: reqArg.type,
         since: reqArg.since,
+        before: reqArg.before,
       });
     });
 
@@ -164,6 +165,7 @@ export class ServiceworkerBackend {
         limit: reqArg.limit,
         method: reqArg.method,
         since: reqArg.since,
+        before: reqArg.before,
       });
       const totalCount = requestLogStore.getTotalCount({
         method: reqArg.method,

ts_web_serviceworker/classes.cachemanager.ts

@@ -210,65 +210,27 @@ export class CacheManager {
           fetchEventArg.respondWith(Promise.resolve(dashboard.serveDashboard()));
           return;
         }
+        // /sw-dash/metrics - THE initial seed endpoint (provides ALL data)
         if (parsedUrl.pathname === '/sw-dash/metrics') {
           const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.serveMetrics()));
+          fetchEventArg.respondWith(dashboard.serveMetrics());
           return;
         }
+        // /sw-dash/speedtest - user-triggered speedtest
         if (parsedUrl.pathname === '/sw-dash/speedtest') {
           const dashboard = getDashboardGenerator();
           fetchEventArg.respondWith(dashboard.runSpeedtest());
           return;
         }
+        // /sw-dash/resources - resource data (kept for now, could be merged into metrics)
         if (parsedUrl.pathname === '/sw-dash/resources') {
           const dashboard = getDashboardGenerator();
           fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
           return;
         }
-        if (parsedUrl.pathname === '/sw-dash/events') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(dashboard.serveEventLog(parsedUrl.searchParams));
-          return;
-        }
-        if (parsedUrl.pathname === '/sw-dash/events/count') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(dashboard.serveEventCount(parsedUrl.searchParams));
-          return;
-        }
-        if (parsedUrl.pathname === '/sw-dash/cumulative-metrics') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(dashboard.serveCumulativeMetrics());
-          return;
-        }
-        // DELETE method for clearing events
-        if (parsedUrl.pathname === '/sw-dash/events' && originalRequest.method === 'DELETE') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(dashboard.clearEventLog());
-          return;
-        }
-
-        // TypedRequest traffic monitoring endpoints
-        if (parsedUrl.pathname === '/sw-dash/requests' && originalRequest.method === 'GET') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.serveTypedRequestLogs(parsedUrl.searchParams)));
-          return;
-        }
-        if (parsedUrl.pathname === '/sw-dash/requests/stats') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.serveTypedRequestStats()));
-          return;
-        }
-        if (parsedUrl.pathname === '/sw-dash/requests/methods') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.serveTypedRequestMethods()));
-          return;
-        }
-        // DELETE method for clearing TypedRequest logs
-        if (parsedUrl.pathname === '/sw-dash/requests' && originalRequest.method === 'DELETE') {
-          const dashboard = getDashboardGenerator();
-          fetchEventArg.respondWith(Promise.resolve(dashboard.clearTypedRequestLogs()));
-          return;
-        }
+        // All other /sw-dash/* routes removed - use DeesComms instead:
+        // - Events: via serviceworker_getEventLog, serviceworker_clearEventLog
+        // - Requests: via serviceworker_getTypedRequestLogs, serviceworker_clearTypedRequestLogs
 
         // Block requests that we don't want the service worker to handle.
         if (

ts_web_serviceworker/classes.dashboard.ts

@@ -25,15 +25,87 @@ export class DashboardGenerator {
   }
 
   /**
-   * Serves the metrics JSON endpoint
+   * Serves the metrics JSON endpoint with ALL initial data
+   * This is the single HTTP seed request that provides:
+   * - Current metrics
+   * - Initial events (last 50)
+   * - Initial request logs (last 50)
+   * - Request stats and methods
+   * - Resource data
    */
-  public serveMetrics(): Response {
-    return new Response(this.generateMetricsJson(), {
-      headers: {
-        'Content-Type': 'application/json',
-        'Cache-Control': 'no-store',
-      },
-    });
+  public async serveMetrics(): Promise<Response> {
+    try {
+      const metrics = getMetricsCollector();
+      const persistentStore = getPersistentStore();
+      await persistentStore.init();
+      const requestLogStore = getRequestLogStore();
+
+      // Get event data
+      const eventResult = await persistentStore.getEventLog({ limit: 50 });
+      const oneHourAgo = Date.now() - 3600000;
+      const eventCountLastHour = await persistentStore.getEventCount(oneHourAgo);
+
+      // Build comprehensive initial response
+      const data = {
+        // Core metrics
+        ...metrics.getMetrics(),
+        cacheHitRate: metrics.getCacheHitRate(),
+        networkSuccessRate: metrics.getNetworkSuccessRate(),
+        resourceCount: metrics.getResourceCount(),
+        summary: metrics.getSummary(),
+
+        // Resources data
+        resources: metrics.getCachedResources(),
+        domains: metrics.getDomainStats(),
+        contentTypes: metrics.getContentTypeStats(),
+
+        // Events data (initial 50)
+        events: eventResult.events,
+        eventTotalCount: eventResult.totalCount,
+        eventCountLastHour,
+
+        // Request logs data (initial 50)
+        requestLogs: requestLogStore.getEntries({ limit: 50 }),
+        requestTotalCount: requestLogStore.getTotalCount(),
+        requestStats: requestLogStore.getStats(),
+        requestMethods: requestLogStore.getMethods(),
+      };
+
+      return new Response(JSON.stringify(data), {
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store',
+        },
+      });
+    } catch (error) {
+      console.error('[SW Dashboard] serveMetrics error:', error);
+      // Return error response with valid JSON structure so client doesn't crash
+      return new Response(JSON.stringify({
+        error: String(error),
+        cache: { hits: 0, misses: 0, errors: 0, bytesServedFromCache: 0, bytesFetched: 0, averageResponseTime: 0 },
+        network: { totalRequests: 0, successfulRequests: 0, failedRequests: 0, timeouts: 0, averageLatency: 0, totalBytesTransferred: 0 },
+        update: { totalChecks: 0, successfulChecks: 0, failedChecks: 0, updatesFound: 0, updatesApplied: 0, lastCheckTimestamp: 0, lastUpdateTimestamp: 0 },
+        connection: { connectedClients: 0, totalConnectionAttempts: 0, successfulConnections: 0, failedConnections: 0 },
+        speedtest: { lastDownloadSpeedMbps: 0, lastUploadSpeedMbps: 0, lastLatencyMs: 0, lastTestTimestamp: 0, testCount: 0, isOnline: false },
+        startTime: Date.now(),
+        uptime: 0,
+        cacheHitRate: 0,
+        networkSuccessRate: 0,
+        resourceCount: 0,
+        events: [],
+        eventTotalCount: 0,
+        eventCountLastHour: 0,
+        requestLogs: [],
+        requestTotalCount: 0,
+        requestStats: { totalRequests: 0, totalResponses: 0, methodCounts: {}, errorCount: 0, avgDurationMs: 0 },
+        requestMethods: [],
+      }), {
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store',
+        },
+      });
+    }
   }
 
   /**

ts_web_serviceworker/classes.networkmanager.ts

@@ -64,7 +64,7 @@ export class NetworkManager {
     }
 
     try {
-      const response = await fetch('/sw-typedrequest', {
+      const response = await fetch('/typedrequest', {
         method: 'HEAD',
         cache: 'no-cache'
       });

ts_web_serviceworker/classes.persistentstore.ts

@@ -316,6 +316,7 @@ export class PersistentStore {
     limit?: number;
     type?: TEventType;
     since?: number;
+    before?: number;
   }): Promise<{ events: IEventLogEntry[]; totalCount: number }> {
     try {
       let events: IEventLogEntry[] = [];
@@ -336,6 +337,11 @@ export class PersistentStore {
         events = events.filter(e => e.timestamp >= options.since);
       }
 
+      // Filter by before timestamp (for pagination)
+      if (options?.before) {
+        events = events.filter(e => e.timestamp < options.before);
+      }
+
       // Sort by timestamp (newest first)
       events.sort((a, b) => b.timestamp - a.timestamp);
 

ts_web_serviceworker/classes.requestlogstore.ts

@@ -103,6 +103,7 @@ export class RequestLogStore {
     limit?: number;
     method?: string;
     since?: number;
+    before?: number;
   }): interfaces.serviceworker.ITypedRequestLogEntry[] {
     let result = [...this.logs];
 
@@ -111,11 +112,16 @@ export class RequestLogStore {
       result = result.filter((e) => e.method === options.method);
     }
 
-    // Filter by timestamp
+    // Filter by timestamp (since)
     if (options?.since) {
       result = result.filter((e) => e.timestamp >= options.since);
     }
 
+    // Filter by timestamp (before - for pagination)
+    if (options?.before) {
+      result = result.filter((e) => e.timestamp < options.before);
+    }
+
     // Sort by timestamp descending (newest first)
     result.sort((a, b) => b.timestamp - a.timestamp);
 

ts_web_serviceworker/classes.serviceworker.ts

@@ -31,6 +31,7 @@ export class ServiceWorker {
   // TypedSocket connection for server communication
   public typedsocket: plugins.typedsocket.TypedSocket;
   public typedrouter = new plugins.typedrequest.TypedRouter();
+  private handlersInitialized = false;
 
   constructor(selfArg: interfaces.ServiceWindow) {
     logger.log('info', `Service worker instantiating at ${Date.now()}`);
@@ -119,33 +120,43 @@ export class ServiceWorker {
     }
   }
 
+  /**
+   * Initialize typed handlers (idempotent - safe to call multiple times)
+   */
+  private initHandlers(): void {
+    if (this.handlersInitialized) return;
+    this.handlersInitialized = true;
+
+    // Register handler for cache invalidation from server
+    this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
+      new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
+        logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
+
+        // Log cache invalidation event (survives)
+        const persistentStore = getPersistentStore();
+        await persistentStore.init();  // Ensure store is initialized
+        await persistentStore.logEvent('cache_invalidated', `Cache invalidated: ${reqArg.reason}`, {
+          reason: reqArg.reason,
+          timestamp: reqArg.timestamp,
+        });
+
+        // Reset cumulative metrics (they don't survive cache invalidation)
+        await persistentStore.resetCumulativeMetrics();
+
+        await this.cacheManager.cleanCaches(reqArg.reason);
+        // Notify all clients to reload
+        await this.leleServiceWorkerBackend.triggerReloadAll();
+        return { success: true };
+      })
+    );
+  }
+
   /**
    * Connect to TypedServer via TypedSocket for cache invalidation
    */
   private async connectToServer(): Promise<void> {
     try {
-      // Register handler for cache invalidation from server
-      this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
-        new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
-          logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
-
-          // Log cache invalidation event (survives)
-          const persistentStore = getPersistentStore();
-          await persistentStore.init();  // Ensure store is initialized
-          await persistentStore.logEvent('cache_invalidated', `Cache invalidated: ${reqArg.reason}`, {
-            reason: reqArg.reason,
-            timestamp: reqArg.timestamp,
-          });
-
-          // Reset cumulative metrics (they don't survive cache invalidation)
-          await persistentStore.resetCumulativeMetrics();
-
-          await this.cacheManager.cleanCaches(reqArg.reason);
-          // Notify all clients to reload
-          await this.leleServiceWorkerBackend.triggerReloadAll();
-          return { success: true };
-        })
-      );
+      this.initHandlers();
 
       // Connect to server via TypedSocket
       this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(

ts_web_serviceworker/classes.updatemanager.ts

@@ -177,7 +177,7 @@ export class UpdateManager {
     try {
       const getAppHashRequest = new plugins.typedrequest.TypedRequest<
         interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo
-      >('/sw-typedrequest', 'serviceworker_versionInfo');
+      >('/typedrequest', 'serviceworker_versionInfo');
       
       // Use networkManager for the request with retries and timeout
       const response = await getAppHashRequest.fire({});

ts_web_serviceworker_client/classes.actionmanager.ts

@@ -202,6 +202,7 @@ export class ActionManager {
   public async logTypedRequest(entry: interfaces.serviceworker.ITypedRequestLogEntry): Promise<void> {
     try {
       const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IMessage_Serviceworker_TypedRequestLog>('serviceworker_typedRequestLog');
+      tr.skipHooks = true; // Prevent infinite loops - don't log the logging request
       await tr.fire(entry);
     } catch (error) {
       // Silently ignore logging errors to avoid infinite loops

ts_web_serviceworker_client/classes.globalsw.ts

@@ -1,5 +1,6 @@
 import * as plugins from './plugins.js';
 import { ServiceworkerClient } from './classes.serviceworkerclient.js';
+import { ActionManager } from './classes.actionmanager.js';
 
 export class GlobalSW {
   losslessSw: ServiceworkerClient;
@@ -8,6 +9,13 @@ export class GlobalSW {
     globalThis.globalSw = this;
   };
 
+  /**
+   * Exposes the action manager for traffic logging and SW communication
+   */
+  public get actionManager(): ActionManager {
+    return this.losslessSw.actionManager;
+  }
+
   /**
    * purges the cache of the app's serviceworker
    * @returns