npm - skill-harness - Versions diffs - 0.13.0 → 0.14.0 - Mend

skill-harness 0.13.0 → 0.14.0

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 (6) hide show

package/README.md +4 -1
package/assets/report.grade.js +177 -0
package/assets/report.template.html +470 -0
package/dist/index.js +17311 -0
package/dist/prompt-capture-extension.js +118 -0
package/package.json +10 -2

package/assets/report.template.html ADDED Viewed

@@ -0,0 +1,470 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>skill-harness · __SKILL__</title>
+<style>
+  :root {
+    --bg: #0f1115; --panel: #171a21; --line: #262b36; --fg: #e6e9ef; --dim: #9aa3b2;
+    --pass: #1f8b4c; --fail: #c0392b; --err: #6b7280; --accent: #4f8cff; --over: #d28b00;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; }
+  header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+  header h1 { font-size: 18px; margin: 0; font-weight: 650; }
+  header .sub { color: var(--dim); font-size: 13px; }
+  main { display: flex; min-height: calc(100vh - 58px); }
+  .matrix-wrap { flex: 1; overflow: auto; padding: 16px 20px; }
+  table { border-collapse: collapse; width: 100%; }
+  th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
+  th { background: var(--panel); font-weight: 600; position: sticky; top: 0; }
+  th.scn, td.scn { position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 200px; }
+  .crit { color: var(--over); margin-left: 4px; }
+  .cell { cursor: pointer; text-align: center; font-weight: 650; min-width: 90px; user-select: none; }
+  .cell.PASS { background: rgba(31,139,76,.22); }
+  .cell.FAIL { background: rgba(192,57,43,.24); }
+  .cell.ERROR { background: rgba(107,114,128,.22); }
+  .cell.NOT-MEASURED { background: rgba(180,83,9,.18); }
+  .cell.empty { color: var(--dim); cursor: default; font-weight: 400; }
+  .cell .ov { display: block; font-size: 11px; color: var(--over); font-weight: 600; }
+  .cell .ov.unsaved { color: #b45309; font-style: italic; }
+  .cell .ov.suspect { color: #b45309; }
+  .cell .reps { display: block; font-size: 10px; color: var(--dim); }
+  .cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .grade { font-size: 12px; color: var(--dim); font-weight: 500; margin-top: 4px; }
+  .badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
+  .badge.ship { background: var(--pass); color: #fff; }
+  .badge.no { background: var(--fail); color: #fff; }
+  /* red-vs-green lift: what the skill itself changed */
+  .lift { font-size: 11px; margin-top: 3px; font-weight: 600; }
+  .lift.up { color: var(--pass); }
+  .lift.down { color: var(--fail); }
+  .lift.flat, .lift.none { color: var(--dim); font-weight: 500; }
+  .cell .lm { display: block; font-size: 10px; font-weight: 700; }
+  .cell .lm.up { color: var(--pass); }
+  .cell .lm.down { color: var(--fail); }
+  /* Amber, like the suspect badge: both mean "this verdict is worth less than it looks". */
+  .cell .lm.flip { color: #b45309; }
+  /* Objective trace gates: pass/fail are facts about what the model did. ERROR is
+     amber rather than red — missing evidence is not a failing gate. */
+  .cell .lm.obj-pass { color: var(--pass); }
+  .cell .lm.obj-fail { color: var(--fail); }
+  .cell .lm.obj-error, .cell .lm.obj-not-measured { color: #b45309; }
+  /* Adjudication. `unresolved` is amber for the same reason `suspect` is: it must
+     never read as a clean PASS or FAIL. */
+  .cell .lm.adj-settled { color: var(--dim); }
+  .cell .lm.adj-unresolved { color: #b45309; }
+  aside { width: 0; transition: width .15s ease; overflow: hidden; border-left: 1px solid var(--line); background: var(--panel); }
+  aside.open { width: 460px; }
+  .panel { width: 460px; padding: 16px 18px; }
+  .panel h2 { font-size: 15px; margin: 0 0 2px; }
+  .panel .meta { color: var(--dim); font-size: 12px; margin-bottom: 12px; }
+  .panel .reason { background: #11141a; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; }
+  .toggle { display: flex; gap: 8px; margin-bottom: 12px; }
+  .toggle button { flex: 1; padding: 7px; border: 1px solid var(--line); background: #11141a; color: var(--fg); border-radius: 6px; cursor: pointer; font-weight: 600; }
+  .toggle button.active.PASS { background: var(--pass); border-color: var(--pass); color: #fff; }
+  .toggle button.active.FAIL { background: var(--fail); border-color: var(--fail); color: #fff; }
+  .toggle button.active.JUDGE { background: var(--accent); border-color: var(--accent); color: #fff; }
+  textarea { width: 100%; min-height: 60px; background: #11141a; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; resize: vertical; }
+  label.fld { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
+  pre.transcript { white-space: pre-wrap; word-break: break-word; background: #0b0d11; border: 1px solid var(--line); border-radius: 6px; padding: 10px; max-height: 42vh; overflow: auto; font: 12px/1.5 ui-monospace, monospace; }
+  .saved { color: var(--pass); font-size: 12px; margin-left: 8px; opacity: 0; transition: opacity .2s; }
+  .saved.show { opacity: 1; }
+  .saved.err { color: #b91c1c; opacity: 1; }
+  .close { float: right; cursor: pointer; color: var(--dim); border: none; background: none; font-size: 18px; }
+  .empty-state { color: var(--dim); padding: 40px; text-align: center; }
+  #misfires { margin: 0 0 16px; }
+  .mf-title { font-weight: 600; margin-bottom: 6px; }
+  .mf-title.empty { color: var(--dim); font-weight: 400; }
+  .mf-row { padding: 4px 0; border-bottom: 1px solid var(--line, #eee); font-size: 13px; }
+  .rejudge { margin: 8px 0; }
+  .rejudge button { cursor: pointer; }
+  #trends-section { margin-top: 20px; }
+  #trends-toggle { cursor: pointer; font-weight: 600; background: none; border: none; font-size: 14px; }
+  .tmodel { margin: 12px 0; }
+  .tmodel-h { font-size: 13px; margin-bottom: 4px; }
+  .spark { vertical-align: middle; color: var(--dim, #888); }
+  table.tgrid { border-collapse: collapse; font-size: 12px; }
+  /* The trends grid is a compact read-only summary, not the interactive matrix
+     above — it deliberately opts out of the matrix's sticky-header/sticky-
+     first-column rules (`position: sticky`) so a future CSS consolidation
+     doesn't reintroduce the 094a219 bug (trends scrolling under a stuck header). */
+  .tgrid th, .tgrid td { padding: 2px 6px; text-align: center; position: static; }
+  .tgrid td.tscn { text-align: left; }
+  .tgrid td.tc.PASS { color: #16a34a; }
+  .tgrid td.tc.FAIL { color: #dc2626; }
+  .tgrid td.tc.ERROR { color: #a855f7; }
+  .tgrid td.tc.NOT-MEASURED { color: #b45309; }
+  .tgrid td.tc.suspect { color: #b45309; }
+  .tgrid td.tc.absent { color: var(--dim, #bbb); }
+  .dim { color: var(--dim, #888); font-weight: 400; }
+</style>
+</head>
+<body>
+<header>
+  <h1>skill-harness</h1>
+  <span class="sub" id="subtitle"></span>
+</header>
+<main>
+  <div class="matrix-wrap">
+    <div id="misfires"></div>
+    <div id="matrix"></div>
+    <div id="trends-section">
+      <button id="trends-toggle">▸ Trends</button>
+      <div id="trends" hidden></div>
+    </div>
+  </div>
+  <aside id="aside"><div class="panel" id="panel"></div></aside>
+</main>
+<script>
+const DATA = /*__DATA__*/null;
+// effective()/gradeColumn() are injected here from assets/report.grade.js —
+// the single, tested copy of the client scorer (mirrors src/score.ts). See
+// renderReport() in packages/core/src/report.ts for how the injection works.
+/*__GRADE__*/
+let selected = null; // { colIndex, scenarioId }
+function render() {
+  document.getElementById("subtitle").textContent =
+    `${DATA.skill} · ${DATA.columns.length} model(s) · ship bar ${DATA.shipBar.min_pass}/${DATA.shipBar.total}, no critical fail`;
+  const wrap = document.getElementById("matrix");
+  if (!DATA.columns.length) {
+    wrap.innerHTML = `<div class="empty-state">No runs yet for <b>${DATA.skill}</b>.<br>Run <code>skill-harness run ${DATA.skill}</code> first.</div>`;
+    return;
+  }
+  const grades = DATA.columns.map((col) => gradeColumn(col, DATA.shipBar, DATA.critical));
+  const queue = [];
+  DATA.columns.forEach((col) => {
+    // A suspect cell in a red column can't be re-judged from here (/rejudge 400s
+    // for an unscored baseline) — don't queue it. The matrix below still shows
+    // suspect badges for every column regardless of mode.
+    if (col.mode && col.mode !== "green" && col.mode !== "force") return;
+    for (const scn of DATA.scenarios) {
+      const cell = col.cells[scn.id];
+      if (cell && cell.suspect && !cell.override) queue.push({ col: col.index, id: scn.id, label: col.label, reason: cell.judge_reason });
+    }
+  });
+  const mf = document.getElementById("misfires");
+  if (mf) {
+    mf.innerHTML = queue.length
+      ? `<div class="mf-title">⚠ Misfire queue (${queue.length})</div>` + queue.map((q) =>
+          `<div class="mf-row" data-col="${q.col}" data-id="${escapeHtml(q.id)}"><b>${escapeHtml(q.id)}</b> · ${escapeHtml(q.label)} — ${escapeHtml(q.reason || "(no reason)")} <button class="mf-open">inspect</button></div>`
+        ).join("")
+      : `<div class="mf-title empty">No unresolved misfires.</div>`;
+    mf.querySelectorAll(".mf-row").forEach((row) => {
+      row.querySelector(".mf-open").onclick = () => openPanel(+row.dataset.col, row.dataset.id);
+    });
+  }
+  let html = "<table><thead><tr><th class='scn'>scenario</th>";
+  DATA.columns.forEach((col, i) => {
+    const g = grades[i];
+    let gradeHtml;
+    if (col.mode && col.mode !== "green" && col.mode !== "force") {
+      // Green and force are scored; a red baseline column has no ship grade.
+      gradeHtml = `<span class='badge no'>not scored (${escapeHtml(col.mode)})</span>`;
+      if (g.suspect > 0) gradeHtml += ` — ${g.suspect} suspect`;
+      if (g.errors > 0) gradeHtml += ` — ${g.errors} infrastructure error`;
+    } else {
+      // g.ship is already false whenever g.suspect > 0 (gradeColumn's suspect gate), so
+      // the NOT READY badge is forced automatically; we just surface the count here.
+      const badge = g.ship ? "<span class='badge ship'>SHIP</span>" : "<span class='badge no'>NOT READY</span>";
+      const suspectNote = g.suspect > 0 ? ` — ${g.suspect} suspect` : "";
+      const errorNote = g.errors > 0 ? ` — ${g.errors} infrastructure error${g.errors === 1 ? "" : "s"}` : "";
+      gradeHtml = `${g.letter} (${g.pct}%) · ${g.passed}/${g.total}${suspectNote}${errorNote} ${badge}`;
+    }
+    const m = col.metrics;
+    const metricHtml = m && m.total_reps > 0
+      ? `<div class='grade' title='subject metrics reported by ${m.subject_metrics_reps}/${m.total_reps} reps'>` +
+        `${m.input_tokens == null ? "tokens n/a" : `${m.input_tokens}in/${m.output_tokens || 0}out`} · ` +
+        `${m.judge_calls} judge · ${m.wall_time_ms}ms · ${m.tool_calls == null ? "tools n/a" : `${m.tool_calls} tools`}</div>`
+      : "";
+    // Lift answers "does this skill do anything?", which the grade alone cannot:
+    // a column can score A because the model never needed the skill. Recomputed
+    // from the live cells (see liftSummary) so overrides move it immediately.
+    const ls = liftSummary(col);
+    let liftHtml = "";
+    if (ls && ls.compared > 0) {
+      const moved = ls.gained > 0 || ls.regressed > 0;
+      const cls = !moved ? "flat" : ls.delta > 0 ? "up" : ls.delta < 0 ? "down" : "flat";
+      // All-inconclusive is no measurement, not a zero effect — don't claim "no
+      // effect" when nothing was measurable (mirrors liftHeadline in lift.ts).
+      const body = ls.compared === ls.inconclusive
+        ? `lift — nothing conclusive`
+        : moved
+          ? `lift ${ls.delta > 0 ? "+" : ""}${ls.delta} · ${ls.gained}↑ ${ls.regressed}↓`
+          : `lift 0 · no effect`;
+      const inc = ls.inconclusive > 0 ? ` · ${ls.inconclusive} inconclusive` : "";
+      const part = col.lift.partial ? " · partial" : "";
+      html += `<th><div>${escapeHtml(col.label)}</div><div class='grade'>${gradeHtml}</div>${metricHtml}` +
+        `<div class='lift ${cls}' title='vs red baseline ${escapeHtml(col.lift.redTimestamp)} — ${ls.kept} passed without the skill too'>${body}${inc}${part}</div></th>`;
+      return;
+    }
+    // "not measured" is a different claim from "measured no effect" — and an
+    // unusable baseline is a third (see liftNoneBadge).
+    const none = liftNoneBadge(col);
+    if (none) {
+      liftHtml = `<div class='lift none' title='${escapeHtml(none.title)}'>${escapeHtml(none.text)}</div>`;
+    }
+    html += `<th><div>${escapeHtml(col.label)}</div><div class='grade'>${gradeHtml}</div>${metricHtml}${liftHtml}</th>`;
+  });
+  html += "</tr></thead><tbody>";
+  for (const scn of DATA.scenarios) {
+    html += `<tr><td class='scn'>${scn.id}${scn.critical ? "<span class='crit' title='critical'>⚠</span>" : ""}<div class='grade'>${escapeHtml(scn.title)}</div></td>`;
+    DATA.columns.forEach((col) => {
+      const cell = col.cells[scn.id];
+      // `return`, not `continue`: this is a forEach callback, so `continue` is a
+      // SyntaxError that takes the entire inline script — the whole review UI —
+      // down with it. Guarded by report.test.ts's "rendered report is valid
+      // JavaScript".
+      if (!cell) { html += `<td class='cell empty'>–</td>`; return; }
+      const v = effective(cell);
+      const sel = selected && selected.colIndex === col.index && selected.scenarioId === scn.id ? " sel" : "";
+      // _unsaved wins regardless of override value, so a failed *clear*
+      // (override → null) still shows the marker instead of looking persisted.
+      const ov = cell._unsaved
+        ? `<span class='ov unsaved'>unsaved</span>`
+        : (cell.override ? `<span class='ov'>override</span>` : "");
+      const misfired = cell.clean != null && cell.clean < cell.reps ? ` · ${cell.reps - cell.clean} misfired` : "";
+      const reps = cell.reps ? `<span class='reps'>${cell.passes}/${cell.clean}${misfired}${cell.flakiness ? ` · flaky ${cell.flakiness.toFixed(2)}` : ""}</span>` : "";
+      const suspectBadge = cell.suspect && !cell.override ? `<span class='ov suspect'>suspect</span>` : "";
+      // Per-cell lift marker: only the two classes that mean the skill changed
+      // the outcome. kept/both-fail/inconclusive are left unmarked — marking
+      // every cell would bury the signal this column exists to show.
+      const lc = col.lift && col.lift.cells[scn.id] ? liftClass(col.lift.cells[scn.id], cell) : null;
+      const liftMark =
+        lc === "gained"
+          ? `<span class='lm up' title='red baseline ${col.lift.cells[scn.id].red} → PASS with the skill'>↑ skill</span>`
+          : lc === "regressed"
+            ? `<span class='lm down' title='red baseline PASS → ${effective(cell)} with the skill'>↓ skill</span>`
+            : "";
+      // Run-over-run marker. Only on cells that actually flipped, and deliberately
+      // NOT folded into the flakiness number beside it: `flaky 0.00` is a within-run
+      // measure, and the case this exists for is a cell that was unanimous in every
+      // run and still landed on a different side each time.
+      const st = cell.stability;
+      const stabMark = st
+        ? `<span class='lm flip' title='${escapeHtml(st.note)}'>⇄ ${st.flips}/${st.compared}</span>`
+        : "";
+      // Objective trace gates. Only rendered when the scenario DECLARED them —
+      // absent must read as "not declared", never as an objective pass.
+      const obj = cell.objective;
+      const objMark = obj
+        ? `<span class='lm obj-${obj.status.toLowerCase()}' title='${escapeHtml(`objective ${obj.status}: ${obj.detail}`)}'>◉ ${escapeHtml(obj.status.toLowerCase())}</span>`
+        : "";
+      // Adjudication. `unresolved` is amber and says so in words — a disagreement
+      // that renders as a clean verdict is the whole failure this feature prevents.
+      const adj = cell.adjudication;
+      const adjMark = adj
+        ? `<span class='lm adj-${adj.state === "unresolved" ? "unresolved" : "settled"}' title='${escapeHtml(`adjudication ${adj.state} (${adj.trigger}) · ${adj.detail}`)}'>⚖ ${adj.state === "unresolved" ? "unresolved" : `${adj.count} agree`}</span>`
+        : "";
+      html += `<td class='cell ${v}${sel}' data-col='${col.index}' data-id='${scn.id}'>${v}${ov}${suspectBadge}${liftMark}${stabMark}${objMark}${adjMark}${reps}</td>`;
+    });
+    html += "</tr>";
+  }
+  html += "</tbody></table>";
+  wrap.innerHTML = html;
+  wrap.querySelectorAll(".cell:not(.empty)").forEach((td) => {
+    td.addEventListener("click", () => openPanel(+td.dataset.col, td.dataset.id));
+  });
+}
+async function openPanel(colIndex, scenarioId) {
+  selected = { colIndex, scenarioId };
+  render();
+  const col = DATA.columns.find((c) => c.index === colIndex);
+  const scn = DATA.scenarios.find((s) => s.id === scenarioId);
+  const cell = col.cells[scenarioId];
+  const aside = document.getElementById("aside");
+  const panel = document.getElementById("panel");
+  aside.classList.add("open");
+  const eff = effective(cell);
+  panel.innerHTML = `
+    <button class="close" id="closeBtn">×</button>
+    <h2>${scn.id} · ${escapeHtml(scn.title)}</h2>
+    <div class="meta">${escapeHtml(col.label)} · mode ${escapeHtml(col.mode || "green")} · judge ${escapeHtml(col.judge.provider + ":" + col.judge.model)}</div>
+    <div class="reason"><b>judge:</b> ${cell.judge_verdict} — ${escapeHtml(cell.judge_reason || "(no reason)")}</div>
+    ${cell.suspect ? `<div class="reason" style="color:#b45309"><b>⚠ suspect:</b> judge listed no failed item — re-judge before trusting this FAIL</div>` : ""}
+    ${cell.stability ? `<div class="reason" style="color:#b45309"><b>⇄ boundary cell:</b> ${escapeHtml(cell.stability.note)}</div>` : ""}
+    ${cell.objective ? `<div class="reason"><b>◉ objective ${escapeHtml(cell.objective.status)}:</b> ${escapeHtml(cell.objective.detail)}</div>` : ""}
+    ${cell.adjudication ? `<div class="reason"${cell.adjudication.state === "unresolved" ? ' style="color:#b45309"' : ""}><b>⚖ adjudication ${escapeHtml(cell.adjudication.state)}</b> (${escapeHtml(cell.adjudication.trigger)}): ${escapeHtml(cell.adjudication.detail)}</div>` : ""}
+    ${cell.metrics ? `<div class="reason"><b>cost/latency:</b> ${cell.metrics.input_tokens == null ? "subject tokens unavailable" : `${cell.metrics.input_tokens} input / ${cell.metrics.output_tokens || 0} output / ${cell.metrics.cache_read_tokens || 0} cache-read`} (${cell.metrics.subject_metrics_reps}/${cell.metrics.total_reps} reps) · ${cell.metrics.judge_calls} judge + ${cell.metrics.judge_rejudge_calls} re-judge · ${cell.metrics.wall_time_ms}ms · ${cell.metrics.tool_calls == null ? "tool calls unavailable" : `${cell.metrics.tool_calls} tools, ${cell.metrics.delegated_children || 0} delegated, max concurrency ${cell.metrics.max_concurrency || 0}`}</div>` : ""}
+    <div class="toggle">
+      <button data-v="PASS" class="PASS ${cell.override === 'PASS' ? 'active PASS' : ''}">PASS</button>
+      <button data-v="FAIL" class="FAIL ${cell.override === 'FAIL' ? 'active FAIL' : ''}">FAIL</button>
+      <button data-v="" class="JUDGE ${!cell.override ? 'active JUDGE' : ''}">use judge (${cell.judge_verdict})</button>
+    </div>
+    <div class="rejudge"><button id="rejudgeBtn">Re-judge (${escapeHtml(col.judge.provider + ":" + col.judge.model)})</button> <span class="saved" id="rejudged"></span></div>
+    <div class="rejudge"><button id="adjBtn">Adjudicate column…</button> <span class="saved" id="adjudged"></span></div>
+    <label class="fld">note <span class="saved" id="saved">saved ✓</span></label>
+    <textarea id="note" placeholder="why you overrode / what to fix in SKILL.md">${escapeHtml(cell.note || "")}</textarea>
+    <label class="fld">transcript</label>
+    <pre class="transcript" id="transcript">loading…</pre>
+    <label class="fld">judge raw</label>
+    <pre class="transcript" id="judgeraw">loading…</pre>
+  `;
+  document.getElementById("closeBtn").onclick = () => { aside.classList.remove("open"); selected = null; render(); };
+  panel.querySelectorAll(".toggle button").forEach((b) => {
+    b.onclick = () => { cell.override = b.dataset.v || null; save(col, scenarioId, cell); openPanel(colIndex, scenarioId); };
+  });
+  const rj = document.getElementById("rejudgeBtn");
+  if (rj) rj.onclick = async () => {
+    rj.disabled = true; rj.textContent = "re-judging…";
+    try {
+      const r = await fetch("/rejudge", {
+        method: "POST", headers: { "content-type": "application/json" },
+        body: JSON.stringify({ col: colIndex, scenarioId }),
+      });
+      const body = await r.json().catch(() => ({}));
+      if (!r.ok) { const s = document.getElementById("rejudged"); if (s) { s.textContent = body.error || "re-judge failed"; s.classList.add("show", "err"); } rj.disabled = false; rj.textContent = "Re-judge"; return; }
+      location.reload(); // re-judge rewrote results.yaml; reload the fresh matrix + grades
+    } catch (e) { rj.disabled = false; rj.textContent = "Re-judge"; }
+  };
+  // Two requests on purpose. The first prices the work and spends nothing; the
+  // confirm shows that exact ceiling; only then does anything call a judge. A
+  // single endpoint could not disclose a count before charging for it.
+  const adjBtn = document.getElementById("adjBtn");
+  if (adjBtn) adjBtn.onclick = async () => {
+    const status = document.getElementById("adjudged");
+    const show = (msg, err) => { if (status) { status.textContent = msg; status.classList.toggle("err", !!err); status.classList.add("show"); } };
+    adjBtn.disabled = true;
+    try {
+      const pr = await fetch("/adjudicate", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ col: colIndex, step: "plan" }) });
+      const plan = await pr.json().catch(() => ({}));
+      if (!pr.ok || !plan.ok) { show(plan.error || "could not plan adjudication", true); adjBtn.disabled = false; return; }
+      if (!plan.triggered.length) { show("no cell triggered — nothing to adjudicate", false); adjBtn.disabled = false; return; }
+      // Counts, never dollars: the default judge is a Claude subscription and
+      // reports no per-call usage, so a cost figure here would be invented.
+      const ok = window.confirm(
+        `Adjudicate ${plan.triggered.length} cell(s) with ${plan.judge}?\n\n` +
+        `Up to ${plan.maxAdditionalCalls} additional judge call(s).\n` +
+        `No tie-break judge from the browser — a disagreement stays unresolved and blocks SHIP.\n\n` +
+        plan.detail.join("\n")
+      );
+      if (!ok) { show("cancelled — nothing spent", false); adjBtn.disabled = false; return; }
+      adjBtn.textContent = "Adjudicating…";
+      const rr = await fetch("/adjudicate", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ col: colIndex, step: "run" }) });
+      const done = await rr.json().catch(() => ({}));
+      if (!rr.ok || !done.ok) { show(done.error || "adjudication failed", true); adjBtn.disabled = false; adjBtn.textContent = "Adjudicate column…"; return; }
+      location.reload();
+    } catch (e) {
+      show("adjudication failed", true); adjBtn.disabled = false; adjBtn.textContent = "Adjudicate column…";
+    }
+  };
+  let t;
+  document.getElementById("note").addEventListener("input", (e) => {
+    cell.note = e.target.value;
+    clearTimeout(t);
+    t = setTimeout(() => save(col, scenarioId, cell), 500);
+  });
+  try {
+    const r = await fetch(`/transcript?col=${colIndex}&id=${encodeURIComponent(scenarioId)}`);
+    document.getElementById("transcript").textContent = r.ok ? await r.text() : "(transcript unavailable)";
+  } catch { document.getElementById("transcript").textContent = "(transcript unavailable)"; }
+  try {
+    const jr = await fetch(`/judge?col=${colIndex}&id=${encodeURIComponent(scenarioId)}`);
+    document.getElementById("judgeraw").textContent = jr.ok ? await jr.text() : "(judge output not captured)";
+  } catch { document.getElementById("judgeraw").textContent = "(judge output not captured)"; }
+}
+async function save(col, scenarioId, cell) {
+  const s = document.getElementById("saved");
+  // Optimistic: mark the cell unsaved until the server confirms. On a rejected
+  // save (e.g. note-less override → 400) the marker stays, so the matrix never
+  // shows an override as persisted when results.yaml still has it null. The
+  // local toggle is kept so typing a note then retriggers save.
+  cell._unsaved = true;
+  try {
+    const r = await fetch("/save", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ col: col.index, scenarioId, override: cell.override, note: cell.note }),
+    });
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      if (s) { s.textContent = body.error || "save failed"; s.classList.add("show", "err"); }
+    } else {
+      cell._unsaved = false;
+      if (s) { s.textContent = "saved ✓"; s.classList.remove("err"); s.classList.add("show"); setTimeout(() => s.classList.remove("show"), 1200); }
+    }
+  } catch (e) { console.error("save failed", e); }
+  render();
+}
+function escapeHtml(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
+let trendsLoaded = false;
+document.getElementById("trends-toggle").onclick = async () => {
+  const box = document.getElementById("trends");
+  const btn = document.getElementById("trends-toggle");
+  const nowHidden = box.hasAttribute("hidden");
+  if (nowHidden) box.removeAttribute("hidden"); else box.setAttribute("hidden", "");
+  btn.textContent = (nowHidden ? "▾ Trends" : "▸ Trends");
+  if (nowHidden && !trendsLoaded) {
+    box.textContent = "loading…";
+    try {
+      const r = await fetch("/trends");
+      if (!r.ok) throw new Error(`trends fetch failed: ${r.status} ${await r.text().catch(() => "")}`);
+      renderTrends(await r.json());
+      trendsLoaded = true;
+    } catch (e) { console.error("trends load failed", e); box.textContent = "(trends unavailable)"; }
+  }
+};
+function sparkline(runs) {
+  if (!runs.length) return "";
+  const w = 8 * runs.length + 4, h = 24;
+  if (runs.length === 1) {
+    const cx = 4, cy = h - 2 - (runs[0].grade.pct / 100) * (h - 4);
+    return `<svg width="${w}" height="${h}" class="spark"><circle cx="${cx}" cy="${cy}" r="2" fill="currentColor"/></svg>`;
+  }
+  const pts = runs.map((r, i) => `${4 + i * 8},${h - 2 - (r.grade.pct / 100) * (h - 4)}`).join(" ");
+  return `<svg width="${w}" height="${h}" class="spark"><polyline points="${pts}" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`;
+}
+function renderTrends(data) {
+  const box = document.getElementById("trends");
+  if (!data.models.length) { box.innerHTML = `<div class="empty-state">No runs yet.</div>`; return; }
+  const glyph = { PASS: "✓", FAIL: "✗", ERROR: "!", "NOT-MEASURED": "∅" };
+  let html = "";
+  for (const m of data.models) {
+    const last = m.runs[m.runs.length - 1].grade;
+    const badge = last.ship ? "<span class='badge ship'>SHIP</span>" : "<span class='badge no'>NOT READY</span>";
+    const trunc = m.truncated ? ` <span class='dim'>(last ${m.runs.length})</span>` : "";
+    const skippedNote = m.skipped > 0 ? ` <span class='dim'>(${m.skipped} unreadable)</span>` : "";
+    // The mode is part of the series identity, not decoration: a tag that moved
+    // from green to force delivery has TWO series here, and the same skill text
+    // scores differently under each — so an unlabelled pair of sparklines would
+    // read as one history that jumped.
+    const modeNote = m.mode ? ` <span class='dim'>${escapeHtml(m.mode)}</span>` : "";
+    html += `<div class="tmodel"><div class="tmodel-h">${escapeHtml(m.model)}${modeNote} — ${sparkline(m.runs)} ${last.letter} (${last.pct}%) ${badge}${trunc}${skippedNote}</div>`;
+    html += "<table class='tgrid'><thead><tr><th></th>";
+    for (const run of m.runs) html += `<th title="${escapeHtml(run.label || run.timestamp)}">${escapeHtml((run.label || run.timestamp).slice(0, 8))}</th>`;
+    html += "</tr></thead><tbody>";
+    for (const scn of data.scenarios) {
+      html += `<tr><td class='tscn'>${escapeHtml(scn.id)}</td>`;
+      for (const run of m.runs) {
+        const cell = run.cells[scn.id];
+        if (!cell) { html += `<td class='tc absent'>·</td>`; continue; }
+        const g = cell.suspect ? "?" : (glyph[cell.verdict] || "?");
+        const cls = escapeHtml(cell.suspect ? "suspect" : cell.verdict);
+        const title = `${run.label || run.timestamp}${cell.flakiness != null ? ` · flaky ${cell.flakiness.toFixed(2)}` : ""}`;
+        html += `<td class='tc ${cls}' title="${escapeHtml(title)}">${g}</td>`;
+      }
+      html += "</tr>";
+    }
+    html += "</tbody></table></div>";
+  }
+  box.innerHTML = html;
+}
+render();
+</script>
+</body>
+</html>