@lovek4d/kickflip 0.5.0 → 0.6.0

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, Todo's Queued section, Done's and Asks' Show more,
-// Done's finished-wave folds, and Todo's wave bands with their Implement, triage and card order.
+// 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 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,19 +13,19 @@ 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);
     const words = `${n} older card${n === 1 ? '' : 's'}`;
     const fetches = older !== 0 && shown + STEP > cards.length;
-    return cards.slice(0, shown).map((it) => B.card(it)).join('')
+    return waveGroups(laneId, cards.slice(0, shown))
       + (n > 0 ? `<button type="button" class="thread-more" data-lane-more="${laneId}"${fetches ? ' data-fetch' : ''}>Show more <span class="n">· ${words}</span></button>` : '');
   }
 
@@ -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('');
   }
 
@@ -97,7 +96,7 @@ BoardView.part((B) => {
       if (lane.hideEmpty && !items.length) return '';
       const expanded = laneState[lane.id] ?? lane.open;
       const open = items.filter((i) => !i.fold);
-      const rows = lane.id === 'todo' ? todoRows(d, shown, open) : (lane.id === 'done' ? doneRows(d, open) : lane.capped ? cappedRows(lane.id, open) : open.map((it) => B.card(it)).join('')) + waveFolds(d, items);
+      const rows = lane.id === 'todo' ? todoRows(d, shown, open) : (lane.id === 'done' ? doneRows(d, open) : lane.capped ? cappedRows(lane.id, open) : waveGroups(lane.id, open)) + waveFolds(d, items);
       return `<details class="lane" data-lane="${lane.id}" ${expanded ? 'open' : ''}>
         <summary><span class="lane-name">${lane.name}</span><span class="count">${lane.id === 'done' ? doneCount(d, items) : items.length}</span>${lane.id === 'review' ? B.githubHeader(d) : ''}</summary>
         <div class="list">${rows || '<div class="empty">Nothing here.</div>'}
@@ -106,60 +105,73 @@ BoardView.part((B) => {
     }).join('');
   }
 
+  // docs/adr/2026-11-05-0215-every-lane-groups-its-cards-by-wave.md
+  // 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 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']];
+  function waveCounts(band, laneId) {
+    const lanes = state.board.items.reduce((m, i) => m.set(i.key, i.lane === 'stale' ? 'progress' : i.lane), new Map());
+    const n = COUNT_LANES.map(([id]) => band.keys.filter((k) => lanes.get(k) === id).length);
+    const here = laneId === 'stale' ? 'progress' : laneId;
+    const id = `${laneId}/${band.slug}`;
+    const spelled = COUNT_LANES.map(([, word], at) => `${n[at]} ${word}`);
+    const tip = `<span class="wb-tip" role="tooltip">${spelled.map((t) => `<div>${t}</div>`).join('')}</span>`;
+    return `<button type="button" class="wb-counts${countsShown === id ? ' open' : ''}" data-counts="${esc(id)}" aria-label="${spelled.join(', ')}">${COUNT_LANES.map(([lane], at) => `<span${lane === here ? ` class="wv-cur wv-${lane}"` : ''}>${n[at]}</span>`).join('<span aria-hidden="true">/</span>')}${tip}</button>`;
+  }
+  function waveGroups(laneId, cards) {
+    const bands = state.board.waveBands || [];
+    const inBand = (b) => cards.filter((i) => b.keys.includes(i.key));
+    const grouped = bands.filter((b) => inBand(b).length);
+    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)}"`, escText(b.title), inBand(b).length, waveCounts(b, laneId), inBand(b))).join('')
+      + (loose.length ? group('wb-loose', '', 'No wave', loose.length, '', loose) : '');
+  }
+
   // docs/adr/2026-11-03-1840-waves-are-bands-in-todo.md
-  // Todo's wave bands (domain.mjs waveBandsOf), then its cards in no wave under Not in a wave. A band's open state lives
+  // Todo's wave bands (domain.mjs waveBandsOf), then its cards in no wave under No wave. A band's open state lives
   // in storage once the owner taps its head; until then only the first band whose next card is ready (a wave file's:
   // any Todo card) starts open. A band's name shows its goal as a tooltip, or a popover on a long-press. menu is the
   // 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' };
   const DOTS = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>';
 
-  // docs/adr/2026-11-04-0150-queued-sits-at-the-top-of-todo.md
-  // Todo's Queued section, which holds the cards waiting for an implementer slot, the next to build on top, as they
-  // arrive (domain.mjs laneOrder), then its wave bands and loose cards.
-  function todoRows(d, shown, all) {
-    const queued = all.filter((i) => i.queued);
-    const head = queued.length ? `<div class="wb-loose lane-queue"><div class="wb-head wb-loosehead"><span class="lane-name">Queued</span><span class="count">${queued.length}</span></div>${queued.map((it) => B.card(it)).join('')}</div>` : '';
-    return head + bandRows(d, shown, all.filter((i) => !i.queued));
-  }
-
-  function bandRows(d, shown, todo) {
-    const bands = d.waveBands || [];
-    const byKey = new Map(shown.filter((i) => !i.queued).map((i) => [i.key, i]));
-    const banded = new Set(bands.flatMap((b) => b.keys));
+  // Todo's wave bands and loose cards, in the order they arrive (domain.mjs laneOrder).
+  function todoRows(d, shown, todo) {
+    const byKey = new Map(shown.map((i) => [i.key, i]));
+    const bands = (d.waveBands || []).filter((b) => b.keys.some((k) => byKey.get(k)?.lane === 'todo'));
+    const banded = new Set((d.waveBands || []).flatMap((b) => b.keys));
     const loose = todo.filter((i) => !banded.has(i.key));
     const first = bands.find((b) => (b.next ? b.next.ready : b.keys.some((k) => byKey.get(k)?.ready)))?.slug;
     if (!bands.length) return loose.map((it) => B.card(it)).join('');
     return bands.map((b) => bandHtml(b, b.keys.map((k) => byKey.get(k)).filter(Boolean), bandOpen(b, first))).join('')
-      + (loose.length ? `<div class="wb-loose"><div class="wb-head wb-loosehead"><span class="lane-name">Not in a wave</span><span class="count">${loose.length}</span></div>${loose.map((it) => B.card(it)).join('')}</div>` : '');
+      + (loose.length ? `<div class="wb-loose"><div class="wb-head wb-loosehead"><span class="lane-name">No wave</span><span class="count">${loose.length}</span></div>${loose.map((it) => B.card(it)).join('')}</div>` : '');
   }
 
   function bandHtml(band, cards, open) {
     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)} ${i.queued ? 'queued' : 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 notes = band.kind === 'lineup' ? `<span class="external-link"><a href="notes.html?wave=${encodeURIComponent(band.slug)}">Notes ${BoardUI.LINK_ARROW}</a></span><span class="external-separator" aria-hidden="true"> · </span>` : '';
+    const now = cards.filter((i) => LANE_WORDS[i.lane]).map((i) => `${esc(i.ref)} ${LANE_WORDS[i.lane]}`);
+    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
       ? `<button type="button" class="wv-link" data-confirm="card-build" data-key="${esc(next.key)}">Implement</button>`
       : `<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>`
-      + `<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);
@@ -220,23 +232,14 @@ BoardView.part((B) => {
     const pb = ev.target.closest('button[data-plan]');
     if (pb) {
       if (!(await B.confirm('Claude triages these Todo cards into one or more waves and asks you about them in Needs you. Nothing is implemented until you answer. Start?'))) return;
-      try { await waitOn(pb, B.send('plan-waves', { keys: pb.dataset.plan.split(' ') })); pb.textContent = 'Planning… its questions appear in Needs you'; pb.disabled = true; }
-      catch { 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(); }
+      // Spins until a board shows a grill running on one of the cards (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+      const keys = pb.dataset.plan.split(' ');
+      BoardUI.pending.start('todo:plan', (board) => board.items.some((i) => keys.includes(i.key) && i.grilling), B.stillWaiting);
+      try {
+        const out = await waitOn(pb, B.send('plan-waves', { keys }));
+        BoardUI.pending.answered('todo:plan', out.board.generatedAt);
+        B.render();
+      } catch { BoardUI.pending.drop('todo:plan'); B.render(); B.notice('Could not send. Is the host awake?'); }
       return;
     }
     const show = ev.target.closest('a[data-band-show]');
@@ -264,6 +267,12 @@ BoardView.part((B) => {
   for (const type of ['pointerup', 'pointercancel']) B.on(B.root, type, endPress);
   B.on(B.root, 'contextmenu', (ev) => { if (ev.target.closest?.('[data-goal]')) ev.preventDefault(); });
   B.on(B.root, 'click', async (ev) => {
+    const counts = ev.target.closest?.('[data-counts]');
+    if (counts || countsShown) {
+      countsShown = counts && counts.dataset.counts !== countsShown ? counts.dataset.counts : null;
+      B.render();
+      if (counts) return;
+    }
     if (pressed) { pressed = false; ev.preventDefault(); return; }
     if (goalShown) { goalShown = null; B.render(); if (ev.target.closest('.wb-head')) return; }
     const dots = ev.target.closest('button[data-band-menu]');

package/board/public/app-needs.js

@@ -1,8 +1,18 @@
-// The board view's Needs you box: one line per thing waiting on the owner (domain.mjs needsOf), led by the board
-// session's pending prompts, answered in place (prompts.js). Needs app-core.js.
+// The board view's Needs you (domain.mjs needsOf), led by the board session's pending prompts, answered in place
+// (prompts.js). It draws twice, and the stylesheet shows one by width
+// (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md):
+// - on a phone, #needsDeck at the top of the board: one thing at a time, a question's options drafting its answer on the tap
+//   (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. 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 } = 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),
@@ -11,22 +21,142 @@ BoardView.part((B) => {
     after: () => B.loadBoard(),
   });
 
+  // From 900px, the pane beside the lanes, the same width the stylesheet splits the board at.
+  const wide = matchMedia('(min-width: 900px)');
+
   function renderNeeds(d) {
+    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 needs = (d.needs || []).filter((line) => !line.prompt || prompts.shows(line.prompt));
     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
+  // order; any other line as itself. → [{id, what, html}]
+  function deckOf(d, needs) {
+    const items = d.items || [];
+    const owner = (d.owner || []).filter((q) => q.state === 'open');
+    const topicOf = (line) => line.topic || items.find((it) => it.key === line.key)?.questions?.topic || null;
+    return needs.flatMap((line) => {
+      if (line.prompt) return [{ id: `p:${line.prompt.id}`, what: 'Claude asks', html: `<ul class="deck-prompt">${promptItem(line.prompt, prompts.state(line.prompt))}</ul>` }];
+      const what = line.key ? line.title.split(':')[0] : line.title;
+      const topic = line.questions && topicOf(line);
+      const order = (d.ownerTopics || []).find((t) => t.id === topic)?.questions || [];
+      const asks = topic ? owner.filter((q) => q.topic === topic).sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id)) : [];
+      if (asks.length) return asks.map((q) => ({ id: `q:${q.id}`, what, html: questionHtml(q) }));
+      const [label, href, attrs] = line.questions ? [`Answer ${plural(line.questions.open, 'question')}`, line.questions.url, '']
+        : line.ready ? ['Ready on GitHub', line.ready, ' target="_blank" rel="noopener"']
+        : line.action ? [line.action.label, line.action.url, '']
+        : line.review ? ['Open the review', line.url, ` data-review-open="${line.review}"`]
+        : ['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)}">${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>${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>${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.
+  let showing = null;
+  let deck = [];
+  function renderDeck(d, needs) {
+    const el = $('#needsDeck');
+    const before = deck.findIndex((x) => x.id === showing);
+    deck = deckOf(d, needs);
+    el.hidden = deck.length === 0;
+    if (!deck.length) { el.innerHTML = ''; showing = null; return; }
+    const now = deck.find((x) => x.id === showing) || deck[Math.min(Math.max(before, 0), deck.length - 1)];
+    showing = now.id;
+    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">${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>` : ''}`);
+  }
+
+  B.on(B.root, 'click', (ev) => {
+    if (!ev.target.closest?.('#needsDeck')) return;
+    if (ev.target.closest('[data-deck-skip]')) {
+      const at = deck.findIndex((x) => x.id === showing);
+      showing = deck[(at + 1) % deck.length].id;
+      renderNeeds(state.board);
+      return;
+    }
+    const opt = ev.target.closest('button[data-deck-pick]');
+    if (!opt) return;
+    const id = opt.closest('[data-deck]').dataset.deck.slice(2);
+    setDraft(id, { ...getDraft(id), choice: opt.dataset.deckPick });
+    const at = deck.findIndex((x) => x.id === showing);
+    showing = deck[(at + 1) % deck.length].id;
+    renderNeeds(state.board);
+  });
+
+  // From 900px, Waiting on you in the pane under the Needs you lines, mounted while the width lasts.
+  let questions = null;
+  function fitPane() {
+    if (wide.matches === Boolean(questions)) return;
+    if (state.board) renderNeeds(state.board);
+    if (questions) { questions.unmount(); questions.slot.remove(); questions = null; return; }
+    $('#needsPane').insertAdjacentHTML('beforeend', `<div class="view-questions needs-questions">${AppViews.questions.markup({ embedded: true })}</div>`);
+    const slot = $('#needsPane .needs-questions');
+    questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true }), { slot });
+    questions.mount();
+  }
+  // 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));
+    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) => {
+    const pill = questions && ev.target.closest?.('button[data-topic]');
+    if (!pill || !questions.slot.contains(pill)) return;
+    const id = pill.dataset.topic;
+    if (id.startsWith('item:')) B.focusOnBoard({ key: id.slice(5) });
+    else if (id.startsWith('wave:')) B.focusOnBoard({ slug: id.slice(5) });
+  });
+  fitPane();
+  B.on(wide, 'change', fitPane);
+  B.atUnmount(() => { questions?.unmount(); questions = null; });
 
-  Object.assign(B, { renderNeeds });
+  Object.assign(B, { renderNeeds, focusQuestion });
 });

package/board/public/app-reader.js

@@ -1,4 +1,4 @@
-// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "Open the log →"
+// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "Open the log"
 // (ui-threads.js) and a card's or a lineup's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
 // place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
 // and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.

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 and seen marks, 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,53 +48,58 @@ 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, or a work card that takes
-  // the place of a drawn New task (its fromAsk), 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.
+  // 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), 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();
     for (const it of state.board.items) {
       const was = drawn.get(it.key);
-      const moved = was ? was.lane !== it.lane : Boolean(it.fromAsk) && drawn.has(`ask:${it.fromAsk}`);
+      const arrived = !was && drawn.size > 0 && it.lane === 'todo' && (it.isNew || (it.kind === 'work' && !it.fromAsk));
+      const moved = was ? was.lane !== it.lane : arrived || (Boolean(it.fromAsk) && drawn.has(`ask:${it.fromAsk}`));
       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 });
 });