@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/ui-sidebar.js

@@ -1,10 +1,11 @@
-// The sidebar of every site (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md), drawn from the hub's
-// /_hub/sidebar.json. It needs only ui-page-header.js, loaded before it, for its head, which is the page header itself:
-// the app shell runs it through sidebar.js, and hub/hub.mjs renders the shell's first sidebar with both in a vm context.
+// The sidebar of every site (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md), drawn from the hub's
+// /_hub/sidebar.json. It needs only ui-page-header.js, loaded before it, for its head, which is the page header itself, and
+// ui-phase-bars.js for a starting board's steps: the app shell runs it through sidebar.js, and hub/hub.mjs renders the
+// shell's first sidebar with all three in a vm context.
 // Its links are root-absolute, since every site and hub page sits beside this one on the hub. sidebar.css styles it.
 (function () {
   // ui.js replaces the BoardUI global when it loads after this, so the header renderer is held here.
-  const { header } = globalThis.BoardUI || {};
+  const { header, phaseBars } = globalThis.BoardUI || {};
   const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
   const svg = (paths, size = 17) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
   const ICONS = {
@@ -54,7 +55,7 @@
   ];
   const siteHref = (s) => `/${encodeURIComponent(s.route)}/`;
 
-  // Switch mode's keys (sidebar.js; docs/adr/0056-switch-mode-letters-come-from-names-in-join-order.md): each linked row the
+  // Switch mode's keys (sidebar.js; docs/adr/2026-10-30-1102-switch-mode-letters-come-from-names-in-join-order.md): each linked row the
   // sidebar draws, boards first for numbering, as {href, title, board, num, letter, at}. The first nine boards take num '1'–'9'.
   // Every row takes as letter the first a–z letter of its title not yet taken, at index `at` of the title's characters,
   // claiming in this order: boards by `created`, then pages by `created`, a site with none after those with one, then
@@ -81,13 +82,13 @@
   // key: the row's switchKeys entry while switch mode shows, else undefined. The tile carries a board's number, or any
   // other row's letter, and the title marks its letter; sidebar.css shows them in place of the glyph under .ks-on.
   // mark: HTML after the title, such as Hub's moon.
-  function row({ href, icon, title, sub = '', extra = '', mark = '', on = false, cls = '', key }) {
+  function row({ href, icon, title, sub = '', extra = '', mark = '', ctx = '', on = false, cls = '', key }) {
     const shown = key && (key.board ? key.num : key.letter);
     const tileHtml = shown ? icon.replace(/<\/span>$/, `<span class="ks-key">${esc(shown)}</span></span>`) : icon;
     const chars = [...title];
     const titleHtml = key?.letter ? `${esc(chars.slice(0, key.at).join(''))}<span class="ks-u">${esc(chars[key.at])}</span>${esc(chars.slice(key.at + 1).join(''))}` : esc(title);
     return `<a class="sb-row${on ? ' on' : ''}${cls ? ` ${cls}` : ''}" href="${esc(href)}"${on ? ' aria-current="page"' : ''}>${tileHtml}`
-      + `<span class="sb-text"><span class="sb-title">${titleHtml}${mark}</span>${sub ? `<span class="sb-sub">${sub}</span>` : ''}${extra}</span></a>`;
+      + `<span class="sb-text">${ctx ? `<span class="sb-head"><span class="sb-title">${titleHtml}${mark}</span>${ctx}</span>` : `<span class="sb-title">${titleHtml}${mark}</span>`}${sub ? `<span class="sb-sub">${sub}</span>` : ''}${extra}</span></a>`;
   }
 
   // What waits on the owner on every site but `here`: the count on the logo that opens the drawer.
@@ -120,35 +121,96 @@
       + '<p class="sc-foot">Press h twice anywhere to open this. Esc to close.</p></div>';
   }
 
-  function updateRow(update) {
-    return update ? `<button type="button" class="sb-row sb-update-row" data-app-reload${update === 'reloading' ? ' disabled' : ''}>${tile('up', 'var(--accent)')}`
-      + `<span class="sb-text"><span class="sb-title">New version</span></span><span class="sb-go">${update === 'reloading' ? 'Reloading…' : 'Reload'}</span></button>` : '';
+  const ticketsLabel = (t) => (t.source === 'internal' ? `Internal · ${t.prefix}` : t.source === 'github' ? `GitHub issues${t.account ? ` · ${t.account}` : ''}` : `Linear · ${t.team}`);
+  // A board's context window: its owner session's latest percent at the row's top right, red from 90%, dimmed once the
+  // reading is older than ten minutes, with that age in its tooltip.
+  const CTX_STALE_MIN = 10;
+  const CTX_FULL_PERCENT = 90;
+  function contextWords(ctx) {
+    if (!ctx) return '';
+    const percent = Math.round(ctx.percent);
+    const minutes = Math.floor((Date.now() - Date.parse(ctx.at)) / 60_000);
+    const full = percent >= CTX_FULL_PERCENT ? ' full' : '';
+    if (!(minutes >= CTX_STALE_MIN)) return `<span class="sb-ctx${full}" title="${percent}% of its context window">${percent}% ctx</span>`;
+    const age = minutes < 60 ? `${minutes} min` : minutes < 1440 ? `${Math.floor(minutes / 60)} h` : `${Math.floor(minutes / 1440)} d`;
+    return `<span class="sb-ctx${full} stale" title="${percent}% of its context window, read ${age} ago">${percent}% ctx</span>`;
+  }
+  function askedWhen(iso, now) {
+    const minutes = Math.floor((now - Date.parse(iso)) / 60_000);
+    return minutes < 1 ? 'just now' : minutes < 60 ? `${minutes} min ago` : usageClock(iso);
+  }
+  // The sheet a failed start's row opens (sidebar.js), inside its <dialog aria-labelledby="failedStartTitle">: the error,
+  // what the start used and when it was asked, then Dismiss and Retry. s: a /_hub/sidebar.json starting entry. Only a
+  // New board start records a branch, and only that start can run again, so a row without one has no Retry.
+  function failedStart(s, { home, now = Date.now() } = {}) {
+    const fact = (name, value) => (value ? `<dt>${name}</dt><dd>${value}</dd>` : '');
+    return `<div class="sheet-body"><div class="sheet-head"><h2 id="failedStartTitle">${esc(s.title)} failed to start</h2><button type="button" data-failed-close aria-label="Close sheet">✕</button></div>`
+      + `<p class="fs-error">${esc(s.error || "Its session didn't answer within 15 minutes.")}</p>`
+      + `<dl class="fs-facts">${fact('Repo', s.repo && esc(repoLabel(s.repo, home)))}${fact('Branch', s.branch && `<code>${esc(s.branch)}</code>`)}`
+      + `${fact('Tickets', s.tickets && esc(ticketsLabel(s.tickets)))}${fact('Asked', s.askedAt && esc(askedWhen(s.askedAt, now)))}</dl>`
+      + '<p class="fs-refused" role="alert" hidden></p>'
+      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
+  }
+
+  // A starting board's three steps (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md):
+  // s.step is cloning, starting (the orchestrator's session) or landing (the session joining the hub), since s.stepAt.
+  // Cloning fills its bar to git's percent; the later steps run the bars' pulse, never a fill.
+  const START_STEPS = { cloning: 'cloning', starting: 'starting orchestrator', landing: 'landing it' };
+  const STEP_KEYS = Object.keys(START_STEPS);
+  // The lower row: the step, cloning with its percent, and its seconds. A host clock ahead of this device's counts from 0s.
+  function startCaption(s, now = Date.now()) {
+    const seconds = Math.max(0, Math.floor((now - Date.parse(s.stepAt)) / 1000));
+    return `${s.step === 'cloning' ? `cloning (${s.percent || 0}%)` : START_STEPS[s.step]} · ${seconds}s`;
+  }
+  function startSteps(s) {
+    const at = STEP_KEYS.indexOf(s.step);
+    const label = `${START_STEPS[s.step]}, step ${at + 1} of ${STEP_KEYS.length}`;
+    const strip = s.step === 'cloning' ? { reached: 0, running: false, fill: s.percent || 0, label } : { reached: at + 1, running: true, label };
+    return `<span class="sb-steps">${phaseBars(strip, STEP_KEYS)}</span>`;
+  }
+
+  // The New version row. update: the app's reload, null | 'ready' | 'reloading', which comes first. upgrade:
+  // /_hub/sidebar.json's npm update, null | {state: available | waiting | updating | failed, version, builders, error}
+  // (hub/upgrade.mjs; docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). A reload, and an asked
+  // update until it runs out, waits (ui.js BUSY): its pill keeps its blue with a spinner in place of its word.
+  function updateRow(update, upgrade) {
+    const button = (attr, busy, title, sub, go) => `<button type="button" class="sb-row sb-update-row" ${attr}${busy ? globalThis.BoardUI.BUSY : ''}>${tile('up', 'var(--accent)')}`
+      + `<span class="sb-text"><span class="sb-title">${title}</span>${sub ? `<span class="sb-sub">${esc(sub)}</span>` : ''}</span><span class="sb-go">${go}</span></button>`;
+    if (update) return button('data-app-reload', update === 'reloading', 'New version', '', 'Reload');
+    if (!upgrade) return '';
+    if (upgrade.state === 'waiting') return button('data-app-upgrade', true, `Update waits for ${upgrade.builders} implementer${upgrade.builders === 1 ? '' : 's'}`, '', 'Upgrade');
+    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Update available', '', 'Upgrade');
+    if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Upgrade');
+    return button('data-app-upgrade', false, 'Update available', '', 'Upgrade');
   }
 
   // data: /_hub/sidebar.json. here: a site's route or a hub page's path without its leading slash. device: this device's push
   // subscription as sidebar.js finds it, 'on' | 'off' | 'blocked' | 'install' (iOS outside the Home Screen app), or
   // null while unknown or unsupported. switching: switch mode shows, each row with its key and the hint on the Boards label.
   // update: null | 'ready' | 'reloading'.
-  function sidebar(data, { here = '', device = null, switching = false, update = null } = {}) {
+  // now: the time a starting board's seconds count to.
+  function sidebar(data, { here = '', device = null, switching = false, update = null, now = Date.now() } = {}) {
     const sites = data?.sites || [];
     const keys = switching ? new Map(switchKeys(data).map((k) => [k.href, k])) : null;
     const paused = data?.pause?.state === 'paused';
     const siteRow = (s) => {
-      const sub = paused && s.board ? word('wait', 'Paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
-      return row({ href: siteHref(s), icon: s.icon, title: s.title, sub: sub ? `<span class="sb-status">${sub}</span>` : '', on: s.route === here, key: keys?.get(siteHref(s)) });
+      const sub = paused && s.board ? word('wait', 'paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
+      return row({ href: siteHref(s), icon: s.icon, title: s.title, sub: sub ? `<span class="sb-status">${sub}</span>` : '', ctx: contextWords(s.ctx), on: s.route === here, key: keys?.get(siteHref(s)) });
     };
     const boards = sites.filter((s) => s.board);
     const pages = sites.filter((s) => !s.board);
     const plus = `<span class="icon sb-plus" aria-hidden="true">${svg(ICONS.plus, 20)}</span>`;
-    const pending = (data?.starting || []).map((s) => `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
-      + `<span class="sb-text"><span class="sb-title">${s.failed ? "Didn't start" : s.phase === 'cloning' ? 'Cloning…' : 'Starting…'}</span><span class="sb-sub">${esc(s.title)}${s.repo ? ` · ${esc(repoLabel(s.repo, data.home))}` : ''}${s.failed ? '' : s.phase === 'cloning' ? ' · Cloning from GitHub' : ' · Waiting for the board to answer'}</span>${s.error ? `<span class="sb-sub">${esc(s.error)}</span>` : ''}</span>`
-      + (s.failed ? `<button type="button" class="sb-dismiss" data-dismiss-board="${esc(s.route)}" aria-label="Dismiss ${esc(s.title)}">Dismiss</button>` : '') + '</div>').join('');
+    const pending = (data?.starting || []).map((s) => (s.failed
+      ? `<button type="button" class="sb-row sb-starting sb-failed" data-starting="${esc(s.route)}" data-failed-start="${esc(s.route)}" aria-haspopup="dialog">${plus}`
+        + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span><span class="sb-sub">failed to start</span></span></button>`
+      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
+        + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span>${startSteps(s)}<span class="sb-sub sb-step">${esc(startCaption(s, now))}</span></span></div>`)).join('');
     const newBoard = `<button type="button" class="sb-row sb-new" data-new-board aria-haspopup="dialog">${plus}<span class="sb-text"><span class="sb-title">New board</span></span></button>`;
-    const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', '#ef4444'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
-      : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', '#ef4444'), title: 'Add Claude to your Home Screen', sub: 'Notifications come only to the Home Screen app', cls: 'sb-turnon' })
+    const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
+      : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Add Claude to your Home Screen', sub: 'Notifications come only to the Home Screen app', cls: 'sb-turnon' })
       : '';
     const usage = sidebarUsage(data?.usage);
-    const hub = paused ? { tone: 'wait', word: 'Paused', detail: `until ${usageClock(data.pause.resets_at)}` } : data?.hub;
+    const hub = paused ? { tone: 'wait', word: 'paused', detail: `until ${usageClock(data.pause.resets_at)}` } : data?.hub;
     const n = data?.notifications || {};
     const lower = (text) => String(text || '').replace(/^\w/, (c) => c.toLowerCase());
     const notify = device === 'blocked' ? word('needs', 'Notifications blocked on this device')
@@ -165,7 +227,7 @@
     const close = `<div class="nav"><button type="button" class="sb-close" data-sidebar-close aria-label="Close boards">${svg(ICONS.close, 20)}</button></div>`;
     return header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
       leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } })
-      + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update)}</div><div class="sb-group">`
+      + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update, data?.upgrade)}</div><div class="sb-group">`
       + UTILITY.map((f) => row({ ...f, on: f.href.replace(/\/$/, '') === selected, sub: subs[f.href], mark: f.href === '/_hub/' ? moon : '', ...(f.href === '/_hub/' && usage ? { extra: usage, cls: 'sb-hub-usage' } : {}), key: keys?.get(f.href) })).join('')
       + `</div>${turnOn}</section>`
       + (pages.length ? `<section class="sb-pages" aria-label="Pages"><div class="sb-label">Pages</div><div class="sb-group">${pages.map(siteRow).join('')}</div></section>` : '')
@@ -173,5 +235,5 @@
       + `<div class="sb-group">${boards.map(siteRow).join('')}${pending}${newBoard}</div></section></div>`;
   }
 
-  Object.assign(globalThis.BoardUI ||= {}, { sidebar, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
+  Object.assign(globalThis.BoardUI ||= {}, { sidebar, failedStart, startCaption, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
 })();

package/board/public/ui-snapshot.js

@@ -1,17 +1,28 @@
 // The last board this device showed, which the board page paints dimmed until the fresh board lands, and what the
-// page may do meanwhile (docs/adr/0028-the-board-opens-on-the-last-visit.md). Needs ui.js.
+// page may do meanwhile (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md). Needs ui.js.
 (function () {
-  const VERSION = 1;
   // Characters, one board's most; app-snapshot.js keeps every board's within three of these.
   const SNAPSHOT_MAX = 900000;
   const ACTIVE_LANES = ['review', 'stale', 'progress', 'todo'];
 
-  // threads maps item keys to thread messages (app.js state.threadCache). Threads of `keep` go in first, then the
-  // rest while they fit under max; threads of items no longer on the board are dropped. Null when the board alone won't fit.
-  function packSnapshot(board, threads, { savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
-    const head = `{"v":${VERSION},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(board)},"threads":{`;
-    if (head.length + 2 > max) return null;
-    const onBoard = new Set(board.items.map((i) => i.key));
+  // What a first paint shows of board: every card as the board sent it, Done cards already slim (board/domain.mjs
+  // slimDone), or the open lanes alone when openOnly. It keeps no version, since it isn't the board that version names,
+  // so the first reload downloads the whole board (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+  const firstPaint = ({ version: _, ...board }, openOnly) => ({ ...board, items: openOnly ? board.items.filter((it) => it.lane !== 'done') : board.items });
+
+  // threads maps item keys to thread messages (app.js state.threadCache). The board goes in as firstPaint, then threads of
+  // `keep` first and the rest while they fit under max; threads of items no longer on the board are dropped. When the
+  // board still won't fit, Done cards go too. build is the saving page's (app.html data-build). Null when open lanes alone won't fit.
+  function packSnapshot(board, threads, { build, savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
+    const headOf = (b) => `{"build":${JSON.stringify(build)},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(b)},"threads":{`;
+    let shown = firstPaint(board, false);
+    let head = headOf(shown);
+    if (head.length + 2 > max) {
+      shown = firstPaint(board, true);
+      head = headOf(shown);
+      if (head.length + 2 > max) return null;
+    }
+    const onBoard = new Set(shown.items.map((i) => i.key));
     let out = head;
     let n = 0;
     for (const key of new Set([...keep, ...threads.keys()])) {
@@ -24,11 +35,12 @@
     return `${out}}}`;
   }
 
-  // → {savedAt, board, threads: {key: messages}}, or null for anything packSnapshot didn't write.
-  function unpackSnapshot(raw) {
+  // → {savedAt, board, threads: {key: messages}}, or null for anything packSnapshot didn't write under this build: code
+  // from another build may read the board's shape differently, and a paint that throws stops the live load.
+  function unpackSnapshot(raw, build) {
     let s;
     try { s = JSON.parse(raw); } catch { return null; }
-    if (s?.v !== VERSION || !Array.isArray(s.board?.items) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
+    if (s?.build !== build || !Array.isArray(s.board?.items) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
     const threads = Object.fromEntries(Object.entries(s.threads && typeof s.threads === 'object' ? s.threads : {}).filter(([, m]) => Array.isArray(m)));
     return { savedAt: s.savedAt, board: s.board, threads };
   }
@@ -42,7 +54,7 @@
   // What the board page takes taps on. view is 'snapshot' while the last visit shows, 'fresh' once a board load landed,
   // and null before either. blocked selects the controls that send to the host and wait for the fresh board; style.css's
   // INT-61 block dims the same list.
-  const SNAPSHOT_BLOCKED = ['.actions button', 'button[data-plan]', 'button[data-bump]', 'button[data-confirm="bump"]', 'button[data-edit]', 'button[data-withdraw]',
+  const SNAPSHOT_BLOCKED = ['.actions button', 'button[data-plan]', 'button[data-bump]', 'button[data-card-bump]', 'button[data-edit]', 'button[data-withdraw]',
     'button[data-check-github]', 'form[data-reply] button[type=submit]', 'form[data-reply] button[data-quick]', 'form[data-reply] button[data-proto]', 'form[data-reply] button[data-confirm]', '.prompt button'].join(', ');
   const liveControls = (view) => {
     const fresh = view !== 'snapshot';
@@ -52,5 +64,10 @@
   // before and after map a line's id to its text; the ids of the lines that are new or read differently flash once.
   const changedLines = (before, after) => Object.keys(after).filter((id) => globalThis.BoardUI.record(before, id) !== after[id]);
 
-  Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, SNAPSHOT_MAX });
+  // What counts as a card's update: a new thread line, a status or Next line change, or a PR or CI change
+  // (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md). Two board items read the same exactly when it is unchanged.
+  const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.status ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? null,
+    it.next ?? null, it.ask?.state ?? null, ...(it.prs || []).map((pr) => [pr.state, pr.isDraft, pr.reviewDecision, pr.checks?.state ?? null])]);
+
+  Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX });
 })();

package/board/public/ui-threads.js

@@ -1,6 +1,7 @@
-// A card's thread: Claude's lines, the owner's messages and their replies. Needs ui.js, ui-links.js and ui-enums.js.
+// A card's thread: the orchestrator's lines (who claude, named Orchestrator), its builders' asks, the owner's messages and
+// their replies. Needs ui.js, ui-links.js and ui-enums.js.
 (function () {
-  const { esc, time, etaLine, replyBody, attachments, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, BUTTON } = globalThis.BoardUI;
+  const { esc, time, etaLine, replyBody, attachments, attachButton, dropZone, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, BUTTON } = globalThis.BoardUI;
   const VIA = { slack: ' · Slack', github: ' · GitHub' };
   // A link to a card on this board (#item=<key>) or on another board (/<route>/#item=<key>, an ask's move), or ''.
   function cardLink(link) {
@@ -24,32 +25,45 @@
     out.sort((a, b) => a.at.localeCompare(b.at) || a.i - b.i || a.part - b.part);
     return out.map(({ m, of }, n) => (of ? { ...m, quote: out[n - 1]?.m === of ? '' : of.text || '' } : m));
   };
-  // A message being edited shows its edit box in place of its text; app-asks.js handles the form.
-  const editForm = (id, text) => `<form class="edit-form" data-edit-form="${esc(id)}"><textarea rows="3">${esc(text)}</textarea>
-        <div class="row"><span></span><span><button type="button" data-edit-cancel>Cancel</button> <button class="primary" type="submit">Save</button></span></div></form>`;
-  const line = (m, links, edits) => (m.kind === 'reply'
-    ? `<div class="msg claude reply-msg"><div class="who">Claude · ${esc(time(m.ts))}</div>${m.quote ? `<blockquote class="quote">${linkText(m.quote, links)}</blockquote>` : ''}<div class="body">${linkHtml(replyBody(m.reply), links)}</div></div>`
+  // A message being edited shows its edit box in place of its text; app-asks.js handles the form, and attach.js the
+  // files it adds to the message, under composer id edit:<event id>.
+  const editForm = (id, text) => `<form class="edit-form" data-edit-form="${esc(id)}" data-composer="edit:${esc(id)}">${dropZone(`<textarea rows="3">${esc(text)}</textarea>`)}
+        <div class="pending-files" data-files></div>
+        <div class="row">${attachButton()}<span><button type="button" data-edit-cancel>Cancel</button> <button class="primary" type="submit">Save</button></span></div></form>`;
+  // batched: an answer followed by another of the owner's answers in its state, which carries the batch's Waiting for Claude.
+  const line = (m, links, edits, batched = false) => (m.kind === 'reply'
+    ? `<div class="msg claude reply-msg"><div class="who">Orchestrator · ${esc(time(m.ts))}</div>${m.quote ? `<blockquote class="quote">${linkText(m.quote, links)}</blockquote>` : ''}<div class="body">${linkHtml(replyBody(m.reply), links)}</div></div>`
     : m.kind === 'ask-link' ? `<div class="msg link"><a href="${esc(m.link)}">${esc(m.text)} →</a></div>`
-    : m.kind === 'status' ? `<div class="msg builder-status"><span class="working-dot" aria-hidden="true"></span>${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
-    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}"><span class="agent-dot" aria-hidden="true"></span>${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
+    : m.request ? `<div class="msg request">${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'status' ? `<div class="msg builder-status${m.planner ? ' planner' : ''}"><span class="working-dot" aria-hidden="true"></span>${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'calls' ? `<details class="msg calls"><summary>${esc(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
+    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}"><span class="agent-dot" aria-hidden="true"></span>${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
         ${m.canDelete || m.canEdit ? `<div class="ask-actions">${m.canEdit ? editButton(m.eventId) : ''}${m.canDelete ? withdrawButton(m.eventId) : ''}</div>` : ''}
-        <div class="who">${m.who === 'love' ? 'You' : m.who === 'claude' ? 'Claude' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
+        <div class="who">${m.who === 'love' ? 'You' : m.who === 'claude' ? 'Orchestrator' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
         <div class="body"${edits.has(m.eventId) ? ' hidden' : ''}>${m.html ? linkHtml(m.html, links) : linkText(m.text, links)}</div>${edits.has(m.eventId) ? editForm(m.eventId, edits.get(m.eventId).text) : ''}${attachments(m.files)}
+        ${m.log ? `<div class="small"><a href="log.html?file=${encodeURIComponent(m.log)}">Open the log →</a></div>` : ''}
         ${m.link ? `<div class="small">${cardLink(m.link) || anyLink(m.link, m.link)}</div>` : ''}
-        ${m.eventId ? msgFooter(m) : ''}
+        ${m.eventId && !batched ? msgFooter(m) : ''}
       </div>`);
 
   const STEP = 3;
-  const NOT_MESSAGE = new Set(['status', 'agent', 'ask-link']);
+  const UNREAD_CAP = 10;
+  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link']);
   const isMessage = (m) => !NOT_MESSAGE.has(m.kind);
-  // The badge's unread test (domain.mjs othersAt, ui-cards.js unreadCount).
-  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && m.who !== 'love' && String(m.ts) > seenAt;
+  // Only Claude's and GitHub's messages are unread, as on the badge (domain.mjs othersAt, ui-cards.js unreadCount); the
+  // orchestrator's answer to a builder's ask never is.
+  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && m.kind !== 'builder-answer' && (m.who === 'claude' || m.via === 'github') && String(m.ts) > seenAt;
+  const batchedAt = (lines, i) => {
+    const next = lines.slice(i + 1).find(isMessage);
+    return lines[i].kind === 'owner-answer' && next?.kind === 'owner-answer' && stateOf(next) === stateOf(lines[i]);
+  };
+  // The window opens from the oldest unread message, at most UNREAD_CAP messages back; a message being edited always shows.
   function threadWindow(lines, { seenAt = null, more = 0, upto = null }, edits) {
     const counted = lines.flatMap((m, i) => (isMessage(m) && (!upto || String(m.ts) <= upto) ? [i] : []));
     const firstUnread = lines.findIndex((m) => unread(m, seenAt));
     const unreadSpan = firstUnread < 0 ? 0 : counted.filter((i) => i >= firstUnread).length;
-    const want = Math.max(STEP, unreadSpan) + STEP * more;
-    const pinned = lines.findIndex((m) => m.eventId && (edits.has(m.eventId) || ['waiting', 'working'].includes(stateOf(m))));
+    const want = Math.max(STEP, Math.min(UNREAD_CAP, unreadSpan)) + STEP * more;
+    const pinned = lines.findIndex((m) => m.eventId && edits.has(m.eventId));
     const start = Math.min(counted.length > want ? counted[counted.length - want] : 0, pinned < 0 ? Infinity : pinned);
     const hidden = lines.filter((m, i) => i < start && isMessage(m)).length;
     return { start: hidden ? start : 0, hidden };
@@ -65,16 +79,17 @@
     const { start, hidden } = view ? threadWindow(lines, view, edits) : { start: 0, hidden: 0 };
     const shown = lines.slice(start);
     if (start && shown[0].kind === 'reply' && !shown[0].quote) shown[0] = { ...shown[0], quote: lines[start - 1].text || '' };
-    return (hidden ? moreButton(hidden) : '') + shown.map((m) => line(m, links, edits)).join('');
+    return (hidden ? moreButton(hidden) : '') + shown.map((m, i) => line(m, links, edits, batchedAt(lines, start + i))).join('');
   }
 
-  // The reply form's Done, just left of Send, on every card not in Done: an ask's sends ask-done, a work card's or
-  // follow-up's card-done, which reads "Closing…" until the session sets its status
-  // (docs/adr/0035-an-ask-can-wait-in-progress-until-the-owner-marks-it-done.md).
-  function doneButton(it, sending = false) {
+  // The reply form's Done sends ask-done or card-done; the board applies it before the session follows up.
+  // docs/adr/2026-11-02-0009-the-board-applies-the-owners-hold-resume-and-done-at-once.md
+  // Orange while it clears an ask's Action needed, primary while a reopened card waits only on it
+  // (docs/adr/2026-11-03-0137-a-card-waiting-only-to-be-closed-has-no-action-needed.md).
+  function doneButton(it) {
     if (!it?.finishable) return '';
-    const closing = it.kind !== 'ask' && (sending || it.closing);
-    return `<button type="button"${it.resolvedBy === BUTTON.markDone ? ' class="resolves"' : ''} data-confirm="finish" data-key="${esc(it.key)}"${closing ? ' disabled' : ''}>${closing ? 'Closing…' : 'Done'}</button>`;
+    const tone = it.resolvedBy === BUTTON.markDone ? 'resolves' : it.awaitsDone ? 'closes' : '';
+    return `<button type="button"${tone ? ` class="${tone}"` : ''} data-confirm="finish" data-key="${esc(it.key)}">Done</button>`;
   }
 
   Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton });

package/board/public/ui.js

@@ -2,8 +2,6 @@
 // string and touches no DOM or storage: ui.test.mjs runs these files in node:vm, where neither exists. Load this first.
 // fetchJSON is the side pages' one way to read the board's API.
 (function () {
-  // A bare ↗ can draw as an emoji tile on iOS; U+FE0E asks for its text glyph.
-  const LINK_ARROW = '↗\uFE0E';
   const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
   const record = (records, key) => (Object.hasOwn(records || {}, key) ? records[key] : undefined);
   const time = (iso) => new Date(iso).toLocaleString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' });
@@ -26,6 +24,14 @@
     const day = d.toDateString() === now.toDateString() ? '' : `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })}, `;
     return `ETA about ${day}${clock(d)}`;
   }
+  // A card's last line: the time only today, with the day before today, and with the year too past 365 days.
+  function cardTime(iso, now = new Date()) {
+    const d = new Date(iso);
+    const at = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    if (d.toDateString() === now.toDateString()) return at;
+    const day = d.toLocaleDateString([], { month: 'numeric', day: 'numeric', ...(now - d > 365 * 86400000 ? { year: 'numeric' } : {}) });
+    return `${day}, ${at}`;
+  }
   const replyBody = (reply) => reply.html ?? esc(JSON.stringify(reply.json));
 
   // Attachments are uploads from POST /api/upload: {name, url, path, type, size}. Only uploads/ URLs become links.
@@ -43,14 +49,18 @@
   }
   const CLIP = '<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"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
   const attachButton = () => `<label class="attach" title="Attach files"><input type="file" multiple data-attach aria-label="Attach files">${CLIP}</label>`;
-  const icon = (body, size = 18) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+  // A composer's text box, which attach.js outlines with Drop to attach while files are dragged over the composer.
+  const dropZone = (textarea) => `<div class="dz">${textarea}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
+  const icon = (body, size = 18, attrs = '') => `<svg${attrs} width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+  // An SVG, not ↗: iOS Safari can draw ↗ as an emoji tile even with U+FE0E.
+  const LINK_ARROW = icon('<path d="M7 17 17 7"/><path d="M7 7h10v10"/>', '1em', ' class="link-arrow" style="vertical-align:-0.125em"');
   const EYE = icon('<path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/>');
   const TRASH = icon('<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>');
   const ELLIPSIS = icon('<circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/>');
-  // Asks Claude for throwaway prototypes of one item (docs/adr/0015-prototypes-come-on-request.md).
-  function protoButton(id, state = null) {
+  // Asks Claude for throwaway prototypes of one item (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
+  function protoButton(id, state = null, { label = 'Ask for prototypes' } = {}) {
     if (state?.pending) return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" data-proto-pending="${esc(state.pending)}" aria-label="Prototypes are being made" title="Prototypes are being made">${ELLIPSIS}</button>`;
-    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="Ask for prototypes" title="Ask for prototypes">${EYE}</button>`;
+    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}">${EYE}</button>`;
   }
   // latestBump is the data.id of the newest ask-bump event.
   const protoNotice = (eventId, latestBump) => (latestBump === eventId
@@ -61,13 +71,17 @@
   // Deletes or edits a pending ask or thread message; app-asks.js handles [data-withdraw] and [data-edit] on one path.
   const withdrawButton = (id) => `<button class="ghost icon" data-withdraw="${esc(id)}" aria-label="Delete" title="Delete">${TRASH}</button>`;
   const editButton = (id) => `<button class="ghost icon" data-edit="${esc(id)}" aria-label="Edit" title="Edit">${PENCIL}</button>`;
-  // A waiting ask's bump, which app-asks.js sends as ask-bump {id}. A work card's is the same icon, which app-cards.js
-  // confirms before it sends card-bump {key} (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md).
-  const bumpButton = (it, top) => `<button class="ghost icon" data-bump="${esc(it.id)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
-  const cardBumpButton = (key, top) => `<button class="ghost icon" data-confirm="bump" data-key="${esc(key)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
-  const workingLine = '<span class="working-dot" aria-hidden="true"></span>Working on it';
+  // A waiting ask's bump, which app-asks.js sends as ask-bump {id}, filled orange once bumped and disabled on the latest
+  // bump. A work card's is the same icon: app-cards.js sends card-bump {key} with no confirm, and on a bumped card, where
+  // it is filled orange, card-unbump {key} (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md,
+  // docs/adr/2026-11-03-0301-build-on-a-blocked-card-queues-it.md).
+  const bumpButton = (it, top) => `<button class="ghost icon${it.bumpedAt ? ' bumped' : ''}" data-bump="${esc(it.id)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
+  const cardBumpButton = (key, bumped) => (bumped
+    ? `<button class="ghost icon bumped" data-card-bump="${esc(key)}" data-bumped aria-pressed="true" aria-label="Unbump" title="Bumped. Tap to unbump">${BUMP}</button>`
+    : `<button class="ghost icon" data-card-bump="${esc(key)}" aria-pressed="false" aria-label="Bump to top" title="Bump to top">${BUMP}</button>`);
+  const workingLine = '<span class="thinking"><span class="working-dot" aria-hidden="true"></span>thinking</span>';
   // html is markup the caller has escaped; href, title and attrs values are escaped here.
-  const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready']);
+  const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready', 'merged']);
   function badge(tone, html, { href, title, button = false, attrs = {} } = {}) {
     if (!BADGE_TONES.includes(tone)) throw new Error(`unknown badge tone: ${tone}`);
     const extra = Object.entries({ href, title, ...attrs }).filter(([, v]) => v != null).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
@@ -200,21 +214,87 @@
     }
     lastHtml.set(el, html);
     if (openDetails.size) for (const d of el.querySelectorAll('details:not([open])')) if (openDetails.has(detailsKey(d))) d.open = true;
+    for (const w of waits) { const b = waitingButton(w); if (b && !b.classList.contains(w.mark)) markWaiting(b, w); }
     return true;
   }
 
+  // Closes <details> d at once: its toggle event comes a task later, and a setHTML before it would reopen it.
+  function closeDetails(d) {
+    openDetails.delete(detailsKey(d));
+    d.open = false;
+  }
+
+  // A tap that saves something waits for the server (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md,
+  // docs/adr/2026-11-03-1915-every-pending-control-waits-in-one-style.md): waitOn(control, promise, {group}) disables
+  // control until promise settles and marks it tap-waiting and aria-busy. style.css button[aria-busy="true"] keeps a
+  // button's colours and width and shows a spinner in its text colour in place of its content, or pulses a bump icon
+  // orange. A toggle, select or field keeps its face, with a spinner beside it: after its caption in a .tk-field, else
+  // just before it. group: the other choices of the same setting, disabled (tap-blocked) with no spinner meanwhile.
+  // A repaint meanwhile (setHTML) patches each back to its markup, so setHTML marks it again, found by its id and data
+  // attributes when the repaint replaced it. Settling restores the disabled and aria-busy its latest markup had. → promise
+  // Work that outlives its request (a restart, an update, a merge) draws its button with BUSY in its markup until the
+  // state the page draws from says the work is done.
+  const BUSY = ' disabled aria-busy="true"';
+  const waits = new Set();
+  function markWaiting(b, w) {
+    w.el = b;
+    w.disabled = b.disabled;
+    w.busy = b.getAttribute('aria-busy');
+    b.disabled = true;
+    b.classList.add(w.mark);
+    if (w.mark !== 'tap-waiting') return;
+    b.setAttribute('aria-busy', 'true');
+    if (b.tagName === 'BUTTON') return;
+    w.spin?.remove();
+    w.spin = document.createElement('span');
+    w.spin.setAttribute('class', 'try-spin tap-beside');
+    w.spin.setAttribute('aria-hidden', 'true');
+    const caption = b.closest('.tk-field')?.firstElementChild;
+    if (caption && caption !== b) caption.appendChild(w.spin);
+    else b.before(w.spin);
+  }
+  const waitingButton = (w) => (w.el.isConnected && w.el.matches(w.selector) ? w.el
+    : w.named ? document.body.querySelector(w.selector) : null);
+  function waitFor(el, mark) {
+    const named = [...el.attributes].filter(({ name }) => name === 'id' || name.startsWith('data-'));
+    const w = { mark, selector: el.tagName.toLowerCase() + named.map(({ name, value }) => (value ? `[${name}="${CSS.escape(value)}"]` : `[${name}]`)).join(''), named: named.length > 0 };
+    markWaiting(el, w);
+    waits.add(w);
+    return w;
+  }
+  function waitOn(control, promise, { group = [] } = {}) {
+    const mine = [waitFor(control, 'tap-waiting'), ...[...group].filter((el) => el !== control).map((el) => waitFor(el, 'tap-blocked'))];
+    const done = () => {
+      for (const w of mine) {
+        waits.delete(w);
+        w.spin?.remove();
+        // setHTML keeps w.el the node it last marked; one a plain innerHTML replaced is gone with its mark.
+        const b = w.el;
+        if (!b.classList.contains(w.mark)) continue;
+        b.classList.remove(w.mark);
+        if (w.mark === 'tap-waiting') { if (w.busy === null) b.removeAttribute('aria-busy'); else b.setAttribute('aria-busy', w.busy); }
+        b.disabled = w.disabled;
+      }
+    };
+    promise.then(done, done);
+    return promise;
+  }
+
   // While a board restarts, the hub answers its own 502 page, and a request can fail outright. fetchJSON waits that out:
   // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs) and retries with a growing backoff,
   // then throws once about limit ms have passed. Any other answer resolves {ok, status, body}, a 404's {error} included.
+  // tag is the version of the board the page holds: an unchanged board answers 304, which resolves with body null
+  // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
   const RESTARTING = 'Board restarting…';
   const restartNotice = () => `<span class="muted small restarting">${RESTARTING}</span>`;
-  async function fetchJSON(url, { onWait = () => {}, limit = 30000, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
+  async function fetchJSON(url, { onWait = () => {}, limit = 30000, tag = null, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
     let waited = 0;
     let delay = 500;
     for (;;) {
       let failure;
       try {
-        const r = await get(url, { cache: 'no-store' });
+        const r = await get(url, { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) });
+        if (r.status === 304) return { ok: true, status: 304, body: null };
         const body = await r.text().then((t) => JSON.parse(t)).catch(() => undefined);
         if (body !== undefined && r.status < 500) return { ok: r.ok, status: r.status, body };
         failure = new Error(r.status >= 500 ? `the board answered ${r.status}` : 'the board did not answer with JSON');
@@ -229,7 +309,7 @@
 
   globalThis.BoardUI = {
     LINK_ARROW,
-    esc, record, time, ago, since, etaLine, replyBody, setHTML, fetchJSON, RESTARTING, restartNotice,
-    attachments, attachButton, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+    esc, record, time, ago, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, fetchJSON, RESTARTING, restartNotice,
+    attachments, attachButton, dropZone, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
   };
 })();

package/board/public/view-frame.js

@@ -1,5 +1,5 @@
 // Any other page on the hub as a view of the app shell (shell.js): another site, a prototype, or a board page that isn't
-// a view of its own, in a same-origin frame beside the board header (docs/adr/0055-one-app-for-the-whole-hub.md). The
+// a view of its own, in a same-origin frame beside the board header (docs/adr/2026-10-29-2005-one-app-for-the-whole-hub.md). The
 // header's title follows the page's, and Open alone ↗ loads the page by itself (?alone=1, hub/shell.mjs pageOf). A
 // page that draws the board header itself, such as a prototype or another site's page, hides this one; its logo then
 // toggles the sidebar as this one's would, and hides while the rail shows. The page's own navigations stay in the frame