@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/ui-patch.js

@@ -1,41 +1,15 @@
-// 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.
+// Applies the board's patches on the page (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md): board/sync.mjs
+// patchSince makes one from the change number the page holds, 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. onHost rides beside the board,
+// so it never moves the board's number.
 (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 };
+    const next = { ...board, ...patch.set, version: patch.version, generatedAt: patch.generatedAt, onHost: patch.onHost };
     for (const k of patch.unset) delete next[k];
     for (const [name, p] of Object.entries(patch.lists)) {
       const id = LISTS[name];
@@ -49,5 +23,5 @@
     return next;
   }
 
-  Object.assign(globalThis.BoardUI ||= {}, { boardPatch, applyPatch });
+  Object.assign(globalThis.BoardUI ||= {}, { applyPatch });
 })();

package/board/public/ui-progress-bar.js

@@ -0,0 +1,28 @@
+// The progress bar every bar on the board draws from: an In Progress card's five build phases and a Todo card's planner
+// dashes (ui-cards.js), and a starting board's three start steps (ui-sidebar.js)
+// (docs/adr/2026-11-06-0038-a-progress-bar-pulses-one-step-at-a-time.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]));
+  // {count, done, now, percent, dim, tone, label}, or null for no bar. done counts the steps reached, filled; now is the
+  // index of the one step still running, which pulses, so no bar can draw two. percent fills the step after the done
+  // ones that far. A dim bar draws its running step filled, without the pulse. tone is a lane class, 'in-todo' drawing it in
+  // Todo's grey; with none it is In Progress's orange.
+  function progressBar(bar) {
+    if (!bar) return '';
+    const { count, done, now, percent, dim, tone, label } = bar;
+    const step = (i) => (i === now ? `<i class="${dim ? 'done' : 'now'}"></i>` : i < done ? '<i class="done"></i>'
+      : i === done && percent !== undefined ? `<i class="fill" style="--p:${percent}%"></i>` : '<i class=""></i>');
+    return `<span class="phase-bars${dim ? ' dim' : ''}${tone ? ` ${tone}` : ''}" role="img" aria-label="${esc(label)}" title="${esc(label)}">${Array.from({ length: count }, (_, i) => step(i)).join('')}</span>`;
+  }
+  // Every pulse on the page beats on one clock: each one that starts is set to the document timeline's origin, so a
+  // card's running step and its status dot blink together, and a redraw that draws a new copy never restarts the beat.
+  const PULSES = new Set(['pulse', 'pulse-fill', 'sb-pulse', 'reader-pulse']);
+  function onePulse(ev) {
+    if (!PULSES.has(ev.animationName)) return;
+    for (const a of ev.target.getAnimations()) if (a.animationName === ev.animationName) a.startTime = 0;
+  }
+  Object.assign(globalThis.BoardUI ||= {}, { progressBar, onePulse });
+  // hub/hub.mjs runs this with no document, only to render the sidebar.
+  globalThis.document?.addEventListener('animationstart', onePulse);
+})();

package/board/public/ui-questions.js

@@ -1,16 +1,27 @@
 // Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
 (function () {
-  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 { esc, escText, time, ago, replyBody, attachments, 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.
   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 || ''; };
   // 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>`;
+  const option = (o, { type = 'radio', name, checked = false, numbered = true, locked = false, suggested = '' }) => `<label class="opt"><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${locked ? ' disabled' : ''}>
+        <span><span class="lbl">${numbered ? escText(lead(o)) : ''}${escText(o.label)}</span>${suggested ? badge('ready', 'suggested').replace('class="chip', 'class="chip suggested') : ''}${o.recommended ? '<span class="rec">recommended</span>' : ''}<div class="det">${escText(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);
+  // A question's unsent note: its draft, else on a reopened question the note its last answer sent, so a changed pick
+  // sends it again.
+  const noteOf = (q, draft) => draft.note ?? (q.reopened ? q.answers.at(-1)?.note || '' : '');
+  // docs/adr/2026-11-05-2331-a-sent-answer-is-resolved-in-place-until-the-page-reloads.md
+  // Whether the owner has resolved a question: an answer is sent, whatever Claude has done with it since, or Claude
+  // resolved it. A sent question draws as resolvedCard, locked, until its badge reopens it.
+  const isSent = (q) => q.state === 'answered' || q.state === 'replied' || q.state === 'resolved';
+  // A question's unsent {choice, note} on this device, in localStorage under qdraft:<id>. view-questions.js and the
+  // phone's deck (app-needs.js) and the prototype viewer's Choose this (prototype-switcher.js) write it.
+  const getDraft = (id) => { try { return JSON.parse(localStorage.getItem('qdraft:' + id) || '{}'); } catch { return {}; } };
+  const setDraft = (id, v) => { try { localStorage.setItem('qdraft:' + id, JSON.stringify(v)); } catch {} };
   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>';
@@ -18,12 +29,10 @@
   // 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>`;
+      <div class="note-tools">${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' },
     requested: { label: `${SPIN}prototype requested`, tone: 'normal' },
   };
   // docs/adr/2026-11-02-1332-a-prototype-round-ends-with-a-one-take-confirm.md
@@ -35,12 +44,14 @@
   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>';
   function answerHistory(q, links = {}) {
     if (!q.answers.length) return '';
-    const body = q.answers.map((a) => `<div class="ans"><div class="muted small">You · ${esc(time(a.ts))}</div>${esc(choiceLabel(q, a.choice))}${a.note ? `<div>${linkText(a.note, links)}</div>` : ''}${attachments(a.files)}</div>
-      ${a.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(a.reply), links)}</div>` : a.acted ? '' : '<div class="muted small" style="margin-top:4px">Waiting for Claude…</div>'}`).join('');
+    const body = q.answers.map((a) => `<div class="ans"><div class="muted small">You · ${esc(time(a.ts))}</div>${escText(choiceLabel(q, a.choice))}${a.note ? `<div>${linkText(a.note, links)}</div>` : ''}${attachments(a.files)}</div>
+      ${a.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(a.reply), links)}</div>` : ''}`).join('');
     const last = q.answers[q.answers.length - 1];
     return q.state === 'open' || !last.reply ? body : `<details><summary>Your answer and Claude's reply</summary>${body}</details>`;
   }
-  // A prototype page in the site's public/ opens in place, and its switcher picks a take (board/public/prototype-switcher.js).
+  // A prototype page in the site's public/ is the question's full-page viewer: it opens in place, shows one take at a
+  // time, and its switcher drafts a pick (board/public/prototype-switcher.js,
+  // docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md).
   const PROTOTYPE_PAGE = /^prototype-[\w-]+\.html(?:[?#]|$)/;
   const isPrototype = (url) => Boolean(url) && PROTOTYPE_PAGE.test(globalThis.location && url.startsWith(location.origin + '/') ? url.replace(/^[^?#]*\//, '') : url);
   const withParam = (url, key, value) => {
@@ -48,13 +59,11 @@
     return `${url.slice(0, at)}${url.slice(0, at).includes('?') ? '&' : '?'}${key}=${encodeURIComponent(value)}${url.slice(at)}`;
   };
   const questionLink = (url) => !url ? ''
-    : isPrototype(url) ? `<a class="pill proto" href="${esc(url)}">See the prototypes →</a>`
+    : isPrototype(url) ? `<a class="button proto-view" href="${esc(url)}">View 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/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);
+  // An option with `diagram` draws it with its `practice` in the question (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md).
+  const drawn = (q) => q.options.some((o) => o.diagram);
 
   // rows: [[{text, tone?, to?}]], top to bottom. A box points at the boxes of the next row listed in `to`, else at all
   // of them; tone is a status colour's name.
@@ -72,41 +81,27 @@
   }
   const practice = (lines, links) => `<div class="practice"><b>In practice</b><ul>${lines.map((l) => `<li>${linkText(l, links)}</li>`).join('')}</ul></div>`;
 
-  const fullTakes = (q, fit) => isPrototype(q.url) && q.options.every((o) => !o.diagram && !o.practice)
-    && (q.options.length === 1 || q.options.some((o) => fit(o.id)?.scrolls));
-  // Grid heights decide the layout; fullH measures the chosen take at the full content width.
-  function takeBody(q, o, links, fit, full = false) {
-    if (o.diagram) return diagram(o.diagram) + practice(o.practice || [], links);
-    if (!isPrototype(q.url)) return '';
-    const size = fit(o.id);
-    const h = full ? size?.fullH : size?.h;
-    // 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, locked = false) {
+  function takes(q, chosen, links, locked = false) {
     const name = 'c-' + q.id;
-    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, 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, locked, suggested: suggestedLine(q, o, links) })}${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) })}${o.diagram ? diagram(o.diagram) + practice(o.practice || [], links) : ''}</article>`).join('')}</div>`;
   }
-  // A confirm links its one take alone, and says why it is asked.
-  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) {
+  // A confirm says why it is asked; its View prototypes opens the viewer on its one take (?variant=).
+  const confirmLine = (q) => q.confirm_of && 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-05-2331-a-sent-answer-is-resolved-in-place-until-the-page-reloads.md
+  // A sent or resolved question, read-only in a green tint: its Resolved badge reopens it (view-questions.js sends
+  // `question-reopen` once the owner confirms), how Claude resolved it and when (resolved_at), its last pick checked
+  // among locked options, and its last note and Claude's reply. reask is a re-ask under way
+  // (docs/adr/2026-11-04-2001-a-resolved-question-is-read-only-and-can-be-asked-again.md).
+  function resolvedCard(q, links, n) {
     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>
+      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge('ready', '✓ Resolved', { button: true, title: 'Reopen this question', attrs: { type: 'button', 'data-reopen': q.id } })}</div>
       <h3>${linkText(q.question, links)}</h3>
+      ${q.answers.length ? '<div class="sent-line">Sent. Tap Resolved to reopen it.</div>' : ''}
       ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
       ${questionLink(q.url)}
       ${outcome || acted ? `<div class="small muted resolved-line">${outcome}${acted}</div>` : ''}
@@ -115,22 +110,22 @@
       ${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.
+  // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext.
   // 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 } = {}) {
-    if (q.state === 'resolved') return resolvedCard(q, links);
+  // A requested question takes the accent tint, as a sent one takes the green.
+  function questionCard(q, { n = 0, draft = {}, links = {} } = {}) {
+    if (isSent(q)) return resolvedCard(q, links, n);
     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)}">
+    return `<section class="q${q.urgent && q.state === 'open' ? ' urgent' : ''}${locked ? ' 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>${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)}
-      ${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)}
+      ${questionLink(q.confirm_of && isPrototype(q.url) ? withParam(q.url, 'variant', q.options[0].id) : q.url)}
+      ${confirmLine(q)}
+      ${drawn(q) ? takes(q, chosen, links, 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, noteOf(q, draft))}
       ${answerHistory(q, links)}
     </section>`;
   }
@@ -142,7 +137,7 @@
     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;
+      return c ? { ...t, title: `${c.ref}: ${c.title}`, ...(c.kind === 'ask' ? { askedAt: c.ask.askedAt } : {}) } : t;
     });
   }
   // Topics from /api/board ownerTopics, in order. pills: unresolved topics with an open question, plus the
@@ -179,5 +174,5 @@
     },
   };
 
-  Object.assign(globalThis.BoardUI, { choiceLabel, choiceOf, option, answerHistory, questionCard, roundChip, takes, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
+  Object.assign(globalThis.BoardUI, { isPrototype, getDraft, setDraft, choiceLabel, choiceOf, noteOf, isSent, option, answerHistory, questionCard, roundChip, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
 })();

package/board/public/ui-sidebar.js

@@ -1,11 +1,11 @@
 // 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
+// ui-progress-bar.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, phaseBars } = globalThis.BoardUI || {};
+  const { header, progressBar } = 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 = {
@@ -32,6 +32,9 @@
     const time = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?([AP])M/i, (_, x) => `${x.toLowerCase()}m`);
     return new Date().toDateString() === d.toDateString() ? time : `${d.toLocaleDateString([], { weekday: 'short' })} ${time}`;
   }
+  // A pause's end in words: until its clock, or until you resume a Forever Pause hub or Pause board
+  // (docs/adr/2026-11-05-1849-pause-board-and-pause-hub-pause-new-work-by-hand.md).
+  const pauseUntilWords = (end) => (end === 'forever' ? 'until you resume' : `until ${usageClock(end)}`);
   const usageTone = (w) => !w ? 'none' : w.state === 'stale' ? 'stale' : w.used_percentage >= 90 ? 'full' : w.used_percentage >= 75 ? 'high' : 'ok';
   const usageBar = (w) => `<span class="u-bar" aria-hidden="true"><i style="width:${w?.state === 'stale' ? 0 : Math.max(0, Math.min(100, w?.used_percentage || 0))}%"></i></span>`;
   function usageWords(reading, key) {
@@ -69,7 +72,7 @@
     const sites = data?.sites || [];
     const site = (rank) => (s) => ({ href: siteHref(s), title: String(s.title ?? s.route), board: rank === 0, rank, joined: Date.parse(s.created) });
     const rows = [...sites.filter((s) => s.board).map(site(0)), ...sites.filter((s) => !s.board).map(site(1)),
-      ...UTILITY.map((f, i) => ({ href: f.href, title: f.title, board: false, rank: 2, joined: i }))];
+      ...(data?.shared ? [] : UTILITY).map((f, i) => ({ href: f.href, title: f.title, board: false, rank: 2, joined: i }))];
     rows.filter((r) => r.board).slice(0, 9).forEach((r, i) => { r.num = String(i + 1); });
     const when = (r) => (Number.isFinite(r.joined) ? r.joined : Infinity);
     const taken = new Set();
@@ -171,36 +174,38 @@
   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>`;
+    const count = STEP_KEYS.length;
+    const bar = s.step === 'cloning' ? { count, done: 0, percent: s.percent || 0, label } : { count, done: at + 1, now: at, label };
+    return `<span class="sb-steps">${progressBar(bar)}</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/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, 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'}`, '', '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');
+  // The update row, only while the app's code is old: the version the hub now runs, as the Hub page's footer writes it (v0.5.1), or New version
+  // when no version is known (a clone whose commit moved but not its version). update: the app's reload, null | 'ready' | 'reloading'. Nothing
+  // else draws a row: the hub pulls a new version and restarts itself, and a pull or restart that fails shows nothing
+  // (docs/adr/2026-11-06-0800-the-update-row-shows-only-new-version-and-reload.md). A reload waits (ui.js BUSY): the pill keeps
+  // its blue with a spinner in place of its word.
+  function updateRow(update, version = null) {
+    if (!update) return '';
+    return `<button type="button" class="sb-row sb-update-row" data-app-reload${update === 'reloading' ? globalThis.BoardUI.BUSY : ''}>${tile('up', 'var(--accent)')}`
+      + `<span class="sb-text"><span class="sb-title">${version ? `v${esc(version)}` : 'New version'}</span></span><span class="sb-go">Reload</span></button>`;
   }
 
   // data: /_hub/sidebar.json. here: a site's route or a hub page's path without its leading slash. device: this device's push
   // 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'.
-  // now: the time a starting board's seconds count to.
+  // now: the time a starting board's seconds count to. A shared person's data (data.shared; hub/share.mjs sharedSidebar)
+  // draws their boards alone: no Hub row, update or notification rows, and no New board.
   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';
+    // A busy Mac holds every board's new work, and a pause reads before it (docs/adr/2026-11-06-0106-a-busy-mac-holds-new-work.md).
+    const busy = data?.pause?.machine?.state === 'busy';
+    // A board under Pause board carries its own pause (docs/adr/2026-11-05-1849-pause-board-and-pause-hub-pause-new-work-by-hand.md).
+    const holdWord = (s) => (paused || s.pause?.state === 'paused' ? word('paused', 'paused') : busy ? word('wait', 'busy') : '');
     const siteRow = (s) => {
-      const sub = paused && s.board ? word('wait', 'paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
+      const sub = s.board && holdWord(s) ? holdWord(s) + (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);
@@ -216,7 +221,7 @@
       : 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: 'paused', word: 'paused', detail: pauseUntilWords(data.pause.resets_at) } : busy ? { tone: 'wait', word: 'busy', detail: 'Mac is busy' } : 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')
@@ -231,15 +236,18 @@
     const selected = here.startsWith('_hub') ? '/_hub' : `/${here.replace(/\/$/, '')}`;
     const hint = switching ? '<span class="ks-label-hint" role="status">– press a key to switch<i class="ks-bar"></i></span>' : '';
     const close = `<div class="nav"><button type="button" class="sb-close" data-sidebar-close aria-label="Close boards">${svg(ICONS.close, 20)}</button></div>`;
-    return header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
-      leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } })
-      + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update, data?.upgrade)}</div><div class="sb-group">`
+    const top = header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
+      leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } });
+    const boardsLabel = `<div class="sb-label ks-label"><span class="ks-label-text">Boards</span>${hint}</div>`;
+    if (data?.shared) return `${top}<div class="sb-scroll"><section class="sb-boards" aria-label="Boards">${boardsLabel}<div class="sb-group">${boards.map(siteRow).join('')}</div></section></div>`;
+    return top
+      + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update)}</div><div class="sb-group">`
       + UTILITY.map((f) => row({ ...f, on: f.href.replace(/\/$/, '') === selected, sub: subs[f.href], mark: f.href === '/_hub/' ? moon : '', ...(f.href === '/_hub/' && usage ? { extra: usage, cls: 'sb-hub-usage' } : {}), key: keys?.get(f.href) })).join('')
       + `</div>${turnOn}</section>`
       + (pages.length ? `<section class="sb-pages" aria-label="Pages"><div class="sb-label">Pages</div><div class="sb-group">${pages.map(siteRow).join('')}</div></section>` : '')
-      + `<section class="sb-boards" aria-label="Boards"><div class="sb-label ks-label"><span class="ks-label-text">Boards</span>${hint}</div>`
+      + `<section class="sb-boards" aria-label="Boards">${boardsLabel}`
       + `<div class="sb-group">${boards.map(siteRow).join('')}${pending}${newBoard}</div></section></div>`;
   }
 
-  Object.assign(globalThis.BoardUI ||= {}, { sidebar, failedStart, startCaption, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
+  Object.assign(globalThis.BoardUI ||= {}, { sidebar, failedStart, START_STEPS, startSteps, startCaption, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, pauseUntilWords, usageTone, usageBar, usageWords });
 })();

package/board/public/ui-snapshot.js

@@ -1,73 +1,64 @@
-// 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/2026-10-29-1639-the-board-opens-on-the-last-visit.md). Needs ui.js.
+// The board this device last held, saved in IndexedDB with its change number, which the board page paints live on open
+// and catches up from (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.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'];
 
-  // 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 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()])) {
-      if (!onBoard.has(key) || !threads.has(key)) continue;
-      const part = `${n ? ',' : ''}${JSON.stringify(key)}:${JSON.stringify(threads.get(key))}`;
-      if (out.length + part.length + 2 > max) continue;
-      out += part;
-      n++;
-    }
-    return `${out}}}`;
-  }
+  // threads maps item keys to thread messages (app.js state.threadCache). → {build, savedAt, board, threads} with the
+  // threads of the cards on the board; build is the saving page's (app.html data-build).
+  const copyOf = (board, threads, { build, savedAt }) => {
+    const onBoard = new Set(board.items.map((i) => i.key));
+    return { build, savedAt, board, threads: Object.fromEntries([...threads].filter(([key]) => onBoard.has(key))) };
+  };
 
-  // → {savedAt, board, threads: {key: messages}}, or null for anything packSnapshot didn't write under this build: code
-  // from another build may read the board's shape differently, and a paint that throws stops the live load.
-  function unpackSnapshot(raw, build) {
-    let s;
-    try { s = JSON.parse(raw); } catch { return null; }
-    if (s?.build !== build || !Array.isArray(s.board?.items) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
+  // → {savedAt, board, threads}, or null for anything copyOf didn't write under this build: code from another build may
+  // read the board's shape differently, and a paint that throws stops the live load.
+  function readCopy(s, build) {
+    if (!s || s.build !== build || !Array.isArray(s.board?.items) || !Number.isInteger(s.board.version) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
     const threads = Object.fromEntries(Object.entries(s.threads && typeof s.threads === 'object' ? s.threads : {}).filter(([, m]) => Array.isArray(m)));
     return { savedAt: s.savedAt, board: s.board, threads };
   }
 
+  // One transaction on a store of the copies' database: 'boards', each board's copy, or 'pages', a side page's answers
+  // (pageCopy). fn(store) → the request whose result it resolves with. Rejects where IndexedDB is missing or refuses.
+  function copyStore(name, mode, fn) {
+    return new Promise((resolve, reject) => {
+      const open = indexedDB.open('kickflip-boards', 2);
+      open.onupgradeneeded = () => { for (const s of ['boards', 'pages']) if (!open.result.objectStoreNames.contains(s)) open.result.createObjectStore(s); };
+      open.onerror = () => reject(open.error);
+      open.onsuccess = () => {
+        const db = open.result;
+        const tx = db.transaction(name, mode);
+        const req = fn(tx.objectStore(name));
+        tx.oncomplete = () => { db.close(); resolve(req.result); };
+        tx.onerror = tx.onabort = () => { db.close(); reject(tx.error); };
+      };
+    });
+  }
+
+  // A side page's last answer from each URL it reads, Notes' and Settings', for showing while the board can't be reached
+  // (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md). read(url) → {savedAt, body} or null.
+  const pageCopy = {
+    save: (url, body) => copyStore('pages', 'readwrite', (store) => store.put({ savedAt: new Date().toISOString(), body }, url)).catch(() => {}),
+    read: (url) => copyStore('pages', 'readonly', (store) => store.get(url)).then((c) => (typeof c?.savedAt === 'string' ? c : null), () => null),
+  };
+
+  // The copy of the board at key, the board view's site URL: the copy build saved, or with build null any build's.
+  // → {savedAt, board, threads} or null.
+  const boardCopy = (key, build) => copyStore('boards', 'readonly', (store) => store.get(key)).then((s) => readCopy(s, build ?? s?.build), () => null);
+
   // The cards whose threads load right after the board, so tapping one opens it filled; open cards load with the board.
   const preloadKeys = (items, open) => {
     const opened = new Set(open);
     return items.filter((i) => ACTIVE_LANES.includes(i.lane) && !opened.has(i.key)).map((i) => i.key);
   };
 
-  // What the board page takes taps on. view is 'snapshot' while the last visit shows, 'fresh' once a board load landed,
-  // and null before either. blocked selects the controls that send to the host and wait for the fresh board; style.css's
-  // INT-61 block dims the same list.
-  const SNAPSHOT_BLOCKED = ['.actions button', 'button[data-plan]', 'button[data-bump]', 'button[data-card-bump]', 'button[data-edit]', 'button[data-withdraw]',
-    'button[data-check-github]', 'form[data-reply] button[type=submit]', 'form[data-reply] button[data-quick]', 'form[data-reply] button[data-proto]', 'form[data-reply] button[data-confirm]', '.prompt button'].join(', ');
-  const liveControls = (view) => {
-    const fresh = view !== 'snapshot';
-    return { read: true, ask: true, cards: fresh, send: fresh, blocked: fresh ? '' : SNAPSHOT_BLOCKED };
-  };
-
   // before and after map a line's id to its text; the ids of the lines that are new or read differently flash once.
   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
+  // What counts as a card's update: a new thread line, a lane, status or Next line change, or a PR or CI change
   // (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,
+  const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.lane ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? 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 });
+  Object.assign(globalThis.BoardUI, { copyOf, readCopy, copyStore, pageCopy, boardCopy, preloadKeys, changedLines, updateSign });
 })();