static-fire 0.0.0-stage → 0.54.1

package/web/run-status.ts

@@ -0,0 +1,51 @@
+// The run status indicator in the top bar (US-005 of #21): what GET /api/batches says, in one line. It uses the
+// server's batch state (src/core/batch-state.ts) as the Runs page does, so a batch that is not ended and may have
+// stopped ("stalled") is never counted as running. Reads only the batch route (DEC-008).
+
+/**
+ * How often the dashboard reads the batch route again with no database change. A running batch of another process
+ * reads as stalled once 25 minutes pass with no trial movement, which writes nothing, so no event announces it.
+ */
+export const STATUS_REFRESH_MS = 60_000;
+
+/** The fields of a GET /api/batches row that the indicator reads. */
+export interface StatusBatch {
+  batch: { endedAt: string | null };
+  counts: Record<"queued" | "running" | "done" | "failed" | "invalid", number>;
+  total: number;
+  state: "running" | "stalled" | "ended";
+}
+
+export type RunStatus =
+  | { kind: "none" }
+  /** Nothing running. lastEndedAt is null when no batch has ended. */
+  | { kind: "idle"; lastEndedAt: string | null; stalled: number }
+  /** runs: running batches. ended / total: their trials that ended (done, failed or invalid) of those asked for. */
+  | { kind: "running"; runs: number; ended: number; total: number; stalled: number }
+  /** The batch route failed; error is its message. */
+  | { kind: "unavailable"; error: string };
+
+export function runStatus(rows: StatusBatch[]): RunStatus {
+  if (!rows.length) return { kind: "none" };
+  const stalled = rows.filter((r) => r.state === "stalled").length;
+  const running = rows.filter((r) => r.state === "running");
+  if (running.length) {
+    let ended = 0, total = 0;
+    for (const r of running) { ended += r.counts.done + r.counts.failed + r.counts.invalid; total += r.total; }
+    return { kind: "running", runs: running.length, ended, total, stalled };
+  }
+  let lastEndedAt: string | null = null;
+  for (const r of rows) if (r.state === "ended" && r.batch.endedAt && (!lastEndedAt || r.batch.endedAt > lastEndedAt)) lastEndedAt = r.batch.endedAt;
+  return { kind: "idle", lastEndedAt, stalled };
+}
+
+const runs = (n: number) => `${n} run${n === 1 ? "" : "s"}`;
+
+/** The indicator's words. The progress figure of a running state ("2 of 6") is drawn apart, next to its bar. */
+export function statusText(s: RunStatus, at: (iso: string) => string): string {
+  if (s.kind === "none") return "No runs yet";
+  if (s.kind === "unavailable") return `Run status unavailable: ${s.error}`;
+  if (s.kind === "running") return `${runs(s.runs)} in progress${s.stalled ? ` · ${runs(s.stalled)} may have stopped` : ""}`;
+  return ["No runs in progress", s.lastEndedAt ? `last ended ${at(s.lastEndedAt)}` : "", s.stalled ? `${runs(s.stalled)} not ended, may have stopped` : ""]
+    .filter(Boolean).join(" · ");
+}

package/web/styles.css

@@ -0,0 +1,368 @@
+/* Offset (The AI Launchpad visual system). Every colour, font, radius and shadow comes from
+   ./brand/offset-tokens.css; nothing is defined here that is not a token or a token role.
+   Light scheme only: Offset's dark scheme is for packaging. */
+@import url("./brand/offset-tokens.css");
+
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--ground); color: var(--fg); font-family: var(--font-text); font-size: 15px; line-height: var(--leading-text); -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; cursor: pointer; }
+code { font-family: var(--font-mono); font-size: 0.9em; }
+.app { max-width: 1240px; margin: 0 auto; padding: var(--spacing-24) var(--spacing-16) var(--spacing-64); }
+.muted { color: var(--fg-3); }
+.error { color: var(--fg); background: var(--color-blush); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); padding: var(--spacing-8) var(--spacing-12); font-size: var(--text-sm); }
+.kicker { font-family: var(--font-kicker); font-weight: var(--weight-kicker); font-size: var(--text-sm); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: var(--spacing-8); }
+
+/* top bar */
+.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-12); margin-bottom: var(--spacing-32); }
+.brand { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-xl); display: flex; align-items: center; gap: var(--spacing-8); }
+.brand::before { content: ""; width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--accent); border: var(--outline-width) solid var(--outline); }
+.spacer { flex: 1; }
+
+/* page navigation (#24): one pill per page, the current one filled */
+.nav { display: flex; flex-wrap: wrap; gap: var(--spacing-4, 4px); }
+.nav a { font-weight: 800; color: var(--fg-3); text-decoration: none; border: var(--outline-width) solid transparent; border-radius: var(--radius-pill); padding: 4px var(--spacing-16); }
+.nav a:hover { color: var(--fg); }
+.nav a.on { color: var(--fg); background: var(--accent); border-color: var(--outline); }
+.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16); }
+.page-head .sub { color: var(--fg-3); margin: 0; max-width: 72ch; }
+select, .btn, input[type="number"] { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-sm); padding: var(--spacing-8) var(--spacing-12); font: inherit; color: var(--fg); max-width: 100%; }
+.btn { font-weight: 700; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s; }
+.btn:hover:not(:disabled) { transform: translateY(var(--press-y)); box-shadow: var(--shadow-sm-pressed); }
+.btn-primary { background: var(--accent); }
+.btn-quiet { box-shadow: none; background: var(--surface); margin-top: var(--spacing-16); font-size: var(--text-sm); }
+.btn-quiet:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--color-cream); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+
+/* hero */
+.hero { margin-bottom: var(--spacing-24); }
+.hero h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-size: clamp(2rem, 5vw, var(--text-5xl)); margin: var(--spacing-8) 0 var(--spacing-12); }
+.hero h1 .title-link { color: inherit; text-decoration: none; }
+.hero h1 .title-link:hover, .hero h1 .title-link:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
+.meta { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-24); color: var(--fg-3); font-size: var(--text-sm); margin-bottom: var(--spacing-16); }
+.meta b { color: var(--fg); }
+.progress { display: flex; align-items: center; gap: var(--spacing-12); }
+.progress-track { flex: 1; height: 12px; border-radius: var(--radius-pill); background: var(--raised); border: var(--outline-width) solid var(--outline); overflow: hidden; }
+.progress-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
+.pill { font-size: var(--text-sm); font-weight: 700; padding: 2px var(--spacing-12); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--raised); white-space: nowrap; }
+.pill.live { background: var(--color-mint); }
+.pill.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--outline); margin-right: 6px; animation: pulse 1.4s infinite; }
+@keyframes pulse { 50% { opacity: 0.25; } }
+
+/* view chips */
+.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-16); }
+.chip { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); padding: 4px var(--spacing-16); font-weight: 700; font-size: var(--text-sm); }
+.chip.on { background: var(--accent); box-shadow: var(--shadow-sm-pressed); }
+
+/* filter bar */
+.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-8) var(--spacing-12); margin-bottom: var(--spacing-24); }
+.filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: 700; color: var(--fg-3); min-width: 0; }
+.filters select, .filters input[type="date"] { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-sm); padding: 6px var(--spacing-8); font: inherit; font-weight: 500; color: var(--fg); max-width: 260px; }
+.filters .btn-quiet { margin-top: 0; }
+
+/* filter bar: one Filter button with a searchable menu, and a tag per active filter (#26) */
+.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-24); }
+.filter-bar .pop { position: relative; }
+.filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--spacing-16); border-radius: var(--radius-pill); font-size: var(--text-sm); }
+.filter-btn.on { background: var(--accent); }
+.filter-bar .menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 32px)); background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--spacing-8); }
+.filter-bar .menu input[type="search"] { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-sm); border: 1.5px solid var(--outline); border-radius: var(--radius-xs); padding: 6px var(--spacing-8); margin-bottom: 6px; background: var(--ground); color: var(--fg); }
+.filter-bar .menu-list { max-height: 320px; overflow: auto; }
+.filter-bar .sec, .filter-bar .opt { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--spacing-8); border: 0; background: none; font: inherit; color: var(--fg); text-align: left; cursor: pointer; border-radius: 6px; }
+.filter-bar .sec { padding: 6px; font-weight: 700; font-size: var(--text-sm); }
+.filter-bar .sec i { display: inline-block; width: 14px; font-style: normal; }
+.filter-bar .sec span:last-child { color: var(--fg-3); font-weight: 400; font-size: 12px; text-align: right; }
+.filter-bar .sec span.sec-on { color: var(--fg); font-weight: 700; }
+.filter-bar .sec:hover, .filter-bar .opt:hover, .filter-bar .sec:focus-visible, .filter-bar .opt:focus-visible { background: var(--surface); }
+.filter-bar .opt { padding: 4px 6px; font-size: var(--text-sm); }
+.filter-bar .opt.on { font-weight: 700; }
+.filter-bar .opt em, .filter-bar .menu-flat-dates em { font-style: normal; color: var(--fg-3); }
+.filter-bar .opt small { display: block; color: var(--fg-3); font-weight: 400; font-size: 12px; }
+.filter-bar .opt-count { color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
+.filter-bar .in { padding-left: 14px; }
+.filter-bar .grp { font-weight: 800; font-size: var(--text-xs); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); padding: 6px 6px 2px; }
+.filter-bar .menu-dates { display: flex; flex-wrap: wrap; gap: var(--spacing-8); padding: 4px 6px; }
+.filter-bar .menu-dates label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; color: var(--fg-3); }
+.filter-bar .menu-dates input { border: 1.5px solid var(--outline); background: var(--raised); border-radius: var(--radius-xs); padding: 4px 6px; font: inherit; font-size: var(--text-sm); color: var(--fg); }
+.filter-bar .menu-flat-dates { padding: 4px 6px; font-size: var(--text-sm); }
+.filter-bar .menu-none { margin: 0; padding: 6px; font-size: var(--text-sm); }
+.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-xs); padding: 2px 4px 2px 8px; }
+.tag em { font-style: normal; color: var(--fg-3); }
+.tag.grading { background: var(--color-lavender); }
+.tag button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0 4px; font-weight: 800; color: var(--fg); }
+.clear-all { padding: 3px var(--spacing-12); border-radius: var(--radius-pill); border-style: dashed; box-shadow: none; font-size: var(--text-sm); }
+.clear-all:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--surface); }
+
+/* cards */
+.card { background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--spacing-24); margin-bottom: var(--spacing-32); min-width: 0; }
+.card h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); font-size: var(--text-2xl); margin: var(--spacing-4) 0 var(--spacing-8); }
+.card h3 { font-family: var(--font-heading); font-weight: var(--weight-heading-card); letter-spacing: -0.02em; font-size: var(--text-lg); margin: 0 0 2px; }
+.card .sub { color: var(--fg-3); font-size: var(--text-sm); margin: 0 0 var(--spacing-16); max-width: 72ch; }
+.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); margin-bottom: var(--spacing-32); }
+.grid3 .card { margin-bottom: 0; }
+@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }
+.note { color: var(--fg-3); font-size: var(--text-sm); margin: var(--spacing-12) 0 0; }
+.note.coverage { margin: 0 0 var(--spacing-8); }   /* the one line under the index buttons: what the index covers (#80) */
+.empty { text-align: center; padding: var(--spacing-64) var(--spacing-24); }
+.empty .kicker { justify-content: center; }
+.empty h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-4xl); margin: var(--spacing-8) 0; }
+
+/* legend */
+.legend { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-16); font-size: var(--text-sm); color: var(--fg-2); margin-bottom: var(--spacing-8); }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend .sep { width: 2px; height: 16px; background: var(--line); }
+.swatch { width: 14px; height: 14px; border-radius: 4px; border: var(--outline-width) solid var(--outline); display: inline-block; }
+.marker { flex: none; overflow: visible; }
+.quad-key { width: 18px; height: 12px; background: var(--color-mint); border: var(--outline-width) solid var(--color-mint-2); border-radius: 3px; }
+.pareto-key { width: 20px; border-top: 2px dotted var(--fg); }
+.human-key { width: 20px; border-top: 3px solid var(--color-ink); }
+.chart .human-line { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
+.chart .human-label { fill: var(--fg); font-size: 12.5px; font-weight: 700; paint-order: stroke; stroke: var(--raised); stroke-width: 4px; stroke-linejoin: round; }
+
+/* charts */
+.chart-wrap { position: relative; }
+.chart { width: 100%; display: block; overflow: visible; }
+.chart text { font-family: var(--font-text); fill: var(--fg-3); font-size: 12px; }
+.chart .axis-title { fill: var(--fg-2); font-size: 13px; font-weight: 700; }
+.chart .gridline { stroke: var(--dataviz-grid); }
+.chart .quadrant { fill: var(--color-mint); opacity: 0.55; }
+.chart .pt-label { fill: var(--fg); font-size: 12.5px; font-weight: 500; paint-order: stroke; stroke: var(--raised); stroke-width: 4px; stroke-linejoin: round; }
+.chart .muted { fill: var(--fg-3); }
+.tooltip { position: absolute; pointer-events: none; background: var(--raised); color: var(--fg); border: var(--outline-width) solid var(--outline); box-shadow: var(--shadow-sm); padding: var(--spacing-12); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.5; min-width: 220px; transform: translate(-50%, calc(-100% - 16px)); z-index: 5; }
+.tooltip .tt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.tooltip .row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
+.tooltip .row span:first-child { color: var(--fg-3); }
+
+/* bars */
+.bars { display: flex; flex-direction: column; gap: 10px; }
+.bar-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: var(--spacing-8); align-items: center; font-size: var(--text-sm); }
+.bar-label { display: flex; align-items: center; gap: 6px; line-height: 1.25; color: var(--fg-2); }
+.bar-label .marker { flex: none; }
+.bar-track { position: relative; height: 20px; }
+.bar { position: absolute; left: 0; top: 0; bottom: 0; border: var(--outline-width) solid var(--outline); border-radius: 0 4px 4px 0; min-width: 4px; transition: width .5s ease; }
+.bar-val { position: absolute; top: 50%; transform: translateY(-50%); font-variant-numeric: tabular-nums; font-weight: 700; padding-left: 6px; white-space: nowrap; }
+
+/* tables */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--text-sm); }
+th { font-weight: 700; color: var(--fg-3); font-size: 12px; text-align: center; padding: 6px 4px; vertical-align: bottom; }
+th:first-child, td:first-child { text-align: left; }
+td { padding: var(--spacing-8) 6px; border-radius: var(--radius-xs); text-align: center; font-variant-numeric: tabular-nums; }
+td.cfg, .cfg { white-space: nowrap; display: flex; align-items: center; gap: var(--spacing-8); }
+td.strong, th.strong { font-weight: 800; }
+td .ci { color: var(--fg-3); font-weight: 500; }
+tr.group td { text-align: left; font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 12px; color: var(--fg-3); padding-top: var(--spacing-16); }
+table.criteria td.q { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
+.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); margin-left: 6px; }
+.tag.floor { background: var(--color-cream); }
+.tag.strong { background: var(--color-sky); }
+.tag.ceiling { background: var(--color-lavender); }
+.tag.warn { background: var(--color-blush); }
+td > .tag:first-child { margin-left: 0; }
+td.q .tag { margin-left: var(--spacing-8); }
+
+/* trials */
+.trial-task + .trial-task { margin-top: var(--spacing-24); }
+.trial-rows { display: flex; flex-direction: column; gap: var(--spacing-8); margin-top: var(--spacing-8); }
+.trial-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--spacing-12); align-items: center; font-size: var(--text-sm); }
+@media (max-width: 700px) { .trial-row { grid-template-columns: 1fr; } }
+.trial-cells { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
+.cell { min-width: 96px; padding: 6px 10px; border-radius: var(--radius-xs); border: var(--outline-width) solid var(--outline); background: var(--raised); font-size: 12px; text-align: left; display: flex; flex-direction: column; }
+.cell .k { color: var(--fg-3); font-size: 11px; }
+.cell .v { font-weight: 800; font-variant-numeric: tabular-nums; }
+.cell.done { box-shadow: var(--shadow-sm); }
+.cell.done:hover { transform: translateY(var(--press-y)); box-shadow: var(--shadow-sm-pressed); }
+.cell.running, .cell.grading { background: var(--color-butter); }
+.cell.running .v, .cell.grading .v { animation: pulse 1.4s infinite; font-weight: 600; }
+.cell.invalid { background: var(--color-sun-2); }
+.cell.failed { background: var(--color-blush); }
+.cell.queued { opacity: 0.5; }
+
+/* drawer */
+.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-ink) 35%, transparent); z-index: 10; }
+.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1120px, 100vw); background: var(--ground); border-left: var(--outline-width) solid var(--outline); z-index: 11; display: flex; flex-direction: column; }
+.drawer-head { padding: var(--spacing-16) var(--spacing-24); border-bottom: var(--outline-width) solid var(--outline); display: flex; align-items: flex-start; gap: var(--spacing-12); background: var(--raised); }
+.drawer-head h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-2xl); margin: 4px 0 0; }
+/* Three tabs under the head (#68); each panel takes the drawer's whole width and scrolls on its own. */
+.drawer-tabs { display: flex; gap: var(--spacing-4, 4px); padding: var(--spacing-8) var(--spacing-24) 0; border-bottom: var(--outline-width) solid var(--outline); background: var(--raised); }
+.drawer-tab { border: var(--outline-width) solid transparent; border-bottom: none; background: none; border-radius: var(--radius-xs) var(--radius-xs) 0 0; padding: var(--spacing-8) var(--spacing-16); font-weight: 800; color: var(--fg-3); margin-bottom: calc(-1 * var(--outline-width)); }
+.drawer-tab:hover { color: var(--fg); }
+.drawer-tab.on { color: var(--fg); background: var(--ground); border-color: var(--outline); }
+.drawer-panel { flex: 1; min-height: 0; overflow-y: auto; padding: var(--spacing-24); }
+.drawer-panel.output { display: flex; flex-direction: column; }
+.drawer-panel.output > * { flex-shrink: 0; }
+/* An output in a sandboxed frame (web/output-view.ts): it fills the rest of the panel, like a browser window. */
+.output-frame { display: block; width: 100%; flex: 1 0 480px !important; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); background: #fff; }
+.output-frame.prose-frame { background: var(--ground); border-color: var(--line); }
+.level-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-16); font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--spacing-16); }
+.level-legend .k { font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 11px; color: var(--fg-3); }
+.level-legend .tag { margin-left: 0; }
+.drawer-panel h3 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-xl); margin: 0 0 var(--spacing-12); }
+.stats { display: flex; gap: var(--spacing-24); flex-wrap: wrap; margin-top: var(--spacing-8); }
+.stat .k { color: var(--fg-3); font-size: 12px; }
+.stat .v { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
+.close { margin-left: auto; border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); width: 36px; height: 36px; font-size: 20px; line-height: 1; }
+.tabs { display: flex; gap: 6px; margin-bottom: var(--spacing-16); }
+.tab { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); padding: 2px var(--spacing-12); font-size: var(--text-sm); font-weight: 700; }
+.tab.on { background: var(--accent); }
+/* An image output in the trial drawer: never wider than the drawer. The rendered Markdown is styled in its frame (web/output-view.ts). */
+.output-image { display: block; max-width: 100%; height: auto; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); }
+pre.raw { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; }
+.verdict-group { margin-bottom: var(--spacing-24); }
+.verdict-group > .crit-head { display: flex; justify-content: space-between; font-size: var(--text-lg); margin-bottom: var(--spacing-8); }
+.crit-score { font-weight: 800; font-variant-numeric: tabular-nums; }
+.crit { background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); margin-bottom: var(--spacing-8); }
+.crit-top { display: flex; gap: var(--spacing-8); align-items: flex-start; }
+.crit-top .q { font-size: var(--text-sm); font-weight: 600; }
+.crit-meta { display: flex; gap: var(--spacing-8); align-items: center; margin: 6px 0 2px; font-size: 12px; }
+.crit-meta .tag { margin-left: 0; }
+.reason { margin: 4px 0 0; font-size: var(--text-sm); color: var(--fg-2); }
+.badge { flex: none; font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); }
+.badge.pass { background: var(--color-mint); }
+.badge.fail { background: var(--color-blush); }
+.badge.split { background: var(--color-sun-2); }
+.badge.err { background: var(--color-cream); }
+.conditions { color: var(--fg-3); font-size: 12px; font-weight: 400; }
+.conditions-list, .gradings { margin-bottom: var(--spacing-24); }
+.conditions-list dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--spacing-12); margin: 0; font-size: var(--text-sm); }
+.conditions-list dt { color: var(--fg-3); }
+.conditions-list dd { margin: 0; overflow-wrap: anywhere; }
+.gradings ul { list-style: none; margin: 0; padding: 0; }
+.gradings li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--spacing-12); padding: var(--spacing-8) var(--spacing-12); margin-bottom: 6px; background: var(--raised); border: var(--outline-width) solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
+.gradings li.counted { border-color: var(--outline); box-shadow: inset 4px 0 0 var(--accent); }
+.gradings .g-name { flex-basis: 100%; font-weight: 700; }
+.gradings .g-score { font-weight: 800; font-variant-numeric: tabular-nums; }
+.gradings .g-status.invalid { color: var(--fg-2); }
+.gradings .g-counted { margin-left: auto; font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--accent); }
+
+/* modal */
+.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--raised); border: var(--outline-width) solid var(--outline); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: var(--spacing-24); z-index: 11; }
+.modal h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-2xl); margin: 0 0 var(--spacing-16); }
+.modal fieldset { border: none; padding: 0; margin: 0 0 var(--spacing-16); }
+.modal legend { font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 12px; color: var(--fg-3); margin-bottom: 4px; }
+.modal label.opt { display: flex; align-items: center; gap: var(--spacing-8); padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
+.modal label.opt .muted { margin-left: auto; font-size: 12px; }
+.modal select { width: 100%; }
+.modal .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16); margin-top: var(--spacing-12); font-size: var(--text-sm); }
+.modal .row label { display: flex; align-items: center; gap: var(--spacing-8); }
+.modal .row.end { justify-content: flex-end; }
+.modal input[type="number"] { width: 72px; padding: 4px var(--spacing-8); }
+.envelope { background: var(--surface); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-16); font-size: var(--text-sm); }
+.envelope .k { font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 11px; color: var(--fg-3); margin-top: 4px; }
+.envelope .subject { font-weight: 800; font-size: var(--text-lg); }
+
+/* batches panel (#13) */
+.batches { margin-bottom: var(--spacing-24); }
+.batch-list { list-style: none; margin: var(--spacing-12) 0 0; padding: 0; display: grid; gap: var(--spacing-12); }
+.batch { border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); background: var(--raised); }
+/* one row per batch, in the columns of .batch-cols; stacked on narrow screens */
+.batch-cols, .batch-head { display: grid; grid-template-columns: minmax(10em, 1fr) minmax(0, 2fr) minmax(150px, 1.5fr) 7.5em; gap: var(--spacing-8) var(--spacing-16); align-items: center; }
+.batch-cols { margin: var(--spacing-12) 0 0; padding: 0 calc(var(--spacing-12) + var(--outline-width)); font-family: var(--font-kicker); font-weight: var(--weight-kicker); font-size: 12px; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); }
+.batch-head { width: 100%; text-align: left; background: none; border: 0; padding: 0; }
+.batch-id { display: flex; flex-direction: column; min-width: 0; }
+.batch-id code { color: var(--fg-3); font-size: 12px; }
+.batch-asked { color: var(--fg-3); font-size: var(--text-sm); min-width: 0; }
+.batch-progress { display: flex; flex-direction: column; min-width: 0; }
+.batch-head .batch-state { justify-self: start; }
+@media (max-width: 720px) { .batch-cols { display: none; } .batch-head { grid-template-columns: 1fr; } }
+.batch-state { font-size: var(--text-sm); font-weight: 700; padding: 2px var(--spacing-12); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--surface); white-space: nowrap; }
+.batch-state.running { background: var(--color-mint); }
+.batch-state.stalled { background: var(--color-sun-2); }
+.batch-bar { display: flex; height: 10px; margin: 0 0 var(--spacing-4, 4px); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); overflow: hidden; background: var(--surface); }
+.batch-bar .seg { flex-basis: 0; transition: flex-grow .4s ease; }
+.batch-bar .seg.done { background: var(--color-mint); }
+.batch-bar .seg.failed { background: var(--color-blush); }
+.batch-bar .seg.invalid { background: var(--color-sun-2); }
+.batch-bar .seg.running { background: var(--color-butter); }
+.batch-bar .seg.queued { background: var(--surface); }
+.batch-line { font-size: var(--text-sm); }
+.batch-trials { width: 100%; border-collapse: collapse; margin-top: var(--spacing-8); font-size: var(--text-sm); }
+.batch-trials th, .batch-trials td { text-align: left; padding: 2px var(--spacing-8); border-top: 1px solid var(--dataviz-grid); }
+.status.done { color: var(--fg); }
+.status.failed, .status.invalid { font-weight: 700; }
+
+/* the one alert in the chart card (#82): a button, and details that float over the page so the card does not grow */
+.notice { position: relative; margin-top: var(--spacing-12); }
+.notice-btn { display: inline-flex; align-items: center; gap: var(--spacing-8); font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--fg); background: var(--color-cream); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: 4px var(--spacing-12); cursor: pointer; }
+.notice-btn:hover, .notice-btn.on { background: var(--surface); }
+.notice-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
+.notice-more { font-weight: 400; color: var(--fg-3); text-decoration: underline; }
+.notice-details { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(560px, calc(100vw - 32px)); max-height: min(60vh, 520px); overflow: auto; box-sizing: border-box; background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--spacing-12) var(--spacing-16); font-size: var(--text-sm); text-align: left; }
+.notice-details > ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--spacing-8); }
+.notice-details .notice-action { list-style: none; margin-left: -1.2em; }
+.notice-details .notice-action .btn-quiet { margin-top: 0; }
+.notice-details .notice-action .note { margin-top: 4px; }
+.notice-details .error { margin-top: 4px; }
+.notice-groups { margin: 4px 0; padding-left: 1.2em; }
+.notice-how { display: inline-block; margin-top: var(--spacing-12); color: var(--fg); }
+.empty .notice { text-align: left; max-width: 72ch; margin: var(--spacing-24) auto 0; }
+.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; cursor: pointer; }
+
+/* chart card: Chart / Table toggle and the config table */
+.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-8) var(--spacing-16); }
+.card-head .task-menu { max-width: 360px; font-weight: 700; font-size: var(--text-sm); }
+.view-toggle { display: inline-flex; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-pill); overflow: hidden; background: var(--raised); }
+.view-toggle button { font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--fg); border: 0; background: transparent; padding: 4px var(--spacing-16); cursor: pointer; }
+.view-toggle button + button { border-left: var(--outline-width) solid var(--outline); }
+.view-toggle button.on { background: var(--accent); }
+table.configs th.num, table.configs td.num { text-align: right; white-space: nowrap; }
+table.configs th:last-child, table.configs td:last-child { text-align: left; white-space: nowrap; }
+table.configs tbody tr { cursor: pointer; }
+table.configs tbody tr:hover td { background: var(--ground); }
+table.configs .why { color: var(--fg-3); font-size: 12px; margin-top: 2px; }
+
+/* Compare page (#27): the two picked versions, what changed between them, and the moved criteria */
+.compare-picks { margin-bottom: var(--spacing-16); }
+.compare-picks select { max-width: 420px; }
+.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); }
+@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }
+.ver { border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); background: var(--color-lavender); min-width: 0; }
+.ver .ver-name { display: block; font-size: var(--text-lg); margin: 2px 0; }
+.ver .muted { font-size: var(--text-sm); }
+.pill.current { background: var(--accent); font-size: 11px; padding: 0 var(--spacing-8); letter-spacing: 0; text-transform: none; }
+.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
+.change { min-width: 0; }
+.diff { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--ground); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); padding: var(--spacing-8) var(--spacing-12); margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.diff del { background: var(--color-blush); text-decoration: line-through; }
+.diff ins { background: var(--color-mint); text-decoration: none; }
+.diff .field { color: var(--fg-3); font-weight: 700; }
+.pill.mark { font-size: 11px; padding: 0 var(--spacing-8); }
+.pill.mark.changed, .pill.mark.added, .pill.mark.removed { background: var(--color-lavender); }
+.pill.mark.same { background: var(--color-cream); }
+.delta { font-weight: 700; padding: 1px 6px; border-radius: var(--radius-xs); }
+.delta.up { background: var(--color-mint); }
+.delta.down { background: var(--color-blush); }
+.moved-head { margin-top: var(--spacing-24) !important; }
+.reading { background: var(--color-butter); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-8) var(--spacing-12); margin: var(--spacing-16) 0 0; font-weight: 600; }
+/* run status indicator in the top bar (#25): a pill that opens the Runs page */
+.run-status { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-sm); font-weight: 600; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-pill); padding: 3px var(--spacing-12); background: var(--raised); max-width: 100%; text-align: left; }
+.run-status:hover { background: var(--color-cream); }
+.run-status .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--color-mint-2); }
+.run-status .dot.none { background: var(--surface); }
+.run-status .dot.run { background: var(--color-sun); animation: run-pulse 1.2s infinite; }
+.run-status .dot.stalled, .run-status .dot.unavailable { background: var(--color-blush-2); }
+@keyframes run-pulse { 50% { opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .run-status .dot.run { animation: none; } }
+.run-status .mini { flex: none; width: 70px; height: 7px; border: 1.5px solid var(--outline); border-radius: 4px; overflow: hidden; background: var(--raised); }
+.run-status .mini b { display: block; height: 100%; background: var(--color-sun); transition: width .4s ease; }
+.run-status-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* Tasks and How it works pages (#79) */
+.page-sub { color: var(--fg-3); margin: 0; max-width: 72ch; }
+.task-entry { padding-top: var(--spacing-24); margin-top: var(--spacing-24); border-top: 2px solid var(--line); scroll-margin-top: var(--spacing-16); }
+.task-entry h3 { font-size: var(--text-xl); }
+.task-entry h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--fg-3); margin: var(--spacing-16) 0 var(--spacing-8); }
+.task-version { font-size: var(--text-sm); font-weight: 500; }
+.task-desc { margin: var(--spacing-4, 4px) 0 0; max-width: 72ch; }
+.task-prompt { white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-xs); padding: var(--spacing-12); margin: 0; max-width: 90ch; }
+.task-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--spacing-16); margin: var(--spacing-12) 0 0; font-size: var(--text-sm); }
+.task-facts dt { font-weight: 700; color: var(--fg-3); }
+.task-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px var(--spacing-8); overflow-wrap: anywhere; }
+.task-criteria td.question { text-align: left; }
+.task-criteria .group-note { text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-weight: 500; }
+.task-suite, .how-section { scroll-margin-top: var(--spacing-16); }
+.how-it-works { max-width: 80ch; }
+.how-section + .how-section { margin-top: var(--spacing-24); padding-top: var(--spacing-16); border-top: 2px solid var(--line); }
+.how-section p, .how-section li { line-height: 1.55; }
+.how-section ul { padding-left: var(--spacing-24); }
+.how-section li + li { margin-top: 6px; }
+.how-section .tag { margin: 0 var(--spacing-8) 0 0; }

package/web/task-card.ts

@@ -0,0 +1,6 @@
+// The per-task cards of the Results page (#81, DEC-022 of #71): "Where the points come from" and "Trials" are
+// one card each, with a menu of the tasks in view, so the page does not grow with the number of tasks.
+
+/** The task a card shows: the picked one while it is in view, else the first task in view. */
+export const shownTask = (taskIds: string[], picked: string | null): string | null =>
+  picked && taskIds.includes(picked) ? picked : taskIds[0] ?? null;

package/web/tasks.tsx

@@ -0,0 +1,122 @@
+// The Tasks page (#79): each suite and its tasks, from the project's own files. For each task, what the agent gets,
+// where it writes, and how the output is graded. The server sends only what core/task-page.ts allows, so the graders'
+// own material (references, sources, the held-out file) never reaches this page. Each suite and task has an address
+// of its own (web/pages.ts: suiteHref, taskHref), so another page can link to it.
+import { useEffect, useState } from "react";
+import type { TaskListing } from "../src/core/authored";
+import type { TaskPage, TaskPageCriterion } from "../src/core/task-page";
+import type { Suite } from "../src/core/types";
+import { api } from "./api";
+import { LevelTag } from "./levels";
+import { suiteAnchor, taskAnchor, taskHref } from "./pages";
+
+const GRADER_TEXT: Record<TaskPageCriterion["grader"], string> = { check: "Check", judge: "Judge", human: "Human" };
+
+/** A task as the page has it: its details, or the reason it has none (an invalid task file). */
+type Loaded = { page: TaskPage } | { error: string };
+
+export function TasksPage() {
+  const [suites, setSuites] = useState<Suite[] | null>(null);
+  const [listing, setListing] = useState<TaskListing[]>([]);
+  const [tasks, setTasks] = useState<Record<string, Loaded>>({});
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let live = true;
+    Promise.all([api<Suite[]>("/api/suites"), api<TaskListing[]>("/api/tasks")])
+      .then(async ([s, l]) => {
+        const loaded = await Promise.all(l.map((t) =>
+          api<TaskPage>(`/api/tasks/${encodeURIComponent(t.id)}`).then((page): Loaded => ({ page }), (e: Error): Loaded => ({ error: e.message }))));
+        if (!live) return;
+        setSuites(s); setListing(l);
+        setTasks(Object.fromEntries(l.map((t, i) => [t.id, loaded[i]!])));
+      })
+      .catch((e: Error) => { if (live) setError(e.message); });
+    return () => { live = false; };
+  }, []);
+  // A link to one suite or task opens the page there, once the entries exist.
+  useEffect(() => {
+    if (!suites || !location.hash) return;
+    document.getElementById(decodeURIComponent(location.hash.slice(1)))?.scrollIntoView();
+  }, [suites]);
+
+  if (error) return <div className="empty card"><div className="kicker">Could not load the tasks</div><p className="error" style={{ whiteSpace: "pre-wrap" }}>{error}</p></div>;
+  if (!suites) return <div className="empty card"><div className="kicker">Tasks</div><h1>Loading…</h1></div>;
+
+  // Each task is shown once, under the first suite that lists it; a later suite links to it.
+  const shown = new Set<string>();
+  const title = (id: string) => listing.find((t) => t.id === id)?.title ?? id;
+  const groups = suites.map((s) => ({ suite: s, tasks: s.tasks.map((id) => { const first = !shown.has(id); shown.add(id); return { id, first }; }) }));
+  const loose = listing.filter((t) => !shown.has(t.id)).map((t) => t.id);
+
+  return (
+    <>
+      <section className="hero">
+        <div className="kicker">Tasks</div>
+        <h1>Suites and tasks</h1>
+        <p className="page-sub">What each task asks of the agent and how its output is graded, from the project's task files. Graders' own material (references, sources, the held-out file) is not shown.</p>
+      </section>
+      {groups.map(({ suite, tasks: ids }) => (
+        <section key={suite.id} id={suiteAnchor(suite.id)} className="card task-suite">
+          <div className="kicker">Suite</div>
+          <h2>{suite.title}</h2>
+          {suite.description && <p className="sub">{suite.description}</p>}
+          {ids.length === 0 && <p className="note">This suite lists no tasks.</p>}
+          {ids.map(({ id, first }) => first ? <TaskEntry key={id} id={id} title={title(id)} loaded={tasks[id]} />
+            : <p key={id} className="note task-ref">{title(id)}: <a href={taskHref(id)}>shown above</a>.</p>)}
+        </section>
+      ))}
+      {loose.length > 0 && (
+        <section className="card task-suite">
+          <div className="kicker">Not in a suite</div>
+          <h2>Other tasks</h2>
+          <p className="sub">These tasks are in no suite, so the Results page has no suite index for them.</p>
+          {loose.map((id) => <TaskEntry key={id} id={id} title={title(id)} loaded={tasks[id]} />)}
+        </section>
+      )}
+    </>
+  );
+}
+
+function TaskEntry({ id, title, loaded }: { id: string; title: string; loaded?: Loaded }) {
+  if (!loaded || "error" in loaded) {
+    return (
+      <article id={taskAnchor(id)} className="task-entry">
+        <h3>{title}</h3>
+        <p className="error" style={{ whiteSpace: "pre-wrap" }}>This task file has errors, so it cannot run:{"\n"}{loaded?.error ?? "not found"}</p>
+      </article>
+    );
+  }
+  const t = loaded.page;
+  const groups = [{ id: "gates", label: "Gates", note: "If a gate fails, the task score is 0.", criteria: t.gates }, ...t.measures.map((m) => ({ ...m, note: m.weight !== 1 ? `Weight ${m.weight}` : "" }))]
+    .filter((g) => g.criteria.length);
+  return (
+    <article id={taskAnchor(id)} className="task-entry">
+      <h3>{t.title}{t.version != null && <span className="muted task-version"> v{t.version}</span>}</h3>
+      {t.description && <p className="task-desc">{t.description}</p>}
+      <h4>What the agent gets</h4>
+      <pre className="task-prompt">{t.prompt}</pre>
+      <dl className="task-facts">
+        <dt>Input files</dt><dd>{t.inputFiles.length ? t.inputFiles.map((f) => <code key={f}>{f}</code>) : <span className="muted">None</span>}</dd>
+        {t.projectFiles && <><dt>Project files</dt><dd>{t.projectFiles.length ? t.projectFiles.map((f) => <code key={f}>{f}</code>) : <span className="muted">None</span>}</dd></>}
+        <dt>Output</dt><dd><code>{t.output}</code></dd>
+      </dl>
+      <h4>How it is graded</h4>
+      <div className="table-wrap"><table className="criteria task-criteria">
+        <thead><tr><th>Question</th><th>Level</th><th>Grader</th></tr></thead>
+        <tbody>
+          {groups.map((g) => [
+            <tr key={g.id} className="group"><td colSpan={3}>{g.label}{g.note && <span className="group-note"> · {g.note}</span>}</td></tr>,
+            ...g.criteria.map((c) => (
+              <tr key={`${g.id}-${c.id}`}>
+                <td className="question">{c.question}</td>
+                <td><LevelTag level={c.level} /></td>
+                <td className="muted">{GRADER_TEXT[c.grader]}</td>
+              </tr>
+            )),
+          ])}
+        </tbody>
+      </table></div>
+    </article>
+  );
+}

package/web/wording.ts

@@ -0,0 +1,38 @@
+// The changed words between two wordings of one text (a reworded question, a changed context), for the Compare
+// page to mark. Display only: what changed between two grading versions comes from the server's difference.
+
+export interface WordPart { kind: "same" | "added" | "removed"; text: string }
+
+/** Words, runs of spaces and single punctuation marks, so "(the subject" and "(subject" share the "(". */
+const tokens = (s: string) => s.match(/\w+|\s+|[^\w\s]/g) ?? [];
+
+/** Above this many token pairs the texts are shown as one removed and one added part. */
+const MAX_CELLS = 4_000_000;
+
+/**
+ * The parts of `b` against `a`, in reading order: kept, removed (only in `a`) and added (only in `b`). In a run of
+ * changes the removed part comes first. Joined, the kept and removed parts give `a`; the kept and added parts give `b`.
+ */
+export function wordChanges(a: string, b: string): WordPart[] {
+  const x = tokens(a), y = tokens(b);
+  const parts: WordPart[] = [];
+  const push = (kind: WordPart["kind"], text: string) => {
+    const last = parts.at(-1);
+    if (last?.kind === kind) last.text += text; else if (text) parts.push({ kind, text });
+  };
+  if (x.length * y.length > MAX_CELLS) { push("removed", a); push("added", b); return parts; }
+  // lcs[i][j]: the longest common run of tokens of x from i and y from j.
+  const w = y.length + 1, lcs = new Uint32Array((x.length + 1) * w);
+  for (let i = x.length - 1; i >= 0; i--) {
+    for (let j = y.length - 1; j >= 0; j--) {
+      lcs[i * w + j] = x[i] === y[j] ? lcs[(i + 1) * w + j + 1]! + 1 : Math.max(lcs[(i + 1) * w + j]!, lcs[i * w + j + 1]!);
+    }
+  }
+  let i = 0, j = 0;
+  while (i < x.length || j < y.length) {
+    if (i < x.length && j < y.length && x[i] === y[j]) { push("same", x[i]!); i++; j++; }
+    else if (j >= y.length || (i < x.length && lcs[(i + 1) * w + j]! >= lcs[i * w + j + 1]!)) { push("removed", x[i]!); i++; }
+    else { push("added", y[j]!); j++; }
+  }
+  return parts;
+}