@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/ui-cards.js

@@ -1,23 +1,33 @@
-// Work card renderers: the lines and chips of a card in a lane, on the board page. Needs ui.js and ui-enums.js.
+// Work card renderers: the lines and chips of a card in a lane, on the board page. Needs ui.js, ui-enums.js and ui-phase-bars.js.
 (function () {
-  const { esc, ago, time, etaLine, workingLine, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, LINK_ARROW } = globalThis.BoardUI;
+  const { esc, ago, clock, cardTime, etaLine, workingLine, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE, LINK_ARROW, phaseBars: bars } = globalThis.BoardUI;
   const EXTERNAL = { target: '_blank', rel: 'noopener' };
-  function prChips(it) {
-    const pr = it.pr;
-    if (!pr) return '';
-    const st = pr.state === 'MERGED' ? badge('ready', 'merged') : pr.state === 'CLOSED' ? badge('danger', 'closed') : '';
-    // An open PR's chip ends with its state, marked like the reviewer and CI chips.
-    const open = pr.state === 'OPEN' ? (pr.isDraft ? { tone: 'notice', mark: ' ●', label: 'Draft' } : { tone: 'ready', mark: ' ✓', label: 'Ready for review' }) : { tone: 'normal', mark: '', label: '' };
+  // The PR badge is the one place a PR's state shows: its mark and tone, marked like the reviewer and CI chips, and its
+  // title (docs/adr/2026-11-03-1843-a-merged-card-reopens-and-its-pr-badge-shows-the-prs-state.md). A card with several PRs shows a
+  // badge for each, in its order (docs/adr/2026-11-03-1904-a-card-holds-several-prs-across-repos.md).
+  const PR_LOOK = {
+    [PR_STATE.open]: { tone: 'quiet', mark: ' ✓', label: 'Open' },
+    [PR_STATE.draft]: { tone: 'notice', mark: ' ●', label: 'Draft' },
+    [PR_STATE.merged]: { tone: 'merged', mark: ' ✓', label: 'Merged' },
+    [PR_STATE.closed]: { tone: 'danger', mark: ' ✗', label: 'Closed' },
+  };
+  // An open PR reads green only while it waits on a reviewer alone: CI passed and no reviewer asked for changes.
+  const waitsOnReviewer = (pr) => pr.checks?.state === 'pass' && pr.reviewDecision !== 'CHANGES_REQUESTED';
+  const prChips = (it) => (it.prs || []).map(prChip).join('');
+  // A PR's short name, its repo's name and number: kickflip#6.
+  const prName = (pr) => `${(pr.url.match(/github\.com\/[^/]+\/([^/]+)\//) || [])[1] || ''}#${pr.number}`;
+  function prChip(pr) {
+    const base = PR_LOOK[pr.status] || { tone: 'quiet', mark: '', label: '' };
+    const look = pr.status === PR_STATE.open && waitsOnReviewer(pr) ? { ...base, tone: 'ready', label: 'Ready for review' } : base;
     const CI = { pass: { tone: 'ready', mark: '✓' }, fail: { tone: 'danger', mark: '✗' }, pending: { tone: 'notice', mark: '●' } }[pr.checks?.state] || { tone: 'quiet', mark: '?' };
     const ci = pr.checks && pr.state === 'OPEN' ? badge(CI.tone, `CI ${CI.mark}`, { title: `CI ${pr.checks.state}` }) : '';
-    const repo = (pr.url.match(/github\.com\/[^/]+\/([^/]+)\//) || [])[1] || '';
     const codex = pr.state === 'OPEN' && pr.codexOpen ? badge('notice', `codex ${esc(pr.codexOpen)}`, { title: `${pr.codexOpen} Codex finding${pr.codexOpen === 1 ? '' : 's'} not answered yet` }) : '';
-    const name = `${repo}#${pr.number}`;
-    const label = open.label ? { title: open.label, attrs: { ...EXTERNAL, 'aria-label': `${name}: ${open.label}` } } : { attrs: EXTERNAL };
-    return `${badge(open.tone, `${esc(name)}${open.mark}`, { href: pr.url, ...label })}${st}${ci}${codex}`;
+    const name = prName(pr);
+    const label = look.label ? { title: look.label, attrs: { ...EXTERNAL, 'aria-label': `${name}: ${look.label}` } } : { attrs: EXTERNAL };
+    return `${badge(look.tone, `${esc(name)}${look.mark}`, { href: pr.url, ...label })}${ci}${codex}`;
   }
-  const linearChips = (it) => (it.linear || []).map((l) => badge('normal', esc(l.id), { href: l.url, title: `${l.id} in Linear`, attrs: EXTERNAL })).join('');
-  const ticketChip = (it) => !it.ticket ? '' : !it.ticket.url ? badge('quiet', esc(it.ticket.id), { title: `${it.ticket.id} · not from this board’s ticket source` }) : badge(it.ticket.source === 'internal' ? 'quiet' : 'normal', esc(it.ticket.id), { href: it.ticket.url, title: `${it.ticket.id}${it.ticket.source === 'internal' ? ' · this board’s own ticket' : it.ticket.source === 'github' ? ' on GitHub' : ' in Linear'}`, attrs: it.ticket.source === 'internal' ? {} : EXTERNAL });
+  const linearChips = (it) => (it.linear || []).map((l) => badge('quiet', esc(l.id), { href: l.url, title: `${l.id} in Linear`, attrs: EXTERNAL })).join('');
+  const ticketChip = (it) => !it.ticket ? '' : !it.ticket.url ? badge('quiet', esc(it.ticket.id), { title: `${it.ticket.id} · not from this board’s ticket source` }) : badge('quiet', esc(it.ticket.id), { href: it.ticket.url, title: `${it.ticket.id}${it.ticket.source === 'internal' ? ' · this board’s own ticket' : it.ticket.source === 'github' ? ' on GitHub' : ' in Linear'}`, attrs: it.ticket.source === 'internal' ? {} : EXTERNAL });
   const REVIEW = {
     approved: { tone: 'ready', mark: '✓', label: 'approved' },
     changes: { tone: 'danger', mark: '✗', label: 'asked for changes' },
@@ -33,36 +43,44 @@
     return (it.reviewers || []).map((r) => {
       const rv = globalThis.BoardUI.record(it.review, r);
       const s = REVIEW[rv?.state || 'unsent'];
-      return badge(s.tone, `${esc(r[0])} ${s.mark}${reviewAge(rv)}`, { title: `${r}: ${s.label}` });
+      const age = reviewAge(rv).trim();
+      return badge(s.tone, `${esc(rv?.github || r)}${age ? ` (${age})` : ''} ${s.mark}`, { title: `${r}${rv?.github ? ` (${rv.github})` : ''}: ${s.label}` });
     }).join('');
   }
   const pendingQuestions = (it) => (it.questions && it.questions.state !== 'resolved' ? it.questions.open + it.questions.answered + it.questions.replied : 0);
-  // docs/adr/0045-the-lane-follows-who-acts-next.md
-  function actionChip(it) {
+  // docs/adr/2026-10-29-1639-the-lane-follows-who-acts-next.md
+  // Action needed, last of the time line's orange words, linking to what the owner acts on
+  // (docs/adr/2026-11-03-0301-build-on-a-blocked-card-queues-it.md).
+  function actionWords(it) {
     if (!it.action) return '';
-    const external = it.action.kind === ACTION_KIND.ready ? EXTERNAL : {};
-    return badge('notice', 'Action needed', { href: it.action.url, title: it.action.label, attrs: { ...external, 'aria-label': `Action needed: ${it.action.label}` } });
+    const external = it.action.kind === ACTION_KIND.ready ? Object.entries(EXTERNAL).map(([k, v]) => ` ${k}="${esc(v)}"`).join('') : '';
+    return `<a class="card-action" href="${esc(it.action.url)}" title="${esc(it.action.label)}" aria-label="${esc(`Action needed: ${it.action.label}`)}"${external}>Action needed</a>`;
+  }
+  // Each unfinished dep, linking to its card: "blocked by #53, #54".
+  function blockedWords(it) {
+    const deps = it.blockedBy || [];
+    return deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
   }
   const tryWords = (kind) => kind === 'app' ? {
-    go: 'Build', going: 'Building…', done: 'Install', failed: 'Build failed',
-    none: 'No changes to build: this card’s branch matches main.',
+    go: 'Build', going: 'building…', done: 'Install', failed: 'build failed',
     current: 'Nothing new to build: Install already has this card’s latest push.',
     busy: 'Building now. The badge turns back into Install when the new build is ready.',
-    autoSub: 'On: the hub builds each card after each push. Off: a card waits for your Build. Main builds again after every merge either way.',
+    autoSub: 'The hub builds each card after each push, and main after each merge.',
     saved: (on) => on ? 'Saved. Each push builds its card.' : 'Saved. Cards wait for your Build.',
   } : {
-    go: 'Serve', going: 'Serving…', done: 'Visit', failed: 'Serve failed',
-    none: 'No changes to serve: this card’s branch matches main.',
+    go: 'Serve', going: 'serving…', done: 'Visit', failed: 'serve failed',
     current: 'Nothing new to serve: Visit already shows this card’s latest push.',
     busy: 'Serving now. The badge turns back into Visit when the new server is up.',
-    autoSub: 'On: the hub serves each card after each push. Off: a card waits for your Serve. Main serves again after every merge either way.',
+    autoSub: 'The hub serves each card after each push, and main after each merge.',
     saved: (on) => on ? 'Saved. Each push serves its card.' : 'Saved. Cards wait for your Serve.',
   };
   const spinner = '<span class="try-spin" aria-hidden="true"></span>';
+  const tryURL = (run) => run.kind === 'web' ? run.port ? `https://${location.hostname}:${run.port}/` : null : run.url;
   function tryOf(it) {
     if (it.lane === 'done') return null;
     const t = it.try || (it.install ? { kind: 'app', state: 'ready', stale: it.install.older, sha: it.install.sha, url: it.install.url } : null);
-    return it.builder?.kind === BUILDER_KIND.install ? { ...t, kind: t?.kind || 'app', state: 'running' } : t;
+    const run = t ? { ...t, url: tryURL(t) } : null;
+    return it.builder?.kind === BUILDER_KIND.install ? { ...run, kind: run?.kind || 'app', state: 'running' } : run;
   }
   function installState(it) {
     const t = tryOf(it);
@@ -87,67 +105,219 @@
     const tag = s.href ? 'a' : 'span';
     return `<${tag} class="install tone-${s.tone}"${attrs}>${s.html}</${tag}>`;
   }
+  // A card's Serve / Build, only while the board's Auto-build is off and its branch has changes
+  // (docs/adr/2026-11-02-1806-only-the-owner-or-auto-build-starts-a-card-run.md).
   function tryButton(it) {
     const t = tryOf(it);
-    if (it.kind !== 'work' || !t?.script) return '';
+    if (it.kind !== 'work' || !t?.script || t.autoBuild || !t.changes) return '';
     const words = tryWords(t.kind);
-    const reason = !t.changes ? words.none : t.state === 'running' ? words.busy : t.state === 'ready' && !t.stale ? words.current : '';
+    const reason = t.state === 'running' ? words.busy : t.state === 'ready' && !t.stale ? words.current : '';
     return `<button type="button" data-try="${esc(it.key)}"${reason ? ` aria-disabled="true" title="${esc(reason)}" data-tip="${esc(reason)}"` : ''}>${t.state === 'failed' && !reason ? 'Retry' : words.go}</button>`;
   }
   const BRANCH = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 4-6 3-11 6"/></svg>';
-  function mainBar(main) {
+  // Main's refresh icon on a local board (docs/adr/2026-11-03-1914-a-local-boards-main-pulls-from-origin-on-its-own.md),
+  // the header's refresh icon as a ghost button right of the timestamp: it spins while a pull runs or a tap waits on the
+  // server, and turns red when the last pull failed, with the reason as a tooltip on hover or a popover a tap opens
+  // (`open`). Visit is left alone: it changes only once Main rebuilds.
+  function mainPull(pull, { sending = false, open = false } = {}) {
+    if (!pull) return '';
+    const busy = pull.running || sending;
+    const failed = !busy && pull.error;
+    const label = busy ? 'Pulling main' : failed ? pull.error : 'Pull main now';
+    const why = failed ? `<span class="main-pull-why${open ? ' open' : ''}" role="tooltip">${esc(pull.error)}</span>` : '';
+    return `<span class="main-pull"><button class="ghost gh-refresh${busy ? ' spinning' : ''}${failed ? ' failed' : ''}" type="button" data-main-pull aria-label="${esc(label)}"${busy ? ' aria-disabled="true"' : ''}>${BoardUI.refreshIcon(14)}</button>${why}</span>`;
+  }
+  function mainBar(main, pulling) {
     if (!main) return '';
     const words = tryWords(main.kind);
+    const url = tryURL(main);
     const chip = main.state === 'running' ? badge('notice', spinner + esc(words.going), { attrs: { role: 'status' } })
-      : main.state === 'failed' ? badge('danger', esc(words.failed), { title: 'The build script stopped with an error. Its log is data/try/main.log in the board’s folder.' })
-      : main.state === 'ready' && main.url ? badge('ready', `${words.done} ${LINK_ARROW}`, { href: main.url, attrs: main.kind === 'web' ? EXTERNAL : {} }) : '';
-    return `<div class="tb-main" role="region" aria-label="Main’s version">${BRANCH}<div class="tb-main-text">${esc(main.slug)} · <strong>${esc(main.branch)}</strong>@<code>${esc(main.sha)}</code> · ${esc(ago(main.at))}</div><div class="meta">${chip}</div></div>`;
+      : main.state === 'failed' ? badge('danger', esc(words.failed), { button: true, attrs: { type: 'button', 'data-main-log': '', 'aria-haspopup': 'dialog' }, title: 'Read main’s build log and retry this tip.' })
+      : main.state === 'ready' && url ? badge('ready', `${words.done} ${LINK_ARROW}`, { href: url, attrs: main.kind === 'web' ? EXTERNAL : {} }) : '';
+    return `<div class="tb-main" role="region" aria-label="Main’s version">${BRANCH}<div class="tb-main-text">${esc(main.slug)} · <strong>${esc(main.branch)}</strong>@<code>${esc(main.sha)}</code> · ${esc(ago(main.at))}${mainPull(main.pull, pulling)}</div><div class="meta">${chip}</div></div>`;
   }
-  // The open card's Merge, while the board's auto-merge is off: it confirms, then sends card-merge, and reads "Merging…"
-  // while it is sent or waits on the session (docs/adr/0052-auto-merge-is-a-board-setting-off-by-default.md).
-  function mergeButton(it, sending = false) {
+  // The open card's Merge, while the board's auto-merge is off: it confirms, then sends card-merge, waiting while the
+  // server records it (app-cards.js), and waits (ui.js BUSY) while the session merges it
+  // (docs/adr/2026-10-29-1752-auto-merge-is-a-board-setting-off-by-default.md).
+  function mergeButton(it) {
     if (it?.action?.kind !== ACTION_KIND.merge && !it?.merging) return '';
-    const merging = sending || it.merging;
-    return `<button class="${it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${merging ? ' disabled' : ''}>${merging ? 'Merging…' : 'Merge'}</button>`;
-  }
-  const builderLine = (b) => [b.progress || 'Building', b.at && ago(b.at)].filter(Boolean).join(' · ');
-  const stalledChip = (it) => it.lane !== 'done' && it.builder?.stalled ? badge('danger', 'Stalled', {
-    button: true, title: 'No recent progress. Nudge Claude to check this builder',
-    attrs: { type: 'button', 'data-confirm': 'nudge', 'data-key': it.key },
-  }) : '';
+    return `<button class="${it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${it.merging ? BoardUI.BUSY : ''}>Merge</button>`;
+  }
+  // The open card's Implement, rightmost in its action row, on every unstarted Todo work card, its questions waiting or
+  // not: it confirms, then
+  // sends card-build, waiting while the board server starts the implementer (app-cards.js). Build and Serve
+  // mean the package only (docs/adr/2026-11-02-1745-a-todo-card-that-nothing-blocks-has-build.md,
+  // docs/adr/2026-11-03-0219-a-build-tap-starts-the-build-in-the-board-server.md, docs/adr/2026-11-03-1549-a-todo-cards-button-reads-implement.md).
+  // Implement is plain until the card is ready, then builder orange (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
+  function buildButton(it) {
+    if (it.kind !== 'work' || it.lane !== 'todo' || it.queued) return '';
+    return `<button class="build${it.ready ? ' ready' : ''}" data-confirm="card-build" data-key="${esc(it.key)}">Implement</button>`;
+  }
+  // A builder reads "preheating" until its first status line, from the Implement tap or the session's dispatch on.
+  const builderLine = (b) => [b.progress || 'preheating', b.at && ago(b.at)].filter(Boolean).join(' · ');
+  // Five bars at the end of an In Progress card's time row: reached phases filled, a running one marked. The phases are
+  // store.mjs PHASES (docs/adr/2026-11-03-0128-a-builder-status-line-is-a-phase-and-a-short-detail.md,
+  // docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md).
+  const BUILD_PHASES = ['reading', 'building', 'testing', 'checking', 'landing'];
+  const stepWords = (phase) => `step ${BUILD_PHASES.indexOf(phase) + 1} of ${BUILD_PHASES.length}`;
+  const ALL_DONE = `all ${BUILD_PHASES.length} steps done`;
+  // What a card's bars show, or null off In Progress and on a card only a planner works on: how many phases it reached,
+  // whether the last of them is running, whether it dims because the card waits on something other than a builder (its
+  // questions, a blocker or queue, a reopening) or its build is stale, and its label. An install is no build: its card keeps the phase its
+  // build reached, undimmed
+  // (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md).
+  function phaseStrip(it) {
+    if (it.lane !== 'progress' || it.builder?.planner) return null;
+    const all = BUILD_PHASES.length;
+    if (it.waitsOn === 'checking') return { reached: all, running: false, dim: false, label: `Orchestrator review, ${ALL_DONE}` };
+    const asking = it.action?.kind === ACTION_KIND.questions || it.action?.kind === ACTION_KIND.pick;
+    const answers = asking ? ', waiting on your answers' : '';
+    const name = (phase) => `${phase[0].toUpperCase()}${phase.slice(1)}`;
+    if (it.builder && it.builder.kind !== BUILDER_KIND.install) {
+      const reached = BUILD_PHASES.indexOf(it.builder.phase) + 1;
+      return { reached, running: reached > 0, dim: asking || Boolean(it.builder.stalled), label: `${reached ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Preheating, no step yet'}${answers}` };
+    }
+    const dim = !it.builder || asking;
+    if (it.reopened) return { reached: all, running: false, dim, label: `Reopened, ${ALL_DONE}${answers}` };
+    const reached = BUILD_PHASES.indexOf(it.reachedPhase) + 1;
+    const label = reached ? `Stopped at ${it.reachedPhase}, ${stepWords(it.reachedPhase)}` : it.queued ? 'Queued, no step yet' : 'No step yet';
+    return { reached, running: false, dim, label: `${label}${answers}` };
+  }
+  // What the bars do when a card's reached count goes from prev to next across redraws, null or undefined meaning no
+  // strip (docs/adr/2026-11-03-1850-the-phase-bars-animate-as-a-build-starts-advances-and-ends.md).
+  function phaseMotion(prev, next) {
+    const had = typeof prev === 'number';
+    const has = typeof next === 'number';
+    if (had !== has) return has ? 'enter' : 'leave';
+    return has && next > prev ? 'fill' : null;
+  }
+  const phaseBars = (strip) => bars(strip, BUILD_PHASES);
+  // A stale build's status line is the needs-you red, and a tap on it nudges Claude to check the implementer.
+  function builderStatus(it) {
+    const classes = `line3 sub agent${it.builder.planner ? ' planner' : ''}`;
+    const words = `<span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}`;
+    if (!it.builder.stalled || it.lane === 'done') return `<div class="${classes}">${words}</div>`;
+    return `<button type="button" class="${classes} stalled" data-confirm="nudge" data-key="${esc(it.key)}" title="No recent progress. Nudge Claude to check this implementer">${words}</button>`;
+  }
   const unreadCount = (othersAt, seenAt) => (seenAt ? (othersAt || []).filter((t) => String(t) > seenAt).length : 0);
-  const unreadChip = (n) => {
-    if (!n) return '';
-    const label = `${n} unread message${n === 1 ? '' : 's'}`;
-    return `<span class="chip unread" title="${label}" aria-label="${label}">${n} new</span>`;
-  };
+  // When a hold ends, as a card reads it: the time today, the weekday within six days, else the date
+  // (docs/adr/2026-11-02-1727-a-card-can-be-held-until-a-time.md).
+  function heldUntilWords(iso, now = new Date()) {
+    const d = new Date(iso);
+    const midnight = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+    const days = Math.round((midnight(d) - midnight(now)) / 86400000);
+    if (days === 0) return clock(d);
+    if (days > 0 && days < 7) return `${d.toLocaleDateString([], { weekday: 'short' })} ${clock(d)}`;
+    return `${d.toLocaleDateString([], { month: 'numeric', day: 'numeric' })}, ${clock(d)}`;
+  }
+  function holdWords(it) {
+    if (!it.held) return '';
+    const d = it.heldUntil && new Date(it.heldUntil);
+    const title = !d ? 'Held until you unhold it.'
+      : `Held until ${d.toLocaleDateString([], { weekday: 'short', month: 'numeric', day: 'numeric' })}, ${clock(d)}. ${it.lane === 'todo' ? 'It starts on its own then, once nothing else blocks it.' : 'Claude picks it up again then.'}`;
+    return `<span class="card-hold" title="${esc(title)}">${esc(d ? `held until ${heldUntilWords(it.heldUntil)}` : 'held')}</span>`;
+  }
+  // A card's last line: the time its lane sorts by (domain.mjs sortAt), then its hold, what blocks it, then Action needed
+  // or ready, then an In Progress card's phase bars, then its new questions and unread messages, questions first, which app-cards.js
+  // takes away when the card opens (docs/adr/2026-11-04-0247-a-builder-asks-the-orchestrator-mid-build.md,
+  // docs/adr/2026-11-03-0516-a-new-card-is-ready-grilling-or-prototyping.md, docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md).
+  const SEP = '<span class="sep"> · </span>';
+  const newWords = (n, word) => n && `${n} new ${word}${n === 1 ? '' : 's'}`;
+  function timeLine(it, unread, questions, bars) {
+    const iso = it.sortAt;
+    const parts = [iso && `<time datetime="${esc(iso)}">${esc(cardTime(iso))}</time>`, holdWords(it), blockedWords(it), actionWords(it), it.ready && '<span class="card-ready">ready</span>'].filter(Boolean);
+    const news = [newWords(questions, 'question'), newWords(unread, 'message')].filter(Boolean).join(' · ');
+    const count = news ? `<span class="card-unread">${parts.length || bars ? SEP : ''}${news}</span>` : '';
+    const tail = bars ? `${parts.length ? SEP : ''}${bars}` : '';
+    if (!parts.length && !count && !tail) return '';
+    return `<div class="line6 sub card-time">${parts.join(SEP)}${tail}${count}</div>`;
+  }
+  // The Hold sheet's picker (app-cards.js): /api/board's holdChoices, the chips hub/duration.mjs shares with Snooze and
+  // Keep awake, then Custom. Its .hub-view root takes hub.css's duration picker rules, which view-hub-settings.js
+  // durationPicker's markup also uses. Each chip's length (ms, null for Forever) is worded as when it would end if picked
+  // at `now`, here rather than on the server, so the board's version doesn't change with the clock
+  // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+  const holdUntil = (c, now) => (c.ms === null ? 'until you unhold it' : `until ${heldUntilWords(new Date(now.getTime() + c.ms), now)}`);
+  function holdPicker(key, choices, now = new Date()) {
+    const chips = choices.map((c) => `<button type="button" class="btn quiet" data-hold-for="${esc(key)}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${holdUntil(c, now)}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="hub-view"><div class="dur-chips" role="group" aria-labelledby="holdTitle"><div class="dur-choices">${chips}</div>`
+      + `<div class="dur-custom"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-hold-at="${esc(key)}" required aria-label="Custom hold until a date and time"></div></div></div>`;
+  }
   // A New card's bump, edit and delete, and its line from its ask state (domain.mjs askItem;
-  // docs/adr/0047-the-plus-makes-a-new-card.md). top is whether it is the latest bump.
+  // docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md). top is whether it is the latest bump.
   const askActions = (it, top) => `<div class="ask-actions">${bumpButton(it, top)}${it.ask.canEdit ? editButton(it.id) : ''}${withdrawButton(it.id)}</div>`;
-  const cardActions = (it, top) => (it.isNew ? askActions(it, top) : it.bumpable ? `<div class="ask-actions">${cardBumpButton(it.key, top)}</div>` : '');
-  const ASK_STATE = { waiting: 'Waiting', working: `<span class="working">${workingLine}</span>` };
-  const askLine = (ask) => `${ask.from ? `Moved from ${esc(ask.from)} · ` : ''}${esc(time(ask.askedAt))} · ${ask.edited ? 'Edited · ' : ''}${ASK_STATE[ask.state] || ''}`;
-  function workLines(it, { unread = 0, top = false } = {}) {
-    const ids = it.kind === 'ask' ? askChip(it) : it.ticket ? ticketChip(it) : it.ticketSource === 'linear' ? linearChips(it) : it.internal ? badge('quiet', esc(it.ref), { title: 'Work on this site, not a product PR' }) : linearChips(it);
-    const blocked = (it.blockedBy || []).map((d) => badge('notice', `blocked by ${esc(d.ref)}`, { href: `#item=${encodeURIComponent(d.key)}` })).join('');
-    const ready = !blocked && !it.action && it.deps?.length && it.lane === 'todo' ? badge('ready', 'ready to start') : '';
-    const chips = `${it.todoAge ? badge('quiet', esc(it.todoAge)) : ''}${stalledChip(it)}${unreadChip(unread)}${actionChip(it)}${it.kind === 'followup' ? badge('quiet', 'follow-up') : ''}${prChips(it)}${reviewChips(it)}${it.held ? badge('quiet', 'held') : ''}${it.risky ? badge('notice', 'risky') : ''}${it.bumpedAt ? badge('normal', 'bumped') : ''}${ready}${installChip(it)}`;
-    const status = it.isNew && !it.action ? `<div class="line3 sub">${askLine(it.ask)}</div>`
+  // A card waiting on its owner step has the owner's Done where the bump sits: a check icon that confirms, then sends
+  // card-done (app-cards.js; docs/adr/2026-11-04-0158-a-card-whose-code-landed-stays-in-review-while-an-owner-step-remains.md).
+  const CHECK = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+  const ownerDoneButton = (it) => `<button type="button" class="ghost icon owner-done" data-confirm="finish" data-key="${esc(it.key)}" aria-label="Done" title="${esc(`Done: ${it.ownerStep}`)}">${CHECK}</button>`;
+  const cardActions = (it, top) => (it.isNew ? askActions(it, top) : it.ownerStep ? `<div class="ask-actions">${ownerDoneButton(it)}</div>`
+    : it.bumpable ? `<div class="ask-actions">${cardBumpButton(it.key, Boolean(it.bumpedAt))}</div>` : '');
+  const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' && workingLine].filter(Boolean).join(' · ');
+  // In a wave band (app-lanes.js), step is the number of the card's phase in its wave, shown inside its id chip, and actions replace
+  // its bump with the band's ⋯ menu.
+  function workLines(it, { unread = 0, newQuestions = 0, top = false, step = 0, actions = null } = {}) {
+    const ticket = it.ticket ? ticketChip(it) : it.ticketSource === 'linear' ? linearChips(it) : it.internal ? badge('quiet', esc(it.ref), { title: 'Work on this site, not a product PR' }) : linearChips(it);
+    // A card from an ask reads New until its session sets ready, grilling or prototyping (domain.mjs unsorted).
+    const chip = step ? ticket.replace(/^<[^>]*>/, (open) => `${open}<span class="wn">${step}</span>`) : ticket;
+    const ids = it.kind === 'ask' ? askChip(it) : it.unsorted ? `${badge('notice', 'New')} ${chip}` : chip;
+    const chips = `${prChips(it)}${reviewChips(it)}${it.risky ? badge('notice', 'risky') : ''}${installChip(it)}`;
+    const status = it.isNew && !it.action ? (askLine(it.ask) && `<div class="line3 sub">${askLine(it.ask)}</div>`)
       : it.waitsOn === 'checking' ? '<div class="line3 sub agent"><span class="working-dot" aria-hidden="true"></span>Orchestrator review</div>'
-      : it.builder ? `<div class="line3 sub agent"><span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}</div>`
+      : it.builder ? builderStatus(it)
+      : it.grilling || it.prototyping ? `<div class="line3 sub agent planner"><span class="working-dot" aria-hidden="true"></span>${it.grilling ? 'preheating' : 'prototyping'}</div>`
+      : it.refusal ? `<div class="line3 sub refused">${esc(it.refusal)}</div>`
       : it.working ? `<div class="line3 sub agent">${workingLine}</div>`
-      : it.next ? `<div class="line3 sub next">Next: ${esc(it.next)}</div>` : '';
+      : it.next ? `<div class="line3 sub next${it.lane === 'todo' || it.lane === 'done' || it.held || it.queued ? ' idle' : ''}">Next: ${esc(it.next)}</div>` : '';
     const eta = it.eta && it.builder ? `<div class="line3 sub eta">${esc(etaLine(it.eta))}</div>` : '';
-    return `${cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${esc(it.title)}</div>
+    return `${actions ?? cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${esc(it.title)}</div>
       ${status}${eta}
       ${chips ? `<div class="line2 meta">${chips}</div>` : ''}
-      ${blocked ? `<div class="line5 meta blocked">${blocked}</div>` : ''}`;
+      ${timeLine(it, unread, newQuestions, phaseBars(phaseStrip(it)))}`;
   }
-  const askChip = (it) => badge('normal', it.isNew ? 'New' : 'Task');
+  const WAVE_ICON = '<svg class="wave-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/><path d="M2 16c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/></svg>';
+  const askChip = (it) => (it.isNew ? badge('notice', 'New') : '');
   function planButton(items) {
-    const keys = items.filter((i) => i.kind === 'followup').map((i) => i.key);
-    return keys.length > 1 ? `<button class="link" data-plan="${esc(keys.join(' '))}">Plan a wave from these ${keys.length} follow-ups →</button>` : '';
+    const keys = items.filter((i) => i.kind === 'work' && !i.held && !i.blockedBy?.length).map((i) => i.key);
+    return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}">Plan waves</button>` : '';
+  }
+
+  // docs/adr/2026-11-03-1731-each-board-reviews-incoming-prs-that-touch-its-work.md
+  // The Auto Review lane, its needs you in the sidebar's needs-you red: one card per incoming PR (board/auto-review.mjs reviewsOf), needs you, then reviewing, then
+  // posted. A tap opens the review text and the PR's links, and a review held for the owner offers Post it and Skip,
+  // whose tap waits while the server records it (app-lanes.js). Older posted reviews are one line each under Posted earlier.
+  const REVIEW_WORDS = { needs: 'needs you', reviewing: 'reviewing', posted: 'posted' };
+  const REVIEW_DOTS = { needs: 'rv-needs', reviewing: 'progress', posted: 'done' };
+  function reviewDetail(c) {
+    const text = c.text ? `<div class="rv-review">${c.state === 'needs' ? '<p class="muted small">Draft, not posted.</p>' : ''}${BoardUI.markdown(c.text)}</div>`
+      : '<p class="muted small">Nothing posted yet. Right before posting, Claude reads the PR’s reviews again and adds only new points.</p>';
+    const links = `<div class="rv-links"><a href="${esc(c.url)}" target="_blank" rel="noopener">PR #${c.number} on GitHub ${LINK_ARROW}</a>${c.reviewUrl ? `<a href="${esc(c.reviewUrl)}" target="_blank" rel="noopener">The review on GitHub ${LINK_ARROW}</a>` : ''}</div>`;
+    const acts = c.state === 'needs' ? `<div class="rv-acts"><button type="button" data-review-answer="post" data-review="${c.number}">Post it</button><button type="button" class="ghost" data-review-answer="skip" data-review="${c.number}">Skip</button></div>` : '';
+    return `<div class="rv-detail">${text}${links}${acts}</div>`;
+  }
+  const reviewChipsOf = (c) => [badge('quiet', `from ${esc(c.author)}`), ...c.touches.map((t) => badge(c.state === 'needs' ? 'danger' : 'quiet', `touches ${esc(t.ref)}`)), c.asked ? badge('normal', 'asked you') : ''].join(' ');
+  const reviewWhen = (c) => `${c.state === 'reviewing' ? 'started ' : ''}${ago(c.at)}`;
+  function reviewCard(c, open) {
+    return `<details class="rv-card" data-review="${c.number}"${open ? ' open' : ''}><summary><span class="status ${REVIEW_DOTS[c.state]}"></span><div class="title-wrap">
+      <div class="line1 title">${badge('normal', `PR #${c.number}`)} ${esc(c.title)}</div>
+      <div class="line3 sub${c.state === 'reviewing' ? ' agent' : ''}">${c.state === 'reviewing' ? '<span class="working-dot" aria-hidden="true"></span>' : ''}<span class="rv-word s-${c.state}">${REVIEW_WORDS[c.state]}</span> · ${esc(reviewWhen(c))}</div>
+      <div class="line2 meta">${reviewChipsOf(c)}</div></div></summary>${reviewDetail(c)}</details>`;
+  }
+  const reviewLine = (c, open) => `<details class="rv-line" data-review="${c.number}"${open ? ' open' : ''}><summary><div class="title">${badge('normal', `PR #${c.number}`)} ${esc(c.title)}</div>
+    <div class="sub">${esc([c.author, c.state === 'posted' ? `posted ${ago(c.at)}` : 'not posted', c.open ? '' : 'closed'].filter(Boolean).join(' · '))}</div></summary>${reviewDetail(c)}</details>`;
+  // reviews: the built board's reviews; open: {lane, earlier, cards: Set of open PR numbers}.
+  function reviewLane(reviews, { open = {} } = {}) {
+    if (!reviews?.shown) return '';
+    const { cards, earlier } = reviews;
+    const needs = cards.filter((c) => c.state === 'needs').length;
+    const shown = (n) => open.cards?.has(n);
+    const fold = earlier.length ? `<details class="fold" data-fold="reviews-earlier"${open.earlier ? ' open' : ''}><summary><span class="lane-name">Posted earlier</span><span class="count">${earlier.length}</span></summary>
+      <div class="fold-list">${earlier.map((c) => reviewLine(c, shown(c.number))).join('')}</div></details>` : '';
+    const waiting = reviews.waiting ? `${reviews.waiting} incoming PR${reviews.waiting === 1 ? '' : 's'} wait${reviews.waiting === 1 ? 's' : ''} until the board is idle.`
+      : `No incoming PR touches this board’s work yet.${reviews.at ? ` Checked ${esc(reviews.repo)} ${ago(reviews.at)}.` : ''}`;
+    const list = cards.length ? cards.map((c) => reviewCard(c, shown(c.number))).join('') : `<div class="empty">${waiting}</div>`;
+    return `<details class="lane" data-lane="reviews"${open.lane === false ? '' : ' open'}><summary><span class="lane-name">Auto Review</span><span class="count">${cards.length}</span>${needs ? `<span class="lane-github"><span class="rv-late">${needs} needs you</span></span>` : ''}</summary>
+      <div class="list">${list}${fold}</div></details>`;
   }
 
-  Object.assign(globalThis.BoardUI, { prChips, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionChip, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, builderLine, unreadCount, workLines, askChip, askActions, askLine, planButton });
+  Object.assign(globalThis.BoardUI, { prChips, prName, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, buildButton, builderLine, BUILD_PHASES, phaseStrip, phaseMotion, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON, reviewLane });
 })();

package/board/public/ui-enums.js

@@ -1,10 +1,11 @@
 // A card's button names, which board/domain.mjs sets as its actionButton and resolvedBy, the kinds of its owner
-// action, and the builder kinds the page reads. Each value is its name, since cards carry it in the board's JSON.
-// Needs nothing else: board/domain.mjs runs
-// this file in a vm context (docs/adr/0059-an-unstarted-card-waits-on-its-questions-in-todo.md).
+// action, the builder kinds the page reads, and the state of a card's PR, which domain.mjs sets as pr.status and its PR
+// badge shows (docs/adr/2026-11-03-1843-a-merged-card-reopens-and-its-pr-badge-shows-the-prs-state.md). Each value is its name,
+// since cards carry it in the board's JSON. Needs nothing else: board/domain.mjs runs this file in a vm context (docs/adr/2026-10-30-1309-an-unstarted-card-waits-on-its-questions-in-todo.md).
 (function () {
   const BUTTON = Object.freeze({ grill: 'grill', openQuestions: 'openQuestions', markDone: 'markDone', github: 'github', merge: 'merge' });
   const ACTION_KIND = Object.freeze({ pick: 'pick', questions: 'questions', ready: 'ready', steps: 'steps', merge: 'merge', done: 'done' });
   const BUILDER_KIND = Object.freeze({ install: 'install' });
-  Object.assign(globalThis.BoardUI ||= {}, { BUTTON, ACTION_KIND, BUILDER_KIND });
+  const PR_STATE = Object.freeze({ open: 'open', draft: 'draft', merged: 'merged', closed: 'closed' });
+  Object.assign(globalThis.BoardUI ||= {}, { BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE });
 })();

package/board/public/ui-header.js

@@ -2,36 +2,45 @@
 (function () {
   const { since, esc } = globalThis.BoardUI;
   // The header's short time beside refresh: `at` is when the page last got fresh data (nextFresh), and watcher is
-  // /api/board's checks.watcher (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md). link is 'online',
+  // /api/board's checks.watcher (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md): a grey asleep while
+  // the hub can wake the session, waking… once a wake is under way (waking: the page asked for one and the board hasn't
+  // said so yet), and a red not listening when nothing will wake it
+  // (docs/adr/2026-11-03-0313-boards-run-in-the-background-and-the-hub-board-in-tmux.md). link is 'online',
   // 'offline' (the last board load failed) or 'reconnecting' (a refresh tap is retrying it).
-  const statusLine = (at, { link = 'online', watcher, pause } = {}) => (pause?.state === 'paused' ? `<span class="late">Paused until ${esc(BoardUI.usageClock(pause.resets_at))}</span>`
+  const statusLine = (at, { link = 'online', watcher, pause, waking = false } = {}) => (pause?.state === 'paused' ? `<span class="late">paused until ${esc(BoardUI.usageClock(pause.resets_at))}</span>`
     : link === 'offline' ? `<span class="link-state offline" title="Offline: can't reach the host">${at ? shortSince(at) : 'offline'}</span>`
-    : link === 'reconnecting' ? '<span class="link-state">Reconnecting…</span>'
-    : watcher === 'stopped' ? '<span class="claude late" title="Claude not listening">not listening</span>'
+    : link === 'reconnecting' ? '<span class="link-state">reconnecting…</span>'
+    : watcher === 'waking' || (waking && watcher === 'asleep') ? '<span class="claude asleep" title="Waking: the hub is resuming its session">waking…</span>'
+    : watcher === 'asleep' ? '<span class="claude asleep" title="Asleep: its session idled out. Refresh, or any tap on the page, wakes it">asleep</span>'
+    : watcher === 'stopped' ? '<span class="claude down" title="Claude not listening">not listening</span>'
     : at ? `<span class="fresh" title="Updated ${since(at)}: the last change from the host, or your last refresh">${shortSince(at)}</span>` : '');
   // What the page shows, for telling whether a change signal brought anything new; generatedAt changes on every load.
   const freshSig = (board, threads, openKeys) => JSON.stringify([{ ...board, generatedAt: null }, [...openKeys].sort().map((k) => [k, threads.get(k) ?? null])]);
   // fresh is {at, sig}: the header's time and what the page showed then. via is 'refresh' (a ↻ tap), 'signal' (the
   // stream's change signal) or 'poll' (any other load). A manual refresh always moves the time, a change signal only when it brought
   // something the time hasn't counted, a poll never, and any load moves it while none has landed (sig null)
-  // (docs/adr/0031-the-board-reloads-on-a-change-signal.md).
+  // (docs/adr/2026-10-29-1639-the-board-reloads-on-a-change-signal.md).
   const nextFresh = (fresh, { via, at, sig }) => (!fresh?.sig || via === 'refresh' || (via === 'signal' && sig !== fresh.sig) ? { at, sig } : fresh);
   const shortSince = (iso) => {
     const s = (Date.now() - Date.parse(iso)) / 1000;
     return s < 60 ? 'now' : s < 3600 ? Math.round(s / 60) + ' min' : s < 86400 ? Math.round(s / 3600) + ' h' : Math.round(s / 86400) + ' d';
   };
-  // GitHub's logo guidelines forbid altering the mark, so it stays filled rather than a line icon (docs/adr/0013-icons-are-sf-symbol-style-line-icons.md).
+  // GitHub's logo guidelines forbid altering the mark, so it stays filled rather than a line icon (docs/adr/2026-10-29-1639-icons-are-sf-symbol-style-line-icons.md).
   const GITHUB_MARK = '<svg class="gh-mark" width="13" height="13" viewBox="0 0 16 16" fill="currentColor" role="img" aria-label="GitHub"><title>GitHub</title><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>';
   // The GitHub mark opens the Hub links sheet, with a red dot while any link is broken past its grace period
-  // (docs/adr/0046-hub-links-turn-red-only-after-a-grace-period.md). links is /api/board's (hub/boards.mjs linksOf), null
+  // (docs/adr/2026-10-29-1639-hub-links-turn-red-only-after-a-grace-period.md). links is /api/board's (hub/boards.mjs linksOf), null
   // when the hub doesn't list this board. A link without state, from a board server still running older code, reads from ok.
   const linkState = (l) => l.state || (l.ok ? 'ok' : 'broken');
   const brokenLinks = (links) => (links || []).filter((l) => linkState(l) === 'broken');
-  const linksMark = (links) => {
+  const linksMark = (links, mark = GITHUB_MARK) => {
     const broken = brokenLinks(links).length;
     const label = `Hub links${broken ? `: ${broken} not working` : ''}`;
-    return `<button class="ghost gh-links" type="button" data-hub-links aria-haspopup="dialog" aria-label="${label}" title="${label}">${GITHUB_MARK}${broken ? '<span class="links-dot" aria-hidden="true"></span>' : ''}</button>`;
+    return `<button class="ghost gh-links" type="button" data-hub-links aria-haspopup="dialog" aria-label="${label}" title="${label}">${mark}${broken ? '<span class="links-dot" aria-hidden="true"></span>' : ''}</button>`;
   };
+  // A board on a plain git remote has no GitHub checks, so the In Review header names its repo, host/path, instead
+  // (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
+  const REMOTE_MARK = '<svg class="gh-mark" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 4-6 3-11 6"/></svg>';
+  const remoteLine = (remote, { links = null } = {}) => `<span class="github remote" title="This board’s repo">${linksMark(links, REMOTE_MARK)} <span class="remote-name">${esc(remote.name)}</span></span>`;
   // The In Review header's right end; pending is whether a check-github request is waiting.
   const githubLine = (checks, { pending = false, links = null } = {}) => {
     const mark = linksMark(links);
@@ -42,9 +51,9 @@
     return `<span class="github${checks.late && !checks.idle ? ' late' : ''}${checks.idle ? ' idle' : ''}" title="${title}">${mark} ${shortSince(checks.at)}${note}</span>`;
   };
 
-  const LINK_NAMES = { github: 'GitHub polling', events: 'Events', wakes: 'Daily wakes', push: 'Push notifications', slack: 'Reviewer links' };
+  const LINK_NAMES = { github: 'GitHub polling', 'repo-fetch': 'Repo fetch', events: 'Events', wakes: 'Daily wakes', slack: 'Reviewer links' };
   // The Hub links sheet's list, one row per link with a green dot, a muted one while settling, or a red one
-  // (docs/adr/0040-one-board-registry-for-every-hub-feature.md).
+  // (docs/adr/2026-10-29-1639-one-board-registry-for-every-hub-feature.md).
   const LINK_DOTS = { ok: ['pass', 'Working'], settling: ['', 'Settling'], broken: ['fail', 'Not working'] };
   const linkRow = (l) => {
     const st = linkState(l);
@@ -63,7 +72,7 @@
     const step = (ok, done, waiting) => `<li><span class="dot ${ok ? 'pass' : 'pending'}" aria-hidden="true"></span>${ok ? done : waiting}</li>`;
     return `<h2>Connecting this board</h2><ul class="setup-steps">
       ${step(setup.events, 'Claude answered the hello', 'Waiting for Claude to answer the hello')}
-      ${step(setup.github, 'GitHub checks reach this board', 'Waiting for the hub\'s next GitHub check')}
+      ${setup.github === undefined ? '' : step(setup.github, 'GitHub checks reach this board', 'Waiting for the hub\'s next GitHub check')}
     </ul>`;
   };
   const checkLanded = (checks, pendingSince) => Boolean(checks?.at) && Date.parse(checks.at) >= pendingSince;
@@ -74,11 +83,11 @@
 
   // Which header controls take taps, and whether refresh spins. The header paints them disabled with refresh spinning;
   // both turn on together once the first board load has answered or failed.
-  // Offline, refresh stays on so a tap can retry the load (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md).
+  // Offline, refresh stays on so a tap can retry the load (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md).
   const headerControls = ({ link = 'online', wired = false, boardSettled = false, reloading = false } = {}) => {
     const ready = wired && boardSettled && !reloading;
     return { refresh: ready, settings: ready && link === 'online', spin: !boardSettled || reloading };
   };
 
-  Object.assign(globalThis.BoardUI, { statusLine, freshSig, nextFresh, githubLine, brokenLinks, linksList, setupCard, checkLanded, githubRefresh, refreshIcon, headerControls });
+  Object.assign(globalThis.BoardUI, { statusLine, freshSig, nextFresh, githubLine, remoteLine, brokenLinks, linksList, setupCard, checkLanded, githubRefresh, refreshIcon, headerControls });
 })();