static-fire 0.0.0-stage → 0.44.0

package/web/brand/offset-tokens.css

@@ -0,0 +1,126 @@
+/* Copied from ai-launchpad-business brand/generated/tokens.css at 5c1143d (branch feat/dataviz-tokens). Do not edit: change brand/tokens.json there, rebuild, and copy again. */
+/* GENERATED by brand/build.py from brand/tokens.json — do not edit. */
+
+:root {
+  color-scheme: light;
+  --color-ink: #141512;
+  --color-graphite: #3A3D36;
+  --color-soft: #4F524A;
+  --color-mist: #C9CCC2;
+  --color-ash: #A9ADA3;
+  --color-paper: #FFFDF6;
+  --color-butter: #FFF8E3;
+  --color-white: #FFFFFF;
+  --color-rule: #E4DFCC;
+  --color-rule-soft: #EEEADB;
+  --color-sun: #FFCB05;
+  --color-sun-2: #FFE277;
+  --color-sun-ink: #7A5A00;
+  --color-mint: #D5EFD9;
+  --color-mint-2: #9FD8A9;
+  --color-blush: #FBDCD6;
+  --color-blush-2: #F4B8AD;
+  --color-sky: #D7E8F7;
+  --color-lavender: #E6DDF7;
+  --color-cream: #F1EFE6;
+
+  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
+  --font-heading: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
+  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
+  --font-kicker: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+  --tracking-display: -0.04em;
+  --leading-display: 0.98;
+  --tracking-heading: -0.035em;
+  --leading-heading: 1.02;
+  --tracking-kicker: 0.08em;
+  --tracking-text: 0;
+  --leading-text: 1.55;
+  --weight-display: 900;
+  --weight-heading: 900;
+  --weight-heading-card: 800;
+  --weight-kicker: 800;
+
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 1.0rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.375rem;
+  --text-2xl: 1.75rem;
+  --text-3xl: 2.25rem;
+  --text-4xl: 3.0rem;
+  --text-5xl: 4.0rem;
+  --text-6xl: 5.25rem;
+
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+  --spacing-96: 96px;
+  --spacing-128: 128px;
+  --spacing-192: 192px;
+
+  --radius-lg: 24px;
+  --radius-md: 16px;
+  --radius-sm: 12px;
+  --radius-xs: 8px;
+  --radius-pill: 999px;
+  --outline-width: 2px;
+  --press-y: 2px;
+
+  --ground: var(--color-paper);
+  --surface: var(--color-butter);
+  --raised: var(--color-white);
+  --fg: var(--color-ink);
+  --fg-2: var(--color-graphite);
+  --fg-3: var(--color-soft);
+  --line: var(--color-rule);
+  --line-soft: var(--color-rule-soft);
+  --outline: var(--color-ink);
+  --accent: var(--color-sun);
+  --accent-text: var(--color-sun-ink);
+  --shadow-lg: 0 8px 0 var(--outline);
+  --shadow-md: 0 6px 0 var(--outline);
+  --shadow-sm: 0 4px 0 var(--outline);
+  --shadow-sm-pressed: 0 2px 0 var(--outline);
+
+  --dataviz-1: #DBAC28;
+  --dataviz-1-strong: #B68B00;
+  --dataviz-2: #B99CFD;
+  --dataviz-2-strong: #9A77E4;
+  --dataviz-3: #B36305;
+  --dataviz-3-strong: #7A4202;
+  --dataviz-4: #B05EA7;
+  --dataviz-4-strong: #7C3276;
+  --dataviz-5: #F492A1;
+  --dataviz-5-strong: #CF6F7F;
+  --dataviz-6: #2588E0;
+  --dataviz-6-strong: #296CAD;
+  --dataviz-7: #55A560;
+  --dataviz-7-strong: #2E7E3D;
+  --dataviz-baseline: var(--color-soft);
+  --dataviz-grid: var(--color-rule);
+}
+
+[data-scheme="dark"] {
+  color-scheme: dark;
+  --ground: var(--color-ink);
+  --surface: var(--color-ink);
+  --raised: var(--color-graphite);
+  --fg: var(--color-white);
+  --fg-2: var(--color-mist);
+  --fg-3: var(--color-ash);
+  --line: var(--color-graphite);
+  --line-soft: var(--color-graphite);
+  --outline: var(--color-white);
+  --accent: var(--color-sun);
+  --accent-text: var(--color-sun);
+  --shadow-lg: 0 8px 0 var(--outline);
+  --shadow-md: 0 6px 0 var(--outline);
+  --shadow-sm: 0 4px 0 var(--outline);
+  --shadow-sm-pressed: 0 2px 0 var(--outline);
+}

package/web/charts.tsx

@@ -0,0 +1,190 @@
+import { useEffect, useRef, useState } from "react";
+import { fill, Marker, markerProps, shapePath } from "./encoding";
+import { chartLabels } from "../src/core/label";
+import type { ConfigSummary } from "../src/core/types";
+
+export const money = (v: number | null | undefined) =>
+  v == null ? "—" : v < 0.01 ? `$${v.toFixed(4)}` : v < 1 ? `$${v.toFixed(3)}` : `$${v.toFixed(2)}`;
+export const secs = (ms: number | null | undefined) => (ms == null ? "—" : ms < 60_000 ? `${Math.round(ms / 1000)}s` : `${(ms / 60_000).toFixed(1)}m`);
+
+function useWidth<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [w, setW] = useState(900);
+  useEffect(() => {
+    if (!ref.current) return;
+    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, []);
+  return [ref, w] as const;
+}
+
+const day = (iso: string) => new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+/** "6 Nov 2026", or "6 Nov 2026 to 13 Nov 2026". */
+export const dateRange = (from: string | null, to: string | null) => (!from || !to ? "—" : day(from) === day(to) ? day(from) : `${day(from)} to ${day(to)}`);
+
+/**
+ * One plotted config: what the selected view says its score, interval and cost are. `n` is the valid trials
+ * pooled into it and `from`/`to` the first and last start time of those trials.
+ */
+export interface Point { s: ConfigSummary; score: number; ci: number | null; n: number; from: string | null; to: string | null; cost: number; costSource: string; durationMs: number | null }
+
+
+/**
+ * One config in the chart card's table: a Point whose score or cost may be missing, with the reason the
+ * chart cannot draw it when it cannot.
+ */
+export interface Row extends Omit<Point, "score" | "cost"> { score: number | null; cost: number | null; reason?: string }
+
+/** The chart card's table view: one row per config, the same numbers the chart draws. */
+export function ConfigTable({ rows, onPick }: { rows: Row[]; onPick?: (id: string) => void }) {
+  return (
+    <div className="table-wrap">
+      <table className="configs">
+        <thead><tr><th>Config</th><th className="num">Score</th><th className="num">± 95%</th><th className="num">n</th><th className="num">$ / task</th><th>Ran</th></tr></thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.s.configId} className={r.reason ? "unplotted" : undefined} onClick={() => onPick?.(r.s.configId)}>
+              <td><div className="cfg"><Marker s={r.s} size={12} />{r.s.label}</div>{r.reason && <div className="why">Not plotted: {r.reason}</div>}</td>
+              <td className="num strong">{r.score == null ? "—" : r.score.toFixed(1)}</td>
+              <td className="num">{r.ci == null ? "—" : r.ci.toFixed(1)}</td>
+              <td className="num">{r.n}</td>
+              <td className="num">{r.s.harness === "human" ? "no agent cost" : r.cost == null ? "—" : `${money(r.cost)}${r.costSource === "estimated" ? " (est.)" : ""}`}</td>
+              <td>{dateRange(r.from, r.to)}</td>
+            </tr>
+          ))}
+          {rows.length === 0 && <tr><td colSpan={6} className="why">No configs in this view.</td></tr>}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** A person's score: drawn as a line across the chart, because a person has no agent cost. */
+export interface HumanLine { s: ConfigSummary; score: number }
+
+/** Score vs. cost per task — the Artificial Analysis-style frontier chart. */
+export function FrontierChart({ points, yTitle, humans = [], onPick }: {
+  points: Point[]; yTitle: string; humans?: HumanLine[]; onPick?: (id: string) => void;
+}) {
+  const [ref, width] = useWidth<HTMLDivElement>();
+  const [hover, setHover] = useState<string | null>(null);
+  const short = chartLabels(points.map((p) => p.s));
+  const narrow = width < 640;
+  const H = narrow ? 360 : 440, m = { t: 16, r: narrow ? 16 : 170, b: 52, l: 52 };
+  const iw = Math.max(160, width - m.l - m.r), ih = H - m.t - m.b;
+
+  const costs = points.map((p) => p.cost);
+  const lo = costs.length ? Math.min(...costs) / 1.8 : 0.001, hi = costs.length ? Math.max(...costs) * 1.8 : 1;
+  const lx0 = Math.log10(lo), lx1 = Math.log10(hi);
+  const x = (v: number) => m.l + ((Math.log10(v) - lx0) / (lx1 - lx0 || 1)) * iw;
+  const extent = points.flatMap((p) => [p.score - (p.ci ?? 0), p.score + (p.ci ?? 0)]).concat(humans.map((h) => h.score));
+  const y0 = Math.max(0, Math.floor((Math.min(...extent, 100) - 8) / 10) * 10), y1 = 100;
+  const y = (v: number) => m.t + ih - ((Math.min(100, Math.max(y0, v)) - y0) / (y1 - y0)) * ih;
+
+  const xticks: number[] = [];
+  for (let e = Math.floor(lx0); e <= Math.ceil(lx1); e++)
+    for (const k of [1, 2, 5]) { const v = k * 10 ** e; if (v >= lo && v <= hi) xticks.push(v); }
+  const yticks = Array.from({ length: (y1 - y0) / 10 + 1 }, (_, i) => y0 + i * 10);
+
+  // Pareto frontier: cheapest first, keep each point that beats every cheaper one.
+  const frontier: Point[] = [];
+  for (const p of [...points].sort((a, b) => a.cost - b.cost)) if (!frontier.length || p.score > frontier[frontier.length - 1].score) frontier.push(p);
+
+  // "Most attractive" quadrant: better than the median score at lower than the median cost.
+  const med = (xs: number[]) => { const s = [...xs].sort((a, b) => a - b); return s.length ? (s[(s.length - 1) >> 1] + s[s.length >> 1]) / 2 : 0; };
+  const qx = x(med(costs)), qy = y(med(points.map((p) => p.score)));
+
+  // Direct labels on wide screens, nudged so they don't collide.
+  const labels = [...points].sort((a, b) => y(a.score) - y(b.score)).map((p) => ({ p, ly: y(p.score) }));
+  for (let i = 1; i < labels.length; i++)
+    for (let j = 0; j < i; j++) {
+      const a = labels[j], b = labels[i];
+      if (Math.abs(x(a.p.cost) - x(b.p.cost)) < 190 && Math.abs(a.ly - b.ly) < 16) b.ly = a.ly + 16;
+    }
+
+  const hp = points.find((p) => p.s.configId === hover);
+  return (
+    <div className="chart-wrap" ref={ref}>
+      <svg className="chart" width={width} height={H} role="img" aria-label={`${yTitle} versus cost per task`}>
+        {points.length > 1 && <rect x={m.l} y={m.t} width={Math.max(0, qx - m.l)} height={Math.max(0, qy - m.t)} className="quadrant" />}
+        {yticks.map((v) => <g key={v}><line className="gridline" x1={m.l} x2={m.l + iw} y1={y(v)} y2={y(v)} /><text x={m.l - 10} y={y(v) + 4} textAnchor="end">{v}</text></g>)}
+        {xticks.map((v) => <g key={v}><line className="gridline" x1={x(v)} x2={x(v)} y1={m.t} y2={m.t + ih} strokeDasharray="2 4" /><text x={x(v)} y={m.t + ih + 18} textAnchor="middle">{money(v)}</text></g>)}
+        <text className="axis-title" x={m.l + iw / 2} y={H - 8} textAnchor="middle">Cost per task (USD, API-equivalent, log scale)</text>
+        <text className="axis-title" transform={`translate(14 ${m.t + ih / 2}) rotate(-90)`} textAnchor="middle">{yTitle} (0–100)</text>
+
+        {humans.map((h) => (
+          <g key={h.s.configId} className="pt" onClick={() => onPick?.(h.s.configId)}>
+            <title>{`${h.s.label}: ${h.score.toFixed(1)} (no agent cost)`}</title>
+            {/* A reference line, not a point: solid and thick (the Pareto frontier is dotted). Its label is drawn after the points. */}
+            <line x1={m.l} x2={m.l + iw} y1={y(h.score)} y2={y(h.score)} className="human-line" />
+          </g>
+        ))}
+
+        {frontier.length > 1 && <polyline points={frontier.map((p) => `${x(p.cost)},${y(p.score)}`).join(" ")} fill="none" stroke="var(--fg)" strokeWidth={2} strokeDasharray="1.5 5" strokeLinecap="round" />}
+
+        {points.map((p) => {
+          const cx = x(p.cost), cy = y(p.score), on = hover === p.s.configId, dim = hover && !on;
+          return (
+            <g key={p.s.configId} opacity={dim ? 0.3 : 1} style={{ transition: "opacity .15s" }}>
+              {p.ci != null && p.ci > 0 && <line x1={cx} x2={cx} y1={y(p.score + p.ci)} y2={y(p.score - p.ci)} stroke="var(--fg-3)" strokeWidth={2} strokeLinecap="round" />}
+              <g transform={`translate(${cx} ${cy})`}>
+                <path d={shapePath(p.s.harness, on ? 9 : 7.5)} {...markerProps(p.s)} />
+                {!p.s.profile && <path d={shapePath(p.s.harness, on ? 4 : 3.4)} fill={fill(p.s.family)} />}
+              </g>
+              <circle cx={cx} cy={cy} r={20} fill="transparent" style={{ cursor: "pointer" }}
+                onMouseEnter={() => setHover(p.s.configId)} onMouseLeave={() => setHover(null)} onClick={() => onPick?.(p.s.configId)} />
+            </g>
+          );
+        })}
+        {!narrow && labels.map(({ p, ly }) => (
+          <text key={p.s.configId} className="pt-label" x={x(p.cost) + 13} y={ly + 4} opacity={hover && hover !== p.s.configId ? 0.3 : 1}>
+            {short.get(p.s.configId)}
+          </text>
+        ))}
+        {/* In the right margin on wide screens, clear of the points; on narrow ones above the line's right end. */}
+        {humans.map((h) => (
+          <text key={h.s.configId} className="human-label" x={narrow ? m.l + iw - 4 : m.l + iw + 8} y={narrow ? y(h.score) - 8 : y(h.score) + 4} textAnchor={narrow ? "end" : "start"}>
+            {h.s.label} · {h.score.toFixed(0)}
+          </text>
+        ))}
+      </svg>
+      {hp && (
+        <div className="tooltip" style={{ left: x(hp.cost), top: y(hp.score) }}>
+          <div className="tt-head"><Marker s={hp.s} /><b>{hp.s.label}</b></div>
+          <div className="row"><span>{yTitle}</span><span>{hp.score.toFixed(1)}{hp.ci != null ? ` ± ${hp.ci.toFixed(1)}` : ""}</span></div>
+          <div className="row"><span>Cost / task</span><span>{money(hp.cost)}{hp.costSource === "estimated" ? " (est.)" : ""}</span></div>
+          <div className="row"><span>Time / task</span><span>{secs(hp.durationMs)}</span></div>
+          <div className="row"><span>Valid trials</span><span>{hp.n}</span></div>
+          <div className="row"><span>Ran</span><span>{dateRange(hp.from, hp.to)}</span></div>
+          <div className="row"><span>On the frontier</span><span>{frontier.includes(hp) ? "yes" : "no"}</span></div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Horizontal bars, sorted; fill = model family colour inside an ink outline; hollow = no Profile. */
+export function BarList({ rows, fmt, lowerIsBetter }: {
+  rows: { s: ConfigSummary; v: number | null }[]; fmt: (v: number) => string; lowerIsBetter?: boolean;
+}) {
+  const data = rows.filter((r) => r.v != null).sort((a, b) => (lowerIsBetter ? 1 : -1) * (a.v! - b.v!));
+  const max = Math.max(...data.map((d) => d.v!), 1e-9);
+  const short = chartLabels(data.map((d) => d.s));
+  return (
+    <div className="bars">
+      {data.map(({ s, v }) => {
+        const pct = (v! / max) * 70;
+        return (
+          <div className="bar-row" key={s.configId} title={`${s.label}: ${fmt(v!)}`}>
+            <div className="bar-label"><Marker s={s} size={12} />{short.get(s.configId)}</div>
+            <div className="bar-track">
+              <div className="bar" style={{ width: `${pct}%`, background: s.profile || s.harness === "human" ? fill(s.family) : "var(--color-white)" }} />
+              <span className="bar-val" style={{ left: `${pct}%` }}>{fmt(v!)}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/web/compare.tsx

@@ -0,0 +1,317 @@
+// The Compare page (#27): two grading versions of one task. What changed between them, the effect on scores over
+// the trials graded under both, and which criteria moved. Everything comes from GET /api/facets (the versions and
+// their names) and GET /api/compare (the scores and the difference from A to B): the page does no diffing of
+// grading versions (DEC-002, DEC-004). Marking the changed words of a reworded text is display work (./wording).
+// The picks are page state: the URL query belongs to the Results page (web/pages.ts).
+import { useEffect, useState } from "react";
+import type { CompareCriterion, CompareReading, GradingComparison } from "../src/core/compare";
+import { engineChangeName, type EngineChange } from "../src/core/engine";
+import type { Facets } from "../src/core/facets";
+import type { CriterionDiff, FileChanges, GradingDiff } from "../src/core/grading-versions";
+import type { TaskSnapshot } from "../src/core/types";
+import { api } from "./api";
+import { Marker } from "./encoding";
+import { wordChanges } from "./wording";
+
+type Version = Facets["grading"][number]["setups"][number];
+
+const short = (hash: string) => hash.slice(0, 8);
+/** A task version in the "what changed" list: its label with its short task hash, or the short hash alone when it has none. */
+const TaskVersion = ({ label, hash }: { label: number | null; hash: string }) =>
+  label != null ? <>v{label} (task <code>{short(hash)}</code>)</> : <>task <code>{short(hash)}</code></>;
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+/** Date and time: two versions of one task are often recorded on the same day. */
+const when = (iso: string) => new Date(iso).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });
+const score = (v: number | null) => (v == null ? "—" : v.toFixed(1));
+const rate = (v: number | null) => (v == null ? "—" : `${Math.round(v * 100)}%`);
+/** A signed change with its direction for colour; "—" when one side has none. */
+function Change({ v, unit = "" }: { v: number | null; unit?: string }) {
+  if (v == null) return <>—</>;
+  const r = Math.round(v * 10) / 10;
+  return <span className={`delta${r > 0 ? " up" : r < 0 ? " down" : ""}`}>{r > 0 ? "+" : r < 0 ? "−" : ""}{Math.abs(r).toFixed(unit ? 0 : 1)}{unit}</span>;
+}
+
+/** " · judge Opus" when the task's versions are of more than one judge. */
+const judgeNote = (all: Version[], v: Version) => (new Set(all.map((x) => x.judgeLabel)).size > 1 ? ` · judge ${v.judgeLabel}` : "");
+const optionText = (all: Version[], v: Version) => `${v.name}${judgeNote(all, v)} · ${when(v.firstSeen)} · ${plural(v.count, "trial")}${v.current ? " · current" : ""}`;
+
+export function ComparePage({ tick, titles }: { tick: number; titles: Record<string, string> }) {
+  const [facets, setFacets] = useState<Facets | null>(null);
+  const [facetsError, setFacetsError] = useState("");
+  const [picked, setPicked] = useState<{ task?: string; a?: string; b?: string }>({});
+  useEffect(() => {
+    let live = true;
+    api<Facets>("/api/facets").then((f) => { if (live) { setFacets(f); setFacetsError(""); } }).catch((e: Error) => { if (live) setFacetsError(e.message); });
+    return () => { live = false; };
+  }, [tick]);
+
+  // Tasks with two or more grading versions that graded a stored trial.
+  const groups = (facets?.grading ?? []).filter((g) => g.setups.length > 1);
+  const group = groups.find((g) => g.taskId === picked.task) ?? groups[0];
+  const versions = group?.setups ?? [];   // oldest first
+  const known = (h?: string) => !!h && versions.some((v) => v.hash === h);
+  // By default B is the latest version and A the version before it (the change B is named by).
+  const b = known(picked.b) ? picked.b! : versions.at(-1)?.hash;
+  const bVersion = versions.find((v) => v.hash === b);
+  const before = bVersion?.previous && known(bVersion.previous) ? bVersion.previous : versions[versions.findIndex((v) => v.hash === b) - 1]?.hash;
+  const a = known(picked.a) && picked.a !== b ? picked.a! : before ?? versions.find((v) => v.hash !== b)?.hash;
+  const pickA = (h: string) => setPicked({ task: group!.taskId, a: h, b: h === b ? a : b });   // picking B's version swaps them
+  const pickB = (h: string) => setPicked({ task: group!.taskId, a: h === a ? b : a, b: h });
+
+  const [result, setResult] = useState<{ key: string; r: GradingComparison } | null>(null);
+  const [error, setError] = useState("");
+  const key = a && b ? `a=${a}&b=${b}` : "";
+  useEffect(() => {
+    if (!key) return;
+    let live = true;   // a response for an earlier pick must not replace the current one
+    api<GradingComparison>(`/api/compare?${key}`)
+      .then((r) => { if (live) { setResult({ key, r }); setError(""); } })
+      .catch((e: Error) => { if (live) { setResult(null); setError(e.message); } });
+    return () => { live = false; };
+  }, [key, tick]);
+  const r = result?.key === key ? result.r : null;
+  const va = versions.find((v) => v.hash === a), vb = bVersion;
+
+  return (
+    <>
+      <section className="hero page-head">
+        <div>
+          <div className="kicker">Compare</div>
+          <h1>Did a grading change move the scores?</h1>
+          <p className="sub">Pick two grading versions of one task. Only trials graded under both are compared, so a difference comes from the grading, not from different outputs. Gradings are never averaged together.</p>
+        </div>
+      </section>
+
+      {facetsError ? <div className="card"><p className="error">Could not load the grading versions: {facetsError}</p></div>
+        : !facets ? <div className="card"><p className="note">Loading…</p></div>
+        : !group || !va || !vb ? (
+          <div className="card empty-compare">
+            <h2>Nothing to compare yet</h2>
+            <p className="sub">No task has two grading versions with graded trials. A task gets a new grading version when its grading changes (a question, a check, a file graders read, the judge or a part of the engine revision that the task uses) and a trial is graded under it, for example by a regrade.</p>
+          </div>
+        ) : <>
+          <section className="card" aria-label="Grading versions compared">
+            <div className="card-head"><h2>{titles[group.taskId] ?? group.taskId}: grading versions</h2><span className="muted">named by what changed since the version before</span></div>
+            <div className="filters compare-picks">
+              {groups.length > 1 && (
+                <label>Task
+                  <select aria-label="Task compared" value={group.taskId} onChange={(e) => setPicked({ task: e.target.value })}>
+                    {groups.map((g) => <option key={g.taskId} value={g.taskId}>{titles[g.taskId] ?? g.taskId} ({g.setups.length} versions)</option>)}
+                  </select>
+                </label>
+              )}
+              <label>Version A
+                <select aria-label="Version A" value={a} onChange={(e) => pickA(e.target.value)}>
+                  {versions.map((v) => <option key={v.hash} value={v.hash} title={`Grading hash ${v.hash}`}>{optionText(versions, v)}</option>)}
+                </select>
+              </label>
+              <label>Version B
+                <select aria-label="Version B" value={b} onChange={(e) => pickB(e.target.value)}>
+                  {versions.map((v) => <option key={v.hash} value={v.hash} title={`Grading hash ${v.hash}`}>{optionText(versions, v)}</option>)}
+                </select>
+              </label>
+            </div>
+            <div className="two">
+              <VersionCard side="A" v={va} def={r?.a.def} />
+              <VersionCard side="B" v={vb} def={r?.b.def} />
+            </div>
+          </section>
+
+          {error ? <div className="card"><p className="error">Could not compare: {error}</p></div>
+            : !r ? <div className="card"><p className="note">Loading…</p></div>
+            : <>
+              <WhatChanged r={r} />
+              <Effect r={r} />
+            </>}
+        </>}
+    </>
+  );
+}
+
+const criterionIds = (d: TaskSnapshot) => [...d.gates, ...d.measures.flatMap((m) => m.criteria)].map((c) => c.id);
+
+function VersionCard({ side, v, def }: { side: "A" | "B"; v: Version; def?: TaskSnapshot }) {
+  return (
+    <div className="ver" data-side={side}>
+      <div className="kicker">{side} · {when(v.firstSeen)}{v.current && <span className="pill current">current</span>}</div>
+      <b className="ver-name">{v.name}</b>
+      <div className="muted">
+        {def && <>{plural(criterionIds(def).length, "criterion", "criteria")} · </>}judge {v.judgeLabel} · {plural(v.count, "trial")} graded · task {v.label != null ? <>v{v.label}</> : <code title={`Task hash ${v.taskHash}`}>{short(v.taskHash)}</code>} · <code title={`Grading hash ${v.hash}`}>{short(v.hash)}</code>
+      </div>
+    </div>
+  );
+}
+
+/** Old and new text with the changed words marked. */
+function Words({ a, b }: { a: string; b: string }) {
+  return <>{wordChanges(a, b).map((p, i) => (p.kind === "added" ? <ins key={i}>{p.text}</ins> : p.kind === "removed" ? <del key={i}>{p.text}</del> : <span key={i}>{p.text}</span>))}</>;
+}
+
+/** One changed part of the engine revision: its name, and the two revisions when it has them (the instructions are a hash of their wording). */
+function EngineChangeLine({ c }: { c: EngineChange }) {
+  const name = engineChangeName(c);
+  return (
+    <li className="change">
+      <b>Engine</b>: {name}
+      {c.part !== "revision" && typeof c.a === "number" && <> (revision {c.a} to {c.b})</>}
+      {c.part === "instructions" && (c.name === "derived" ? " (the text a judge gets with derived evidence)" : " (the wording every judge gets)")}
+      . The grading code changed.
+    </li>
+  );
+}
+
+const FIELD: Record<string, string> = { question: "Question", check: "Check", grader: "Grader", evidence: "Evidence", isolate: "Graded alone", derived: "Derived evidence" };
+const valueText = (v: unknown) => (v == null ? "(none)" : typeof v === "string" ? v : JSON.stringify(v));
+
+/** The measure a criterion is in under either version, for its label. */
+const measureOf = (r: GradingComparison, id: string) =>
+  [...r.b.def.measures, ...r.a.def.measures].find((m) => m.criteria.some((c) => c.id === id))?.label;
+
+/** How a criterion changed, in one or two words, for its mark. */
+function changeWord(c: CriterionDiff | undefined): string {
+  if (!c) return "script changed";
+  if (c.change !== "changed") return c.change;
+  return c.fields.length === 1 && c.fields[0]!.field === "question" ? "reworded" : "changed";
+}
+
+function CriterionChange({ r, c }: { r: GradingComparison; c: CriterionDiff }) {
+  const where = c.kind === "gate" ? "gate" : measureOf(r, c.id) ? `measure: ${measureOf(r, c.id)}` : "criterion";
+  const content = c.b ?? c.a!;
+  return (
+    <li className="change">
+      <div><b><code>{c.id}</code></b> <span className="muted">({where})</span> <span className={`pill mark ${c.change}`}>{changeWord(c)}</span></div>
+      {c.change !== "changed"
+        ? <div className="diff">{c.change === "added" ? <ins>{content.question}</ins> : <del>{content.question}</del>}</div>
+        : c.fields.map((f) => (
+          <div key={f.field} className="diff">
+            {f.field !== "question" && <span className="field">{FIELD[f.field] ?? f.field}: </span>}
+            <Words a={valueText(f.a)} b={valueText(f.b)} />
+          </div>
+        ))}
+    </li>
+  );
+}
+
+const anyFile = (f: FileChanges) => f.added.length + f.removed.length + f.changed.length > 0;
+function Files({ label, f }: { label: string; f: FileChanges }) {
+  if (!anyFile(f)) return null;
+  const list = (word: string, names: string[]) => names.length > 0 && <span>{word} {names.map((n, i) => <span key={n}>{i > 0 && ", "}<code>{n}</code></span>)}</span>;
+  return <li className="change"><b>{label}</b>: {[list("changed", f.changed), list("added", f.added), list("removed", f.removed)].filter(Boolean).map((x, i) => <span key={i}>{i > 0 && "; "}{x}</span>)}</li>;
+}
+
+/** Everything that differs from A to B, in plain words, from the server's difference. */
+function WhatChanged({ r }: { r: GradingComparison }) {
+  const d: GradingDiff = r.diff;
+  const total = new Set([...criterionIds(r.a.def), ...criterionIds(r.b.def)]).size;
+  const files = [d.files.references, d.files.sources, d.files.grader, ...(d.task ? [d.task.inputs, d.task.project] : [])].some(anyFile);
+  const measures = d.measures.filter((m) => !m.byCriteriaOnly);
+  return (
+    <section className="card what-changed" aria-label="What changed">
+      <h2>What changed from A to B</h2>
+      {d.same ? <p className="sub">Nothing differs between the stored snapshots of these two grading versions.</p> : <>
+        <p className="sub">
+          {d.criteria.length > 0 ? `${d.criteria.length} of ${plural(total, "criterion", "criteria")} and gates differ.` : "No criterion or gate differs."}
+          {d.criteriaOnly && " Nothing else differs: no measure, context, file, judge or engine change."}
+        </p>
+        <ul className="changes">
+          {d.criteria.map((c) => <CriterionChange key={`${c.kind}-${c.id}`} r={r} c={c} />)}
+          {measures.map((m) => (
+            <li key={m.id} className="change">
+              <b>Measure <code>{m.id}</code></b>: {m.change === "changed" ? "changed" : m.change}
+              {m.weight && <>; weight {m.weight.a ?? "none"} to {m.weight.b ?? "none"}</>}
+              {m.criteria.added.length > 0 && <>; criteria put in: {m.criteria.added.map((c) => <code key={c}> {c}</code>)}</>}
+              {m.criteria.removed.length > 0 && <>; criteria taken out: {m.criteria.removed.map((c) => <code key={c}> {c}</code>)}</>}
+            </li>
+          ))}
+          {d.context && <li className="change"><b>Context</b> (what every judge reads first)<div className="diff"><Words a={d.context.a ?? ""} b={d.context.b ?? ""} /></div></li>}
+          {d.judge && <li className="change"><b>Judge</b>: {d.judge.a.label} to {d.judge.b.label}</li>}
+          {d.engine.map((c) => <EngineChangeLine key={`${c.part}-${c.name}`} c={c} />)}
+          {d.task && <li className="change">
+            <b>Task</b>: <TaskVersion label={d.task.label.a} hash={d.task.a} /> to <TaskVersion label={d.task.label.b} hash={d.task.b} />. The agents were given a different job.
+            {d.task.prompt && " The prompt changed."}{d.task.output && " The output path changed."}
+          </li>}
+          {d.task && <Files label="Input files" f={d.task.inputs} />}
+          {d.task && <Files label="Project files" f={d.task.project} />}
+          <Files label="Check scripts" f={d.files.grader} />
+          <Files label="References" f={d.files.references} />
+          <Files label="Sources" f={d.files.sources} />
+          {d.files.heldOut && <li className="change"><b>Held-out original</b>: changed</li>}
+        </ul>
+        {(files || d.files.heldOut) && <p className="note">A changed file is listed by name only. The store keeps a hash of each file, not its content.</p>}
+      </>}
+    </section>
+  );
+}
+
+/** Each config's score under both versions, and each criterion whose pass rate moved. */
+function Effect({ r }: { r: GradingComparison }) {
+  if (!r.sameTask) {
+    return (
+      <section className="card" aria-label="Effect on scores">
+        <h2>Effect on scores</h2>
+        <p className="note no-shared">These two grading versions grade two different task versions, so the agents did a different job and the versions share no trials. No scores are compared.</p>
+      </section>
+    );
+  }
+  const changes = new Map(r.diff.criteria.map((c) => [c.id, c]));
+  const configs = new Map(r.configs.map((c) => [c.configKey, c]));
+  const size = (m: CompareCriterion) => (m.a == null || m.b == null ? 2 : Math.abs(m.b - m.a));
+  const moved = r.criteria.filter((m) => m.moved).sort((p, q) => size(q) - size(p) || (p.criterionId < q.criterionId ? -1 : 1));
+  return (
+    <section className="card" aria-label="Effect on scores">
+      <h2>Effect on scores</h2>
+      <p className="sub trial-counts">
+        {plural(r.trials, "trial")} {r.trials === 1 ? "has" : "have"} a valid grading under both versions.
+        {r.onlyA + r.onlyB > 0 && ` ${r.onlyA} graded only under A and ${r.onlyB} only under B are not counted.`}
+      </p>
+      {r.trials === 0 ? <p className="note">No trial has a valid grading under both versions yet. Regrade the trials under the other version to compare them.</p> : <>
+        <div className="table-wrap"><table className="compare-scores">
+          <thead><tr><th>Configuration</th><th>n</th><th title={r.a.name}>Under A</th><th title={r.b.name}>Under B</th><th>Change</th></tr></thead>
+          <tbody>{r.configs.map((c) => (
+            <tr key={c.configKey}>
+              <td className="cfg"><Marker s={c} />{c.label}</td>
+              <td className="muted">{c.n}</td><td>{score(c.a)}</td><td>{score(c.b)}</td><td><Change v={c.change} /></td>
+            </tr>
+          ))}</tbody>
+        </table></div>
+
+        <h3 className="moved-head">Criteria whose pass rate moved</h3>
+        <p className="sub">Pass rate per configuration, largest change first. The mark says whether the criterion itself changed between the versions. "—" means the criterion is not in that version.</p>
+        {moved.length === 0 ? <p className="note">No criterion's pass rate moved.</p> : (
+          <div className="table-wrap"><table className="compare-moved">
+            <thead><tr><th>Criterion</th><th>Configuration</th><th>Criterion changed?</th><th>Under A</th><th>Under B</th><th>Change</th></tr></thead>
+            <tbody>{moved.map((m) => {
+              const c = configs.get(m.configKey)!;
+              return (
+                <tr key={`${m.criterionId}-${m.configKey}`}>
+                  <td><code>{m.criterionId}</code></td>
+                  <td className="cfg"><Marker s={c} />{c.label}</td>
+                  <td>{m.changed ? <span className="pill mark changed">{changeWord(changes.get(m.criterionId))}</span> : <span className="pill mark same">unchanged</span>}</td>
+                  <td>{rate(m.a)}</td><td>{rate(m.b)}</td>
+                  <td><Change v={m.a == null || m.b == null ? null : (m.b - m.a) * 100} unit=" pts" /></td>
+                </tr>
+              );
+            })}</tbody>
+          </table></div>
+        )}
+        {r.reading && <p className="reading" aria-label="Reading">{readingText(r.reading)}</p>}
+      </>}
+    </section>
+  );
+}
+
+/** The Reading line, in plain words, from the counts the server computed (DEC-005). */
+function readingText(x: CompareReading): string {
+  const changed = x.changedMoved + x.changedSteady;
+  const crit = (n: number) => plural(n, "criterion", "criteria");
+  if (x.changedMoved + x.unchangedMoved === 0) {
+    return `Reading: no criterion moved${changed === 1 ? ", including the one changed criterion" : changed > 1 ? `, including the ${changed} changed criteria` : ""}.`;
+  }
+  const head = changed === 0 ? "No criterion changed between the versions."
+    : changed === 1 ? `The one changed criterion ${x.changedMoved ? "moved" : "did not move"}.`
+    : x.changedMoved === 0 ? `None of the ${changed} changed criteria moved.`
+    : `${x.changedMoved} of the ${changed} changed criteria moved.`;
+  const rest = x.unchangedMoved === 0 ? "No unchanged criterion moved." : `${crit(x.unchangedMoved)} that did not change moved.`;
+  const judge = x.judgeVariation ? " So the difference is the judge varying between runs, not an effect of the change." : "";
+  return `Reading: ${head[0]!.toLowerCase()}${head.slice(1)} ${rest}${judge}`;
+}