@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/app-header.js

@@ -1,10 +1,11 @@
 // The board view's header and GitHub status: the time since the last change signal or refresh, refresh, the In Review
-// header's GitHub line (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md);
-// the GitHub mark's Hub links sheet and a new board's setup checklist (docs/adr/0040-one-board-registry-for-every-hub-feature.md).
-// Needs app-core.js.
+// header's GitHub line (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md);
+// the GitHub mark's Hub links sheet and a new board's setup checklist (docs/adr/2026-10-29-1639-one-board-registry-for-every-hub-feature.md);
+// and the wake: any tap on an asleep board's page, refresh included, asks the hub to resume its session
+// (docs/adr/2026-11-03-0313-boards-run-in-the-background-and-the-hub-board-in-tmux.md). Needs app-core.js.
 BoardView.part((B) => {
   const { $, state, toast } = B;
-  const { statusLine, freshSig, nextFresh, githubLine, linksList, setupCard, checkLanded, githubRefresh, headerControls } = BoardUI;
+  const { statusLine, freshSig, nextFresh, githubLine, remoteLine, linksList, setupCard, checkLanded, githubRefresh, headerControls } = BoardUI;
   // A request no check answers stops showing after this.
   const GITHUB_GIVE_UP = 5 * 60000;
 
@@ -15,14 +16,22 @@ BoardView.part((B) => {
     $('#setup').innerHTML = setupCard(d.setup);
     if ($('#linksSheet').open) $('#linksList').innerHTML = linksList(d.links);
   }
-  const renderStatus = () => { $('#status').innerHTML = statusLine(state.fresh?.at, { link: state.link, watcher: state.board?.checks?.watcher, pause: B.pause?.() }); };
+  // The status line, and the moon right of the title while the owner reads away (hub/presence.mjs ownerTracker).
+  const renderStatus = () => {
+    $('#status').innerHTML = statusLine(state.fresh?.at, { link: state.link, watcher: state.board?.checks?.watcher, pause: B.pause?.(), waking: state.waking });
+    const moon = $('.away-moon');
+    const away = Boolean(B.away?.());
+    moon.classList.toggle('on', away);
+    moon.setAttribute('aria-hidden', String(!away));
+  };
   // A board load and its open threads landed; via is ui-header.js nextFresh's.
   function landed(via) {
     state.fresh = nextFresh(state.fresh, { via, at: new Date().toISOString(), sig: freshSig(state.board, state.threadCache, state.openItems) });
     renderStatus();
   }
   B.every(15000, () => { if (!document.hidden) renderStatus(); });
-  const githubHeader = (d) => `<span class="lane-github">${githubLine(d.checks, { pending: Boolean(state.githubPending), links: d.links })}${githubRefresh(d.checks, state.githubPending)}</span>`;
+  const githubHeader = (d) => (d.remote ? `<span class="lane-github">${remoteLine(d.remote, { links: d.links })}</span>`
+    : `<span class="lane-github">${githubLine(d.checks, { pending: Boolean(state.githubPending), links: d.links })}${githubRefresh(d.checks, state.githubPending)}</span>`);
 
   // The Hub links sheet: the GitHub mark opens it, from inside the lane's summary, so the tap must not fold the lane.
   const linksSheet = $('#linksSheet');
@@ -47,7 +56,7 @@ BoardView.part((B) => {
   function askGitHub() {
     state.githubPending = Date.now();
     B.render();
-    B.site.send('check-github', {}).catch(() => { state.githubPending = null; B.render(); toast('Could not ask Claude to check GitHub'); });
+    B.send('check-github', {}).catch(() => { state.githubPending = null; B.render(); toast('Could not ask Claude to check GitHub'); });
   }
   B.on(B.root, 'click', (ev) => {
     const b = ev.target.closest('[data-check-github]');
@@ -56,6 +65,22 @@ BoardView.part((B) => {
     if (state.link === 'online' && state.board && !state.githubPending) askGitHub();
   });
 
+  // The wake: the header reads waking… from the tap until the board's reload says the hub took it up.
+  state.waking = false;
+  async function wake() {
+    state.waking = true;
+    renderStatus();
+    try {
+      const r = await fetch('/_hub/wake', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ route: B.route }) });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || `the hub answered ${r.status}`);
+      await B.loadBoard();
+    } 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(); };
+  B.on(B.root, 'click', wakeOnTap, true);
+  B.on(B.root, 'submit', wakeOnTap, true);
+
   state.link = 'online';
   const controls = { wired: false, boardSettled: false, reloading: false };
   function applyControls() {
@@ -82,7 +107,7 @@ BoardView.part((B) => {
   B.on($('.nav'), 'click', (ev) => {
     if (ev.target.closest('a[aria-disabled="true"]')) { ev.preventDefault(); ev.stopImmediatePropagation(); }
   }, true);
-  // A load can return in milliseconds, so the spin and "Reconnecting…" hold long enough to read.
+  // A load can return in milliseconds, so the spin and "reconnecting…" hold long enough to read.
   const RELOAD_MIN = 700;
   async function reloading(load) {
     controls.reloading = true;

package/board/public/app-lanes.js

@@ -1,18 +1,59 @@
-// The board view's lanes and wave filter: each lane's header and cards, the "N older" and finished-wave folds, and the wave bars.
+// 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.
 // Needs app-core.js and app-cards.js.
 BoardView.part((B) => {
   const { $, store, state } = B;
-  const { esc } = BoardUI;
+  const { esc, waitOn } = BoardUI;
   const LANES = [
     { id: 'review', name: 'In Review', open: true },
     { id: 'stale', name: 'Stale', open: true, hideEmpty: true },
     { id: 'progress', name: 'In Progress', open: true },
     { id: 'todo', name: 'Todo', open: true },
-    { id: 'done', name: 'Done', open: false },
+    { id: 'done', name: 'Done', open: false, capped: true },
+    { 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).
+  // 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 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('')
+      + (n > 0 ? `<button type="button" class="thread-more" data-lane-more="${laneId}"${fetches ? ' data-fetch' : ''}>Show more <span class="n">· ${words}</span></button>` : '');
+  }
+
+  // docs/adr/2026-11-04-0307-the-board-keeps-the-newest-100-done-cards.md
+  // Done shows the board's Done cards, then those paged in from the archive (GET /api/done), 100 a page, newest first.
+  // The board says how many the archive holds (doneArchived), so Done's count is the true total before any page is fetched.
+  const { archived } = state;
+  const olderThanBoard = (d) => Math.max(0, d.doneArchived - archived.cards.filter((c) => !d.items.some((i) => i.key === c.key)).length);
+  function doneRows(d, open) {
+    const onBoard = new Set(d.items.map((i) => i.key));
+    const cards = [...open, ...archived.cards.filter((c) => !onBoard.has(c.key))].sort((a, b) => String(b.sortAt || '').localeCompare(String(a.sortAt || '')));
+    return cappedRows('done', cards, olderThanBoard(d));
+  }
+  function doneCount(d, items) {
+    const onBoard = new Set(d.items.map((i) => i.key));
+    const older = olderThanBoard(d);
+    return `${items.length + archived.cards.filter((c) => !onBoard.has(c.key)).length + older}`;
+  }
+  async function fetchOlder() {
+    const last = archived.cards.at(-1);
+    const r = await fetch(B.site.url(`api/done${last ? `?before=${encodeURIComponent(`${last.sortAt}|${last.key}`)}` : ''}`), { cache: 'no-store' });
+    if (!r.ok) throw new Error(`done ${r.status}`);
+    const page = await r.json();
+    archived.cards.push(...page.cards);
+  }
 
   // A fold's open state lives in storage, not in setHTML's summary-text match, because its row's count changes.
-  // Fold ids are 'older', 'asks' or wave:<slug> (board/domain.mjs), so any id maps to its own storage key.
+  // 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 = '') {
@@ -33,39 +74,116 @@ BoardView.part((B) => {
     }).join('');
   }
 
-  // shown is the board's items after the wave filter and pending deletes.
+  // docs/adr/2026-11-03-1731-each-board-reviews-incoming-prs-that-touch-its-work.md: the Auto Review lane leads the lanes. The PRs
+  // the owner has open are kept in memory, as cards are.
+  const openReviews = new Set();
+  const reviewsHtml = (d) => BoardUI.reviewLane(d.reviews, {
+    open: { lane: store.get('lanes', {}).reviews, earlier: store.get(FOLDS['reviews-earlier'].store, false), cards: openReviews } });
+  // Opens PR number's review and its lane or fold, for a Needs you line or a push's #review=<number>.
+  function openReview(number) {
+    openReviews.add(number);
+    const s = store.get('lanes', {}); s.reviews = true; store.set('lanes', s);
+    if (state.board?.reviews?.earlier.some((c) => c.number === number)) store.set(FOLDS['reviews-earlier'].store, true);
+    B.render();
+    $(`[data-review="${number}"]`)?.scrollIntoView({ block: 'start' });
+  }
+
+  // shown is the board's items less pending deletes.
   function lanesHtml(d, shown) {
     const laneState = store.get('lanes', {});
-    return LANES.map((lane) => {
+    return reviewsHtml(d) + LANES.map((lane) => {
+      // Items arrive in each lane's fixed order (domain.mjs laneOrder).
       const items = shown.filter((i) => i.lane === lane.id);
       if (lane.hideEmpty && !items.length) return '';
-      const open = laneState[lane.id] ?? lane.open;
-      const older = items.filter((i) => i.fold === 'older');
-      const asks = items.filter((i) => i.fold === 'asks');
-      const rows = items.filter((i) => !i.fold).map((it) => B.card(it)).join('') + fold('asks', asks, 'Answered')
-        + waveFolds(d, items) + fold('older', older, 'Older');
-      return `<details class="lane" data-lane="${lane.id}" ${open ? 'open' : ''}>
-        <summary><span class="lane-name">${lane.name}</span><span class="count">${items.length}</span>${lane.id === 'review' ? B.githubHeader(d) : ''}</summary>
+      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);
+      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>'}
         ${lane.id === 'todo' ? BoardUI.planButton(items) : ''}</div>
       </details>`;
     }).join('');
   }
 
-  function renderWaves(d) {
-    if (d.waves.some((w) => w.finished && w.slug === state.waveFilter)) { state.waveFilter = null; store.set('wave', null); }
-    const rows = d.waves.map((w) => {
-      const items = d.items.filter((i) => i.wave === w.slug);
-      const merged = items.filter((i) => i.pr?.state === 'MERGED' || (!i.pr && i.lane === 'done')).length;
-      const drafts = items.filter((i) => i.pr?.state === 'OPEN' && i.pr.isDraft).length;
-      const review = items.filter((i) => i.pr?.state === 'OPEN' && !i.pr.isDraft).length;
-      return { w, total: items.length, merged, drafts, review };
-    }).filter((r) => r.total && !r.w.finished);
-    $('#waves').innerHTML = rows.map(({ w, total, merged, drafts, review }) => `<button class="wave ${w.slug === state.waveFilter ? 'on' : ''}" data-wave="${esc(w.slug)}">
-        <span class="wave-name">${esc(w.title)}</span>
-        <span class="muted small">${merged} of ${total} ${w.internal ? 'done' : 'merged'}${review ? ` · ${review} in review` : ''}${drafts ? ` · ${drafts} draft${drafts === 1 ? '' : 's'}` : ''}</span>
-        <span class="bar"><span style="width:${Math.round((merged / total) * 100)}%"></span></span>
-      </button>`).join('');
+  // 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
+  // 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));
+    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>` : '');
+  }
+
+  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 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>`;
+    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);
+    const actions = (it, at) => (band.kind !== 'lineup' ? null : cardMenu(band.slug, it.key, at, todo.length));
+    return `<section class="wb" data-band="${esc(band.slug)}" data-open>${head}<div class="wb-body">${doneRow}${todo.map((it, at) => B.card(it, { step: step(it), actions: actions(it, at) })).join('')}</div></section>`;
+  }
+
+  // A lineup card's ⋯ and, while open, its menu: Move up and Move down among the band's Todo cards. A move waits for
+  // the server (board/server.mjs lineup-move): the tapped move waits and the other is disabled meanwhile.
+  function cardMenu(slug, key, at, count) {
+    const shown = menu === key;
+    const item = (by, label) => {
+      const off = by < 0 ? at === 0 : at === count - 1;
+      return `<button type="button" role="menuitem" data-band-move="${by}" data-band="${esc(slug)}" data-key="${esc(key)}"${off ? ' disabled' : ''}>${label}</button>`;
+    };
+    return `<div class="ask-actions"><button type="button" class="ghost icon wb-dots" data-band-menu="${esc(key)}" aria-label="Card menu" aria-haspopup="menu" aria-expanded="${shown}">${DOTS}</button>`
+      + (shown ? `<div class="wb-menu" role="menu">${item(-1, '↑ Move up')}${item(1, '↓ Move down')}</div>` : '') + '</div>';
+  }
+
+  // Opens the band holding card key or named slug, for a #item= link or a Needs you line.
+  function openBand({ key, slug }) {
+    const band = (state.board?.waveBands || []).find((b) => b.slug === slug || b.keys.includes(key));
+    if (band) store.set(bandStore(band.slug), true);
+    return band;
   }
 
   B.on(B.root, 'toggle', (ev) => {
@@ -73,20 +191,106 @@ BoardView.part((B) => {
     if (el.matches?.('details.lane')) {
       const s = store.get('lanes', {}); s[el.dataset.lane] = el.open; store.set('lanes', s);
     } else if (el.matches?.('details.fold')) store.set(FOLDS[el.dataset.fold].store, el.open);
+    else if (el.matches?.('details.rv-card, details.rv-line')) {
+      if (el.open) openReviews.add(Number(el.dataset.review)); else openReviews.delete(Number(el.dataset.review));
+    }
   }, true);
 
   B.on(B.root, 'click', async (ev) => {
+    const answer = ev.target.closest('button[data-review-answer]');
+    if (answer) {
+      // The tapped answer waits, and the review's other answer is disabled, until the server records it.
+      const pr = Number(answer.dataset.review);
+      try { await waitOn(answer, B.send('review-answer', { pr, answer: answer.dataset.reviewAnswer }), { group: answer.parentNode.querySelectorAll('button') }); }
+      catch { B.notice('Could not send. Is the host awake?'); }
+      return;
+    }
+    const review = ev.target.closest('a[data-review-open]');
+    if (review) { ev.preventDefault(); openReview(Number(review.dataset.reviewOpen)); return; }
+    const more = ev.target.closest('[data-lane-more]');
+    if (more) {
+      if (more.hasAttribute('data-fetch')) {
+        try { await waitOn(more, fetchOlder()); } catch { B.toast('Could not load older cards. Is the host awake?'); return; }
+        if (!B.alive()) return;
+      }
+      moreTaps.set(more.dataset.laneMore, (moreTaps.get(more.dataset.laneMore) || 0) + 1);
+      B.render();
+      return;
+    }
     const pb = ev.target.closest('button[data-plan]');
     if (pb) {
-      if (!(await B.confirm('Claude groups these follow-ups into a small wave and asks you about the plan in Needs you. Nothing builds until you answer. Start?'))) return;
-      pb.disabled = true;
-      try { await B.site.send('plan-followups', { keys: pb.dataset.plan.split(' ') }); pb.textContent = 'Planning… its questions appear in Needs you'; }
-      catch { B.notice('Could not send. Is the host awake?'); pb.disabled = false; }
+      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(); }
+      return;
+    }
+    const show = ev.target.closest('a[data-band-show]');
+    if (show) {
+      ev.preventDefault();
+      if (!openBand({ slug: show.dataset.bandShow })) return;
+      const s = store.get('lanes', {}); s.todo = true; store.set('lanes', s);
+      B.render();
+      $(`.wb[data-band="${CSS.escape(show.dataset.bandShow)}"]`)?.scrollIntoView({ block: 'start' });
+    }
+  });
+
+  // A band's ⋯ menu and its moves, its head's fold and its name's goal popover. A long-press on the name (touch only;
+  // a mouse has the tooltip) opens the popover, and the click that ends the press neither folds the band nor closes it.
+  let press = null;
+  let pressed = false;
+  const endPress = () => { press?.(); press = null; };
+  B.on(B.root, 'pointerdown', (ev) => {
+    pressed = false;
+    const name = ev.target.closest?.('[data-goal]');
+    if (!name || ev.pointerType === 'mouse') return;
+    endPress();
+    press = B.later(450, () => { press = null; pressed = true; goalShown = name.dataset.goal; B.render(); });
+  });
+  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) => {
+    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]');
+    if (dots) { ev.preventDefault(); menu = menu === dots.dataset.bandMenu ? null : dots.dataset.bandMenu; B.render(); return; }
+    const mv = ev.target.closest('button[data-band-move]');
+    if (mv) {
+      ev.preventDefault();
+      if (mv.disabled) return;
+      const { band, key } = mv.dataset;
+      try { await waitOn(mv, B.send('lineup-move', { lineup: band, key, by: Number(mv.dataset.bandMove) }), { group: mv.parentNode.querySelectorAll('button') }); }
+      catch { B.toast('Could not move it. Is the host awake?'); }
+      menu = null;
+      B.render();
       return;
     }
-    const wb = ev.target.closest('button[data-wave]');
-    if (wb) { state.waveFilter = wb.dataset.wave !== state.waveFilter ? wb.dataset.wave : null; store.set('wave', state.waveFilter); B.render(); }
+    if (menu && !ev.target.closest('.wb-menu')) { menu = null; B.render(); if (ev.target.closest('summary')) { ev.preventDefault(); return; } }
+    const head = ev.target.closest('[data-band-toggle]');
+    if (head && !ev.target.closest('a, button')) {
+      const slug = head.dataset.bandToggle;
+      store.set(bandStore(slug), head.getAttribute('aria-expanded') !== 'true');
+      B.render();
+    }
+  });
+  B.on(B.root, 'keydown', (ev) => {
+    const head = ev.target.closest?.('[data-band-toggle]');
+    if (head && ev.target === head && (ev.key === 'Enter' || ev.key === ' ')) { ev.preventDefault(); head.click(); }
   });
 
-  Object.assign(B, { FOLDS, lanesHtml, renderWaves });
+  Object.assign(B, { FOLDS, lanesHtml, openReview, openBand });
 });

package/board/public/app-needs.js

@@ -23,6 +23,8 @@ BoardView.part((B) => {
     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>` : '';
   }
 

package/board/public/app-snapshot.js

@@ -1,9 +1,10 @@
 // The last visit's board on the board view: reading and saving it, holding the controls that send until the fresh
-// board lands, and flashing the lines the fresh board changed (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+// 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).
 // Needs app-core.js and ui-snapshot.js; app.js paints it.
 BoardView.part((B) => {
   const { $$, state } = B;
-  const { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, SNAPSHOT_MAX } = BoardUI;
+  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
@@ -11,11 +12,12 @@ BoardView.part((B) => {
   // otherwise fail to save.
   const BUDGET = 3 * SNAPSHOT_MAX;
   const ORDER = 'boardSnapshots';
+  const BUILD = document.documentElement.dataset.build;
 
   function readSnapshot() {
     let raw = null;
     try { raw = localStorage.getItem(KEY); } catch {}
-    return raw ? unpackSnapshot(raw) : null;
+    return raw ? unpackSnapshot(raw, BUILD) : null;
   }
   // Makes room for this board's raw snapshot.
   function keepRecent(raw) {
@@ -38,6 +40,7 @@ BoardView.part((B) => {
     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, [])],
     });
@@ -66,13 +69,9 @@ BoardView.part((B) => {
     }, true);
   }
 
-  // The lines a fresh board can change: each card line, lane count, Needs you line and thread message.
+  // The lines a fresh board can change: each lane count, Needs you line and thread message. A card shows its own sign below.
   function lines() {
     const out = new Map();
-    for (const wrap of $$('details.item[data-key] > summary .title-wrap')) {
-      const key = wrap.closest('[data-key]').dataset.key;
-      [...wrap.children].forEach((el, i) => out.set(`${key}|${i}`, el));
-    }
     for (const count of $$('.lane[data-lane] > summary .count')) out.set(`lane:${count.closest('.lane').dataset.lane}`, count);
     $$('#waiting li').forEach((li, i) => out.set(`needs:${i}`, li));
     for (const msgs of $$('[data-thread] > .msgs')) [...msgs.children].forEach((m, i) => out.set(`thread:${msgs.parentElement.dataset.thread}|${i}`, m));
@@ -86,12 +85,47 @@ BoardView.part((B) => {
     const els = lines();
     const after = texts(els);
     for (const id of changedLines(before, after)) {
-      const el = els.get(id);
-      (el.closest('details.item') || el).classList.add('flash');
+      els.get(id).classList.add('flash');
       before[id] = after[id];
     }
   }
   const endFlash = () => { before = null; };
 
-  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash });
+  // 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.
+  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
+  // as far into its animation as it was.
+  const SIGNS = { flash: 1600, tint: 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 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 });
+    }
+    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)}"]`);
+      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);
+    }
+  }
+
+  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash, sentHere, signCards });
 });

package/board/public/app-threads.js

@@ -1,16 +1,15 @@
 // A card's thread on the board view: loading and rendering it, and its reply box. Needs app-core.js.
 BoardView.part((B) => {
   const { $, store, state, toast, quieted, sendDraft, links } = B;
-  const { esc, setHTML, threadMessages, attachButton, protoButton, protoNotice, doneButton } = BoardUI;
+  const { esc, setHTML, threadMessages, attachButton, dropZone, protoButton, protoNotice, doneButton, waitOn } = BoardUI;
 
   const thread = (key) => `<div class="thread" data-thread="${esc(key)}"><div class="muted small">Loading thread…</div></div>`;
 
   // The board, not the thread, decides the Done button, so it follows each board load even when the thread is unchanged.
-  const sendingDone = new Set();
   function syncDone(el, key) {
     const send = el.querySelector('form button[type=submit]');
     if (!send) return;
-    const html = doneButton(state.board?.items.find((i) => i.key === key), sendingDone.has(key));
+    const html = doneButton(state.board?.items.find((i) => i.key === key));
     const current = el.querySelector('form [data-confirm="finish"]');
     if (current?.outerHTML === html) return;
     current?.remove();
@@ -18,10 +17,13 @@ BoardView.part((B) => {
   }
 
   // Each open card's ui-threads.js threadMessages view. Opening a card marks it seen (app-core.js markSeen) before its
-  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed.
-  const seenBefore = new Map(Object.entries(B.seen));
-  const moreTaps = new Map();
-  const firstDrawn = new Map();
+  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed. A
+  // board left and opened again in this page keeps them, so its open threads show what they showed.
+  const kept = B.place?.threads;
+  const seenBefore = new Map(kept?.seenBefore || Object.entries(B.seen));
+  const moreTaps = new Map(kept?.moreTaps);
+  const firstDrawn = new Map(kept?.firstDrawn);
+  B.keep(() => ({ threads: { seenBefore: [...seenBefore], moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
   const newestTs = (msgs) => msgs.reduce((top, m) => [String(m.ts), m.reply?.at ? String(m.reply.at) : ''].reduce((a, b) => (b > a ? b : a), top), '');
   const viewOf = (key) => ({ seenAt: seenBefore.get(key) || null, more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
   B.on(B.root, 'toggle', (ev) => {
@@ -52,13 +54,14 @@ BoardView.part((B) => {
     // The reply form is built once per card, so a refresh never drops what is being typed.
     if (!el.querySelector('.msgs')) {
       const draft = store.get('draft:' + key, '');
-      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}"><textarea rows="2" placeholder="Reply in this thread…">${esc(draft)}</textarea>
+      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="Reply in this thread…">${esc(draft)}</textarea>`)}
         <div class="pending-files" data-files></div>
         <div class="row">${attachButton()}${protoButton(key)}<button class="chip quick" type="button" data-quick="What's left?">What's left?</button><button class="primary" type="submit">Send</button></div></form>`;
       BoardAttach.paint('item:' + key, B.site.root);
     }
     syncDone(el, key);
     B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(msgs, links(key), edits, view)));
+    for (const id of edits.keys()) BoardAttach.paint('edit:' + id, B.site.root);
     B.flashChanged?.(el);
     // A thread's request is answered by a later thread line, so only a pending one changes the eye.
     const req = msgs.filter((m) => m.kind === 'prototype-request').pop();
@@ -103,10 +106,8 @@ BoardView.part((B) => {
     const b = ev.target.closest('form[data-reply] button[data-quick]');
     if (!b) return;
     const key = b.closest('form').dataset.reply;
-    b.disabled = true;
-    try { await B.site.send('item-message', { key, text: b.dataset.quick }); loadThread(key, { force: true }); }
+    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick }))); loadThread(key, { force: true }); }
     catch { toast('Could not send'); }
-    b.disabled = false;
   });
   B.on(B.root, 'click', async (ev) => {
     const b = ev.target.closest('form[data-reply] button[data-proto]');
@@ -119,17 +120,17 @@ BoardView.part((B) => {
       const n = protoNotice(pending, latest);
       if (!n.bump) { B.notice(n.text); return; }
       if (!(await B.confirm(n.text))) return;
-      try { await B.site.send('ask-bump', { id: pending }); toast('Bumped to the top'); } catch { toast('Could not bump'); }
+      await B.bumpAsk(pending, b);
       return;
     }
     if (!(await B.confirm('Ask Claude for prototypes of this item?'))) return;
-    b.disabled = true;
     try {
-      await B.site.send('prototype-request', { key });
+      await waitOn(b, B.sentHere(key, () => B.send('prototype-request', { key })));
+      b.disabled = true;
       b.title = b.ariaLabel = 'Prototypes asked for';
       toast('Asked Claude for prototypes');
       loadThread(key, { force: true });
-    } catch { b.disabled = false; toast('Could not send'); }
+    } catch { toast('Could not send'); }
   });
   B.on(B.root, 'submit', async (ev) => {
     const f = ev.target.closest('form[data-reply]');
@@ -142,14 +143,12 @@ BoardView.part((B) => {
     const files = BoardAttach.files(id, B.site.root);
     if ((!text && !files.length) || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;
-    const btn = f.querySelector('button[type=submit]'); btn.disabled = true;
     try {
-      await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.site.send('item-message', { key, text, ...(files.length ? { files } : {}) }));
+      await waitOn(f.querySelector('button[type=submit]'), sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
+        () => B.sentHere(key, () => B.send('item-message', { key, text, ...(files.length ? { files } : {}) }))));
       BoardAttach.clear(id, B.site.root);
-      btn.disabled = false;
       loadThread(f.dataset.reply, { force: true });
-    } catch { B.notice('Could not send. Is the host awake?'); btn.disabled = false; }
+    } catch { B.notice('Could not send. Is the host awake?'); }
   });
   // Send waits while a composer's files upload, the ask's included (attach.js attach-change).
   B.on(B.root, 'attach-change', (ev) => {
@@ -158,7 +157,7 @@ BoardView.part((B) => {
   });
 
   Object.assign(B, {
-    thread, renderThread, loadThread, sendingDone,
+    thread, renderThread, loadThread,
     repaintThread: (key) => { if (state.threadCache.has(key)) renderThread(key, state.threadCache.get(key)); },
     syncDone: (key) => { const el = $(`[data-thread="${CSS.escape(key)}"]`); if (el) syncDone(el, key); },
   });