@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/ui-cards.js

@@ -1,6 +1,6 @@
-// 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.
+// 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-progress-bar.js.
 (function () {
-  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 { esc, escText, ago, lasted, clock, cardTime, etaLine, workingLine, thinkingLine, isPaused, PAUSED, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE, LINK_ARROW, progressBar } = globalThis.BoardUI;
   const EXTERNAL = { target: '_blank', rel: 'noopener' };
   // 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
@@ -56,10 +56,17 @@
     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".
+  // Each unfinished dep, linking to its card: "blocked by #53, #54", or "waits on #53" on a bumped card not held, which
+  // the pull takes once nothing blocks it (docs/adr/2026-11-05-0802-todo-has-no-queue.md); then its condition, "blocked
+  // until <condition>" ("and until <condition>" after deps), then ", <reason>"
+  // (docs/adr/2026-11-05-2358-nothing-waiting-on-the-orchestrator-is-missed.md).
   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 waits = it.bumpedAt && !it.held;
+    const refs = deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : waits ? 'waits on ' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
+    const until = it.blockedUntil ? `${deps.length ? ' and until' : waits ? 'waits until' : 'blocked until'} ${it.blockedUntil}` : '';
+    const tail = until + (it.blockReason && (refs || until) ? `, ${it.blockReason}` : '');
+    return refs + (tail ? `<span class="card-blocked">${esc(tail)}</span>` : '');
   }
   const tryWords = (kind) => kind === 'app' ? {
     go: 'Serve', going: 'serving…', done: 'Install', failed: 'serve failed',
@@ -112,16 +119,17 @@
     if (it.kind !== 'work' || !t?.script || t.autoBuild || !t.changes) return '';
     const words = tryWords(t.kind);
     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 attrs = BoardUI.pending.has(`${it.key}:try`) ? BoardUI.BUSY : reason ? ` aria-disabled="true" title="${esc(reason)}" data-tip="${esc(reason)}"` : '';
+    return `<button type="button" data-try="${esc(it.key)}"${attrs}>${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>';
   // 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 } = {}) {
+  function mainPull(pull, { open = false } = {}) {
     if (!pull) return '';
-    const busy = pull.running || sending;
+    const busy = pull.running || BoardUI.pending.has('main:pull');
     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>` : '';
@@ -140,60 +148,61 @@
   // 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).
+  // A blocked card's Merge shows disabled, its tooltip naming what blocks it
+  // (docs/adr/2026-11-06-0102-a-block-past-todo-bumps-a-build-and-holds-a-land.md).
   function mergeButton(it) {
+    if (it?.mergeBlocked) return `<button class="primary" disabled title="${esc(it.mergeBlocked)}">Merge</button>`;
     if (it?.action?.kind !== ACTION_KIND.merge && !it?.merging) return '';
     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>`;
+    // A merging card has no Action needed left, so resolvedBy is null by then: merging keeps the colour resolvedBy gave it.
+    return `<button class="${it.merging || 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(' · ');
+  // A builder reads "starting" 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. One whose process is gone leads with stopped; one whose live process
+  // went quiet keeps its words and only turns grey (domain.mjs builderOf; docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md).
+  // One the orchestrator stopped reads the stop's words and how long ago it stopped
+  // (docs/adr/2026-11-05-1809-the-orchestrator-stops-the-boards-own-runs.md).
+  const builderLine = (b) => (b.stopped ? `${b.stopped} · ${lasted(b.silentSince)}`
+    : [b.alive === false && 'stopped', b.progress || (b.alive === false ? null : 'starting'), 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'];
   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
+  // A card's progress bar (ui-progress-bar.js), or null off In Progress and on a card only a planner works on: how many
+  // phases it reached, which 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).
+  // A Todo card a grill or prototype runs on draws the planner's dashes instead, in Todo's grey, 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,
+  // docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.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' };
+      const done = prototype ? 2 : 1;
+      return { count: BUILD_PHASES.length, done, now: done - 1, tone: 'in-todo', 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 checking = BUILD_PHASES.indexOf('checking');
+    if (it.waitsOn === 'checking') return { count: all, done: checking + 1, now: checking, 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 done = BUILD_PHASES.indexOf(it.builder.phase) + 1;
+      return { count: all, done, now: done ? done - 1 : undefined, dim: asking || Boolean(it.builder.stalled || it.builder.quiet), label: `${done ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Starting, 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}` };
+    if (it.reopened) return { count: all, done: all, dim, label: `Reopened, ${ALL_DONE}${answers}` };
+    const done = BUILD_PHASES.indexOf(it.reachedPhase) + 1;
+    const label = done ? `Stopped at ${it.reachedPhase}, ${stepWords(it.reachedPhase)}` : 'No step yet';
+    return { count: all, done, 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
+  // What the bars do when a card's done 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';
@@ -201,24 +210,40 @@
     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' : '');
+  // A run's status line takes its card's lane colour (style.css): grey in Todo, the phase-bar orange in In Progress, blue in
+  // In Review (docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.md). A Done card's line keeps the plain orange.
+  const tone = (it) => (['todo', 'progress', 'review'].includes(it.lane) ? ` in-${it.lane}` : '');
   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>`;
+    const words = isPaused() ? `${PAUSED} · ${esc(lasted(picked || since))}` : picked ? `${DOT}orchestrator review · ${esc(lasted(picked))}` : `waiting for orchestrator · ${esc(lasted(since))}`;
+    return `<div class="line3 sub agent${tone(it)}${picked && !isPaused() ? '' : ' waiting-gray'}">${words}</div>`;
   }
-  // A stale build's status line is the needs-you red, and a tap on it nudges Claude to check the implementer.
+  // A stale or stopped build's status line is the needs-you red, and a tap on it nudges Claude to check the implementer.
+  // A quiet one is grey, with no dot, and one the orchestrator stopped plain, since the orchestrator already knows.
   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))}`;
+    const { quiet } = it.builder;
+    const classes = `line3 sub agent${it.builder.planner ? ' planner' : ''}${tone(it)}${quiet ? ' quiet' : ''}`;
+    if (it.builder.stopped) return `<div class="${classes}">${esc(builderLine(it.builder))}</div>`;
+    const words = `${quiet ? '' : DOT}${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 nudging = BoardUI.pending.has(`${it.key}:nudge`) ? ' nudging' : '';
+    return `<button type="button" class="${classes} stalled${nudging}" data-confirm="nudge" data-key="${esc(it.key)}" title="No recent progress. Nudge Claude to check this implementer">${words}</button>`;
+  }
+  // The open card's Status row: what runs on the card, else where its lane leaves it, never the wave file's raw status
+  // (docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md).
+  function statusWord(it) {
+    const b = it.builder;
+    if (b?.planner) return b.kind === 'prototype' ? 'prototyping' : 'grilling';
+    if (b && b.kind !== BUILDER_KIND.install) return b.stopped || (b.alive === false ? 'stopped' : b.phase === 'landing' ? 'landing' : 'implementing');
+    if (it.waitsOn === 'checking') return 'Orchestrator review';
+    if (it.lane === 'done') return 'done';
+    if (it.grilling || it.prototyping) return 'preheating';
+    if (it.lane === 'todo') return it.staging ? 'staging' : it.ready ? 'ready' : 'to do';
+    if (it.lane === 'progress') return it.reachedPhase ? `stopped at ${it.reachedPhase}` : 'in progress';
+    return 'in review';
   }
   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
@@ -238,15 +263,15 @@
       : `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 unread messages, new questions counting as one, which app-cards.js
+  // A card's last line: the time its lane sorts by (domain.mjs sortAt), then its hold, what blocks it, then Action needed,
+  // staging in orange or ready in green (docs/adr/2026-11-07-0700-staging-then-ready.md), 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 parts = [iso && `<time datetime="${esc(iso)}">${esc(cardTime(iso))}</time>`, holdWords(it), blockedWords(it), actionWords(it), it.staging && '<span class="card-staging">staging</span>', it.ready && '<span class="card-ready">ready</span>'].filter(Boolean);
     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}` : '';
@@ -273,37 +298,38 @@
   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(' · ');
+  const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' && thinkingLine()].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).
+    // A work card always shows its ticket; New is only on an ask (askChip).
     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 ids = it.kind === 'ask' ? askChip(it) : 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.orchestrator && !it.builder ? orchestratorStatus(it)
+      : it.orchestrator && !it.builder ? `${it.rebaseFailed ? `<div class="line3 sub">${escText(it.rebaseFailed)}</div>` : ''}${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 || it.queued ? ' idle' : ''}">Next: ${esc(it.next)}</div>` : '';
-    const eta = it.eta && it.builder ? `<div class="line3 sub eta">${esc(etaLine(it.eta))}</div>` : '';
+      : it.grilling || it.prototyping ? '<div class="line3 sub asked">preheating</div>'
+      : it.refusal ? `<div class="line3 sub refused">${escText(it.refusal)}</div>`
+      : it.landStopped ? `<div class="line3 sub">${escText(`${it.landStopped.words} · ${lasted(it.landStopped.at)}`)}</div>`
+      : it.working ? `<div class="line3 sub agent">${thinkingLine()}</div>`
+      : it.next ? `<div class="line3 sub next${it.lane === 'todo' || it.lane === 'done' || it.held ? ' idle' : ''}">Next: ${escText(it.next)}</div>` : '';
+    const eta = it.eta && it.builder ? `<div class="line3 sub eta">${escText(etaLine(it.eta))}</div>` : '';
     // 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>
+    const check = !it.ownerCheck ? '' : it.ownerCheck.broken ? `<div class="line3 sub refused">${escText(`Check can't run: ${it.ownerCheck.broken}`)}</div>`
+      : `<div class="line3 sub check">${escText(`Checks: ${it.ownerCheck.words}`)}</div>`;
+    return `${actions ?? cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${escText(it.title)}</div>
       ${status}${check}${eta}
       ${chips ? `<div class="line2 meta">${chips}</div>` : ''}
-      ${timeLine(it, unread, phaseBars(phaseStrip(it)))}`;
+      ${timeLine(it, unread, progressBar(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') : '');
   function planButton(items) {
-    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>` : '';
+    const keys = items.filter((i) => i.kind === 'work' && !i.held && !i.blocked).map((i) => i.key);
+    return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}"${BoardUI.pending.has('todo:plan') ? BoardUI.BUSY : ''}>Plan waves</button>` : '';
   }
 
   // docs/adr/2026-11-03-1731-each-board-reviews-incoming-prs-that-touch-its-work.md
@@ -323,11 +349,11 @@
   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="line1 title">${badge('normal', `PR #${c.number}`)} ${escText(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>
+  const reviewLine = (c, open) => `<details class="rv-line" data-review="${c.number}"${open ? ' open' : ''}><summary><div class="title">${badge('normal', `PR #${c.number}`)} ${escText(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 = {} } = {}) {
@@ -344,5 +370,5 @@
       <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 });
+  Object.assign(globalThis.BoardUI, { prChips, prName, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, builderLine, statusWord, BUILD_PHASES, phaseStrip, phaseMotion, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON, reviewLane });
 })();

package/board/public/ui-enums.js

@@ -3,7 +3,7 @@
 // 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({ openQuestions: 'openQuestions', markDone: 'markDone', github: 'github', merge: 'merge' });
+  const BUTTON = Object.freeze({ openQuestions: 'openQuestions', done: 'done', 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' });
   const PR_STATE = Object.freeze({ open: 'open', draft: 'draft', merged: 'merged', closed: 'closed' });

package/board/public/ui-header.js

@@ -1,19 +1,27 @@
 // The board header's time and the In Review header's GitHub line, with when a refresh asks for a check. Needs ui.js.
 (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/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, 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 === '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>` : '');
+  // The header's short time beside refresh: `at` is when the page last got fresh data (nextFresh). It reads that age, or busy while the Mac is busy;
+  // the board's other states only move the span's colour (the arrow follows it, style.css) and its title. watcher is
+  // /api/board's checks.watcher (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md): stopped
+  // (nothing will wake it) and an offline link turn it red, paused usage turns it orange. A busy Mac (pause.machine,
+  // docs/adr/2026-11-06-0106-a-busy-mac-holds-new-work.md) turns it orange too and reads busy in place of the age.
+  // link is 'online', 'offline' (the last board load failed) or 'reconnecting' (a refresh tap is retrying it, and the icon spins).
+  const statusLine = (at, { link = 'online', watcher, pause, waking = false } = {}) => {
+    const paused = pause?.state === 'paused';
+    const busy = pause?.machine?.state === 'busy';
+    const down = link === 'offline' || watcher === 'stopped';
+    const reason = link === 'offline' ? "Offline: can't reach the host"
+      : watcher === 'stopped' ? 'Claude not listening'
+      : paused ? `Paused ${BoardUI.pauseUntilWords(pause.resets_at)}`
+      : busy ? 'This Mac is busy: new work waits until it eases'
+      : link === 'reconnecting' ? 'Reconnecting…'
+      : watcher === 'waking' || (waking && watcher === 'asleep') ? 'Waking: the hub is resuming its session'
+      : watcher === 'asleep' ? 'Asleep: its session idled out. Refresh, or any tap on the page, wakes it' : '';
+    if (!at && !reason) return '';
+    const title = [reason, at && `Updated ${since(at)}: the last change from the host, or your last refresh`].filter(Boolean).join('. ');
+    return `<span class="fresh${down ? ' down' : paused || busy ? ' hold' : ''}" title="${esc(title)}">${busy ? 'busy' : at ? 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
@@ -65,13 +73,13 @@
     ? `<ul class="hub-links">${links.map(linkRow).join('')}</ul>`
     : '<p class="muted">The hub doesn\'t list this board yet. It picks a board up from the manifest on its next check.</p>');
 
-  // The checklist a new board shows at the top until its session answered the hello and GitHub checks reach it; setup
+  // The checklist a new board shows at the top until its session answered the ping and GitHub checks reach it; setup
   // is /api/board's, null once both pass. Cards can start meanwhile.
   const setupCard = (setup) => {
     if (!setup) return '';
     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.events, 'Claude answered the ping', 'Waiting for Claude to answer the ping')}
       ${setup.github === undefined ? '' : step(setup.github, 'GitHub checks reach this board', 'Waiting for the hub\'s next GitHub check')}
     </ul>`;
   };
@@ -83,10 +91,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/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md).
-  const headerControls = ({ link = 'online', wired = false, boardSettled = false, reloading = false } = {}) => {
+  // 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),
+  // and Settings opens its read-only copy (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
+  const headerControls = ({ wired = false, boardSettled = false, reloading = false } = {}) => {
     const ready = wired && boardSettled && !reloading;
-    return { refresh: ready, settings: ready && link === 'online', spin: !boardSettled || reloading };
+    return { refresh: ready, settings: ready, spin: !boardSettled || reloading };
   };
 
   Object.assign(globalThis.BoardUI, { statusLine, freshSig, nextFresh, githubLine, remoteLine, brokenLinks, linksList, setupCard, checkLanded, githubRefresh, refreshIcon, headerControls });

package/board/public/ui-hub.js

@@ -15,6 +15,7 @@
     power: '<path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.8 0"/>',
     calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/>',
     snooze: '<path d="M4 10h6l-6 8h6"/><path d="M14 4h6l-6 8h6"/>',
+    pause: '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
     coffee: '<path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><path d="M6 2v2"/><path d="M10 2v2"/><path d="M14 2v2"/>',
     laptop: '<rect x="4" y="5" width="16" height="11" rx="1.5"/><path d="M2 19h20"/>',
     key: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
@@ -38,11 +39,21 @@
     const going = pause.state === 'going';
     const until = BoardUI.usageClock(pause.resets_at);
     const icon = going ? '<path d="M3.34 19a10 10 0 1 1 17.32 0"/><path d="m12 14 4-4"/>' : '<circle cx="12" cy="12" r="9"/><path d="M10 9v6"/><path d="M14 9v6"/>';
+    // Pause hub (docs/adr/2026-11-05-1849-pause-board-and-pause-hub-pause-new-work-by-hand.md): Resume ends it, which view-hub.js posts.
+    if (pause.manual) return `<div class="hold-banner ub-banner ub-paused" role="status"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icon}</svg><span>${esc(pause.resets_at === 'forever' ? 'Work paused: you paused the hub until you resume.' : `Work paused: you paused the hub. Resumes at ${until}.`)}</span><form method="post" action="/_hub/settings/hub-pause"><button class="btn quiet" name="pause" value="off">Resume</button></form></div>`;
     const text = going ? `Past the buffer: spending usage until ${until}`
       : `Work paused: Claude’s ${pause.window === 'five_hour' ? '5‑hour' : 'weekly'} usage is at ${Math.round(pause.used)}%. Resumes ${pause.window === 'five_hour' ? 'at ' : ''}${until}.`;
     return `<div class="hold-banner ub-banner ub-${going ? 'going' : 'paused'}" role="status"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icon}</svg><span>${esc(text)}</span><form method="post" action="/_hub/settings/keep-going"><button class="btn${going ? '' : ' quiet'}" name="value" value="${going ? 'off' : 'on'}">${going ? 'Stop' : 'Keep going'}</button></form></div>`;
   }
 
+  // Health's Machine row: the gate's machine (shared/machine-gate.mjs), busy with its reason or normal, in words only
+  // (docs/adr/2026-11-06-0106-a-busy-mac-holds-new-work.md).
+  const machineRow = (machine) => {
+    const busy = machine.state === 'busy';
+    return row({ icon: tile('power', busy ? '#f59e0b' : '#22c55e'), title: 'Machine', wrap: true,
+      sub: busy ? `<span class="st wait">busy</span> · ${esc(machine.reason)}` : '<span class="st ok">normal</span>' });
+  };
+
   // builder: the word for who builds Codex's work, hub/views.mjs hubView's claude.builder.
   function bufferControl(pause, builder) {
     const at = pause.pause_at;
@@ -108,5 +119,5 @@
     return `<section class="usage"><h2 class="label" style="margin-top:4px">Usage</h2><div class="group">${blocks}${buffer}</div></section>`;
   }
 
-  globalThis.HubUI = { esc, tile, CHEVRON, row, flash, holdBanner, pauseBanner, nowRow, deviceRow, usageCard };
+  globalThis.HubUI = { esc, TILE_PATHS, tile, CHEVRON, row, flash, holdBanner, pauseBanner, machineRow, nowRow, deviceRow, usageCard };
 })();

package/board/public/ui-links.js

@@ -2,7 +2,7 @@
 // ref opens that card, a Linear id or PR opens its page, and a bare URL becomes a link. Needs ui.js; load it before
 // the ui-*.js files that render text.
 (function () {
-  const { esc, record } = globalThis.BoardUI;
+  const { esc, escText, record } = globalThis.BoardUI;
   // The Linear id shape, which an internal ref shares.
   const LINEAR_ID = /^([A-Z][A-Z0-9]*)-\d+$/;
   const LINEAR_ISSUE = /^https:\/\/linear\.app\/[^/]+\/issue\//;
@@ -73,13 +73,13 @@
   // The longest hyphen-prefix of a word that is a known ref or a Linear id, then the rest as text.
   function wordLink(word, ctx) {
     for (let w = word; w; w = w.includes('-') ? w.slice(0, w.lastIndexOf('-')) : '') {
-      const rest = esc(word.slice(w.length));
+      const rest = escText(word.slice(w.length));
       if (record(ctx.refs, w)) return cardLink(w, ctx) + rest;
       const team = LINEAR_ID.exec(w)?.[1];
       const prefix = team && team !== 'INT' && record(ctx.teams, team);
       if (prefix) return out(prefix + w, w) + rest;
     }
-    return esc(word);
+    return escText(word);
   }
 
   // A bare #n that reads as a hex colour stays text.
@@ -92,16 +92,16 @@
     let at = 0;
     for (const m of s.matchAll(TOKEN)) {
       const [all, url, owner, name, n, bare, word] = m;
-      html += esc(s.slice(at, m.index));
+      html += escText(s.slice(at, m.index));
       at = m.index + all.length;
       if (url) html += urlLink(url);
       else if (name) {
         const repo = owner ? `${owner}/${name}` : record(ctx.repos, name);
-        html += repo ? out(prUrl(repo, n), all) : esc(all);
-      } else if (bare) html += record(ctx.refs, all) ? cardLink(all, ctx) : ctx.repo && !colour(bare) ? out(prUrl(ctx.repo, bare), all) : esc(all);
+        html += repo ? out(prUrl(repo, n), all) : escText(all);
+      } else if (bare) html += record(ctx.refs, all) ? cardLink(all, ctx) : ctx.repo && !colour(bare) ? out(prUrl(ctx.repo, bare), all) : escText(all);
       else html += wordLink(word, ctx);
     }
-    return html + esc(s.slice(at));
+    return html + escText(s.slice(at));
   }
 
   const TAG = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][\w-]*)(?:[^>"']|"[^"]*"|'[^']*')*>/g;

package/board/public/ui-order.js

@@ -1,21 +1,23 @@
 // 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/2026-11-03-0223-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, queued, bumpedAt, sortAt, order and key.
+// (docs/adr/2026-11-03-0223-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, 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/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).
+  // Todo lists bumped cards first, the latest bump on top, a bumped New ask included
+  // (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md); then the rest oldest first by sortAt, a card with no
+  // time last, the first added to its wave file on top, so a New ask and every new card join the bottom and the pull takes the
+  // top ready card (docs/adr/2026-11-05-2345-new-todo-cards-join-the-bottom.md,
+  // docs/adr/2026-11-06-0300-a-new-task-lands-at-the-bottom-of-todo-and-flashes-blue.md). Every other
+  // lane lists its cards newest first by sortAt, a card with no time last, the last added to its wave file on top.
   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 || 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);
+    const oldestFirst = a.lane === 'todo';
+    const timeless = (i) => (at(i) ? 0 : 1);
+    const age = oldestFirst ? timeless(a) - timeless(b) || at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
+    const added = a.lane !== 'todo' ? b.order - a.order : a.order - b.order;
+    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || bumped(b).localeCompare(bumped(a)) || age || added || a.key.localeCompare(b.key);
   }
   Object.assign(globalThis.BoardUI ||= {}, { laneOrder });
 })();

package/board/public/ui-page-header.js

@@ -8,6 +8,10 @@
   const GEAR = icon(18, '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>');
   const MOON = icon(16, '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>');
   const BULB = icon(18, '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>');
+  // The pages switch (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md): a bare ? and a bare check, drawn
+  // like the bulb and gear.
+  const QUESTION = icon(18, '<path d="M8 8a4 4 0 1 1 5.5 3.7c-.9.4-1.5 1.2-1.5 2.2V15"/><path d="M12 19.5h.01"/>');
+  const CHECK = icon(18, '<path d="M20 6 9 17l-5-5"/>');
   const id = (v) => (v ? ` id="${esc(v)}"` : '');
 
   // Where the back arrow goes (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): 'back', one step back in history, when
@@ -41,13 +45,15 @@
   }
 
   // lead is 'logo' (the kickflip, which toggles the sidebar, sidebar.js; logoHref, the hub's page, without it)
-  // or 'back' (the arrow, which follows backStep, with backHref the work item or the board, after the logo). The controls (time and refresh, gear) paint disabled with refresh spinning until the
+  // or 'back' (the arrow, which follows backStep, with backHref the work item or the board, after the logo). The controls (time and refresh) paint disabled with refresh spinning until the
   // page's script turns them on (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md). With controls
-  // false, trail (HTML) takes their place. bulb puts the architecture review's bulb between them (app-arch.js). leadAttrs adds to or replaces the lead link's attributes, and level is the
+  // false, trail (HTML) takes their place. pages is the switch between a board's two pages below 900px
+  // (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md): 'questions' puts the ? after the controls, with
+  // the open-question count in its badge (app-needs.js), and 'board' puts the check, back up to the board, after trail. leadAttrs adds to or replaces the lead link's attributes, and level is the
   // title's heading level, for a header that isn't the page's own, such as the sidebar's (ui-sidebar.js). moon puts the
   // away moon right of the title, hidden until app-header.js renderStatus shows it (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md).
   function header({ lead = 'logo', title = '', titleId, backHref = './', backLabel = 'Back to the board', backId, logoSrc = 'kickflip.png',
-    controls = true, trail = '', time = '…', bulb = false, moon = false, settingsHref = 'settings.html', logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
+    controls = true, trail = '', time = '…', pages = null, moon = false, logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
     const attrs = (base) => Object.entries({ ...base, ...leadAttrs }).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
     const logo = (cls = 'hub') => `<a class="${cls}" href="${esc(logoHref)}"${attrs({ 'aria-label': 'Boards' })}><img src="${esc(logoSrc)}" alt=""></a>`;
     const first = lead === 'back'
@@ -55,14 +61,20 @@
       : logo();
     const nav = controls ? `<nav class="nav">`
       + `<span class="refresh"><button class="ghost spinning" id="refresh" type="button" disabled aria-label="Refresh" title="Refresh">${REFRESH}</button><span class="muted" id="status">${esc(time)}</span></span>`
-      + (bulb ? `<button class="ghost icon arch-bulb" id="archBulb" type="button" aria-label="Architecture review" title="Architecture review" aria-haspopup="dialog">${BULB}</button>` : '')
-      + (settingsHref ? `<a href="${esc(settingsHref)}" id="settingsLink" class="ghost icon" aria-label="Settings" title="Settings" aria-disabled="true" tabindex="-1" aria-haspopup="dialog">${GEAR}</a>` : '')
-      + `</nav>` : trail;
+      + (pages === 'questions' ? `<a href="questions.html" id="questionsLink" class="ghost icon pages-switch" aria-label="Open questions" title="Open questions">${QUESTION}<span class="q-badge" hidden></span></a>` : '')
+      + `</nav>` : trail + (pages === 'board' ? `<a class="ghost icon pages-switch back" href="./" aria-label="Back to the board" title="Back to the board">${CHECK}</a>` : '');
     const script = lead === 'back' ? `<script>(${wireBack})(${backStep});</script>` : '';
     const h = `h${[1, 2, 3, 4, 5, 6].includes(level) ? level : 1}`;
     const away = moon ? `<span class="away-moon" role="img" aria-label="Away" aria-hidden="true">${MOON}</span>` : '';
     return `<header class="top"><div class="brand">${first}<${h}${id(titleId)}>${esc(title)}</${h}>${away}</div>${nav}</header>${script}`;
   }
 
-  Object.assign(globalThis.BoardUI ||= {}, { header, backStep });
+  // The foot of the board, under the lanes: the architecture review's bulb (app-arch.js) and the gear, Board Settings,
+  // which paints disabled until app-header.js turns it on with the header's controls.
+  const boardFoot = () => '<div class="board-foot">'
+    + `<button class="ghost icon arch-bulb" id="archBulb" type="button" aria-label="Architecture review" title="Architecture review" aria-haspopup="dialog">${BULB}</button>`
+    + `<a href="settings.html" id="settingsLink" class="ghost icon" aria-label="Settings" title="Settings" aria-disabled="true" tabindex="-1" aria-haspopup="dialog">${GEAR}</a>`
+    + '</div>';
+
+  Object.assign(globalThis.BoardUI ||= {}, { header, backStep, boardFoot });
 })();