@lovek4d/kickflip 0.4.0 → 0.5.3

package/board/public/app-banner.js

@@ -1,18 +1,13 @@
-// The answer banner at the top of the board view: asks Claude answered without making work, whose answer this
-// browser hasn't seen (domain.mjs answers; docs/adr/2026-10-29-1639-every-ask-is-a-card.md). Needs app-core.js.
+// The answer banner at the top of the board view: asks Claude answered without making work, whose answer came after the
+// card's read mark (domain.mjs answers; docs/adr/2026-10-29-1639-every-ask-is-a-card.md,
+// docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md). Needs app-core.js.
 BoardView.part((B) => {
-  const { $, store, state, seen, markSeen, plural, svg } = B;
+  const { $, state, seen, markSeen, markRead, plural, svg } = B;
   const { esc } = BoardUI;
-  const DISMISSED = 'dismissedAnswers';
 
-  function unseenAnswers(d) {
-    const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
-    return (d.answers || []).filter((a) => seen[a.key] && a.at > seen[a.key] && !(dismissed[a.id] >= a.at));
-  }
+  const unseenAnswers = (d) => (d.answers || []).filter((a) => seen[a.key] && a.at > seen[a.key]);
 
   function renderBanner(d) {
-    // A New card seen before its answer counts the answer as new; one first seen in Done starts from now (app-core.js markSeen).
-    for (const it of d.items) if (it.isNew) markSeen(it, true);
     const shown = unseenAnswers(d);
     const el = $('#answers');
     el.hidden = !shown.length;
@@ -28,10 +23,9 @@ BoardView.part((B) => {
   B.on($('#answers'), 'click', (ev) => {
     const d = state.board;
     if (!d) return;
+    // ✕ marks each answer shown read, on every device.
     if (ev.target.closest('.answer-dismiss')) {
-      const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
-      for (const a of unseenAnswers(d)) dismissed[a.id] = a.at;
-      store.set(DISMISSED, dismissed);
+      markRead(unseenAnswers(d).map((a) => [a.key, a.at]));
       renderBanner(d);
       return;
     }

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>` : '',
@@ -263,13 +270,13 @@ BoardView.part((B) => {
   const CONFIRM = {
     resume: (it, ref) => `Unhold ${ref}?${it.heldUntil ? ` It's held until ${heldUntilWords(it.heldUntil)}.` : ''} It can start again once nothing blocks it.`,
     nudge: () => 'Nudge Claude to check this implementer?',
-    grill: (it, ref) => `Ask Claude for questions about ${ref}?`,
-    prototype: (it, ref) => `Ask Claude for prototypes of ${ref}?`,
-    merge: (it, ref) => (openPRs(it).length > 1
+    // docs/adr/2026-11-04-2100-a-land-waits-for-your-merge.md
+    merge: (it, ref) => (it.mergeReady ? `Merge ${ref}? The board rebases ${it.mergeReady.branch} onto ${it.mergeReady.base} as it is now, reruns the tests if  moved, and lands it.`
+      : 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 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,33 +289,37 @@ 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).
   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>`,
-    // Grill and Prototype each ask for a planner; both wait while either is under way.
-    [BUTTON.grill]: (it) => ['grill', 'prototype'].map((act) => `<button data-confirm="${act}" data-key="${esc(it.key)}"${it.grilling || it.prototyping ? ' disabled' : ''}>${act === 'grill' ? 'Grill' : 'Prototype'}</button>`).join(''),
   };
   const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
 
   // 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);
   // band {step, actions} draws the card in a wave band (app-lanes.js).
-  // Its open questions asked since this browser last opened it count as new, as its messages do.
+  // Its open questions asked since this browser last opened it are one more unread message: the thread's "N new
+  // questions" line (app-threads.js; docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
   function card(it, band = {}) {
     const unseen = (times) => (state.openItems.has(it.key) ? 0 : unreadCount(times, seen[it.key]));
+    const unread = unseen(it.othersAt) + Math.min(1, unseen(it.questions?.askedAt));
     return `<details class="item" data-key="${esc(it.key)}" ${state.openItems.has(it.key) ? 'open' : ''}>
           <summary class="work">
             <span class="status ${it.lane}"></span>
-            <div class="title-wrap">${workLines(it, { unread: unseen(it.othersAt), newQuestions: unseen(it.questions?.askedAt), top: latestBump(it), ...band })}</div>
+            <div class="title-wrap">${workLines(it, { unread, top: latestBump(it), ...band })}</div>
           </summary>
           ${state.openItems.has(it.key) ? detail(it) : ''}
         </details>`;
@@ -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,12 +462,13 @@ 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;
     // Unhold, Merge (docs/adr/2026-10-29-1752-auto-merge-is-a-board-setting-off-by-default.md), Implement and Done wait while the
     // server records them (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md).
-    const sent = { grill: ['grill-more', { key }], prototype: ['prototype-request', { key }], resume: ['card-hold', { key, hold: false }], merge: ['card-merge', { key }], 'card-build': ['card-build', { key }],
+    const sent = { resume: ['card-hold', { key, hold: false }], merge: ['card-merge', { key }], 'card-build': ['card-build', { key }],
       finish: it.kind === 'ask' ? ['ask-done', { id: it.id }] : ['card-done', { key }] }[act];
     if (sent) {
       // Done closes its card once the server answers, before the answer's board lands, or app-core.js steady would
@@ -461,16 +479,31 @@ BoardView.part((B) => {
         state.openItems.delete(key);
         store.set('openItems', [...state.openItems]);
       } : null;
-      try { await waitOn(b, B.sentHere(key, () => B.send(...sent, close))); if (act === 'grill' || act === 'prototype') B.loadThread(key, { force: true }); }
-      catch (e) { B.failed(e); }
+      // docs/adr/2026-11-04-2320-a-merge-tap-waits-its-turn-to-land.md: Merge spins until a board shows the card left
+      // In Review, or no longer merging there, which is its refusal.
+      const pend = act === 'merge' ? `${key}:merge` : null;
+      if (pend) BoardUI.pending.start(pend, (board) => { const c = board.items.find((i) => i.key === key); return !c || c.lane !== 'review' || !c.merging; });
+      try {
+        const out = await waitOn(b, B.sentHere(key, () => B.send(...sent, close)));
+        if (pend) { BoardUI.pending.answered(pend, out.board.generatedAt); B.render(); }
+      } catch (e) {
+        if (pend) { BoardUI.pending.drop(pend); B.render(); }
+        B.failed(e);
+      }
       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,32 +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;
   }
-
-  // iOS commits a pending predictive-text word after Send clears the box, which would refill it and resave the draft.
-  // So Send blurs first, and input is dropped while the send runs and for a moment after it succeeds.
-  const quiet = new Map();
-  function quieted(draftKey, ta) {
-    const until = quiet.get(draftKey) || 0;
-    if (until <= Date.now()) return false;
-    if (until !== Infinity) ta.value = '';
-    return true;
+  // [[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(() => {});
   }
-  async function sendDraft(draftKey, ta, current, send) {
-    ta.blur();
-    quiet.set(draftKey, Infinity);
-    try { await send(); } catch (e) { quiet.delete(draftKey); store.set(draftKey, (current() || ta).value); throw e; }
-    store.set(draftKey, '');
-    const now = current();
-    if (now) now.value = '';
-    quiet.set(draftKey, Date.now() + 1000);
+  // 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.
@@ -124,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, quieted, sendDraft, 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]');