@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/app-cards.js

@@ -0,0 +1,200 @@
+// Work cards on the board view: a card in a lane, its expanded detail, its action row with each button's confirmation, and opening it. Needs
+// app-core.js and app-threads.js.
+BoardView.part((B) => {
+  const { $, store, state, markSeen, seen, toast, links } = B;
+  const { esc, REVIEW, reviewAge, unreadCount, workLines, linkText, mergeButton, installButton, tryButton, tryWords, BUTTON, LINK_ARROW } = BoardUI;
+
+  function detail(it) {
+    if (it.kind === 'ask') {
+      const button = actionButton(it);
+      return `<div class="detail">${button ? `<div class="actions" data-actions="${esc(it.key)}">${actionRow('workflow', button)}</div>` : ''}${B.thread(it.key)}</div>`;
+    }
+    const pr = it.pr;
+    const ctx = links(it.key);
+    const rows = [];
+    rows.push(['Wave', esc(it.waveTitle)]);
+    if (pr) {
+      const ci = pr.checks ? `${pr.checks.state}${pr.checks.fail ? ` (${pr.checks.fail} failing)` : pr.checks.pending ? ` (${pr.checks.pending} running)` : ''}` : 'unknown';
+      if (pr.state === 'OPEN') {
+        rows.push(['CI', esc(ci)]);
+        rows.push(['Merge', esc([pr.mergeStateStatus, pr.reviewDecision].filter(Boolean).join(' · ').toLowerCase() || 'unknown')]);
+        rows.push(['Review', (it.reviewers || []).map((r) => `${esc(r)} <span class="muted">${REVIEW[BoardUI.record(it.review, r)?.state || 'unsent'].label}${reviewAge(BoardUI.record(it.review, r)) ? `,${reviewAge(BoardUI.record(it.review, r))}` : ''}</span>`).join(' · ') || '—']);
+      }
+    }
+    if (it.branch) rows.push(['Branch', `<code>${esc(it.branch)}</code>`]);
+    if (it.status) rows.push(['Status', esc(it.status)]);
+    if (it.deps.length) rows.push(['Waits on', esc(it.deps.join(', '))]);
+    if (it.manualSteps.length) rows.push(['Manual steps', linkText(it.manualSteps.join('; '), ctx)]);
+    if (it.slack) rows.push(['Slack', `<a href="${esc(it.slack)}" target="_blank" rel="noopener">thread</a>`]);
+    if (it.from) rows.push(['Filed from', esc(it.from)]);
+    if (it.next) rows.push(['Next', linkText(it.next, ctx)]);
+    // docs/adr/0062-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>` : '',
+      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>` : '',
+    ].filter(Boolean);
+    const externalRow = external.length ? `<dt class="external-links-label">Links</dt><dd class="external-links">${external.map((html, i) => `<span class="external-link">${i ? '<span class="external-separator" aria-hidden="true"> · </span>' : ''}${html}</span>`).join('')}</dd>` : '';
+
+    return `<div class="detail">
+      <dl class="grid">${rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('')}${externalRow}</dl>
+      ${actions(it)}
+      ${B.thread(it.key)}
+    </div>`;
+  }
+
+  // docs/adr/0023-a-card-can-be-held-and-every-card-button-confirms.md
+  const sendingHold = new Map();
+  const sendingMerge = new Set();
+  const refFor = (it) => (it.kind !== 'work' || it.internal ? it.ref : it.linear?.[0]?.id || (it.pr ? `#${it.pr.number}` : it.ref));
+  const CONFIRM = {
+    hold: (it, ref) => `Hold ${ref}? ${it.lane === 'todo' ? "It won't start" : 'Claude stops work on it'} until you resume it.`,
+    resume: (it, ref) => `Resume ${ref}? It can start again once nothing blocks it.`,
+    bump: (it, ref) => `Move ${ref} to the top of its lane?`,
+    nudge: () => 'Nudge Claude to check this builder?',
+    grill: (it, ref) => `Ask Claude for questions about ${ref}?`,
+    merge: (it, ref) => `Merge ${ref}? Claude squash-merges #${it.pr?.number} if it is still approved, green and clean.`,
+    build: (it, ref) => `Build ${ref}? Claude replies with a short plan, then builds it as a draft.`,
+    finish: (it, ref) => (it.kind === 'ask' ? `Mark this task done? "${it.title}" moves to Done.`
+      : `Close ${ref}? It moves to Done and Claude stops work on it.${it.pr?.state === 'OPEN' ? ' Its PR stays open on GitHub.' : ''}`),
+  };
+
+  const classes = (it, button, base = '') => {
+    const names = [base, it.resolvedBy === button && 'resolves'].filter(Boolean).join(' ');
+    return names ? ` class="${names}"` : '';
+  };
+  const actionRow = (kind, html) => (html.trim() ? `<div class="action-row ${kind}">${html}</div>` : '');
+
+  function actions(it) {
+    const key = esc(it.key);
+    const ask = (act, label) => `<button data-confirm="${act}" data-key="${key}">${label}</button>`;
+    const holding = sendingHold.has(it.key) ? sendingHold.get(it.key) : it.holdPending;
+    const hold = it.kind !== 'work' || !it.holdable ? ''
+      : holding != null ? `<button disabled>${holding ? 'Holding…' : 'Resuming…'}</button>`
+      : it.held ? ask('resume', 'Resume') : ask('hold', 'Hold');
+    const build = it.kind === 'followup' && it.lane !== 'done' ? `<button class="build" data-confirm="build" data-key="${key}">Build</button>` : '';
+    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${build}${mergeButton(it, sendingMerge.has(it.key))}${hold}${actionButton(it)}${tryButton(it)}`)}</div>`;
+  }
+
+  // board/domain.mjs actionButtonOf picks the button and resolvedBy its colour (docs/adr/0059-an-unstarted-card-waits-on-its-questions-in-todo.md).
+  const ACTION_BUTTONS = {
+    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Open questions</a>`,
+    [BUTTON.markDone]: (it) => `<button${classes(it, BUTTON.markDone)} data-confirm="finish" data-key="${esc(it.key)}">Mark as done</button>`,
+    [BUTTON.grill]: (it) => (it.grilling ? '<button disabled>Writing questions…</button>' : `<button data-confirm="grill" data-key="${esc(it.key)}">Grill</button>`),
+  };
+  const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
+
+  // The latest bump takes no second bump: among New cards for a New card (docs/adr/0014-a-pending-ask-can-be-deleted-or-bumped.md),
+  // in its lane for any other card (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md).
+  const latestBump = (it) => Boolean(it.bumpedAt) && !state.board.items.some((i) => (it.isNew ? i.isNew : i.lane === it.lane) && (i.bumpedAt || '') > it.bumpedAt);
+  function card(it) {
+    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: state.openItems.has(it.key) ? 0 : unreadCount(it.othersAt, seen[it.key]), top: latestBump(it) })}</div>
+          </summary>
+          ${state.openItems.has(it.key) ? detail(it) : ''}
+        </details>`;
+  }
+
+  B.on(B.root, 'toggle', (ev) => {
+    const el = ev.target;
+    if (!el.matches?.('details.item')) return;
+    const key = el.dataset.key;
+    if (el.open) {
+      state.openItems.add(key);
+      const it = state.board.items.find((i) => i.key === key);
+      markSeen(it);
+      const unread = el.querySelector('summary .chip.unread');
+      const row = unread?.parentNode;
+      unread?.remove();
+      if (row && !row.children.length) row.remove();
+      if (it && !el.querySelector('.detail')) { el.insertAdjacentHTML('beforeend', detail(it)); }
+      if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
+      B.loadThread(key, { maxAge: 10000 });
+    } else {
+      state.openItems.delete(key);
+    }
+    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)) {
+      ev.preventDefault();
+      const card = log.closest('details.item');
+      card?.querySelector('.thread')?.scrollIntoView({ block: 'start' });
+      return;
+    }
+    const button = ev.target.closest('button[data-try]');
+    if (!button) return;
+    ev.preventDefault();
+    if (button.dataset.tip) { toast(button.dataset.tip); return; }
+    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;
+    button.disabled = true;
+    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.');
+    } catch (error) { toast(error.message || 'Could not start. Is the host awake?'); }
+    if (B.alive()) B.loadBoard();
+  });
+
+  B.on(B.root, 'click', async (ev) => {
+    const b = ev.target.closest('button[data-confirm]');
+    if (!b) return;
+    ev.preventDefault();
+    const { key, confirm: act } = b.dataset;
+    const it = state.board.items.find((i) => i.key === key);
+    if (!it || !(await B.confirm(CONFIRM[act](it, refFor(it))))) return;
+    if (act === 'hold' || act === 'resume') {
+      sendingHold.set(key, act === 'hold');
+      redrawActions(key);
+      try { await B.site.send('card-hold', { key, hold: act === 'hold' }); }
+      catch { toast(`Could not ${act}. Is the host awake?`); }
+      sendingHold.delete(key);
+      B.loadBoard();
+      return;
+    }
+    // docs/adr/0052-auto-merge-is-a-board-setting-off-by-default.md
+    if (act === 'merge') {
+      sendingMerge.add(key);
+      redrawActions(key);
+      try { await B.site.send('card-merge', { key }); }
+      catch { toast('Could not send. Is the host awake?'); }
+      sendingMerge.delete(key);
+      B.loadBoard();
+      return;
+    }
+    // docs/adr/0035-an-ask-can-wait-in-progress-until-the-owner-marks-it-done.md
+    if (act === 'finish') {
+      B.sendingDone.add(key);
+      B.syncDone(key);
+      try { await (it.kind === 'ask' ? B.site.send('ask-done', { id: it.id }) : B.site.send('card-done', { key })); }
+      catch { toast('Could not close. Is the host awake?'); }
+      B.sendingDone.delete(key);
+      await B.loadBoard();
+      B.syncDone(key);
+      return;
+    }
+    const row = $(`.actions[data-actions="${CSS.escape(key)}"]`);
+    row?.querySelectorAll('button').forEach((x) => { x.disabled = true; });
+    b.disabled = true;
+    try {
+      if (act === 'bump') { await B.site.send('card-bump', { key }); toast('Moved to the top'); }
+      else if (act === 'nudge') { await B.site.send('builder-nudge', { key }); b.textContent = 'Sent'; toast('Nudge sent'); }
+      else { await B.site.send(act === 'grill' ? 'grill-more' : 'build-followup', { key }); B.loadThread(key, { force: true }); }
+    } catch { toast('Could not send. Is the host awake?'); }
+    B.loadBoard();
+  });
+
+  Object.assign(B, { detail, card });
+});

package/board/public/app-core.js

@@ -0,0 +1,96 @@
+// The board view's shared helpers, which the other parts take from B. Register it first, after app.js.
+BoardView.part((B) => {
+  const { $, store, state } = B;
+
+  const focusedField = () => {
+    const a = document.activeElement;
+    return a && B.root.contains(a) && a.matches('textarea, input') ? a : null;
+  };
+  // → a function finding field after a repaint: the same node, else the box drawn anew in its place (an edit box from
+  // state.edits, a reply box from its draft), found by its form.
+  function finder(field) {
+    const form = field.closest('form[data-reply], form[data-edit-form]');
+    const again = !form ? null : form.dataset.reply != null ? `form[data-reply="${CSS.escape(form.dataset.reply)}"] textarea`
+      : `form[data-edit-form="${CSS.escape(form.dataset.editForm)}"] textarea`;
+    return () => (field.isConnected ? field : again && $(again));
+  }
+
+  // Runs paint, a repaint through ui.js setHTML, then gives the field being typed in its focus and cursor back when it
+  // lost them, which setHTML avoids for a node it moves. A card that moved into a closed lane or fold opens it, since a
+  // field there can't keep focus. Refocusing doesn't scroll: steady does.
+  function keepFocus(paint) {
+    const field = focusedField();
+    const find = field && finder(field);
+    const sel = field ? [field.selectionStart, field.selectionEnd, field.selectionDirection] : null;
+    paint();
+    const el = find?.();
+    if (!el) return;
+    for (let d = el.closest('details:not([open])'); d; d = d.closest('details:not([open])')) d.open = true;
+    if (document.activeElement === el) return;
+    el.focus({ preventScroll: true });
+    if (sel[0] != null) el.setSelectionRange(...sel);
+  }
+
+  // Runs paint through keepFocus and keeps the anchor where it was on screen, scrolling the page by however far it
+  // moved, in the same task so nothing visibly jumps (docs/adr/0063-an-open-card-moves-at-once-and-the-page-follows-it.md).
+  // The anchor is the field being typed in, else the title row of the open card on screen, else there is none. A field
+  // in a dialog doesn't move with the page, so the card anchors then.
+  function anchorOf() {
+    const field = focusedField();
+    if (field && !field.closest('dialog')) return finder(field);
+    const card = [...B.$$('details.item[open]')].find((d) => { const r = d.getBoundingClientRect(); return r.bottom > 0 && r.top < innerHeight; });
+    if (!card) return null;
+    const title = `details.item[data-key="${CSS.escape(card.dataset.key)}"] > summary`;
+    return () => $(title);
+  }
+  function steady(paint) {
+    const find = anchorOf();
+    const before = find?.()?.getBoundingClientRect().top;
+    keepFocus(paint);
+    const after = before == null ? null : find()?.getBoundingClientRect().top;
+    if (after != null && after !== before) scrollBy(0, after - before);
+  }
+  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);
+  }
+
+  // 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;
+  }
+  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);
+  }
+
+  // A deleted ask is hidden on the server, so it leaves every device (docs/adr/0008-dismissals-hide-on-the-server.md).
+  const hide = (id, hidden) => fetch(B.site.url('api/hide'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, hidden }) });
+  // The ui-links.js linkContext for text shown on item `key`'s card or thread.
+  const links = (key) => BoardUI.linkContext(state.board?.items || [], key);
+  const svg = (body, size = 20) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+
+  const dialogs = globalThis.BoardDialogs;
+  const controller = new AbortController();
+  B.atUnmount(() => controller.abort());
+  const confirm = (message, labels) => dialogs.confirm(message, { ...labels, signal: controller.signal });
+  const notice = dialogs.notice;
+
+  Object.assign(B, { steady, plural, seen, markSeen, quieted, sendDraft, hide, links, svg, confirm, notice });
+});

package/board/public/app-header.js

@@ -0,0 +1,108 @@
+// 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.
+BoardView.part((B) => {
+  const { $, state, toast } = B;
+  const { statusLine, freshSig, nextFresh, githubLine, linksList, setupCard, checkLanded, githubRefresh, headerControls } = BoardUI;
+  // A request no check answers stops showing after this.
+  const GITHUB_GIVE_UP = 5 * 60000;
+
+  function renderHeader(d) {
+    if (state.githubPending && (checkLanded(d.checks, state.githubPending) || Date.now() - state.githubPending > GITHUB_GIVE_UP)) state.githubPending = null;
+    renderStatus();
+    $('#setup').hidden = !d.setup;
+    $('#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?.() }); };
+  // 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>`;
+
+  // 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');
+  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
+  function closeLinks() {
+    if (!linksSheet.open || linksSheet.classList.contains('closing')) return;
+    if (reduceMotion.matches) { linksSheet.close(); return; }
+    linksSheet.classList.add('closing');
+    B.later(180, () => { linksSheet.classList.remove('closing'); linksSheet.close(); });
+  }
+  B.on(B.root, 'click', (ev) => {
+    if (!ev.target.closest('[data-hub-links]')) return;
+    ev.preventDefault();
+    if (!state.board || linksSheet.open) return;
+    $('#linksList').innerHTML = linksList(state.board.links);
+    linksSheet.classList.remove('closing');
+    linksSheet.showModal();
+  });
+  B.on($('#linksClose'), 'click', closeLinks);
+  B.on(linksSheet, 'click', (ev) => { if (ev.target === linksSheet) closeLinks(); });
+  B.on(linksSheet, 'cancel', (ev) => { ev.preventDefault(); closeLinks(); });
+  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.on(B.root, 'click', (ev) => {
+    const b = ev.target.closest('[data-check-github]');
+    if (!b) return;
+    ev.preventDefault();
+    if (state.link === 'online' && state.board && !state.githubPending) askGitHub();
+  });
+
+  state.link = 'online';
+  const controls = { wired: false, boardSettled: false, reloading: false };
+  function applyControls() {
+    const on = headerControls({ link: state.link, ...controls });
+    $('#refresh').disabled = !on.refresh;
+    $('#refresh').classList.toggle('spinning', on.spin);
+    const gear = $('#settingsLink');
+    if (on.settings) { gear.removeAttribute('aria-disabled'); gear.removeAttribute('tabindex'); } else { gear.setAttribute('aria-disabled', 'true'); gear.tabIndex = -1; }
+  }
+  const headerWired = () => { controls.wired = true; applyControls(); };
+  // style.css dims the offline view from .view-board.offline.
+  function setLink(link) {
+    const was = state.link;
+    state.link = link;
+    if (link !== 'reconnecting') controls.boardSettled = true;
+    const off = link !== 'online';
+    B.root.classList.toggle('offline', off);
+    if (link === 'offline' && was === 'online') toast('Offline. Use refresh in the header to retry.');
+    applyControls();
+    renderStatus();
+  }
+  const linkUp = () => setLink('online');
+  const linkDown = () => { if (state.link !== 'reconnecting') setLink('offline'); };
+  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.
+  const RELOAD_MIN = 700;
+  async function reloading(load) {
+    controls.reloading = true;
+    applyControls();
+    try { await Promise.all([load(), new Promise((r) => setTimeout(r, RELOAD_MIN))]); }
+    finally { controls.reloading = false; applyControls(); }
+  }
+  async function reconnect() {
+    setLink('reconnecting');
+    await reloading(() => B.loadBoard({ via: 'refresh' }));
+    if (state.link === 'reconnecting') setLink('offline');
+  }
+
+  // The header refresh reloads the board and its open threads; only the GitHub ↻ asks Claude to check GitHub.
+  // Offline, it retries the board load instead.
+  B.on($('#refresh'), 'click', () => {
+    if (state.link === 'offline') { reconnect(); return; }
+    reloading(() => B.loadBoard({ via: 'refresh' }));
+  });
+  B.every(5000, () => { if (state.githubPending && !document.hidden) B.loadBoard(); });
+
+  Object.assign(B, { renderHeader, renderStatus, landed, githubHeader, linkUp, linkDown, headerWired });
+});

package/board/public/app-lanes.js

@@ -0,0 +1,92 @@
+// 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.
+// Needs app-core.js and app-cards.js.
+BoardView.part((B) => {
+  const { $, store, state } = B;
+  const { esc } = 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 },
+  ];
+
+  // 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.
+  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 = '') {
+    if (!list.length) return '';
+    return `<details class="fold" data-fold="${esc(id)}" ${store.get(FOLDS[id].store, false) ? 'open' : ''}>
+        <summary><span class="lane-name">${name}</span><span class="count">${list.length}</span>${note ? `<span class="count">· ${note}</span>` : ''}</summary>
+        <div class="fold-list">${list.map((it) => B.card(it)).join('')}</div>
+      </details>`;
+  }
+
+  // One row per finished wave, newest card first, as Done's items arrive sorted.
+  function waveFolds(d, items) {
+    const slugs = [...new Set(items.filter((i) => i.fold === `wave:${i.wave}`).map((i) => i.wave))];
+    return slugs.map((slug) => {
+      const w = d.waves.find((x) => x.slug === slug);
+      const { dropped } = w.finished;
+      return fold(`wave:${slug}`, items.filter((i) => i.fold === `wave:${slug}`), esc(w.title), dropped ? `${dropped} dropped` : '');
+    }).join('');
+  }
+
+  // shown is the board's items after the wave filter and pending deletes.
+  function lanesHtml(d, shown) {
+    const laneState = store.get('lanes', {});
+    return LANES.map((lane) => {
+      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>
+        <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('');
+  }
+
+  B.on(B.root, 'toggle', (ev) => {
+    const el = ev.target;
+    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);
+  }, true);
+
+  B.on(B.root, 'click', async (ev) => {
+    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; }
+      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(); }
+  });
+
+  Object.assign(B, { FOLDS, lanesHtml, renderWaves });
+});

package/board/public/app-needs.js

@@ -0,0 +1,30 @@
+// 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.
+BoardView.part((B) => {
+  const { $, plural, state, toast } = B;
+  const { esc, promptItem } = BoardUI;
+
+  const prompts = PromptAnswers.wire(B, {
+    list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
+    paint: () => { if (state.board) renderNeeds(state.board); },
+    notify: (text) => toast(text),
+    after: () => B.loadBoard(),
+  });
+
+  function renderNeeds(d) {
+    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>
+      <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>`
+          : `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">${plural(line.questions.open, 'question')}</span></li>`)).join('')}</ul>` : '';
+  }
+
+  Object.assign(B, { renderNeeds });
+});

package/board/public/app-snapshot.js

@@ -0,0 +1,97 @@
+// 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).
+// 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;
+  // The hub serves every site from one origin, so each board keeps its own key.
+  const KEY = 'boardSnapshot:' + B.site.url('');
+  // Every board's snapshots together stay within three at ui-snapshot.js's cap, the boards saved least recently
+  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts and seen marks, which would
+  // otherwise fail to save.
+  const BUDGET = 3 * SNAPSHOT_MAX;
+  const ORDER = 'boardSnapshots';
+
+  function readSnapshot() {
+    let raw = null;
+    try { raw = localStorage.getItem(KEY); } catch {}
+    return raw ? unpackSnapshot(raw) : null;
+  }
+  // Makes room for this board's raw snapshot.
+  function keepRecent(raw) {
+    let order = [];
+    try { order = JSON.parse(localStorage.getItem(ORDER) || '[]'); } catch {}
+    const stored = [];
+    for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k?.startsWith('boardSnapshot:') && k !== KEY) stored.push(k); }
+    const recent = [...order.filter((k) => stored.includes(k)), ...stored.filter((k) => !order.includes(k))];
+    let used = raw.length;
+    const kept = [KEY];
+    for (const k of recent) {
+      const size = localStorage.getItem(k)?.length || 0;
+      if (used + size <= BUDGET) { used += size; kept.push(k); } else localStorage.removeItem(k);
+    }
+    localStorage.setItem(ORDER, JSON.stringify(kept));
+  }
+  let saveTimer = null;
+  function saveSnapshot() {
+    saveTimer?.();
+    saveTimer = null;
+    if (state.view !== 'fresh' || !state.board) return;
+    const raw = packSnapshot(state.board, state.threadCache, {
+      savedAt: state.board.generatedAt || new Date().toISOString(),
+      keep: [...state.openItems, ...preloadKeys(state.board.items, [])],
+    });
+    try {
+      if (!raw) { localStorage.removeItem(KEY); return; }
+      keepRecent(raw);
+      localStorage.setItem(KEY, raw);
+    } catch { try { localStorage.removeItem(KEY); } catch {} }
+  }
+  const saveSnapshotSoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveSnapshot); };
+  B.on(window, 'pagehide', () => { if (saveTimer) saveSnapshot(); });
+  // The app shell paints a board it comes back to from this, live when nothing changed since (shell.js).
+  B.atUnmount(saveSnapshot);
+
+  // view is ui-snapshot.js liveControls' view; style.css dims the snapshot and its held controls from the view root's data-board.
+  function setView(view) {
+    state.view = view;
+    B.root.dataset.board = view;
+  }
+  for (const type of ['click', 'submit']) {
+    B.on(B.root, type, (ev) => {
+      const { blocked } = liveControls(state.view);
+      if (!blocked) return;
+      const control = type === 'submit' ? ev.target.querySelector?.('button[type=submit]') : ev.target.closest?.(blocked);
+      if (control?.matches(blocked)) { ev.preventDefault(); ev.stopImmediatePropagation(); }
+    }, true);
+  }
+
+  // The lines a fresh board can change: each card line, lane count, Needs you line and thread message.
+  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));
+    return out;
+  }
+  const texts = (els) => Object.fromEntries([...els].map(([id, el]) => [id, el.textContent.replace(/\s+/g, ' ').trim()]));
+  let before = null;
+  const holdForFlash = () => { before = texts(lines()); };
+  function flashChanged() {
+    if (!before || state.view !== 'fresh') return;
+    const els = lines();
+    const after = texts(els);
+    for (const id of changedLines(before, after)) {
+      const el = els.get(id);
+      (el.closest('details.item') || el).classList.add('flash');
+      before[id] = after[id];
+    }
+  }
+  const endFlash = () => { before = null; };
+
+  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash });
+});