pi-mega-compact 0.8.21 → 0.8.22

package/dist/extensions/dashboard-server/dashboard-client-core.js

@@ -0,0 +1,201 @@
+/**
+ * dashboard-client-core.ts — verbatim JS chunk: snapshot + SSE + event rendering.
+ *
+ * Extracted from html.ts (PR0 split) — ZERO behavior change. This is one of
+ * three chunks whose concatenation forms the dashboard's IIFE client script
+ * (see dashboard-client.ts). The chunks share one closure, so they must be
+ * concatenated in order: core → repos → game.
+ */
+/** Snapshot rendering, event/SSE handling, and shared helpers. */
+export function dashboardClientCoreJs() {
+    return `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();
+
+`;
+}

package/dist/extensions/dashboard-server/dashboard-client-game.js

@@ -0,0 +1,241 @@
+/**
+ * dashboard-client-game.ts — verbatim JS chunk: game-mode, achievements, perf, tabs.
+ *
+ * Extracted from html.ts (PR0 split) — ZERO behavior change. Third of three
+ * chunks concatenated into the dashboard IIFE (core → repos → game). Shares
+ * the closure with core + repos.
+ */
+/** Game-mode settings, leaderboards, achievements, perf tab, tab switching. */
+export function dashboardClientGameJs() {
+    return `// --- 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 · updated ' + (d.updatedAt || '');
+    function setText(id, txt) { var e = document.getElementById(id); if (e) e.textContent = txt; }
+    function fmtMs(v) { return v == null ? '—' : (v >= 100 ? Math.round(v) + 'ms' : v.toFixed(1) + 'ms'); }
+    function fmtNum(v, dec) { return v == null ? '—' : (typeof v === 'number' ? v.toFixed(dec) : '—'); }
+    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) + '%' : '—');
+    setText('pf-rss', (d.rss_mb && typeof d.rss_mb.latest === 'number') ? fmtNum(d.rss_mb.latest, 1) + ' MB' : '—');
+    setText('pf-heap', (d.heap_mb && typeof d.heap_mb.latest === 'number') ? fmtNum(d.heap_mb.latest, 1) + ' MB' : '—');
+    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') : '—');
+    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) : '—');
+    setText('pf-replays', diag.liveTrimReplays != null ? String(diag.liveTrimReplays) : '—');
+    setText('pf-skips', diag.ctxFastGate != null ? String(diag.ctxFastGate) : '—');
+  }).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();
+  });
+}
+})();`;
+}