pi-mega-compact 0.8.7 → 0.8.10

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

@@ -0,0 +1,103 @@
+/**
+ * Inline CSS for the dashboard.
+ *
+ * Extracted verbatim from the original monolithic `html-template.ts`.
+ * Kept as a single cohesive stylesheet — splitting CSS into per-tab files
+ * would fragment the design system (shared tokens, e.g. `.card`, `.stat-grid`,
+ * `.meter-*` are reused across all tabs).
+ */
+export function styles() {
+    return `<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0d1117; color: #c9d1d9; padding: 24px; line-height: 1.5; }
+  h1 { font-size: 20px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: #f0f6fc; }
+  h1 .tier { background: #1f6feb; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
+  .card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; }
+  .card.safe { border-color: #238636; }
+  .card.safe h2 { color: #3fb950; }
+  .safe-note { font-size: 12px; color: #8b949e; margin: 12px 0 0; line-height: 1.5; }
+  .value.ok { color: #3fb950; }
+  .label {
+    cursor: help;
+    border-bottom: 1px dotted #484f58;
+  }
+  .card.legend { grid-column: 1 / -1; }
+  .legend-list { margin: 0; padding-left: 18px; color: #c9d1d9; }
+  .legend-list li { margin-bottom: 8px; line-height: 1.5; }
+  .legend-list b { color: #f0f6fc; }
+  .legend-note { font-size: 12px; color: #8b949e; margin: 12px 0 0; font-style: italic; }
+  .card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8b949e; margin-bottom: 12px; font-weight: 600; }
+  .meter-track { background: #21262d; border-radius: 4px; height: 20px; overflow: hidden; margin: 8px 0; }
+  .meter-fill { height: 100%; border-radius: 4px; transition: width .6s ease; min-width: 2px; }
+  .meter-green { background: #238636; }
+  .meter-yellow { background: #d29922; }
+  .meter-red { background: #f85149; }
+  .meter-label { font-size: 24px; font-weight: 700; color: #f0f6fc; }
+  .meter-sub { font-size: 12px; color: #8b949e; }
+  .status-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
+  .status-row .bullet { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .bullet-on { background: #3fb950; box-shadow: 0 0 6px #3fb95088; }
+  .bullet-off { background: #484f58; }
+  .bullet-na { background: #d29922; }
+  .state-text { font-size: 13px; color: #8b949e; margin-top: 8px; font-family: monospace; }
+  .stat-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
+  .stat-grid .label { color: #8b949e; }
+  .stat-grid .value { color: #f0f6fc; font-weight: 600; font-family: monospace; }
+  .conf-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
+  .conf-grid .label { color: #8b949e; }
+  .conf-grid .value { color: #f0f6fc; font-family: monospace; }
+  .events { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; }
+  .events h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8b949e; margin-bottom: 12px; font-weight: 600; }
+  .events-wrap { max-height: 240px; overflow-y: auto; font-family: monospace; font-size: 12px; }
+  .ev { padding: 3px 0; border-bottom: 1px solid #21262d; display: flex; gap: 8px; align-items: baseline; }
+  .ev:last-child { border-bottom: none; }
+  .ev-type { font-weight: 700; min-width: 70px; text-align: right; }
+  .ev-type-compact { color: #3fb950; }
+  .ev-type-recall { color: #a371f7; }
+  .ev-time { color: #484f58; font-size: 10px; min-width: 80px; }
+  .ev-detail { color: #8b949e; flex: 1; }
+  .updated { font-size: 11px; color: #484f58; margin-top: 16px; text-align: right; }
+  .empty { color: #484f58; font-style: italic; font-size: 13px; padding: 8px 0; }
+  .offline-banner { background: #f8514922; border: 1px solid #f85149; border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; color: #f85149; display: none; }
+  .tabs { display: flex; gap: 8px; margin-bottom: 20px; }
+  .tab { background: #161b22; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
+  .tab:hover { color: #c9d1d9; border-color: #484f58; }
+  .tab.active { background: #1f6feb; color: #fff; border-color: #1f6feb; }
+  .tab.future { opacity: .7; }
+  .tab .soon { font-size: 9px; font-weight: 700; background: #6e40c9; color: #fff; padding: 1px 6px; border-radius: 8px; margin-left: 6px; text-transform: uppercase; letter-spacing: .5px; }
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+  .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
+  .summary-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; }
+  .summary-card .num { font-size: 24px; font-weight: 700; color: #f0f6fc; }
+  .summary-card .lbl { font-size: 12px; color: #8b949e; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
+  table.repos { width: 100%; border-collapse: collapse; background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; }
+  table.repos th, table.repos td { text-align: left; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #21262d; }
+  table.repos th { color: #8b949e; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; background: #0d1117; }
+  table.repos td.num { font-family: monospace; color: #f0f6fc; text-align: right; }
+  table.repos tr:last-child td { border-bottom: none; }
+  table.repos tr:hover td { background: #1c2128; }
+  .repo-model { color: #a371f7; }
+  .repo-none { color: #484f58; font-style: italic; }
+  .updated { font-size: 11px; color: #484f58; margin-top: 16px; text-align: right; }
+  .model-pill { background: #6e40c9; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
+  .card.cost h2 { color: #a371f7; }
+  .cost-usd { font-size: 22px; font-weight: 700; color: #3fb950; }
+  .cost-sub { font-size: 12px; color: #8b949e; margin-top: 4px; }
+  .repo-link { cursor: pointer; }
+  .repo-link:hover td { color: #58a6ff; }
+  .repo-detail { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 50; }
+  .repo-detail.open { display: flex; }
+  .repo-detail-box { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 24px; width: 560px; max-width: 92vw; max-height: 86vh; overflow-y: auto; }
+  .repo-detail-box h2 { font-size: 14px; color: #f0f6fc; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
+  .repo-close { cursor: pointer; color: #8b949e; font-size: 20px; line-height: 1; border: none; background: none; padding: 0 4px; }
+  .repo-close:hover { color: #f0f6fc; }
+  .repo-path { font-size: 11px; color: #484f58; word-break: break-all; margin: -8px 0 12px; }
+  .placeholder { text-align: center; padding: 48px 16px; color: #8b949e; }
+  .placeholder .em { font-size: 40px; margin-bottom: 12px; }
+  .placeholder h2 { font-size: 16px; color: #f0f6fc; margin-bottom: 8px; }
+  .placeholder p { font-size: 13px; line-height: 1.6; max-width: 420px; margin: 0 auto; }
+</style>
+`;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * "Summary" tab panel — aggregate counts across all registered repos.
+ *
+ * Populated by the index poller in `script.ts`.
+ */
+export function summaryTab() {
+    return `<!-- Summary (aggregate across all repos) -->
+<div class="tab-panel" id="panel-summary">
+  <div class="summary-grid">
+    <div class="summary-card"><div class="num" id="sm-repos">0</div><div class="lbl">Repositories</div></div>
+    <div class="summary-card"><div class="num" id="sm-checkpoints">0</div><div class="lbl">Total Checkpoints</div></div>
+    <div class="summary-card"><div class="num" id="sm-saved">0</div><div class="lbl">Total Tokens Saved</div></div>
+    <div class="summary-card"><div class="num" id="sm-bytes">0 B</div><div class="lbl">Compressed-Original</div></div>
+  </div>
+  <div class="updated" id="sm-updated"></div>
+</div>
+
+`;
+}

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

@@ -0,0 +1,41 @@
+/**
+ * HTML template for the dashboard server — composer.
+ *
+ * Originally a single 518-line monolithic file returning one large HTML page
+ * template. Split into per-concern fragments under `./html/` (each tab is its
+ * own file; plus shared styles, header chrome, the repo-detail modal, and the
+ * client script). This file composes them back into the full document.
+ *
+ * `tierName` is threaded into the heading badge and the Configuration card.
+ *
+ * Fragment layout:
+ *   headOpen()            — <!DOCTYPE html>…<title>
+ *   styles()              — <style>…</style>  (shared CSS, design-system level)
+ *   bodyOpen(tier)        — </head><body>…<h1>…</nav>  (incl. High Score future tab)
+ *   currentRepoTab(tier)  — panel-current (cards + event stream + in-panel table)
+ *   allReposTab()         — panel-all (machine-wide repo table)
+ *   summaryTab()          — panel-summary (aggregate cards)
+ *   highScoreTab()        — panel-highscore (FUTURE placeholder, next milestone)
+ *   repoDetailModal()     — per-repo overlay (position-independent)
+ *   script()              — <script>…</script></body></html>
+ */
+import { headOpen } from "./html/head-open.js";
+import { styles } from "./html/styles.js";
+import { bodyOpen } from "./html/body-open.js";
+import { currentRepoTab } from "./html/current-repo-tab.js";
+import { allReposTab } from "./html/all-repos-tab.js";
+import { summaryTab } from "./html/summary-tab.js";
+import { highScoreTab } from "./html/high-score-tab.js";
+import { repoDetailModal } from "./html/repo-detail-modal.js";
+import { script } from "./html/script.js";
+export function dashboardHtml(tierName) {
+    return (headOpen() +
+        styles() +
+        bodyOpen(tierName) +
+        currentRepoTab(tierName) +
+        repoDetailModal() +
+        allReposTab() +
+        summaryTab() +
+        highScoreTab() +
+        script());
+}

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

@@ -186,6 +186,7 @@ export function dashboardHtml(tierName) {
   <button class="tab" data-tab="active">Active Repos</button>
   <button class="tab" data-tab="summary">Summary</button>
   <button class="tab" data-tab="game">Game Mode</button>
+  <button class="tab" data-tab="perf">Perf</button>
 </nav>
 
 <!-- Current repo (existing single-repo view) -->
@@ -440,6 +441,18 @@ export function dashboardHtml(tierName) {
   <div id="game-empty">No scores yet — run a session with game mode on.</div>
 </div>
 
+<!-- Perf (v0.8.8) — live local instrumentation -->
+<div class="tab-panel" id="panel-perf">
+  <div class="grid">
+    <div class="card"><h2>Model latency</h2><div class="stat-grid"><span class="label">Turn p50</span><span class="value" id="pf-turn-p50">—</span><span class="label">Turn p95</span><span class="value" id="pf-turn-p95">—</span><span class="label">Provider p50</span><span class="value" id="pf-prov-p50">—</span><span class="label">Provider p95</span><span class="value" id="pf-prov-p95">—</span></div></div>
+    <div class="card"><h2>Throughput</h2><div class="stat-grid"><span class="label">TPS (avg)</span><span class="value" id="pf-tps">—</span><span class="label">Cache hit %</span><span class="value" id="pf-cache">—</span></div></div>
+    <div class="card"><h2>Process</h2><div class="stat-grid"><span class="label">RSS</span><span class="value" id="pf-rss">—</span><span class="label">Heap</span><span class="value" id="pf-heap">—</span><span class="label">CPU user/sys</span><span class="value" id="pf-cpu">—</span></div></div>
+    <div class="card"><h2>Snapshot cost</h2><div class="stat-grid"><span class="label">DB recompute p50</span><span class="value" id="pf-db-p50">—</span><span class="label">DB recompute p95</span><span class="value" id="pf-db-p95">—</span><span class="label">Disk write p50</span><span class="value" id="pf-disk">—</span></div></div>
+    <div class="card"><h2>TUI lag proxy</h2><div class="stat-grid"><span class="label">Live-trim fires</span><span class="value" id="pf-recompute">—</span><span class="label">Cache replays</span><span class="value" id="pf-replays">—</span><span class="label">Fast-gate skips</span><span class="value" id="pf-skips">—</span></div><div class="meter-sub">skip vs recompute vs replay cadence</div></div>
+  </div>
+  <div class="updated" id="perf-updated">waiting for data</div>
+</div>
+
 <script>
 (function() {
   var evBox = document.getElementById('events');
@@ -997,9 +1010,40 @@ export function dashboardHtml(tierName) {
     }).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' };
+  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');
@@ -1014,6 +1058,7 @@ export function dashboardHtml(tierName) {
       if (name === 'all' || name === 'summary') pollIndex();
       if (name === 'active') pollServers();
       if (name === 'game') { renderGameScores(); renderAchievements(); }
+      if (name === 'perf') startPerfPoll(); else stopPerfPoll();
     });
   }
 })();

package/dist/extensions/dashboard-server/perf-server.test.js

@@ -0,0 +1,80 @@
+/**
+ * perf-server.test.ts — v0.8.8 /api/perf endpoint (GET aggregates + 405).
+ * Mirrors the server.test.ts spawn-and-fetch harness (self-contained so the
+ * dashboard HTTP-port lane stays isolated).
+ */
+import { test, describe } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, rmSync, readFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { spawn } from "node:child_process";
+import { recordPerfSample } from "../../src/store/sqlite.js";
+const SERVER_ENTRY = new URL("./server.js", import.meta.url).pathname;
+function waitFor(cond, timeoutMs = 6000) {
+    const start = Date.now();
+    return new Promise((resolve, reject) => {
+        const tick = async () => {
+            if (await cond())
+                return resolve();
+            if (Date.now() - start > timeoutMs)
+                return reject(new Error("timeout"));
+            setTimeout(tick, 50);
+        };
+        tick();
+    });
+}
+function freshDir(prefix) {
+    return mkdtempSync(join(tmpdir(), prefix));
+}
+async function withServer(port, dir, fn) {
+    process.env.MEGACOMPACT_DASHBOARD_PORT = port;
+    const child = spawn(process.execPath, [SERVER_ENTRY, dir], { stdio: "ignore" });
+    try {
+        await waitFor(async () => {
+            try {
+                const raw = JSON.parse(readFileSync(join(dir, "port.pid"), "utf-8"));
+                const res = await fetch(`http://localhost:${raw.port}/api/version`);
+                return res.ok;
+            }
+            catch {
+                return false;
+            }
+        });
+        const raw = JSON.parse(readFileSync(join(dir, "port.pid"), "utf-8"));
+        return await fn(raw.port);
+    }
+    finally {
+        child.kill("SIGTERM");
+        delete process.env.MEGACOMPACT_DASHBOARD_PORT;
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+describe("v0.8.8 /api/perf", () => {
+    test("GET returns aggregates over recorded perf_samples", async () => {
+        const dir = freshDir("dash-perf-agg-");
+        recordPerfSample(dir, "turn_latency_ms", 100, { turnIndex: 1 });
+        recordPerfSample(dir, "turn_latency_ms", 200);
+        recordPerfSample(dir, "tps", 50);
+        recordPerfSample(dir, "rss_mb", 256);
+        await withServer("19440", dir, async (port) => {
+            const res = await fetch(`http://localhost:${port}/api/perf?minutes=30`);
+            assert.equal(res.status, 200);
+            const d = (await res.json());
+            assert.equal(d.sampleCount, 4);
+            assert.equal(d.turn_latency_ms.n, 2);
+            assert.equal(d.turn_latency_ms.p50, 100); // nearest-rank p50 of [100,200]
+            assert.equal(d.turn_latency_ms.p95, 200); // nearest-rank p95 of [100,200]
+            assert.equal(d.tps.avg, 50);
+            assert.equal(d.rss_mb.latest, 256);
+            assert.equal(d.diag, null); // no runtime wrote dashboard.json in this dir
+        });
+    });
+    test("non-GET (POST) -> 405", async () => {
+        const dir = freshDir("dash-perf-meth-");
+        await withServer("19441", dir, async (port) => {
+            const res = await fetch(`http://localhost:${port}/api/perf`, { method: "POST" });
+            assert.equal(res.status, 405);
+        });
+    });
+});