@celsoft/coordinator 0.0.0 → 0.1.0

package/skills/default/skills/plan-page/assets/index.html

@@ -0,0 +1,854 @@
+<title>Plan</title>
+<meta name="claude:viewport-fit-sides" content="cover">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
+<style>
+/* Layout: one reading column; each section a heading and its summary, its lines indented beneath, each line led by
+   its mark's icon or a bullet, then its bold label where it has one. */
+:root {
+  --bg: #0f1216; --surface: #161a20; --raised: #1c212a; --line: #262c35; --fg: #e3e7ec; --muted: #8b95a3;
+  --accent: #6aa8ff; --accent-ink: #0b1a30; --warn: #e0b453; --hover: rgba(106, 168, 255, .08);
+  --ok: #5cc28a; --bad: #ef7a7a; --info: #6aa8ff; --soft: #c5ccd5;
+  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
+  --bg: #f6f7f9; --surface: #ffffff; --raised: #eef1f5; --line: #dde1e7; --fg: #1a1f26; --muted: #5d6673;
+  --accent: #2563c9; --accent-ink: #ffffff; --warn: #9a6a00; --hover: rgba(37, 99, 201, .07);
+  --ok: #1f8a52; --bad: #c23b3b; --info: #2563c9; --soft: #343c47; color-scheme: light; } }
+:root[data-theme="light"] {
+  --bg: #f6f7f9; --surface: #ffffff; --raised: #eef1f5; --line: #dde1e7; --fg: #1a1f26; --muted: #5d6673;
+  --accent: #2563c9; --accent-ink: #ffffff; --warn: #9a6a00; --hover: rgba(37, 99, 201, .07);
+  --ok: #1f8a52; --bad: #c23b3b; --info: #2563c9; --soft: #343c47; color-scheme: light; }
+body { background: var(--bg); color: var(--fg); font: 15px/1.6 var(--sans); margin: 0; }
+/* Spacing scale 4 8 12 16 24 32 48. Edges: E0 heading, summary, lead; E1 = E0 + 28 label; E2 = E1 + label column + 16 text. */
+:root { --lead: 16px; --lead-gap: 12px; --col-gap: 16px; --lh: 22px; }
+.wrap { max-width: 760px; margin: 0 auto; padding-block: 32px 96px; display: grid; gap: 32px;
+  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
+header { display: grid; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
+.eyebrow { font: 500 12px/1.3 var(--mono); color: var(--muted); letter-spacing: .03em; overflow-wrap: anywhere; }
+h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
+.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font-size: 13px; }
+.bar .grow { flex: 1; }
+.status { color: var(--fg); font-size: 14px; font-weight: 500; }
+.status a { color: var(--info); }
+.hint { font-size: 12px; }
+button { font: inherit; color: inherit; }
+.done { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 5px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
+.done:disabled { opacity: .6; cursor: default; }
+.notice { border: 1px solid var(--warn); color: var(--warn); border-radius: 4px; padding: 8px 12px; font-size: 13px; }
+main { display: grid; min-width: 0; }
+section { display: grid; min-width: 0; scroll-margin-top: 16px; }
+section + section { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 32px; }
+h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
+.summary { margin: 6px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.5; color: var(--fg); }
+.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 20px; }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend .mark { margin-top: 0; }
+section > .lines { margin-top: 16px; }
+.lines { display: grid; gap: 10px; min-width: 0; font-size: 14.5px; line-height: var(--lh); }
+.lines .text { color: var(--soft); }
+.lines .lines { margin-top: 8px; gap: 6px; padding-left: 12px; border-left: 1px solid var(--line); }
+.row { display: grid; grid-template-columns: var(--lead) minmax(0, 1fr) 1rem; column-gap: var(--lead-gap); row-gap: 4px; align-items: start; border-radius: 4px; min-width: 0; }
+:root { --pad: calc(var(--col-gap) - var(--lead-gap)); }
+.row.named, .row.term-row { grid-template-columns: var(--lead) min(calc(var(--labelw, 8rem) + var(--pad)), 40%) minmax(0, 1fr) 1rem; }
+.lines .lines > .row.named:not(:has(> .mark)) { grid-template-columns: min(var(--subw, 6rem), 40%) minmax(0, 1fr) 1rem; column-gap: var(--col-gap); }
+.lines .lines > .row.named:not(:has(> .mark)) > :first-child { display: none; }
+.row.file-row { grid-template-columns: var(--lead) min(calc(var(--filew, 16rem) + var(--pad)), 55%) minmax(0, 1fr) 1rem; }
+.row > .body { min-width: 0; }
+.commenting .row:hover { background: var(--hover); cursor: pointer; }
+.text { margin: 0; overflow-wrap: anywhere; }
+.text strong { font-weight: 600; }
+/* Bold is for terms alone: a term row's term and **term** in text; a label is set apart by color, not weight. */
+.term { font-weight: 600; overflow-wrap: anywhere; }
+.label { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
+.text em, .d-node em, .d-label em { font-style: italic; }
+.mark { width: 16px; height: 16px; margin-top: calc((var(--lh) - 16px) / 2); }
+.mark svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.c-ok { color: var(--ok); } .c-bad { color: var(--bad); } .c-warn { color: var(--warn); } .c-info { color: var(--info); } .c-muted { color: var(--muted); }
+code { font: 13px var(--mono); color: var(--info); }
+.files { display: grid; justify-items: start; min-width: 0; }
+.files code { color: var(--fg); line-height: var(--lh); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.bullet { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin-top: calc((var(--lh) - 5px) / 2); }
+.pin { width: 1px; height: var(--lh); justify-self: end; }
+nav.toc { display: none; }
+@media (min-width: 1180px) {
+  .wrap { max-width: 1000px; grid-template-columns: 176px minmax(0, 760px); column-gap: 64px; justify-content: center; }
+  .wrap > header, .wrap > main { grid-column: 2; }
+  nav.toc { display: grid; grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 32px; gap: 2px; font-size: 13px; line-height: 20px; padding-top: 2px; }
+  nav.toc a { color: var(--muted); text-decoration: none; padding: 4px 0 4px 12px; border-left: 2px solid transparent; display: flex; justify-content: space-between; gap: 8px; }
+  nav.toc a:hover { color: var(--fg); }
+  nav.toc a.on { color: var(--fg); border-left-color: var(--accent); }
+  nav.toc a span { font: 12px var(--mono); color: var(--muted); }
+}
+@media (max-width: 600px) {
+  .row.file-row { grid-template-columns: var(--lead) minmax(0, 1fr) 1rem; }
+  .row.file-row > .text { grid-column: 2; }
+}
+@media (max-width: 480px) {
+  :root { --lead-gap: 8px; }
+  .row.term-row, .row.named { grid-template-columns: var(--lead) minmax(0, 1fr) 1rem; }
+  .row.term-row > .text, .row.named > .body { grid-column: 2; }
+  .lines .lines > .row.named:not(:has(> .mark)) { grid-template-columns: minmax(0, 1fr) 1rem; }
+  .lines .lines > .row.named:not(:has(> .mark)) > .body { grid-column: 1; }
+}
+
+/* Journey: the happy path as a swimlane, one column per place, time running down; each step a card in its
+   place's column, the hop to the next step labelled; edge cases fold under the step they leave from. */
+.journey { display: grid; gap: 0; margin-top: 16px; --lanes: 3; }
+.j-lanes, .j-row { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); column-gap: 12px; }
+.j-lanes { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: var(--bg); padding-block: 6px 10px; }
+.j-lane { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lane); border-bottom: 2px solid var(--lane); padding-bottom: 6px; }
+.j-lane svg, .j-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
+.j-hop { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); column-gap: 12px; min-height: 30px; align-items: center; position: relative; }
+.j-hop > div { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding-left: 14px; }
+.j-hop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
+.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lane); border-radius: 6px; padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
+.step .j-n { font: 600 11px/1 var(--mono); color: var(--lane); }
+.step h3 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; }
+.step p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }
+.step .who { color: var(--muted); font-size: 12px; }
+.step .sees { color: var(--fg); }
+.step .sees::before { content: "Sees: "; color: var(--muted); }
+.j-chip { display: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--lane); }
+.step details { margin-top: 4px; }
+.step summary { cursor: pointer; font-size: 12px; color: var(--warn); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
+.step summary::-webkit-details-marker { display: none; }
+.step summary::before { content: "+"; font: 600 12px var(--mono); }
+.step details[open] summary::before { content: "\2212"; }
+.edges { display: grid; gap: 6px; margin-top: 6px; }
+.edge { border: 1px dashed var(--line); border-radius: 5px; padding: 6px 8px; display: grid; gap: 2px; }
+.edge b { font-size: 13px; }
+.edge p { font-size: 13px; }
+.edge .to { font-size: 11.5px; color: var(--muted); }
+.step > .pin { position: absolute; top: 10px; right: 8px; width: 1px; height: 1px; }
+.commenting .step:hover { border-color: var(--info); cursor: pointer; }
+.l-0 { --lane: var(--info); } .l-1 { --lane: var(--ok); } .l-2 { --lane: var(--warn); } .l-3 { --lane: var(--bad); }
+@media (max-width: 640px) {
+  .j-lanes { display: none; }
+  .j-row, .j-hop { grid-template-columns: minmax(0, 1fr); }
+  .j-row > .step { grid-column: 1 !important; }
+  .j-hop > div { grid-column: 1 !important; }
+  .j-chip { display: inline-flex; }
+}
+/* Screens: a line's screenshots as captioned figures, before and after side by side, stacked on a phone. */
+.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 10px; }
+.shot { position: relative; margin: 0; display: grid; gap: 6px; align-content: start; border-radius: 6px; padding: 6px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
+.shot img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--raised); cursor: zoom-in; }
+.shot figcaption { font-size: 13px; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }
+.shot .kind { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
+.shot .kind.before { color: var(--muted); } .shot .kind.after { color: var(--ok); }
+.shot > .pin { position: absolute; top: 10px; right: 8px; width: 1px; height: 1px; }
+.commenting .shot:hover { border-color: var(--info); cursor: pointer; }
+.commenting .shot img { cursor: pointer; }
+dialog.zoom { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
+dialog.zoom::backdrop { background: rgba(0, 0, 0, .8); }
+dialog.zoom img { display: block; max-width: 96vw; max-height: 92vh; cursor: zoom-out; }
+/* Mockups: a line's live mockups, the real UI in a frame at a phone's or a desktop's width, a desktop scaled to fit. */
+.live { margin-top: 10px; }
+/* A set of mockups: a settings-style list of its screens beside the one shown, a row of choices above it on a phone. */
+.mset { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; }
+.mset .live { margin-top: 0; }
+.mset-nav { display: grid; gap: 2px; position: sticky; top: 8px; }
+.mset-nav button { text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 6px 10px; border-radius: 0 4px 4px 0; cursor: pointer; display: grid; gap: 2px; }
+.mset-nav button:hover { background: var(--hover); }
+.mset-nav button.on { border-left-color: var(--accent); background: var(--raised); }
+.mset-nav b { font-size: 13.5px; font-weight: 500; color: var(--fg); }
+.mset-nav span { font-size: 12px; line-height: 1.4; color: var(--muted); }
+@media (max-width: 700px) {
+  .mset { grid-template-columns: minmax(0, 1fr); }
+  .mset-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
+  .mset-nav button { border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; }
+  .mset-nav button.on { border-color: var(--accent); }
+  .mset-nav span { display: none; }
+}
+.live .bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.live .bar figcaption { flex: 1; min-width: 0; }
+:is(.live, dialog.pop) .widths { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
+:is(.live, dialog.pop) .widths button, .live .open { font: 500 12px/1 var(--sans); color: var(--soft); background: transparent; border: 0; padding: 6px 10px; cursor: pointer; }
+:is(.live, dialog.pop) .widths button.on { background: var(--raised); color: var(--fg); }
+.live .open { border: 1px solid var(--line); border-radius: 6px; }
+.live .stage { position: relative; overflow: hidden; border-radius: 4px; background: var(--raised); margin-inline: auto; }
+.live iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: var(--bg); }
+.live .shield { position: absolute; inset: 0; display: none; }
+.commenting .live .shield { display: block; cursor: pointer; }
+dialog.full { border: 0; padding: 0; margin: auto; width: 96vw; height: 94vh; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; gap: 8px; background: transparent; }
+dialog.pop { border: 0; padding: 12px 16px 16px; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; box-sizing: border-box; background: var(--bg); color: var(--fg); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
+dialog.pop:focus { outline: none; }
+dialog.pop .head { display: flex; align-items: center; gap: 12px; font-size: 14px; }
+dialog.pop .head b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+dialog.pop .body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; min-height: 0; }
+dialog.pop .mset-nav { position: static; align-content: start; overflow: auto; }
+dialog.pop .pstage { display: flex; justify-content: center; min-height: 0; }
+dialog.pop .pstage iframe { height: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
+dialog.pop .close { font: 500 13px/1 var(--sans); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
+dialog.pop .close { color: var(--accent-ink); background: var(--accent); border: 0; }
+@media (max-width: 700px) { dialog.pop .body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } dialog.pop .mset-nav { display: flex; flex-wrap: wrap; gap: 6px; } }
+dialog.full::backdrop { background: rgba(0, 0, 0, .8); }
+dialog.full .head { display: flex; align-items: center; gap: 12px; color: #e3e7ec; font-size: 14px; }
+dialog.full .head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+dialog.full .close { font: 600 14px/1 var(--sans); color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 6px; padding: 10px 16px; cursor: pointer; }
+dialog.full iframe { flex: 1; width: 100%; border: 0; border-radius: 6px; background: var(--bg); }
+/* Layers: the gist is the whole plan at its shallowest, drawn large; a folded section shows its heading and summary,
+   a true picture on its own, with its lines one tap deeper. */
+.gist { margin: 4px 0 0; max-width: 60ch; font-size: 19px; line-height: 1.5; color: var(--fg); text-wrap: pretty; }
+.gist p { margin: 0; } .gist p + p { margin-top: 8px; }
+details.fold { margin-top: 12px; }
+details.fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--info); font-size: 13px; font-weight: 500; }
+details.fold > summary::-webkit-details-marker { display: none; }
+details.fold > summary::before { content: "+"; font: 600 13px var(--mono); }
+details.fold[open] > summary::before { content: "\2212"; }
+details.fold > .lines, details.fold > .journey { margin-top: 12px; }
+.why { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 68ch; }
+.why > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; color: var(--muted); }
+/* Diagram: boxes in rows, top to bottom, with labelled arrows drawn over them; a dashed arrow or box is an exception. */
+.diagram { position: relative; display: grid; gap: 72px; margin-top: 12px; padding: 16px 8px; }
+.d-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; }
+.d-node { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; max-width: 220px; display: grid; gap: 2px; text-align: center; }
+.d-node b { font-size: 14px; font-weight: 600; }
+.d-node span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
+.d-node.exception { border-style: dashed; border-color: var(--warn); }
+.d-node.new { border-color: var(--ok); }
+.diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.diagram path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
+.diagram path.exception { stroke: var(--warn); stroke-dasharray: 5 4; }
+.d-label { position: absolute; z-index: 2; transform: translate(-50%, -50%); background: var(--bg); color: var(--soft); font-size: 12px; line-height: 1.3; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
+.d-label.exception { color: var(--warn); }
+</style>
+
+<div class="wrap">
+  <nav class="toc" id="toc" aria-label="Sections"></nav>
+  <header>
+    <div class="eyebrow" id="eyebrow"></div>
+    <h1 id="title">Plan</h1>
+    <div class="gist" id="gist" hidden></div>
+    <div class="bar">
+      <span id="status" class="status"></span><span class="grow"></span><span id="hint" class="hint">To comment, turn on comment mode and tap a line</span>
+      <button class="done" id="done" type="button" hidden>Done, tell Claude</button>
+    </div>
+    <div class="notice" id="notice" hidden></div>
+  </header>
+  <main id="main"></main>
+</div>
+
+<script>
+// The plan skill's renderer: plan.json is Claude's data. A line with a label anchors its comment threads to its
+// section and label ("line:<section>/<label>"), so they survive reordering; any other line anchors by its place.
+// The shell draws every thread.
+let PLAN = { sections: [] };
+let api = null;
+let anchors = null;
+let threads = [];
+
+const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+
+// The icons a mark may name, Lucide's paths at 24px; plan.json's marks pick one and a color for each kind of line.
+const ICONS = {
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+  alert: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  question: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+  dot: '<circle cx="12" cy="12" r="4"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  sparkle: '<path d="M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.13a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.13 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z"/>',
+  book: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>',
+  pencil: '<path d="M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z"/>',
+  arrow: '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
+  phone: '<rect width="14" height="20" x="5" y="2" rx="2"/><path d="M12 18h.01"/>',
+  terminal: '<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>',
+  chat: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
+  down: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+  layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+};
+const COLORS = new Set(["ok", "bad", "warn", "info", "muted"]);
+
+function inline(target, text) {
+  for (const part of String(text ?? "").split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/)) {
+    if (!part) continue;
+    if (part.startsWith("**") && part.endsWith("**")) target.append(el("strong", null, part.slice(2, -2)));
+    else if (part.length > 2 && part.startsWith("*") && part.endsWith("*")) target.append(el("em", null, part.slice(1, -1)));
+    else if (part.startsWith("`") && part.endsWith("`")) target.append(el("code", null, part.slice(1, -1)));
+    else target.append(part);
+  }
+  return target;
+}
+
+const slug = (t) => String(t).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+function notice(text) {
+  const n = document.getElementById("notice");
+  n.textContent = text;
+  n.hidden = false;
+}
+
+function allLines(lines, out = []) {
+  for (const l of lines || []) { out.push(l); allLines(l.lines, out); }
+  return out;
+}
+
+function problems() {
+  const lines = PLAN.sections.flatMap((s) => allLines(s.lines));
+  const out = [];
+  const unknown = [...new Set(lines.map((l) => l.mark).filter((m) => m && !PLAN.marks?.[m]))];
+  if (unknown.length) out.push("These marks are not defined in marks: " + unknown.join(", ") + ".");
+  return out.join(" ");
+}
+
+function markIcon(name) {
+  const m = PLAN.marks?.[name];
+  if (!m) return null;
+  const span = el("span", "mark c-" + (COLORS.has(m.color) ? m.color : "muted"));
+  span.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[m.icon] ?? ICONS.dot}</svg>`;
+  span.title = m.label || name;
+  span.setAttribute("role", "img");
+  span.setAttribute("aria-label", m.label || name);
+  return span;
+}
+
+function lead(l) {
+  const icon = l.mark && markIcon(l.mark);
+  if (icon) return icon;
+  if (l.label) return el("span");
+  const b = el("span", "bullet");
+  b.setAttribute("aria-hidden", "true");
+  return b;
+}
+
+function legend(lines) {
+  const used = [...new Set(allLines(lines).map((l) => l.mark).filter((m) => PLAN.marks?.[m]))];
+  if (!used.length) return null;
+  const box = el("div", "legend");
+  for (const name of used) { const item = el("span"); item.append(markIcon(name), PLAN.marks[name].label || name); box.append(item); }
+  return box;
+}
+
+function lineRows(lines, scope) {
+  const box = el("div", "lines");
+  for (const l of lines || []) {
+    const r = el("div", l.files ? "row file-row" : l.term ? "row term-row" : "row");
+    if (l.label) r.dataset.anchor = `line:${scope}/${l.label}`;
+    if (l.label && !l.term && !l.files) r.classList.add("named");
+    r.dataset.label = l.label || l.term || l.files?.join(", ") || String(l.text ?? "").slice(0, 60);
+    r.addEventListener("click", (ev) => { if (ev.target.closest(".row") === r && document.body.classList.contains("commenting")) comment(r, ev); });
+    if (l.files) {
+      const cell = el("div", "files");
+      for (const f of l.files) cell.append(el("code", null, f));
+      r.append(el("span"), cell, inline(el("p", "text"), l.text), el("span", "pin"));
+    } else if (l.term) {
+      r.append(lead(l), inline(el("span", "term"), l.term), inline(el("p", "text"), l.text), el("span", "pin"));
+    } else {
+      const body = el("div", "body");
+      body.append(inline(el("p", "text"), l.text));
+      if (l.why) { const w = el("p", "why"); w.append(el("span", null, "Why ")); inline(w, l.why); body.append(w); }
+      if (l.not) { const n = el("p", "why"); n.append(el("span", null, "Not ")); inline(n, l.not); body.append(n); }
+      if (l.screens?.length) body.append(screens(l.screens));
+      if (l.diagram) body.append(diagram(l.diagram));
+      if (l.mockups?.length > 1) body.append(mockupSet(l.mockups));
+      else for (const m of l.mockups || []) body.append(mockup(m));
+      if (l.lines?.length) body.append(lineRows(l.lines, `${scope}/${l.label ?? ""}`));
+      if (l.label) r.append(lead(l), el("span", "label", l.label), body, el("span", "pin"));
+      else r.append(lead(l), body, el("span", "pin"));
+    }
+    box.append(r);
+  }
+  return box;
+}
+
+// A line's screenshots, published beside plan.json; each anchors its own threads by its file, and opens full size.
+function screens(list) {
+  const box = el("div", "screens");
+  for (const s of list) {
+    const fig = el("figure", "shot");
+    fig.dataset.anchor = `screen:${s.src}`;
+    fig.dataset.label = [s.kind, s.caption || s.src].filter(Boolean).join(", ");
+    const img = el("img");
+    img.src = s.src;
+    img.alt = s.caption || s.src;
+    img.loading = "lazy";
+    img.addEventListener("load", report);
+    const cap = el("figcaption");
+    if (s.kind) cap.append(el("span", `kind ${s.kind}`, s.kind));
+    inline(cap, s.caption);
+    fig.append(img, cap, el("span", "pin"));
+    fig.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      if (document.body.classList.contains("commenting")) comment(fig);
+      else zoom(s);
+    });
+    box.append(fig);
+  }
+  return box;
+}
+
+// A live mockup, a self-contained page published beside plan.json: the real UI, clickable, at a phone's width or a
+// desktop's scaled to the column; its threads anchor to its file, and in comment mode a tap on it comments.
+const WIDTHS = { phone: [390, 760], desktop: [1280, 800] };
+// A diagram of how things relate: nodes in rows (each node's row, else one below whatever points to it), and arrows
+// from one to another, each labelled; exception: true draws a node or arrow dashed, after the rules it bends.
+const DIAGRAMS = [];
+function diagram(d) {
+  const box = el("div", "diagram");
+  const rowOf = {};
+  const depth = (id, seen = new Set()) => {
+    const n = d.nodes.find((x) => x.id === id);
+    if (n?.row != null) return n.row;
+    if (seen.has(id)) return 0;
+    seen.add(id);
+    const ins = d.edges.filter((e) => e.to === id && !e.exception);
+    return ins.length ? Math.max(...ins.map((e) => depth(e.from, seen) + 1)) : 0;
+  };
+  for (const n of d.nodes) rowOf[n.id] = depth(n.id);
+  const nodes = {};
+  for (const r of [...new Set(Object.values(rowOf))].sort((a, b) => a - b)) {
+    const row = el("div", "d-row");
+    for (const n of d.nodes.filter((x) => rowOf[x.id] === r)) {
+      const card = el("div", "d-node" + (n.exception ? " exception" : "") + (n.new ? " new" : ""));
+      card.append(inline(el("b"), n.label));
+      if (n.note) card.append(inline(el("span"), n.note));
+      nodes[n.id] = card;
+      row.append(card);
+    }
+    box.append(row);
+  }
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.innerHTML = '<defs><marker id="d-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 10 5 0 10z" style="fill:var(--muted);stroke:none"/></marker></defs>';
+  box.prepend(svg);
+  const draw = () => {
+    for (const x of box.querySelectorAll(".d-label")) x.remove();
+    for (const x of svg.querySelectorAll("path.edge")) x.remove();
+    const o = box.getBoundingClientRect();
+    const rect = (id) => nodes[id]?.getBoundingClientRect();
+    // Arrows leaving or entering one side of a box spread along it, in the order of the boxes at their other ends.
+    const spread = (id, end, other, e) => {
+      const r = rect(id), below = (x) => rect(x[other]).top > r.top + 4, above = (x) => rect(x[other]).top < r.top - 4;
+      const same = below(e) ? below : above;
+      const side = d.edges.filter((x) => x[end] === id && rect(x[other]) && same(x)).sort((x, y) => rect(x[other]).left - rect(y[other]).left);
+      return r.left - o.left + (r.width * (side.indexOf(e) + 1)) / (side.length + 1);
+    };
+    for (const e of d.edges) {
+      const a = rect(e.from), b = rect(e.to);
+      if (!a || !b) continue;
+      const ax = spread(e.from, "from", "to", e), bx = spread(e.to, "to", "from", e);
+      let p, mid;
+      if (Math.abs(a.top - b.top) < 4) {
+        const right = bx > ax, y = a.top + a.height / 2 - o.top;
+        const x1 = right ? a.right - o.left : a.left - o.left, x2 = right ? b.left - o.left : b.right - o.left;
+        p = `M${x1} ${y} L${x2} ${y}`; mid = [(x1 + x2) / 2, y];
+      } else {
+        const down = b.top > a.top;
+        const y1 = (down ? a.bottom : a.top) - o.top, y2 = (down ? b.top : b.bottom) - o.top, ym = (y1 + y2) / 2;
+        p = `M${ax} ${y1} C${ax} ${ym} ${bx} ${ym} ${bx} ${y2}`;
+        const t = 0.7, u = 1 - t, at = (p0, p1, p2, p3) => u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
+        mid = [at(ax, ax, bx, bx), at(y1, ym, ym, y2)];
+      }
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", p);
+      path.setAttribute("class", "edge" + (e.exception ? " exception" : ""));
+      path.setAttribute("marker-end", "url(#d-arrow)");
+      svg.append(path);
+      if (e.label) {
+        const t = inline(el("span", "d-label" + (e.exception ? " exception" : "")), e.label);
+        t.style.left = mid[0] + "px";
+        t.style.top = mid[1] + "px";
+        box.append(t);
+      }
+    }
+  };
+  DIAGRAMS.push(draw);
+  requestAnimationFrame(draw);
+  return box;
+}
+window.addEventListener("resize", () => DIAGRAMS.forEach((f) => f()));
+document.addEventListener("toggle", () => DIAGRAMS.forEach((f) => f()), true);
+
+// Several mockups of one change on one line: a list of its screens, each its label and text, and the one chosen shown beside
+// it, keeping the width last picked as the screens change.
+function mockupSet(list) {
+  const box = el("div", "mset");
+  const nav = el("div", "mset-nav");
+  const view = el("div");
+  let width = null, shown = -1;
+  const show = (i) => {
+    if (i === shown) return;
+    shown = i;
+    nav.querySelectorAll("button.screen").forEach((b, j) => b.classList.toggle("on", j === i));
+    view.replaceChildren(mockup(width ? { ...list[i], width } : list[i], (w) => (width = w), () => popSet(list, shown, width)));
+    report();
+  };
+  list.forEach((m, i) => nav.append(screenButton(m, () => show(i))));
+  box.append(nav, view);
+  show(0);
+  return box;
+}
+
+function screenButton(m, pick) {
+  const b = el("button", "screen");
+  b.type = "button";
+  b.append(inline(el("b"), m.label || m.caption || m.src));
+  if (m.text) b.append(inline(el("span"), m.text));
+  b.addEventListener("click", (ev) => { ev.stopPropagation(); pick(); });
+  return b;
+}
+
+// A set at full size, from a screen's Full size, filling the window: the same list of screens, and the chosen one at its real size, Desktop as wide as the
+// window allows and Phone 390px, opening on the screen and width shown inline.
+function popSet(list, start, width) {
+  const d = el("dialog", "pop");
+  const head = el("div", "head");
+  const title = el("b");
+  const widths = el("div", "widths");
+  const close = el("button", "close", "Close");
+  close.type = "button";
+  close.addEventListener("click", () => d.close());
+  const nav = el("div", "mset-nav");
+  const stage = el("div", "pstage");
+  const frame = el("iframe");
+  stage.append(frame);
+  let w = width || list[start]?.width || "desktop", at = -1;
+  const size = () => {
+    frame.style.width = w === "phone" ? "390px" : "100%";
+    for (const b of widths.children) b.classList.toggle("on", b.dataset.w === w);
+  };
+  const show = (i) => {
+    if (i === at) return;
+    at = i;
+    nav.querySelectorAll("button.screen").forEach((b, j) => b.classList.toggle("on", j === i));
+    title.replaceChildren(inline(el("span"), list[i].label || list[i].caption || list[i].src));
+    frame.src = list[i].src;
+    frame.title = list[i].caption || list[i].src;
+  };
+  for (const k of Object.keys(WIDTHS)) {
+    const b = el("button", null, k === "phone" ? "Phone" : "Desktop");
+    b.type = "button"; b.dataset.w = k;
+    b.addEventListener("click", () => { w = k; size(); });
+    widths.append(b);
+  }
+  list.forEach((m, i) => nav.append(screenButton(m, () => show(i))));
+  head.append(title, widths, close);
+  const body = el("div", "body");
+  body.append(nav, stage);
+  d.append(head, body);
+  d.addEventListener("close", () => d.remove());
+  document.body.append(d);
+  size();
+  show(start < 0 ? 0 : start);
+  // The dialog takes focus itself, so no button wears a focus ring until the keyboard moves to one.
+  d.tabIndex = -1;
+  d.showModal();
+  d.focus();
+}
+
+function mockup(m, onWidth, onFull) {
+  const fig = el("figure", "shot live");
+  fig.dataset.anchor = `mockup:${m.src}`;
+  fig.dataset.label = [m.kind, m.caption || m.src].filter(Boolean).join(", ");
+  const bar = el("div", "bar");
+  const cap = el("figcaption");
+  if (m.kind) cap.append(el("span", `kind ${m.kind}`, m.kind));
+  inline(cap, m.caption);
+  const widths = el("div", "widths");
+  const stage = el("div", "stage");
+  const frame = el("iframe");
+  frame.src = m.src;
+  frame.title = m.caption || m.src;
+  frame.loading = "lazy";
+  frame.addEventListener("load", report);
+  const shield = el("div", "shield");
+  stage.append(frame, shield);
+  let width = m.width === "desktop" ? "desktop" : "phone";
+  const fit = () => {
+    const [w, h] = WIDTHS[width];
+    const room = fig.clientWidth - 14;
+    const k = Math.min(1, room / w);
+    frame.style.width = w + "px"; frame.style.height = h + "px"; frame.style.transform = `scale(${k})`;
+    stage.style.width = w * k + "px"; stage.style.height = h * k + "px";
+    for (const b of widths.children) b.classList.toggle("on", b.dataset.w === width);
+  };
+  for (const w of Object.keys(WIDTHS)) {
+    const b = el("button", null, w === "phone" ? "Phone" : "Desktop");
+    b.type = "button"; b.dataset.w = w;
+    b.addEventListener("click", (ev) => { ev.stopPropagation(); if (document.body.classList.contains("commenting")) return comment(fig); width = w; onWidth?.(w); fit(); report(); });
+    widths.append(b);
+  }
+  const open = el("button", "open", "Full size");
+  open.type = "button";
+  open.addEventListener("click", (ev) => { ev.stopPropagation(); if (document.body.classList.contains("commenting")) return comment(fig); onFull ? onFull() : full(m); });
+  bar.append(cap, widths, open);
+  fig.append(bar, stage, el("span", "pin"));
+  fig.addEventListener("click", (ev) => { if (document.body.classList.contains("commenting")) { ev.stopPropagation(); comment(fig); } });
+  new ResizeObserver(fit).observe(fig);
+  return fig;
+}
+
+function full(m) {
+  const d = el("dialog", "full");
+  const head = el("div", "head");
+  const close = el("button", "close", "Close");
+  close.type = "button";
+  close.addEventListener("click", () => d.close());
+  head.append(el("span", null, m.caption || m.src), close);
+  const f = el("iframe");
+  f.src = m.src;
+  f.title = m.caption || m.src;
+  d.append(head, f);
+  d.addEventListener("click", (ev) => { if (ev.target === d) d.close(); });
+  d.addEventListener("close", () => d.remove());
+  document.body.append(d);
+  d.showModal();
+}
+
+function zoom(s) {
+  const d = el("dialog", "zoom");
+  const img = el("img");
+  img.src = s.src;
+  img.alt = s.caption || s.src;
+  d.append(img);
+  d.addEventListener("click", () => d.close());
+  d.addEventListener("close", () => d.remove());
+  document.body.append(d);
+  d.showModal();
+}
+
+const svg = (name) => `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name] ?? ICONS.dot}</svg>`;
+
+// The happy path: places are lanes, steps run down in order, each in its place's lane; a step's edge cases fold
+// beneath it, each saying where it rejoins the path or that it ends.
+function journey(j) {
+  const places = j.places || [];
+  const lane = (id) => Math.max(0, places.findIndex((p) => p.id === id));
+  const box = el("div", "journey");
+  box.style.setProperty("--lanes", Math.max(1, places.length));
+  const head = el("div", "j-lanes");
+  places.forEach((p, i) => { const h = el("div", `j-lane l-${i % 4}`); h.innerHTML = svg(p.icon); h.append(p.name); head.append(h); });
+  box.append(head);
+  const titles = new Map((j.steps || []).map((st, i) => [st.id ?? st.title, `${i + 1}. ${st.title}`]));
+  (j.steps || []).forEach((st, i) => {
+    const li = lane(st.place);
+    if (i > 0) {
+      const hop = el("div", "j-hop");
+      const label = el("div");
+      label.style.gridColumn = String(li + 1);
+      label.innerHTML = svg("down");
+      if (st.via) inline(label, st.via);
+      hop.append(label);
+      box.append(hop);
+    }
+    const row = el("div", "j-row");
+    const card = el("div", `step l-${li % 4}`);
+    card.style.gridColumn = String(li + 1);
+    card.dataset.anchor = `step:${st.id ?? st.title}`;
+    card.dataset.label = `Step ${i + 1}, ${st.title}`;
+    card.addEventListener("click", (ev) => { if (!ev.target.closest("summary") && document.body.classList.contains("commenting")) comment(card); });
+    const chip = el("span", "j-chip");
+    chip.innerHTML = svg(places[li]?.icon);
+    chip.append(places[li]?.name ?? "");
+    card.append(el("span", "j-n", String(i + 1)), chip, inline(el("h3"), st.title));
+    if (st.who) card.append(el("span", "who", st.who));
+    if (st.does) card.append(inline(el("p"), st.does));
+    if (st.sees) card.append(inline(el("p", "sees"), st.sees));
+    if (st.edges?.length) {
+      const d = el("details");
+      d.append(el("summary", null, `${st.edges.length} edge case${st.edges.length === 1 ? "" : "s"}`));
+      const list = el("div", "edges");
+      for (const e of st.edges) {
+        const item = el("div", "edge");
+        item.append(el("b", null, e.title), inline(el("p"), e.text));
+        item.append(el("span", "to", e.rejoin ? `Rejoins at ${titles.get(e.rejoin) ?? e.rejoin}` : "Ends here"));
+        list.append(item);
+      }
+      d.append(list);
+      card.append(d);
+    }
+    card.append(el("span", "pin"));
+    row.append(card);
+    box.append(row);
+  });
+  return box;
+}
+
+function render() {
+  const main = document.getElementById("main");
+  main.replaceChildren();
+  for (const s of PLAN.sections) {
+    const sec = el("section");
+    sec.id = slug(s.title);
+    sec.append(inline(el("h2"), s.title));
+    if (s.summary) sec.append(inline(el("p", "summary"), s.summary));
+    const key = legend(s.lines);
+    if (key) sec.append(key);
+    let into = sec;
+    if (s.fold && (s.journey || s.lines?.length)) {
+      into = el("details", "fold");
+      const n = (s.journey?.steps?.length ?? 0) + allLines(s.lines).length;
+      const more = s.more || `Show ${n} more`;
+      const toggle = el("summary", null, more);
+      into.append(toggle);
+      into.addEventListener("toggle", () => { toggle.textContent = into.open ? "Show less" : more; fitTerms(); report(); });
+      sec.append(into);
+    }
+    if (s.journey) into.append(journey(s.journey));
+    if (s.lines?.length) into.append(lineRows(s.lines, slug(s.title)));
+    main.append(sec);
+  }
+  fitTerms();
+  toc();
+}
+
+function natural(e) {
+  const keep = [e.style.width, e.style.whiteSpace];
+  e.style.width = "max-content";
+  e.style.whiteSpace = "nowrap";
+  const w = e.getBoundingClientRect().width;
+  [e.style.width, e.style.whiteSpace] = keep;
+  return w;
+}
+
+// Each section's file, term, and label columns as wide as their widest entry.
+function fitTerms() {
+  const widest = (els) => Math.ceil(Math.max(0, ...[...els].map(natural)));
+  const main = document.getElementById("main");
+  main.style.setProperty("--labelw", widest(main.querySelectorAll(":is(section, section > details) > .lines > .row > :is(.term, .label)")) + "px");
+  main.style.setProperty("--filew", widest(main.querySelectorAll(".files code")) + "px");
+  for (const sub of main.querySelectorAll(".lines .lines")) sub.style.setProperty("--subw", widest(sub.querySelectorAll(":scope > .row > .label")) + "px");
+}
+
+function toc() {
+  const nav = document.getElementById("toc");
+  const links = PLAN.sections.map((s) => {
+    const a = el("a", null, s.title);
+    a.href = "#" + slug(s.title);
+    a.append(el("span", null, String(allLines(s.lines).length + (s.journey?.steps?.length ?? 0))));
+    return a;
+  });
+  nav.replaceChildren(...links);
+  const secs = [...document.querySelectorAll("section")];
+  const mark = () => {
+    const at = secs.filter((x) => x.getBoundingClientRect().top <= 120).pop() || secs[0];
+    links.forEach((a) => a.classList.toggle("on", a.hash === "#" + at?.id));
+  };
+  addEventListener("scroll", mark, { passive: true });
+  mark();
+}
+
+function anchorFor(r) {
+  return r.dataset.anchor || (anchors ? anchors.domAnchor(r)[0] : null);
+}
+
+function pinPoint(r) {
+  const pin = r.querySelector(":scope > .pin").getBoundingClientRect();
+  if (r.classList.contains("step") || r.classList.contains("shot")) return { x: pin.left + window.scrollX, y: pin.top + window.scrollY };
+  const lead = r.firstElementChild.getBoundingClientRect();
+  return { x: pin.left + window.scrollX, y: lead.top + lead.height / 2 + window.scrollY };
+}
+
+// Pins for threads on lines still in the plan; a thread whose line was removed is left unplaced, in the shell's list.
+function report() {
+  if (!anchors) return;
+  const byAnchor = new Map([...document.querySelectorAll(".row, .step, .shot")].map((r) => [anchorFor(r), r]));
+  const map = {};
+  for (const t of threads) {
+    const r = byAnchor.get(t.anchor);
+    if (r && r.getClientRects().length) map[t.id] = pinPoint(r);
+  }
+  anchors.placed(map);
+}
+
+async function comment(r) {
+  try {
+    if (anchors) await anchors.compose(anchorFor(r), r.querySelector(":scope > .pin"), { label: r.dataset.label });
+    else if (api) await api.openComposer({ element: r });
+  } catch (e) {
+    if (e?.code === "unavailable" || e?.code === "forbidden") document.getElementById("hint").textContent = "Commenting is off in this view";
+  }
+}
+
+async function offerDone() {
+  const button = document.getElementById("done");
+  if (!api?.sendToClaude) return;
+  const check = async () => { try { return (await api.canSendToClaude()) === "available"; } catch { return false; } };
+  button.hidden = !(await check());
+  button.addEventListener("click", async () => {
+    const hint = document.getElementById("hint");
+    if (!(await check())) { hint.textContent = "Claude is not listening"; return; }
+    button.disabled = true;
+    try {
+      const anchor = await api.anchorFor(document.getElementById("title"));
+      await api.sendToClaude({ anchor, text: "Done reviewing. Read the comments on the plan's lines and work them in." });
+      hint.textContent = "Sent to Claude";
+    } catch {
+      hint.textContent = "Could not reach Claude";
+    } finally {
+      button.disabled = false;
+    }
+  });
+}
+
+async function wireComments() {
+  try { api = await window.claude?.use?.("comments"); } catch { api = null; }
+  const hint = document.getElementById("hint");
+  if (!api) { hint.textContent = "Commenting is unavailable in this view"; return; }
+  try {
+    anchors = await api.customAnchors({
+      mode: (on) => { document.body.classList.toggle("commenting", on); if (!on) { threads = []; report(); } },
+      threads: (list) => { threads = list; report(); },
+      reveal: (id) => {
+        const t = threads.find((x) => x.id === id);
+        const r = t && [...document.querySelectorAll(".row, .step, .shot")].find((x) => anchorFor(x) === t.anchor);
+        const fold = r?.closest("details");
+        if (fold && !fold.open) fold.open = true;
+        if (r) r.scrollIntoView({ block: "center", behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+      },
+    });
+    report();
+    window.addEventListener("resize", report);
+  } catch {
+    anchors = null;
+  }
+  offerDone();
+}
+
+// The coordinator reloads the frame when the plan is republished; window.name outlives the reload, so the reader keeps their place.
+const PLACE = "plan-scroll:";
+function keepPlace() {
+  const y = window.name.startsWith(PLACE) ? Number(window.name.slice(PLACE.length)) : 0;
+  if (y > 0) scrollTo(0, y);
+  addEventListener("scroll", () => { window.name = PLACE + Math.round(scrollY); }, { passive: true });
+}
+
+(async () => {
+  try {
+    PLAN = await (await fetch("plan.json", { cache: "no-cache" })).json();
+    PLAN.sections = Array.isArray(PLAN.sections) ? PLAN.sections : [];
+  } catch (error) {
+    return notice("Could not read plan.json: " + error.message);
+  }
+  if (PLAN.title) { document.getElementById("title").textContent = PLAN.title; document.title = PLAN.title; }
+  document.getElementById("eyebrow").textContent = PLAN.eyebrow || "";
+  if (PLAN.gist) {
+    const g = document.getElementById("gist");
+    for (const para of [].concat(PLAN.gist)) g.append(inline(el("p"), para));
+    g.hidden = false;
+  }
+  const status = document.getElementById("status");
+  if (PLAN.status) inline(status, PLAN.status);
+  const ask = PLAN.sections.find((x) => x.ask);
+  if (ask) {
+    const n = allLines(ask.lines).length;
+    if (PLAN.status) status.append(", ");
+    const a = el("a", null, `${n} ${ask.title.toLowerCase()}`);
+    a.href = "#" + slug(ask.title);
+    status.append(a);
+  }
+  const bad = problems();
+  if (bad) notice(bad);
+  render();
+  keepPlace();
+  document.fonts?.ready.then(() => { fitTerms(); report(); });
+  wireComments();
+})();
+</script>