@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/app-arch.js

@@ -1,4 +1,4 @@
-// The header's bulb and its review sheet: the board's last architecture review and Run, which confirms and asks the
+// The bulb at the foot of the board and its review sheet: the board's last architecture review and Run, which confirms and asks the
 // board server to start one (docs/adr/2026-11-02-1813-the-bulb-runs-an-architecture-review-of-the-boards-repo.md). The bulb glows
 // while a review runs. Needs app-core.js.
 BoardView.part((B) => {

package/board/public/app-asks.js

@@ -3,15 +3,15 @@
 // docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md). Needs app-core.js and app-threads.js.
 BoardView.part((B) => {
   const { $, state, toast } = B;
-  const { waitOn } = BoardUI;
+  const { waitOn, keyedSend } = BoardUI;
 
-  // ⌘↵ (Ctrl+↵ off a Mac) sends a thread reply or an edit from its box; the ask's own is new-task.js's.
+  // ⌘↵ and ⌥↵ press a thread reply's or an edit's send buttons from its box (ui.js keyedSend); the ask's own are new-task.js's.
   B.on(B.root, 'keydown', (ev) => {
-    if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.isComposing) return;
-    const form = ev.target instanceof HTMLTextAreaElement ? ev.target.closest('form[data-reply], form.edit-form') : null;
-    if (!form) return;
+    const form = ev.target.tagName === 'TEXTAREA' ? ev.target.closest('form[data-reply], form.edit-form') : null;
+    const button = form && keyedSend(ev, form);
+    if (!button) return;
     ev.preventDefault();
-    form.requestSubmit();
+    form.requestSubmit(button);
   });
   BoardNewTask.wire(B);
 

package/board/public/app-banner.js

@@ -1,18 +1,13 @@
-// The answer banner at the top of the board view: asks Claude answered without making work, whose answer this
-// browser hasn't seen (domain.mjs answers; docs/adr/2026-10-29-1639-every-ask-is-a-card.md). Needs app-core.js.
+// The answer banner at the top of the board view: asks Claude answered without making work, whose answer came after the
+// card's read mark (domain.mjs answers; docs/adr/2026-10-29-1639-every-ask-is-a-card.md,
+// docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md). Needs app-core.js.
 BoardView.part((B) => {
-  const { $, store, state, seen, markSeen, plural, svg } = B;
+  const { $, state, seen, markSeen, markRead, plural, svg } = B;
   const { esc } = BoardUI;
-  const DISMISSED = 'dismissedAnswers';
 
-  function unseenAnswers(d) {
-    const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
-    return (d.answers || []).filter((a) => seen[a.key] && a.at > seen[a.key] && !(dismissed[a.id] >= a.at));
-  }
+  const unseenAnswers = (d) => (d.answers || []).filter((a) => seen[a.key] && a.at > seen[a.key]);
 
   function renderBanner(d) {
-    // A New card seen before its answer counts the answer as new; one first seen in Done starts from now (app-core.js markSeen).
-    for (const it of d.items) if (it.isNew) markSeen(it, true);
     const shown = unseenAnswers(d);
     const el = $('#answers');
     el.hidden = !shown.length;
@@ -28,10 +23,9 @@ BoardView.part((B) => {
   B.on($('#answers'), 'click', (ev) => {
     const d = state.board;
     if (!d) return;
+    // ✕ marks each answer shown read, on every device.
     if (ev.target.closest('.answer-dismiss')) {
-      const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
-      for (const a of unseenAnswers(d)) dismissed[a.id] = a.at;
-      store.set(DISMISSED, dismissed);
+      markRead(unseenAnswers(d).map((a) => [a.key, a.at]));
       renderBanner(d);
       return;
     }

package/board/public/app-cards.js

@@ -3,7 +3,7 @@
 // app-core.js and app-threads.js.
 BoardView.part((B) => {
   const { $, store, state, markSeen, seen, toast, links } = B;
-  const { esc, ago, REVIEW, reviewAge, unreadCount, workLines, BUILD_PHASES, phaseStrip, phaseMotion, heldUntilWords, holdPicker, linkText, mergeButton, buildButton, installButton, tryButton, tryWords, waitOn, prName, BUTTON, LINK_ARROW } = BoardUI;
+  const { esc, escText, ago, REVIEW, reviewAge, unreadCount, workLines, BUILD_PHASES, phaseStrip, phaseMotion, heldUntilWords, holdPicker, linkText, mergeButton, installButton, tryButton, tryWords, waitOn, prName, BUTTON, LINK_ARROW } = BoardUI;
 
   const mainSheet = $('#mainLogSheet');
   const mainRetry = $('#mainLogRetry');
@@ -41,7 +41,7 @@ BoardView.part((B) => {
     if (!mainSheet.open || mainSheet.classList.contains('closing') || !main) return;
     const words = tryWords(main.kind);
     $('#mainLogTitle').textContent = `Main’s ${words.failed.toLowerCase()}`;
-    $('#mainLogSource').innerHTML = `<code>.kickflip/build</code> stopped at main@<code>${esc(main.sha)}</code> · last lines of <code>data/try/main.log</code>`;
+    $('#mainLogSource').innerHTML = `<code>${esc(main.script)}</code> stopped at main@<code>${esc(main.sha)}</code> · last lines of <code>data/try/main.log</code>`;
     // Only a load begun after the POST resolved can settle this retry.
     const fresh = !postingMain && load !== null && (followMainAfter === null || load >= followMainAfter);
     if (fresh) {
@@ -116,20 +116,29 @@ BoardView.part((B) => {
     }
     ev.preventDefault();
     const pull = state.board?.main?.pull;
-    if (!pull || pull.running || state.mainPull.sending) return;
+    if (!pull || pull.running || BoardUI.pending.has('main:pull')) return;
     if (pull.error && !matchMedia('(hover: hover)').matches) {
       state.mainPull.open = !state.mainPull.open;
       paintMain();
       return;
     }
-    state.mainPull = { sending: true, open: false };
+    state.mainPull = { open: false };
+    // Spins until a board shows the pull running or changed (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    // A pull that brought no commits changes nothing a board shows, so its answer ends the spinner; one that did waits
+    // for Main to rebuild.
+    const mainFace = (main) => JSON.stringify([main?.pull, main?.sha, main?.state, main?.at]);
+    const before = mainFace(state.board.main);
+    BoardUI.pending.start('main:pull', (board) => mainFace(board.main) !== before, B.stillWaiting);
     paintMain();
     try {
       const response = await fetch(B.site.url('api/try/main/pull'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
       const out = await response.json();
       if (!response.ok) throw new Error(out.error || 'The hub refused the pull.');
-    } catch (error) { if (B.alive()) toast(error.message || 'Could not pull. Is the host awake?'); }
-    state.mainPull.sending = false;
+      if (out.commits) BoardUI.pending.answered('main:pull'); else BoardUI.pending.drop('main:pull');
+    } catch (error) {
+      BoardUI.pending.drop('main:pull');
+      if (B.alive()) toast(error.message || 'Could not pull. Is the host awake?');
+    }
     if (B.alive()) { paintMain(); B.reload(); }
   });
 
@@ -206,7 +215,7 @@ BoardView.part((B) => {
     const pr = it.pr;
     const ctx = links(it.key);
     const rows = [];
-    rows.push(['Wave', esc(it.waveTitle)]);
+    rows.push(['Wave', escText(it.waveTitle)]);
     if (pr) {
       const ci = pr.checks ? `${pr.checks.state}${pr.checks.fail ? ` (${pr.checks.fail} failing)` : pr.checks.pending ? ` (${pr.checks.pending} running)` : ''}` : 'unknown';
       if (pr.state === 'OPEN') {
@@ -216,18 +225,16 @@ BoardView.part((B) => {
       }
     }
     if (it.branch) rows.push(['Branch', `<code>${esc(it.branch)}</code>`]);
-    // building is an implementer at work, since Build means the package (docs/adr/2026-11-03-1549-a-todo-cards-button-reads-implement.md).
-    if (it.status) rows.push(['Status', esc(it.status === 'building' ? 'implementing' : it.status)]);
+    rows.push(['Status', esc(BoardUI.statusWord(it))]);
     // docs/adr/2026-11-03-0526-a-follow-up-is-a-work-card-with-a-parent.md: each link row is a row of labels that open their cards.
     for (const [label, list] of [['Parent', it.parent ? [it.parent] : []], ['Children', it.children], ['Related to', it.related], ['Blocked by', it.blockedBy], ['Waits on it', it.waitsOnIt]]) {
       if (list?.length) rows.push([label, list.map(cardLink).join(' ')]);
     }
     if (it.manualSteps.length) rows.push(['Manual steps', linkText(it.manualSteps.join('; '), ctx)]);
     if (it.next) rows.push(['Next', linkText(it.next, ctx)]);
-    // docs/adr/2026-10-30-1626-notes-is-a-link-in-the-details-list.md
     const external = [
-      it.hasNotes ? `<a href="notes.html?item=${encodeURIComponent(it.key)}">Notes ${LINK_ARROW}</a>` : '',
-      // A vscode: link opens a folder on the machine whose browser follows it, so only the host's browser gets one.
+      // A vscode: link opens a folder on the machine whose browser follows it, so only the host's browser gets a live one; elsewhere it is muted, with a tooltip and a tap toast.
+      it.worktree && !state.board.onHost ? `<a aria-disabled="true" title="not on kickflip host" data-tip="not on kickflip host">Open in VS Code</a>` : '',
       it.worktree && state.board.onHost ? `<a href="vscode://file${esc(encodeURI(it.worktree))}" title="Open the worktree in VS Code">Open in VS Code ${LINK_ARROW}</a>` : '',
       installButton(it),
       pr?.state === 'OPEN' ? `<a${classes(it, BUTTON.github)} href="${esc(pr.url)}" target="_blank" rel="noopener">${pr.isDraft ? 'Review draft on GitHub' : 'Review on GitHub'} ${LINK_ARROW}</a>` : '',
@@ -268,8 +275,8 @@ BoardView.part((B) => {
       : openPRs(it).length > 1
       ? `Merge ${ref}? Claude squash-merges ${openPRs(it).map(prName).join(', ')} in turn if they are still approved, green and clean.`
       : `Merge ${ref}? Claude squash-merges ${openPRs(it).map(prName).join('')} if it is still approved, green and clean.`),
-    'card-build': (it, ref) => (it.blockedBy?.length
-      ? `${it.held ? 'Unhold and implement' : 'Implement'} ${ref} once ${it.blockedBy.map((d) => d.ref).join(', ')} ${it.blockedBy.length === 1 ? 'is' : 'are'} done? It waits in In Progress until then.`
+    'card-build': (it, ref) => (it.blocked
+      ? `${it.held ? 'Unhold and implement' : 'Implement'} ${ref} once ${[it.blockedBy.length && `${it.blockedBy.map((d) => d.ref).join(', ')} ${it.blockedBy.length === 1 ? 'is' : 'are'} done`, it.blockedUntil].filter(Boolean).join(' and ')}? It is bumped to the top of Todo until then.`
       : `${it.held ? `Unhold and implement ${ref}?` : `Implement ${ref}?`} Claude starts its implementer now with the notes as they stand.`),
     finish: (it, ref) => (it.kind === 'ask' ? `Mark this task done? "${it.title}" moves to Done.`
       : it.ownerStep ? `Done with "${it.ownerStep}"? ${ref} moves to Done and its ticket closes.`
@@ -282,20 +289,33 @@ BoardView.part((B) => {
   };
   const actionRow = (kind, html) => (html.trim() ? `<div class="action-row ${kind}">${html}</div>` : '');
 
+  // The reader sheet opens it (app-reader.js); docs/adr/2026-11-05-0830-notes-is-a-button-on-the-hold-row.md.
+  const notesButton = (it) => (it.hasNotes ? `<a class="button" href="notes.html?item=${encodeURIComponent(it.key)}">Notes</a>` : '');
+
   function actions(it) {
     const key = esc(it.key);
     const ask = (act, label, cls = '') => `<button${cls ? ` class="${cls}"` : ''} data-confirm="${act}" data-key="${key}">${label}</button>`;
     const hold = it.kind !== 'work' || !it.holdable ? ''
-      : it.held ? (it.buildable ? '' : ask('resume', 'Unhold', 'unhold')) : ask('hold', 'Hold');
-    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${mergeButton(it)}${hold}${actionButton(it)}${tryButton(it)}${buildButton(it)}`)}</div>`;
+      : it.held ? ask('resume', 'Unhold', 'unhold') : ask('hold', 'Hold');
+    // A Todo card's Close, right of Hold; an In Review card's Done is in its thread box
+    // (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md).
+    const close = it.lane === 'todo' && it.finishable ? ask('finish', 'Close') : '';
+    // A Todo card's Implement is in its thread box (app-threads.js; docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md).
+    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${hold}${close}${notesButton(it)}${tryButton(it)}${actionButton(it)}${prototypesButton(it)}${mergeButton(it)}`)}</div>`;
   }
 
   // board/domain.mjs actionButtonOf picks the button and resolvedBy its colour (docs/adr/2026-10-30-1309-an-unstarted-card-waits-on-its-questions-in-todo.md).
   const ACTION_BUTTONS = {
-    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Open questions</a>`,
-    [BUTTON.markDone]: (it) => `<button${classes(it, BUTTON.markDone)} data-confirm="finish" data-key="${esc(it.key)}">Mark as done</button>`,
+    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Questions</a>`,
   };
   const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
+  // docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md
+  // On any card with prototypes (board/domain.mjs prototypesOf), Done ones too, so old rounds stay a tap away: it opens
+  // the viewer on the latest round, solid orange while a round waits on the owner's pick.
+  const prototypesButton = (it) => {
+    const latest = it.prototypes?.rounds.at(-1);
+    return latest ? `<a class="button${it.prototypes.open ? ' resolves' : ''}" href="${esc(latest.url)}">Prototypes</a>` : '';
+  };
 
   // The latest bump among New cards takes no second bump (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md).
   const latestBump = (it) => Boolean(it.isNew && it.bumpedAt) && !state.board.items.some((i) => i.isNew && (i.bumpedAt || '') > it.bumpedAt);
@@ -347,7 +367,7 @@ BoardView.part((B) => {
   // After lanes redraw: compares each card's reached count to its last, then enters, fills or leaves its strip. An
   // entering strip grows in one bar at a time, then sweeps each reached bar.
   function moveStrips(items, before) {
-    const next = new Map(items.map((it) => [it.key, phaseStrip(it)?.reached ?? null]));
+    const next = new Map(items.map((it) => [it.key, phaseStrip(it)?.done ?? null]));
     const still = reduceMotion.matches || !drawn;
     for (const [key, reached] of next) {
       const kind = still ? null : phaseMotion(phases.get(key), reached);
@@ -381,8 +401,10 @@ BoardView.part((B) => {
     const key = el.dataset.key;
     if (el.open) {
       state.openItems.add(key);
+      state.restored.delete(key);
       const it = state.board.items.find((i) => i.key === key) || state.archived.cards.find((i) => i.key === key);
       markSeen(it);
+      B.renderBanner(state.board);
       const unread = el.querySelector('summary .card-unread');
       const line = unread?.parentNode;
       unread?.remove();
@@ -396,12 +418,6 @@ BoardView.part((B) => {
     store.set('openItems', [...state.openItems]);
   }, true);
 
-  function redrawActions(key) {
-    const it = state.board.items.find((i) => i.key === key);
-    const row = $(`.actions[data-actions="${CSS.escape(key)}"]`);
-    if (it && row) row.outerHTML = actions(it);
-  }
-
   B.on(B.root, 'click', async (ev) => {
     const log = ev.target.closest('[data-try-log]');
     if (log && state.openItems.has(log.dataset.tryLog)) {
@@ -410,6 +426,8 @@ BoardView.part((B) => {
       card?.querySelector('.thread')?.scrollIntoView({ block: 'start' });
       return;
     }
+    const off = ev.target.closest('a[data-tip]');
+    if (off) { ev.preventDefault(); toast(off.dataset.tip); return; }
     const button = ev.target.closest('button[data-try]');
     if (!button) return;
     ev.preventDefault();
@@ -417,13 +435,22 @@ BoardView.part((B) => {
     const key = button.dataset.try;
     const it = state.board.items.find((i) => i.key === key);
     if (!it || !(await B.confirm(`${tryWords(it.try?.kind).go} ${it.ref}? The hub runs its build script.`)) || !B.alive()) return;
-    // Serve / Build waits until the hub has started the build; the card's chip then says it runs.
-    const post = (async () => {
+    // Serve / Build spins until a board shows the card's build changed: running, or already done
+    // (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    const before = JSON.stringify(it.try);
+    const id = `${key}:try`;
+    BoardUI.pending.start(id, (board) => JSON.stringify(board.items.find((i) => i.key === key)?.try) !== before, B.stillWaiting);
+    B.render();
+    try {
       const r = await fetch(B.site.url('api/try'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key }) });
       const out = await r.json();
       if (!r.ok) throw new Error(out.error || 'The hub refused the build.');
-    })();
-    try { await waitOn(button, post); } catch (error) { toast(error.message || 'Could not start. Is the host awake?'); }
+      BoardUI.pending.answered(id);
+    } catch (error) {
+      BoardUI.pending.drop(id);
+      B.render();
+      toast(error.message || 'Could not start. Is the host awake?');
+    }
     B.reload();
   });
 
@@ -440,11 +467,16 @@ BoardView.part((B) => {
     catch (e) { B.failed(e); }
   });
 
-  B.on(B.root, 'click', async (ev) => {
+  B.on(B.root, 'click', (ev) => {
     const b = ev.target.closest('button[data-confirm]');
     if (!b) return;
     ev.preventDefault();
+    confirmTap(b);
+  });
+  // A data-confirm button's tap: Hold's sheet, or its confirm, then its event. The thread box's Done comes here on ⌥↵ too.
+  async function confirmTap(b) {
     const { key, confirm: act } = b.dataset;
+    if (b.classList.contains('nudging')) return;
     const it = state.board.items.find((i) => i.key === key);
     if (it && act === 'hold') { openHold(it); return; }
     if (!it || !(await B.confirm(CONFIRM[act](it, it.ref)))) return;
@@ -472,15 +504,21 @@ BoardView.part((B) => {
         if (pend) { BoardUI.pending.drop(pend); B.render(); }
         B.failed(e);
       }
-      if (act === 'finish') B.syncDone(key);
+      if (act === 'finish') B.syncSends(key);
       return;
     }
-    // The tapped button waits and the rest of its action row is disabled until the server answers.
-    const group = { group: $(`.actions[data-actions="${CSS.escape(key)}"]`)?.querySelectorAll('button') ?? [] };
+    // A stalled line's nudge calms it to orange with a ripple, not a spinner, until a board shows the card's status line
+    // changed, the builder no longer stalled or the card gone (style.css .nudging).
+    const id = `${key}:nudge`;
+    const { progress, at } = it.builder;
+    BoardUI.pending.start(id, (board) => { const c = board.items.find((i) => i.key === key); return !c?.builder?.stalled || c.builder.progress !== progress || c.builder.at !== at; }, B.stillWaiting);
+    B.render();
     try {
-      await waitOn(b, B.sentHere(key, () => B.send('builder-nudge', { key })), group); b.disabled = true; toast('Nudge sent');
-    } catch { redrawActions(key); toast('Could not send. Is the host awake?'); }
-  });
+      const out = await B.sentHere(key, () => B.send('builder-nudge', { key }));
+      BoardUI.pending.answered(id, out.board.generatedAt); toast('Nudge sent');
+    } catch { BoardUI.pending.drop(id); toast('Could not send. Is the host awake?'); }
+    B.render();
+  }
 
-  Object.assign(B, { captureStrips, moveStrips, detail, card });
+  Object.assign(B, { captureStrips, moveStrips, detail, card, confirmTap });
 });

package/board/public/app-core.js

@@ -86,13 +86,31 @@ BoardView.part((B) => {
 
   const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
 
-  // A card this browser has never seen starts from now, so a first load badges nothing.
-  const seen = Object.assign(Object.create(null), store.get('seenThreads', {}));
-  const latestOf = (it) => [new Date().toISOString(), ...(it?.othersAt || [])].sort().pop();
-  function markSeen(it, onlyNew = false) {
-    if (!it || (onlyNew && seen[it.key])) return;
-    seen[it.key] = latestOf(it);
-    store.set('seenThreads', seen);
+  // Read marks live on the board, one set for every device: each card's readAt, the newest message the owner has seen
+  // on it (docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md). seen is card key → the later of the board's mark
+  // and this page's own, so a card read here reads at once, before the board comes back with it. seenBefore is an open
+  // card's mark from before it opened, where its thread's unread lines start (app-threads.js); a card closing drops it,
+  // and a board left and opened again in this page keeps it.
+  const seen = Object.create(null);
+  const seenBefore = new Map(B.place?.seenBefore);
+  B.keep(() => ({ seenBefore: [...seenBefore] }));
+  function takeMarks(items) {
+    for (const it of items) if (String(it.readAt || '') > (seen[it.key] || '')) seen[it.key] = it.readAt;
+  }
+  // [[card key, time]] → each card read up to its time, here at once and on the board for every device.
+  function markRead(pairs) {
+    const marks = Object.fromEntries(pairs.filter(([key, at]) => at && String(at) > (seen[key] || '')));
+    if (!Object.keys(marks).length) return;
+    Object.assign(seen, marks);
+    fetch(B.site.url('api/read'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ marks }) }).catch(() => {});
+  }
+  // The newest message card it shows: its counted messages (domain.mjs othersAt), its questions' asks and its answer.
+  const newestOf = (it) => [...(it.othersAt || []), ...(it.questions?.askedAt || []), it.ask?.answerAt].filter(Boolean).map(String).sort().pop();
+  // Card it, open, reads up to the newest message it shows.
+  function markSeen(it) {
+    if (!it) return;
+    if (!seenBefore.has(it.key)) seenBefore.set(it.key, seen[it.key] || null);
+    markRead([[it.key, newestOf(it)]]);
   }
 
   // The ui-links.js linkContext for text shown on item `key`'s card or thread.
@@ -105,5 +123,5 @@ BoardView.part((B) => {
   const confirm = (message, labels) => dialogs.confirm(message, { ...labels, signal: controller.signal });
   const notice = dialogs.notice;
 
-  Object.assign(B, { steady, restorePlace, plural, seen, markSeen, links, svg, confirm, notice });
+  Object.assign(B, { steady, restorePlace, plural, seen, seenBefore, takeMarks, markRead, markSeen, links, svg, confirm, notice });
 });

package/board/public/app-header.js

@@ -77,34 +77,34 @@ BoardView.part((B) => {
     } catch (e) { toast(`Couldn't wake this board's session: ${e.message}`); }
     finally { state.waking = false; if (B.alive()) renderStatus(); }
   }
-  const wakeOnTap = () => { if (state.board?.checks?.watcher === 'asleep' && !state.waking && state.link === 'online') wake(); };
+  // A shared person's tap never wakes the owner's session (shell.js .shared-view).
+  const wakeOnTap = () => { if (state.board?.checks?.watcher === 'asleep' && !state.waking && state.link === 'online' && !document.documentElement.classList.contains('shared-view')) wake(); };
   B.on(B.root, 'click', wakeOnTap, true);
   B.on(B.root, 'submit', wakeOnTap, true);
 
   state.link = 'online';
   const controls = { wired: false, boardSettled: false, reloading: false };
   function applyControls() {
-    const on = headerControls({ link: state.link, ...controls });
+    const on = headerControls(controls);
     $('#refresh').disabled = !on.refresh;
     $('#refresh').classList.toggle('spinning', on.spin);
     const gear = $('#settingsLink');
     if (on.settings) { gear.removeAttribute('aria-disabled'); gear.removeAttribute('tabindex'); } else { gear.setAttribute('aria-disabled', 'true'); gear.tabIndex = -1; }
   }
   const headerWired = () => { controls.wired = true; applyControls(); };
-  // style.css dims the offline view from .view-board.offline.
+  // Offline, the board stays as it was and reads as before; only the header time turns red, and style.css holds the
+  // buttons that send from .view-board.offline (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
   function setLink(link) {
-    const was = state.link;
     state.link = link;
     if (link !== 'reconnecting') controls.boardSettled = true;
-    const off = link !== 'online';
-    B.root.classList.toggle('offline', off);
-    if (link === 'offline' && was === 'online') toast('Offline. Use refresh in the header to retry.');
+    B.root.classList.toggle('offline', link !== 'online');
     applyControls();
     renderStatus();
   }
+  BoardUI.holdSends(B.on, B.root, () => state.link !== 'online', () => B.toast(BoardUI.WAITING));
   const linkUp = () => setLink('online');
   const linkDown = () => { if (state.link !== 'reconnecting') setLink('offline'); };
-  B.on($('.nav'), 'click', (ev) => {
+  B.on($('#settingsLink'), 'click', (ev) => {
     if (ev.target.closest('a[aria-disabled="true"]')) { ev.preventDefault(); ev.stopImmediatePropagation(); }
   }, true);
   // A load can return in milliseconds, so the spin and "reconnecting…" hold long enough to read.