pi-mega-compact 0.4.18 → 0.4.20

package/dist/extensions/dashboard-server.js

@@ -13,7 +13,8 @@
 import { createServer } from "node:http";
 import { existsSync, mkdirSync, readFileSync, unlinkSync, watch, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
-import { join } from "node:path";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import Database from "better-sqlite3";
 // --- Multi-repo index (Phase 5b) ------------------------------------------------
 // The extension writes a machine-wide repo registry into a single SQLite DB
@@ -46,7 +47,7 @@ function readIndex() {
         const rows = db
             .prepare("SELECT * FROM repo_registry ORDER BY last_seen DESC")
             .all();
-        const repos = rows.map((r) => ({
+        const mapped = rows.map((r) => ({
             repoRoot: String(r.repo_root ?? ""),
             displayName: String(r.display_name ?? ""),
             checkpointCount: Number(r.checkpoint_count ?? 0),
@@ -60,6 +61,23 @@ function readIndex() {
             outputRate: r.output_rate ?? null,
             lastSeen: Number(r.last_seen ?? 0),
         }));
+        // Defensive display hygiene (belt-and-suspenders — the real fix is that
+        // tests now isolate via MEGACOMPACT_INDEX_DIR): drop transient test/temp
+        // paths that should never have been real repos, and collapse duplicate
+        // display names to the most-recently-seen row (rows are last_seen DESC, so
+        // the first occurrence wins). Keeps the All-repos list readable.
+        const isTransient = (p) => /^\/tmp\//.test(p) || /^\/private\/tmp\//.test(p) || /^\/var\/folders\//.test(p) ||
+            /\/mc-(ext|e2e|resume|recall)-/.test(p);
+        const seenName = new Set();
+        const repos = [];
+        for (const r of mapped) {
+            if (isTransient(r.repoRoot))
+                continue;
+            if (seenName.has(r.displayName))
+                continue;
+            seenName.add(r.displayName);
+            repos.push(r);
+        }
         const summary = {
             totalRepos: repos.length,
             totalCheckpoints: repos.reduce((a, r) => a + r.checkpointCount, 0),
@@ -99,6 +117,7 @@ function readSnapshot(snapshotPath) {
             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,
         };
     }
 }
@@ -195,13 +214,26 @@ function dashboardHtml(tierName) {
   .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; }
 </style>
 </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></h1>
+<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>
@@ -270,6 +302,17 @@ function dashboardHtml(tierName) {
       <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">
@@ -297,9 +340,40 @@ function dashboardHtml(tierName) {
   <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 -->
 
+<!-- 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>
+
 <!-- All repos (machine-wide registry from index.sqlite) -->
 <div class="tab-panel" id="panel-all">
   <table class="repos">
@@ -406,6 +480,24 @@ function dashboardHtml(tierName) {
     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();
   }
 
@@ -469,16 +561,16 @@ function dashboardHtml(tierName) {
     document.getElementById('sm-saved').textContent = (s.totalTokensSaved || 0).toLocaleString();
     document.getElementById('sm-bytes').textContent = fmtBytesTop(s.totalCompressedOriginalBytes);
 
-    var body = document.getElementById('all-rows');
-    if (!repos.length) {
-      body.innerHTML = '<tr><td colspan="6" class="repo-none">No repositories registered yet.</td></tr>';
-    } else {
-      body.innerHTML = repos.map(function(r) {
+    // 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>' +
+        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>' +
@@ -488,12 +580,48 @@ function dashboardHtml(tierName) {
         '</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(renderIndex).catch(function() {});
+    fetch('/api/index').then(function(r) { return r.json(); }).then(function(d) {
+      indexCache = d && d.repos ? d : indexCache;
+      renderIndex(d);
+    }).catch(function() {});
   }
   pollIndex();
   setInterval(pollIndex, 5000);
@@ -524,6 +652,26 @@ function dashboardHtml(tierName) {
 // Server
 // ---------------------------------------------------------------------------
 export function launchDashboardServer(stateDir) {
+    // Our own package version — exposed at /api/version so the launcher can
+    // detect a stale server (started by an older build) and replace it on
+    // upgrade instead of reuse it.
+    let SERVER_VERSION = "0.0.0";
+    try {
+        // dashboard-server.js lives at <pkg>/dist/extensions/, so package.json is
+        // two levels up. Guard each candidate so a dev-checkout layout still works.
+        const here = dirname(fileURLToPath(import.meta.url));
+        const candidates = [join(here, "..", "..", "package.json"), join(here, "..", "package.json")];
+        for (const p of candidates) {
+            if (!existsSync(p))
+                continue;
+            const pkg = JSON.parse(readFileSync(p, "utf-8"));
+            if (pkg.version) {
+                SERVER_VERSION = pkg.version;
+                break;
+            }
+        }
+    }
+    catch { /* non-fatal */ }
     const portFile = join(stateDir, "port.pid");
     const snapshotPath = join(stateDir, "dashboard.json");
     const eventsPath = join(stateDir, "events.log");
@@ -564,6 +712,13 @@ export function launchDashboardServer(stateDir) {
             res.end(JSON.stringify(snap));
             return;
         }
+        // Server version — lets the /dashboard launcher detect a stale server from
+        // an older build and replace it on upgrade rather than reuse it.
+        if (req.url === "/api/version") {
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ version: SERVER_VERSION }));
+            return;
+        }
         // Multi-repo aggregate (Phase 5b): the machine-wide repo registry read
         // directly from SQLite (index.sqlite). Lets one dashboard show every repo's
         // checkpoints, tokens saved, and active model. Read-only.

package/dist/extensions/mega-compact.test.js

@@ -19,6 +19,9 @@ import { join } from "node:path";
 import { createRequire } from "node:module";
 const require = createRequire(import.meta.url);
 const baseTmp = mkdtempSync(join(tmpdir(), "mc-ext-"));
+// Isolate the machine-wide repo index so test runs (which call bindRepo ->
+// upsertRepoRegistry) never pollute the developer's real ~/.mega-compact-index.
+process.env.MEGACOMPACT_INDEX_DIR = join(baseTmp, "index");
 let counter = 0;
 /** Build a mock pi + ctx and load the extension into them. */
 function harness(opts = {}) {
@@ -268,13 +271,14 @@ test("/dashboard-stop reports no server when pid file missing", async () => {
 test("/dashboard skips server spawn when already running", async () => {
     const h = harness();
     const confirms = [];
-    // Set up a fake HTTP server at a random port
+    // Set up a fake HTTP server on a port inside the dashboard's scan range
+    // (9320–9329) — isServerRunning() probes those ports, not the port.pid value.
     const { createServer } = await import("node:http");
     const server = createServer((_req, res) => {
         res.writeHead(200, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ updatedAt: new Date().toISOString(), tier: "test", version: 1, config: {}, session: {}, context: {}, trigger: {}, store: {} }));
     });
-    await new Promise((r) => server.listen(0, "127.0.0.1", r));
+    await new Promise((r) => server.listen(9320, "127.0.0.1", r));
     const addr = server.address();
     const { join: j } = await import("node:path");
     const { writeFileSync: wf } = await import("node:fs");
@@ -295,7 +299,8 @@ test("/dashboard skips server spawn when already running", async () => {
 });
 test("/dashboard-status reports running after dashboard start", async () => {
     const h = harness();
-    // Write a fake port.pid with a real port (use a server we control)
+    // Write a fake port.pid; the server must listen inside the scan range
+    // (9320–9329) or isServerRunning() won't detect it.
     const { createServer } = await import("node:http");
     const { join: j } = await import("node:path");
     const { writeFileSync: wf } = await import("node:fs");
@@ -303,7 +308,7 @@ test("/dashboard-status reports running after dashboard start", async () => {
         res.writeHead(200, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ updatedAt: new Date().toISOString(), tier: "test" }));
     });
-    await new Promise((r) => server.listen(0, "127.0.0.1", r));
+    await new Promise((r) => server.listen(9321, "127.0.0.1", r));
     const addr = server.address();
     wf(j(h.stateDir, "port.pid"), JSON.stringify({ port: addr.port, pid: process.pid }));
     const ctx = h.ctx();

package/dist/extensions/mega-dashboard-cmds.js

@@ -32,7 +32,10 @@ export function registerDashboardCommands(pi, runtime) {
         }
         return null;
     }
-    /** Try to reach a running dashboard server. Returns { port, url } or null. */
+    /** Try to reach a running dashboard server. Returns details or null.
+     *  `hasPidFile` tells the caller whether this server was launched by us
+     *  (port.pid present) — a live server with NO pid file is an orphan from an
+     *  older/detached spawn that we should replace rather than reuse. */
     async function isServerRunning() {
         const port = await findLivePort();
         if (!port) {
@@ -45,7 +48,68 @@ export function registerDashboardCommands(pi, runtime) {
             }
             return null;
         }
-        return { port, url: `http://localhost:${port}` }; // guardrails-allow PREVENT-PI-004: localhost URL of the dashboard server this extension spawned
+        return { port, url: `http://localhost:${port}`, hasPidFile: existsSync(portFile) }; // guardrails-allow PREVENT-PI-004: localhost URL of the dashboard server this extension spawned
+    }
+    /** Version the running server on `port` reports, or null. */
+    async function serverVersion(port) {
+        try {
+            const res = await fetch(`http://localhost:${port}/api/version`, { signal: AbortSignal.timeout(800) }); // guardrails-allow PREVENT-PI-004: localhost version probe of the dashboard server this extension spawned
+            if (!res.ok)
+                return null;
+            const j = await res.json();
+            return j.version ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Version of THIS extension (read from its own package.json). */
+    function ownVersion() {
+        try {
+            const here = dirname(fileURLToPath(import.meta.url)); // .../extensions
+            const pkg = JSON.parse(readFileSync(join(here, "..", "package.json"), "utf-8"));
+            return pkg.version ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** PID listening on 127.0.0.1:port (our own server), or null. Uses `ss`
+     *  (Linux/macOS) — best-effort, returns null if unavailable. */
+    function pidOnPort(port) {
+        try {
+            const { execSync } = require("node:child_process"); // guardrails-allow PREVENT-PI-004: localhost-only, reads our own dashboard port owner
+            const out = execSync(`ss -ltnp 2>/dev/null | grep ':${port} '`, { encoding: "utf-8" });
+            const m = out.match(/pid=(\d+)/);
+            return m ? Number(m[1]) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Kill a running dashboard server (best-effort): read the pid from port.pid,
+     *  or — when there's no marker (an orphan) — from the port owner. Then remove
+     *  the marker so the next spawn starts fresh. */
+    function killServerOnPort(port) {
+        let pid = null;
+        try {
+            const info = JSON.parse(readFileSync(portFile, "utf-8"));
+            if (info && info.pid)
+                pid = info.pid;
+        }
+        catch { /* no marker */ }
+        if (pid == null)
+            pid = pidOnPort(port); // orphan with no pid.pid
+        if (pid != null) {
+            try {
+                process.kill(pid, "SIGTERM");
+            }
+            catch { /* already gone */ }
+        }
+        try {
+            unlinkSync(portFile);
+        }
+        catch { /* ignore */ }
     }
     /**
      * Resolve the launchable dashboard-server module.
@@ -119,11 +183,29 @@ export function registerDashboardCommands(pi, runtime) {
             runtime.bindRepo(ctx.cwd);
             let info = await isServerRunning();
             if (info) {
-                ctx.ui.notify(`[mega-compact] dashboard already running at ${info.url}`);
-                const open = await ctx.ui.confirm("mega-compact dashboard", `Open ${info.url} in browser?`);
-                if (open)
-                    openBrowser(info.url);
-                return;
+                // Replace the server when it's stale: either (a) an orphan — a live
+                // server with no port.pid (e.g. left running from a detached spawn or a
+                // previous upgrade) that keeps serving old HTML from memory; or (b) a
+                // server that reports a different version than this extension (an older
+                // build). A live server WITH a matching pid file and version is reused.
+                const orphan = !info.hasPidFile;
+                const running = await serverVersion(info.port);
+                const want = ownVersion();
+                const stale = orphan || (want != null && running != null && running !== want);
+                if (stale) {
+                    ctx.ui.notify(orphan
+                        ? "[mega-compact] replacing orphaned dashboard server…"
+                        : `[mega-compact] replacing stale dashboard (${running} → ${want})…`);
+                    killServerOnPort(info.port);
+                    info = null;
+                }
+                else {
+                    ctx.ui.notify(`[mega-compact] dashboard already running at ${info.url}`);
+                    const open = await ctx.ui.confirm("mega-compact dashboard", `Open ${info.url} in browser?`);
+                    if (open)
+                        openBrowser(info.url);
+                    return;
+                }
             }
             // Start the server
             ctx.ui.notify("[mega-compact] starting dashboard server…");

package/extensions/dashboard-server.ts

@@ -14,7 +14,8 @@
 import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { existsSync, mkdirSync, readFileSync, unlinkSync, watch, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
-import { join } from "node:path";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import Database from "better-sqlite3";
 
 // --- Multi-repo index (Phase 5b) ------------------------------------------------
@@ -61,7 +62,7 @@ function readIndex(): { updatedAt: string; summary: unknown; repos: unknown[] }
     const rows = db
       .prepare("SELECT * FROM repo_registry ORDER BY last_seen DESC")
       .all() as Record<string, unknown>[];
-    const repos: IndexRepo[] = rows.map((r) => ({
+    const mapped: IndexRepo[] = rows.map((r) => ({
       repoRoot: String(r.repo_root ?? ""),
       displayName: String(r.display_name ?? ""),
       checkpointCount: Number(r.checkpoint_count ?? 0),
@@ -75,6 +76,22 @@ function readIndex(): { updatedAt: string; summary: unknown; repos: unknown[] }
       outputRate: (r.output_rate as number | null) ?? null,
       lastSeen: Number(r.last_seen ?? 0),
     }));
+    // Defensive display hygiene (belt-and-suspenders — the real fix is that
+    // tests now isolate via MEGACOMPACT_INDEX_DIR): drop transient test/temp
+    // paths that should never have been real repos, and collapse duplicate
+    // display names to the most-recently-seen row (rows are last_seen DESC, so
+    // the first occurrence wins). Keeps the All-repos list readable.
+    const isTransient = (p: string) =>
+      /^\/tmp\//.test(p) || /^\/private\/tmp\//.test(p) || /^\/var\/folders\//.test(p) ||
+      /\/mc-(ext|e2e|resume|recall)-/.test(p);
+    const seenName = new Set<string>();
+    const repos: IndexRepo[] = [];
+    for (const r of mapped) {
+      if (isTransient(r.repoRoot)) continue;
+      if (seenName.has(r.displayName)) continue;
+      seenName.add(r.displayName);
+      repos.push(r);
+    }
     const summary = {
       totalRepos: repos.length,
       totalCheckpoints: repos.reduce((a, r) => a + r.checkpointCount, 0),
@@ -148,6 +165,19 @@ interface Snapshot {
     dedupCollapsed: number;
     storageDedupRate: number;
   };
+  integrity: {
+    regionsRetained: number;
+    compressedOriginalBytes: number;
+    duplicatesCollapsed: number;
+    bytesPermanentlyDeleted: number;
+  };
+  model?: {
+    name: string;
+    provider: string;
+    providerName: string;
+    inputRate: number;
+    outputRate: number;
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -171,6 +201,7 @@ function readSnapshot(snapshotPath: string) {
       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,
     } as Snapshot;
   }
 }
@@ -268,13 +299,26 @@ function dashboardHtml(tierName: string): string {
   .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; }
 </style>
 </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></h1>
+<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>
@@ -343,6 +387,17 @@ function dashboardHtml(tierName: string): string {
       <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">
@@ -370,9 +425,40 @@ function dashboardHtml(tierName: string): string {
   <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 -->
 
+<!-- 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>
+
 <!-- All repos (machine-wide registry from index.sqlite) -->
 <div class="tab-panel" id="panel-all">
   <table class="repos">
@@ -479,6 +565,24 @@ function dashboardHtml(tierName: string): string {
     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();
   }
 
@@ -542,16 +646,16 @@ function dashboardHtml(tierName: string): string {
     document.getElementById('sm-saved').textContent = (s.totalTokensSaved || 0).toLocaleString();
     document.getElementById('sm-bytes').textContent = fmtBytesTop(s.totalCompressedOriginalBytes);
 
-    var body = document.getElementById('all-rows');
-    if (!repos.length) {
-      body.innerHTML = '<tr><td colspan="6" class="repo-none">No repositories registered yet.</td></tr>';
-    } else {
-      body.innerHTML = repos.map(function(r) {
+    // 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>' +
+        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>' +
@@ -561,12 +665,48 @@ function dashboardHtml(tierName: string): string {
         '</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(renderIndex).catch(function() {});
+    fetch('/api/index').then(function(r) { return r.json(); }).then(function(d) {
+      indexCache = d && d.repos ? d : indexCache;
+      renderIndex(d);
+    }).catch(function() {});
   }
   pollIndex();
   setInterval(pollIndex, 5000);
@@ -599,6 +739,21 @@ function dashboardHtml(tierName: string): string {
 // ---------------------------------------------------------------------------
 
 export function launchDashboardServer(stateDir: string): Promise<{ port: number; url: string }> {
+  // Our own package version — exposed at /api/version so the launcher can
+  // detect a stale server (started by an older build) and replace it on
+  // upgrade instead of reuse it.
+  let SERVER_VERSION = "0.0.0";
+  try {
+    // dashboard-server.js lives at <pkg>/dist/extensions/, so package.json is
+    // two levels up. Guard each candidate so a dev-checkout layout still works.
+    const here = dirname(fileURLToPath(import.meta.url));
+    const candidates = [join(here, "..", "..", "package.json"), join(here, "..", "package.json")];
+    for (const p of candidates) {
+      if (!existsSync(p)) continue;
+      const pkg = JSON.parse(readFileSync(p, "utf-8"));
+      if (pkg.version) { SERVER_VERSION = pkg.version; break; }
+    }
+  } catch { /* non-fatal */ }
   const portFile = join(stateDir, "port.pid");
   const snapshotPath = join(stateDir, "dashboard.json");
   const eventsPath = join(stateDir, "events.log");
@@ -646,6 +801,14 @@ export function launchDashboardServer(stateDir: string): Promise<{ port: number;
       return;
     }
 
+    // Server version — lets the /dashboard launcher detect a stale server from
+    // an older build and replace it on upgrade rather than reuse it.
+    if (req.url === "/api/version") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ version: SERVER_VERSION }));
+      return;
+    }
+
     // Multi-repo aggregate (Phase 5b): the machine-wide repo registry read
     // directly from SQLite (index.sqlite). Lets one dashboard show every repo's
     // checkpoints, tokens saved, and active model. Read-only.

package/extensions/mega-compact.test.ts

@@ -22,6 +22,9 @@ import type { AgentMessage } from "@earendil-works/pi-agent-core";
 
 const require = createRequire(import.meta.url);
 const baseTmp = mkdtempSync(join(tmpdir(), "mc-ext-"));
+// Isolate the machine-wide repo index so test runs (which call bindRepo ->
+// upsertRepoRegistry) never pollute the developer's real ~/.mega-compact-index.
+process.env.MEGACOMPACT_INDEX_DIR = join(baseTmp, "index");
 let counter = 0;
 
 /** Build a mock pi + ctx and load the extension into them. */
@@ -297,13 +300,14 @@ test("/dashboard-stop reports no server when pid file missing", async () => {
 test("/dashboard skips server spawn when already running", async () => {
   const h = harness();
   const confirms: boolean[] = [];
-  // Set up a fake HTTP server at a random port
+  // Set up a fake HTTP server on a port inside the dashboard's scan range
+  // (9320–9329) — isServerRunning() probes those ports, not the port.pid value.
   const { createServer } = await import("node:http");
   const server = createServer((_req, res) => {
     res.writeHead(200, { "Content-Type": "application/json" });
     res.end(JSON.stringify({ updatedAt: new Date().toISOString(), tier: "test", version: 1, config: {}, session: {}, context: {}, trigger: {}, store: {} }));
   });
-  await new Promise<void>((r) => server.listen(0, "127.0.0.1", r));
+  await new Promise<void>((r) => server.listen(9320, "127.0.0.1", r));
   const addr = server.address() as any;
   const { join: j } = await import("node:path");
   const { writeFileSync: wf } = await import("node:fs");
@@ -328,7 +332,8 @@ test("/dashboard skips server spawn when already running", async () => {
 
 test("/dashboard-status reports running after dashboard start", async () => {
   const h = harness();
-  // Write a fake port.pid with a real port (use a server we control)
+  // Write a fake port.pid; the server must listen inside the scan range
+  // (9320–9329) or isServerRunning() won't detect it.
   const { createServer } = await import("node:http");
   const { join: j } = await import("node:path");
   const { writeFileSync: wf } = await import("node:fs");
@@ -336,7 +341,7 @@ test("/dashboard-status reports running after dashboard start", async () => {
     res.writeHead(200, { "Content-Type": "application/json" });
     res.end(JSON.stringify({ updatedAt: new Date().toISOString(), tier: "test" }));
   });
-  await new Promise<void>((r) => server.listen(0, "127.0.0.1", r));
+  await new Promise<void>((r) => server.listen(9321, "127.0.0.1", r));
   const addr = server.address() as any;
   wf(j(h.stateDir, "port.pid"), JSON.stringify({ port: addr.port, pid: process.pid }));
 

package/extensions/mega-dashboard-cmds.ts

@@ -36,8 +36,11 @@ export function registerDashboardCommands(pi: ExtensionAPI, runtime: MegaRuntime
     return null;
   }
 
-  /** Try to reach a running dashboard server. Returns { port, url } or null. */
-  async function isServerRunning(): Promise<{ port: number; url: string } | null> {
+  /** Try to reach a running dashboard server. Returns details or null.
+   *  `hasPidFile` tells the caller whether this server was launched by us
+   *  (port.pid present) — a live server with NO pid file is an orphan from an
+   *  older/detached spawn that we should replace rather than reuse. */
+  async function isServerRunning(): Promise<{ port: number; url: string; hasPidFile: boolean } | null> {
     const port = await findLivePort();
     if (!port) {
       // Stale marker with no live server behind it — clean up.
@@ -46,7 +49,59 @@ export function registerDashboardCommands(pi: ExtensionAPI, runtime: MegaRuntime
       }
       return null;
     }
-    return { port, url: `http://localhost:${port}` }; // guardrails-allow PREVENT-PI-004: localhost URL of the dashboard server this extension spawned
+    return { port, url: `http://localhost:${port}`, hasPidFile: existsSync(portFile) }; // guardrails-allow PREVENT-PI-004: localhost URL of the dashboard server this extension spawned
+  }
+
+  /** Version the running server on `port` reports, or null. */
+  async function serverVersion(port: number): Promise<string | null> {
+    try {
+      const res = await fetch(`http://localhost:${port}/api/version`, { signal: AbortSignal.timeout(800) }); // guardrails-allow PREVENT-PI-004: localhost version probe of the dashboard server this extension spawned
+      if (!res.ok) return null;
+      const j = await res.json() as { version?: string };
+      return j.version ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** Version of THIS extension (read from its own package.json). */
+  function ownVersion(): string | null {
+    try {
+      const here = dirname(fileURLToPath(import.meta.url)); // .../extensions
+      const pkg = JSON.parse(readFileSync(join(here, "..", "package.json"), "utf-8"));
+      return pkg.version ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** PID listening on 127.0.0.1:port (our own server), or null. Uses `ss`
+   *  (Linux/macOS) — best-effort, returns null if unavailable. */
+  function pidOnPort(port: number): number | null {
+    try {
+      const { execSync } = require("node:child_process"); // guardrails-allow PREVENT-PI-004: localhost-only, reads our own dashboard port owner
+      const out = execSync(`ss -ltnp 2>/dev/null | grep ':${port} '`, { encoding: "utf-8" });
+      const m = out.match(/pid=(\d+)/);
+      return m ? Number(m[1]) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** Kill a running dashboard server (best-effort): read the pid from port.pid,
+   *  or — when there's no marker (an orphan) — from the port owner. Then remove
+   *  the marker so the next spawn starts fresh. */
+  function killServerOnPort(port: number): void {
+    let pid: number | null = null;
+    try {
+      const info = JSON.parse(readFileSync(portFile, "utf-8"));
+      if (info && info.pid) pid = info.pid;
+    } catch { /* no marker */ }
+    if (pid == null) pid = pidOnPort(port); // orphan with no pid.pid
+    if (pid != null) {
+      try { process.kill(pid, "SIGTERM"); } catch { /* already gone */ }
+    }
+    try { unlinkSync(portFile); } catch { /* ignore */ }
   }
 
   /**
@@ -122,10 +177,29 @@ export function registerDashboardCommands(pi: ExtensionAPI, runtime: MegaRuntime
       let info = await isServerRunning();
 
       if (info) {
-        ctx.ui.notify(`[mega-compact] dashboard already running at ${info.url}`);
-        const open = await ctx.ui.confirm("mega-compact dashboard", `Open ${info.url} in browser?`);
-        if (open) openBrowser(info.url);
-        return;
+        // Replace the server when it's stale: either (a) an orphan — a live
+        // server with no port.pid (e.g. left running from a detached spawn or a
+        // previous upgrade) that keeps serving old HTML from memory; or (b) a
+        // server that reports a different version than this extension (an older
+        // build). A live server WITH a matching pid file and version is reused.
+        const orphan = !info.hasPidFile;
+        const running = await serverVersion(info.port);
+        const want = ownVersion();
+        const stale = orphan || (want != null && running != null && running !== want);
+        if (stale) {
+          ctx.ui.notify(
+            orphan
+              ? "[mega-compact] replacing orphaned dashboard server…"
+              : `[mega-compact] replacing stale dashboard (${running} → ${want})…`,
+          );
+          killServerOnPort(info.port);
+          info = null;
+        } else {
+          ctx.ui.notify(`[mega-compact] dashboard already running at ${info.url}`);
+          const open = await ctx.ui.confirm("mega-compact dashboard", `Open ${info.url} in browser?`);
+          if (open) openBrowser(info.url);
+          return;
+        }
       }
 
       // Start the server

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-mega-compact",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "description": "Layered, local, vector-backed context compressor for pi — supersede/collapse/cluster compaction with deduped inline recall.",
   "type": "module",
   "license": "BSD-2-Clause",