@lovek4d/kickflip 0.5.3 → 0.6.0

package/board/public/app-cards.js

@@ -3,7 +3,7 @@
 // app-core.js and app-threads.js.
 BoardView.part((B) => {
   const { $, store, state, markSeen, seen, toast, links } = B;
-  const { esc, ago, REVIEW, reviewAge, unreadCount, workLines, BUILD_PHASES, phaseStrip, phaseMotion, heldUntilWords, holdPicker, linkText, mergeButton, installButton, tryButton, tryWords, waitOn, prName, BUTTON, LINK_ARROW } = BoardUI;
+  const { esc, escText, ago, REVIEW, reviewAge, unreadCount, workLines, BUILD_PHASES, phaseStrip, phaseMotion, heldUntilWords, holdPicker, linkText, mergeButton, installButton, tryButton, tryWords, waitOn, prName, BUTTON, LINK_ARROW } = BoardUI;
 
   const mainSheet = $('#mainLogSheet');
   const mainRetry = $('#mainLogRetry');
@@ -41,7 +41,7 @@ BoardView.part((B) => {
     if (!mainSheet.open || mainSheet.classList.contains('closing') || !main) return;
     const words = tryWords(main.kind);
     $('#mainLogTitle').textContent = `Main’s ${words.failed.toLowerCase()}`;
-    $('#mainLogSource').innerHTML = `<code>.kickflip/build</code> stopped at main@<code>${esc(main.sha)}</code> · last lines of <code>data/try/main.log</code>`;
+    $('#mainLogSource').innerHTML = `<code>${esc(main.script)}</code> stopped at main@<code>${esc(main.sha)}</code> · last lines of <code>data/try/main.log</code>`;
     // Only a load begun after the POST resolved can settle this retry.
     const fresh = !postingMain && load !== null && (followMainAfter === null || load >= followMainAfter);
     if (fresh) {
@@ -215,7 +215,7 @@ BoardView.part((B) => {
     const pr = it.pr;
     const ctx = links(it.key);
     const rows = [];
-    rows.push(['Wave', esc(it.waveTitle)]);
+    rows.push(['Wave', escText(it.waveTitle)]);
     if (pr) {
       const ci = pr.checks ? `${pr.checks.state}${pr.checks.fail ? ` (${pr.checks.fail} failing)` : pr.checks.pending ? ` (${pr.checks.pending} running)` : ''}` : 'unknown';
       if (pr.state === 'OPEN') {
@@ -275,8 +275,8 @@ BoardView.part((B) => {
       : openPRs(it).length > 1
       ? `Merge ${ref}? Claude squash-merges ${openPRs(it).map(prName).join(', ')} in turn if they are still approved, green and clean.`
       : `Merge ${ref}? Claude squash-merges ${openPRs(it).map(prName).join('')} if it is still approved, green and clean.`),
-    'card-build': (it, ref) => (it.blockedBy?.length
-      ? `${it.held ? 'Unhold and implement' : 'Implement'} ${ref} once ${it.blockedBy.map((d) => d.ref).join(', ')} ${it.blockedBy.length === 1 ? 'is' : 'are'} done? It is bumped to the top of Todo until then.`
+    'card-build': (it, ref) => (it.blocked
+      ? `${it.held ? 'Unhold and implement' : 'Implement'} ${ref} once ${[it.blockedBy.length && `${it.blockedBy.map((d) => d.ref).join(', ')} ${it.blockedBy.length === 1 ? 'is' : 'are'} done`, it.blockedUntil].filter(Boolean).join(' and ')}? It is bumped to the top of Todo until then.`
       : `${it.held ? `Unhold and implement ${ref}?` : `Implement ${ref}?`} Claude starts its implementer now with the notes as they stand.`),
     finish: (it, ref) => (it.kind === 'ask' ? `Mark this task done? "${it.title}" moves to Done.`
       : it.ownerStep ? `Done with "${it.ownerStep}"? ${ref} moves to Done and its ticket closes.`
@@ -297,16 +297,25 @@ BoardView.part((B) => {
     const ask = (act, label, cls = '') => `<button${cls ? ` class="${cls}"` : ''} data-confirm="${act}" data-key="${key}">${label}</button>`;
     const hold = it.kind !== 'work' || !it.holdable ? ''
       : it.held ? ask('resume', 'Unhold', 'unhold') : ask('hold', 'Hold');
+    // A Todo card's Close, right of Hold; an In Review card's Done is in its thread box
+    // (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md).
+    const close = it.lane === 'todo' && it.finishable ? ask('finish', 'Close') : '';
     // A Todo card's Implement is in its thread box (app-threads.js; docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md).
-    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${mergeButton(it)}${hold}${actionButton(it)}${tryButton(it)}${notesButton(it)}`)}</div>`;
+    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${hold}${close}${notesButton(it)}${tryButton(it)}${actionButton(it)}${prototypesButton(it)}${mergeButton(it)}`)}</div>`;
   }
 
   // board/domain.mjs actionButtonOf picks the button and resolvedBy its colour (docs/adr/2026-10-30-1309-an-unstarted-card-waits-on-its-questions-in-todo.md).
   const ACTION_BUTTONS = {
-    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Open questions</a>`,
-    [BUTTON.markDone]: (it) => `<button${classes(it, BUTTON.markDone)} data-confirm="finish" data-key="${esc(it.key)}">Mark as done</button>`,
+    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Questions</a>`,
   };
   const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
+  // docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md
+  // On any card with prototypes (board/domain.mjs prototypesOf), Done ones too, so old rounds stay a tap away: it opens
+  // the viewer on the latest round, solid orange while a round waits on the owner's pick.
+  const prototypesButton = (it) => {
+    const latest = it.prototypes?.rounds.at(-1);
+    return latest ? `<a class="button${it.prototypes.open ? ' resolves' : ''}" href="${esc(latest.url)}">Prototypes</a>` : '';
+  };
 
   // The latest bump among New cards takes no second bump (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md).
   const latestBump = (it) => Boolean(it.isNew && it.bumpedAt) && !state.board.items.some((i) => i.isNew && (i.bumpedAt || '') > it.bumpedAt);
@@ -358,7 +367,7 @@ BoardView.part((B) => {
   // After lanes redraw: compares each card's reached count to its last, then enters, fills or leaves its strip. An
   // entering strip grows in one bar at a time, then sweeps each reached bar.
   function moveStrips(items, before) {
-    const next = new Map(items.map((it) => [it.key, phaseStrip(it)?.reached ?? null]));
+    const next = new Map(items.map((it) => [it.key, phaseStrip(it)?.done ?? null]));
     const still = reduceMotion.matches || !drawn;
     for (const [key, reached] of next) {
       const kind = still ? null : phaseMotion(phases.get(key), reached);
@@ -392,6 +401,7 @@ BoardView.part((B) => {
     const key = el.dataset.key;
     if (el.open) {
       state.openItems.add(key);
+      state.restored.delete(key);
       const it = state.board.items.find((i) => i.key === key) || state.archived.cards.find((i) => i.key === key);
       markSeen(it);
       B.renderBanner(state.board);
@@ -457,10 +467,14 @@ BoardView.part((B) => {
     catch (e) { B.failed(e); }
   });
 
-  B.on(B.root, 'click', async (ev) => {
+  B.on(B.root, 'click', (ev) => {
     const b = ev.target.closest('button[data-confirm]');
     if (!b) return;
     ev.preventDefault();
+    confirmTap(b);
+  });
+  // A data-confirm button's tap: Hold's sheet, or its confirm, then its event. The thread box's Done comes here on ⌥↵ too.
+  async function confirmTap(b) {
     const { key, confirm: act } = b.dataset;
     if (b.classList.contains('nudging')) return;
     const it = state.board.items.find((i) => i.key === key);
@@ -490,7 +504,7 @@ BoardView.part((B) => {
         if (pend) { BoardUI.pending.drop(pend); B.render(); }
         B.failed(e);
       }
-      if (act === 'finish') B.syncDone(key);
+      if (act === 'finish') B.syncSends(key);
       return;
     }
     // A stalled line's nudge calms it to orange with a ripple, not a spinner, until a board shows the card's status line
@@ -504,7 +518,7 @@ BoardView.part((B) => {
       BoardUI.pending.answered(id, out.board.generatedAt); toast('Nudge sent');
     } catch { BoardUI.pending.drop(id); toast('Could not send. Is the host awake?'); }
     B.render();
-  });
+  }
 
-  Object.assign(B, { captureStrips, moveStrips, detail, card });
+  Object.assign(B, { captureStrips, moveStrips, detail, card, confirmTap });
 });

package/board/public/app-header.js

@@ -85,27 +85,26 @@ BoardView.part((B) => {
   state.link = 'online';
   const controls = { wired: false, boardSettled: false, reloading: false };
   function applyControls() {
-    const on = headerControls({ link: state.link, ...controls });
+    const on = headerControls(controls);
     $('#refresh').disabled = !on.refresh;
     $('#refresh').classList.toggle('spinning', on.spin);
     const gear = $('#settingsLink');
     if (on.settings) { gear.removeAttribute('aria-disabled'); gear.removeAttribute('tabindex'); } else { gear.setAttribute('aria-disabled', 'true'); gear.tabIndex = -1; }
   }
   const headerWired = () => { controls.wired = true; applyControls(); };
-  // style.css dims the offline view from .view-board.offline.
+  // Offline, the board stays as it was and reads as before; only the header time turns red, and style.css holds the
+  // buttons that send from .view-board.offline (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
   function setLink(link) {
-    const was = state.link;
     state.link = link;
     if (link !== 'reconnecting') controls.boardSettled = true;
-    const off = link !== 'online';
-    B.root.classList.toggle('offline', off);
-    if (link === 'offline' && was === 'online') toast('Offline. Use refresh in the header to retry.');
+    B.root.classList.toggle('offline', link !== 'online');
     applyControls();
     renderStatus();
   }
+  BoardUI.holdSends(B.on, B.root, () => state.link !== 'online', () => B.toast(BoardUI.WAITING));
   const linkUp = () => setLink('online');
   const linkDown = () => { if (state.link !== 'reconnecting') setLink('offline'); };
-  B.on($('.nav'), 'click', (ev) => {
+  B.on($('#settingsLink'), 'click', (ev) => {
     if (ev.target.closest('a[aria-disabled="true"]')) { ev.preventDefault(); ev.stopImmediatePropagation(); }
   }, true);
   // A load can return in milliseconds, so the spin and "reconnecting…" hold long enough to read.

package/board/public/app-lanes.js

@@ -1,9 +1,9 @@
 // The board view's lanes and the Auto Review lane leading them: each lane's header and cards, Done's and Asks' Show more,
-// Done's finished-wave folds, and Todo's wave bands with their Implement, triage and card order.
+// Done's finished-wave folds, and Todo's wave bands with their Implement and card order.
 // Needs app-core.js and app-cards.js.
 BoardView.part((B) => {
   const { $, store, state } = B;
-  const { esc, waitOn } = BoardUI;
+  const { esc, escText, waitOn } = BoardUI;
   const LANES = [
     { id: 'review', name: 'In Review', open: true },
     { id: 'stale', name: 'Stale', open: true, hideEmpty: true },
@@ -13,13 +13,13 @@ BoardView.part((B) => {
     { id: 'asks', name: 'Asks', open: false, capped: true },
   ];
   // docs/adr/2026-11-03-0259-answered-asks-have-their-own-section-below-done.md
-  // A capped lane shows STEP cards, and each Show more tap adds STEP more, kept in memory per lane. A card the owner has
-  // open stays shown past the cap. Show more says how many are left (docs/adr/2026-10-29-1639-lists-never-cut-silently.md).
+  // A capped lane shows STEP cards, and each Show more tap adds STEP more, kept in memory per lane. A card the owner opened
+  // this visit stays shown past the cap; one open from before a reload does not (state.restored). Show more says how many are left (docs/adr/2026-10-29-1639-lists-never-cut-silently.md).
   // older is how many cards wait past `cards` in the archive; the tap that would show past `cards` fetches them first.
   const STEP = 10;
   const moreTaps = new Map();
   function cappedRows(laneId, cards, older = 0) {
-    const lastOpen = cards.findLastIndex((it) => state.openItems.has(it.key));
+    const lastOpen = cards.findLastIndex((it) => state.openItems.has(it.key) && !state.restored.has(it.key));
     const shown = Math.max(STEP * (1 + (moreTaps.get(laneId) || 0)), lastOpen + 1);
     const left = Math.max(0, cards.length - shown);
     const n = left + (older || 0);
@@ -55,11 +55,11 @@ BoardView.part((B) => {
   // A fold's open state lives in storage, not in setHTML's summary-text match, because its row's count changes.
   // Fold ids are wave:<slug> (board/domain.mjs waveFold), so any id maps to its own storage key.
   const FOLDS = new Proxy({}, { get: (_, id) => ({ store: `foldOpen:${String(id)}` }) });
-  // A fold's header reads like a lane's: its name, then its count, then an optional note.
-  function fold(id, list, name, note = '') {
+  // A fold's header reads like a lane's: its name, then its count.
+  function fold(id, list, name) {
     if (!list.length) return '';
     return `<details class="fold" data-fold="${esc(id)}" ${store.get(FOLDS[id].store, false) ? 'open' : ''}>
-        <summary><span class="lane-name">${name}</span><span class="count">${list.length}</span>${note ? `<span class="count">· ${note}</span>` : ''}</summary>
+        <summary><span class="lane-name">${name}</span><span class="count">${list.length}</span></summary>
         <div class="fold-list">${list.map((it) => B.card(it)).join('')}</div>
       </details>`;
   }
@@ -69,8 +69,7 @@ BoardView.part((B) => {
     const slugs = [...new Set(items.filter((i) => i.fold === `wave:${i.wave}`).map((i) => i.wave))];
     return slugs.map((slug) => {
       const w = d.waves.find((x) => x.slug === slug);
-      const { dropped } = w.finished;
-      return fold(`wave:${slug}`, items.filter((i) => i.fold === `wave:${slug}`), esc(w.title), dropped ? `${dropped} dropped` : '');
+      return fold(`wave:${slug}`, items.filter((i) => i.fold === `wave:${slug}`), escText(w.title));
     }).join('');
   }
 
@@ -110,7 +109,7 @@ BoardView.part((B) => {
   // Every lane but Todo groups its cards under a header per open wave (state.board.waveBands) that has cards there, in
   // band order, then the cards in no wave under No wave. A lane with no card in a wave lists its cards plainly. A header
   // counts its wave's cards in Todo, In Progress (Stale included), In Review and Done as x/y/k/z, from every lane, with
-  // the lane's own number bold in its colour and a tooltip that spells the counts out.
+  // the lane's own number bold in that lane's colour (style.css: review blue, progress orange, Todo and Done gray) and a tooltip that spells the counts out.
   // A tap on the counts opens the tooltip (countsShown, the header's lane/wave); a second tap or a tap elsewhere closes it.
   let countsShown = null;
   const COUNT_LANES = [['todo', 'in Todo'], ['progress', 'in progress'], ['review', 'in review'], ['done', 'done']];
@@ -130,7 +129,7 @@ BoardView.part((B) => {
     if (!grouped.length) return cards.map((it) => B.card(it)).join('');
     const loose = cards.filter((i) => !bands.some((b) => b.keys.includes(i.key)));
     const group = (cls, data, name, n, counts, list) => `<section class="${cls}"${data}><div class="wb-head wb-loosehead">${counts ? BoardUI.WAVE_ICON : ''}<span class="wb-label"><span class="lane-name">${name}</span> <span class="count">${n}</span></span>${counts}</div>${list.map((it) => B.card(it)).join('')}</section>`;
-    return grouped.map((b) => group('wb-lane', ` data-wave="${esc(b.slug)}"`, esc(b.title), inBand(b).length, waveCounts(b, laneId), inBand(b))).join('')
+    return grouped.map((b) => group('wb-lane', ` data-wave="${esc(b.slug)}"`, escText(b.title), inBand(b).length, waveCounts(b, laneId), inBand(b))).join('')
       + (loose.length ? group('wb-loose', '', 'No wave', loose.length, '', loose) : '');
   }
 
@@ -141,13 +140,6 @@ BoardView.part((B) => {
   // card whose ⋯ menu is open, goalShown the band whose goal popover is open.
   let menu = null;
   let goalShown = null;
-  const triaging = new Set();
-  const triageTopic = (r) => `${r.kind}:${r.slug}`;
-  function triageLink(r) {
-    if (r.triage.running || triaging.has(triageTopic(r))) return '<span class="wv-busy" role="status"><span class="try-spin" aria-hidden="true"></span>triaging…</span>';
-    if (r.triage.questions) return `<span class="muted">Triage: ${B.plural(r.triage.questions, 'open question')}</span>`;
-    return `<button type="button" class="wv-link" data-triage="${esc(triageTopic(r))}">Triage</button>`;
-  }
   const bandStore = (slug) => FOLDS[`band:${slug}`].store;
   const bandOpen = (band, first) => store.get(bandStore(band.slug), band.slug === first);
   const LANE_WORDS = { progress: 'in progress', review: 'in review', stale: 'stale' };
@@ -169,8 +161,8 @@ BoardView.part((B) => {
     const todo = cards.filter((i) => i.lane === 'todo');
     const done = cards.filter((i) => i.lane === 'done');
     const now = cards.filter((i) => LANE_WORDS[i.lane]).map((i) => `${esc(i.ref)} ${LANE_WORDS[i.lane]}`);
-    const progress = [`${band.merged} of ${band.total} merged`, ...now].join(' · ');
-    const name = `<span class="lane-name wb-name"${band.goal ? ` title="${esc(band.goal)}" data-goal="${esc(band.slug)}"` : ''}>${esc(band.title)}</span>`;
+    const progress = now.length ? ` <span class="count">· ${now.join(' · ')}</span>` : '';
+    const name = `<span class="lane-name wb-name"${band.goal ? ` title="${esc(band.goal)}" data-goal="${esc(band.slug)}"` : ''}>${escText(band.title)}</span>`;
     const notes = band.kind === 'lineup' ? `<span class="external-link"><a href="notes.html?wave=${encodeURIComponent(band.slug)}">Notes</a></span><span class="external-separator" aria-hidden="true"> · </span>` : '';
     const next = band.next;
     const go = !next ? '' : next.ready
@@ -178,8 +170,8 @@ BoardView.part((B) => {
       : `<span class="wb-next">next: ${esc(next.ref)} ${esc(next.word)}</span>`;
     const pop = goalShown === band.slug && band.goal ? `<div class="wb-pop" role="tooltip">${esc(band.goal)}</div>` : '';
     const head = `<div class="wb-head" data-band-toggle="${esc(band.slug)}" role="button" tabindex="0" aria-expanded="${open}">${BoardUI.WAVE_ICON}`
-      + `<span class="wb-label">${name} <span class="count">${todo.length}</span> <span class="count">· ${progress}</span></span>`
-      + waveCounts(band, 'todo') + `<span class="wb-end"><span class="wb-links">${notes}${triageLink(band)}</span>${go}</span>${pop}</div>`;
+      + `<span class="wb-label">${name} <span class="count">${todo.length}</span>${progress}</span>`
+      + waveCounts(band, 'todo') + `<span class="wb-end"><span class="wb-links">${notes}</span>${go}</span>${pop}</div>`;
     if (!open) return `<section class="wb" data-band="${esc(band.slug)}">${head}</section>`;
     const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#item=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
     const step = (it) => (band.kind === 'lineup' ? band.phases.findIndex((p) => p.includes(it.key)) + 1 : 0);
@@ -250,21 +242,6 @@ BoardView.part((B) => {
       } catch { BoardUI.pending.drop('todo:plan'); B.render(); B.notice('Could not send. Is the host awake?'); }
       return;
     }
-    const tb = ev.target.closest('button[data-triage]');
-    if (tb) {
-      const topic = tb.dataset.triage;
-      const row = state.board.waveBands.find((r) => triageTopic(r) === topic);
-      const asks = row.kind === 'lineup'
-        ? `Claude reads the code for ${row.title}'s unstarted cards and asks you in Needs you about splitting, merging, adding or closing any. Start?`
-        : `Claude checks ${row.title}'s unfinished cards, fixes what it can and asks you in Needs you about any that need you. Start?`;
-      if (!(await B.confirm(asks))) return;
-      triaging.add(topic);
-      B.render();
-      try { await B.send('wave-triage', { [row.kind]: row.slug }); }
-      catch { B.notice('Could not send. Is the host awake?'); }
-      finally { triaging.delete(topic); B.render(); }
-      return;
-    }
     const show = ev.target.closest('a[data-band-show]');
     if (show) {
       ev.preventDefault();

package/board/public/app-needs.js

@@ -5,12 +5,14 @@
 //   (the draft Send on the questions page sends) and a prompt's buttons answering it, Skip to the next, a dot for each thing waiting, and All open questions at its foot;
 // - from 900px, #waiting, one line each, in the pane beside the lanes, over Waiting on you mounted there
 //   (view-questions.js, embedded) while the width lasts. Waiting on you shows the questions there, so #waiting leaves out
-//   a line that only asks questions, and with nothing else left the orange section is gone. A link into those
-//   questions, wherever it sits on the board, picks its topic's pill there instead of opening the page.
+//   a line that only asks questions, and with nothing else left the orange section is gone. Every questions URL lands
+//   here at that width (shell.js go, focusQuestion), and a pill's double-click focuses its card on the board
+//   (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md).
+// Below 900px the header's ? opens Waiting on you, with the open-question count as its badge.
 // Needs app-core.js.
 BoardView.part((B) => {
   const { $, plural, state, toast } = B;
-  const { esc, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
+  const { esc, escText, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
 
   const prompts = PromptAnswers.wire(B, {
     list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
@@ -26,22 +28,33 @@ BoardView.part((B) => {
     const needs = (d.needs || []).filter((line) => !line.prompt || prompts.shows(line.prompt));
     renderList(wide.matches ? needs.filter((line) => !line.questions || line.ready || line.action) : needs);
     renderDeck(d, needs);
+    renderAsk(d);
+  }
+
+  // The header's ? below 900px, which opens Waiting on you, carries the open-question count as its badge.
+  function renderAsk(d) {
+    const open = (d.owner || []).filter((q) => q.state === 'open').length;
+    const ask = $('#questionsLink');
+    const badge = ask.querySelector('.q-badge');
+    badge.hidden = !open;
+    badge.textContent = open ? String(open) : '';
+    ask.setAttribute('aria-label', open ? `Open questions, ${open} open` : 'Open questions');
   }
 
   function renderList(needs) {
     const parts = (line) => [
       line.questions ? `<a href="${esc(line.questions.url)}">${plural(line.questions.open, 'question')}</a>` : '',
       line.ready ? `<a href="${esc(line.ready)}" target="_blank" rel="noopener">Ready on GitHub</a>` : '',
-      line.action ? `<a href="${esc(line.action.url)}">${esc(line.action.label)}</a>` : '',
+      line.action ? `<a href="${esc(line.action.url)}">${escText(line.action.label)}</a>` : '',
     ].filter(Boolean).join(' · ');
     const w = $('#waiting');
     w.hidden = needs.length === 0;
     w.innerHTML = needs.length ? `<h2 style="margin:0 0 6px">Needs you · ${needs.length}</h2>
       <ul>${needs.map((line) => (line.prompt ? promptItem(line.prompt, prompts.state(line.prompt))
-        : line.key ? `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
-          : line.review ? `<li><a href="${esc(line.url)}" data-review-open="${line.review}">${esc(line.title)}</a> <span class="muted small">· review held for you</span></li>`
-          : line.band ? `<li><a href="#" data-band-show="${esc(line.band)}">${esc(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
-          : `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">${plural(line.questions.open, 'question')}</span></li>`)).join('')}</ul>` : '';
+        : line.key ? `<li><a href="${esc(line.url)}">${escText(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
+          : line.review ? `<li><a href="${esc(line.url)}" data-review-open="${line.review}">${escText(line.title)}</a> <span class="muted small">· review held for you</span></li>`
+          : line.band ? `<li><a href="#" data-band-show="${esc(line.band)}">${escText(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
+          : `<li><a href="${esc(line.url)}">${escText(line.title)}</a> <span class="muted small">${plural(line.questions.open, 'question')}</span></li>`)).join('')}</ul>` : '';
   }
 
   // The deck's things, in Needs you order: a prompt; each open question of a line that asks some, in its topic's
@@ -64,14 +77,14 @@ BoardView.part((B) => {
         : ['Open', line.url, ''];
       const title = line.key ? line.title.slice(what.length + 1).trim() : line.title;
       return [{ id: `l:${line.key || line.review || line.band || line.url}`, what,
-        html: `<h3>${line.key ? `<a href="${esc(line.url)}">${esc(title)}</a>` : esc(title)}</h3>${line.review ? '<p class="ctx">review held for you</p>' : ''}<div class="deck-acts"><a class="button primary" href="${esc(href)}"${attrs}>${esc(label)}</a></div>` }];
+        html: `<h3>${line.key ? `<a href="${esc(line.url)}">${escText(title)}</a>` : escText(title)}</h3>${line.review ? '<p class="ctx">review held for you</p>' : ''}<div class="deck-acts"><a class="button primary" href="${esc(href)}"${attrs}>${esc(label)}</a></div>` }];
     });
   }
   const questionHtml = (q) => {
     const picked = getDraft(q.id).choice;
-    return `<h3>${esc(q.question)}</h3>${q.context ? `<p class="ctx">${esc(q.context)}</p>` : ''}
+    return `<h3>${escText(q.question)}</h3>${q.context ? `<p class="ctx">${escText(q.context)}</p>` : ''}
     ${isPrototype(q.url) ? `<a class="button deck-proto" href="${esc(q.url)}">View prototypes</a>` : ''}
-    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" class="${o.recommended ? 'rec' : ''}" aria-pressed="${o.id === picked}" data-deck-pick="${esc(o.id)}"><span class="lbl">${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}</span>${o.detail ? `<small>${esc(o.detail)}</small>` : ''}</button>`).join('')}</div>`;
+    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" class="${o.recommended ? 'rec' : ''}" aria-pressed="${o.id === picked}" data-deck-pick="${esc(o.id)}"><span class="lbl">${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}</span>${o.detail ? `<small>${escText(o.detail)}</small>` : ''}</button>`).join('')}</div>`;
   };
 
   // The thing on screen, by id, so an arrival or a repaint keeps it; once it is gone the deck shows what took its place.
@@ -88,7 +101,7 @@ BoardView.part((B) => {
     const open = (d.owner || []).filter((q) => q.state === 'open').length;
     const drafted = (d.owner || []).filter((q) => q.state === 'open' && 'choice' in getDraft(q.id)).length;
     BoardUI.setHTML(el, `<div class="deck-head"><h2>Needs you</h2><span class="deck-n">${deck.length}</span></div>
-      <div class="deck-card" data-deck="${esc(now.id)}"><p class="deck-what">${esc(now.what)}</p>${now.html}</div>
+      <div class="deck-card" data-deck="${esc(now.id)}"><p class="deck-what">${escText(now.what)}</p>${now.html}</div>
       ${deck.length > 1 ? `<div class="deck-bar"><span class="deck-dots" aria-hidden="true">${deck.map((x) => `<i${x === now ? ' class="on"' : ''}></i>`).join('')}</span><button type="button" class="ghost" data-deck-skip>Skip →</button></div>` : ''}
       ${open ? `<a class="deck-more" href="questions.html">All open questions · ${open}${drafted ? ` · ${drafted} drafted, Send there` : ''}</a>` : ''}`);
   }
@@ -121,25 +134,17 @@ BoardView.part((B) => {
     questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true }), { slot });
     questions.mount();
   }
-  // From 900px, a link into open questions for a topic the pane holds picks that topic's pill there, rather than
-  // navigating to the page. It runs before the router's listener, which skips a prevented click.
-  B.on(B.root, 'click', (ev) => {
-    if (ev.defaultPrevented || ev.button || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey || !questions) return;
-    const a = ev.target.closest?.('a[href]');
-    if (!a || (a.target && a.target !== '_self')) return;
-    const home = new URL(`${B.site.root}/`, location.href);
-    const url = new URL(a.getAttribute('href'), home);
-    if (url.pathname !== new URL('questions.html', home).pathname || url.hash.length < 2) return;
-    const id = decodeURIComponent(url.hash.slice(1));
+  // The shell's one rule for a questions URL from 900px (shell.js go): it shows the board and asks here for the question
+  // or topic id, or null for none. The pane opens its topic, resolved or not, and focuses its pill → false while there
+  // is no pane or it hasn't loaded, so the shell asks again.
+  function focusQuestion(id) {
     const topic = (state.board?.ownerTopics || []).find((t) => t.id === id || t.questions.includes(id));
-    const pill = topic && questions.slot.querySelector(`button[data-topic="${CSS.escape(topic.id)}"]`);
-    if (!pill) return;
-    ev.preventDefault();
-    pill.click();
-    const picked = questions.slot.querySelector(`button[data-topic="${CSS.escape(topic.id)}"]`);
-    picked.focus();
-    picked.scrollIntoView({ block: 'nearest' });
-  });
+    if (!questions?.B.openTopic(topic?.id ?? id)) return false;
+    const pill = questions.slot.querySelector('.topics button[aria-pressed="true"]');
+    pill?.focus();
+    pill?.scrollIntoView({ block: 'nearest' });
+    return true;
+  }
   // A double-click on a pane pill focuses its topic on the board: item:<key> is a card (an ask is one, ask:<id>),
   // wave:<slug> a band; any other topic, or one the board doesn't show, does nothing.
   B.on(B.root, 'dblclick', (ev) => {
@@ -153,5 +158,5 @@ BoardView.part((B) => {
   B.on(wide, 'change', fitPane);
   B.atUnmount(() => { questions?.unmount(); questions = null; });
 
-  Object.assign(B, { renderNeeds });
+  Object.assign(B, { renderNeeds, focusQuestion });
 });

package/board/public/app-snapshot.js

@@ -1,72 +1,41 @@
-// The last visit's board on the board view: reading and saving it, holding the controls that send until the fresh
-// board lands, flashing the lines the fresh board changed (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md), and
-// the sign on a card that changed lanes or was updated (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md).
+// The board view's saved copy: reading it from IndexedDB and saving it there with its change number
+// (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md), flashing the lines the catch-up changed, and the sign
+// on a card that changed lanes or was updated (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md).
 // Needs app-core.js and ui-snapshot.js; app.js paints it.
 BoardView.part((B) => {
   const { $$, state } = B;
-  const { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX } = BoardUI;
-  // The hub serves every site from one origin, so each board keeps its own key.
-  const KEY = 'boardSnapshot:' + B.site.url('');
-  // Every board's snapshots together stay within three at ui-snapshot.js's cap, the boards saved least recently
-  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts, which would otherwise fail to
-  // save.
-  const BUDGET = 3 * SNAPSHOT_MAX;
-  const ORDER = 'boardSnapshots';
+  const { copyOf, boardCopy, copyStore, preloadKeys, changedLines, updateSign } = BoardUI;
+  // The hub serves every site from one origin, so each board keeps its own key in the one store.
+  const KEY = B.site.url('');
   const BUILD = document.documentElement.dataset.build;
 
-  function readSnapshot() {
-    let raw = null;
-    try { raw = localStorage.getItem(KEY); } catch {}
-    return raw ? unpackSnapshot(raw, BUILD) : null;
-  }
-  // Makes room for this board's raw snapshot.
-  function keepRecent(raw) {
-    let order = [];
-    try { order = JSON.parse(localStorage.getItem(ORDER) || '[]'); } catch {}
-    const stored = [];
-    for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k?.startsWith('boardSnapshot:') && k !== KEY) stored.push(k); }
-    const recent = [...order.filter((k) => stored.includes(k)), ...stored.filter((k) => !order.includes(k))];
-    let used = raw.length;
-    const kept = [KEY];
-    for (const k of recent) {
-      const size = localStorage.getItem(k)?.length || 0;
-      if (used + size <= BUDGET) { used += size; kept.push(k); } else localStorage.removeItem(k);
-    }
-    localStorage.setItem(ORDER, JSON.stringify(kept));
-  }
+  const copies = (mode, fn) => copyStore('boards', mode, fn);
+
+  // → {savedAt, board, threads} or null. anyBuild reads a copy another build saved too, which only a board out of reach
+  // paints, guarded (app.js showDown).
+  const readCopy = ({ anyBuild = false } = {}) => boardCopy(KEY, anyBuild ? null : BUILD);
+
+  // Saves the board on screen. app.html's boot reads copyVersion before any script loads, so its first board request
+  // asks since the copy's number; it names no number when the save failed.
   let saveTimer = null;
-  function saveSnapshot() {
+  async function saveCopy() {
     saveTimer?.();
     saveTimer = null;
     if (state.view !== 'fresh' || !state.board) return;
-    const raw = packSnapshot(state.board, state.threadCache, {
-      build: BUILD,
-      savedAt: state.board.generatedAt || new Date().toISOString(),
-      keep: [...state.openItems, ...preloadKeys(state.board.items, [])],
-    });
+    const copy = copyOf(state.board, state.threadCache, { build: BUILD, savedAt: state.board.generatedAt || new Date().toISOString() });
     try {
-      if (!raw) { localStorage.removeItem(KEY); return; }
-      keepRecent(raw);
-      localStorage.setItem(KEY, raw);
-    } catch { try { localStorage.removeItem(KEY); } catch {} }
+      await copies('readwrite', (store) => store.put(copy, KEY));
+      B.store.set('copyVersion', { build: BUILD, version: copy.board.version });
+    } catch { B.store.set('copyVersion', null); }
   }
-  const saveSnapshotSoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveSnapshot); };
-  B.on(window, 'pagehide', () => { if (saveTimer) saveSnapshot(); });
-  // The app shell paints a board it comes back to from this, live when nothing changed since (shell.js).
-  B.atUnmount(saveSnapshot);
+  const saveCopySoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveCopy); };
+  B.on(window, 'pagehide', () => { if (saveTimer) saveCopy(); });
+  B.atUnmount(saveCopy);
 
-  // view is ui-snapshot.js liveControls' view; style.css dims the snapshot and its held controls from the view root's data-board.
+  // view is null until a board paints, then 'fresh'; a guarded paint that failed sets it back to null.
   function setView(view) {
     state.view = view;
-    B.root.dataset.board = view;
-  }
-  for (const type of ['click', 'submit']) {
-    B.on(B.root, type, (ev) => {
-      const { blocked } = liveControls(state.view);
-      if (!blocked) return;
-      const control = type === 'submit' ? ev.target.querySelector?.('button[type=submit]') : ev.target.closest?.(blocked);
-      if (control?.matches(blocked)) { ev.preventDefault(); ev.stopImmediatePropagation(); }
-    }, true);
+    if (view) B.root.dataset.board = view; else delete B.root.dataset.board;
   }
 
   // The lines a fresh board can change: each lane count, Needs you line and thread message. A card shows its own sign below.
@@ -79,31 +48,39 @@ BoardView.part((B) => {
   }
   const texts = (els) => Object.fromEntries([...els].map(([id, el]) => [id, el.textContent.replace(/\s+/g, ' ').trim()]));
   let before = null;
+  // The one highlight: every changed line, moved card and updated card takes the full tint of style.css .tint. Re-adding
+  // the class after a layout read restarts the animation, from the delay's point.
+  function highlight(el, elapsed = 0) {
+    el.classList.remove('tint');
+    el.style.setProperty('--sign-delay', `-${elapsed}ms`);
+    void el.offsetWidth;
+    el.classList.add('tint');
+  }
   const holdForFlash = () => { before = texts(lines()); };
   function flashChanged() {
     if (!before || state.view !== 'fresh') return;
     const els = lines();
     const after = texts(els);
     for (const id of changedLines(before, after)) {
-      els.get(id).classList.add('flash');
+      highlight(els.get(id));
       before[id] = after[id];
     }
   }
   const endFlash = () => { before = null; };
 
   // Since the page last drew it, a last visit's board included, a card that changed lanes, a work card that takes
-  // the place of a drawn New task (its fromAsk), or a work card or New task that joins Todo at the bottom, flashes once; any other card whose updateSign changed takes a brief
-  // tint on its title row. Neither shows for a change the owner sent from this page: sentHere(key, send) holds the
-  // card's next change unsigned until the first board load started after send settles.
+  // the place of a drawn New task (its fromAsk), a work card or New task that joins Todo at the bottom, or any other
+  // card whose updateSign changed takes the same tint. It does not show for a change the owner sent from this page:
+  // sentHere(key, send) holds the card's next change unsigned until the first board load started after send settles.
   let drawn = new Map();
   const ownChanges = new Map();
   async function sentHere(key, send) {
     ownChanges.set(key, Infinity);
     try { return await send(); } finally { ownChanges.set(key, B.boardLoad || 0); }
   }
-  // Each sign's style.css animation length. A lane repaint resets a card's classes, so a sign still running is put back
+  // The tint's style.css animation length. A lane repaint resets a card's classes, so a tint still running is put back
   // as far into its animation as it was.
-  const SIGNS = { flash: 1600, tint: 2400 };
+  const TINT_MS = 2400;
   const running = new Map();
   function signCards(load = null) {
     const now = Date.now();
@@ -114,19 +91,15 @@ BoardView.part((B) => {
       const updated = Boolean(was) && was.sign !== updateSign(it);
       const own = ownChanges.get(it.key);
       if (own !== undefined) { if (moved || updated || (load !== null && load > own)) ownChanges.delete(it.key); continue; }
-      if ((moved || updated) && state.view === 'fresh') running.set(it.key, { sign: moved ? 'flash' : 'tint', at: now });
+      if ((moved || updated) && state.view === 'fresh') running.set(it.key, now);
     }
     drawn = new Map(state.board.items.map((i) => [i.key, { lane: i.lane, sign: updateSign(i) }]));
-    for (const [key, { sign, at }] of running) {
-      const card = now - at < SIGNS[sign] && B.root.querySelector(`details.item[data-key="${CSS.escape(key)}"]`);
+    for (const [key, at] of running) {
+      const card = now - at < TINT_MS && B.root.querySelector(`details.item[data-key="${CSS.escape(key)}"]`);
       if (!card) { running.delete(key); continue; }
-      // Re-adding the class after a layout read restarts the animation, from the delay's point.
-      card.classList.remove('flash', 'tint');
-      card.style.setProperty('--sign-delay', `-${now - at}ms`);
-      void card.offsetWidth;
-      card.classList.add(sign);
+      highlight(card, now - at);
     }
   }
 
-  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash, sentHere, signCards });
+  Object.assign(B, { readCopy, saveCopySoon, setView, holdForFlash, flashChanged, endFlash, highlight, sentHere, signCards });
 });