pi-mega-compact 0.8.21 → 0.8.23

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

@@ -3,6 +3,7 @@
  */
 import { dashboardServerVersion } from "./state.js";
 import { THEMES, DEFAULT_THEME, themeDataBlock } from "../../src/config/themes.js";
+import { dashboardClientJs } from "./dashboard-client.js";
 // Server-side injection of every theme's :root[data-theme="<id>"] CSS-var
 // override block so the client can switch themes instantly by setting
 // document.documentElement.dataset.theme. PREVENT-PI-004: pure local, no network.
@@ -454,627 +455,7 @@ export function dashboardHtml(tierName) {
 </div>
 
 <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;
-
-    // ---- Vector Store — reconciled token accounting (same formula as widget) -
-    document.getElementById('st-count').textContent = d.store.checkpointCount;
-    // Compression block from the snapshot (Freed = In − Out, single formula).
-    var c = d.compression || {};
-    var sess = c.session || { tokensIn:0, tokensOut:0, tokensFreed:0, compressionPct:0, dedupPct:0 };
-    var cRepo = c.repo || { tokensIn:0, tokensOut:0, tokensFreed:0, compressionPct:0, dedupPct:0 };
-    document.getElementById('st-in').textContent = sess.tokensIn.toLocaleString();
-    document.getElementById('st-kept').textContent = sess.tokensOut.toLocaleString();
-    document.getElementById('st-freed').textContent = sess.tokensFreed.toLocaleString();
-    var sp = sess.compressionPct || 0;
-    document.getElementById('st-compress-bar').style.width = Math.max(sp * 100, 0.5) + '%';
-    document.getElementById('st-compress-bar').className = 'meter-fill ' + (sp >= 0.9 ? 'meter-green' : sp >= 0.6 ? 'meter-yellow' : 'meter-red');
-    document.getElementById('st-compress-sub').textContent = (sp * 100 >= 10 ? Math.round(sp * 100) : (sp * 100).toFixed(1)) + '% tokens saved · dedup: ' + (sess.dedupPct * 100 >= 10 ? Math.round(sess.dedupPct * 100) : (sess.dedupPct * 100).toFixed(1)) + '%';
-    // ------
-    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 (all sessions) — same compression fields, repo scope ----------
-    document.getElementById('rp-count').textContent = (d.repo && d.repo.checkpointCount || 0).toLocaleString();
-    document.getElementById('rp-in').textContent = cRepo.tokensIn.toLocaleString();
-    document.getElementById('rp-kept').textContent = cRepo.tokensOut.toLocaleString();
-    document.getElementById('rp-freed').textContent = cRepo.tokensFreed.toLocaleString();
-    document.getElementById('rp-sessions').textContent = (d.repo && d.repo.sessionCount || 0).toLocaleString();
-    document.getElementById('rp-collapsed').textContent = (d.repo && d.repo.dedupCollapsed || 0).toLocaleString();
-    var rdr = d.repo && d.repo.storageDedupRate || 0;
-    document.getElementById('rp-sdedup').textContent = (rdr * 100 >= 10 ? Math.round(rdr * 100) : (rdr * 100).toFixed(1)) + '%';
-    var rp = cRepo.compressionPct || 0;
-    document.getElementById('rp-compress-bar').style.width = Math.max(rp * 100, 0.5) + '%';
-    document.getElementById('rp-compress-bar').className = 'meter-fill ' + (rp >= 0.9 ? 'meter-green' : rp >= 0.6 ? 'meter-yellow' : 'meter-red');
-    document.getElementById('rp-compress-sub').textContent = (rp * 100 >= 10 ? Math.round(rp * 100) : (rp * 100).toFixed(1)) + '% tokens saved · dedup: ' + (cRepo.dedupPct * 100 >= 10 ? Math.round(cRepo.dedupPct * 100) : (cRepo.dedupPct * 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';
-
-    // S24: headline tier is the LIVE pressure band; the config card shows the
-    // env preset + live pressure ratio so the user sees the system react.
-    document.getElementById('hdr-tier').textContent = d.tier;
-    document.getElementById('cf-tier').textContent = d.tier + ' (live)';
-    document.getElementById('cf-preset').textContent = d.presetTier;
-    document.getElementById('cf-pressure').textContent = Math.round((d.pressure || 0) * 100) + '%';
-    // (b) Threshold: show the effective token threshold AND the % of the model
-    // context window it represents (percentage-based tiers). d.config.tierPct
-    // is present on the live snapshot written by the runtime (Phase-1/2a).
-    var cfgPct = d.config.tierPct;
-    var cw = d.context.contextWindow || 0;
-    var thresholdTxt = d.config.thresholdTokens.toLocaleString();
-    if (cfgPct != null && cw > 0) {
-      thresholdTxt += ' (' + Math.round(cfgPct * 100) + '% of ' + cw.toLocaleString() + ')';
-    }
-    document.getElementById('cf-threshold').textContent = thresholdTxt;
-    // (c) Fast Gate: arming floor — live trim arms once context passes this %.
-    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) : '—';
-    var repoSaved = cRepo.tokensFreed || 0;
-    if (model && model.inputRate && repoSaved > 0) {
-      var usd = (repoSaved * model.inputRate);
-      var win = d.context.contextWindow || 0;
-      var windows = win > 0 ? (repoSaved / 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';
-    }
-
-    // --- Cache hits & compactions (live counters) ---------------------------
-    var ch = d.cacheHits || { session: 0, total: 0, sessionTokensSaved: 0, totalTokensSaved: 0 };
-    var cp = d.compacts || { session: 0, total: 0 };
-    var ts = d.timeSaved || { compact: { sessionSec: 0, totalSec: 0 }, cacheHit: { sessionSec: 0, totalSec: 0 } };
-    document.getElementById('ch-session').textContent = (ch.session || 0).toLocaleString();
-    document.getElementById('ch-total').textContent = (ch.total || 0).toLocaleString();
-    document.getElementById('ch-tok-session').textContent = (ch.sessionTokensSaved || 0).toLocaleString();
-    document.getElementById('ch-tok-total').textContent = (ch.totalTokensSaved || 0).toLocaleString();
-    document.getElementById('cp-session').textContent = (cp.session || 0).toLocaleString();
-    document.getElementById('cp-total').textContent = (cp.total || 0).toLocaleString();
-    document.getElementById('ts-compact-session').textContent = fmtSec(ts.compact.sessionSec);
-    document.getElementById('ts-compact-total').textContent = fmtSec(ts.compact.totalSec);
-    document.getElementById('ts-cache-session').textContent = fmtSec(ts.cacheHit.sessionSec);
-    document.getElementById('ts-cache-total').textContent = fmtSec(ts.cacheHit.totalSec);
-
-    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: browser-side fetch in dashboard HTML template (not Node runtime)
-  }
-  pollSnapshot();
-  renderGameScores();
-  renderAchievements();
-  setInterval(pollSnapshot, 2000);
-  setInterval(renderGameScores, 2000);
-  setInterval(renderAchievements, 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;
-    renderByModel(repos);
-  }
-
-  // Savings-by-model aggregation for the Summary tab — groups the machine-
-  // wide repo registry by (modelName || '(unknown)') so the user can see how
-  // much context + cost mega-compact has reclaimed, broken down by which model
-  // they were running. $ Saved = Σ(tokensSaved × inputRate) per model. Sorted
-  // by tokens saved descending so the biggest-reclaim model wins the top row.
-  function renderByModel(repos) {
-    var rows = document.getElementById('bm-rows');
-    if (!rows) return;
-    if (!repos || !repos.length) {
-      rows.innerHTML = '<tr><td colspan="14" class="repo-none">No repositories registered yet.</td></tr>';
-      return;
-    }
-    var groups = {};
-    for (var i = 0; i < repos.length; i++) {
-      var r = repos[i];
-      var key = (r.modelName && String(r.modelName).trim()) || '(unknown)';
-      if (!groups[key]) groups[key] = {
-        model: key, provider: r.providerName || r.provider || '—', repos: 0, checkpoints: 0,
-        tokensSaved: 0, tokensIn: 0, tokensOut: 0, sessions: 0, usd: 0, lastAt: 0,
-        inRates: [], outRates: [], ctxWindows: [], maxTokens: [], reasoning: null,
-      };
-      var g = groups[key];
-      g.repos++;
-      g.checkpoints += (r.checkpointCount || 0);
-      g.tokensSaved += (r.tokensSaved || 0);
-      g.tokensIn += (r.tokensDropped || 0);
-      g.tokensOut += (r.tokensKept || 0);
-      g.sessions += (r.sessions || 0);
-      if (r.inputRate) { g.usd += (r.tokensSaved || 0) * r.inputRate; g.inRates.push(r.inputRate); }
-      if (r.outputRate) g.outRates.push(r.outputRate);
-      if (r.contextWindow) g.ctxWindows.push(r.contextWindow);
-      if (r.maxTokens) g.maxTokens.push(r.maxTokens);
-      if (r.reasoning != null) g.reasoning = r.reasoning;
-      if (r.lastCompactedAt && r.lastCompactedAt > g.lastAt) g.lastAt = r.lastCompactedAt;
-    }
-    var arr = [];
-    for (var k in groups) { if (Object.prototype.hasOwnProperty.call(groups, k)) arr.push(groups[k]); }
-    arr.sort(function(a, b) { return b.tokensSaved - a.tokensSaved; });
-    // Helper: a set of numeric samples collapses to a single value when all
-    // repos in the group agree, otherwise shows the range (min–max) so the
-    // user can see mixed-config model groups at a glance.
-    function collapseNum(samples) {
-      if (!samples || !samples.length) return '—';
-      var lo = Math.min.apply(null, samples), hi = Math.max.apply(null, samples);
-      return lo === hi ? lo.toLocaleString() : lo.toLocaleString() + '–' + hi.toLocaleString();
-    }
-    function collapseRate(samples) {
-      if (!samples || !samples.length) return '—';
-      var lo = Math.min.apply(null, samples), hi = Math.max.apply(null, samples);
-      var fmt = function(v) { return '$' + v.toFixed(6); };
-      return lo === hi ? fmt(lo) : fmt(lo) + '–' + fmt(hi);
-    }
-    rows.innerHTML = arr.map(function(g) {
-      var freed = (g.tokensIn || 0) - (g.tokensOut || 0);
-      var usd = g.usd > 0 ? '$' + g.usd.toFixed(4) : '—';
-      var when = g.lastAt ? new Date(g.lastAt).toLocaleString() : '—';
-      var reas = g.reasoning == null ? '—' : (g.reasoning ? 'yes' : 'no');
-      return '<tr>' +
-        '<td><span class="repo-model">' + sanitize(g.model) + '</span></td>' +
-        '<td>' + sanitize(g.provider) + '</td>' +
-        '<td class="num">' + (g.tokensIn || 0).toLocaleString() + '</td>' +
-        '<td class="num">' + (g.tokensOut || 0).toLocaleString() + '</td>' +
-        '<td class="num">' + freed.toLocaleString() + '</td>' +
-        '<td class="num">' + collapseNum(g.ctxWindows) + '</td>' +
-        '<td class="num">' + collapseNum(g.maxTokens) + '</td>' +
-        '<td class="num">' + reas + '</td>' +
-        '<td class="num">' + g.sessions.toLocaleString() + '</td>' +
-        '<td class="num">' + g.checkpoints.toLocaleString() + '</td>' +
-        '<td class="num">' + collapseRate(g.inRates) + '</td>' +
-        '<td class="num">' + collapseRate(g.outRates) + '</td>' +
-        '<td class="num">' + sanitize(usd) + '</td>' +
-        '<td class="num">' + sanitize(when) + '</td>' +
-      '</tr>';
-    }).join('');
-  }
-
-  // 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: browser-side fetch in dashboard HTML template (not Node runtime)
-      indexCache = d && d.repos ? d : indexCache;
-      renderIndex(d);
-    }).catch(function() {});
-  }
-  pollIndex();
-  setInterval(pollIndex, 5000);
-
-  // --- Active repos (live cache-hit / compaction stats) ---------------------
-  function fmtSec(s) {
-    s = s || 0;
-    if (s >= 3600) return (s / 3600).toFixed(1) + 'h';
-    if (s >= 60) return Math.round(s / 60) + 'm';
-    if (s >= 1) return s.toFixed(1) + 's';
-    return Math.round(s * 1000) + 'ms';
-  }
-  function renderActiveRepos(d) {
-    d = d || { updatedAt: null, servers: [] };
-    var servers = d.servers || [];
-    var rowsEl = document.getElementById('active-rows');
-    if (!rowsEl) return;
-    if (!servers.length) {
-      rowsEl.innerHTML = '<tr><td colspan="9" class="repo-none">No active repositories.</td></tr>';
-    } else {
-      rowsEl.innerHTML = servers.map(function(r) {
-        var ch = r.cacheHits || { session: 0, total: 0, sessionTokensSaved: 0, totalTokensSaved: 0 };
-        var cp = r.compacts || { session: 0, total: 0 };
-        var ts = r.timeSaved || { compact: { sessionSec: 0, totalSec: 0 }, cacheHit: { sessionSec: 0, totalSec: 0 } };
-        return '<tr>' +
-          '<td title="' + sanitize(r.repoRoot) + '">' + sanitize(r.displayName || r.repoRoot) + '</td>' +
-          '<td>' + sanitize(r.model || '—') + '</td>' +
-          '<td>' + sanitize(r.tier || '—') + '</td>' +
-          '<td class="num">' + (r.contextPct != null ? Math.round(r.contextPct * 100) + '%' : '—') + '</td>' +
-          '<td>' + sanitize(r.state || '—') + '</td>' +
-          '<td class="num">' + (cp.session || 0) + ' / ' + (cp.total || 0) + '</td>' +
-          '<td class="num">' + (ch.session || 0) + ' / ' + (ch.total || 0) + '</td>' +
-          '<td class="num">' + fmtSec(ts.compact.sessionSec) + ' / ' + fmtSec(ts.compact.totalSec) + '</td>' +
-          '<td class="num">' + fmtSec(ts.cacheHit.sessionSec) + ' / ' + fmtSec(ts.cacheHit.totalSec) + '</td>' +
-        '</tr>';
-      }).join('');
-    }
-    var upd = document.getElementById('active-updated');
-    if (upd) upd.textContent = d.updatedAt ? 'Updated ' + new Date(d.updatedAt).toLocaleTimeString() : '';
-  }
-  function pollServers() {
-    fetch('/api/servers').then(function(r) { return r.json(); }).then(renderActiveRepos).catch(function() {}); // guardrails-allow PREVENT-PI-004: browser-side fetch in dashboard HTML template (not Node runtime)
-  }
-  pollServers();
-  setInterval(pollServers, 5000);
-
-  // --- Game-mode settings strip (S32) -------------------------------------
-  // Polls GET /api/game-state and applies the row to the settings controls +
-  // the document theme. On any control change, PUTs a partial patch back. The
-  // dashboard server is a detached child with no MegaRuntime ref, so it reads /
-  // writes the game_state SQLite row directly; the in-process MegaRuntime picks
-  // up the change via its fs.watch cache-eviction watcher (S32).
-  var gmCheckbox = document.getElementById('set-game-mode');
-  var gmTheme = document.getElementById('set-theme');
-  var gmTui = document.getElementById('set-tui-mode');
-
-  function applyGameState(gs) {
-    if (!gs) return;
-    if (gs.theme) document.documentElement.dataset.theme = gs.theme;
-    if (gmCheckbox) gmCheckbox.checked = !!gs.game_mode_on;
-    if (gmTheme) gmTheme.value = gs.theme || 'transparent';
-    if (gmTui) gmTui.value = gs.tui_display_mode || 'full';
-  }
-  function pollGameState() {
-    fetch('/api/game-state').then(function(r) { return r.json(); }).then(applyGameState).catch(function() {}); // guardrails-allow PREVENT-PI-004: browser-side fetch in dashboard HTML template (not Node runtime)
-  }
-  function putGameState(patch) {
-    fetch('/api/game-state', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(patch) }).then(function(r) { return r.json(); }).then(applyGameState).catch(function() {}); // guardrails-allow PREVENT-PI-004: browser-side fetch in dashboard HTML template (not Node runtime)
-  }
-  if (gmCheckbox) gmCheckbox.addEventListener('change', function() { putGameState({ game_mode_on: gmCheckbox.checked }); });
-  if (gmTheme) gmTheme.addEventListener('change', function() { putGameState({ theme: gmTheme.value }); });
-  // P3: client-side theme cycling (no new endpoint). Reads the already-fetched
-  // <option> values from the theme select, so it stays in sync with the server's
-  // THEMES list without a second fetch.
-  var gmThemeNext = document.getElementById('set-theme-next');
-  if (gmThemeNext) gmThemeNext.addEventListener('click', function() {
-    var opts = gmTheme ? gmTheme.options : [];
-    var n = opts.length;
-    var cur = gmTheme ? gmTheme.value : 'transparent';
-    var idx = -1;
-    for (var i = 0; i < n; i++) { if (opts[i].value === cur) { idx = i; break; } }
-    var next = n > 0 ? opts[(idx < 0 ? 0 : (idx + 1) % n)].value : 'transparent';
-    putGameState({ theme: next });
-  });
-  if (gmTui) gmTui.addEventListener('change', function() { putGameState({ tui_display_mode: gmTui.value }); });
-  pollGameState();
-  setInterval(pollGameState, 5000);
-
-  // --- Game Mode leaderboards (S34) ----------------------------------------
-  // Polls GET /api/game-scores per metric, renders the per-repo leaderboard
-  // tables, the MEGA CACHE banner, the hidden Opie's Wild Ride unlock tile, and
-  // the transient oopsie toast (fires when a NEW mega_cache trophy row appears
-  // since the last poll). Browser-side fetch only (PREVENT-PI-004).
-  var GAME_METRICS = ['cache', 'dedupe', 'turns', 'mega_cache'];
-  var GAME_EMPTY = true;
-  var lastMegaTs = 0;
-  var lastMaxLevel = 0;
-  function fmtPct(v) { return (Math.round(v * 10) / 10) + '%'; }
-  function fmtDate(ts) { return ts ? new Date(ts).toLocaleString() : '—'; }
-  function trophyMeta(m) { try { return (m && typeof m === 'object') ? m : {}; } catch (e) { return {}; } }
-  function renderGameScores() {
-    var results = {};
-    var pending = GAME_METRICS.length + 1; // metrics + repos badge
-    function done() {
-      if (--pending > 0) return;
-      var cache = results['cache'] || [];
-      if (cache.length) GAME_EMPTY = false;
-      document.getElementById('lb-cache').innerHTML = cache.map(function(r) {
-        return '<tr><td title="' + sanitize(r.repo_root) + '">' + sanitize(r.repo_root.split('/').pop()) + '</td><td class="num">' + sanitize(String(r.value)) + '</td></tr>';
-      }).join('') || '<tr><td colspan="2" class="repo-none">no data</td></tr>';
-      var dedupe = results['dedupe'] || [];
-      if (dedupe.length) GAME_EMPTY = false;
-      document.getElementById('lb-dedupe').innerHTML = dedupe.map(function(r) {
-        return '<tr><td title="' + sanitize(r.repo_root) + '">' + sanitize(r.repo_root.split('/').pop()) + '</td><td class="num">' + sanitize(String(r.value)) + '</td></tr>';
-      }).join('') || '<tr><td colspan="2" class="repo-none">no data</td></tr>';
-      var turns = results['turns'] || [];
-      var maxTurns = turns.reduce(function(mx, r) { return Math.max(mx, r.value); }, 0);
-      var lvl = Math.floor(Math.log2(maxTurns + 1)) + 1;
-      var lvlEl = document.getElementById('turns-level');
-      if (lvlEl) lvlEl.textContent = 'LVL ' + lvl;
-      if (turns.length) GAME_EMPTY = false;
-      // level-up pulse: when max level increases vs last poll, pulse the cache bar
-      if (lvl > lastMaxLevel && lastMaxLevel > 0) {
-        var bar = document.getElementById('ctx-bar');
-        if (bar) { bar.classList.add('level-up'); setTimeout(function() { bar.classList.remove('level-up'); }, 1200); }
-      }
-      if (lvl > lastMaxLevel) lastMaxLevel = lvl;
-      document.getElementById('lb-turns').innerHTML = turns.map(function(r) {
-        return '<tr><td title="' + sanitize(r.repo_root) + '">' + sanitize(r.repo_root.split('/').pop()) + '</td><td class="num">' + sanitize(String(r.value)) + '</td></tr>';
-      }).join('') || '<tr><td colspan="2" class="repo-none">no data</td></tr>';
-      // mega_cache trophies + banner + Opie tile + transient toast
-      var mega = results['mega_cache'] || [];
-      var megaBody = document.getElementById('lb-mega_cache');
-      if (megaBody) {
-        megaBody.innerHTML = mega.map(function(r) {
-          var m = trophyMeta(r.meta);
-          var fs = m.firstSeenTs || m.firstSeen || r.ts;
-          var extra = fs ? ' <span class="lb-meta">' + sanitize(fmtDate(fs)) + '</span>' : '';
-          return '<tr><td title="' + sanitize(r.repo_root) + '">' + sanitize(r.repo_root.split('/').pop()) + '</td><td class="num">' + sanitize(fmtPct(r.value)) + extra + '</td></tr>';
-        }).join('') || '<tr><td colspan="2" class="repo-none">no trophies yet</td></tr>';
-      }
-      var banner = document.getElementById('mega-cache-banner');
-      var tile = document.getElementById('opie-tile');
-      var best = null, firstSeen = null;
-      mega.forEach(function(r) {
-        if (best == null || r.value > best) best = r.value;
-        var m = trophyMeta(r.meta);
-        var fs = m.firstSeenTs || m.firstSeen || r.ts;
-        if (firstSeen == null || fs < firstSeen) firstSeen = fs;
-      });
-      if (banner) {
-        if (best != null && best > 100) {
-          banner.style.display = 'block';
-          banner.textContent = '🥧 MEGA CACHE! peak ' + fmtPct(best) + ' — first reached ' + fmtDate(firstSeen);
-        } else { banner.style.display = 'none'; }
-      }
-      if (tile) {
-        if (best != null && best > 100) {
-          tile.style.display = 'block';
-          tile.className = 'achievement-tile unlocked';
-          tile.innerHTML = '🏆 Opie\\'s Wild Ride<span class="ach-detail">best ' + sanitize(fmtPct(best)) + ' · first ' + sanitize(fmtDate(firstSeen)) + '</span>';
-        } else { tile.style.display = 'none'; tile.className = 'achievement-tile'; }
-      }
-      // transient oopsie toast: a NEW mega_cache trophy row since the last poll
-      var maxTs = mega.reduce(function(mx, r) { return Math.max(mx, r.ts); }, 0);
-      var newRow = mega.find(function(r) { return r.ts > lastMegaTs && r.value > 100; });
-      if (lastMegaTs && newRow) {
-        var toast = document.getElementById('mega-cache-toast');
-        if (toast) {
-          toast.textContent = 'oopsie! cache went to ' + Math.round(newRow.value) + '% — MEGA CACHE 🥧';
-          toast.classList.add('show');
-          setTimeout(function() { toast.classList.remove('show'); }, 4000);
-        }
-      }
-      if (maxTs > lastMegaTs) lastMegaTs = maxTs;
-      // empty state
-      var emptyEl = document.getElementById('game-empty');
-      if (emptyEl) emptyEl.style.display = GAME_EMPTY ? 'block' : 'none';
-    }
-    GAME_METRICS.forEach(function(m) {
-      fetch('/api/game-scores?metric=' + encodeURIComponent(m) + '&limit=25').then(function(r) { return r.ok ? r.json() : []; }).then(function(rows) { results[m] = rows || []; }).catch(function() { results[m] = []; }).then(done);
-    });
-    fetch('/api/game-scores?metric=repos&limit=1').then(function(r) { return r.ok ? r.json() : []; }).then(function(rows) {
-      var badge = document.getElementById('repos-badge');
-      if (badge) badge.textContent = ((rows && rows.length) ? rows[0].value : 0) + ' repos';
-      if (rows && rows.length && rows[0].value > 0) GAME_EMPTY = false;
-    }).catch(function() {}).then(done);
-  }
-
-  // --- Achievements tile row (S35) ------------------------------------------
-  // Polls GET /api/achievements; renders the tile row (hidden+locked render
-  // NOTHING; unlocked show icon+title+date; visible-but-locked show ??? teaser)
-  // and fires a transient toast when a newly-unlocked achievement appears.
-  // Browser-side fetch only (PREVENT-PI-004).
-  var lastAchMaxTs = 0;
-  function renderAchievements() {
-    fetch('/api/achievements').then(function(r) { return r.ok ? r.json() : []; }).then(function(rows) { // guardrails-allow PREVENT-PI-004: browser-side fetch in dashboard HTML template (not Node runtime)
-      var box = document.getElementById('ach-tiles');
-      if (!box) return;
-      var html = '';
-      var maxTs = 0;
-      (rows || []).forEach(function(a) {
-        if (a.hidden === 1 && a.unlocked_at == null) return; // hidden invariant: render nothing
-        if (a.unlocked_at != null) {
-          var isNew = a.unlocked_at > lastAchMaxTs && lastAchMaxTs > 0;
-          maxTs = Math.max(maxTs, a.unlocked_at);
-          html += '<div class="ach-tile unlocked' + (isNew ? ' just-unlocked' : '') + '">' + sanitize(a.icon || '') + ' ' + sanitize(a.title) + '<span class="ach-detail">unlocked ' + sanitize(fmtDate(a.unlocked_at)) + '</span></div>';
-        } else {
-          html += '<div class="ach-tile locked">??? ' + sanitize(a.title) + '</div>';
-        }
-      });
-      box.innerHTML = html || '<span class="repo-none">no achievements yet</span>';
-      var newly = (rows || []).filter(function(a) { return a.unlocked_at != null && a.unlocked_at > lastAchMaxTs; });
-      if (lastAchMaxTs && newly.length) {
-        var toast = document.getElementById('ach-toast');
-        if (toast) {
-          toast.textContent = newly.map(function(a) { return (a.icon || '') + ' ' + a.title; }).join(', ') + ' unlocked!';
-          toast.classList.add('show');
-          setTimeout(function() { toast.classList.remove('show'); }, 4000);
-        }
-      }
-      if (maxTs > lastAchMaxTs) lastAchMaxTs = maxTs;
-    }).catch(function() {});
-  }
-
-  // --- Perf tab (v0.8.8) — live local instrumentation ----------------------
-  var perfPollTimer = null;
-  function pollPerf() {
-    fetch('/api/perf?minutes=30').then(function(r) { return r.ok ? r.json() : null; }).then(function(d) { // guardrails-allow PREVENT-PI-004: browser-side fetch in dashboard HTML template (not Node runtime)
-      if (!d) return;
-      var el = document.getElementById('perf-updated');
-      if (el) el.textContent = d.sampleCount + ' samples \u00b7 updated ' + (d.updatedAt || '');
-      function setText(id, txt) { var e = document.getElementById(id); if (e) e.textContent = txt; }
-      function fmtMs(v) { return v == null ? '\u2014' : (v >= 100 ? Math.round(v) + 'ms' : v.toFixed(1) + 'ms'); }
-      function fmtNum(v, dec) { return v == null ? '\u2014' : (typeof v === 'number' ? v.toFixed(dec) : '\u2014'); }
-      setText('pf-turn-p50', fmtMs(d.turn_latency_ms && d.turn_latency_ms.p50));
-      setText('pf-turn-p95', fmtMs(d.turn_latency_ms && d.turn_latency_ms.p95));
-      setText('pf-prov-p50', fmtMs(d.provider_latency_ms && d.provider_latency_ms.p50));
-      setText('pf-prov-p95', fmtMs(d.provider_latency_ms && d.provider_latency_ms.p95));
-      setText('pf-tps', fmtNum(d.tps && d.tps.avg, 1));
-      setText('pf-cache', (d.cache_hit_pct && typeof d.cache_hit_pct.avg === 'number') ? fmtNum(d.cache_hit_pct.avg, 1) + '%' : '\u2014');
-      setText('pf-rss', (d.rss_mb && typeof d.rss_mb.latest === 'number') ? fmtNum(d.rss_mb.latest, 1) + ' MB' : '\u2014');
-      setText('pf-heap', (d.heap_mb && typeof d.heap_mb.latest === 'number') ? fmtNum(d.heap_mb.latest, 1) + ' MB' : '\u2014');
-      setText('pf-cpu', (d.cpu_user_ms && d.cpu_sys_ms) ? (fmtNum(d.cpu_user_ms.latest,1) + ' / ' + fmtNum(d.cpu_sys_ms.latest,1) + ' ms') : '\u2014');
-      setText('pf-db-p50', fmtMs(d.db_recompute_ms && d.db_recompute_ms.p50));
-      setText('pf-db-p95', fmtMs(d.db_recompute_ms && d.db_recompute_ms.p95));
-      setText('pf-disk', fmtMs(d.disk_write_ms && d.disk_write_ms.p50));
-      var diag = d.diag || {};
-      setText('pf-recompute', diag.liveTrimFires != null ? String(diag.liveTrimFires) : '\u2014');
-      setText('pf-replays', diag.liveTrimReplays != null ? String(diag.liveTrimReplays) : '\u2014');
-      setText('pf-skips', diag.ctxFastGate != null ? String(diag.ctxFastGate) : '\u2014');
-    }).catch(function() {});
-  }
-  function startPerfPoll() { if (perfPollTimer) return; pollPerf(); perfPollTimer = setInterval(pollPerf, 2000); }
-  function stopPerfPoll() { if (perfPollTimer) { clearInterval(perfPollTimer); perfPollTimer = null; } }
-
-  // --- Tab switching ------------------------------------------------------
-  var tabs = document.querySelectorAll('.tab');
-  var panels = { current: 'panel-current', all: 'panel-all', active: 'panel-active', summary: 'panel-summary', game: 'panel-game', perf: 'panel-perf' };
-  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();
-      if (name === 'active') pollServers();
-      if (name === 'game') { renderGameScores(); renderAchievements(); }
-      if (name === 'perf') startPerfPoll(); else stopPerfPoll();
-    });
-  }
-})();
+${dashboardClientJs()}
 </script>
 </body>
 </html>`;