npm - @skitterbyte/skitterspec-linear - Versions diffs - 12.0.0 → 14.0.0 - Mend

@skitterbyte/skitterspec-linear 12.0.0 → 14.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 (58) hide show

package/MIGRATION.md +296 -10
package/README.md +32 -2
package/assets/claude-md-section.md +38 -2
package/assets/commands/spec-connect.md +2 -2
package/assets/commands/spec-live.md +2 -2
package/assets/core/SETUP.md +21 -3
package/assets/core/env.config.json.example +7 -3
package/assets/core/env.config.md +90 -30
package/assets/core/linear.config.md +58 -0
package/assets/hooks/review-gate.js +141 -0
package/assets/review/page.html +1787 -0
package/assets/rules/spec-planning.md +250 -10
package/assets/rules/spec-reports.md +321 -0
package/assets/skills/spec/SKILL.md +33 -5
package/assets/skills/spec-bug/SKILL.md +172 -9
package/assets/skills/spec-cancel/SKILL.md +98 -21
package/assets/skills/spec-claim/SKILL.md +114 -0
package/assets/skills/spec-complete/SKILL.md +94 -25
package/assets/skills/spec-diff/SKILL.md +678 -0
package/assets/skills/spec-hotfix/SKILL.md +172 -11
package/assets/skills/spec-init/SKILL.md +56 -7
package/assets/skills/spec-linear-setup/SKILL.md +55 -1
package/assets/skills/spec-list/SKILL.md +218 -0
package/assets/skills/spec-next/SKILL.md +419 -7
package/assets/skills/spec-push/SKILL.md +32 -8
package/assets/skills/spec-review/SKILL.md +40 -5
package/assets/skills/spec-reviewed/SKILL.md +258 -0
package/assets/skills/spec-start/SKILL.md +386 -106
package/assets/skills/spec-status/SKILL.md +24 -2
package/assets/skills/spec-sync/SKILL.md +40 -4
package/assets/skills/spec-to-main/SKILL.md +28 -6
package/package.json +11 -7
package/src/cli.js +1808 -89
package/src/env/building.js +143 -0
package/src/env/commitcmd.js +108 -0
package/src/env/config.js +58 -9
package/src/env/hooks.js +117 -0
package/src/env/provision.js +54 -15
package/src/env/proxy.js +34 -1
package/src/env/render.js +3 -12
package/src/env/resolve.js +295 -9
package/src/env/review.js +1536 -0
package/src/env/serve.js +573 -0
package/src/env/teardown.js +13 -6
package/src/init.js +150 -1
package/src/vendor/linear/api.js +104 -1
package/src/vendor/linear/cli-sync.js +854 -17
package/src/vendor/linear/config.js +8 -0
package/src/vendor/linear/credentials.js +94 -0
package/src/vendor/linear/doctor.js +35 -0
package/src/vendor/linear/identity.js +105 -0
package/src/vendor/linear/mcp.js +26 -0
package/src/vendor/sync-core/index.js +6 -2
package/src/vendor/sync-core/src/compare.js +49 -3
package/src/vendor/sync-core/src/normalize.js +30 -0
package/src/vendor/sync-core/src/push.js +11 -1
package/src/vendor/sync-core/src/write.js +38 -0
package/LICENSE +0 -21

package/assets/review/page.html ADDED Viewed

@@ -0,0 +1,1787 @@
+<!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;
+}
+.tree { padding: 0 .6rem .7rem; font-size: .82rem; }
+.tree ul { list-style: none; margin: 0; padding-left: .8rem; }
+.tree > ul { padding-left: 0; }
+.tree .dir { color: var(--muted); display: block; padding: .1rem 0; }
+.tree-file {
+  display: flex;
+  gap: .4rem;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  padding: .15rem .3rem;
+  color: inherit;
+  font-size: .82rem;
+}
+.tree-file:hover { background: var(--panel-2); color: inherit; }
+.tree-file .nm { overflow-wrap: anywhere; }
+.tree-file .ct { margin-left: auto; white-space: nowrap; font-family: ui-monospace, monospace; font-size: .75rem; }
+.tree-file.is-noise .nm { color: var(--muted); }
+.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;
+}
+.check-note { grid-column: 2; }
+.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);
+}
+.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);
+}
+.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); }
+.v-changes { color: var(--flag-fg); background: var(--flag-bg); }
+/* 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; }
+/* 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; }
+.decided-toggle { font-size: .78rem; }
+/* 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); }
+.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;
+}
+.sent-cmd-copy { white-space: nowrap; }
+/* 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. -->
+    <!-- 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>
+      <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 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>
+        <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>
+      <p class="verdict-log" id="verdict-log" hidden></p>
+      <p class="copy-hint" id="copy-hint" hidden></p>
+      <p class="sent-cmd" id="sent-cmd" hidden>
+        <input class="sent-cmd-text" id="sent-cmd-text" readonly aria-label="Command to run">
+        <button type="button" class="sent-cmd-copy" id="sent-cmd-copy" hidden>Copy</button>
+      </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
+  }
+  // --- 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 = data.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))
+      }
+      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)
+  }
+  // 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 meta = c.line == null ? 'on this file' : 'line ' + c.line
+    if (c.check) meta += ' · answering the review'
+    if (!c.raisedAt) meta += ' · not sent yet'
+    td.appendChild(el('span', 'note-meta', meta))
+    td.appendChild(el('span', 'note-text', c.note))
+    if (c.resolved) {
+      td.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)
+      td.appendChild(actions)
+    }
+    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')
+    td.appendChild(el('span', 'note-meta', row ? 'line ' + (row.n == null ? '—' : row.n) : 'on this file'))
+    td.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)
+    }))
+    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)
+    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
+  }
+  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' })
+  }
+  function renderTree(node) {
+    var ul = el('ul')
+    Object.keys(node.dirs).sort().forEach(function (name) {
+      var li = el('li')
+      li.appendChild(el('span', 'dir', name + '/'))
+      li.appendChild(renderTree(node.dirs[name]))
+      ul.appendChild(li)
+    })
+    node.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'
+      b.appendChild(el('span', 'nm', entry.name))
+      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) })
+      li.appendChild(b)
+      ul.appendChild(li)
+    })
+    return ul
+  }
+  var tree = document.getElementById('tree')
+  tree.appendChild(renderTree(buildTree(data.files)))
+  document.getElementById('tree-summary').textContent =
+    'Files (' + data.files.length + ')'
+  if (window.matchMedia && !window.matchMedia('(min-width: 60rem)').matches) {
+    document.getElementById('tree-wrap').open = false
+  }
+  // --- 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'),
+    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']
+  // ALL FOUR, because this is now 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.
+  var LABELS = {
+    commit: '✓ Commit',
+    'commit-continue': '✓ Commit & 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',
+  }
+  var verdictCount = document.getElementById('verdict-count')
+  var verdictLog = document.getElementById('verdict-log')
+  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')
+  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()
+    var n = pending()
+    var open = openNotes()
+    verdictCount.textContent = n
+      ? n + (n === 1 ? ' mark to send' : ' marks to send')
+      : '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 other two are always available on purpose — a
+    // note you want acted on, and a question, are never the wrong thing to send.
+    verdictBtns.changes.disabled = false
+    verdictBtns.discuss.disabled = false
+    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'
+    // 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
+    // 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)) {
+      copyHint.hidden = false
+      copyHint.textContent = 'Sent. Run this where Claude is:'
+      showCommand(decided.cmd)
+      return
+    }
+    copyHint.hidden = true
+    sentCmd.hidden = true
+    copyOut.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. */
+  function markDecided(verdict, cmd) {
+    decided = { verdict: verdict, at: new Date().toISOString(), cmd: cmd || null }
+    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',
+    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.
+   */
+  function showCommand(cmd) {
+    sentCmd.hidden = false
+    sentCmdText.value = cmd
+    var canCopy = Boolean(navigator.clipboard && navigator.clipboard.writeText)
+    sentCmdCopy.hidden = !canCopy
+    if (canCopy) return
+    // Selected, 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.
+    sentCmdText.focus()
+    sentCmdText.select()
+    copyHint.textContent = copyHint.textContent + ' (selected — copy it)'
+  }
+  if (sentCmdCopy) {
+    sentCmdCopy.addEventListener('click', function () {
+      navigator.clipboard.writeText(sentCmdText.value).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.
+        sentCmdText.focus()
+        sentCmdText.select()
+        sentCmdCopy.textContent = 'Copy failed — selected'
+      })
+    })
+  }
+  /**
+   * 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)
+    }
+    if (ctx.problem) {
+      // FIRST PARAGRAPH OPEN, the remainder folded. A phone shows perhaps six
+      // lines before the file list is pushed off-screen, and pushing it off is
+      // the thing this header was built to avoid.
+      var paras = String(ctx.problem).split(/\n\s*\n/)
+      head(why, 'Why')
+      var lead = document.createElement('p')
+      lead.textContent = paras[0].replace(/\s+/g, ' ').trim()
+      why.appendChild(lead)
+      for (var i = 1; 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)
+      }
+    }
+    if (ctx.phase) {
+      head(rest, 'Phase ' + ctx.phase.n + (ctx.phase.title ? ' — ' + ctx.phase.title : ''))
+      drewRest = true
+      if (ctx.phase.goal) {
+        var g = document.createElement('p')
+        g.textContent = ctx.phase.goal
+        rest.appendChild(g)
+      }
+      if (ctx.phase.tasks && ctx.phase.tasks.length) {
+        var ul = document.createElement('ul')
+        ctx.phase.tasks.forEach(function (t) {
+          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 = t.done ? 'done' : ''
+          li.textContent = (t.done ? '✅ ' : '⬜ ') + t.text
+          ul.appendChild(li)
+        })
+        rest.appendChild(ul)
+      }
+    }
+    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
+  }
+  // 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) {
+    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. Its message
+          // names the entry that was wrong, so it is shown rather than summarised.
+          copyHint.textContent = 'Not sent — ' + (text || res.status)
+          return
+        }
+        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) {
+          copyHint.textContent = 'Sent. Run this where Claude is:'
+          showCommand('/spec-reviewed ' + code)
+          markDecided(verdict, '/spec-reviewed ' + code)
+        } 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)
+        }
+      })
+    }, function () {
+      // The server was there when the page was served and is not now. Falling
+      // back to the clipboard keeps the pass recoverable rather than lost.
+      showFallback(json, 'Could not reach the server. Copy this, then paste it to Claude.')
+    })
+  }
+  /**
+   * 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')
+          markDecided(verdict, '/spec-reviewed')
+        })
+    }).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.')
+    })
+  }
+  Object.keys(verdictBtns).forEach(function (verdict) {
+    verdictBtns[verdict].addEventListener('click', function () {
+      // A disabled button does not fire in a browser; the guard is for every
+      // other caller, and it keeps the block a fact rather than a style.
+      if (verdictBtns[verdict].disabled) 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()
+  drawContext()
+  drawLog()
+  drawDecided()
+  wireChecks()
+  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 --------------------------------------------------------------
+  document.getElementById('title').textContent = data.title
+  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)' : '')
+    : 'uncommitted work')
+  sep()
+  part(t.files + ' file' + (t.files === 1 ? '' : 's'))
+  sep()
+  part('+' + t.additions, 'a')
+  part(' ')
+  part('-' + t.deletions, 'd')
+  sep()
+  part(data.generatedAt)
+})()
+</script>
+</body>
+</html>