@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/app-cards.js

@@ -0,0 +1,393 @@
+// Work cards on the board view: a card in a lane, its expanded detail, its action row with each button's confirmation or
+// Hold's sheet, and opening it. Needs
+// 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, heldUntilWords, holdPicker, linkText, mergeButton, buildButton, installButton, tryButton, tryWords, BUTTON, LINK_ARROW } = BoardUI;
+
+  const mainSheet = $('#mainLogSheet');
+  const mainRetry = $('#mainLogRetry');
+  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
+  let postingMain = false;
+  let followMainAfter = null;
+  let mainState = null;
+  let logRequest = 0;
+  function mainReason(text = '') {
+    $('#mainLogReason').textContent = text;
+    $('#mainLogReason').hidden = !text;
+  }
+  function closeMainLog() {
+    if (!mainSheet.open || mainSheet.classList.contains('closing')) return;
+    logRequest++;
+    if (reduceMotion.matches) { mainSheet.close(); return; }
+    mainSheet.classList.add('closing');
+    B.later(180, () => { mainSheet.classList.remove('closing'); mainSheet.close(); });
+  }
+  async function loadMainLog() {
+    const request = ++logRequest;
+    const pre = $('#mainLogLines');
+    try {
+      const response = await fetch(B.site.url('api/try/main/log'), { cache: 'no-store' });
+      const out = await response.json();
+      if (!response.ok) throw new Error(out.error || 'Could not read main’s log.');
+      if (!B.alive() || request !== logRequest || !mainSheet.open) return;
+      pre.innerHTML = out.lines.length ? out.lines.map((line) => esc(line)).join('\n') : 'No log was written.';
+      pre.scrollTop = pre.scrollHeight;
+    } catch (error) {
+      if (B.alive() && request === logRequest && mainSheet.open) mainReason(error.message || 'Could not read main’s log.');
+    }
+  }
+  function renderMainLog(main, load = null) {
+    if (!mainSheet.open || mainSheet.classList.contains('closing') || !main) return;
+    const words = tryWords(main.kind);
+    $('#mainLogTitle').textContent = `Main’s ${words.failed.toLowerCase()}`;
+    $('#mainLogSource').innerHTML = `<code>.kickflip/build</code> stopped at main@<code>${esc(main.sha)}</code> · last lines of <code>data/try/main.log</code>`;
+    // Only a load begun after the POST resolved can settle this retry.
+    const fresh = !postingMain && load !== null && (followMainAfter === null || load >= followMainAfter);
+    if (fresh) {
+      const followed = followMainAfter !== null || mainState === 'running';
+      if (main.state === 'ready' && followed) {
+        followMainAfter = null;
+        closeMainLog();
+        toast(`Main is up again at ${main.sha}.`);
+      } else if (main.state === 'failed' && followed) {
+        followMainAfter = null;
+        mainReason();
+        loadMainLog();
+      }
+      mainState = main.state;
+    }
+    const busy = postingMain || followMainAfter !== null || main.state === 'running';
+    mainRetry.disabled = busy;
+    mainRetry.setAttribute('aria-disabled', String(busy));
+    mainRetry.classList.toggle('main-log-going', busy);
+    mainRetry.innerHTML = busy ? `<span class="try-spin" aria-hidden="true"></span>${esc(words.going)}` : 'Retry';
+  }
+  B.renderMainLog = renderMainLog;
+  B.on(B.root, 'click', (ev) => {
+    if (!ev.target.closest('[data-main-log]') || !state.board?.main || mainSheet.open) return;
+    ev.preventDefault();
+    mainReason();
+    if (!postingMain) followMainAfter = null;
+    mainState = state.board.main.state;
+    mainSheet.classList.remove('closing');
+    mainSheet.showModal();
+    $('#mainLogLines').textContent = 'Loading…';
+    renderMainLog(state.board.main);
+    loadMainLog();
+  });
+  B.on($('#mainLogClose'), 'click', closeMainLog);
+  B.on(mainSheet, 'click', (ev) => { if (ev.target === mainSheet) closeMainLog(); });
+  B.on(mainSheet, 'cancel', (ev) => { ev.preventDefault(); closeMainLog(); });
+  B.on(mainRetry, 'click', async () => {
+    if (mainRetry.disabled) return;
+    postingMain = true;
+    mainReason();
+    renderMainLog(state.board.main);
+    try {
+      const response = await fetch(B.site.url('api/try'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: 'main' }) });
+      const out = await response.json();
+      if (!response.ok) throw new Error(out.error || 'The hub refused the build.');
+      if (!B.alive()) return;
+      followMainAfter = B.boardLoad + 1;
+    } catch (error) {
+      if (B.alive()) mainReason(error.message || 'Could not start. Is the host awake?');
+    } finally { postingMain = false; }
+    if (B.alive()) {
+      renderMainLog(state.board.main);
+      B.reload();
+    }
+  });
+
+  // Hold's sheet: the shared duration picker in place of a confirm, since a chip is already a deliberate tap
+  // (docs/adr/0118-a-card-can-be-held-until-a-time.md). A chip or Custom sends card-hold {key, hold: true, for}.
+  const holdSheet = $('#holdSheet');
+  let holdPicking = null;
+  const localInput = (d) => {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+  function closeHold() {
+    if (!holdSheet.open || holdSheet.classList.contains('closing')) return;
+    holdPicking = null;
+    if (reduceMotion.matches) { holdSheet.close(); return; }
+    holdSheet.classList.add('closing');
+    B.later(180, () => { holdSheet.classList.remove('closing'); holdSheet.close(); });
+  }
+  function openHold(it) {
+    $('#holdTitle').textContent = `Hold ${it.ref}`;
+    $('#holdLede').textContent = `${it.lane === 'todo' ? 'It won’t start' : 'Claude stops work on it'} until then. Forever holds it until you unhold it.`;
+    $('#holdPicker').innerHTML = holdPicker(it.key, state.board.holdChoices || []);
+    const input = $('#holdPicker [data-hold-at]');
+    const now = Date.now();
+    input.min = localInput(new Date(now + 60_000));
+    input.max = localInput(new Date(now + 30 * 86_400_000));
+    input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
+    holdSheet.classList.remove('closing');
+    holdSheet.showModal();
+    $('#holdTitle').focus({ preventScroll: true });
+  }
+  async function hold(key, choice) {
+    closeHold();
+    try { await B.sentHere(key, () => B.send('card-hold', { key, hold: true, for: choice })); }
+    catch { toast('Could not hold. Is the host awake?'); }
+  }
+  B.on($('#holdClose'), 'click', closeHold);
+  B.on(holdSheet, 'click', (ev) => {
+    if (ev.target === holdSheet) { closeHold(); return; }
+    const chip = ev.target.closest('[data-hold-for]');
+    if (chip) { hold(chip.dataset.holdFor, chip.value); return; }
+    const input = ev.target.closest('[data-hold-at]');
+    if (!input) return;
+    holdPicking = input;
+    try { input.showPicker(); } catch { /* iOS opens its wheel on the tap itself. */ }
+  });
+  B.on(holdSheet, 'cancel', (ev) => { ev.preventDefault(); closeHold(); });
+  // A chip's pointerdown comes before Custom's focusout; without this reset Custom sends first and the chip's is lost.
+  B.on(holdSheet, 'pointerdown', (ev) => {
+    if (!ev.target.closest('[data-hold-for]')) return;
+    const input = $('#holdPicker [data-hold-at]');
+    holdPicking = null;
+    if (input) input.value = input.defaultValue;
+  });
+  // Closing an opened picker accepts its suggested time; an unchanged field reached by Tab sends nothing.
+  function holdCustom(input) {
+    if (!input.value || (input !== holdPicking && input.value === input.defaultValue) || !input.checkValidity()) return;
+    const at = new Date(input.value);
+    if (Number.isNaN(at.getTime())) return;
+    holdPicking = null;
+    input.defaultValue = input.value;
+    hold(input.dataset.holdAt, at.toISOString());
+  }
+  B.on(holdSheet, 'change', (ev) => { if (ev.target.matches?.('[data-hold-at]') && document.activeElement !== ev.target) holdCustom(ev.target); });
+  B.on(holdSheet, 'focusout', (ev) => { if (ev.target.matches?.('[data-hold-at]')) holdCustom(ev.target); });
+
+  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>`]);
+    // building is an implementer at work, since Build means the package (docs/adr/0166-a-todo-cards-button-reads-implement.md).
+    if (it.status) rows.push(['Status', esc(it.status === 'building' ? 'implementing' : it.status)]);
+    // docs/adr/0156-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/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>` : '',
+      // A vscode: link opens a folder on the machine whose browser follows it, so only the host's browser gets one.
+      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>` : '',
+      it.pushed ? pushedLink(it) : '',
+    ].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>`;
+  }
+
+  const cardLink = (l) => `<a class="card-link" href="#item=${encodeURIComponent(l.key)}">${esc(l.ref)}</a>`;
+  // A card whose branch is pushed to a plain git remote has no PR to link, so its line copies the branch name
+  // (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
+  const pushedLink = (it) => `<a href="#" data-copy-branch="${esc(it.pushed.branch)}" title="Copy the branch name">${esc(pushedWords(it))}</a>`;
+  const pushedWords = (it) => [`Pushed ${it.ref}${it.pushed.host ? ` to ${it.pushed.host}` : ''}`, it.pushed.at && ago(it.pushed.at)].filter(Boolean).join(' · ');
+  B.on(B.root, 'click', (ev) => {
+    const link = ev.target.closest('[data-copy-branch]');
+    if (!link) return;
+    ev.preventDefault();
+    navigator.clipboard?.writeText(link.dataset.copyBranch).catch(() => {});
+    link.textContent = 'Copied the branch name';
+    B.later(1600, () => {
+      const it = state.board?.items.find((i) => i.pushed?.branch === link.dataset.copyBranch);
+      if (link.isConnected && it) link.textContent = pushedWords(it);
+    });
+  });
+
+  const sendingMerge = new Set();
+  const sendingBuild = new Set();
+  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}?`,
+    merge: (it, ref) => `Merge ${ref}? Claude squash-merges #${it.pr?.number} 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 ${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.`
+      : `Close ${ref}? It moves to Done and Claude stops work on it.${it.pr?.state === 'OPEN' ? ' Its PR stays open on GitHub.' : it.pushed ? ` Its branch stays on ${it.pushed.host || 'the remote'}.` : ''}`),
+  };
+
+  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, 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, sendingMerge.has(it.key))}${hold}${actionButton(it)}${tryButton(it)}${buildButton(it, sendingBuild.has(it.key))}`)}</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 among New cards takes no second bump (docs/adr/0014-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);
+  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 .card-unread');
+      const line = unread?.parentNode;
+      unread?.remove();
+      if (line && !line.children.length) line.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?'); }
+    B.reload();
+  });
+
+  // A work card's bump icon bumps it, or unbumps a bumped one, with no confirm
+  // (docs/adr/0145-build-on-a-blocked-card-queues-it.md), and the card moves at once
+  // (docs/adr/0151-every-owner-tap-the-server-can-apply-draws-at-once.md).
+  B.on(B.root, 'click', async (ev) => {
+    const b = ev.target.closest('button[data-card-bump]');
+    if (!b) return;
+    ev.preventDefault();
+    const key = b.dataset.cardBump;
+    const unbump = b.hasAttribute('data-bumped');
+    const icon = `button[data-card-bump="${CSS.escape(key)}"]`;
+    const sending = B.sentHere(key, () => B.send(unbump ? 'card-unbump' : 'card-bump', { key }, B.drawItem(key, (it) => ({ ...it, bumpedAt: unbump ? null : new Date().toISOString() }))));
+    B.fadeBump(icon, !unbump);
+    try { await sending; toast(unbump ? 'Unbumped' : 'Moved to the top'); }
+    catch { B.fadeBump(icon, unbump); toast(B.FAILED); }
+  });
+
+  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 && act === 'hold') { openHold(it); return; }
+    if (!it || !(await B.confirm(CONFIRM[act](it, it.ref)))) return;
+    if (act === 'resume') {
+      try { await B.sentHere(key, () => B.send('card-hold', { key, hold: false })); }
+      catch { toast('Could not resume. Is the host awake?'); }
+      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.sentHere(key, () => B.send('card-merge', { key })); }
+      catch { toast('Could not send. Is the host awake?'); }
+      sendingMerge.delete(key);
+      redrawActions(key);
+      return;
+    }
+    if (act === 'card-build') {
+      sendingBuild.add(key);
+      redrawActions(key);
+      try { await B.sentHere(key, () => B.send('card-build', { key })); }
+      catch { toast('Could not send. Is the host awake?'); }
+      sendingBuild.delete(key);
+      redrawActions(key);
+      return;
+    }
+    // docs/adr/0106-the-board-applies-the-owners-hold-resume-and-done-at-once.md
+    // The card closes first, or app-core.js steady would anchor it and scroll the page after it into Done.
+    if (act === 'finish') {
+      const card = $(`details.item[data-key="${CSS.escape(key)}"]`);
+      if (card) card.open = false;
+      try { await B.sentHere(key, () => (it.kind === 'ask' ? B.send('ask-done', { id: it.id }) : B.send('card-done', { key }))); }
+      catch { toast('Could not close. Is the host awake?'); }
+      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 === 'nudge') { await B.sentHere(key, () => B.send('builder-nudge', { key })); b.textContent = 'Sent'; toast('Nudge sent'); }
+      else { await B.sentHere(key, () => B.send('grill-more', { key })); B.loadThread(key, { force: true }); }
+    } catch { redrawActions(key); toast('Could not send. Is the host awake?'); }
+  });
+
+  Object.assign(B, { detail, card });
+});

package/board/public/app-core.js

@@ -0,0 +1,130 @@
+// 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;
+  };
+  // → the selector of field's box as drawn anew (an edit box from state.edits, a reply box from its draft), by its form;
+  // null for any other field.
+  function boxOf(field) {
+    const form = field.closest('form[data-reply], form[data-edit-form]');
+    return !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`;
+  }
+  // → a function finding field after a repaint: the same node, else the box drawn anew in its place.
+  function finder(field) {
+    const again = boxOf(field);
+    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);
+  }
+  // Where the owner left the board, kept for its next mount in this page: the page's scroll and the box they were typing
+  // in, as it unmounts or at their last press outside the board, such as on a sidebar row, which takes the focus first.
+  // The header's logo, which opens the sidebar, counts as outside.
+  let held = null;
+  B.on(document, 'pointerdown', (e) => {
+    const outside = !B.root.contains(e.target) || e.target.closest?.('.top a.hub');
+    held = outside ? focusedField() || held : null;
+  }, true);
+  // A board left before its first render keeps the place it hadn't returned to yet.
+  let place = B.place;
+  B.keep(() => {
+    if (place) return { y: place.y, box: place.box };
+    const field = focusedField() || (held?.isConnected ? held : null);
+    const selector = field && boxOf(field);
+    return { y: scrollY, box: selector ? { selector, selection: [field.selectionStart, field.selectionEnd, field.selectionDirection], top: field.scrollTop } : null };
+  });
+  // Only the first call restores, and none when the URL names a card (linked). A phone's keyboard would open for the
+  // focus, so only a mouse or trackpad gets the box back (sidebar.js DESKTOP).
+  function restorePlace({ linked = false } = {}) {
+    const p = place;
+    place = null;
+    if (!p || linked) return;
+    scrollTo(0, p.y);
+    const box = p.box && $(p.box.selector);
+    if (!box || box.closest('details:not([open])') || !matchMedia('(hover: hover) and (pointer: fine)').matches) return;
+    box.focus({ preventScroll: true });
+    box.setSelectionRange(...p.box.selection);
+    box.scrollTop = p.box.top;
+  }
+
+  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, restorePlace, plural, seen, markSeen, quieted, sendDraft, hide, links, svg, confirm, notice });
+});

package/board/public/app-header.js

@@ -0,0 +1,126 @@
+// 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);
+// and the wake: any tap on an asleep board's page, refresh included, asks the hub to resume its session
+// (docs/adr/0147-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, remoteLine, 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?.(), waking: state.waking }); };
+  // 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) => (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');
+  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.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();
+  });
+
+  // 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() {
+    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 });
+});