@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/ui-hub.js

@@ -1,14 +1,21 @@
-// 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]));
   const TILE_PATHS = {
+    github: '<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"/>',
+    codex: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3"/><path d="M13 15h4"/>',
+    linear: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+    slack: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+    tailscale: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18"/>',
+    notifications: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
     bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
     clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
     moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
     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"/>',
+    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"/>',
   };
@@ -36,27 +43,28 @@
     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>`;
   }
 
-  function bufferControl(pause) {
+  // 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;
     const off = at === 100;
-    return `<div class="u-buffer"><div class="ub-row"><span class="ub-label"><span class="title">Pause work at</span><span class="ub-sub">${off ? 'No buffer' : `${100 - at}% buffer`}</span></span>`
+    return `<div class="block"><div class="ub-row"><span class="ub-label"><span class="title">Pause work at</span><span class="ub-sub">${off ? 'No buffer' : `${100 - at}% buffer`}</span></span>`
       + `<form class="segments ub-step" method="post" action="/_hub/settings/pause-at" role="group" aria-label="Pause work at"><button name="value" value="${at - 5}" aria-label="Pause 5% sooner"${at <= 50 ? ' disabled' : ''}>−</button>`
       + `<output class="${off ? 'off' : ''}" aria-live="polite">${off ? 'Off' : `${at}%`}</output>`
       + `<button name="value" value="${at + 5}" aria-label="Pause 5% later"${off ? ' disabled' : ''}>+</button></form></div>`
-      + `<p class="u-share-desc">${off ? 'Off: work keeps going until usage runs out.' : 'Claude’s new work waits when either window passes this, and resumes at that window’s reset; Codex hands its work to Opus builders.'}</p></div>`;
+      + `<p class="u-share-desc">${off ? 'Off: work keeps going until usage runs out.' : `Claude’s new work waits when either window passes this, and resumes at that window’s reset; Codex hands its work to ${builder} implementers.`}</p></div>`;
   }
 
   // What polling does now, the last and next check and the queue, with Send now: hub/views.mjs pollingNow's words.
   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', '#ef4444')}</div>`;
+    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>` : '';
-    return `<div class="row" id="push">${tile('bell', '#ef4444')}<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>`;
+    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>`;
   }
 
   // The Codex share control: codex is hub/views.mjs hubView's codex, and its form posts to /_hub/settings/codex, which
@@ -65,14 +73,24 @@
     const off = !codex.usable;
     const buttons = codex.choices.map((c) => `<button type="submit" name="value" value="${esc(c.value)}" aria-pressed="${c.on}"${off ? ' disabled' : ''}>${esc(c.label)}</button>`).join('');
     return `<div class="u-share"><form class="segments${off ? ' is-disabled' : ''}" method="post" action="/_hub/settings/codex" role="group" aria-label="Codex share"${off ? ' aria-disabled="true"' : ''}>${buttons}</form>`
-      + `<p class="u-share-desc">${esc(codex.description)}</p>${codex.fix ? `<p class="u-share-fix"><code>${esc(codex.fix)}</code></p>` : ''}${codex.note ? `<p class="u-share-note">${esc(codex.note)}</p>` : ''}</div>`;
+      + `<p class="u-share-desc">${esc(codex.description)}</p>${codex.fix ? `<p class="u-share-fix"><code>${esc(codex.fix)}</code></p>` : ''}</div>`;
   }
 
-  // data is the usage reading; codex, when given, draws Codex's block even without a reading: the Codex share control
+  // The Claude model control, drawn as Codex share's: claude is hub/views.mjs hubView's claude, and its form posts to
+  // /_hub/settings/claude-model, which view-hub.js sends.
+  function claudeModel(claude) {
+    const buttons = claude.choices.map((c) => `<button type="submit" name="value" value="${esc(c.value)}" aria-pressed="${c.on}">${esc(c.label)}</button>`).join('');
+    return `<div class="u-share"><form class="segments" method="post" action="/_hub/settings/claude-model" role="group" aria-label="Claude model">${buttons}</form>`
+      + `<p class="u-share-desc">${esc(claude.description)}</p></div>`;
+  }
+
+  // data is the usage reading; claude, when given, opens Claude's block with the Claude model control, even without a
+  // reading; codex, when given, draws Codex's block even without a reading: the Codex share control
   // first, then Codex's bars while share isn't Off.
-  function usageCard(data, codex, pause) {
+  function usageCard(data, codex, pause, claude) {
     const { usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords } = BoardUI;
     const products = usageProducts(data);
+    if (claude && !products.includes('claude')) products.unshift('claude');
     if (codex && !products.includes('codex')) products.push('codex');
     if (!products.length) return '';
     const head = (name, tag) => `<div class="u-head"><span class="title">${name}</span>${tag ? `<span class="u-asof">${esc(tag)}</span>` : ''}</div>`;
@@ -81,13 +99,13 @@
       `<div class="u-tone-${usageTone(r[key])}${pause?.pause_at < 100 ? ' ub-marked' : ''}"><div class="u-win"><span>${label}</span><span>${usageWords(r, key)}</span></div>${usageBar(r[key]).replace('</span>', `${pause?.pause_at < 100 ? `<span class="ub-mark" style="left:${pause.pause_at}%"></span>` : ''}</span>`)}</div>`).join('');
     const blocks = products.map((p) => {
       const r = data?.[p] || { at: null };
-      if (p !== 'codex' || !codex) return `<div class="block u-block">${head(usageNames[p], asof(r))}${windows(r)}${p === 'claude' && pause ? bufferControl(pause) : ''}</div>`;
+      if (p === 'claude' && claude) return `<div class="block u-block">${head(usageNames.claude, asof(r))}${claudeModel(claude)}${windows(r)}</div>`;
+      if (p !== 'codex' || !codex) return `<div class="block u-block">${head(usageNames[p], asof(r))}${windows(r)}</div>`;
       const bars = codex.usable && codex.share !== 'off';
       return `<div class="block u-block">${head(usageNames.codex, codex.tag || (bars ? asof(r) : ''))}${codexShare(codex)}${bars ? `<div class="u-codex-bars">${windows(r)}</div>` : ''}</div>`;
     }).join('');
-    const source = [data?.claude && 'Claude Code’s status line, which every busy session redraws', data?.codex && 'Codex’s newest session logs'].filter(Boolean).join(', and ');
-    const note = source ? `<p class="note">From ${source}. A window whose reset time passed reads as reset.</p>` : '';
-    return `<section class="usage"><h2 class="label" style="margin-top:4px">Usage</h2><div class="group">${blocks}</div>${note}</section>`;
+    const buffer = pause && products.includes('claude') ? bufferControl(pause, claude?.builder ?? 'Claude') : '';
+    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 };

package/board/public/ui-links.js

@@ -3,22 +3,28 @@
 // the ui-*.js files that render text.
 (function () {
   const { esc, record } = globalThis.BoardUI;
-  // The Linear id shape store.mjs accepts for a follow-up, which an internal ref shares.
+  // 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\//;
+  // A GitHub ticket's ref (board/domain.mjs refOf).
+  const ISSUE = /^#\d+$/;
   const prUrl = (repo, n) => `https://github.com/${repo}/pull/${n}`;
 
-  // What a renderer needs to link text shown on item `key` (null for none): each ref to its card's key, the issue url
-  // prefix of each Linear team the board's cards link to (none on a board without a workspace), that item's repo for
-  // a bare #n, and `base`, which a page other than the board sets to './' so a card link opens the board. A ref shaped
-  // like a Linear id, such as INT-<n>, links from anywhere; a wave's own short id, such as B1, links only from that
-  // wave's cards, since a plan for another wave reuses those names.
+  // What a renderer needs to link text shown on item `key` (null for none): each ref, and each card id that differs
+  // from its ref, to its card's key, the issue url prefix of each Linear team the board's cards link to (none on a
+  // board without a workspace), that item's repo for a bare #n that is no card's ref, and `base`, which a page other
+  // than the board sets to './' so a card link opens the board. A ref shaped like a Linear id, such as INT-<n>, or a
+  // ticket #n links from anywhere; a wave's own short id, such as B1, links only from that wave's cards, since a plan
+  // for another wave reuses those names.
   function linkContext(items = [], key = null, { base = '' } = {}) {
     const wave = key && !key.startsWith('ask:') ? key.slice(0, key.indexOf('/')) : null;
     const byRef = new Map();
     for (const i of items) {
-      if (i.kind === 'ask' || !i.ref || (!LINEAR_ID.test(i.ref) && i.wave !== wave)) continue;
-      byRef.set(i.ref, [...(byRef.get(i.ref) || []), i]);
+      if (i.kind === 'ask') continue;
+      for (const ref of new Set([i.ref, i.id])) {
+        if (!ref || (!LINEAR_ID.test(ref) && !ISSUE.test(ref) && i.wave !== wave)) continue;
+        byRef.set(ref, [...(byRef.get(ref) || []), i]);
+      }
     }
     const refs = Object.create(null);
     for (const [ref, list] of byRef) {
@@ -62,11 +68,13 @@
     return anyLink(url, url) + esc(raw.slice(url.length));
   }
 
+  const cardLink = (ref, ctx) => `<a href="${esc(`${ctx.base || ''}#item=${encodeURIComponent(record(ctx.refs, ref))}`)}">${esc(ref)}</a>`;
+
   // 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));
-      if (record(ctx.refs, w)) return `<a href="${esc(`${ctx.base || ''}#item=${encodeURIComponent(record(ctx.refs, w))}`)}">${esc(w)}</a>${rest}`;
+      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;
@@ -90,7 +98,7 @@
       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 += ctx.repo && !colour(bare) ? out(prUrl(ctx.repo, bare), 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);
       else html += wordLink(word, ctx);
     }
     return html + esc(s.slice(at));

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

@@ -0,0 +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/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/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 || 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 });
+})();

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

@@ -6,9 +6,11 @@
   const ARROW = icon(24, '<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>');
   const REFRESH = icon(18, '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>');
   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"/>');
   const id = (v) => (v ? ` id="${esc(v)}"` : '');
 
-  // Where the back arrow goes (docs/adr/0048-a-questions-takes-show-inline.md): 'back', one step back in history, when
+  // Where the back arrow goes (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): 'back', one step back in history, when
   // the page before was on this hub; else 'href', its backHref. A page a push opened always takes its backHref. idx is
   // the entry's index in history.state, set by an in-app router: when present, it alone says whether a step back exists.
   function backStep({ pushed = false, referrer = '', href, depth = 1, idx }) {
@@ -39,24 +41,27 @@
   }
 
   // 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, beside a phone-only logo). The controls (time and refresh, gear) paint disabled with refresh spinning until the
-  // page's script turns them on (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md). With controls
-  // false, trail (HTML) takes their place. 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).
+  // 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
+  // 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
+  // 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 = '…', settingsHref = 'settings.html', logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
+    controls = true, trail = '', time = '…', bulb = false, moon = false, settingsHref = 'settings.html', 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'
-      ? `<a class="back" href="${esc(backHref)}"${id(backId)}${attrs({ 'aria-label': backLabel })}>${ARROW}</a>${logo('hub phone-logo')}`
+      ? `${logo('hub')}<a class="back" href="${esc(backHref)}"${id(backId)}${attrs({ 'aria-label': backLabel })}>${ARROW}</a>`
       : 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;
     const script = lead === 'back' ? `<script>(${wireBack})(${backStep});</script>` : '';
     const h = `h${[1, 2, 3, 4, 5, 6].includes(level) ? level : 1}`;
-    return `<header class="top"><div class="brand">${first}<${h}${id(titleId)}>${esc(title)}</${h}></div>${nav}</header>${script}`;
+    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 });

package/board/public/ui-patch.js

@@ -0,0 +1,53 @@
+// The board's per-card patches (docs/adr/2026-11-04-0332-the-board-sends-per-card-patches.md): server.mjs makes one
+// from the board a page holds to the board now, and the page applies it to the board it holds. Cards patch by key,
+// questions and topics by id, each sent whole when it changed or dropped when gone, with the list's new order when
+// that changed; every other part of the board comes whole when it changed.
+// Needs nothing else: board/server.mjs runs this file in a vm context.
+(function () {
+  const LISTS = { items: 'key', owner: 'id', ownerTopics: 'id' };
+  const OWN = new Set(['version', 'generatedAt', ...Object.keys(LISTS)]);
+  const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+  function listPatch(from, to, id) {
+    const was = new Map(from.map((r) => [r[id], r]));
+    const now = new Set(to.map((r) => r[id]));
+    const set = to.filter((r) => !was.has(r[id]) || !same(was.get(r[id]), r));
+    const drop = from.map((r) => r[id]).filter((k) => !now.has(k));
+    if (!set.length && !drop.length && same(from.map((r) => r[id]), to.map((r) => r[id]))) return null;
+    const placed = [...from.map((r) => r[id]).filter((k) => now.has(k)), ...to.map((r) => r[id]).filter((k) => !was.has(k))];
+    const order = to.map((r) => r[id]);
+    return { set, drop, ...(same(placed, order) ? {} : { order }) };
+  }
+
+  // from and to are page boards, each with its version. → {since, version, generatedAt, set, unset, lists}
+  function boardPatch(from, to) {
+    const set = {};
+    for (const [k, v] of Object.entries(to)) if (!OWN.has(k) && (!(k in from) || !same(from[k], v))) set[k] = v;
+    const unset = Object.keys(from).filter((k) => !OWN.has(k) && !(k in to));
+    const lists = {};
+    for (const [name, id] of Object.entries(LISTS)) {
+      const p = listPatch(from[name] || [], to[name] || [], id);
+      if (p) lists[name] = p;
+    }
+    return { since: from.version, version: to.version, generatedAt: to.generatedAt, set, unset, lists };
+  }
+
+  // → a new board, leaving board as it was, or null when the patch was made against another version.
+  function applyPatch(board, patch) {
+    if (!board || board.version !== patch.since) return null;
+    const next = { ...board, ...patch.set, version: patch.version, generatedAt: patch.generatedAt };
+    for (const k of patch.unset) delete next[k];
+    for (const [name, p] of Object.entries(patch.lists)) {
+      const id = LISTS[name];
+      const gone = new Set(p.drop);
+      const byId = new Map((board[name] || []).filter((r) => !gone.has(r[id])).map((r) => [r[id], r]));
+      const fresh = p.set.filter((r) => !byId.has(r[id]));
+      for (const r of p.set) byId.set(r[id], r);
+      const order = p.order || [...(board[name] || []).map((r) => r[id]).filter((k) => !gone.has(k)), ...fresh.map((r) => r[id])];
+      next[name] = order.map((k) => byId.get(k));
+    }
+    return next;
+  }
+
+  Object.assign(globalThis.BoardUI ||= {}, { boardPatch, applyPatch });
+})();

package/board/public/ui-phase-bars.js

@@ -0,0 +1,17 @@
+// The phase bars: one bar per phase, those reached filled, a running one pulsing. An In Progress card draws the five
+// build phases (ui-cards.js) and a starting board's sidebar row its three start steps (ui-sidebar.js)
+// (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md). It needs nothing else, since
+// hub/hub.mjs renders the shell's first sidebar with it in a vm context. style.css draws the bars.
+(function () {
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  // strip: {reached, running, dim, label, fill}, or null for no bars. reached counts the phases reached, the last of them
+  // running when running is set; fill, a percent, fills the next bar that far.
+  function phaseBars(strip, phases) {
+    if (!strip) return '';
+    const { reached, running, dim, label, fill } = strip;
+    const bar = (i) => (i === reached - 1 && running ? '<i class="now"></i>' : i < reached ? '<i class="done"></i>'
+      : i === reached && fill !== undefined ? `<i class="fill" style="--p:${fill}%"></i>` : '<i class=""></i>');
+    return `<span class="phase-bars${dim ? ' dim' : ''}" role="img" aria-label="${esc(label)}" title="${esc(label)}">${phases.map((_, i) => bar(i)).join('')}</span>`;
+  }
+  Object.assign(globalThis.BoardUI ||= {}, { phaseBars });
+})();

package/board/public/ui-prompts.js

@@ -18,21 +18,21 @@
   // Whether one tap on an option answers: a single question that takes one pick.
   const oneTap = (p) => p.questions?.length === 1 && !p.questions[0].multiSelect;
 
-  // sending: true while the answer goes, which disables the line's buttons.
-  function promptItem(p, { picks = {}, sending = false } = {}) {
-    const off = sending ? ' disabled' : '';
+  // sending: while the answer goes, the tapped button: a choice ('allow', 'always', 'deny'), 'send', or an option as
+  // '<question index>:<label>'. It waits (ui.js BUSY) and the line's other buttons are disabled.
+  function promptItem(p, { picks = {}, sending = null } = {}) {
+    const off = (tapped) => (sending === null ? '' : sending === tapped ? BoardUI.BUSY : ' disabled');
     const where = [ago(p.at), p.cwd].filter(Boolean).map(esc).join(' · ');
     const head = `<div class="prompt-head"><b>${esc(p.questions ? 'Question' : p.tool)}</b><span class="muted small">${where}</span></div>`;
-    const status = sending ? '<span class="muted small">Sending…</span>' : '';
     if (p.questions) {
       const questions = p.questions.map((q, i) => `<div class="prompt-q"><p>${q.header ? `<span class="chip">${esc(q.header)}</span> ` : ''}${esc(q.question)}</p>
-<div class="prompt-options" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" data-prompt-q="${i}" data-prompt-opt="${esc(o.label)}" aria-pressed="${(picks[i] || []).includes(o.label)}"${off}><span class="lbl">${esc(o.label)}</span>${o.description ? `<span class="det">${esc(o.description)}</span>` : ''}</button>`).join('')}</div></div>`).join('');
-      const send = oneTap(p) ? '' : `<button type="button" class="primary" data-prompt-send${promptAnswer(p, picks) && !sending ? '' : ' disabled'}>Send</button>`;
-      return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${questions}<div class="prompt-actions">${send}<button type="button" class="deny" data-prompt-choice="deny"${off}>Skip</button>${status}</div></li>`;
+<div class="prompt-options" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" data-prompt-q="${i}" data-prompt-opt="${esc(o.label)}" aria-pressed="${(picks[i] || []).includes(o.label)}"${off(`${i}:${o.label}`)}><span class="lbl">${esc(o.label)}</span>${o.description ? `<span class="det">${esc(o.description)}</span>` : ''}</button>`).join('')}</div></div>`).join('');
+      const send = oneTap(p) ? '' : `<button type="button" class="primary" data-prompt-send${off('send') || (promptAnswer(p, picks) ? '' : ' disabled')}>Send</button>`;
+      return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${questions}<div class="prompt-actions">${send}<button type="button" class="deny" data-prompt-choice="deny"${off('deny')}>Skip</button></div></li>`;
     }
     const detail = p.detail ? `<pre class="prompt-detail">${esc(p.detail)}</pre>` : `<p class="prompt-what">Wants to ${esc(p.action)}</p>`;
     const rule = p.rule ? `<p class="muted small prompt-rule">Always allow adds <code>${esc(p.rule)}</code> until the session ends.</p>` : '';
-    return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${detail}<div class="prompt-actions"><button type="button" class="primary" data-prompt-choice="allow"${off}>Allow once</button><button type="button" data-prompt-choice="always"${off}>Always allow</button><button type="button" class="deny" data-prompt-choice="deny"${off}>Deny</button>${status}</div>${rule}</li>`;
+    return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${detail}<div class="prompt-actions"><button type="button" class="primary" data-prompt-choice="allow"${off('allow')}>Allow once</button><button type="button" data-prompt-choice="always"${off('always')}>Always allow</button><button type="button" class="deny" data-prompt-choice="deny"${off('deny')}>Deny</button></div>${rule}</li>`;
   }
 
   Object.assign(globalThis.BoardUI, { promptItem, promptAnswer, oneTap });

package/board/public/ui-questions.js

@@ -1,14 +1,18 @@
 // Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
 (function () {
-  const { esc, time, replyBody, attachments, attachButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
+  const { esc, time, replyBody, attachments, attachButton, dropZone, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
   // A short id such as A or C2 leads the label; a word id such as "inline" would repeat it. prototype-switcher.js answerLabel matches.
   const lead = (o) => (/^[A-Z][0-9]?$/i.test(o.id) ? `${o.id}. ` : '');
   const choiceLabel = (q, id) => { const o = q.options.find((x) => x.id === id); return o ? `${q.multi ? '' : lead(o)}${o.label}` : id || ''; };
   const option = (o, { type = 'radio', name, checked = false, numbered = true, shown = false }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}>
         <span><span class="lbl">${numbered ? esc(lead(o)) : ''}${esc(o.label)}</span>${o.recommended ? '<span class="rec">Recommended</span>' : ''}<div class="det">${esc(o.detail || '')}</div></span></label>`;
 
-  const noteComposer = (id, note) => `<div class="composer" data-composer="${esc(id)}"><textarea class="note" rows="2" placeholder="Note (optional)">${esc(note || '')}</textarea>
-      <div class="note-tools"><div class="pending-files" data-files></div>${attachButton()}</div></div>`;
+  const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
+  // A question's eye sends `prototype-request {key?, question, note, choice}` for that question alone, which resolves it
+  // (view-questions.js); a resolved question has none.
+  const questionEye = (q) => q.state === 'resolved' ? '' : protoButton('q:' + q.id, null, { label: 'Ask for a prototype instead' });
+  const noteComposer = (q, note) => `<div class="composer" data-composer="${esc('q:' + q.id)}">${dropZone(`<textarea class="note" rows="2" placeholder="Note (optional)">${esc(note || '')}</textarea>`)}
+      <div class="note-tools">${attachButton()}${questionEye(q)}<div class="pending-files" data-files></div></div></div>`;
 
   const QUESTION_STATE = {
     open: { label: 'open', tone: 'normal' },
@@ -16,10 +20,17 @@
     replied: { label: 'claude replied', tone: 'ready' },
     resolved: { label: 'resolved', tone: 'quiet' },
   };
+  // docs/adr/2026-11-02-1332-a-prototype-round-ends-with-a-one-take-confirm.md
+  // A topic's latest prototype round from /api/board ownerTopics: {n, state: making|back|closed, take}.
+  const roundChip = (r) => !r ? ''
+    : r.state === 'making' ? badge('normal', `${SPIN}Prototype round ${r.n}`)
+    : r.state === 'closed' ? badge('quiet', `Round ${r.n} closed · take ${esc(r.take)}`)
+    : badge('normal', `Prototype round ${r.n}`);
+  const RULE_ICON = '<svg 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="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>';
   function answerHistory(q, links = {}) {
     if (!q.answers.length) return '';
     const body = q.answers.map((a) => `<div class="ans"><div class="muted small">You · ${esc(time(a.ts))}</div>${esc(choiceLabel(q, a.choice))}${a.note ? `<div>${linkText(a.note, links)}</div>` : ''}${attachments(a.files)}</div>
-      ${a.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(a.reply), links)}</div>` : '<div class="muted small" style="margin-top:4px">Waiting for Claude…</div>'}`).join('');
+      ${a.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(a.reply), links)}</div>` : a.acted ? '' : '<div class="muted small" style="margin-top:4px">Waiting for Claude…</div>'}`).join('');
     const last = q.answers[q.answers.length - 1];
     return q.state === 'open' || !last.reply ? body : `<details><summary>Your answer and Claude's reply</summary>${body}</details>`;
   }
@@ -34,7 +45,7 @@
     : isPrototype(url) ? `<a class="pill proto" href="${esc(url)}">See the prototypes →</a>`
     : `<div class="small" style="margin-bottom:8px"><a href="${esc(url)}"${opensHere(url) ? '' : ' target="_blank" rel="noopener"'}>${esc(url.replace(/^https:\/\/(linear\.app\/[^/]+\/issue|github\.com)\//, ''))} ${LINK_ARROW}</a></div>`;
 
-  // A question's takes show inline (docs/adr/0048-a-questions-takes-show-inline.md): an option with `diagram` draws
+  // A question's takes show inline (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): an option with `diagram` draws
   // it with its `practice`, and on a question whose url is a prototype page any other option shows that page's take.
   const framed = (q) => isPrototype(q.url) && q.options.some((o) => !o.diagram);
   const inline = (q) => isPrototype(q.url) || q.options.some((o) => o.diagram);
@@ -74,24 +85,37 @@
     }
     return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
   }
+  // A confirm links its one take alone, and says why it is asked.
+  const confirmLines = (q) => !q.confirm_of || q.state === 'resolved' ? ''
+    : `<a class="pill proto pr-open" href="${esc(withParam(q.url, 'take', q.options[0].id))}">Open the prototype →</a>${q.state === 'open' ? `<div class="pr-rule">${RULE_ICON}A pick with a note gets a one-take confirm once Claude has updated the take.</div>` : ''}`;
   // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext;
   // fit(option id) supplies the measured grid and full-width heights.
   function questionCard(q, { n = 0, draft = {}, links = {}, fit = () => null } = {}) {
     const last = q.answers[q.answers.length - 1];
     const chosen = draft.choice ?? (last ? last.choice : null);
-    const st = QUESTION_STATE[q.state];
     return `<section class="q ${q.urgent && q.state === 'open' ? 'urgent' : ''}" id="${esc(q.id)}" data-q="${esc(q.id)}">
-      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge(st.tone, esc(st.label))}</div>
+      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge(QUESTION_STATE[q.state].tone, esc(QUESTION_STATE[q.state].label))}</div>
       <h3>${linkText(q.question, links)}</h3>
       ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
       ${framed(q) ? '' : questionLink(q.url)}
-      ${q.state === 'resolved' && q.resolved ? `<div class="small muted" style="margin-bottom:8px">Resolved: ${esc(q.resolved)} A new answer reopens it.</div>` : ''}
+      ${confirmLines(q)}
+      ${q.state === 'resolved' && q.resolved ? `<div class="small muted" style="margin-bottom:8px">Resolved: ${esc(q.resolved)}${/[.!?]$/.test(q.resolved) ? '' : '.'} A new answer reopens it.</div>` : ''}
       ${inline(q) ? takes(q, chosen, links, fit) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id })).join('')}
-      ${noteComposer('q:' + q.id, draft.note)}
+      ${noteComposer(q, draft.note)}
       ${answerHistory(q, links)}
     </section>`;
   }
-  const topicName = (t) => (String(t.title).match(/^([A-Z]+-\d+|[A-Z]\d+):/) || [])[1] || t.title;
+  // A card's pill is its ID, or for an ask (item:ask:<id>) the time it appeared; other topics keep their title.
+  const topicName = (t) => (t.askedAt ? BoardUI.cardTime(t.askedAt) : (String(t.title).match(/^([A-Z]+-\d+|[A-Z]\d+):/) || [])[1] || t.title);
+  // /api/board's ownerTopics, each card's topic named from its card, which the board sends in its place while the card
+  // is on the board (board/server.mjs pageBoard). cards: the board's items.
+  function cardTopics(topics, cards) {
+    const byKey = new Map(cards.map((c) => [c.key, c]));
+    return topics.map((t) => {
+      const c = t.title === undefined && byKey.get(t.card);
+      return c ? { ...t, title: `${c.ref}: ${c.title}`, summary: 'Questions about this work item.', ...(c.kind === 'ask' ? { askedAt: c.ask.askedAt } : {}) } : t;
+    });
+  }
   // Topics from /api/board ownerTopics, in order. pills: unresolved topics with an open question, plus the
   // current topic wherever it stands; waiting: the other unresolved topics, which wait only on Claude.
   function topicRow(topics, current) {
@@ -126,5 +150,5 @@
     },
   };
 
-  Object.assign(globalThis.BoardUI, { choiceLabel, option, answerHistory, questionCard, takes, topicName, topicRow, nextQuestion, sentNotice });
+  Object.assign(globalThis.BoardUI, { choiceLabel, option, answerHistory, questionCard, roundChip, takes, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
 })();