@lovek4d/kickflip 0.3.1 → 0.5.0

package/board/public/ui-cards.js

@@ -1,20 +1,30 @@
-// 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, clock, cardTime, etaLine, workingLine, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, LINK_ARROW } = globalThis.BoardUI;
+  const { esc, ago, lasted, 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: 'quiet', 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('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 });
@@ -38,9 +48,9 @@
     }).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
+  // 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/0145-build-on-a-blocked-card-queues-it.md).
+  // (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 ? Object.entries(EXTERNAL).map(([k, v]) => ` ${k}="${esc(v)}"`).join('') : '';
@@ -52,16 +62,16 @@
     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',
-    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.',
-    saved: (on) => on ? 'Saved. Each push builds its card.' : 'Saved. Cards wait for your Build.',
+    go: 'Serve', going: 'serving…', done: 'Install', failed: 'serve failed',
+    current: 'Nothing new to serve: Install already has this card’s latest push.',
+    busy: 'Serving now. The badge turns back into Install when the new build is ready.',
+    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.',
   } : {
-    go: 'Serve', going: 'Serving…', done: 'Visit', failed: 'Serve failed',
+    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>';
@@ -96,7 +106,7 @@
     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/0124-only-the-owner-or-auto-build-starts-a-card-run.md).
+  // (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 || t.autoBuild || !t.changes) return '';
@@ -105,49 +115,114 @@
     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), { 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))}</div><div class="meta">${chip}</div></div>`;
+    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, or the board server lands a
+  // card with no PR, and from the tap until a board shows the card left In Review or its merge refused (ui.js pending) (docs/adr/2026-10-29-1752-auto-merge-is-a-board-setting-off-by-default.md,
+  // docs/adr/2026-11-04-2100-a-land-waits-for-your-merge.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>`;
-  }
-  // The open card's Implement, rightmost in its action row, on a card board/domain.mjs marks buildable: it confirms, then
-  // sends card-build, and reads "Starting…" while it is sent and the board server starts the implementer. Build and Serve
-  // mean the package only (docs/adr/0122-a-todo-card-that-nothing-blocks-has-build.md,
-  // docs/adr/0139-a-build-tap-starts-the-build-in-the-board-server.md, docs/adr/0166-a-todo-cards-button-reads-implement.md).
-  function buildButton(it, sending = false) {
-    if (!it.buildable) return '';
-    return `<button class="build" data-confirm="card-build" data-key="${esc(it.key)}"${sending ? ' disabled' : ''}>${sending ? 'Starting…' : 'Implement'}</button>`;
-  }
-  // A builder the Implement tap started reads "Waiting for orchestrator" until the session's builder posts its first line.
-  const builderLine = (b) => [b.progress || (b.waiting ? 'Waiting for orchestrator' : 'Starting'), b.at && ago(b.at)].filter(Boolean).join(' · ');
-  // Five bars at the end of the time row while a build runs on an In Progress card: done phases filled, the current one
-  // marked. The phases are store.mjs PHASES (docs/adr/0137-a-builder-status-line-is-a-phase-and-a-short-detail.md,
-  // docs/adr/0160-a-building-cards-phase-bars-end-its-time-row.md).
+    const busy = it.merging || BoardUI.pending.has(`${it.key}:merge`);
+    return `<button class="${it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${busy ? 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, and
+  // ends with how long ago that line was set.
+  const builderLine = (b) => [b.progress || 'preheating', b.at && lasted(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'];
-  function phaseBars(phase) {
-    const at = BUILD_PHASES.indexOf(phase);
-    if (at < 0) return '';
-    const name = `${phase[0].toUpperCase()}${phase.slice(1)}`;
-    return `<span class="phase-bars" role="img" aria-label="${name}, step ${at + 1} of ${BUILD_PHASES.length}">${BUILD_PHASES.map((_, i) => `<i class="${i < at ? 'done' : i === at ? 'now' : ''}"></i>`).join('')}</span>`;
-  }
-  const stalledChip = (it) => it.lane !== 'done' && it.builder?.stalled ? badge('danger', 'Stalled', {
-    button: true, title: 'No recent progress. Nudge Claude to check this implementer',
-    attrs: { type: 'button', 'data-confirm': 'nudge', 'data-key': it.key },
-  }) : '';
+  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).
+  // A Todo card a grill or prototype runs on draws the planner's dashes instead, in blue, the grill's first and the
+  // prototype's second running (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md).
+  function phaseStrip(it) {
+    if (it.lane === 'todo' && it.builder?.planner) {
+      const prototype = it.builder.kind === 'prototype';
+      return { reached: prototype ? 2 : 1, running: true, dim: false, plan: true, label: prototype ? 'Prototyping' : 'Grilling' };
+    }
+    if (it.lane !== 'progress' || it.builder?.planner) return null;
+    const all = BUILD_PHASES.length;
+    // Orchestrator review is the checking phase, before landing (docs/adr/2026-11-04-2130-the-hub-launches-every-agent-from-the-card.md).
+    if (it.waitsOn === 'checking') return { reached: BUILD_PHASES.indexOf('checking') + 1, running: true, dim: false, label: `Orchestrator review, ${stepWords('checking')}` };
+    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);
+  // docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md
+  // Every status line on an In Progress card is the phase-bar orange, and every build or plan line on a Todo card the
+  // owner's blue (style.css).
+  const tone = (it) => (it.lane === 'progress' ? ' in-progress' : it.lane === 'todo' ? ' in-todo' : '');
+  const DOT = '<span class="working-dot" aria-hidden="true"></span>';
+  // A card idle on the orchestrator (domain.mjs orchestratorWaitOf) reads waiting for orchestrator, then orchestrator
+  // review with its dot once the session picks it up, each with how long ago.
+  function orchestratorStatus(it) {
+    const { since, picked } = it.orchestrator;
+    return `<div class="line3 sub agent${tone(it)}">${picked ? `${DOT}orchestrator review · ${esc(lasted(picked))}` : `waiting for orchestrator · ${esc(lasted(since))}`}</div>`;
+  }
+  // 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' : ''}${tone(it)}`;
+    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);
   // When a hold ends, as a card reads it: the time today, the weekday within six days, else the date
-  // (docs/adr/0118-a-card-can-be-held-until-a-time.md).
+  // (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();
@@ -164,48 +239,65 @@
     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 a building card's phase bars, then its unread count, which app-cards.js takes away when the card opens
-  // (docs/adr/0154-a-new-card-is-ready-grilling-or-prototyping.md, docs/adr/0160-a-building-cards-phase-bars-end-its-time-row.md).
+  // or ready, then an In Progress card's phase bars, then its unread messages, new questions counting as one, 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, 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 count = unread ? `<span class="card-unread">${parts.length || bars ? SEP : ''}${unread} new message${unread === 1 ? '' : 's'}</span>` : '';
+    const news = newWords(unread, 'message');
+    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.
-  function holdPicker(key, choices) {
-    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}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+  // 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, Boolean(it.bumpedAt))}</div>` : '');
-  const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' && `<span class="working">${workingLine}</span>`].filter(Boolean).join(' · ');
-  function workLines(it, { unread = 0, top = false } = {}) {
+  // 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, 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 ids = it.kind === 'ask' ? askChip(it) : it.unsorted ? `${badge('notice', 'New')} ${ticket}` : ticket;
-    const wave = it.lineup ? badge('quiet', `${WAVE_ICON}${esc(it.lineup.title)}`, { title: `In the wave ${it.lineup.title}` }) : '';
-    const chips = `${stalledChip(it)}${it.followUp ? badge('quiet', 'follow-up') : ''}${prChips(it)}${reviewChips(it)}${it.risky ? badge('notice', 'risky') : ''}${installChip(it)}`;
+    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${it.builder.planner ? ' planner' : ''}"><span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}</div>`
+      : it.orchestrator && !it.builder ? orchestratorStatus(it)
+      : it.waitsOn === 'checking' ? `<div class="line3 sub agent${tone(it)}">${DOT}Orchestrator review</div>`
+      : it.builder ? builderStatus(it)
+      : it.grilling || it.prototyping ? `<div class="line3 sub agent planner${tone(it)}">${DOT}${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${it.lane === 'todo' || it.lane === 'done' || it.held ? ' idle' : ''}">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>
-      ${status}${eta}
+    // The owner step's code check, which closes the card when it passes (docs/adr/2026-11-04-2308-an-owner-step-can-carry-a-code-check.md).
+    const check = !it.ownerCheck ? '' : it.ownerCheck.broken ? `<div class="line3 sub refused">${esc(`Check can't run: ${it.ownerCheck.broken}`)}</div>`
+      : `<div class="line3 sub check">${esc(`Checks: ${it.ownerCheck.words}`)}</div>`;
+    return `${actions ?? cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${esc(it.title)}</div>
+      ${status}${check}${eta}
       ${chips ? `<div class="line2 meta">${chips}</div>` : ''}
-      ${wave ? `<div class="line5 meta">${wave}</div>` : ''}
-      ${timeLine(it, unread, it.lane === 'progress' && it.builder && !it.builder.planner && it.waitsOn !== 'checking' ? phaseBars(it.builder.phase) : '')}`;
+      ${timeLine(it, unread, phaseBars(phaseStrip(it)))}`;
   }
   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') : '');
@@ -214,5 +306,43 @@
     return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}">Plan waves</button>` : '';
   }
 
-  Object.assign(globalThis.BoardUI, { prChips, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, buildButton, builderLine, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON });
+  // 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, 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 BUTTON = Object.freeze({ 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,14 +2,14 @@
 (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): a grey asleep while
+  // /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/0147-boards-run-in-the-background-and-the-hub-board-in-tmux.md). link is 'online',
+  // (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, waking = false } = {}) => (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>'
+    : 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>'
@@ -19,16 +19,16 @@
   // 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');
@@ -38,7 +38,7 @@
     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/0127-a-board-can-work-on-any-git-remote.md).
+  // (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.
@@ -53,7 +53,7 @@
 
   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);
@@ -83,7 +83,7 @@
 
   // 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 };

package/board/public/ui-hub.js

@@ -1,4 +1,4 @@
-// The rows and tiles of the hub page and settings modals (view-hub.js, view-hub-settings.js, view-polling.js), which hub.css styles
+// The rows and tiles of the hub page and settings modals (view-hub.js, view-hub-settings.js), which hub.css styles
 // under .hub-view. Pure: each lays out words hub/views.mjs wrote, and title and sub are HTML.
 (function () {
   const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
@@ -58,12 +58,12 @@
   const nowRow = (now, icon = '') => row({ icon, title: esc(now.title), sub: now.lines.map((l) => `<span class="sub wrap">${esc(l)}</span>`).join(''),
     trail: `<form method="post" action="/_hub/push/flush"><button class="btn quiet" ${now.count ? '' : 'disabled'}>Send now</button></form>` });
 
-  // This device's notifications (hub-kit.js device): state is {title, sub, action: {label, act, quiet, disabled}} or
-  // null while unknown, which keeps the row hidden.
+  // This device's notifications (hub-kit.js device): state is {title, sub, action: {label, act, quiet, busy}} or null
+  // while unknown, which keeps the row hidden. A busy action waits (ui.js BUSY) while it turns on or tests.
   function deviceRow(state, { compact = false } = {}) {
     if (!state) return `<div class="row" id="push" hidden>${tile('bell', 'var(--accent)')}</div>`;
     const a = state.action;
-    const button = a ? `<button type="button" class="${a.quiet ? 'btn quiet' : 'btn'}" data-device="${esc(a.act)}"${a.disabled ? ' disabled' : ''}>${esc(a.label)}</button>` : '';
+    const button = a ? `<button type="button" class="${a.quiet ? 'btn quiet' : 'btn'}" data-device="${esc(a.act)}"${a.busy ? BoardUI.BUSY : ''}>${esc(a.label)}</button>` : '';
     return `<div class="row" id="push">${tile('bell', state.action?.act === 'test' ? 'var(--color-success)' : 'var(--accent)')}<span class="body"><span class="text"><span class="title">${esc(state.title)}</span>${compact ? '' : `<span class="sub wrap">${esc(state.sub)}</span>`}</span>${compact && state.title === 'This device' ? `<span class="val">${state.sub?.startsWith('On') ? 'On' : 'Off'}</span>` : ''}${button}</span></div>`;
   }
 

package/board/public/ui-markdown.js

@@ -1,4 +1,4 @@
-// A small Markdown renderer for Notes (view-notes.js; docs/adr/0024-a-full-plan-opens-as-a-page-on-the-site.md). Needs ui.js and ui-links.js.
+// A small Markdown renderer for Notes (view-notes.js; docs/adr/2026-10-29-1639-a-full-plan-opens-as-a-page-on-the-site.md). Needs ui.js and ui-links.js.
 (function () {
   const { esc, linkHtml } = globalThis.BoardUI;
   // Raw HTML is escaped first, so a link's href can only break out through its scheme.

package/board/public/ui-order.js

@@ -1,18 +1,21 @@
 // The board's order of its items, each lane together, which board/domain.mjs sorts the board by and the page sorts a
 // tap it draws at once by, so the card lands where the server will put it
-// (docs/adr/0140-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, bumpedAt, sortAt, order and key.
+// (docs/adr/2026-11-03-0223-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, queued, bumpedAt, sortAt, order and key.
 // Needs nothing else: board/domain.mjs runs this file in a vm context.
 (function () {
   const LANE_ORDER = { review: 0, stale: 1, progress: 2, todo: 3, done: 4, asks: 5 };
-  // New cards lead Todo, oldest first, so the top one is the next taken (docs/adr/0047-the-plus-makes-a-new-card.md);
-  // then bumped cards, the latest bump on top (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md); then the rest
-  // newest first by sortAt, a card with no time last, the last added to its wave file on top.
+  // New cards lead Todo, oldest first, so the top one is the next taken (docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md);
+  // then bumped cards, the latest bump on top (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md); then the rest
+  // newest first by sortAt, a card with no time last, the last added to its wave file on top. Todo's Queued cards
+  // lead it, bumped first and then oldest first, so the top one is the next to build
+  // (docs/adr/2026-11-04-0150-queued-sits-at-the-top-of-todo.md).
   function laneOrder(a, b) {
     const bumped = (i) => i.bumpedAt || '';
     const unsorted = (i) => (i.isNew ? 0 : 1);
+    const queued = (i) => (i.queued ? 1 : 0);
     const at = (i) => String(i.sortAt || '');
-    const age = a.isNew ? at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
-    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || unsorted(a) - unsorted(b) || bumped(b).localeCompare(bumped(a)) || age || b.order - a.order || a.key.localeCompare(b.key);
+    const age = a.isNew || a.queued ? at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
+    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || queued(b) - queued(a) || unsorted(a) - unsorted(b) || bumped(b).localeCompare(bumped(a)) || age || b.order - a.order || a.key.localeCompare(b.key);
   }
   Object.assign(globalThis.BoardUI ||= {}, { laneOrder });
 })();