v6.8.0

changelog.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2025-12-04 - 6.8.0 - feat(swdash)
+Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
+
+- Add a new sw-dash frontend (ts_swdash) implemented with Lit: sw-dash-app, sw-dash-overview, sw-dash-urls, sw-dash-domains, sw-dash-types, sw-dash-table, shared styles and plugin shims.
+- Wire sw-dash into build pipeline and packaging: add ts_swdash bundle to npm build script and include ts_swdash in package files.
+- Serve the dashboard bundle: add paths (swdashBundleDir / swdashBundlePath) and a built-in route (/sw-dash/bundle.js) in BuiltInRoutesController.
+- Simplify service-worker dashboard HTML output to a minimal shell that mounts <sw-dash-app> and loads the module /sw-dash/bundle.js (reduces inline HTML/CSS/JS duplication).
+- Lazy-load service worker bundle and source map in servertools.tools.serviceworker and expose /sw-typedrequest endpoints for SW typed requests (including speedtest handler).
+- Enhance compression utilities and static serving: Compressor now caches compressed results, prioritizes preferred compression methods, provides safer zlib calls, and exposes createCompressionStream; HandlerStatic gained improved path resolution, Express 5 wildcard handling and optional compression flow.
+- Improve proxy/static handler path handling to be compatible with Express 5 wildcard parameters and more robust fallback logic.
+- Deprecate Server.addTypedSocket (no-op) and document recommended SmartServe/TypedServer integration for WebSocket support.
+- Various minor packaging/path updates (paths.ts, plugins exports) to support the new dashboard and bundles.
+
+## 2025-12-04 - 6.7.0 - feat(web_serviceworker)
+Add per-resource metrics and request deduplication to service worker cache manager
+
+- Introduce per-resource tracking in metrics: ICachedResource, IDomainStats, IContentTypeStats and a resourceStats map.
+- Add MetricsCollector.recordResourceAccess(...) to record hits/misses, content-type and size; provide getters: getCachedResources, getDomainStats, getContentTypeStats and getResourceCount.
+- Reset resourceStats when metrics are reset and limit resource entries via cleanupResourceStats to avoid memory bloat.
+- Add request deduplication in CacheManager (fetchWithDeduplication) to coalesce identical concurrent fetches and a periodic safety cleanup for in-flight requests.
+- Record resource accesses on cache hit and when storing new cache entries (captures content-type and body size).
+- Expose a dashboard resources endpoint (/sw-dash/resources) served by the SW dashboard to return detailed resource data for SPA views.
+
 ## 2025-12-04 - 6.6.0 - feat(web_serviceworker)
 Enable service worker dashboard speedtests via TypedSocket, expose ServiceWorker instance to dashboard, and add server-side speedtest handler
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "6.6.0",
+  "version": "6.8.0",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {
@@ -15,7 +15,7 @@
   "scripts": {
     "test": "npm run build && tstest test/ --verbose --logfile --timeout 60",
     "build": "tsbuild tsfolders --web --allowimplicitany && npm run bundle",
-    "bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js",
+    "bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js && tsbundle --from ./ts_swdash/index.ts --to ./dist_ts_swdash/bundle.js",
     "interfaces": "tsbuild interfaces --web --allowimplicitany --skiplibcheck",
     "docs": "tsdoc aidoc"
   },
@@ -47,6 +47,7 @@
   "files": [
     "ts/**/*",
     "ts_web/**/*",
+    "ts_swdash/**/*",
     "dist/**/*",
     "dist_*/**/*",
     "dist_ts/**/*",

ts/00_commitinfo_data.ts

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

@@ -1,4 +1,5 @@
 import * as plugins from '../plugins.js';
+import * as paths from '../paths.js';
 
 /**
  * Built-in routes controller for TypedServer
@@ -122,4 +123,25 @@ export class BuiltInRoutesController {
       headers: { 'Content-Type': 'text/plain' },
     });
   }
+
+  @plugins.smartserve.Get('/sw-dash/bundle.js')
+  async getSwDashBundle(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
+    try {
+      const bundleContent = (await plugins.fsInstance
+        .file(paths.swdashBundlePath)
+        .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 sw-dash bundle:', error);
+      return new Response('SW-Dash bundle not found', { status: 404 });
+    }
+  }
 }

ts/paths.ts

@@ -8,4 +8,7 @@ export const packageDir = plugins.path.join(
 export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inject');
 export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');
 
-export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
+
+export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
+export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');

ts_swdash/index.ts

@@ -0,0 +1,13 @@
+// SW-Dash: Service Worker Dashboard
+// Entry point for the Lit-based dashboard application
+
+// Import the main app component (which imports all others)
+import './sw-dash-app.js';
+
+// Export components for external use if needed
+export { SwDashApp } from './sw-dash-app.js';
+export { SwDashOverview } from './sw-dash-overview.js';
+export { SwDashTable } from './sw-dash-table.js';
+export { SwDashUrls } from './sw-dash-urls.js';
+export { SwDashDomains } from './sw-dash-domains.js';
+export { SwDashTypes } from './sw-dash-types.js';

ts_swdash/plugins.ts

@@ -0,0 +1,15 @@
+// Lit imports
+import { LitElement, html, css } from 'lit';
+import type { CSSResult, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+export {
+  LitElement,
+  html,
+  css,
+  customElement,
+  property,
+  state,
+};
+
+export type { CSSResult, TemplateResult };

ts_swdash/sw-dash-app.ts

@@ -0,0 +1,186 @@
+import { LitElement, html, css, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, terminalStyles, navStyles } from './sw-dash-styles.js';
+import type { IMetricsData } from './sw-dash-overview.js';
+import type { ICachedResource } from './sw-dash-urls.js';
+import type { IDomainStats } from './sw-dash-domains.js';
+import type { IContentTypeStats } from './sw-dash-types.js';
+
+// Import components to register them
+import './sw-dash-overview.js';
+import './sw-dash-urls.js';
+import './sw-dash-domains.js';
+import './sw-dash-types.js';
+import './sw-dash-table.js';
+
+type ViewType = 'overview' | 'urls' | 'domains' | 'types';
+
+interface IResourceData {
+  resources: ICachedResource[];
+  domains: IDomainStats[];
+  contentTypes: IContentTypeStats[];
+  resourceCount: number;
+}
+
+/**
+ * Main SW Dashboard application shell
+ */
+@customElement('sw-dash-app')
+export class SwDashApp extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    terminalStyles,
+    navStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--sw-bg-dark);
+        min-height: 100vh;
+        padding: 20px;
+      }
+
+      .view {
+        display: none;
+      }
+
+      .view.active {
+        display: block;
+      }
+    `
+  ];
+
+  @state() accessor currentView: ViewType = 'overview';
+  @state() accessor metrics: IMetricsData | null = null;
+  @state() accessor resourceData: IResourceData = {
+    resources: [],
+    domains: [],
+    contentTypes: [],
+    resourceCount: 0
+  };
+  @state() accessor lastRefresh = new Date().toLocaleTimeString();
+
+  private refreshInterval: ReturnType<typeof setInterval> | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadMetrics();
+    this.loadResourceData();
+    // Auto-refresh every 2 seconds
+    this.refreshInterval = setInterval(() => {
+      this.loadMetrics();
+      if (this.currentView !== 'overview') {
+        this.loadResourceData();
+      }
+    }, 2000);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+    }
+  }
+
+  private async loadMetrics(): Promise<void> {
+    try {
+      const response = await fetch('/sw-dash/metrics');
+      this.metrics = await response.json();
+      this.lastRefresh = new Date().toLocaleTimeString();
+    } catch (err) {
+      console.error('Failed to load metrics:', err);
+    }
+  }
+
+  private async loadResourceData(): Promise<void> {
+    try {
+      const response = await fetch('/sw-dash/resources');
+      this.resourceData = await response.json();
+    } catch (err) {
+      console.error('Failed to load resources:', err);
+    }
+  }
+
+  private setView(view: ViewType): void {
+    this.currentView = view;
+    if (view !== 'overview') {
+      this.loadResourceData();
+    }
+  }
+
+  private handleSpeedtestComplete(_e: CustomEvent): void {
+    // Refresh metrics after speedtest
+    this.loadMetrics();
+  }
+
+  private formatUptime(ms: number): string {
+    const s = Math.floor(ms / 1000);
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    const d = Math.floor(h / 24);
+    if (d > 0) return `${d}d ${h % 24}h`;
+    if (h > 0) return `${h}h ${m % 60}m`;
+    if (m > 0) return `${m}m ${s % 60}s`;
+    return `${s}s`;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="terminal">
+        <div class="header">
+          <span class="title">[SW-DASH] Service Worker Dashboard</span>
+          <span class="uptime">Uptime: ${this.metrics ? this.formatUptime(this.metrics.uptime) : '...'}</span>
+        </div>
+
+        <nav class="nav">
+          <button
+            class="nav-tab ${this.currentView === 'overview' ? 'active' : ''}"
+            @click="${() => this.setView('overview')}"
+          >Overview</button>
+          <button
+            class="nav-tab ${this.currentView === 'urls' ? 'active' : ''}"
+            @click="${() => this.setView('urls')}"
+          >URLs <span class="count">${this.resourceData.resourceCount}</span></button>
+          <button
+            class="nav-tab ${this.currentView === 'domains' ? 'active' : ''}"
+            @click="${() => this.setView('domains')}"
+          >Domains</button>
+          <button
+            class="nav-tab ${this.currentView === 'types' ? 'active' : ''}"
+            @click="${() => this.setView('types')}"
+          >Types</button>
+        </nav>
+
+        <div class="content">
+          <div class="view ${this.currentView === 'overview' ? 'active' : ''}">
+            <sw-dash-overview
+              .metrics="${this.metrics}"
+              @speedtest-complete="${this.handleSpeedtestComplete}"
+            ></sw-dash-overview>
+          </div>
+
+          <div class="view ${this.currentView === 'urls' ? 'active' : ''}">
+            <sw-dash-urls .resources="${this.resourceData.resources}"></sw-dash-urls>
+          </div>
+
+          <div class="view ${this.currentView === 'domains' ? 'active' : ''}">
+            <sw-dash-domains .domains="${this.resourceData.domains}"></sw-dash-domains>
+          </div>
+
+          <div class="view ${this.currentView === 'types' ? 'active' : ''}">
+            <sw-dash-types .contentTypes="${this.resourceData.contentTypes}"></sw-dash-types>
+          </div>
+        </div>
+
+        <div class="footer">
+          <span class="refresh-info">
+            <span class="prompt">$</span> Last refresh: ${this.lastRefresh}<span class="cursor"></span>
+          </span>
+          <div class="status">
+            <span class="status-dot"></span>
+            <span>Auto-refresh: 2s</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

ts_swdash/sw-dash-domains.ts

@@ -0,0 +1,52 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface IDomainStats {
+  domain: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Domains table view component
+ */
+@customElement('sw-dash-domains')
+export class SwDashDomains extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor domains: IDomainStats[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'domain', label: 'Domain' },
+    { key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.domains}"
+        filterPlaceholder="Filter domains..."
+        infoLabel="domains"
+      ></sw-dash-table>
+    `;
+  }
+}

ts_swdash/sw-dash-overview.ts

@@ -0,0 +1,183 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, panelStyles, gaugeStyles, buttonStyles, speedtestStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+
+export interface IMetricsData {
+  cache: {
+    hits: number;
+    misses: number;
+    errors: number;
+    bytesServedFromCache: number;
+    bytesFetched: number;
+    averageResponseTime: number;
+  };
+  network: {
+    totalRequests: number;
+    successfulRequests: number;
+    failedRequests: number;
+    timeouts: number;
+    averageLatency: number;
+    totalBytesTransferred: number;
+  };
+  update: {
+    totalChecks: number;
+    successfulChecks: number;
+    failedChecks: number;
+    updatesFound: number;
+    updatesApplied: number;
+    lastCheckTimestamp: number;
+    lastUpdateTimestamp: number;
+  };
+  connection: {
+    connectedClients: number;
+    totalConnectionAttempts: number;
+    successfulConnections: number;
+    failedConnections: number;
+  };
+  speedtest: {
+    lastDownloadSpeedMbps: number;
+    lastUploadSpeedMbps: number;
+    lastLatencyMs: number;
+    lastTestTimestamp: number;
+    testCount: number;
+    isOnline: boolean;
+  };
+  startTime: number;
+  uptime: number;
+  cacheHitRate: number;
+  networkSuccessRate: number;
+  resourceCount: number;
+}
+
+/**
+ * Overview panel component with metrics gauges and stats
+ */
+@customElement('sw-dash-overview')
+export class SwDashOverview extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    panelStyles,
+    gaugeStyles,
+    buttonStyles,
+    speedtestStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Object }) accessor metrics: IMetricsData | null = null;
+  @state() accessor speedtestRunning = false;
+
+  private async runSpeedtest(): Promise<void> {
+    if (this.speedtestRunning) return;
+    this.speedtestRunning = true;
+
+    try {
+      const response = await fetch('/sw-dash/speedtest');
+      const result = await response.json();
+
+      // Dispatch event to parent to update metrics
+      this.dispatchEvent(new CustomEvent('speedtest-complete', {
+        detail: result,
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error('Speedtest failed:', err);
+    } finally {
+      this.speedtestRunning = false;
+    }
+  }
+
+  public render(): TemplateResult {
+    if (!this.metrics) {
+      return html`<div class="panel">Loading metrics...</div>`;
+    }
+
+    const m = this.metrics;
+    const gaugeClass = SwDashTable.getGaugeClass;
+
+    return html`
+      <div class="grid">
+        <!-- Cache Panel -->
+        <div class="panel">
+          <div class="panel-title">[ CACHE ]</div>
+          <div class="gauge">
+            <div class="gauge-bar">
+              <div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
+              <span class="gauge-text">${m.cacheHitRate}% hit rate</span>
+            </div>
+          </div>
+          <div class="row"><span class="label">Hits:</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
+          <div class="row"><span class="label">Misses:</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
+          <div class="row"><span class="label">Errors:</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
+          <div class="row"><span class="label">From Cache:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
+          <div class="row"><span class="label">Fetched:</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
+          <div class="row"><span class="label">Resources:</span><span class="value">${m.resourceCount}</span></div>
+        </div>
+
+        <!-- Network Panel -->
+        <div class="panel">
+          <div class="panel-title">[ NETWORK ]</div>
+          <div class="gauge">
+            <div class="gauge-bar">
+              <div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
+              <span class="gauge-text">${m.networkSuccessRate}% success</span>
+            </div>
+          </div>
+          <div class="row"><span class="label">Total Requests:</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
+          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
+          <div class="row"><span class="label">Failed:</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
+          <div class="row"><span class="label">Timeouts:</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
+          <div class="row"><span class="label">Avg Latency:</span><span class="value">${m.network.averageLatency}ms</span></div>
+          <div class="row"><span class="label">Transferred:</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
+        </div>
+
+        <!-- Updates Panel -->
+        <div class="panel">
+          <div class="panel-title">[ UPDATES ]</div>
+          <div class="row"><span class="label">Total Checks:</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
+          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
+          <div class="row"><span class="label">Failed:</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
+          <div class="row"><span class="label">Updates Found:</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
+          <div class="row"><span class="label">Updates Applied:</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
+          <div class="row"><span class="label">Last Check:</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
+        </div>
+
+        <!-- Connections Panel -->
+        <div class="panel">
+          <div class="panel-title">[ CONNECTIONS ]</div>
+          <div class="row"><span class="label">Active Clients:</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
+          <div class="row"><span class="label">Total Attempts:</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
+          <div class="row"><span class="label">Successful:</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
+          <div class="row"><span class="label">Failed:</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
+          <div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed var(--sw-border);">
+            <span class="label">Started:</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span>
+          </div>
+        </div>
+
+        <!-- Speedtest Panel -->
+        <div class="panel">
+          <div class="panel-title">[ SPEEDTEST ]</div>
+          <div class="online-indicator">
+            <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>
+          <div class="btn-row">
+            <button class="btn" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
+              ${this.speedtestRunning ? 'Testing...' : 'Run Test'}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

ts_swdash/sw-dash-styles.ts

@@ -0,0 +1,427 @@
+import { css } from './plugins.js';
+import type { CSSResult } from './plugins.js';
+
+/**
+ * Shared terminal-style theme for sw-dash components
+ */
+export const sharedStyles: CSSResult = css`
+  :host {
+    --sw-bg-dark: #0a0a0a;
+    --sw-bg-panel: #0d0d0d;
+    --sw-bg-header: #111;
+    --sw-bg-input: #1a1a1a;
+    --sw-border: #333;
+    --sw-border-active: #00ff00;
+    --sw-text-primary: #00ff00;
+    --sw-text-secondary: #888;
+    --sw-text-cyan: #00ffff;
+    --sw-text-warning: #ffff00;
+    --sw-text-error: #ff4444;
+    --sw-gauge-good: #00aa00;
+    --sw-gauge-warning: #aaaa00;
+    --sw-gauge-bad: #aa0000;
+
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--sw-text-primary);
+  }
+`;
+
+export const terminalStyles: CSSResult = css`
+  .terminal {
+    max-width: 1200px;
+    margin: 0 auto;
+    border: 1px solid var(--sw-border-active);
+    background: var(--sw-bg-panel);
+    box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
+  }
+
+  .header {
+    border-bottom: 1px solid var(--sw-border-active);
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--sw-bg-header);
+  }
+
+  .title {
+    color: var(--sw-text-primary);
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  .uptime {
+    color: var(--sw-text-secondary);
+  }
+
+  .content {
+    padding: 15px;
+    min-height: 400px;
+  }
+
+  .footer {
+    border-top: 1px solid var(--sw-border-active);
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--sw-bg-header);
+    font-size: 12px;
+  }
+
+  .refresh-info {
+    color: var(--sw-text-secondary);
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--sw-text-primary);
+    animation: pulse 2s infinite;
+  }
+
+  .prompt {
+    color: var(--sw-text-primary);
+  }
+
+  .cursor {
+    display: inline-block;
+    width: 8px;
+    height: 14px;
+    background: var(--sw-text-primary);
+    animation: blink 1s step-end infinite;
+    vertical-align: middle;
+    margin-left: 2px;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+`;
+
+export const navStyles: CSSResult = css`
+  .nav {
+    display: flex;
+    background: var(--sw-bg-header);
+    border-bottom: 1px solid var(--sw-border);
+    padding: 0 10px;
+  }
+
+  .nav-tab {
+    padding: 10px 20px;
+    cursor: pointer;
+    color: var(--sw-text-secondary);
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 13px;
+    transition: all 0.2s;
+    border-bottom: 2px solid transparent;
+  }
+
+  .nav-tab:hover {
+    color: var(--sw-text-primary);
+  }
+
+  .nav-tab.active {
+    color: var(--sw-text-primary);
+    border-bottom-color: var(--sw-text-primary);
+    background: var(--sw-bg-input);
+  }
+
+  .nav-tab .count {
+    background: var(--sw-border);
+    padding: 1px 6px;
+    border-radius: 8px;
+    font-size: 11px;
+    margin-left: 6px;
+  }
+`;
+
+export const panelStyles: CSSResult = css`
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    gap: 15px;
+  }
+
+  .panel {
+    border: 1px solid var(--sw-border);
+    padding: 12px;
+    background: var(--sw-bg-dark);
+  }
+
+  .panel-title {
+    color: var(--sw-text-cyan);
+    font-weight: bold;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 1px dashed var(--sw-border);
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 0;
+  }
+
+  .label {
+    color: var(--sw-text-secondary);
+  }
+
+  .value {
+    color: var(--sw-text-primary);
+  }
+
+  .value.warning {
+    color: var(--sw-text-warning);
+  }
+
+  .value.error {
+    color: var(--sw-text-error);
+  }
+
+  .value.success {
+    color: var(--sw-text-primary);
+  }
+`;
+
+export const gaugeStyles: CSSResult = css`
+  .gauge {
+    margin: 8px 0;
+  }
+
+  .gauge-bar {
+    height: 16px;
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border);
+    position: relative;
+    font-size: 12px;
+  }
+
+  .gauge-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+
+  .gauge-fill.good {
+    background: var(--sw-gauge-good);
+  }
+
+  .gauge-fill.warning {
+    background: var(--sw-gauge-warning);
+  }
+
+  .gauge-fill.bad {
+    background: var(--sw-gauge-bad);
+  }
+
+  .gauge-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px #000;
+  }
+`;
+
+export const tableStyles: CSSResult = css`
+  .table-container {
+    overflow-x: auto;
+  }
+
+  .data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+
+  .data-table th,
+  .data-table td {
+    padding: 8px 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--sw-border);
+  }
+
+  .data-table th {
+    background: var(--sw-bg-input);
+    color: var(--sw-text-cyan);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .data-table th:hover {
+    background: #252525;
+  }
+
+  .data-table th .sort-icon {
+    margin-left: 5px;
+    opacity: 0.5;
+  }
+
+  .data-table th.sorted .sort-icon {
+    opacity: 1;
+    color: var(--sw-text-primary);
+  }
+
+  .data-table tr:hover {
+    background: #151515;
+  }
+
+  .data-table td {
+    color: #ccc;
+  }
+
+  .data-table td.url {
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .data-table td.num {
+    text-align: right;
+    color: var(--sw-text-primary);
+  }
+
+  .table-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 10px;
+  }
+
+  .search-input {
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border);
+    color: var(--sw-text-primary);
+    padding: 6px 10px;
+    font-family: inherit;
+    font-size: 12px;
+    width: 250px;
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--sw-border-active);
+  }
+
+  .table-info {
+    color: var(--sw-text-secondary);
+    font-size: 12px;
+  }
+
+  .hit-rate-bar {
+    width: 60px;
+    height: 10px;
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border);
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+
+  .hit-rate-fill {
+    height: 100%;
+  }
+
+  .hit-rate-fill.good {
+    background: var(--sw-gauge-good);
+  }
+
+  .hit-rate-fill.warning {
+    background: var(--sw-gauge-warning);
+  }
+
+  .hit-rate-fill.bad {
+    background: var(--sw-gauge-bad);
+  }
+`;
+
+export const buttonStyles: CSSResult = css`
+  .btn {
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border-active);
+    color: var(--sw-text-primary);
+    padding: 8px 16px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 12px;
+    transition: all 0.2s ease;
+  }
+
+  .btn:hover {
+    background: var(--sw-text-primary);
+    color: #000;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-row {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
+`;
+
+export const speedtestStyles: CSSResult = css`
+  .online-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed var(--sw-border);
+  }
+
+  .online-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    transition: background-color 0.3s ease;
+  }
+
+  .online-dot.online {
+    background: var(--sw-text-primary);
+    box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
+  }
+
+  .online-dot.offline {
+    background: var(--sw-text-error);
+    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
+  }
+
+  .speed-bar {
+    height: 8px;
+    background: var(--sw-bg-input);
+    border: 1px solid var(--sw-border);
+    margin: 4px 0;
+  }
+
+  .speed-fill {
+    height: 100%;
+    background: var(--sw-gauge-good);
+    transition: width 0.5s ease;
+  }
+`;

ts_swdash/sw-dash-table.ts

@@ -0,0 +1,173 @@
+import { LitElement, html, css, property, state, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+
+export interface IColumnConfig {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  formatter?: (value: any, row: any) => string;
+  className?: string;
+}
+
+/**
+ * Base sortable table component for sw-dash
+ */
+@customElement('sw-dash-table')
+export class SwDashTable extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor columns: IColumnConfig[] = [];
+  @property({ type: Array }) accessor data: any[] = [];
+  @property({ type: String }) accessor filterPlaceholder = 'Filter...';
+  @property({ type: String }) accessor infoLabel = 'items';
+
+  @state() accessor sortColumn = '';
+  @state() accessor sortDirection: 'asc' | 'desc' = 'desc';
+  @state() accessor filterText = '';
+
+  // Utility formatters
+  static formatNumber(n: number): string {
+    return n.toLocaleString();
+  }
+
+  static formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
+  static formatTimestamp(ts: number): string {
+    if (!ts || ts === 0) return 'never';
+    const ago = Date.now() - ts;
+    if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
+    if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
+    if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
+    return new Date(ts).toLocaleDateString();
+  }
+
+  static getGaugeClass(rate: number): string {
+    if (rate >= 80) return 'good';
+    if (rate >= 50) return 'warning';
+    return 'bad';
+  }
+
+  private handleSort(column: string): void {
+    if (this.sortColumn === column) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortColumn = column;
+      this.sortDirection = 'desc';
+    }
+  }
+
+  private handleFilter(e: Event): void {
+    this.filterText = (e.target as HTMLInputElement).value;
+  }
+
+  private getSortedFilteredData(): any[] {
+    let result = [...this.data];
+
+    // Filter
+    if (this.filterText) {
+      const search = this.filterText.toLowerCase();
+      result = result.filter(row => {
+        return this.columns.some(col => {
+          const val = row[col.key];
+          if (val == null) return false;
+          return String(val).toLowerCase().includes(search);
+        });
+      });
+    }
+
+    // Sort
+    if (this.sortColumn) {
+      result.sort((a, b) => {
+        let valA = a[this.sortColumn];
+        let valB = b[this.sortColumn];
+        if (typeof valA === 'string') valA = valA.toLowerCase();
+        if (typeof valB === 'string') valB = valB.toLowerCase();
+        if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
+        if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return result;
+  }
+
+  private renderHitRateBar(rate: number): TemplateResult {
+    const cls = SwDashTable.getGaugeClass(rate);
+    return html`
+      <span class="hit-rate-bar">
+        <span class="hit-rate-fill ${cls}" style="width: ${rate}%"></span>
+      </span>${rate}%
+    `;
+  }
+
+  protected renderCellValue(value: any, row: any, column: IColumnConfig): any {
+    if (column.formatter) {
+      return column.formatter(value, row);
+    }
+    // Special handling for hitRate
+    if (column.key === 'hitRate') {
+      return this.renderHitRateBar(value);
+    }
+    return value;
+  }
+
+  public render(): TemplateResult {
+    const sortedData = this.getSortedFilteredData();
+
+    return html`
+      <div class="table-controls">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="${this.filterPlaceholder}"
+          .value="${this.filterText}"
+          @input="${this.handleFilter}"
+        >
+        <span class="table-info">${sortedData.length} of ${this.data.length} ${this.infoLabel}</span>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              ${this.columns.map(col => html`
+                <th
+                  class="${this.sortColumn === col.key ? 'sorted' : ''}"
+                  @click="${() => col.sortable !== false && this.handleSort(col.key)}"
+                >
+                  ${col.label}
+                  ${col.sortable !== false ? html`
+                    <span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '^' : 'v'}</span>
+                  ` : ''}
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${sortedData.map(row => html`
+              <tr>
+                ${this.columns.map(col => html`
+                  <td class="${col.className || ''}">${this.renderCellValue(row[col.key], row, col)}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}

ts_swdash/sw-dash-types.ts

@@ -0,0 +1,52 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface IContentTypeStats {
+  contentType: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Content types table view component
+ */
+@customElement('sw-dash-types')
+export class SwDashTypes extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'contentType', label: 'Content Type' },
+    { key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.contentTypes}"
+        filterPlaceholder="Filter types..."
+        infoLabel="content types"
+      ></sw-dash-table>
+    `;
+  }
+}

ts_swdash/sw-dash-urls.ts

@@ -0,0 +1,66 @@
+import { LitElement, html, css, property, customElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+import { sharedStyles, tableStyles } from './sw-dash-styles.js';
+import { SwDashTable } from './sw-dash-table.js';
+import type { IColumnConfig } from './sw-dash-table.js';
+
+export interface ICachedResource {
+  url: string;
+  domain: string;
+  contentType: string;
+  size: number;
+  hitCount: number;
+  missCount: number;
+  lastAccessed: number;
+  cachedAt: number;
+  hitRate?: number;
+}
+
+/**
+ * URLs table view component
+ */
+@customElement('sw-dash-urls')
+export class SwDashUrls extends LitElement {
+  public static styles: CSSResult[] = [
+    sharedStyles,
+    tableStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  @property({ type: Array }) accessor resources: ICachedResource[] = [];
+
+  private columns: IColumnConfig[] = [
+    { key: 'url', label: 'URL', className: 'url' },
+    { key: 'contentType', label: 'Type' },
+    { key: 'size', label: 'Size', className: 'num', formatter: SwDashTable.formatBytes },
+    { key: 'hitCount', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'missCount', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
+    { key: 'hitRate', label: 'Hit Rate' },
+    { key: 'lastAccessed', label: 'Last Access', formatter: SwDashTable.formatTimestamp },
+  ];
+
+  private getDataWithHitRate(): ICachedResource[] {
+    return this.resources.map(r => {
+      const total = r.hitCount + r.missCount;
+      return {
+        ...r,
+        hitRate: total > 0 ? Math.round((r.hitCount / total) * 100) : 0
+      };
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <sw-dash-table
+        .columns="${this.columns}"
+        .data="${this.getDataWithHitRate()}"
+        filterPlaceholder="Filter URLs..."
+        infoLabel="resources"
+      ></sw-dash-table>
+    `;
+  }
+}

ts_web_serviceworker/classes.cachemanager.ts

@@ -220,6 +220,11 @@ export class CacheManager {
           fetchEventArg.respondWith(dashboard.runSpeedtest());
           return;
         }
+        if (parsedUrl.pathname === '/sw-dash/resources') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
+          return;
+        }
 
         // Block requests that we don't want the service worker to handle.
         if (
@@ -260,7 +265,9 @@ export class CacheManager {
             // Record cache hit
             const contentLength = cachedResponse.headers.get('content-length');
             const bytes = contentLength ? parseInt(contentLength, 10) : 0;
+            const contentType = cachedResponse.headers.get('content-type') || 'unknown';
             metrics.recordCacheHit(matchRequest.url, bytes);
+            metrics.recordResourceAccess(matchRequest.url, true, contentType, bytes);
             eventBus.emitCacheHit(matchRequest.url, bytes);
 
             logger.log('ok', `CACHED: Found cached response for ${matchRequest.url}`);
@@ -335,6 +342,12 @@ export class CacheManager {
               });
 
               await cache.put(matchRequest, newCachedResponse);
+
+              // Record resource access for per-resource tracking
+              const cachedContentType = newResponse.headers.get('content-type') || 'unknown';
+              const cachedSize = bodyBlob.size;
+              metrics.recordResourceAccess(matchRequest.url, false, cachedContentType, cachedSize);
+
               logger.log('ok', `NOWCACHED: Cached response for ${matchRequest.url} for subsequent requests!`);
               done.resolve(newResponse);
             } catch (err) {

ts_web_serviceworker/classes.dashboard.ts

@@ -4,7 +4,7 @@ import * as interfaces from './env.js';
 
 /**
  * Dashboard generator that creates a terminal-like metrics display
- * served directly from the service worker
+ * served directly from the service worker as a single-page app
  */
 export class DashboardGenerator {
   /**
@@ -31,6 +31,18 @@ export class DashboardGenerator {
     });
   }
 
+  /**
+   * Serves detailed resource data for the SPA views
+   */
+  public serveResources(): Response {
+    return new Response(this.generateResourcesJson(), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
   /**
    * Runs a speedtest and returns the results
    */
@@ -113,19 +125,28 @@ export class DashboardGenerator {
       ...metrics.getMetrics(),
       cacheHitRate: metrics.getCacheHitRate(),
       networkSuccessRate: metrics.getNetworkSuccessRate(),
+      resourceCount: metrics.getResourceCount(),
       summary: metrics.getSummary(),
     });
   }
 
   /**
-   * Generates the complete HTML dashboard page with terminal-like styling
+   * Generates JSON response with detailed resource data
+   */
+  public generateResourcesJson(): string {
+    const metrics = getMetricsCollector();
+    return JSON.stringify({
+      resources: metrics.getCachedResources(),
+      domains: metrics.getDomainStats(),
+      contentTypes: metrics.getContentTypeStats(),
+      resourceCount: metrics.getResourceCount(),
+    });
+  }
+
+  /**
+   * Generates a minimal HTML shell that loads the Lit-based dashboard bundle
    */
   public generateDashboardHtml(): string {
-    const metrics = getMetricsCollector();
-    const data = metrics.getMetrics();
-    const hitRate = metrics.getCacheHitRate();
-    const successRate = metrics.getNetworkSuccessRate();
-
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -133,680 +154,20 @@ export class DashboardGenerator {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SW Dashboard</title>
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
+    * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
       background: #0a0a0a;
-      color: #00ff00;
-      font-family: 'Courier New', Courier, monospace;
-      font-size: 14px;
-      line-height: 1.4;
-      padding: 20px;
       min-height: 100vh;
     }
-
-    .terminal {
-      max-width: 900px;
-      margin: 0 auto;
-      border: 1px solid #00ff00;
-      background: #0d0d0d;
-      box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
-    }
-
-    .header {
-      border-bottom: 1px solid #00ff00;
-      padding: 10px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #111;
-    }
-
-    .title {
-      color: #00ff00;
-      font-weight: bold;
-      font-size: 16px;
-    }
-
-    .uptime {
-      color: #888;
-    }
-
-    .content {
-      padding: 15px;
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-      gap: 15px;
-    }
-
-    .panel {
-      border: 1px solid #333;
-      padding: 12px;
-      background: #0a0a0a;
-    }
-
-    .panel-title {
-      color: #00ffff;
-      font-weight: bold;
-      margin-bottom: 10px;
-      padding-bottom: 5px;
-      border-bottom: 1px dashed #333;
-    }
-
-    .row {
-      display: flex;
-      justify-content: space-between;
-      padding: 3px 0;
-    }
-
-    .label {
-      color: #888;
-    }
-
-    .value {
-      color: #00ff00;
-    }
-
-    .value.warning {
-      color: #ffff00;
-    }
-
-    .value.error {
-      color: #ff4444;
-    }
-
-    .value.success {
-      color: #00ff00;
-    }
-
-    .gauge {
-      margin: 8px 0;
-    }
-
-    .gauge-bar {
-      height: 16px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      position: relative;
-      font-size: 12px;
-    }
-
-    .gauge-fill {
-      height: 100%;
-      transition: width 0.3s ease;
-    }
-
-    .gauge-fill.good {
-      background: #00aa00;
-    }
-
-    .gauge-fill.warning {
-      background: #aaaa00;
-    }
-
-    .gauge-fill.bad {
-      background: #aa0000;
-    }
-
-    .gauge-text {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: #fff;
-      font-weight: bold;
-      text-shadow: 1px 1px 2px #000;
-    }
-
-    .footer {
-      border-top: 1px solid #00ff00;
-      padding: 10px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #111;
-      font-size: 12px;
-    }
-
-    .refresh-info {
-      color: #888;
-    }
-
-    .status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #00ff00;
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-
-    .ascii-bar {
-      font-family: monospace;
-      letter-spacing: 0;
-    }
-
-    .prompt {
-      color: #00ff00;
-    }
-
-    .cursor {
-      display: inline-block;
-      width: 8px;
-      height: 14px;
-      background: #00ff00;
-      animation: blink 1s step-end infinite;
-      vertical-align: middle;
-      margin-left: 2px;
-    }
-
-    @keyframes blink {
-      50% { opacity: 0; }
-    }
-
-    .btn {
-      background: #1a1a1a;
-      border: 1px solid #00ff00;
-      color: #00ff00;
-      padding: 8px 16px;
-      cursor: pointer;
-      font-family: 'Courier New', Courier, monospace;
-      font-size: 12px;
-      transition: all 0.2s ease;
-    }
-
-    .btn:hover {
-      background: #00ff00;
-      color: #000;
-    }
-
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .online-indicator {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 0;
-      margin-bottom: 10px;
-      border-bottom: 1px dashed #333;
-    }
-
-    .online-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      transition: background-color 0.3s ease;
-    }
-
-    .online-dot.online {
-      background: #00ff00;
-      box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
-    }
-
-    .online-dot.offline {
-      background: #ff4444;
-      box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
-    }
-
-    .speedtest-results {
-      margin-top: 10px;
-    }
-
-    .speed-bar {
-      height: 8px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      margin: 4px 0;
-    }
-
-    .speed-fill {
-      height: 100%;
-      background: #00aa00;
-      transition: width 0.5s ease;
-    }
-
-    .btn-row {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 10px;
-    }
   </style>
 </head>
 <body>
-  <div class="terminal">
-    <div class="header">
-      <span class="title">[SW-DASH] Service Worker Metrics</span>
-      <span class="uptime" id="uptime">Uptime: ${this.formatDuration(data.uptime)}</span>
-    </div>
-
-    <div class="content">
-      <div class="grid">
-        <div class="panel">
-          <div class="panel-title">[ CACHE ]</div>
-          <div class="gauge">
-            <div class="gauge-bar">
-              <div class="gauge-fill ${this.getGaugeClass(hitRate)}" style="width: ${hitRate}%"></div>
-              <span class="gauge-text">${hitRate}% hit rate</span>
-            </div>
-          </div>
-          <div class="row">
-            <span class="label">Hits:</span>
-            <span class="value success" id="cache-hits">${this.formatNumber(data.cache.hits)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Misses:</span>
-            <span class="value warning" id="cache-misses">${this.formatNumber(data.cache.misses)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Errors:</span>
-            <span class="value ${data.cache.errors > 0 ? 'error' : ''}" id="cache-errors">${this.formatNumber(data.cache.errors)}</span>
-          </div>
-          <div class="row">
-            <span class="label">From Cache:</span>
-            <span class="value" id="cache-bytes">${this.formatBytes(data.cache.bytesServedFromCache)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Fetched:</span>
-            <span class="value" id="cache-fetched">${this.formatBytes(data.cache.bytesFetched)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Avg Response:</span>
-            <span class="value" id="cache-response">${data.cache.averageResponseTime}ms</span>
-          </div>
-        </div>
-
-        <div class="panel">
-          <div class="panel-title">[ NETWORK ]</div>
-          <div class="gauge">
-            <div class="gauge-bar">
-              <div class="gauge-fill ${this.getGaugeClass(successRate)}" style="width: ${successRate}%"></div>
-              <span class="gauge-text">${successRate}% success</span>
-            </div>
-          </div>
-          <div class="row">
-            <span class="label">Total Requests:</span>
-            <span class="value" id="net-total">${this.formatNumber(data.network.totalRequests)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Successful:</span>
-            <span class="value success" id="net-success">${this.formatNumber(data.network.successfulRequests)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Failed:</span>
-            <span class="value ${data.network.failedRequests > 0 ? 'error' : ''}" id="net-failed">${this.formatNumber(data.network.failedRequests)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Timeouts:</span>
-            <span class="value ${data.network.timeouts > 0 ? 'warning' : ''}" id="net-timeouts">${this.formatNumber(data.network.timeouts)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Avg Latency:</span>
-            <span class="value" id="net-latency">${data.network.averageLatency}ms</span>
-          </div>
-          <div class="row">
-            <span class="label">Transferred:</span>
-            <span class="value" id="net-bytes">${this.formatBytes(data.network.totalBytesTransferred)}</span>
-          </div>
-        </div>
-
-        <div class="panel">
-          <div class="panel-title">[ UPDATES ]</div>
-          <div class="row">
-            <span class="label">Total Checks:</span>
-            <span class="value" id="upd-checks">${this.formatNumber(data.update.totalChecks)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Successful:</span>
-            <span class="value success" id="upd-success">${this.formatNumber(data.update.successfulChecks)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Failed:</span>
-            <span class="value ${data.update.failedChecks > 0 ? 'error' : ''}" id="upd-failed">${this.formatNumber(data.update.failedChecks)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Updates Found:</span>
-            <span class="value" id="upd-found">${this.formatNumber(data.update.updatesFound)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Updates Applied:</span>
-            <span class="value success" id="upd-applied">${this.formatNumber(data.update.updatesApplied)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Last Check:</span>
-            <span class="value" id="upd-last-check">${this.formatTimestamp(data.update.lastCheckTimestamp)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Last Update:</span>
-            <span class="value" id="upd-last-update">${this.formatTimestamp(data.update.lastUpdateTimestamp)}</span>
-          </div>
-        </div>
-
-        <div class="panel">
-          <div class="panel-title">[ CONNECTIONS ]</div>
-          <div class="row">
-            <span class="label">Active Clients:</span>
-            <span class="value success" id="conn-clients">${this.formatNumber(data.connection.connectedClients)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Total Attempts:</span>
-            <span class="value" id="conn-attempts">${this.formatNumber(data.connection.totalConnectionAttempts)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Successful:</span>
-            <span class="value success" id="conn-success">${this.formatNumber(data.connection.successfulConnections)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Failed:</span>
-            <span class="value ${data.connection.failedConnections > 0 ? 'error' : ''}" id="conn-failed">${this.formatNumber(data.connection.failedConnections)}</span>
-          </div>
-          <div class="row" style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed #333;">
-            <span class="label">Started:</span>
-            <span class="value" id="start-time">${this.formatTimestamp(data.startTime)}</span>
-          </div>
-        </div>
-
-        <div class="panel">
-          <div class="panel-title">[ SPEEDTEST ]</div>
-          <div class="online-indicator">
-            <span class="online-dot ${data.speedtest.isOnline ? 'online' : 'offline'}" id="online-dot"></span>
-            <span class="value ${data.speedtest.isOnline ? 'success' : 'error'}" id="online-status">${data.speedtest.isOnline ? 'Online' : 'Offline'}</span>
-          </div>
-          <div class="row">
-            <span class="label">Download:</span>
-            <span class="value" id="speed-download">${data.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span>
-          </div>
-          <div class="speed-bar">
-            <div class="speed-fill" id="speed-download-bar" style="width: ${Math.min(data.speedtest.lastDownloadSpeedMbps, 100)}%"></div>
-          </div>
-          <div class="row">
-            <span class="label">Upload:</span>
-            <span class="value" id="speed-upload">${data.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span>
-          </div>
-          <div class="speed-bar">
-            <div class="speed-fill" id="speed-upload-bar" style="width: ${Math.min(data.speedtest.lastUploadSpeedMbps, 100)}%"></div>
-          </div>
-          <div class="row">
-            <span class="label">Latency:</span>
-            <span class="value" id="speed-latency">${data.speedtest.lastLatencyMs.toFixed(0)} ms</span>
-          </div>
-          <div class="row">
-            <span class="label">Last Test:</span>
-            <span class="value" id="speed-last-test">${this.formatTimestamp(data.speedtest.lastTestTimestamp)}</span>
-          </div>
-          <div class="row">
-            <span class="label">Test Count:</span>
-            <span class="value" id="speed-test-count">${data.speedtest.testCount}</span>
-          </div>
-          <div class="btn-row">
-            <button class="btn" id="run-speedtest" onclick="runSpeedtest()">Run Test</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="footer">
-      <span class="refresh-info">
-        <span class="prompt">$</span> Last refresh: <span id="last-refresh">${new Date().toLocaleTimeString()}</span><span class="cursor"></span>
-      </span>
-      <div class="status">
-        <span class="status-dot"></span>
-        <span>Auto-refresh: 2s</span>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    function formatNumber(num) {
-      return num.toLocaleString();
-    }
-
-    function formatBytes(bytes) {
-      if (bytes === 0) return '0 B';
-      const k = 1024;
-      const sizes = ['B', 'KB', 'MB', 'GB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }
-
-    function formatDuration(ms) {
-      const seconds = Math.floor(ms / 1000);
-      const minutes = Math.floor(seconds / 60);
-      const hours = Math.floor(minutes / 60);
-      const days = Math.floor(hours / 24);
-
-      if (days > 0) return days + 'd ' + (hours % 24) + 'h';
-      if (hours > 0) return hours + 'h ' + (minutes % 60) + 'm';
-      if (minutes > 0) return minutes + 'm ' + (seconds % 60) + 's';
-      return seconds + 's';
-    }
-
-    function formatTimestamp(ts) {
-      if (!ts || ts === 0) return 'never';
-      const ago = Date.now() - ts;
-      if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
-      if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
-      if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
-      return new Date(ts).toLocaleDateString();
-    }
-
-    function getGaugeClass(rate) {
-      if (rate >= 80) return 'good';
-      if (rate >= 50) return 'warning';
-      return 'bad';
-    }
-
-    function updateDashboard(data) {
-      // Uptime
-      document.getElementById('uptime').textContent = 'Uptime: ' + formatDuration(data.uptime);
-
-      // Cache
-      document.getElementById('cache-hits').textContent = formatNumber(data.cache.hits);
-      document.getElementById('cache-misses').textContent = formatNumber(data.cache.misses);
-      document.getElementById('cache-errors').textContent = formatNumber(data.cache.errors);
-      document.getElementById('cache-bytes').textContent = formatBytes(data.cache.bytesServedFromCache);
-      document.getElementById('cache-fetched').textContent = formatBytes(data.cache.bytesFetched);
-      document.getElementById('cache-response').textContent = data.cache.averageResponseTime + 'ms';
-
-      // Update cache gauge
-      const cacheGauge = document.querySelector('.panel:nth-child(1) .gauge-fill');
-      cacheGauge.style.width = data.cacheHitRate + '%';
-      cacheGauge.className = 'gauge-fill ' + getGaugeClass(data.cacheHitRate);
-      document.querySelector('.panel:nth-child(1) .gauge-text').textContent = data.cacheHitRate + '% hit rate';
-
-      // Network
-      document.getElementById('net-total').textContent = formatNumber(data.network.totalRequests);
-      document.getElementById('net-success').textContent = formatNumber(data.network.successfulRequests);
-      document.getElementById('net-failed').textContent = formatNumber(data.network.failedRequests);
-      document.getElementById('net-timeouts').textContent = formatNumber(data.network.timeouts);
-      document.getElementById('net-latency').textContent = data.network.averageLatency + 'ms';
-      document.getElementById('net-bytes').textContent = formatBytes(data.network.totalBytesTransferred);
-
-      // Update network gauge
-      const netGauge = document.querySelector('.panel:nth-child(2) .gauge-fill');
-      netGauge.style.width = data.networkSuccessRate + '%';
-      netGauge.className = 'gauge-fill ' + getGaugeClass(data.networkSuccessRate);
-      document.querySelector('.panel:nth-child(2) .gauge-text').textContent = data.networkSuccessRate + '% success';
-
-      // Updates
-      document.getElementById('upd-checks').textContent = formatNumber(data.update.totalChecks);
-      document.getElementById('upd-success').textContent = formatNumber(data.update.successfulChecks);
-      document.getElementById('upd-failed').textContent = formatNumber(data.update.failedChecks);
-      document.getElementById('upd-found').textContent = formatNumber(data.update.updatesFound);
-      document.getElementById('upd-applied').textContent = formatNumber(data.update.updatesApplied);
-      document.getElementById('upd-last-check').textContent = formatTimestamp(data.update.lastCheckTimestamp);
-      document.getElementById('upd-last-update').textContent = formatTimestamp(data.update.lastUpdateTimestamp);
-
-      // Connections
-      document.getElementById('conn-clients').textContent = formatNumber(data.connection.connectedClients);
-      document.getElementById('conn-attempts').textContent = formatNumber(data.connection.totalConnectionAttempts);
-      document.getElementById('conn-success').textContent = formatNumber(data.connection.successfulConnections);
-      document.getElementById('conn-failed').textContent = formatNumber(data.connection.failedConnections);
-      document.getElementById('start-time').textContent = formatTimestamp(data.startTime);
-
-      // Speedtest
-      if (data.speedtest) {
-        const onlineDot = document.getElementById('online-dot');
-        const onlineStatus = document.getElementById('online-status');
-        onlineDot.className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
-        onlineStatus.textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
-        onlineStatus.className = 'value ' + (data.speedtest.isOnline ? 'success' : 'error');
-
-        document.getElementById('speed-download').textContent = data.speedtest.lastDownloadSpeedMbps.toFixed(2) + ' Mbps';
-        document.getElementById('speed-upload').textContent = data.speedtest.lastUploadSpeedMbps.toFixed(2) + ' Mbps';
-        document.getElementById('speed-latency').textContent = data.speedtest.lastLatencyMs.toFixed(0) + ' ms';
-        document.getElementById('speed-last-test').textContent = formatTimestamp(data.speedtest.lastTestTimestamp);
-        document.getElementById('speed-test-count').textContent = formatNumber(data.speedtest.testCount);
-
-        // Update speed bars (max 100 Mbps for visualization)
-        document.getElementById('speed-download-bar').style.width = Math.min(data.speedtest.lastDownloadSpeedMbps, 100) + '%';
-        document.getElementById('speed-upload-bar').style.width = Math.min(data.speedtest.lastUploadSpeedMbps, 100) + '%';
-      }
-
-      // Last refresh
-      document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
-    }
-
-    // Speedtest function
-    let speedtestRunning = false;
-    async function runSpeedtest() {
-      if (speedtestRunning) return;
-
-      speedtestRunning = true;
-      const btn = document.getElementById('run-speedtest');
-      const originalText = btn.textContent;
-      btn.textContent = 'Testing...';
-      btn.disabled = true;
-
-      try {
-        const response = await fetch('/sw-dash/speedtest');
-        const result = await response.json();
-
-        // Update online status immediately
-        const onlineDot = document.getElementById('online-dot');
-        const onlineStatus = document.getElementById('online-status');
-        onlineDot.className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
-        onlineStatus.textContent = result.isOnline ? 'Online' : 'Offline';
-        onlineStatus.className = 'value ' + (result.isOnline ? 'success' : 'error');
-
-        if (result.download) {
-          document.getElementById('speed-download').textContent = result.download.speedMbps.toFixed(2) + ' Mbps';
-          document.getElementById('speed-download-bar').style.width = Math.min(result.download.speedMbps, 100) + '%';
-        }
-        if (result.upload) {
-          document.getElementById('speed-upload').textContent = result.upload.speedMbps.toFixed(2) + ' Mbps';
-          document.getElementById('speed-upload-bar').style.width = Math.min(result.upload.speedMbps, 100) + '%';
-        }
-        if (result.latency) {
-          document.getElementById('speed-latency').textContent = result.latency.durationMs.toFixed(0) + ' ms';
-        }
-        document.getElementById('speed-last-test').textContent = 'just now';
-
-        if (result.error) {
-          console.error('Speedtest error:', result.error);
-        }
-      } catch (err) {
-        console.error('Failed to run speedtest:', err);
-        // Mark as offline on error
-        const onlineDot = document.getElementById('online-dot');
-        const onlineStatus = document.getElementById('online-status');
-        onlineDot.className = 'online-dot offline';
-        onlineStatus.textContent = 'Offline';
-        onlineStatus.className = 'value error';
-      } finally {
-        speedtestRunning = false;
-        btn.textContent = originalText;
-        btn.disabled = false;
-      }
-    }
-
-    // Auto-refresh every 2 seconds
-    setInterval(async () => {
-      try {
-        const response = await fetch('/sw-dash/metrics');
-        const data = await response.json();
-        updateDashboard(data);
-      } catch (err) {
-        console.error('Failed to fetch metrics:', err);
-      }
-    }, 2000);
-  </script>
+  <sw-dash-app></sw-dash-app>
+  <script type="module" src="/sw-dash/bundle.js"></script>
 </body>
 </html>`;
   }
 
-  /**
-   * Format bytes to human-readable string
-   */
-  private formatBytes(bytes: number): string {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
-
-  /**
-   * Format duration to human-readable string
-   */
-  private formatDuration(ms: number): string {
-    const seconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-
-    if (days > 0) return `${days}d ${hours % 24}h`;
-    if (hours > 0) return `${hours}h ${minutes % 60}m`;
-    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
-    return `${seconds}s`;
-  }
-
-  /**
-   * Format timestamp to relative time string
-   */
-  private formatTimestamp(ts: number): string {
-    if (!ts || ts === 0) return 'never';
-    const ago = Date.now() - ts;
-    if (ago < 60000) return `${Math.floor(ago / 1000)}s ago`;
-    if (ago < 3600000) return `${Math.floor(ago / 60000)}m ago`;
-    if (ago < 86400000) return `${Math.floor(ago / 3600000)}h ago`;
-    return new Date(ts).toLocaleDateString();
-  }
-
-  /**
-   * Format number with thousands separator
-   */
-  private formatNumber(num: number): string {
-    return num.toLocaleString();
-  }
-
-  /**
-   * Get gauge class based on percentage
-   */
-  private getGaugeClass(rate: number): string {
-    if (rate >= 80) return 'good';
-    if (rate >= 50) return 'warning';
-    return 'bad';
-  }
 }
 
 // Export singleton getter

ts_web_serviceworker/classes.metrics.ts

@@ -12,6 +12,44 @@ export interface ICacheMetrics {
   averageResponseTime: number;
 }
 
+/**
+ * Interface for per-resource tracking
+ */
+export interface ICachedResource {
+  url: string;
+  domain: string;
+  contentType: string;
+  size: number;
+  hitCount: number;
+  missCount: number;
+  lastAccessed: number;
+  cachedAt: number;
+}
+
+/**
+ * Interface for domain statistics
+ */
+export interface IDomainStats {
+  domain: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
+/**
+ * Interface for content-type statistics
+ */
+export interface IContentTypeStats {
+  contentType: string;
+  totalResources: number;
+  totalSize: number;
+  totalHits: number;
+  totalMisses: number;
+  hitRate: number;
+}
+
 /**
  * Interface for network metrics
  */
@@ -129,6 +167,10 @@ export class MetricsCollector {
   private readonly maxResponseTimeEntries = 1000;
   private readonly responseTimeWindow = 5 * 60 * 1000; // 5 minutes
 
+  // Per-resource tracking
+  private resourceStats: Map<string, ICachedResource> = new Map();
+  private readonly maxResourceEntries = 500;
+
   // Start time
   private readonly startTime: number;
 
@@ -441,6 +483,7 @@ export class MetricsCollector {
     // Note: isOnline is not reset as it reflects current state
 
     this.responseTimes = [];
+    this.resourceStats.clear();
 
     logger.log('info', '[Metrics] All metrics reset');
   }
@@ -457,6 +500,178 @@ export class MetricsCollector {
       `Uptime: ${Math.round(metrics.uptime / 1000)}s`,
     ].join(' | ');
   }
+
+  // ===================
+  // Per-Resource Tracking
+  // ===================
+
+  /**
+   * Extracts domain from URL
+   */
+  private extractDomain(url: string): string {
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.hostname;
+    } catch {
+      return 'unknown';
+    }
+  }
+
+  /**
+   * Records a resource access (cache hit or miss) with details
+   */
+  public recordResourceAccess(
+    url: string,
+    isHit: boolean,
+    contentType: string = 'unknown',
+    size: number = 0
+  ): void {
+    const now = Date.now();
+    const domain = this.extractDomain(url);
+
+    let resource = this.resourceStats.get(url);
+
+    if (!resource) {
+      resource = {
+        url,
+        domain,
+        contentType,
+        size,
+        hitCount: 0,
+        missCount: 0,
+        lastAccessed: now,
+        cachedAt: now,
+      };
+      this.resourceStats.set(url, resource);
+    }
+
+    // Update resource stats
+    if (isHit) {
+      resource.hitCount++;
+    } else {
+      resource.missCount++;
+    }
+    resource.lastAccessed = now;
+
+    // Update content-type and size if provided (may come from response headers)
+    if (contentType !== 'unknown') {
+      resource.contentType = contentType;
+    }
+    if (size > 0) {
+      resource.size = size;
+    }
+
+    // Trim old entries if needed
+    this.cleanupResourceStats();
+  }
+
+  /**
+   * Cleans up old resource entries to prevent memory bloat
+   */
+  private cleanupResourceStats(): void {
+    if (this.resourceStats.size <= this.maxResourceEntries) {
+      return;
+    }
+
+    // Convert to array and sort by lastAccessed (oldest first)
+    const entries = Array.from(this.resourceStats.entries())
+      .sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
+
+    // Remove oldest entries until we're under the limit
+    const toRemove = entries.slice(0, entries.length - this.maxResourceEntries);
+    for (const [url] of toRemove) {
+      this.resourceStats.delete(url);
+    }
+  }
+
+  /**
+   * Gets all cached resources
+   */
+  public getCachedResources(): ICachedResource[] {
+    return Array.from(this.resourceStats.values());
+  }
+
+  /**
+   * Gets domain statistics
+   */
+  public getDomainStats(): IDomainStats[] {
+    const domainMap = new Map<string, IDomainStats>();
+
+    for (const resource of this.resourceStats.values()) {
+      let stats = domainMap.get(resource.domain);
+
+      if (!stats) {
+        stats = {
+          domain: resource.domain,
+          totalResources: 0,
+          totalSize: 0,
+          totalHits: 0,
+          totalMisses: 0,
+          hitRate: 0,
+        };
+        domainMap.set(resource.domain, stats);
+      }
+
+      stats.totalResources++;
+      stats.totalSize += resource.size;
+      stats.totalHits += resource.hitCount;
+      stats.totalMisses += resource.missCount;
+    }
+
+    // Calculate hit rates
+    for (const stats of domainMap.values()) {
+      const total = stats.totalHits + stats.totalMisses;
+      stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
+    }
+
+    return Array.from(domainMap.values());
+  }
+
+  /**
+   * Gets content-type statistics
+   */
+  public getContentTypeStats(): IContentTypeStats[] {
+    const typeMap = new Map<string, IContentTypeStats>();
+
+    for (const resource of this.resourceStats.values()) {
+      // Normalize content-type (extract base type)
+      const baseType = resource.contentType.split(';')[0].trim() || 'unknown';
+
+      let stats = typeMap.get(baseType);
+
+      if (!stats) {
+        stats = {
+          contentType: baseType,
+          totalResources: 0,
+          totalSize: 0,
+          totalHits: 0,
+          totalMisses: 0,
+          hitRate: 0,
+        };
+        typeMap.set(baseType, stats);
+      }
+
+      stats.totalResources++;
+      stats.totalSize += resource.size;
+      stats.totalHits += resource.hitCount;
+      stats.totalMisses += resource.missCount;
+    }
+
+    // Calculate hit rates
+    for (const stats of typeMap.values()) {
+      const total = stats.totalHits + stats.totalMisses;
+      stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
+    }
+
+    return Array.from(typeMap.values());
+  }
+
+  /**
+   * Gets resource count
+   */
+  public getResourceCount(): number {
+    return this.resourceStats.size;
+  }
 }
 
 // Export singleton getter for convenience