@lovek4d/kickflip 0.5.3 → 0.6.1

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,18 +1,25 @@
 // Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
 (function () {
-  const { esc, time, ago, replyBody, attachments, dropZone, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
+  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, 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 ? 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>`;
+        <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 Pick (prototype-switcher.js) write it.
+  // 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) : '';
@@ -26,8 +33,6 @@
 
   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
@@ -39,8 +44,8 @@
   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>`;
   }
@@ -82,19 +87,21 @@
   }
   // 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-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) {
+  // 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>` : ''}
@@ -106,18 +113,19 @@
   // 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).
+  // A requested question takes the accent tint, as a sent one takes the green.
   function questionCard(q, { n = 0, draft = {}, links = {} } = {}) {
-    if (q.state === 'resolved') return resolvedCard(q, 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>` : ''}
       ${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, draft.note)}
+      ${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>`;
   }
@@ -166,5 +174,5 @@
     },
   };
 
-  Object.assign(globalThis.BoardUI, { isPrototype, getDraft, setDraft, choiceLabel, choiceOf, option, answerHistory, questionCard, roundChip, 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) {
@@ -171,25 +174,20 @@
   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 | updating | updated | restarting | failed, version, error}
-  // (hub/upgrade.mjs; docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md). The hub pulls a new
-  // version itself, so the row reads Updated to v<version> with Restart; restarting is the sidebar's own state while the hub
-  // restarts. A reload, a pull and a restart wait (ui.js BUSY): the 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 === 'updated') return button('data-app-restart', false, `Updated to v${esc(upgrade.version)}`, upgrade.error, 'Restart');
-    if (upgrade.state === 'restarting') return button('data-app-restart', true, `Restarting to v${esc(upgrade.version)}`, '', 'Restart');
-    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Updating', '', 'Update');
-    if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Update');
-    return button('data-app-upgrade', false, 'Update available', '', 'Update');
+  // 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
@@ -198,12 +196,22 @@
   // update: null | 'ready' | 'reloading'.
   // 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.
+  // Whether the Hub row reads busy: the host is busy and no usage pause reads first.
+  const hubBusy = (data) => data?.pause?.machine?.state === 'busy' && data?.pause?.state !== 'paused';
+  // The logo's dot for the hub's state, like the blue update dot: 'down' (red) for a broken hub, 'busy' (orange), else ''.
+  const hubDot = (data) => (data?.hub?.tone === 'down' ? 'down' : hubBusy(data) ? 'busy' : '');
+
   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 host holds every board's new work but shows only on the Hub row and the logo's dot, never on a board, and a pause reads before it
+    // (docs/adr/2026-11-06-1305-a-busy-host-shows-only-on-the-hub-row-and-the-logo-dot.md).
+    const busy = hubBusy(data);
+    // 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') : '');
     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);
@@ -219,7 +227,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: 'the host 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')
@@ -239,7 +247,7 @@
     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, data?.upgrade)}</div><div class="sb-group">`
+      + `<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>` : '')
@@ -247,5 +255,5 @@
       + `<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, hubDot });
 })();

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'];
+  const ACTIVE_LANES = ['review', '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 });
 })();