npm - express-performance-toolkit - Versions diffs - 1.0.0 → 2.0.0 - Mend

express-performance-toolkit 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/README.md +119 -76
package/dashboard-ui/README.md +73 -0
package/dashboard-ui/eslint.config.js +23 -0
package/dashboard-ui/index.html +13 -0
package/dashboard-ui/package-lock.json +3382 -0
package/dashboard-ui/package.json +32 -0
package/dashboard-ui/src/App.css +184 -0
package/dashboard-ui/src/App.tsx +182 -0
package/dashboard-ui/src/components/BlockedModal.tsx +108 -0
package/dashboard-ui/src/components/CachePanel.tsx +45 -0
package/dashboard-ui/src/components/HealthCharts.tsx +142 -0
package/dashboard-ui/src/components/InsightsPanel.tsx +49 -0
package/dashboard-ui/src/components/KpiGrid.tsx +178 -0
package/dashboard-ui/src/components/LiveLogs.tsx +76 -0
package/dashboard-ui/src/components/Login.tsx +83 -0
package/dashboard-ui/src/components/RoutesTable.tsx +110 -0
package/dashboard-ui/src/hooks/useMetrics.ts +131 -0
package/dashboard-ui/src/index.css +652 -0
package/dashboard-ui/src/main.tsx +10 -0
package/dashboard-ui/src/pages/InsightsPage.tsx +42 -0
package/dashboard-ui/src/pages/LogsPage.tsx +26 -0
package/dashboard-ui/src/pages/OverviewPage.tsx +32 -0
package/dashboard-ui/src/pages/RoutesPage.tsx +26 -0
package/dashboard-ui/src/utils/formatters.ts +27 -0
package/dashboard-ui/tsconfig.app.json +28 -0
package/dashboard-ui/tsconfig.json +7 -0
package/dashboard-ui/tsconfig.node.json +26 -0
package/dashboard-ui/vite.config.ts +12 -0
package/dist/analyzer.d.ts +6 -0
package/dist/analyzer.d.ts.map +1 -0
package/dist/analyzer.js +70 -0
package/dist/analyzer.js.map +1 -0
package/dist/dashboard/dashboardRouter.d.ts +4 -4
package/dist/dashboard/dashboardRouter.d.ts.map +1 -1
package/dist/dashboard/dashboardRouter.js +67 -21
package/dist/dashboard/dashboardRouter.js.map +1 -1
package/dist/dashboard-ui/assets/index-CX-zE-Qy.css +1 -0
package/dist/dashboard-ui/assets/index-Q9TGkd8n.js +41 -0
package/dist/dashboard-ui/index.html +14 -0
package/dist/index.d.ts +11 -10
package/dist/index.d.ts.map +1 -1
package/dist/index.js +35 -11
package/dist/index.js.map +1 -1
package/dist/logger.d.ts +3 -3
package/dist/logger.d.ts.map +1 -1
package/dist/logger.js +167 -9
package/dist/logger.js.map +1 -1
package/dist/queryHelper.d.ts.map +1 -1
package/dist/queryHelper.js +1 -0
package/dist/queryHelper.js.map +1 -1
package/dist/rateLimit.d.ts +5 -0
package/dist/rateLimit.d.ts.map +1 -0
package/dist/rateLimit.js +67 -0
package/dist/rateLimit.js.map +1 -0
package/dist/store.d.ts +9 -2
package/dist/store.d.ts.map +1 -1
package/dist/store.js +147 -25
package/dist/store.js.map +1 -1
package/dist/types.d.ts +93 -0
package/dist/types.d.ts.map +1 -1
package/example/server.ts +68 -37
package/package.json +9 -6
package/src/analyzer.ts +78 -0
package/src/dashboard/dashboardRouter.ts +88 -23
package/src/index.ts +70 -30
package/src/logger.ts +177 -13
package/src/queryHelper.ts +2 -0
package/src/rateLimit.ts +86 -0
package/src/store.ts +136 -27
package/src/types.ts +98 -0
package/tests/analyzer.test.ts +108 -0
package/tests/auth.test.ts +79 -0
package/tests/bandwidth.test.ts +72 -0
package/tests/integration.test.ts +51 -54
package/tests/rateLimit.test.ts +57 -0
package/tests/store.test.ts +37 -18
package/tsconfig.json +1 -0
package/src/dashboard/dashboard.html +0 -756

package/src/dashboard/dashboard.html DELETED Viewed

@@ -1,756 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>⚡ Express Performance Dashboard</title>
-  <style>
-    :root {
-      --bg-primary: #0a0e1a;
-      --bg-secondary: #111827;
-      --bg-card: #1a2236;
-      --bg-card-hover: #1f2a42;
-      --border: #2a3452;
-      --text-primary: #e2e8f0;
-      --text-secondary: #94a3b8;
-      --text-muted: #64748b;
-      --accent-blue: #3b82f6;
-      --accent-cyan: #06b6d4;
-      --accent-green: #10b981;
-      --accent-yellow: #f59e0b;
-      --accent-red: #ef4444;
-      --accent-purple: #8b5cf6;
-      --gradient-1: linear-gradient(135deg, #3b82f6, #06b6d4);
-      --gradient-2: linear-gradient(135deg, #10b981, #06b6d4);
-      --gradient-3: linear-gradient(135deg, #f59e0b, #ef4444);
-      --gradient-4: linear-gradient(135deg, #8b5cf6, #3b82f6);
-      --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-      --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.15);
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-    }
-    /* ── Header ─────────────────────── */
-    .header {
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      padding: 16px 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      backdrop-filter: blur(12px);
-    }
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .header h1 {
-      font-size: 20px;
-      font-weight: 700;
-      background: var(--gradient-1);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .header-badge {
-      font-size: 11px;
-      padding: 3px 10px;
-      border-radius: 20px;
-      background: rgba(59, 130, 246, 0.15);
-      color: var(--accent-blue);
-      border: 1px solid rgba(59, 130, 246, 0.3);
-      font-weight: 600;
-    }
-    .pulse-dot {
-      width: 8px; height: 8px;
-      background: var(--accent-green);
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
-      50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
-    }
-    .header-right {
-      display: flex; align-items: center; gap: 12px;
-    }
-    .uptime {
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-    .refresh-btn {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      color: var(--text-secondary);
-      padding: 6px 14px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 13px;
-      transition: all 0.2s;
-    }
-    .refresh-btn:hover {
-      background: var(--bg-card-hover);
-      color: var(--text-primary);
-      border-color: var(--accent-blue);
-    }
-    /* ── Main Layout ────────────────── */
-    .container {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 24px 32px;
-    }
-    /* ── Stats Cards ────────────────── */
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 16px;
-      margin-bottom: 28px;
-    }
-    .stat-card {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 20px;
-      transition: all 0.3s;
-      position: relative;
-      overflow: hidden;
-    }
-    .stat-card::before {
-      content: '';
-      position: absolute;
-      top: 0; left: 0; right: 0;
-      height: 3px;
-      border-radius: 14px 14px 0 0;
-    }
-    .stat-card:nth-child(1)::before { background: var(--gradient-1); }
-    .stat-card:nth-child(2)::before { background: var(--gradient-2); }
-    .stat-card:nth-child(3)::before { background: var(--gradient-3); }
-    .stat-card:nth-child(4)::before { background: var(--gradient-4); }
-    .stat-card:nth-child(5)::before { background: linear-gradient(135deg, #06b6d4, #10b981); }
-    .stat-card:hover {
-      border-color: var(--accent-blue);
-      box-shadow: var(--shadow-glow);
-      transform: translateY(-2px);
-    }
-    .stat-label {
-      font-size: 12px;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
-    .stat-value {
-      font-size: 32px;
-      font-weight: 800;
-      letter-spacing: -1px;
-    }
-    .stat-sub {
-      font-size: 12px;
-      color: var(--text-secondary);
-      margin-top: 4px;
-    }
-    /* ── Panels ──────────────────────── */
-    .panels {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20px;
-      margin-bottom: 28px;
-    }
-    @media (max-width: 900px) {
-      .panels { grid-template-columns: 1fr; }
-    }
-    .panel {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      overflow: hidden;
-    }
-    .panel-header {
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .panel-title {
-      font-size: 14px;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .panel-body {
-      padding: 16px 20px;
-      max-height: 350px;
-      overflow-y: auto;
-    }
-    .panel-body::-webkit-scrollbar { width: 6px; }
-    .panel-body::-webkit-scrollbar-track { background: transparent; }
-    .panel-body::-webkit-scrollbar-thumb {
-      background: var(--border);
-      border-radius: 3px;
-    }
-    /* ── Cache Donut Chart ───────────── */
-    .cache-chart {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 32px;
-      padding: 12px 0;
-    }
-    .donut-container {
-      position: relative;
-      width: 130px; height: 130px;
-    }
-    .donut-center {
-      position: absolute;
-      top: 50%; left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-    }
-    .donut-center .pct {
-      font-size: 28px;
-      font-weight: 800;
-    }
-    .donut-center .lbl {
-      font-size: 10px;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-    .cache-legend {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-    }
-    .legend-dot {
-      width: 10px; height: 10px;
-      border-radius: 50%;
-    }
-    /* ── Status Codes Bar ────────────── */
-    .status-bars {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .status-bar-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .status-code {
-      font-size: 13px;
-      font-weight: 700;
-      min-width: 36px;
-      font-family: 'SF Mono', 'Fira Code', monospace;
-    }
-    .status-code.s2xx { color: var(--accent-green); }
-    .status-code.s3xx { color: var(--accent-blue); }
-    .status-code.s4xx { color: var(--accent-yellow); }
-    .status-code.s5xx { color: var(--accent-red); }
-    .bar-track {
-      flex: 1;
-      height: 8px;
-      background: var(--bg-primary);
-      border-radius: 4px;
-      overflow: hidden;
-    }
-    .bar-fill {
-      height: 100%;
-      border-radius: 4px;
-      transition: width 0.5s ease;
-    }
-    .bar-fill.s2xx { background: var(--gradient-2); }
-    .bar-fill.s3xx { background: var(--gradient-4); }
-    .bar-fill.s4xx { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
-    .bar-fill.s5xx { background: var(--gradient-3); }
-    .bar-count {
-      font-size: 12px;
-      color: var(--text-secondary);
-      min-width: 40px;
-      text-align: right;
-    }
-    /* ── Request Logs Table ──────────── */
-    .logs-section {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      overflow: hidden;
-    }
-    .logs-header {
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .logs-title {
-      font-size: 14px;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .log-filters {
-      display: flex;
-      gap: 6px;
-    }
-    .filter-btn {
-      background: var(--bg-primary);
-      border: 1px solid var(--border);
-      color: var(--text-secondary);
-      padding: 4px 12px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: all 0.2s;
-    }
-    .filter-btn:hover, .filter-btn.active {
-      background: rgba(59, 130, 246, 0.15);
-      color: var(--accent-blue);
-      border-color: rgba(59, 130, 246, 0.3);
-    }
-    .logs-table-wrap {
-      overflow-x: auto;
-      max-height: 450px;
-      overflow-y: auto;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    th {
-      padding: 10px 16px;
-      text-align: left;
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      color: var(--text-muted);
-      font-weight: 600;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-    td {
-      padding: 10px 16px;
-      font-size: 13px;
-      border-bottom: 1px solid rgba(42, 52, 82, 0.5);
-      font-family: 'SF Mono', 'Fira Code', monospace;
-    }
-    tr:hover td { background: rgba(59, 130, 246, 0.04); }
-    tr.slow-row td { background: rgba(239, 68, 68, 0.06); }
-    .method-badge {
-      display: inline-block;
-      padding: 2px 8px;
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 700;
-    }
-    .method-GET { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
-    .method-POST { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
-    .method-PUT { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); }
-    .method-DELETE { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
-    .method-PATCH { background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); }
-    .time-badge {
-      padding: 2px 8px;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .time-fast { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
-    .time-medium { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); }
-    .time-slow { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
-    .cache-badge {
-      font-size: 11px;
-      padding: 2px 8px;
-      border-radius: 4px;
-    }
-    .cache-hit { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
-    .cache-miss { color: var(--text-muted); }
-    .fire { font-size: 14px; }
-    .empty-state {
-      padding: 48px 20px;
-      text-align: center;
-      color: var(--text-muted);
-    }
-    .empty-state .icon { font-size: 40px; margin-bottom: 12px; }
-    .empty-state p { font-size: 14px; }
-    /* ── Routes Table ────────────────── */
-    .routes-table td {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 12px;
-    }
-    .route-method {
-      font-weight: 700;
-      min-width: 50px;
-    }
-    /* ── Animations ───────────────────── */
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(8px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .stat-card, .panel, .logs-section {
-      animation: fadeIn 0.4s ease both;
-    }
-    .stat-card:nth-child(2) { animation-delay: 0.05s; }
-    .stat-card:nth-child(3) { animation-delay: 0.1s; }
-    .stat-card:nth-child(4) { animation-delay: 0.15s; }
-    .stat-card:nth-child(5) { animation-delay: 0.2s; }
-  </style>
-</head>
-<body>
-  <!-- Header -->
-  <div class="header">
-    <div class="header-left">
-      <span style="font-size:22px">⚡</span>
-      <h1>Express Performance Dashboard</h1>
-      <span class="header-badge">v1.0</span>
-      <div class="pulse-dot"></div>
-    </div>
-    <div class="header-right">
-      <span class="uptime" id="uptime">Uptime: --</span>
-      <button class="refresh-btn" onclick="fetchMetrics()">↻ Refresh</button>
-    </div>
-  </div>
-  <div class="container">
-    <!-- Stats Cards -->
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-label">Total Requests</div>
-        <div class="stat-value" id="totalRequests">0</div>
-        <div class="stat-sub" id="reqsPerSec">0 req/s</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Avg Response Time</div>
-        <div class="stat-value" id="avgResponseTime">0<span style="font-size:16px;color:var(--text-muted)">ms</span></div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Slow Requests</div>
-        <div class="stat-value" id="slowRequests">0</div>
-        <div class="stat-sub" id="slowPct">0% of total</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Cache Hit Rate</div>
-        <div class="stat-value" id="cacheHitRate">0<span style="font-size:16px;color:var(--text-muted)">%</span></div>
-        <div class="stat-sub" id="cacheEntries">0 entries</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Status 2xx</div>
-        <div class="stat-value" id="status2xx" style="color:var(--accent-green)">0</div>
-        <div class="stat-sub" id="errorRate">0% error rate</div>
-      </div>
-    </div>
-    <!-- Panels Row -->
-    <div class="panels">
-      <!-- Cache Chart -->
-      <div class="panel">
-        <div class="panel-header">
-          <span class="panel-title">📊 Cache Performance</span>
-        </div>
-        <div class="panel-body">
-          <div class="cache-chart">
-            <div class="donut-container">
-              <svg viewBox="0 0 42 42" width="130" height="130">
-                <circle cx="21" cy="21" r="16" fill="none" stroke="var(--bg-primary)" stroke-width="5"/>
-                <circle id="donutHit" cx="21" cy="21" r="16" fill="none" stroke="url(#gradHit)"
-                  stroke-width="5" stroke-dasharray="0 100" stroke-dashoffset="25"
-                  stroke-linecap="round" style="transition: stroke-dasharray 0.8s ease"/>
-                <circle id="donutMiss" cx="21" cy="21" r="16" fill="none" stroke="#ef4444"
-                  stroke-width="5" stroke-dasharray="0 100" stroke-dashoffset="25"
-                  stroke-linecap="round" style="transition: all 0.8s ease"/>
-                <defs>
-                  <linearGradient id="gradHit" x1="0" y1="0" x2="1" y2="1">
-                    <stop offset="0%" stop-color="#06b6d4"/>
-                    <stop offset="100%" stop-color="#10b981"/>
-                  </linearGradient>
-                </defs>
-              </svg>
-              <div class="donut-center">
-                <div class="pct" id="donutPct">0%</div>
-                <div class="lbl">Hit Rate</div>
-              </div>
-            </div>
-            <div class="cache-legend">
-              <div class="legend-item">
-                <div class="legend-dot" style="background:var(--accent-cyan)"></div>
-                <span>Hits: <strong id="cacheHitsLeg">0</strong></span>
-              </div>
-              <div class="legend-item">
-                <div class="legend-dot" style="background:var(--accent-red)"></div>
-                <span>Misses: <strong id="cacheMissesLeg">0</strong></span>
-              </div>
-              <div class="legend-item">
-                <div class="legend-dot" style="background:var(--text-muted)"></div>
-                <span>Cached: <strong id="cacheSizeLeg">0</strong> entries</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Status Codes -->
-      <div class="panel">
-        <div class="panel-header">
-          <span class="panel-title">📈 Status Codes</span>
-        </div>
-        <div class="panel-body">
-          <div class="status-bars" id="statusBars">
-            <div class="empty-state"><p style="color:var(--text-muted)">No data yet</p></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Slow Routes Panel -->
-    <div class="panels" style="margin-bottom:28px">
-      <div class="panel" style="grid-column: 1 / -1">
-        <div class="panel-header">
-          <span class="panel-title">🔥 Slowest Routes</span>
-        </div>
-        <div class="panel-body">
-          <table class="routes-table">
-            <thead>
-              <tr>
-                <th>Route</th>
-                <th>Requests</th>
-                <th>Avg Time</th>
-                <th>Slow Count</th>
-              </tr>
-            </thead>
-            <tbody id="routesBody">
-              <tr><td colspan="4" class="empty-state"><p>No data yet</p></td></tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <!-- Request Logs -->
-    <div class="logs-section">
-      <div class="logs-header">
-        <span class="logs-title">📋 Request Log</span>
-        <div class="log-filters">
-          <button class="filter-btn active" onclick="setFilter('all')">All</button>
-          <button class="filter-btn" onclick="setFilter('slow')">🔥 Slow</button>
-          <button class="filter-btn" onclick="setFilter('cached')">Cached</button>
-          <button class="filter-btn" onclick="setFilter('errors')">Errors</button>
-        </div>
-      </div>
-      <div class="logs-table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>Time</th>
-              <th>Method</th>
-              <th>Path</th>
-              <th>Status</th>
-              <th>Duration</th>
-              <th>Cache</th>
-              <th>Flag</th>
-            </tr>
-          </thead>
-          <tbody id="logsBody">
-            <tr><td colspan="7" class="empty-state">
-              <div class="icon">📡</div>
-              <p>Waiting for requests...</p>
-            </td></tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-  <script>
-    let currentFilter = 'all';
-    let metricsData = null;
-    const API_URL = window.location.pathname.replace(/\/$/, '') + '/api/metrics';
-    async function fetchMetrics() {
-      try {
-        const res = await fetch(API_URL);
-        metricsData = await res.json();
-        render(metricsData);
-      } catch (e) {
-        console.error('Failed to fetch metrics:', e);
-      }
-    }
-    function formatUptime(ms) {
-      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';
-    }
-    function formatTime(ts) {
-      return new Date(ts).toLocaleTimeString();
-    }
-    function getTimeClass(ms) {
-      if (ms < 200) return 'time-fast';
-      if (ms < 1000) return 'time-medium';
-      return 'time-slow';
-    }
-    function getStatusClass(code) {
-      if (code < 300) return 's2xx';
-      if (code < 400) return 's3xx';
-      if (code < 500) return 's4xx';
-      return 's5xx';
-    }
-    function render(m) {
-      // Stats
-      document.getElementById('totalRequests').textContent = m.totalRequests.toLocaleString();
-      const rps = m.uptime > 0 ? (m.totalRequests / (m.uptime / 1000)).toFixed(1) : '0';
-      document.getElementById('reqsPerSec').textContent = rps + ' req/s';
-      document.getElementById('avgResponseTime').innerHTML = m.avgResponseTime + '<span style="font-size:16px;color:var(--text-muted)">ms</span>';
-      document.getElementById('slowRequests').textContent = m.slowRequests;
-      const slowPct = m.totalRequests > 0 ? ((m.slowRequests / m.totalRequests) * 100).toFixed(1) : '0';
-      document.getElementById('slowPct').textContent = slowPct + '% of total';
-      document.getElementById('cacheHitRate').innerHTML = m.cacheHitRate + '<span style="font-size:16px;color:var(--text-muted)">%</span>';
-      document.getElementById('cacheEntries').textContent = m.cacheSize + ' entries';
-      document.getElementById('uptime').textContent = 'Uptime: ' + formatUptime(m.uptime);
-      // 2xx count
-      let s2 = 0, sErr = 0;
-      Object.entries(m.statusCodes).forEach(([code, count]) => {
-        if (code < 300) s2 += count;
-        if (code >= 400) sErr += count;
-      });
-      document.getElementById('status2xx').textContent = s2;
-      const errRate = m.totalRequests > 0 ? ((sErr / m.totalRequests) * 100).toFixed(1) : '0';
-      document.getElementById('errorRate').textContent = errRate + '% error rate';
-      // Cache donut
-      const hitPct = m.cacheHitRate;
-      const missPct = 100 - hitPct;
-      const circ = 2 * Math.PI * 16;
-      const hitLen = (hitPct / 100) * 100.53;
-      const missLen = (missPct / 100) * 100.53;
-      const donutHit = document.getElementById('donutHit');
-      const donutMiss = document.getElementById('donutMiss');
-      donutHit.setAttribute('stroke-dasharray', hitLen + ' ' + (100.53 - hitLen));
-      const missOffset = 25 - hitLen;
-      donutMiss.setAttribute('stroke-dasharray', missLen + ' ' + (100.53 - missLen));
-      donutMiss.setAttribute('stroke-dashoffset', missOffset);
-      document.getElementById('donutPct').textContent = hitPct + '%';
-      document.getElementById('cacheHitsLeg').textContent = m.cacheHits;
-      document.getElementById('cacheMissesLeg').textContent = m.cacheMisses;
-      document.getElementById('cacheSizeLeg').textContent = m.cacheSize;
-      // Status codes bars
-      const statusEntries = Object.entries(m.statusCodes).sort(([a], [b]) => a - b);
-      const maxCount = Math.max(...statusEntries.map(([, c]) => c), 1);
-      if (statusEntries.length > 0) {
-        document.getElementById('statusBars').innerHTML = statusEntries.map(([code, count]) => {
-          const cls = getStatusClass(parseInt(code));
-          const pct = (count / maxCount * 100).toFixed(0);
-          return `<div class="status-bar-row">
-            <span class="status-code ${cls}">${code}</span>
-            <div class="bar-track"><div class="bar-fill ${cls}" style="width:${pct}%"></div></div>
-            <span class="bar-count">${count}</span>
-          </div>`;
-        }).join('');
-      }
-      // Routes
-      const routeEntries = Object.entries(m.routes)
-        .sort(([,a], [,b]) => b.avgTime - a.avgTime)
-        .slice(0, 10);
-      if (routeEntries.length > 0) {
-        document.getElementById('routesBody').innerHTML = routeEntries.map(([route, stats]) => {
-          const slow = stats.slowCount > 0 ? '🔥' : '';
-          const timeClass = getTimeClass(stats.avgTime);
-          return `<tr>
-            <td>${route}</td>
-            <td>${stats.count}</td>
-            <td><span class="time-badge ${timeClass}">${stats.avgTime}ms</span></td>
-            <td>${slow} ${stats.slowCount}</td>
-          </tr>`;
-        }).join('');
-      }
-      // Logs
-      renderLogs(m.recentLogs);
-    }
-    function renderLogs(logs) {
-      let filtered = logs;
-      if (currentFilter === 'slow') filtered = logs.filter(l => l.slow);
-      else if (currentFilter === 'cached') filtered = logs.filter(l => l.cached);
-      else if (currentFilter === 'errors') filtered = logs.filter(l => l.statusCode >= 400);
-      if (filtered.length === 0) {
-        document.getElementById('logsBody').innerHTML = `<tr><td colspan="7" class="empty-state">
-          <div class="icon">📡</div><p>No matching requests</p></td></tr>`;
-        return;
-      }
-      document.getElementById('logsBody').innerHTML = filtered
-        .sort((a, b) => b.timestamp - a.timestamp)
-        .map(log => {
-          const rowClass = log.slow ? 'slow-row' : '';
-          const timeClass = getTimeClass(log.responseTime);
-          const cacheBadge = log.cached
-            ? '<span class="cache-badge cache-hit">HIT</span>'
-            : '<span class="cache-badge cache-miss">MISS</span>';
-          const flag = log.slow ? '<span class="fire">🔥</span>' : '';
-          return `<tr class="${rowClass}">
-            <td>${formatTime(log.timestamp)}</td>
-            <td><span class="method-badge method-${log.method}">${log.method}</span></td>
-            <td>${log.path}</td>
-            <td>${log.statusCode}</td>
-            <td><span class="time-badge ${timeClass}">${log.responseTime}ms</span></td>
-            <td>${cacheBadge}</td>
-            <td>${flag}</td>
-          </tr>`;
-        }).join('');
-    }
-    function setFilter(f) {
-      currentFilter = f;
-      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-      event.target.classList.add('active');
-      if (metricsData) renderLogs(metricsData.recentLogs);
-    }
-    // Auto-refresh every 3 seconds
-    fetchMetrics();
-    setInterval(fetchMetrics, 3000);
-  </script>
-</body>
-</html>