@lovek4d/kickflip 0.3.1 → 0.5.0

package/board/public/ui-page-header.js

@@ -6,10 +6,11 @@
   const ARROW = icon(24, '<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>');
   const REFRESH = icon(18, '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>');
   const GEAR = icon(18, '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>');
+  const MOON = icon(16, '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>');
   const BULB = icon(18, '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>');
   const id = (v) => (v ? ` id="${esc(v)}"` : '');
 
-  // Where the back arrow goes (docs/adr/0048-a-questions-takes-show-inline.md): 'back', one step back in history, when
+  // Where the back arrow goes (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): 'back', one step back in history, when
   // the page before was on this hub; else 'href', its backHref. A page a push opened always takes its backHref. idx is
   // the entry's index in history.state, set by an in-app router: when present, it alone says whether a step back exists.
   function backStep({ pushed = false, referrer = '', href, depth = 1, idx }) {
@@ -40,16 +41,17 @@
   }
 
   // lead is 'logo' (the kickflip, which toggles the sidebar, sidebar.js; logoHref, the hub's page, without it)
-  // or 'back' (the arrow, which follows backStep, with backHref the work item or the board, beside a phone-only logo). The controls (time and refresh, gear) paint disabled with refresh spinning until the
-  // page's script turns them on (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md). With controls
+  // or 'back' (the arrow, which follows backStep, with backHref the work item or the board, after the logo). The controls (time and refresh, gear) paint disabled with refresh spinning until the
+  // page's script turns them on (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md). With controls
   // false, trail (HTML) takes their place. bulb puts the architecture review's bulb between them (app-arch.js). leadAttrs adds to or replaces the lead link's attributes, and level is the
-  // title's heading level, for a header that isn't the page's own, such as the sidebar's (ui-sidebar.js).
+  // title's heading level, for a header that isn't the page's own, such as the sidebar's (ui-sidebar.js). moon puts the
+  // away moon right of the title, hidden until app-header.js renderStatus shows it (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md).
   function header({ lead = 'logo', title = '', titleId, backHref = './', backLabel = 'Back to the board', backId, logoSrc = 'kickflip.png',
-    controls = true, trail = '', time = '…', bulb = false, settingsHref = 'settings.html', logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
+    controls = true, trail = '', time = '…', bulb = false, moon = false, settingsHref = 'settings.html', logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
     const attrs = (base) => Object.entries({ ...base, ...leadAttrs }).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
     const logo = (cls = 'hub') => `<a class="${cls}" href="${esc(logoHref)}"${attrs({ 'aria-label': 'Boards' })}><img src="${esc(logoSrc)}" alt=""></a>`;
     const first = lead === 'back'
-      ? `<a class="back" href="${esc(backHref)}"${id(backId)}${attrs({ 'aria-label': backLabel })}>${ARROW}</a>${logo('hub phone-logo')}`
+      ? `${logo('hub')}<a class="back" href="${esc(backHref)}"${id(backId)}${attrs({ 'aria-label': backLabel })}>${ARROW}</a>`
       : logo();
     const nav = controls ? `<nav class="nav">`
       + `<span class="refresh"><button class="ghost spinning" id="refresh" type="button" disabled aria-label="Refresh" title="Refresh">${REFRESH}</button><span class="muted" id="status">${esc(time)}</span></span>`
@@ -58,7 +60,8 @@
       + `</nav>` : trail;
     const script = lead === 'back' ? `<script>(${wireBack})(${backStep});</script>` : '';
     const h = `h${[1, 2, 3, 4, 5, 6].includes(level) ? level : 1}`;
-    return `<header class="top"><div class="brand">${first}<${h}${id(titleId)}>${esc(title)}</${h}></div>${nav}</header>${script}`;
+    const away = moon ? `<span class="away-moon" role="img" aria-label="Away" aria-hidden="true">${MOON}</span>` : '';
+    return `<header class="top"><div class="brand">${first}<${h}${id(titleId)}>${esc(title)}</${h}>${away}</div>${nav}</header>${script}`;
   }
 
   Object.assign(globalThis.BoardUI ||= {}, { header, backStep });

package/board/public/ui-patch.js

@@ -0,0 +1,53 @@
+// The board's per-card patches (docs/adr/2026-11-04-0332-the-board-sends-per-card-patches.md): server.mjs makes one
+// from the board a page holds to the board now, and the page applies it to the board it holds. Cards patch by key,
+// questions and topics by id, each sent whole when it changed or dropped when gone, with the list's new order when
+// that changed; every other part of the board comes whole when it changed.
+// Needs nothing else: board/server.mjs runs this file in a vm context.
+(function () {
+  const LISTS = { items: 'key', owner: 'id', ownerTopics: 'id' };
+  const OWN = new Set(['version', 'generatedAt', ...Object.keys(LISTS)]);
+  const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+  function listPatch(from, to, id) {
+    const was = new Map(from.map((r) => [r[id], r]));
+    const now = new Set(to.map((r) => r[id]));
+    const set = to.filter((r) => !was.has(r[id]) || !same(was.get(r[id]), r));
+    const drop = from.map((r) => r[id]).filter((k) => !now.has(k));
+    if (!set.length && !drop.length && same(from.map((r) => r[id]), to.map((r) => r[id]))) return null;
+    const placed = [...from.map((r) => r[id]).filter((k) => now.has(k)), ...to.map((r) => r[id]).filter((k) => !was.has(k))];
+    const order = to.map((r) => r[id]);
+    return { set, drop, ...(same(placed, order) ? {} : { order }) };
+  }
+
+  // from and to are page boards, each with its version. → {since, version, generatedAt, set, unset, lists}
+  function boardPatch(from, to) {
+    const set = {};
+    for (const [k, v] of Object.entries(to)) if (!OWN.has(k) && (!(k in from) || !same(from[k], v))) set[k] = v;
+    const unset = Object.keys(from).filter((k) => !OWN.has(k) && !(k in to));
+    const lists = {};
+    for (const [name, id] of Object.entries(LISTS)) {
+      const p = listPatch(from[name] || [], to[name] || [], id);
+      if (p) lists[name] = p;
+    }
+    return { since: from.version, version: to.version, generatedAt: to.generatedAt, set, unset, lists };
+  }
+
+  // → a new board, leaving board as it was, or null when the patch was made against another version.
+  function applyPatch(board, patch) {
+    if (!board || board.version !== patch.since) return null;
+    const next = { ...board, ...patch.set, version: patch.version, generatedAt: patch.generatedAt };
+    for (const k of patch.unset) delete next[k];
+    for (const [name, p] of Object.entries(patch.lists)) {
+      const id = LISTS[name];
+      const gone = new Set(p.drop);
+      const byId = new Map((board[name] || []).filter((r) => !gone.has(r[id])).map((r) => [r[id], r]));
+      const fresh = p.set.filter((r) => !byId.has(r[id]));
+      for (const r of p.set) byId.set(r[id], r);
+      const order = p.order || [...(board[name] || []).map((r) => r[id]).filter((k) => !gone.has(k)), ...fresh.map((r) => r[id])];
+      next[name] = order.map((k) => byId.get(k));
+    }
+    return next;
+  }
+
+  Object.assign(globalThis.BoardUI ||= {}, { boardPatch, applyPatch });
+})();

package/board/public/ui-phase-bars.js

@@ -0,0 +1,17 @@
+// The phase bars: one bar per phase, those reached filled, a running one pulsing. An In Progress card draws the five
+// build phases (ui-cards.js) and a starting board's sidebar row its three start steps (ui-sidebar.js)
+// (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md). It needs nothing else, since
+// hub/hub.mjs renders the shell's first sidebar with it in a vm context. style.css draws the bars.
+(function () {
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  // strip: {reached, running, dim, label, fill, plan}, or null for no bars. reached counts the phases reached, the last of
+  // them running when running is set; fill, a percent, fills the next bar that far; plan draws them in the planner blue.
+  function phaseBars(strip, phases) {
+    if (!strip) return '';
+    const { reached, running, dim, label, fill, plan } = strip;
+    const bar = (i) => (i === reached - 1 && running ? '<i class="now"></i>' : i < reached ? '<i class="done"></i>'
+      : i === reached && fill !== undefined ? `<i class="fill" style="--p:${fill}%"></i>` : '<i class=""></i>');
+    return `<span class="phase-bars${dim ? ' dim' : ''}${plan ? ' plan' : ''}" role="img" aria-label="${esc(label)}" title="${esc(label)}">${phases.map((_, i) => bar(i)).join('')}</span>`;
+  }
+  Object.assign(globalThis.BoardUI ||= {}, { phaseBars });
+})();

package/board/public/ui-prompts.js

@@ -18,21 +18,21 @@
   // Whether one tap on an option answers: a single question that takes one pick.
   const oneTap = (p) => p.questions?.length === 1 && !p.questions[0].multiSelect;
 
-  // sending: true while the answer goes, which disables the line's buttons.
-  function promptItem(p, { picks = {}, sending = false } = {}) {
-    const off = sending ? ' disabled' : '';
+  // sending: while the answer goes, the tapped button: a choice ('allow', 'always', 'deny'), 'send', or an option as
+  // '<question index>:<label>'. It waits (ui.js BUSY) and the line's other buttons are disabled.
+  function promptItem(p, { picks = {}, sending = null } = {}) {
+    const off = (tapped) => (sending === null ? '' : sending === tapped ? BoardUI.BUSY : ' disabled');
     const where = [ago(p.at), p.cwd].filter(Boolean).map(esc).join(' · ');
     const head = `<div class="prompt-head"><b>${esc(p.questions ? 'Question' : p.tool)}</b><span class="muted small">${where}</span></div>`;
-    const status = sending ? '<span class="muted small">Sending…</span>' : '';
     if (p.questions) {
       const questions = p.questions.map((q, i) => `<div class="prompt-q"><p>${q.header ? `<span class="chip">${esc(q.header)}</span> ` : ''}${esc(q.question)}</p>
-<div class="prompt-options" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" data-prompt-q="${i}" data-prompt-opt="${esc(o.label)}" aria-pressed="${(picks[i] || []).includes(o.label)}"${off}><span class="lbl">${esc(o.label)}</span>${o.description ? `<span class="det">${esc(o.description)}</span>` : ''}</button>`).join('')}</div></div>`).join('');
-      const send = oneTap(p) ? '' : `<button type="button" class="primary" data-prompt-send${promptAnswer(p, picks) && !sending ? '' : ' disabled'}>Send</button>`;
-      return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${questions}<div class="prompt-actions">${send}<button type="button" class="deny" data-prompt-choice="deny"${off}>Skip</button>${status}</div></li>`;
+<div class="prompt-options" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" data-prompt-q="${i}" data-prompt-opt="${esc(o.label)}" aria-pressed="${(picks[i] || []).includes(o.label)}"${off(`${i}:${o.label}`)}><span class="lbl">${esc(o.label)}</span>${o.description ? `<span class="det">${esc(o.description)}</span>` : ''}</button>`).join('')}</div></div>`).join('');
+      const send = oneTap(p) ? '' : `<button type="button" class="primary" data-prompt-send${off('send') || (promptAnswer(p, picks) ? '' : ' disabled')}>Send</button>`;
+      return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${questions}<div class="prompt-actions">${send}<button type="button" class="deny" data-prompt-choice="deny"${off('deny')}>Skip</button></div></li>`;
     }
     const detail = p.detail ? `<pre class="prompt-detail">${esc(p.detail)}</pre>` : `<p class="prompt-what">Wants to ${esc(p.action)}</p>`;
     const rule = p.rule ? `<p class="muted small prompt-rule">Always allow adds <code>${esc(p.rule)}</code> until the session ends.</p>` : '';
-    return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${detail}<div class="prompt-actions"><button type="button" class="primary" data-prompt-choice="allow"${off}>Allow once</button><button type="button" data-prompt-choice="always"${off}>Always allow</button><button type="button" class="deny" data-prompt-choice="deny"${off}>Deny</button>${status}</div>${rule}</li>`;
+    return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${detail}<div class="prompt-actions"><button type="button" class="primary" data-prompt-choice="allow"${off('allow')}>Allow once</button><button type="button" data-prompt-choice="always"${off('always')}>Always allow</button><button type="button" class="deny" data-prompt-choice="deny"${off('deny')}>Deny</button></div>${rule}</li>`;
   }
 
   Object.assign(globalThis.BoardUI, { promptItem, promptAnswer, oneTap });

package/board/public/ui-questions.js

@@ -1,31 +1,35 @@
 // Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
 (function () {
-  const { esc, time, replyBody, attachments, attachButton, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
+  const { esc, time, ago, replyBody, attachments, attachButton, dropZone, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
   // A short id such as A or C2 leads the label; a word id such as "inline" would repeat it. prototype-switcher.js answerLabel matches.
   const lead = (o) => (/^[A-Z][0-9]?$/i.test(o.id) ? `${o.id}. ` : '');
   const choiceLabel = (q, id) => { const o = q.options.find((x) => x.id === id); return o ? `${q.multi ? '' : lead(o)}${o.label}` : id || ''; };
-  const option = (o, { type = 'radio', name, checked = false, numbered = true, shown = false, disabled = false }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${disabled ? ' disabled' : ''}>
-        <span><span class="lbl">${numbered ? esc(lead(o)) : ''}${esc(o.label)}</span>${o.recommended ? '<span class="rec">Recommended</span>' : ''}<div class="det">${esc(o.detail || '')}</div></span></label>`;
+  // suggested: the line under a suggested option saying where the owner chose it before, as HTML.
+  const option = (o, { type = 'radio', name, checked = false, numbered = true, shown = false, locked = false, suggested = '' }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${locked ? ' disabled' : ''}>
+        <span><span class="lbl">${numbered ? esc(lead(o)) : ''}${esc(o.label)}</span>${suggested ? badge('ready', 'suggested').replace('class="chip', 'class="chip suggested') : ''}${o.recommended ? '<span class="rec">recommended</span>' : ''}<div class="det">${esc(o.detail || '')}</div>${suggested ? `<div class="suggested-why">${suggested}</div>` : ''}</span></label>`;
+  // docs/adr/2026-11-04-2200-overnight-triage-suggests-your-earlier-answers.md
+  // A question's pick on this device: its unsent draft, else its last answer, else the option the overnight triage
+  // suggested, pre-checked so the topic's Send sends it.
+  const choiceOf = (q, draft) => draft.choice ?? (q.answers.length ? q.answers[q.answers.length - 1].choice : q.suggested?.option ?? null);
+  const suggestedLine = (q, o, links) => q.suggested?.option === o.id ? linkText(`You answered this on ${q.suggested.card}: "${q.suggested.answer}"`, links) : '';
 
   const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
-  // A question's eye sends `prototype-request {key?, question, note, choice}` for that question alone (view-questions.js);
-  // once sent, the eye is off with a "prototype requested" badge right after it until the round arrives.
-  const questionEye = (q) => q.state === 'resolved' ? ''
-    : protoButton('q:' + q.id, null, { label: 'Ask for a prototype instead', disabled: q.state === 'requested' })
-      + (q.state === 'requested' ? badge('normal', `${SPIN}prototype requested`) : '');
-  const noteComposer = (q, note) => `<div class="composer" data-composer="${esc('q:' + q.id)}"><textarea class="note" rows="2" placeholder="Note (optional)"${q.state === 'requested' ? ' disabled' : ''}>${esc(note || '')}</textarea>
+  // A question's eye sends `prototype-request {key?, question, note, choice}` for that question alone, which then reads
+  // requested until its prototype round arrives (view-questions.js).
+  const questionEye = (q) => protoButton('q:' + q.id, { label: 'Ask for a prototype instead' });
+  const noteComposer = (q, note) => `<div class="composer" data-composer="${esc('q:' + q.id)}">${dropZone(`<textarea class="note" rows="2" placeholder="Note (optional)">${esc(note || '')}</textarea>`)}
       <div class="note-tools">${attachButton()}${questionEye(q)}<div class="pending-files" data-files></div></div></div>`;
 
   const QUESTION_STATE = {
     open: { label: 'open', tone: 'normal' },
     answered: { label: 'waiting for claude', tone: 'notice' },
     replied: { label: 'claude replied', tone: 'ready' },
-    resolved: { label: 'resolved', tone: 'quiet' },
+    requested: { label: `${SPIN}prototype requested`, tone: 'normal' },
   };
-  // docs/adr/0111-a-prototype-round-ends-with-a-one-take-confirm.md
+  // docs/adr/2026-11-02-1332-a-prototype-round-ends-with-a-one-take-confirm.md
   // A topic's latest prototype round from /api/board ownerTopics: {n, state: making|back|closed, take}.
   const roundChip = (r) => !r ? ''
-    : r.state === 'making' ? badge('notice', `${SPIN}Prototype round ${r.n}`)
+    : r.state === 'making' ? badge('normal', `${SPIN}Prototype round ${r.n}`)
     : r.state === 'closed' ? badge('quiet', `Round ${r.n} closed · take ${esc(r.take)}`)
     : badge('normal', `Prototype round ${r.n}`);
   const RULE_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>';
@@ -47,7 +51,7 @@
     : isPrototype(url) ? `<a class="pill proto" href="${esc(url)}">See the prototypes →</a>`
     : `<div class="small" style="margin-bottom:8px"><a href="${esc(url)}"${opensHere(url) ? '' : ' target="_blank" rel="noopener"'}>${esc(url.replace(/^https:\/\/(linear\.app\/[^/]+\/issue|github\.com)\//, ''))} ${LINK_ARROW}</a></div>`;
 
-  // A question's takes show inline (docs/adr/0048-a-questions-takes-show-inline.md): an option with `diagram` draws
+  // A question's takes show inline (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): an option with `diagram` draws
   // it with its `practice`, and on a question whose url is a prototype page any other option shows that page's take.
   const framed = (q) => isPrototype(q.url) && q.options.some((o) => !o.diagram);
   const inline = (q) => isPrototype(q.url) || q.options.some((o) => o.diagram);
@@ -79,40 +83,68 @@
     // Every take loads so one outside the viewport can still decide the question's layout.
     return `<div class="take-shot${h ? '' : ' measuring'}"${h ? ` style="height:${Math.round(h)}px"` : ''}><iframe src="${esc(withParam(q.url, 'take', o.id))}" title="${esc(o.label)}"></iframe></div>`;
   }
-  function takes(q, chosen, links, fit) {
+  function takes(q, chosen, links, fit, locked = false) {
     const name = 'c-' + q.id;
-    const disabled = q.state === 'requested';
     if (fullTakes(q, fit)) {
       const shown = q.options.find((o) => o.id === chosen) || q.options.find((o) => o.recommended) || q.options[0];
-      return `<div class="takes takes-full"><div class="take-choices" role="group" aria-label="Takes">${q.options.map((o) => option(o, { name, checked: chosen === o.id, shown: o === shown, disabled })).join('')}</div><article class="take" data-opt="${esc(shown.id)}">${takeBody(q, shown, links, fit, true)}</article></div>`;
+      return `<div class="takes takes-full"><div class="take-choices" role="group" aria-label="Takes">${q.options.map((o) => option(o, { name, checked: chosen === o.id, shown: o === shown, locked, suggested: suggestedLine(q, o, links) })).join('')}</div><article class="take" data-opt="${esc(shown.id)}">${takeBody(q, shown, links, fit, true)}</article></div>`;
     }
-    return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id, disabled })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
+    return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
   }
   // A confirm links its one take alone, and says why it is asked.
-  const confirmLines = (q) => !q.confirm_of || q.state === 'resolved' ? ''
+  const confirmLines = (q) => !q.confirm_of ? ''
     : `<a class="pill proto pr-open" href="${esc(withParam(q.url, 'take', q.options[0].id))}">Open the prototype →</a>${q.state === 'open' ? `<div class="pr-rule">${RULE_ICON}A pick with a note gets a one-take confirm once Claude has updated the take.</div>` : ''}`;
+  // docs/adr/2026-11-04-2001-a-resolved-question-is-read-only-and-can-be-asked-again.md
+  // A resolved question, read-only: its green resolved badge asks Claude to ask it again (view-questions.js sends
+  // `reask-request` once the owner confirms), how it was resolved and when it was acted on (resolved_at), its last pick
+  // checked among locked options, and its last note and Claude's reply. reask is a re-ask under way, which locks the badge.
+  function resolvedCard(q, links) {
+    const last = q.answers[q.answers.length - 1];
+    const outcome = q.resolved ? `${esc(q.resolved)}${/[.!?]$/.test(q.resolved) ? '' : '.'}` : '';
+    const acted = q.resolved_at ? ` <span class="acted" title="${esc(time(q.resolved_at))}">acted on ${esc(ago(q.resolved_at))}</span>.` : '';
+    const said = last && (last.note || last.reply || last.files?.length) ? `<div class="ans"><div class="muted small">You · ${esc(time(last.ts))}</div>${last.note ? `<div>${linkText(last.note, links)}</div>` : ''}${attachments(last.files)}</div>
+      ${last.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(last.reply), links)}</div>` : ''}` : '';
+    return `<section class="q resolved" id="${esc(q.id)}" data-q="${esc(q.id)}">
+      <div class="row" style="margin:0"><span class="muted small">${esc(q.source || '')}</span>${badge('ready', 'resolved', { button: true, title: 'Ask this question again', attrs: { type: 'button', 'data-reask': q.id, disabled: q.reask ? '' : null } })}</div>
+      <h3>${linkText(q.question, links)}</h3>
+      ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
+      ${questionLink(q.url)}
+      ${outcome || acted ? `<div class="small muted resolved-line">${outcome}${acted}</div>` : ''}
+      ${q.options.map((o) => option(o, { name: 'c-' + q.id, checked: last?.choice === o.id, locked: true })).join('')}
+      ${said}
+      ${q.reask ? '<div class="small muted reask-line">re-ask requested</div>' : ''}
+    </section>`;
+  }
   // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext;
   // fit(option id) supplies the measured grid and full-width heights.
-  // A requested question shows the note and pick its prototype was asked with, locked.
+  // A question waiting on the prototype the owner asked for is locked at the pick and note the request sent until its
+  // round arrives (docs/adr/2026-11-04-2130-a-prototype-request-waits-for-its-prototype.md).
   function questionCard(q, { n = 0, draft = {}, links = {}, fit = () => null } = {}) {
-    const last = q.answers[q.answers.length - 1];
-    const busy = q.state === 'requested';
-    const shown = busy ? q.request : draft;
-    const chosen = shown.choice ?? (last ? last.choice : null);
-    return `<section class="q ${q.urgent && q.state === 'open' ? 'urgent' : ''}${busy ? ' pr-busy' : ''}" id="${esc(q.id)}" data-q="${esc(q.id)}">
-      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${busy ? '' : badge(QUESTION_STATE[q.state].tone, esc(QUESTION_STATE[q.state].label))}</div>
+    if (q.state === 'resolved') return resolvedCard(q, links);
+    const locked = q.state === 'requested';
+    const chosen = locked ? q.request.choice : choiceOf(q, draft);
+    return `<section class="q ${q.urgent && q.state === 'open' ? 'urgent' : ''}" id="${esc(q.id)}" data-q="${esc(q.id)}">
+      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge(QUESTION_STATE[q.state].tone, QUESTION_STATE[q.state].label)}</div>
       <h3>${linkText(q.question, links)}</h3>
       ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
       ${framed(q) ? '' : questionLink(q.url)}
       ${confirmLines(q)}
-      ${q.state === 'resolved' && q.resolved ? `<div class="small muted" style="margin-bottom:8px">Resolved: ${esc(q.resolved)}${/[.!?]$/.test(q.resolved) ? '' : '.'} A new answer reopens it.</div>` : ''}
-      ${inline(q) ? takes(q, chosen, links, fit) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id, disabled: busy })).join('')}
-      ${noteComposer(q, shown.note)}
+      ${inline(q) ? takes(q, chosen, links, fit, locked) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })).join('')}
+      ${locked ? (q.request.note ? `<div class="ans"><div class="muted small">You · ${esc(time(q.request.ts))}</div><div>${linkText(q.request.note, links)}</div></div>` : '') : noteComposer(q, draft.note)}
       ${answerHistory(q, links)}
     </section>`;
   }
   // A card's pill is its ID, or for an ask (item:ask:<id>) the time it appeared; other topics keep their title.
   const topicName = (t) => (t.askedAt ? BoardUI.cardTime(t.askedAt) : (String(t.title).match(/^([A-Z]+-\d+|[A-Z]\d+):/) || [])[1] || t.title);
+  // /api/board's ownerTopics, each card's topic named from its card, which the board sends in its place while the card
+  // is on the board (board/server.mjs pageBoard). cards: the board's items.
+  function cardTopics(topics, cards) {
+    const byKey = new Map(cards.map((c) => [c.key, c]));
+    return topics.map((t) => {
+      const c = t.title === undefined && byKey.get(t.card);
+      return c ? { ...t, title: `${c.ref}: ${c.title}`, summary: 'Questions about this work item.', ...(c.kind === 'ask' ? { askedAt: c.ask.askedAt } : {}) } : t;
+    });
+  }
   // Topics from /api/board ownerTopics, in order. pills: unresolved topics with an open question, plus the
   // current topic wherever it stands; waiting: the other unresolved topics, which wait only on Claude.
   function topicRow(topics, current) {
@@ -147,5 +179,5 @@
     },
   };
 
-  Object.assign(globalThis.BoardUI, { choiceLabel, option, answerHistory, questionCard, roundChip, takes, topicName, topicRow, nextQuestion, sentNotice });
+  Object.assign(globalThis.BoardUI, { choiceLabel, choiceOf, option, answerHistory, questionCard, roundChip, takes, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
 })();

package/board/public/ui-sidebar.js

@@ -1,10 +1,11 @@
-// The sidebar of every site (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md), drawn from the hub's
-// /_hub/sidebar.json. It needs only ui-page-header.js, loaded before it, for its head, which is the page header itself:
-// the app shell runs it through sidebar.js, and hub/hub.mjs renders the shell's first sidebar with both in a vm context.
+// The sidebar of every site (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md), drawn from the hub's
+// /_hub/sidebar.json. It needs only ui-page-header.js, loaded before it, for its head, which is the page header itself, and
+// ui-phase-bars.js for a starting board's steps: the app shell runs it through sidebar.js, and hub/hub.mjs renders the
+// shell's first sidebar with all three in a vm context.
 // Its links are root-absolute, since every site and hub page sits beside this one on the hub. sidebar.css styles it.
 (function () {
   // ui.js replaces the BoardUI global when it loads after this, so the header renderer is held here.
-  const { header } = globalThis.BoardUI || {};
+  const { header, phaseBars } = globalThis.BoardUI || {};
   const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
   const svg = (paths, size = 17) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
   const ICONS = {
@@ -13,6 +14,11 @@
     pulse: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
     close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
     plus: '<path d="M12 5v14M5 12h14"/>',
+    // A starting board's step icons, one per START_STEPS key. No open icon set (Lucide, Tabler) has a skateboard, so landing's
+    // deck with upturned ends over two wheels is drawn here.
+    cloning: '<path d="M12 4v11M7.5 10.5 12 15l4.5-4.5M5 20h14"/>',
+    starting: '<path d="m5 7 5 5-5 5M12 18h7"/>',
+    landing: '<path d="M2.5 9c0 1.7 1.2 3 3 3h13c1.8 0 3-1.3 3-3"/><circle cx="7.5" cy="16.5" r="2"/><circle cx="16.5" cy="16.5" r="2"/>',
     moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
     up: '<circle cx="12" cy="12" r="9"/><path d="m8 12 4-4 4 4"/><path d="M12 16V8"/>',
   };
@@ -54,7 +60,7 @@
   ];
   const siteHref = (s) => `/${encodeURIComponent(s.route)}/`;
 
-  // Switch mode's keys (sidebar.js; docs/adr/0056-switch-mode-letters-come-from-names-in-join-order.md): each linked row the
+  // Switch mode's keys (sidebar.js; docs/adr/2026-10-30-1102-switch-mode-letters-come-from-names-in-join-order.md): each linked row the
   // sidebar draws, boards first for numbering, as {href, title, board, num, letter, at}. The first nine boards take num '1'–'9'.
   // Every row takes as letter the first a–z letter of its title not yet taken, at index `at` of the title's characters,
   // claiming in this order: boards by `created`, then pages by `created`, a site with none after those with one, then
@@ -81,13 +87,13 @@
   // key: the row's switchKeys entry while switch mode shows, else undefined. The tile carries a board's number, or any
   // other row's letter, and the title marks its letter; sidebar.css shows them in place of the glyph under .ks-on.
   // mark: HTML after the title, such as Hub's moon.
-  function row({ href, icon, title, sub = '', extra = '', mark = '', on = false, cls = '', key }) {
+  function row({ href, icon, title, sub = '', extra = '', mark = '', ctx = '', on = false, cls = '', key }) {
     const shown = key && (key.board ? key.num : key.letter);
     const tileHtml = shown ? icon.replace(/<\/span>$/, `<span class="ks-key">${esc(shown)}</span></span>`) : icon;
     const chars = [...title];
     const titleHtml = key?.letter ? `${esc(chars.slice(0, key.at).join(''))}<span class="ks-u">${esc(chars[key.at])}</span>${esc(chars.slice(key.at + 1).join(''))}` : esc(title);
     return `<a class="sb-row${on ? ' on' : ''}${cls ? ` ${cls}` : ''}" href="${esc(href)}"${on ? ' aria-current="page"' : ''}>${tileHtml}`
-      + `<span class="sb-text"><span class="sb-title">${titleHtml}${mark}</span>${sub ? `<span class="sb-sub">${sub}</span>` : ''}${extra}</span></a>`;
+      + `<span class="sb-text">${ctx ? `<span class="sb-head"><span class="sb-title">${titleHtml}${mark}</span>${ctx}</span>` : `<span class="sb-title">${titleHtml}${mark}</span>`}${sub ? `<span class="sb-sub">${sub}</span>` : ''}${extra}</span></a>`;
   }
 
   // What waits on the owner on every site but `here`: the count on the logo that opens the drawer.
@@ -121,14 +127,18 @@
   }
 
   const ticketsLabel = (t) => (t.source === 'internal' ? `Internal · ${t.prefix}` : t.source === 'github' ? `GitHub issues${t.account ? ` · ${t.account}` : ''}` : `Linear · ${t.team}`);
-  // A board's context window: its owner session's latest percent, dimmed with its age once older than ten minutes.
+  // A board's context window: its owner session's latest percent at the row's top right, red from 90%, dimmed once the
+  // reading is older than ten minutes, with that age in its tooltip.
   const CTX_STALE_MIN = 10;
+  const CTX_FULL_PERCENT = 90;
   function contextWords(ctx) {
     if (!ctx) return '';
+    const percent = Math.round(ctx.percent);
     const minutes = Math.floor((Date.now() - Date.parse(ctx.at)) / 60_000);
-    if (!(minutes >= CTX_STALE_MIN)) return `<span class="sb-ctx">${Math.round(ctx.percent)}% ctx</span>`;
+    const full = percent >= CTX_FULL_PERCENT ? ' full' : '';
+    if (!(minutes >= CTX_STALE_MIN)) return `<span class="sb-ctx${full}" title="${percent}% of its context window">${percent}% ctx</span>`;
     const age = minutes < 60 ? `${minutes} min` : minutes < 1440 ? `${Math.floor(minutes / 60)} h` : `${Math.floor(minutes / 1440)} d`;
-    return `<span class="sb-ctx stale">${Math.round(ctx.percent)}% ctx · ${age} ago</span>`;
+    return `<span class="sb-ctx${full} stale" title="${percent}% of its context window, read ${age} ago">${percent}% ctx</span>`;
   }
   function askedWhen(iso, now) {
     const minutes = Math.floor((now - Date.parse(iso)) / 60_000);
@@ -144,19 +154,38 @@
       + `<dl class="fs-facts">${fact('Repo', s.repo && esc(repoLabel(s.repo, home)))}${fact('Branch', s.branch && `<code>${esc(s.branch)}</code>`)}`
       + `${fact('Tickets', s.tickets && esc(ticketsLabel(s.tickets)))}${fact('Asked', s.askedAt && esc(askedWhen(s.askedAt, now)))}</dl>`
       + '<p class="fs-refused" role="alert" hidden></p>'
-      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
+      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch && !s.joined ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
+  }
+
+  // A starting board's three steps (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md):
+  // s.step is cloning, starting (the orchestrator's session, until it joins the hub) or landing (the joined board, until it
+  // listens), since s.stepAt.
+  // Cloning fills its bar to git's percent; the later steps run the bars' pulse, never a fill.
+  const START_STEPS = { cloning: 'cloning', starting: 'starting orchestrator', landing: 'landing it' };
+  const STEP_KEYS = Object.keys(START_STEPS);
+  // The lower row: the step, cloning with its percent, and its seconds. A host clock ahead of this device's counts from 0s.
+  function startCaption(s, now = Date.now()) {
+    const seconds = Math.max(0, Math.floor((now - Date.parse(s.stepAt)) / 1000));
+    return `${s.step === 'cloning' ? `cloning (${s.percent || 0}%)` : START_STEPS[s.step]} · ${seconds}s`;
+  }
+  function startSteps(s) {
+    const at = STEP_KEYS.indexOf(s.step);
+    const label = `${START_STEPS[s.step]}, step ${at + 1} of ${STEP_KEYS.length}`;
+    const strip = s.step === 'cloning' ? { reached: 0, running: false, fill: s.percent || 0, label } : { reached: at + 1, running: true, label };
+    return `<span class="sb-steps">${phaseBars(strip, STEP_KEYS)}</span>`;
   }
 
   // The New version row. update: the app's reload, null | 'ready' | 'reloading', which comes first. upgrade:
   // /_hub/sidebar.json's npm update, null | {state: available | waiting | updating | failed, version, builders, error}
-  // (hub/upgrade.mjs; docs/adr/0161-the-hub-offers-a-newer-kickflip-from-npm.md).
+  // (hub/upgrade.mjs; docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). A reload, and an asked
+  // update until it runs out, waits (ui.js BUSY): its pill keeps its blue with a spinner in place of its word.
   function updateRow(update, upgrade) {
-    const button = (attr, disabled, title, sub, go) => `<button type="button" class="sb-row sb-update-row" ${attr}${disabled ? ' disabled' : ''}>${tile('up', 'var(--accent)')}`
-      + `<span class="sb-text"><span class="sb-title">${title}</span>${sub ? `<span class="sb-sub">${esc(sub)}</span>` : ''}</span>${go ? `<span class="sb-go">${go}</span>` : ''}</button>`;
-    if (update) return button('data-app-reload', update === 'reloading', 'New version', '', update === 'reloading' ? 'Reloading…' : 'Reload');
+    const button = (attr, busy, title, sub, go) => `<button type="button" class="sb-row sb-update-row" ${attr}${busy ? globalThis.BoardUI.BUSY : ''}>${tile('up', 'var(--accent)')}`
+      + `<span class="sb-text"><span class="sb-title">${title}</span>${sub ? `<span class="sb-sub">${esc(sub)}</span>` : ''}</span><span class="sb-go">${go}</span></button>`;
+    if (update) return button('data-app-reload', update === 'reloading', 'New version', '', 'Reload');
     if (!upgrade) return '';
-    if (upgrade.state === 'waiting') return button('data-app-upgrade', true, `Update waits for ${upgrade.builders} implementer${upgrade.builders === 1 ? '' : 's'}`, '', '');
-    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Update available', '', 'Updating…');
+    if (upgrade.state === 'waiting') return button('data-app-upgrade', true, `Update waits for ${upgrade.builders} implementer${upgrade.builders === 1 ? '' : 's'}`, '', 'Upgrade');
+    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Update available', '', 'Upgrade');
     if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Upgrade');
     return button('data-app-upgrade', false, 'Update available', '', 'Upgrade');
   }
@@ -165,13 +194,14 @@
   // subscription as sidebar.js finds it, 'on' | 'off' | 'blocked' | 'install' (iOS outside the Home Screen app), or
   // null while unknown or unsupported. switching: switch mode shows, each row with its key and the hint on the Boards label.
   // update: null | 'ready' | 'reloading'.
-  function sidebar(data, { here = '', device = null, switching = false, update = null } = {}) {
+  // now: the time a starting board's seconds count to.
+  function sidebar(data, { here = '', device = null, switching = false, update = null, now = Date.now() } = {}) {
     const sites = data?.sites || [];
     const keys = switching ? new Map(switchKeys(data).map((k) => [k.href, k])) : null;
     const paused = data?.pause?.state === 'paused';
     const siteRow = (s) => {
-      const sub = paused && s.board ? word('wait', 'Paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
-      return row({ href: siteHref(s), icon: s.icon, title: s.title, sub: sub || s.ctx ? `<span class="sb-status">${sub}${contextWords(s.ctx)}</span>` : '', on: s.route === here, key: keys?.get(siteHref(s)) });
+      const sub = paused && s.board ? word('wait', 'paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
+      return row({ href: siteHref(s), icon: s.icon, title: s.title, sub: sub ? `<span class="sb-status">${sub}</span>` : '', ctx: contextWords(s.ctx), on: s.route === here, key: keys?.get(siteHref(s)) });
     };
     const boards = sites.filter((s) => s.board);
     const pages = sites.filter((s) => !s.board);
@@ -179,14 +209,14 @@
     const pending = (data?.starting || []).map((s) => (s.failed
       ? `<button type="button" class="sb-row sb-starting sb-failed" data-starting="${esc(s.route)}" data-failed-start="${esc(s.route)}" aria-haspopup="dialog">${plus}`
         + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span><span class="sb-sub">failed to start</span></span></button>`
-      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
-        + `<span class="sb-text"><span class="sb-title">${s.phase === 'cloning' ? 'Cloning…' : 'Starting…'}</span><span class="sb-sub">${esc(s.title)}${s.repo ? ` · ${esc(repoLabel(s.repo, data.home))}` : ''}${s.phase === 'cloning' ? ' · Cloning from GitHub' : ' · Waiting for the board to answer'}</span></span></div>`)).join('');
+      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}"><span class="icon sb-plus sb-start-icon" aria-hidden="true">${svg(ICONS[s.step], 20)}</span>`
+        + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span>${startSteps(s)}<span class="sb-sub sb-step">${esc(startCaption(s, now))}</span></span></div>`)).join('');
     const newBoard = `<button type="button" class="sb-row sb-new" data-new-board aria-haspopup="dialog">${plus}<span class="sb-text"><span class="sb-title">New board</span></span></button>`;
     const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
       : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Add Claude to your Home Screen', sub: 'Notifications come only to the Home Screen app', cls: 'sb-turnon' })
       : '';
     const usage = sidebarUsage(data?.usage);
-    const hub = paused ? { tone: 'wait', word: 'Paused', detail: `until ${usageClock(data.pause.resets_at)}` } : data?.hub;
+    const hub = paused ? { tone: 'wait', word: 'paused', detail: `until ${usageClock(data.pause.resets_at)}` } : data?.hub;
     const n = data?.notifications || {};
     const lower = (text) => String(text || '').replace(/^\w/, (c) => c.toLowerCase());
     const notify = device === 'blocked' ? word('needs', 'Notifications blocked on this device')
@@ -211,5 +241,5 @@
       + `<div class="sb-group">${boards.map(siteRow).join('')}${pending}${newBoard}</div></section></div>`;
   }
 
-  Object.assign(globalThis.BoardUI ||= {}, { sidebar, failedStart, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
+  Object.assign(globalThis.BoardUI ||= {}, { sidebar, failedStart, startCaption, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
 })();

package/board/public/ui-snapshot.js

@@ -1,17 +1,28 @@
 // The last board this device showed, which the board page paints dimmed until the fresh board lands, and what the
-// page may do meanwhile (docs/adr/0028-the-board-opens-on-the-last-visit.md). Needs ui.js.
+// page may do meanwhile (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md). Needs ui.js.
 (function () {
   // Characters, one board's most; app-snapshot.js keeps every board's within three of these.
   const SNAPSHOT_MAX = 900000;
   const ACTIVE_LANES = ['review', 'stale', 'progress', 'todo'];
 
-  // threads maps item keys to thread messages (app.js state.threadCache). Threads of `keep` go in first, then the
-  // rest while they fit under max; threads of items no longer on the board are dropped. build is the saving page's
-  // (app.html data-build). Null when the board alone won't fit.
+  // What a first paint shows of board: every card as the board sent it, Done cards already slim (board/domain.mjs
+  // slimDone), or the open lanes alone when openOnly. It keeps no version, since it isn't the board that version names,
+  // so the first reload downloads the whole board (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+  const firstPaint = ({ version: _, ...board }, openOnly) => ({ ...board, items: openOnly ? board.items.filter((it) => it.lane !== 'done') : board.items });
+
+  // threads maps item keys to thread messages (app.js state.threadCache). The board goes in as firstPaint, then threads of
+  // `keep` first and the rest while they fit under max; threads of items no longer on the board are dropped. When the
+  // board still won't fit, Done cards go too. build is the saving page's (app.html data-build). Null when open lanes alone won't fit.
   function packSnapshot(board, threads, { build, savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
-    const head = `{"build":${JSON.stringify(build)},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(board)},"threads":{`;
-    if (head.length + 2 > max) return null;
-    const onBoard = new Set(board.items.map((i) => i.key));
+    const headOf = (b) => `{"build":${JSON.stringify(build)},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(b)},"threads":{`;
+    let shown = firstPaint(board, false);
+    let head = headOf(shown);
+    if (head.length + 2 > max) {
+      shown = firstPaint(board, true);
+      head = headOf(shown);
+      if (head.length + 2 > max) return null;
+    }
+    const onBoard = new Set(shown.items.map((i) => i.key));
     let out = head;
     let n = 0;
     for (const key of new Set([...keep, ...threads.keys()])) {
@@ -54,9 +65,9 @@
   const changedLines = (before, after) => Object.keys(after).filter((id) => globalThis.BoardUI.record(before, id) !== after[id]);
 
   // What counts as a card's update: a new thread line, a status or Next line change, or a PR or CI change
-  // (docs/adr/0135-an-updated-card-takes-a-brief-tint.md). Two board items read the same exactly when it is unchanged.
+  // (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md). Two board items read the same exactly when it is unchanged.
   const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.status ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? null,
-    it.next ?? null, it.ask?.state ?? null, it.pr ? [it.pr.state, it.pr.isDraft, it.pr.reviewDecision, it.pr.checks?.state ?? null] : null]);
+    it.next ?? null, it.ask?.state ?? null, ...(it.prs || []).map((pr) => [pr.state, pr.isDraft, pr.reviewDecision, pr.checks?.state ?? null])]);
 
   Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX });
 })();