npm - @skitterbyte/skitterspec-jira - Versions diffs - 0.0.0-stage → 2.0.0 - Mend

@skitterbyte/skitterspec-jira 0.0.0-stage → 2.0.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 (113) hide show

package/MIGRATION.md +1266 -0
package/README.md +44 -2
package/assets/claude-md-section.md +85 -0
package/assets/commands/allow-main.md +33 -0
package/assets/commands/spec-connect.md +13 -0
package/assets/commands/spec-live.md +14 -0
package/assets/commands/spec-remote-review.md +37 -0
package/assets/commands/spec-skip.md +24 -0
package/assets/core/SETUP.md +192 -0
package/assets/core/env.config.json.example +56 -0
package/assets/core/env.config.md +606 -0
package/assets/core/gating.config.json.example +4 -0
package/assets/core/gating.config.md +81 -0
package/assets/core/jira.config.json.example +18 -0
package/assets/core/jira.config.md +88 -0
package/assets/hooks/main-guard.cjs +162 -0
package/assets/hooks/review-gate.cjs +146 -0
package/assets/review/page.html +3384 -0
package/assets/rules/commit-trailers.md +96 -0
package/assets/rules/negative-checks.md +69 -0
package/assets/rules/offered-unblocks.md +100 -0
package/assets/rules/spec-planning.md +702 -0
package/assets/rules/spec-reports.md +572 -0
package/assets/skills/no-spec/SKILL.md +249 -0
package/assets/skills/spec/SKILL.md +714 -0
package/assets/skills/spec-bug/SKILL.md +585 -0
package/assets/skills/spec-cancel/SKILL.md +261 -0
package/assets/skills/spec-complete/SKILL.md +451 -0
package/assets/skills/spec-diff/SKILL.md +870 -0
package/assets/skills/spec-hotfix/SKILL.md +607 -0
package/assets/skills/spec-init/SKILL.md +178 -0
package/assets/skills/spec-jira-setup/SKILL.md +221 -0
package/assets/skills/spec-list/SKILL.md +173 -0
package/assets/skills/spec-next/SKILL.md +678 -0
package/assets/skills/spec-push/SKILL.md +306 -0
package/assets/skills/spec-review/SKILL.md +256 -0
package/assets/skills/spec-reviewed/SKILL.md +284 -0
package/assets/skills/spec-start/SKILL.md +496 -0
package/assets/skills/spec-status/SKILL.md +114 -0
package/assets/skills/spec-sync/SKILL.md +220 -0
package/assets/skills/spec-to-main/SKILL.md +141 -0
package/bin/skitterspec-jira.js +68 -0
package/package.json +40 -4
package/src/cli.js +5967 -0
package/src/deprecate.js +138 -0
package/src/env/bootstrap.js +188 -0
package/src/env/building.js +143 -0
package/src/env/classify.js +176 -0
package/src/env/commitcmd.js +108 -0
package/src/env/config.js +850 -0
package/src/env/dev.js +63 -0
package/src/env/glob.js +34 -0
package/src/env/hooks.js +226 -0
package/src/env/hotfix.js +413 -0
package/src/env/hotfixland.js +302 -0
package/src/env/integrate.js +167 -0
package/src/env/live.js +479 -0
package/src/env/mainguard.js +299 -0
package/src/env/provision.js +466 -0
package/src/env/proxy.js +225 -0
package/src/env/prune.js +119 -0
package/src/env/registry.js +159 -0
package/src/env/render.js +17 -0
package/src/env/resolve.js +716 -0
package/src/env/review.js +2622 -0
package/src/env/reviewers/coderabbit.js +228 -0
package/src/env/reviewers.js +517 -0
package/src/env/serve.js +1044 -0
package/src/env/supervise.js +157 -0
package/src/env/teardown.js +248 -0
package/src/env/trust.js +87 -0
package/src/gating.js +155 -0
package/src/init.js +1150 -0
package/src/lines-diff.js +114 -0
package/src/prompts.js +129 -0
package/src/vendor/jira/adf.js +414 -0
package/src/vendor/jira/api.js +295 -0
package/src/vendor/jira/cli-sync.js +1252 -0
package/src/vendor/jira/commands.js +44 -0
package/src/vendor/jira/config.js +286 -0
package/src/vendor/jira/credentials.js +108 -0
package/src/vendor/jira/dialect.js +45 -0
package/src/vendor/jira/mcp.js +129 -0
package/src/vendor/provider-kit/index.js +41 -0
package/src/vendor/provider-kit/src/adapter.js +23 -0
package/src/vendor/provider-kit/src/apply.js +207 -0
package/src/vendor/provider-kit/src/args.js +68 -0
package/src/vendor/provider-kit/src/assignment.js +277 -0
package/src/vendor/provider-kit/src/config.js +251 -0
package/src/vendor/provider-kit/src/credentials.js +404 -0
package/src/vendor/provider-kit/src/doctor.js +35 -0
package/src/vendor/provider-kit/src/http.js +63 -0
package/src/vendor/provider-kit/src/identity.js +93 -0
package/src/vendor/provider-kit/src/list-assignee.js +71 -0
package/src/vendor/provider-kit/src/list-rows.js +35 -0
package/src/vendor/provider-kit/src/md-compare.js +39 -0
package/src/vendor/provider-kit/src/md-tables.js +94 -0
package/src/vendor/provider-kit/src/prompt.js +50 -0
package/src/vendor/provider-kit/src/released.js +219 -0
package/src/vendor/provider-kit/src/specs.js +248 -0
package/src/vendor/provider-kit/src/transport.js +22 -0
package/src/vendor/sync-core/index.js +92 -0
package/src/vendor/sync-core/src/base.js +81 -0
package/src/vendor/sync-core/src/compare.js +338 -0
package/src/vendor/sync-core/src/dialect.js +51 -0
package/src/vendor/sync-core/src/fields.js +36 -0
package/src/vendor/sync-core/src/legacy.js +100 -0
package/src/vendor/sync-core/src/normalize.js +971 -0
package/src/vendor/sync-core/src/push.js +85 -0
package/src/vendor/sync-core/src/retarget.js +278 -0
package/src/vendor/sync-core/src/task-block.js +308 -0
package/src/vendor/sync-core/src/verify.js +67 -0
package/src/vendor/sync-core/src/write.js +191 -0

package/assets/review/page.html ADDED Viewed

@@ -0,0 +1,3384 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__REVIEW_TITLE__</title>
+<style>
+/*
+ * THE COMPLETE LIGHT PALETTE LIVES HERE, on bare :root — every token this page
+ * uses is declared in this block and nowhere else gains a first definition. The
+ * two blocks below only REDEFINE. A colour whose sole definition sits inside a
+ * media query or a [data-theme] block is the classic unreadable-in-one-theme
+ * bug, and a test asserts against it.
+ */
+:root {
+  --bg: #ffffff;
+  --fg: #1b1b1f;
+  --muted: #5c6070;
+  --line: #e1e3e8;
+  --panel: #f6f7f9;
+  --panel-2: #eceef2;
+  --accent: #0b5fd0;
+  --focus: #0b5fd0;
+  --add-bg: #e8fbee;
+  --add-fg: #04441c;
+  --add-mark: #1a7f37;
+  --del-bg: #fdecea;
+  --del-fg: #4c0a12;
+  --del-mark: #b8262f;
+  --band-bg: #f0f3f8;
+  --band-fg: #46506a;
+  --ln-fg: #9aa0ae;
+  --chip-bg: #eceef2;
+  --chip-fg: #46506a;
+  --flag-fg: #a3400b;
+  --flag-bg: #fdf0e6;
+  --confirm-fg: #6a4c05;
+  --confirm-bg: #fdf7e3;
+  --good-fg: #1a7f37;
+  --good-bg: #eaf8ee;
+  --note-bg: #eef4ff;
+  --note-fg: #1b2b4d;
+  --note-line: #b9cdf2;
+  --ln-w: 4.5ch;
+}
+:root:not([data-theme="light"]) {
+  @media (prefers-color-scheme: dark) {
+    --bg: #121316;
+    --fg: #e4e6ea;
+    --muted: #969bab;
+    --line: #2a2c34;
+    --panel: #1a1c21;
+    --panel-2: #23262d;
+    --accent: #7fb0ff;
+    --focus: #7fb0ff;
+    --add-bg: #0e2a18;
+    --add-fg: #b7f0c4;
+    --add-mark: #4ac26b;
+    --del-bg: #2e1215;
+    --del-fg: #ffc9c4;
+    --del-mark: #f2685f;
+    --band-bg: #1e2128;
+    --band-fg: #a3aabd;
+    --ln-fg: #6b7183;
+    --chip-bg: #23262d;
+    --chip-fg: #a3aabd;
+    --flag-fg: #ffb083;
+    --flag-bg: #2e1a0d;
+    --confirm-fg: #f2d88a;
+    --confirm-bg: #2a2412;
+    --good-fg: #7ee08a;
+    --good-bg: #12261a;
+    --note-bg: #16202e;
+    --note-fg: #cfe0fa;
+    --note-line: #35486a;
+  }
+}
+:root[data-theme="dark"] {
+  --bg: #121316;
+  --fg: #e4e6ea;
+  --muted: #969bab;
+  --line: #2a2c34;
+  --panel: #1a1c21;
+  --panel-2: #23262d;
+  --accent: #7fb0ff;
+  --focus: #7fb0ff;
+  --add-bg: #0e2a18;
+  --add-fg: #b7f0c4;
+  --add-mark: #4ac26b;
+  --del-bg: #2e1215;
+  --del-fg: #ffc9c4;
+  --del-mark: #f2685f;
+  --band-bg: #1e2128;
+  --band-fg: #a3aabd;
+  --ln-fg: #6b7183;
+  --chip-bg: #23262d;
+  --chip-fg: #a3aabd;
+  --flag-fg: #ffb083;
+  --flag-bg: #2e1a0d;
+  --confirm-fg: #f2d88a;
+  --confirm-bg: #2a2412;
+  --good-fg: #7ee08a;
+  --good-bg: #12261a;
+  --note-bg: #16202e;
+  --note-fg: #cfe0fa;
+  --note-line: #35486a;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  /* Explicit, from a token: a transparent body borrows the host's ground. */
+  background: var(--bg);
+  color: var(--fg);
+  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+.wrap { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 5rem; }
+header { margin-bottom: 1rem; }
+h1 { font-size: 1.3rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
+.sub { color: var(--muted); font-size: .85rem; margin: 0; overflow-wrap: anywhere; }
+.sub .sep { opacity: .5; padding: 0 .35rem; }
+.a { color: var(--add-mark); }
+.d { color: var(--del-mark); }
+.controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0 0; }
+button, .toggle {
+  font: inherit;
+  font-size: .8rem;
+  color: var(--chip-fg);
+  background: var(--chip-bg);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: .28rem .7rem;
+  cursor: pointer;
+}
+button:hover, .toggle:hover { border-color: var(--accent); color: var(--accent); }
+/* Every control gets a VISIBLE focus ring — keyboard review is review too. */
+button:focus-visible,
+summary:focus-visible,
+input:focus-visible,
+.toggle:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.toggle { display: inline-flex; align-items: center; gap: .4rem; user-select: none; }
+.toggle input { accent-color: var(--accent); margin: 0; }
+.layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
+@media (min-width: 60rem) {
+  .layout { grid-template-columns: 17rem minmax(0, 1fr); }
+  .tree-wrap { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
+}
+/* min-width:0 is what stops a wide table forcing the PAGE to scroll sideways. */
+.main { min-width: 0; }
+.tree-wrap {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.tree-wrap > summary {
+  cursor: pointer;
+  padding: .55rem .75rem;
+  font-size: .85rem;
+  font-weight: 600;
+}
+/* The tree scrolls SIDEWAYS; names never wrap. A wrapped name turned every
+   long path into three ragged lines, which is what made the sidebar hard to
+   scan. Indentation is per-row padding rather than nested <ul> padding — see
+   renderTree, which explains why the sticky column below depends on it. */
+.tree { padding: 0 0 .7rem; font-size: .82rem; overflow-x: auto; }
+.tree ul { list-style: none; margin: 0; padding: 0; }
+/* max-content makes the list as wide as its widest row, and min-width keeps it
+   filling the sidebar when everything fits. Together they give every row the
+   same width, which is what `.ct` needs. */
+.tree > ul { width: max-content; min-width: 100%; }
+.tree .dir { color: var(--muted); display: block; padding: .1rem .6rem; white-space: nowrap; }
+.tree-file {
+  display: flex;
+  gap: .4rem;
+  width: 100%;
+  text-align: left;
+  /* A COLOUR, not `none`: `.ct` inherits it to mask the name scrolling under
+     it, and inherit re-resolves on hover so the pinned counts follow the row. */
+  background: var(--panel);
+  border: 0;
+  border-radius: 6px;
+  /* NO horizontal padding, deliberately. A sticky box is clamped by its
+     containing block — this row's content box — so a .6rem side padding gave
+     `.ct` two different resting places: flush to the scrollport while pinned,
+     and .6rem inside it once scrolled to the end, which reads as the counts
+     sliding as you reach the right. The gutters live on `.nm` and `.ct`
+     instead, where they move with the element rather than fencing it in. */
+  padding: .15rem 0;
+  color: inherit;
+  font-size: .82rem;
+}
+.tree-file:hover { background: var(--panel-2); color: inherit; }
+.tree-file .nm { white-space: nowrap; }
+/* Pinned to the right edge of the tree's scrollport, so the change counts stay
+   readable however far the names are scrolled. Sticky can only pin within its
+   own row, which is why every row spans the full scroll width above. */
+.tree-file .ct {
+  margin-left: auto;
+  position: sticky;
+  right: 0;
+  background: inherit;
+  /* The right gutter is PADDING on the pinned element, not a `right` offset.
+     An offset would hold the box away from the edge and let names scroll
+     visibly through the gap beside it; padding keeps the masking background
+     running to the scrollport edge with the text inset. */
+  padding-left: .55rem;
+  padding-right: .6rem;
+  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .45);
+  white-space: nowrap;
+  font-family: ui-monospace, monospace;
+  font-size: .75rem;
+}
+.tree-file.is-noise .nm { color: var(--muted); }
+/* THE FILE YOU ARE READING — the card crossing the top of the viewport.
+   An INSET SHADOW rather than a border or a left padding: either of those
+   would change the row's size, so the highlight moving down the list would
+   shunt every name sideways as it went. A shadow paints inside the box the
+   row already occupies.
+   A DIFFERENT CHANNEL FROM HOVER, deliberately. Hover owns the `--panel-2`
+   background, and the current row is very often NOT the row under your
+   finger — you scroll with one and point with the other. Sharing the
+   treatment would make the two indistinguishable at exactly the moment they
+   disagree, so this is a bar and a colour, and the background is left alone.
+   Leaving it alone also keeps `.ct` masking the names scrolling under it,
+   which is a background the row inherits. */
+.tree-file.is-current { box-shadow: inset 3px 0 0 var(--accent); }
+.tree-file.is-current .nm { color: var(--accent); font-weight: 600; }
+.file {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  margin: 0 0 .9rem;
+  overflow: hidden;
+  background: var(--bg);
+}
+.file > summary {
+  cursor: pointer;
+  padding: .55rem .7rem;
+  background: var(--panel);
+  display: flex;
+  gap: .55rem;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.file[hidden] { display: none; }
+.path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; overflow-wrap: anywhere; }
+.chip {
+  font-size: .68rem;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--chip-fg);
+  background: var(--chip-bg);
+  border-radius: 999px;
+  padding: .1rem .45rem;
+}
+.counts { margin-left: auto; font-size: .78rem; font-family: ui-monospace, monospace; white-space: nowrap; }
+/* The ONLY horizontally scrolling box on the page. */
+.code { overflow-x: auto; border-top: 1px solid var(--line); }
+table.diff { border-collapse: collapse; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
+table.diff td { padding: 0; vertical-align: top; }
+/* One sticky gutter cell rather than three: no left-offset arithmetic to get
+   wrong, and user-select:none means copying the code does not drag line
+   numbers along with it. */
+td.gutter {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+  user-select: none;
+  white-space: pre;
+  color: var(--ln-fg);
+  padding: 0 .4rem;
+  text-align: right;
+}
+td.gutter .n { display: inline-block; min-width: var(--ln-w); }
+td.gutter .s { display: inline-block; min-width: 1.2ch; text-align: center; font-weight: 700; }
+td.src { white-space: pre; padding: 0 .75rem; }
+tr.add td.src { background: var(--add-bg); color: var(--add-fg); }
+tr.add td.gutter .s { color: var(--add-mark); }
+tr.del td.src { background: var(--del-bg); color: var(--del-fg); }
+tr.del td.gutter .s { color: var(--del-mark); }
+tr.meta td.src { color: var(--muted); font-style: italic; }
+tr.band td { background: var(--band-bg); color: var(--band-fg); }
+tr.band td.src { padding: .2rem .75rem; white-space: normal; }
+tr.band .n-hidden { margin-right: .6rem; }
+tr.band button { font-size: .72rem; padding: .1rem .5rem; margin-right: .3rem; }
+.note { color: var(--muted); padding: .6rem .75rem; font-size: .85rem; }
+.empty { color: var(--muted); }
+#review-block:empty { display: none; }
+.review {
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--accent);
+  border-radius: 10px;
+  background: var(--panel);
+  padding: .8rem 1rem;
+  margin: 0 0 1rem;
+}
+.review-summary { margin: 0; }
+.checks { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
+.check {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: .2rem .6rem;
+  align-items: baseline;
+  padding: .4rem .6rem;
+  border-radius: 8px;
+  font-size: .88rem;
+}
+/* The level is a WORD, not a colour — the same reason the diff keeps its +/-
+   gutter. Colour is the second signal here, never the only one. */
+.check-level {
+  font-size: .68rem;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  font-weight: 700;
+  grid-row: 1 / span 2;
+}
+.check-file {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: .78rem;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+  /* A button, because it jumps to the code — but it must keep reading as the
+     quiet path label it has always been, not gain a control's chrome. */
+  background: none;
+  border: 0;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+.check-file:hover { color: inherit; }
+/* WHO SAID IT. Absent on a written review's checks, which is why it is a
+   separate span rather than a prefix on the note: a page with one author looks
+   exactly as it always did. */
+.check-src {
+  grid-column: 2;
+  font-size: .68rem;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  font-weight: 700;
+  color: var(--muted);
+  margin-right: .4rem;
+}
+.check-src + .check-file { grid-column: 2; }
+.check-note { grid-column: 2; }
+/* --- the reviewer strip --------------------------------------------------
+   One line per configured reviewer, present even when every one found nothing.
+   A reviewer that was rate-limited and one that read the diff and approved are
+   the same page without it, and the reader is about to decide whether to
+   commit. */
+.reviewers { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .25rem; }
+.reviewer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  align-items: baseline;
+  font-size: .8rem;
+  color: var(--muted);
+}
+.reviewer-name {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 700;
+  color: var(--fg);
+}
+.reviewer-name::after { content: ' —'; color: var(--muted); font-weight: 400; }
+/* A reviewer that could not run is marked, not hidden — the distinction between
+   "clean" and "never answered" is the whole reason this strip exists. */
+.reviewer.failed .reviewer-said,
+.reviewer.missing .reviewer-said,
+.reviewer.timeout .reviewer-said { color: var(--flag-fg); }
+.reviewer.findings .reviewer-said { color: var(--fg); }
+/* A line a check pointed at, so a jump lands somewhere visible rather than
+   leaving the reader to find the row themselves. */
+tr.goto-hit > td { background: var(--confirm-bg); }
+.check.flag { background: var(--flag-bg); }
+.check.flag .check-level { color: var(--flag-fg); }
+.check.confirm { background: var(--confirm-bg); }
+.check.confirm .check-level { color: var(--confirm-fg); }
+.check.good { background: var(--good-bg); }
+.check.good .check-level { color: var(--good-fg); }
+/* --- review marks: accepts, comments, replies ---------------------------- */
+/* Every colour below comes from a token defined on bare :root above; nothing
+   here gains its first definition inside a theme block. */
+.accept[aria-pressed="true"] {
+  background: var(--good-bg);
+  color: var(--good-fg);
+  border-color: var(--good-fg);
+}
+.chip.accepted { background: var(--good-bg); color: var(--good-fg); }
+.chip.lapsed {
+  background: var(--confirm-bg);
+  color: var(--confirm-fg);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.chip.commented { background: var(--note-bg); color: var(--note-fg); }
+/* The gutter is already user-select:none, so clicking it can never fight with
+   selecting the code beside it — which is why the affordance lives there. */
+td.gutter.can-note { cursor: pointer; }
+td.gutter.can-note:hover { color: var(--accent); }
+tr.has-note td.gutter { box-shadow: inset 2px 0 0 var(--note-line); }
+tr.note-row td {
+  background: var(--note-bg);
+  color: var(--note-fg);
+  white-space: normal;
+  padding: .45rem .75rem;
+  border-top: 1px solid var(--note-line);
+  border-bottom: 1px solid var(--note-line);
+}
+/* A NOTE IS PROSE, AND IT WRAPS TO THE PANE — never to the file.
+   The cell it sits in is a column of `table.diff`, so its width is the longest
+   line of source in this file (`td.src` is white-space:pre): 4,900px for a
+   wrapped markdown spec is ordinary, and a `width:100%` note inside that is four
+   screens wide. It scrolled sideways instead of wrapping, which is what a reader
+   sees as a box that keeps growing.
+   Sticky for the same reason `td.gutter` is: the row can be reached while the
+   pane is scrolled right, and a note you cannot see while typing it is no
+   better. `--pane-w`/`--gutter-w` are measured per code box by `sizeNotes` —
+   measured rather than summed from `--ln-w`, because the gutter is ONE sticky
+   cell precisely so nobody has to do that arithmetic.
+   `max-width` caps it at the cell, so the note can never be the thing that
+   widens the table. */
+.note-body {
+  position: sticky;
+  left: var(--gutter-w, 0px);
+  width: var(--pane-w, 100%);
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.note-meta { font-size: .72rem; color: var(--muted); display: block; margin-bottom: .15rem; }
+.note-text { overflow-wrap: anywhere; }
+.note-row.is-resolved .note-text { text-decoration: line-through; opacity: .75; }
+.note-resolution { display: block; font-size: .82rem; margin-top: .2rem; }
+.note-input {
+  width: 100%;
+  font: inherit;
+  font-size: .85rem;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--note-line);
+  border-radius: 8px;
+  padding: .4rem .5rem;
+  resize: vertical;
+}
+.note-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.note-actions { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
+.strip {
+  border-top: 1px solid var(--line);
+  background: var(--note-bg);
+  color: var(--note-fg);
+  padding: .5rem .75rem;
+  font-size: .85rem;
+  display: grid;
+  gap: .4rem;
+}
+.strip .note-input { font-size: .85rem; }
+.reply { grid-column: 2; margin-top: .35rem; }
+.reply .note-input { font-size: .85rem; }
+.reply-given {
+  grid-column: 2;
+  margin-top: .35rem;
+  font-size: .85rem;
+  border-left: 2px solid var(--note-line);
+  padding-left: .5rem;
+}
+/* --- the verdict bar ----------------------------------------------------- */
+/* Every colour here is an existing token: approve borrows the `good` pair and
+   changes the `flag` pair, so the bar needs no palette of its own. */
+.verdict {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  align-items: center;
+  margin: .9rem 0 0;
+  padding: .6rem .7rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+/* WHERE THIS REVIEW LIVES, and whether it is also running. It sits ABOVE the
+   verdicts because the question it answers — do I want to look at this running
+   before I conclude? — comes before the conclusion, not after it. Visually its
+   own strip, because it is not a verdict: pressing one of these changes what is
+   running (or which surfaces are permitted) and hands the reader straight back
+   to the same page with the same options. */
+.surfaces {
+  margin: 1.2rem 0 0;
+  padding: .55rem .7rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.surfaces[hidden] { display: none; }
+.surfaces-title { display: block; font-size: .8rem; color: var(--muted); margin: 0 0 .35rem; }
+.surface-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0; }
+.surface-label { font-size: .8rem; font-weight: 600; min-width: 4.5rem; }
+.surface-state { font-size: .8rem; color: var(--muted); }
+.surface-note { font-size: .78rem; color: var(--muted); }
+/* The command, for a page with no transport. Same treatment as the verdict
+   command list: plain text a single tap selects whole, never an input. */
+.surface-cmd { font-size: .78rem; user-select: all; }
+.verdict-end { margin: 1.2rem 0 0; }
+.verdict-title { font-size: .8rem; color: var(--muted); }
+.verdict-count { font-size: .8rem; color: var(--muted); }
+.v-commit { color: var(--good-fg); background: var(--good-bg); }
+/* Continue borrows the same affirmative pair: it is the mid-run reader saying
+   carry on, and it never appears beside a commit button to be confused with. */
+.v-continue { color: var(--good-fg); background: var(--good-bg); }
+.v-changes { color: var(--flag-fg); background: var(--flag-bg); }
+/* A button the render did not ask for is GONE, not dimmed — a disabled control
+   invites a reader to work out how to enable it, and there is nothing to do. */
+.verdict button[hidden] { display: none; }
+/* AND THE BAR ITSELF. `display: flex` beats the browser's `[hidden]`, so the
+   whole bar stayed on screen on a `file://` page — offering four buttons that
+   POST to a server that is not there, directly above the command list that
+   exists because they cannot. The guard in `assets-review` only read the
+   template for a `hidden` attribute, and this element is hidden at runtime, so
+   it never saw it; the guard reads the script now too. */
+.verdict[hidden] { display: none; }
+/* A blocked control is dashed as well as dimmed, so the block survives a
+   greyscale screen — and the reason rides in the label, never in a tooltip
+   nobody hovers on a phone. */
+button:disabled { color: var(--muted); background: var(--panel-2); border-style: dashed; cursor: not-allowed; }
+button:disabled:hover { color: var(--muted); border-color: var(--line); }
+.verdict-log { font-size: .8rem; color: var(--muted); margin: .45rem 0 0; }
+.verdict-log[hidden] { display: none; }
+/* Not muted, unlike the log beneath it: this one is the reason a press did
+   nothing, and a grey line under a bar that appeared to ignore you reads as a
+   broken page. */
+.verdict-warn {
+  font-size: .85rem;
+  color: var(--flag-fg);
+  background: var(--flag-bg);
+  border-left: 3px solid var(--flag-fg);
+  border-radius: 0 6px 6px 0;
+  padding: .45rem .6rem;
+  margin: .5rem 0 0;
+}
+.verdict-warn[hidden] { display: none; }
+/* Which engine drew this page. A render is always current and a stale RENDERER
+   is invisible without it — the counts move, the date moves, the diff is right. */
+.drawn-by { font-size: .75rem; color: var(--muted); margin: .9rem 0 0; }
+.copy-out {
+  width: 100%;
+  min-height: 8rem;
+  margin-top: .6rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: .75rem;
+  color: var(--fg);
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: .5rem;
+}
+.copy-out[hidden] { display: none; }
+/* THE REVIEW, ONCE IT IS OVER. A verdict that has actually been handed over
+   ends the page: the diff fades out and what you decided takes its place. The
+   fade is a transition on a class rather than a timer, so nothing depends on
+   JavaScript finishing, and `Show the diff anyway` brings it back — read-only,
+   with the buttons dead. */
+.reviewable { transition: opacity .35s ease; }
+.is-decided .reviewable { display: none; }
+.is-decided.show-diff .reviewable { display: block; opacity: .75; }
+.is-decided.show-diff .reviewable:hover { opacity: 1; }
+/* Bringing the diff back must not resurrect a section that was hidden for its
+   own reasons — a spec with no context ships `#context` hidden, and the rule
+   above would have shown an empty panel. The second selector is there for
+   specificity: `.is-decided.show-diff .reviewable` outranks a bare
+   `.reviewable[hidden]`. */
+.reviewable[hidden],
+.is-decided.show-diff .reviewable[hidden] { display: none; }
+.decided {
+  margin: 0 0 1.25rem;
+  padding: 1.1rem 1.2rem;
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  border-radius: 10px;
+  background: var(--panel);
+  animation: decided-in .35s ease;
+}
+@keyframes decided-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.decided[hidden] { display: none; }
+.decided-what { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
+.decided-note { margin: 0 0 .8rem; color: var(--muted); font-size: .88rem; line-height: 1.5; max-width: 62ch; }
+.decided-note:last-child { margin-bottom: 0; }
+/* SPACE ABOVE IT. The toggle sits under whatever the panel ended on — a
+   sentence, or the command callout — and butted straight against the callout's
+   border it read as part of it rather than as the way back to the diff. */
+.decided-toggle { font-size: .78rem; margin-top: .8rem; }
+/* STILL ASKING. The window between the pass landing on the server and the
+   engine saying whether a session took it — up to seven seconds, and until now
+   the page filled it with the pessimistic answer and retracted it afterwards.
+   A spinner is the honest shape for a question with no answer yet. */
+.pickup-wait {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  margin: 0 0 .8rem;
+  color: var(--muted);
+  font-size: .88rem;
+}
+.pickup-wait[hidden] { display: none; }
+.pickup-spin {
+  width: .85rem;
+  height: .85rem;
+  flex: none;
+  border: 2px solid var(--line);
+  /* One side in the accent is what makes a ring read as turning. */
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: pickup-spin .8s linear infinite;
+}
+@keyframes pickup-spin { to { transform: rotate(360deg); } }
+/* A STATIC RING, not a hidden one. Someone who asked for less motion still
+   needs to see that something is in progress, and the sentence beside it is
+   doing most of that work anyway. */
+@media (prefers-reduced-motion: reduce) {
+  .pickup-spin { animation: none; border-top-color: var(--accent); }
+}
+/* WHY THE CHANGE EXISTS — the PR description this page never had. It is prose
+   to be read rather than data to be scanned, so it gets a measure, air, and a
+   quieter voice than the diff below it. It was once full-bleed 15px text at
+   1.5 in a tight box, which read as a wall and got skipped. */
+.context {
+  margin: 0 0 1.5rem;
+  padding: 1.1rem 1.3rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel, transparent);
+}
+.context h3 {
+  font-size: .72rem;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--muted);
+  font-weight: 650;
+  margin: 1.4rem 0 .5rem;
+}
+.context h3:first-child { margin-top: 0; }
+/* A MEASURE. Prose set the full width of a 1400px page is measurably harder to
+   read — the eye loses the line it is returning to. */
+.context p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.65; max-width: 72ch; }
+.context p:last-child { margin-bottom: 0; }
+.context table { border-collapse: collapse; width: 100%; font-size: .84rem; margin: .2rem 0 .3rem; }
+.context th, .context td { text-align: left; padding: .35rem .8rem .35rem 0; vertical-align: top; }
+.context th {
+  color: var(--muted);
+  font-weight: 600;
+  font-size: .72rem;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: .3rem;
+}
+.context tbody tr + tr td { border-top: 1px solid var(--line); }
+.context ul { margin: 0; padding-left: 1.15rem; max-width: 72ch; }
+.context li { margin: .3rem 0; font-size: .92rem; line-height: 1.6; }
+/* The disclosure is a CONTROL, not a panel. Full-width and boxed, it read as a
+   section header that happened to be clickable. */
+.context-more { margin: .9rem 0 0; }
+.context-more > summary {
+  display: inline-block;
+  width: auto;
+  cursor: pointer;
+  font-size: .78rem;
+  color: var(--muted);
+  padding: .25rem .7rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  list-style: none;
+}
+.context-more > summary::-webkit-details-marker { display: none; }
+.context-more > summary:hover { color: var(--accent); border-color: var(--accent); }
+.context-more[open] > summary { margin-bottom: .6rem; }
+.context li.done { color: var(--muted); }
+/* The ticket rides ON the title line rather than under it — it is the other
+   name for this work, not a fact about it. Sized down and tinted so the title
+   still reads as the title. */
+.ticket {
+  font-size: .62em; font-weight: 600; vertical-align: middle;
+  font-family: var(--mono, ui-monospace, monospace);
+  color: var(--accent); text-decoration: none;
+  padding: .12em .45em; border: 1px solid var(--line); border-radius: 999px;
+  white-space: nowrap;
+}
+a.ticket:hover { border-color: var(--accent); }
+.context-more > summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin-top: .6rem; }
+.copy-hint { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }
+.sent-cmd { display: flex; gap: .4rem; align-items: stretch; margin: .4rem 0 0; }
+/* A `display` rule BEATS the browser's own `[hidden] { display: none }`, so
+   every element this page hides in JavaScript needs its own override or the
+   hide silently does nothing. It shipped without one and a finished review kept
+   showing an empty command box. `assets-review` guards the whole class now. */
+.sent-cmd[hidden] { display: none; }
+.sent-cmd-text {
+  flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, monospace);
+  font-size: .85rem; padding: .35rem .5rem; color: var(--fg);
+  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
+  /* One tap takes the whole command — the gesture that still works on a page
+     served over plain http, where the clipboard API is withheld. */
+  user-select: all; -webkit-user-select: all;
+  overflow-x: auto; white-space: pre; line-height: 1.6;
+}
+.sent-cmd-copy { white-space: nowrap; }
+/* ONE GRID FOR THE WHOLE LIST, so the command column starts at the same x on
+   every row. A per-row layout cannot do that: each row would size its own label
+   column to its own label, and `Commit` and `Commit & Continue` are not the
+   same width. The label column is `max-content` — the longest label decides,
+   which is a fact about the labels rather than a rem value someone has to
+   remember to update when one changes. */
+.cmd-list { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; margin: .6rem 0 0; }
+.cmd-list[hidden] { display: none; }
+.cmd-lead { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
+/* ONE LINE: label, command, Copy. It was three lines deep — the label on its
+   own row above the command — which spent a screenful on four rows that fit on
+   four lines. */
+.cmd-row {
+  display: grid;
+  grid-column: 1 / -1;
+  /* FALLBACK FIRST, then subgrid. A browser without subgrid drops the second
+     declaration and keeps this one, which still gives one line per row — just
+     each sized to itself. Without a fallback the row would fall back to a
+     single auto column and stack, which is worse than the misalignment. */
+  grid-template-columns: max-content minmax(0, 1fr) max-content;
+  grid-template-columns: subgrid;
+  gap: .5rem; align-items: center;
+  padding: .4rem .5rem; margin-bottom: .35rem;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
+}
+.cmd-row[hidden] { display: none; }
+.cmd-label { font-weight: 600; font-size: .85rem; white-space: nowrap; }
+/* A TINTED EDGE, NOT A TINTED BOX. Four filled rows read as four warnings —
+   the colour shouted where it only needed to identify. The left border and the
+   label carry it now, which is enough to recognise the choice by and quiet
+   enough to read past. No new tokens: `v-commit` and `v-changes` above borrow
+   exactly this pair. */
+.cmd-row[data-verdict="commit"],
+.cmd-row[data-verdict="commit-start"],
+.cmd-row[data-verdict="commit-land"],
+.cmd-row[data-verdict="commit-continue"],
+.cmd-row[data-verdict="continue"] { border-left: 3px solid var(--good-fg); }
+.cmd-row[data-verdict="commit"] .cmd-label,
+.cmd-row[data-verdict="commit-start"] .cmd-label,
+.cmd-row[data-verdict="commit-land"] .cmd-label,
+.cmd-row[data-verdict="commit-continue"] .cmd-label,
+.cmd-row[data-verdict="continue"] .cmd-label { color: var(--good-fg); }
+.cmd-row[data-verdict="changes"] { border-left: 3px solid var(--flag-fg); }
+.cmd-row[data-verdict="changes"] .cmd-label { color: var(--flag-fg); }
+/* Discuss keeps the neutral panel, exactly as its button does — it is the
+   ending that decides nothing, and colouring it would say otherwise. */
+.cmd-text {
+  /* No `flex` — the list's grid column sizes this now. min-width:0 still
+     earns its place: it is what lets a long command scroll inside its own box
+     instead of widening the column and pushing Copy off the row. */
+  min-width: 0; font-family: var(--mono, ui-monospace, monospace);
+  font-size: .85rem; padding: .3rem .45rem; color: var(--fg);
+  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
+  /* One tap takes the whole command — see `.sent-cmd-text`. */
+  user-select: all; -webkit-user-select: all;
+  overflow-x: auto; white-space: pre; line-height: 1.6;
+}
+.cmd-copy { white-space: nowrap; }
+/* AN ACTION, NOT A NOTE. The command reached the reader as a grey line under a
+   bar that had just closed, and it read as a footnote to something finished —
+   so it is now a filled callout inside the decided panel, which is the block a
+   re-opened page shows first. It reuses the add palette rather than minting a
+   green of its own: those three tokens are already defined on bare `:root` and
+   redefined in both theme blocks, which is the property `assets-review` guards. */
+.sent-cmd.act {
+  flex-wrap: wrap; align-items: center; margin-top: .7rem;
+  padding: .55rem .6rem; border-radius: 6px;
+  background: var(--add-bg); border: 1px solid var(--add-mark); color: var(--add-fg);
+}
+.sent-cmd-lead { flex-basis: 100%; font-size: .85rem; font-weight: 600; color: var(--add-fg); }
+/* A FAILED SEND, IN THE PALETTE OF A FAILURE. The same callout the waiting-pass
+   case uses, in the delete colours rather than the add ones — `--del-bg` /
+   `--del-fg` / `--del-mark` are already defined on bare `:root` and redefined in
+   both theme blocks, which is the property `assets-review` guards. No new token
+   is minted for this. */
+.sent-cmd.act.fail {
+  background: var(--del-bg); border-color: var(--del-mark); color: var(--del-fg);
+}
+.sent-cmd.act.fail .sent-cmd-lead { color: var(--del-fg); }
+/* THE OUTCOME THE READER MUST ACT ON, AS LOUD AS THE ONE THEY NEED NOT.
+   A failed send used to be a small grey line in the footer, under a verdict bar
+   that had just closed — quieter than the success it was not. It gets the panel
+   the decided page gets, at the top of the column, in the delete palette. What
+   it does NOT get is `is-decided`: nothing was delivered, so the diff stays and
+   the verdict buttons stay live for a second try. */
+.decided.failed {
+  border-left-color: var(--del-mark);
+  background: var(--panel);
+}
+.decided.failed .decided-what { color: var(--del-mark); }
+/* The claim code is read aloud or copied, so it is set apart from the sentence
+   around it rather than buried in it. */
+.copy-hint { user-select: text; }
+</style>
+</head>
+<body>
+<div class="wrap" id="wrap">
+<header>
+  <h1 id="title"></h1>
+  <p class="sub" id="sub"></p>
+  <div class="controls">
+    <button id="expand-all" type="button">Show all context</button>
+    <button id="collapse-all" type="button">Collapse context</button>
+    <label class="toggle"><input type="checkbox" id="show-noise"> <span id="noise-label">Show bookkeeping</span></label>
+    <button id="theme" type="button" aria-live="polite">Theme</button>
+  </div>
+</header>
+<div class="layout">
+  <details class="tree-wrap" id="tree-wrap" open>
+    <summary id="tree-summary">Files</summary>
+    <nav class="tree" id="tree"></nav>
+  </details>
+  <main class="main">
+    <!-- WHAT THE CHANGE IS FOR, above the first filename. Composed by the
+         engine from the spec's own files — nothing here passed through the
+         model, so it is free however large the diff. Absent entirely for a spec
+         whose overview cannot be read: the page worked without it before. -->
+    <!-- A SEND THAT DID NOT LAND. Same shape as the panel below, delete palette,
+         and deliberately NOT the same section: this one leaves the page
+         undecided, because nothing was delivered and the reader still has a
+         verdict to give. It names which failure happened, since a server that
+         has moved and a pass the engine refused send the reader to different
+         places. -->
+    <section class="decided failed" id="send-failed" hidden>
+      <p class="decided-what" id="send-failed-what"></p>
+      <p class="decided-note" id="send-failed-note"></p>
+      <p class="sent-cmd act fail" id="send-failed-cmd" hidden>
+        <span class="sent-cmd-lead" id="send-failed-lead"></span>
+        <code class="sent-cmd-text" id="send-failed-text"></code>
+        <button type="button" class="sent-cmd-copy" id="send-failed-copy" hidden>Copy</button>
+      </p>
+    </section>
+    <!-- WHAT YOU DECIDED, once the pass has actually been handed over. It sits
+         above everything because on a re-open it is the only thing you need:
+         the review is over, and this says how it ended. -->
+    <section class="decided" id="decided" hidden>
+      <p class="decided-what" id="decided-what"></p>
+      <p class="decided-note" id="decided-note"></p>
+      <!-- SHOWN ONLY WHILE THE PAGE IS ACTUALLY ASKING. A tab reopened
+           tomorrow over a stored `null` is reading history, not watching a
+           live poll, so it gets the command instead — a spinner that can never
+           resolve is worse than no spinner. -->
+      <p class="pickup-wait" id="pickup-wait" hidden>
+        <span class="pickup-spin" aria-hidden="true"></span>
+        <span id="pickup-wait-text">Sent — waiting for Claude to pick it up…</span>
+      </p>
+      <!-- THE ONE THING LEFT TO DO, and it lives HERE rather than under the
+           verdict bar because that is where it was being missed: a grey line
+           below a bar that had just closed, in the type size of a footnote,
+           saying the same words whether it mattered or not. It is shown only
+           where the page has ESTABLISHED that the pass is still sitting there,
+           so when it appears it is always an instruction. -->
+      <p class="sent-cmd act" id="sent-cmd" hidden>
+        <span class="sent-cmd-lead" id="sent-cmd-lead"></span>
+        <!-- PLAIN TEXT, NOT AN INPUT. A readonly field still looks like
+             something to type into, and on a phone tapping it raises the
+             keyboard for a value nobody can change. It is a command to read and
+             copy, so it is marked up as one — `user-select: all` makes a single
+             tap take the whole thing, which is the gesture that works where no
+             clipboard API does. -->
+        <code class="sent-cmd-text" id="sent-cmd-text"></code>
+        <button type="button" class="sent-cmd-copy" id="sent-cmd-copy" hidden>Copy</button>
+      </p>
+      <button type="button" class="decided-toggle" id="decided-toggle">Show the diff anyway</button>
+    </section>
+    <section class="context reviewable" id="context" hidden>
+      <div class="context-why" id="context-why"></div>
+      <details class="context-more" id="context-more" hidden>
+        <summary id="context-more-summary">More</summary>
+        <div id="context-rest"></div>
+      </details>
+    </section>
+    <div id="review-block" class="reviewable">__REVIEW_BLOCK__</div>
+    <div id="files" class="reviewable"></div>
+    <!-- THE SURFACES STRIP. Built by the script from `data.surfaces`, and
+         absent entirely when the render carried none — a `--docs` page has no
+         branch to put live, so it gets no strip and no explanation of why. -->
+    <section class="surfaces reviewable" id="surfaces" hidden>
+      <span class="surfaces-title">Where this runs</span>
+      <div id="surface-rows"></div>
+    </section>
+    <!-- THE VERDICT SITS AT THE END, where reading finishes. It began in the
+         header and the first person to use it could not find it: you read a
+         350-line diff downward, and the control asking for your conclusion was
+         off-screen above you. A conclusion belongs after the thing it is about.
+         Not sticky, deliberately — a permanent bar costs vertical space on the
+         phone this page is read on, on a page whose whole job is showing code. -->
+    <footer class="verdict-end">
+      <div class="verdict" id="verdict">
+        <span class="verdict-title">Your verdict</span>
+        <button id="verdict-commit" class="v-commit" type="button" aria-live="polite">✓ Commit</button>
+        <button id="verdict-commit-continue" class="v-commit" type="button" aria-live="polite">✓ Commit &amp; Continue</button>
+        <!-- THE MID-RUN VERDICT, hidden unless the render asked for it. "Commit"
+             is the wrong verb for unfinished work, so a page rendered part-way
+             through a run offers this instead of the committing pair: I have
+             read it, carry on. It is not the removed `none` verdict — that
+             recorded itself and did nothing, while this one resumes the run. -->
+        <button id="verdict-continue" class="v-continue" type="button" hidden>→ Continue</button>
+        <!-- THE AUTHORING VERDICT, hidden unless the render asked for it. A spec
+             that has just been written has no phase in flight to continue, so
+             "Commit & Continue" is the wrong verb for it: this one commits the
+             spec and puts it IN FLIGHT, which is the `commit && /spec-start`
+             that was typed by hand until now. -->
+        <button id="verdict-commit-start" class="v-commit" type="button" hidden>&#10003; Commit &amp; Start</button>
+        <!-- THE /no-spec VERDICT, hidden unless the render asked for it. Work with
+             no spec has no next phase and nothing to put in flight, so neither
+             committing verb above fits: this one commits, fast-forwards the base
+             branch, and tears the worktree down. Its own word rather than a
+             context-dependent reading of "Commit", because one of those two
+             readings destroys a worktree. -->
+        <button id="verdict-commit-land" class="v-commit" type="button" hidden>&#10003; Commit &amp; Land</button>
+        <button id="verdict-changes" class="v-changes" type="button">↺ Request changes</button>
+        <button id="verdict-discuss" type="button">… Discuss first</button>
+        <span class="verdict-count" id="verdict-count" aria-live="polite"></span>
+      </div>
+      <!-- UNSENT TEXT, named at the moment it would have been destroyed. It sits
+           directly under the bar rather than beside the editor, because the
+           press that raises it happens here and the editor may be a screen
+           away. `assertive`: the reader is mid-decision and a polite region
+           would be read out after they have pressed again. -->
+      <p class="verdict-warn" id="verdict-warn" hidden aria-live="assertive"></p>
+      <!-- WHERE THE BUTTONS CANNOT DELIVER, the commands stand in their place.
+           A `file://` page has no server to POST to and no store to write to,
+           so a verdict button there only ever built a blob for the reader to
+           paste — a wall of JSON standing in for one word. Each row is named
+           with the BUTTON'S own label, because that is the word the reader
+           chose everywhere else; `commit-continue` is the wire spelling, and
+           nobody should have to learn a second vocabulary to recognise their
+           own decision. Built by the script, so there is exactly one list of
+           verdicts and it is the one the bar already uses. -->
+      <div class="cmd-list" id="cmd-list" hidden>
+        <p class="cmd-lead" id="cmd-lead"></p>
+      </div>
+      <p class="verdict-log" id="verdict-log" hidden></p>
+      <p class="copy-hint" id="copy-hint" hidden></p>
+      <textarea class="copy-out" id="copy-out" readonly hidden aria-label="Review blob to copy"></textarea>
+      <p class="drawn-by" id="drawn-by"></p>
+    </footer>
+  </main>
+</div>
+</div>
+<script type="application/json" id="review-data">__REVIEW_DATA__</script>
+<script>
+(function () {
+  'use strict'
+  var data = JSON.parse(document.getElementById('review-data').textContent)
+  // Lines kept either side of a change, and how much one "expand" step reveals.
+  var CONTEXT = 4
+  var STEP = 20
+  // --- patch parsing -------------------------------------------------------
+  // Rows carry their own line numbers so the gutter needs no second pass. Hunk
+  // headers are emitted ONLY when there is more than one hunk: with whole-file
+  // context there is exactly one, and a "@@ -1,400 +1,402 @@" banner above a
+  // whole file says nothing a reader wants.
+  function parsePatch(patch) {
+    var raw = patch.split('\n')
+    var hunks = 0
+    var i
+    for (i = 0; i < raw.length; i++) if (raw[i].slice(0, 2) === '@@') hunks++
+    var rows = []
+    var oldNo = 0
+    var newNo = 0
+    var started = false
+    for (i = 0; i < raw.length; i++) {
+      var line = raw[i]
+      if (line.slice(0, 2) === '@@') {
+        var m = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line)
+        if (m) { oldNo = +m[1]; newNo = +m[2] }
+        started = true
+        if (hunks > 1) rows.push({ t: 'hunk', text: line })
+        continue
+      }
+      if (!started) continue
+      var c = line.charAt(0)
+      if (c === '+') rows.push({ t: 'add', text: line.slice(1), n: newNo++ })
+      else if (c === '-') rows.push({ t: 'del', text: line.slice(1), o: oldNo++ })
+      else if (c === '\\') rows.push({ t: 'meta', text: line.slice(2) })
+      else rows.push({ t: 'ctx', text: line.slice(1), o: oldNo++, n: newNo++ })
+    }
+    return rows
+  }
+  // Which stretches of unchanged context start out hidden. A run touching the
+  // top or bottom of the file collapses all the way to the edge — there is no
+  // change on that side to need context for.
+  function initialBands(rows) {
+    var bands = []
+    var i = 0
+    while (i < rows.length) {
+      if (rows[i].t !== 'ctx') { i++; continue }
+      var j = i
+      while (j < rows.length && rows[j].t === 'ctx') j++
+      var atStart = i === 0
+      var atEnd = j === rows.length
+      var from = atStart ? i : i + CONTEXT
+      var to = atEnd ? j : j - CONTEXT
+      // A band hiding one or two lines is worse than just showing them.
+      if (to - from >= 3) bands.push({ from: from, to: to })
+      i = j
+    }
+    return bands
+  }
+  // --- one order, for both columns -----------------------------------------
+  // The sidebar and the panes are two views of one list, and they must be the
+  // SAME list in the same order — a reader scrolling the panes watches the
+  // current-file mark walk the sidebar, and a mark that walks backwards is the
+  // whole reason this exists.
+  //
+  // The emitted order cannot be it. `review.js` collects tracked changes and
+  // untracked files in two passes, so a new file is appended after everything
+  // else however its path sorts; git's own order is not the tree's either.
+  //
+  // So the tree's order is the one order, settled here and used by both. It is
+  // expressed as a comparator rather than derived from the built tree because
+  // the panes are built long before the tree is, and a second traversal that
+  // had to agree with the first is the thing that went wrong.
+  function treeOrder(a, b) {
+    var A = a.split('/')
+    var B = b.split('/')
+    var n = Math.min(A.length, B.length)
+    for (var i = 0; i < n; i++) {
+      // A segment with anything after it is a directory. `renderTree` walks
+      // every directory at a level — label and subtree — before that level's
+      // files, so a directory sorts ahead of a file it ties with by name.
+      var aDir = i < A.length - 1
+      var bDir = i < B.length - 1
+      if (aDir !== bDir) return aDir ? -1 : 1
+      if (A[i] !== B[i]) return A[i].localeCompare(B[i])
+    }
+    return 0
+  }
+  // A copy: `data` is the emitted review, and the page is a view of it.
+  var files = data.files.slice().sort(function (a, b) { return treeOrder(a.path, b.path) })
+  // --- per-file page state -------------------------------------------------
+  // Band state lives HERE, never in the emitted data: the page is a view of an
+  // immutable review, and expanding context is a property of this reading of it.
+  var state = files.map(function (f) {
+    var rows = parsePatch(f.patch)
+    var st = {
+      file: f,
+      rows: rows,
+      bands: initialBands(rows),
+      rendered: false,
+      el: null,
+      // What the page holds about THIS reading: whether the accept box is
+      // ticked now, and any notes written but not yet copied out.
+      accept: f.accepted === true,
+      drafts: [],
+    }
+    revealCommented(st)
+    return st
+  })
+  // --- review marks --------------------------------------------------------
+  // A comment is useless if the line it points at is hidden, so any band that
+  // swallows a commented line is dropped before the first render. Dropping the
+  // whole band shows a little more context than strictly needed, which is the
+  // harmless direction.
+  function revealCommented(st) {
+    var lines = (st.file.comments || [])
+      .map(function (c) { return c.line })
+      .filter(function (n) { return n != null })
+    if (!lines.length) return
+    var idx = []
+    st.rows.forEach(function (row, i) {
+      if (row.n != null && lines.indexOf(row.n) !== -1) idx.push(i)
+    })
+    st.bands = st.bands.filter(function (b) {
+      return !idx.some(function (i) { return i >= b.from && i < b.to })
+    })
+  }
+  // Ids are minted from the render timestamp plus a counter, so they are stable
+  // for this page and unique across renders. That is what makes re-pasting the
+  // same blob merge instead of doubling every note.
+  var seq = 0
+  function mintId() {
+    seq++
+    return data.generatedAt + '-' + seq
+  }
+  // Best effort, both ways. Safari refuses storage on file:// by THROWING, and
+  // a review page that fails to render because it could not autosave would be a
+  // far worse bug than a lost pass.
+  // What this reader concluded, once it was actually HANDED OVER — never on a
+  // clipboard copy, which is a pass still sitting in the reader's hands.
+  var decided = null
+  var STORE_KEY = 'skitterspec-review:' + data.spec + ':' + data.generatedAt
+  function save() {
+    try {
+      var accepts = {}
+      var drafts = []
+      state.forEach(function (st) {
+        accepts[st.file.path] = st.accept
+        st.drafts.forEach(function (d) { drafts.push(d) })
+      })
+      window.localStorage.setItem(
+        STORE_KEY,
+        JSON.stringify({ seq: seq, accepts: accepts, drafts: drafts, replies: replies, decided: decided }),
+      )
+    } catch (e) { /* no storage, or a quota — the pass still works, it just is not saved */ }
+  }
+  function restore() {
+    var raw = null
+    try { raw = window.localStorage.getItem(STORE_KEY) } catch (e) { return }
+    if (!raw) return
+    var saved
+    try { saved = JSON.parse(raw) } catch (e) { return }
+    seq = saved.seq || 0
+    replies = saved.replies || {}
+    // THE DECISION OUTLIVES THE TAB. Keyed to this render like every other
+    // mark, so the next render — the one after the commit — is a live page
+    // again rather than a page that thinks it is finished.
+    if (saved.decided && saved.decided.verdict) decided = saved.decided
+    var byPath = {}
+    state.forEach(function (st) { byPath[st.file.path] = st })
+    Object.keys(saved.accepts || {}).forEach(function (path) {
+      if (byPath[path]) byPath[path].accept = Boolean(saved.accepts[path])
+    })
+    ;(saved.drafts || []).forEach(function (d) {
+      if (byPath[d.file]) byPath[d.file].drafts.push(d)
+      else orphanDrafts.push(d)
+    })
+  }
+  // Drafts whose file left the diff between saving and reloading, and replies to
+  // the written review keyed by check id. Both still belong in the blob.
+  var orphanDrafts = []
+  var replies = {}
+  function el(tag, cls, text) {
+    var n = document.createElement(tag)
+    if (cls) n.className = cls
+    if (text != null) n.textContent = text
+    return n
+  }
+  function gutter(row, st, index) {
+    var td = el('td', 'gutter')
+    var o = el('span', 'n', row.o == null ? '' : String(row.o))
+    var n = el('span', 'n', row.n == null ? '' : String(row.n))
+    var s = el('span', 's', row.t === 'add' ? '+' : row.t === 'del' ? '-' : ' ')
+    td.appendChild(o); td.appendChild(n); td.appendChild(s)
+    if (st) {
+      td.className = 'gutter can-note'
+      td.title = 'Comment on this line'
+      td.addEventListener('click', function () { openDraft(st, index, row) })
+    }
+    return td
+  }
+  function bandRow(st, band, idx) {
+    var tr = el('tr', 'band')
+    tr.appendChild(el('td', 'gutter', '⋯'))
+    var td = el('td', 'src')
+    var hidden = band.to - band.from
+    td.appendChild(el('span', 'n-hidden', hidden + ' unchanged line' + (hidden === 1 ? '' : 's')))
+    var step = el('button', null, '±' + STEP)
+    step.type = 'button'
+    step.setAttribute('aria-label', 'Expand ' + STEP + ' lines either side')
+    step.addEventListener('click', function () {
+      band.from += STEP
+      band.to -= STEP
+      if (band.to - band.from < 3) st.bands.splice(st.bands.indexOf(band), 1)
+      renderFile(st)
+    })
+    var all = el('button', null, 'Show all')
+    all.type = 'button'
+    all.addEventListener('click', function () {
+      st.bands.splice(st.bands.indexOf(band), 1)
+      renderFile(st)
+    })
+    td.appendChild(step)
+    td.appendChild(all)
+    tr.appendChild(td)
+    return tr
+  }
+  // Re-render the whole file on every expand. The alternative — pre-rendering
+  // thousands of hidden rows and unhiding them — is what makes a whole-file
+  // diff page take seconds to open.
+  function renderFile(st) {
+    var host = st.el
+    if (!host) return
+    host.textContent = ''
+    if (!st.rows.length) {
+      host.appendChild(el('p', 'note', st.file.binary ? 'Binary file — not shown.' : 'No textual change.'))
+      return
+    }
+    var box = el('div', 'code')
+    var table = el('table', 'diff')
+    var body = document.createElement('tbody')
+    var bands = st.bands.slice().sort(function (a, b) { return a.from - b.from })
+    var b = 0
+    var i = 0
+    while (i < st.rows.length) {
+      if (b < bands.length && i === bands[b].from) {
+        body.appendChild(bandRow(st, bands[b], b))
+        i = bands[b].to
+        b++
+        continue
+      }
+      var row = st.rows[i]
+      var tr = el('tr', row.t)
+      if (row.t === 'hunk') {
+        tr.className = 'band'
+        tr.appendChild(el('td', 'gutter', '⋯'))
+        tr.appendChild(el('td', 'src', row.text))
+      } else {
+        tr.appendChild(gutter(row, st, i))
+        tr.appendChild(el('td', 'src', row.text === '' ? ' ' : row.text))
+        // The line number, so a check can point at this row. Set here rather
+        // than derived on demand because the file re-renders on every expand,
+        // and a lookup built once would go stale the first time a band opened.
+        if (row.n != null) tr.setAttribute('data-n', String(row.n))
+      }
+      body.appendChild(tr)
+      // Anything said about this line sits directly beneath it — a note you
+      // have to go and look for is a note nobody reads.
+      var here = notesAt(st, row.n)
+      if (here.length) tr.className += ' has-note'
+      here.forEach(function (c) { body.appendChild(noteRow(st, c)) })
+      if (st.draftAt === i) body.appendChild(draftRow(st, row))
+      i++
+    }
+    table.appendChild(body)
+    box.appendChild(table)
+    host.appendChild(box)
+    sizeNotes(box)
+    watchPane(host)
+  }
+  /**
+   * Publish this code box's visible width, for the note bodies inside it.
+   *
+   * A note has to wrap at the width of what the reader can SEE, and the cell it
+   * lives in is a diff-table column sized by the longest line of source in the
+   * file. So the pane's own width is measured here and handed to the CSS.
+   *
+   * MEASURED, NEVER SUMMED. The gutter's width is `--ln-w` plus the +/- column
+   * plus padding plus a border, in whatever font the reader has — and `td.gutter`
+   * is one sticky cell rather than three precisely so that nobody has to get
+   * that arithmetic right. Asking the element is the same decision one layer up.
+   *
+   * A BOX MEASURED AT NOTHING PUBLISHES NOTHING. A file whose <details> has
+   * never been opened reports 0 for everything, and 0 is not a narrow pane —
+   * it is a box that has not been laid out. Writing it would give every note in
+   * that file a zero-width editor on the one render that matters, so the
+   * cannot-tell case leaves whatever was there alone and the CSS falls back to
+   * its own defaults.
+   */
+  function sizeNotes(box) {
+    if (!box || !box.style) return
+    var g = box.querySelector('td.gutter')
+    var gw = (g && g.offsetWidth) || 0
+    var pane = box.clientWidth || 0
+    if (!pane || !gw) return
+    box.style.setProperty('--gutter-w', gw + 'px')
+    box.style.setProperty('--pane-w', Math.max(0, pane - gw) + 'px')
+  }
+  // Re-measure when the layout moves under it — a rotated phone, a window
+  // dragged narrower, the file tree folding away. The HOST is watched rather
+  // than the box: a box is rebuilt on every band expansion, and an observer
+  // holding the old ones would keep a whole file's worth of detached rows alive
+  // for the life of the page. Observing the same host twice replaces the
+  // observation, so re-renders cost nothing.
+  //
+  // A browser without ResizeObserver keeps the width it opened at, which is
+  // wrong only for someone who then resizes. Nothing accuses, nothing breaks.
+  var paneWatch = typeof ResizeObserver === 'function'
+    ? new ResizeObserver(function (entries) {
+        entries.forEach(function (e) { sizeNotes(e.target.querySelector('.code')) })
+      })
+    : null
+  function watchPane(host) {
+    if (paneWatch && host) paneWatch.observe(host)
+  }
+  // Every note about one line: what the engine stored, plus anything written on
+  // this page and not yet copied out.
+  function notesAt(st, line) {
+    if (line == null) return []
+    var out = []
+    ;(st.file.comments || []).forEach(function (c) { if (c.line === line) out.push(c) })
+    st.drafts.forEach(function (d) { if (d.line === line) out.push(d) })
+    return out
+  }
+  function noteRow(st, c) {
+    var tr = el('tr', 'note-row' + (c.resolved ? ' is-resolved' : ''))
+    tr.appendChild(el('td', 'gutter', '💬'))
+    var td = el('td', 'src')
+    var body = el('div', 'note-body')
+    var meta = c.line == null ? 'on this file' : 'line ' + c.line
+    if (c.check) meta += ' · answering the review'
+    if (!c.raisedAt) meta += ' · not sent yet'
+    body.appendChild(el('span', 'note-meta', meta))
+    body.appendChild(el('span', 'note-text', c.note))
+    if (c.resolved) {
+      body.appendChild(el('span', 'note-resolution', '↳ ' + (c.resolved.note || 'resolved')))
+    }
+    if (!c.raisedAt) {
+      var actions = el('div', 'note-actions')
+      var del = el('button', null, 'Remove')
+      del.type = 'button'
+      del.addEventListener('click', function () {
+        st.drafts.splice(st.drafts.indexOf(c), 1)
+        renderFile(st)
+        refresh()
+      })
+      actions.appendChild(del)
+      body.appendChild(actions)
+    }
+    td.appendChild(body)
+    tr.appendChild(td)
+    return tr
+  }
+  // The draft box. `row` is null for a note about the file as a whole.
+  function draftRow(st, row) {
+    var tr = el('tr', 'note-row')
+    tr.appendChild(el('td', 'gutter', '💬'))
+    var td = el('td', 'src')
+    var body = el('div', 'note-body')
+    body.appendChild(el('span', 'note-meta', row ? 'line ' + (row.n == null ? '—' : row.n) : 'on this file'))
+    body.appendChild(noteEditor(function (text) {
+      addDraft(st, text, row ? row.n : null, row ? row.text : null, null)
+      st.draftAt = null
+      renderFile(st)
+    }, function () {
+      st.draftAt = null
+      renderFile(st)
+    }))
+    td.appendChild(body)
+    tr.appendChild(td)
+    return tr
+  }
+  // One editor, used by the gutter, the file strip and the review replies.
+  function noteEditor(onSave, onCancel) {
+    var wrap = el('div')
+    var input = el('textarea', 'note-input')
+    input.rows = 2
+    input.placeholder = 'What should change here?'
+    var actions = el('div', 'note-actions')
+    var ok = el('button', null, 'Add note')
+    ok.type = 'button'
+    ok.addEventListener('click', function () {
+      var text = input.value.trim()
+      // An empty note would be refused by the engine, so it is refused here —
+      // where the person who wrote it is still looking at it.
+      if (!text) { input.focus(); return }
+      onSave(text)
+    })
+    actions.appendChild(ok)
+    if (onCancel) {
+      var no = el('button', null, 'Cancel')
+      no.type = 'button'
+      no.addEventListener('click', onCancel)
+      actions.appendChild(no)
+    }
+    wrap.appendChild(input)
+    wrap.appendChild(actions)
+    window.setTimeout(function () { input.focus() }, 0)
+    return wrap
+  }
+  function addDraft(st, note, line, lineText, check) {
+    st.drafts.push({
+      id: mintId(),
+      file: st.file.path,
+      line: line == null ? null : line,
+      lineText: lineText == null ? null : lineText,
+      check: check || null,
+      note: note,
+    })
+    refresh()
+  }
+  function openDraft(st, index, row) {
+    st.draftAt = st.draftAt === index ? null : index
+    renderFile(st)
+  }
+  // Notes about the file rather than a line, and the way in to writing one.
+  function fileStrip(st) {
+    var strip = el('div', 'strip')
+    var loose = (st.file.comments || []).concat(st.drafts).filter(function (c) { return c.line == null })
+    loose.forEach(function (c) {
+      var row = el('div', c.resolved ? 'is-resolved' : null)
+      row.appendChild(el('span', 'note-meta', (c.check ? 'answering the review' : 'on this file') + (c.raisedAt ? '' : ' · not sent yet')))
+      row.appendChild(el('span', 'note-text', c.note))
+      if (c.resolved) row.appendChild(el('span', 'note-resolution', '↳ ' + (c.resolved.note || 'resolved')))
+      strip.appendChild(row)
+    })
+    var add = el('button', null, 'Note on this file')
+    add.type = 'button'
+    add.addEventListener('click', function () {
+      add.hidden = true
+      strip.appendChild(noteEditor(function (text) {
+        addDraft(st, text, null, null, null)
+        redrawStrip(st)
+      }, function () { redrawStrip(st) }))
+    })
+    strip.appendChild(add)
+    return strip
+  }
+  function redrawStrip(st) {
+    if (!st.stripEl) return
+    var next = fileStrip(st)
+    st.stripEl.parentNode.replaceChild(next, st.stripEl)
+    st.stripEl = next
+  }
+  // --- file list -----------------------------------------------------------
+  var filesHost = document.getElementById('files')
+  state.forEach(function (st) {
+    var f = st.file
+    var d = el('details', 'file')
+    d.id = 'f-' + encodeURIComponent(f.path)
+    // Read back by the current-file observer, which is handed elements rather
+    // than files. The id would do — it is the same path, encoded — but decoding
+    // an id to recover data the element could simply carry is a round trip
+    // through a format that exists for a different reason.
+    d.setAttribute('data-path', f.path)
+    var s = el('summary')
+    s.appendChild(el('span', 'path', f.path))
+    s.appendChild(el('span', 'chip', f.status))
+    if (!f.whole) s.appendChild(el('span', 'chip', 'partial context'))
+    if (f.noise) s.appendChild(el('span', 'chip', 'bookkeeping'))
+    // A lapse is SAID. An accept that quietly vanished because the file moved on
+    // would leave you believing you had read code you have not.
+    if (f.accepted === 'lapsed') {
+      s.appendChild(el('span', 'chip lapsed', 'accepted earlier — changed since'))
+    }
+    var openCount = (f.comments || []).filter(function (x) { return !x.resolved }).length
+    if (openCount) s.appendChild(el('span', 'chip commented', openCount + ' note' + (openCount === 1 ? '' : 's')))
+    var accept = el('button', 'accept', '✓ accept')
+    accept.type = 'button'
+    accept.setAttribute('aria-pressed', String(st.accept))
+    // A summary is a toggle for the <details>; a click on a control inside it
+    // must not also open and close the file.
+    accept.addEventListener('click', function (ev) {
+      ev.preventDefault()
+      ev.stopPropagation()
+      st.accept = !st.accept
+      accept.setAttribute('aria-pressed', String(st.accept))
+      refresh()
+    })
+    s.appendChild(accept)
+    var c = el('span', 'counts')
+    c.appendChild(el('span', 'a', '+' + f.additions))
+    c.appendChild(document.createTextNode(' '))
+    c.appendChild(el('span', 'd', '-' + f.deletions))
+    s.appendChild(c)
+    d.appendChild(s)
+    st.stripEl = fileStrip(st)
+    d.appendChild(st.stripEl)
+    var host = el('div')
+    d.appendChild(host)
+    st.el = host
+    // Render on first open, so a review of 200 files costs one file's work.
+    d.addEventListener('toggle', function () {
+      if (d.open && !st.rendered) { st.rendered = true; renderFile(st) }
+    })
+    if (!f.noise) { d.open = true; st.rendered = true; renderFile(st) }
+    filesHost.appendChild(d)
+    st.details = d
+  })
+  if (!state.length) {
+    filesHost.appendChild(el('p', 'empty', 'Nothing to review — no changes found.'))
+  }
+  // --- noise filter --------------------------------------------------------
+  var noiseBox = document.getElementById('show-noise')
+  var noiseCount = state.filter(function (s) { return s.file.noise }).length
+  document.getElementById('noise-label').textContent = 'Show bookkeeping (' + noiseCount + ')'
+  if (!noiseCount) noiseBox.closest('.toggle').hidden = true
+  function applyNoise() {
+    state.forEach(function (st) {
+      if (st.file.noise) st.details.hidden = !noiseBox.checked
+    })
+  }
+  noiseBox.addEventListener('change', applyNoise)
+  applyNoise()
+  // --- file tree -----------------------------------------------------------
+  // Built from the paths, and it lists EVERY file including the ones the noise
+  // filter is hiding — a tree with an unreachable entry is worse than no tree.
+  function buildTree(files) {
+    var root = { dirs: {}, files: [] }
+    files.forEach(function (f) {
+      var parts = f.path.split('/')
+      var node = root
+      for (var i = 0; i < parts.length - 1; i++) {
+        if (!node.dirs[parts[i]]) node.dirs[parts[i]] = { dirs: {}, files: [] }
+        node = node.dirs[parts[i]]
+      }
+      node.files.push({ name: parts[parts.length - 1], file: f })
+    })
+    return root
+  }
+  // --- which file am I reading? --------------------------------------------
+  // The tree row for each path, captured as the tree is built. A lookup rather
+  // than a query, because this is answered on every scroll: a `querySelector`
+  // per event would walk the whole sidebar to find something the build already
+  // had in its hand.
+  var rowByPath = {}
+  var currentPath = null
+  /**
+   * Mark one file as the one being read.
+   *
+   * ONE ROW AT A TIME, and the previous one is cleared through the same map
+   * rather than by querying for `.is-current`. A map cannot report a row the
+   * tree no longer has, and it cannot miss one a selector spelled slightly
+   * differently.
+   */
+  function setCurrent(path) {
+    if (path === currentPath) return
+    var prev = rowByPath[currentPath]
+    if (prev) prev.className = prev.className.replace(/ ?is-current/, '')
+    currentPath = path
+    var row = rowByPath[path]
+    if (!row) return
+    row.className += ' is-current'
+    followCurrent(row)
+  }
+  /**
+   * Drop the highlight entirely.
+   *
+   * For the decided page, where the diff is hidden and no card can qualify —
+   * leaving a row lit there would point at something the reader can no longer
+   * see.
+   */
+  function clearCurrent() {
+    var prev = rowByPath[currentPath]
+    if (prev) prev.className = prev.className.replace(/ ?is-current/, '')
+    currentPath = null
+  }
+  /**
+   * Scroll the tree ONLY when the marked row has left its own scrollport.
+   *
+   * The sidebar is a bounded box (`max-height: calc(100vh - 2rem)`), so on a
+   * long diff the highlight is invisible unless the row can be brought in —
+   * and on a short one nothing should ever move. `block: 'nearest'` keeps the
+   * nudge a nudge: re-centring would put the sidebar in constant motion beside
+   * a reader who is already moving, which is the thing a fixed map is for.
+   *
+   * A browser that withholds `getBoundingClientRect` gets the highlight and no
+   * follow. Guessing a position from nothing is how a sidebar ends up scrolled
+   * somewhere arbitrary.
+   */
+  function followCurrent(row) {
+    var box = document.getElementById('tree-wrap')
+    if (!box || !row.getBoundingClientRect || !box.getBoundingClientRect) return
+    var r = row.getBoundingClientRect()
+    var b = box.getBoundingClientRect()
+    if (r.top >= b.top && r.bottom <= b.bottom) return
+    if (row.scrollIntoView) row.scrollIntoView({ block: 'nearest' })
+  }
+  // What is currently crossing the band, keyed by path. A SET rather than a
+  // running answer: entries arrive for what CHANGED, so the observer never
+  // hands over the whole picture and the page has to keep it.
+  var onScreen = {}
+  /**
+   * The topmost file on screen, in document order.
+   *
+   * NOTHING ON SCREEN IS NOT AN ANSWER, and this returning without calling
+   * `setCurrent` is the whole of that. Scrolled above the first card, past the
+   * last, or with the current file hidden by the noise filter, the previous
+   * row stays lit — clearing it would flicker the highlight off every time a
+   * card boundary crossed the band, and a stale "you were here" is worth more
+   * than nothing at all.
+   */
+  function pickCurrent() {
+    for (var i = 0; i < state.length; i++) {
+      if (onScreen[state[i].file.path]) return setCurrent(state[i].file.path)
+    }
+  }
+  /**
+   * Watch the cards against a band at the top of the viewport.
+   *
+   * THE BOTTOM MARGIN IS THE WHOLE TRICK. Pulled up by three quarters of the
+   * viewport, only the top slice counts as "on screen" — so the answer changes
+   * as you scroll. Without it every card on a tall screen intersects at once
+   * and the topmost is whatever is furthest up the document, which is the same
+   * file from the first scroll to the last.
+   *
+   * A browser without IntersectionObserver keeps a page with no highlight and
+   * no error — the shape `paneWatch` takes for ResizeObserver above. Nothing
+   * accuses and nothing breaks; the tree is still a tree.
+   */
+  var currentWatch = typeof IntersectionObserver === 'function'
+    ? new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+          var p = e.target.getAttribute('data-path')
+          if (!p) return
+          if (e.isIntersecting) onScreen[p] = true
+          else delete onScreen[p]
+        })
+        pickCurrent()
+      }, { rootMargin: '0px 0px -75% 0px' })
+    : null
+  function reveal(f) {
+    if (f.noise && !noiseBox.checked) { noiseBox.checked = true; applyNoise() }
+    var d = document.getElementById('f-' + encodeURIComponent(f.path))
+    if (!d) return
+    d.open = true
+    d.scrollIntoView({ block: 'start' })
+    // Mark it NOW rather than waiting for the scroll to settle. A click on the
+    // tree is a reader saying which file they mean, and the observer would
+    // agree a moment later — but the moment is visible, and a row that lights
+    // up after you have already looked away reads as a lag rather than an
+    // answer.
+    setCurrent(f.path)
+  }
+  /**
+   * Jump to a file, and to one line inside it when a check named one.
+   *
+   * THREE STATES, AND ONLY ONE OF THEM IS A JUMP. A file that is not in this
+   * diff, and a line that is not in that file's patch, both do nothing beyond
+   * revealing what IS there — a reviewer's finding can name a line that has
+   * since moved, and a page that scrolled somewhere arbitrary would be worse
+   * than one that scrolled nowhere.
+   */
+  function gotoLine(path, line) {
+    var st = null
+    state.forEach(function (s) { if (s.file.path === path) st = s })
+    if (!st) return
+    reveal(st.file)
+    if (line == null) return
+    // A collapsed band hides the row, so drop any band covering it first. The
+    // file re-renders anyway; this just decides what is on screen when it does.
+    var idx = -1
+    for (var i = 0; i < st.rows.length; i++) {
+      if (st.rows[i].n === line) { idx = i; break }
+    }
+    if (idx < 0) return
+    st.bands = st.bands.filter(function (b) { return !(idx >= b.from && idx < b.to) })
+    renderFile(st)
+    if (!st.el) return
+    // Attribute-only, no tag prefix: within one file's element nothing but a
+    // code row carries `data-n`, and the narrower selector buys nothing.
+    var tr = st.el.querySelector('[data-n="' + line + '"]')
+    if (!tr) return
+    var prev = document.querySelector('.goto-hit')
+    if (prev) prev.className = prev.className.replace(/ ?goto-hit/, '')
+    tr.className += ' goto-hit'
+    tr.scrollIntoView({ block: 'center' })
+  }
+  // Wired per button rather than delegated from `document`. The review block is
+  // spliced in as markup by the engine, so it is all present by the time this
+  // runs — and a listener on each element is what the rest of this page does.
+  function wireGotos() {
+    var btns = document.querySelectorAll('[data-goto]')
+    Array.prototype.forEach.call(btns, function (btn) {
+      btn.addEventListener('click', function () {
+        var n = btn.getAttribute('data-goto-line')
+        gotoLine(btn.getAttribute('data-goto'), n == null ? null : parseInt(n, 10))
+      })
+    })
+  }
+  // ONE FLAT LIST, indented by per-row padding rather than by nesting <ul>s.
+  //
+  // That is not a tidy-up: the change counts are `position: sticky; right: 0`,
+  // and a sticky box can only pin within its own row. Nested <ul>s make each
+  // level narrower than its parent, so a deep row ends before the scrollport's
+  // right edge and its counts slide away the moment you scroll sideways. Flat
+  // rows all share the widest row's width, so every one of them has something
+  // to pin to.
+  //
+  // Depth goes on as an inline style because it is data, not a class: the tree
+  // is however deep the diff happens to be, and a rule per level would be a
+  // guess at the maximum.
+  function indent(node, depth, base) {
+    // Rounded, because 3 * 0.8 is 2.4000000000000004 in binary floating point
+    // and that lands verbatim in the attribute. CSS copes; a person reading the
+    // page source does not, and neither does a test asserting the value.
+    var rem = Math.round((base + depth * 0.8) * 100) / 100
+    node.setAttribute('style', 'padding-left:' + rem + 'rem')
+    return node
+  }
+  function renderTree(node) {
+    var ul = el('ul')
+    ;(function walk(n, depth) {
+      // `treeOrder` above is the authority and these two sorts must match it,
+      // which is why the directories sort by `localeCompare` rather than by the
+      // default `.sort()`: that compares UTF-16 code units, so it puts every
+      // capitalised name ahead of every lowercase one and the panes would drift
+      // from the sidebar again on the first `README/` in a diff.
+      //
+      // Insertion order would be free — the list arrives sorted — but a key
+      // that looks like an array index (`2024/`) is enumerated first whatever
+      // order it was inserted in, and a dated directory is not exotic.
+      Object.keys(n.dirs).sort(function (a, b) { return a.localeCompare(b) }).forEach(function (name) {
+        var li = el('li')
+        li.appendChild(indent(el('span', 'dir', name + '/'), depth, 0.6))
+        ul.appendChild(li)
+        // The subtree goes in AFTER its own label and before this level's
+        // files, which is the order the nested form produced.
+        walk(n.dirs[name], depth + 1)
+      })
+      n.files.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach(function (entry) {
+        var li = el('li')
+        var b = el('button', 'tree-file' + (entry.file.noise ? ' is-noise' : ''))
+        b.type = 'button'
+        // The same .6rem base as a dir label, so a file sits level with the
+        // directory it is in. It is on the name rather than the row because the
+        // row must reach the scrollport edge — see `.tree-file` padding.
+        b.appendChild(indent(el('span', 'nm', entry.name), depth, 0.6))
+        var ct = el('span', 'ct')
+        ct.appendChild(el('span', 'a', '+' + entry.file.additions))
+        ct.appendChild(document.createTextNode(' '))
+        ct.appendChild(el('span', 'd', '-' + entry.file.deletions))
+        b.appendChild(ct)
+        b.addEventListener('click', function () { reveal(entry.file) })
+        // The path, not the name: two directories can hold a `README.md`, and
+        // the tree deliberately shows the leaf only.
+        rowByPath[entry.file.path] = b
+        li.appendChild(b)
+        ul.appendChild(li)
+      })
+    })(node, 0)
+    return ul
+  }
+  var tree = document.getElementById('tree')
+  tree.appendChild(renderTree(buildTree(files)))
+  document.getElementById('tree-summary').textContent =
+    'Files (' + files.length + ')'
+  if (window.matchMedia && !window.matchMedia('(min-width: 60rem)').matches) {
+    document.getElementById('tree-wrap').open = false
+  }
+  // AFTER the tree, because a mark with no row to put it on is nothing at all.
+  //
+  // It runs on a narrow screen too, where the tree is a collapsed <details> and
+  // nothing is visible: the class is still correct, so a reader who opens the
+  // sidebar half-way down a diff finds it already pointing at where they are,
+  // and `scrollIntoView` inside a closed <details> is a no-op rather than a
+  // special case to write.
+  if (currentWatch) {
+    state.forEach(function (st) { if (st.details) currentWatch.observe(st.details) })
+  }
+  // --- page-level controls -------------------------------------------------
+  document.getElementById('expand-all').addEventListener('click', function () {
+    state.forEach(function (st) {
+      st.bands = []
+      if (st.rendered) renderFile(st)
+    })
+  })
+  document.getElementById('collapse-all').addEventListener('click', function () {
+    state.forEach(function (st) {
+      st.bands = initialBands(st.rows)
+      if (st.rendered) renderFile(st)
+    })
+  })
+  // --- answering the written review ---------------------------------------
+  // A `confirm` exists to ask the author a question, and until now the only way
+  // to answer was to retype it in chat. The engine stamps each check with an id
+  // and the file it is about; a reply becomes an ordinary comment carrying that
+  // id, so it travels in the same blob as everything else.
+  function wireChecks() {
+    var checks = document.querySelectorAll('.check[data-check]')
+    Array.prototype.forEach.call(checks, function (li) {
+      var id = li.getAttribute('data-check')
+      // A check with no file is about the review rather than a line of code.
+      // The sentinel keeps the blob valid and lands it under "not in this diff",
+      // which is exactly where a review-wide remark belongs.
+      var file = li.getAttribute('data-file') || '(review)'
+      var given = el('div', 'reply-given')
+      var box = el('div', 'reply')
+      function draw() {
+        given.textContent = replies[id] ? '↳ ' + replies[id] : ''
+        given.hidden = !replies[id]
+        box.textContent = ''
+        var add = el('button', null, replies[id] ? 'Change answer' : 'Answer')
+        add.type = 'button'
+        add.addEventListener('click', function () {
+          box.textContent = ''
+          box.appendChild(noteEditor(function (text) {
+            replies[id] = text
+            draw()
+            refresh()
+          }, draw))
+        })
+        box.appendChild(add)
+      }
+      draw()
+      li.appendChild(given)
+      li.appendChild(box)
+      li.setAttribute('data-reply-file', file)
+    })
+  }
+  // --- the blob -------------------------------------------------------------
+  /**
+   * A DELTA, not a snapshot. The engine merges rather than replaces, so this
+   * says only what changed: files newly ticked, accepts withdrawn, notes
+   * written. A file already accepted with this exact content has nothing to
+   * say, and a file that was never accepted has nothing to withdraw.
+   *
+   * Withdrawal is explicit for the same reason — under a merge, absence means
+   * "not mentioned", never "remove it".
+   */
+  function buildBlob(verdict) {
+    var accepted = []
+    var unaccepted = []
+    var comments = []
+    state.forEach(function (st) {
+      var stored = st.file.accepted
+      if (st.accept) {
+        // No hash means the engine could not read the file; accepting it would
+        // record a vouch for content nobody can identify.
+        if (stored !== true && st.file.hash) accepted.push({ path: st.file.path, hash: st.file.hash })
+      } else if (stored === true || stored === 'lapsed') {
+        unaccepted.push(st.file.path)
+      }
+      st.drafts.forEach(function (d) { comments.push(d) })
+    })
+    orphanDrafts.forEach(function (d) { comments.push(d) })
+    Object.keys(replies).forEach(function (id) {
+      var li = document.querySelector('.check[data-check="' + id + '"]')
+      comments.push({
+        id: data.generatedAt + '-reply-' + id,
+        file: (li && li.getAttribute('data-reply-file')) || '(review)',
+        line: null,
+        lineText: null,
+        check: id,
+        note: replies[id],
+      })
+    })
+    var blob = {
+      version: 1,
+      spec: data.spec,
+      generatedAt: data.generatedAt,
+      accepted: accepted,
+      unaccepted: unaccepted,
+      comments: comments,
+    }
+    // Absent unless a verdict was actually chosen. The engine reads an absent
+    // one as `discuss`, and a blob that never claimed one should keep saying so.
+    if (verdict) blob.verdict = verdict
+    return blob
+  }
+  var verdictBtns = {
+    commit: document.getElementById('verdict-commit'),
+    'commit-continue': document.getElementById('verdict-commit-continue'),
+    'commit-start': document.getElementById('verdict-commit-start'),
+    'commit-land': document.getElementById('verdict-commit-land'),
+    continue: document.getElementById('verdict-continue'),
+    changes: document.getElementById('verdict-changes'),
+    discuss: document.getElementById('verdict-discuss'),
+  }
+  // The committing pair, named once. A fifth verdict that commits is added
+  // here, and the shared block below follows for free — the same reason the
+  // engine keeps a `COMMITTING` list rather than a second condition.
+  var COMMITTERS = ['commit', 'commit-continue', 'commit-start', 'commit-land']
+  /*
+   * WHICH BUTTONS THIS PAGE OFFERS, and it comes from the render rather than
+   * from the gate. Deriving it — mid-run iff nothing is armed — would take the
+   * committing buttons away from every page in a project running
+   * `review.required: false`, which never arms and whose readers must still be
+   * able to commit from the page. The engine's `BUTTON_SETS` is the same
+   * decision on the other side of the wire.
+   *
+   * ABSENT IS THE COMMITTING SET. A page rendered before any of this existed,
+   * and a caller that did not ask, both land here — so nothing about their page
+   * changes.
+   */
+  var MIDRUN = data.buttons === 'midrun'
+  // ONE TABLE, keyed by the set the engine named. A chain of ternaries is how a
+  // third set becomes a fourth condition somebody forgets to add a button to.
+  var OFFERS = {
+    midrun: ['continue', 'changes', 'discuss'],
+    authoring: ['commit-start', 'commit', 'changes', 'discuss'],
+    refresh: ['commit', 'changes', 'discuss'],
+    nospec: ['commit-land', 'commit', 'changes', 'discuss'],
+    committing: ['commit', 'commit-continue', 'changes', 'discuss'],
+    // A SINGLE-PASS FIX: the committing set minus the verb it cannot honour.
+    // `/spec-bug` and `/spec-hotfix` render this when the repair took one pass,
+    // because `Commit & Continue` names a next phase a spec with no phase files
+    // does not have. Same three buttons as `refresh`, a different subject.
+    fix: ['commit', 'changes', 'discuss'],
+  }
+  var OFFERED = OFFERS[data.buttons] || OFFERS.committing
+  Object.keys(verdictBtns).forEach(function (key) {
+    verdictBtns[key].hidden = OFFERED.indexOf(key) === -1
+  })
+  // EVERY VERDICT, because this is the one place a verdict gets a reader-facing
+  // name: `refresh` relabels only the committing pair, but the decided panel
+  // has to name whichever verdict was actually sent — including one this page
+  // never offered, since a decision restored from storage outlives the render
+  // that made it.
+  var LABELS = {
+    commit: '✓ Commit',
+    'commit-continue': '✓ Commit & Continue',
+    'commit-start': '✓ Commit & Start',
+    'commit-land': '✓ Commit & Land',
+    continue: '→ Continue',
+    changes: '↺ Request changes',
+    discuss: '… Discuss first',
+  }
+  var TITLES = {
+    commit: 'Commit what you just read, and stop there',
+    // Says what it will NOT do: a reader must not press this expecting the
+    // spec to be finished and landed.
+    'commit-continue': 'Commit what you just read, then build the next phase — nothing is landed',
+    // Says what it WILL do, because this is the one verdict that provisions:
+    // a worktree appears and phase 1 starts.
+    'commit-start': 'Commit this spec, then put it in flight and build phase 1',
+    // Says what it WILL do, and every destructive part of it: this is the only
+    // verdict that removes a worktree, so the reader must not learn that from
+    // the outcome afterwards.
+    'commit-land': 'Commit this, fast-forward the base branch to it, and remove the worktree',
+    // Says what it will NOT do, for the same reason: nothing is committed by
+    // this, so the work it resumes is still uncommitted afterwards.
+    continue: 'You have read it — carry on with the run; nothing is committed',
+  }
+  var verdictEl = document.getElementById('verdict')
+  var verdictCount = document.getElementById('verdict-count')
+  var verdictLog = document.getElementById('verdict-log')
+  var verdictWarn = document.getElementById('verdict-warn')
+  var copyOut = document.getElementById('copy-out')
+  var wrapEl = document.getElementById('wrap')
+  var decidedBox = document.getElementById('decided')
+  var decidedWhat = document.getElementById('decided-what')
+  var decidedNote = document.getElementById('decided-note')
+  var decidedToggle = document.getElementById('decided-toggle')
+  var copyHint = document.getElementById('copy-hint')
+  var sentCmd = document.getElementById('sent-cmd')
+  var sentCmdText = document.getElementById('sent-cmd-text')
+  var sentCmdCopy = document.getElementById('sent-cmd-copy')
+  var sentCmdLead = document.getElementById('sent-cmd-lead')
+  var failBox = document.getElementById('send-failed')
+  var failWhat = document.getElementById('send-failed-what')
+  var failNote = document.getElementById('send-failed-note')
+  var failCmd = document.getElementById('send-failed-cmd')
+  var failLead = document.getElementById('send-failed-lead')
+  var failText = document.getElementById('send-failed-text')
+  var failCopy = document.getElementById('send-failed-copy')
+  var pickupWait = document.getElementById('pickup-wait')
+  // IS A POLL RUNNING RIGHT NOW? Deliberately not persisted, and that is the
+  // whole of what it buys: a stored decision reloaded tomorrow carries the same
+  // `picked: null` — nothing was ever established — but nothing is asking any
+  // more, so it must not spin. Session state answers a question about the
+  // session.
+  var asking = false
+  // Has the close already been scheduled? `drawDecided` runs on every redraw
+  // once a page is decided, so without this a redraw would queue another timer.
+  var closing = false
+  // Long enough for the confirmation to register, short enough not to read as
+  // a hang. It only matters where the close is actually permitted.
+  var CLOSE_AFTER_MS = 900
+  /**
+   * This tab's job is over — best-effort, and only from the one state that
+   * earns it.
+   *
+   * ONLY ON CONFIRMED PICKUP. Reached from the branch where the engine has
+   * SAID a session claimed the pass, which is the only ending with provably
+   * nothing left on the page to read: no code to quote, no command to run, no
+   * blob to paste. Every other one — still asking, established-nobody-did, a
+   * poll that failed, a `file://` page whose pass is on the clipboard, a
+   * published page whose verdict needs `/spec-reviewed` — keeps the tab,
+   * because each leaves something the reader still needs.
+   *
+   * BEST-EFFORT BY CONSTRUCTION, not by caution. Browsers refuse
+   * `window.close()` on a tab the script did not open, and that is every tab
+   * here: somebody typed the URL or tapped a link. So the confirmation is
+   * drawn FIRST and the close attempted after it — a refused close leaves
+   * exactly the right ending standing, and a permitted one still reads as
+   * acknowledgement rather than a tab vanishing under the press.
+   */
+  function closeWhenDone() {
+    if (closing) return
+    closing = true
+    if (typeof window.close !== 'function' || !window.setTimeout) return
+    window.setTimeout(function () {
+      // A refusal can throw as well as do nothing, depending on the browser.
+      // Neither is a failure of the review, so neither reaches the reader.
+      try { window.close() } catch (e) {}
+    }, CLOSE_AFTER_MS)
+  }
+  function pending() {
+    var b = buildBlob()
+    return b.accepted.length + b.unaccepted.length + b.comments.length
+  }
+  /**
+   * How many notes would still be open once this pass lands — the exact number
+   * the engine's `judgeVerdict` will count, which is what makes the disabled
+   * button a preview of the refusal rather than a second opinion about it.
+   *
+   * Stored comments the agent has not answered, PLUS every comment this pass is
+   * about to send (a note you just wrote is open by definition).
+   *
+   * UNACCEPTED FILES ARE NOT COUNTED AND MUST NEVER BE. A comment is a request
+   * you made; an unticked file is merely something you said nothing about, and
+   * counting those would be the tally this whole feature is designed not to be.
+   */
+  function openNotes() {
+    var stored = (data.notes && data.notes.totals && data.notes.totals.unresolved) || 0
+    return stored + buildBlob().comments.length
+  }
+  // Redraw the bar and autosave. Called after every mark, so the block lifts
+  // the moment the last note goes and a phone tab switch mid-review costs
+  // nothing.
+  function refresh() {
+    // A decided page is finished. `refresh` runs on every mark and re-enables
+    // the two committing buttons unconditionally, so without this it would undo
+    // the ending every time anything redrew.
+    if (decided) return drawDecided()
+    // Which shape this page offers is re-answered here rather than at load: a
+    // reader who ticks an accept half-way through has changed what their pass
+    // contains, and a command line cannot carry the new contents.
+    drawCmdList()
+    var n = pending()
+    var open = openNotes()
+    verdictCount.textContent = n
+      ? n + (n === 1 ? ' mark to send' : ' marks to send')
+      // Names the action this page actually offers. A mid-run page saying "a
+      // clean read still commits" would promise the one thing it cannot do.
+      : MIDRUN ? 'Nothing marked — a clean read still carries on' : 'Nothing marked — a clean read still commits'
+    // ONE COUNT, BOTH BUTTONS. Two committing controls blocked by two separate
+    // reads is how a page ends up with one disabled and the other not — which
+    // would be a way around the single refusal this page makes.
+    var blocked = open > 0
+    var why = open + (open === 1 ? ' open note' : ' open notes')
+    // Is there a phase left for `/spec-next` to build? The engine answers, and
+    // its ABSENCE is a third state, not a no: a spec whose phases it could not
+    // read — a legacy layout, an inline-phase overview — leaves the button
+    // exactly as it was. Removing an offer that might work is worse than
+    // leaving one that might not.
+    var noPhaseLeft = Boolean(data.phases) && data.phases.hasNextPhase === false
+    COMMITTERS.forEach(function (key) {
+      var btn = verdictBtns[key]
+      // AN OPEN NOTE WINS. Two reasons can be true at once and the label has
+      // room for one — the open note is the one the reader can act on, so a
+      // "no phase left" in its place would send them to fix the wrong thing.
+      var stop = blocked ? why : key === 'commit-continue' && noPhaseLeft ? 'no phase left' : null
+      // The reason goes ON the control. A button that is merely dimmed reads as
+      // a broken page, and a title attribute is unreachable on a touch screen.
+      btn.disabled = Boolean(stop)
+      btn.textContent = stop ? LABELS[key] + ' — ' + stop : LABELS[key]
+      btn.title = blocked
+        ? 'Resolve or remove your notes first — you asked for something, so it cannot also be fine'
+        : key === 'commit-continue' && noPhaseLeft
+          ? 'Every phase of this spec is done — there is nothing left to build'
+          : TITLES[key]
+    })
+    // Said rather than left unset: the committing pair is the ONLY thing this
+    // page ever blocks, and the others are always available on purpose — a note
+    // you want acted on, and a question, are never the wrong thing to send.
+    //
+    // CONTINUE IS NOT BLOCKED, and that mirrors the engine rather than softening
+    // it: `judgeVerdict` refuses a COMMITTING verdict against an open note, and
+    // `continue` is deliberately not one. A disabled button here would be a
+    // second opinion about a refusal the engine does not make, which is the one
+    // thing this bar must never be.
+    verdictBtns.continue.disabled = false
+    verdictBtns.changes.disabled = false
+    verdictBtns.discuss.disabled = false
+    // Adding the note is the ordinary way out of a warning, and every mark comes
+    // through here — so the line goes when the situation it described does,
+    // rather than standing over a page where nothing is unsent any more.
+    clearWarn()
+    save()
+  }
+  /**
+   * End the review, and say how it ended.
+   *
+   * A verdict that has been handed over is the END of this page's job, and the
+   * page used to carry on as if it were not: the diff stayed, the four buttons
+   * stayed live, and a line of small grey text under them said "Sent." A reader
+   * coming back to that tab has no way to tell a sent review from an unsent
+   * one, and pressing a button again reaches an agent that stopped listening.
+   *
+   * So the diff goes, what was decided takes its place, and the controls die
+   * with a reason on them.
+   */
+  function drawDecided() {
+    if (!decided) return
+    var said = SAID[decided.verdict] || decided.verdict
+    var when = String(decided.at || '').slice(0, 10)
+    decidedBox.hidden = false
+    decidedWhat.textContent = 'You chose: ' + (LABELS[decided.verdict] || decided.verdict)
+    decidedNote.textContent =
+      'Sent to Claude' + (when ? ' on ' + when : '') + ' — this review is ' + said + '. ' +
+      'Nothing here reaches Claude any more, so the verdict buttons are closed.'
+    wrapEl.className = wrapEl.className.replace(/\s*\bis-decided\b/g, '') + ' is-decided'
+    // The diff is hidden from here on, so there is no card to be reading and
+    // nothing for the tree to point at. `drawDecided` runs on every redraw once
+    // a page is decided, and clearing something already cleared is free.
+    clearCurrent()
+    // The commands go with the bar. A decided page offers no way to decide
+    // again, whichever shape it was offering.
+    if (cmdList) cmdList.hidden = true
+    // EVERY button, not only the committing pair: `refresh` re-enables those two
+    // by design, and a decided page must beat it.
+    Object.keys(verdictBtns).forEach(function (key) {
+      var btn = verdictBtns[key]
+      btn.disabled = true
+      btn.title = 'Already sent — ' + said
+    })
+    verdictCount.textContent = 'Sent — ' + said
+    // ONE STATEMENT, NOT FOUR. The panel, the bar, the history line and the
+    // command box all said the same thing at once. The log line is the panel's
+    // sentence again in smaller type, so it goes.
+    verdictLog.hidden = true
+    // WHAT THE PAGE ESTABLISHED, replayed — never re-derived. `picked` is the
+    // answer the poll got, and a re-opened tab has no way to ask again for a
+    // pass that is long gone, so it says what it said before rather than
+    // quietly changing its mind a day later.
+    copyHint.hidden = true
+    copyOut.hidden = true
+    pickupWait.hidden = true
+    // STILL ASKING — and saying so, which is the state this panel used not to
+    // have. `watchPass` takes up to seven seconds to establish whether a
+    // session claimed the pass, and the page used to spend that window
+    // asserting the pessimistic answer: "still waiting to be picked up", with
+    // a command under it, retracted a moment later on the usual outcome. The
+    // reader was being told to run something they almost never needed, in the
+    // same words used when running it is the only thing that saves their
+    // review.
+    //
+    // `asking` and not merely `picked === null`. A tab reopened over a stored
+    // decision has the same `null` — nothing was ever established — but no
+    // poll is running to resolve it, so it falls through to the command below.
+    // A spinner that can never stop is worse than no spinner.
+    // (`.claude/rules/negative-checks.md` rule 4: the cannot-tell case takes
+    // the harmless branch, which here is claiming neither answer.)
+    if (decided.picked === null && asking) {
+      sentCmd.hidden = true
+      pickupWait.hidden = false
+      return
+    }
+    if (decided.picked === true) {
+      // NOTHING TO RUN, and so nothing offered. This is the whole point of
+      // asking: the command used to appear here on every single ending, which
+      // taught the reader it was decoration.
+      sentCmd.hidden = true
+      decidedNote.textContent += ' Claude picked this up — there is nothing to run.'
+      closeWhenDone()
+      return
+    }
+    // THE HAND-OFF SURVIVES THE ENDING — but only where there is something
+    // worth carrying. A code is six digits to transcribe, and the box and its
+    // Copy button exist for exactly that. A bare `/spec-reviewed` is a word the
+    // reader is about to type into the terminal they are already sitting in;
+    // dressing it as a copyable artefact makes the ending look unfinished.
+    if (decided.cmd && /\s/.test(decided.cmd)) {
+      decidedNote.textContent += ' It is still waiting to be picked up.'
+      showCommand(decided.cmd)
+      return
+    }
+    sentCmd.hidden = true
+    if (decided.cmd) {
+      decidedNote.textContent +=
+        ' If Claude was not already waiting, run ' + decided.cmd + ' where it is.'
+    }
+  }
+  /**
+   * Record a verdict that was actually delivered, and end the page on it.
+   *
+   * `picked` is three-valued and the third value is the useful one: `true` the
+   * engine confirmed somebody claimed this pass, `false` it confirmed nobody
+   * has, and `null` NOTHING COULD BE ESTABLISHED — an older daemon with no
+   * lookup, a poll that never came back, a page that stopped asking. Only
+   * `true` takes the command away, so every way of not knowing leaves it on
+   * screen (`.claude/rules/negative-checks.md` rule 4).
+   */
+  function markDecided(verdict, cmd, picked) {
+    decided = {
+      verdict: verdict,
+      at: new Date().toISOString(),
+      cmd: cmd || null,
+      picked: picked === undefined ? null : picked,
+    }
+    save()
+    drawDecided()
+  }
+  // A WAY BACK IN, read-only. "It is finished" and "I cannot see what I
+  // approved" are different things, and only the first one is true.
+  decidedToggle.addEventListener('click', function () {
+    var showing = / \bshow-diff\b/.test(' ' + wrapEl.className)
+    wrapEl.className = wrapEl.className.replace(/\s*\bshow-diff\b/g, '') + (showing ? '' : ' show-diff')
+    decidedToggle.textContent = showing ? 'Show the diff anyway' : 'Hide the diff'
+  })
+  // How a logged verdict reads. EVERY VERDICT NAMED, and an unknown one says
+  // so: the fallback was `discussed`, which quietly relabelled `commit` — and a
+  // page that tells you a commit was a discussion is worse than one that admits
+  // it does not know the word.
+  var SAID = {
+    approve: 'committed',
+    commit: 'committed',
+    'commit-continue': 'committed, then carried on',
+    'commit-start': 'committed, then put in flight',
+    'commit-land': 'committed, landed, and torn down',
+    continue: 'read it and carried on',
+    changes: 'changes requested',
+    discuss: 'discussed',
+    skip: 'moved on without a verdict',
+  }
+  // The last thing that happened here, as history. It is why the page can look
+  // untouched after a commit: the verdict was consumed, not stored. A SKIP is
+  // history of exactly the same kind — it is the recorded decision to move on,
+  // and hiding it would make a skipped review indistinguishable from one that
+  // never ended.
+  function drawLog() {
+    var last = data.notes && data.notes.lastDecision
+    var skip = data.gate && data.gate.lastSkip
+    // Whichever is more recent. Both are timestamped, and comparing is what
+    // stops an old verdict shadowing a skip taken after it.
+    if (skip && (!last || String(skip.at || '') > String(last.at || ''))) {
+      last = { verdict: 'skip', at: skip.at, note: skip.reason }
+    }
+    if (!last) return
+    var said = SAID[last.verdict] || ('recorded as "' + last.verdict + '"')
+    var when = String(last.at || '').slice(0, 10)
+    verdictLog.hidden = false
+    verdictLog.textContent = said + ' earlier' + (when ? ' · ' + when : '') + (last.note ? ' · ' + last.note : '')
+  }
+  /**
+   * Hand over the command itself, where the reader's eye already is.
+   *
+   * Two ways out and the page picks by CAPABILITY, not by trying and failing:
+   * `navigator.clipboard` is secure-context-only, and a page served at
+   * `http://<lan-ip>:7777` is not a secure context — which is the ordinary case
+   * here, not an edge one. A Copy button that does nothing when tapped is worse
+   * than text that was always text, so the button only exists where it can work.
+   */
+  /**
+   * Put the whole command in the reader's selection. Returns whether it worked.
+   *
+   * REPORTED, NOT ASSUMED. It replaces `input.select()`, which the box no longer
+   * has anything to call — and the honest thing to do when a browser withholds
+   * `getSelection` is to stop claiming the text is selected, rather than say so
+   * and leave someone hunting for a highlight that is not there.
+   */
+  function selectCommand() {
+    return selectNode(sentCmdText)
+  }
+  /**
+   * Put a node's whole text in the reader's selection. Returns whether it took.
+   */
+  function selectNode(node) {
+    try {
+      var range = document.createRange()
+      range.selectNodeContents(node)
+      var sel = window.getSelection && window.getSelection()
+      if (!sel) return false
+      sel.removeAllRanges()
+      sel.addRange(range)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+  /**
+   * Can this browser copy AT ALL — by either route?
+   *
+   * WHAT THIS GOT WRONG, and why the button kept vanishing where it was needed
+   * most: `navigator.clipboard` is **secure-context only**, so it is absent on
+   * every `http://<lan-ip>:7777` page — which is exactly the page someone reads
+   * on a phone. Asking only about that API therefore hid the Copy button in the
+   * one case the button exists for, and left a phone reader long-pressing to
+   * select text on a page that could have copied for them all along.
+   *
+   * `document.execCommand('copy')` is deprecated and universally implemented,
+   * and it works in a non-secure context inside a user gesture. So there are
+   * two routes, and the rule below is unchanged: offer the button only where
+   * one of them exists.
+   */
+  function canCopy() {
+    return Boolean(
+      (navigator.clipboard && navigator.clipboard.writeText) ||
+        (document.execCommand && window.getSelection),
+    )
+  }
+  /**
+   * Copy `text`, by whichever route this browser has. Resolves on success and
+   * rejects otherwise, so every caller reports the same three outcomes.
+   *
+   * `node` is what gets left selected when copying fails — the reader can then
+   * do it by hand, which is the behaviour this button replaced rather than
+   * removed.
+   */
+  function copyText(text, node) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text)
+    }
+    return new Promise(function (resolve, reject) {
+      // The selection IS the mechanism here, not a consolation: execCommand
+      // copies what is selected. So it is made first and deliberately left in
+      // place — a failed copy then lands the reader exactly where the old
+      // no-clipboard path did.
+      if (!selectNode(node)) return reject(new Error('no selection'))
+      var ok = false
+      try {
+        ok = document.execCommand('copy')
+      } catch (e) {
+        ok = false
+      }
+      return ok ? resolve() : reject(new Error('execCommand refused'))
+    })
+  }
+  function showCommand(cmd) {
+    sentCmd.hidden = false
+    sentCmdText.textContent = cmd
+    var copyable = canCopy()
+    sentCmdCopy.hidden = !copyable
+    sentCmdCopy.textContent = 'Copy'
+    // SET HERE, NOT LEFT TO THE MARKUP. The lead says two different things and
+    // the box is shown more than once in a page's life, so a line that was only
+    // ever correct on first render would go stale the moment either changed.
+    if (copyable) {
+      sentCmdLead.textContent = 'Run this where Claude is:'
+      // NOT SELECTED when there is a button. Pre-selecting made the line look
+      // like a focused input, which is what it was mistaken for — and it is the
+      // long-press-to-select gesture the button is here to spare a phone reader.
+      return
+    }
+    // Selected where that is possible, and SAID to be selected: a reader who
+    // sees nothing happen has no way to tell a page that did nothing from one
+    // that already did the work. The lead carries it now that the box lives in
+    // the decided panel — `copy-hint` is down in the footer with the verdict
+    // bar, and appending to it put the sentence half a page from the thing it
+    // describes.
+    sentCmdLead.textContent = selectCommand()
+      ? 'Run this where Claude is (selected — copy it):'
+      : 'Run this where Claude is — copy it:'
+  }
+  if (sentCmdCopy) {
+    sentCmdCopy.addEventListener('click', function () {
+      copyText(sentCmdText.textContent, sentCmdText).then(function () {
+        sentCmdCopy.textContent = 'Copied'
+      }, function () {
+        // The capability was there and the write still failed. Fall back to the
+        // same selection the no-clipboard path uses rather than saying nothing —
+        // and if even that is unavailable, say THAT, because a button reading
+        // "selected" over nothing highlighted is worse than an honest failure.
+        sentCmdCopy.textContent = selectCommand() ? 'Copy failed — selected' : 'Copy failed'
+      })
+    })
+  }
+  /**
+   * The header: why this change exists, what it touches, what this phase set
+   * out to do. Every part is optional and each is drawn only if present — a
+   * spec with a Problem and no Impact table is ordinary, not broken.
+   *
+   * BUILT WITH createElement, never innerHTML. The text is markdown from a spec
+   * file, which means it can contain anything someone typed — and this page is
+   * served over the network, so treating it as markup would be the one place a
+   * spec's prose could reach the DOM.
+   */
+  function drawContext() {
+    var ctx = data.context
+    if (!ctx) return
+    var why = document.getElementById('context-why')
+    var rest = document.getElementById('context-rest')
+    var more = document.getElementById('context-more')
+    var drewRest = false
+    function head(into, label) {
+      var h = document.createElement('h3')
+      h.textContent = label
+      into.appendChild(h)
+    }
+    /**
+     * THE PHASE COMES FIRST, and the spec's Problem is folded away behind it.
+     *
+     * The open part of this header used to be `Why` — the overview's Problem,
+     * which is about the whole spec. A reader opening a page for phase 3 got
+     * the same paragraph they had already read at phase 1, and had to expand
+     * `More` to reach the only thing that told them what THIS review covers.
+     * The question a review page answers is "what am I looking at", so the
+     * phase answers it, and the background it sits in is one tap away.
+     *
+     * The TASK LIST is open too, deliberately. It is the cheapest statement of
+     * what is and is not in this diff — which matters most half-way through a
+     * phase, where a `/spec-diff` shows three ticked boxes and four empty ones
+     * and the empty ones are the reason the diff looks unfinished.
+     */
+    if (ctx.phase) {
+      head(why, 'Phase ' + ctx.phase.n + (ctx.phase.title ? ' — ' + ctx.phase.title : ''))
+      if (ctx.phase.goal) {
+        var g = document.createElement('p')
+        g.textContent = ctx.phase.goal
+        why.appendChild(g)
+      }
+      if (ctx.phase.tasks && ctx.phase.tasks.length) {
+        var ul = document.createElement('ul')
+        ul.className = 'tasks'
+        ctx.phase.tasks.forEach(function (task) {
+          var li = document.createElement('li')
+          // Done is dimmed rather than struck through: every task is ticked by
+          // the time a phase renders, and a whole list struck through reads as
+          // cancelled work.
+          li.className = task.done ? 'done' : ''
+          li.textContent = (task.done ? '✅ ' : '⬜ ') + task.text
+          ul.appendChild(li)
+        })
+        why.appendChild(ul)
+      }
+    }
+    if (ctx.problem) {
+      // FOLDED, ALL OF IT. With the phase open above, the spec's Problem is
+      // background rather than the answer — and on a phone every line of it is
+      // a line of the file list pushed off-screen, which is the thing this
+      // header was built to avoid. Where there is NO phase (a branch-wide diff,
+      // a spec with no live phase) the first paragraph stays open, because then
+      // it is the only thing the header can say.
+      var paras = String(ctx.problem).split(/\n\s*\n/)
+      var from = 0
+      if (!ctx.phase) {
+        head(why, 'Why')
+        var lead = document.createElement('p')
+        lead.textContent = paras[0].replace(/\s+/g, ' ').trim()
+        why.appendChild(lead)
+        from = 1
+      } else if (paras.length) {
+        head(rest, 'Why')
+        drewRest = true
+      }
+      for (var i = from; i < paras.length; i++) {
+        var p = document.createElement('p')
+        p.textContent = paras[i].replace(/\s+/g, ' ').trim()
+        rest.appendChild(p)
+        drewRest = true
+      }
+    }
+    if (ctx.impact) {
+      head(rest, 'Touches')
+      drewRest = true
+      if (ctx.impact.rows) {
+        var table = document.createElement('table')
+        var hr = document.createElement('tr')
+        ;['Surface', 'Change', 'Detail'].forEach(function (label) {
+          var th = document.createElement('th')
+          th.textContent = label
+          hr.appendChild(th)
+        })
+        table.appendChild(hr)
+        ctx.impact.rows.forEach(function (row) {
+          var tr = document.createElement('tr')
+          ;[row.surface, row.change, row.detail].forEach(function (cell) {
+            var td = document.createElement('td')
+            td.textContent = cell
+            tr.appendChild(td)
+          })
+          table.appendChild(tr)
+        })
+        rest.appendChild(table)
+      } else {
+        var prose = document.createElement('p')
+        prose.textContent = ctx.impact.prose
+        rest.appendChild(prose)
+      }
+    }
+    document.getElementById('context').hidden = false
+    more.hidden = !drewRest
+  }
+  function showFallback(json, why) {
+    copyOut.hidden = false
+    copyOut.value = json
+    copyOut.focus()
+    copyOut.select()
+    copyHint.hidden = false
+    copyHint.textContent = why
+  }
+  /**
+   * Put the whole recovery command in the failure callout, with its Copy control.
+   *
+   * THE SAME CONTROL THE `file://` PAGE ALREADY USES — `/spec-reviewed <verdict>`
+   * — so there is one command row rather than a second kind. It reaches the
+   * agent regardless of any server, which is the only reason a recovery can be
+   * offered from a failed send at all.
+   *
+   * `canCopy` decides whether there is a button, exactly as `showCommand` does:
+   * a control that does nothing on tap reads as a broken page, and one that is
+   * missing where it would have worked reads as a page that never offered it.
+   */
+  function showFailCommand(cmd) {
+    failCmd.hidden = false
+    failText.textContent = cmd
+    var copyable = canCopy()
+    failCopy.hidden = !copyable
+    failCopy.textContent = 'Copy'
+    failLead.textContent = copyable
+      ? 'Your verdict is not lost — run this where Claude is:'
+      : selectNode(failText)
+        ? 'Your verdict is not lost — run this where Claude is (selected — copy it):'
+        : 'Your verdict is not lost — run this where Claude is — copy it:'
+  }
+  if (failCopy) {
+    failCopy.addEventListener('click', function () {
+      copyText(failText.textContent, failText).then(function () {
+        failCopy.textContent = 'Copied'
+      }, function () {
+        failCopy.textContent = selectNode(failText) ? 'Copy failed — selected' : 'Copy failed'
+      })
+    })
+  }
+  /** Take the failure panel down — a fresh attempt, or one that landed. */
+  function clearSendFailure() {
+    failBox.hidden = true
+    failCmd.hidden = true
+    failWhat.textContent = ''
+    failNote.textContent = ''
+  }
+  /**
+   * Say that a send did not land, as loudly as a send that did.
+   *
+   * THE ONE OUTCOME THE READER MUST ACT ON used to be reported more quietly than
+   * the one they need do nothing about: a small grey line in the footer, under a
+   * verdict bar that had just closed. It gets the panel at the top of the column
+   * now, in the delete palette.
+   *
+   * IT DOES NOT DECIDE THE PAGE. Nothing was delivered, so the diff stays and
+   * the verdict buttons stay live — a page that closed its controls over a
+   * failed send would strand the reader with no way to try again.
+   *
+   * A pass carrying MARKS still goes to the clipboard, because a command line
+   * cannot carry notes and a failed send must not become the moment they are
+   * silently dropped.
+   */
+  function sendFailed(json, verdict, what, note) {
+    copyHint.hidden = true
+    copyHint.textContent = ''
+    failBox.hidden = false
+    failWhat.textContent = what
+    if (pending() > 0) {
+      failCmd.hidden = true
+      failNote.textContent =
+        note +
+        ' You have marked things up, and a command line cannot carry notes — the whole pass is ' +
+        'below. Copy it and paste it to Claude.'
+      copyOut.hidden = false
+      copyOut.value = json
+      copyOut.focus()
+      copyOut.select()
+    } else {
+      failNote.textContent = note
+      showFailCommand('/spec-reviewed ' + verdict)
+    }
+    // WHERE THE READER IS LOOKING. The verdict bar is at the foot of the page
+    // and this panel is at the head of it, so a failure announced without this
+    // is a failure announced off-screen — which is the shape of the bug being
+    // fixed, one scroll position removed.
+    if (failBox.scrollIntoView) failBox.scrollIntoView()
+  }
+  // One action per decision: the verdict button IS the copy button, so the blob
+  // can never carry a verdict other than the one just pressed.
+  /**
+   * Send the pass back over the wire, to the page's own URL.
+   *
+   * The blob never passes through the model this way: the engine holds it and
+   * you read six digits out, where a paste costs context in proportion to how
+   * much you wrote.
+   */
+  function post(json, verdict) {
+    clearSendFailure()
+    copyHint.hidden = false
+    copyHint.textContent = 'Sending…'
+    fetch(location.pathname, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: json,
+    }).then(function (res) {
+      return res.text().then(function (text) {
+        if (!res.ok) {
+          // A pass the server REFUSED must never read as sent — and WHICH
+          // refusal decides where the reader goes next, so the two are named
+          // separately rather than collapsed into one "not sent".
+          if (res.status === 404) {
+            // THE PORT MOVED, or another repo's daemon holds this one. The token
+            // in this URL means nothing there, so re-opening the page from the
+            // session that produced it is the fix — the link is stale, the pass
+            // is fine.
+            sendFailed(
+              json,
+              verdict,
+              'Not sent — this page\'s server is gone.',
+              'Nothing is answering at this address any more: the review server moved to another ' +
+                'port, or a different repo holds this one. Re-open the page from the Claude Code ' +
+                'session that produced it and the buttons below will send.',
+            )
+          } else if (res.status === 422) {
+            // THE ENGINE READ IT AND SAID NO. Its message names the entry that
+            // was wrong, so it is relayed verbatim — paraphrasing is how a
+            // reader ends up hunting for a problem the tool had already named.
+            // AND NO "re-open": the page is fine, and re-opening would only be
+            // refused again.
+            sendFailed(
+              json,
+              verdict,
+              'Not sent — the engine refused this pass.',
+              text || 'It answered ' + res.status + ' without saying why.',
+            )
+          } else {
+            sendFailed(
+              json,
+              verdict,
+              'Not sent — the server answered ' + res.status + '.',
+              text || 'It gave no reason.',
+            )
+          }
+          return
+        }
+        clearSendFailure()
+        var code = ''
+        try { code = JSON.parse(text).code } catch (e) {}
+        // NAME THE COMMAND. Not "claim it with 418207", which instructs a
+        // transcription nobody needs to make, and not "tell Claude it is
+        // waiting", which describes the arrangement `/spec-reviewed` replaced —
+        // narrating that a pass exists and hoping the agent looks. The code
+        // stays, as the thing to CHECK: it is the one part of a waiting pass
+        // that tells yours apart from anyone else's.
+        if (code) {
+          // SENT, AND NOW ASK WHAT BECAME OF IT. The page used to name the
+          // command here unconditionally — the same sentence whether a session
+          // was waiting to claim the pass or nothing was — because it had no
+          // way to find out. It has one now.
+          // Set BEFORE the draw, so the first render of the decided panel is
+          // already the waiting shape rather than the pessimistic one.
+          asking = true
+          markDecided(verdict, '/spec-reviewed ' + code, null)
+          watchPass(code, verdict)
+        } else {
+          // NO CODE, NO COMMAND. A `/spec-reviewed` with nothing after it still
+          // works — it picks up the single waiting pass — but the page cannot
+          // claim the server named THIS one, so it does not put words in its
+          // mouth. Bare is what the reader is told, because bare is what is true.
+          copyHint.textContent = 'Sent — run /spec-reviewed to pick it up.'
+          markDecided(verdict, null, null)
+        }
+      })
+    }, function () {
+      // THE REQUEST NEVER ARRIVED — the network, or a server that has stopped.
+      // Distinct from both refusals above: there is no status and no message,
+      // because nothing answered. Re-opening may fix it and the command
+      // certainly will, so both are offered.
+      sendFailed(
+        json,
+        verdict,
+        'Not sent — could not reach the server.',
+        'The request did not arrive: the server has stopped, or this device cannot reach it. ' +
+          'Re-open the page from the session that produced it to try again.',
+      )
+    })
+  }
+  /* ==========================================================================
+   * The command list — a verdict bar for a page that cannot deliver one
+   *
+   * A `file://` page has no server and no store, so its buttons never sent
+   * anything: they built a JSON blob and put it on the clipboard to paste. That
+   * is still the only way a pass carrying MARKS can travel, and it stays. What
+   * changes is the common case — a reader who ticked nothing and wrote nothing,
+   * whose whole pass is one word — where a command they run in the terminal
+   * beside them beats a wall of text every time.
+   *
+   * WHICH SHAPE IS LIVE IS DECIDED BY WHAT THE PASS CARRIES, and it is
+   * re-decided on every mark. Tick one accept and the rows stand down, because
+   * a command line cannot carry someone's notes and dropping them silently
+   * would be worse than asking for the paste. Clear it again and they return.
+   * ======================================================================== */
+  // Only a `file://` page. A served page posts; a published one writes to its
+  // store. Both can deliver, so both keep their buttons — decided from what the
+  // page IS, exactly as `send` decides.
+  var NO_TRANSPORT = location.protocol === 'file:' && !isArtifact()
+  var cmdList = document.getElementById('cmd-list')
+  var cmdLead = document.getElementById('cmd-lead')
+  var cmdRows = {}
+  function buildCmdRows() {
+    if (!NO_TRANSPORT || !cmdList) return
+    // WHERE, not just what. "Run one of these where it is" assumed the reader
+    // knew which terminal counts, and there is usually more than one open. The
+    // answer is specific and worth saying: the session that produced this page
+    // is the one holding the review.
+    cmdLead.textContent =
+      'This page has no way to reach Claude. Copy one of these and paste it into the ' +
+      'Claude Code session that produced this review — that is the one waiting for your verdict.'
+    // THE SAME LIST THE BAR USES. `OFFERED` already answers which verdicts this
+    // render offers — a mid-run page lists Continue and never the committing
+    // pair — so deriving the rows from it is what keeps the two from drifting.
+    OFFERED.forEach(function (verdict) {
+      var row = el('div', 'cmd-row')
+      row.setAttribute('data-verdict', verdict)
+      var label = el('span', 'cmd-label', LABELS[verdict])
+      var cmd = el('code', 'cmd-text', '/spec-reviewed ' + verdict)
+      row.appendChild(label)
+      row.appendChild(cmd)
+      // NEVER A BUTTON THAT CANNOT COPY — the same rule `showCommand` follows,
+      // through the same `canCopy`. A control that does nothing on tap reads as
+      // a broken page; a control that is MISSING where it would have worked
+      // reads as a page that never offered it, which is the failure this shares
+      // its capability check to avoid.
+      if (canCopy()) {
+        var copy = el('button', 'cmd-copy', 'Copy')
+        copy.setAttribute('type', 'button')
+        copy.addEventListener('click', function () {
+          copyText(cmd.textContent, cmd).then(function () {
+            // COPIED IS DECIDED. The reader has the command; what happens next
+            // happens in their terminal, and the page has nothing left to do
+            // but say what they chose — with the command repeated, because a
+            // copy can fail silently and an hour later this box is the only
+            // record of it.
+            markDecided(verdict, cmd.textContent, false)
+          }, function () {
+            copy.textContent = selectNode(cmd) ? 'Copy failed — selected' : 'Copy failed'
+          })
+        })
+        row.appendChild(copy)
+      }
+      cmdList.appendChild(row)
+      cmdRows[verdict] = row
+    })
+  }
+  /**
+   * Decide, now, which of the two shapes this page is offering.
+   *
+   * Called from `refresh`, so it re-answers on every mark rather than once at
+   * load: the reader who ticks an accept half-way through has changed what
+   * their pass contains, and the page has to change with them.
+   */
+  function drawCmdList() {
+    if (!NO_TRANSPORT || !cmdList) return
+    var marked = pending() > 0
+    cmdList.hidden = marked
+    Object.keys(cmdRows).forEach(function (k) { cmdRows[k].hidden = marked })
+    // The bar comes back to carry what a command cannot, and SAYS SO. A reader
+    // whose notes had been dropped would not find out until the review came
+    // back without them.
+    verdictEl.hidden = !marked
+    if (marked) {
+      copyHint.hidden = false
+      copyHint.textContent =
+        'You have marked something up, and a command line cannot carry notes — ' +
+        'use a verdict button below and paste what it copies.'
+    } else if (copyHint.textContent.indexOf('cannot carry notes') !== -1) {
+      copyHint.hidden = true
+      copyHint.textContent = ''
+    }
+  }
+  // How long to keep asking, and how often. A claim is a file-watch waking a
+  // session that is already sitting there, so the answer normally arrives in
+  // well under a second; these are sized for the case where it does not.
+  var PASS_POLL_MS = 900
+  var PASS_POLL_ROUNDS = 8
+  /**
+   * Ask the engine what became of the pass we just sent, and end on the answer.
+   *
+   * THE PAGE STOPPED GUESSING. It used to hand over `/spec-reviewed <code>` on
+   * every successful POST, because it could not tell an auto-claimed pass from
+   * one nobody was listening for — so the reader was told to run a command they
+   * almost never needed, in the same words used when running it was the only
+   * thing that would save their review. Both sentences are now earned.
+   *
+   * ONE ANSWER TAKES THE COMMAND AWAY, and it is the positive one: `claimed`,
+   * which the engine reads off a decision log that NAMES this code. Everything
+   * else — `waiting`, `unknown`, a server that never replied, a body that did
+   * not parse, an older daemon with no lookup, the rounds running out — leaves
+   * the command exactly where it is. A command nobody needed to run costs a
+   * glance; a pass nobody claims costs the review.
+   *
+   * WHAT WOULD FOOL A LOOSER VERSION: treating a failed poll as "probably fine".
+   * The failures that make a poll fail are the same ones that make a claim fail
+   * — the machine sleeping, the daemon restarting, the network going — so the
+   * moment this is least able to see is the moment its answer matters most.
+   */
+  function watchPass(code, verdict) {
+    var rounds = 0
+    // `?pass=` on the page's own path, so the serve token in the URL guards
+    // this exactly as it guards everything else and there is no second address.
+    var url = location.pathname + '?pass=' + encodeURIComponent(code)
+    function stop(picked) {
+      // Every exit from the poll comes through here — claimed, out of rounds,
+      // a server that stopped answering — so this is the one place the spinner
+      // can be retired without listing the ways it might end.
+      asking = false
+      markDecided(verdict, '/spec-reviewed ' + code, picked)
+    }
+    function ask() {
+      rounds++
+      fetch(url, { method: 'GET', headers: { accept: 'application/json' } }).then(function (res) {
+        if (!res || !res.ok) return again()
+        return res.text().then(function (text) {
+          var state = null
+          try { state = JSON.parse(text).state } catch (e) {}
+          if (state === 'claimed') return stop(true)
+          return again()
+        })
+      }, again)
+    }
+    function again() {
+      // Out of rounds is a CANNOT-TELL, not a no. Nobody is obliged to claim a
+      // pass inside seven seconds, and a page that concluded "abandoned" would
+      // be inventing an answer out of its own impatience.
+      if (rounds >= PASS_POLL_ROUNDS) return stop(false)
+      window.setTimeout(ask, PASS_POLL_MS)
+    }
+    ask()
+  }
+  /**
+   * Is this page running as a published Artifact?
+   *
+   * A CAPABILITY CHECK, not a hostname one. `window.claude.use` is the whole
+   * contract for reaching anything the viewer grants, and it exists only where
+   * a viewer is there to grant it — so its presence is what distinguishes the
+   * published page from the two the engine serves, without this file knowing
+   * anything about where it was published.
+   */
+  function isArtifact() {
+    return Boolean(window.claude && typeof window.claude.use === 'function')
+  }
+  /**
+   * Hand the pass to the artifact's own store.
+   *
+   * THE THIRD TRANSPORT, for the reader no local server can reach: a phone on
+   * mobile data, or anyone away from the LAN the engine serves on. The pass
+   * lands in a document Claude reads back and deletes, so it is consumed
+   * exactly like a claimed one.
+   *
+   * `use` is asked only once the reader has pressed something. Asking at load
+   * would spend a consent prompt on every render, including the ones nobody
+   * ends in a verdict.
+   */
+  function sendToStore(json, verdict) {
+    copyHint.hidden = false
+    copyHint.textContent = 'Sending…'
+    var landed = false
+    window.claude.use('db').then(function (db) {
+      // `null` means this view cannot run db — not granted, not served, failed
+      // to load, all indistinguishable by design. The clipboard is still there,
+      // so the pass is recoverable rather than lost.
+      if (!db) {
+        showFallback(json, 'Could not reach the store. Copy this, then paste it to Claude.')
+        return
+      }
+      return db
+        .collection('passes')
+        .add({ spec: data.spec, at: new Date().toISOString(), render: data.generatedAt, blob: JSON.parse(json) })
+        .then(function () {
+          landed = true
+          // NO CODE HERE, and none invented. Six digits are the engine's, minted
+          // by the holding area this pass never went through — so the page says
+          // the one thing that is true and actionable.
+          copyHint.textContent = 'Sent. Run this where Claude is:'
+          showCommand('/spec-reviewed')
+          // A PUBLISHED PAGE CANNOT ASK. The pass went into the artifact's own
+          // store, which the engine only reads when someone tells it to, so
+          // nothing here could ever come back `true` — and the command is the
+          // whole ending rather than a fallback within it.
+          markDecided(verdict, '/spec-reviewed', null)
+        })
+    }).then(null, function (err) {
+      if (landed) return
+      showFallback(
+        json,
+        'Could not store the pass' + (err && err.code ? ' (' + err.code + ')' : '') +
+          '. Copy this, then paste it to Claude.',
+      )
+    })
+  }
+  function send(verdict) {
+    var json = JSON.stringify(buildBlob(verdict), null, 2)
+    // DECIDED FROM WHAT THE PAGE IS, not from what it can guess. A published
+    // page has a store and no server; a page opened over http was served by the
+    // engine and can hand the pass straight back; a `file://` page has no server
+    // to talk to and never will.
+    //
+    // NOT "try the POST and fall back on failure": a failed POST and an absent
+    // one look identical to the reader, so the fallback would hide a server
+    // that is refusing passes behind a message about copying. The published page
+    // is exactly that trap — its POST would go to claude.ai and fail — which is
+    // why it is answered first, by what the page IS rather than by what failed.
+    if (isArtifact()) {
+      sendToStore(json, verdict)
+      return
+    }
+    if (location.protocol !== 'file:') {
+      post(json, verdict)
+      return
+    }
+    // `file://` is not a secure context everywhere, and the clipboard API is
+    // absent or rejects there — so the textarea is a shipping requirement, not
+    // a nicety. It is the path a local page usually takes.
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      showFallback(json, 'Copy this, then paste it to Claude.')
+      return
+    }
+    navigator.clipboard.writeText(json).then(function () {
+      copyOut.hidden = true
+      copyHint.hidden = false
+      copyHint.textContent = 'Copied — paste it to Claude to pick up this review.'
+    }, function () {
+      showFallback(json, 'Could not reach the clipboard. Copy this, then paste it to Claude.')
+    })
+  }
+  /**
+   * The surfaces strip: where this review lives, and whether it is also running.
+   *
+   * AN ACTION IS NOT A VERDICT, and the whole strip exists to make that visible.
+   * A verdict is the reader's conclusion, consumed once. These change what is
+   * RUNNING (or which tiers are permitted) and hand the reader straight back to
+   * the same page with the same options — so pressing one must not close the
+   * page into its decided state, and must not clear a gate.
+   *
+   * ENABLE-ONLY for the tiers. Turning `network` off from a page reached over
+   * the network kills the page doing the turning, and the reader gains nothing
+   * they could not get by typing the command — so the engine's `tierAction`
+   * never offers a disable and this renders whatever it is given.
+   */
+  var ACTION_LABEL = {
+    // NAMES THE COMMIT IT PERFORMS. `live take` refuses a dirty worktree, so
+    // the action commits the phase before taking the instance — and a press
+    // that commits behind a label reading only "put it live" is a side effect
+    // nobody agreed to. The reader has still approved nothing: this is a
+    // precondition of the thing they asked for, not a verdict on the diff.
+    'live-on': '▶ Commit & put it live',
+    'allow-network': '▶ Allow network',
+    'allow-remote': '▶ Allow remote',
+  }
+  var ACTION_CMD = {
+    'live-on': '/spec-live',
+    'allow-network': 'skitterspec spec-env review allow network',
+    'allow-remote': '/spec-remote-review',
+  }
+  var SURFACE_LABEL = { live: 'live', network: 'network', remote: 'remote' }
+  function surfaceStateText(row) {
+    if (row.kind === 'live') {
+      if (row.state === 'on') return row.url ? 'on — running at ' + row.url : 'on'
+      if (row.state === 'held') return row.reason || 'held by another spec'
+      return 'off'
+    }
+    if (row.state === 'on') return row.url ? 'on — ' + row.url : 'on'
+    return row.state === 'off' ? 'off' : 'unavailable'
+  }
+  function buildSurfaces() {
+    var section = document.getElementById('surfaces')
+    var host = document.getElementById('surface-rows')
+    // ABSENT, NOT EMPTY. A render that carried no surfaces gets no strip and no
+    // line explaining the absence — a `--docs` page has no branch to put live,
+    // and that is a healthy page rather than a deprived one.
+    if (!section || !host || !data.surfaces || !data.surfaces.length) return
+    section.hidden = false
+    data.surfaces.forEach(function (row) {
+      var div = document.createElement('div')
+      div.className = 'surface-row'
+      var label = document.createElement('span')
+      label.className = 'surface-label'
+      label.textContent = SURFACE_LABEL[row.kind === 'live' ? 'live' : row.tier] || ''
+      div.appendChild(label)
+      var state = document.createElement('span')
+      state.className = 'surface-state'
+      state.textContent = surfaceStateText(row)
+      div.appendChild(state)
+      if (row.action) {
+        if (NO_TRANSPORT) {
+          // No server and no store, so a button here would build an instruction
+          // with nowhere to go. The command is the honest control — exactly the
+          // trade the verdict bar already makes on a `file://` page.
+          var cmd = document.createElement('code')
+          cmd.className = 'surface-cmd'
+          cmd.textContent = ACTION_CMD[row.action] || ''
+          div.appendChild(cmd)
+        } else {
+          var btn = document.createElement('button')
+          btn.type = 'button'
+          btn.textContent = ACTION_LABEL[row.action] || row.action
+          btn.setAttribute('data-action', row.action)
+          btn.addEventListener('click', function () {
+            if (btn.disabled) return
+            sendAction(row.action, btn)
+          })
+          div.appendChild(btn)
+        }
+      }
+      // THE COMMAND FOR A DIRECTION THE PAGE DOES NOT OFFER. A live spec shows
+      // no press — handing the instance back to `main` is a workspace decision,
+      // not this review's — so the line names `/spec-live main` instead, and the
+      // reader is never left knowing what they want and not what to type.
+      if (row.command && !row.action) {
+        var cmdOnly = document.createElement('code')
+        cmdOnly.className = 'surface-cmd'
+        cmdOnly.textContent = row.command
+        div.appendChild(cmdOnly)
+      }
+      if (row.note) {
+        var note = document.createElement('span')
+        note.className = 'surface-note'
+        note.textContent = row.note
+        div.appendChild(note)
+      }
+      host.appendChild(div)
+    })
+  }
+  /**
+   * Send an action, and leave the page exactly as live as it was.
+   *
+   * IT CARRIES NO MARKS. An action blob is an instruction, not a review pass —
+   * so the accepts and comments stay on the page and travel with the verdict
+   * the reader eventually chooses. Sending them here would merge them early and
+   * then send them again, which is one reader's review counted twice.
+   *
+   * AND IT NEVER CALLS `markDecided`. The reader still owes a verdict; closing
+   * the page over an action would be the record-and-do-nothing ending this
+   * whole contract is against.
+   */
+  function sendAction(action, btn) {
+    var blob = {
+      version: 1,
+      spec: data.spec,
+      generatedAt: data.generatedAt,
+      accepted: [],
+      unaccepted: [],
+      comments: [],
+      action: action,
+    }
+    btn.disabled = true
+    var was = btn.textContent
+    btn.textContent = 'Sending…'
+    fetch(location.pathname, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(blob),
+    }).then(function (res) {
+      if (!res || !res.ok) {
+        btn.disabled = false
+        btn.textContent = was
+        return
+      }
+      return res.text().then(function (text) {
+        var code = null
+        try { code = JSON.parse(text).code } catch (e) {}
+        btn.textContent = 'Sent'
+        // RELOAD WHEN IT HAS BEEN ACTED ON, not on a timer. The agent re-renders
+        // after the action, so the page the reader wants is the next one — and
+        // `?pass=` already answers whether this exact code was claimed. Running
+        // out of rounds leaves the page alone rather than reloading on a guess.
+        if (code) watchAction(code, btn)
+      })
+    }, function () {
+      btn.disabled = false
+      btn.textContent = was
+    })
+  }
+  function watchAction(code, btn) {
+    var rounds = 0
+    var url = location.pathname + '?pass=' + encodeURIComponent(code)
+    function ask() {
+      rounds++
+      fetch(url, { method: 'GET', headers: { accept: 'application/json' } }).then(function (res) {
+        if (!res || !res.ok) return again()
+        return res.text().then(function (text) {
+          var state = null
+          try { state = JSON.parse(text).state } catch (e) {}
+          if (state === 'claimed') return window.location.reload()
+          return again()
+        })
+      }, again)
+    }
+    function again() {
+      // CANNOT TELL, so change nothing. Nobody is obliged to act on an action
+      // inside a few seconds, and a page that reloaded out of impatience would
+      // throw away marks the reader had not sent yet.
+      if (rounds >= PASS_POLL_ROUNDS) {
+        btn.textContent = 'Sent — reload when it is done'
+        return
+      }
+      window.setTimeout(ask, PASS_POLL_MS)
+    }
+    ask()
+  }
+  /**
+   * TEXT STILL IN AN EDITOR — the one thing on this page a verdict destroys.
+   *
+   * Typing in the box is not a note; `Add note` is. So a reader who writes three
+   * lines and then presses a verdict sends a pass that does not contain them,
+   * `drawDecided` takes the diff away, and the text goes with it. Nothing said
+   * so, and there is nothing to go back to.
+   *
+   * WARNED, NOT REFUSED, and the distinction is the whole design. Discarding it
+   * is often exactly what the reader means — half a sentence, a note they
+   * thought better of — and this page makes ONE refusal on purpose (an open
+   * note blocks a committing verdict, mirroring `judgeVerdict`) and must not
+   * grow a second one it invented. So the first press says what would be lost
+   * and sends nothing; the same press again sends.
+   *
+   * THE CONFIRMATION IS OF WHAT THE READER WAS SHOWN, which is why the text
+   * itself is remembered and not just the verdict. Otherwise a warning raised
+   * over one note would silently carry away a second one written after it.
+   */
+  var warned = null
+  function unsentEditors() {
+    var out = []
+    Array.prototype.forEach.call(document.querySelectorAll('.note-input'), function (b) {
+      if (String(b.value || '').trim()) out.push(b)
+    })
+    return out
+  }
+  function clearWarn() {
+    warned = null
+    if (!verdictWarn) return
+    verdictWarn.hidden = true
+    verdictWarn.textContent = ''
+  }
+  function mayLose(verdict) {
+    var open = unsentEditors()
+    // Whitespace is not unfinished work, and neither is an editor opened and
+    // left empty. A page that stopped on those would teach the reader to press
+    // everything twice, which is how a warning stops being read.
+    if (!open.length) { clearWarn(); return true }
+    var text = open.map(function (b) { return b.value }).join('\u0000')
+    if (warned && warned.verdict === verdict && warned.text === text) { clearWarn(); return true }
+    warned = { verdict: verdict, text: text }
+    if (verdictWarn) {
+      verdictWarn.hidden = false
+      verdictWarn.textContent =
+        open.length + (open.length === 1 ? ' note is' : ' notes are') +
+        ' still in the box and not added. Press “Add note” to keep ' +
+        (open.length === 1 ? 'it' : 'them') + ', or press “' + (LABELS[verdict] || verdict) +
+        '” again to send without ' + (open.length === 1 ? 'it' : 'them') + '.'
+    }
+    // Take the reader to the first one. The bar is at the foot of the page and
+    // the editor can be a screen away, so a line naming a note they cannot see
+    // is only half an answer.
+    open[0].scrollIntoView()
+    open[0].focus()
+    return false
+  }
+  Object.keys(verdictBtns).forEach(function (verdict) {
+    verdictBtns[verdict].addEventListener('click', function () {
+      // A disabled or hidden button does not fire in a browser; the guard is
+      // for every other caller, and it keeps both the block and the button set
+      // facts rather than styles — a verdict this render never offered must not
+      // be reachable by dispatching at it.
+      if (verdictBtns[verdict].disabled || verdictBtns[verdict].hidden) return
+      if (!mayLose(verdict)) return
+      send(verdict)
+    })
+  })
+  // Said only when the engine reported one. A page from a render that could not
+  // read its own version says nothing rather than claiming "unknown" — an
+  // absence here is about the lookup, not about the page.
+  if (data.engine) {
+    // `0.0.0` is what the unpublished source package carries, so a page drawn
+    // from a working copy would otherwise claim a version that has never been
+    // released. This line exists to answer "which engine drew this" — and a
+    // string that LOOKS like a version and is not one answers it wrongly, which
+    // is worse than not answering. The field itself is untouched: the serve
+    // daemon compares it to spot a stale renderer, and it must stay a version.
+    document.getElementById('drawn-by').textContent =
+      'rendered by skitterspec ' + (data.engine === '0.0.0' ? '(unreleased build)' : data.engine)
+  }
+  restore()
+  buildCmdRows()
+  buildSurfaces()
+  drawContext()
+  drawLog()
+  drawDecided()
+  wireChecks()
+  wireGotos()
+  state.forEach(function (st) {
+    var btn = st.details && st.details.querySelector('.accept')
+    if (btn) btn.setAttribute('aria-pressed', String(st.accept))
+    if (st.rendered) renderFile(st)
+    redrawStrip(st)
+  })
+  refresh()
+  // The [data-theme] blocks are unreachable in a local file without this — a
+  // browser only ever supplies prefers-color-scheme.
+  var themeBtn = document.getElementById('theme')
+  themeBtn.addEventListener('click', function () {
+    var root = document.documentElement
+    var now = root.getAttribute('data-theme')
+    var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    var next = now === 'dark' ? 'light' : now === 'light' ? 'dark' : dark ? 'light' : 'dark'
+    root.setAttribute('data-theme', next)
+    themeBtn.textContent = next === 'dark' ? 'Theme: dark' : 'Theme: light'
+  })
+  // --- header --------------------------------------------------------------
+  var titleEl = document.getElementById('title')
+  titleEl.textContent = data.title
+  /**
+   * The tracker ticket, beside the title and linked where there is a url.
+   *
+   * `href` IS SET ONLY FROM A URL THE ENGINE ALREADY VETTED as http(s) — see
+   * `readTicket`. The value originates in a spec file someone edits, and this
+   * page is served over the network, so a `javascript:` url in an href would be
+   * script execution. An id with no usable url still renders; it just does not
+   * become a link, which is the harmless half of the pair.
+   */
+  ;(function () {
+    var tk = data.context && data.context.ticket
+    if (!tk || !tk.id) return
+    var node
+    if (tk.url) {
+      node = document.createElement('a')
+      node.setAttribute('href', tk.url)
+      node.setAttribute('target', '_blank')
+      node.setAttribute('rel', 'noopener noreferrer')
+    } else {
+      node = document.createElement('span')
+    }
+    node.className = 'ticket'
+    node.textContent = tk.id
+    titleEl.appendChild(document.createTextNode(' '))
+    titleEl.appendChild(node)
+  })()
+  /**
+   * An ISO timestamp is a machine's format. The header showed
+   * `2026-09-16T13:53:58.370Z` to a person deciding whether a page was stale,
+   * which is the one question it is there to answer and the hardest way to ask
+   * it. Rendered in the READER's locale and zone, because that is the clock
+   * they are comparing against; the raw value stays as the `title` so nothing
+   * precise is lost, and it survives a browser that throws on either call.
+   */
+  function whenRendered(iso) {
+    try {
+      var d = new Date(iso)
+      if (isNaN(d.getTime())) return iso
+      return d.toLocaleString(undefined, {
+        day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+      })
+    } catch (e) {
+      return iso
+    }
+  }
+  var t = data.totals
+  var sub = document.getElementById('sub')
+  function part(text, cls) { sub.appendChild(el('span', cls, text)) }
+  function sep() { sub.appendChild(el('span', 'sep', '·')) }
+  part(data.branch)
+  sep()
+  part(data.mode === 'branch'
+    ? 'everything since ' + data.base + (data.fellBack ? ' (working tree clean)' : '')
+    : data.mode === 'docs'
+      ? "the spec's own documents"
+      : 'uncommitted work')
+  sep()
+  part(t.files + ' file' + (t.files === 1 ? '' : 's'))
+  sep()
+  part('+' + t.additions, 'a')
+  part(' ')
+  part('-' + t.deletions, 'd')
+  sep()
+  var when = el('span', null, whenRendered(data.generatedAt))
+  when.setAttribute('title', data.generatedAt)
+  sub.appendChild(when)
+})()
+</script>
+</body>
+</html>