pi-mega-compact 0.8.16 → 0.8.18

package/README.md

@@ -80,7 +80,7 @@ Detailed architecture: [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md)
 
 ```bash
 npm run build     # TypeScript compile
-npm test          # Build + 353 tests
+npm test          # Build + 609 tests
 npm run lint      # Type check + guardrails scan
 ```
 

package/dist/extensions/dashboard-server/api-contracts/endpoints.js

@@ -101,4 +101,16 @@ export const ENDPOINTS = {
         path: '/api/achievements',
         description: 'All achievement rows with unlock state.',
     },
+    /** GET /api/sessions — Active sessions with latest token usage (S39). */
+    sessions: {
+        method: 'GET',
+        path: '/api/sessions',
+        description: 'Active pi sessions with latest token usage + heartbeat.',
+    },
+    /** GET /api/sessions/timeseries — Stacked per-session token timeseries (S39). */
+    sessionTimeseries: {
+        method: 'GET',
+        path: '/api/sessions/timeseries',
+        description: 'Recharts-ready per-session token timeseries for the stacked memory graph.',
+    },
 };

package/dist/extensions/dashboard-server/api-contracts.test.js

@@ -73,9 +73,10 @@ void _c_gameScores;
 void _c_perf;
 void _c_achievements;
 // ─── Compile-Time: ENDPOINTS path/method consistency ─────────────────────────
-// Verify the ENDPOINTS registry has exactly 13 entries with correct paths.
+// Verify the ENDPOINTS registry has exactly 15 entries with correct paths.
+// (Sprint 39 added /api/sessions + /api/sessions/timeseries.)
 const ENDPOINT_KEYS = Object.keys(ENDPOINTS);
-const EXPECTED_ENDPOINT_COUNT = 13;
+const EXPECTED_ENDPOINT_COUNT = 15;
 /** All `/api/*` paths served by server.ts (extracted from the route handlers). */
 const SERVER_TS_PATHS = [
     "/api/snapshot",
@@ -90,10 +91,12 @@ const SERVER_TS_PATHS = [
     "/api/game-scores",
     "/api/perf",
     "/api/achievements",
+    "/api/sessions",
+    "/api/sessions/timeseries",
 ];
 // ─── Tests ───────────────────────────────────────────────────────────────────
 describe("ENDPOINTS registry", () => {
-    test("has exactly 13 endpoint entries", () => {
+    test("has exactly 15 endpoint entries", () => {
         assert.equal(ENDPOINT_KEYS.length, EXPECTED_ENDPOINT_COUNT, `ENDPOINTS must have ${EXPECTED_ENDPOINT_COUNT} entries, got ${ENDPOINT_KEYS.length}`);
     });
     test("every server.ts /api/* path has a corresponding ENDPOINTS entry", () => {
@@ -649,7 +652,7 @@ describe("GET /api/achievements", () => {
 // Validate the SseEvent union by checking each variant has a `type` field
 // matching its discriminator.
 describe("SSE /api/events — SseEvent union discriminator validation", () => {
-    /** All 20 SseEvent variants with their discriminator `type` value and a minimal payload. */
+    /** All 21 SseEvent variants with their discriminator `type` value and a minimal payload. */
     const SSE_VARIANTS = [
         {
             discriminator: "compact_start",
@@ -839,9 +842,19 @@ describe("SSE /api/events — SseEvent union discriminator validation", () => {
                 frame: "\x1b[2J\x1b[H",
             }),
         },
+        {
+            discriminator: "session_sample",
+            payload: JSON.stringify({
+                type: "session_sample",
+                ts: "2025-01-01T00:00:00Z",
+                sessionId: "sess-abc",
+                tokens: 42_000,
+                percent: 35.5,
+            }),
+        },
     ];
-    test("all 20 SseEvent variants have a type field matching their discriminator", () => {
-        assert.equal(SSE_VARIANTS.length, 20, "SseEvent union should have 20 variants");
+    test("all 21 SseEvent variants have a type field matching their discriminator", () => {
+        assert.equal(SSE_VARIANTS.length, 21, "SseEvent union should have 21 variants");
         for (const variant of SSE_VARIANTS) {
             const obj = JSON.parse(variant.payload);
             assert.ok("type" in obj, `SSE variant "${variant.discriminator}" must have a "type" field`);

package/dist/extensions/dashboard-server/helpers.js

@@ -0,0 +1,37 @@
+/**
+ * File-reading helper functions for the dashboard server.
+ */
+import { readFileSync } from "node:fs";
+export function readSnapshot(snapshotPath) {
+    try {
+        const raw = readFileSync(snapshotPath, "utf-8");
+        return JSON.parse(raw);
+    }
+    catch {
+        return {
+            version: 1,
+            updatedAt: null,
+            tier: "unknown",
+            config: { fastGatePct: 80, thresholdTokens: 100_000, anchorUserMessages: 1, preserveRecent: 2, auto: true, autoInlineK: 3 },
+            session: { id: null, state: null, persistedThisSession: false, lastCheckpointId: null, lastCompactedFrom: 0 },
+            context: { tokens: null, percent: null, contextWindow: 0 },
+            trigger: { armed: false, ready: false, currentTokens: null, thresholdTokens: 100_000, fastGatePct: 80 },
+            store: { checkpointCount: 0, totalTokenEstimate: 0, originalTokens: 0, tokensSaved: 0, injectedCount: 0, dedupHitRate: 0, storageDedupRate: 0, dedupCollapsed: 0 },
+            crew: { activeAgents: 0, currentTurn: 0 },
+            repo: { checkpointCount: 0, totalTokenEstimate: 0, originalTokens: 0, tokensSaved: 0, sessionCount: 0, dedupAttempts: 0, dedupCollapsed: 0, storageDedupRate: 0 },
+            integrity: { regionsRetained: 0, compressedOriginalBytes: 0, duplicatesCollapsed: 0, bytesPermanentlyDeleted: 0 },
+            model: undefined,
+        };
+    }
+}
+export function readFrom(path, charOffset) {
+    try {
+        const content = readFileSync(path, "utf-8");
+        if (content.length <= charOffset)
+            return { data: "", offset: charOffset };
+        return { data: content.slice(charOffset), offset: content.length };
+    }
+    catch {
+        return { data: "", offset: charOffset };
+    }
+}

package/dist/extensions/dashboard-server/html/all-repos-tab.js

@@ -0,0 +1,26 @@
+/**
+ * "All repos" tab panel — machine-wide registry table (index.sqlite).
+ *
+ * Rows are populated by the index poller in `script.ts` (shared with the
+ * in-panel table on the Current-repo tab via the same render call).
+ */
+export function allReposTab() {
+    return `<!-- All repos (machine-wide registry from index.sqlite) -->
+<div class="tab-panel" id="panel-all">
+  <table class="repos">
+    <thead>
+      <tr>
+        <th>Repo</th><th>Model</th>
+        <th style="text-align:right">Checkpoints</th>
+        <th style="text-align:right">Tokens Saved</th>
+        <th style="text-align:right">Retained</th>
+        <th style="text-align:right">Last Compacted</th>
+      </tr>
+    </thead>
+    <tbody id="all-rows"><tr><td colspan="6" class="repo-none">loading…</td></tr></tbody>
+  </table>
+  <div class="updated" id="all-updated"></div>
+</div>
+
+`;
+}

package/dist/extensions/dashboard-server/html/body-open.js

@@ -0,0 +1,23 @@
+/**
+ * Body opening: </head><body>, offline banner, page heading, and the tab nav.
+ *
+ * `tierName` is interpolated into the heading tier badge.
+ * Includes the new "High Score" future-tab button (next project).
+ */
+export function bodyOpen(tierName) {
+    return `</head>
+<body>
+
+<div class="offline-banner" id="offline-banner">Dashboard data unavailable — waiting for a pi session to write snapshot...</div>
+
+<h1><span>mega-compact</span><span class="tier">${tierName}</span><span class="model-pill" id="hdr-model">—</span></h1>
+
+<nav class="tabs">
+  <button class="tab active" data-tab="current">Current repo</button>
+  <button class="tab" data-tab="all">All repos</button>
+  <button class="tab" data-tab="summary">Summary</button>
+  <button class="tab future" data-tab="highscore">High Score<span class="soon">soon</span></button>
+</nav>
+
+`;
+}

package/dist/extensions/dashboard-server/html/current-repo-tab.js

@@ -0,0 +1,130 @@
+/**
+ * "Current repo" tab panel — the per-repo dashboard view.
+ *
+ * Contains: context-window meter, trigger status, vector-store stats,
+ * repo-wide stats, data-safety card, configuration, model & cost savings,
+ * crew/agents, a legend, the live event stream, and the in-panel all-repos
+ * table (shared rows with the All-repos tab via the index poller).
+ *
+ * `tierName` is interpolated into the Configuration card.
+ */
+export function currentRepoTab(tierName) {
+    return `<!-- Current repo (existing single-repo view) -->
+<div class="tab-panel" id="panel-current">
+<div class="grid">
+  <div class="card">
+    <h2>Context Window</h2>
+    <div class="meter-label" id="ctx-pct">—</div>
+    <div class="meter-track"><div class="meter-fill" id="ctx-bar" style="width:0%"></div></div>
+    <div class="meter-sub" id="ctx-sub">waiting for data</div>
+  </div>
+  <div class="card">
+    <h2>Trigger Status</h2>
+    <div class="status-row"><div class="bullet" id="tr-armed"></div><span>Armed (context ≥ fast gate)</span></div>
+    <div class="status-row"><div class="bullet" id="tr-ready"></div><span>Ready (tokens ≥ threshold)</span></div>
+    <div class="state-text" id="tr-state">waiting</div>
+  </div>
+  <div class="card">
+    <h2>Vector Store</h2>
+    <div class="stat-grid">
+      <span class="label" title="A saved summary of a chunk of your conversation that was compacted to free up space.">Checkpoints</span><span class="value" id="st-count">0</span>
+      <span class="label" title="How much conversation we are currently holding as compact summaries (the 'memory' this extension keeps). Smaller is better.">Tokens Stored</span><span class="value" id="st-tokens">0</span>
+      <span class="label" title="Total size of the original conversation text before it was compacted.">Original Tokens</span><span class="value" id="st-orig">0</span>
+      <span class="label" title="How much conversation space we have freed up for you (original size minus the compact summary we kept).">Tokens Saved</span><span class="value" id="st-saved">0</span>
+      <span class="label" title="How many times old context was automatically brought back into the conversation because it was relevant to what you were doing.">Injected</span><span class="value" id="st-injected">0</span>
+      <span class="label" title="Of the times we recalled old context, how often it was actually on-topic.">Recall Relevance</span><span class="value" id="st-dedup">0%</span>
+      <span class="label" title="How often new content matched something we already had, so we skipped storing a duplicate copy. Higher = less wasted space.">Storage Dedup</span><span class="value" id="st-sdedup">0%</span>
+      <span class="label" title="How many duplicate chunks we collapsed into one instead of storing separately.">Collapsed</span><span class="value" id="st-collapsed">0</span>
+      <span class="label" title="The ID of the most recent saved checkpoint.">Last ID</span><span class="value" id="st-lastid">—</span>
+    </div>
+  </div>
+  <div class="card">
+    <h2>Repo (all sessions)</h2>
+    <div class="stat-grid">
+      <span class="label">Checkpoints</span><span class="value" id="rp-count">0</span>
+      <span class="label">Tokens Stored</span><span class="value" id="rp-tokens">0</span>
+      <span class="label">Original Tokens</span><span class="value" id="rp-orig">0</span>
+      <span class="label">Tokens Saved</span><span class="value" id="rp-saved">0</span>
+      <span class="label">Sessions</span><span class="value" id="rp-sessions">0</span>
+      <span class="label">Collapsed</span><span class="value" id="rp-collapsed">0</span>
+      <span class="label">Storage Dedup</span><span class="value" id="rp-sdedup">0%</span>
+    </div>
+  </div>
+  <div class="card safe">
+    <h2>🛡 Data Safety</h2>
+    <div class="stat-grid">
+      <span class="label">Regions Retained</span><span class="value" id="ig-retained">0</span>
+      <span class="label">Compressed-Original</span><span class="value" id="ig-bytes">0 B</span>
+      <span class="label">Dedup Duplicates</span><span class="value" id="ig-dupes">0</span>
+      <span class="label">Permanently Deleted</span><span class="value ok" id="ig-deleted">0 B</span>
+    </div>
+    <p class="safe-note">Every compacted region is kept verbatim (compressed). "Drop" = removed from the live window only. We never delete your data.</p>
+  </div>
+  <div class="card">
+    <h2>Configuration</h2>
+    <div class="conf-grid">
+      <span class="label">Tier</span><span class="value" id="cf-tier">${tierName}</span>
+      <span class="label">Threshold</span><span class="value" id="cf-threshold">—</span>
+      <span class="label">Fast Gate</span><span class="value" id="cf-gate">—</span>
+      <span class="label">Auto</span><span class="value" id="cf-auto">—</span>
+      <span class="label">Anchor</span><span class="value" id="cf-anchor">—</span>
+    </div>
+  </div>
+  <div class="card cost">
+    <h2>💰 Model &amp; Cost Savings</h2>
+    <div class="cost-usd" id="cost-usd">≈ $0.00 saved</div>
+    <div class="cost-sub" id="cost-windows">0 context-windows extended</div>
+    <div class="stat-grid" style="margin-top:12px">
+      <span class="label" title="The model pi is currently using — its pricing drives the cost figure.">Model</span><span class="value" id="md-name">—</span>
+      <span class="label" title="The provider serving the model.">Provider</span><span class="value" id="md-provider">—</span>
+      <span class="label" title="USD per input token, from the model's pricing.">Input Rate</span><span class="value" id="md-input">—</span>
+      <span class="label" title="USD per output token, from the model's pricing.">Output Rate</span><span class="value" id="md-output">—</span>
+    </div>
+  </div>
+  <div class="card">
+    <h2>Crew / Agents</h2>
+    <div class="stat-grid">
+      <span class="label">Active Agents</span><span class="value" id="cr-agents">0</span>
+      <span class="label">Current Turn</span><span class="value" id="cr-turn">0</span>
+      <span class="label">Status</span><span class="value" id="cr-status">idle</span>
+    </div>
+  </div>
+  <div class="card legend">
+    <h2>What these numbers mean</h2>
+    <ul class="legend-list">
+      <li><b>Tokens saved</b> — conversation space this extension has freed up for you (it compacted old text into short summaries).</li>
+      <li><b>Tokens stored</b> — how much "memory" (compact summaries) the extension is currently holding for this repo.</li>
+      <li><b>Injected</b> — times old context was automatically pasted back in because it was relevant to your current task.</li>
+      <li><b>Recall relevance</b> — of those, how often the recalled context was actually on-topic.</li>
+      <li><b>Storage dedup</b> — how often new content matched something already saved, so a duplicate copy was skipped (saves space).</li>
+      <li><b>Data safety</b> — every compacted region is kept verbatim (compressed). Nothing is permanently deleted; you can restore any of it.</li>
+    </ul>
+    <p class="legend-note">Hover any label above for a quick explanation.</p>
+  </div>
+</div>
+
+<div class="events">
+  <h2>Event Stream</h2>
+  <div class="events-wrap" id="events"><div class="empty">connecting…</div></div>
+</div>
+
+<h2 style="margin-top:24px;font-size:13px;color:#8b949e;text-transform:uppercase;letter-spacing:.5px">All Repositories</h2>
+<table class="repos">
+  <thead>
+    <tr>
+      <th>Repo</th><th>Model</th>
+      <th style="text-align:right">Checkpoints</th>
+      <th style="text-align:right">Tokens Saved</th>
+      <th style="text-align:right">Retained</th>
+      <th style="text-align:right">Last Compacted</th>
+    </tr>
+  </thead>
+  <tbody id="cur-rows"><tr><td colspan="6" class="repo-none">loading…</td></tr></tbody>
+</table>
+<div class="updated" id="cur-updated"></div>
+
+<div class="updated" id="updated"></div>
+</div><!-- /panel-current -->
+
+`;
+}

package/dist/extensions/dashboard-server/html/head-open.js

@@ -0,0 +1,16 @@
+/**
+ * Document opening: DOCTYPE, <html>, <head> opening + meta/title.
+ *
+ * Styles are injected between this fragment and `bodyOpen()` by the
+ * `dashboardHtml` composer in `../html-template.ts`.
+ */
+export function headOpen() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>mega-compact dashboard</title>
+`;
+    // trailing \n preserves the original blank-line separation to <style> in the composer
+}

package/dist/extensions/dashboard-server/html/high-score-tab.js

@@ -0,0 +1,25 @@
+/**
+ * "High Score" tab — FUTURE / PLACEHOLDER.
+ *
+ * Reserved for the next project milestone: a per-repo + global
+ * compaction-savings leaderboard ("high score" — most tokens saved, best
+ * recall relevance, longest context-window extension streak, etc.).
+ *
+ * Ships as a visible-but-inert stub so the tab nav, routing, and styles are
+ * in place; the data model + scoring logic land in a follow-up. The composer
+ * in `../html-template.ts` includes this panel; `script.ts` wires
+ * `highscore` into the tab-switch `panels` map so clicking the tab reveals
+ * this placeholder.
+ */
+export function highScoreTab() {
+    return `<!-- High Score (FUTURE / placeholder for the next project milestone) -->
+<div class="tab-panel" id="panel-highscore">
+  <div class="placeholder">
+    <div class="em">🏆</div>
+    <h2>High Score</h2>
+    <p>A compaction-savings leaderboard is coming in the next project milestone — per-repo and global rankings for tokens saved, recall relevance, and context-window extension streaks. Stay tuned.</p>
+  </div>
+</div>
+
+`;
+}

package/dist/extensions/dashboard-server/html/repo-detail-modal.js

@@ -0,0 +1,26 @@
+/**
+ * Per-repo detail modal — fixed overlay opened when a repo row is clicked.
+ *
+ * Position-independent in the DOM; the modal is toggled via the `.open`
+ * class by `script.ts`. Sits between the tab panels and the script so it
+ * overlays whichever panel is active.
+ */
+export function repoDetailModal() {
+    return `<!-- Per-repo detail modal -->
+<div class="repo-detail" id="repo-detail">
+  <div class="repo-detail-box">
+    <h2><span id="rd-name">Repo</span><button class="repo-close" id="rd-close" title="Close">×</button></h2>
+    <div class="repo-path" id="rd-path"></div>
+    <div class="stat-grid">
+      <span class="label">Model</span><span class="value" id="rd-model">—</span>
+      <span class="label">Checkpoints</span><span class="value" id="rd-cp">0</span>
+      <span class="label">Tokens Saved</span><span class="value" id="rd-saved">0</span>
+      <span class="label">Compressed-Original</span><span class="value" id="rd-bytes">0 B</span>
+      <span class="label">Last Compacted</span><span class="value" id="rd-when">—</span>
+      <span class="label">Provider</span><span class="value" id="rd-provider">—</span>
+    </div>
+  </div>
+</div>
+
+`;
+}

package/dist/extensions/dashboard-server/html/script.js

@@ -0,0 +1,259 @@
+/**
+ * Client-side script: snapshot polling, SSE event stream, multi-repo index
+ * polling, per-repo detail modal, and tab switching.
+ *
+ * One IIFE — the logic is cross-tab (the index poller writes to both the
+ * Current-repo table and the All-repos tab) so it stays cohesive rather than
+ * being split per-tab. `</body></html>` closes the document.
+ *
+ * PREVENT-PI-004: the two `fetch(...)` calls below are the dashboard's
+ * browser-side localhost probes and carry inline `// guardrails-allow
+ * PREVENT-PI-004: <reason>` annotations (scanner-enforced).
+ */
+export function script() {
+    return `<script>
+(function() {
+  var evBox = document.getElementById('events');
+  var evBuffer = [];
+  var MAX_EV = 50;
+  var offlineBanner = document.getElementById('offline-banner');
+
+  function bullet(el, on, na) {
+    el.className = 'bullet ' + (na ? 'bullet-na' : on ? 'bullet-on' : 'bullet-off');
+  }
+
+  function renderSnapshot(d) {
+    if (!d || !d.updatedAt) { offlineBanner.style.display = 'block'; return; }
+    offlineBanner.style.display = 'none';
+
+    var pct = d.context.percent || 0;
+    document.getElementById('ctx-pct').textContent = pct + '%';
+    var bar = document.getElementById('ctx-bar');
+    bar.style.width = Math.max(pct, 1) + '%';
+    bar.className = 'meter-fill ' + (pct >= 90 ? 'meter-red' : pct >= 70 ? 'meter-yellow' : 'meter-green');
+    var tok = d.context.tokens != null ? d.context.tokens.toLocaleString() : '?';
+    var win = d.context.contextWindow ? d.context.contextWindow.toLocaleString() : '?';
+    document.getElementById('ctx-sub').textContent = tok + ' / ' + win + ' tokens';
+
+    bullet(document.getElementById('tr-armed'), d.trigger.armed, false);
+    bullet(document.getElementById('tr-ready'), d.trigger.ready, !d.trigger.armed);
+    var state = d.trigger.ready ? 'THRESHOLD EXCEEDED — compacting next event' :
+                d.trigger.armed ? 'past fast gate — monitoring token count' : 'idle — below fast gate';
+    document.getElementById('tr-state').textContent = state;
+
+    document.getElementById('st-count').textContent = d.store.checkpointCount;
+    document.getElementById('st-tokens').textContent = d.store.totalTokenEstimate.toLocaleString();
+    document.getElementById('st-orig').textContent = (d.store.originalTokens || 0).toLocaleString();
+    document.getElementById('st-saved').textContent = (d.store.tokensSaved || 0).toLocaleString();
+    document.getElementById('st-injected').textContent = d.store.injectedCount;
+    document.getElementById('st-dedup').textContent = Math.round(d.store.dedupHitRate * 100) + '%';
+    var sdr = d.store.storageDedupRate || 0;
+    document.getElementById('st-sdedup').textContent = (sdr * 100 >= 10 ? Math.round(sdr * 100) : (sdr * 100).toFixed(1)) + '%';
+    document.getElementById('st-collapsed').textContent = d.store.dedupCollapsed || 0;
+    document.getElementById('st-lastid').textContent = d.session.lastCheckpointId || '—';
+
+    // Repo-wide (all sessions in this repo's SQLite store).
+    var repo = d.repo || { checkpointCount: 0, totalTokenEstimate: 0, originalTokens: 0, tokensSaved: 0, sessionCount: 0, dedupCollapsed: 0, storageDedupRate: 0 };
+    document.getElementById('rp-count').textContent = repo.checkpointCount;
+    document.getElementById('rp-tokens').textContent = repo.totalTokenEstimate.toLocaleString();
+    document.getElementById('rp-orig').textContent = (repo.originalTokens || 0).toLocaleString();
+    document.getElementById('rp-saved').textContent = (repo.tokensSaved || 0).toLocaleString();
+    document.getElementById('rp-sessions').textContent = repo.sessionCount || 0;
+    document.getElementById('rp-collapsed').textContent = repo.dedupCollapsed || 0;
+    var rsdr = repo.storageDedupRate || 0;
+    document.getElementById('rp-sdedup').textContent = (rsdr * 100 >= 10 ? Math.round(rsdr * 100) : (rsdr * 100).toFixed(1)) + '%';
+
+    // Data-safety invariant (Phase 0 — trust foundation).
+    var ig = d.integrity || { regionsRetained: 0, compressedOriginalBytes: 0, duplicatesCollapsed: 0, bytesPermanentlyDeleted: 0 };
+    function fmtBytes(b) {
+      b = b || 0;
+      if (b >= 1048576) return (b / 1048576).toFixed(1) + ' MiB';
+      if (b >= 1024) return (b / 1024).toFixed(1) + ' KiB';
+      return b + ' B';
+    }
+    document.getElementById('ig-retained').textContent = (ig.regionsRetained || 0).toLocaleString();
+    document.getElementById('ig-bytes').textContent = fmtBytes(ig.compressedOriginalBytes);
+    document.getElementById('ig-dupes').textContent = (ig.duplicatesCollapsed || 0).toLocaleString();
+    document.getElementById('ig-deleted').textContent = fmtBytes(ig.bytesPermanentlyDeleted);
+
+    // Crew / agents (live sub-agent activity + turn).
+    var crew = d.crew || { activeAgents: 0, currentTurn: 0 };
+    document.getElementById('cr-agents').textContent = crew.activeAgents || 0;
+    document.getElementById('cr-turn').textContent = crew.currentTurn || 0;
+    document.getElementById('cr-status').textContent = (crew.activeAgents > 0)
+      ? ('▶ ' + crew.activeAgents + ' running') : 'idle';
+
+    document.getElementById('cf-tier').textContent = d.tier;
+    document.getElementById('cf-threshold').textContent = d.config.thresholdTokens.toLocaleString();
+    document.getElementById('cf-gate').textContent = d.config.fastGatePct + '%';
+    document.getElementById('cf-auto').textContent = d.config.auto ? 'enabled' : 'disabled';
+    document.getElementById('cf-anchor').textContent = d.config.anchorUserMessages;
+
+    // --- Active model + cost savings (same calc as /mega-status) ---------------
+    var model = d.model;
+    document.getElementById('hdr-model').textContent = model && model.name ? model.name : '—';
+    document.getElementById('md-name').textContent = model && model.name ? model.name : '—';
+    document.getElementById('md-provider').textContent = model && model.providerName ? model.providerName : (model && model.provider ? model.provider : '—');
+    document.getElementById('md-input').textContent = model && model.inputRate ? '$' + (model.inputRate).toFixed(6) : '—';
+    document.getElementById('md-output').textContent = model && model.outputRate ? '$' + (model.outputRate).toFixed(6) : '—';
+    if (model && model.inputRate && repo.tokensSaved > 0) {
+      var usd = (repo.tokensSaved * model.inputRate);
+      var win = d.context.contextWindow || 0;
+      var windows = win > 0 ? (repo.tokensSaved / win).toFixed(1) : '0';
+      document.getElementById('cost-usd').textContent = '≈ $' + usd.toFixed(4) + ' saved';
+      document.getElementById('cost-windows').textContent = windows + ' context-windows extended';
+    } else {
+      document.getElementById('cost-usd').textContent = '≈ $0.00 saved';
+      document.getElementById('cost-windows').textContent = '0 context-windows extended';
+    }
+
+    document.getElementById('updated').textContent = 'Updated ' + new Date(d.updatedAt).toLocaleTimeString();
+  }
+
+  function sanitize(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function renderEvent(ev) {
+    evBuffer.unshift(ev);
+    if (evBuffer.length > MAX_EV) evBuffer.length = MAX_EV;
+    evBox.innerHTML = evBuffer.map(function(e) {
+      var t = e.ts ? new Date(e.ts).toLocaleTimeString() : '';
+      var detail = '';
+      if (e.data) {
+        if (e.data.checkpointId) detail = sanitize(e.data.checkpointId);
+        else if (e.data.query) detail = sanitize(e.data.query.slice(0, 80));
+        if (e.data.tokenEstimate != null) detail += '  ' + e.data.tokenEstimate + ' tok';
+        if (e.data.deduped) detail += '  (deduped)';
+        if (e.data.injected != null) detail = 'injected: ' + e.data.injected + (e.data.empty ? ' (empty)' : '');
+      }
+      return '<div class="ev">' +
+        '<span class="ev-time">' + t + '</span>' +
+        '<span class="ev-type ev-type-' + sanitize(e.type) + '">' + sanitize(e.type) + '</span>' +
+        '<span class="ev-detail">' + detail + '</span></div>';
+    }).join('');
+  }
+
+  // Poll snapshot every 2s
+  function pollSnapshot() {
+    fetch('/api/snapshot').then(function(r) { return r.json(); }).then(renderSnapshot).catch(function() {}); // guardrails-allow PREVENT-PI-004: dashboard browser-side fetch (localhost)
+  }
+  pollSnapshot();
+  setInterval(pollSnapshot, 2000);
+
+  // SSE for events
+  function connectSSE() {
+    var es = new EventSource('/api/events');
+    es.onmessage = function(msg) {
+      try { renderEvent(JSON.parse(msg.data)); } catch(e) {}
+    };
+    es.onerror = function() {
+      es.close();
+      setTimeout(connectSSE, 3000);
+    };
+  }
+  connectSSE();
+
+  // --- Multi-repo (index.sqlite via /api/index) ---------------------------
+  function fmtBytesTop(b) {
+    b = b || 0;
+    if (b >= 1048576) return (b / 1048576).toFixed(1) + ' MiB';
+    if (b >= 1024) return (b / 1024).toFixed(1) + ' KiB';
+    return b + ' B';
+  }
+  function renderIndex(d) {
+    d = d || { updatedAt: null, summary: null, repos: [] };
+    var repos = d.repos || [];
+    var s = d.summary || { totalRepos: 0, totalCheckpoints: 0, totalTokensSaved: 0, totalCompressedOriginalBytes: 0 };
+    document.getElementById('sm-repos').textContent = (s.totalRepos || 0).toLocaleString();
+    document.getElementById('sm-checkpoints').textContent = (s.totalCheckpoints || 0).toLocaleString();
+    document.getElementById('sm-saved').textContent = (s.totalTokensSaved || 0).toLocaleString();
+    document.getElementById('sm-bytes').textContent = fmtBytesTop(s.totalCompressedOriginalBytes);
+
+    // Shared clickable-row renderer for both the in-current table and the
+    // All-repos tab — each row opens the per-repo detail modal.
+    function rowsHtml() {
+      if (!repos.length) return '<tr><td colspan="6" class="repo-none">No repositories registered yet.</td></tr>';
+      return repos.map(function(r) {
+        var model = r.modelName
+          ? '<span class="repo-model">' + sanitize(r.modelName) + '</span>'
+          : '<span class="repo-none">—</span>';
+        var when = r.lastCompactedAt ? new Date(r.lastCompactedAt).toLocaleString() : '—';
+        return '<tr class="repo-link" data-repo="' + sanitize(r.repoRoot) + '">' +
+          '<td title="' + sanitize(r.repoRoot) + '">' + sanitize(r.displayName || r.repoRoot) + '</td>' +
+          '<td>' + model + '</td>' +
+          '<td class="num">' + (r.checkpointCount || 0).toLocaleString() + '</td>' +
+          '<td class="num">' + (r.tokensSaved || 0).toLocaleString() + '</td>' +
+          '<td class="num">' + fmtBytesTop(r.compressedOriginalBytes) + '</td>' +
+          '<td class="num">' + sanitize(when) + '</td>' +
+        '</tr>';
+      }).join('');
+    }
+    document.getElementById('cur-rows').innerHTML = rowsHtml();
+    document.getElementById('all-rows').innerHTML = rowsHtml();
+    bindRepoRows();
+
+    var stamp = d.updatedAt ? 'Updated ' + new Date(d.updatedAt).toLocaleTimeString() : '';
+    document.getElementById('cur-updated').textContent = stamp;
+    document.getElementById('all-updated').textContent = stamp;
+    document.getElementById('sm-updated').textContent = stamp;
+  }
+
+  // Per-repo detail modal ---------------------------------------------------
+  var detailEl = document.getElementById('repo-detail');
+  var indexCache = { repos: [] };
+  function openRepoDetail(root) {
+    var r = null;
+    for (var i = 0; i < indexCache.repos.length; i++) {
+      if (indexCache.repos[i].repoRoot === root) { r = indexCache.repos[i]; break; }
+    }
+    if (!r) return;
+    document.getElementById('rd-name').textContent = r.displayName || r.repoRoot;
+    document.getElementById('rd-path').textContent = r.repoRoot;
+    document.getElementById('rd-model').textContent = r.modelName || '—';
+    document.getElementById('rd-provider').textContent = r.providerName || (r.provider || '—');
+    document.getElementById('rd-cp').textContent = (r.checkpointCount || 0).toLocaleString();
+    document.getElementById('rd-saved').textContent = (r.tokensSaved || 0).toLocaleString();
+    document.getElementById('rd-bytes').textContent = fmtBytesTop(r.compressedOriginalBytes);
+    document.getElementById('rd-when').textContent = r.lastCompactedAt ? new Date(r.lastCompactedAt).toLocaleString() : '—';
+    detailEl.classList.add('open');
+  }
+  document.getElementById('rd-close').addEventListener('click', function() { detailEl.classList.remove('open'); });
+  detailEl.addEventListener('click', function(e) { if (e.target === detailEl) detailEl.classList.remove('open'); });
+  function bindRepoRows() {
+    var rows = document.querySelectorAll('.repo-link');
+    for (var i = 0; i < rows.length; i++) {
+      rows[i].addEventListener('click', function() { openRepoDetail(this.getAttribute('data-repo')); });
+    }
+  }
+  function pollIndex() {
+    fetch('/api/index').then(function(r) { return r.json(); }).then(function(d) { // guardrails-allow PREVENT-PI-004: dashboard browser-side fetch (localhost)
+      indexCache = d && d.repos ? d : indexCache;
+      renderIndex(d);
+    }).catch(function() {});
+  }
+  pollIndex();
+  setInterval(pollIndex, 5000);
+
+  // --- Tab switching ------------------------------------------------------
+  var tabs = document.querySelectorAll('.tab');
+  var panels = { current: 'panel-current', all: 'panel-all', summary: 'panel-summary', highscore: 'panel-highscore' };
+  for (var i = 0; i < tabs.length; i++) {
+    tabs[i].addEventListener('click', function() {
+      var name = this.getAttribute('data-tab');
+      for (var j = 0; j < tabs.length; j++) tabs[j].classList.remove('active');
+      this.classList.add('active');
+      for (var k in panels) {
+        if (Object.prototype.hasOwnProperty.call(panels, k)) {
+          var el = document.getElementById(panels[k]);
+          if (el) el.classList.toggle('active', k === name);
+        }
+      }
+      if (name === 'all' || name === 'summary') pollIndex();
+    });
+  }
+})();
+</script>
+</body>
+</html>`;
+}