pi-mega-compact 0.7.8 → 0.7.9

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

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

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());
+}