@lovek4d/kickflip 0.5.0 → 0.5.3

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, buildButton, installButton, tryButton, tryWords, waitOn, prName, BUTTON, LINK_ARROW } = BoardUI;
+  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 mainSheet = $('#mainLogSheet');
   const mainRetry = $('#mainLogRetry');
@@ -116,20 +116,29 @@ BoardView.part((B) => {
     }
     ev.preventDefault();
     const pull = state.board?.main?.pull;
-    if (!pull || pull.running || state.mainPull.sending) return;
+    if (!pull || pull.running || BoardUI.pending.has('main:pull')) return;
     if (pull.error && !matchMedia('(hover: hover)').matches) {
       state.mainPull.open = !state.mainPull.open;
       paintMain();
       return;
     }
-    state.mainPull = { sending: true, open: false };
+    state.mainPull = { open: false };
+    // Spins until a board shows the pull running or changed (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    // A pull that brought no commits changes nothing a board shows, so its answer ends the spinner; one that did waits
+    // for Main to rebuild.
+    const mainFace = (main) => JSON.stringify([main?.pull, main?.sha, main?.state, main?.at]);
+    const before = mainFace(state.board.main);
+    BoardUI.pending.start('main:pull', (board) => mainFace(board.main) !== before, B.stillWaiting);
     paintMain();
     try {
       const response = await fetch(B.site.url('api/try/main/pull'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
       const out = await response.json();
       if (!response.ok) throw new Error(out.error || 'The hub refused the pull.');
-    } catch (error) { if (B.alive()) toast(error.message || 'Could not pull. Is the host awake?'); }
-    state.mainPull.sending = false;
+      if (out.commits) BoardUI.pending.answered('main:pull'); else BoardUI.pending.drop('main:pull');
+    } catch (error) {
+      BoardUI.pending.drop('main:pull');
+      if (B.alive()) toast(error.message || 'Could not pull. Is the host awake?');
+    }
     if (B.alive()) { paintMain(); B.reload(); }
   });
 
@@ -216,18 +225,16 @@ BoardView.part((B) => {
       }
     }
     if (it.branch) rows.push(['Branch', `<code>${esc(it.branch)}</code>`]);
-    // building is an implementer at work, since Build means the package (docs/adr/2026-11-03-1549-a-todo-cards-button-reads-implement.md).
-    if (it.status) rows.push(['Status', esc(it.status === 'building' ? 'implementing' : it.status)]);
+    rows.push(['Status', esc(BoardUI.statusWord(it))]);
     // docs/adr/2026-11-03-0526-a-follow-up-is-a-work-card-with-a-parent.md: each link row is a row of labels that open their cards.
     for (const [label, list] of [['Parent', it.parent ? [it.parent] : []], ['Children', it.children], ['Related to', it.related], ['Blocked by', it.blockedBy], ['Waits on it', it.waitsOnIt]]) {
       if (list?.length) rows.push([label, list.map(cardLink).join(' ')]);
     }
     if (it.manualSteps.length) rows.push(['Manual steps', linkText(it.manualSteps.join('; '), ctx)]);
     if (it.next) rows.push(['Next', linkText(it.next, ctx)]);
-    // docs/adr/2026-10-30-1626-notes-is-a-link-in-the-details-list.md
     const external = [
-      it.hasNotes ? `<a href="notes.html?item=${encodeURIComponent(it.key)}">Notes ${LINK_ARROW}</a>` : '',
-      // A vscode: link opens a folder on the machine whose browser follows it, so only the host's browser gets one.
+      // A vscode: link opens a folder on the machine whose browser follows it, so only the host's browser gets a live one; elsewhere it is muted, with a tooltip and a tap toast.
+      it.worktree && !state.board.onHost ? `<a aria-disabled="true" title="not on kickflip host" data-tip="not on kickflip host">Open in VS Code</a>` : '',
       it.worktree && state.board.onHost ? `<a href="vscode://file${esc(encodeURI(it.worktree))}" title="Open the worktree in VS Code">Open in VS Code ${LINK_ARROW}</a>` : '',
       installButton(it),
       pr?.state === 'OPEN' ? `<a${classes(it, BUTTON.github)} href="${esc(pr.url)}" target="_blank" rel="noopener">${pr.isDraft ? 'Review draft on GitHub' : 'Review on GitHub'} ${LINK_ARROW}</a>` : '',
@@ -269,7 +276,7 @@ BoardView.part((B) => {
       ? `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 waits in In Progress until then.`
+      ? `${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.`
       : `${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.`
@@ -282,12 +289,16 @@ BoardView.part((B) => {
   };
   const actionRow = (kind, html) => (html.trim() ? `<div class="action-row ${kind}">${html}</div>` : '');
 
+  // The reader sheet opens it (app-reader.js); docs/adr/2026-11-05-0830-notes-is-a-button-on-the-hold-row.md.
+  const notesButton = (it) => (it.hasNotes ? `<a class="button" href="notes.html?item=${encodeURIComponent(it.key)}">Notes</a>` : '');
+
   function actions(it) {
     const key = esc(it.key);
     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 ? (it.buildable ? '' : ask('resume', 'Unhold', 'unhold')) : ask('hold', 'Hold');
-    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${mergeButton(it)}${hold}${actionButton(it)}${tryButton(it)}${buildButton(it)}`)}</div>`;
+      : it.held ? ask('resume', 'Unhold', 'unhold') : ask('hold', 'Hold');
+    // 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>`;
   }
 
   // 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).
@@ -383,6 +394,7 @@ BoardView.part((B) => {
       state.openItems.add(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);
       const unread = el.querySelector('summary .card-unread');
       const line = unread?.parentNode;
       unread?.remove();
@@ -396,12 +408,6 @@ BoardView.part((B) => {
     store.set('openItems', [...state.openItems]);
   }, true);
 
-  function redrawActions(key) {
-    const it = state.board.items.find((i) => i.key === key);
-    const row = $(`.actions[data-actions="${CSS.escape(key)}"]`);
-    if (it && row) row.outerHTML = actions(it);
-  }
-
   B.on(B.root, 'click', async (ev) => {
     const log = ev.target.closest('[data-try-log]');
     if (log && state.openItems.has(log.dataset.tryLog)) {
@@ -410,6 +416,8 @@ BoardView.part((B) => {
       card?.querySelector('.thread')?.scrollIntoView({ block: 'start' });
       return;
     }
+    const off = ev.target.closest('a[data-tip]');
+    if (off) { ev.preventDefault(); toast(off.dataset.tip); return; }
     const button = ev.target.closest('button[data-try]');
     if (!button) return;
     ev.preventDefault();
@@ -417,13 +425,22 @@ BoardView.part((B) => {
     const key = button.dataset.try;
     const it = state.board.items.find((i) => i.key === key);
     if (!it || !(await B.confirm(`${tryWords(it.try?.kind).go} ${it.ref}? The hub runs its build script.`)) || !B.alive()) return;
-    // Serve / Build waits until the hub has started the build; the card's chip then says it runs.
-    const post = (async () => {
+    // Serve / Build spins until a board shows the card's build changed: running, or already done
+    // (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    const before = JSON.stringify(it.try);
+    const id = `${key}:try`;
+    BoardUI.pending.start(id, (board) => JSON.stringify(board.items.find((i) => i.key === key)?.try) !== before, B.stillWaiting);
+    B.render();
+    try {
       const r = await fetch(B.site.url('api/try'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key }) });
       const out = await r.json();
       if (!r.ok) throw new Error(out.error || 'The hub refused the build.');
-    })();
-    try { await waitOn(button, post); } catch (error) { toast(error.message || 'Could not start. Is the host awake?'); }
+      BoardUI.pending.answered(id);
+    } catch (error) {
+      BoardUI.pending.drop(id);
+      B.render();
+      toast(error.message || 'Could not start. Is the host awake?');
+    }
     B.reload();
   });
 
@@ -445,6 +462,7 @@ BoardView.part((B) => {
     if (!b) return;
     ev.preventDefault();
     const { key, confirm: act } = b.dataset;
+    if (b.classList.contains('nudging')) return;
     const it = state.board.items.find((i) => i.key === key);
     if (it && act === 'hold') { openHold(it); return; }
     if (!it || !(await B.confirm(CONFIRM[act](it, it.ref)))) return;
@@ -475,11 +493,17 @@ BoardView.part((B) => {
       if (act === 'finish') B.syncDone(key);
       return;
     }
-    // The tapped button waits and the rest of its action row is disabled until the server answers.
-    const group = { group: $(`.actions[data-actions="${CSS.escape(key)}"]`)?.querySelectorAll('button') ?? [] };
+    // A stalled line's nudge calms it to orange with a ripple, not a spinner, until a board shows the card's status line
+    // changed, the builder no longer stalled or the card gone (style.css .nudging).
+    const id = `${key}:nudge`;
+    const { progress, at } = it.builder;
+    BoardUI.pending.start(id, (board) => { const c = board.items.find((i) => i.key === key); return !c?.builder?.stalled || c.builder.progress !== progress || c.builder.at !== at; }, B.stillWaiting);
+    B.render();
     try {
-      await waitOn(b, B.sentHere(key, () => B.send('builder-nudge', { key })), group); b.disabled = true; toast('Nudge sent');
-    } catch { redrawActions(key); toast('Could not send. Is the host awake?'); }
+      const out = await B.sentHere(key, () => B.send('builder-nudge', { key }));
+      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 });

package/board/public/app-core.js

@@ -86,13 +86,31 @@ BoardView.part((B) => {
 
   const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
 
-  // A card this browser has never seen starts from now, so a first load badges nothing.
-  const seen = Object.assign(Object.create(null), store.get('seenThreads', {}));
-  const latestOf = (it) => [new Date().toISOString(), ...(it?.othersAt || [])].sort().pop();
-  function markSeen(it, onlyNew = false) {
-    if (!it || (onlyNew && seen[it.key])) return;
-    seen[it.key] = latestOf(it);
-    store.set('seenThreads', seen);
+  // Read marks live on the board, one set for every device: each card's readAt, the newest message the owner has seen
+  // on it (docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md). seen is card key → the later of the board's mark
+  // and this page's own, so a card read here reads at once, before the board comes back with it. seenBefore is an open
+  // card's mark from before it opened, where its thread's unread lines start (app-threads.js); a card closing drops it,
+  // and a board left and opened again in this page keeps it.
+  const seen = Object.create(null);
+  const seenBefore = new Map(B.place?.seenBefore);
+  B.keep(() => ({ seenBefore: [...seenBefore] }));
+  function takeMarks(items) {
+    for (const it of items) if (String(it.readAt || '') > (seen[it.key] || '')) seen[it.key] = it.readAt;
+  }
+  // [[card key, time]] → each card read up to its time, here at once and on the board for every device.
+  function markRead(pairs) {
+    const marks = Object.fromEntries(pairs.filter(([key, at]) => at && String(at) > (seen[key] || '')));
+    if (!Object.keys(marks).length) return;
+    Object.assign(seen, marks);
+    fetch(B.site.url('api/read'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ marks }) }).catch(() => {});
+  }
+  // The newest message card it shows: its counted messages (domain.mjs othersAt), its questions' asks and its answer.
+  const newestOf = (it) => [...(it.othersAt || []), ...(it.questions?.askedAt || []), it.ask?.answerAt].filter(Boolean).map(String).sort().pop();
+  // Card it, open, reads up to the newest message it shows.
+  function markSeen(it) {
+    if (!it) return;
+    if (!seenBefore.has(it.key)) seenBefore.set(it.key, seen[it.key] || null);
+    markRead([[it.key, newestOf(it)]]);
   }
 
   // The ui-links.js linkContext for text shown on item `key`'s card or thread.
@@ -105,5 +123,5 @@ BoardView.part((B) => {
   const confirm = (message, labels) => dialogs.confirm(message, { ...labels, signal: controller.signal });
   const notice = dialogs.notice;
 
-  Object.assign(B, { steady, restorePlace, plural, seen, markSeen, links, svg, confirm, notice });
+  Object.assign(B, { steady, restorePlace, plural, seen, seenBefore, takeMarks, markRead, markSeen, links, svg, confirm, notice });
 });

package/board/public/app-header.js

@@ -77,7 +77,8 @@ BoardView.part((B) => {
     } catch (e) { toast(`Couldn't wake this board's session: ${e.message}`); }
     finally { state.waking = false; if (B.alive()) renderStatus(); }
   }
-  const wakeOnTap = () => { if (state.board?.checks?.watcher === 'asleep' && !state.waking && state.link === 'online') wake(); };
+  // A shared person's tap never wakes the owner's session (shell.js .shared-view).
+  const wakeOnTap = () => { if (state.board?.checks?.watcher === 'asleep' && !state.waking && state.link === 'online' && !document.documentElement.classList.contains('shared-view')) wake(); };
   B.on(B.root, 'click', wakeOnTap, true);
   B.on(B.root, 'submit', wakeOnTap, true);
 

package/board/public/app-lanes.js

@@ -1,4 +1,4 @@
-// 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,
+// 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.
 // Needs app-core.js and app-cards.js.
 BoardView.part((B) => {
@@ -25,7 +25,7 @@ BoardView.part((B) => {
     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>` : '');
   }
 
@@ -97,7 +97,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,8 +106,36 @@ 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 its colour 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)}"`, esc(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.
@@ -125,33 +153,25 @@ BoardView.part((B) => {
   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 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 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 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>`
@@ -159,7 +179,7 @@ BoardView.part((B) => {
     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>`;
+      + waveCounts(band, 'todo') + `<span class="wb-end"><span class="wb-links">${notes}${triageLink(band)}</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,8 +240,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?'); }
+      // 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 tb = ev.target.closest('button[data-triage]');
@@ -264,6 +290,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,16 @@
-// 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. A link into those
+//   questions, wherever it sits on the board, picks its topic's pill there instead of opening the page.
+// Needs app-core.js.
 BoardView.part((B) => {
   const { $, plural, state, toast } = B;
-  const { esc, promptItem } = BoardUI;
+  const { esc, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
 
   const prompts = PromptAnswers.wire(B, {
     list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
@@ -11,13 +19,21 @@ 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);
+  }
+
+  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>` : '',
     ].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>
@@ -28,5 +44,114 @@ BoardView.part((B) => {
           : `<li><a href="${esc(line.url)}">${esc(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)}">${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>` }];
+    });
+  }
+  const questionHtml = (q) => {
+    const picked = getDraft(q.id).choice;
+    return `<h3>${esc(q.question)}</h3>${q.context ? `<p class="ctx">${esc(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>`;
+  };
+
+  // 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">${esc(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();
+  }
+  // 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));
+    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' });
+  });
+  // 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 });
 });

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

@@ -8,8 +8,8 @@ BoardView.part((B) => {
   // 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.
+  // 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 BUILD = document.documentElement.dataset.build;
@@ -91,8 +91,8 @@ BoardView.part((B) => {
   }
   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
+  // 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.
   let drawn = new Map();
@@ -109,7 +109,8 @@ BoardView.part((B) => {
     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; }