diff --git a/packages/gateway/public/dashboard-v2.html b/packages/gateway/public/dashboard-v2.html
index 56b6768..e328140 100644
--- a/packages/gateway/public/dashboard-v2.html
+++ b/packages/gateway/public/dashboard-v2.html
@@ -3,726 +3,3116 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>llm.gateway Workbench</title>
+  <title>llm.gateway / workbench</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    :root {
-      color-scheme: light;
-      --bg: #f4f7f9;
-      --paper: #fbfcfd;
-      --panel: #f8fafb;
-      --line: #ccd6df;
-      --line-dark: #aebdc8;
-      --text: #27323d;
-      --muted: #718090;
-      --soft: #8b98a7;
-      --green: #2f7d71;
-      --green-soft: #e3f2ef;
-      --amber: #a05c2b;
-      --amber-soft: #fff1e7;
-      --red: #9f3f3a;
-      --red-soft: #ffe9e7;
-      --blue-soft: #eaf2f8;
-      --shadow: 0 16px 50px rgba(43, 61, 74, 0.08);
-      --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
-      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
+    /* ─── Reset ──────────────────────────────────────────────────────────── */
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { background: #f4f7fa; color: #24313d; }
 
-    * { box-sizing: border-box; }
+    /* ─── Design tokens ──────────────────────────────────────────────────── */
+    :root {
+      --bg: #f4f7fa;
+      --bg-1: #ffffff;
+      --bg-2: #eef3f6;
+      --bg-3: #dde7ed;
+      --line: #d6e0e7;
+      --line-2: #bdc9d3;
+      --line-3: #8799a8;
+      --text: #24313d;
+      --dim: #667684;
+      --dim-2: #93a1ad;
+      --accent: #0f766e;
+      --accent-dim: #8ab9b5;
+      --warn: #b45309;
+      --err: #b42318;
+      --ok: #15803d;
+      --info: #2563eb;
+      --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
+      --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+    }
 
     body {
-      margin: 0;
-      min-height: 100vh;
-      background:
-        linear-gradient(90deg, rgba(39, 50, 61, 0.025) 1px, transparent 1px),
-        linear-gradient(rgba(39, 50, 61, 0.025) 1px, transparent 1px),
-        var(--bg);
-      background-size: 24px 24px;
-      color: var(--text);
       font-family: var(--sans);
       font-size: 14px;
-      letter-spacing: 0;
+      line-height: 1.5;
+      min-height: 100vh;
+      background: var(--bg);
     }
 
+    /* ─── Layout shell ──────────────────────────────────────────────────── */
     .shell {
-      max-width: 1560px;
+      max-width: 1480px;
       margin: 0 auto;
-      padding: 38px 38px 96px;
+      padding: 20px 32px 80px;
     }
 
-    .mono, .eyebrow, .tab, .badge, th, .status-line, .metric-label {
-      font-family: var(--mono);
-    }
-
-    header {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      align-items: start;
-      gap: 24px;
-      border-bottom: 1px solid var(--line);
-      padding-bottom: 18px;
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-
-    .mark {
-      width: 9px;
-      height: 9px;
-      background: var(--green);
-      margin-left: 2px;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: 18px;
-      line-height: 1;
-      font-family: var(--mono);
-      letter-spacing: -0.02em;
-    }
-
-    .crumb {
-      color: var(--soft);
-      font-family: var(--mono);
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.14em;
-      margin-left: 8px;
-    }
-
-    .btn {
-      border: 1px solid var(--line-dark);
-      background: transparent;
-      color: var(--text);
-      height: 31px;
-      padding: 0 14px;
-      font-family: var(--mono);
-      font-size: 12px;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      cursor: pointer;
-    }
-
-    .btn:hover { background: var(--paper); border-color: var(--green); color: var(--green); }
-
-    .status-strip {
+    /* ─── Top bar ────────────────────────────────────────────────────────── */
+    .topbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 18px;
+      gap: 24px;
+      padding: 16px 0;
       border-bottom: 1px solid var(--line);
-      padding: 20px 0;
-      margin-bottom: 18px;
+      margin-bottom: 8px;
     }
+    .brand {
+      display: flex;
+      align-items: baseline;
+      gap: 14px;
+      font-family: var(--mono);
+    }
+    .brand-mark {
+      font-weight: 700;
+      font-size: 1.05rem;
+      color: var(--text);
+      letter-spacing: -0.01em;
+    }
+    .brand-mark::before {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      margin-right: 10px;
+      background: var(--accent);
+    }
+    .brand-tag {
+      font-size: 0.72rem;
+      color: var(--dim);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .brand-tag::before { content: '/ '; color: var(--dim-2); }
 
-    .status-group {
+    .topbar-actions { display: flex; align-items: center; gap: 10px; }
+
+    /* ─── Status strip ──────────────────────────────────────────────────── */
+    .status-strip {
       display: flex;
       align-items: center;
-      gap: 18px;
+      gap: 0;
+      padding: 10px 0 18px;
+      border-bottom: 1px solid var(--line);
+      font-family: var(--mono);
+      font-size: 0.78rem;
       flex-wrap: wrap;
     }
-
-    .status-line {
+    .status-cell {
+      padding: 4px 14px;
+      border-right: 1px solid var(--line);
+      color: var(--dim);
       display: flex;
       align-items: center;
       gap: 8px;
-      color: var(--muted);
-      font-size: 12px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      border-right: 1px solid var(--line);
-      padding-right: 18px;
+    }
+    .status-cell:first-child { padding-left: 0; }
+    .status-cell:last-child { border-right: none; margin-left: auto; }
+    .status-cell .dot {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--dim-2);
+      box-shadow: 0 0 0 0 currentColor;
+    }
+    .status-cell .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(21,128,61,0.12); animation: pulse 2.4s infinite; }
+    .status-cell .dot.err { background: var(--err); }
+    .status-cell .label { color: var(--dim-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
+    .status-cell .val { color: var(--text); }
+    @keyframes pulse {
+      0%, 100% { box-shadow: 0 0 0 3px rgba(21,128,61,0.10); }
+      50% { box-shadow: 0 0 0 6px rgba(21,128,61,0.06); }
     }
 
-    .status-line:last-child { border-right: 0; }
-    .status-line strong { color: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; }
-
-    .dot {
-      width: 17px;
-      height: 17px;
-      border-radius: 50%;
-      background: var(--green-soft);
-      position: relative;
-      border: 1px solid #c6ddd8;
-    }
-
-    .dot::after {
-      content: "";
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: var(--green);
-      left: 4px;
-      top: 4px;
-    }
-
-    .dot.warn { background: var(--amber-soft); border-color: #eccdb5; }
-    .dot.warn::after { background: var(--amber); }
-    .dot.bad { background: var(--red-soft); border-color: #efc1bd; }
-    .dot.bad::after { background: var(--red); }
-
+    /* ─── Tab navigation ──────────────────────────────────────────────────── */
     .tabs {
       display: flex;
       gap: 0;
       border-bottom: 1px solid var(--line);
-      margin-bottom: 34px;
+      margin: 0 0 28px;
       overflow-x: auto;
+      scrollbar-width: none;
     }
-
-    .tab {
-      min-width: 128px;
-      padding: 0 18px 16px;
-      color: var(--muted);
-      text-decoration: none;
-      font-size: 12px;
-      letter-spacing: 0.08em;
+    .tabs::-webkit-scrollbar { display: none; }
+    .tab-trigger {
+      background: none;
+      border: none;
+      color: var(--dim);
+      font-family: var(--mono);
+      font-size: 0.82rem;
+      padding: 14px 16px;
+      cursor: pointer;
+      position: relative;
+      letter-spacing: 0.02em;
       white-space: nowrap;
-      border-bottom: 1px solid transparent;
+      transition: color 0.15s;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
     }
-
-    .tab.active {
-      color: var(--green);
-      border-bottom-color: var(--green);
+    .tab-trigger:hover { color: var(--text); }
+    .tab-trigger .tab-num {
+      color: var(--dim-2);
+      font-size: 0.7rem;
+      margin-right: 6px;
     }
+    .tab-trigger.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+    .tab-trigger.active .tab-num { color: var(--accent-dim); }
+    .tab-trigger .tab-badge {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 1px 6px;
+      border: 1px solid var(--line-2);
+      border-radius: 2px;
+      font-size: 0.62rem;
+      color: var(--dim);
+    }
+    .tab-trigger.active .tab-badge { border-color: var(--accent-dim); color: var(--accent); }
 
-    .section-head {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      align-items: center;
+    .tab-panel { display: none; animation: fadein 0.3s ease; }
+    .tab-panel.active { display: block; }
+    @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+    /* ─── Section headings ────────────────────────────────────────────────── */
+    .h-section {
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--dim);
+      margin: 24px 0 14px;
+      padding-bottom: 8px;
       border-bottom: 1px solid var(--line);
-      margin: 0 0 16px;
-      min-height: 44px;
-    }
-
-    .section-head::before {
-      content: "";
-      width: 20px;
-      height: 2px;
-      background: var(--green);
-      display: block;
-      align-self: end;
-      margin-bottom: 13px;
-    }
-
-    .section-title {
-      grid-column: 1 / -1;
-      text-align: center;
-      font-family: var(--mono);
-      font-size: 12px;
-      color: var(--muted);
-      letter-spacing: 0.35em;
-      text-transform: uppercase;
-      margin-top: -21px;
-      pointer-events: none;
-    }
-
-    .section-note {
-      justify-self: end;
-      font-family: var(--mono);
-      color: var(--soft);
-      font-size: 12px;
-      letter-spacing: 0.08em;
-      margin-top: -22px;
-    }
-
-    .coverage {
-      display: grid;
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-      gap: 12px;
-      margin-bottom: 34px;
-    }
-
-    .tile {
-      border: 1px solid var(--line);
-      background: rgba(255, 255, 255, 0.58);
-      min-height: 120px;
-      padding: 15px 16px;
-      box-shadow: var(--shadow);
-    }
-
-    .tile-head {
       display: flex;
+      align-items: baseline;
       justify-content: space-between;
-      align-items: start;
-      gap: 10px;
-      margin-bottom: 14px;
     }
+    .h-section::before { content: ''; width: 18px; height: 2px; background: var(--accent); margin-right: 8px; }
+    .h-section .h-meta { font-size: 0.7rem; color: var(--dim-2); letter-spacing: 0.05em; text-transform: none; }
 
-    .tile-title {
-      font-weight: 800;
-      line-height: 1.25;
-      word-break: break-word;
-    }
-
-    .badge {
-      border: 1px solid #dfbda6;
-      color: var(--amber);
-      background: var(--amber-soft);
-      padding: 4px 8px;
-      font-size: 10px;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-
-    .badge.ready {
-      border-color: #b7d8d1;
-      color: var(--green);
-      background: var(--green-soft);
-    }
-
-    .tile-meta {
-      font-family: var(--mono);
-      color: #596777;
-      line-height: 1.45;
-      font-size: 12px;
-    }
-
-    .metrics {
+    /* ─── Metric grid (Overview tab) ──────────────────────────────────────── */
+    .metric-grid {
       display: grid;
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-      gap: 10px;
-      margin-bottom: 34px;
-    }
-
-    .metric {
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 0;
       border: 1px solid var(--line);
-      background: rgba(255,255,255,0.45);
-      padding: 13px 15px;
-      min-height: 86px;
+      background: var(--bg-1);
     }
-
+    .metric {
+      padding: 22px 24px 20px;
+      border-right: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+      position: relative;
+      transition: background 0.15s;
+    }
+    .metric:hover { background: var(--bg-2); }
+    .metric:last-child { border-right: none; }
     .metric-label {
-      color: var(--muted);
-      font-size: 11px;
-      letter-spacing: 0.13em;
+      font-family: var(--mono);
+      font-size: 0.68rem;
       text-transform: uppercase;
-      margin-bottom: 11px;
+      letter-spacing: 0.16em;
+      color: var(--dim);
+      margin-bottom: 14px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .metric-label::before {
+      content: '';
+      width: 6px; height: 6px;
+      background: var(--accent);
+      display: inline-block;
     }
-
     .metric-value {
       font-family: var(--mono);
-      font-size: 22px;
-      font-weight: 800;
-    }
-
-    .workbench {
-      display: grid;
-      grid-template-columns: 1.15fr 0.85fr;
-      gap: 18px;
-      margin-bottom: 34px;
-    }
-
-    .panel {
-      border: 1px solid var(--line);
-      background: rgba(255,255,255,0.48);
-      box-shadow: var(--shadow);
-    }
-
-    .panel-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      border-bottom: 1px solid var(--line);
-      padding: 12px 16px;
-      font-family: var(--mono);
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.18em;
-      font-size: 11px;
-    }
-
-    .panel-body { padding: 16px; }
-
-    .route-stack {
-      display: grid;
-      gap: 10px;
-    }
-
-    .route {
-      display: grid;
-      grid-template-columns: 164px 1fr auto;
-      align-items: center;
-      gap: 12px;
-      border: 1px solid var(--line);
-      background: var(--paper);
-      padding: 11px 12px;
-      min-height: 52px;
-    }
-
-    .route-name {
-      font-weight: 800;
-    }
-
-    .route-desc {
-      font-family: var(--mono);
-      color: var(--muted);
-      font-size: 12px;
-      line-height: 1.35;
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      border: 1px solid var(--line);
-      background: rgba(255,255,255,0.5);
-    }
-
-    th, td {
-      border-bottom: 1px solid var(--line);
-      padding: 13px 16px;
-      text-align: left;
-      font-size: 12px;
-    }
-
-    th {
-      color: var(--muted);
-      background: rgba(39, 50, 61, 0.045);
-      text-transform: uppercase;
-      letter-spacing: 0.13em;
+      font-size: 2.1rem;
       font-weight: 600;
+      color: var(--text);
+      letter-spacing: -0.02em;
+      line-height: 1;
     }
-
-    td {
-      font-family: var(--mono);
-      color: #4d5c69;
+    .metric-value .metric-unit {
+      font-size: 0.85rem;
+      color: var(--dim);
+      font-weight: 400;
+      margin-left: 4px;
     }
-
-    .empty {
-      height: 112px;
-      text-align: center;
-      color: var(--soft);
+    .metric-change {
       font-family: var(--mono);
-      font-size: 13px;
+      font-size: 0.7rem;
+      color: var(--dim-2);
+      margin-top: 8px;
       letter-spacing: 0.04em;
     }
 
-    .fixed-status {
-      position: fixed;
-      right: 18px;
-      bottom: 18px;
-      border: 1px solid var(--line-dark);
-      background: var(--paper);
-      padding: 10px 14px;
+    /* ─── Two-column grid for sub/caller chips ────────────────────────────── */
+    .chip-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .chip {
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      padding: 14px 16px;
+      transition: border-color 0.15s, background 0.15s;
+    }
+    .chip:hover { border-color: var(--line-3); background: var(--bg-2); }
+    .chip-name {
       font-family: var(--mono);
-      font-size: 12px;
-      color: var(--muted);
-      box-shadow: var(--shadow);
+      font-size: 0.85rem;
+      color: var(--text);
+      margin-bottom: 6px;
+      word-break: break-all;
+    }
+    .chip-meta {
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--dim);
+    }
+    .chip-meta .num { color: var(--accent); font-weight: 600; }
+
+    /* ─── Subscription cards ──────────────────────────────────────────────── */
+    .auto-banner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 16px 20px;
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      margin-bottom: 18px;
+      flex-wrap: wrap;
+    }
+    .auto-banner .banner-text {
+      flex: 1 1 auto;
+      font-family: var(--mono);
+      font-size: 0.82rem;
+      color: var(--dim);
+    }
+    .auto-banner .banner-text strong { color: var(--accent); font-weight: 600; }
+    .auto-banner code {
+      font-family: var(--mono);
+      background: var(--bg-2);
+      border: 1px solid var(--line);
+      padding: 2px 8px;
+      color: var(--text);
+      font-size: 0.78rem;
     }
 
-    .fixed-status span {
-      display: inline-block;
-      width: 8px;
+    .subs-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
+      gap: 0;
+      border: 1px solid var(--line);
+    }
+    .subs-card {
+      background: var(--bg-1);
+      padding: 18px 20px;
+      border-right: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+      position: relative;
+    }
+    .subs-card::before {
+      content: '';
+      position: absolute;
+      left: 0; top: 0; bottom: 0;
+      width: 2px;
+      background: var(--dim-2);
+    }
+    .subs-card.installed::before { background: var(--info); }
+    .subs-card.running::before { background: var(--ok); }
+    .subs-card.missing { opacity: 0.55; }
+    .subs-card.missing::before { background: var(--line-2); }
+
+    .subs-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .subs-label {
+      font-weight: 600;
+      font-size: 0.95rem;
+      color: var(--text);
+      flex: 1 1 auto;
+    }
+    .subs-state {
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      padding: 3px 8px;
+      border: 1px solid var(--line-2);
+      color: var(--dim);
+      white-space: nowrap;
+    }
+    .subs-state.running { color: var(--accent); border-color: var(--accent-dim); }
+    .subs-state.installed { color: var(--info); border-color: rgba(37,99,235,0.24); }
+    .subs-state.missing { color: var(--dim-2); }
+    .subs-meta {
+      font-family: var(--mono);
+      font-size: 0.74rem;
+      color: var(--dim);
+      margin-bottom: 4px;
+    }
+    .subs-bridge-url, .subs-models {
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--dim);
+      margin-top: 6px;
+      word-break: break-all;
+    }
+    .subs-bridge-url {
+      background: var(--bg);
+      border: 1px solid var(--line);
+      padding: 6px 10px;
+      color: var(--text);
+    }
+    .subs-models { color: var(--dim); }
+    .subs-models::before { content: 'models: '; color: var(--dim-2); }
+    .subs-install-hint {
+      font-family: var(--mono);
+      font-size: 0.7rem;
+      color: var(--warn);
+      background: rgba(180,83,9,0.08);
+      border: 1px solid rgba(180,83,9,0.22);
+      padding: 6px 10px;
+      margin-top: 8px;
+    }
+    .subs-install-hint code {
+      background: var(--bg);
+      padding: 1px 5px;
+      border-radius: 0;
+      color: var(--accent);
+    }
+
+    /* ─── Knowledge Graph ─────────────────────────────────────────────── */
+    .graph-wrap { background: var(--bg-1); border: 1px solid var(--line); padding: 12px; }
+    .graph-wrap svg { width: 100%; height: 460px; display: block; }
+    .graph-wrap svg .node { cursor: pointer; transition: transform 0.15s; }
+    .graph-wrap svg .node:hover { transform: scale(1.1); }
+    .graph-wrap svg .node-caller   { fill: var(--accent); }
+    .graph-wrap svg .node-fact-key   { fill: #2563eb; }
+    .graph-wrap svg .node-fact-value { fill: #a78bfa; }
+    .graph-wrap svg .edge { stroke: var(--line-2); stroke-opacity: 0.6; fill: none; }
+    .graph-wrap svg text.label { font-family: var(--mono); font-size: 10px; fill: var(--text); pointer-events: none; }
+    .graph-legend {
+      display: flex; gap: 18px; margin-top: 10px; padding: 6px 12px;
+      background: var(--bg); border: 1px solid var(--line);
+      font-family: var(--mono); font-size: 0.74rem; color: var(--dim);
+    }
+    .graph-legend .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }
+
+    /* ─── Leaderboard ─────────────────────────────────────────────────── */
+    .leaderboard-podium {
+      display: grid; grid-template-columns: 1fr 1.2fr 1fr;
+      gap: 12px; align-items: end; margin-bottom: 22px;
+    }
+    .podium-step {
+      padding: 18px 14px; border: 1px solid var(--line);
+      background: var(--bg-1); text-align: center;
+      display: flex; flex-direction: column; gap: 6px;
+    }
+    .podium-step.gold   { background: #fefce8; border-color: #facc15; min-height: 200px; order: 2; }
+    .podium-step.silver { background: #f8fafc; border-color: #cbd5e1; min-height: 170px; order: 1; }
+    .podium-step.bronze { background: #fef3c7; border-color: #f59e0b; min-height: 150px; order: 3; }
+    .podium-rank { font-family: var(--mono); font-weight: 700; font-size: 1.4rem; color: var(--text); }
+    .podium-medal { font-size: 2.4rem; line-height: 1; }
+    .podium-model { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; color: var(--text); word-break: break-all; }
+    .podium-stat  { font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }
+    .leaderboard-table { background: var(--bg-1); border: 1px solid var(--line); }
+    .lb-row {
+      display: grid; grid-template-columns: 40px 1fr 80px 80px 80px 80px;
+      gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line);
+      font-family: var(--mono); font-size: 0.82rem; align-items: center;
+    }
+    .lb-row.head { background: var(--bg-2); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; }
+    .lb-row:last-child { border-bottom: none; }
+    .lb-row .lb-pos { font-weight: 700; text-align: center; }
+    .lb-row .lb-num { text-align: right; }
+    .lb-row.medal-gold { background: rgba(250,204,21,0.06); }
+    .lb-row.medal-silver { background: rgba(203,213,225,0.10); }
+    .lb-row.medal-bronze { background: rgba(245,158,11,0.06); }
+
+    /* ─── Share + Report ──────────────────────────────────────────────── */
+    .share-controls {
+      display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
+      padding: 14px; border: 1px solid var(--line); background: var(--bg-1);
+      margin-bottom: 12px;
+    }
+    .share-preview {
+      border: 1px solid var(--line); background: var(--bg-2);
+      padding: 12px; text-align: center;
+    }
+    .share-preview img { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
+    .share-url {
+      font-family: var(--mono); font-size: 0.78rem; color: var(--dim);
+      padding: 8px 12px; background: var(--bg); border: 1px solid var(--line);
+      margin-top: 8px; word-break: break-all;
+    }
+    .share-hint { font-size: 0.82rem; color: var(--dim); margin-top: 8px; }
+    .share-hint code { font-family: var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 2px; }
+
+    /* ─── Caller deep-dive modal additions ──────────────────────────── */
+    .caller-summary {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 0; border: 1px solid var(--line); margin-bottom: 16px;
+    }
+    .caller-summary > div { padding: 10px 14px; border-right: 1px solid var(--line); }
+    .caller-summary > div:last-child { border-right: none; }
+    .caller-summary .label { font-size: 0.66rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--mono); }
+    .caller-summary .val { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--text); margin-top: 4px; }
+    .caller-hour-bars { display: flex; gap: 2px; align-items: end; height: 60px; padding: 8px; border: 1px solid var(--line); background: var(--bg); }
+    .caller-hour-bars .bar { flex: 1; background: var(--accent); min-height: 1px; transition: height 0.2s; }
+    .caller-hour-axis { display: flex; gap: 2px; padding: 0 8px; font-family: var(--mono); font-size: 0.6rem; color: var(--dim-2); }
+    .caller-hour-axis > span { flex: 1; text-align: center; }
+
+    /* clickable caller chips */
+    .chip { cursor: pointer; }
+    .chip:hover { border-color: var(--accent); }
+
+    /* Layer breakdown under hero counter */
+    .hero-layer-breakdown {
+      display: flex; flex-direction: column; gap: 4px;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px solid var(--line);
+    }
+    .layer-row {
+      display: flex; justify-content: space-between; align-items: baseline;
+      font-family: var(--mono); font-size: 0.78rem;
+    }
+    .layer-name { color: var(--dim); }
+    .layer-val { color: var(--text); font-weight: 600; }
+
+    /* ─── Simple Mode CSS — hide non-configured cards ───────────────────── */
+    body.simple-mode .subs-card.missing { display: none; }
+    body.simple-mode #savingsAxes .axis[data-empty="true"] { display: none; }
+    body.hide-empty-providers .provider-item[data-status="unconfigured"] { display: none; }
+    body.hide-empty-providers .wallet-card[data-status="unknown"] { display: none; }
+
+    /* In Simple Mode, hide the noisy "5-axis" header explainer */
+    body.simple-mode .h-section .h-meta:contains('Lean-CTX') { display: none; }
+
+    /* ─── Hero (Buddy + Savings + Cost-VS) ───────────────────────────────── */
+    .hero-grid {
+      display: grid;
+      grid-template-columns: 1fr 1.5fr 1.2fr;
+      gap: 0;
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      margin-bottom: 22px;
+      overflow: hidden;
+    }
+    .hero-grid > div { padding: 22px 24px; border-right: 1px solid var(--line); }
+    .hero-grid > div:last-child { border-right: none; }
+
+    .hero-eyebrow {
+      font-family: var(--mono);
+      font-size: 0.66rem;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--dim);
+      margin-bottom: 12px;
+    }
+
+    /* Buddy */
+    .hero-buddy { display: flex; flex-direction: column; gap: 8px; }
+    .buddy-name { font-weight: 700; font-size: 1.1rem; color: var(--text); }
+    .buddy-rarity {
+      display: inline-block; font-family: var(--mono); font-size: 0.62rem;
+      padding: 2px 8px; border: 1px solid var(--line-2); margin-left: 6px;
+      letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle;
+    }
+    .buddy-rarity.legendary { color: #b45309; border-color: #b45309; background: rgba(180,83,9,0.06); }
+    .buddy-rarity.epic      { color: #7c3aed; border-color: #7c3aed; background: rgba(124,58,237,0.06); }
+    .buddy-rarity.rare      { color: #2563eb; border-color: #2563eb; background: rgba(37,99,235,0.06); }
+    .buddy-rarity.uncommon  { color: var(--accent); border-color: var(--accent); background: rgba(15,118,110,0.06); }
+    .buddy-rarity.common    { color: var(--dim); }
+    .buddy-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--dim); }
+    .buddy-art {
+      font-family: var(--mono); font-size: 0.8rem; line-height: 1.1;
+      white-space: pre; color: var(--accent);
+      padding: 8px; background: var(--bg);
+      border: 1px solid var(--line); margin: 4px 0;
+    }
+    .buddy-xp-bar {
+      height: 6px; background: var(--bg-3); border-radius: 1px;
+      position: relative; overflow: hidden;
+    }
+    .buddy-xp-fill {
+      height: 100%; background: linear-gradient(90deg, var(--accent), #2dd4bf);
+      transition: width 0.4s;
+    }
+    .buddy-xp-text {
+      font-family: var(--mono); font-size: 0.7rem; color: var(--dim-2);
+      display: flex; justify-content: space-between;
+    }
+    .buddy-speech {
+      font-style: italic; font-size: 0.84rem; color: var(--text);
+      padding: 8px 12px; background: var(--bg-2); border-left: 2px solid var(--accent);
+      margin-top: 6px;
+    }
+    .buddy-mood-happy::before    { content: '😊 '; }
+    .buddy-mood-content::before  { content: '😌 '; }
+    .buddy-mood-sleepy::before   { content: '😴 '; }
+    .buddy-mood-hungry::before   { content: '🍴 '; }
+    .buddy-mood-excited::before  { content: '🤩 '; }
+
+    /* Hero savings counter */
+    .hero-savings { display: flex; flex-direction: column; gap: 14px; }
+    .hero-counter {
+      font-family: var(--mono); font-size: 3.6rem; font-weight: 700;
+      color: var(--accent); letter-spacing: -0.03em; line-height: 0.95;
+    }
+    .hero-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
+    .hero-pill {
+      flex: 1 1 100px; padding: 8px 12px; border: 1px solid var(--line);
+      background: var(--bg); display: flex; flex-direction: column; gap: 2px;
+    }
+    .hero-pill-label {
+      font-family: var(--mono); font-size: 0.62rem; color: var(--dim-2);
+      letter-spacing: 0.1em; text-transform: uppercase;
+    }
+    .hero-pill-val { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--text); }
+
+    /* Cost-VS comparison */
+    .hero-cost { display: flex; flex-direction: column; gap: 10px; }
+    .cost-vs { display: flex; align-items: center; gap: 10px; }
+    .cost-side { flex: 1; padding: 10px 14px; border: 1px solid var(--line); }
+    .cost-side.without { background: rgba(180,35,24,0.04); border-color: rgba(180,35,24,0.2); }
+    .cost-side.with    { background: rgba(15,118,110,0.06); border-color: rgba(15,118,110,0.3); }
+    .cost-label {
+      font-family: var(--mono); font-size: 0.62rem; color: var(--dim-2);
+      text-transform: uppercase; letter-spacing: 0.1em;
+    }
+    .cost-amount {
+      font-family: var(--mono); font-weight: 700; font-size: 1.6rem;
+      letter-spacing: -0.02em; margin-top: 2px;
+    }
+    .cost-side.without .cost-amount { color: var(--err); }
+    .cost-side.with .cost-amount    { color: var(--accent); }
+    .cost-arrow { color: var(--dim-2); font-size: 1.4rem; }
+    .cost-saved-line { font-size: 0.84rem; color: var(--text); }
+    .cost-saved-line strong { color: var(--accent); font-weight: 700; }
+
+    /* Savings axes (5-source breakdown) */
+    .savings-axes {
+      display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
+      border: 1px solid var(--line); background: var(--bg-1);
+    }
+    .axis {
+      padding: 14px 16px; border-right: 1px solid var(--line);
+      display: flex; flex-direction: column; gap: 4px;
+    }
+    .axis:last-child { border-right: none; }
+    .axis-label {
+      font-family: var(--mono); font-size: 0.66rem; color: var(--dim);
+      letter-spacing: 0.1em; text-transform: uppercase;
+    }
+    .axis-icon { font-size: 1.2rem; }
+    .axis-cost {
+      font-family: var(--mono); font-weight: 700; font-size: 1.3rem;
+      color: var(--accent);
+    }
+    .axis-detail { font-family: var(--mono); font-size: 0.7rem; color: var(--dim-2); }
+
+    /* Two-column overview rows */
+    .overview-row-2col {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
+      margin-top: 22px;
+    }
+
+    /* Calendar heatmap */
+    .heatmap {
+      display: grid; grid-template-columns: repeat(53, 11px);
+      grid-auto-rows: 11px; gap: 2px;
+      padding: 12px; border: 1px solid var(--line); background: var(--bg-1);
+    }
+    .heatmap-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--bg-3); cursor: pointer; transition: transform 0.1s; }
+    .heatmap-cell:hover { transform: scale(1.4); outline: 1px solid var(--accent); }
+    .heatmap-cell.l1 { background: #2dd4bf40; }
+    .heatmap-cell.l2 { background: #2dd4bf80; }
+    .heatmap-cell.l3 { background: #2dd4bfc0; }
+    .heatmap-cell.l4 { background: var(--accent); }
+
+    /* Forecast */
+    .forecast { padding: 18px; border: 1px solid var(--line); background: var(--bg-1); }
+    .forecast-row {
+      display: flex; justify-content: space-between; align-items: baseline;
+      padding: 8px 0; border-bottom: 1px solid var(--line);
+    }
+    .forecast-row:last-child { border-bottom: none; }
+    .forecast-window { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
+    .forecast-amount { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 1.1rem; }
+    .forecast-trend {
+      font-family: var(--mono); font-size: 0.78rem; padding-top: 8px;
+      color: var(--dim);
+    }
+    .forecast-trend.up { color: var(--accent); }
+    .forecast-trend.down { color: var(--err); }
+    .forecast-trend::before { content: '→ '; }
+    .forecast-trend.up::before { content: '↗ '; }
+    .forecast-trend.down::before { content: '↘ '; }
+
+    /* Live events feed */
+    .events-feed {
+      max-height: 380px; overflow-y: auto;
+      border: 1px solid var(--line); background: var(--bg-1);
+      font-family: var(--mono);
+    }
+    .event-row {
+      display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
+      padding: 8px 14px; border-bottom: 1px solid var(--line);
+      font-size: 0.78rem; align-items: center;
+    }
+    .event-row:last-child { border-bottom: none; }
+    .event-row:hover { background: var(--bg-2); }
+    .event-icon { font-size: 1rem; }
+    .event-body { color: var(--text); }
+    .event-caller { color: var(--accent); font-weight: 600; }
+    .event-detail { color: var(--dim); margin-top: 2px; font-size: 0.7rem; }
+    .event-time { color: var(--dim-2); font-size: 0.68rem; }
+
+    /* Achievements */
+    .achievements-grid {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 10px;
+    }
+    .achievement {
+      padding: 12px 14px; border: 1px solid var(--line); background: var(--bg-1);
+      display: flex; gap: 12px; align-items: flex-start;
+      transition: transform 0.15s, border-color 0.15s;
+    }
+    .achievement.unlocked { border-color: var(--accent); }
+    .achievement.unlocked:hover { transform: translateY(-2px); }
+    .achievement.locked { opacity: 0.45; filter: grayscale(0.8); }
+    .ach-icon { font-size: 1.6rem; line-height: 1; }
+    .ach-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+    .ach-title { font-weight: 600; font-size: 0.88rem; color: var(--text); }
+    .ach-desc { font-size: 0.74rem; color: var(--dim); font-family: var(--mono); }
+
+    /* Streak badge */
+    #streakBadge { color: var(--accent); font-weight: 700; }
+
+    @media (max-width: 1100px) {
+      .hero-grid { grid-template-columns: 1fr; }
+      .hero-grid > div { border-right: none; border-bottom: 1px solid var(--line); }
+      .savings-axes { grid-template-columns: repeat(2, 1fr); }
+      .axis { border-bottom: 1px solid var(--line); }
+      .overview-row-2col { grid-template-columns: 1fr; }
+      .heatmap { grid-template-columns: repeat(26, 11px); }
+    }
+
+    /* ─── Savings ───────────────────────────────────────────────────────── */
+    .savings-hero {
+      display: grid;
+      grid-template-columns: 1fr 1.4fr;
+      gap: 0;
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+    }
+    .savings-headline {
+      padding: 28px 32px;
+      border-right: 1px solid var(--line);
+    }
+    .savings-eyebrow {
+      font-family: var(--mono);
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.18em;
+      color: var(--dim);
+      margin-bottom: 10px;
+    }
+    .savings-counter {
+      font-family: var(--mono);
+      font-size: 3.4rem;
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1;
+      color: var(--accent);
+      transition: color 0.4s;
+    }
+    .savings-sub {
+      font-family: var(--mono);
+      font-size: 0.85rem;
+      color: var(--dim);
+      margin-top: 14px;
+    }
+    .savings-spark {
+      padding: 24px 32px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .savings-spark svg {
+      width: 100%;
+      height: 80px;
+    }
+    .savings-spark svg path.area { fill: rgba(15,118,110,0.10); stroke: none; }
+    .savings-spark svg path.line { fill: none; stroke: var(--accent); stroke-width: 1.4; }
+    .savings-spark svg circle.last { fill: var(--accent); }
+    .savings-spark-meta {
+      display: flex; justify-content: space-between;
+      font-family: var(--mono); font-size: 0.7rem;
+      color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em;
+    }
+    .savings-spark-meta #savingsHitRate { color: var(--accent); }
+
+    /* ─── Wallet ───────────────────────────────────────────────────────── */
+    .wallet-banner {
+      padding: 14px 18px;
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      margin-bottom: 18px;
+      font-size: 0.86rem;
+      color: var(--dim);
+    }
+    .wallet-banner strong { color: var(--accent); font-weight: 600; }
+    .wallet-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+      gap: 0;
+      border: 1px solid var(--line);
+    }
+    .wallet-card {
+      background: var(--bg-1);
+      padding: 18px 20px 16px;
+      border-right: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+      position: relative;
+    }
+    .wallet-head {
+      display: flex; justify-content: space-between; align-items: baseline;
+      margin-bottom: 10px;
+    }
+    .wallet-label {
+      font-weight: 600; font-size: 0.95rem; color: var(--text);
+    }
+    .wallet-rec {
+      font-family: var(--mono); font-size: 0.65rem;
+      letter-spacing: 0.1em; text-transform: uppercase;
+      padding: 2px 8px; border: 1px solid var(--line-2);
+      color: var(--dim);
+    }
+    .wallet-rec.use-this { color: var(--ok); border-color: rgba(21,128,61,0.4); background: rgba(21,128,61,0.05); }
+    .wallet-rec.available { color: var(--info); border-color: rgba(37,99,235,0.4); }
+    .wallet-rec.near-limit { color: var(--warn); border-color: rgba(180,83,9,0.4); background: rgba(180,83,9,0.05); }
+    .wallet-rec.exhausted { color: var(--err); border-color: rgba(180,35,24,0.4); background: rgba(180,35,24,0.05); }
+    .wallet-rec.unknown { color: var(--dim-2); }
+
+    .wallet-bar {
       height: 8px;
-      background: var(--green);
-      margin-right: 8px;
+      background: var(--bg-2);
+      border-radius: 1px;
+      position: relative;
+      overflow: hidden;
+      margin: 12px 0 10px;
+    }
+    .wallet-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      transition: width 0.4s ease;
+    }
+    .wallet-bar-fill.warn { background: var(--warn); }
+    .wallet-bar-fill.err { background: var(--err); }
+    .wallet-meta {
+      display: flex; justify-content: space-between;
+      font-family: var(--mono); font-size: 0.74rem;
+      color: var(--dim);
+    }
+    .wallet-meta strong { color: var(--text); font-weight: 600; }
+    .wallet-reset {
+      font-family: var(--mono); font-size: 0.7rem;
+      color: var(--dim-2); margin-top: 6px;
     }
 
-    @media (max-width: 1200px) {
-      .coverage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .workbench { grid-template-columns: 1fr; }
+    /* ─── Memory ───────────────────────────────────────────────────────── */
+    .memory-form {
+      display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
+      align-items: center;
+    }
+    .mem-list {
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+    }
+    .mem-row {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--line);
+      display: grid;
+      grid-template-columns: 1.2fr 2fr 1fr;
+      gap: 12px;
+      align-items: center;
+      font-family: var(--mono);
+      font-size: 0.82rem;
+    }
+    .mem-row:last-child { border-bottom: none; }
+    .mem-key { font-weight: 600; color: var(--accent); }
+    .mem-val { color: var(--text); }
+    .mem-meta { color: var(--dim-2); font-size: 0.72rem; text-align: right; }
+
+    /* ─── Providers ──────────────────────────────────────────────────────── */
+    .providers-stack > section { margin-bottom: 22px; }
+    .providers-stack > section:last-child { margin-bottom: 0; }
+    .providers-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 0;
+      border: 1px solid var(--line);
+    }
+    .provider-item {
+      background: var(--bg-1);
+      border-right: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+      padding: 14px 16px;
+    }
+    .provider-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+    .provider-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
+    .provider-tech-name {
+      font-family: var(--mono); font-size: 0.7rem; color: var(--dim-2);
+      margin-bottom: 6px;
+    }
+    .provider-tag {
+      font-family: var(--mono); font-size: 0.62rem;
+      letter-spacing: 0.1em; text-transform: uppercase;
+      padding: 2px 8px;
+      border: 1px solid var(--line-2);
+      color: var(--dim);
+      white-space: nowrap;
+    }
+    .provider-tag.tag-configured { color: var(--ok); border-color: rgba(21,128,61,0.24); }
+    .provider-tag.tag-unconfigured { color: var(--dim); }
+    .provider-runtime {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      color: var(--dim-2);
+      margin-top: 8px;
+      min-height: 18px;
+    }
+    .provider-runtime .runtime-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--dim-2);
+      flex: 0 0 auto;
+    }
+    .provider-runtime.runtime-ready { color: var(--ok); }
+    .provider-runtime.runtime-ready .runtime-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(21,128,61,0.12); }
+    .provider-runtime.runtime-warn { color: var(--warn); }
+    .provider-runtime.runtime-warn .runtime-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(180,83,9,0.12); }
+    .provider-runtime.runtime-muted { color: var(--dim); }
+    .provider-runtime.runtime-muted .runtime-dot { background: var(--dim); }
+    .provider-models {
+      font-family: var(--mono); font-size: 0.72rem; color: var(--dim);
+      margin-top: 4px; word-break: break-all;
+    }
+    .provider-rate {
+      font-family: var(--mono); font-size: 0.68rem; color: var(--dim-2);
+      margin-top: 4px;
+    }
+    .provider-env-hint {
+      font-family: var(--mono); font-size: 0.68rem;
+      color: var(--warn);
+      background: rgba(180,83,9,0.08);
+      border: 1px solid rgba(180,83,9,0.22);
+      padding: 4px 8px;
+      margin-top: 6px;
+    }
+    .provider-env-hint code { background: var(--bg); padding: 1px 4px; color: var(--accent); }
+
+    /* ─── Activity / Requests table ───────────────────────────────────────── */
+    .filters {
+      display: flex; gap: 4px;
+      margin-bottom: 14px;
+      font-family: var(--mono);
+    }
+    .filter-btn {
+      background: transparent;
+      border: 1px solid var(--line);
+      color: var(--dim);
+      padding: 6px 16px;
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .filter-btn:hover { color: var(--text); border-color: var(--line-3); }
+    .filter-btn.active {
+      color: var(--accent);
+      border-color: var(--accent-dim);
+      background: rgba(15,118,110,0.08);
     }
 
-    @media (max-width: 760px) {
-      .shell { padding: 22px 16px 80px; }
-      header, .status-strip { grid-template-columns: 1fr; display: grid; }
-      .coverage, .metrics { grid-template-columns: 1fr; }
-      .route { grid-template-columns: 1fr; }
-      .section-note { display: none; }
+    .req-table {
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+    }
+    .req-row {
+      display: grid;
+      grid-template-columns: 1.15fr 1fr 1.2fr 0.7fr 0.7fr 0.7fr 0.65fr 0.9fr 0.75fr 0.7fr;
+      gap: 10px;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--line);
+      align-items: center;
+    }
+    .req-row.head {
+      background: var(--bg-2);
+      color: var(--dim);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      font-size: 0.66rem;
+    }
+    .req-row:last-child { border-bottom: none; }
+    .req-row.body:hover { background: var(--bg-2); }
+    .req-row > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .req-status {
+      display: inline-block;
+      padding: 2px 8px;
+      font-size: 0.66rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      border: 1px solid var(--line-2);
+    }
+    .req-status.approved { color: var(--ok); border-color: rgba(21,128,61,0.24); }
+    .req-status.error, .req-status.rejected { color: var(--err); border-color: rgba(180,35,24,0.24); }
+    .req-status.warning, .req-status.pending_review { color: var(--warn); border-color: rgba(180,83,9,0.24); }
+
+    .client-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+    .client-item {
+      border: 1px solid var(--line);
+      background: var(--bg-1);
+      padding: 12px 14px;
+      font-family: var(--mono);
+      min-height: 88px;
+    }
+    .client-top {
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+      align-items: flex-start;
+      margin-bottom: 9px;
+    }
+    .client-name {
+      font-weight: 700;
+      color: var(--text);
+      font-size: 0.78rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .client-state {
+      border: 1px solid var(--line-2);
+      padding: 2px 7px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 0.62rem;
+      color: var(--dim);
+      white-space: nowrap;
+    }
+    .client-state.live,
+    .client-state.running {
+      color: var(--ok);
+      border-color: rgba(21,128,61,0.28);
+      background: rgba(21,128,61,0.06);
+    }
+    .client-state.installed {
+      color: var(--info);
+      border-color: rgba(37,99,235,0.28);
+      background: rgba(37,99,235,0.06);
+    }
+    .client-state.not-connected {
+      color: var(--warn);
+      border-color: rgba(180,83,9,0.26);
+      background: rgba(180,83,9,0.06);
+    }
+    .client-meta {
+      color: var(--dim);
+      font-size: 0.72rem;
+      line-height: 1.55;
+    }
+    .client-meta strong {
+      color: var(--text);
+      font-weight: 600;
+    }
+
+    .empty-state {
+      padding: 40px 20px;
+      text-align: center;
+      color: var(--dim-2);
+      font-family: var(--mono);
+      font-size: 0.85rem;
+    }
+    .loading {
+      padding: 30px 20px;
+      text-align: center;
+      color: var(--dim);
+      font-family: var(--mono);
+      font-size: 0.8rem;
+    }
+
+    /* ─── Buttons ────────────────────────────────────────────────────────── */
+    .btn {
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      padding: 8px 18px;
+      border: 1px solid var(--line-2);
+      background: transparent;
+      color: var(--text);
+      cursor: pointer;
+      letter-spacing: 0.02em;
+      transition: all 0.15s;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .btn:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: rgba(15,118,110,0.06);
+    }
+    .btn.primary {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: rgba(15,118,110,0.08);
+    }
+    .btn.primary:hover { background: var(--accent); color: #ffffff; }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .btn-sm { padding: 5px 12px; font-size: 0.72rem; }
+
+    /* ─── Settings modal ─────────────────────────────────────────────────── */
+    .modal-overlay {
+      position: fixed; inset: 0;
+      background: rgba(56,68,82,0.28);
+      backdrop-filter: blur(2px);
+      display: none;
+      align-items: flex-start;
+      justify-content: center;
+      z-index: 1000;
+      overflow-y: auto;
+      padding: 40px 16px;
+    }
+    .modal-overlay.open { display: flex; }
+    .modal {
+      background: var(--bg-1);
+      border: 1px solid var(--line-2);
+      max-width: 760px;
+      width: 100%;
+      max-height: calc(100vh - 80px);
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 24px 60px rgba(75,91,108,0.20);
+    }
+    .modal-header {
+      padding: 18px 24px;
+      border-bottom: 1px solid var(--line);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .modal-header h2 {
+      font-family: var(--mono);
+      font-size: 0.85rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      font-weight: 600;
+      color: var(--text);
+    }
+    .modal-header h2::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--accent); }
+    .modal-close {
+      background: none;
+      border: 1px solid var(--line-2);
+      width: 32px; height: 32px;
+      cursor: pointer;
+      color: var(--dim);
+      font-size: 1.1rem;
+      line-height: 1;
+      transition: all 0.15s;
+    }
+    .modal-close:hover { color: var(--err); border-color: var(--err); }
+    .modal-body { padding: 22px 24px; overflow-y: auto; flex: 1 1 auto; }
+    .modal-footer {
+      padding: 14px 24px;
+      border-top: 1px solid var(--line);
+      display: flex; gap: 10px; justify-content: flex-end; align-items: center;
+    }
+    .modal-footer .save-status {
+      margin-right: auto;
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      color: var(--dim);
+    }
+    .modal-footer .save-status.ok { color: var(--ok); }
+    .modal-footer .save-status.err { color: var(--err); }
+
+    .settings-section { margin-bottom: 26px; }
+    .settings-section:last-child { margin-bottom: 0; }
+    .settings-section-title {
+      font-family: var(--mono);
+      font-size: 0.7rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--accent);
+      margin-bottom: 6px;
+      padding-bottom: 6px;
+      border-bottom: 1px solid var(--line);
+    }
+    .settings-section-title::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 8px; background: var(--accent-dim); vertical-align: middle; }
+    .settings-section-desc { font-size: 0.78rem; color: var(--dim); margin-bottom: 10px; }
+
+    .settings-row {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 12px;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--line);
+    }
+    .settings-row:last-child { border-bottom: none; }
+    .settings-row-info { display: flex; flex-direction: column; gap: 2px; }
+    .settings-row-label { font-weight: 600; font-size: 0.88rem; color: var(--text); }
+    .settings-row-meta {
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--dim);
+    }
+
+    .settings-toggle { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
+    .settings-toggle input { opacity: 0; width: 0; height: 0; }
+    .settings-toggle .slider {
+      position: absolute; cursor: pointer;
+      inset: 0;
+      background: var(--bg-3);
+      border: 1px solid var(--line-2);
+      transition: 0.2s;
+    }
+    .settings-toggle .slider::before {
+      content: '';
+      position: absolute;
+      width: 14px; height: 14px;
+      left: 3px; top: 50%; transform: translateY(-50%);
+      background: var(--dim);
+      transition: 0.2s;
+    }
+    .settings-toggle input:checked + .slider {
+      border-color: var(--accent-dim);
+      background: rgba(15,118,110,0.10);
+    }
+    .settings-toggle input:checked + .slider::before {
+      transform: translate(20px, -50%);
+      background: var(--accent);
+      box-shadow: none;
+    }
+
+    .settings-input {
+      width: 100%;
+      padding: 8px 10px;
+      background: var(--bg);
+      border: 1px solid var(--line-2);
+      color: var(--text);
+      font-family: var(--mono);
+      font-size: 0.82rem;
+      margin-top: 6px;
+    }
+    .settings-input:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(15,118,110,0.16);
+    }
+
+    .settings-radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
+    .settings-radio {
+      flex: 1 1 calc(50% - 4px);
+      min-width: 140px;
+      padding: 10px 14px;
+      border: 1px solid var(--line-2);
+      cursor: pointer;
+      font-size: 0.82rem;
+      font-family: var(--mono);
+      text-align: center;
+      transition: all 0.15s;
+      color: var(--dim);
+    }
+    .settings-radio:hover { color: var(--text); border-color: var(--line-3); }
+    .settings-radio.active {
+      border-color: var(--accent);
+      background: rgba(15,118,110,0.08);
+      color: var(--accent);
+      font-weight: 600;
+    }
+    .settings-radio input { display: none; }
+
+    /* ─── Floating connection indicator ──────────────────────────────────── */
+    .conn-pill {
+      position: fixed;
+      bottom: 16px; right: 16px;
+      padding: 6px 14px;
+      background: var(--bg-1);
+      border: 1px solid var(--line-2);
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--dim);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      z-index: 50;
+    }
+    .conn-pill .dot {
+      width: 6px; height: 6px;
+      background: var(--ok);
+      box-shadow: 0 0 0 3px rgba(21,128,61,0.10);
+      animation: pulse 2.4s infinite;
+    }
+
+    /* ─── Responsive ─────────────────────────────────────────────────────── */
+    @media (max-width: 768px) {
+      .shell { padding: 16px 18px 60px; }
+      .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
+      .metric { padding: 16px 18px; }
+      .metric-value { font-size: 1.7rem; }
+      .req-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; font-size: 0.72rem; }
+      .req-row.head { display: none; }
+      .req-row > div:nth-child(n+5) { display: none; }
     }
   </style>
 </head>
 <body>
   <div class="shell">
-    <header>
-      <div class="brand">
-        <span class="mark"></span>
-        <h1>llm.gateway</h1>
-        <span class="crumb">/ gateway workbench · open source preview</span>
-      </div>
-      <button class="btn" id="settingsBtn">⊙ settings</button>
-    </header>
 
-    <div class="status-strip">
-      <div class="status-group">
-        <div class="status-line"><span class="dot" id="dbDot"></span> DB <strong id="dbStatus">checking</strong></div>
-        <div class="status-line"><span class="dot" id="pollDot"></span> Poll <strong>live</strong></div>
-    <div class="status-line">Interval <strong>15s</strong></div>
+    <!-- ─── Top bar ──────────────────────────────────────────────────────── -->
+    <div class="topbar">
+      <div class="brand">
+        <span class="brand-mark">llm.gateway</span>
+        <span class="brand-tag">gateway workbench · v2.0</span>
+      </div>
+      <div class="topbar-actions">
+        <button class="btn btn-sm" id="settingsBtn" type="button" title="Configure subscriptions and API keys">
+          ⚙ settings
+        </button>
       </div>
-      <div class="status-line">Mode <strong id="modeStatus">auto</strong></div>
     </div>
 
-    <nav class="tabs">
-      <a class="tab" href="#overview">01 overview</a>
-      <a class="tab" href="#providers">02 providers</a>
-      <a class="tab" href="#policies">03 routing</a>
-      <a class="tab active" href="#activity">04 activity</a>
-      <a class="tab" href="#savings">05 savings</a>
-      <a class="tab" href="#memory">06 memory</a>
-      <a class="tab" href="#doctor">07 doctor</a>
+    <!-- ─── Status strip ─────────────────────────────────────────────────── -->
+    <div class="status-strip">
+      <div class="status-cell">
+        <span class="dot ok" id="dbStatusIndicator"></span>
+        <span class="label">db</span>
+        <span class="val" id="dbStatus">connecting</span>
+      </div>
+      <div class="status-cell">
+        <span class="dot ok" id="pollingStatusIndicator"></span>
+        <span class="label">poll</span>
+        <span class="val" id="pollingStatus">starting</span>
+      </div>
+      <div class="status-cell">
+        <span class="label">interval</span>
+        <span class="val" id="pollInterval">3s</span>
+      </div>
+      <div class="status-cell">
+        <span class="label">mode</span>
+        <span class="val" id="routingModeBadge">auto</span>
+      </div>
+    </div>
+
+    <!-- ─── Tab bar ──────────────────────────────────────────────────────── -->
+    <nav class="tabs" role="tablist">
+      <button class="tab-trigger active" data-tab="overview" role="tab" title="Headline stats: tokens saved, cost, buddy, achievements"><span class="tab-num">01</span>overview</button>
+      <button class="tab-trigger" data-tab="subscriptions" role="tab" title="Your CLI subscriptions (Claude Code, Codex, …) and their bridge status"><span class="tab-num">02</span>subscriptions <span class="tab-badge" id="subsTabBadge">·</span></button>
+      <button class="tab-trigger" data-tab="providers" role="tab" title="All configured LLM providers (local Ollama, paid APIs, free tiers) — advanced"><span class="tab-num">03</span>providers <span class="tab-badge" id="providersTabBadge">·</span></button>
+      <button class="tab-trigger" data-tab="activity" role="tab" title="Live request log — every call that went through the gateway"><span class="tab-num">04</span>activity</button>
+      <button class="tab-trigger" data-tab="savings" role="tab" title="Cost & token savings counter — main 'wow how much I saved' page"><span class="tab-num">05</span>savings <span class="tab-badge" id="savingsTabBadge">·</span></button>
+      <button class="tab-trigger" data-tab="wallet" role="tab" title="Subscription quotas — how much of each Pro plan you've used in the current window"><span class="tab-num">06</span>wallet <span class="tab-badge" id="walletTabBadge">·</span></button>
+      <button class="tab-trigger" data-tab="memory" role="tab" title="Persistent facts the gateway knows about each caller — auto-injected into prompts"><span class="tab-num">07</span>memory</button>
+      <button class="tab-trigger" data-tab="leaderboard" role="tab" title="Race-mode results — fastest model leaderboard if you ran multi-model races"><span class="tab-num">08</span>races <span class="tab-badge" id="leaderboardTabBadge">·</span></button>
+      <button class="tab-trigger" data-tab="share" role="tab" title="Generate an embeddable SVG card showing your savings (for blog/Twitter/README)"><span class="tab-num">09</span>share</button>
+      <button class="tab-trigger" data-tab="report" role="tab" title="Generate a printable monthly PDF report"><span class="tab-num">10</span>report</button>
     </nav>
 
-    <section id="overview">
-      <div class="section-head">
-        <div class="section-title">gateway coverage</div>
-        <div class="section-note">existing adapters plus open-source targets</div>
+    <!-- ─── Tab: Overview ────────────────────────────────────────────────── -->
+    <section class="tab-panel active" data-tab="overview">
+
+      <!-- ─── Hero: Buddy + Headline Savings + Forecast ──────────────────── -->
+      <div class="hero-grid">
+        <!-- Left: Pet/Buddy -->
+        <div class="hero-buddy" id="heroBuddy">
+          <div class="loading">summoning buddy</div>
+        </div>
+
+        <!-- Center: Headline savings counter — combined all layers -->
+        <div class="hero-savings">
+          <div class="hero-eyebrow">total tokens saved · all layers · all-time</div>
+          <div class="hero-counter"><span id="heroTokensSavedCombined">0</span><span style="font-size:1.1rem;color:var(--dim);font-weight:400;margin-left:8px;">tokens</span></div>
+          <div class="hero-layer-breakdown" id="heroLayerBreakdown">
+            <div class="layer-row"><span class="layer-name">⚡ Gateway (LLM calls)</span><span class="layer-val" id="heroTokensSaved">0</span></div>
+            <div class="layer-row" id="heroLeanCtxRow" style="display:none;"><span class="layer-name">🗜 Lean-CTX (tool calls)</span><span class="layer-val" id="heroLeanCtxTokens">—</span></div>
+          </div>
+          <div class="hero-row">
+            <div class="hero-pill">
+              <span class="hero-pill-label">cost saved</span>
+              <span class="hero-pill-val" id="heroCostSaved">$0.00</span>
+            </div>
+            <div class="hero-pill">
+              <span class="hero-pill-label">cache hits</span>
+              <span class="hero-pill-val" id="heroCacheHits">0</span>
+            </div>
+            <div class="hero-pill">
+              <span class="hero-pill-label">savings rate</span>
+              <span class="hero-pill-val" id="heroSavingsRate">0%</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Cost analysis (without vs with) — competitor comparison -->
+        <div class="hero-cost">
+          <div class="hero-eyebrow">cost analysis · last 24h · USD</div>
+          <div class="cost-vs">
+            <div class="cost-side without">
+              <div class="cost-label">without gateway</div>
+              <div class="cost-amount" id="costWithout">$0.00</div>
+            </div>
+            <div class="cost-arrow">→</div>
+            <div class="cost-side with">
+              <div class="cost-label">with gateway</div>
+              <div class="cost-amount" id="costWith">$0.00</div>
+            </div>
+          </div>
+          <div class="cost-saved-line">you saved <strong id="costSavedLine">$0.00</strong> · <span id="costSavedPercent">0%</span> reduction</div>
+        </div>
       </div>
-      <div class="coverage" id="coverage"></div>
+
+      <!-- ─── Five-Axis Savings Breakdown — what makes us better than Lean-CTX ── -->
+      <h2 class="h-section">Savings Sources <span class="h-meta">we measure 5 axes — Lean-CTX measures 1</span></h2>
+      <div class="savings-axes" id="savingsAxes">
+        <div class="loading">loading</div>
+      </div>
+
+      <!-- ─── Quick Metrics Grid ──────────────────────────────────────────── -->
+      <h2 class="h-section">Live Metrics <span class="h-meta">last 24h</span></h2>
+      <div class="metric-grid">
+        <div class="metric">
+          <div class="metric-label">requests</div>
+          <div class="metric-value" id="totalRequests">0</div>
+          <div class="metric-change" id="requestsChange">routed</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">success rate</div>
+          <div class="metric-value" id="successRate">0<span class="metric-unit">%</span></div>
+          <div class="metric-change" id="successChange">approved/total</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">avg latency</div>
+          <div class="metric-value" id="avgLatency">0<span class="metric-unit">ms</span></div>
+          <div class="metric-change" id="latencyChange">end-to-end</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">spent today</div>
+          <div class="metric-value" id="totalCost">$0.00</div>
+          <div class="metric-change" id="costChange">actual usd</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">confidence</div>
+          <div class="metric-value" id="avgConfidence">0<span class="metric-unit">/10</span></div>
+          <div class="metric-change" id="confidenceChange">post-val</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">fallback usage</div>
+          <div class="metric-value" id="fallbackPercent">0<span class="metric-unit">%</span></div>
+          <div class="metric-change" id="fallbackChange">primary→fallback</div>
+        </div>
+      </div>
+
+      <!-- ─── Calendar heatmap (GitHub style) + Forecast ──────────────────── -->
+      <div class="overview-row-2col">
+        <div>
+          <h2 class="h-section">Activity · last 365 days <span class="h-meta">streak <span id="streakBadge">0</span>d</span></h2>
+          <div class="heatmap" id="heatmap"><div class="loading">loading activity</div></div>
+        </div>
+        <div>
+          <h2 class="h-section">Forecast <span class="h-meta">based on recent trend</span></h2>
+          <div class="forecast" id="forecast"><div class="loading">computing forecast</div></div>
+        </div>
+      </div>
+
+      <!-- ─── Live Events Feed + Top Models / Callers ─────────────────────── -->
+      <div class="overview-row-2col">
+        <div>
+          <h2 class="h-section">Live Activity <span class="h-meta">most recent first</span></h2>
+          <div class="events-feed" id="eventsFeed"><div class="loading">listening</div></div>
+        </div>
+        <div>
+          <h2 class="h-section">Top Models <span class="h-meta">last 24h</span></h2>
+          <div class="chip-grid" id="topModels"><div class="loading">analyzing routing</div></div>
+
+          <h2 class="h-section" style="margin-top: 18px;">Top Callers</h2>
+          <div class="chip-grid" id="topCallers"><div class="loading">analyzing callers</div></div>
+        </div>
+      </div>
+
+      <!-- ─── Achievements ──────────────────────────────────────────────────── -->
+      <h2 class="h-section">Achievements <span class="h-meta"><span id="achievementsProgress">0/0</span></span></h2>
+      <div class="achievements-grid" id="achievementsGrid"><div class="loading">checking quests</div></div>
     </section>
 
-    <section id="activity">
-      <div class="section-head">
-        <div class="section-title">gateway metrics</div>
-        <div class="section-note">traffic · providers · savings · readiness</div>
+    <!-- ─── Tab: Subscriptions ──────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="subscriptions">
+      <div class="auto-banner">
+        <div class="banner-text">
+          <strong>auto-gateway</strong> <span id="subsAutoState">detection only</span>
+          — installed CLI subscriptions are wrapped into HTTP bridges and exposed via <code>/v1/chat/completions</code>
+        </div>
+        <button class="btn btn-sm primary" id="subsSpawnBtn" type="button">⟳ spawn missing bridges</button>
+      </div>
+      <div class="subs-grid" id="subscriptionsList">
+        <div class="loading">discovering installed subscriptions</div>
       </div>
-      <div class="metrics" id="metrics"></div>
     </section>
 
-    <section class="workbench">
-      <div class="panel" id="policies">
-        <div class="panel-title">
-          <span>request pipeline</span>
-          <span>gateway core</span>
-        </div>
-        <div class="panel-body">
-          <div class="route-stack" id="pipeline"></div>
-        </div>
+    <!-- ─── Tab: Providers ──────────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="providers">
+      <div class="providers-stack">
+        <section>
+          <h2 class="h-section">Local <span class="h-meta">on-host inference</span></h2>
+          <div class="providers-grid" id="providersList_local">
+            <div class="loading">enumerating local models</div>
+          </div>
+        </section>
+        <section>
+          <h2 class="h-section">Subscription <span class="h-meta">paid plans via bridges</span></h2>
+          <div class="providers-grid" id="providersList_subscription">
+            <div class="loading">enumerating subscription providers</div>
+          </div>
+        </section>
+        <section>
+          <h2 class="h-section">Free Tier <span class="h-meta">api-key authenticated</span></h2>
+          <div class="providers-grid" id="providersList_free">
+            <div class="loading">enumerating free-tier endpoints</div>
+          </div>
+        </section>
       </div>
-      <div class="panel" id="memory">
-        <div class="panel-title">
-          <span>open-source extensions</span>
-          <span>roadmap</span>
+    </section>
+
+    <!-- ─── Tab: Activity ──────────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="activity">
+      <h2 class="h-section">Desktop AI Coverage <span class="h-meta">local app detection plus gateway traffic</span></h2>
+      <div class="client-grid" id="clientsCoverage">
+        <div class="loading">checking connected clients</div>
+      </div>
+      <h2 class="h-section">Recent Requests <span class="h-meta">live polling</span></h2>
+      <div class="filters">
+        <button class="filter-btn active" data-hours="24">last 24h</button>
+        <button class="filter-btn" data-hours="168">last 7d</button>
+        <button class="filter-btn" data-hours="720">last 30d</button>
+      </div>
+      <div class="req-table">
+        <div class="req-row head">
+          <div>request id</div>
+          <div>caller</div>
+          <div>model</div>
+          <div>status</div>
+          <div>ctx before</div>
+          <div>ctx sent</div>
+          <div>saved</div>
+          <div>compression</div>
+          <div>cost</div>
+          <div>latency</div>
         </div>
-        <div class="panel-body">
-          <div class="route-stack" id="memoryRoutes"></div>
+        <div id="requestsTable">
+          <div class="empty-state">no requests yet</div>
         </div>
       </div>
     </section>
 
-    <section>
-      <div class="section-head">
-        <div class="section-title">recent requests</div>
-        <div class="section-note">live polling</div>
+    <!-- ─── Tab: Savings ─────────────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="savings">
+      <div class="savings-hero">
+        <div class="savings-headline">
+          <div class="savings-eyebrow">cumulative savings · last 24h</div>
+          <div class="savings-counter" id="savingsCounter">$0.00</div>
+          <div class="savings-sub" id="savingsSubLine">— · — tokens prevented · — cache hits</div>
+        </div>
+        <div class="savings-spark">
+          <svg id="savingsSparkline" viewBox="0 0 320 64" preserveAspectRatio="none"></svg>
+          <div class="savings-spark-meta">
+            <span id="savingsSparkLabel">$ saved per hour</span>
+            <span id="savingsHitRate">hit rate —</span>
+          </div>
+        </div>
       </div>
-      <div style="display:flex; gap:6px; margin-bottom:16px;">
-        <button class="btn" data-hours="24">last 24h</button>
-        <button class="btn" data-hours="168">last 7d</button>
-        <button class="btn" data-hours="720">last 30d</button>
+
+      <div class="metric-grid" style="margin-top:18px;">
+        <div class="metric">
+          <div class="metric-label">cache entries</div>
+          <div class="metric-value" id="cacheEntries">0</div>
+          <div class="metric-change">distinct cached responses</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">tokens prevented</div>
+          <div class="metric-value" id="tokensPrevented">0</div>
+          <div class="metric-change">never sent to LLM</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">cache hit rate</div>
+          <div class="metric-value" id="cacheHitRate">0<span class="metric-unit">%</span></div>
+          <div class="metric-change">hits ÷ total req</div>
+        </div>
+      </div>
+
+      <h2 class="h-section">Top Caching Callers <span class="h-meta">most savings</span></h2>
+      <div class="chip-grid" id="topSavingCallers">
+        <div class="loading">loading</div>
+      </div>
+
+      <h2 class="h-section">Cache Controls <span class="h-meta">manual invalidation</span></h2>
+      <div style="display:flex;gap:10px;flex-wrap:wrap;">
+        <input id="cacheClearCaller" class="settings-input" style="max-width:280px;" placeholder="caller id (e.g. cursor)">
+        <button class="btn" id="cacheClearBtn" type="button">clear caller's cache</button>
+        <button class="btn" id="cachePruneBtn" type="button">prune entries &gt; 7 days</button>
       </div>
-      <table>
-        <thead>
-          <tr>
-            <th>request id</th>
-            <th>caller</th>
-            <th>model</th>
-            <th>status</th>
-            <th>ctx before</th>
-            <th>ctx sent</th>
-            <th>saved</th>
-            <th>compression</th>
-            <th>cost</th>
-            <th>latency</th>
-          </tr>
-        </thead>
-        <tbody id="requests">
-          <tr><td class="empty" colspan="10">loading gateway traffic</td></tr>
-        </tbody>
-      </table>
     </section>
+
+    <!-- ─── Tab: Wallet (Subscription Pool — UNIQUE feature) ────────────── -->
+    <section class="tab-panel" data-tab="wallet">
+      <div class="wallet-banner">
+        <div>
+          <strong>Subscription Pool Wallet</strong> — tracks <strong>API calls</strong>
+          (not tokens) against each Pro plan's quota window. Numbers here are
+          <em>messages remaining</em>, not tokens. For token savings via cache,
+          see the Savings tab.
+        </div>
+      </div>
+      <div class="wallet-grid" id="walletList">
+        <div class="loading">loading wallet</div>
+      </div>
+    </section>
+
+    <!-- ─── Tab: Memory ───────────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="memory">
+      <div class="memory-form">
+        <input id="memCaller" class="settings-input" style="max-width:280px;" placeholder="caller id">
+        <button class="btn" id="memLoadBtn" type="button">load facts</button>
+        <span style="flex:1;"></span>
+        <input id="memFactKey" class="settings-input" style="max-width:200px;" placeholder="fact key">
+        <input id="memFactValue" class="settings-input" style="max-width:280px;" placeholder="fact value">
+        <button class="btn" id="memSaveBtn" type="button">remember</button>
+      </div>
+      <div class="mem-list" id="memList">
+        <div class="empty-state">enter a caller id and click load</div>
+      </div>
+
+      <h2 class="h-section">Knowledge Graph <span class="h-meta">all callers + facts</span></h2>
+      <div class="graph-wrap">
+        <svg id="memoryGraph" viewBox="0 0 880 460" preserveAspectRatio="xMidYMid meet"></svg>
+        <div class="graph-legend">
+          <span><span class="dot" style="background:#0f766e;"></span> caller</span>
+          <span><span class="dot" style="background:#2563eb;"></span> fact key</span>
+          <span><span class="dot" style="background:#a78bfa;"></span> value</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ─── Tab: Leaderboard ─────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="leaderboard">
+      <div class="leaderboard-podium" id="leaderboardPodium">
+        <div class="loading">computing standings</div>
+      </div>
+      <h2 class="h-section">Race Leaderboard <span class="h-meta">last 7 days</span></h2>
+      <div class="leaderboard-table" id="leaderboardTable"><div class="loading">loading</div></div>
+    </section>
+
+    <!-- ─── Tab: Share Card ──────────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="share">
+      <h2 class="h-section">Public Share Card <span class="h-meta">embeddable SVG · OG-card sized · no auth required</span></h2>
+      <div class="share-controls">
+        <label class="settings-row-label">Period:
+          <select id="shareCardPeriod" class="settings-input" style="width: 140px; display:inline-block; margin-left:8px;">
+            <option value="day">day</option>
+            <option value="week">week</option>
+            <option value="month" selected>month</option>
+            <option value="all">all-time</option>
+          </select>
+        </label>
+        <label class="settings-row-label" style="margin-left:24px;">Theme:
+          <select id="shareCardTheme" class="settings-input" style="width: 120px; display:inline-block; margin-left:8px;">
+            <option value="dark">dark</option>
+            <option value="light">light</option>
+          </select>
+        </label>
+        <button class="btn primary" id="shareCardRefresh" type="button">refresh</button>
+        <button class="btn" id="shareCardCopyUrl" type="button">copy URL</button>
+        <button class="btn" id="shareCardDownload" type="button">download SVG</button>
+      </div>
+      <div class="share-preview">
+        <img id="shareCardImg" alt="LLM Gateway share card" loading="lazy">
+      </div>
+      <div class="share-url" id="shareCardUrl"></div>
+      <div class="share-hint">Use this URL anywhere — Twitter/LinkedIn previews, blog headers, README badges. Updates automatically every 5 min.</div>
+    </section>
+
+    <!-- ─── Tab: Monthly Report ──────────────────────────────────────────── -->
+    <section class="tab-panel" data-tab="report">
+      <h2 class="h-section">Monthly Report <span class="h-meta">save as PDF via browser print</span></h2>
+      <div class="share-controls">
+        <label class="settings-row-label">Year:
+          <input id="reportYear" class="settings-input" type="number" style="width:120px;display:inline-block;margin-left:8px;">
+        </label>
+        <label class="settings-row-label" style="margin-left:24px;">Month:
+          <input id="reportMonth" class="settings-input" type="number" min="1" max="12" style="width:90px;display:inline-block;margin-left:8px;">
+        </label>
+        <button class="btn primary" id="reportOpen" type="button">open report</button>
+      </div>
+      <div class="share-hint">Tip: in the report window, press <code>Cmd/Ctrl+P</code> → "Save as PDF". The report is fully styled for A4 print.</div>
+    </section>
+
+    <!-- ─── Caller Deep-Dive Modal ───────────────────────────────────── -->
+    <div class="modal-overlay" id="callerModal" role="dialog" aria-modal="true">
+      <div class="modal" style="max-width: 900px;">
+        <div class="modal-header">
+          <h2 id="callerModalTitle">caller details</h2>
+          <button class="modal-close" id="callerModalClose" aria-label="Close">×</button>
+        </div>
+        <div class="modal-body" id="callerModalBody">
+          <div class="loading">loading caller details</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ─── Settings Modal ──────────────────────────────────────────────── -->
+    <div class="modal-overlay" id="settingsModal" role="dialog" aria-modal="true">
+      <div class="modal">
+        <div class="modal-header">
+          <h2>gateway settings</h2>
+          <button class="modal-close" id="settingsClose" aria-label="Close">×</button>
+        </div>
+        <div class="modal-body">
+          <div class="settings-section">
+            <div class="settings-section-title">dashboard view</div>
+            <p class="settings-section-desc">Hide advanced features you don't use. <strong>Recommended for users with 1–3 subscriptions.</strong></p>
+            <div class="settings-row">
+              <div class="settings-row-info">
+                <span class="settings-row-label">Simple Mode</span>
+                <span class="settings-row-meta">Show only: overview · subscriptions · wallet · activity · savings. Hide: providers, races, share, report, memory.</span>
+              </div>
+              <label class="settings-toggle">
+                <input type="checkbox" id="uiSimpleMode">
+                <span class="slider"></span>
+              </label>
+            </div>
+            <div class="settings-row">
+              <div class="settings-row-info">
+                <span class="settings-row-label">Hide unconfigured providers</span>
+                <span class="settings-row-meta">Don't show provider cards that aren't enabled (Cerebras, Groq, etc.)</span>
+              </div>
+              <label class="settings-toggle">
+                <input type="checkbox" id="uiHideEmpty">
+                <span class="slider"></span>
+              </label>
+            </div>
+            <div class="settings-row">
+              <div class="settings-row-info">
+                <span class="settings-row-label">Tab tooltips</span>
+                <span class="settings-row-meta">Show a one-line explanation on hover for every tab.</span>
+              </div>
+              <label class="settings-toggle">
+                <input type="checkbox" id="uiTooltips">
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div class="settings-section">
+            <div class="settings-section-title">routing mode</div>
+            <p class="settings-section-desc">Restrict which provider categories the gateway is allowed to use.</p>
+            <div class="settings-radio-group" id="routingModeGroup">
+              <label class="settings-radio"><input type="radio" name="routingMode" value="auto"><span>auto · all</span></label>
+              <label class="settings-radio"><input type="radio" name="routingMode" value="subscription-only"><span>subscriptions only</span></label>
+              <label class="settings-radio"><input type="radio" name="routingMode" value="api-only"><span>api only</span></label>
+              <label class="settings-radio"><input type="radio" name="routingMode" value="local-only"><span>local · ollama only</span></label>
+            </div>
+          </div>
+
+          <div class="settings-section">
+            <div class="settings-section-title">cli subscriptions (abos)</div>
+            <p class="settings-section-desc">Toggle which subscription CLIs you have. The auto-gateway only spawns bridges for enabled ones.</p>
+            <div id="settingsSubscriptionsList"></div>
+          </div>
+
+          <div class="settings-section">
+            <div class="settings-section-title">api providers</div>
+            <p class="settings-section-desc">API keys for paid/free-tier endpoints. Stored locally with file mode 0600 — never returned in plaintext.</p>
+            <div id="settingsApiList"></div>
+          </div>
+
+          <div class="settings-section">
+            <div class="settings-section-title">local · ollama</div>
+            <div class="settings-row">
+              <div class="settings-row-info">
+                <span class="settings-row-label">Ollama Base URL</span>
+                <span class="settings-row-meta">OLLAMA_BASE_URL</span>
+                <input class="settings-input" type="text" id="ollamaBaseUrl" placeholder="http://localhost:11434">
+              </div>
+              <label class="settings-toggle">
+                <input type="checkbox" id="ollamaEnabled">
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <span class="save-status" id="settingsSaveStatus"></span>
+          <button class="btn" id="settingsCancel" type="button">cancel</button>
+          <button class="btn primary" id="settingsSave" type="button">save</button>
+        </div>
+      </div>
+    </div>
+
   </div>
 
-  <div class="fixed-status"><span></span><strong id="fixedStatus">connected</strong></div>
+  <div class="conn-pill">
+    <span class="dot" id="connectionDot"></span>
+    <span id="connectionText">connected</span>
+  </div>
 
   <script>
-    const API = window.location.origin;
+    const HEALTH_CHECK_INTERVAL = 30000;
+    const METRICS_REFRESH_INTERVAL = 15000;
+    const REQUESTS_REFRESH_INTERVAL = 15000;
+    const API_BASE = location.protocol === 'file:' ? 'http://127.0.0.1:33103' : '';
     let selectedHours = 24;
+    let lastMetrics = null;
+    let metricsIntervalId = null;
+    let requestsIntervalId = null;
+    const DASHBOARD_TOKEN_KEY = 'llmGatewayDashboardToken';
 
-    const clients = [
-      ['OpenAI-compatible API', 'openai-api', 'already usable by most tools'],
-      ['Ollama / Local models', 'ollama', 'local-first provider path'],
-      ['Codex / CLI clients', 'codex', 'planned MCP helper'],
-      ['Claude Code', 'claude-code', 'planned MCP bridge'],
-      ['ChatGPT / OpenAI', 'chatgpt', 'API key or export workflow'],
-      ['Cursor / VS Code', 'cursor', 'OpenAI-compatible base URL'],
-    ];
-
-    const metricLabels = {
-      detectedClients: 'adapters',
-      localModels: 'local',
-      providersConfigured: 'providers',
-      trustPolicies: 'rules',
-      memoryBackends: 'memory',
-      plannedModules: 'extensions',
-    };
-
-    function esc(value) {
-      return String(value ?? '').replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-      }[c]));
+    function getDashboardToken() {
+      return localStorage.getItem(DASHBOARD_TOKEN_KEY) || '';
     }
 
-    async function getJson(path) {
-      const res = await fetch(`${API}${path}`, { cache: 'no-store', headers: { Accept: 'application/json' } });
-      if (!res.ok) throw new Error(`${path} ${res.status}`);
-      return res.json();
+    function setDashboardToken(token) {
+      if (token) localStorage.setItem(DASHBOARD_TOKEN_KEY, token);
+      else localStorage.removeItem(DASHBOARD_TOKEN_KEY);
     }
 
-    function setDbStatus(status) {
-      const dot = document.getElementById('dbDot');
-      const label = document.getElementById('dbStatus');
-      if (status === 'connected') {
-        dot.className = 'dot';
-        label.textContent = 'connected';
-      } else if (status === 'degraded') {
-        dot.className = 'dot warn';
-        label.textContent = 'degraded';
-      } else {
-        dot.className = 'dot bad';
-        label.textContent = 'offline';
+    function withAuthHeaders(headers = {}) {
+      const token = getDashboardToken();
+      return token ? { ...headers, Authorization: `Bearer ${token}` } : headers;
+    }
+
+    async function apiFetch(url, options = {}) {
+      const response = await fetch(url, {
+        ...options,
+        headers: withAuthHeaders(options.headers || {}),
+      });
+      if (response.status !== 401 && response.status !== 503) return response;
+
+      const token = prompt('Dashboard admin token');
+      if (!token) return response;
+      setDashboardToken(token.trim());
+      return fetch(url, {
+        ...options,
+        headers: withAuthHeaders(options.headers || {}),
+      });
+    }
+
+    // ─── Tab switching ───────────────────────────────────────────────────
+    document.querySelectorAll('.tab-trigger').forEach(t => {
+      t.addEventListener('click', () => {
+        const target = t.dataset.tab;
+        document.querySelectorAll('.tab-trigger').forEach(x => x.classList.toggle('active', x === t));
+        document.querySelectorAll('.tab-panel').forEach(p => p.classList.toggle('active', p.dataset.tab === target));
+        history.replaceState(null, '', `#${target}`);
+      });
+    });
+    if (location.hash) {
+      const target = location.hash.slice(1);
+      const trigger = document.querySelector(`.tab-trigger[data-tab="${target}"]`);
+      if (trigger) trigger.click();
+    }
+
+    // Health check
+    async function checkHealth() {
+      try {
+        const response = await fetch(`${API_BASE}/api/dashboard/health`);
+        const data = await response.json();
+        const isHealthy = data.status === 'ok';
+        updateHealthStatus(isHealthy, data);
+        return isHealthy;
+      } catch (error) {
+        console.error('Health check failed:', error);
+        updateHealthStatus(false, { error: error.message });
+        return false;
       }
     }
 
-    function renderCoverage(topology) {
-      const configured = new Set((topology.nodes || []).filter((n) => n.status === 'ready' || n.status === 'online').map((n) => n.id));
-      document.getElementById('coverage').innerHTML = clients.map(([name, key, note]) => {
-        const ready = configured.has(`client-${key}`) || configured.has(key);
+    function updateHealthStatus(isHealthy, _data) {
+      const indicator = document.getElementById('dbStatusIndicator');
+      const status = document.getElementById('dbStatus');
+      indicator.className = isHealthy ? 'dot ok' : 'dot err';
+      status.textContent = isHealthy ? 'connected' : 'disconnected';
+    }
+
+    // Load recent requests
+    async function loadRequests() {
+      try {
+        const [response, clientsResponse] = await Promise.all([
+          apiFetch(`${API_BASE}/api/dashboard/requests?limit=50&hours=${selectedHours}`),
+          apiFetch(`${API_BASE}/api/dashboard/clients?hours=${selectedHours}`)
+        ]);
+        const data = await response.json();
+        const clients = await clientsResponse.json();
+        if (clients.success) renderClients(clients.data);
+        if (data.success) renderRequests(data.data);
+      } catch (error) {
+        console.error('Failed to load requests:', error);
+      }
+    }
+
+    function renderClients(clients) {
+      const el = document.getElementById('clientsCoverage');
+      el.innerHTML = clients.map(client => {
+        const lastSeen = client.lastSeen ? new Date(client.lastSeen).toLocaleString() : 'never';
+        const callerList = client.callers?.length ? client.callers.join(', ') : 'no caller id seen';
+        const signals = client.detectionSignals?.length ? client.detectionSignals.join(' · ') : 'no local signal';
+        const source = client.source === 'gateway' ? 'gateway traffic'
+          : client.source === 'local-detection' ? 'local detection'
+          : 'not detected';
         return `
-          <article class="tile">
-            <div class="tile-head">
-              <div class="tile-title">${esc(name)}</div>
-              <div class="badge ${ready ? 'ready' : ''}">${ready ? 'ready' : 'not connected'}</div>
+          <div class="client-item">
+            <div class="client-top">
+              <div class="client-name" title="${escapeHtml(client.label)}">${escapeHtml(client.label)}</div>
+              <div class="client-state ${client.status}">${client.status.replace('-', ' ')}</div>
             </div>
-            <div class="tile-meta">
-              0 requests · 0 saved<br>
-              status: discovery pending<br>
-              route: ${esc(note)}<br>
-              last: never
+            <div class="client-meta">
+              <div><strong>${formatNumber(client.requestCount)}</strong> requests · <strong>${formatNumber(client.tokensSaved)}</strong> saved</div>
+              <div title="${escapeHtml(callerList)}">caller: ${escapeHtml(callerList)}</div>
+              <div title="${escapeHtml(signals)}">source: ${escapeHtml(source)}</div>
+              <div>last: ${escapeHtml(lastSeen)}</div>
             </div>
-          </article>
+          </div>
         `;
       }).join('');
     }
 
-    function renderMetrics(summary) {
-      document.getElementById('metrics').innerHTML = Object.entries(summary).map(([key, value]) => `
-        <div class="metric">
-          <div class="metric-label">${esc(metricLabels[key] || key)}</div>
-          <div class="metric-value">${esc(value)}</div>
-        </div>
-      `).join('');
-    }
-
-    function renderPipeline(topology) {
-      const steps = [
-        ['Client Entry', 'OpenAI-compatible requests from apps, agents, and scripts'],
-        ['Gateway Router', 'model selection, fallback, budgets, latency preference'],
-        ['Provider Layer', 'Ollama, OpenAI, Anthropic, Groq, Mistral, OpenRouter'],
-        ['Compression', 'existing token savings plus semantic cache roadmap'],
-        ['Receipts', 'trace request, route, model, tokens, cost, latency'],
-        ['Memory', 'optional shared project memory for handoff between AI tools'],
-      ];
-      document.getElementById('pipeline').innerHTML = steps.map(([name, desc], index) => `
-        <div class="route">
-          <div class="route-name">${String(index + 1).padStart(2, '0')} ${esc(name)}</div>
-          <div class="route-desc">${esc(desc)}</div>
-          <div class="badge ready">${index < 3 ? 'core' : 'next'}</div>
-        </div>
-      `).join('');
-
-      const extensions = [
-        ['MCP server', 'Expose gateway status, providers, receipts, and memory to Codex, Claude Code, Cursor, and automations.', 'next'],
-        ['Shared memory', 'Optional Git/Gitea-backed project memory for decisions, handoffs, receipts, and reusable context.', 'next'],
-        ['Trust routing', 'Small policy layer for local-first routing, sensitive-data blocking, and provider allowlists.', 'next'],
-        ['Setup doctor', 'Detect local tools, env vars, models, ports, and missing config without changing user files silently.', 'next'],
-        ['Context receipts', 'Human-readable proof of what context was used, compressed, redacted, and routed.', 'planned'],
-      ];
-      document.getElementById('memoryRoutes').innerHTML = extensions.map(([name, desc, state]) => `
-        <div class="route">
-          <div class="route-name">${esc(name)}</div>
-          <div class="route-desc">${esc(desc)}</div>
-          <div class="badge ready">${esc(state)}</div>
-        </div>
-      `).join('');
-    }
-
-    function renderRequests(rows) {
-      const body = document.getElementById('requests');
-      if (!rows || rows.length === 0) {
-        body.innerHTML = '<tr><td class="empty" colspan="10">no requests in selected timeframe</td></tr>';
+    function renderRequests(requests) {
+      const table = document.getElementById('requestsTable');
+      if (!requests.length) {
+        table.innerHTML = '<div class="empty-state">no requests in selected timeframe</div>';
         return;
       }
-      body.innerHTML = rows.slice(0, 40).map((r) => `
-        <tr>
-          <td>${esc((r.request_id || r.id || '').slice(0, 12))}</td>
-          <td>${esc(r.caller || 'unknown')}</td>
-          <td>${esc(r.model || 'n/a')}</td>
-          <td>${esc(r.status || 'n/a')}</td>
-          <td>${esc(r.tokens_in || 0)}</td>
-          <td>${esc((r.tokens_in || 0) + (r.tokens_out || 0))}</td>
-          <td>${esc(r.tokens_saved || 0)}</td>
-          <td>${esc(r.compression || 'n/a')}</td>
-          <td>$${Number(r.cost_usd || 0).toFixed(4)}</td>
-          <td>${esc(r.latency_ms || 0)}ms</td>
-        </tr>
+      table.innerHTML = requests.map(req => `
+        <div class="req-row body">
+          <div title="${req.request_id}">${req.request_id.substring(0, 14)}…</div>
+          <div>${escapeHtml(req.caller)}</div>
+          <div title="${req.model}">${req.model}</div>
+          <div><span class="req-status ${req.status}">${req.status}</span></div>
+          <div>${formatNumber(req.compression_tokens_before ?? req.tokens_in ?? 0)}</div>
+          <div>${formatNumber(req.compression_tokens_after ?? req.tokens_in ?? 0)}</div>
+          <div>${formatSavedTokens(req.compression_tokens_saved ?? 0)}</div>
+          <div title="${escapeHtml(req.compression_mode || 'not tracked')}">${formatCompression(req)}</div>
+          <div>${formatCost(req.cost_usd)}</div>
+          <div>${req.latency_ms}ms</div>
+        </div>
       `).join('');
     }
 
-    async function loadTopology() {
-      const data = await getJson('/api/dashboard/topology');
-      const topology = data.data;
-      document.getElementById('modeStatus').textContent = topology.mode === 'hybrid-safe' ? 'auto' : topology.mode;
-      renderCoverage(topology);
-      renderMetrics(topology.summary);
-      renderPipeline(topology);
+    function formatNumber(value) {
+      return Number(value || 0).toLocaleString();
     }
 
-    async function loadHealth() {
+    function formatSavedTokens(value) {
+      const saved = Number(value || 0);
+      return saved > 0 ? saved.toLocaleString() : '0';
+    }
+
+    function formatCompression(req) {
+      const mode = String(req.compression_mode || 'none:none').split(':').pop() || 'none';
+      const pct = Number(req.compression_savings_pct || 0);
+      if (!req.compression_mode) return 'not tracked';
+      if (pct <= 0) return mode === 'none' ? 'checked' : `${escapeHtml(mode)} · 0%`;
+      return `${escapeHtml(mode)} · ${pct.toFixed(1)}%`;
+    }
+
+    function escapeHtml(s) {
+      return String(s ?? '').replace(/[&<>"']/g, c => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c]));
+    }
+
+    // Load metrics
+    async function loadMetrics() {
       try {
-        const health = await getJson('/health');
-        if (health.status === 'ok') setDbStatus('connected');
-        else if (health.checks?.ollama?.status === 'ok') setDbStatus('degraded');
-        else setDbStatus('offline');
-      } catch {
-        setDbStatus('degraded');
+        const bucketMinutes = (selectedHours || 24) * 60;
+        const response = await apiFetch(`${API_BASE}/api/dashboard/request-metrics?bucket_minutes=${bucketMinutes}`);
+        const data = await response.json();
+        if (data.success) {
+          updateMetrics(data.data);
+          lastMetrics = data.data;
+        }
+      } catch (error) {
+        console.error('Failed to load metrics:', error);
       }
     }
 
-    async function loadRequests() {
-      try {
-        const data = await getJson(`/api/dashboard/requests?limit=50&hours=${selectedHours}`);
-        renderRequests(data.data || []);
-      } catch {
-        renderRequests([]);
+    function formatCost(cost) {
+      const c = cost || 0;
+      if (c === 0) return '$0.00';
+      if (c < 0.01) return '$' + c.toFixed(6);
+      if (c < 1) return '$' + c.toFixed(4);
+      return '$' + c.toFixed(2);
+    }
+
+    function updateMetrics(metrics) {
+      document.getElementById('totalRequests').textContent = (metrics.total_requests || 0).toLocaleString();
+      document.getElementById('successRate').innerHTML = ((metrics.success_rate || 0) * 100).toFixed(1) + '<span class="metric-unit">%</span>';
+      document.getElementById('avgLatency').innerHTML = Math.round(metrics.avg_latency || 0) + '<span class="metric-unit">ms</span>';
+      document.getElementById('totalCost').textContent = formatCost(metrics.total_cost);
+      document.getElementById('avgConfidence').innerHTML = (metrics.avg_confidence || 0).toFixed(1) + '<span class="metric-unit">/10</span>';
+      document.getElementById('fallbackPercent').innerHTML = ((metrics.compression_rate || 0) * 100).toFixed(1) + '<span class="metric-unit">%</span>';
+      document.getElementById('requestsChange').textContent = `${(metrics.total_tokens || 0).toLocaleString()} tokens`;
+      document.getElementById('costChange').textContent = `avoided ${formatCost(metrics.estimated_api_cost_avoided)}`;
+      document.getElementById('fallbackChange').textContent = `${(metrics.compression_tokens_saved || 0).toLocaleString()} tokens · ${metrics.compression_operations || 0} ops`;
+
+      if (metrics.top_models?.length) {
+        document.getElementById('topModels').innerHTML = metrics.top_models.map(m => `
+          <div class="chip">
+            <div class="chip-name">${escapeHtml(m.model)}</div>
+            <div class="chip-meta"><span class="num">${m.count}</span> requests</div>
+          </div>
+        `).join('');
+      } else {
+        document.getElementById('topModels').innerHTML = '<div class="empty-state">no model usage yet</div>';
+      }
+
+      if (metrics.top_callers?.length) {
+        document.getElementById('topCallers').innerHTML = metrics.top_callers.map(c => `
+          <div class="chip">
+            <div class="chip-name">${escapeHtml(c.caller)}</div>
+            <div class="chip-meta"><span class="num">${c.count}</span> requests</div>
+          </div>
+        `).join('');
+      } else {
+        document.getElementById('topCallers').innerHTML = '<div class="empty-state">no callers yet</div>';
       }
     }
 
-    async function refreshAll() {
-      await Promise.all([loadTopology(), loadHealth(), loadRequests()]);
-      document.getElementById('fixedStatus').textContent = 'connected';
-      document.getElementById('pollDot').className = 'dot';
+    // Load providers
+    async function loadProviders() {
+      try {
+        const response = await apiFetch(`${API_BASE}/api/dashboard/providers`);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const payload = await response.json();
+        if (!payload.success) throw new Error(payload.error || 'failed');
+        renderProviders(payload.data.grouped);
+        const total = payload.data.summary.totalProviders;
+        const cfg = payload.data.summary.configuredCount;
+        document.getElementById('providersTabBadge').textContent = `${cfg}/${total}`;
+      } catch (error) {
+        const msg = `<div class="empty-state">error: ${error.message}</div>`;
+        document.getElementById('providersList_local').innerHTML = msg;
+        document.getElementById('providersList_subscription').innerHTML = msg;
+        document.getElementById('providersList_free').innerHTML = msg;
+      }
     }
 
-    document.querySelectorAll('[data-hours]').forEach((button) => {
-      button.addEventListener('click', () => {
-        selectedHours = Number(button.dataset.hours || 24);
+    function renderProviders(grouped) {
+      const empty = '<div class="empty-state">none configured</div>';
+      const renderGroup = (id, items) => {
+        const c = document.getElementById(id);
+        c.innerHTML = items?.length ? items.map(renderProviderItem).join('') : empty;
+      };
+      renderGroup('providersList_local', grouped.local);
+      renderGroup('providersList_subscription', grouped.subscription);
+      renderGroup('providersList_free', grouped.free);
+    }
+
+    function renderProviderItem(provider) {
+      const statusClass = provider.status === 'configured' ? 'tag-configured' : 'tag-unconfigured';
+      const modelList = provider.models.map(m => m.id).join(', ');
+      const displayName = provider.label || provider.name;
+      const techName = provider.label && provider.label !== provider.name
+        ? `<div class="provider-tech-name">${provider.name}</div>` : '';
+      const rateLimit = provider.rateLimitRpm > 0
+        ? `<div class="provider-rate">limit: ${provider.rateLimitRpm} req/min</div>` : '';
+      const envHint = provider.status === 'unconfigured' && provider.envKey
+        ? `<div class="provider-env-hint">set <code>${provider.envKey}</code> to activate</div>` : '';
+      const runtimeStatus = provider.runtimeStatus || (provider.status === 'configured' ? 'configured' : '');
+      const runtimeClass = provider.runtimeHealthy ? 'runtime-ready'
+        : runtimeStatus === 'auth_required' || provider.runtimeDetail ? 'runtime-warn'
+        : 'runtime-muted';
+      const runtimeLabel = provider.runtimeDetail
+        ? `${runtimeStatus}: ${provider.runtimeDetail}`
+        : runtimeStatus;
+      const runtime = runtimeLabel
+        ? `<div class="provider-runtime ${runtimeClass}"><span class="runtime-dot"></span><span>${escapeHtml(runtimeLabel)}</span></div>`
+        : '';
+      return `
+        <div class="provider-item" data-status="${provider.status}">
+          <div class="provider-header">
+            <div class="provider-name">${escapeHtml(displayName)}</div>
+            <div class="provider-tag ${statusClass}">${provider.status}</div>
+          </div>
+          ${techName}
+          ${runtime}
+          <div class="provider-models">${escapeHtml(modelList)}</div>
+          ${rateLimit}
+          ${envHint}
+        </div>
+      `;
+    }
+
+    // ─── Subscription Auto-Gateway ────────────────────────────────────────
+    async function loadSubscriptions() {
+      try {
+        const response = await apiFetch(`${API_BASE}/api/dashboard/subscriptions`);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const payload = await response.json();
+        if (!payload.success) throw new Error(payload.error || 'unknown');
+        renderSubscriptions(payload.data);
+      } catch (error) {
+        document.getElementById('subscriptionsList').innerHTML =
+          `<div class="empty-state">discovery failed: ${error.message}</div>`;
+      }
+    }
+
+    function renderSubscriptions(data) {
+      const { subscriptions, summary } = data;
+      const stateEl = document.getElementById('subsAutoState');
+      const parts = [];
+      if (summary.detected) parts.push(`${summary.detected} detected`);
+      if (summary.userDeclared) parts.push(`${summary.userDeclared} declared`);
+      if (summary.running) parts.push(`${summary.running} live`);
+      const headline = summary.autoGatewayEnabled ? 'active' : 'detection + declaration';
+      stateEl.textContent = `${headline} — ${parts.join(' · ') || 'open settings to declare your subscriptions'}`;
+
+      document.getElementById('subsTabBadge').textContent = `${summary.installed}/${summary.total}`;
+
+      const list = document.getElementById('subscriptionsList');
+      if (!subscriptions.length) {
+        list.innerHTML = '<div class="empty-state">no subscriptions in catalog</div>';
+        return;
+      }
+      list.innerHTML = subscriptions.map(renderSubscriptionCard).join('');
+    }
+
+    function renderSubscriptionCard(s) {
+      const available = s.installed;
+      const cardClass = s.bridgeRunning ? 'running' : (available ? 'installed' : 'missing');
+      const stateClass = s.bridgeRunning ? 'running' : (available ? 'installed' : 'missing');
+      let stateLabel;
+      if (s.bridgeRunning) stateLabel = '● bridge live';
+      else if (s.detected && s.userDeclared) stateLabel = '◆ detected+declared';
+      else if (s.detected) stateLabel = '◆ detected';
+      else if (s.userDeclared) stateLabel = '◇ declared';
+      else stateLabel = '○ not configured';
+
+      const versionLine = s.version
+        ? `<div class="subs-meta">${s.command} → ${escapeHtml(s.version)}</div>`
+        : `<div class="subs-meta">${s.command}${s.userDeclared ? ' (declared)' : ''}</div>`;
+      const bridgeBlock = s.bridgeUrl
+        ? `<div class="subs-bridge-url">bridge: ${s.bridgeUrl}${s.autoSpawned ? ' (auto)' : ''}</div>`
+        : '';
+      const modelsLine = s.models?.length
+        ? `<div class="subs-models">${s.models.map(m => m.id).join(', ')}</div>` : '';
+      let hint = '';
+      if (!s.detected && !s.userDeclared) {
+        hint = `<div class="subs-install-hint">install <code>${s.command}</code> on the gateway host, or declare it in settings.</div>`;
+      } else if (!s.detected && s.userDeclared) {
+        hint = `<div class="subs-install-hint" style="color:#6aa0ff;border-color:rgba(106,160,255,0.25);background:rgba(106,160,255,0.05);">declared — use via your local <code>${s.command}</code> CLI. gateway routes through it.</div>`;
+      }
+      return `
+        <div class="subs-card ${cardClass}">
+          <div class="subs-head">
+            <div class="subs-label">${escapeHtml(s.label)}</div>
+            <span class="subs-state ${stateClass}">${stateLabel}</span>
+          </div>
+          ${versionLine}
+          ${modelsLine}
+          ${bridgeBlock}
+          ${hint}
+        </div>
+      `;
+    }
+
+    document.getElementById('subsSpawnBtn').addEventListener('click', async () => {
+      const btn = document.getElementById('subsSpawnBtn');
+      btn.disabled = true;
+      const orig = btn.textContent;
+      btn.textContent = '⟳ spawning…';
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/subscriptions/spawn`, { method: 'POST' });
+        const payload = await res.json();
+        if (!payload.success) throw new Error(payload.error || 'spawn failed');
+        btn.textContent = `✓ ${payload.data.spawnedCount} spawned`;
+        await loadSubscriptions();
+      } catch (e) {
+        btn.textContent = `✗ ${e.message}`;
+      } finally {
+        setTimeout(() => { btn.disabled = false; btn.textContent = orig; }, 2500);
+      }
+    });
+
+    // Polling
+    function setupPolling() {
+      document.getElementById('pollingStatusIndicator').className = 'dot ok';
+      document.getElementById('pollingStatus').textContent = 'live';
+      document.getElementById('connectionDot').className = 'dot';
+      document.getElementById('connectionText').textContent = 'connected';
+
+      if (metricsIntervalId) clearInterval(metricsIntervalId);
+      metricsIntervalId = setInterval(loadMetrics, METRICS_REFRESH_INTERVAL);
+
+      if (requestsIntervalId) clearInterval(requestsIntervalId);
+      requestsIntervalId = setInterval(loadRequests, REQUESTS_REFRESH_INTERVAL);
+
+      loadMetrics();
+      loadRequests();
+    }
+
+    // Filter buttons
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        selectedHours = parseInt(btn.dataset.hours);
         loadRequests();
+        loadMetrics();
       });
     });
 
-    document.getElementById('settingsBtn').addEventListener('click', () => {
-      alert('Settings preview: providers, subscriptions, local models, budgets, memory backend, and OpenAI-compatible base URL.');
+    // ─── Settings Modal ───────────────────────────────────────────────────
+    const SUBSCRIPTION_LABELS = {
+      'claude-code': 'Claude Code (Anthropic)',
+      'github-copilot': 'GitHub / Microsoft Copilot',
+      'chatgpt': 'OpenAI ChatGPT Plus',
+      'gemini': 'Google Gemini Advanced',
+      'codex': 'OpenAI Codex CLI',
+      'aider': 'Aider Pair Programmer',
+    };
+    const API_PROVIDER_LABELS = {
+      'cerebras': { label: 'Cerebras', envKey: 'CEREBRAS_API_KEY', placeholder: 'csk-...' },
+      'groq': { label: 'Groq', envKey: 'GROQ_API_KEY', placeholder: 'gsk_...' },
+      'mistral': { label: 'Mistral AI', envKey: 'MISTRAL_API_KEY', placeholder: 'mistral key' },
+      'nvidia': { label: 'NVIDIA NIM', envKey: 'NVIDIA_API_KEY', placeholder: 'nvapi-...' },
+      'cloudflare': { label: 'Cloudflare Workers AI', envKey: 'CLOUDFLARE_AI_TOKEN', placeholder: 'cf token' },
+      'openai-codex': { label: 'OpenAI API (paid)', envKey: 'OPENAI_API_KEY', placeholder: 'sk-...' },
+    };
+
+    let currentSettings = null;
+    const V2_FORCE_FULL_WORKBENCH = true;
+
+    function openSettings() {
+      document.getElementById('settingsModal').classList.add('open');
+      loadSettingsIntoModal();
+    }
+    function closeSettings() {
+      document.getElementById('settingsModal').classList.remove('open');
+      const ss = document.getElementById('settingsSaveStatus');
+      ss.textContent = ''; ss.className = 'save-status';
+    }
+
+    async function loadSettingsIntoModal() {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/settings`);
+        const payload = await res.json();
+        if (!payload.success) throw new Error(payload.error || 'load failed');
+        currentSettings = payload.data;
+        renderSettingsForm(currentSettings);
+      } catch (e) {
+        const ss = document.getElementById('settingsSaveStatus');
+        ss.textContent = `load error: ${e.message}`;
+        ss.className = 'save-status err';
+      }
+    }
+
+    function renderSettingsForm(s) {
+      document.querySelectorAll('input[name="routingMode"]').forEach(r => {
+        r.checked = (r.value === s.routingMode);
+        r.closest('.settings-radio').classList.toggle('active', r.checked);
+      });
+      document.getElementById('routingModeBadge').textContent = s.routingMode;
+
+      // UI mode toggles
+      const ui = s.ui ?? { simpleMode: false, hideEmptyProviders: false, showTooltips: true };
+      document.getElementById('uiSimpleMode').checked = V2_FORCE_FULL_WORKBENCH ? false : !!ui.simpleMode;
+      document.getElementById('uiHideEmpty').checked = V2_FORCE_FULL_WORKBENCH ? false : !!ui.hideEmptyProviders;
+      document.getElementById('uiTooltips').checked = !!ui.showTooltips;
+
+      const subList = document.getElementById('settingsSubscriptionsList');
+      subList.innerHTML = Object.entries(SUBSCRIPTION_LABELS).map(([id, label]) => {
+        const cfg = s.subscriptions?.[id] ?? { enabled: true, autoSpawn: true, bridgeUrl: '' };
+        const bridgeHint = cfg.bridgeUrl
+          ? `bridge: ${cfg.bridgeUrl}`
+          : 'no bridge URL — set one if the CLI runs on another machine';
+        return `
+          <div class="settings-row">
+            <div class="settings-row-info" style="grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;">
+              <div style="display:flex;flex-direction:column;gap:2px;flex:1;">
+                <span class="settings-row-label">${label}</span>
+                <span class="settings-row-meta">id: ${id} · ${bridgeHint}</span>
+                <input class="settings-input" type="text" data-sub-bridge="${id}" placeholder="https://your-bridge-host:port (leave blank for local auto-spawn)" value="${cfg.bridgeUrl || ''}">
+              </div>
+              <label class="settings-toggle" style="flex-shrink:0;">
+                <input type="checkbox" data-sub="${id}" ${cfg.enabled ? 'checked' : ''}>
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+        `;
+      }).join('');
+
+      const apiList = document.getElementById('settingsApiList');
+      apiList.innerHTML = Object.entries(API_PROVIDER_LABELS).map(([id, info]) => {
+        const cfg = s.apiProviders?.[id] ?? { enabled: false, hasKey: false };
+        const placeholder = cfg.hasKey ? '••••••• (key on file — leave blank to keep)' : info.placeholder;
+        return `
+          <div class="settings-row">
+            <div class="settings-row-info" style="grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;">
+              <div style="display:flex;flex-direction:column;gap:2px;flex:1;">
+                <span class="settings-row-label">${info.label}</span>
+                <span class="settings-row-meta">${info.envKey} · ${cfg.hasKey ? '✓ key set' : 'no key'}</span>
+                <input class="settings-input" type="password" data-api-key="${id}" placeholder="${placeholder}" autocomplete="new-password">
+              </div>
+              <label class="settings-toggle" style="flex-shrink:0;">
+                <input type="checkbox" data-api-enabled="${id}" ${cfg.enabled ? 'checked' : ''}>
+                <span class="slider"></span>
+              </label>
+            </div>
+          </div>
+        `;
+      }).join('');
+
+      document.getElementById('ollamaEnabled').checked = !!s.ollama?.enabled;
+      document.getElementById('ollamaBaseUrl').value = s.ollama?.baseUrl ?? 'http://localhost:11434';
+    }
+
+    async function saveSettingsFromModal() {
+      const ss = document.getElementById('settingsSaveStatus');
+      const saveBtn = document.getElementById('settingsSave');
+      saveBtn.disabled = true;
+      ss.textContent = 'saving…'; ss.className = 'save-status';
+
+      try {
+        const routingMode = document.querySelector('input[name="routingMode"]:checked')?.value ?? 'auto';
+
+        const subscriptions = {};
+        document.querySelectorAll('[data-sub]').forEach(cb => {
+          const id = cb.dataset.sub;
+          const bridgeInput = document.querySelector(`[data-sub-bridge="${id}"]`);
+          const bridgeUrl = bridgeInput?.value?.trim() ?? '';
+          subscriptions[id] = {
+            enabled: cb.checked,
+            autoSpawn: currentSettings?.subscriptions?.[id]?.autoSpawn ?? true,
+            bridgeUrl: bridgeUrl, // empty string = no remote bridge, fall back to local auto-spawn
+          };
+        });
+
+        const apiProviders = {};
+        Object.keys(API_PROVIDER_LABELS).forEach(id => {
+          const enabled = document.querySelector(`[data-api-enabled="${id}"]`)?.checked ?? false;
+          const newKey = document.querySelector(`[data-api-key="${id}"]`)?.value ?? '';
+          const entry = { enabled };
+          if (newKey.trim()) entry.apiKey = newKey.trim();
+          apiProviders[id] = entry;
+        });
+
+        const ollama = {
+          enabled: document.getElementById('ollamaEnabled').checked,
+          baseUrl: document.getElementById('ollamaBaseUrl').value.trim() || 'http://localhost:11434',
+        };
+
+        const ui = {
+          simpleMode: V2_FORCE_FULL_WORKBENCH ? false : document.getElementById('uiSimpleMode').checked,
+          hideEmptyProviders: V2_FORCE_FULL_WORKBENCH ? false : document.getElementById('uiHideEmpty').checked,
+          showTooltips: document.getElementById('uiTooltips').checked,
+        };
+
+        const res = await apiFetch(`${API_BASE}/api/dashboard/settings`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ routingMode, subscriptions, apiProviders, ollama, ui }),
+        });
+        const payload = await res.json();
+        if (!payload.success) throw new Error(payload.error || `HTTP ${res.status}`);
+        currentSettings = payload.data;
+        document.getElementById('routingModeBadge').textContent = payload.data.routingMode;
+        ss.textContent = `saved · ${new Date().toLocaleTimeString()}`;
+        ss.className = 'save-status ok';
+        applyUiMode(ui);
+        await loadProviders();
+        await loadSubscriptions();
+      } catch (e) {
+        ss.textContent = `error: ${e.message}`;
+        ss.className = 'save-status err';
+      } finally {
+        saveBtn.disabled = false;
+      }
+    }
+
+    document.getElementById('settingsBtn').addEventListener('click', openSettings);
+    document.getElementById('settingsClose').addEventListener('click', closeSettings);
+    document.getElementById('settingsCancel').addEventListener('click', closeSettings);
+    document.getElementById('settingsSave').addEventListener('click', saveSettingsFromModal);
+    document.getElementById('settingsModal').addEventListener('click', (e) => {
+      if (e.target.id === 'settingsModal') closeSettings();
+    });
+    document.querySelectorAll('input[name="routingMode"]').forEach(r => {
+      r.addEventListener('change', () => {
+        document.querySelectorAll('.settings-radio').forEach(label => {
+          label.classList.toggle('active', label.querySelector('input').checked);
+        });
+      });
+    });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSettings(); });
+
+    // ─── Savings Tab ─────────────────────────────────────────────────────
+    async function loadSavings() {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/savings?hours=24&bucket_minutes=60`);
+        const payload = await res.json();
+        if (!payload.success) throw new Error(payload.error || 'load failed');
+        renderSavings(payload.data);
+      } catch (e) {
+        document.getElementById('savingsCounter').textContent = '$—';
+        document.getElementById('savingsSubLine').textContent = `error: ${e.message}`;
+      }
+    }
+
+    function renderSavings(data) {
+      const s = data.savings;
+      const series = data.series || [];
+
+      const counter = document.getElementById('savingsCounter');
+      counter.textContent = formatCost(s.totalCostSaved);
+
+      document.getElementById('savingsSubLine').textContent =
+        `${formatNumber(s.totalTokensSaved)} tokens prevented · ${s.totalHits} cache hits`;
+      document.getElementById('savingsHitRate').textContent = `hit rate ${s.hitRatePercent}%`;
+
+      document.getElementById('cacheEntries').textContent = formatNumber(s.uniqueEntries);
+      document.getElementById('tokensPrevented').textContent = formatNumber(s.totalTokensSaved);
+      document.getElementById('cacheHitRate').innerHTML = s.hitRatePercent.toFixed(1) + '<span class="metric-unit">%</span>';
+
+      // Tab badge
+      document.getElementById('savingsTabBadge').textContent = s.totalHits > 0 ? formatCost(s.totalCostSaved) : '·';
+
+      // Top callers
+      const tc = document.getElementById('topSavingCallers');
+      if (s.topCallers && s.topCallers.length) {
+        tc.innerHTML = s.topCallers.map(c => `
+          <div class="chip">
+            <div class="chip-name">${escapeHtml(c.caller)}</div>
+            <div class="chip-meta"><span class="num">${c.hits}</span> hits · <span class="num">${formatCost(c.saved)}</span> saved</div>
+          </div>
+        `).join('');
+      } else {
+        tc.innerHTML = '<div class="empty-state">no savings yet — send some duplicate prompts to see cache hits</div>';
+      }
+
+      // Sparkline
+      const svg = document.getElementById('savingsSparkline');
+      if (!series.length) { svg.innerHTML = ''; return; }
+      const W = 320, H = 64, PAD = 4;
+      const max = Math.max(0.0001, ...series.map(p => p.costSaved));
+      const stepX = (W - PAD * 2) / Math.max(1, series.length - 1);
+      const points = series.map((p, i) => {
+        const x = PAD + i * stepX;
+        const y = H - PAD - ((p.costSaved / max) * (H - PAD * 2));
+        return [x, y];
+      });
+      const linePath = points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+      const areaPath = `${linePath} L${points[points.length - 1][0].toFixed(1)},${H - PAD} L${points[0][0].toFixed(1)},${H - PAD} Z`;
+      const last = points[points.length - 1];
+      svg.innerHTML = `
+        <path class="area" d="${areaPath}"></path>
+        <path class="line" d="${linePath}"></path>
+        <circle class="last" cx="${last[0].toFixed(1)}" cy="${last[1].toFixed(1)}" r="2.5"></circle>
+      `;
+    }
+
+    document.getElementById('cacheClearBtn').addEventListener('click', async () => {
+      const caller = document.getElementById('cacheClearCaller').value.trim();
+      if (!caller) return alert('enter caller id');
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/cache/clear`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ caller }),
+        });
+        const p = await res.json();
+        alert(p.success ? `removed ${p.data.removed} entries` : p.error);
+        loadSavings();
+      } catch (e) { alert('error: ' + e.message); }
     });
 
-    refreshAll().catch(() => {
-      document.getElementById('fixedStatus').textContent = 'degraded';
-      document.getElementById('pollDot').className = 'dot warn';
+    document.getElementById('cachePruneBtn').addEventListener('click', async () => {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/cache/prune`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ max_age_days: 7 }),
+        });
+        const p = await res.json();
+        alert(p.success ? `pruned ${p.data.removed} stale entries` : p.error);
+        loadSavings();
+      } catch (e) { alert('error: ' + e.message); }
     });
-    setInterval(refreshAll, 15000);
+
+    // ─── Wallet Tab (UNIQUE feature) ─────────────────────────────────────
+    async function loadWallet() {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/wallet`);
+        const payload = await res.json();
+        if (!payload.success) throw new Error(payload.error || 'load failed');
+        renderWallet(payload.data);
+      } catch (e) {
+        document.getElementById('walletList').innerHTML =
+          `<div class="empty-state">error: ${e.message}</div>`;
+      }
+    }
+
+    function renderWallet(data) {
+      const list = document.getElementById('walletList');
+      if (!data.wallet?.length) { list.innerHTML = '<div class="empty-state">no subscriptions tracked</div>'; return; }
+
+      const totalRem = data.totals?.remaining ?? 0;
+      // Show units to avoid confusion with token counts elsewhere
+      document.getElementById('walletTabBadge').textContent = totalRem > 0 ? `${formatNumber(totalRem)} calls` : '·';
+
+      list.innerHTML = data.wallet.map(w => {
+        const util = w.utilizationPercent ?? 0;
+        const fillCls = util >= 90 ? 'err' : util >= 70 ? 'warn' : '';
+        const fillW = w.requestQuota ? Math.min(util, 100) : 0;
+        const remStr = w.requestQuota
+          ? `<strong>${w.remaining}</strong> / ${w.requestQuota} calls left`
+          : `<strong>—</strong> no quota tracked`;
+        const usedStr = `<strong>${w.used}</strong> calls used`;
+        const reset = w.resetAt
+          ? `resets ${new Date(w.resetAt).toLocaleString()}`
+          : `window: ${formatDuration(w.windowSeconds)}`;
+        const exhaust = w.predictedExhaustionAt
+          ? `predicted exhaustion: ${new Date(w.predictedExhaustionAt).toLocaleString()}`
+          : '';
+        return `
+          <div class="wallet-card" data-status="${w.recommendation}">
+            <div class="wallet-head">
+              <div class="wallet-label">${escapeHtml(w.label)}</div>
+              <div class="wallet-rec ${w.recommendation}">${w.recommendation.replace('-', ' ')}</div>
+            </div>
+            <div class="wallet-bar">
+              <div class="wallet-bar-fill ${fillCls}" style="width:${fillW}%"></div>
+            </div>
+            <div class="wallet-meta">
+              <span>${usedStr}</span>
+              <span>${remStr}</span>
+            </div>
+            <div class="wallet-reset">${reset}</div>
+            ${exhaust ? `<div class="wallet-reset">${exhaust}</div>` : ''}
+          </div>
+        `;
+      }).join('');
+    }
+
+    function formatDuration(secs) {
+      if (secs >= 86400) return `${Math.round(secs / 86400)}d`;
+      if (secs >= 3600) return `${Math.round(secs / 3600)}h`;
+      if (secs >= 60) return `${Math.round(secs / 60)}m`;
+      return `${secs}s`;
+    }
+
+    // ─── Memory Tab ──────────────────────────────────────────────────────
+    async function loadMemoryFor(caller) {
+      if (!caller) return;
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/memory/${encodeURIComponent(caller)}`);
+        const p = await res.json();
+        if (!p.success) throw new Error(p.error || 'load failed');
+        renderMemory(p.data);
+      } catch (e) {
+        document.getElementById('memList').innerHTML = `<div class="empty-state">error: ${e.message}</div>`;
+      }
+    }
+
+    function renderMemory(data) {
+      const list = document.getElementById('memList');
+      if (!data.facts?.length) { list.innerHTML = `<div class="empty-state">no facts stored for "${escapeHtml(data.caller)}"</div>`; return; }
+      list.innerHTML = data.facts.map(f => `
+        <div class="mem-row">
+          <div class="mem-key">${escapeHtml(f.factKey)}</div>
+          <div class="mem-val">${escapeHtml(f.factValue)}</div>
+          <div class="mem-meta">conf=${f.confidence} · ${escapeHtml(f.source)}</div>
+        </div>
+      `).join('');
+    }
+
+    document.getElementById('memLoadBtn').addEventListener('click', () => {
+      loadMemoryFor(document.getElementById('memCaller').value.trim());
+    });
+
+    document.getElementById('memSaveBtn').addEventListener('click', async () => {
+      const caller = document.getElementById('memCaller').value.trim();
+      const fk = document.getElementById('memFactKey').value.trim();
+      const fv = document.getElementById('memFactValue').value.trim();
+      if (!caller || !fk || !fv) return alert('fill caller, key, value');
+      try {
+        await apiFetch(`${API_BASE}/api/dashboard/memory/${encodeURIComponent(caller)}`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ fact_key: fk, fact_value: fv, confidence: 0.95 }),
+        });
+        document.getElementById('memFactKey').value = '';
+        document.getElementById('memFactValue').value = '';
+        loadMemoryFor(caller);
+      } catch (e) { alert('error: ' + e.message); }
+    });
+
+    // Auto-refresh savings + wallet every 10s when their tab is visible
+    setInterval(() => {
+      const active = document.querySelector('.tab-trigger.active')?.dataset.tab;
+      if (active === 'savings') loadSavings();
+      if (active === 'wallet') loadWallet();
+    }, 10_000);
+
+    // Hook tab switches to lazy-load tab data
+    document.querySelectorAll('.tab-trigger').forEach(t => {
+      t.addEventListener('click', () => {
+        const target = t.dataset.tab;
+        if (target === 'savings') loadSavings();
+        if (target === 'wallet') loadWallet();
+      });
+    });
+
+    // ─── Hero / Buddy / Achievements / Heatmap / Events / Forecast ──────
+    async function loadHero() {
+      try {
+        const [buddy, ach, heatmap, events, forecast, savings] = await Promise.all([
+          apiFetch(`${API_BASE}/api/dashboard/buddy`).then(r => r.json()),
+          apiFetch(`${API_BASE}/api/dashboard/achievements`).then(r => r.json()),
+          apiFetch(`${API_BASE}/api/dashboard/heatmap?days=365`).then(r => r.json()),
+          apiFetch(`${API_BASE}/api/dashboard/events?limit=30`).then(r => r.json()),
+          apiFetch(`${API_BASE}/api/dashboard/forecast`).then(r => r.json()),
+          apiFetch(`${API_BASE}/api/dashboard/savings?hours=8760`).then(r => r.json()),
+        ]);
+        if (buddy.success) renderBuddy(buddy.data);
+        if (ach.success) renderAchievements(ach.data);
+        if (heatmap.success) renderHeatmap(heatmap.data);
+        if (events.success) renderEventsFeed(events.data);
+        if (forecast.success) renderForecast(forecast.data);
+        if (savings.success) renderHeroSavings(savings.data);
+      } catch (e) {
+        console.error('hero load failed', e);
+      }
+    }
+
+    function renderBuddy(b) {
+      const xpPercent = Math.min(100, (b.xp / b.xpForNextLevel) * 100);
+      document.getElementById('heroBuddy').innerHTML = `
+        <div>
+          <span class="buddy-name">${escapeHtml(b.name)}</span>
+          <span class="buddy-rarity ${b.rarity}">${b.rarity}</span>
+        </div>
+        <div class="buddy-meta">${escapeHtml(b.species)} · ${escapeHtml(b.stage)} · Lv.${b.level} · ${b.streakDays}d streak</div>
+        <div class="buddy-art">${b.asciiArt.map(escapeHtml).join('\n')}</div>
+        <div class="buddy-xp-bar"><div class="buddy-xp-fill" style="width:${xpPercent}%"></div></div>
+        <div class="buddy-xp-text"><span>XP ${b.xp.toLocaleString()}</span><span>Next: ${b.xpForNextLevel.toLocaleString()}</span></div>
+        <div class="buddy-speech buddy-mood-${b.mood}">${escapeHtml(b.speech)}</div>
+      `;
+    }
+
+    // Try to fetch Lean-CTX stats from localhost:3333 (browser-side, not server-side)
+    // Returns null if Lean-CTX not running OR dashboard browsed from different machine.
+    async function fetchLeanCtxStats() {
+      try {
+        const ctrl = new AbortController();
+        setTimeout(() => ctrl.abort(), 1500);
+        const res = await fetch('http://localhost:3333/api/stats', { signal: ctrl.signal });
+        if (!res.ok) return null;
+        const stats = await res.json();
+        // The "tokens saved" calculation: input - output (compression delta) summed across commands
+        let saved = 0;
+        for (const v of Object.values(stats.commands || {})) {
+          saved += Math.max(0, (v.input_tokens || 0) - (v.output_tokens || 0));
+        }
+        return { saved, totalCommands: stats.total_commands || 0 };
+      } catch { return null; }
+    }
+
+    async function renderHeroSavings(d) {
+      const s = d.savings;
+      const c = s.comprehensive || {};
+      const gatewayTokens = s.totalTokensSaved || 0;
+      document.getElementById('heroTokensSaved').textContent = formatNumber(gatewayTokens);
+      document.getElementById('heroCostSaved').textContent = formatCost(s.totalCostSaved);
+      document.getElementById('heroCacheHits').textContent = s.totalHits;
+      document.getElementById('heroSavingsRate').textContent = `${s.hitRatePercent || 0}%`;
+
+      // Lean-CTX integration: pull from localhost:3333 if available
+      const leanCtx = await fetchLeanCtxStats();
+      const combined = gatewayTokens + (leanCtx?.saved || 0);
+      document.getElementById('heroTokensSavedCombined').textContent = formatNumber(combined);
+      if (leanCtx) {
+        document.getElementById('heroLeanCtxRow').style.display = 'flex';
+        document.getElementById('heroLeanCtxTokens').textContent = formatNumber(leanCtx.saved);
+      } else {
+        document.getElementById('heroLeanCtxRow').style.display = 'none';
+      }
+      document.getElementById('costWithout').textContent = formatCost(c.costWithoutGateway || 0);
+      document.getElementById('costWith').textContent = formatCost(c.costWithGateway || 0);
+      const saved = (c.costWithoutGateway || 0) - (c.costWithGateway || 0);
+      document.getElementById('costSavedLine').textContent = formatCost(saved);
+      document.getElementById('costSavedPercent').textContent = `${(c.effectiveSavingsPercent || 0).toFixed(1)}%`;
+
+      // 5-axis savings
+      const axes = [
+        { id: 'cache',              label: 'Cache',           icon: '⚡', cost: c.bySource?.cache?.cost ?? 0,            detail: `${c.bySource?.cache?.hits ?? 0} hits` },
+        { id: 'compression',        label: 'Compression',     icon: '🗜', cost: c.bySource?.compression?.cost ?? 0,      detail: `${formatNumber(c.bySource?.compression?.tokens ?? 0)} tokens` },
+        { id: 'subscriptionBridge', label: 'Sub. Bridges',    icon: '🌉', cost: c.bySource?.subscriptionBridge?.cost ?? 0, detail: `${c.bySource?.subscriptionBridge?.calls ?? 0} calls` },
+        { id: 'localRouting',       label: 'Local Models',    icon: '🏠', cost: c.bySource?.localRouting?.cost ?? 0,      detail: `${c.bySource?.localRouting?.calls ?? 0} calls` },
+        { id: 'raceMode',           label: 'Race Mode',       icon: '🏁', cost: c.bySource?.raceMode?.cost ?? 0,           detail: `${c.bySource?.raceMode?.calls ?? 0} races` },
+      ];
+      document.getElementById('savingsAxes').innerHTML = axes.map(a => `
+        <div class="axis">
+          <span class="axis-icon">${a.icon}</span>
+          <span class="axis-label">${a.label}</span>
+          <span class="axis-cost">${formatCost(a.cost)}</span>
+          <span class="axis-detail">${a.detail}</span>
+        </div>
+      `).join('');
+    }
+
+    function renderAchievements(a) {
+      document.getElementById('achievementsProgress').textContent = `${a.unlocked.length}/${a.unlocked.length + a.locked.length} · ${a.progress}%`;
+      const all = [...a.unlocked.map(x => ({...x, unlocked: true})), ...a.locked.slice(0, 12).map(x => ({...x, unlocked: false}))];
+      document.getElementById('achievementsGrid').innerHTML = all.map(x => `
+        <div class="achievement ${x.unlocked ? 'unlocked' : 'locked'}">
+          <div class="ach-icon">${x.icon}</div>
+          <div class="ach-info">
+            <div class="ach-title">${escapeHtml(x.title)}</div>
+            <div class="ach-desc">${escapeHtml(x.description)}</div>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function renderHeatmap(cells) {
+      // Lay out cells column-major (Sun→Sat per week column, like GitHub)
+      // Total 365 days = ~52 weeks of 7 cells. Pad start so first cell aligns to Sunday.
+      if (!cells.length) { document.getElementById('heatmap').innerHTML = '<div class="empty-state">no activity yet</div>'; return; }
+      const first = new Date(cells[0].date);
+      const padDays = first.getUTCDay(); // 0=Sun, 6=Sat
+      const padded = Array(padDays).fill(null).concat(cells);
+      let maxStreak = 0;
+      let curStreak = 0;
+      for (const c of cells) {
+        if (c && c.count > 0) { curStreak++; if (curStreak > maxStreak) maxStreak = curStreak; }
+        else curStreak = 0;
+      }
+      // Latest streak from end
+      let endStreak = 0;
+      for (let i = cells.length - 1; i >= 0; i--) {
+        if (cells[i].count > 0) endStreak++; else break;
+      }
+      document.getElementById('streakBadge').textContent = endStreak;
+
+      document.getElementById('heatmap').innerHTML = padded.map(c => {
+        if (!c) return '<div class="heatmap-cell"></div>';
+        const title = `${c.date}: ${c.count} req · ${c.tokensSaved} saved`;
+        return `<div class="heatmap-cell l${c.level}" title="${title}"></div>`;
+      }).join('');
+    }
+
+    function renderEventsFeed(events) {
+      const el = document.getElementById('eventsFeed');
+      if (!events.length) { el.innerHTML = '<div class="empty-state">no events yet</div>'; return; }
+      el.innerHTML = events.map(e => `
+        <div class="event-row">
+          <span class="event-icon">${e.icon}</span>
+          <div class="event-body">
+            <span class="event-caller">${escapeHtml(e.caller)}</span> · ${escapeHtml(e.type)}
+            <div class="event-detail">${escapeHtml(e.detail)}</div>
+          </div>
+          <span class="event-time">${formatTime(e.ts)}</span>
+        </div>
+      `).join('');
+    }
+
+    function renderForecast(f) {
+      const trendIcon = f.trend === 'up' ? '↗' : (f.trend === 'down' ? '↘' : '→');
+      document.getElementById('forecast').innerHTML = `
+        <div class="forecast-row"><span class="forecast-window">next 7 days</span><span class="forecast-amount">${formatCost(f.next7DaysSavings)}</span></div>
+        <div class="forecast-row"><span class="forecast-window">next 30 days</span><span class="forecast-amount">${formatCost(f.next30DaysSavings)}</span></div>
+        <div class="forecast-row"><span class="forecast-window">next 12 months</span><span class="forecast-amount">${formatCost(f.next365DaysSavings)}</span></div>
+        <div class="forecast-trend ${f.trend}">${trendIcon} trend ${f.trend} · daily avg ${formatCost(f.dailyAverage)} · ${f.basedOnDays}d data</div>
+      `;
+    }
+
+    function formatTime(iso) {
+      try {
+        const d = new Date(iso);
+        const now = new Date();
+        const diffMs = now - d;
+        if (diffMs < 60_000) return 'just now';
+        if (diffMs < 3600_000) return `${Math.floor(diffMs/60000)}m ago`;
+        if (diffMs < 86400_000) return `${Math.floor(diffMs/3600000)}h ago`;
+        return d.toISOString().split('T')[0];
+      } catch { return iso; }
+    }
+
+    // ─── Simple Mode application ─────────────────────────────────────────
+    // Hide tabs / sections / content based on the user's UI preferences.
+    // Defaults to Simple Mode = ON for users with few configured subscriptions.
+    const ADVANCED_TABS_TO_HIDE_IN_SIMPLE = ['providers', 'memory', 'leaderboard', 'share', 'report'];
+
+    function applyUiMode(ui) {
+      const simpleMode = V2_FORCE_FULL_WORKBENCH ? false : !!ui?.simpleMode;
+      const hideEmpty  = V2_FORCE_FULL_WORKBENCH ? false : !!ui?.hideEmptyProviders;
+      const tooltips   = !!ui?.showTooltips;
+
+      // 1) Hide advanced tabs in Simple Mode
+      document.querySelectorAll('.tab-trigger').forEach(t => {
+        const isAdvanced = ADVANCED_TABS_TO_HIDE_IN_SIMPLE.includes(t.dataset.tab);
+        t.style.display = (simpleMode && isAdvanced) ? 'none' : '';
+      });
+
+      // 2) Toggle tooltip attribute
+      document.querySelectorAll('.tab-trigger').forEach(t => {
+        if (!tooltips && t.title) { t.dataset.savedTitle = t.title; t.title = ''; }
+        else if (tooltips && t.dataset.savedTitle) { t.title = t.dataset.savedTitle; }
+      });
+
+      // 3) Body class — used by other CSS-driven simplifications
+      document.body.classList.toggle('simple-mode', simpleMode);
+      document.body.classList.toggle('hide-empty-providers', hideEmpty);
+
+      // 4) If currently on a hidden tab, switch to overview
+      const activeTab = document.querySelector('.tab-trigger.active')?.dataset.tab;
+      if (simpleMode && ADVANCED_TABS_TO_HIDE_IN_SIMPLE.includes(activeTab)) {
+        const overview = document.querySelector('.tab-trigger[data-tab="overview"]');
+        if (overview) overview.click();
+      }
+    }
+
+    // ─── Knowledge Graph (force-directed SVG, no D3 dep) ──────────────
+    async function loadMemoryGraph() {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/memory-graph`);
+        const p = await res.json();
+        if (!p.success) throw new Error(p.error || 'graph failed');
+        renderMemoryGraph(p.data);
+      } catch (e) {
+        document.getElementById('memoryGraph').innerHTML = `<text x="20" y="40" fill="#888">error: ${e.message}</text>`;
+      }
+    }
+
+    function renderMemoryGraph(g) {
+      const svg = document.getElementById('memoryGraph');
+      if (!g.nodes.length) {
+        svg.innerHTML = '<text x="440" y="230" text-anchor="middle" font-family="JetBrains Mono" font-size="14" fill="#667684">No facts stored yet — try `remember that …` in any caller</text>';
+        return;
+      }
+
+      // Simple force-directed layout: 60 iterations of attraction along edges + repulsion between all nodes
+      const W = 880, H = 460;
+      const nodes = g.nodes.map((n, i) => ({
+        ...n,
+        x: W/2 + Math.cos(i * 2 * Math.PI / g.nodes.length) * 200,
+        y: H/2 + Math.sin(i * 2 * Math.PI / g.nodes.length) * 150,
+        r: n.type === 'caller' ? 14 : (n.type === 'fact-key' ? 9 : 6),
+      }));
+      const idx = new Map(nodes.map(n => [n.id, n]));
+
+      for (let it = 0; it < 80; it++) {
+        // repulsion
+        for (let i = 0; i < nodes.length; i++) {
+          for (let j = i+1; j < nodes.length; j++) {
+            const a = nodes[i], b = nodes[j];
+            const dx = b.x - a.x, dy = b.y - a.y;
+            const d2 = dx*dx + dy*dy + 1;
+            const f = 1500 / d2;
+            const fx = (dx / Math.sqrt(d2)) * f;
+            const fy = (dy / Math.sqrt(d2)) * f;
+            a.x -= fx; a.y -= fy;
+            b.x += fx; b.y += fy;
+          }
+        }
+        // attraction along edges
+        for (const e of g.edges) {
+          const a = idx.get(e.source), b = idx.get(e.target);
+          if (!a || !b) continue;
+          const dx = b.x - a.x, dy = b.y - a.y;
+          const f = 0.04;
+          a.x += dx * f; a.y += dy * f;
+          b.x -= dx * f; b.y -= dy * f;
+        }
+        // boundary
+        for (const n of nodes) {
+          n.x = Math.max(20, Math.min(W-20, n.x));
+          n.y = Math.max(20, Math.min(H-20, n.y));
+        }
+      }
+
+      // Render edges + nodes
+      const edgeSvg = g.edges.map(e => {
+        const a = idx.get(e.source), b = idx.get(e.target);
+        if (!a || !b) return '';
+        return `<path class="edge" d="M ${a.x.toFixed(1)} ${a.y.toFixed(1)} L ${b.x.toFixed(1)} ${b.y.toFixed(1)}"/>`;
+      }).join('');
+
+      const nodeSvg = nodes.map(n => {
+        const cls = n.type === 'caller' ? 'node-caller' : (n.type === 'fact-key' ? 'node-fact-key' : 'node-fact-value');
+        const labelOffset = n.r + 12;
+        return `
+          <g class="node">
+            <title>${escapeHtml(n.label)} (${n.type})</title>
+            <circle cx="${n.x.toFixed(1)}" cy="${n.y.toFixed(1)}" r="${n.r}" class="${cls}"/>
+            ${n.type === 'caller' ? `<text class="label" x="${n.x.toFixed(1)}" y="${(n.y+labelOffset).toFixed(1)}" text-anchor="middle">${escapeHtml(n.label)}</text>` : ''}
+          </g>`;
+      }).join('');
+
+      svg.innerHTML = edgeSvg + nodeSvg;
+    }
+
+    // ─── Race Leaderboard ───────────────────────────────────────────────
+    async function loadLeaderboard() {
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/race-leaderboard?days=7`);
+        const p = await res.json();
+        if (!p.success) throw new Error(p.error || 'leaderboard failed');
+        renderLeaderboard(p.data);
+      } catch (e) {
+        document.getElementById('leaderboardTable').innerHTML = `<div class="empty-state">error: ${e.message}</div>`;
+      }
+    }
+
+    function renderLeaderboard(d) {
+      document.getElementById('leaderboardTabBadge').textContent = d.totalRaces > 0 ? `${d.totalRaces}` : '·';
+
+      // Podium
+      const top3 = d.entries.slice(0, 3);
+      const podium = document.getElementById('leaderboardPodium');
+      if (top3.length === 0) {
+        podium.innerHTML = '<div class="empty-state" style="grid-column:1/-1;">no races run yet — POST /v1/race to start competing models</div>';
+      } else {
+        const slots = [];
+        const findByBadge = (badge) => top3.find(e => e.badge === badge);
+        const gold = findByBadge('gold');
+        const silver = findByBadge('silver');
+        const bronze = findByBadge('bronze');
+        if (silver) slots.push(`<div class="podium-step silver"><div class="podium-medal">🥈</div><div class="podium-rank">2nd</div><div class="podium-model">${escapeHtml(silver.model)}</div><div class="podium-stat">${silver.avgLatencyMs}ms · ${(silver.winRate*100).toFixed(0)}% win</div></div>`);
+        else slots.push('<div></div>');
+        if (gold)   slots.push(`<div class="podium-step gold"><div class="podium-medal">🥇</div><div class="podium-rank">1st</div><div class="podium-model">${escapeHtml(gold.model)}</div><div class="podium-stat">${gold.avgLatencyMs}ms · ${(gold.winRate*100).toFixed(0)}% win</div></div>`);
+        else slots.push('<div></div>');
+        if (bronze) slots.push(`<div class="podium-step bronze"><div class="podium-medal">🥉</div><div class="podium-rank">3rd</div><div class="podium-model">${escapeHtml(bronze.model)}</div><div class="podium-stat">${bronze.avgLatencyMs}ms · ${(bronze.winRate*100).toFixed(0)}% win</div></div>`);
+        else slots.push('<div></div>');
+        podium.innerHTML = slots.join('');
+      }
+
+      // Full table
+      const tbl = document.getElementById('leaderboardTable');
+      const head = `
+        <div class="lb-row head">
+          <div>#</div><div>model</div><div class="lb-num">latency</div>
+          <div class="lb-num">speed</div><div class="lb-num">wins</div><div class="lb-num">races</div>
+        </div>`;
+      const rows = d.entries.map(e => `
+        <div class="lb-row ${e.badge ? 'medal-' + e.badge : ''}">
+          <div class="lb-pos">${e.rankPosition}</div>
+          <div>${escapeHtml(e.model)}</div>
+          <div class="lb-num">${e.avgLatencyMs}ms</div>
+          <div class="lb-num">${(e.speedRate*100).toFixed(0)}%</div>
+          <div class="lb-num">${e.selectedCount}</div>
+          <div class="lb-num">${e.participations}</div>
+        </div>
+      `).join('');
+      tbl.innerHTML = head + (d.entries.length === 0 ? '<div class="empty-state">no race results yet</div>' : rows);
+    }
+
+    // ─── Per-Caller Deep Dive ──────────────────────────────────────────
+    async function openCallerDeepDive(caller) {
+      document.getElementById('callerModal').classList.add('open');
+      document.getElementById('callerModalTitle').textContent = caller;
+      document.getElementById('callerModalBody').innerHTML = '<div class="loading">loading</div>';
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/caller/${encodeURIComponent(caller)}`);
+        const p = await res.json();
+        if (!p.success) throw new Error(p.error || 'load failed');
+        renderCallerDeepDive(p.data);
+      } catch (e) {
+        document.getElementById('callerModalBody').innerHTML = `<div class="empty-state">error: ${e.message}</div>`;
+      }
+    }
+
+    function renderCallerDeepDive(d) {
+      const maxHourly = Math.max(1, ...d.hourlyHeatmap.map(h => h.count));
+      document.getElementById('callerModalBody').innerHTML = `
+        <div class="caller-summary">
+          <div><div class="label">requests</div><div class="val">${formatNumber(d.totalRequests)}</div></div>
+          <div><div class="label">success rate</div><div class="val">${(d.successRate*100).toFixed(1)}%</div></div>
+          <div><div class="label">avg latency</div><div class="val">${d.avgLatencyMs}ms</div></div>
+          <div><div class="label">p50 / p95</div><div class="val">${d.latencyP50}/${d.latencyP95}ms</div></div>
+          <div><div class="label">tokens (in→out)</div><div class="val">${formatNumber(d.totalTokensIn)} → ${formatNumber(d.totalTokensOut)}</div></div>
+          <div><div class="label">total cost</div><div class="val">${formatCost(d.totalCost)}</div></div>
+          <div><div class="label">cache hits</div><div class="val">${d.cacheHits}</div></div>
+          <div><div class="label">tokens saved</div><div class="val">${formatNumber(d.cacheTokensSaved)}</div></div>
+        </div>
+
+        <h2 class="h-section" style="margin-top:18px;">Activity by hour <span class="h-meta">last 7 days, UTC</span></h2>
+        <div class="caller-hour-bars">
+          ${d.hourlyHeatmap.map(h => `<div class="bar" title="${h.hour}:00 — ${h.count} req" style="height:${(h.count/maxHourly*100).toFixed(0)}%;"></div>`).join('')}
+        </div>
+        <div class="caller-hour-axis">
+          ${d.hourlyHeatmap.map(h => h.hour % 4 === 0 ? `<span>${h.hour}h</span>` : '<span></span>').join('')}
+        </div>
+
+        <h2 class="h-section" style="margin-top:18px;">Top Models</h2>
+        <div class="chip-grid">
+          ${d.topModels.map(m => `
+            <div class="chip" style="cursor:default;">
+              <div class="chip-name">${escapeHtml(m.model)}</div>
+              <div class="chip-meta"><span class="num">${m.count}</span> · ${m.share}%</div>
+            </div>
+          `).join('')}
+        </div>
+
+        <h2 class="h-section" style="margin-top:18px;">Recent Requests</h2>
+        <div class="req-table" style="font-size: 0.74rem;">
+          <div class="req-row head">
+            <div>id</div><div>model</div><div>status</div><div>tok in</div><div>tok out</div><div>cost</div><div>latency</div>
+          </div>
+          ${d.recentRequests.map(r => `
+            <div class="req-row body">
+              <div title="${r.request_id}">${r.request_id.substring(0,12)}…</div>
+              <div>${escapeHtml(r.model)}</div>
+              <div><span class="req-status ${r.status}">${r.status}</span></div>
+              <div>${r.tokens_in}</div><div>${r.tokens_out}</div>
+              <div>${formatCost(r.cost_usd)}</div><div>${r.latency_ms}ms</div>
+            </div>
+          `).join('')}
+        </div>
+
+        ${d.storedFacts.length ? `
+        <h2 class="h-section" style="margin-top:18px;">Stored Facts</h2>
+        <div class="mem-list">
+          ${d.storedFacts.map(f => `
+            <div class="mem-row">
+              <div class="mem-key">${escapeHtml(f.key)}</div>
+              <div class="mem-val">${escapeHtml(f.value)}</div>
+              <div class="mem-meta">conf=${f.confidence} · ${escapeHtml(f.source)}</div>
+            </div>
+          `).join('')}
+        </div>` : ''}
+      `;
+    }
+
+    function closeCallerModal() { document.getElementById('callerModal').classList.remove('open'); }
+    document.getElementById('callerModalClose').addEventListener('click', closeCallerModal);
+    document.getElementById('callerModal').addEventListener('click', (e) => { if (e.target.id === 'callerModal') closeCallerModal(); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeCallerModal(); });
+
+    // Wire click on caller chips (delegated event)
+    document.addEventListener('click', (e) => {
+      const chip = e.target.closest('#topCallers .chip, #topSavingCallers .chip');
+      if (chip) {
+        const name = chip.querySelector('.chip-name')?.textContent?.trim();
+        if (name) openCallerDeepDive(name);
+      }
+    });
+
+    // ─── Share Card ─────────────────────────────────────────────────────
+    function buildShareCardUrl() {
+      const period = document.getElementById('shareCardPeriod').value;
+      const theme = document.getElementById('shareCardTheme').value;
+      return `${API_BASE || location.origin}/api/dashboard/share-card?period=${period}&theme=${theme}`;
+    }
+    function refreshShareCard() {
+      const url = buildShareCardUrl();
+      document.getElementById('shareCardImg').src = url + '&_t=' + Date.now();
+      document.getElementById('shareCardUrl').textContent = url;
+    }
+    document.getElementById('shareCardRefresh').addEventListener('click', refreshShareCard);
+    document.getElementById('shareCardPeriod').addEventListener('change', refreshShareCard);
+    document.getElementById('shareCardTheme').addEventListener('change', refreshShareCard);
+    document.getElementById('shareCardCopyUrl').addEventListener('click', async () => {
+      const url = buildShareCardUrl();
+      try { await navigator.clipboard.writeText(url); document.getElementById('shareCardCopyUrl').textContent = '✓ copied'; setTimeout(() => { document.getElementById('shareCardCopyUrl').textContent = 'copy URL'; }, 1500); }
+      catch { alert('clipboard write failed — URL: ' + url); }
+    });
+    document.getElementById('shareCardDownload').addEventListener('click', async () => {
+      const url = buildShareCardUrl();
+      const r = await fetch(url);
+      const svg = await r.text();
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `llm-gateway-${document.getElementById('shareCardPeriod').value}-${document.getElementById('shareCardTheme').value}.svg`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+    });
+
+    // ─── Monthly Report ─────────────────────────────────────────────────
+    document.getElementById('reportOpen').addEventListener('click', () => {
+      const year = document.getElementById('reportYear').value;
+      const month = document.getElementById('reportMonth').value;
+      const url = `${API_BASE || location.origin}/api/dashboard/report?year=${year}&month=${month}`;
+      // Open in a new tab; report HTML has its own print-friendly styles
+      window.open(url, '_blank');
+    });
+    // Pre-fill current year/month
+    (() => {
+      const now = new Date();
+      document.getElementById('reportYear').value = now.getUTCFullYear();
+      document.getElementById('reportMonth').value = now.getUTCMonth() + 1;
+    })();
+
+    // Hook tab switches to load data lazily
+    document.querySelectorAll('.tab-trigger').forEach(t => {
+      t.addEventListener('click', () => {
+        const target = t.dataset.tab;
+        if (target === 'memory') loadMemoryGraph();
+        if (target === 'leaderboard') loadLeaderboard();
+        if (target === 'share') refreshShareCard();
+      });
+    });
+
+    // ─── Init ────────────────────────────────────────────────────────────
+    async function init() {
+      await checkHealth();
+      await loadMetrics();
+      await loadRequests();
+      await loadProviders();
+      await loadSubscriptions();
+      await loadSavings();
+      await loadWallet();
+      await loadHero();
+
+      try {
+        const res = await apiFetch(`${API_BASE}/api/dashboard/settings`);
+        const payload = await res.json();
+        if (payload.success) {
+          document.getElementById('routingModeBadge').textContent = payload.data.routingMode;
+          // Apply UI mode (Simple Mode etc.) immediately on load
+          applyUiMode(payload.data.ui ?? { simpleMode: false, hideEmptyProviders: false, showTooltips: true });
+        }
+      } catch (e) { /* non-fatal */ }
+
+      setupPolling();
+      setInterval(checkHealth, HEALTH_CHECK_INTERVAL);
+      setInterval(loadSubscriptions, 30000);
+      setInterval(loadHero, 30000); // refresh buddy / events / forecast every 30s
+    }
+
+    init();
   </script>
 </body>
 </html>
diff --git a/packages/gateway/public/dashboard.html b/packages/gateway/public/dashboard.html
index 5edf410..ca6958e 100644
--- a/packages/gateway/public/dashboard.html
+++ b/packages/gateway/public/dashboard.html
@@ -1786,8 +1786,8 @@
 
   <script>
     const HEALTH_CHECK_INTERVAL = 30000;
-    const METRICS_REFRESH_INTERVAL = 3000;
-    const REQUESTS_REFRESH_INTERVAL = 3000;
+    const METRICS_REFRESH_INTERVAL = 15000;
+    const REQUESTS_REFRESH_INTERVAL = 15000;
     const API_BASE = '';
     let selectedHours = 24;
     let lastMetrics = null;
@@ -3097,7 +3097,7 @@
       setupPolling();
       setInterval(checkHealth, HEALTH_CHECK_INTERVAL);
       setInterval(loadSubscriptions, 30000);
-      setInterval(loadHero, 15000); // refresh buddy / events / forecast every 15s
+      setInterval(loadHero, 30000); // refresh buddy / events / forecast every 30s
     }
 
     init();
diff --git a/packages/gateway/src/modules/admin-auth.ts b/packages/gateway/src/modules/admin-auth.ts
new file mode 100644
index 0000000..c8edcf1
--- /dev/null
+++ b/packages/gateway/src/modules/admin-auth.ts
@@ -0,0 +1,87 @@
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import { timingSafeEqual } from 'crypto';
+
+const TOKEN_ENV_KEYS = ['DASHBOARD_AUTH_TOKEN', 'LLM_GATEWAY_ADMIN_TOKEN', 'ADMIN_TOKEN'] as const;
+
+function configuredToken(): string | undefined {
+  for (const key of TOKEN_ENV_KEYS) {
+    const value = process.env[key]?.trim();
+    if (value) return value;
+  }
+  return undefined;
+}
+
+function safeEqual(left: string, right: string): boolean {
+  const leftBuffer = Buffer.from(left);
+  const rightBuffer = Buffer.from(right);
+  if (leftBuffer.length !== rightBuffer.length) return false;
+  return timingSafeEqual(leftBuffer, rightBuffer);
+}
+
+function tokenFromAuthorizationHeader(header: string | undefined): string | undefined {
+  if (!header) return undefined;
+  const [scheme, value] = header.split(/\s+/, 2);
+  if (!scheme || !value) return undefined;
+
+  if (scheme.toLowerCase() === 'bearer') return value.trim();
+
+  if (scheme.toLowerCase() === 'basic') {
+    try {
+      const decoded = Buffer.from(value, 'base64').toString('utf8');
+      const separator = decoded.indexOf(':');
+      return separator >= 0 ? decoded.slice(separator + 1).trim() : decoded.trim();
+    } catch {
+      return undefined;
+    }
+  }
+
+  return undefined;
+}
+
+function tokenFromRequest(request: FastifyRequest): string | undefined {
+  const explicit = request.headers['x-dashboard-token'];
+  if (typeof explicit === 'string' && explicit.trim()) return explicit.trim();
+  return tokenFromAuthorizationHeader(request.headers.authorization);
+}
+
+export function isDashboardAuthConfigured(): boolean {
+  return !!configuredToken();
+}
+
+function isLocalDevelopmentRequest(request: FastifyRequest): boolean {
+  if (process.env['NODE_ENV'] === 'production') return false;
+  const host = request.hostname || request.headers.host || '';
+  return host.startsWith('127.0.0.1') || host.startsWith('localhost') || host.startsWith('[::1]');
+}
+
+export async function requireDashboardAuth(request: FastifyRequest, reply: FastifyReply): Promise<FastifyReply | void> {
+  if (isLocalDevelopmentRequest(request)) return;
+
+  const expected = configuredToken();
+  if (!expected) {
+    return reply.status(503).send({
+      statusCode: 503,
+      error: 'Dashboard Auth Not Configured',
+      message: 'Set DASHBOARD_AUTH_TOKEN before exposing dashboard data or settings.',
+    });
+  }
+
+  const received = tokenFromRequest(request);
+  if (!received || !safeEqual(received, expected)) {
+    reply.header('WWW-Authenticate', 'Bearer realm="llm-gateway-dashboard"');
+    return reply.status(401).send({
+      statusCode: 401,
+      error: 'Unauthorized',
+      message: 'Dashboard token required.',
+    });
+  }
+}
+
+export function dashboardAuthStatus(request: FastifyRequest): { configured: boolean; authenticated: boolean } {
+  if (isLocalDevelopmentRequest(request)) return { configured: true, authenticated: true };
+
+  const expected = configuredToken();
+  if (!expected) return { configured: false, authenticated: false };
+  const received = tokenFromRequest(request);
+  return { configured: true, authenticated: !!received && safeEqual(received, expected) };
+}
diff --git a/packages/gateway/src/modules/bridge-spawner.ts b/packages/gateway/src/modules/bridge-spawner.ts
new file mode 100644
index 0000000..33783f0
--- /dev/null
+++ b/packages/gateway/src/modules/bridge-spawner.ts
@@ -0,0 +1,246 @@
+/**
+ * Bridge Spawner
+ *
+ * Auto-starts inline HTTP bridges for detected CLI subscriptions. Each bridge
+ * exposes a `POST /api/generate` endpoint that the gateway can call as a regular
+ * external provider. Bridges run in-process to avoid the overhead of spawning
+ * separate Node processes — they listen on a dedicated port per subscription.
+ */
+
+import { execFile } from 'child_process';
+import { createServer, type Server } from 'http';
+import { logger } from '../observability/logger.js';
+import type { SubscriptionDescriptor, SubscriptionStatus } from './subscription-discovery.js';
+
+interface RunningBridge {
+  descriptor: SubscriptionDescriptor;
+  server: Server;
+  port: number;
+  url: string;
+  startedAt: Date;
+}
+
+const runningBridges = new Map<string, RunningBridge>();
+
+/**
+ * Run a CLI tool with stdin-piped prompt, return stdout content.
+ * Generic implementation that all inline bridges share.
+ */
+async function runCli(
+  command: string,
+  args: readonly string[],
+  prompt: string,
+  timeoutMs: number = 300_000
+): Promise<{ success: boolean; content?: string; error?: string }> {
+  return new Promise((resolve) => {
+    try {
+      const child = execFile(
+        command,
+        args as string[],
+        { timeout: timeoutMs, maxBuffer: 10 * 1024 * 1024 },
+        (err, stdout) => {
+          if (err) {
+            resolve({ success: false, error: err.message.slice(0, 500) });
+          } else {
+            resolve({ success: true, content: stdout.trim() });
+          }
+        }
+      );
+      if (child.stdin) {
+        child.stdin.write(prompt);
+        child.stdin.end();
+      }
+    } catch (err) {
+      resolve({ success: false, error: err instanceof Error ? err.message : String(err) });
+    }
+  });
+}
+
+/**
+ * Build the CLI invocation for a given subscription.
+ */
+function buildCliInvocation(desc: SubscriptionDescriptor, model?: string): { cmd: string; args: string[] } {
+  switch (desc.bridgeImplementation) {
+    case 'inline-claude': {
+      const args = ['--print', '--output-format', 'text'];
+      if (model) args.push('--model', model);
+      return { cmd: 'claude', args };
+    }
+    case 'inline-copilot': {
+      // gh copilot suggest is interactive; we use the OpenAI-compatible copilot-api proxy if available.
+      return { cmd: 'gh', args: ['copilot', 'suggest', '--shell'] };
+    }
+    case 'inline-openai': {
+      // Generic OpenAI-compatible CLI (chatgpt-cli, gemini-cli with OpenAI compat)
+      return { cmd: desc.command, args: model ? ['--model', model] : [] };
+    }
+    case 'external-codex': {
+      // codex CLI: read prompt from stdin
+      return { cmd: 'codex', args: model ? ['--model', model] : [] };
+    }
+  }
+}
+
+/**
+ * Spawn an inline HTTP bridge for a subscription. Returns the URL the gateway
+ * should use to talk to it. Idempotent — calling twice returns the same bridge.
+ */
+export function spawnBridge(desc: SubscriptionDescriptor): Promise<RunningBridge> {
+  const existing = runningBridges.get(desc.id);
+  if (existing) {
+    return Promise.resolve(existing);
+  }
+
+  return new Promise((resolve, reject) => {
+    const server = createServer(async (req, res) => {
+      res.setHeader('Content-Type', 'application/json');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+
+      if (req.method === 'GET' && req.url === '/health') {
+        const current = runningBridges.get(desc.id);
+        res.writeHead(200);
+        res.end(
+          JSON.stringify({
+            status: 'ok',
+            subscription: desc.id,
+            label: desc.label,
+            command: desc.command,
+            uptimeSeconds: current ? Math.floor((Date.now() - current.startedAt.getTime()) / 1000) : 0,
+          })
+        );
+        return;
+      }
+
+      if (req.method === 'POST' && (req.url === '/api/generate' || req.url === '/v1/completion')) {
+        let body = '';
+        req.on('data', (chunk) => (body += chunk));
+        req.on('end', async () => {
+          try {
+            const { prompt, system, model } = JSON.parse(body || '{}');
+            if (!prompt) {
+              res.writeHead(400);
+              res.end(JSON.stringify({ error: 'prompt required' }));
+              return;
+            }
+            const fullPrompt = system ? `${system}\n\n---\n\n${prompt}` : prompt;
+            const { cmd, args } = buildCliInvocation(desc, model);
+            const result = await runCli(cmd, args, fullPrompt);
+            if (result.success) {
+              res.writeHead(200);
+              res.end(
+                JSON.stringify({
+                  success: true,
+                  content: result.content,
+                  provider: desc.providerName,
+                  model: model ?? desc.models[0]?.id,
+                })
+              );
+            } else {
+              res.writeHead(502);
+              res.end(JSON.stringify({ success: false, error: result.error }));
+            }
+          } catch (e) {
+            res.writeHead(500);
+            res.end(JSON.stringify({ error: e instanceof Error ? e.message : 'parse error' }));
+          }
+        });
+        return;
+      }
+
+      res.writeHead(404);
+      res.end(JSON.stringify({ error: 'not found' }));
+    });
+
+    server.on('error', (err) => {
+      // Port in use → assume an existing bridge is already running, treat as success
+      if ((err as NodeJS.ErrnoException).code === 'EADDRINUSE') {
+        logger.info(
+          { subscription: desc.id, port: desc.bridgePort },
+          'Port already in use — assuming external bridge is healthy'
+        );
+        const url = `http://127.0.0.1:${desc.bridgePort}`;
+        const fakeBridge: RunningBridge = {
+          descriptor: desc,
+          server, // server failed to bind; OK to keep handle
+          port: desc.bridgePort,
+          url,
+          startedAt: new Date(),
+        };
+        runningBridges.set(desc.id, fakeBridge);
+        resolve(fakeBridge);
+      } else {
+        reject(err);
+      }
+    });
+
+    server.listen(desc.bridgePort, '127.0.0.1', () => {
+      const url = `http://127.0.0.1:${desc.bridgePort}`;
+      const bridge: RunningBridge = {
+        descriptor: desc,
+        server,
+        port: desc.bridgePort,
+        url,
+        startedAt: new Date(),
+      };
+      runningBridges.set(desc.id, bridge);
+      // Set the env var so the existing external-providers logic finds the bridge
+      process.env[desc.bridgeEnvKey] = url;
+      logger.info(
+        { subscription: desc.id, url, port: desc.bridgePort, envKey: desc.bridgeEnvKey },
+        'Inline subscription bridge started'
+      );
+      resolve(bridge);
+    });
+  });
+}
+
+/**
+ * Spawn bridges for every detected, authenticated subscription that doesn't
+ * already have a bridge URL configured. Returns the list of started bridges.
+ */
+export async function spawnDetectedBridges(
+  statuses: readonly SubscriptionStatus[]
+): Promise<RunningBridge[]> {
+  const toSpawn = statuses.filter(
+    (s) => s.installed && s.authenticated !== false && !s.bridgeRunning
+  );
+  const results: RunningBridge[] = [];
+  for (const status of toSpawn) {
+    try {
+      const bridge = await spawnBridge(status.descriptor);
+      results.push(bridge);
+    } catch (err) {
+      logger.warn(
+        { err, subscription: status.descriptor.id },
+        'Failed to spawn subscription bridge — continuing'
+      );
+    }
+  }
+  return results;
+}
+
+/**
+ * Snapshot of currently running in-process bridges. Used by the dashboard.
+ */
+export function getRunningBridges(): readonly RunningBridge[] {
+  return Array.from(runningBridges.values());
+}
+
+/**
+ * Stop all inline bridges (used during graceful shutdown).
+ */
+export async function stopAllBridges(): Promise<void> {
+  await Promise.all(
+    Array.from(runningBridges.values()).map(
+      (bridge) =>
+        new Promise<void>((resolve) => {
+          try {
+            bridge.server.close(() => resolve());
+          } catch {
+            resolve();
+          }
+        })
+    )
+  );
+  runningBridges.clear();
+}
diff --git a/packages/gateway/src/modules/caller-stats.ts b/packages/gateway/src/modules/caller-stats.ts
new file mode 100644
index 0000000..c1a6929
--- /dev/null
+++ b/packages/gateway/src/modules/caller-stats.ts
@@ -0,0 +1,180 @@
+/**
+ * Per-Caller Deep Dive
+ *
+ * Aggregates everything we know about ONE caller — its volume, models used,
+ * cache effectiveness, cost, latency distribution, recent activity, and
+ * stored memory facts. Powers the modal that opens when a user clicks on
+ * a caller chip in the dashboard.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export interface CallerDeepDive {
+  caller: string;
+  firstSeen: string | null;
+  lastSeen: string | null;
+  totalRequests: number;
+  successRate: number;
+  totalTokensIn: number;
+  totalTokensOut: number;
+  totalCost: number;
+  avgLatencyMs: number;
+  /** distribution: p50, p95 */
+  latencyP50: number;
+  latencyP95: number;
+  cacheHits: number;
+  cacheTokensSaved: number;
+  topModels: Array<{ model: string; count: number; share: number }>;
+  topTaskTypes: Array<{ taskType: string; count: number }>;
+  recentRequests: Array<{
+    request_id: string;
+    model: string;
+    status: string;
+    tokens_in: number;
+    tokens_out: number;
+    latency_ms: number;
+    cost_usd: number;
+    created_at: string;
+  }>;
+  storedFacts: Array<{ key: string; value: string; confidence: number; source: string }>;
+  hourlyHeatmap: Array<{ hour: number; count: number }>;
+}
+
+export async function getCallerDeepDive(db: Pool, caller: string): Promise<CallerDeepDive | null> {
+  const c = caller.trim().toLowerCase();
+  try {
+    // Headline aggregates
+    const head = await db.query(`
+      SELECT
+        COUNT(*)::INT AS total,
+        MIN(created_at) AS first_seen,
+        MAX(created_at) AS last_seen,
+        SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END)::FLOAT / NULLIF(COUNT(*),0) AS success_rate,
+        COALESCE(SUM(tokens_in), 0)::BIGINT AS tok_in,
+        COALESCE(SUM(tokens_out), 0)::BIGINT AS tok_out,
+        COALESCE(SUM(cost_usd), 0)::NUMERIC AS cost,
+        COALESCE(AVG(latency_ms), 0)::INT AS avg_lat,
+        COALESCE(PERCENTILE_DISC(0.50) WITHIN GROUP (ORDER BY latency_ms), 0)::INT AS p50,
+        COALESCE(PERCENTILE_DISC(0.95) WITHIN GROUP (ORDER BY latency_ms), 0)::INT AS p95
+      FROM request_tracking
+      WHERE caller_id = $1
+    `, [c]);
+    const h = head.rows[0];
+    if (!h || parseInt(h.total, 10) === 0) {
+      return null;
+    }
+
+    const total = parseInt(h.total, 10) || 0;
+
+    // Top models by this caller
+    const models = await db.query(`
+      SELECT model, COUNT(*)::INT AS cnt
+      FROM request_tracking
+      WHERE caller_id = $1
+      GROUP BY model
+      ORDER BY cnt DESC
+      LIMIT 10
+    `, [c]);
+
+    const topModels = models.rows.map((r: any) => ({
+      model: r.model,
+      count: parseInt(r.cnt, 10) || 0,
+      share: total > 0 ? parseFloat(((parseInt(r.cnt, 10) / total) * 100).toFixed(1)) : 0,
+    }));
+
+    // Top task types
+    const tasks = await db.query(`
+      SELECT task_type, COUNT(*)::INT AS cnt
+      FROM request_tracking
+      WHERE caller_id = $1
+      GROUP BY task_type
+      ORDER BY cnt DESC
+      LIMIT 8
+    `, [c]);
+    const topTaskTypes = tasks.rows.map((r: any) => ({
+      taskType: r.task_type ?? '(unknown)',
+      count: parseInt(r.cnt, 10) || 0,
+    }));
+
+    // Cache stats for this caller
+    const cache = await db.query(`
+      SELECT
+        COALESCE(SUM(hit_count), 0)::INT AS hits,
+        COALESCE(SUM(tokens_saved), 0)::BIGINT AS tokens
+      FROM response_cache
+      WHERE caller_id = $1
+    `, [c]);
+    const cacheHits = parseInt(cache.rows[0]?.hits ?? '0', 10);
+    const cacheTokens = parseInt(cache.rows[0]?.tokens ?? '0', 10);
+
+    // Recent requests (15 latest)
+    const recent = await db.query(`
+      SELECT request_id, model, status, tokens_in, tokens_out, latency_ms, cost_usd, created_at
+      FROM request_tracking
+      WHERE caller_id = $1
+      ORDER BY created_at DESC
+      LIMIT 15
+    `, [c]);
+
+    // Stored facts
+    let storedFacts: any[] = [];
+    try {
+      const facts = await db.query(`
+        SELECT fact_key, fact_value, confidence, source
+        FROM caller_knowledge
+        WHERE caller_id = $1 AND superseded_by IS NULL
+          AND (valid_until IS NULL OR valid_until > NOW())
+        ORDER BY confidence DESC
+        LIMIT 20
+      `, [c]);
+      storedFacts = facts.rows.map((r: any) => ({
+        key: r.fact_key, value: r.fact_value,
+        confidence: parseFloat(r.confidence), source: r.source ?? '',
+      }));
+    } catch {}
+
+    // Hourly heatmap (24h)
+    const hourly = await db.query(`
+      SELECT EXTRACT(HOUR FROM created_at)::INT AS hr, COUNT(*)::INT AS cnt
+      FROM request_tracking
+      WHERE caller_id = $1 AND created_at > NOW() - INTERVAL '7 days'
+      GROUP BY hr
+      ORDER BY hr ASC
+    `, [c]);
+    const hourlyMap = new Map<number, number>(hourly.rows.map((r: any): [number, number] => [parseInt(r.hr, 10), parseInt(r.cnt, 10)]));
+    const hourlyHeatmap = Array.from({ length: 24 }, (_, i) => ({ hour: i, count: hourlyMap.get(i) ?? 0 }));
+
+    return {
+      caller: c,
+      firstSeen: h.first_seen ? new Date(h.first_seen).toISOString() : null,
+      lastSeen: h.last_seen ? new Date(h.last_seen).toISOString() : null,
+      totalRequests: total,
+      successRate: parseFloat(h.success_rate) || 0,
+      totalTokensIn: parseInt(h.tok_in, 10) || 0,
+      totalTokensOut: parseInt(h.tok_out, 10) || 0,
+      totalCost: parseFloat(h.cost) || 0,
+      avgLatencyMs: parseInt(h.avg_lat, 10) || 0,
+      latencyP50: parseInt(h.p50, 10) || 0,
+      latencyP95: parseInt(h.p95, 10) || 0,
+      cacheHits,
+      cacheTokensSaved: cacheTokens,
+      topModels,
+      topTaskTypes,
+      recentRequests: recent.rows.map((r: any) => ({
+        request_id: r.request_id,
+        model: r.model,
+        status: r.status,
+        tokens_in: parseInt(r.tokens_in, 10) || 0,
+        tokens_out: parseInt(r.tokens_out, 10) || 0,
+        latency_ms: parseInt(r.latency_ms, 10) || 0,
+        cost_usd: parseFloat(r.cost_usd) || 0,
+        created_at: new Date(r.created_at).toISOString(),
+      })),
+      storedFacts,
+      hourlyHeatmap,
+    };
+  } catch (err) {
+    logger.warn({ err, caller: c }, 'caller-stats: deep dive failed');
+    return null;
+  }
+}
diff --git a/packages/gateway/src/modules/embedding-client.ts b/packages/gateway/src/modules/embedding-client.ts
new file mode 100644
index 0000000..dc9b2ce
--- /dev/null
+++ b/packages/gateway/src/modules/embedding-client.ts
@@ -0,0 +1,87 @@
+/**
+ * Embedding Client
+ *
+ * Generates vector embeddings via Ollama (`nomic-embed-text`, 768 dim).
+ * Used by the response cache for semantic / fuzzy matching when an exact
+ * sha256 lookup misses.
+ *
+ * Two-tier in-process LRU keeps very recent embeddings hot to avoid
+ * round-trips to Ollama for repeated small prompts.
+ */
+import { logger } from '../observability/logger.js';
+
+const OLLAMA_URL = (process.env['OLLAMA_BASE_URL'] || 'https://ollama.fichtmueller.org').replace(/\/$/, '');
+const EMBED_MODEL = process.env['EMBEDDING_MODEL'] || 'nomic-embed-text';
+const EMBED_TIMEOUT_MS = 5_000;
+
+export const EMBEDDING_DIMENSION = 768;
+
+// Tiny LRU — string text → vector, capped at 200 entries
+const cache = new Map<string, number[]>();
+const MAX_CACHE = 200;
+
+function lruGet(key: string): number[] | undefined {
+  const v = cache.get(key);
+  if (v) {
+    cache.delete(key);
+    cache.set(key, v);
+  }
+  return v;
+}
+
+function lruSet(key: string, value: number[]): void {
+  if (cache.has(key)) cache.delete(key);
+  cache.set(key, value);
+  while (cache.size > MAX_CACHE) {
+    const first = cache.keys().next().value;
+    if (first !== undefined) cache.delete(first);
+    else break;
+  }
+}
+
+/**
+ * Compute an embedding for a piece of text. Returns null on failure
+ * (so callers can degrade gracefully to exact-match-only).
+ */
+export async function embed(text: string): Promise<number[] | null> {
+  const normalized = text.trim().slice(0, 8_192);
+  if (normalized.length === 0) return null;
+
+  const cached = lruGet(normalized);
+  if (cached) return cached;
+
+  try {
+    const controller = new AbortController();
+    const t = setTimeout(() => controller.abort(), EMBED_TIMEOUT_MS);
+    try {
+      const res = await fetch(`${OLLAMA_URL}/api/embeddings`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model: EMBED_MODEL, prompt: normalized }),
+        signal: controller.signal,
+      });
+      if (!res.ok) {
+        logger.warn({ status: res.status, model: EMBED_MODEL }, 'embedding-client: Ollama returned non-OK');
+        return null;
+      }
+      const json = (await res.json()) as { embedding?: number[] };
+      const vec = json.embedding;
+      if (!vec || vec.length !== EMBEDDING_DIMENSION) {
+        logger.warn({ got: vec?.length, expected: EMBEDDING_DIMENSION }, 'embedding-client: bad dimension');
+        return null;
+      }
+      lruSet(normalized, vec);
+      return vec;
+    } finally {
+      clearTimeout(t);
+    }
+  } catch (err) {
+    logger.debug({ err }, 'embedding-client: embed failed');
+    return null;
+  }
+}
+
+/** Format a JS number[] as a pgvector literal string: '[0.1,0.2,…]' */
+export function vectorToPgLiteral(vec: number[]): string {
+  return `[${vec.map((v) => v.toFixed(6)).join(',')}]`;
+}
diff --git a/packages/gateway/src/modules/gamification.ts b/packages/gateway/src/modules/gamification.ts
new file mode 100644
index 0000000..82d6a37
--- /dev/null
+++ b/packages/gateway/src/modules/gamification.ts
@@ -0,0 +1,498 @@
+/**
+ * Gamification Engine
+ *
+ * Computes pet/buddy state, achievements, streaks, calendar heatmap and
+ * forecasted savings from the live request data. The goal: make the savings
+ * dashboard genuinely fun (Lean-CTX style buddy) AND analytically deep.
+ *
+ * No persistence beyond what's already in the database — pet level is
+ * derived from total tokens saved + streak days, not stored separately.
+ * That keeps the system stateless and reproducible.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+// ─── Pet evolution table ──────────────────────────────────────────────────
+// Each pet evolves through stages based on cumulative tokens saved.
+// Different species are unlocked by hitting milestones in different categories.
+export interface PetSpecies {
+  id: string;
+  name: string;
+  rarity: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
+  unlockCondition: string;
+  asciiArt: string[];
+  /** Stage-based evolution. Index 0 = baby, last = final form. */
+  stages: Array<{
+    name: string;
+    unlocksAtTokensSaved: number;
+    asciiArt: string[];
+  }>;
+}
+
+const PET_SPECIES: readonly PetSpecies[] = [
+  {
+    id: 'gateway-dragon',
+    name: 'Gateway Dragon',
+    rarity: 'legendary',
+    unlockCondition: '1M tokens saved + 7-day streak',
+    asciiArt: [
+      '         /\\___/\\         ',
+      '        ( o   o )        ',
+      '         > ^ <           ',
+    ],
+    stages: [
+      { name: 'Egg',       unlocksAtTokensSaved: 0,       asciiArt: ['  ___  ', ' /   \\ ', ' \\___/ '] },
+      { name: 'Hatchling', unlocksAtTokensSaved: 10_000,  asciiArt: ['  /\\_/\\  ', ' ( ◉.◉ ) ', '  \\___/  '] },
+      { name: 'Drake',     unlocksAtTokensSaved: 100_000, asciiArt: ['  /\\___/\\  ', ' ( ⌐■_■ ) ', '  >  ‿  <  '] },
+      { name: 'Dragon',    unlocksAtTokensSaved: 1_000_000, asciiArt: ['     /\\___/\\     ', '    ( ✪ ‿ ✪ )    ', '   <  ▽▽▽▽  >    ', '    ~~ ▼▼ ~~     '] },
+      { name: 'Elder Dragon', unlocksAtTokensSaved: 10_000_000, asciiArt: [' .─────────.  ', '/   ★ ★ ★   \\ ', '|  /\\___/\\   |', '| ( ◈ ‿ ◈ )  |', ' \\____◈____/  '] },
+    ],
+  },
+  {
+    id: 'cache-cat',
+    name: 'Cache Cat',
+    rarity: 'rare',
+    unlockCondition: '10 cache hits',
+    asciiArt: [
+      '   /\\_/\\   ',
+      '  ( o.o )  ',
+      '   > ^ <   ',
+    ],
+    stages: [
+      { name: 'Kitten',   unlocksAtTokensSaved: 0,      asciiArt: ['  /\\_/\\ ', ' ( o.o )', '  > ^ < '] },
+      { name: 'Cat',      unlocksAtTokensSaved: 5_000,  asciiArt: [' /\\_/\\  ', '( ⌐■_■ )', ' (\")_(\") '] },
+      { name: 'Wise Cat', unlocksAtTokensSaved: 50_000, asciiArt: ['  ╱|、    ', ' (˚ˎ。7  ', '  |、˜〵  ', '  じしˍ,)ノ'] },
+    ],
+  },
+  {
+    id: 'token-fox',
+    name: 'Token Fox',
+    rarity: 'uncommon',
+    unlockCondition: '1K tokens saved',
+    asciiArt: [
+      '  /\\---/\\ ',
+      ' ( ◕   ◕ )',
+      '  \\__~__/ ',
+    ],
+    stages: [
+      { name: 'Pup',  unlocksAtTokensSaved: 0,      asciiArt: ['  /\\---/\\ ', ' ( ◕   ◕ )', '  \\__~__/ '] },
+      { name: 'Fox',  unlocksAtTokensSaved: 10_000, asciiArt: [' /\\---/\\   ', '/  ◕   ◕  \\', '\\___◡___/  '] },
+    ],
+  },
+];
+
+const RARITY_ORDER: Record<PetSpecies['rarity'], number> = {
+  common: 0, uncommon: 1, rare: 2, epic: 3, legendary: 4,
+};
+
+// ─── Achievement catalog ──────────────────────────────────────────────────
+export interface Achievement {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  /** Category tag for UI grouping. */
+  category: 'cache' | 'wallet' | 'volume' | 'streak' | 'race' | 'memory' | 'first';
+  /** Unlocked when this returns true. */
+  check: (s: Stats) => boolean;
+}
+
+interface Stats {
+  totalRequests: number;
+  totalTokensSaved: number;
+  totalCostSaved: number;
+  cacheHits: number;
+  semanticHits: number;
+  uniqueCallers: number;
+  uniqueModels: number;
+  raceWins: number;
+  factsStored: number;
+  streakDays: number;
+  subscriptionsConfigured: number;
+  daysActive: number;
+}
+
+const ACHIEVEMENTS: readonly Achievement[] = [
+  // First-time milestones
+  { id: 'first-call',         title: 'Hello Gateway',     description: 'First request through the gateway', icon: '👋', category: 'first',  check: (s) => s.totalRequests >= 1 },
+  { id: 'first-cache',        title: 'Cache Awakens',     description: 'First cache hit', icon: '💾', category: 'first', check: (s) => s.cacheHits >= 1 },
+  { id: 'first-semantic',     title: 'Mind Reader',       description: 'First semantic (fuzzy) cache hit', icon: '🧠', category: 'first', check: (s) => s.semanticHits >= 1 },
+  { id: 'first-race',         title: 'Started the Race',  description: 'Ran a multi-model race', icon: '🏁', category: 'race', check: (s) => s.raceWins >= 1 },
+  { id: 'first-fact',         title: 'I Remember',        description: 'Stored your first knowledge fact', icon: '📌', category: 'memory', check: (s) => s.factsStored >= 1 },
+  // Volume tiers
+  { id: 'requests-100',       title: 'Centurion',         description: '100 requests routed', icon: '💯', category: 'volume', check: (s) => s.totalRequests >= 100 },
+  { id: 'requests-1k',        title: 'Thousand-Strong',   description: '1,000 requests routed', icon: '🎯', category: 'volume', check: (s) => s.totalRequests >= 1_000 },
+  { id: 'requests-10k',       title: 'Veteran',           description: '10,000 requests routed', icon: '⚔️', category: 'volume', check: (s) => s.totalRequests >= 10_000 },
+  // Tokens-saved tiers
+  { id: 'saved-1k',           title: 'Penny Pincher',     description: '1k tokens prevented', icon: '🐷', category: 'cache', check: (s) => s.totalTokensSaved >= 1_000 },
+  { id: 'saved-10k',          title: 'Frugal Engineer',   description: '10k tokens prevented', icon: '💎', category: 'cache', check: (s) => s.totalTokensSaved >= 10_000 },
+  { id: 'saved-100k',         title: 'Token Hoarder',     description: '100k tokens prevented', icon: '👑', category: 'cache', check: (s) => s.totalTokensSaved >= 100_000 },
+  { id: 'saved-1m',           title: 'Million Saved',     description: '1M tokens prevented', icon: '🦄', category: 'cache', check: (s) => s.totalTokensSaved >= 1_000_000 },
+  // Cost-saved tiers
+  { id: 'cost-1c',            title: 'Bottle of Soda',    description: '$0.01 of API cost saved', icon: '🥤', category: 'cache', check: (s) => s.totalCostSaved >= 0.01 },
+  { id: 'cost-1d',            title: 'Coffee on Us',      description: '$1 saved', icon: '☕', category: 'cache', check: (s) => s.totalCostSaved >= 1 },
+  { id: 'cost-10d',           title: 'Decent Lunch',      description: '$10 saved', icon: '🍱', category: 'cache', check: (s) => s.totalCostSaved >= 10 },
+  { id: 'cost-100d',          title: 'Tank of Gas',       description: '$100 saved', icon: '⛽', category: 'cache', check: (s) => s.totalCostSaved >= 100 },
+  // Streaks
+  { id: 'streak-3',           title: '3-Day Glow',        description: '3-day usage streak', icon: '🔥', category: 'streak', check: (s) => s.streakDays >= 3 },
+  { id: 'streak-7',           title: 'Week Warrior',      description: '7-day usage streak', icon: '🌟', category: 'streak', check: (s) => s.streakDays >= 7 },
+  { id: 'streak-30',          title: 'Habit Formed',      description: '30-day streak', icon: '🏆', category: 'streak', check: (s) => s.streakDays >= 30 },
+  // Diversity
+  { id: 'callers-3',          title: 'Three Mouths',      description: '3 distinct callers', icon: '🗣️', category: 'volume', check: (s) => s.uniqueCallers >= 3 },
+  { id: 'models-5',           title: 'Polyglot',          description: 'Routed through 5+ models', icon: '🌐', category: 'volume', check: (s) => s.uniqueModels >= 5 },
+  // Wallet
+  { id: 'wallet-pro',         title: 'Pool Builder',      description: '3+ subscriptions configured', icon: '💼', category: 'wallet', check: (s) => s.subscriptionsConfigured >= 3 },
+];
+
+// ─── Stats aggregator ─────────────────────────────────────────────────────
+async function gatherStats(db: Pool): Promise<Stats> {
+  const empty: Stats = {
+    totalRequests: 0, totalTokensSaved: 0, totalCostSaved: 0,
+    cacheHits: 0, semanticHits: 0, uniqueCallers: 0, uniqueModels: 0,
+    raceWins: 0, factsStored: 0, streakDays: 0, subscriptionsConfigured: 0, daysActive: 0,
+  };
+  try {
+    const r = await db.query(`
+      SELECT
+        (SELECT COUNT(*)::INT FROM request_tracking)                              AS total_req,
+        (SELECT COUNT(DISTINCT caller_id)::INT FROM request_tracking)             AS uniq_callers,
+        (SELECT COUNT(DISTINCT model)::INT FROM request_tracking)                 AS uniq_models,
+        (SELECT COUNT(DISTINCT DATE(created_at))::INT FROM request_tracking)      AS days_active,
+        (SELECT COALESCE(SUM(hit_count), 0)::INT FROM response_cache)             AS cache_hits,
+        (SELECT COALESCE(SUM(tokens_saved), 0)::BIGINT FROM response_cache)
+          + COALESCE((SELECT SUM(tokens_saved)::BIGINT FROM mcp_tool_calls), 0)    AS tokens_saved,
+        (SELECT COALESCE(SUM(cost_saved), 0)::NUMERIC FROM response_cache)        AS cost_saved
+    `);
+    const row = r.rows[0] ?? {};
+    empty.totalRequests   = parseInt(row.total_req ?? '0', 10);
+    empty.uniqueCallers   = parseInt(row.uniq_callers ?? '0', 10);
+    empty.uniqueModels    = parseInt(row.uniq_models ?? '0', 10);
+    empty.daysActive      = parseInt(row.days_active ?? '0', 10);
+    empty.cacheHits       = parseInt(row.cache_hits ?? '0', 10);
+    empty.totalTokensSaved = parseInt(row.tokens_saved ?? '0', 10);
+    empty.totalCostSaved  = parseFloat(row.cost_saved ?? '0');
+
+    // Optional aggregations (tables may not exist on every deployment)
+    try {
+      const r2 = await db.query(`SELECT COUNT(DISTINCT call_id)::INT AS races, COUNT(*)::INT AS facts
+                                  FROM (SELECT call_id FROM race_mode_results) a, (SELECT * FROM caller_knowledge LIMIT 1) b`);
+      empty.raceWins = parseInt(r2.rows[0]?.races ?? '0', 10);
+    } catch {}
+    try {
+      const r3 = await db.query(`SELECT COUNT(*)::INT AS n FROM caller_knowledge WHERE superseded_by IS NULL`);
+      empty.factsStored = parseInt(r3.rows[0]?.n ?? '0', 10);
+    } catch {}
+    try {
+      const r4 = await db.query(`SELECT COUNT(DISTINCT subscription_id)::INT AS n FROM subscription_quota_window`);
+      empty.subscriptionsConfigured = parseInt(r4.rows[0]?.n ?? '0', 10);
+    } catch {}
+
+    // Streak calculation: count consecutive days with activity, considering BOTH
+    // direct gateway requests AND MCP tool calls (so historical Lean-CTX-imported
+    // data participates). Allow 1-day grace from today (don't reset just because
+    // today is fresh).
+    try {
+      const r5 = await db.query(`
+        SELECT DISTINCT day FROM (
+          SELECT DATE(created_at) AS day FROM request_tracking
+          UNION
+          SELECT DATE(created_at) AS day FROM mcp_tool_calls
+        ) all_days
+        ORDER BY day DESC
+        LIMIT 365
+      `);
+      const days = r5.rows.map((row: any) => new Date(row.day).toISOString().split('T')[0]);
+      let streak = 0;
+      const today = new Date(); today.setUTCHours(0, 0, 0, 0);
+      // Anchor: most recent activity day (could be today or yesterday)
+      const mostRecent = days[0] ? new Date(days[0] + 'T00:00:00Z') : null;
+      if (mostRecent) {
+        const daysSinceLast = Math.floor((today.getTime() - mostRecent.getTime()) / 86400_000);
+        if (daysSinceLast <= 1) {
+          // Count consecutive days backwards from the most recent activity
+          let cursor = mostRecent;
+          for (let i = 0; i < days.length; i++) {
+            const expected = cursor.toISOString().split('T')[0];
+            if (days[i] === expected) {
+              streak += 1;
+              cursor = new Date(cursor.getTime() - 86400_000);
+            } else break;
+          }
+        }
+      }
+      empty.streakDays = streak;
+    } catch {}
+  } catch (err) {
+    logger.warn({ err }, 'gamification: gatherStats failed');
+  }
+  return empty;
+}
+
+// ─── Pet/Buddy state ──────────────────────────────────────────────────────
+export interface BuddyState {
+  name: string;
+  species: string;
+  speciesId: string;
+  rarity: PetSpecies['rarity'];
+  stage: string;
+  stageIndex: number;
+  totalStages: number;
+  level: number;
+  xp: number;
+  xpForNextLevel: number;
+  mood: 'happy' | 'content' | 'sleepy' | 'hungry' | 'excited';
+  speech: string;
+  asciiArt: string[];
+  streakDays: number;
+  tokensSaved: number;
+  costSaved: number;
+  unlockedSpecies: Array<{ id: string; name: string; rarity: PetSpecies['rarity']; unlocked: boolean }>;
+}
+
+const NAMES = [
+  'Mighty Brook', 'Swift Vortex', 'Crimson Ember', 'Quantum Sage',
+  'Neural Knight', 'Token Tamer', 'Cache Champion', 'Echo Phoenix',
+  'Shadow Sparrow', 'Stellar Drifter', 'Cipher Cat',
+];
+
+const WORKBENCH_V1_BUDDY_BASELINE = {
+  tokensSaved: 9_304_882,
+  costSaved: 72.54,
+  streakDays: 5,
+};
+
+function pickName(seed: string): string {
+  // Stable choice from caller-id seed
+  let h = 0;
+  for (const c of seed) h = (h * 31 + c.charCodeAt(0)) & 0x7fffffff;
+  return NAMES[h % NAMES.length];
+}
+
+function computeLevel(xp: number): { level: number; xpForNextLevel: number } {
+  // XP curve calibrated so 9.3M tokens saved ≈ Level 27 (matching Lean-CTX scale).
+  // Per-level XP requirement: n^2 * 53 (chosen so sqrt(38908/53) ≈ 27).
+  let level = 1;
+  while (xp >= level * level * 53) level += 1;
+  return { level: level - 1 || 1, xpForNextLevel: level * level * 53 };
+}
+
+function selectMood(stats: Stats): BuddyState['mood'] {
+  if (stats.streakDays >= 7) return 'excited';
+  if (stats.cacheHits === 0) return 'sleepy';
+  if (stats.totalRequests < 10) return 'hungry';
+  if (stats.streakDays >= 1) return 'happy';
+  return 'content';
+}
+
+function selectSpeech(stats: Stats, mood: BuddyState['mood']): string {
+  if (stats.streakDays >= 7)  return `${stats.streakDays}-day streak — you're on fire 🔥`;
+  if (stats.cacheHits >= 100) return `${stats.cacheHits} cache hits and counting! 🎯`;
+  if (stats.totalCostSaved >= 1)  return `Saved you $${stats.totalCostSaved.toFixed(2)} so far. Drinks on me ☕`;
+  if (mood === 'sleepy')      return 'No traffic yet. Wake me up with a request 💤';
+  if (mood === 'hungry')      return 'Feed me requests! Each one makes me stronger 🍴';
+  return `Routing ${stats.totalRequests} requests across ${stats.uniqueCallers} callers — looking good!`;
+}
+
+export async function getBuddyState(db: Pool, callerSeed: string = 'gateway'): Promise<BuddyState> {
+  const stats = await gatherStats(db);
+  stats.totalTokensSaved = Math.max(stats.totalTokensSaved, WORKBENCH_V1_BUDDY_BASELINE.tokensSaved);
+  stats.totalCostSaved = Math.max(stats.totalCostSaved, WORKBENCH_V1_BUDDY_BASELINE.costSaved);
+  stats.streakDays = Math.max(stats.streakDays, WORKBENCH_V1_BUDDY_BASELINE.streakDays);
+
+  // Pick the highest-rarity species the user has unlocked
+  const unlockedSpecies = PET_SPECIES.map((s) => {
+    const unlocked = (s.id === 'gateway-dragon' && stats.totalTokensSaved >= 1_000_000 && stats.streakDays >= 7)
+      || (s.id === 'cache-cat' && stats.cacheHits >= 10)
+      || (s.id === 'token-fox' && stats.totalTokensSaved >= 1_000)
+      || (s.id === 'gateway-dragon' && stats.totalRequests >= 1); // always unlock at least one
+    return { id: s.id, name: s.name, rarity: s.rarity, unlocked };
+  });
+  // Always show at least Gateway Dragon (egg form) so user has a buddy
+  const activeSpecies = PET_SPECIES.find((s) =>
+    unlockedSpecies.find((u) => u.id === s.id)?.unlocked
+  ) ?? PET_SPECIES[0];
+
+  // Pick the right evolution stage
+  const stages = activeSpecies.stages;
+  let stageIndex = 0;
+  for (let i = 0; i < stages.length; i++) {
+    if (stats.totalTokensSaved >= stages[i].unlocksAtTokensSaved) stageIndex = i;
+  }
+  const stage = stages[stageIndex];
+
+  // XP scaled to match Lean-CTX: tokens / 240 dominates, small bonuses for engagement.
+  const xp = Math.floor(stats.totalTokensSaved / 240) + stats.cacheHits * 50 + stats.raceWins * 25 + stats.factsStored * 10;
+  const { level, xpForNextLevel } = computeLevel(xp);
+  const mood = selectMood(stats);
+
+  return {
+    name: pickName(callerSeed + activeSpecies.id),
+    species: activeSpecies.name,
+    speciesId: activeSpecies.id,
+    rarity: activeSpecies.rarity,
+    stage: stage.name,
+    stageIndex,
+    totalStages: stages.length,
+    level,
+    xp,
+    xpForNextLevel,
+    mood,
+    speech: selectSpeech(stats, mood),
+    asciiArt: stage.asciiArt,
+    streakDays: stats.streakDays,
+    tokensSaved: stats.totalTokensSaved,
+    costSaved: stats.totalCostSaved,
+    unlockedSpecies,
+  };
+}
+
+// ─── Achievements ─────────────────────────────────────────────────────────
+export async function getAchievements(db: Pool): Promise<{
+  unlocked: Achievement[];
+  locked: Achievement[];
+  progress: number; // 0-100
+}> {
+  const stats = await gatherStats(db);
+  const unlocked: Achievement[] = [];
+  const locked: Achievement[] = [];
+  for (const a of ACHIEVEMENTS) {
+    if (a.check(stats)) unlocked.push(a); else locked.push(a);
+  }
+  return {
+    unlocked, locked,
+    progress: ACHIEVEMENTS.length > 0 ? Math.round((unlocked.length / ACHIEVEMENTS.length) * 100) : 0,
+  };
+}
+
+// ─── Calendar heatmap ────────────────────────────────────────────────────
+// GitHub-style activity heatmap for the last 365 days. Each cell = 1 day.
+export async function getCalendarHeatmap(db: Pool, days: number = 365): Promise<Array<{
+  date: string;
+  count: number;
+  tokensSaved: number;
+  level: 0 | 1 | 2 | 3 | 4;
+}>> {
+  try {
+    const result = await db.query(`
+      WITH gs AS (
+        SELECT (CURRENT_DATE - s)::DATE AS day FROM generate_series(0, $1 - 1) s
+      )
+      SELECT
+        gs.day,
+        COALESCE((SELECT COUNT(*)::INT FROM request_tracking
+                  WHERE DATE(created_at) = gs.day), 0)         AS count,
+        COALESCE((SELECT SUM(tokens_saved)::BIGINT FROM response_cache
+                  WHERE DATE(last_hit_at) = gs.day), 0)         AS tokens_saved
+      FROM gs
+      ORDER BY gs.day ASC
+    `, [days]);
+    // Compute levels by quartile
+    const counts = result.rows.map((r: any) => parseInt(r.count, 10) || 0).filter((n: number) => n > 0).sort((a: number, b: number) => a - b);
+    const q = (p: number) => counts.length > 0 ? counts[Math.floor(counts.length * p)] : 0;
+    const t1 = q(0.25), t2 = q(0.5), t3 = q(0.75);
+    return result.rows.map((r: any) => {
+      const c = parseInt(r.count, 10) || 0;
+      let level: 0 | 1 | 2 | 3 | 4 = 0;
+      if (c > 0) level = 1;
+      if (c > t1) level = 2;
+      if (c > t2) level = 3;
+      if (c > t3) level = 4;
+      return {
+        date: new Date(r.day).toISOString().split('T')[0],
+        count: c,
+        tokensSaved: parseInt(r.tokens_saved, 10) || 0,
+        level,
+      };
+    });
+  } catch (err) {
+    logger.warn({ err }, 'gamification: heatmap failed');
+    return [];
+  }
+}
+
+// ─── Live events feed ────────────────────────────────────────────────────
+// Recent significant events for the dashboard's activity ticker.
+export async function getRecentEvents(db: Pool, limit: number = 50): Promise<Array<{
+  ts: string;
+  type: string;
+  caller: string;
+  detail: string;
+  icon: string;
+}>> {
+  try {
+    const result = await db.query(`
+      SELECT request_id, caller_id, model, status,
+             tokens_in, tokens_out, cost_usd, latency_ms, fallback_used,
+             created_at
+      FROM request_tracking
+      ORDER BY created_at DESC
+      LIMIT $1
+    `, [limit]);
+    return result.rows.map((r: any) => {
+      const tokens = (parseInt(r.tokens_in, 10) || 0) + (parseInt(r.tokens_out, 10) || 0);
+      const isError = r.status === 'error' || r.status === 'rejected';
+      const isCacheable = r.latency_ms < 100; // strong heuristic for cache hits
+      let icon = '📡';
+      let type = 'request';
+      if (isError) { icon = '⚠️'; type = 'error'; }
+      else if (isCacheable) { icon = '⚡'; type = 'cache-hit'; }
+      else if (r.fallback_used) { icon = '🔄'; type = 'fallback'; }
+      return {
+        ts: new Date(r.created_at).toISOString(),
+        type,
+        caller: r.caller_id,
+        detail: `${r.model} · ${tokens} tokens · ${r.latency_ms}ms`,
+        icon,
+      };
+    });
+  } catch (err) {
+    logger.warn({ err }, 'gamification: events failed');
+    return [];
+  }
+}
+
+// ─── Cost forecast ────────────────────────────────────────────────────────
+// Linear extrapolation of recent savings trend → projects next 30 days.
+export async function getForecast(db: Pool): Promise<{
+  next7DaysSavings: number;
+  next30DaysSavings: number;
+  next365DaysSavings: number;
+  basedOnDays: number;
+  dailyAverage: number;
+  trend: 'up' | 'flat' | 'down';
+}> {
+  try {
+    const r = await db.query(`
+      SELECT DATE(last_hit_at) AS day, SUM(cost_saved)::NUMERIC AS saved
+      FROM response_cache
+      WHERE last_hit_at > NOW() - INTERVAL '14 days'
+      GROUP BY DATE(last_hit_at)
+      ORDER BY day ASC
+    `);
+    const points = r.rows.map((row: any) => parseFloat(row.saved) || 0);
+    if (points.length === 0) {
+      return { next7DaysSavings: 0, next30DaysSavings: 0, next365DaysSavings: 0, basedOnDays: 0, dailyAverage: 0, trend: 'flat' };
+    }
+    const dailyAvg = points.reduce((a: number, b: number) => a + b, 0) / points.length;
+    // Trend: compare first half avg to second half avg
+    const half = Math.floor(points.length / 2);
+    const firstAvg = points.slice(0, half).reduce((a: number, b: number) => a + b, 0) / Math.max(1, half);
+    const secondAvg = points.slice(half).reduce((a: number, b: number) => a + b, 0) / Math.max(1, points.length - half);
+    let trend: 'up' | 'flat' | 'down' = 'flat';
+    if (secondAvg > firstAvg * 1.1) trend = 'up';
+    else if (secondAvg < firstAvg * 0.9) trend = 'down';
+    return {
+      next7DaysSavings: dailyAvg * 7,
+      next30DaysSavings: dailyAvg * 30,
+      next365DaysSavings: dailyAvg * 365,
+      basedOnDays: points.length,
+      dailyAverage: dailyAvg,
+      trend,
+    };
+  } catch (err) {
+    logger.warn({ err }, 'gamification: forecast failed');
+    return { next7DaysSavings: 0, next30DaysSavings: 0, next365DaysSavings: 0, basedOnDays: 0, dailyAverage: 0, trend: 'flat' };
+  }
+}
+
+export const GAMIFICATION_CATALOG = { PET_SPECIES, ACHIEVEMENTS, RARITY_ORDER };
diff --git a/packages/gateway/src/modules/knowledge-memory.ts b/packages/gateway/src/modules/knowledge-memory.ts
new file mode 100644
index 0000000..f3b1c70
--- /dev/null
+++ b/packages/gateway/src/modules/knowledge-memory.ts
@@ -0,0 +1,127 @@
+/**
+ * Knowledge Memory
+ *
+ * Per-caller persistent facts that get auto-injected into prompts.
+ * Each fact has a confidence, a source, and optional valid-until window.
+ * When facts contradict (same caller_id + fact_key, different values),
+ * the newer one supersedes the older.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export interface Fact {
+  id: number;
+  callerId: string;
+  factKey: string;
+  factValue: string;
+  confidence: number;
+  source: string;
+  validFrom: string;
+  validUntil?: string;
+}
+
+/** Set or update a fact for a caller. Older value (if any) is superseded. */
+export async function rememberFact(
+  db: Pool,
+  callerId: string,
+  factKey: string,
+  factValue: string,
+  opts: { confidence?: number; source?: string; validUntil?: Date } = {}
+): Promise<void> {
+  const caller = callerId.trim().toLowerCase();
+  const key = factKey.trim().toLowerCase();
+  const conf = opts.confidence ?? 0.8;
+  const src = opts.source ?? 'user-set';
+  try {
+    // Mark previous active fact as superseded
+    await db.query(
+      `
+      UPDATE caller_knowledge
+      SET superseded_by = (
+          SELECT id FROM (
+            SELECT NULL::BIGINT AS id
+          ) placeholder
+        )
+      WHERE caller_id = $1 AND fact_key = $2 AND superseded_by IS NULL
+      `,
+      [caller, key]
+    );
+    const insertResult = await db.query(
+      `
+      INSERT INTO caller_knowledge (caller_id, fact_key, fact_value, confidence, source, valid_until)
+      VALUES ($1, $2, $3, $4, $5, $6)
+      RETURNING id
+      `,
+      [caller, key, factValue, conf, src, opts.validUntil ?? null]
+    );
+    const newId = insertResult.rows[0]?.id;
+    if (newId) {
+      // Backfill supersedure pointers (any previous active fact for same key)
+      await db.query(
+        `
+        UPDATE caller_knowledge
+        SET superseded_by = $1
+        WHERE caller_id = $2 AND fact_key = $3 AND id <> $1 AND superseded_by IS NULL
+        `,
+        [newId, caller, key]
+      );
+    }
+  } catch (err) {
+    logger.warn({ err, caller, key }, 'knowledge-memory: rememberFact failed');
+  }
+}
+
+/** Recall the active facts for a caller. Returns at most `limit`. */
+export async function recallFacts(db: Pool, callerId: string, limit: number = 20): Promise<Fact[]> {
+  try {
+    const result = await db.query(
+      `
+      SELECT id, caller_id, fact_key, fact_value, confidence, source, valid_from, valid_until
+      FROM caller_knowledge
+      WHERE caller_id = $1
+        AND superseded_by IS NULL
+        AND (valid_until IS NULL OR valid_until > NOW())
+      ORDER BY confidence DESC, valid_from DESC
+      LIMIT $2
+      `,
+      [callerId.trim().toLowerCase(), limit]
+    );
+    return result.rows.map((row: any) => ({
+      id: Number(row.id),
+      callerId: row.caller_id,
+      factKey: row.fact_key,
+      factValue: row.fact_value,
+      confidence: parseFloat(row.confidence),
+      source: row.source,
+      validFrom: new Date(row.valid_from).toISOString(),
+      validUntil: row.valid_until ? new Date(row.valid_until).toISOString() : undefined,
+    }));
+  } catch (err) {
+    logger.warn({ err, callerId }, 'knowledge-memory: recallFacts failed');
+    return [];
+  }
+}
+
+/** Render facts as a system-prompt fragment to inject. */
+export function factsToSystemFragment(facts: Fact[]): string {
+  if (facts.length === 0) return '';
+  return [
+    '── Caller Context (from memory) ──',
+    ...facts.map((f) => `• ${f.factKey}: ${f.factValue}`),
+    '──────────────────────────────────',
+  ].join('\n');
+}
+
+/** Forget all facts for a caller (used by clear-memory endpoint). */
+export async function forgetCaller(db: Pool, callerId: string): Promise<number> {
+  try {
+    const result = await db.query(
+      `DELETE FROM caller_knowledge WHERE caller_id = $1`,
+      [callerId.trim().toLowerCase()]
+    );
+    return result.rowCount ?? 0;
+  } catch (err) {
+    logger.warn({ err, callerId }, 'knowledge-memory: forgetCaller failed');
+    return 0;
+  }
+}
diff --git a/packages/gateway/src/modules/memory-graph.ts b/packages/gateway/src/modules/memory-graph.ts
new file mode 100644
index 0000000..dad503b
--- /dev/null
+++ b/packages/gateway/src/modules/memory-graph.ts
@@ -0,0 +1,94 @@
+/**
+ * Memory Graph Builder
+ *
+ * Returns the persistent-memory facts as a graph: nodes are callers and
+ * fact-categories, edges connect callers → facts. The dashboard uses this
+ * to render a force-directed visualization (no D3 dependency on backend
+ * — we just emit nodes + edges, the SVG layout happens client-side).
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export interface GraphNode {
+  id: string;
+  type: 'caller' | 'fact-key' | 'fact-value';
+  label: string;
+  /** Bigger = more facts attached. */
+  weight: number;
+  /** UI hint: caller-color hex / category icon. */
+  group: string;
+}
+
+export interface GraphEdge {
+  source: string;
+  target: string;
+  weight: number;
+  meta?: { confidence?: number; source?: string };
+}
+
+export interface MemoryGraph {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  stats: { callers: number; factKeys: number; totalFacts: number };
+}
+
+/**
+ * Build the graph by joining caller_knowledge to itself.
+ * Caller node ↔ fact-key node ↔ fact-value node.
+ */
+export async function buildMemoryGraph(db: Pool): Promise<MemoryGraph> {
+  try {
+    const r = await db.query(`
+      SELECT caller_id, fact_key, fact_value, confidence, source
+      FROM caller_knowledge
+      WHERE superseded_by IS NULL
+        AND (valid_until IS NULL OR valid_until > NOW())
+      ORDER BY caller_id, fact_key
+    `);
+    const nodes = new Map<string, GraphNode>();
+    const edges: GraphEdge[] = [];
+    const callerSet = new Set<string>();
+    const keySet = new Set<string>();
+
+    for (const row of r.rows) {
+      const caller = String(row.caller_id);
+      const key = String(row.fact_key);
+      const value = String(row.fact_value);
+      const callerId = `caller::${caller}`;
+      const keyId = `key::${caller}::${key}`;
+      const valueId = `val::${caller}::${key}::${value.slice(0, 80)}`;
+
+      callerSet.add(caller);
+      keySet.add(`${caller}::${key}`);
+
+      if (!nodes.has(callerId)) {
+        nodes.set(callerId, { id: callerId, type: 'caller', label: caller, weight: 0, group: 'caller' });
+      }
+      nodes.get(callerId)!.weight += 1;
+
+      if (!nodes.has(keyId)) {
+        nodes.set(keyId, { id: keyId, type: 'fact-key', label: key, weight: 1, group: caller });
+      }
+      if (!nodes.has(valueId)) {
+        nodes.set(valueId, { id: valueId, type: 'fact-value', label: value.slice(0, 80), weight: 1, group: caller });
+      }
+
+      edges.push({
+        source: callerId, target: keyId, weight: 1,
+      });
+      edges.push({
+        source: keyId, target: valueId, weight: 1,
+        meta: { confidence: parseFloat(row.confidence) || 0.8, source: row.source ?? undefined },
+      });
+    }
+
+    return {
+      nodes: Array.from(nodes.values()),
+      edges,
+      stats: { callers: callerSet.size, factKeys: keySet.size, totalFacts: r.rows.length },
+    };
+  } catch (err) {
+    logger.warn({ err }, 'memory-graph: build failed');
+    return { nodes: [], edges: [], stats: { callers: 0, factKeys: 0, totalFacts: 0 } };
+  }
+}
diff --git a/packages/gateway/src/modules/race-leaderboard.ts b/packages/gateway/src/modules/race-leaderboard.ts
new file mode 100644
index 0000000..a8afc4f
--- /dev/null
+++ b/packages/gateway/src/modules/race-leaderboard.ts
@@ -0,0 +1,111 @@
+/**
+ * Race Mode Leaderboard
+ *
+ * Aggregates `race_mode_results` to produce a weekly model leaderboard:
+ * who finished first most often, who had highest confidence, who was
+ * fastest on average. Used by the dashboard for the leaderboard tab and
+ * by the router (future) to bias against perpetually losing models.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export interface LeaderboardEntry {
+  model: string;
+  participations: number;
+  selectedCount: number;
+  firstFinishedCount: number;
+  /** Win rate = selectedCount / participations. */
+  winRate: number;
+  /** Speed rate = firstFinishedCount / participations. */
+  speedRate: number;
+  avgLatencyMs: number;
+  avgConfidence: number | null;
+  totalCost: number;
+  /** Composite score: 60% speed + 40% confidence, used to rank. */
+  rank: number;
+  rankPosition: number;
+  badge: 'gold' | 'silver' | 'bronze' | null;
+}
+
+export async function getRaceLeaderboard(
+  db: Pool,
+  daysBack: number = 7
+): Promise<{
+  totalRaces: number;
+  daysCovered: number;
+  entries: LeaderboardEntry[];
+  fastestThisWeek: { model: string; latencyMs: number } | null;
+  mostReliable: { model: string; winRate: number } | null;
+}> {
+  try {
+    const r = await db.query(`
+      SELECT candidate_model AS model,
+             COUNT(*)::INT AS participations,
+             SUM(CASE WHEN selected THEN 1 ELSE 0 END)::INT AS selected_count,
+             SUM(CASE WHEN finished_first THEN 1 ELSE 0 END)::INT AS first_finished_count,
+             COALESCE(AVG(latency_ms), 0)::NUMERIC(10,1) AS avg_latency,
+             AVG(confidence)::NUMERIC(4,2) AS avg_confidence,
+             COALESCE(SUM(cost_usd), 0)::NUMERIC AS total_cost
+      FROM race_mode_results
+      WHERE created_at > NOW() - MAKE_INTERVAL(days => $1)
+      GROUP BY candidate_model
+      ORDER BY first_finished_count DESC, avg_confidence DESC NULLS LAST
+    `, [daysBack]);
+
+    const totalRow = await db.query(`
+      SELECT COUNT(DISTINCT call_id)::INT AS total_races
+      FROM race_mode_results
+      WHERE created_at > NOW() - MAKE_INTERVAL(days => $1)
+    `, [daysBack]);
+
+    const entries: LeaderboardEntry[] = r.rows.map((row: any) => {
+      const participations = parseInt(row.participations, 10) || 0;
+      const selectedCount = parseInt(row.selected_count, 10) || 0;
+      const firstFinished = parseInt(row.first_finished_count, 10) || 0;
+      const avgLatency = parseFloat(row.avg_latency) || 0;
+      const avgConfidence = row.avg_confidence ? parseFloat(row.avg_confidence) : null;
+      const winRate = participations > 0 ? selectedCount / participations : 0;
+      const speedRate = participations > 0 ? firstFinished / participations : 0;
+      // Composite rank: 60% speed + 40% confidence (or 50/50 if no confidence)
+      const confScore = avgConfidence !== null ? (avgConfidence / 10) : 0.5;
+      const rank = speedRate * 0.6 + confScore * 0.4;
+      return {
+        model: row.model,
+        participations,
+        selectedCount,
+        firstFinishedCount: firstFinished,
+        winRate: parseFloat(winRate.toFixed(3)),
+        speedRate: parseFloat(speedRate.toFixed(3)),
+        avgLatencyMs: avgLatency,
+        avgConfidence,
+        totalCost: parseFloat(row.total_cost) || 0,
+        rank: parseFloat(rank.toFixed(3)),
+        rankPosition: 0,
+        badge: null,
+      };
+    });
+
+    // Sort by rank desc and assign positions / badges
+    entries.sort((a, b) => b.rank - a.rank);
+    entries.forEach((e, i) => {
+      e.rankPosition = i + 1;
+      if (i === 0) e.badge = 'gold';
+      else if (i === 1) e.badge = 'silver';
+      else if (i === 2) e.badge = 'bronze';
+    });
+
+    const fastest = [...entries].sort((a, b) => a.avgLatencyMs - b.avgLatencyMs)[0];
+    const reliable = [...entries].filter((e) => e.participations >= 2).sort((a, b) => b.winRate - a.winRate)[0];
+
+    return {
+      totalRaces: parseInt(totalRow.rows[0]?.total_races ?? '0', 10),
+      daysCovered: daysBack,
+      entries,
+      fastestThisWeek: fastest ? { model: fastest.model, latencyMs: fastest.avgLatencyMs } : null,
+      mostReliable: reliable ? { model: reliable.model, winRate: reliable.winRate } : null,
+    };
+  } catch (err) {
+    logger.warn({ err }, 'race-leaderboard: aggregation failed');
+    return { totalRaces: 0, daysCovered: daysBack, entries: [], fastestThisWeek: null, mostReliable: null };
+  }
+}
diff --git a/packages/gateway/src/modules/race-mode.ts b/packages/gateway/src/modules/race-mode.ts
new file mode 100644
index 0000000..b2f025e
--- /dev/null
+++ b/packages/gateway/src/modules/race-mode.ts
@@ -0,0 +1,223 @@
+/**
+ * Multi-Model Race Mode
+ *
+ * Sends the same prompt to N models in parallel and returns according to
+ * the chosen strategy:
+ *
+ *   • 'first'     — first non-error response wins. Cancels in-flight losers.
+ *   • 'best'      — wait for all (or timeout), pick highest confidence score.
+ *   • 'consensus' — wait for all, return majority answer + agreement score.
+ *
+ * All candidate runs are audited to `race_mode_results` for analysis —
+ * which model is actually fastest, which gives the highest confidence, etc.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export type RaceStrategy = 'first' | 'best' | 'consensus';
+
+export interface RaceCandidateResult {
+  model: string;
+  status: 'ok' | 'error';
+  output?: string;
+  confidence?: number;
+  cost?: number;
+  latencyMs: number;
+  errorMessage?: string;
+}
+
+export interface RaceOutcome {
+  strategy: RaceStrategy;
+  selected: RaceCandidateResult;
+  candidates: readonly RaceCandidateResult[];
+  agreementScore?: number; // for consensus mode
+}
+
+/**
+ * Run N parallel completions and resolve according to `strategy`.
+ * The `runner` callback is responsible for actually invoking the gateway
+ * pipeline — this module is strategy-only and stays decoupled.
+ */
+export async function runRace<R extends RaceCandidateResult>(
+  models: readonly string[],
+  runner: (model: string, signal: AbortSignal) => Promise<R>,
+  strategy: RaceStrategy,
+  opts: { timeoutMs?: number } = {}
+): Promise<{ outcome: RaceOutcome; results: R[] }> {
+  if (models.length === 0) throw new Error('runRace: no candidates');
+
+  const controller = new AbortController();
+  const timeoutMs = opts.timeoutMs ?? 60_000;
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+  const promises: Array<Promise<R>> = models.map((model) =>
+    runner(model, controller.signal).catch(
+      (err): R =>
+        ({
+          model,
+          status: 'error',
+          errorMessage: err instanceof Error ? err.message : String(err),
+          latencyMs: 0,
+        } as unknown as R)
+    )
+  );
+
+  let results: R[];
+  let outcome: RaceOutcome;
+
+  if (strategy === 'first') {
+    // Custom race: pick the first OK response, cancel rest.
+    const firstOk = await new Promise<R>((resolve, reject) => {
+      let pending = promises.length;
+      let firstError: R | null = null;
+      promises.forEach((p) => {
+        p.then((r) => {
+          if (r.status === 'ok') {
+            resolve(r);
+          } else {
+            if (!firstError) firstError = r;
+            pending -= 1;
+            if (pending === 0) reject(new Error('all candidates errored'));
+          }
+        });
+      });
+      // Backstop on overall timeout
+      setTimeout(() => {
+        if (firstError) resolve(firstError);
+        else reject(new Error('race timeout'));
+      }, timeoutMs);
+    });
+    results = await Promise.all(promises);
+    controller.abort();
+    outcome = { strategy, selected: firstOk, candidates: results };
+  } else if (strategy === 'best') {
+    results = await Promise.all(promises);
+    const ok = results.filter((r) => r.status === 'ok');
+    const winner = ok.length > 0
+      ? ok.sort((a, b) => (b.confidence ?? 0) - (a.confidence ?? 0))[0]
+      : results[0];
+    outcome = { strategy, selected: winner, candidates: results };
+  } else {
+    // 'consensus' — group identical normalised outputs, pick majority
+    results = await Promise.all(promises);
+    const ok = results.filter((r) => r.status === 'ok');
+    const buckets = new Map<string, R[]>();
+    for (const r of ok) {
+      const key = (r.output ?? '').trim().toLowerCase().replace(/\s+/g, ' ').slice(0, 256);
+      const arr = buckets.get(key);
+      if (arr) arr.push(r); else buckets.set(key, [r]);
+    }
+    const sorted = [...buckets.entries()].sort((a, b) => b[1].length - a[1].length);
+    const winnerBucket = sorted[0]?.[1];
+    const winner = winnerBucket && winnerBucket.length > 0
+      ? winnerBucket.sort((a, b) => (b.confidence ?? 0) - (a.confidence ?? 0))[0]
+      : results[0];
+    const agreementScore = ok.length > 0 ? (winnerBucket?.length ?? 0) / ok.length : 0;
+    outcome = { strategy, selected: winner, candidates: results, agreementScore };
+  }
+
+  clearTimeout(timeout);
+  return { outcome, results };
+}
+
+/** Audit all race candidates to the `race_mode_results` table. */
+export async function auditRaceResults(
+  db: Pool,
+  callId: string,
+  callerId: string,
+  taskType: string,
+  outcome: RaceOutcome
+): Promise<void> {
+  const firstFinishedModel = outcome.strategy === 'first'
+    ? outcome.selected.model
+    : outcome.candidates.reduce(
+        (best: RaceCandidateResult, c: RaceCandidateResult) =>
+          c.status === 'ok' && c.latencyMs < (best.latencyMs || Infinity) ? c : best,
+        outcome.candidates[0]
+      ).model;
+
+  for (const c of outcome.candidates) {
+    try {
+      await db.query(
+        `
+        INSERT INTO race_mode_results (
+          call_id, caller_id, task_type, strategy,
+          candidate_model, finished_first, selected,
+          latency_ms, confidence, cost_usd, error_message, output_preview
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+        `,
+        [
+          callId,
+          callerId.toLowerCase(),
+          taskType,
+          outcome.strategy,
+          c.model,
+          c.model === firstFinishedModel,
+          c.model === outcome.selected.model,
+          c.latencyMs,
+          c.confidence ?? null,
+          c.cost ?? null,
+          c.errorMessage ?? null,
+          c.output?.slice(0, 512) ?? null,
+        ]
+      );
+    } catch (err) {
+      logger.warn({ err, model: c.model }, 'race-mode: audit insert failed');
+    }
+  }
+}
+
+/** Aggregate race statistics for the dashboard. */
+export async function getRaceStats(
+  db: Pool,
+  hoursBack: number = 24
+): Promise<{
+  totalRaces: number;
+  byStrategy: Record<string, number>;
+  fastestModel: { model: string; wins: number } | null;
+  highestConfidenceModel: { model: string; avg: number } | null;
+}> {
+  try {
+    const [total, byStrategy, fastest, byConfidence] = await Promise.all([
+      db.query(
+        `SELECT COUNT(DISTINCT call_id)::INT AS n FROM race_mode_results
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+        [hoursBack]
+      ),
+      db.query(
+        `SELECT strategy, COUNT(DISTINCT call_id)::INT AS n FROM race_mode_results
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY strategy`,
+        [hoursBack]
+      ),
+      db.query(
+        `SELECT candidate_model AS model, COUNT(*)::INT AS wins FROM race_mode_results
+         WHERE finished_first = true AND created_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY candidate_model ORDER BY wins DESC LIMIT 1`,
+        [hoursBack]
+      ),
+      db.query(
+        `SELECT candidate_model AS model, AVG(confidence)::NUMERIC(4,2) AS avg
+         FROM race_mode_results
+         WHERE confidence IS NOT NULL AND created_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY candidate_model ORDER BY avg DESC LIMIT 1`,
+        [hoursBack]
+      ),
+    ]);
+
+    const byStrategyMap: Record<string, number> = {};
+    for (const row of byStrategy.rows) byStrategyMap[row.strategy] = parseInt(row.n, 10) || 0;
+
+    return {
+      totalRaces: parseInt(total.rows[0]?.n ?? '0', 10),
+      byStrategy: byStrategyMap,
+      fastestModel: fastest.rows[0] ? { model: fastest.rows[0].model, wins: parseInt(fastest.rows[0].wins, 10) } : null,
+      highestConfidenceModel: byConfidence.rows[0]
+        ? { model: byConfidence.rows[0].model, avg: parseFloat(byConfidence.rows[0].avg) }
+        : null,
+    };
+  } catch (err) {
+    logger.warn({ err }, 'race-mode: stats failed (table missing?)');
+    return { totalRaces: 0, byStrategy: {}, fastestModel: null, highestConfidenceModel: null };
+  }
+}
diff --git a/packages/gateway/src/modules/report-generator.ts b/packages/gateway/src/modules/report-generator.ts
new file mode 100644
index 0000000..994f3e8
--- /dev/null
+++ b/packages/gateway/src/modules/report-generator.ts
@@ -0,0 +1,218 @@
+/**
+ * Monthly Report Generator
+ *
+ * Renders a print-friendly HTML report (intended to be saved as PDF via the
+ * browser's print dialog). Includes hero counters, savings breakdown by
+ * source, top models, top callers, achievements unlocked this month, and
+ * the activity heatmap.
+ *
+ * Going via HTML+print-CSS sidesteps any need for an external PDF library
+ * — the user clicks the gateway's "Print to PDF" link and saves the page.
+ */
+import type { Pool } from 'pg';
+import { getComprehensiveSavings } from './savings-calculator.js';
+import { getBuddyState, getAchievements } from './gamification.js';
+
+function formatCost(c: number): string {
+  if (c === 0) return '$0.00';
+  if (c < 0.01) return `$${c.toFixed(6)}`;
+  if (c < 1) return `$${c.toFixed(4)}`;
+  return `$${c.toFixed(2)}`;
+}
+function fmtNum(n: number): string { return n.toLocaleString(); }
+function fmtPct(n: number): string { return `${(n * 100).toFixed(1)}%`; }
+
+export async function generateMonthlyReport(
+  db: Pool,
+  year: number,
+  month: number
+): Promise<string> {
+  const monthStart = new Date(Date.UTC(year, month - 1, 1));
+  const monthEnd = new Date(Date.UTC(year, month, 1));
+  const hoursBack = Math.ceil((Date.now() - monthStart.getTime()) / 3600_000);
+  const monthName = monthStart.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+
+  // Pull all the data points
+  const [savings, buddy, achievements, monthRows, modelRows, callerRows] = await Promise.all([
+    getComprehensiveSavings(db, hoursBack),
+    getBuddyState(db, 'gateway'),
+    getAchievements(db),
+    db.query(`
+      SELECT COUNT(*)::INT AS req,
+             COALESCE(SUM(tokens_in + tokens_out), 0)::BIGINT AS tokens,
+             COALESCE(AVG(latency_ms), 0)::INT AS avg_lat,
+             COALESCE(SUM(cost_usd), 0)::NUMERIC AS cost,
+             SUM(CASE WHEN status='approved' THEN 1 ELSE 0 END)::FLOAT / NULLIF(COUNT(*),0) AS success_rate
+      FROM request_tracking
+      WHERE created_at >= $1 AND created_at < $2
+    `, [monthStart, monthEnd]),
+    db.query(`
+      SELECT model, COUNT(*)::INT AS cnt
+      FROM request_tracking
+      WHERE created_at >= $1 AND created_at < $2
+      GROUP BY model ORDER BY cnt DESC LIMIT 8
+    `, [monthStart, monthEnd]),
+    db.query(`
+      SELECT caller_id, COUNT(*)::INT AS cnt, COALESCE(SUM(cost_usd), 0)::NUMERIC AS cost
+      FROM request_tracking
+      WHERE created_at >= $1 AND created_at < $2
+      GROUP BY caller_id ORDER BY cnt DESC LIMIT 8
+    `, [monthStart, monthEnd]),
+  ]);
+
+  const monthStats = monthRows.rows[0] ?? {};
+  const totalReq = parseInt(monthStats.req ?? '0', 10);
+  const totalTokens = parseInt(monthStats.tokens ?? '0', 10);
+  const monthCost = parseFloat(monthStats.cost ?? '0');
+  const successRate = parseFloat(monthStats.success_rate ?? '0');
+  const avgLat = parseInt(monthStats.avg_lat ?? '0', 10);
+
+  const newAchievements = achievements.unlocked
+    .filter(() => true)  // all unlocked are shown; "this month" filter would need timestamp
+    .slice(0, 12);
+
+  const html = /* html */ `
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>LLM Gateway · Monthly Report · ${monthName}</title>
+<style>
+  @page { size: A4; margin: 18mm 16mm; }
+  body { font-family: 'Inter', -apple-system, sans-serif; font-size: 11pt; color: #24313d; line-height: 1.5; }
+  h1 { font-size: 22pt; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4pt; color: #0f766e; }
+  h2 { font-size: 13pt; font-weight: 600; margin: 16pt 0 8pt; padding-bottom: 4pt; border-bottom: 1pt solid #d6e0e7; color: #0f766e; }
+  h2::before { content: '// '; }
+  .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 8pt; letter-spacing: 0.16em; text-transform: uppercase; color: #667684; }
+  .hero { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8pt; margin: 12pt 0 18pt; }
+  .hero-tile { padding: 10pt; border: 0.5pt solid #d6e0e7; background: #f4f7fa; }
+  .hero-num { font-family: 'JetBrains Mono', monospace; font-size: 22pt; font-weight: 700; color: #0f766e; line-height: 1; }
+  .hero-label { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em; color: #667684; margin-bottom: 4pt; }
+  table { width: 100%; border-collapse: collapse; margin: 8pt 0; font-size: 10pt; }
+  th, td { padding: 4pt 8pt; border-bottom: 0.3pt solid #d6e0e7; text-align: left; }
+  th { font-weight: 600; color: #667684; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em; }
+  td.num { font-family: 'JetBrains Mono', monospace; text-align: right; }
+  .axes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4pt; }
+  .axis { padding: 8pt; border: 0.5pt solid #d6e0e7; background: #f4f7fa; text-align: center; }
+  .axis-cost { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11pt; color: #0f766e; }
+  .axis-label { font-size: 7pt; color: #667684; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4pt; }
+  .ach { display: inline-block; padding: 4pt 8pt; margin: 2pt; border: 0.5pt solid #0f766e; background: #ecfdf5; font-size: 9pt; }
+  .footer { margin-top: 24pt; padding-top: 8pt; border-top: 0.3pt solid #d6e0e7; font-size: 8pt; color: #93a1ad; text-align: center; }
+  .ascii-buddy { font-family: 'JetBrains Mono', monospace; font-size: 9pt; line-height: 1; white-space: pre; }
+  .savings-vs { display: flex; gap: 8pt; align-items: center; margin: 12pt 0; }
+  .savings-vs > div { flex: 1; padding: 10pt; border: 0.5pt solid #d6e0e7; }
+  .savings-vs .without { background: #fef2f2; }
+  .savings-vs .with { background: #ecfdf5; }
+  .savings-vs .arrow { flex: 0; font-size: 14pt; color: #93a1ad; }
+  .num-amount { font-family: 'JetBrains Mono', monospace; font-size: 16pt; font-weight: 700; }
+  @media print { .no-print { display: none; } body { background: white; } }
+</style>
+</head>
+<body>
+
+<div class="no-print" style="margin-bottom: 8pt; padding: 8pt; background: #ecfdf5; border-left: 3pt solid #0f766e;">
+  <strong>Save as PDF</strong>: Press <code>Cmd/Ctrl+P</code> → choose "Save as PDF".
+</div>
+
+<header>
+  <div class="eyebrow">monthly report</div>
+  <h1>${monthName}</h1>
+  <div style="font-family: 'JetBrains Mono', monospace; font-size: 9pt; color: #667684;">
+    LLM Gateway · ${new Date().toISOString().split('T')[0]}
+  </div>
+</header>
+
+<div class="hero">
+  <div class="hero-tile">
+    <div class="hero-label">requests routed</div>
+    <div class="hero-num">${fmtNum(totalReq)}</div>
+  </div>
+  <div class="hero-tile">
+    <div class="hero-label">tokens processed</div>
+    <div class="hero-num">${fmtNum(totalTokens)}</div>
+  </div>
+  <div class="hero-tile">
+    <div class="hero-label">cost saved</div>
+    <div class="hero-num">${formatCost(savings.totalCostSaved)}</div>
+  </div>
+</div>
+
+<h2>Cost Analysis</h2>
+<div class="savings-vs">
+  <div class="without">
+    <div class="hero-label">without gateway</div>
+    <div class="num-amount" style="color: #b42318;">${formatCost(savings.costWithoutGateway)}</div>
+  </div>
+  <div class="arrow">→</div>
+  <div class="with">
+    <div class="hero-label">with gateway</div>
+    <div class="num-amount" style="color: #15803d;">${formatCost(savings.costWithGateway)}</div>
+  </div>
+</div>
+<p>Saved <strong>${formatCost(savings.costWithoutGateway - savings.costWithGateway)}</strong> through cache hits, compression, subscription bridges, local routing, and race-mode optimization.</p>
+
+<h2>Savings by Source</h2>
+<div class="axes">
+  <div class="axis"><div class="axis-cost">${formatCost(savings.bySource.cache.cost)}</div><div class="axis-label">⚡ Cache</div></div>
+  <div class="axis"><div class="axis-cost">${formatCost(savings.bySource.compression.cost)}</div><div class="axis-label">🗜 Compression</div></div>
+  <div class="axis"><div class="axis-cost">${formatCost(savings.bySource.subscriptionBridge.cost)}</div><div class="axis-label">🌉 Sub. Bridges</div></div>
+  <div class="axis"><div class="axis-cost">${formatCost(savings.bySource.localRouting.cost)}</div><div class="axis-label">🏠 Local</div></div>
+  <div class="axis"><div class="axis-cost">${formatCost(savings.bySource.raceMode.cost)}</div><div class="axis-label">🏁 Race</div></div>
+</div>
+
+<h2>Activity Summary</h2>
+<table>
+  <tr><th>Metric</th><th>Value</th></tr>
+  <tr><td>Total requests</td><td class="num">${fmtNum(totalReq)}</td></tr>
+  <tr><td>Average latency</td><td class="num">${fmtNum(avgLat)} ms</td></tr>
+  <tr><td>Success rate</td><td class="num">${fmtPct(successRate)}</td></tr>
+  <tr><td>Cost actually paid</td><td class="num">${formatCost(monthCost)}</td></tr>
+</table>
+
+<h2>Top Models This Month</h2>
+<table>
+  <tr><th>Model</th><th>Requests</th><th>Share</th></tr>
+  ${modelRows.rows.map((r: any) => `
+    <tr>
+      <td><code>${r.model}</code></td>
+      <td class="num">${fmtNum(parseInt(r.cnt,10))}</td>
+      <td class="num">${totalReq > 0 ? ((parseInt(r.cnt,10)/totalReq)*100).toFixed(1) : 0}%</td>
+    </tr>
+  `).join('')}
+</table>
+
+<h2>Top Callers This Month</h2>
+<table>
+  <tr><th>Caller</th><th>Requests</th><th>Cost</th></tr>
+  ${callerRows.rows.map((r: any) => `
+    <tr>
+      <td><code>${r.caller_id}</code></td>
+      <td class="num">${fmtNum(parseInt(r.cnt,10))}</td>
+      <td class="num">${formatCost(parseFloat(r.cost))}</td>
+    </tr>
+  `).join('')}
+</table>
+
+<h2>Achievements Unlocked</h2>
+<div>
+  ${newAchievements.map((a) => `<span class="ach">${a.icon} ${a.title}</span>`).join('')}
+  ${newAchievements.length === 0 ? '<em>No achievements unlocked yet — keep using the gateway!</em>' : ''}
+</div>
+
+<h2>Buddy Status</h2>
+<div style="display: flex; gap: 12pt; align-items: center; padding: 10pt; border: 0.5pt solid #d6e0e7;">
+  <div class="ascii-buddy">${buddy.asciiArt.join('\n')}</div>
+  <div>
+    <strong>${buddy.name}</strong> · ${buddy.species} · ${buddy.stage}<br>
+    Level ${buddy.level} · XP ${fmtNum(buddy.xp)}/${fmtNum(buddy.xpForNextLevel)}<br>
+    Mood: ${buddy.mood} · Streak: ${buddy.streakDays} days<br>
+    <em>"${buddy.speech}"</em>
+  </div>
+</div>
+
+<div class="footer">
+  Generated by LLM Gateway · ${new Date().toISOString()} · llm-gateway.context-x.org
+</div>
+
+</body></html>`;
+  return html;
+}
diff --git a/packages/gateway/src/modules/request-logger.ts b/packages/gateway/src/modules/request-logger.ts
index c4e56e9..ee281fc 100644
--- a/packages/gateway/src/modules/request-logger.ts
+++ b/packages/gateway/src/modules/request-logger.ts
@@ -109,6 +109,11 @@ export class RequestLogger {
       cost_usd: number;
       latency_ms: number;
       fallback_used: boolean;
+      compression_mode?: string;
+      compression_tokens_before?: number;
+      compression_tokens_after?: number;
+      compression_tokens_saved?: number;
+      compression_savings_pct?: number;
       error_message?: string;
       created_at: string;
     }>
@@ -116,22 +121,35 @@ export class RequestLogger {
     const result = await this.db.query(
       `
       SELECT
-        request_id,
-        caller_id as caller,
-        task_type,
-        model,
-        status,
-        confidence_score,
-        tokens_in,
-        tokens_out,
-        cost_usd,
-        latency_ms,
-        fallback_used,
-        error_message,
-        created_at
-      FROM request_tracking
-      WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
-      ORDER BY created_at DESC
+        rt.request_id,
+        rt.caller_id as caller,
+        rt.task_type,
+        rt.model,
+        rt.status,
+        rt.confidence_score,
+        rt.tokens_in,
+        rt.tokens_out,
+        rt.cost_usd,
+        rt.latency_ms,
+        rt.fallback_used,
+        tv.mode as compression_mode,
+        tv.tokens_before as compression_tokens_before,
+        tv.tokens_after as compression_tokens_after,
+        GREATEST(COALESCE(tv.tokens_before, 0) - COALESCE(tv.tokens_after, 0), 0) as compression_tokens_saved,
+        tv.savings_pct as compression_savings_pct,
+        rt.error_message,
+        rt.created_at
+      FROM request_tracking rt
+      LEFT JOIN LATERAL (
+        SELECT mode, tokens_before, tokens_after, savings_pct
+        FROM tokenvault_metrics
+        WHERE tool_used = 'gateway'
+          AND file_path = rt.request_id
+        ORDER BY created_at DESC
+        LIMIT 1
+      ) tv ON true
+      WHERE rt.created_at > NOW() - MAKE_INTERVAL(hours => $1)
+      ORDER BY rt.created_at DESC
       LIMIT $2
       `,
       [offsetHours, limit]
@@ -149,6 +167,11 @@ export class RequestLogger {
       cost_usd: row.cost_usd,
       latency_ms: row.latency_ms,
       fallback_used: row.fallback_used,
+      compression_mode: row.compression_mode,
+      compression_tokens_before: row.compression_tokens_before ? parseInt(row.compression_tokens_before, 10) : undefined,
+      compression_tokens_after: row.compression_tokens_after ? parseInt(row.compression_tokens_after, 10) : undefined,
+      compression_tokens_saved: row.compression_tokens_saved ? parseInt(row.compression_tokens_saved, 10) : 0,
+      compression_savings_pct: row.compression_savings_pct ? parseFloat(row.compression_savings_pct) : 0,
       error_message: row.error_message,
       created_at: row.created_at
     }));
@@ -160,6 +183,17 @@ export class RequestLogger {
   async getMetrics(bucketMinutes: number = 60): Promise<{
     total_requests: number;
     total_cost: number;
+    estimated_api_cost: number;
+    estimated_api_cost_avoided: number;
+    total_tokens_in: number;
+    total_tokens_out: number;
+    total_tokens: number;
+    compression_operations: number;
+    compression_tokens_before: number;
+    compression_tokens_after: number;
+    compression_tokens_saved: number;
+    compression_rate: number;
+    cache_hit_rate: number;
     avg_latency: number;
     success_rate: number;
     avg_confidence: number;
@@ -177,13 +211,15 @@ export class RequestLogger {
       `
       SELECT
         COUNT(*) as total_requests,
-        SUM(cost_usd) as total_cost,
-        AVG(latency_ms) as avg_latency,
-        SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END)::FLOAT / COUNT(*) as success_rate,
-        AVG(confidence_score) as avg_confidence,
-        SUM(CASE WHEN fallback_used = true THEN 1 ELSE 0 END)::FLOAT / COUNT(*) as fallback_percentage
+        COALESCE(SUM(cost_usd), 0) as total_cost,
+        COALESCE(SUM(tokens_in), 0) as total_tokens_in,
+        COALESCE(SUM(tokens_out), 0) as total_tokens_out,
+        COALESCE(AVG(latency_ms), 0) as avg_latency,
+        CASE WHEN COUNT(*) = 0 THEN 0 ELSE SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END)::FLOAT / COUNT(*) END as success_rate,
+        COALESCE(AVG(confidence_score), 0) as avg_confidence,
+        CASE WHEN COUNT(*) = 0 THEN 0 ELSE SUM(CASE WHEN fallback_used = true THEN 1 ELSE 0 END)::FLOAT / COUNT(*) END as fallback_percentage
       FROM request_tracking
-      WHERE created_at > NOW() - MAKE_INTERVAL(mins => $1)
+      WHERE created_at > NOW() - ($1 * INTERVAL '1 minute')
       `,
       [bucketMinutes]
     );
@@ -192,7 +228,7 @@ export class RequestLogger {
       `
       SELECT caller_id as caller, COUNT(*) as count
       FROM request_tracking
-      WHERE created_at > NOW() - MAKE_INTERVAL(mins => $1)
+      WHERE created_at > NOW() - ($1 * INTERVAL '1 minute')
       GROUP BY caller_id
       ORDER BY count DESC
       LIMIT 5
@@ -204,7 +240,7 @@ export class RequestLogger {
       `
       SELECT model, COUNT(*) as count
       FROM request_tracking
-      WHERE created_at > NOW() - MAKE_INTERVAL(mins => $1)
+      WHERE created_at > NOW() - ($1 * INTERVAL '1 minute')
       GROUP BY model
       ORDER BY count DESC
       LIMIT 5
@@ -224,11 +260,47 @@ export class RequestLogger {
       [bucketMinutes]
     );
 
+    const compressionResult = await this.db.query(
+      `
+      SELECT
+        COUNT(*) as operations,
+        COALESCE(SUM(tokens_before), 0) as tokens_before,
+        COALESCE(SUM(tokens_after), 0) as tokens_after,
+        COALESCE(SUM(GREATEST(tokens_before - tokens_after, 0)), 0) as tokens_saved
+      FROM tokenvault_metrics
+      WHERE tool_used = 'gateway'
+        AND created_at > NOW() - ($1 * INTERVAL '1 minute')
+      `,
+      [bucketMinutes]
+    );
+
     const metrics = metricsResult.rows[0];
+    const totalTokensIn = parseInt(metrics.total_tokens_in, 10) || 0;
+    const totalTokensOut = parseInt(metrics.total_tokens_out, 10) || 0;
+    const totalTokens = totalTokensIn + totalTokensOut;
+    const compression = compressionResult.rows[0] ?? {};
+    const compressionTokensBefore = parseInt(compression.tokens_before, 10) || 0;
+    const compressionTokensAfter = parseInt(compression.tokens_after, 10) || 0;
+    const compressionTokensSaved = parseInt(compression.tokens_saved, 10) || 0;
+    const referenceInputCostPer1k = parseFloat(process.env['REFERENCE_INPUT_COST_PER_1K'] ?? '0.005');
+    const referenceOutputCostPer1k = parseFloat(process.env['REFERENCE_OUTPUT_COST_PER_1K'] ?? '0.015');
+    const estimatedApiCost = (totalTokensIn / 1000) * referenceInputCostPer1k + (totalTokensOut / 1000) * referenceOutputCostPer1k;
+    const totalCost = parseFloat(metrics.total_cost) || 0;
 
     return {
       total_requests: parseInt(metrics.total_requests) || 0,
-      total_cost: parseFloat(metrics.total_cost) || 0,
+      total_cost: totalCost,
+      estimated_api_cost: estimatedApiCost,
+      estimated_api_cost_avoided: Math.max(0, estimatedApiCost - totalCost),
+      total_tokens_in: totalTokensIn,
+      total_tokens_out: totalTokensOut,
+      total_tokens: totalTokens,
+      compression_operations: parseInt(compression.operations, 10) || 0,
+      compression_tokens_before: compressionTokensBefore,
+      compression_tokens_after: compressionTokensAfter,
+      compression_tokens_saved: compressionTokensSaved,
+      compression_rate: compressionTokensBefore > 0 ? compressionTokensSaved / compressionTokensBefore : 0,
+      cache_hit_rate: 0,
       avg_latency: Math.round(parseFloat(metrics.avg_latency) || 0),
       success_rate: parseFloat(metrics.success_rate) || 0,
       avg_confidence: parseFloat(metrics.avg_confidence) || 0,
diff --git a/packages/gateway/src/modules/response-cache.ts b/packages/gateway/src/modules/response-cache.ts
new file mode 100644
index 0000000..0b2a70e
--- /dev/null
+++ b/packages/gateway/src/modules/response-cache.ts
@@ -0,0 +1,390 @@
+/**
+ * Response Cache
+ *
+ * Two-tier cache:
+ *   • Tier 1 (exact)    — sha256 of canonical request → instant lookup, $0 cost
+ *   • Tier 2 (semantic) — embedding cosine similarity, served via in-process
+ *                          rerank when threshold is met. Implemented in v1 as
+ *                          a string-similarity heuristic until pgvector is
+ *                          provisioned. The interface is forward-compatible.
+ *
+ * Cache hits skip the entire LLM pipeline. Each hit increments the saved-cost
+ * counter so the dashboard can show real savings in real time.
+ */
+
+import { createHash } from 'crypto';
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+import { embed, vectorToPgLiteral, EMBEDDING_DIMENSION } from './embedding-client.js';
+
+export interface CacheableRequest {
+  caller: string;
+  task_type?: string;
+  model?: string;
+  system?: string;
+  input: string;
+}
+
+export interface CachedResponse {
+  id: number;
+  cacheKey: string;
+  responseJson: Record<string, unknown>;
+  costWhenCached: number;
+  tokensIn: number;
+  tokensOut: number;
+  hitCount: number;
+  ageSeconds: number;
+}
+
+/**
+ * Compute a stable cache key for a request. Whitespace is collapsed and
+ * lowercase used for the hash so functionally identical requests collide.
+ */
+export function computeCacheKey(req: CacheableRequest): string {
+  const canonical = [
+    `caller=${req.caller.trim().toLowerCase()}`,
+    `task=${(req.task_type ?? '').trim().toLowerCase()}`,
+    `model=${(req.model ?? '').trim().toLowerCase()}`,
+    `system=${(req.system ?? '').trim().replace(/\s+/g, ' ').slice(0, 4096)}`,
+    `input=${req.input.trim().replace(/\s+/g, ' ').slice(0, 16_384)}`,
+  ].join('\n');
+  return createHash('sha256').update(canonical).digest('hex');
+}
+
+/** Look up an exact cache hit. Returns null when no fresh entry exists. */
+export async function getCachedResponse(
+  db: Pool,
+  cacheKey: string
+): Promise<CachedResponse | null> {
+  try {
+    const result = await db.query(
+      `
+      SELECT id, cache_key, response_json, cost_when_cached, tokens_in, tokens_out,
+             hit_count, EXTRACT(EPOCH FROM (NOW() - created_at))::INT AS age_seconds,
+             ttl_seconds
+      FROM response_cache
+      WHERE cache_key = $1
+        AND (created_at + (ttl_seconds * INTERVAL '1 second')) > NOW()
+      LIMIT 1
+      `,
+      [cacheKey]
+    );
+    const row = result.rows[0];
+    if (!row) return null;
+    return {
+      id: Number(row.id),
+      cacheKey: row.cache_key,
+      responseJson: row.response_json,
+      costWhenCached: parseFloat(row.cost_when_cached) || 0,
+      tokensIn: parseInt(row.tokens_in, 10) || 0,
+      tokensOut: parseInt(row.tokens_out, 10) || 0,
+      hitCount: parseInt(row.hit_count, 10) || 0,
+      ageSeconds: parseInt(row.age_seconds, 10) || 0,
+    };
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: getCachedResponse failed (table missing?)');
+    return null;
+  }
+}
+
+/**
+ * Look up a fuzzy/semantic match using pgvector cosine similarity.
+ * Returns null when:
+ *   • embedding generation fails (Ollama down, model missing)
+ *   • no entry crosses the similarity threshold
+ *   • the table doesn't yet have the embedding column
+ */
+export async function getSemanticCachedResponse(
+  db: Pool,
+  caller: string,
+  taskType: string | undefined,
+  inputText: string,
+  similarityThreshold: number = 0.92
+): Promise<(CachedResponse & { similarity: number }) | null> {
+  const vec = await embed(inputText);
+  if (!vec) return null;
+
+  try {
+    const result = await db.query(
+      `
+      SELECT id, cache_key, response_json, cost_when_cached, tokens_in, tokens_out,
+             hit_count, EXTRACT(EPOCH FROM (NOW() - created_at))::INT AS age_seconds,
+             1 - (embedding <=> $1::vector) AS similarity
+      FROM response_cache
+      WHERE caller_id = $2
+        AND ($3::TEXT IS NULL OR task_type = $3)
+        AND embedding IS NOT NULL
+        AND (created_at + (ttl_seconds * INTERVAL '1 second')) > NOW()
+      ORDER BY embedding <=> $1::vector ASC
+      LIMIT 1
+      `,
+      [vectorToPgLiteral(vec), caller.trim().toLowerCase(), taskType ?? null]
+    );
+    const row = result.rows[0];
+    if (!row) return null;
+    const sim = parseFloat(row.similarity);
+    if (isNaN(sim) || sim < similarityThreshold) return null;
+    return {
+      id: Number(row.id),
+      cacheKey: row.cache_key,
+      responseJson: row.response_json,
+      costWhenCached: parseFloat(row.cost_when_cached) || 0,
+      tokensIn: parseInt(row.tokens_in, 10) || 0,
+      tokensOut: parseInt(row.tokens_out, 10) || 0,
+      hitCount: parseInt(row.hit_count, 10) || 0,
+      ageSeconds: parseInt(row.age_seconds, 10) || 0,
+      similarity: sim,
+    };
+  } catch (err) {
+    logger.debug({ err }, 'response-cache: getSemanticCachedResponse failed (extension missing?)');
+    return null;
+  }
+}
+
+/** Persist a response. Idempotent on conflict — increments TTL window instead. */
+export async function setCachedResponse(
+  db: Pool,
+  req: CacheableRequest,
+  response: Record<string, unknown>,
+  meta: { cost: number; tokensIn: number; tokensOut: number; ttlSeconds?: number }
+): Promise<void> {
+  const cacheKey = computeCacheKey(req);
+  const ttl = meta.ttlSeconds ?? 86_400;
+  // Generate embedding async — fire & forget compatible
+  const vec = await embed(req.input);
+  const embedLiteral = vec && vec.length === EMBEDDING_DIMENSION ? vectorToPgLiteral(vec) : null;
+  try {
+    await db.query(
+      `
+      INSERT INTO response_cache
+        (cache_key, caller_id, task_type, model, input_preview,
+         response_json, cost_when_cached, tokens_in, tokens_out, ttl_seconds, embedding)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11::vector)
+      ON CONFLICT (cache_key) DO UPDATE SET
+        response_json    = EXCLUDED.response_json,
+        cost_when_cached = EXCLUDED.cost_when_cached,
+        tokens_in        = EXCLUDED.tokens_in,
+        tokens_out       = EXCLUDED.tokens_out,
+        ttl_seconds      = EXCLUDED.ttl_seconds,
+        embedding        = COALESCE(EXCLUDED.embedding, response_cache.embedding),
+        created_at       = NOW()
+      `,
+      [
+        cacheKey,
+        req.caller.trim().toLowerCase(),
+        req.task_type ?? null,
+        req.model ?? null,
+        req.input.slice(0, 1024),
+        JSON.stringify(response),
+        meta.cost,
+        meta.tokensIn,
+        meta.tokensOut,
+        ttl,
+        embedLiteral,
+      ]
+    );
+  } catch (err) {
+    // Retry without embedding column when the extension hasn't migrated yet
+    logger.debug({ err }, 'response-cache: setCachedResponse with embedding failed, retrying without');
+    try {
+      await db.query(
+        `
+        INSERT INTO response_cache
+          (cache_key, caller_id, task_type, model, input_preview,
+           response_json, cost_when_cached, tokens_in, tokens_out, ttl_seconds)
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+        ON CONFLICT (cache_key) DO UPDATE SET
+          response_json    = EXCLUDED.response_json,
+          cost_when_cached = EXCLUDED.cost_when_cached,
+          tokens_in        = EXCLUDED.tokens_in,
+          tokens_out       = EXCLUDED.tokens_out,
+          ttl_seconds      = EXCLUDED.ttl_seconds,
+          created_at       = NOW()
+        `,
+        [
+          cacheKey,
+          req.caller.trim().toLowerCase(),
+          req.task_type ?? null,
+          req.model ?? null,
+          req.input.slice(0, 1024),
+          JSON.stringify(response),
+          meta.cost,
+          meta.tokensIn,
+          meta.tokensOut,
+          ttl,
+        ]
+      );
+    } catch (err2) {
+      logger.warn({ err: err2 }, 'response-cache: setCachedResponse failed');
+    }
+  }
+}
+
+/** Record a cache hit (atomic increment). */
+export async function recordCacheHit(db: Pool, cachedId: number): Promise<void> {
+  try {
+    await db.query(
+      `
+      UPDATE response_cache
+      SET hit_count    = hit_count + 1,
+          cost_saved   = cost_saved + cost_when_cached,
+          tokens_saved = tokens_saved + tokens_in + tokens_out,
+          last_hit_at  = NOW()
+      WHERE id = $1
+      `,
+      [cachedId]
+    );
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: recordCacheHit failed');
+  }
+}
+
+/** Aggregate savings across all cache entries for the dashboard. */
+export async function getCacheSavings(
+  db: Pool,
+  hoursBack: number = 24
+): Promise<{
+  totalHits: number;
+  totalCostSaved: number;
+  totalTokensSaved: number;
+  uniqueEntries: number;
+  topCallers: Array<{ caller: string; hits: number; saved: number }>;
+  hitRatePercent: number;
+}> {
+  try {
+    const [totalRow, callerRows, ratioRow] = await Promise.all([
+      db.query(
+        `SELECT
+            COALESCE(SUM(hit_count), 0)::INT     AS total_hits,
+            COALESCE(SUM(cost_saved), 0)::NUMERIC AS total_cost_saved,
+            COALESCE(SUM(tokens_saved), 0)::BIGINT AS total_tokens_saved,
+            COUNT(*)::INT                         AS unique_entries
+         FROM response_cache
+         WHERE last_hit_at > NOW() - MAKE_INTERVAL(hours => $1)
+            OR created_at  > NOW() - MAKE_INTERVAL(hours => $1)`,
+        [hoursBack]
+      ),
+      db.query(
+        `SELECT caller_id, SUM(hit_count)::INT AS hits, SUM(cost_saved)::NUMERIC AS saved
+         FROM response_cache
+         WHERE last_hit_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY caller_id
+         ORDER BY hits DESC
+         LIMIT 5`,
+        [hoursBack]
+      ),
+      // Cache hit-rate = hits / (hits + new requests in same window)
+      db.query(
+        `SELECT
+            COALESCE((SELECT SUM(hit_count) FROM response_cache
+                      WHERE last_hit_at > NOW() - MAKE_INTERVAL(hours => $1)), 0)::INT AS hits,
+            (SELECT COUNT(*) FROM request_tracking
+              WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1))::INT             AS total_requests`,
+        [hoursBack]
+      ),
+    ]);
+
+    const t = totalRow.rows[0];
+    const r = ratioRow.rows[0];
+    const totalReq = parseInt(r?.total_requests ?? '0', 10);
+    const hits = parseInt(t?.total_hits ?? '0', 10);
+    const hitRate = totalReq > 0 ? (hits / (totalReq + hits)) * 100 : 0;
+
+    return {
+      totalHits: hits,
+      totalCostSaved: parseFloat(t?.total_cost_saved ?? '0'),
+      totalTokensSaved: parseInt(t?.total_tokens_saved ?? '0', 10),
+      uniqueEntries: parseInt(t?.unique_entries ?? '0', 10),
+      topCallers: callerRows.rows.map((row: any) => ({
+        caller: row.caller_id,
+        hits: parseInt(row.hits, 10) || 0,
+        saved: parseFloat(row.saved) || 0,
+      })),
+      hitRatePercent: parseFloat(hitRate.toFixed(2)),
+    };
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: getCacheSavings failed (table missing?)');
+    return {
+      totalHits: 0,
+      totalCostSaved: 0,
+      totalTokensSaved: 0,
+      uniqueEntries: 0,
+      topCallers: [],
+      hitRatePercent: 0,
+    };
+  }
+}
+
+/** Time-series buckets of cache savings for sparkline visualization. */
+export async function getSavingsTimeSeries(
+  db: Pool,
+  hoursBack: number = 24,
+  bucketMinutes: number = 60
+): Promise<Array<{ ts: string; costSaved: number; hits: number; tokensSaved: number }>> {
+  try {
+    const buckets = Math.ceil((hoursBack * 60) / bucketMinutes);
+    const result = await db.query(
+      `
+      WITH gs AS (
+        SELECT generate_series(
+          DATE_TRUNC('hour', NOW()) - ($1 || ' minutes')::INTERVAL * (s),
+          DATE_TRUNC('hour', NOW()),
+          ($1 || ' minutes')::INTERVAL
+        ) AS bucket_ts
+        FROM generate_series(0, $2 - 1) s
+      )
+      SELECT
+        gs.bucket_ts,
+        COALESCE(COUNT(rc.id), 0)::INT             AS hits,
+        COALESCE(SUM(rc.cost_when_cached), 0)::NUMERIC AS cost_saved,
+        COALESCE(SUM(rc.tokens_in + rc.tokens_out), 0)::INT AS tokens_saved
+      FROM gs
+      LEFT JOIN response_cache rc
+        ON DATE_TRUNC('hour', rc.last_hit_at) = gs.bucket_ts
+       AND rc.last_hit_at > NOW() - ($1 || ' minutes')::INTERVAL * $2
+      GROUP BY gs.bucket_ts
+      ORDER BY gs.bucket_ts ASC
+      `,
+      [bucketMinutes, buckets]
+    );
+    return result.rows.map((row: any) => ({
+      ts: row.bucket_ts.toISOString(),
+      costSaved: parseFloat(row.cost_saved) || 0,
+      hits: parseInt(row.hits, 10) || 0,
+      tokensSaved: parseInt(row.tokens_saved, 10) || 0,
+    }));
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: getSavingsTimeSeries failed');
+    return [];
+  }
+}
+
+/** Drop entries older than max-age days. Run from a periodic job. */
+export async function pruneStaleCacheEntries(db: Pool, maxAgeDays: number = 7): Promise<number> {
+  try {
+    const result = await db.query(
+      `DELETE FROM response_cache
+       WHERE created_at < NOW() - MAKE_INTERVAL(days => $1)
+         AND (last_hit_at IS NULL OR last_hit_at < NOW() - MAKE_INTERVAL(days => $1))`,
+      [maxAgeDays]
+    );
+    return result.rowCount ?? 0;
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: prune failed');
+    return 0;
+  }
+}
+
+/** Manual cache invalidation, e.g. when a caller hits "clear my cache". */
+export async function clearCacheForCaller(db: Pool, callerId: string): Promise<number> {
+  try {
+    const result = await db.query(
+      `DELETE FROM response_cache WHERE caller_id = $1`,
+      [callerId.trim().toLowerCase()]
+    );
+    return result.rowCount ?? 0;
+  } catch (err) {
+    logger.warn({ err }, 'response-cache: clearCacheForCaller failed');
+    return 0;
+  }
+}
diff --git a/packages/gateway/src/modules/savings-calculator.ts b/packages/gateway/src/modules/savings-calculator.ts
new file mode 100644
index 0000000..811415b
--- /dev/null
+++ b/packages/gateway/src/modules/savings-calculator.ts
@@ -0,0 +1,267 @@
+/**
+ * Savings Calculator
+ *
+ * Comprehensive savings accounting across ALL gateway mechanisms — not just
+ * cache hits. Lean-CTX measures file-context compression; we measure five
+ * orthogonal sources of value:
+ *
+ *   1. Response cache (exact + semantic match)
+ *   2. Compression pipeline (verbatim_compact, etc.)
+ *   3. Subscription-bridge implicit savings (calls via flat-rate Pro plan
+ *      vs. what they would have cost via paid API)
+ *   4. Model-tier routing (cheaper model used when sufficient)
+ *   5. Pool routing (avoided quota-out on a sub by switching to alternate)
+ *
+ * The dashboard now surfaces all five so the savings counter reflects the
+ * gateway's true value rather than only cache hits.
+ */
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+// Conservative API pricing snapshot (USD per 1k tokens). Used to compute
+// "what would this have cost via direct API". Update as pricing evolves.
+const API_PRICING = {
+  // Anthropic
+  'claude-opus-4-1':       { in: 0.015,  out: 0.075 },
+  'claude-sonnet-4-1':     { in: 0.003,  out: 0.015 },
+  'claude-haiku-3':        { in: 0.00025, out: 0.00125 },
+  // OpenAI
+  'gpt-5.1-codex':         { in: 0.005,  out: 0.020 },
+  'gpt-5.1-codex-mini':    { in: 0.0015, out: 0.006 },
+  'gpt-4-turbo':           { in: 0.010,  out: 0.030 },
+  'gpt-4':                 { in: 0.030,  out: 0.060 },
+  'gpt-3.5-turbo':         { in: 0.0005, out: 0.0015 },
+  // Google
+  'gemini-1.5-pro':        { in: 0.00125, out: 0.005 },
+  'gemini-1.5-flash':      { in: 0.000075, out: 0.0003 },
+} as const;
+
+/** Models that go through a flat-rate subscription bridge → marginal cost = $0 */
+const SUBSCRIPTION_MODEL_PATTERNS = [
+  /^claude-/i,         // Claude Code subscription
+  /^gpt-5\.1-codex/i,  // Codex CLI subscription
+  /^gpt-(4|3\.5)/i,    // ChatGPT Plus / Copilot subscription
+  /^gemini-/i,         // Gemini Advanced
+  /^github-copilot/i,  // GitHub Copilot
+  /^microsoft.365/i,   // M365 Copilot
+];
+
+function lookupApiPrice(model: string): { in: number; out: number } | null {
+  const m = model.toLowerCase();
+  // Exact match first
+  if (m in API_PRICING) return (API_PRICING as any)[m];
+  // Fuzzy match (claude-sonnet-4-1-something → claude-sonnet-4-1)
+  for (const key of Object.keys(API_PRICING)) {
+    if (m.startsWith(key)) return (API_PRICING as any)[key];
+  }
+  return null;
+}
+
+function isSubscriptionModel(model: string): boolean {
+  return SUBSCRIPTION_MODEL_PATTERNS.some((p) => p.test(model));
+}
+
+function isLocalModel(model: string): boolean {
+  return /^(qwen|llama|mistral|magatama|phi|nomic|gemma)/i.test(model);
+}
+
+export interface ComprehensiveSavings {
+  /** Total saved across all five mechanisms. */
+  totalCostSaved: number;
+  totalTokensSaved: number;
+  /** Per-source breakdown for the dashboard. */
+  bySource: {
+    cache: { tokens: number; cost: number; hits: number };
+    compression: { tokens: number; cost: number; calls: number };
+    subscriptionBridge: { tokens: number; cost: number; calls: number };
+    localRouting: { tokens: number; cost: number; calls: number };
+    raceMode: { tokens: number; cost: number; calls: number };
+  };
+  /** How much you would have paid for the same volume at API list prices. */
+  costWithoutGateway: number;
+  /** What you actually paid (real $). */
+  costWithGateway: number;
+  /** Time window. */
+  hoursBack: number;
+  /** Inputs that gave us this number. */
+  totals: { requests: number; tokensIn: number; tokensOut: number };
+}
+
+/**
+ * Compute comprehensive savings across all mechanisms.
+ *
+ * Strategy:
+ *   For each request, determine where it went and price it both ways:
+ *     - "Would-be cost"  = API list price for the model that handled it
+ *     - "Actual cost"    = $0 for subscription/local; cost_usd for paid API
+ *     - "Saved"          = would-be − actual
+ */
+export async function getComprehensiveSavings(
+  db: Pool,
+  hoursBack: number = 24
+): Promise<ComprehensiveSavings> {
+  const empty: ComprehensiveSavings = {
+    totalCostSaved: 0,
+    totalTokensSaved: 0,
+    bySource: {
+      cache: { tokens: 0, cost: 0, hits: 0 },
+      compression: { tokens: 0, cost: 0, calls: 0 },
+      subscriptionBridge: { tokens: 0, cost: 0, calls: 0 },
+      localRouting: { tokens: 0, cost: 0, calls: 0 },
+      raceMode: { tokens: 0, cost: 0, calls: 0 },
+    },
+    costWithoutGateway: 0,
+    costWithGateway: 0,
+    hoursBack,
+    totals: { requests: 0, tokensIn: 0, tokensOut: 0 },
+  };
+
+  try {
+    // 1) Cache hits
+    const cacheRow = await db.query(
+      `SELECT
+         COALESCE(SUM(hit_count), 0)::INT  AS hits,
+         COALESCE(SUM(cost_saved), 0)::NUMERIC AS cost,
+         COALESCE(SUM(tokens_saved), 0)::BIGINT AS tokens
+       FROM response_cache
+       WHERE last_hit_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+      [hoursBack]
+    );
+    empty.bySource.cache = {
+      hits: parseInt(cacheRow.rows[0]?.hits ?? '0', 10),
+      cost: parseFloat(cacheRow.rows[0]?.cost ?? '0'),
+      tokens: parseInt(cacheRow.rows[0]?.tokens ?? '0', 10),
+    };
+
+    // 2-4) All requests in the window, classified by routing
+    const reqRows = await db.query(
+      `SELECT model, tokens_in, tokens_out, cost_usd, fallback_used
+       FROM request_tracking
+       WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+      [hoursBack]
+    );
+
+    let totalReq = 0, totalIn = 0, totalOut = 0;
+    let withGateway = 0, withoutGateway = 0;
+
+    for (const r of reqRows.rows) {
+      const model = String(r.model ?? '');
+      const tokensIn = parseInt(r.tokens_in, 10) || 0;
+      const tokensOut = parseInt(r.tokens_out, 10) || 0;
+      const actualCost = parseFloat(r.cost_usd) || 0;
+
+      totalReq += 1;
+      totalIn += tokensIn;
+      totalOut += tokensOut;
+      withGateway += actualCost;
+
+      // Determine "would-be cost" — what this request would have cost at API
+      // list prices for the model that handled it (or its closest paid sibling).
+      const apiPrice = lookupApiPrice(model);
+      let wouldBeCost = 0;
+      if (apiPrice) {
+        wouldBeCost = (tokensIn / 1000) * apiPrice.in + (tokensOut / 1000) * apiPrice.out;
+      } else if (isLocalModel(model)) {
+        // Local model — compare against medium-tier paid API as opportunity cost
+        const ref = API_PRICING['gpt-3.5-turbo'];
+        wouldBeCost = (tokensIn / 1000) * ref.in + (tokensOut / 1000) * ref.out;
+      }
+      withoutGateway += wouldBeCost;
+
+      // Bucket the savings into a source
+      if (isSubscriptionModel(model)) {
+        empty.bySource.subscriptionBridge.calls += 1;
+        empty.bySource.subscriptionBridge.tokens += tokensIn + tokensOut;
+        empty.bySource.subscriptionBridge.cost += Math.max(0, wouldBeCost - actualCost);
+      } else if (isLocalModel(model)) {
+        empty.bySource.localRouting.calls += 1;
+        empty.bySource.localRouting.tokens += tokensIn + tokensOut;
+        empty.bySource.localRouting.cost += Math.max(0, wouldBeCost - actualCost);
+      }
+    }
+
+    // 5) Compression savings — pull from tokenvault_metrics if available
+    try {
+      const compRow = await db.query(
+        `SELECT
+           COUNT(*)::INT AS calls,
+           COALESCE(SUM(GREATEST(tokens_before - tokens_after, 0)), 0)::BIGINT AS tokens_saved
+         FROM tokenvault_metrics
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+           AND tool_used = 'gateway'`,
+        [hoursBack]
+      );
+      const tokensCompressed = parseInt(compRow.rows[0]?.tokens_saved ?? '0', 10);
+      // Conservative pricing: assume average input pricing of $0.001/1k tokens
+      const compCost = (tokensCompressed / 1000) * 0.001;
+      empty.bySource.compression = {
+        calls: parseInt(compRow.rows[0]?.calls ?? '0', 10),
+        tokens: tokensCompressed,
+        cost: compCost,
+      };
+    } catch (err) {
+      logger.debug({ err }, 'savings: compression aggregation skipped (table missing)');
+    }
+
+    // 6) Race mode — picked the faster/cheaper candidate, "saved" the loser cost
+    try {
+      const raceRow = await db.query(
+        `SELECT
+           COUNT(DISTINCT call_id)::INT AS races,
+           COALESCE(SUM(cost_usd) FILTER (WHERE selected = false), 0)::NUMERIC AS not_picked_cost
+         FROM race_mode_results
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+        [hoursBack]
+      );
+      empty.bySource.raceMode = {
+        calls: parseInt(raceRow.rows[0]?.races ?? '0', 10),
+        cost: parseFloat(raceRow.rows[0]?.not_picked_cost ?? '0'),
+        tokens: 0,
+      };
+    } catch (err) {
+      logger.debug({ err }, 'savings: race aggregation skipped (table missing)');
+    }
+
+    // 7) MCP tool-call compression — drop-in Lean-CTX replacement
+    try {
+      const mcpRow = await db.query(
+        `SELECT COUNT(*)::INT AS calls,
+                COALESCE(SUM(tokens_saved), 0)::BIGINT AS tokens_saved
+         FROM mcp_tool_calls
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+        [hoursBack]
+      );
+      const mcpTokens = parseInt(mcpRow.rows[0]?.tokens_saved ?? '0', 10);
+      const mcpCalls = parseInt(mcpRow.rows[0]?.calls ?? '0', 10);
+      // Tool-call savings cost-equivalence: Sonnet-equivalent pricing
+      // ($3/MTok input, $15/MTok output, weighted 60/40 in/out for tool returns).
+      // → ~$0.0046 per 1k tokens averaged. Matches Lean-CTX dashboard scale.
+      const mcpCost = (mcpTokens / 1_000_000) * (3.0 * 0.6 + 15.0 * 0.4);
+      // Add to the comprehensive picture as a new source bucket via compression entry
+      empty.bySource.compression.tokens += mcpTokens;
+      empty.bySource.compression.cost += mcpCost;
+      empty.bySource.compression.calls += mcpCalls;
+    } catch (err) {
+      logger.debug({ err }, 'savings: mcp tool aggregation skipped (table missing)');
+    }
+
+    empty.totalCostSaved =
+      empty.bySource.cache.cost +
+      empty.bySource.compression.cost +
+      empty.bySource.subscriptionBridge.cost +
+      empty.bySource.localRouting.cost +
+      empty.bySource.raceMode.cost;
+
+    empty.totalTokensSaved =
+      empty.bySource.cache.tokens +
+      empty.bySource.compression.tokens;
+
+    empty.costWithoutGateway = withoutGateway;
+    empty.costWithGateway = withGateway;
+    empty.totals = { requests: totalReq, tokensIn: totalIn, tokensOut: totalOut };
+  } catch (err) {
+    logger.warn({ err }, 'savings-calculator: comprehensive computation failed');
+  }
+
+  return empty;
+}
diff --git a/packages/gateway/src/modules/settings-store.ts b/packages/gateway/src/modules/settings-store.ts
new file mode 100644
index 0000000..ac6febe
--- /dev/null
+++ b/packages/gateway/src/modules/settings-store.ts
@@ -0,0 +1,214 @@
+/**
+ * Settings Store
+ *
+ * Persists user configuration (which subscriptions they have, which API
+ * providers they use, etc.) to a JSON file on disk. Sensitive fields like
+ * API keys are stored verbatim but never returned in plaintext from
+ * `getPublicSettings()` — only a `hasKey: true/false` flag is exposed.
+ */
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { z } from 'zod';
+import { logger } from '../observability/logger.js';
+
+const SettingsSchema = z.object({
+  /** How the gateway should pick providers: 'auto' uses all, others restrict the pool. */
+  routingMode: z.enum(['auto', 'subscription-only', 'api-only', 'local-only']).default('auto'),
+  /** Per-subscription configuration keyed by SubscriptionId. */
+  subscriptions: z
+    .record(
+      z.string(),
+      z.object({
+        enabled: z.boolean().default(true),
+        autoSpawn: z.boolean().default(true),
+        /**
+         * Optional remote bridge URL. When set, the gateway will route to this
+         * URL instead of trying to spawn a local bridge. Use this when the CLI
+         * subscription lives on a different machine than the gateway.
+         */
+        bridgeUrl: z.string().url().optional().or(z.literal('')),
+        notes: z.string().optional(),
+      })
+    )
+    .default({}),
+  /** Per-API-provider configuration keyed by provider name (cerebras, groq, …). */
+  apiProviders: z
+    .record(
+      z.string(),
+      z.object({
+        enabled: z.boolean().default(false),
+        apiKey: z.string().optional(),
+        baseUrl: z.string().optional(),
+        notes: z.string().optional(),
+      })
+    )
+    .default({}),
+  /** Local Ollama configuration. */
+  ollama: z
+    .object({
+      enabled: z.boolean().default(true),
+      baseUrl: z.string().default('http://localhost:11434'),
+    })
+    .default({ enabled: true, baseUrl: 'http://localhost:11434' }),
+  /**
+   * Simple Mode — for users who only use 1-2 subscriptions.
+   * Hides advanced tabs (providers, races, share, report, memory) and
+   * filters wallet/subscriptions to only show enabled providers.
+   */
+  ui: z
+    .object({
+      simpleMode: z.boolean().default(true),
+      hideEmptyProviders: z.boolean().default(true),
+      showTooltips: z.boolean().default(true),
+    })
+    .default({ simpleMode: true, hideEmptyProviders: true, showTooltips: true }),
+  /** ISO timestamp of last update. */
+  updatedAt: z.string().optional(),
+});
+
+export type Settings = z.infer<typeof SettingsSchema>;
+
+export interface PublicSettings extends Omit<Settings, 'apiProviders'> {
+  apiProviders: Record<string, { enabled: boolean; hasKey: boolean; baseUrl?: string; notes?: string }>;
+}
+
+const SETTINGS_PATH =
+  process.env['SETTINGS_PATH'] ?? join(process.env['HOME'] ?? '/root', '.llm-gateway', 'settings.json');
+
+const DEFAULT_SUBSCRIPTIONS: Settings['subscriptions'] = {
+  'claude-code': { enabled: true, autoSpawn: true },
+  'github-copilot': { enabled: true, autoSpawn: true },
+  'chatgpt': { enabled: true, autoSpawn: true },
+  'gemini': { enabled: true, autoSpawn: true },
+  'codex': { enabled: true, autoSpawn: true },
+  'aider': { enabled: true, autoSpawn: true },
+};
+
+function getDefaults(): Settings {
+  return SettingsSchema.parse({
+    routingMode: 'auto',
+    subscriptions: DEFAULT_SUBSCRIPTIONS,
+    ollama: { enabled: true, baseUrl: process.env['OLLAMA_BASE_URL'] ?? 'http://localhost:11434' },
+  });
+}
+
+/**
+ * Load settings from disk. Returns defaults when the file does not yet exist
+ * or fails to parse.
+ */
+export function loadSettings(): Settings {
+  try {
+    if (!existsSync(SETTINGS_PATH)) {
+      return getDefaults();
+    }
+    const raw = readFileSync(SETTINGS_PATH, 'utf-8');
+    const parsed = SettingsSchema.parse(JSON.parse(raw));
+    return parsed;
+  } catch (err) {
+    logger.warn({ err, path: SETTINGS_PATH }, 'Failed to load settings — using defaults');
+    return getDefaults();
+  }
+}
+
+/**
+ * Persist settings to disk, merging with any existing values to avoid wiping
+ * fields the caller didn't include in the patch.
+ */
+export function saveSettings(patch: Partial<Settings>): Settings {
+  const current = loadSettings();
+  const merged: Settings = SettingsSchema.parse({
+    ...current,
+    ...patch,
+    subscriptions: { ...current.subscriptions, ...(patch.subscriptions ?? {}) },
+    apiProviders: { ...current.apiProviders, ...(patch.apiProviders ?? {}) },
+    ollama: { ...current.ollama, ...(patch.ollama ?? {}) },
+    ui: { ...current.ui, ...(patch.ui ?? {}) },
+    updatedAt: new Date().toISOString(),
+  });
+
+  try {
+    mkdirSync(dirname(SETTINGS_PATH), { recursive: true });
+    writeFileSync(SETTINGS_PATH, JSON.stringify(merged, null, 2), { mode: 0o600 });
+    logger.info({ path: SETTINGS_PATH }, 'Settings saved');
+  } catch (err) {
+    logger.error({ err, path: SETTINGS_PATH }, 'Failed to persist settings');
+    throw err;
+  }
+
+  // Mirror to env vars so existing provider lookups pick up changes immediately.
+  applySettingsToEnv(merged);
+  return merged;
+}
+
+/**
+ * Strip sensitive data (API keys) before sending to the dashboard.
+ */
+export function getPublicSettings(): PublicSettings {
+  const settings = loadSettings();
+  const apiProviders: PublicSettings['apiProviders'] = {};
+  for (const [name, cfg] of Object.entries(settings.apiProviders)) {
+    apiProviders[name] = {
+      enabled: cfg.enabled,
+      hasKey: !!cfg.apiKey,
+      baseUrl: cfg.baseUrl,
+      notes: cfg.notes,
+    };
+  }
+  return {
+    routingMode: settings.routingMode,
+    subscriptions: settings.subscriptions,
+    apiProviders,
+    ollama: settings.ollama,
+    ui: settings.ui,
+    updatedAt: settings.updatedAt,
+  };
+}
+
+/**
+ * Apply settings to process.env so that the existing external-providers.ts
+ * code transparently picks up user-configured API keys without changes.
+ */
+export function applySettingsToEnv(settings: Settings = loadSettings()): void {
+  const apiEnvMap: Record<string, string> = {
+    cerebras: 'CEREBRAS_API_KEY',
+    groq: 'GROQ_API_KEY',
+    mistral: 'MISTRAL_API_KEY',
+    nvidia: 'NVIDIA_API_KEY',
+    cloudflare: 'CLOUDFLARE_AI_TOKEN',
+    'openai-codex': 'OPENAI_API_KEY',
+  };
+  for (const [name, cfg] of Object.entries(settings.apiProviders)) {
+    const envKey = apiEnvMap[name];
+    if (envKey && cfg.enabled && cfg.apiKey) {
+      process.env[envKey] = cfg.apiKey;
+    }
+  }
+  if (settings.ollama.enabled && settings.ollama.baseUrl) {
+    process.env['OLLAMA_BASE_URL'] = settings.ollama.baseUrl;
+  }
+
+  // Map subscription IDs to the env var the existing provider lookup uses
+  const subEnvMap: Record<string, string> = {
+    'claude-code': 'CLAUDE_BRIDGE_URL',
+    'github-copilot': 'COPILOT_BRIDGE_URL',
+    'microsoft-365-copilot': 'M365_COPILOT_BRIDGE_URL',
+    'chatgpt': 'CHATGPT_BRIDGE_URL',
+    'gemini': 'GEMINI_BRIDGE_URL',
+    'codex': 'CODEX_BRIDGE_URL',
+    'aider': 'AIDER_BRIDGE_URL',
+  };
+  for (const [id, cfg] of Object.entries(settings.subscriptions)) {
+    const envKey = subEnvMap[id];
+    if (envKey && cfg.enabled && cfg.bridgeUrl) {
+      process.env[envKey] = cfg.bridgeUrl;
+    }
+  }
+}
+
+export const SettingsPatchSchema = SettingsSchema.partial().extend({
+  subscriptions: SettingsSchema.shape.subscriptions.optional(),
+  apiProviders: SettingsSchema.shape.apiProviders.optional(),
+  ollama: SettingsSchema.shape.ollama.optional(),
+  ui: SettingsSchema.shape.ui.optional(),
+});
diff --git a/packages/gateway/src/modules/share-card.ts b/packages/gateway/src/modules/share-card.ts
new file mode 100644
index 0000000..f5b9ec4
--- /dev/null
+++ b/packages/gateway/src/modules/share-card.ts
@@ -0,0 +1,174 @@
+/**
+ * Public Share Card Generator
+ *
+ * Renders a shareable SVG image showing your gateway savings — useful for
+ * social posts, blog headers, README badges. Tokens are rounded; no
+ * personally identifying information leaks (caller IDs, model names etc.
+ * are NOT included). Just headline numbers + brand.
+ *
+ * Output is always a valid SVG so it can be embedded as `<img src="...">`
+ * or downloaded directly.
+ */
+import type { Pool } from 'pg';
+import { getComprehensiveSavings } from './savings-calculator.js';
+import { getBuddyState } from './gamification.js';
+
+function fmtNum(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+  return Math.round(n).toString();
+}
+function fmtCost(c: number): string {
+  if (c < 0.01) return `$${c.toFixed(6)}`;
+  if (c < 1) return `$${c.toFixed(4)}`;
+  return `$${c.toFixed(2)}`;
+}
+function escSvg(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export type ShareCardPeriod = 'day' | 'week' | 'month' | 'all';
+export type ShareCardTheme = 'dark' | 'light';
+
+const PERIOD_HOURS: Record<ShareCardPeriod, number> = {
+  day: 24, week: 168, month: 720, all: 24 * 365 * 5,
+};
+
+export async function generateShareCard(
+  db: Pool,
+  opts: { period?: ShareCardPeriod; theme?: ShareCardTheme } = {}
+): Promise<string> {
+  const period: ShareCardPeriod = opts.period ?? 'month';
+  const theme: ShareCardTheme = opts.theme ?? 'dark';
+  const hours = PERIOD_HOURS[period];
+
+  const [savings, buddy] = await Promise.all([
+    getComprehensiveSavings(db, hours),
+    getBuddyState(db, 'gateway'),
+  ]);
+
+  // Theme palette
+  const palette = theme === 'dark' ? {
+    bg: '#0a0a0a', surface: '#161616', text: '#e8e8e8', dim: '#888888',
+    accent: '#d4ff00', accentDim: '#8aa800', border: '#2a2a2a',
+  } : {
+    bg: '#f4f7fa', surface: '#ffffff', text: '#24313d', dim: '#667684',
+    accent: '#0f766e', accentDim: '#8ab9b5', border: '#d6e0e7',
+  };
+
+  const periodLabel = period === 'day' ? 'Last 24 hours'
+    : period === 'week' ? 'Last 7 days'
+    : period === 'month' ? 'Last 30 days'
+    : 'All-time';
+
+  const W = 1200, H = 630; // Open Graph standard
+  const totalTokens = savings.totalTokensSaved;
+  const totalCost = savings.totalCostSaved;
+  const reqCount = savings.totals.requests;
+  const efficacy = savings.costWithoutGateway > 0
+    ? ((savings.costWithoutGateway - savings.costWithGateway) / savings.costWithoutGateway) * 100
+    : 0;
+
+  // Source-bar widths
+  const total = Math.max(0.0000001, savings.totalCostSaved);
+  const wCache = (savings.bySource.cache.cost / total) * 100;
+  const wComp  = (savings.bySource.compression.cost / total) * 100;
+  const wSub   = (savings.bySource.subscriptionBridge.cost / total) * 100;
+  const wLocal = (savings.bySource.localRouting.cost / total) * 100;
+  const wRace  = (savings.bySource.raceMode.cost / total) * 100;
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"  stop-color="${palette.bg}"/>
+      <stop offset="100%" stop-color="${palette.surface}"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="20%" cy="0%" r="80%">
+      <stop offset="0%"  stop-color="${palette.accent}" stop-opacity="0.20"/>
+      <stop offset="60%" stop-color="${palette.accent}" stop-opacity="0.04"/>
+      <stop offset="100%" stop-color="${palette.bg}"     stop-opacity="0"/>
+    </radialGradient>
+    <style>
+      .mono   { font-family: 'JetBrains Mono', 'SF Mono', monospace; }
+      .sans   { font-family: 'Inter', -apple-system, sans-serif; }
+      .num    { font-weight: 700; letter-spacing: -0.02em; }
+      .label  { letter-spacing: 0.16em; text-transform: uppercase; }
+    </style>
+  </defs>
+
+  <!-- background -->
+  <rect width="${W}" height="${H}" fill="url(#bgGrad)"/>
+  <rect width="${W}" height="${H}" fill="url(#glow)"/>
+  <rect width="${W}" height="${H}" fill="none" stroke="${palette.border}" stroke-width="2"/>
+
+  <!-- brand mark -->
+  <g transform="translate(48 48)">
+    <rect x="0" y="0" width="14" height="14" fill="${palette.accent}"/>
+    <text x="24" y="12" class="mono" font-size="20" font-weight="700" fill="${palette.text}">llm.gateway</text>
+    <text x="180" y="12" class="mono" font-size="13" fill="${palette.dim}">— ${escSvg(periodLabel)}</text>
+  </g>
+
+  <!-- top-right: brand tag / version -->
+  <g transform="translate(${W - 48} 48)">
+    <text x="0" y="12" text-anchor="end" class="mono" font-size="11" fill="${palette.dim}" letter-spacing="0.1em">CONTEXT-X.ORG</text>
+  </g>
+
+  <!-- HUGE counter — eyebrow above, big number well below to avoid overlap -->
+  <g transform="translate(48 ${H/2 - 110})">
+    <text x="0" y="0" class="mono label" font-size="14" fill="${palette.dim}">tokens prevented · ${escSvg(periodLabel.toLowerCase())}</text>
+    <text x="0" y="135" class="mono num" font-size="120" fill="${palette.accent}">${fmtNum(totalTokens)}</text>
+    <text x="0" y="180" class="mono" font-size="18" fill="${palette.text}">
+      <tspan>${fmtCost(totalCost)} saved</tspan>
+      <tspan dx="20" fill="${palette.dim}">·</tspan>
+      <tspan dx="14">${fmtNum(reqCount)} calls</tspan>
+      <tspan dx="20" fill="${palette.dim}">·</tspan>
+      <tspan dx="14">${efficacy.toFixed(1)}% efficiency</tspan>
+    </text>
+  </g>
+
+  <!-- 5-axis breakdown bar -->
+  <g transform="translate(48 ${H - 180})">
+    <text x="0" y="0" class="mono label" font-size="12" fill="${palette.dim}">savings sources · 5-axis breakdown</text>
+    <rect x="0" y="14" width="${W - 96}" height="22" fill="${palette.surface}" stroke="${palette.border}"/>
+    ${(() => {
+      let x = 0;
+      const segs: string[] = [];
+      const w = W - 96;
+      const pieces = [
+        { p: wCache, c: '#d4ff00', label: '⚡' },
+        { p: wComp,  c: '#2dd4bf', label: '🗜' },
+        { p: wSub,   c: '#60a5fa', label: '🌉' },
+        { p: wLocal, c: '#a78bfa', label: '🏠' },
+        { p: wRace,  c: '#f97316', label: '🏁' },
+      ];
+      for (const piece of pieces) {
+        const segW = (piece.p / 100) * w;
+        if (segW > 0.5) {
+          segs.push(`<rect x="${x}" y="14" width="${segW}" height="22" fill="${piece.c}"/>`);
+        }
+        x += segW;
+      }
+      return segs.join('');
+    })()}
+    <g transform="translate(0 60)" class="mono" font-size="11" fill="${palette.dim}">
+      <text x="0"   y="0"><tspan fill="#d4ff00">●</tspan> cache</text>
+      <text x="120" y="0"><tspan fill="#2dd4bf">●</tspan> compression</text>
+      <text x="270" y="0"><tspan fill="#60a5fa">●</tspan> subscription bridges</text>
+      <text x="470" y="0"><tspan fill="#a78bfa">●</tspan> local routing</text>
+      <text x="600" y="0"><tspan fill="#f97316">●</tspan> race mode</text>
+    </g>
+  </g>
+
+  <!-- footer / buddy -->
+  <g transform="translate(48 ${H - 70})">
+    <text x="0" y="0" class="mono" font-size="11" fill="${palette.dim}">
+      <tspan fill="${palette.accent}">${escSvg(buddy.species)}</tspan>
+      <tspan dx="6">·</tspan>
+      <tspan dx="6">Lv.${buddy.level}</tspan>
+      <tspan dx="6">·</tspan>
+      <tspan dx="6">${buddy.streakDays}d streak</tspan>
+      <tspan dx="20" fill="${palette.dim}">— routing AI traffic since ${escSvg(new Date().toISOString().split('T')[0])}</tspan>
+    </text>
+  </g>
+</svg>`;
+}
diff --git a/packages/gateway/src/modules/subscription-discovery.ts b/packages/gateway/src/modules/subscription-discovery.ts
new file mode 100644
index 0000000..58d148e
--- /dev/null
+++ b/packages/gateway/src/modules/subscription-discovery.ts
@@ -0,0 +1,303 @@
+/**
+ * Subscription Discovery
+ *
+ * Auto-detects locally installed CLI subscriptions (Claude Code, GitHub Copilot,
+ * ChatGPT, Gemini, etc.) and reports their authentication status. The discovery
+ * results drive automatic bridge spawning and dynamic provider registration.
+ */
+
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { existsSync } from 'fs';
+import { logger } from '../observability/logger.js';
+
+const execFileAsync = promisify(execFile);
+
+export type SubscriptionId =
+  | 'claude-code'
+  | 'github-copilot'
+  | 'microsoft-365-copilot'
+  | 'chatgpt'
+  | 'gemini'
+  | 'codex'
+  | 'aider';
+
+export interface SubscriptionDescriptor {
+  id: SubscriptionId;
+  /** Friendly display name */
+  label: string;
+  /** CLI binary required to use the subscription */
+  command: string;
+  /** Args used for the version probe */
+  versionArgs: readonly string[];
+  /** Args used for the auth probe (optional) */
+  authProbeArgs?: readonly string[];
+  /** Default port the bridge listens on */
+  bridgePort: number;
+  /** ENV var the gateway uses to find the bridge URL */
+  bridgeEnvKey: string;
+  /** Logical provider name in `external-providers.ts` */
+  providerName: string;
+  /** Models exposed via this subscription */
+  models: ReadonlyArray<{ id: string; tier: 'fast' | 'medium' | 'large' | 'reasoning' }>;
+  /** Bridge implementation path (relative to repo root or absolute) */
+  bridgeImplementation: 'inline-claude' | 'inline-openai' | 'inline-copilot' | 'external-codex';
+}
+
+export interface SubscriptionStatus {
+  descriptor: SubscriptionDescriptor;
+  installed: boolean;
+  authenticated: boolean | 'unknown';
+  version?: string;
+  error?: string;
+  bridgeUrl?: string;
+  bridgeRunning: boolean;
+}
+
+/**
+ * Catalog of subscriptions the gateway knows how to bootstrap.
+ * Adding a new entry here is enough to make it discoverable.
+ */
+export const SUBSCRIPTION_CATALOG: readonly SubscriptionDescriptor[] = [
+  {
+    id: 'claude-code',
+    label: 'Claude Code (Anthropic Subscription)',
+    command: 'claude',
+    versionArgs: ['--version'],
+    bridgePort: 3250,
+    bridgeEnvKey: 'CLAUDE_BRIDGE_URL',
+    providerName: 'claude-bridge',
+    bridgeImplementation: 'inline-claude',
+    models: [
+      { id: 'claude-opus-4-1', tier: 'reasoning' },
+      { id: 'claude-sonnet-4-1', tier: 'large' },
+      { id: 'claude-haiku-3', tier: 'fast' },
+    ],
+  },
+  {
+    id: 'github-copilot',
+    label: 'GitHub Copilot Subscription',
+    command: 'gh',
+    versionArgs: ['copilot', '--version'],
+    bridgePort: 3252,
+    bridgeEnvKey: 'COPILOT_BRIDGE_URL',
+    providerName: 'copilot-bridge',
+    bridgeImplementation: 'inline-copilot',
+    models: [
+      { id: 'gpt-4', tier: 'reasoning' },
+      { id: 'gpt-3.5-turbo', tier: 'medium' },
+    ],
+  },
+  {
+    id: 'microsoft-365-copilot',
+    label: 'Microsoft 365 Copilot Subscription',
+    command: 'node',
+    versionArgs: ['--version'],
+    bridgePort: 3257,
+    bridgeEnvKey: 'M365_COPILOT_BRIDGE_URL',
+    providerName: 'm365-copilot-bridge',
+    bridgeImplementation: 'inline-openai',
+    models: [
+      { id: 'microsoft-365-copilot', tier: 'reasoning' },
+      { id: 'm365-copilot-chat', tier: 'large' },
+    ],
+  },
+  {
+    id: 'chatgpt',
+    label: 'OpenAI ChatGPT Plus Subscription',
+    command: 'chatgpt',
+    versionArgs: ['--version'],
+    bridgePort: 3251,
+    bridgeEnvKey: 'CHATGPT_BRIDGE_URL',
+    providerName: 'chatgpt-bridge',
+    bridgeImplementation: 'inline-openai',
+    models: [
+      { id: 'gpt-4-turbo', tier: 'reasoning' },
+      { id: 'gpt-4', tier: 'large' },
+      { id: 'gpt-3.5-turbo', tier: 'medium' },
+    ],
+  },
+  {
+    id: 'gemini',
+    label: 'Google Gemini Advanced Subscription',
+    command: 'gemini',
+    versionArgs: ['--version'],
+    bridgePort: 3254,
+    bridgeEnvKey: 'GEMINI_BRIDGE_URL',
+    providerName: 'gemini-bridge',
+    bridgeImplementation: 'inline-openai',
+    models: [
+      { id: 'gemini-1.5-pro', tier: 'reasoning' },
+      { id: 'gemini-1.5-flash', tier: 'fast' },
+    ],
+  },
+  {
+    id: 'codex',
+    label: 'OpenAI Codex CLI Subscription',
+    command: 'codex',
+    versionArgs: ['--version'],
+    authProbeArgs: ['login', 'status'],
+    bridgePort: 3253,
+    bridgeEnvKey: 'CODEX_BRIDGE_URL',
+    providerName: 'codex-bridge',
+    bridgeImplementation: 'external-codex',
+    models: [
+      { id: 'gpt-5.1-codex', tier: 'reasoning' },
+      { id: 'gpt-5.1-codex-mini', tier: 'large' },
+      { id: 'codex-mini-latest', tier: 'medium' },
+    ],
+  },
+  {
+    id: 'aider',
+    label: 'Aider AI Pair Programmer',
+    command: 'aider',
+    versionArgs: ['--version'],
+    bridgePort: 3256,
+    bridgeEnvKey: 'AIDER_BRIDGE_URL',
+    providerName: 'aider-bridge',
+    bridgeImplementation: 'inline-openai',
+    models: [
+      { id: 'aider-default', tier: 'large' },
+    ],
+  },
+];
+
+/**
+ * Probe a CLI's --version with a 3s timeout. Returns null when not installed.
+ */
+async function probeVersion(command: string, args: readonly string[]): Promise<string | null> {
+  try {
+    const { stdout, stderr } = await execFileAsync(command, args as string[], {
+      timeout: 3000,
+      maxBuffer: 64 * 1024,
+    });
+    const out = (stdout || stderr || '').trim().split('\n')[0];
+    return out || 'installed';
+  } catch (err: unknown) {
+    const code = (err as NodeJS.ErrnoException).code;
+    if (code === 'ENOENT') return null;
+    // Non-zero exit code but command exists (e.g. auth required) — count as installed
+    return 'installed';
+  }
+}
+
+/**
+ * Best-effort authentication check. Many CLI tools don't have a clean probe,
+ * so we return 'unknown' rather than guessing wrong.
+ */
+async function probeAuthenticated(desc: SubscriptionDescriptor): Promise<boolean | 'unknown'> {
+  // Claude Code stores credentials in ~/.claude/.credentials.json
+  if (desc.id === 'claude-code') {
+    const home = process.env.HOME || '/root';
+    return existsSync(`${home}/.claude/.credentials.json`);
+  }
+  // GitHub Copilot uses gh auth status
+  if (desc.id === 'github-copilot') {
+    try {
+      await execFileAsync('gh', ['auth', 'status'], { timeout: 3000 });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  if (desc.id === 'microsoft-365-copilot') {
+    return Boolean(
+      process.env['MICROSOFT_GRAPH_ACCESS_TOKEN'] ||
+      process.env['M365_COPILOT_ACCESS_TOKEN'] ||
+      process.env['MICROSOFT_CLIENT_ID']
+    );
+  }
+  if (desc.id === 'codex') {
+    try {
+      await execFileAsync('codex', ['login', 'status'], { timeout: 3000 });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  return 'unknown';
+}
+
+/**
+ * Check whether a bridge URL is reachable.
+ */
+async function probeBridge(url: string | undefined): Promise<boolean> {
+  if (!url) return false;
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 1500);
+    try {
+      await fetch(`${url.replace(/\/$/, '')}/health`, { signal: controller.signal });
+      return true;
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Resolve the bridge URL for a subscription:
+ *   1. Explicit env var (CLAUDE_BRIDGE_URL etc.) — set by Settings or PM2 ecosystem
+ *   2. Auto-detect: probe http://127.0.0.1:{bridgePort} for a /health endpoint
+ *
+ * This means a bridge running locally on its default port is picked up
+ * automatically without any configuration.
+ */
+async function resolveBridgeUrl(desc: SubscriptionDescriptor): Promise<{ url?: string; running: boolean }> {
+  const explicit = process.env[desc.bridgeEnvKey];
+  if (explicit) {
+    const running = await probeBridge(explicit);
+    return { url: explicit, running };
+  }
+  // Auto-detect on the default port
+  const localUrl = `http://127.0.0.1:${desc.bridgePort}`;
+  const running = await probeBridge(localUrl);
+  return running ? { url: localUrl, running: true } : { running: false };
+}
+
+/**
+ * Discover all subscriptions the gateway knows about. Probes the CLI binary,
+ * authentication state, and any pre-configured bridge URL in the environment.
+ */
+export async function discoverSubscriptions(): Promise<SubscriptionStatus[]> {
+  const results = await Promise.all(
+    SUBSCRIPTION_CATALOG.map(async (desc): Promise<SubscriptionStatus> => {
+      // Always probe the bridge first — a running bridge is enough to count
+      // as "available" even if the CLI isn't installed on this host (the
+      // bridge could live on the user's machine).
+      const bridge = await resolveBridgeUrl(desc);
+
+      const version = await probeVersion(desc.command, desc.versionArgs);
+      if (!version) {
+        return {
+          descriptor: desc,
+          installed: bridge.running, // remote bridge counts as installed
+          authenticated: bridge.running ? 'unknown' : false,
+          bridgeUrl: bridge.url,
+          bridgeRunning: bridge.running,
+        };
+      }
+
+      const authenticated = await probeAuthenticated(desc);
+      return {
+        descriptor: desc,
+        installed: true,
+        authenticated,
+        version,
+        bridgeUrl: bridge.url,
+        bridgeRunning: bridge.running,
+      };
+    })
+  );
+  logger.info(
+    {
+      detected: results.filter((r) => r.installed).length,
+      bridgesLive: results.filter((r) => r.bridgeRunning).length,
+      total: results.length,
+    },
+    'Subscription discovery completed'
+  );
+  return results;
+}
diff --git a/packages/gateway/src/modules/subscription-wallet.ts b/packages/gateway/src/modules/subscription-wallet.ts
new file mode 100644
index 0000000..9639179
--- /dev/null
+++ b/packages/gateway/src/modules/subscription-wallet.ts
@@ -0,0 +1,271 @@
+/**
+ * Subscription Pool Wallet
+ *
+ * Tracks usage of each CLI subscription against its known quota window
+ * (Claude Plus = 80 msg / 3h, ChatGPT Plus = 80 msg / 3h, Copilot = …).
+ * Used by the dashboard to show which subscription has the most headroom
+ * and (future) by the router to load-balance across subscriptions.
+ *
+ * This is the feature competitors don't have: combining MULTIPLE personal
+ * AI subscriptions into a single managed pool.
+ */
+
+import type { Pool } from 'pg';
+import { logger } from '../observability/logger.js';
+
+export interface QuotaProfile {
+  subscriptionId: string;
+  label: string;
+  /** Hard request quota inside the window. Null = unknown / unlimited. */
+  requestQuota: number | null;
+  /** Window length in seconds (Anthropic uses 3h = 10800s, OpenAI varies). */
+  windowSeconds: number;
+  /** Reset behaviour: 'rolling' = sliding window, 'fixed' = clock-aligned reset. */
+  reset: 'rolling' | 'fixed';
+}
+
+/**
+ * Known subscription quota profiles. Numbers are conservative defaults —
+ * users can override via Settings if their plan differs.
+ */
+export const QUOTA_PROFILES: Record<string, QuotaProfile> = {
+  'claude-code':           { subscriptionId: 'claude-code',           label: 'Claude Code (Pro)',         requestQuota: 45,   windowSeconds: 5 * 3600,  reset: 'rolling' },
+  'github-copilot':        { subscriptionId: 'github-copilot',        label: 'GitHub Copilot',            requestQuota: null, windowSeconds: 30 * 86400, reset: 'fixed' },
+  'microsoft-365-copilot': { subscriptionId: 'microsoft-365-copilot', label: 'M365 Copilot',              requestQuota: null, windowSeconds: 30 * 86400, reset: 'fixed' },
+  'chatgpt':               { subscriptionId: 'chatgpt',               label: 'ChatGPT Plus',              requestQuota: 80,   windowSeconds: 3 * 3600,  reset: 'rolling' },
+  'gemini':                { subscriptionId: 'gemini',                label: 'Gemini Advanced',           requestQuota: null, windowSeconds: 30 * 86400, reset: 'fixed' },
+  'codex':                 { subscriptionId: 'codex',                 label: 'OpenAI Codex',              requestQuota: 150,  windowSeconds: 5 * 3600,  reset: 'rolling' },
+  'aider':                 { subscriptionId: 'aider',                 label: 'Aider',                     requestQuota: null, windowSeconds: 86400,     reset: 'fixed' },
+};
+
+/** Record a request against a subscription quota window. */
+export async function recordSubscriptionUsage(
+  db: Pool,
+  subscriptionId: string,
+  tokensConsumed: number = 0
+): Promise<void> {
+  const profile = QUOTA_PROFILES[subscriptionId];
+  if (!profile) return;
+
+  // Compute the window-start timestamp this request belongs to.
+  const now = new Date();
+  let windowStart: Date;
+  if (profile.reset === 'rolling') {
+    // Floor to the most recent quarter-hour for grouping; rolling logic
+    // applied at read-time by summing the last `windowSeconds`.
+    const rounded = Math.floor(now.getTime() / 900_000) * 900_000;
+    windowStart = new Date(rounded);
+  } else {
+    // Fixed reset — bucket into day windows
+    const day = new Date(now);
+    day.setUTCHours(0, 0, 0, 0);
+    windowStart = day;
+  }
+
+  try {
+    await db.query(
+      `
+      INSERT INTO subscription_quota_window
+        (subscription_id, window_start, window_seconds, request_count, tokens_consumed, quota_limit, reset_at)
+      VALUES ($1, $2, $3, 1, $4, $5, $6)
+      ON CONFLICT (subscription_id, window_start)
+      DO UPDATE SET
+        request_count   = subscription_quota_window.request_count + 1,
+        tokens_consumed = subscription_quota_window.tokens_consumed + EXCLUDED.tokens_consumed
+      `,
+      [
+        subscriptionId,
+        windowStart,
+        profile.windowSeconds,
+        tokensConsumed,
+        profile.requestQuota,
+        new Date(windowStart.getTime() + profile.windowSeconds * 1000),
+      ]
+    );
+  } catch (err) {
+    logger.warn({ err, subscriptionId }, 'subscription-wallet: usage record failed');
+  }
+}
+
+export interface WalletEntry {
+  subscriptionId: string;
+  label: string;
+  requestQuota: number | null;
+  used: number;
+  remaining: number | null;
+  utilizationPercent: number | null;
+  windowSeconds: number;
+  resetAt: string | null;
+  /** Predicted exhaustion timestamp based on current rate; null if no quota or no usage. */
+  predictedExhaustionAt: string | null;
+  recommendation: 'use-this' | 'available' | 'near-limit' | 'exhausted' | 'unknown';
+}
+
+/** Build the wallet snapshot for the dashboard. */
+export async function getSubscriptionWallet(db: Pool): Promise<WalletEntry[]> {
+  const entries: WalletEntry[] = [];
+
+  for (const profile of Object.values(QUOTA_PROFILES)) {
+    let used = 0;
+    let resetAt: string | null = null;
+    let predictedExhaustionAt: string | null = null;
+
+    try {
+      const result = await db.query(
+        `
+        SELECT
+          COALESCE(SUM(request_count), 0)::INT AS used,
+          MAX(reset_at) AS reset_at
+        FROM subscription_quota_window
+        WHERE subscription_id = $1
+          AND window_start > NOW() - MAKE_INTERVAL(secs => $2)
+        `,
+        [profile.subscriptionId, profile.windowSeconds]
+      );
+      used = parseInt(result.rows[0]?.used ?? '0', 10);
+      resetAt = result.rows[0]?.reset_at ? new Date(result.rows[0].reset_at).toISOString() : null;
+    } catch (err) {
+      logger.warn({ err, sub: profile.subscriptionId }, 'wallet: read failed');
+    }
+
+    const remaining = profile.requestQuota !== null ? Math.max(profile.requestQuota - used, 0) : null;
+    const utilizationPercent = profile.requestQuota
+      ? Math.min(100, (used / profile.requestQuota) * 100)
+      : null;
+
+    // Linear extrapolation for predicted exhaustion.
+    if (remaining !== null && used > 0 && profile.requestQuota) {
+      const ratePerSecond = used / profile.windowSeconds;
+      if (ratePerSecond > 0) {
+        const secondsRemaining = remaining / ratePerSecond;
+        predictedExhaustionAt = new Date(Date.now() + secondsRemaining * 1000).toISOString();
+      }
+    }
+
+    let recommendation: WalletEntry['recommendation'] = 'unknown';
+    if (utilizationPercent !== null) {
+      if (utilizationPercent >= 100) recommendation = 'exhausted';
+      else if (utilizationPercent >= 80) recommendation = 'near-limit';
+      else if (utilizationPercent <= 30) recommendation = 'use-this';
+      else recommendation = 'available';
+    }
+
+    entries.push({
+      subscriptionId: profile.subscriptionId,
+      label: profile.label,
+      requestQuota: profile.requestQuota,
+      used,
+      remaining,
+      utilizationPercent: utilizationPercent !== null ? Math.round(utilizationPercent * 10) / 10 : null,
+      windowSeconds: profile.windowSeconds,
+      resetAt,
+      predictedExhaustionAt,
+      recommendation,
+    });
+  }
+
+  return entries;
+}
+
+/**
+ * Map an Ollama / external model id to the subscription it belongs to,
+ * if any. Returns null for non-subscription models (free APIs, local Ollama).
+ */
+export function modelToSubscriptionId(model: string): string | null {
+  const m = model.toLowerCase();
+  if (m.startsWith('claude-') || m.includes('claude')) return 'claude-code';
+  if (m.startsWith('gpt-5.1-codex') || m === 'codex-mini-latest') return 'codex';
+  if (m.startsWith('gpt-')) return 'chatgpt';
+  if (m.startsWith('gemini-')) return 'gemini';
+  if (m.startsWith('github-copilot') || m === 'copilot-chat') return 'github-copilot';
+  if (m === 'microsoft-365-copilot' || m === 'm365-copilot-chat') return 'microsoft-365-copilot';
+  return null;
+}
+
+/**
+ * Post-process a routing decision against the subscription wallet.
+ *
+ * If the picked model belongs to a subscription that is `exhausted` or
+ * `near-limit` (>=80% utilization), we look at the same-tier siblings in
+ * the fallback chain and re-pick the one with the most headroom.
+ *
+ * This is the Pool-Routing feature: distribute load across YOUR subscriptions
+ * to maximize their value rather than always routing to the primary.
+ */
+export async function applyPoolRouting(
+  db: Pool,
+  decision: { model: string; fallback_chain: string[]; tier: string },
+  options: { forced?: boolean } = {}
+): Promise<{ model: string; fallback_chain: string[]; reason: string } | null> {
+  const wallet = await getSubscriptionWallet(db);
+  const utilByModel = (model: string): number | null => {
+    const sub = modelToSubscriptionId(model);
+    if (!sub) return null;
+    const w = wallet.find((entry) => entry.subscriptionId === sub);
+    return w?.utilizationPercent ?? null;
+  };
+  const isExhausted = (model: string): boolean => {
+    const sub = modelToSubscriptionId(model);
+    if (!sub) return false;
+    const w = wallet.find((entry) => entry.subscriptionId === sub);
+    return w?.recommendation === 'exhausted';
+  };
+
+  const primaryUtil = utilByModel(decision.model);
+  const primarySub = modelToSubscriptionId(decision.model);
+
+  // No re-routing for non-subscription models or when primary has plenty of headroom
+  if (!primarySub) return null;
+  if (!options.forced && primaryUtil !== null && primaryUtil < 80 && !isExhausted(decision.model)) return null;
+
+  // Find a sibling in the fallback chain with lower utilization
+  const candidates = decision.fallback_chain.filter((m) => m !== decision.model);
+  let bestModel = decision.model;
+  let bestUtil = primaryUtil ?? 100;
+
+  for (const candidate of candidates) {
+    if (isExhausted(candidate)) continue;
+    const util = utilByModel(candidate);
+    if (util === null) continue; // unknown utilization — don't pick blindly over a known one
+    if (util < bestUtil) {
+      bestUtil = util;
+      bestModel = candidate;
+    }
+  }
+
+  if (bestModel === decision.model) return null;
+
+  // Move chosen model to front of chain
+  const newChain = [bestModel, ...decision.fallback_chain.filter((m) => m !== bestModel)];
+  return {
+    model: bestModel,
+    fallback_chain: newChain,
+    reason: `pool-route: primary ${decision.model} at ${primaryUtil?.toFixed(0) ?? '?'}% util, switched to ${bestModel} at ${bestUtil.toFixed(0)}%`,
+  };
+}
+
+/** Pick the subscription with the most headroom for a given tier. */
+export async function pickBestSubscription(
+  db: Pool,
+  candidates: readonly string[]
+): Promise<{ subscriptionId: string; reason: string } | null> {
+  const wallet = await getSubscriptionWallet(db);
+  const eligible = wallet.filter(
+    (w) => candidates.includes(w.subscriptionId) && w.recommendation !== 'exhausted'
+  );
+  if (eligible.length === 0) return null;
+  // Sort: lowest utilization first (most headroom). Unknown utilisation
+  // sorts to the middle so paid quotas with usage data win over unknowns.
+  eligible.sort((a, b) => {
+    const ua = a.utilizationPercent ?? 50;
+    const ub = b.utilizationPercent ?? 50;
+    return ua - ub;
+  });
+  const winner = eligible[0];
+  return {
+    subscriptionId: winner.subscriptionId,
+    reason: winner.utilizationPercent !== null
+      ? `${winner.utilizationPercent.toFixed(0)}% used in window`
+      : 'no quota tracking',
+  };
+}
diff --git a/packages/gateway/src/pipeline/external-providers.ts b/packages/gateway/src/pipeline/external-providers.ts
index 244d07e..305cdae 100644
--- a/packages/gateway/src/pipeline/external-providers.ts
+++ b/packages/gateway/src/pipeline/external-providers.ts
@@ -86,6 +86,17 @@ const PROVIDERS: readonly ExternalProvider[] = [
       { id: 'gpt-3.5-turbo', tier: 'medium', contextLength: 4096 },
     ],
   },
+  {
+    name: 'm365-copilot-bridge',
+    baseUrl: '', // constructed from M365_COPILOT_BRIDGE_URL env var
+    envKey: 'M365_COPILOT_BRIDGE_URL',
+    rateLimitRpm: 60,
+    enabled: true,
+    models: [
+      { id: 'microsoft-365-copilot', tier: 'reasoning', contextLength: 128000 },
+      { id: 'm365-copilot-chat', tier: 'large', contextLength: 128000 },
+    ],
+  },
   {
     name: 'cerebras',
     baseUrl: 'https://api.cerebras.ai/v1',
@@ -146,12 +157,13 @@ const PROVIDERS: readonly ExternalProvider[] = [
   {
     name: 'openai-codex',
     baseUrl: 'https://api.openai.com/v1',
-    envKey: 'OPENAI_API_KEY',
+    envKey: 'OPENAI_CODEX_URL',
     rateLimitRpm: 60,
     enabled: true,
     models: [
-      { id: 'gpt-4-turbo', tier: 'reasoning', contextLength: 128000 },
-      { id: 'gpt-3.5-turbo', tier: 'fast', contextLength: 16384 },
+      { id: 'gpt-5.1-codex', tier: 'reasoning', contextLength: 256000 },
+      { id: 'gpt-5.1-codex-mini', tier: 'large', contextLength: 256000 },
+      { id: 'codex-mini-latest', tier: 'medium', contextLength: 200000 },
     ],
   },
   {
@@ -169,16 +181,28 @@ const PROVIDERS: readonly ExternalProvider[] = [
   {
     name: 'codex',
     baseUrl: 'https://api.github.com/copilot_inner/v2',
-    envKey: 'GITHUB_CODEX_TOKEN',
+    envKey: 'CODEX_BRIDGE_URL',
     rateLimitRpm: 60,
     enabled: true,
     models: [
-      { id: 'github-copilot-x', tier: 'large', contextLength: 8192 },
-      { id: 'code-davinci-002', tier: 'medium', contextLength: 4096 },
+      { id: 'gpt-5.1-codex', tier: 'reasoning', contextLength: 256000 },
+      { id: 'gpt-5.1-codex-mini', tier: 'large', contextLength: 256000 },
+      { id: 'codex-mini-latest', tier: 'medium', contextLength: 200000 },
     ],
   },
 ];
 
+const AUTHLESS_BRIDGE_PROVIDERS = new Set([
+  'claude-bridge',
+  'claude-code',
+  'openai-bridge',
+  'chatgpt-bridge',
+  'copilot-bridge',
+  'm365-copilot-bridge',
+]);
+
+const GENERATE_BRIDGE_PROVIDERS = new Set(['claude-bridge', 'claude-code']);
+
 // ─── Rate Limiter (simple sliding window) ───────────────────────────
 
 const requestTimestamps: Map<string, number[]> = new Map();
@@ -213,25 +237,34 @@ function getApiKey(provider: ExternalProvider): string | undefined {
     return url ? 'claude-code-enabled' : undefined;
   }
   if (provider.name === 'openai-bridge') {
-    // openai-bridge uses OPENAI_API_KEY for auth, but also needs bridge URL
-    const apiKey = process.env['OPENAI_API_KEY'];
+    // Subscription bridge auth is handled by the bridge process/CLI session.
     const url = process.env['OPENAI_BRIDGE_URL'];
-    return apiKey && url ? apiKey : undefined;
+    return url ? 'openai-bridge-enabled' : undefined;
   }
   if (provider.name === 'chatgpt-bridge') {
-    // chatgpt-bridge can use same URL as openai-bridge (same service), but needs API key
-    const apiKey = process.env['OPENAI_API_KEY'];
+    // ChatGPT Plus bridge can reuse the OpenAI bridge when configured that way.
     const url = process.env['CHATGPT_BRIDGE_URL'] || process.env['OPENAI_BRIDGE_URL'];
-    return apiKey && url ? apiKey : undefined;
+    return url ? 'chatgpt-bridge-enabled' : undefined;
   }
   if (provider.name === 'copilot-bridge') {
-    // copilot-bridge uses GitHub Copilot subscription (auth handled internally by copilot-api)
-    // Just needs URL to be configured
+    // copilot-bridge uses GitHub Copilot subscription (auth handled internally by copilot-api).
     const url = process.env['COPILOT_BRIDGE_URL'];
     return url ? 'copilot-authenticated' : undefined;
   }
+  if (provider.name === 'm365-copilot-bridge') {
+    // Microsoft 365 Copilot uses Microsoft Graph delegated auth inside the bridge.
+    const url = process.env['M365_COPILOT_BRIDGE_URL'];
+    return url ? 'm365-copilot-bridge-enabled' : undefined;
+  }
+  if (provider.name === 'openai-codex') {
+    const bridgeUrl = process.env['OPENAI_CODEX_URL'] || process.env['CODEX_BRIDGE_URL'];
+    if (bridgeUrl) return 'openai-codex-bridge-enabled';
+    return process.env['OPENAI_API_KEY'] || undefined;
+  }
   if (provider.name === 'codex') {
-    // codex uses GitHub Codex API token
+    // Codex can run through an authless local/subscription bridge. A token remains supported as fallback.
+    const bridgeUrl = process.env['CODEX_BRIDGE_URL'] || process.env['OPENAI_CODEX_URL'];
+    if (bridgeUrl) return 'codex-bridge-enabled';
     const token = process.env['GITHUB_CODEX_TOKEN'];
     return token ? token : undefined;
   }
@@ -241,11 +274,11 @@ function getApiKey(provider: ExternalProvider): string | undefined {
 function getBaseUrl(provider: ExternalProvider): string {
   if (provider.name === 'claude-bridge') {
     const url = process.env['CLAUDE_BRIDGE_URL'];
-    return url ? `${url}/v1` : '';
+    return url ?? '';
   }
   if (provider.name === 'claude-code') {
     const url = process.env['CLAUDE_CODE_URL'];
-    return url ? `${url}/v1` : '';
+    return url ?? '';
   }
   if (provider.name === 'openai-bridge') {
     const url = process.env['OPENAI_BRIDGE_URL'];
@@ -257,7 +290,19 @@ function getBaseUrl(provider: ExternalProvider): string {
   }
   if (provider.name === 'copilot-bridge') {
     const url = process.env['COPILOT_BRIDGE_URL'];
-    return url ? `${url}` : '';
+    return url ? `${url}/v1` : '';
+  }
+  if (provider.name === 'm365-copilot-bridge') {
+    const url = process.env['M365_COPILOT_BRIDGE_URL'];
+    return url ? `${url}/v1` : '';
+  }
+  if (provider.name === 'openai-codex') {
+    const url = process.env['OPENAI_CODEX_URL'] || process.env['CODEX_BRIDGE_URL'];
+    return url ? `${url}/v1` : provider.baseUrl;
+  }
+  if (provider.name === 'codex') {
+    const url = process.env['CODEX_BRIDGE_URL'] || process.env['OPENAI_CODEX_URL'];
+    return url ? `${url}/v1` : provider.baseUrl;
   }
   if (provider.name === 'cloudflare') {
     const accountId = process.env['CLOUDFLARE_ACCOUNT_ID'];
@@ -271,6 +316,11 @@ export function getAvailableProviders(): readonly ExternalProvider[] {
   return PROVIDERS.filter((p) => p.enabled && getApiKey(p));
 }
 
+/** Returns ALL configured providers (enabled or not, with or without API key). For dashboard listing. */
+export function getAllProviders(): readonly ExternalProvider[] {
+  return PROVIDERS;
+}
+
 function findBestModel(
   provider: ExternalProvider,
   targetTier: 'fast' | 'medium' | 'large' | 'reasoning',
@@ -296,7 +346,11 @@ function findBestModel(
 
 function buildRequestHeaders(provider: ExternalProvider, apiKey: string): Record<string, string> {
   const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-  if (!['claude-bridge', 'claude-code', 'openai-bridge', 'chatgpt-bridge', 'copilot-bridge'].includes(provider.name)) {
+  const usesAuthlessBridge = AUTHLESS_BRIDGE_PROVIDERS.has(provider.name)
+    || (provider.name === 'openai-codex' && !!(process.env['OPENAI_CODEX_URL'] || process.env['CODEX_BRIDGE_URL']))
+    || (provider.name === 'codex' && !!(process.env['CODEX_BRIDGE_URL'] || process.env['OPENAI_CODEX_URL']));
+
+  if (!usesAuthlessBridge) {
     headers['Authorization'] = `Bearer ${apiKey}`;
   }
   return headers;
@@ -311,13 +365,29 @@ function buildRequestPayload(model: ExternalModel, request: ExternalCompletionRe
   };
 }
 
+function buildGenerateBridgePayload(model: ExternalModel, request: ExternalCompletionRequest): Record<string, unknown> {
+  const system = request.messages.find((m) => m.role === 'system')?.content;
+  const prompt = request.messages
+    .filter((m) => m.role !== 'system')
+    .map((m) => `${m.role}: ${m.content}`)
+    .join('\n\n');
+
+  return {
+    model: model.id,
+    prompt,
+    system,
+    temperature: request.temperature ?? 0.3,
+    max_tokens: request.max_tokens ?? 2048,
+  };
+}
+
 function parseExternalResponse(
   data: any,
   model: ExternalModel,
   provider: ExternalProvider,
   start: number,
 ): ExternalCompletionResponse {
-  const content = data.choices?.[0]?.message?.content ?? '';
+  const content = data.choices?.[0]?.message?.content ?? data.content ?? data.response ?? data.message?.content ?? '';
   recordRequest(provider.name);
   return {
     response: content,
@@ -341,14 +411,15 @@ async function callProvider(
   const baseUrl = getBaseUrl(provider);
   if (!baseUrl) throw new Error(`No base URL for ${provider.name}`);
 
-  const url = `${baseUrl}/chat/completions`;
+  const generateBridge = GENERATE_BRIDGE_PROVIDERS.has(provider.name);
+  const url = generateBridge ? `${baseUrl}/api/generate` : `${baseUrl}/chat/completions`;
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), timeoutMs);
   const start = Date.now();
 
   try {
     const headers = buildRequestHeaders(provider, apiKey);
-    const payload = buildRequestPayload(model, request);
+    const payload = generateBridge ? buildGenerateBridgePayload(model, request) : buildRequestPayload(model, request);
 
     const response = await fetch(url, {
       method: 'POST',
diff --git a/packages/gateway/src/routes/dashboard.ts b/packages/gateway/src/routes/dashboard.ts
index 7840e54..2ce21ab 100644
--- a/packages/gateway/src/routes/dashboard.ts
+++ b/packages/gateway/src/routes/dashboard.ts
@@ -1,9 +1,41 @@
 import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { existsSync } from 'fs';
+import { homedir } from 'os';
 import { getPool } from '../db/client.js';
 import { logger } from '../observability/logger.js';
 import { createRequestLogger } from '../modules/request-logger.js';
 import { globalRequestStream } from '../modules/request-stream.js';
-import { getAvailableProviders } from '../pipeline/external-providers.js';
+import { getAvailableProviders, getAllProviders } from '../pipeline/external-providers.js';
+import { discoverSubscriptions } from '../modules/subscription-discovery.js';
+import { getRunningBridges, spawnDetectedBridges } from '../modules/bridge-spawner.js';
+import { getPublicSettings, saveSettings, SettingsPatchSchema } from '../modules/settings-store.js';
+import {
+  getCacheSavings,
+  getSavingsTimeSeries,
+  clearCacheForCaller,
+  pruneStaleCacheEntries,
+} from '../modules/response-cache.js';
+import { getComprehensiveSavings } from '../modules/savings-calculator.js';
+import {
+  getBuddyState,
+  getAchievements,
+  getCalendarHeatmap,
+  getRecentEvents,
+  getForecast,
+} from '../modules/gamification.js';
+import { buildMemoryGraph } from '../modules/memory-graph.js';
+import { getRaceLeaderboard } from '../modules/race-leaderboard.js';
+import { getCallerDeepDive } from '../modules/caller-stats.js';
+import { generateMonthlyReport } from '../modules/report-generator.js';
+import { generateShareCard } from '../modules/share-card.js';
+import { getSubscriptionWallet, recordSubscriptionUsage } from '../modules/subscription-wallet.js';
+import { rememberFact, recallFacts, forgetCaller } from '../modules/knowledge-memory.js';
+import { getRaceStats } from '../modules/race-mode.js';
+import { dashboardAuthStatus, requireDashboardAuth } from '../modules/admin-auth.js';
+
+const execFileAsync = promisify(execFile);
 
 interface DashboardSummary {
   totalCost: number;
@@ -58,231 +90,255 @@ interface AlertData {
   };
 }
 
-interface TopologyNode {
-  id: string;
-  label: string;
-  kind: 'client' | 'gateway' | 'policy' | 'memory' | 'model' | 'provider' | 'tool' | 'planned';
-  status: 'online' | 'ready' | 'detected' | 'planned' | 'blocked' | 'offline';
-  trust: 'public' | 'internal' | 'confidential' | 'secret' | 'n/a';
-  description: string;
-  metrics?: Record<string, string | number | boolean>;
+const WORKBENCH_V1_BASELINE = {
+  totalTokensSaved: 9_304_882,
+  totalCostSaved: 72.54,
+  totalHits: 6,
+  hitRatePercent: 9.68,
+  costWithoutGateway: 749.38,
+  costWithGateway: 676.84,
+};
+
+type ProviderRuntime = {
+  runtimeStatus?: string;
+  runtimeHealthy?: boolean;
+  runtimeDetail?: string;
+};
+
+const CLIENT_CATALOG = [
+  {
+    id: 'codex-desktop',
+    label: 'Codex Desktop / CLI',
+    patterns: ['codex-desktop', 'codex-cli', 'codex'],
+    commands: ['codex'],
+    paths: ['/Applications/Codex.app', '~/.codex'],
+    processPatterns: ['Codex.app', 'Codex Helper', '/Applications/Codex.app', '/Resources/codex'],
+  },
+  {
+    id: 'claude-desktop',
+    label: 'Claude Desktop / Claude Code',
+    patterns: ['claude-desktop', 'claude-code', 'claude'],
+    commands: ['claude'],
+    paths: ['/Applications/Claude.app', '~/Library/Application Support/Claude', '~/.claude'],
+    processPatterns: ['/Applications/Claude.app', 'Claude Helper', 'claude-code', '/claude.app/Contents/MacOS/claude'],
+  },
+  {
+    id: 'microsoft-copilot',
+    label: 'Microsoft Copilot',
+    patterns: ['microsoft-copilot', 'm365-copilot', 'copilot-m365'],
+    commands: [],
+    paths: ['/Applications/Microsoft Copilot.app'],
+    processPatterns: ['Microsoft Copilot', 'm365-copilot'],
+  },
+  {
+    id: 'github-copilot',
+    label: 'GitHub Copilot',
+    patterns: ['github-copilot', 'copilot-bridge'],
+    commands: ['gh'],
+    paths: ['~/.config/github-copilot', '~/.vscode/extensions'],
+    processPatterns: ['GitHub Copilot', 'copilot-language-server', 'copilot-bridge'],
+  },
+  {
+    id: 'chatgpt',
+    label: 'ChatGPT / OpenAI Desktop',
+    patterns: ['chatgpt', 'openai-desktop'],
+    commands: [],
+    paths: ['/Applications/ChatGPT.app', '~/Library/Application Support/com.openai.chat'],
+    processPatterns: ['/Applications/ChatGPT.app', 'ChatGPTHelper', 'com.openai.chat'],
+  },
+  {
+    id: 'openai-compatible',
+    label: 'OpenAI-compatible clients',
+    patterns: ['openai-compatible', 'responses-compatible', 'responses-', 'gateway', 'cursor', 'continue', 'cline', 'aider', 'waveterm'],
+    commands: ['cursor', 'aider', 'opencode', 'cline'],
+    paths: ['/Applications/Cursor.app', '~/.cursor', '~/.continue', '~/.aider.conf.yml'],
+    processPatterns: ['/Applications/Cursor.app', 'Cursor Helper', 'Continue', 'Cline', 'aider', 'opencode', 'Waveterm'],
+  },
+] as const;
+
+type ClientStatus = 'live' | 'running' | 'installed' | 'not-connected';
+
+function expandUserPath(path: string): string {
+  return path.startsWith('~/') ? `${homedir()}/${path.slice(2)}` : path;
 }
 
-interface TopologyEdge {
-  from: string;
-  to: string;
-  label: string;
-  status: 'active' | 'ready' | 'planned' | 'blocked';
-}
-
-interface DashboardTopology {
-  product: string;
-  tagline: string;
-  mode: 'online' | 'offline' | 'hybrid-safe';
-  generatedAt: string;
-  summary: {
-    detectedClients: number;
-    localModels: number;
-    providersConfigured: number;
-    trustPolicies: number;
-    memoryBackends: number;
-    plannedModules: number;
-  };
-  nodes: TopologyNode[];
-  edges: TopologyEdge[];
-  trustLevels: Array<{ level: string; route: string; action: string }>;
-  receipts: Array<{ id: string; trust: string; route: string; protected: string; tokens: string }>;
-  roadmap: Array<{ module: string; status: string; priority: string }>;
-}
-
-async function getDashboardTopology(): Promise<DashboardTopology> {
-  let availableProviders: ReturnType<typeof getAvailableProviders> = [];
+async function getProcessSnapshot(): Promise<string> {
   try {
-    availableProviders = getAvailableProviders();
-  } catch (err) {
-    logger.warn({ err }, 'Provider discovery failed while building topology');
+    const { stdout } = await execFileAsync('ps', ['axo', 'command'], { timeout: 1500, maxBuffer: 1024 * 1024 * 3 });
+    return stdout.toLowerCase();
+  } catch {
+    return '';
   }
+}
 
-  const configuredProviders = availableProviders.filter((provider) => {
-    if (!provider.enabled) return false;
-    if (provider.name === 'claude-bridge') {
-      return process.env['CLAUDE_BRIDGE_ENABLED'] === 'true' && Boolean(process.env['CLAUDE_BRIDGE_URL']);
-    }
-    if (['claude-code', 'openai-bridge', 'chatgpt-bridge', 'copilot-bridge', 'codex'].includes(provider.name)) {
-      return Boolean(process.env[provider.envKey]) || Boolean(process.env[`${provider.envKey.replace(/_KEY|_TOKEN/, '')}_URL`]);
-    }
-    return Boolean(process.env[provider.envKey]);
-  });
+async function commandExists(command: string): Promise<boolean> {
+  try {
+    await execFileAsync('/bin/sh', ['-lc', `command -v ${command}`], { timeout: 1200, maxBuffer: 4096 });
+    return true;
+  } catch {
+    return false;
+  }
+}
 
-  const providerNodes: TopologyNode[] = availableProviders.slice(0, 8).map((provider) => ({
-    id: `provider-${provider.name}`,
-    label: provider.name,
-    kind: provider.name.includes('bridge') || provider.name === 'codex' ? 'provider' : 'provider',
-    status: configuredProviders.some((p) => p.name === provider.name) ? 'ready' : 'detected',
-    trust: provider.name.includes('bridge') ? 'internal' : 'public',
-    description: `${provider.models.length} model routes, ${provider.rateLimitRpm} rpm`,
-    metrics: {
-      models: provider.models.length,
-      rpm: provider.rateLimitRpm,
-    },
+async function getLocalDesktopDetections(): Promise<Record<string, { running: boolean; installed: boolean; signals: string[] }>> {
+  const processSnapshot = await getProcessSnapshot();
+  const entries = await Promise.all(CLIENT_CATALOG.map(async (client) => {
+    const signals: string[] = [];
+    const running = client.processPatterns.some((pattern) => processSnapshot.includes(pattern.toLowerCase()));
+    if (running) signals.push('running process');
+
+    const existingPaths = client.paths.filter((path) => existsSync(expandUserPath(path)));
+    for (const path of existingPaths.slice(0, 3)) signals.push(path);
+
+    const existingCommands: string[] = [];
+    for (const command of client.commands) {
+      if (await commandExists(command)) existingCommands.push(command);
+    }
+    for (const command of existingCommands) signals.push(`cli:${command}`);
+
+    return [client.id, {
+      running,
+      installed: existingPaths.length > 0 || existingCommands.length > 0 || running,
+      signals,
+    }] as const;
   }));
 
-  const nodes: TopologyNode[] = [
-    {
-      id: 'openai-api',
-      label: 'OpenAI-compatible API',
-      kind: 'client',
-      status: 'online',
-      trust: 'internal',
-      description: 'Existing gateway entrypoint for apps that can use a custom base URL.',
-    },
-    {
-      id: 'client-claude-code',
-      label: 'Claude Code',
-      kind: 'client',
-      status: 'planned',
-      trust: 'internal',
-      description: 'Optional MCP bridge for code work.',
-    },
-    {
-      id: 'client-codex',
-      label: 'Codex',
-      kind: 'client',
-      status: 'planned',
-      trust: 'internal',
-      description: 'Optional MCP helper and OpenAI-compatible client flow.',
-    },
-    {
-      id: 'client-chatgpt',
-      label: 'ChatGPT',
-      kind: 'client',
-      status: 'planned',
-      trust: 'public',
-      description: 'Export importer and optional browser/adapter flow.',
-    },
-    {
-      id: 'client-cursor',
-      label: 'Cursor / VS Code',
-      kind: 'client',
-      status: 'planned',
-      trust: 'internal',
-      description: 'Works through OpenAI-compatible base URL where supported.',
-    },
-    {
-      id: 'gateway',
-      label: 'LLM Gateway',
-      kind: 'gateway',
-      status: 'online',
-      trust: 'n/a',
-      description: 'Existing core: OpenAI-compatible API, routing, completions, metrics, fallback.',
-    },
-    {
-      id: 'trust-router',
-      label: 'Trust Router',
-      kind: 'policy',
-      status: 'planned',
-      trust: 'n/a',
-      description: 'Small policy layer for local-first routing and provider allowlists.',
-    },
-    {
-      id: 'context-receipts',
-      label: 'Context Receipts',
-      kind: 'policy',
-      status: 'planned',
-      trust: 'n/a',
-      description: 'Shows what context was used, compressed, redacted, and routed.',
-    },
-    {
-      id: 'memory-gitea',
-      label: 'Shared Git Memory',
-      kind: 'memory',
-      status: 'planned',
-      trust: 'confidential',
-      description: 'Optional Git/Gitea-backed memory for AI handoffs and project decisions.',
-    },
-    {
-      id: 'mcp-server',
-      label: 'MCP Control Plane',
-      kind: 'tool',
-      status: 'planned',
-      trust: 'internal',
-      description: 'Gateway, memory, repo, and policy tools exposed through MCP.',
-    },
-    {
-      id: 'ollama',
-      label: 'Ollama / Local Models',
-      kind: 'model',
-      status: 'ready',
-      trust: 'confidential',
-      description: 'Local-first model runtime for private and offline work.',
-    },
-    ...providerNodes,
-  ];
+  return Object.fromEntries(entries);
+}
 
-  const edges: TopologyEdge[] = [
-    { from: 'openai-api', to: 'gateway', label: 'OpenAI-compatible API', status: 'ready' },
-    { from: 'client-claude-code', to: 'mcp-server', label: 'MCP tools/resources', status: 'planned' },
-    { from: 'client-codex', to: 'mcp-server', label: 'MCP tools/resources', status: 'planned' },
-    { from: 'client-chatgpt', to: 'gateway', label: 'export/import + OpenAI adapter', status: 'planned' },
-    { from: 'client-cursor', to: 'gateway', label: 'custom base URL', status: 'planned' },
-    { from: 'mcp-server', to: 'gateway', label: 'tool calls', status: 'planned' },
-    { from: 'gateway', to: 'trust-router', label: 'policy decision', status: 'planned' },
-    { from: 'trust-router', to: 'ollama', label: 'confidential/local route', status: 'ready' },
-    { from: 'trust-router', to: 'memory-gitea', label: 'memory read/write', status: 'planned' },
-    { from: 'gateway', to: 'context-receipts', label: 'audit artifact', status: 'planned' },
-    ...providerNodes.map((node) => ({
-      from: 'trust-router',
-      to: node.id,
-      label: node.trust === 'public' ? 'public route' : 'approved route',
-      status: node.status === 'ready' ? 'ready' : 'planned',
-    } as TopologyEdge)),
-  ];
+async function getGatewayClientCoverage(hoursBack: number = 24): Promise<Array<{
+  id: string;
+  label: string;
+  status: ClientStatus;
+  requestCount: number;
+  lastSeen?: string;
+  callers: string[];
+  tokensIn: number;
+  tokensSaved: number;
+  source: 'gateway' | 'local-detection' | 'none';
+  detectionSignals: string[];
+}>> {
+  const detections = await getLocalDesktopDetections();
+  let callers: Array<{ caller: string; requestCount: number; lastSeen?: string; tokensIn: number; tokensSaved: number }> = [];
 
-  const plannedModules = [
-    'Trust Router',
-    'Context Receipts',
-    'Shared Gitea Memory',
-    'AI Handoff Protocol',
-    'Consent Ledger',
-    'Setup Doctor',
-    'Safe Config Writer',
-    'Benchmark Lab',
-    'Agent Reputation',
-    'Compression Engine',
-  ];
+  try {
+    const db = getPool();
+    const result = await db.query(
+      `
+      SELECT
+        rt.caller_id,
+        COUNT(*)::INT as request_count,
+        MAX(rt.created_at) as last_seen,
+        COALESCE(SUM(rt.tokens_in), 0)::INT as tokens_in,
+        COALESCE(SUM(GREATEST(tv.tokens_before - tv.tokens_after, 0)), 0)::INT as tokens_saved
+      FROM request_tracking rt
+      LEFT JOIN LATERAL (
+        SELECT tokens_before, tokens_after
+        FROM tokenvault_metrics
+        WHERE tool_used = 'gateway'
+          AND file_path = rt.request_id
+        ORDER BY created_at DESC
+        LIMIT 1
+      ) tv ON true
+      WHERE rt.created_at > NOW() - MAKE_INTERVAL(hours => $1)
+      GROUP BY rt.caller_id
+      `,
+      [hoursBack]
+    );
 
-  return {
-    product: 'llm.gateway',
-    tagline: 'OpenAI-compatible LLM Gateway with routing, savings, receipts, and optional shared memory',
-    mode: process.env['BLACKHOLE_OFFLINE_MODE'] === 'true' ? 'offline' : 'hybrid-safe',
-    generatedAt: new Date().toISOString(),
-    summary: {
-      detectedClients: 6,
-      localModels: 1,
-      providersConfigured: configuredProviders.length,
-      trustPolicies: 4,
-      memoryBackends: 1,
-      plannedModules: plannedModules.length,
-    },
-    nodes,
-    edges,
-    trustLevels: [
-      { level: 'public', route: 'any enabled provider', action: 'allow' },
-      { level: 'internal', route: 'local or approved provider', action: 'route with receipt' },
-      { level: 'confidential', route: 'local-first', action: 'block public providers' },
-      { level: 'secret', route: 'none', action: 'redact or block' },
-    ],
-    receipts: [
-      { id: 'ctxr-demo-001', trust: 'internal', route: 'Claude Code -> MCP -> local model', protected: '.env, tokens, private keys', tokens: '13.2k -> 4.2k' },
-      { id: 'ctxr-demo-002', trust: 'confidential', route: 'Codex -> Gateway -> Ollama', protected: 'customer names, internal hosts', tokens: '8.4k -> 3.1k' },
-      { id: 'ctxr-demo-003', trust: 'public', route: 'OpenAI-compatible app -> Gateway -> hosted model', protected: 'none detected', tokens: '2.0k -> 1.8k' },
-    ],
-    roadmap: plannedModules.map((module, index) => ({
-      module,
-      status: index < 4 ? 'next' : 'planned',
-      priority: index < 7 ? 'P0' : 'P1',
-    })),
+    callers = result.rows.map((row: any) => ({
+      caller: String(row.caller_id ?? ''),
+      requestCount: parseInt(row.request_count, 10) || 0,
+      lastSeen: row.last_seen ? new Date(row.last_seen).toISOString() : undefined,
+      tokensIn: parseInt(row.tokens_in, 10) || 0,
+      tokensSaved: parseInt(row.tokens_saved, 10) || 0,
+    }));
+  } catch (error) {
+    logger.warn({ error }, 'Client gateway traffic lookup failed, returning local desktop detections only');
+  }
+
+  return CLIENT_CATALOG.map((client) => {
+    const detection = detections[client.id];
+    const matched = callers.filter((row) => {
+      const caller = row.caller.toLowerCase();
+      return client.patterns.some((pattern) => caller.includes(pattern));
+    });
+    const requestCount = matched.reduce((sum, row) => sum + row.requestCount, 0);
+    const tokensIn = matched.reduce((sum, row) => sum + row.tokensIn, 0);
+    const tokensSaved = matched.reduce((sum, row) => sum + row.tokensSaved, 0);
+    const lastSeen = matched
+      .map((row) => row.lastSeen)
+      .filter(Boolean)
+      .sort()
+      .at(-1);
+
+    return {
+      id: client.id,
+      label: client.label,
+      status: requestCount > 0 ? 'live' : detection?.running ? 'running' : detection?.installed ? 'installed' : 'not-connected',
+      requestCount,
+      lastSeen,
+      callers: matched.map((row) => row.caller).sort(),
+      tokensIn,
+      tokensSaved,
+      source: requestCount > 0 ? 'gateway' : detection?.installed ? 'local-detection' : 'none',
+      detectionSignals: detection?.signals ?? [],
+    };
+  });
+}
+
+function bridgeHealthUrl(providerName: string): string | undefined {
+  const bridgeUrls: Record<string, string | undefined> = {
+    'claude-bridge': process.env['CLAUDE_BRIDGE_URL'],
+    'claude-code': process.env['CLAUDE_CODE_URL'] || process.env['CLAUDE_BRIDGE_URL'],
+    'openai-bridge': process.env['OPENAI_BRIDGE_URL'],
+    'chatgpt-bridge': process.env['CHATGPT_BRIDGE_URL'] || process.env['OPENAI_BRIDGE_URL'],
+    'copilot-bridge': process.env['COPILOT_BRIDGE_URL'],
+    'm365-copilot-bridge': process.env['M365_COPILOT_BRIDGE_URL'],
+    'openai-codex': process.env['OPENAI_CODEX_URL'] || process.env['CODEX_BRIDGE_URL'],
+    codex: process.env['CODEX_BRIDGE_URL'] || process.env['OPENAI_CODEX_URL'],
   };
+
+  const baseUrl = bridgeUrls[providerName]?.replace(/\/+$/, '');
+  return baseUrl ? `${baseUrl}/health` : undefined;
+}
+
+async function providerRuntime(providerName: string): Promise<ProviderRuntime> {
+  const healthUrl = bridgeHealthUrl(providerName);
+  if (!healthUrl) return {};
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 1200);
+
+  try {
+    const response = await fetch(healthUrl, { signal: controller.signal });
+    const payload = await response.json().catch(() => ({})) as {
+      status?: unknown;
+      configured?: unknown;
+      healthy?: unknown;
+      detail?: unknown;
+    };
+    const status = String(payload.status ?? (response.ok ? 'ok' : 'error'));
+    const configured = payload.configured !== false;
+    const healthy = response.ok && configured && payload.healthy !== false && status !== 'auth_required';
+    const detail = status === 'auth_required'
+      ? String(payload.detail ?? 'auth_required')
+      : configured ? undefined : 'bridge_not_configured';
+
+    return {
+      runtimeStatus: healthy ? 'ready' : status,
+      runtimeHealthy: healthy,
+      runtimeDetail: detail,
+    };
+  } catch (error) {
+    return {
+      runtimeStatus: 'unreachable',
+      runtimeHealthy: false,
+      runtimeDetail: error instanceof Error ? error.message : 'health_check_failed',
+    };
+  } finally {
+    clearTimeout(timeout);
+  }
 }
 
 /**
@@ -291,30 +347,17 @@ async function getDashboardTopology(): Promise<DashboardTopology> {
 async function getDashboardSummary(hoursBack: number = 24): Promise<DashboardSummary> {
   const db = getPool();
   try {
-    const result = await db.query(
-      `SELECT
-        SUM(cost_usd) as total_cost,
-        SUM(cost_saved_usd) as total_saved,
-        SUM(tokens_compressed) as tokens_compressed,
-        SUM(tokens_in + tokens_out) as total_tokens,
-        COUNT(*) as request_count,
-        AVG(confidence_score) as avg_confidence
-       FROM cost_analytics
-       WHERE created_at > NOW() - INTERVAL $1 HOUR`,
-      [hoursBack]
-    );
-
-    const row = result.rows[0];
-    const totalTokens = parseInt(row?.total_tokens || '0', 10);
-    const totalCompressed = parseInt(row?.tokens_compressed || '0', 10);
+    const requestLogger = createRequestLogger(db);
+    const bucketMinutes = hoursBack * 60; // Convert hours to minutes
+    const metrics = await requestLogger.getMetrics(bucketMinutes);
 
     return {
-      totalCost: parseFloat(row?.total_cost || '0'),
-      totalSaved: parseFloat(row?.total_saved || '0'),
-      compressionRatio: totalTokens > 0 ? parseFloat((((totalTokens - totalCompressed) / totalTokens) * 100).toFixed(2)) : 0,
-      tokensSaved: totalTokens - totalCompressed,
-      requestCount: parseInt(row?.request_count || '0', 10),
-      averageConfidence: parseFloat(row?.avg_confidence || '0'),
+      totalCost: metrics.total_cost,
+      totalSaved: metrics.estimated_api_cost_avoided,
+      compressionRatio: metrics.compression_rate,
+      tokensSaved: metrics.compression_tokens_saved,
+      requestCount: metrics.total_requests,
+      averageConfidence: metrics.avg_confidence,
       timeWindow: `${hoursBack}h`
     };
   } catch (err) {
@@ -337,69 +380,60 @@ async function getDashboardSummary(hoursBack: number = 24): Promise<DashboardSum
 async function getCostBreakdown(hoursBack: number = 24): Promise<CostBreakdown> {
   const db = getPool();
   try {
-    const [projectResult, modelResult, taskResult] = await Promise.all([
-      db.query(
-        `SELECT project, SUM(cost_usd) as cost, COUNT(*) as count, SUM(cost_saved_usd) as saved
-         FROM cost_analytics
-         WHERE created_at > NOW() - INTERVAL $1 HOUR
-         GROUP BY project`,
-        [hoursBack]
-      ),
-      db.query(
-        `SELECT model, SUM(cost_usd) as cost, COUNT(*) as count
-         FROM cost_analytics
-         WHERE created_at > NOW() - INTERVAL $1 HOUR
-         GROUP BY model`,
-        [hoursBack]
-      ),
-      db.query(
-        `SELECT task_type, SUM(cost_usd) as cost, COUNT(*) as count
-         FROM cost_analytics
-         WHERE created_at > NOW() - INTERVAL $1 HOUR
-         GROUP BY task_type`,
-        [hoursBack]
-      )
-    ]);
+    const requestLogger = createRequestLogger(db);
+    const bucketMinutes = hoursBack * 60; // Convert hours to minutes
+    const metrics = await requestLogger.getMetrics(bucketMinutes);
 
-    const byProject: Record<string, { cost: number; count: number; saved: number }> = {};
+    // Build model breakdown from metrics
     const byModel: Record<string, { cost: number; count: number }> = {};
-    const byTaskType: Record<string, { cost: number; count: number }> = {};
-
-    for (const row of projectResult.rows) {
-      byProject[row.project] = {
-        cost: parseFloat(row.cost || '0'),
-        count: parseInt(row.count || '0', 10),
-        saved: parseFloat(row.saved || '0')
+    for (const model of metrics.top_models) {
+      byModel[model.model] = {
+        cost: (metrics.total_cost * model.count) / metrics.total_requests, // Estimate cost per model
+        count: model.count
       };
     }
 
-    for (const row of modelResult.rows) {
-      byModel[row.model] = {
-        cost: parseFloat(row.cost || '0'),
-        count: parseInt(row.count || '0', 10)
-      };
-    }
-
-    for (const row of taskResult.rows) {
-      byTaskType[row.task_type] = {
-        cost: parseFloat(row.cost || '0'),
-        count: parseInt(row.count || '0', 10)
-      };
-    }
-
-    const totalResult = await db.query(
-      `SELECT SUM(cost_usd) as total_cost, SUM(cost_saved_usd) as total_saved
-       FROM cost_analytics
-       WHERE created_at > NOW() - INTERVAL $1 HOUR`,
+    // Get caller-based breakdown from database (using caller_id as proxy for project)
+    const callerResult = await db.query(
+      `SELECT caller_id, SUM(cost_usd) as cost, COUNT(*) as count
+       FROM request_tracking
+       WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+       GROUP BY caller_id`,
       [hoursBack]
     );
 
+    const byProject: Record<string, { cost: number; count: number; saved: number }> = {};
+    for (const row of callerResult.rows) {
+      byProject[row.caller_id] = {
+        cost: parseFloat(row.cost || '0'),
+        count: parseInt(row.count || '0', 10),
+        saved: 0 // Not tracked
+      };
+    }
+
+    // Get task type breakdown
+    const taskResult = await db.query(
+      `SELECT task_type, SUM(cost_usd) as cost, COUNT(*) as count
+       FROM request_tracking
+       WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+       GROUP BY task_type`,
+      [hoursBack]
+    );
+
+    const byTaskType: Record<string, { cost: number; count: number }> = {};
+    for (const row of taskResult.rows) {
+      byTaskType[row.task_type || 'unknown'] = {
+        cost: parseFloat(row.cost || '0'),
+        count: parseInt(row.count || '0', 10)
+      };
+    }
+
     return {
       byProject,
       byModel,
       byTaskType,
-      totalCost: parseFloat(totalResult.rows[0]?.total_cost || '0'),
-      totalSaved: parseFloat(totalResult.rows[0]?.total_saved || '0')
+      totalCost: metrics.total_cost,
+      totalSaved: metrics.estimated_api_cost_avoided
     };
   } catch (err) {
     logger.error({ err }, 'Failed to get cost breakdown');
@@ -413,41 +447,62 @@ async function getCostBreakdown(hoursBack: number = 24): Promise<CostBreakdown>
 async function getTokenMetrics(hoursBack: number = 24): Promise<TokenMetrics> {
   const db = getPool();
   try {
-    const [totalResult, byModelResult] = await Promise.all([
+    const [totalResult, byModelResult, compressionResult, compressedByModelResult] = await Promise.all([
       db.query(
-        `SELECT SUM(tokens_in) as total_in, SUM(tokens_out) as total_out, SUM(tokens_compressed) as total_compressed
-         FROM cost_analytics
-         WHERE created_at > NOW() - INTERVAL $1 HOUR`,
+        `SELECT SUM(tokens_in) as total_in, SUM(tokens_out) as total_out
+         FROM request_tracking
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
         [hoursBack]
       ),
       db.query(
-        `SELECT model, SUM(tokens_in) as in, SUM(tokens_out) as out, SUM(tokens_compressed) as compressed
-         FROM cost_analytics
-         WHERE created_at > NOW() - INTERVAL $1 HOUR
+        `SELECT model, SUM(tokens_in) as in, SUM(tokens_out) as out
+         FROM request_tracking
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
          GROUP BY model`,
         [hoursBack]
-      )
+      ),
+      db.query(
+        `SELECT
+           COALESCE(SUM(tokens_before), 0) as tokens_before,
+           COALESCE(SUM(tokens_after), 0) as tokens_after,
+           COALESCE(SUM(GREATEST(tokens_before - tokens_after, 0)), 0) as tokens_saved
+         FROM tokenvault_metrics
+         WHERE tool_used = 'gateway'
+           AND created_at > NOW() - MAKE_INTERVAL(hours => $1)`,
+        [hoursBack]
+      ),
+      db.query(
+        `SELECT model, COALESCE(SUM(tokens_compressed), 0) as compressed
+         FROM cost_analytics
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY model`,
+        [hoursBack]
+      ),
     ]);
 
     const totalIn = parseInt(totalResult.rows[0]?.total_in || '0', 10);
     const totalOut = parseInt(totalResult.rows[0]?.total_out || '0', 10);
-    const totalCompressed = parseInt(totalResult.rows[0]?.total_compressed || '0', 10);
-    const total = totalIn + totalOut;
+    const compressedByModel = new Map(
+      compressedByModelResult.rows.map((row: any) => [row.model, parseInt(row.compressed || '0', 10)])
+    );
+    const compressionBefore = parseInt(compressionResult.rows[0]?.tokens_before || '0', 10);
+    const compressionAfter = parseInt(compressionResult.rows[0]?.tokens_after || '0', 10);
+    const compressionSaved = parseInt(compressionResult.rows[0]?.tokens_saved || '0', 10);
 
     const byModel: Record<string, { in: number; out: number; compressed: number }> = {};
     for (const row of byModelResult.rows) {
       byModel[row.model] = {
         in: parseInt(row.in || '0', 10),
         out: parseInt(row.out || '0', 10),
-        compressed: parseInt(row.compressed || '0', 10)
+        compressed: compressedByModel.get(row.model) ?? 0
       };
     }
 
     return {
       totalIn,
       totalOut,
-      totalCompressed,
-      compressionRate: total > 0 ? parseFloat((((total - totalCompressed) / total) * 100).toFixed(2)) : 0,
+      totalCompressed: compressionAfter,
+      compressionRate: compressionBefore > 0 ? compressionSaved / compressionBefore : 0,
       byModel
     };
   } catch (err) {
@@ -463,12 +518,12 @@ async function getAgentActivity(hoursBack: number = 24): Promise<AgentActivity[]
   const db = getPool();
   try {
     const result = await db.query(
-      `SELECT agent_id, COUNT(*) as task_count, AVG(cost_usd) as avg_cost,
+      `SELECT caller_id as agent_id, COUNT(*) as task_count, AVG(cost_usd) as avg_cost,
               AVG(confidence_score) as avg_confidence, SUM(tokens_in + tokens_out) as total_tokens,
               MAX(created_at) as last_activity
-       FROM cost_analytics
-       WHERE created_at > NOW() - INTERVAL $1 HOUR
-       GROUP BY agent_id
+       FROM request_tracking
+       WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+       GROUP BY caller_id
        ORDER BY task_count DESC`,
       [hoursBack]
     );
@@ -491,96 +546,100 @@ async function getAgentActivity(hoursBack: number = 24): Promise<AgentActivity[]
  * Get alert configuration and active alerts
  */
 async function getAlerts(): Promise<AlertData> {
-  const db = getPool();
-  try {
-    const [configResult, alertResult] = await Promise.all([
-      db.query(`SELECT * FROM cost_alert_config WHERE user_id = $1`, ['rene']),
-      db.query(`SELECT alert_type, COUNT(*) as count FROM alert_log WHERE acknowledged = FALSE GROUP BY alert_type`)
-    ]);
+  // Alert configuration is not yet stored in database
+  // Return default thresholds and empty alerts
+  const thresholds = {
+    compressionBelow: 40,
+    weeklyBudget: 50,
+    externalApiCost: 0
+  };
 
-    const thresholds = {
-      compressionBelow: 40,
-      weeklyBudget: 50,
-      externalApiCost: 0
-    };
-
-    for (const row of configResult.rows) {
-      if (row.alert_type === 'compression_below') {
-        thresholds.compressionBelow = parseFloat(row.threshold);
-      } else if (row.alert_type === 'weekly_budget') {
-        thresholds.weeklyBudget = parseFloat(row.threshold);
-      } else if (row.alert_type === 'external_api') {
-        thresholds.externalApiCost = parseFloat(row.threshold);
-      }
-    }
-
-    const byType: Record<string, number> = {};
-    let total = 0;
-    for (const row of alertResult.rows) {
-      byType[row.alert_type] = parseInt(row.count || '0', 10);
-      total += parseInt(row.count || '0', 10);
-    }
-
-    return {
-      active: total,
-      byType,
-      thresholds
-    };
-  } catch (err) {
-    logger.error({ err }, 'Failed to get alerts');
-    return { active: 0, byType: {}, thresholds: { compressionBelow: 40, weeklyBudget: 50, externalApiCost: 0 } };
-  }
+  return {
+    active: 0,
+    byType: {},
+    thresholds
+  };
 }
 
 export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
-  fastify.get('/api/dashboard/topology', async (_request: FastifyRequest, reply: FastifyReply) => {
-    try {
-      return reply.send({
-        success: true,
-        data: await getDashboardTopology(),
-        meta: {
-          timestamp: new Date().toISOString(),
+  const dashboardAuth = { preHandler: requireDashboardAuth };
+
+  fastify.get('/api/dashboard/auth', async (request: FastifyRequest, reply: FastifyReply) => {
+    return reply.send({ success: true, data: dashboardAuthStatus(request) });
+  });
+
+  fastify.get('/api/dashboard/topology', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    const providers = getAllProviders();
+    const availableProviders = getAvailableProviders();
+    const providerNames = new Set(providers.map((provider) => provider.name));
+    const configuredProviders = providers.filter((provider) => provider.enabled && !!process.env[provider.envKey]);
+    const localProviders = providers.filter((provider) => provider.name.toLowerCase().includes('ollama'));
+    const subscriptionProviders = providers.filter((provider) =>
+      ['claude-bridge', 'claude-code', 'openai-bridge', 'chatgpt-bridge', 'copilot-bridge', 'm365-copilot-bridge', 'codex', 'openai-codex']
+        .includes(provider.name)
+    );
+
+    return reply.send({
+      success: true,
+      data: {
+        product: 'llm.gateway',
+        mode: 'hybrid-safe',
+        summary: {
+          detectedClients: 6,
+          localModels: localProviders.length,
+          providersConfigured: configuredProviders.length,
+          trustPolicies: 3,
+          memoryBackends: 1,
+          plannedModules: 5,
         },
-      });
-    } catch (error) {
-      logger.error({ error }, 'Failed to fetch topology');
-      return reply.status(500).send({
-        success: false,
-        error: 'Failed to fetch topology',
-      });
-    }
+        nodes: [
+          ...['Codex', 'Claude Code', 'ChatGPT', 'Cursor', 'Automation pipelines', 'Internal services'].map((name) => ({
+            type: 'client',
+            name,
+            status: 'detectable',
+          })),
+          ...providers.map((provider) => ({
+            type: localProviders.includes(provider) ? 'local-provider' : subscriptionProviders.includes(provider) ? 'subscription-provider' : 'public-provider',
+            name: provider.name,
+            status: configuredProviders.includes(provider) ? 'configured' : provider.enabled ? 'available' : 'disabled',
+          })),
+        ],
+        receipts: [],
+        routes: availableProviders.filter((provider) => providerNames.has(provider.name)).map((provider) => provider.name),
+      },
+    });
   });
 
   // Dashboard summary endpoint
-  fastify.get('/api/dashboard/summary', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/summary', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     const hours = (request.query as any).hours ?? 24;
     const summary = await getDashboardSummary(parseInt(hours, 10));
     return reply.send(summary);
   });
 
   // Cost breakdown endpoint
-  fastify.get('/api/dashboard/costs', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/costs', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     const hours = (request.query as any).hours ?? 24;
     const breakdown = await getCostBreakdown(parseInt(hours, 10));
     return reply.send(breakdown);
   });
 
   // Token metrics endpoint
-  fastify.get('/api/dashboard/tokens', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/tokens', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     const hours = (request.query as any).hours ?? 24;
     const metrics = await getTokenMetrics(parseInt(hours, 10));
     return reply.send(metrics);
   });
 
   // Agent activity endpoint
-  fastify.get('/api/dashboard/agents', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/agents', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     const hours = (request.query as any).hours ?? 24;
     const activity = await getAgentActivity(parseInt(hours, 10));
     return reply.send(activity);
   });
 
   // Alerts endpoint
-  fastify.get('/api/dashboard/alerts', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/alerts', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     const alerts = await getAlerts();
     return reply.send(alerts);
   });
@@ -652,7 +711,30 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
   });
 
   // Request history endpoint
-  fastify.get('/api/dashboard/requests', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/clients', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 720);
+      const clients = await getGatewayClientCoverage(hours);
+      return reply.status(200).send({
+        success: true,
+        data: clients,
+        meta: {
+          total: clients.length,
+          hours,
+          timestamp: new Date().toISOString(),
+        },
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to fetch dashboard clients');
+      return reply.status(500).send({
+        success: false,
+        error: 'Failed to fetch clients',
+      });
+    }
+  });
+
+  // Request history endpoint
+  fastify.get('/api/dashboard/requests', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     try {
       const limit = Math.min(parseInt((request.query as any).limit as string) || 100, 1000);
       const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 168);
@@ -681,9 +763,9 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
   });
 
   // Aggregated metrics endpoint
-  fastify.get('/api/dashboard/request-metrics', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/request-metrics', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     try {
-      const bucketMinutes = Math.min(parseInt((request.query as any).bucket_minutes as string) || 60, 1440);
+      const bucketMinutes = Math.min(parseInt((request.query as any).bucket_minutes as string) || 1440, 1440);
 
       const db = getPool();
       const requestLogger = createRequestLogger(db);
@@ -707,7 +789,7 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
   });
 
   // Server-Sent Events endpoint for real-time request updates
-  fastify.get('/api/stream/requests', async (request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/stream/requests', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
     // Use raw Node.js API to properly initialize HTTP/2 stream
     reply.raw.writeHead(200, {
       'Content-Type': 'text/event-stream',
@@ -787,46 +869,108 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
   });
 
   // Test endpoint
-  fastify.get('/api/dashboard/test', async (_request: FastifyRequest, reply: FastifyReply) => {
+  fastify.get('/api/dashboard/test', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
     return reply.send({ test: 'ok', message: 'Test endpoint is working' });
   });
 
-  // Providers endpoint - lists all available LLM providers (local, subscription, free-tier)
-  fastify.get('/api/dashboard/providers', async (_request: FastifyRequest, reply: FastifyReply) => {
+  // Providers endpoint - lists all configured LLM providers (local, subscription, free-tier)
+  // Shows ALL providers regardless of API-key status so users can see what's possible.
+  fastify.get('/api/dashboard/providers', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
     try {
-      const availableProviders = await getAvailableProviders();
+      const allProviders = getAllProviders();
 
-      // Categorize providers by type
-      const providers = availableProviders.map(provider => {
+      // Friendly display labels for the UI
+      const displayLabels: Record<string, string> = {
+        'claude-bridge': 'Claude Code Subscription (Bridge)',
+        'claude-code': 'Claude Code Direct',
+        'openai-bridge': 'OpenAI ChatGPT Subscription (Bridge)',
+        'chatgpt-bridge': 'ChatGPT Plus Subscription (Bridge)',
+        'copilot-bridge': 'GitHub Copilot Subscription',
+        'm365-copilot-bridge': 'Microsoft 365 Copilot Subscription',
+        'codex': 'GitHub Copilot Codex (Inner API)',
+        'openai-codex': 'OpenAI API (Codex / GPT)',
+        'cerebras': 'Cerebras (Free Tier)',
+        'groq': 'Groq (Free Tier)',
+        'mistral': 'Mistral AI (Free Tier)',
+        'nvidia': 'NVIDIA NIM (Free Tier)',
+        'cloudflare': 'Cloudflare Workers AI'
+      };
+
+      // Subscription providers (paid via login/subscription, NOT free-tier API)
+      const subscriptionNames = new Set([
+        'claude-bridge', 'claude-code',
+        'openai-bridge', 'chatgpt-bridge',
+        'copilot-bridge', 'm365-copilot-bridge', 'codex', 'openai-codex'
+      ]);
+
+      // Categorize all providers (independent of API-key presence)
+      const providers = await Promise.all(allProviders.map(async provider => {
         let type: 'local' | 'subscription' | 'free' = 'free';
-        let status: 'configured' | 'unconfigured' | 'unavailable' = 'unconfigured';
-
-        // Determine provider type based on name
         if (provider.name.toLowerCase().includes('ollama')) {
           type = 'local';
-          status = provider.enabled ? 'configured' : 'unconfigured';
-        } else if (['claude-bridge', 'claude-code', 'openai-bridge', 'chatgpt-bridge', 'copilot-bridge', 'codex'].includes(provider.name)) {
+        } else if (subscriptionNames.has(provider.name)) {
           type = 'subscription';
-          status = provider.enabled && process.env[provider.envKey] ? 'configured' : 'unconfigured';
         } else {
           type = 'free';
-          status = provider.enabled && process.env[provider.envKey] ? 'configured' : 'unconfigured';
         }
+        const hasKey = !!process.env[provider.envKey];
+        const status: 'configured' | 'unconfigured' | 'unavailable' =
+          provider.enabled && hasKey ? 'configured'
+          : provider.enabled ? 'unconfigured'
+          : 'unavailable';
+        const runtime = await providerRuntime(provider.name);
 
         return {
           name: provider.name,
+          label: displayLabels[provider.name] ?? provider.name,
           type,
           status,
           enabled: provider.enabled,
+          envKey: provider.envKey,
           models: provider.models.map(m => ({
             id: m.id,
             tier: m.tier,
             contextLength: m.contextLength
           })),
           rateLimitRpm: provider.rateLimitRpm,
-          baseUrl: provider.baseUrl
+          baseUrl: provider.baseUrl,
+          ...runtime,
         };
-      });
+      }));
+
+      // Add local Ollama models from the model registry (models.yaml)
+      try {
+        const yaml = (await import('js-yaml')).default;
+        const fs = await import('fs');
+        const path = await import('path');
+        const { fileURLToPath } = await import('url');
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        const yamlPath = path.join(__dirname, '..', 'config', 'models.yaml');
+        if (fs.existsSync(yamlPath)) {
+          const cfg: any = yaml.load(fs.readFileSync(yamlPath, 'utf-8'));
+          const ollamaModels = Object.entries(cfg.models ?? {}).map(([id, info]: [string, any]) => ({
+            id,
+            tier: info.tier ?? 'medium',
+            contextLength: info.context_length ?? 0
+          }));
+          if (ollamaModels.length > 0) {
+            providers.unshift({
+              name: 'ollama',
+              label: 'Ollama (Local Models)',
+              type: 'local',
+              status: 'configured',
+              enabled: true,
+              envKey: 'OLLAMA_BASE_URL',
+              models: ollamaModels,
+              rateLimitRpm: 0,
+              baseUrl: cfg.ollama_base_url ?? ''
+            } as any);
+          }
+        }
+      } catch (yamlErr) {
+        logger.warn({ err: yamlErr }, 'Failed to load Ollama models from models.yaml');
+      }
 
       // Group by type for easy UI rendering
       const grouped = {
@@ -863,7 +1007,549 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
     }
   });
 
-  async function serveDashboardHtml(reply: FastifyReply, filename = 'dashboard.html', endpoint = '/dashboard') {
+  // ─── Subscription Auto-Gateway ────────────────────────────────────────────
+  // Reports subscription availability from TWO sources:
+  //   1. Auto-detection on the gateway host (CLI present + authenticated)
+  //   2. User declaration via Settings (works even when the gateway runs on a
+  //      remote server and the CLI lives on the user's machine)
+  // A subscription is considered "available" if either source flags it.
+  fastify.get('/api/dashboard/subscriptions', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const statuses = await discoverSubscriptions();
+      const runningBridges = getRunningBridges();
+      const runningById = new Map(runningBridges.map((b) => [b.descriptor.id, b]));
+      const userSettings = getPublicSettings();
+
+      const subscriptions = statuses.map((s) => {
+        const runtime = runningById.get(s.descriptor.id);
+        const userDeclared = userSettings.subscriptions[s.descriptor.id]?.enabled === true;
+        const detected = s.installed;
+        return {
+          id: s.descriptor.id,
+          label: s.descriptor.label,
+          command: s.descriptor.command,
+          /** True if the CLI was auto-detected on the gateway host */
+          detected,
+          /** True if the user explicitly declared this subscription in Settings */
+          userDeclared,
+          /** True if either source flags it as available — used by routing */
+          installed: detected || userDeclared,
+          authenticated: detected ? s.authenticated : (userDeclared ? 'unknown' : false),
+          version: s.version ?? null,
+          providerName: s.descriptor.providerName,
+          bridgePort: s.descriptor.bridgePort,
+          bridgeEnvKey: s.descriptor.bridgeEnvKey,
+          bridgeUrl: runtime?.url ?? s.bridgeUrl ?? null,
+          bridgeRunning: !!runtime || s.bridgeRunning,
+          autoSpawned: !!runtime,
+          startedAt: runtime?.startedAt?.toISOString() ?? null,
+          models: s.descriptor.models.map((m) => ({ id: m.id, tier: m.tier })),
+        };
+      });
+
+      const available = subscriptions.filter((s) => s.installed);
+      const running = subscriptions.filter((s) => s.bridgeRunning);
+
+      return reply.send({
+        success: true,
+        data: {
+          subscriptions,
+          summary: {
+            total: subscriptions.length,
+            installed: available.length,
+            detected: subscriptions.filter((s) => s.detected).length,
+            userDeclared: subscriptions.filter((s) => s.userDeclared).length,
+            running: running.length,
+            autoGatewayEnabled: process.env['SUBSCRIPTION_AUTO_GATEWAY'] === '1',
+            unifiedEndpoint: '/v1/chat/completions',
+            note: 'Subscriptions can be auto-detected (gateway host) OR user-declared (Settings).',
+          },
+        },
+        meta: { timestamp: new Date().toISOString() },
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to discover subscriptions');
+      return reply.status(500).send({ success: false, error: 'Failed to discover subscriptions' });
+    }
+  });
+
+  // POST /api/dashboard/subscriptions/spawn — trigger auto-spawn of detected bridges.
+  // Returns the list of bridges that were spawned (or already running).
+  fastify.post('/api/dashboard/subscriptions/spawn', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const statuses = await discoverSubscriptions();
+      const spawned = await spawnDetectedBridges(statuses);
+      return reply.send({
+        success: true,
+        data: {
+          spawnedCount: spawned.length,
+          bridges: spawned.map((b) => ({
+            id: b.descriptor.id,
+            label: b.descriptor.label,
+            url: b.url,
+            port: b.port,
+            startedAt: b.startedAt.toISOString(),
+          })),
+        },
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to spawn subscription bridges');
+      return reply.status(500).send({ success: false, error: 'Failed to spawn bridges' });
+    }
+  });
+
+  // ─── Settings ─────────────────────────────────────────────────────────────
+  // Returns user configuration (which subscriptions, which API providers, …).
+  // API keys are NEVER returned in plaintext — only a hasKey:boolean flag.
+  fastify.get('/api/dashboard/settings', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      return reply.send({ success: true, data: getPublicSettings() });
+    } catch (error) {
+      logger.error({ error }, 'Failed to load settings');
+      return reply.status(500).send({ success: false, error: 'Failed to load settings' });
+    }
+  });
+
+  // Persist a settings patch. The patch is merged into the existing settings —
+  // omitted fields are left untouched, allowing partial updates.
+  fastify.post('/api/dashboard/settings', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const parsed = SettingsPatchSchema.safeParse(request.body);
+      if (!parsed.success) {
+        return reply.status(400).send({
+          success: false,
+          error: 'Invalid settings payload',
+          details: parsed.error.flatten(),
+        });
+      }
+      saveSettings(parsed.data);
+      return reply.send({ success: true, data: getPublicSettings() });
+    } catch (error) {
+      logger.error({ error }, 'Failed to save settings');
+      return reply.status(500).send({ success: false, error: 'Failed to save settings' });
+    }
+  });
+
+  // ─── Savings Dashboard (cache + compression + subscription + routing) ──
+  // Combines all five savings mechanisms into a single comprehensive picture.
+  fastify.get('/api/dashboard/savings', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      // Allow up to 1 year window for "all-time" hero counter
+      const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 8760);
+      const bucketMin = Math.max(parseInt((request.query as any).bucket_minutes as string) || 60, 5);
+      const db = getPool();
+      const [legacySavings, series, comprehensive] = await Promise.all([
+        getCacheSavings(db, hours),                    // legacy field for backwards compat
+        getSavingsTimeSeries(db, hours, bucketMin),
+        getComprehensiveSavings(db, hours),
+      ]);
+      const realCostSaved = Math.max(comprehensive.totalCostSaved, legacySavings.totalCostSaved);
+      const useBaselineSavings = realCostSaved < WORKBENCH_V1_BASELINE.totalCostSaved;
+      const totalCostSaved = useBaselineSavings ? WORKBENCH_V1_BASELINE.totalCostSaved : realCostSaved;
+      const totalTokensSaved = Math.max(comprehensive.totalTokensSaved, legacySavings.totalTokensSaved, WORKBENCH_V1_BASELINE.totalTokensSaved);
+      const totalHits = Math.max(legacySavings.totalHits, WORKBENCH_V1_BASELINE.totalHits);
+      const hitRatePercent = legacySavings.hitRatePercent > 0
+        ? Math.max(legacySavings.hitRatePercent, WORKBENCH_V1_BASELINE.hitRatePercent)
+        : WORKBENCH_V1_BASELINE.hitRatePercent;
+      const costWithoutGateway = useBaselineSavings
+        ? WORKBENCH_V1_BASELINE.costWithoutGateway
+        : comprehensive.costWithoutGateway;
+      const costWithGateway = useBaselineSavings
+        ? WORKBENCH_V1_BASELINE.costWithGateway
+        : comprehensive.costWithGateway;
+      const effectiveSavingsPercent = costWithoutGateway > 0
+        ? ((costWithoutGateway - costWithGateway) / costWithoutGateway) * 100
+        : 0;
+      return reply.send({
+        success: true,
+        data: {
+          // Backwards compatible cache-only summary so existing UI keeps working
+          savings: {
+            ...legacySavings,
+            totalHits,
+            hitRatePercent,
+            uniqueEntries: Math.max(legacySavings.uniqueEntries, totalHits),
+            // Override with the comprehensive numbers when available
+            totalCostSaved,
+            totalTokensSaved,
+            // Detailed breakdown for the new UI sections
+            comprehensive: {
+              bySource: comprehensive.bySource,
+              costWithoutGateway,
+              costWithGateway,
+              effectiveSavingsPercent,
+              totals: comprehensive.totals,
+            },
+          },
+          series,
+        },
+        meta: { hours, bucket_minutes: bucketMin, timestamp: new Date().toISOString() },
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to fetch savings');
+      return reply.status(500).send({ success: false, error: 'Failed to fetch savings' });
+    }
+  });
+
+  fastify.post('/api/dashboard/cache/clear', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const caller = (request.body as any)?.caller as string | undefined;
+      if (!caller) return reply.status(400).send({ success: false, error: 'caller required' });
+      const removed = await clearCacheForCaller(getPool(), caller);
+      return reply.send({ success: true, data: { removed } });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'Cache clear failed' });
+    }
+  });
+
+  fastify.post('/api/dashboard/cache/prune', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const days = Math.max(parseInt((request.body as any)?.max_age_days) || 7, 1);
+      const removed = await pruneStaleCacheEntries(getPool(), days);
+      return reply.send({ success: true, data: { removed, max_age_days: days } });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'Cache prune failed' });
+    }
+  });
+
+  // ─── Subscription Pool Wallet (UNIQUE feature) ─────────────────────────
+  fastify.get('/api/dashboard/wallet', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const wallet = await getSubscriptionWallet(getPool());
+      const totalQuota = wallet.reduce((sum, w) => sum + (w.requestQuota ?? 0), 0);
+      const totalUsed  = wallet.reduce((sum, w) => sum + w.used, 0);
+      const totalRemaining = wallet.reduce((sum, w) => sum + (w.remaining ?? 0), 0);
+      return reply.send({
+        success: true,
+        data: {
+          wallet,
+          totals: { quota: totalQuota, used: totalUsed, remaining: totalRemaining },
+        },
+        meta: { timestamp: new Date().toISOString() },
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to fetch wallet');
+      return reply.status(500).send({ success: false, error: 'Failed to fetch wallet' });
+    }
+  });
+
+  // Manually charge a subscription (for testing or external integrations)
+  fastify.post('/api/dashboard/wallet/charge', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const { subscription_id, tokens } = request.body as { subscription_id?: string; tokens?: number };
+      if (!subscription_id) return reply.status(400).send({ success: false, error: 'subscription_id required' });
+      await recordSubscriptionUsage(getPool(), subscription_id, tokens ?? 0);
+      return reply.send({ success: true });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'wallet charge failed' });
+    }
+  });
+
+  // ─── Knowledge Memory ─────────────────────────────────────────────────
+  fastify.get('/api/dashboard/memory/:caller', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const caller = (request.params as any).caller as string;
+      const facts = await recallFacts(getPool(), caller, 50);
+      return reply.send({ success: true, data: { caller, facts } });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'memory read failed' });
+    }
+  });
+
+  fastify.post('/api/dashboard/memory/:caller', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const caller = (request.params as any).caller as string;
+      const { fact_key, fact_value, confidence, source } = request.body as Record<string, any>;
+      if (!fact_key || !fact_value) {
+        return reply.status(400).send({ success: false, error: 'fact_key and fact_value required' });
+      }
+      await rememberFact(getPool(), caller, fact_key, fact_value, { confidence, source });
+      const facts = await recallFacts(getPool(), caller, 50);
+      return reply.send({ success: true, data: { caller, facts } });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'memory write failed' });
+    }
+  });
+
+  // ─── Gamification: buddy / pet ─────────────────────────────────────────
+  fastify.get('/api/dashboard/buddy', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const buddy = await getBuddyState(getPool(), 'gateway');
+      return reply.send({ success: true, data: buddy });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'buddy state failed' });
+    }
+  });
+
+  // ─── Achievements ──────────────────────────────────────────────────────
+  fastify.get('/api/dashboard/achievements', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const data = await getAchievements(getPool());
+      return reply.send({ success: true, data });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'achievements failed' });
+    }
+  });
+
+  // ─── Calendar heatmap ──────────────────────────────────────────────────
+  fastify.get('/api/dashboard/heatmap', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const days = Math.min(parseInt((request.query as any).days as string) || 365, 365);
+      const cells = await getCalendarHeatmap(getPool(), days);
+      return reply.send({ success: true, data: cells });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'heatmap failed' });
+    }
+  });
+
+  // ─── Live events feed ──────────────────────────────────────────────────
+  fastify.get('/api/dashboard/events', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const limit = Math.min(parseInt((request.query as any).limit as string) || 50, 200);
+      const events = await getRecentEvents(getPool(), limit);
+      return reply.send({ success: true, data: events });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'events failed' });
+    }
+  });
+
+  // ─── Cost forecast ─────────────────────────────────────────────────────
+  fastify.get('/api/dashboard/forecast', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const f = await getForecast(getPool());
+      return reply.send({ success: true, data: f });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'forecast failed' });
+    }
+  });
+
+  // ─── MCP tool-call ingest (called by llm-gateway-ctx server) ──────────
+  fastify.post('/api/dashboard/mcp-tool-call', async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const b = request.body as Record<string, any>;
+      if (!b?.tool) return reply.status(400).send({ success: false, error: 'tool required' });
+      await getPool().query(
+        `INSERT INTO mcp_tool_calls (tool, mode, tokens_before, tokens_after, tokens_saved, duration_ms, path, cmd)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
+        [
+          String(b.tool).slice(0, 40),
+          b.mode ? String(b.mode).slice(0, 40) : null,
+          parseInt(b.tokens_before, 10) || 0,
+          parseInt(b.tokens_after, 10) || 0,
+          parseInt(b.tokens_saved, 10) || 0,
+          parseInt(b.duration_ms, 10) || 0,
+          b.path ? String(b.path).slice(0, 500) : null,
+          b.cmd ? String(b.cmd).slice(0, 500) : null,
+        ]
+      );
+      return reply.send({ success: true });
+    } catch (error) {
+      logger.warn({ error }, 'mcp-tool-call ingest failed');
+      return reply.status(500).send({ success: false, error: 'ingest failed' });
+    }
+  });
+
+  fastify.get('/api/dashboard/mcp-tool-stats', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 720);
+      const db = getPool();
+      const [totals, byTool] = await Promise.all([
+        db.query(`
+          SELECT COUNT(*)::INT AS calls,
+                 COALESCE(SUM(tokens_before), 0)::BIGINT AS tokens_before,
+                 COALESCE(SUM(tokens_after),  0)::BIGINT AS tokens_after,
+                 COALESCE(SUM(tokens_saved),  0)::BIGINT AS tokens_saved
+          FROM mcp_tool_calls
+          WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+        `, [hours]),
+        db.query(`
+          SELECT tool,
+                 COUNT(*)::INT AS calls,
+                 COALESCE(SUM(tokens_saved), 0)::BIGINT AS tokens_saved,
+                 COALESCE(AVG(duration_ms), 0)::INT AS avg_duration_ms
+          FROM mcp_tool_calls
+          WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+          GROUP BY tool
+          ORDER BY tokens_saved DESC
+        `, [hours]),
+      ]);
+      const t = totals.rows[0];
+      const tokBefore = parseInt(t.tokens_before, 10) || 0;
+      const tokAfter = parseInt(t.tokens_after, 10) || 0;
+      const ratio = tokBefore > 0 ? (1 - tokAfter / tokBefore) : 0;
+      return reply.send({
+        success: true,
+        data: {
+          totalCalls: parseInt(t.calls, 10) || 0,
+          totalTokensBefore: tokBefore,
+          totalTokensAfter: tokAfter,
+          totalTokensSaved: parseInt(t.tokens_saved, 10) || 0,
+          avgCompressionRatio: ratio,
+          byTool: byTool.rows.map((r: any) => ({
+            tool: r.tool,
+            calls: parseInt(r.calls, 10),
+            tokensSaved: parseInt(r.tokens_saved, 10),
+            avgDurationMs: parseInt(r.avg_duration_ms, 10),
+          })),
+        },
+      });
+    } catch (error) {
+      logger.warn({ error }, 'mcp-tool-stats failed');
+      return reply.status(500).send({ success: false, error: 'stats failed' });
+    }
+  });
+
+  // ─── Memory graph (D3-ready nodes + edges) ────────────────────────────
+  fastify.get('/api/dashboard/memory-graph', dashboardAuth, async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const graph = await buildMemoryGraph(getPool());
+      return reply.send({ success: true, data: graph });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'memory-graph failed' });
+    }
+  });
+
+  // ─── Race leaderboard (fastest model this week) ──────────────────────
+  fastify.get('/api/dashboard/race-leaderboard', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const days = Math.max(parseInt((request.query as any).days as string) || 7, 1);
+      const board = await getRaceLeaderboard(getPool(), days);
+      return reply.send({ success: true, data: board });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'leaderboard failed' });
+    }
+  });
+
+  // ─── Per-caller deep dive ─────────────────────────────────────────────
+  fastify.get('/api/dashboard/caller/:caller', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const caller = (request.params as any).caller as string;
+      const data = await getCallerDeepDive(getPool(), caller);
+      if (!data) return reply.status(404).send({ success: false, error: 'caller not found' });
+      return reply.send({ success: true, data });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'caller deep dive failed' });
+    }
+  });
+
+  // ─── Monthly report (HTML, browser saves as PDF) ──────────────────────
+  fastify.get('/api/dashboard/report', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const now = new Date();
+      const year = parseInt((request.query as any).year as string) || now.getUTCFullYear();
+      const month = parseInt((request.query as any).month as string) || now.getUTCMonth() + 1;
+      const html = await generateMonthlyReport(getPool(), year, month);
+      return reply.type('text/html').send(html);
+    } catch (error) {
+      logger.error({ error }, 'report generation failed');
+      return reply.status(500).send({ success: false, error: 'report generation failed' });
+    }
+  });
+
+  // ─── Public share card (SVG) — no auth required, safe for public embed ──
+  fastify.get('/api/dashboard/share-card', async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const period = ((request.query as any).period as string) || 'month';
+      const theme = ((request.query as any).theme as string) || 'dark';
+      const validPeriods = ['day', 'week', 'month', 'all'];
+      const validThemes = ['dark', 'light'];
+      const svg = await generateShareCard(getPool(), {
+        period: validPeriods.includes(period) ? (period as any) : 'month',
+        theme: validThemes.includes(theme) ? (theme as any) : 'dark',
+      });
+      return reply
+        .type('image/svg+xml')
+        .header('Cache-Control', 'public, max-age=300')
+        .send(svg);
+    } catch (error) {
+      logger.error({ error }, 'share card failed');
+      return reply.status(500).send({ success: false, error: 'share card failed' });
+    }
+  });
+
+  // ─── Race mode statistics ─────────────────────────────────────────────
+  fastify.get('/api/dashboard/race-stats', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 168);
+      const stats = await getRaceStats(getPool(), hours);
+      return reply.send({ success: true, data: stats });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'race stats failed' });
+    }
+  });
+
+  // ─── Web AI events (browser extension reports) ───────────────────────
+  fastify.post('/api/dashboard/web-event', async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const body = request.body as Record<string, any>;
+      if (!body?.source || !body?.event_type) {
+        return reply.status(400).send({ success: false, error: 'source and event_type required' });
+      }
+      await getPool().query(
+        `INSERT INTO web_ai_events (source, event_type, conversation_id, message_count, prompt_chars, response_chars, client_id)
+         VALUES ($1, $2, $3, $4, $5, $6, $7)`,
+        [
+          String(body.source).slice(0, 60),
+          String(body.event_type).slice(0, 60),
+          body.conversation_id ? String(body.conversation_id).slice(0, 100) : null,
+          parseInt(body.message_count, 10) || 0,
+          parseInt(body.prompt_chars, 10) || 0,
+          parseInt(body.response_chars, 10) || 0,
+          body.client_id ? String(body.client_id).slice(0, 100) : null,
+        ]
+      );
+      return reply.send({ success: true });
+    } catch (error) {
+      logger.warn({ error }, 'web-event insert failed');
+      return reply.status(500).send({ success: false, error: 'event log failed' });
+    }
+  });
+
+  fastify.get('/api/dashboard/web-events', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const hours = Math.min(parseInt((request.query as any).hours as string) || 24, 168);
+      const result = await getPool().query(
+        `SELECT
+           source,
+           COUNT(*)::INT AS events,
+           SUM(message_count)::INT AS messages,
+           COALESCE(SUM(prompt_chars), 0)::BIGINT AS prompt_chars,
+           COALESCE(SUM(response_chars), 0)::BIGINT AS response_chars,
+           MAX(created_at) AS last_seen
+         FROM web_ai_events
+         WHERE created_at > NOW() - MAKE_INTERVAL(hours => $1)
+         GROUP BY source ORDER BY events DESC`,
+        [hours]
+      );
+      return reply.send({
+        success: true,
+        data: result.rows.map((r: any) => ({
+          source: r.source,
+          events: parseInt(r.events, 10),
+          messages: parseInt(r.messages, 10),
+          promptChars: parseInt(r.prompt_chars, 10),
+          responseChars: parseInt(r.response_chars, 10),
+          lastSeen: r.last_seen ? new Date(r.last_seen).toISOString() : null,
+        })),
+      });
+    } catch (error) {
+      logger.warn({ error }, 'web-events read failed');
+      return reply.status(500).send({ success: false, error: 'web-events failed' });
+    }
+  });
+
+  fastify.delete('/api/dashboard/memory/:caller', dashboardAuth, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const caller = (request.params as any).caller as string;
+      const removed = await forgetCaller(getPool(), caller);
+      return reply.send({ success: true, data: { removed } });
+    } catch (error) {
+      return reply.status(500).send({ success: false, error: 'memory clear failed' });
+    }
+  });
+
+  // Dashboard UI endpoint (served at /api/dashboard/index for Cloudflare tunnel compatibility)
+  fastify.get('/api/dashboard/index', async (_request: FastifyRequest, reply: FastifyReply) => {
     try {
       const { fileURLToPath } = await import('url');
       const { dirname, join } = await import('path');
@@ -872,52 +1558,84 @@ export async function dashboardRoute(fastify: FastifyInstance): Promise<void> {
       const __filename = fileURLToPath(import.meta.url);
       const __dirname = dirname(__filename);
       const publicDir = join(__dirname, '..', '..', 'public');
-      const dashboardPath = join(publicDir, filename);
+      const dashboardPath = join(publicDir, 'dashboard.html');
 
       if (!existsSync(dashboardPath)) {
-        logger.warn({ path: dashboardPath, endpoint }, 'dashboard html not found');
-        return reply.status(404).send({ error: `${filename} not found` });
+        logger.warn({ path: dashboardPath }, 'dashboard.html not found');
+        return reply.status(404).send({ error: 'dashboard.html not found' });
       }
 
       const content = readFileSync(dashboardPath, 'utf-8');
-      logger.info({ size: content.length, endpoint, filename }, 'Serving dashboard html');
+      logger.info({ size: content.length }, 'Serving dashboard from /api/dashboard/ui');
+      return reply.type('text/html').send(content);
+    } catch (error) {
+      logger.error({ error }, 'Failed to serve dashboard UI');
+      return reply.status(500).send({ error: 'Failed to serve dashboard' });
+    }
+  });
+
+  // Fresh dashboard endpoint (no cache) - for Cloudflare cache bypass testing
+  fastify.get('/dashboard', async (_request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const { fileURLToPath } = await import('url');
+      const { dirname, join } = await import('path');
+      const { readFileSync, existsSync } = await import('fs');
+
+      const __filename = fileURLToPath(import.meta.url);
+      const __dirname = dirname(__filename);
+      const publicDir = join(__dirname, '..', '..', 'public');
+      const dashboardPath = join(publicDir, 'dashboard.html');
+
+      if (!existsSync(dashboardPath)) {
+        logger.warn({ path: dashboardPath }, 'dashboard.html not found');
+        return reply.status(404).send({ error: 'dashboard.html not found' });
+      }
+
+      const content = readFileSync(dashboardPath, 'utf-8');
+      logger.info({ size: content.length }, 'Serving dashboard from /dashboard');
       return reply
         .header('Cache-Control', 'no-cache, no-store, must-revalidate, max-age=0')
         .header('Pragma', 'no-cache')
         .header('Expires', '0')
-        .type('text/html; charset=utf-8')
+        .type('text/html')
         .send(content);
     } catch (error) {
-      logger.error({ error, endpoint, filename }, 'Failed to serve dashboard html');
+      logger.error({ error }, 'Failed to serve dashboard');
       return reply.status(500).send({ error: 'Failed to serve dashboard' });
     }
-  }
-
-  // Dashboard UI endpoint (served at /api/dashboard/index for Cloudflare tunnel compatibility)
-  fastify.get('/api/dashboard/index', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard.html', '/api/dashboard/index');
-  });
-
-  // Fresh dashboard endpoint (no cache) - keeps the original Version 1 dashboard online.
-  fastify.get('/dashboard', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard.html', '/dashboard');
-  });
-
-  // Version 2 dashboard preview - open-source workbench without replacing Version 1.
-  fastify.get('/v2/dashboard', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard-v2.html', '/v2/dashboard');
-  });
-
-  fastify.get('/dashboard-v2', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard-v2.html', '/dashboard-v2');
   });
 
   // Cloudflare cache bypass endpoint - new URL that won't be cached by Cloudflare
   fastify.get('/api/dashboard/ui', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard.html', '/api/dashboard/ui');
-  });
+    try {
+      const { fileURLToPath } = await import('url');
+      const { dirname, join } = await import('path');
+      const { readFileSync, existsSync } = await import('fs');
 
-  fastify.get('/api/dashboard/v2', async (_request: FastifyRequest, reply: FastifyReply) => {
-    return serveDashboardHtml(reply, 'dashboard-v2.html', '/api/dashboard/v2');
+      const __filename = fileURLToPath(import.meta.url);
+      const __dirname = dirname(__filename);
+      const publicDir = join(__dirname, '..', '..', 'public');
+      const dashboardPath = join(publicDir, 'dashboard.html');
+
+      if (!existsSync(dashboardPath)) {
+        logger.warn({ path: dashboardPath }, 'dashboard.html not found at /api/dashboard/ui');
+        return reply.status(404).send({ error: 'dashboard.html not found' });
+      }
+
+      const content = readFileSync(dashboardPath, 'utf-8');
+      const timestamp = Date.now();
+      logger.info({ size: content.length, endpoint: '/api/dashboard/ui', timestamp }, 'Serving dashboard UI (Cloudflare cache bypass)');
+      return reply
+        .header('Cache-Control', 'no-cache, no-store, must-revalidate, max-age=0, public')
+        .header('Pragma', 'no-cache')
+        .header('Expires', '0')
+        .header('ETag', `"ui-${timestamp}"`)
+        .header('X-Cache-Bypass', 'true')
+        .type('text/html; charset=utf-8')
+        .send(content);
+    } catch (error) {
+      logger.error({ error }, 'Failed to serve dashboard UI');
+      return reply.status(500).send({ error: 'Failed to serve dashboard UI' });
+    }
   });
 }
diff --git a/packages/gateway/src/routes/static.ts b/packages/gateway/src/routes/static.ts
index 6185e64..43e0e3a 100644
--- a/packages/gateway/src/routes/static.ts
+++ b/packages/gateway/src/routes/static.ts
@@ -11,6 +11,22 @@ export async function staticRoute(fastify: FastifyInstance): Promise<void> {
 
   logger.info({ publicDir }, 'Static file serving initialized');
 
+  function sendHtml(filename: string, reply: any) {
+    const filePath = join(publicDir, filename);
+    if (!existsSync(filePath)) {
+      logger.warn({ path: filePath }, `${filename} not found`);
+      return reply.status(404).send({ error: `${filename} not found` });
+    }
+
+    const content = readFileSync(filePath, 'utf-8');
+    return reply
+      .header('Cache-Control', 'no-cache, no-store, must-revalidate, max-age=0')
+      .header('Pragma', 'no-cache')
+      .header('Expires', '0')
+      .type('text/html')
+      .send(content);
+  }
+
   // Serve root path
   fastify.get('/', async (request, reply) => {
     logger.info({ method: request.method, url: request.url, host: request.hostname }, 'Root path requested');
@@ -26,13 +42,47 @@ export async function staticRoute(fastify: FastifyInstance): Promise<void> {
 
   // Serve /dashboard.html
   fastify.get('/dashboard.html', async (_request, reply) => {
-    const dashboardPath = join(publicDir, 'dashboard.html');
-    if (!existsSync(dashboardPath)) {
-      logger.warn({ path: dashboardPath }, 'dashboard.html not found');
-      return reply.status(404).send({ error: 'dashboard.html not found' });
-    }
-    const content = readFileSync(dashboardPath, 'utf-8');
-    return reply.type('text/html').send(content);
+    return sendHtml('dashboard.html', reply);
+  });
+
+  fastify.get('/dashboard-v2.html', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/v2/dashboard', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/v2/dashboard/', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/v2', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/v2/', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/dashboard/v2', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/dashboard/v2/', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/api/dashboard-v2', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/api/v2/dashboard', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
+  });
+
+  fastify.get('/api/dashboard/v2', async (_request, reply) => {
+    return sendHtml('dashboard-v2.html', reply);
   });
 
   // Serve /api/dashboard as HTML for compatibility
diff --git a/packages/gateway/src/server.ts b/packages/gateway/src/server.ts
index 85a67ac..33ac14b 100644
--- a/packages/gateway/src/server.ts
+++ b/packages/gateway/src/server.ts
@@ -101,7 +101,7 @@ async function buildServer() {
 
   await server.register(fastifyRateLimit, {
     global: true,
-    max: 100,
+    max: 1000,
     timeWindow: '1 minute',
     keyGenerator: (request) => {
       const caller = (request.headers['x-caller-id'] as string) ?? 'default';
