npm - @jefuriiij/synthra - Versions diffs - 0.1.2 → 0.1.3 - Mend

@jefuriiij/synthra 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/cli/index.js +760 -888
package/dist/cli/index.js.map +1 -1
package/dist/dashboard/index.js +763 -891
package/dist/dashboard/index.js.map +1 -1
package/package.json +1 -1

package/dist/cli/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@jefuriiij/synthra",
-      version: "0.1.2",
+      version: "0.1.3",
       publishConfig: {
         access: "public"
       },
@@ -438,107 +438,439 @@ var public_default = `<!doctype html>
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Synthra \u2014 Token Dashboard</title>
+  <title>Synthra \xB7 Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <header>
+  <!-- ============ Top nav ============ -->
+  <header class="topnav">
     <div class="brand">
-      <h1>Synthra</h1>
-      <span class="tag">Token Dashboard</span>
+      <div class="brand-mark"></div>
+      <div class="brand-name">Synth<em>ra</em></div>
+      <div class="brand-eyebrow">Dashboard</div>
+    </div>
+    <div class="top-right">
+      <span class="status-pill">
+        <span class="dot" id="dot"></span>
+        <span id="status">connecting\u2026</span>
+      </span>
     </div>
-    <div class="meta">
-      <span class="active-project" id="active-project">\u2026</span>
-      <span class="dot" id="dot"></span>
-      <span id="status">connecting\u2026</span>
+    <div class="topnav-right">
+      <span class="port-badge">port <span class="mono" id="port-num">8901</span></span>
+      <button class="faq-btn has-tooltip" id="faq-btn" data-tooltip="Open the FAQ \u2014 explains where every number on this dashboard comes from, how cost is calculated, and what the savings floor actually measures." aria-label="Open FAQ">?</button>
     </div>
   </header>
-  <main>
-    <section>
-      <h2>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
-        Global totals
-        <span class="muted">(all projects)</span>
-      </h2>
-      <div class="cards" id="cards"></div>
-    </section>
-    <section>
-      <h2>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-        Projects
-      </h2>
-      <div class="projects" id="projects"></div>
-      <p class="empty hidden" id="projects-empty">No projects registered yet. Run <code>syn .</code> in any project to add it.</p>
-    </section>
-    <section>
-      <h2>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-        Recent calls
-        <span class="muted">(across all projects)</span>
-      </h2>
-      <table id="turns">
-        <thead>
-          <tr>
-            <th>Time</th>
-            <th>Project</th>
-            <th>Model</th>
-            <th class="num"><span class="has-tooltip" data-tooltip="New (uncached) tokens you sent to Claude this turn. Usually small \u2014 most of the conversation comes from cache.">Input <span class="help-icon">i</span></span></th>
-            <th class="num"><span class="has-tooltip" data-tooltip="Tokens Claude generated in its response. The most expensive line item \u2014 ~5\xD7 the input rate on Opus.">Output <span class="help-icon">i</span></span></th>
-            <th class="num"><span class="has-tooltip" data-tooltip="Cache read / cache write. Reads (~10% of input rate) reuse prior context; writes (~125% of input rate) save new context for future turns.">Cache R / W <span class="help-icon">i</span></span></th>
-            <th class="num"><span class="has-tooltip" data-tooltip="Approximate USD cost for this turn \u2014 input \xD7 rate + output \xD7 5\xD7rate + cache_read \xD7 0.1\xD7rate + cache_write \xD7 1.25\xD7rate, using the turn's model.">Cost <span class="help-icon">i</span></span></th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-      <p class="empty hidden" id="turns-empty">No turns logged yet. Use Claude via the IDE extension or <code>claude</code> CLI while <code>syn .</code> is running.</p>
-    </section>
-    <section>
-      <h2>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-        Recent gate decisions
-      </h2>
-      <table id="gates">
-        <thead>
-          <tr>
-            <th>Time</th>
-            <th>Project</th>
-            <th>Tool</th>
-            <th><span class="has-tooltip" data-tooltip="ALLOW = Synthra let the tool call through. BLOCK = Synthra intercepted it because the graph already had high-confidence context \u2014 Claude should use graph_continue instead.">Decision <span class="help-icon">i</span></span></th>
-            <th>Query</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-      <p class="empty hidden" id="gates-empty">No gate decisions yet.</p>
-    </section>
+  <!-- ============ Hero strip ============ -->
+  <section class="hero-strip">
+    <div class="date-block">
+      <div class="d-day" id="hero-day">\u2014</div>
+      <div class="d-rest">
+        <div id="hero-weekday">\u2014</div>
+        <div class="d-mute" id="hero-month">\u2014</div>
+      </div>
+    </div>
+    <div class="hero-spacer"></div>
+    <div class="active-block">
+      <div class="ab-label">Active project</div>
+      <div class="ab-value" id="active-project">\u2014</div>
+    </div>
+  </section>
+  <!-- ============ Main 3-column grid ============ -->
+  <main class="grid-main">
+    <!-- ===== Left ===== -->
+    <aside class="col-left">
+      <div class="panel">
+        <div class="p-head">Legend</div>
+        <div class="p-section">
+          <div class="ps-head">Model family</div>
+          <div class="check"><span class="dot-sq opus"></span><span>Opus</span></div>
+          <div class="check"><span class="dot-sq sonnet"></span><span>Sonnet</span></div>
+          <div class="check"><span class="dot-sq haiku"></span><span>Haiku</span></div>
+          <div class="check"><span class="dot-sq unknown"></span><span>Other</span></div>
+        </div>
+        <div class="p-section">
+          <div class="ps-head">Projects</div>
+          <div class="proj-filter" id="proj-filter"></div>
+        </div>
+      </div>
+      <div class="card donut-card has-tooltip" data-tooltip="Which Claude models you've been calling, weighted by turn count. Opus = slow and expensive; Sonnet = workhorse; Haiku = cheap and fast. Helps you see where your budget is actually going.">
+        <div class="card-head">
+          <div class="card-eyebrow">Model usage</div>
+          <div class="card-meta">by turns</div>
+        </div>
+        <div class="donut-wrap">
+          <svg viewBox="0 0 140 140" class="donut" id="donut-svg" aria-hidden="true">
+            <circle cx="70" cy="70" r="52" class="donut-track"/>
+          </svg>
+          <div class="donut-center">
+            <div class="donut-total" id="donut-total">0</div>
+            <div class="donut-total-k">turns</div>
+          </div>
+        </div>
+        <div class="donut-legend" id="donut-legend"></div>
+      </div>
+    </aside>
+    <!-- ===== Center ===== -->
+    <div class="col-center">
+      <!-- Metric strip \u2014 divider-separated, no individual card chrome -->
+      <div class="metric-strip">
+        <div class="metric-item has-tooltip" data-tooltip="Total back-and-forth exchanges with Claude across all projects. One turn = you send a message, Claude responds. Counted from the Stop hook against transcript JSONL files.">
+          <div class="m-label">Turns</div>
+          <div class="m-value" id="m-turns">0</div>
+        </div>
+        <div class="metric-item has-tooltip" data-tooltip="\u2193 Input \u2014 new, uncached tokens you sent to Claude. Usually small (a few hundred per turn) because most of the conversation history comes from prompt cache.">
+          <div class="m-label">\u2193 Input</div>
+          <div class="m-value" id="m-input">0</div>
+        </div>
+        <div class="metric-item has-tooltip" data-tooltip="\u2191 Output \u2014 tokens Claude generated in its responses. Most expensive line item per turn (~5\xD7 input rate on Opus). High output usually means long code edits.">
+          <div class="m-label">\u2191 Output</div>
+          <div class="m-value" id="m-output">0</div>
+        </div>
+        <div class="metric-item has-tooltip" data-tooltip="\u27F2 Cache read \u2014 tokens reused from the prompt cache (system prompt, conversation history, Synthra's pre-packed context). Cheap, around 10% of the input rate. The bulk of every long session.">
+          <div class="m-label">\u27F2 Cache R</div>
+          <div class="m-value" id="m-cache-r">0</div>
+        </div>
+        <div class="metric-item has-tooltip" data-tooltip="\uFF0B Cache write \u2014 tokens newly added to the prompt cache so future turns can read them cheaply. Premium-priced (~125% of input rate) but pays back across the session.">
+          <div class="m-label">\uFF0B Cache W</div>
+          <div class="m-value" id="m-cache-w">0</div>
+        </div>
+      </div>
+      <!-- Savings hero -->
+      <div class="card savings has-tooltip" data-tooltip="What Synthra has saved you, as a deliberately conservative floor estimate. Each time the gate blocks an exploratory Grep/Glob, we credit 500 tokens \xD7 $3 per million-token input rate. Real savings are usually higher because the formula ignores cache thrash and follow-up Reads that the block also prevents. The audit line below shows the exact math live.">
+        <div class="card-head">
+          <div class="card-eyebrow">Synthra savings <span class="src-badge estimated">floor</span></div>
+          <div class="card-meta" id="savings-pct">\u2014 off</div>
+        </div>
+        <div class="savings-body">
+          <div class="savings-figure">
+            <div class="savings-money" id="savings-money">$0.00</div>
+            <div class="savings-tokens"><span id="savings-tokens">0</span> tokens avoided</div>
+          </div>
+          <div class="savings-bar">
+            <div class="savings-actual" id="savings-actual-bar" style="width:100%"></div>
+            <div class="savings-saved"  id="savings-saved-bar"  style="width:0%"></div>
+          </div>
+          <div class="savings-legend">
+            <div class="sl-row"><span class="sl-dot actual"></span>You paid <b id="savings-actual-amt">$0.00</b></div>
+            <div class="sl-row"><span class="sl-dot saved"></span>Baseline <b id="savings-baseline-amt">$0.00</b></div>
+          </div>
+        </div>
+        <div class="savings-audit">
+          <span class="audit-formula">
+            <b id="audit-blocks">0</b> blocks \xD7 <b>500</b> tokens \xD7 <b>$3</b> / M input rate = <b id="audit-result" class="audit-result">$0.00</b>
+          </span>
+        </div>
+      </div>
+      <!-- Recent turns -->
+      <div class="card turns-card has-tooltip" data-tooltip="Every conversational turn Synthra has observed across all your projects, newest first. Each row shows when, which project, which model, and how the cost broke down between fresh input, generated output, and cache.">
+        <div class="card-head">
+          <div class="card-eyebrow">Recent turns</div>
+          <div class="card-meta" id="turns-count">\u2014 shown</div>
+        </div>
+        <div class="turns-scroll">
+          <table class="turns-table">
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th>Project</th>
+                <th>Model</th>
+                <th class="num">In</th>
+                <th class="num">Out</th>
+                <th class="num">Cache R/W</th>
+                <th class="num">Cost</th>
+              </tr>
+            </thead>
+            <tbody id="turns-body"></tbody>
+          </table>
+          <p class="empty hidden" id="turns-empty">No turns logged yet. Run <code>syn .</code> in any project and chat with Claude.</p>
+        </div>
+      </div>
+    </div>
+    <!-- ===== Right ===== -->
+    <aside class="col-right">
+      <!-- Cost hero -->
+      <div class="card cost-hero has-tooltip" data-tooltip="Your all-time Claude spend across every project Synthra has tracked on this machine. Token counts come from Claude's transcript JSONL files; dollar amounts are computed by multiplying those counts by Anthropic's published per-model rates. See the FAQ for full rate tables.">
+        <div class="card-head">
+          <div class="card-eyebrow">Total spend \xB7 <em>all time</em></div>
+        </div>
+        <div class="big-money" id="big-cost">$0.<em>00</em></div>
+        <div class="cost-sub">
+          <div class="cs-row">
+            <span class="cs-k">Tokens (in+out)</span>
+            <span class="cs-v" id="cs-tokens">0</span>
+          </div>
+          <div class="cs-row">
+            <span class="cs-k">Avg / turn</span>
+            <span class="cs-v" id="cs-avg">$0.00</span>
+          </div>
+        </div>
+      </div>
+      <!-- The Moat -->
+      <div class="card moat has-tooltip" data-tooltip="Synthra's PreToolUse hook intercepts. Each block = Synthra recognized the graph already had high-confidence context for the query, so it stopped Claude from running an exploratory Grep or Glob. The list below shows the latest decisions across all projects.">
+        <div class="card-head">
+          <div class="card-eyebrow">The <em>Moat</em></div>
+          <div class="card-meta">PreToolUse</div>
+        </div>
+        <div class="moat-value"><span id="blocks">0</span> <em>blocks</em></div>
+        <div class="gate-mini" id="gate-mini"></div>
+      </div>
+    </aside>
   </main>
-  <footer>
-    <span>Synthra Token Dashboard \xB7 live polling every 2s</span>
-    <span class="muted">Cost figures are approximate \u2014 based on published Anthropic rates.</span>
+  <!-- ============ Project dialog ============ -->
+  <div class="dialog-backdrop hidden" id="dialog-backdrop" role="dialog" aria-modal="true">
+    <div class="dialog">
+      <button class="dialog-close" id="dialog-close" aria-label="Close">\xD7</button>
+      <div class="dialog-eyebrow">Project \xB7 <em>details</em></div>
+      <div class="dialog-name" id="d-name">\u2014</div>
+      <div class="dialog-path" id="d-path">\u2014</div>
+      <div class="dialog-grid">
+        <div class="dg-cell">
+          <div class="dg-k">Total cost</div>
+          <div class="dg-v money" id="d-cost">$0.00</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">Turns</div>
+          <div class="dg-v" id="d-turns">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">\u2193 Raw input</div>
+          <div class="dg-v" id="d-input">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">\u2191 Output</div>
+          <div class="dg-v" id="d-output">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">\u27F2 Cache read</div>
+          <div class="dg-v" id="d-cache-r">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">\uFF0B Cache write</div>
+          <div class="dg-v" id="d-cache-w">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">Moat blocks</div>
+          <div class="dg-v" id="d-blocks">0</div>
+        </div>
+        <div class="dg-cell">
+          <div class="dg-k">Last active</div>
+          <div class="dg-v dg-v-sm" id="d-last">\u2014</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- ============ FAQ dialog ============ -->
+  <div class="dialog-backdrop hidden" id="faq-backdrop" role="dialog" aria-modal="true" aria-label="Dashboard FAQ">
+    <div class="dialog dialog-faq">
+      <button class="dialog-close" id="faq-close" aria-label="Close">\xD7</button>
+      <div class="dialog-eyebrow">FAQ \xB7 <em>where every number comes from</em></div>
+      <div class="dialog-name">Understanding your dashboard</div>
+      <div class="dialog-path">Synthra reports what Claude actually used \u2014 read from transcripts, not estimated.</div>
+      <div class="faq-content">
+        <details open>
+          <summary>Where does Synthra get these numbers from?</summary>
+          <div class="faq-body">
+            <p>Synthra <strong>does not estimate</strong> token counts \u2014 it reads them directly from Claude's own log files. Every number on this dashboard is traceable:</p>
+            <table>
+              <tr><td>Turns, \u2193 In, \u2191 Out, Cache R/W</td><td>Parsed from Claude's transcript JSONLs at <code>~/.claude/projects/&lt;encoded-cwd&gt;/*.jsonl</code></td></tr>
+              <tr><td>Model used per turn</td><td>From each turn's <code>model</code> field in the same transcripts</td></tr>
+              <tr><td>Moat blocks + gate decisions</td><td>From <code>.synthra-graph/gate_log.jsonl</code> inside each project</td></tr>
+              <tr><td>Active project, project list</td><td>From <code>~/.synthra/projects.json</code> (built up as you run <code>syn .</code>)</td></tr>
+              <tr><td>Total spend (USD)</td><td>Above token counts \xD7 Anthropic's published per-model rates \u2014 see "How is cost calculated?" below</td></tr>
+              <tr><td>Synthra savings (USD)</td><td><strong>Estimated</strong> \u2014 see "About the Savings (floor) card" below</td></tr>
+            </table>
+            <p>The cost-calculation logic lives in <code>src/shared/pricing.ts</code>; the aggregation logic in <code>src/dashboard/delta.ts</code>. Both are linked at the bottom.</p>
+          </div>
+        </details>
+        <details>
+          <summary>What do the columns in Recent Turns mean?</summary>
+          <div class="faq-body">
+            <table>
+              <tr><td><code>Time</code></td><td>When this turn happened (local time)</td></tr>
+              <tr><td><code>Project</code></td><td>Which directory the turn ran in</td></tr>
+              <tr><td><code>Model</code></td><td>Claude model used \u2014 Opus, Sonnet, or Haiku (color-coded in the model pill)</td></tr>
+              <tr><td><code>In</code></td><td>Raw input tokens \u2014 brand-new content sent to Claude this turn, not cached</td></tr>
+              <tr><td><code>Out</code></td><td>Tokens Claude generated in its response</td></tr>
+              <tr><td><code>Cache R/W</code></td><td>Cache <strong>R</strong>ead (reused from prior turns) / Cache <strong>W</strong>rite (newly cached for future turns)</td></tr>
+              <tr><td><code>Cost</code></td><td>Per-turn USD estimate using Anthropic's published rates</td></tr>
+            </table>
+            <p><strong>Why is Raw Input often tiny (e.g. 6 tokens)?</strong> Because Claude Code aggressively caches the system prompt, CLAUDE.md, tool definitions, and conversation history. On each turn, only your brand-new message is "raw input" \u2014 everything else is a cheap cache read. This is normal and saves significant money.</p>
+          </div>
+        </details>
+        <details>
+          <summary>How is cost calculated?</summary>
+          <div class="faq-body">
+            <p>Each token type has a different per-million-token rate. Synthra uses these rates (defined in <code>src/shared/pricing.ts</code>):</p>
+            <table>
+              <thead><tr><td><strong>Token type</strong></td><td><strong>Haiku 4.5</strong></td><td><strong>Sonnet 4.x</strong></td><td><strong>Opus 4.x</strong></td></tr></thead>
+              <tr><td>Raw Input</td><td>$1.00/M</td><td>$3.00/M</td><td>$15.00/M</td></tr>
+              <tr><td>Cache Write</td><td>$1.25/M</td><td>$3.75/M</td><td>$18.75/M</td></tr>
+              <tr><td>Cache Read</td><td>$0.10/M</td><td>$0.30/M</td><td>$1.50/M</td></tr>
+              <tr><td>Output</td><td>$5.00/M</td><td>$15.00/M</td><td>$75.00/M</td></tr>
+            </table>
+            <p><strong>Cost</strong> = (Input \xD7 input rate) + (Output \xD7 output rate) + (Cache Read \xD7 read rate) + (Cache Write \xD7 write rate)</p>
+            <p>Cache reads are <strong>10\xD7 cheaper</strong> than raw input. Cache writes are <strong>25% more expensive</strong> than raw input. So Claude Code's caching strategy pays for itself quickly across a session.</p>
+            <div class="warning"><span class="icon">\u26A0</span>These are <strong>Anthropic API rates</strong>, not your plan billing. If you're on Claude Pro, Team, Max, or Enterprise, your actual billing is different \u2014 the costs shown are estimates of <em>API-equivalent</em> usage, useful for comparing sessions against each other. See <a href="https://www.anthropic.com/pricing" target="_blank" rel="noopener noreferrer">anthropic.com/pricing</a> for the source of these rates.</div>
+          </div>
+        </details>
+        <details>
+          <summary>What is the total context size per turn?</summary>
+          <div class="faq-body">
+            <p><code>Total context = Raw Input + Cache Read + Cache Write</code></p>
+            <p>Example: if Raw Input is 6, Cache Read is 60K, and Cache Write is 13K, your turn used ~73K tokens of context \u2014 but 99.99% was efficiently cached, so you only paid the cache-read rate on most of it. The Recent Turns table lets you scan this row by row.</p>
+            <p>Anthropic's prompt-caching mechanics are documented at <a href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-caching" target="_blank" rel="noopener noreferrer">docs.anthropic.com/.../prompt-caching</a>.</p>
+          </div>
+        </details>
+        <details>
+          <summary>About the "Savings (floor)" card</summary>
+          <div class="faq-body">
+            <p>This is the only number on the dashboard that's <strong>estimated</strong> rather than measured. Here's the math:</p>
+            <p class="formula-box">savings = blocks \xD7 500 tokens \xD7 $3 per million input rate</p>
+            <p>Each time Synthra's PreToolUse hook blocks a <code>Grep</code> or <code>Glob</code> call (because the graph already has high-confidence context), we credit a deliberately conservative 500 tokens at the Sonnet input rate.</p>
+            <p>It under-counts on purpose because the formula ignores:</p>
+            <ul>
+              <li><strong>Cache thrash</strong> \u2014 the blocked tool result would have been written to the cache at ~125% of the input rate, which we don't count</li>
+              <li><strong>Cascading reads</strong> \u2014 Claude usually follows a Grep with several <code>Read</code> calls, which the block also prevents but we don't credit</li>
+              <li><strong>Bigger codebases</strong> \u2014 actual Grep results often exceed 500 tokens by 3\u20136\xD7 in a real repo</li>
+            </ul>
+            <p>Real savings are typically <strong>2\u20135\xD7 the floor</strong>. The audit row on the Savings card shows the formula live so you can verify the math.</p>
+          </div>
+        </details>
+        <details>
+          <summary>What is "The Moat"?</summary>
+          <div class="faq-body">
+            <p>"The Moat" is Synthra's <strong>PreToolUse hook</strong>. Every time Claude Code is about to run a <code>Grep</code> or <code>Glob</code>, the hook calls Synthra's local server first and asks: "do you already have high-confidence context for this query?"</p>
+            <p>If yes, Synthra returns <code>{"decision":"block"}</code> \u2014 Claude can't run the tool. Claude then has to use Synthra's graph tools (<code>graph_continue</code>, <code>graph_read</code>) instead, which return the answer without burning tokens on exploration. This is deterministic enforcement \u2014 not prose policy. Claude literally can't disobey.</p>
+            <p>The Moat card shows total blocks; the inline list below shows the most recent gate decisions (block vs allow) with the originating query.</p>
+            <p>Every decision is logged to <code>.synthra-graph/gate_log.jsonl</code> for the project.</p>
+          </div>
+        </details>
+        <details>
+          <summary>How does Synthra build the codebase graph?</summary>
+          <div class="faq-body">
+            <p>When you run <code>syn .</code> in a project, Synthra walks the file tree (respecting <code>.gitignore</code> + <code>.synthraignore</code>) and parses each file with <strong>tree-sitter</strong> WebAssembly grammars. Currently 14 languages are supported:</p>
+            <p>TypeScript, JavaScript, JSX/TSX, Python, Svelte, Vue, Go, Rust, Java, Kotlin, PHP, Ruby, C/C++, C#, and Dart.</p>
+            <p>For each file we extract: function and class definitions, exports, imports, and test-to-source links. The output is a structured graph stored at <code>.synthra-graph/info_graph.json</code> with a symbol index at <code>.synthra-graph/symbol_index.json</code>.</p>
+            <p>The graph is what makes pre-injection and The Moat work \u2014 both query it before Claude ever has to Grep.</p>
+          </div>
+        </details>
+        <details>
+          <summary>Where does Synthra store data on disk?</summary>
+          <div class="faq-body">
+            <p>Synthra uses two folders per project, intentionally separated:</p>
+            <table>
+              <tr><td><code>.synthra-graph/</code></td><td><strong>Gitignored</strong>. Heavy generated state \u2014 the graph, symbol index, token + gate logs, session info. Rebuilt by <code>syn scan</code>.</td></tr>
+              <tr><td><code>.synthra/</code></td><td><strong>Git-tracked.</strong> Decisions, context notes, branch-scoped memory \u2014 the part teammates inherit when they clone the repo.</td></tr>
+            </table>
+            <p>Plus one global file at <code>~/.synthra/projects.json</code> that tracks every project on this machine.</p>
+          </div>
+        </details>
+        <details>
+          <summary>How does branch-aware memory work?</summary>
+          <div class="faq-body">
+            <p>Inside <code>.synthra/</code>, context is partitioned by git branch:</p>
+            <ul>
+              <li><code>.synthra/context-store.json</code> \u2014 decisions on the default branch</li>
+              <li><code>.synthra/CONTEXT.md</code> \u2014 narrative notes on the default branch</li>
+              <li><code>.synthra/branches/&lt;sanitized-name&gt;/</code> \u2014 overrides on feature branches</li>
+            </ul>
+            <p>When you switch branches, Synthra's git-watcher (using <code>fs.watch</code> on <code>.git/HEAD</code>) detects the change and reloads the right context. Decisions scoped to a feature branch don't leak back to <code>main</code> until merge.</p>
+          </div>
+        </details>
+        <details>
+          <summary>How does Synthra actually reduce my Claude bill?</summary>
+          <div class="faq-body">
+            <p>Three mechanisms, in order of impact:</p>
+            <ul>
+              <li><strong>Pre-injection</strong> \u2014 at session start, Synthra packs ~4K tokens of graph context (function signatures, top inline bodies, file relationships) into Claude's prompt. Claude doesn't have to Grep / Read to discover what's in the codebase \u2014 it already knows.</li>
+              <li><strong>The Moat</strong> \u2014 the PreToolUse hook deterministically blocks exploratory Grep/Glob when the graph already has high-confidence context. Counts on the Moat card.</li>
+              <li><strong>Branch-aware memory</strong> \u2014 decisions and CONTEXT notes persist in <code>.synthra/</code>, so Claude doesn't have to be re-told what was decided last session.</li>
+            </ul>
+            <p>The dashboard shows real token counts from Claude's own logs so you can see the effect over time, not just take Synthra's word for it.</p>
+          </div>
+        </details>
+        <details>
+          <summary>Why do long conversations get expensive?</summary>
+          <div class="faq-body">
+            <p>Each turn re-sends the entire conversation history as input. Even cached, the cumulative input grows roughly <strong>quadratically</strong>:</p>
+            <table>
+              <thead><tr><td><strong>Turns</strong></td><td><strong>Per-turn input</strong></td><td><strong>Cumulative input</strong></td></tr></thead>
+              <tr><td>10</td><td>~2K (mostly cached)</td><td>~110K</td></tr>
+              <tr><td>30</td><td>~2K</td><td>~930K</td></tr>
+              <tr><td>50</td><td>~2K</td><td>~2.55M</td></tr>
+            </table>
+            <p>Prompt caching helps a lot (cache reads are 10\xD7 cheaper than fresh input), but context still grows. This is why Synthra's pre-injection matters: starting with the answer already in context means you reach a useful state in fewer turns.</p>
+            <p><strong>Tip:</strong> Use <code>/compact</code> in Claude Code or start fresh sessions when a thread feels stale.</p>
+          </div>
+        </details>
+        <details>
+          <summary>Sources &amp; references</summary>
+          <div class="faq-body">
+            <p>Synthra is open source. Every number on this dashboard can be cross-checked:</p>
+            <ul class="link-list">
+              <li><a href="https://github.com/jefuriiij/synthra" target="_blank" rel="noopener noreferrer">github.com/jefuriiij/synthra</a> \u2014 source code, issues, roadmap</li>
+              <li><a href="https://www.npmjs.com/package/@jefuriiij/synthra" target="_blank" rel="noopener noreferrer">npm: @jefuriiij/synthra</a> \u2014 release history, install instructions</li>
+              <li><a href="https://www.anthropic.com/pricing" target="_blank" rel="noopener noreferrer">anthropic.com/pricing</a> \u2014 official rate table Synthra uses</li>
+              <li><a href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-caching" target="_blank" rel="noopener noreferrer">Anthropic docs \xB7 prompt caching</a> \u2014 explains cache read/write behavior</li>
+              <li><code>src/shared/pricing.ts</code> \u2014 the file in this repo holding the rate table</li>
+              <li><code>src/dashboard/delta.ts</code> \u2014 where dashboard aggregates are computed</li>
+              <li><code>src/server/routes/gate.ts</code> \u2014 the Moat implementation</li>
+            </ul>
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+  <!-- ============ Footer ============ -->
+  <footer class="foot">
+    <div>Synth<em>ra</em> \xB7 v0.1.3</div>
+    <div>Cost figures approximate \xB7 @jefuriiij</div>
   </footer>
   <script>
-    // Inline SVG icons. Each is a stroke-based icon, currentColor for the
-    // stroke, designed to inherit color from the parent's CSS.
-    const ICONS = {
-      dollar:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
-      chat:      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
-      arrowDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
-      arrowUp:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
-      refresh:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>',
-      save:      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>',
-      folder:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
-      shield:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
-      trending:  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>',
-      ban:       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>',
-    };
+    const $ = (sel) => document.querySelector(sel);
+    const SAVED_RATE_PER_M = 3.00; // USD per million tokens \u2014 conservative input rate
-    // Classify a model name into a family for color-coding.
+    // ----- model classification -----
     function modelFamily(model) {
       if (!model) return 'unknown';
       const m = model.toLowerCase();
@@ -548,863 +880,403 @@ var public_default = `<!doctype html>
       if (m.includes('haiku'))  return 'haiku';
       return 'unknown';
     }
     function modelLabel(model) {
-      if (!model || model === '<synthetic>') return model === '<synthetic>' ? 'synthetic' : 'unknown';
-      return model;
+      if (!model || model === '<synthetic>') return 'synthetic';
+      return model.replace(/^claude-/, '');
     }
-    const $ = (sel) => document.querySelector(sel);
-    const cardsEl = $("#cards");
-    const projectsEl = $("#projects");
-    const turnsBody = $("#turns tbody");
-    const gatesBody = $("#gates tbody");
-    const turnsEmpty = $("#turns-empty");
-    const gatesEmpty = $("#gates-empty");
-    const projectsEmpty = $("#projects-empty");
-    const statusEl = $("#status");
-    const dotEl = $("#dot");
-    const activeProjectEl = $("#active-project");
+    // ----- formatting -----
     function fmt(n) {
-      if (typeof n !== "number" || !Number.isFinite(n)) return "0";
-      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
-      if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+      if (typeof n !== 'number' || !Number.isFinite(n)) return '0';
+      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + '<em>M</em>';
+      if (n >= 1_000)     return (n / 1_000).toFixed(1)    + '<em>k</em>';
       return n.toLocaleString();
     }
-    function fmtFull(n) {
-      return (typeof n === "number" ? n : 0).toLocaleString();
+    function fmtPlain(n) {
+      if (typeof n !== 'number' || !Number.isFinite(n)) return '0';
+      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+      if (n >= 1_000)     return (n / 1_000).toFixed(1)    + 'k';
+      return n.toLocaleString();
     }
-    function fmtCost(usd) {
-      if (typeof usd !== "number") return "~$0.00";
-      if (usd >= 1) return "~$" + usd.toFixed(2);
-      if (usd >= 0.01) return "~$" + usd.toFixed(3);
-      return "~$" + usd.toFixed(4);
+    function fmtCostBig(usd) {
+      if (typeof usd !== 'number' || !Number.isFinite(usd)) usd = 0;
+      let s;
+      if (usd >= 1)      s = usd.toFixed(2);
+      else if (usd >= 0.01) s = usd.toFixed(3);
+      else                  s = usd.toFixed(4);
+      const dot = s.indexOf('.');
+      if (dot === -1) return '$' + s;
+      return '$' + s.slice(0, dot) + '.<em>' + s.slice(dot + 1) + '</em>';
+    }
+    function fmtCostFlat(usd) {
+      if (typeof usd !== 'number' || !Number.isFinite(usd)) usd = 0;
+      if (usd >= 1) return '$' + usd.toFixed(2);
+      if (usd >= 0.01) return '$' + usd.toFixed(3);
+      return '$' + usd.toFixed(4);
     }
     function fmtTs(iso) {
       try {
         const d = new Date(iso);
         const today = new Date();
         const isToday = d.toDateString() === today.toDateString();
-        if (isToday) return d.toLocaleTimeString();
-        return d.toLocaleString();
-      } catch {
-        return iso;
-      }
+        if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+      } catch { return iso; }
     }
-    // Definitions for the global-totals cards. Each: label, value-source key,
-    // icon, optional class (accent | money), tooltip text.
-    function cardConfigs(g) {
-      return [
-        {
-          label: "Total cost",
-          value: fmtCost(g.estimated_cost_usd),
-          icon: ICONS.dollar,
-          cls: "money",
-          tooltip: "Approximate USD cost across all projects. Computed from per-model pricing (Opus, Sonnet, Haiku) applied to each turn's input/output/cache. Tilde everywhere \u2014 real cost depends on Anthropic's current rates.",
-        },
-        {
-          label: "Turns",
-          value: fmt(g.total_turns),
-          icon: ICONS.chat,
-          tooltip: "Total number of back-and-forth exchanges with Claude across all projects. One turn = you send a message, Claude responds.",
-        },
-        {
-          label: "Input",
-          value: fmt(g.total_input_tokens),
-          icon: ICONS.arrowDown,
-          tooltip: "New (uncached) tokens sent to Claude across all turns. Usually small \u2014 most of the conversation comes from cache.",
-        },
-        {
-          label: "Output",
-          value: fmt(g.total_output_tokens),
-          icon: ICONS.arrowUp,
-          tooltip: "Tokens Claude generated in responses. The most expensive line item per turn (~5\xD7 input rate on Opus).",
-        },
-        {
-          label: "Cache read",
-          value: fmt(g.total_cache_read),
-          icon: ICONS.refresh,
-          tooltip: "Tokens read from Claude's prompt cache \u2014 conversation history, system prompt, Synthra's pack. Cheap: ~10% of the input rate. The bulk of every long session.",
-        },
-        {
-          label: "Cache write",
-          value: fmt(g.total_cache_create),
-          icon: ICONS.save,
-          tooltip: "Tokens newly added to the prompt cache so future turns can read them cheaply. Premium-priced (~125% of input) but pays back over the rest of the session.",
-        },
-        {
-          label: "Projects",
-          value: fmt(g.project_count),
-          icon: ICONS.folder,
-          tooltip: "Projects that have ever run \`syn .\` on this machine. Tracked in ~/.synthra/projects.json.",
-        },
-        {
-          label: "Blocked Grep / Glob",
-          value: fmt(g.blocked_count),
-          icon: ICONS.shield,
-          cls: "accent",
-          tooltip: "PreToolUse hook intercepts: Synthra blocked these Grep/Glob calls because the graph already had high-confidence context for the query. Claude pivots to graph_continue or graph_read instead.",
-        },
-        {
-          label: "Tokens saved",
-          value: fmt(g.estimated_tokens_saved),
-          icon: ICONS.trending,
-          cls: "accent",
-          tooltip: "Estimated tokens avoided by blocking exploratory Grep/Glob calls. Calculated as blocks \xD7 500 \u2014 conservative; under-counts the cache thrash you also avoid.",
-        },
-      ];
+    let lastData = null;
+    // ----- date in hero -----
+    function setHeroDate() {
+      const now = new Date();
+      $('#hero-day').textContent = now.getDate();
+      $('#hero-weekday').textContent = now.toLocaleDateString([], { weekday: 'short' });
+      $('#hero-month').textContent = now.toLocaleDateString([], { month: 'long' });
     }
-    function renderCards(g) {
-      cardsEl.innerHTML = "";
-      for (const c of cardConfigs(g)) {
-        const el = document.createElement("div");
-        el.className = "card" + (c.cls ? " " + c.cls : "");
-        el.innerHTML =
-          '<div class="card-head">' +
-            '<div class="card-label has-tooltip" data-tooltip="' + c.tooltip.replace(/"/g, '&quot;') + '">' +
-              c.label +
-              ' <span class="help-icon">i</span>' +
-            '</div>' +
-            '<span class="card-icon">' + c.icon + '</span>' +
-          '</div>' +
-          '<div class="card-value">' + c.value + '</div>';
-        cardsEl.appendChild(el);
-      }
+    // ----- renderers -----
+    function renderSession(turns) {
+      const agg = turns.reduce((a, t) => {
+        a.turns += 1;
+        a.input += t.input || 0;
+        a.output += t.output || 0;
+        a.cacheR += t.cache_read || 0;
+        a.cacheW += t.cache_create || 0;
+        return a;
+      }, { turns: 0, input: 0, output: 0, cacheR: 0, cacheW: 0 });
+      $('#m-turns').innerHTML   = fmt(agg.turns);
+      $('#m-input').innerHTML   = fmt(agg.input);
+      $('#m-output').innerHTML  = fmt(agg.output);
+      $('#m-cache-r').innerHTML = fmt(agg.cacheR);
+      $('#m-cache-w').innerHTML = fmt(agg.cacheW);
     }
-    function renderProjects(projects, globalCost) {
-      projectsEl.innerHTML = "";
-      if (!projects.length) {
-        projectsEmpty.classList.remove("hidden");
-        return;
-      }
-      projectsEmpty.classList.add("hidden");
-      const maxTokens = Math.max(1, ...projects.map((p) => p.total_input_tokens + p.total_output_tokens));
-      for (const p of projects) {
-        const total = p.total_input_tokens + p.total_output_tokens;
-        const pct = Math.round((total / maxTokens) * 100);
-        const sharePct = globalCost > 0 ? ((p.estimated_cost_usd / globalCost) * 100).toFixed(1) : "0.0";
-        const row = document.createElement("div");
-        row.className = "project-row";
-        row.innerHTML =
-          '<div class="project-name">' +
-            '<strong>' + ICONS.folder + p.name + '</strong>' +
-            '<code class="project-path">' + p.path + '</code>' +
-          '</div>' +
-          '<div class="project-stats">' +
-            '<div class="stat"><span class="stat-value cost">' + fmtCost(p.estimated_cost_usd) + '</span><span class="stat-label">cost (' + sharePct + '%)</span></div>' +
-            '<div class="stat"><span class="stat-value">' + fmt(total) + '</span><span class="stat-label">tokens</span></div>' +
-            '<div class="stat"><span class="stat-value">' + fmt(p.total_turns) + '</span><span class="stat-label">turns</span></div>' +
-            '<div class="stat"><span class="stat-value">' + fmt(p.blocked_count) + '</span><span class="stat-label">blocks</span></div>' +
-          '</div>' +
-          '<div class="bar"><div class="bar-fill" style="width:' + pct + '%"></div></div>';
-        projectsEl.appendChild(row);
-      }
+    function renderSavings(g) {
+      const tokensSaved = g.estimated_tokens_saved || 0;
+      const blocks = g.blocked_count || 0;
+      const savedUsd = tokensSaved * SAVED_RATE_PER_M / 1_000_000;
+      const actualUsd = g.estimated_cost_usd || 0;
+      const baselineUsd = actualUsd + savedUsd;
+      const savedPct = baselineUsd > 0 ? (savedUsd / baselineUsd) * 100 : 0;
+      const actualPct = baselineUsd > 0 ? (actualUsd / baselineUsd) * 100 : 100;
+      $('#savings-money').textContent = fmtCostFlat(savedUsd);
+      $('#savings-pct').textContent   = savedPct.toFixed(1) + '% off';
+      $('#savings-tokens').textContent = fmtPlain(tokensSaved);
+      $('#savings-actual-bar').style.width = actualPct.toFixed(2) + '%';
+      $('#savings-saved-bar').style.width  = savedPct.toFixed(2)  + '%';
+      $('#savings-actual-amt').textContent   = fmtCostFlat(actualUsd);
+      $('#savings-baseline-amt').textContent = fmtCostFlat(baselineUsd);
+      // Audit row \u2014 live formula
+      $('#audit-blocks').textContent = blocks.toLocaleString();
+      $('#audit-result').textContent = fmtCostFlat(savedUsd);
+    }
+    function renderCostHero(g) {
+      $('#big-cost').innerHTML = fmtCostBig(g.estimated_cost_usd);
+      const totalTokens = (g.total_input_tokens || 0) + (g.total_output_tokens || 0);
+      $('#cs-tokens').textContent = fmtPlain(totalTokens);
+      const avg = g.total_turns > 0 ? g.estimated_cost_usd / g.total_turns : 0;
+      $('#cs-avg').textContent = fmtCostFlat(avg);
+    }
+    function renderMoat(g) {
+      $('#blocks').textContent = fmtPlain(g.blocked_count);
     }
     function renderTurns(turns) {
-      turnsBody.innerHTML = "";
+      const tbody = $('#turns-body');
+      const empty = $('#turns-empty');
+      tbody.innerHTML = '';
       if (!turns.length) {
-        turnsEmpty.classList.remove("hidden");
+        empty.classList.remove('hidden');
+        $('#turns-count').textContent = '0 shown';
         return;
       }
-      turnsEmpty.classList.add("hidden");
+      empty.classList.add('hidden');
+      $('#turns-count').textContent = turns.length + ' shown';
+      const frag = document.createDocumentFragment();
       for (const t of turns) {
         const family = modelFamily(t.model);
-        const tr = document.createElement("tr");
+        const tr = document.createElement('tr');
         tr.innerHTML =
-          "<td>" + fmtTs(t.ts) + "</td>" +
-          "<td><code>" + t.project_name + "</code></td>" +
-          '<td><span class="model-pill ' + family + '">' + modelLabel(t.model) + "</span></td>" +
-          '<td class="num">' + fmtFull(t.input) + "</td>" +
-          '<td class="num">' + fmtFull(t.output) + "</td>" +
-          '<td class="num">' + fmt(t.cache_read) + " / " + fmt(t.cache_create) + "</td>" +
-          '<td class="num cost">' + fmtCost(t.cost_usd) + "</td>";
-        turnsBody.appendChild(tr);
+          '<td class="ts">' + fmtTs(t.ts || t.written_at) + '</td>' +
+          '<td class="proj">' + (t.project_name || '\u2014') + '</td>' +
+          '<td><span class="model-pill ' + family + '"><span class="sq"></span>' + modelLabel(t.model) + '</span></td>' +
+          '<td class="num">' + fmtPlain(t.input || 0) + '</td>' +
+          '<td class="num">' + fmtPlain(t.output || 0) + '</td>' +
+          '<td class="num">' + fmtPlain(t.cache_read || 0) + ' / ' + fmtPlain(t.cache_create || 0) + '</td>' +
+          '<td class="num cost">' + fmtCostFlat(t.cost_usd || 0) + '</td>';
+        frag.appendChild(tr);
       }
+      tbody.appendChild(frag);
     }
-    function renderGates(gates) {
-      gatesBody.innerHTML = "";
+    function renderGateMini(gates) {
+      const el = $('#gate-mini');
+      el.innerHTML = '';
       if (!gates.length) {
-        gatesEmpty.classList.remove("hidden");
+        el.innerHTML = '<div class="empty">No gate decisions yet.</div>';
         return;
       }
-      gatesEmpty.classList.add("hidden");
-      for (const g of gates) {
-        const tr = document.createElement("tr");
-        const isBlock = g.decision === "block";
-        const cls = isBlock ? "decision-block" : "decision-allow";
-        const label = isBlock
-          ? '<span class="' + cls + '">' + ICONS.ban + ' BLOCK</span>'
-          : '<span class="' + cls + '">ALLOW</span>';
-        tr.innerHTML =
-          "<td>" + fmtTs(g.ts) + "</td>" +
-          "<td><code>" + g.project_name + "</code></td>" +
-          "<td><code>" + g.tool + "</code></td>" +
-          "<td>" + label + "</td>" +
-          "<td><code>" + (g.query || "") + "</code></td>";
-        gatesBody.appendChild(tr);
+      const frag = document.createDocumentFragment();
+      for (const g of gates.slice(0, 12)) {
+        const row = document.createElement('div');
+        row.className = 'gate-row';
+        const cls = g.decision === 'block' ? 'block' : 'allow';
+        row.innerHTML =
+          '<span class="g-ts">' + fmtTs(g.ts) + '</span>' +
+          '<span class="g-decision ' + cls + '">' + (g.decision || '\u2014').toUpperCase() + '</span>' +
+          '<span class="g-q">' + (g.query || g.tool || '\u2014') + '</span>';
+        frag.appendChild(row);
       }
+      el.appendChild(frag);
     }
-    async function tick() {
-      try {
-        const res = await fetch("/data");
-        if (!res.ok) throw new Error("HTTP " + res.status);
-        const data = await res.json();
-        activeProjectEl.textContent = data.active.project_root;
-        renderCards(data.global);
-        renderProjects(data.projects, data.global.estimated_cost_usd);
-        renderTurns(data.recent_turns);
-        renderGates(data.recent_gates);
-        statusEl.textContent = "live \xB7 " + new Date().toLocaleTimeString();
-        dotEl.classList.add("live");
-        dotEl.classList.remove("dead");
-      } catch (e) {
-        statusEl.textContent = "disconnected \xB7 " + e.message;
-        dotEl.classList.add("dead");
-        dotEl.classList.remove("live");
+    function renderProjectLegend(projects) {
+      const el = $('#proj-filter');
+      const incoming = projects.map((p) => p.name).join('|');
+      if (el.dataset.signature === incoming) return;
+      el.dataset.signature = incoming;
+      el.innerHTML = '';
+      if (!projects.length) {
+        el.innerHTML = '<div class="empty">No projects yet.</div>';
+        return;
+      }
+      const frag = document.createDocumentFragment();
+      for (const p of projects) {
+        const row = document.createElement('button');
+        row.className = 'check check-clickable';
+        row.type = 'button';
+        row.innerHTML =
+          '<span class="dot-sq" style="background: var(--sky); opacity:.55"></span>' +
+          '<span class="pf-name" title="' + p.path + '">' + p.name + '</span>' +
+          '<span class="pf-arrow">\u203A</span>';
+        row.addEventListener('click', () => openProjectDialog(p.name));
+        frag.appendChild(row);
       }
+      el.appendChild(frag);
     }
-    tick();
-    setInterval(tick, 2000);
-  </script>
-</body>
-</html>
-`;
-// src/dashboard/public/style.css
-var style_default = `/* Synthra token dashboard \u2014 palette per project brief.
-   Base: cream-on-near-black, dark-red borders, hot-pink highlights.
-   Plus: money green for dollar amounts, per-family model colors,
-   subtle dot grid + top glow background, tooltip system, icons. */
-:root {
-  /* Brand */
-  --color-heading: #ECEBD8;
-  --color-body: #EDECD9;
-  --color-bg: #000000;
-  --color-surface: #140009;
-  --color-surface-raised: #1E000D;
-  --color-border: #4D0020;
-  --color-accent: #FF0073;
-  --color-accent-darker: #EB006A;
-  --color-form-bg: #2E0014;
-  --color-muted: rgba(237, 236, 217, 0.55);
-  --color-very-muted: rgba(237, 236, 217, 0.35);
-  --color-block: #FF0073;
-  --color-allow: #ECEBD8;
-  /* Money green \u2014 used everywhere a $ amount appears */
-  --color-money: #36E596;
-  --color-money-darker: #00B85F;
-  --color-money-bg: rgba(54, 229, 150, 0.08);
-  /* Per-family model colors */
-  --color-model-opus:   #C9A2FF;
-  --color-model-sonnet: #6BD0FF;
-  --color-model-haiku:  #7BFFC7;
-  /* Background layering */
-  --bg-dot-color: rgba(237, 236, 217, 0.045);
-  --bg-glow-color: rgba(255, 0, 115, 0.07);
-}
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-html, body {
-  background-color: var(--color-bg);
-  color: var(--color-body);
-  font-family:
-    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    system-ui, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  min-height: 100vh;
-}
-/* Body becomes a flex column so main can grow + header/footer stay sticky
-   at the natural top/bottom of the viewport. */
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-main {
-  flex: 1;
-}
-/* Layered backdrop: dot grid + soft pink glow at the top.
-   Both are fixed so they don't repeat as you scroll. */
-body {
-  background-image:
-    radial-gradient(ellipse 70% 40% at 50% 0%, var(--bg-glow-color), transparent 70%),
-    radial-gradient(circle at 1px 1px, var(--bg-dot-color) 1px, transparent 0);
-  background-size: 100% 100%, 22px 22px;
-  background-attachment: fixed;
-}
-code, .num, table, .project-path {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-}
-header {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1.1rem 2rem;
-  background: linear-gradient(180deg, rgba(20, 0, 9, 0.7), rgba(20, 0, 9, 0.4));
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--color-border);
-  position: sticky;
-  top: 0;
-  z-index: 5;
-}
-header .brand {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-}
-header h1 {
-  color: var(--color-heading);
-  font-size: 1.35rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-header .tag {
-  color: var(--color-muted);
-  font-size: 0.78rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-header .meta {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.78rem;
-  font-family: ui-monospace, monospace;
-  color: var(--color-muted);
-}
-header .active-project {
-  max-width: 480px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-main {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-}
-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
-}
-h2 {
-  color: var(--color-heading);
-  font-size: 0.85rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-h2 svg {
-  width: 14px;
-  height: 14px;
-  opacity: 0.5;
-}
-h2 .muted {
-  color: var(--color-very-muted);
-  font-size: 0.78rem;
-  font-weight: 400;
-  letter-spacing: 0.06em;
-  text-transform: none;
-  margin-left: 0.5rem;
-}
-/* ============================================================
-   Cards row (Global totals)
-   ============================================================ */
-.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-  gap: 0.7rem;
-}
-.card {
-  position: relative;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.95rem 1rem 0.85rem;
-  transition: transform 120ms ease, border-color 120ms ease;
-}
-.card:hover {
-  transform: translateY(-1px);
-  border-color: rgba(77, 0, 32, 0.85);
-}
-.card.accent {
-  background: var(--color-surface-raised);
-  border-color: var(--color-accent);
-}
-.card.money {
-  background: linear-gradient(180deg, var(--color-money-bg), transparent 80%), var(--color-surface);
-  border-color: var(--color-money-darker);
-}
-.card.money:hover {
-  border-color: var(--color-money);
-}
-.card-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.4rem;
-}
-.card-label {
-  color: var(--color-muted);
-  font-size: 0.66rem;
-  text-transform: uppercase;
-  letter-spacing: 0.09em;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-.card-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--color-muted);
-  opacity: 0.65;
-  flex-shrink: 0;
-}
-.card.accent .card-icon { color: var(--color-accent); opacity: 0.85; }
-.card.money  .card-icon { color: var(--color-money);  opacity: 0.85; }
-.card-value {
-  color: var(--color-heading);
-  font-family: ui-monospace, monospace;
-  font-size: 1.5rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-.card.accent .card-value { color: var(--color-accent); }
-.card.money  .card-value { color: var(--color-money); }
-/* ============================================================
-   Tooltip (data-tooltip on .has-tooltip)
-   ============================================================ */
-.has-tooltip {
-  position: relative;
-  cursor: help;
-}
-.has-tooltip::before,
-.has-tooltip::after {
-  position: absolute;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 150ms ease, transform 150ms ease;
-  z-index: 100;
-}
-.has-tooltip::after {
-  content: attr(data-tooltip);
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translate(-50%, 4px);
-  background: var(--color-surface-raised);
-  color: var(--color-body);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.6rem 0.75rem;
-  font-size: 0.74rem;
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: 0;
-  white-space: normal;
-  width: 260px;
-  text-align: left;
-  line-height: 1.45;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
-}
-.has-tooltip::before {
-  content: "";
-  bottom: calc(100% + 4px);
-  left: 50%;
-  transform: translate(-50%, 4px);
-  border: 6px solid transparent;
-  border-top-color: var(--color-border);
-}
-.has-tooltip:hover::after,
-.has-tooltip:hover::before {
-  opacity: 1;
-  transform: translate(-50%, 0);
-}
-/* Small \u24D8 icon used to indicate tooltips */
-.help-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  border: 1px solid var(--color-muted);
-  color: var(--color-muted);
-  font-size: 9px;
-  font-weight: 600;
-  font-family: ui-sans-serif, sans-serif;
-  line-height: 1;
-  cursor: help;
-  user-select: none;
-  transition: color 120ms, border-color 120ms;
-}
-.has-tooltip:hover .help-icon {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-.card.money .has-tooltip:hover .help-icon { border-color: var(--color-money); color: var(--color-money); }
-/* ============================================================
-   Projects list
-   ============================================================ */
-.projects {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-.project-row {
-  display: grid;
-  grid-template-columns: minmax(220px, 1fr) auto;
-  grid-template-rows: auto auto;
-  gap: 0.6rem 1.25rem;
-  align-items: center;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.9rem 1.2rem;
-  transition: background 120ms ease;
-}
-.project-row:hover {
-  background: var(--color-surface-raised);
-}
-.project-name {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  overflow: hidden;
-}
-.project-name strong {
-  color: var(--color-heading);
-  font-size: 0.95rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-.project-name strong svg {
-  width: 13px;
-  height: 13px;
-  opacity: 0.65;
-  color: var(--color-muted);
-  flex-shrink: 0;
-}
-.project-name .project-path {
-  color: var(--color-very-muted);
-  font-size: 0.72rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.project-stats {
-  display: flex;
-  gap: 1.6rem;
-  justify-self: end;
-  text-align: right;
-}
-.stat {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  min-width: 70px;
-}
-.stat-value {
-  color: var(--color-heading);
-  font-family: ui-monospace, monospace;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-.stat-value.cost {
-  color: var(--color-money);
-}
-.stat-label {
-  color: var(--color-muted);
-  font-size: 0.66rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.bar {
-  grid-column: 1 / -1;
-  height: 3px;
-  background: var(--color-form-bg);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.bar-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-accent-darker), var(--color-accent));
-  border-radius: 2px;
-  transition: width 400ms ease;
-}
-/* ============================================================
-   Tables
-   ============================================================ */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.83rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-table thead th {
-  text-align: left;
-  color: var(--color-muted);
-  text-transform: uppercase;
-  font-size: 0.66rem;
-  letter-spacing: 0.08em;
-  font-weight: 600;
-  padding: 0.65rem 0.85rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface);
-}
-table thead th.num {
-  text-align: right;
-}
-table thead th .has-tooltip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-}
-table tbody td {
-  padding: 0.55rem 0.85rem;
-  border-bottom: 1px solid rgba(77, 0, 32, 0.4);
-  color: var(--color-body);
-}
-table tbody td.num {
-  text-align: right;
-}
-table tbody td.cost {
-  color: var(--color-money);
-  font-weight: 600;
-}
-table tbody tr:last-child td {
-  border-bottom: none;
-}
-table tbody tr:hover {
-  background: var(--color-surface-raised);
-}
-/* ============================================================
-   Model pills \u2014 color-coded by family
-   ============================================================ */
-.model-pill {
-  display: inline-block;
-  padding: 0.1rem 0.5rem;
-  border-radius: 3px;
-  background: var(--color-form-bg);
-  font-family: ui-monospace, monospace;
-  font-size: 0.82em;
-  border: 1px solid transparent;
-  color: var(--color-body);
-  white-space: nowrap;
-}
-.model-pill.opus {
-  color: var(--color-model-opus);
-  border-color: rgba(201, 162, 255, 0.3);
-  background: rgba(201, 162, 255, 0.08);
-}
+    // ----- Project dialog -----
+    function lastActiveFor(name) {
+      const turns = lastData?.recent_turns || [];
+      for (const t of turns) {
+        if (t.project_name === name) {
+          const ts = t.ts || t.written_at;
+          if (!ts) return '\u2014';
+          try {
+            return new Date(ts).toLocaleString([], {
+              year: 'numeric', month: 'short', day: 'numeric',
+              hour: '2-digit', minute: '2-digit',
+            });
+          } catch { return ts; }
+        }
+      }
+      return '\u2014';
+    }
-.model-pill.sonnet {
-  color: var(--color-model-sonnet);
-  border-color: rgba(107, 208, 255, 0.3);
-  background: rgba(107, 208, 255, 0.08);
-}
+    function openProjectDialog(name) {
+      const p = (lastData?.projects || []).find((x) => x.name === name);
+      if (!p) return;
+      $('#d-name').textContent = p.name;
+      $('#d-path').textContent = p.path || '';
+      $('#d-cost').textContent    = fmtCostFlat(p.estimated_cost_usd);
+      $('#d-turns').textContent   = fmtPlain(p.total_turns);
+      $('#d-input').textContent   = fmtPlain(p.total_input_tokens);
+      $('#d-output').textContent  = fmtPlain(p.total_output_tokens);
+      $('#d-cache-r').textContent = fmtPlain(p.total_cache_read);
+      $('#d-cache-w').textContent = fmtPlain(p.total_cache_create);
+      $('#d-blocks').textContent  = fmtPlain(p.blocked_count);
+      $('#d-last').textContent    = lastActiveFor(p.name);
+      $('#dialog-backdrop').classList.remove('hidden');
+    }
-.model-pill.haiku {
-  color: var(--color-model-haiku);
-  border-color: rgba(123, 255, 199, 0.3);
-  background: rgba(123, 255, 199, 0.08);
-}
+    function closeProjectDialog() {
+      $('#dialog-backdrop').classList.add('hidden');
+    }
-.model-pill.unknown {
-  color: var(--color-muted);
-  font-style: italic;
-  border-color: rgba(237, 236, 217, 0.15);
-}
+    $('#dialog-close').addEventListener('click', closeProjectDialog);
+    $('#dialog-backdrop').addEventListener('click', (e) => {
+      if (e.target.id === 'dialog-backdrop') closeProjectDialog();
+    });
-/* Existing inline code in tables (project name, etc.) */
-code {
-  color: var(--color-heading);
-  background: var(--color-form-bg);
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.85em;
-}
+    // ----- FAQ dialog -----
+    const faqBackdrop = $('#faq-backdrop');
+    function openFaq()  { faqBackdrop.classList.remove('hidden'); }
+    function closeFaq() { faqBackdrop.classList.add('hidden'); }
+    $('#faq-btn').addEventListener('click', openFaq);
+    $('#faq-close').addEventListener('click', closeFaq);
+    faqBackdrop.addEventListener('click', (e) => {
+      if (e.target.id === 'faq-backdrop') closeFaq();
+    });
-/* ============================================================
-   Decisions (allow / block)
-   ============================================================ */
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') { closeProjectDialog(); closeFaq(); }
+    });
-.decision-block {
-  color: var(--color-block);
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 0.72rem;
-  letter-spacing: 0.06em;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-}
+    // Reflect the actual port the dashboard is served on
+    const portEl = $('#port-num');
+    if (portEl && window.location.port) portEl.textContent = window.location.port;
+    // ----- Donut chart (model usage by turn count) -----
+    function renderDonut(turns) {
+      const counts = { opus: 0, sonnet: 0, haiku: 0, unknown: 0 };
+      for (const t of turns) counts[modelFamily(t.model)] += 1;
+      const total = counts.opus + counts.sonnet + counts.haiku + counts.unknown;
+      const segs = [
+        { fam: 'opus',    label: 'Opus',    n: counts.opus,    color: 'var(--c-opus)' },
+        { fam: 'sonnet',  label: 'Sonnet',  n: counts.sonnet,  color: 'var(--c-sonnet)' },
+        { fam: 'haiku',   label: 'Haiku',   n: counts.haiku,   color: 'var(--c-haiku)' },
+        { fam: 'unknown', label: 'Other',   n: counts.unknown, color: 'var(--c-unknown)' },
+      ].filter((s) => s.n > 0);
+      const svg = $('#donut-svg');
+      svg.querySelectorAll('.donut-seg').forEach((el) => el.remove());
+      const C = 2 * Math.PI * 52; // \u2248 326.7
+      let offset = 0;
+      const ns = 'http://www.w3.org/2000/svg';
+      if (total === 0) {
+        // pleasant empty state \u2014 leave just the track
+      } else {
+        for (const s of segs) {
+          const arc = (s.n / total) * C;
+          const c = document.createElementNS(ns, 'circle');
+          c.setAttribute('cx', '70');
+          c.setAttribute('cy', '70');
+          c.setAttribute('r',  '52');
+          c.setAttribute('fill', 'none');
+          c.setAttribute('stroke', s.color);
+          c.setAttribute('stroke-width', '14');
+          c.setAttribute('stroke-dasharray', arc + ' ' + C);
+          c.setAttribute('stroke-dashoffset', String(-offset));
+          c.setAttribute('transform', 'rotate(-90 70 70)');
+          c.setAttribute('stroke-linecap', segs.length === 1 ? 'round' : 'butt');
+          c.classList.add('donut-seg');
+          svg.appendChild(c);
+          offset += arc;
+        }
+      }
-.decision-block svg {
-  width: 11px;
-  height: 11px;
-}
+      $('#donut-total').textContent = total;
-.decision-allow {
-  color: var(--color-allow);
-  opacity: 0.7;
-  text-transform: uppercase;
-  font-size: 0.72rem;
-  letter-spacing: 0.06em;
-}
+      const legend = $('#donut-legend');
+      legend.innerHTML = '';
+      const lf = document.createDocumentFragment();
+      const display = segs.length ? segs : [
+        { fam: 'opus', label: 'Opus', n: 0, color: 'var(--c-opus)' },
+        { fam: 'sonnet', label: 'Sonnet', n: 0, color: 'var(--c-sonnet)' },
+        { fam: 'haiku', label: 'Haiku', n: 0, color: 'var(--c-haiku)' },
+      ];
+      for (const s of display) {
+        const pct = total > 0 ? Math.round((s.n / total) * 100) : 0;
+        const row = document.createElement('div');
+        row.className = 'dl-row';
+        row.innerHTML =
+          '<span class="dl-dot" style="background:' + s.color + '"></span>' +
+          '<span class="dl-name">' + s.label + '</span>' +
+          '<span class="dl-pct">' + pct + '%</span>';
+        lf.appendChild(row);
+      }
+      legend.appendChild(lf);
+    }
-.empty {
-  color: var(--color-muted);
-  font-style: italic;
-  padding: 1rem;
-  background: var(--color-surface);
-  border: 1px dashed var(--color-border);
-  border-radius: 8px;
-}
+    // ----- master render -----
+    function applyData(data) {
+      const turns = data.recent_turns || [];
+      const gates = data.recent_gates || [];
+      renderSession(turns);
+      renderSavings(data.global);
+      renderCostHero(data.global);
+      renderMoat(data.global);
+      renderTurns(turns);
+      renderGateMini(gates);
+      renderDonut(turns);
+    }
-.hidden {
-  display: none;
-}
+    // ----- polling -----
+    async function tick() {
+      try {
+        const res = await fetch('/data');
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        const data = await res.json();
+        lastData = data;
+        $('#active-project').textContent = data.active?.project_root || '\u2014';
+        renderProjectLegend(data.projects || []);
+        applyData(data);
+        $('#status').textContent = 'live \xB7 ' + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        $('#dot').classList.add('live'); $('#dot').classList.remove('dead');
+      } catch (e) {
+        $('#status').textContent = 'offline';
+        $('#dot').classList.add('dead'); $('#dot').classList.remove('live');
+      }
+    }
-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.85rem 2rem;
-  background: linear-gradient(0deg, rgba(20, 0, 9, 0.7), rgba(20, 0, 9, 0.4));
-  backdrop-filter: blur(8px);
-  border-top: 1px solid var(--color-border);
-  color: var(--color-muted);
-  font-size: 0.72rem;
-  font-family: ui-monospace, monospace;
-  position: sticky;
-  bottom: 0;
-  z-index: 5;
-}
+    // ----- Viewport-clamped tooltip -----
+    const tooltipEl = document.createElement('div');
+    tooltipEl.className = 'global-tooltip';
+    document.body.appendChild(tooltipEl);
+    let activeTooltipTarget = null;
+    function positionTooltip(target) {
+      const rect = target.getBoundingClientRect();
+      const ttRect = tooltipEl.getBoundingClientRect();
+      const margin = 12;
+      let top = rect.top - ttRect.height - 10;
+      let left = rect.left + rect.width / 2 - ttRect.width / 2;
+      if (left < margin) left = margin;
+      if (left + ttRect.width > window.innerWidth - margin) {
+        left = window.innerWidth - ttRect.width - margin;
+      }
+      if (top < margin) {
+        top = rect.bottom + 10;
+      }
+      if (top + ttRect.height > window.innerHeight - margin) {
+        top = window.innerHeight - ttRect.height - margin;
+      }
+      tooltipEl.style.top  = top  + 'px';
+      tooltipEl.style.left = left + 'px';
+    }
-footer .muted {
-  color: var(--color-very-muted);
-}
+    function showTooltip(target) {
+      const text = target.getAttribute('data-tooltip');
+      if (!text) return;
+      tooltipEl.textContent = text;
+      tooltipEl.classList.add('on');
+      positionTooltip(target);
+    }
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-muted);
-  transition: background 200ms ease, box-shadow 200ms ease;
-}
+    function hideTooltip() {
+      tooltipEl.classList.remove('on');
+    }
-.dot.live {
-  background: var(--color-money);
-  box-shadow: 0 0 8px var(--color-money-darker);
-}
+    document.addEventListener('mouseover', (e) => {
+      const t = (e.target instanceof Element) ? e.target.closest('.has-tooltip') : null;
+      if (t !== activeTooltipTarget) {
+        activeTooltipTarget = t;
+        if (t) showTooltip(t);
+        else hideTooltip();
+      }
+    });
+    document.addEventListener('scroll', hideTooltip, true);
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hideTooltip(); });
-.dot.dead {
-  background: var(--color-border);
-  box-shadow: none;
-}
+    setHeroDate();
+    tick();
+    setInterval(tick, 2000);
+  </script>
+</body>
+</html>
 `;
+// src/dashboard/public/style.css
+var style_default = '/* Synthra dashboard \xB7 v0.2 \xB7 Cool Marine\n   Darkened surfaces; brand blue reserved for hero elements only.\n   Layout: top nav + hero strip + 3-column main, fits 1280\xD7720. */\n\n:root {\n  /* Core palette */\n  --ink: #04081A;\n  --navy: #0A1530;\n  --navy-2: #122549;\n  --deep-blue: #1B3A78;\n  --blue: #2C5DB8;\n  --blue-bright: #5C8FE6;\n  --sky: #9BC2EF;\n  --mist: #D7E6F7;\n  --bone: #F4F7FC;\n\n  /* Text */\n  --text: #ECF2FB;\n  --text-dim: #A9BBD6;\n  --text-mute: #6D80A0;\n\n  /* Rules / dividers */\n  --rule: rgba(155, 194, 239, .14);\n  --rule-2: rgba(155, 194, 239, .06);\n  --rule-hover: rgba(155, 194, 239, .28);\n\n  /* Surfaces (darker than v0.1.2) */\n  --surface-1: rgba(18, 37, 73, .14);\n  --surface-2: rgba(18, 37, 73, .22);\n  --surface-3: rgba(4, 8, 26, .55);\n\n  /* Signal accents (OKLCH shared chroma) */\n  --signal-cyan: oklch(78% 0.14 220);\n  --signal-amber: oklch(78% 0.14 75);\n  --signal-rose: oklch(70% 0.14 20);\n  --signal-green: oklch(75% 0.14 155);\n  --signal-violet: oklch(72% 0.14 285);\n\n  /* Model family colors */\n  --c-opus: #FF6338;\n  --c-sonnet: #FFB938;\n  --c-haiku: #7438FF;\n  --c-unknown: #12CBF5;\n\n  /* Money */\n  --money: var(--signal-green);\n\n  /* Type */\n  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;\n  --font-serif: "Instrument Serif", "Times New Roman", serif;\n  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;\n}\n\n/* ============================================================\n   Reset + base\n   ============================================================ */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\nhtml,\nbody {\n  height: 100vh;\n  overflow: hidden;\n}\n\nbody {\n  background: var(--ink);\n  color: var(--text);\n  font-family: var(--font-sans);\n  font-size: 13px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  display: grid;\n  grid-template-rows: auto auto 1fr auto;\n  position: relative;\n}\n\n/* Layered backdrop \u2014 quieter */\nbody::before,\nbody::after {\n  content: "";\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\nbody::before {\n  background-image: radial-gradient(circle, rgba(155, 194, 239, .06) 1px, transparent 1.2px);\n  background-size: 22px 22px;\n}\n\nbody::after {\n  background:\n    radial-gradient(60% 40% at 50% 105%, rgba(44, 93, 184, .16) 0%, rgba(10, 21, 48, 0) 65%),\n    radial-gradient(30% 25% at 50% 0%, rgba(92, 143, 230, .06) 0%, transparent 70%);\n}\n\nbody>* {\n  position: relative;\n  z-index: 1;\n}\n\nbutton {\n  font: inherit;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  color: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n/* ============================================================\n   Top nav\n   ============================================================ */\n.topnav {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  height: 52px;\n  padding: 0 24px;\n  border-bottom: 1px solid var(--rule);\n  background: linear-gradient(180deg, rgba(4, 8, 26, .7), rgba(4, 8, 26, .4));\n  backdrop-filter: blur(10px);\n}\n\n.brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.brand-mark {\n  width: 22px;\n  height: 22px;\n  border-radius: 7px;\n  background: radial-gradient(120% 120% at 30% 30%, #6FA6E8 0%, #2C5DB8 45%, #0A1530 100%);\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 4px 12px -6px #2C5DB8;\n}\n\n.brand-name {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--mist);\n}\n\n.brand-name em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  font-weight: 400;\n  color: var(--sky);\n  letter-spacing: 0;\n}\n\n.brand-eyebrow {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  margin-left: 6px;\n  padding-left: 10px;\n  border-left: 1px solid var(--rule);\n}\n\n.top-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  grid-column: 2;\n  justify-self: center;\n}\n\n.topnav-right {\n  grid-column: 3;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.port-badge {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  padding: 6px 10px;\n  border: 1px solid var(--rule);\n  border-radius: 999px;\n  background: rgba(4, 8, 26, .55);\n}\n\n.port-badge .mono {\n  color: var(--text-dim);\n  letter-spacing: 0.04em;\n  text-transform: none;\n}\n\n.faq-btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 1px solid var(--rule);\n  background: rgba(4, 8, 26, .55);\n  color: var(--text-dim);\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 180ms, border-color 180ms, color 180ms, transform 180ms;\n}\n\n.faq-btn:hover {\n  background: rgba(155, 194, 239, .10);\n  border-color: var(--rule-hover);\n  color: var(--mist);\n  transform: translateY(-1px);\n}\n\n.status-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  border: 1px solid var(--rule);\n  border-radius: 999px;\n  background: rgba(4, 8, 26, .55);\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  transition: border-color 240ms ease;\n}\n\n.status-pill:has(.dot.live) {\n  border-color: rgba(155, 194, 239, .45);\n  color: var(--mist);\n  animation: pill-glow 2.4s ease-in-out infinite;\n}\n\n.status-pill:has(.dot.dead) {\n  border-color: rgba(220, 90, 90, .40);\n  color: oklch(80% 0.10 20);\n}\n\n@keyframes pill-glow {\n\n  0%,\n  100% {\n    box-shadow: 0 0 14px -4px rgba(155, 194, 239, .30), inset 0 0 12px -8px rgba(155, 194, 239, .30);\n  }\n\n  50% {\n    box-shadow: 0 0 26px -2px rgba(155, 194, 239, .55), inset 0 0 18px -6px rgba(155, 194, 239, .45);\n  }\n}\n\n.dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 2px;\n  background: var(--text-mute);\n  transition: background 200ms;\n}\n\n.dot.live {\n  background: var(--signal-cyan);\n  animation: dot-pulse 1.8s ease-in-out infinite;\n}\n\n.dot.dead {\n  background: var(--signal-rose);\n  box-shadow: 0 0 0 3px rgba(220, 90, 90, .10);\n}\n\n@keyframes dot-pulse {\n\n  0%,\n  100% {\n    box-shadow:\n      0 0 0 3px rgba(155, 194, 239, .10),\n      0 0 6px rgba(155, 194, 239, .50);\n  }\n\n  50% {\n    box-shadow:\n      0 0 0 6px rgba(155, 194, 239, .05),\n      0 0 14px rgba(155, 194, 239, .90);\n  }\n}\n\n/* ============================================================\n   Hero strip\n   ============================================================ */\n.hero-strip {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  padding: 14px 24px;\n  border-bottom: 1px solid var(--rule);\n  background: linear-gradient(90deg, rgba(27, 58, 120, .10) 0%, rgba(4, 8, 26, 0) 100%);\n  position: relative;\n  overflow: hidden;\n}\n\n.hero-spacer {\n  flex: 1;\n}\n\n.date-block {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.d-day {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 38px;\n  line-height: 1;\n  letter-spacing: -0.04em;\n  color: var(--mist);\n}\n\n.d-rest {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n}\n\n.d-rest .d-mute {\n  color: var(--text-mute);\n}\n\n.active-block {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  text-align: right;\n  max-width: 360px;\n  overflow: hidden;\n}\n\n.ab-label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n.ab-value {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--mist);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 360px;\n}\n\n/* ============================================================\n   Main grid\n   ============================================================ */\n.grid-main {\n  display: grid;\n  grid-template-columns: 260px 1fr 340px;\n  gap: 16px;\n  padding: 16px 24px;\n  min-height: 0;\n  z-index: 10;\n}\n\n.col-left,\n.col-center,\n.col-right {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n}\n\n/* ============================================================\n   Panels / cards \u2014 darker\n   ============================================================ */\n.panel,\n.card {\n  position: relative;\n  border: 1px solid var(--rule);\n  border-radius: 14px;\n  background: var(--surface-1);\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  transition: border-color 180ms ease, background 180ms ease;\n}\n\n.card.has-tooltip {\n  cursor: help;\n}\n\n.card.has-tooltip:hover {\n  border-color: var(--rule-hover);\n  background: var(--surface-2);\n}\n\n.card-head {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 12px;\n}\n\n.card-eyebrow {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.card-eyebrow em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  font-weight: 400;\n  font-size: 12px;\n  color: var(--sky);\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n.card-meta {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n/* Legend panel */\n.panel {\n  padding: 14px 14px 16px;\n  gap: 14px;\n  flex-shrink: 0;\n}\n\n.p-head {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--rule-2);\n}\n\n.p-section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.p-section+.p-section {\n  padding-top: 12px;\n  border-top: 1px solid var(--rule-2);\n}\n\n.ps-head {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  margin-bottom: 4px;\n}\n\n.check {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 3px 6px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-dim);\n  letter-spacing: 0.02em;\n}\n\nbutton.check {\n  border: 0;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n}\n\n.check-clickable {\n  cursor: pointer;\n  border-radius: 6px;\n  padding: 5px 6px;\n  transition: background 140ms, color 140ms, transform 140ms;\n}\n\n.check-clickable .pf-arrow {\n  margin-left: auto;\n  color: var(--text-mute);\n  font-family: var(--font-mono);\n  font-size: 12px;\n  transition: color 140ms, transform 140ms;\n}\n\n.check-clickable:hover {\n  background: rgba(155, 194, 239, .07);\n  color: var(--mist);\n}\n\n.check-clickable:hover .pf-arrow {\n  color: var(--sky);\n  transform: translateX(2px);\n}\n\n.dot-sq {\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n  background: var(--text-mute);\n  flex-shrink: 0;\n}\n\n.dot-sq.opus {\n  background: var(--c-opus);\n}\n\n.dot-sq.sonnet {\n  background: var(--c-sonnet);\n}\n\n.dot-sq.haiku {\n  background: var(--c-haiku);\n}\n\n.dot-sq.unknown {\n  background: var(--c-unknown);\n}\n\n.proj-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  max-height: 90px;\n  overflow-y: auto;\n}\n\n.pf-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 140px;\n}\n\n/* ============================================================\n   Donut card (model usage)\n   ============================================================ */\n.donut-card {\n  flex: 1;\n  gap: 10px;\n}\n\n.donut-wrap {\n  position: relative;\n  width: 140px;\n  height: 140px;\n  margin: 4px auto 0;\n}\n\n.donut {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.donut-track {\n  fill: none;\n  stroke: rgba(155, 194, 239, .07);\n  stroke-width: 14;\n}\n\n.donut-seg {\n  transition: stroke-dashoffset 400ms ease, stroke-dasharray 400ms ease;\n}\n\n.donut-center {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.donut-total {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 26px;\n  letter-spacing: -0.02em;\n  color: var(--mist);\n  line-height: 1;\n}\n\n.donut-total-k {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  margin-top: 4px;\n}\n\n.donut-legend {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 6px;\n  padding-top: 10px;\n  border-top: 1px solid var(--rule-2);\n}\n\n.dl-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-dim);\n}\n\n.dl-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n}\n\n.dl-name {\n  color: var(--text-dim);\n}\n\n.dl-pct {\n  color: var(--mist);\n  font-weight: 500;\n}\n\n/* ============================================================\n   Center column \u2014 Metric strip (no card chrome, divider-separated)\n   ============================================================ */\n.metric-strip {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  border: 1px solid var(--rule);\n  border-radius: 14px;\n  background: var(--surface-1);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.metric-item {\n  padding: 14px 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  cursor: help;\n  border-right: 1px solid var(--rule-2);\n  transition: background 200ms ease;\n  min-width: 0;\n}\n.metric-item:last-child { border-right: 0; }\n.metric-item:hover { background: var(--surface-2); }\n\n.m-label {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n.m-value {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 26px;\n  letter-spacing: -0.025em;\n  color: var(--mist);\n  line-height: 1;\n}\n\n.m-value em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  font-weight: 400;\n  color: var(--sky);\n  letter-spacing: -0.005em;\n}\n\n/* ============================================================\n   Savings card\n   ============================================================ */\n.card.savings {\n  flex-shrink: 0;\n  gap: 12px;\n  background:\n    linear-gradient(180deg, rgba(123, 255, 199, .05) 0%, rgba(4, 8, 26, .20) 50%),\n    var(--surface-1);\n  border-color: rgba(123, 255, 199, .18);\n}\n\n.card.savings:hover {\n  border-color: rgba(123, 255, 199, .32);\n}\n\n.savings-body {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  gap: 18px;\n}\n\n.savings-figure {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.savings-money {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 34px;\n  letter-spacing: -0.035em;\n  line-height: 1;\n  color: var(--money);\n}\n\n.savings-tokens {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.10em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  margin-top: 4px;\n}\n\n.savings-bar {\n  position: relative;\n  height: 8px;\n  border-radius: 999px;\n  overflow: hidden;\n  background: var(--surface-3);\n  display: flex;\n}\n\n.savings-actual {\n  height: 100%;\n  background: rgba(215, 230, 247, .55);\n  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.savings-saved {\n  height: 100%;\n  background: var(--signal-green);\n  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);\n}\n\n.savings-legend {\n  grid-column: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  color: var(--text-mute);\n  margin-top: 8px;\n}\n\n.sl-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-row b {\n  color: var(--mist);\n  font-weight: 500;\n  letter-spacing: 0.04em;\n}\n\n.sl-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n}\n\n.sl-dot.actual {\n  background: var(--mist);\n}\n\n.sl-dot.saved {\n  background: var(--signal-green);\n}\n\n/* ============================================================\n   Recent turns table\n   ============================================================ */\n.turns-card {\n  flex: 1;\n  padding: 0;\n  overflow: hidden;\n}\n\n.turns-card .card-head {\n  padding: 14px 16px 10px;\n  border-bottom: 1px solid var(--rule-2);\n}\n\n.turns-scroll {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.turns-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.turns-table thead th {\n  position: sticky;\n  top: 0;\n  background: var(--ink);\n  padding: 9px 16px;\n  text-align: left;\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  font-weight: 500;\n  border-bottom: 1px solid var(--rule);\n  z-index: 1;\n}\n\n.turns-table thead th.num {\n  text-align: right;\n}\n\n.turns-table tbody td {\n  padding: 8px 16px;\n  border-bottom: 1px solid var(--rule-2);\n  color: var(--text-dim);\n  font-size: 12px;\n}\n\n.turns-table tbody td.num {\n  text-align: right;\n  font-family: var(--font-mono);\n}\n\n.turns-table tbody td.cost {\n  color: var(--money);\n  font-family: var(--font-mono);\n  font-weight: 500;\n}\n\n.turns-table tbody td.ts {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-mute);\n}\n\n.turns-table tbody td.proj {\n  color: var(--mist);\n}\n\n.turns-table tbody tr:hover {\n  background: rgba(155, 194, 239, .03);\n}\n\n.turns-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n\n/* Model pills */\n.model-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.04em;\n  border: 1px solid var(--rule);\n  background: rgba(4, 8, 26, .5);\n  color: var(--mist);\n}\n\n.model-pill .sq {\n  width: 6px;\n  height: 6px;\n  border-radius: 2px;\n  background: var(--text-mute);\n}\n\n.model-pill.opus {\n  color: #FF8A66;\n  border-color: rgba(255, 99, 56, .32);\n  background: rgba(255, 99, 56, .07);\n}\n\n.model-pill.opus .sq {\n  background: var(--c-opus);\n}\n\n.model-pill.sonnet {\n  color: #FFC766;\n  border-color: rgba(255, 185, 56, .32);\n  background: rgba(255, 185, 56, .07);\n}\n\n.model-pill.sonnet .sq {\n  background: var(--c-sonnet);\n}\n\n.model-pill.haiku {\n  color: #A878FF;\n  border-color: rgba(116, 56, 255, .42);\n  background: rgba(116, 56, 255, .10);\n}\n\n.model-pill.haiku .sq {\n  background: var(--c-haiku);\n}\n\n.model-pill.unknown {\n  color: #5BDDF7;\n  border-color: rgba(18, 203, 245, .32);\n  background: rgba(18, 203, 245, .07);\n  font-style: italic;\n}\n\n.model-pill.unknown .sq {\n  background: var(--c-unknown);\n}\n\n/* ============================================================\n   Right column \u2014 Cost hero\n   ============================================================ */\n.cost-hero {\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(120% 80% at 50% 110%, rgba(44, 93, 184, .18) 0%, rgba(4, 8, 26, .20) 60%),\n    var(--surface-1);\n  padding: 16px 18px 18px;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.big-money {\n  position: relative;\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 42px;\n  letter-spacing: -0.035em;\n  line-height: 1;\n  color: var(--money);\n  margin-top: 2px;\n}\n\n.big-money em {\n  font-family: inherit;\n  font-style: normal;\n  font-weight: inherit;\n  color: inherit;\n  letter-spacing: inherit;\n  opacity: 1;\n}\n\n.cost-sub {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--rule-2);\n}\n\n.cs-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  font-family: var(--font-mono);\n  font-size: 11px;\n}\n\n.cs-k {\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n.cs-v {\n  color: var(--mist);\n}\n\n/* ============================================================\n   Moat card\n   ============================================================ */\n.moat {\n  flex: 1;\n  gap: 8px;\n}\n\n.moat-value {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 34px;\n  letter-spacing: -0.03em;\n  line-height: 1;\n  color: var(--mist);\n  margin-top: 2px;\n}\n\n.moat-value em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  font-weight: 400;\n  font-size: 18px;\n  color: var(--sky);\n  letter-spacing: 0;\n  margin-left: 6px;\n}\n\n.gate-mini {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 6px;\n  padding-top: 10px;\n  border-top: 1px solid var(--rule-2);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.gate-row {\n  display: grid;\n  grid-template-columns: auto auto 1fr;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--text-dim);\n  padding: 3px 0;\n}\n\n.gate-row .g-ts {\n  color: var(--text-mute);\n  font-size: 9px;\n  min-width: 38px;\n}\n\n.gate-row .g-decision {\n  font-size: 9px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 999px;\n}\n\n.gate-row .g-decision.block {\n  color: var(--signal-rose);\n  background: rgba(220, 90, 90, .06);\n}\n\n.gate-row .g-decision.allow {\n  color: var(--text-mute);\n  background: rgba(155, 194, 239, .03);\n}\n\n.gate-row .g-q {\n  color: var(--mist);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ============================================================\n   Tooltips\n   ============================================================ */\n.has-tooltip {\n  position: relative;\n}\n\n/* Global JS-positioned tooltip \u2014 viewport-clamped */\n.global-tooltip {\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgba(18, 37, 73, .98), rgba(10, 21, 48, .98));\n  color: var(--mist);\n  border: 1px solid var(--rule-hover);\n  border-radius: 12px;\n  padding: 14px 16px;\n  font-family: var(--font-sans);\n  font-size: 15px;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  white-space: normal;\n  width: 320px;\n  max-width: calc(100vw - 24px);\n  text-align: left;\n  line-height: 1.55;\n  box-shadow: 0 16px 36px rgba(0, 0, 0, .7);\n  backdrop-filter: blur(10px);\n  z-index: 99999;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(6px);\n  transition: opacity 180ms ease, transform 180ms ease;\n}\n\n.global-tooltip.on {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* ============================================================\n   Footer\n   ============================================================ */\n.foot {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 24px;\n  border-top: 1px solid var(--rule);\n  background: linear-gradient(0deg, rgba(4, 8, 26, .7), rgba(4, 8, 26, .4));\n  backdrop-filter: blur(10px);\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n.foot em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--sky);\n  font-size: 12px;\n}\n\n.foot .mono {\n  color: var(--text-dim);\n  text-transform: none;\n  letter-spacing: 0.04em;\n}\n\n/* ============================================================\n   Empty state\n   ============================================================ */\n.empty {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  color: var(--text-mute);\n  text-align: center;\n  padding: 16px 8px;\n  font-style: italic;\n  text-transform: none;\n}\n\n/* Scrollbar styling */\n.turns-scroll::-webkit-scrollbar,\n.proj-filter::-webkit-scrollbar,\n.gate-mini::-webkit-scrollbar {\n  width: 6px;\n}\n\n.turns-scroll::-webkit-scrollbar-thumb,\n.proj-filter::-webkit-scrollbar-thumb,\n.gate-mini::-webkit-scrollbar-thumb {\n  background: var(--rule);\n  border-radius: 999px;\n}\n\n.turns-scroll::-webkit-scrollbar-track,\n.proj-filter::-webkit-scrollbar-track,\n.gate-mini::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.hidden {\n  display: none !important;\n}\n\n/* ============================================================\n   Staggered cascade on first paint (one-time, MOTION 6)\n   ============================================================ */\n@keyframes cascade-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .col-left > *,\n  .col-center > *,\n  .col-right > * {\n    opacity: 0;\n    animation: cascade-in 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    will-change: transform, opacity;\n  }\n  .col-left > *:nth-child(1)   { animation-delay:   0ms; }\n  .col-left > *:nth-child(2)   { animation-delay: 120ms; }\n  .col-center > *:nth-child(1) { animation-delay:  40ms; }\n  .col-center > *:nth-child(2) { animation-delay: 140ms; }\n  .col-center > *:nth-child(3) { animation-delay: 240ms; }\n  .col-right > *:nth-child(1)  { animation-delay:  80ms; }\n  .col-right > *:nth-child(2)  { animation-delay: 200ms; }\n\n  /* Clear will-change after animation completes */\n  .col-left > *,\n  .col-center > *,\n  .col-right > * {\n    animation-fill-mode: forwards;\n  }\n}\n\n/* ============================================================\n   Source / basis annotations\n   ============================================================ */\n.card-source {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.08em;\n  text-transform: lowercase;\n  color: var(--text-mute);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: auto;\n  padding-top: 8px;\n  border-top: 1px solid var(--rule-2);\n  width: 100%;\n}\n\n.src-badge {\n  font-family: var(--font-mono);\n  font-size: 8px;\n  font-weight: 500;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.src-badge.verified {\n  color: var(--signal-green);\n  background: rgba(123, 255, 199, .08);\n  border: 1px solid rgba(123, 255, 199, .25);\n}\n\n.src-badge.estimated,\n.src-badge.estimated.floor {\n  color: var(--signal-amber);\n  background: rgba(255, 185, 56, .10);\n  border: 1px solid rgba(255, 185, 56, .30);\n}\n\n.src-badge.priced {\n  color: var(--signal-cyan);\n  background: rgba(155, 194, 239, .08);\n  border: 1px solid rgba(155, 194, 239, .25);\n}\n\n/* Eyebrow that contains a badge */\n.card-eyebrow .src-badge {\n  margin-left: 4px;\n}\n\n/* Savings audit row \u2014 live formula reveal */\n.savings-audit {\n  margin-top: 10px;\n  padding: 10px 12px;\n  border: 1px dashed rgba(255, 185, 56, .25);\n  border-radius: 8px;\n  background: rgba(255, 185, 56, .04);\n  font-family: var(--font-mono);\n  font-size: 10.5px;\n  letter-spacing: 0.04em;\n  color: var(--text-mute);\n  text-align: center;\n}\n\n.savings-audit b {\n  color: var(--text-dim);\n  font-weight: 500;\n}\n\n.savings-audit .audit-result {\n  color: var(--money);\n}\n\n/* ============================================================\n   FAQ dialog\n   ============================================================ */\n.dialog.dialog-faq {\n  max-width: min(80vw, 1100px);\n  width: 100%;\n  max-height: 86vh;\n  display: flex;\n  flex-direction: column;\n  padding: 28px 32px 24px;\n  gap: 6px;\n}\n\n.dialog.dialog-faq .dialog-path {\n  margin-bottom: 4px;\n  word-break: normal;\n  overflow-wrap: anywhere;\n}\n\n.faq-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  margin-top: 18px;\n  padding-right: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.faq-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.faq-content::-webkit-scrollbar-thumb {\n  background: var(--rule);\n  border-radius: 999px;\n}\n\n.faq-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.faq-content details {\n  border: 1px solid var(--rule);\n  border-radius: 12px;\n  background: var(--surface-1);\n  overflow: hidden;\n  transition: background 180ms, border-color 180ms;\n  flex-shrink: 0;\n}\n\n.faq-content details:hover {\n  border-color: rgba(155, 194, 239, .22);\n}\n\n.faq-content details[open] {\n  background: var(--surface-2);\n  border-color: var(--rule-hover);\n}\n\n.faq-content summary {\n  cursor: pointer;\n  padding: 14px 20px;\n  font-family: var(--font-sans);\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mist);\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  user-select: none;\n}\n\n.faq-content summary::-webkit-details-marker {\n  display: none;\n}\n\n.faq-content summary::before {\n  content: "\u203A";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--text-mute);\n  font-family: var(--font-mono);\n  font-size: 14px;\n  transition: transform 220ms ease, color 220ms ease;\n}\n\n.faq-content details[open] summary::before {\n  transform: rotate(90deg);\n  color: var(--sky);\n}\n\n.faq-content .faq-body {\n  padding: 0 22px 20px 46px;\n  color: var(--text-dim);\n  font-size: 13.5px;\n  line-height: 1.7;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.faq-content .faq-body p {\n  margin: 0;\n}\n\n.faq-content .faq-body ul {\n  margin: 0;\n  padding-left: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.faq-content .faq-body li {\n  margin: 0;\n}\n\n.faq-content .faq-body b,\n.faq-content .faq-body strong {\n  color: var(--mist);\n  font-weight: 500;\n}\n\n.faq-content .faq-body code {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  background: rgba(155, 194, 239, .08);\n  padding: 2px 6px;\n  border-radius: 4px;\n  color: var(--mist);\n  border: 1px solid rgba(155, 194, 239, .12);\n  word-break: break-word;\n}\n\n.faq-content .faq-body a {\n  color: var(--blue-bright);\n  text-decoration: underline;\n  text-decoration-color: rgba(92, 143, 230, .40);\n  text-underline-offset: 3px;\n  transition: color 140ms, text-decoration-color 140ms;\n}\n\n.faq-content .faq-body a:hover {\n  color: var(--mist);\n  text-decoration-color: var(--sky);\n}\n\n.faq-content .faq-body table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 4px 0;\n  font-size: 13px;\n  table-layout: fixed;\n}\n\n.faq-content .faq-body thead td {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.10em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--rule);\n  font-weight: 500;\n}\n\n.faq-content .faq-body td {\n  padding: 9px 10px;\n  border-bottom: 1px solid var(--rule-2);\n  vertical-align: top;\n  word-break: break-word;\n}\n\n.faq-content .faq-body tr:last-child td {\n  border-bottom: 0;\n}\n\n.faq-content .faq-body td:first-child {\n  color: var(--text-dim);\n  width: 38%;\n}\n\n.faq-content .faq-body td:first-child code {\n  font-size: 11.5px;\n}\n\n.faq-content .faq-body .formula-box {\n  font-family: var(--font-mono);\n  font-size: 12.5px;\n  background: rgba(255, 185, 56, .06);\n  padding: 12px 14px;\n  border-radius: 8px;\n  border: 1px dashed rgba(255, 185, 56, .30);\n  color: var(--mist);\n  letter-spacing: 0.02em;\n}\n\n.faq-content .faq-body .link-list {\n  list-style: none;\n  padding-left: 0;\n}\n\n.faq-content .faq-body .link-list li {\n  padding-left: 18px;\n  position: relative;\n}\n\n.faq-content .faq-body .link-list li::before {\n  content: "\u203A";\n  position: absolute;\n  left: 0;\n  color: var(--sky);\n  font-family: var(--font-mono);\n}\n\n.faq-content .faq-body .warning {\n  margin-top: 14px;\n  padding: 12px 14px;\n  background: rgba(255, 185, 56, .06);\n  border: 1px solid rgba(255, 185, 56, .25);\n  border-left: 3px solid var(--signal-amber);\n  border-radius: 8px;\n  font-size: 12.5px;\n  color: var(--text-dim);\n}\n\n.faq-content .faq-body .warning .icon {\n  color: var(--signal-amber);\n  margin-right: 8px;\n  font-weight: 500;\n}\n\n/* ============================================================\n   Project dialog\n   ============================================================ */\n.dialog-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(4, 8, 26, .78);\n  backdrop-filter: blur(10px);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  animation: dlg-fade 180ms ease;\n}\n\n@keyframes dlg-fade {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n.dialog {\n  position: relative;\n  width: 100%;\n  max-width: 520px;\n  background:\n    radial-gradient(120% 80% at 50% 0%, rgba(44, 93, 184, .22) 0%, rgba(4, 8, 26, .20) 60%),\n    linear-gradient(180deg, rgba(18, 37, 73, .88) 0%, rgba(10, 21, 48, .96) 100%);\n  border: 1px solid var(--rule-hover);\n  border-radius: 18px;\n  padding: 28px 32px 32px;\n  box-shadow:\n    0 30px 80px -20px rgba(0, 0, 0, .7),\n    inset 0 1px 0 rgba(255, 255, 255, .04);\n  animation: dlg-rise 220ms cubic-bezier(.2, .7, .2, 1);\n}\n\n@keyframes dlg-rise {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.dialog-close {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  color: var(--text-mute);\n  font-size: 22px;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 180ms, color 180ms;\n}\n\n.dialog-close:hover {\n  background: rgba(155, 194, 239, .10);\n  color: var(--mist);\n}\n\n.dialog-eyebrow {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n  margin-bottom: 10px;\n}\n\n.dialog-eyebrow em {\n  font-family: var(--font-serif);\n  font-style: italic;\n  font-weight: 400;\n  font-size: 12px;\n  color: var(--sky);\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n.dialog-name {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 28px;\n  letter-spacing: -0.025em;\n  color: var(--mist);\n  line-height: 1.1;\n}\n\n.dialog-path {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-mute);\n  margin-top: 6px;\n  word-break: break-all;\n}\n\n.dialog-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 18px 24px;\n  margin-top: 22px;\n  padding-top: 20px;\n  border-top: 1px solid var(--rule-2);\n}\n\n.dg-cell {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.dg-k {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--text-mute);\n}\n\n.dg-v {\n  font-family: var(--font-sans);\n  font-weight: 500;\n  font-size: 22px;\n  letter-spacing: -0.02em;\n  color: var(--mist);\n  line-height: 1;\n}\n\n.dg-v.money {\n  color: var(--money);\n}\n\n.dg-v-sm {\n  font-size: 13px;\n  font-family: var(--font-mono);\n  font-weight: 400;\n  color: var(--text-dim);\n  letter-spacing: 0;\n}';
 // src/dashboard/server.ts
 var FALLBACK_RANGE = 9;
 async function startDashboard(paths, preferredPort = 8901) {