@codewithjuber/forgekit 0.8.0

package/src/cost_report.js

@@ -0,0 +1,271 @@
+// forge cost report — the P8 measured-stage report (docs/plans/substrate-v2/05-cost-model.md).
+// The cost model is multiplicative: C = C₀ · Π(1 − fᵢ) over independent stages. The discipline
+// this module enforces is the paper's (§4, C6): a number is an assumption until measured. Every
+// factor here is ARITHMETIC over .forge/metrics.jsonl lines that stages actually emitted; a
+// stage with no events reports measured:false and value:null — it is never guessed, defaulted,
+// or backfilled from a target. The ~90 % figure in the plan stays a TARGET everywhere in this
+// module's output; the only measured external figure (62 % routing, paper §9) is cited as
+// context, clearly labeled as not-local.
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { read, record } from "./metrics.js";
+import { MODELS } from "./model_tiers.js";
+
+/** Saving weight per cache-hit tier — must stay consistent with reuse.js savedEstimate
+ *  (exact = full regeneration avoided; near/adapt still spend adaptation tokens). */
+export const CACHE_TIER_SAVINGS = { hit_exact: 1.0, hit_near: 0.85, hit_adapt: 0.5 };
+
+// The route factor's baseline is "always-premium": the tier an unrouted agent defaults to.
+// That is the complex tier (opus), NOT the extreme tier — pricing the baseline at the
+// rarely-justified top model would flatter the savings, and honesty is the point.
+const ROUTE_BASELINE_KEY = "opus";
+
+/** Resolve a metrics `tier` field to a pricing row — accepts the model key ("haiku")
+ *  or the tier name ("simple"), since both appear in route results. */
+const modelForTier = (tier) =>
+  MODELS[tier] ?? Object.values(MODELS).find((m) => m.tier === tier) ?? null;
+
+const tokenCost = (m, tokensIn, tokensOut) => tokensIn * m.inCost + tokensOut * m.outCost;
+
+const unmeasured = () => ({ measured: false, value: null, events: 0 });
+
+/**
+ * Per-stage measured factors from .forge/metrics.jsonl. Each factor is
+ * {measured:boolean, value:number|null, events:number} — `events` counts only the lines
+ * usable for that stage's arithmetic, and a stage with none reports measured:false /
+ * value:null. NEVER invents a number.
+ *
+ * - gate: fraction of "gate" events with outcome "halt" — requests where spend was avoided
+ *   entirely. (This measures h_gate; the plan's g ≈ per-halt spend share is taken as 1 —
+ *   i.e. a halted task is assumed to have cost an average task, the simplest honest reading
+ *   until the paired harness prices halts individually.)
+ * - cache: hit rate weighted by tier savings (exact 1.0 / near 0.85 / adapt 0.5); a miss
+ *   contributes 0 to the numerator but counts in the denominator.
+ * - route: 1 − (actual token cost / always-premium cost) over "route" events that carry a
+ *   resolvable tier AND real token counts — events without tokens can't be priced and are
+ *   excluded rather than estimated.
+ * - context: fraction of would-have-been input tokens avoided, Σsaved / (Σsaved + Σactual),
+ *   over "context" events carrying both savedEstimate and tokensIn.
+ * @param {string} root
+ */
+export function stageFactors(root) {
+  const gateEvents = read(root, { stage: "gate" });
+  const gate = gateEvents.length
+    ? {
+        measured: true,
+        value: gateEvents.filter((e) => e.outcome === "halt").length / gateEvents.length,
+        events: gateEvents.length,
+      }
+    : unmeasured();
+
+  const cacheEvents = read(root, { stage: "cache" });
+  const cache = cacheEvents.length
+    ? {
+        measured: true,
+        value:
+          cacheEvents.reduce((s, e) => s + (CACHE_TIER_SAVINGS[e.outcome] ?? 0), 0) /
+          cacheEvents.length,
+        events: cacheEvents.length,
+      }
+    : unmeasured();
+
+  const baseline = MODELS[ROUTE_BASELINE_KEY];
+  const routeEvents = read(root, { stage: "route" }).filter(
+    (e) =>
+      modelForTier(e.tier) &&
+      Number.isFinite(e.tokensIn) &&
+      Number.isFinite(e.tokensOut) &&
+      e.tokensIn + e.tokensOut > 0,
+  );
+  const route = routeEvents.length
+    ? {
+        measured: true,
+        value:
+          1 -
+          routeEvents.reduce(
+            (s, e) => s + tokenCost(modelForTier(e.tier), e.tokensIn, e.tokensOut),
+            0,
+          ) /
+            routeEvents.reduce((s, e) => s + tokenCost(baseline, e.tokensIn, e.tokensOut), 0),
+        events: routeEvents.length,
+      }
+    : unmeasured();
+
+  const ctxEvents = read(root, { stage: "context" }).filter(
+    (e) => Number.isFinite(e.savedEstimate) && Number.isFinite(e.tokensIn),
+  );
+  const ctxSaved = ctxEvents.reduce((s, e) => s + e.savedEstimate, 0);
+  const ctxActual = ctxEvents.reduce((s, e) => s + e.tokensIn, 0);
+  const context =
+    ctxEvents.length && ctxSaved + ctxActual > 0
+      ? { measured: true, value: ctxSaved / (ctxSaved + ctxActual), events: ctxEvents.length }
+      : unmeasured();
+
+  return { gate, cache, route, context };
+}
+
+/**
+ * The multiplicative composition C = C₀ · Π(1 − fᵢ) over ONLY the measured factors.
+ * Honest framing: because unmeasured stages contribute exactly nothing (factor 0, not a
+ * target), the result is a LOWER BOUND built from measured stages only — it can only grow
+ * as more stages start emitting metrics, and it is never the plan's ~90 % target restated.
+ * @param {ReturnType<typeof stageFactors>} factors
+ * @returns {{measuredReduction:number, stagesIncluded:string[], stagesMissing:string[]}}
+ */
+export function composedReduction(factors) {
+  const stagesIncluded = [];
+  const stagesMissing = [];
+  let remaining = 1;
+  for (const [name, f] of Object.entries(factors)) {
+    if (f.measured && typeof f.value === "number") {
+      stagesIncluded.push(name);
+      remaining *= 1 - f.value;
+    } else stagesMissing.push(name);
+  }
+  return { measuredReduction: 1 - remaining, stagesIncluded, stagesMissing };
+}
+
+/**
+ * Assemble the full report: factors, composition, raw totals, and a caveat per unmeasured
+ * stage plus the workload-dependence caveat — the caveats ship WITH the numbers so no
+ * consumer can quote the reduction without its conditions.
+ * @param {string} root
+ */
+export function report(root) {
+  const factors = stageFactors(root);
+  const composed = composedReduction(factors);
+  const all = read(root);
+  const totals = {
+    events: all.length,
+    savedEstimateTokens: all.reduce(
+      (s, e) => s + (Number.isFinite(e.savedEstimate) ? e.savedEstimate : 0),
+      0,
+    ),
+  };
+  const caveats = composed.stagesMissing.map(
+    (s) =>
+      `stage "${s}" has no recorded events — unmeasured, contributes nothing to the composition`,
+  );
+  caveats.push(
+    "stage rates are workload-dependent: these factors describe this repo's recorded traffic, not a general claim (05-cost-model.md §2)",
+    "the composed figure is a lower bound from measured stages only; savings are not correctness-guarded until the P8 paired harness runs (05-cost-model.md §3)",
+  );
+  return { factors, composed, totals, caveats };
+}
+
+const pct = (v) => `${(v * 100).toFixed(1)}%`;
+
+/**
+ * Human rendering. Register matters as much as arithmetic: measured numbers print as
+ * measurements, the paper's 62 % routing figure prints as CONTEXT (a citation, not a local
+ * result), and the ~90 % figure appears only with the word "target" in front of it — this
+ * report never claims it as achieved.
+ * @param {ReturnType<typeof report>} r
+ */
+export function renderCostReport(r) {
+  const lines = ["Forge cost — measured stage factors (.forge/metrics.jsonl)", ""];
+  lines.push(`  ${"stage".padEnd(9)} ${"factor".padEnd(10)} events`);
+  for (const [name, f] of Object.entries(r.factors)) {
+    const shown = f.measured && typeof f.value === "number" ? pct(f.value) : "no data";
+    lines.push(`  ${name.padEnd(9)} ${shown.padEnd(10)} ${f.events}`);
+  }
+  lines.push("");
+  lines.push(
+    r.composed.stagesIncluded.length
+      ? `  composed measured reduction: ${pct(r.composed.measuredReduction)} (from: ${r.composed.stagesIncluded.join(", ")}) — lower bound, measured stages only`
+      : "  composed measured reduction: 0.0% — no stage has recorded events yet",
+  );
+  lines.push(
+    `  totals: ${r.totals.events} metric event(s) · ~${r.totals.savedEstimateTokens} tokens saved (stage self-estimates)`,
+  );
+  lines.push(
+    "",
+    "  context (not a local measurement): the paper measured a 62% routing saving on live tokens (paper §9)",
+    "  target (unmet until measured): the plan's composed target is ~90% (docs/plans/substrate-v2/05-cost-model.md)",
+  );
+  lines.push("", "  caveats:");
+  for (const c of r.caveats) lines.push(`    - ${c}`);
+  return lines.join("\n");
+}
+
+// ---------------------------------------------------------------------------
+// Emit-side helpers — one obvious call per stage, so future wiring (context assembly,
+// real route execution) adds a single line instead of re-deriving the schema. Thin
+// wrappers over metrics.record, which is already best-effort (never throws).
+// ---------------------------------------------------------------------------
+
+/** Record one assumption-gate decision: halted = spend avoided.
+ *  @param {string} root
+ *  @param {{halted?: boolean, ref?: string}} [opts] */
+export function recordGate(root, { halted, ref } = {}) {
+  return record(root, { stage: "gate", outcome: halted ? "halt" : "pass", ref });
+}
+
+/** Record one routed generation with its tier and real token counts.
+ *  @param {string} root
+ *  @param {{tier?: string, tokensIn?: number, tokensOut?: number, ref?: string}} [opts] */
+export function recordRoute(root, { tier, tokensIn, tokensOut, ref } = {}) {
+  return record(root, { stage: "route", tier, tokensIn, tokensOut, ref });
+}
+
+/**
+ * Fallback spend estimation from Claude's native JSONL session logs when ccusage
+ * is unavailable. Scans ~/.claude/projects/ for session files and computes cost
+ * from token counts x model_tiers pricing. Best-effort, never throws.
+ */
+export function estimateSpendFromLogs() {
+  try {
+    const projectsDir = join(homedir(), ".claude", "projects");
+    if (!existsSync(projectsDir)) return null;
+    const pricingPerM = {};
+    for (const [, m] of Object.entries(MODELS)) {
+      pricingPerM[m.id] = { inCost: m.inCost, outCost: m.outCost };
+    }
+    const byModel = {};
+    let sessions = 0;
+    for (const project of readdirSync(projectsDir)) {
+      const pDir = join(projectsDir, project);
+      let files;
+      try {
+        files = readdirSync(pDir);
+      } catch {
+        continue;
+      }
+      for (const f of files) {
+        if (!f.endsWith(".jsonl")) continue;
+        sessions++;
+        try {
+          const lines = readFileSync(join(pDir, f), "utf8").split("\n");
+          for (const line of lines) {
+            if (!line.includes('"usage"')) continue;
+            try {
+              const entry = JSON.parse(line);
+              const usage = entry.usage || entry.message?.usage;
+              const model = entry.model || entry.message?.model || "";
+              if (!usage) continue;
+              const inTok = usage.input_tokens || 0;
+              const outTok = usage.output_tokens || 0;
+              if (!byModel[model]) byModel[model] = { inTokens: 0, outTokens: 0 };
+              byModel[model].inTokens += inTok;
+              byModel[model].outTokens += outTok;
+            } catch {}
+          }
+        } catch {}
+      }
+    }
+    let totalCost = 0;
+    const modelBreakdown = [];
+    for (const [model, usage] of Object.entries(byModel)) {
+      const pricing = pricingPerM[model] || { inCost: 3, outCost: 15 };
+      const cost =
+        (usage.inTokens * pricing.inCost + usage.outTokens * pricing.outCost) / 1_000_000;
+      totalCost += cost;
+      modelBreakdown.push({ model, cost, inTokens: usage.inTokens, outTokens: usage.outTokens });
+    }
+    modelBreakdown.sort((a, b) => b.cost - a.cost);
+    return { totalCost, sessions, byModel: modelBreakdown };
+  } catch {
+    return null;
+  }
+}

package/src/dash.html

@@ -0,0 +1,396 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>forge dash</title>
+<style>
+  /* Taste discipline (07-ui-quality-gate.md): ONE accent (forge ember, the brand's
+     own — not framework blue), a 4px-based spacing scale, exactly two radius levels,
+     system sans + one mono. Palette matches the landing page = close to home. */
+  :root {
+    --bg: #171310;
+    --panel: #201a15;
+    --panel-2: #272019;
+    --line: #372c22;
+    --fg: #f2ede7;
+    --muted: #a99e90;
+    --faint: #7d7263;
+    --ember: #f26430;
+    --ember-wash: rgba(242, 100, 48, 0.14);
+    --r-s: 4px;   /* radius level 1: chips, bars, inputs */
+    --r-m: 10px;  /* radius level 2: panels */
+    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
+    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--fg);
+    font: 13px/1.55 var(--sans);
+    -webkit-font-smoothing: antialiased;
+  }
+  .mono { font-family: var(--mono); }
+  .muted { color: var(--muted); }
+  .faint { color: var(--faint); }
+
+  header {
+    position: sticky; top: 0; z-index: 5;
+    display: flex; align-items: center; gap: var(--s3);
+    padding: var(--s3) var(--s6);
+    background: rgba(23, 19, 16, 0.85); backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--line);
+  }
+  .spark {
+    width: 8px; height: 8px; border-radius: var(--r-s);
+    background: var(--ember);
+  }
+  .brand { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
+  .brand b { color: var(--ember); font-weight: 600; }
+  #hdr-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
+  button {
+    font: 12px var(--mono); color: var(--fg); cursor: pointer;
+    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s);
+    padding: var(--s1) var(--s3);
+  }
+  button:hover { border-color: var(--ember); color: var(--ember); }
+
+  main {
+    max-width: 1180px; margin: 0 auto; padding: var(--s6);
+    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
+  }
+  .panel {
+    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m);
+    padding: var(--s4); min-width: 0;
+  }
+  .panel.wide { grid-column: 1 / -1; }
+  @media (max-width: 880px) { main { grid-template-columns: 1fr; } }
+  .panel h2 {
+    margin: 0 0 var(--s3); font: 600 11px var(--mono);
+    text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
+  }
+  .panel h2 .cmd { text-transform: none; letter-spacing: 0; color: var(--faint); float: right; }
+  h3 {
+    margin: var(--s6) 0 var(--s2); font: 600 11px var(--mono);
+    letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase;
+  }
+  .empty { color: var(--faint); font-family: var(--mono); font-size: 12px; padding: var(--s2) 0; }
+
+  /* stat tiles */
+  .stats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
+  .stat {
+    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s);
+    padding: var(--s2) var(--s3); min-width: 84px;
+  }
+  .stat .n { font: 600 18px var(--mono); display: block; }
+  .stat .n.ember { color: var(--ember); }
+  .stat .l { font-size: 11px; color: var(--faint); }
+
+  /* tables */
+  table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  th {
+    text-align: left; font: 600 10px var(--mono); text-transform: uppercase;
+    letter-spacing: 0.1em; color: var(--faint);
+    padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line);
+  }
+  td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
+  tr:last-child td { border-bottom: 0; }
+  tr.tomb td { opacity: 0.45; }
+  tr.tomb .text { text-decoration: line-through; }
+  td.num { font-family: var(--mono); text-align: right; }
+  .tag {
+    font: 11px var(--mono); color: var(--muted);
+    background: var(--panel-2); border: 1px solid var(--line);
+    border-radius: var(--r-s); padding: 0 var(--s1);
+    display: inline-block; white-space: nowrap;
+  }
+  .tag.contested { color: var(--ember); border-color: var(--ember); background: var(--ember-wash); }
+
+  /* val / trust / confidence bars — width IS the number; label repeats it */
+  .bar {
+    display: inline-block; width: 64px; height: 6px; vertical-align: middle;
+    background: var(--panel-2); border-radius: var(--r-s); overflow: hidden; margin-right: var(--s2);
+  }
+  .bar i { display: block; height: 100%; background: var(--ember); border-radius: var(--r-s); }
+  .bar.dim i { background: var(--faint); }
+  .barnum { font-family: var(--mono); font-size: 11px; }
+
+  /* the provenance affordance: every number traces to a blame command */
+  .blame {
+    font: 11px var(--mono); color: var(--faint); cursor: copy; white-space: nowrap;
+  }
+  .blame:hover { color: var(--ember); }
+  .blame.copied { color: var(--ember); }
+
+  /* the two writes (spec §2): small per-row actions, append-only on the server */
+  .act {
+    font: 11px var(--mono); color: var(--faint); cursor: pointer;
+    border: 1px solid var(--line); border-radius: var(--r-s);
+    padding: 0 var(--s1); white-space: nowrap; display: inline-block;
+  }
+  .act:hover { color: var(--ember); border-color: var(--ember); background: var(--ember-wash); }
+  td.acts { white-space: nowrap; }
+
+  select, input[type="text"] {
+    font: 12px var(--mono); color: var(--fg);
+    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s);
+    padding: var(--s1) var(--s2);
+  }
+  input[type="text"]:focus, select:focus { outline: none; border-color: var(--ember); }
+  .toolbar { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
+  .toolbar .grow { flex: 1; }
+
+  .log { font: 11px/1.7 var(--mono); color: var(--muted); margin: 0; padding: 0; list-style: none; }
+  .log .st { color: var(--fg); }
+  .log .plus { color: var(--ember); }
+  footer {
+    max-width: 1180px; margin: 0 auto; padding: 0 var(--s6) var(--s8);
+    font: 11px var(--mono); color: var(--faint);
+  }
+</style>
+</head>
+<body>
+  <header>
+    <span class="spark"></span>
+    <span class="brand"><b>forge</b> dash <span id="hdr-repo" class="muted"></span></span>
+    <span id="hdr-meta"></span>
+    <button id="refresh" type="button">refresh</button>
+  </header>
+
+  <main>
+    <section class="panel wide" id="ledger-panel">
+      <h2>Ledger — proof-carrying memory <span class="cmd">.forge/ledger/</span></h2>
+      <div class="stats" id="ledger-stats"></div>
+      <div class="toolbar">
+        <label class="faint mono" for="kind-filter">kind</label>
+        <select id="kind-filter"><option value="">all</option></select>
+        <span class="grow"></span>
+        <span id="claim-count" class="mono faint"></span>
+      </div>
+      <div id="claims"></div>
+      <h3>Contested — val ∈ [0.40, 0.60] with ≥1 contradiction</h3>
+      <div id="contested"></div>
+      <h3>Author trust — earned from oracle outcomes, floored at 0.50</h3>
+      <div id="trust"></div>
+    </section>
+
+    <section class="panel" id="cost-panel">
+      <h2>Cost / Cache — measured, not asserted <span class="cmd">.forge/metrics.jsonl</span></h2>
+      <div class="stats" id="cost-stats"></div>
+      <div id="spend-section"></div>
+      <div id="stages"></div>
+      <h3>Recent events</h3>
+      <ul class="log" id="recent"></ul>
+    </section>
+
+    <section class="panel" id="impact-panel">
+      <h2>Impact — blast radius <span class="cmd">.forge/atlas.json</span></h2>
+      <div class="toolbar">
+        <input type="text" id="impact-target" placeholder="symbol or file — e.g. dashData" style="flex:1" />
+        <button id="impact-go" type="button">trace</button>
+      </div>
+      <div id="impact-out" class="empty">pick a symbol to see what a change would touch</div>
+    </section>
+  </main>
+
+  <footer>lens on .forge/ — every number traces to <span class="mono">forge ledger blame &lt;id&gt;</span>. the only writes are ratify/retract (append-only; CLI twins: <span class="mono">forge ledger ratify|retract</span>).</footer>
+
+<script>
+"use strict";
+const $ = (id) => document.getElementById(id);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) =>
+  ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+const bar = (v, { dim = false } = {}) =>
+  '<span class="bar' + (dim ? " dim" : "") + '"><i style="width:' +
+  Math.round(Math.max(0, Math.min(1, v)) * 100) + '%"></i></span><span class="barnum">' +
+  v.toFixed(2) + "</span>";
+
+// Every claim row carries its provenance affordance — click to copy the exact command.
+const blameCell = (id8) =>
+  '<td><span class="blame" data-id8="' + esc(id8) + '">forge ledger blame ' + esc(id8) + "</span></td>";
+
+// The two writes (spec §2), per live row. Ratify = human-only hikma promotion (the
+// server stamps YOUR git identity as author); retract = tombstone with a reason.
+// A tombstoned row gets neither — retraction is already the terminal append.
+const actionsCell = (c) => c.tombstoned ? "<td></td>" :
+  '<td class="acts"><span class="act" data-act="ratify" data-id8="' + esc(c.id8) +
+  '" title="promote to hikma — mints a decision claim with you as author">ratify ▸</span> ' +
+  '<span class="act" data-act="retract" data-id8="' + esc(c.id8) +
+  '" title="tombstone this claim with a reason (append-only)">retract ✕</span></td>';
+
+const claimRows = (claims) => claims.map((c) =>
+  '<tr class="' + (c.tombstoned ? "tomb" : "") + '">' +
+  '<td class="mono faint">' + esc(c.id8) + "</td>" +
+  '<td><span class="tag">' + esc(c.kind) + "</span>" +
+  (c.tombstoned ? ' <span class="tag">retracted</span>' : "") + "</td>" +
+  "<td>" + bar(c.val, { dim: c.val < 0.35 }) + "</td>" +
+  '<td class="num">' + c.evidenceCount + "</td>" +
+  '<td class="muted">' + esc(c.author || "—") + "</td>" +
+  '<td class="text">' + esc(c.text) + "</td>" +
+  blameCell(c.id8) + actionsCell(c) + "</tr>").join("");
+
+const claimTable = (claims) =>
+  "<table><thead><tr><th>id</th><th>kind</th><th>val</th><th>evid</th><th>author</th>" +
+  "<th>claim</th><th>provenance</th><th>actions</th></tr></thead><tbody>" + claimRows(claims) + "</tbody></table>";
+
+let DATA = null;
+
+function renderLedger(d) {
+  const L = d.ledger;
+  $("hdr-repo").textContent = "· " + d.repo;
+  $("hdr-meta").textContent =
+    L.stats.total + " claims · " + L.stats.tombstoned + " tombstoned · day " + d.nowDay;
+  $("ledger-stats").innerHTML =
+    '<span class="stat"><span class="n">' + L.stats.total + '</span><span class="l">claims</span></span>' +
+    '<span class="stat"><span class="n ember">' + L.stats.val.trusted + '</span><span class="l">trusted ≥0.65</span></span>' +
+    '<span class="stat"><span class="n">' + L.stats.val.uncertain + '</span><span class="l">uncertain</span></span>' +
+    '<span class="stat"><span class="n">' + L.stats.val.dormant + '</span><span class="l">dormant &lt;0.35</span></span>' +
+    Object.entries(L.stats.byKind).map(([k, n]) =>
+      '<span class="stat"><span class="n">' + n + '</span><span class="l">' + esc(k) + "</span></span>").join("");
+
+  const kinds = Object.keys(L.stats.byKind).sort();
+  const sel = $("kind-filter");
+  const keep = sel.value;
+  sel.innerHTML = '<option value="">all</option>' +
+    kinds.map((k) => '<option value="' + esc(k) + '">' + esc(k) + "</option>").join("");
+  if (kinds.includes(keep)) sel.value = keep;
+
+  const shown = L.claims.filter((c) => !sel.value || c.kind === sel.value);
+  $("claim-count").textContent = shown.length + " of " + L.stats.total + " shown";
+  $("claims").innerHTML = shown.length ? claimTable(shown)
+    : '<div class="empty">no claims yet — mint one: forge remember "&lt;name&gt;" "&lt;fact&gt;"</div>';
+
+  $("contested").innerHTML = L.contested.length
+    ? '<span class="tag contested">' + L.contested.length + " contested</span>" + claimTable(L.contested)
+    : '<div class="empty">none — no live claim is both uncertain and contradicted</div>';
+
+  const trust = Object.entries(L.trust).sort((a, b) => b[1] - a[1]);
+  $("trust").innerHTML = trust.length
+    ? "<table><tbody>" + trust.map(([a, u]) =>
+        '<tr><td class="muted">' + esc(a) + "</td><td>" + bar(u) + "</td></tr>").join("") +
+      "</tbody></table>"
+    : '<div class="empty">no authored claims yet</div>';
+}
+
+function renderCost(d) {
+  const stages = Object.entries(d.metrics.stages);
+  const saved = stages.reduce((n, [, s]) => n + (s.savedEstimate || 0), 0);
+  const events = stages.reduce((n, [, s]) => n + (s.events || 0), 0);
+  const spend = d.spend;
+  $("cost-stats").innerHTML =
+    (spend && spend.totalCost > 0
+      ? '<span class="stat"><span class="n ember">$' + spend.totalCost.toFixed(2) + '</span><span class="l">real spend</span></span>' +
+        '<span class="stat"><span class="n">' + spend.sessions + '</span><span class="l">sessions</span></span>'
+      : '') +
+    '<span class="stat"><span class="n' + (spend && spend.totalCost > 0 ? '' : ' ember') + '">' + saved.toLocaleString() + '</span><span class="l">est. tokens saved</span></span>' +
+    '<span class="stat"><span class="n">' + events + '</span><span class="l">stage events</span></span>';
+  if (spend && spend.byModel && spend.byModel.length) {
+    $("spend-section").innerHTML = '<h3>Spend by model</h3>' +
+      '<table><thead><tr><th>model</th><th>cost</th><th>in tok</th><th>out tok</th></tr></thead><tbody>' +
+      spend.byModel.map((m) => '<tr><td class="mono">' + esc(m.model) + '</td><td class="num">$' + m.cost.toFixed(4) +
+          '</td><td class="num">' + (m.inTokens || 0).toLocaleString() +
+          '</td><td class="num">' + (m.outTokens || 0).toLocaleString() + '</td></tr>').join('') + '</tbody></table>';
+  } else {
+    $("spend-section").innerHTML = '';
+  }
+  $("stages").innerHTML = stages.length
+    ? "<table><thead><tr><th>stage</th><th>events</th><th>outcomes</th><th>saved</th></tr></thead><tbody>" +
+      stages.map(([name, s]) =>
+        '<tr><td class="mono">' + esc(name) + '</td><td class="num">' + s.events + "</td><td>" +
+        Object.entries(s.byOutcome || {}).map(([o, n]) =>
+          '<span class="tag">' + esc(o) + " " + n + "</span>").join(" ") +
+        '</td><td class="num">' + (s.savedEstimate || 0).toLocaleString() + "</td></tr>").join("") +
+      "</tbody></table>"
+    : '<div class="empty">no metrics yet — stages append to .forge/metrics.jsonl as you work</div>';
+  $("recent").innerHTML = d.metrics.recent.slice().reverse().map((e) =>
+    "<li>" + new Date(e.t).toLocaleTimeString() + ' <span class="st">' + esc(e.stage) + "</span> " +
+    esc(e.outcome || "") + (e.savedEstimate ? ' <span class="plus">+' + e.savedEstimate + "</span>" : "") +
+    "</li>").join("") || '<li class="empty">—</li>';
+}
+
+async function runImpact() {
+  const target = $("impact-target").value.trim();
+  const out = $("impact-out");
+  if (!target) return;
+  if (DATA && !DATA.atlas.built) {
+    out.innerHTML = '<div class="empty">no atlas — run: forge atlas build</div>';
+    return;
+  }
+  out.innerHTML = '<div class="empty">tracing…</div>';
+  const res = await fetch("/api/impact?target=" + encodeURIComponent(target));
+  const r = await res.json();
+  if (!res.ok) { out.innerHTML = '<div class="empty">' + esc(r.error || "error") + "</div>"; return; }
+  if (!r.found) {
+    out.innerHTML = '<div class="empty">"' + esc(target) + '" not found in the atlas (' +
+      r.totalGraphNodes + " nodes)</div>";
+    return;
+  }
+  out.innerHTML =
+    '<div class="stats">' +
+    '<span class="stat"><span class="n ember">' + r.impactedFiles.length + '</span><span class="l">impacted files</span></span>' +
+    '<span class="stat"><span class="n">' + r.impacted.length + '</span><span class="l">nodes</span></span></div>' +
+    "<table><thead><tr><th>confidence</th><th>hop</th><th>node</th><th>file</th></tr></thead><tbody>" +
+    r.impacted.slice(0, 40).map((x) =>
+      "<tr><td>" + bar(x.confidence) + '</td><td class="num">' + (x.hopDistance ?? "llm") +
+      '</td><td class="mono">' + esc(x.node.name || x.id) + '</td><td class="muted">' +
+      esc(x.node.file || "") + "</td></tr>").join("") +
+    "</tbody></table>" +
+    (r.impacted.length > 40 ? '<div class="empty">… ' + (r.impacted.length - 40) + " more</div>" : "") +
+    '<div class="empty" style="margin-top:8px">same trace on the CLI: forge impact ' + esc(target) + "</div>";
+}
+
+async function refresh() {
+  const res = await fetch("/api/data");
+  DATA = await res.json();
+  renderLedger(DATA);
+  renderCost(DATA);
+}
+
+// The two writes: POST then refresh — the ledger on disk is the only state, the page
+// just re-reads it. retract prompts for its reason (spec: tombstone WITH a reason).
+async function runWrite(act, id8) {
+  const body = { id: id8 };
+  if (act === "retract") {
+    const reason = prompt(`retract ${id8} — reason (recorded in the tombstone):`);
+    if (reason === null) return; // cancelled
+    body.reason = reason;
+  }
+  const res = await fetch(`/api/${act}`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const r = await res.json().catch(() => ({}));
+  if (!res.ok) alert(`${act} failed: ${r.reason || r.error || res.status}`);
+  await refresh();
+}
+
+document.addEventListener("click", (ev) => {
+  const act = ev.target.closest(".act");
+  if (act) {
+    runWrite(act.dataset.act, act.dataset.id8).catch(() => {});
+    return;
+  }
+  const el = ev.target.closest(".blame");
+  if (!el) return;
+  navigator.clipboard?.writeText("forge ledger blame " + el.dataset.id8).then(() => {
+    el.classList.add("copied");
+    const prev = el.textContent;
+    el.textContent = "copied ✓";
+    setTimeout(() => { el.textContent = prev; el.classList.remove("copied"); }, 900);
+  });
+});
+$("refresh").addEventListener("click", refresh);
+$("kind-filter").addEventListener("change", () => DATA && renderLedger(DATA));
+$("impact-go").addEventListener("click", runImpact);
+$("impact-target").addEventListener("keydown", (e) => { if (e.key === "Enter") runImpact(); });
+
+refresh().catch(() => {
+  $("hdr-meta").textContent = "could not load /api/data";
+});
+</script>
+</body>
+</html>