npm - @skitterbyte/skitterspec-linear - Versions diffs - 11.0.0 → 13.0.0 - Mend

@skitterbyte/skitterspec-linear 11.0.0 → 13.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 (60) hide show

package/MIGRATION.md +260 -10
package/README.md +32 -2
package/assets/claude-md-section.md +48 -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 +9 -3
package/assets/core/env.config.md +102 -30
package/assets/core/gating.config.json.example +4 -0
package/assets/core/gating.config.md +81 -0
package/assets/core/linear.config.md +67 -8
package/assets/review/page.html +1501 -0
package/assets/rules/spec-planning.md +224 -15
package/assets/rules/spec-reports.md +269 -0
package/assets/skills/spec/SKILL.md +64 -13
package/assets/skills/spec-bug/SKILL.md +193 -27
package/assets/skills/spec-cancel/SKILL.md +99 -8
package/assets/skills/spec-claim/SKILL.md +114 -0
package/assets/skills/spec-complete/SKILL.md +123 -22
package/assets/skills/spec-diff/SKILL.md +564 -0
package/assets/skills/spec-hotfix/SKILL.md +202 -22
package/assets/skills/spec-init/SKILL.md +49 -9
package/assets/skills/spec-linear-setup/SKILL.md +86 -7
package/assets/skills/spec-list/SKILL.md +218 -0
package/assets/skills/spec-next/SKILL.md +300 -7
package/assets/skills/spec-push/SKILL.md +45 -22
package/assets/skills/spec-review/SKILL.md +59 -11
package/assets/skills/spec-reviewed/SKILL.md +241 -0
package/assets/skills/spec-start/SKILL.md +426 -66
package/assets/skills/spec-status/SKILL.md +24 -2
package/assets/skills/spec-sync/SKILL.md +47 -11
package/assets/skills/spec-to-main/SKILL.md +42 -20
package/package.json +11 -7
package/src/cli.js +1710 -80
package/src/env/building.js +143 -0
package/src/env/classify.js +91 -0
package/src/env/config.js +57 -9
package/src/env/provision.js +192 -19
package/src/env/proxy.js +34 -1
package/src/env/render.js +3 -12
package/src/env/resolve.js +296 -9
package/src/env/review.js +1329 -0
package/src/env/serve.js +549 -0
package/src/env/teardown.js +13 -6
package/src/gating.js +155 -0
package/src/init.js +124 -2
package/src/prompts.js +10 -1
package/src/vendor/linear/api.js +104 -1
package/src/vendor/linear/cli-sync.js +874 -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 +74 -5
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,1501 @@
+<!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; }
+.context { margin: 0 0 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel, transparent); }
+.context h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .9rem 0 .35rem; }
+.context h3:first-child { margin-top: 0; }
+.context p { margin: 0 0 .5rem; line-height: 1.5; }
+.context p:last-child { margin-bottom: 0; }
+.context table { border-collapse: collapse; width: 100%; font-size: .85rem; }
+.context th, .context td { text-align: left; padding: .2rem .5rem .2rem 0; vertical-align: top; }
+.context th { color: var(--muted); font-weight: 600; }
+.context ul { margin: 0; padding-left: 1.1rem; }
+.context li { margin: .15rem 0; line-height: 1.45; }
+.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; }
+.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">
+<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. -->
+    <section class="context" 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">__REVIEW_BLOCK__</div>
+    <div id="files"></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.
+  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 }))
+    } 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 || {}
+    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']
+  var LABELS = { commit: '✓ Commit', 'commit-continue': '✓ Commit & Continue' }
+  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 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() {
+    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()
+  }
+  // The last honoured verdict, as history. It is why the page can look
+  // untouched after an approval: the verdict was consumed, not stored.
+  function drawLog() {
+    var last = data.notes && data.notes.lastDecision
+    if (!last) return
+    var said = last.verdict === 'approve' ? 'approved' : last.verdict === 'changes' ? 'changes requested' : 'discussed'
+    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) {
+    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)
+        } 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.'
+        }
+      })
+    }, 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.')
+    })
+  }
+  function send(verdict) {
+    var json = JSON.stringify(buildBlob(verdict), null, 2)
+    // DECIDED FROM WHAT THE PAGE IS, not from what it can guess. 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.
+    if (location.protocol !== 'file:') {
+      post(json)
+      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) {
+    document.getElementById('drawn-by').textContent = 'rendered by skitterspec ' + data.engine
+  }
+  restore()
+  drawContext()
+  drawLog()
+  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>