@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/app-threads.js

@@ -1,40 +1,52 @@
 // A card's thread on the board view: loading and rendering it, and its reply box. Needs app-core.js.
 BoardView.part((B) => {
-  const { $, store, state, toast, quieted, sendDraft, links } = B;
-  const { esc, setHTML, threadMessages, attachButton, dropZone, protoButton, grillButton, doneButton, waitOn, newQuestionsLine } = BoardUI;
+  const { $, store, state, quieted, sendDraft, links } = B;
+  const { esc, setHTML, threadMessages, dropZone, sendButton, protoButton, grillButton, visualButton, attachButton, doneButton, doneTone, waitOn, newQuestionsLine } = BoardUI;
 
-  const REQUEST_EVENT = { prototype: 'prototype-request', grill: 'grill-more' };
-  // A /prototype or /grill word in a message, the last one winning, and the message without it.
-  const SLASH = /(^|\s)\/(grill|prototype)(?=\s|$)/g;
+  const REQUEST_EVENT = { prototype: 'prototype-request', grill: 'grill-more', visual: 'visual-request' };
+  // A /prototype, /grill or /visual word in a message, the last one winning, and the message without it.
+  const SLASH = /(^|\s)\/(grill|prototype|visual)(?=\s|$)/g;
   const slashOf = (value) => ({ flag: [...value.matchAll(SLASH)].pop()?.[2] ?? null, text: value.replace(SLASH, '$1').replace(/ {2,}/g, ' ').trim() });
 
   const thread = (key) => `<div class="thread" data-thread="${esc(key)}"><div class="muted small">Loading thread…</div></div>`;
 
-  // The board, not the thread, decides the Done button, so it follows each board load even when the thread is unchanged.
-  function syncDone(el, key) {
-    const send = el.querySelector('form button[type=submit]');
-    if (!send) return;
-    const html = doneButton(state.board?.items.find((i) => i.key === key));
-    const current = el.querySelector('form [data-confirm="finish"]');
-    if (current?.outerHTML === html) return;
-    current?.remove();
-    if (html) send.insertAdjacentHTML('beforebegin', html);
+  // docs/adr/2026-11-04-2343-each-text-box-sends-its-intent-from-a-key.md,
+  // docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md
+  // docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md
+  // A Todo card's reply box sends with Reply (intent: 'reply') or Implement (intent: 'build'), which is the card's build
+  // action: builder orange once the card is ready, quiet before. An In Review card's box has Done then Reply
+  // (ui-threads.js doneButton), Done in its tone. Any other card's box sends with Send, carrying no intent. A pair wraps
+  // onto its own line under the row.
+  const REVIEW = new Set(['review', 'stale']);
+  const sendsOf = (item) => (item?.lane === 'todo' ? (item.ready ? 'todo-ready' : 'todo')
+    : REVIEW.has(item?.lane) ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one');
+  const pair = (kind, html) => `<span class="send-actions" data-sends="${kind}">${html}</span>`;
+  const sends = (kind, item) => (kind === 'one' ? `<span data-sends="one">${sendButton('Send', 0)}</span>`
+    : kind.startsWith('review') ? pair(kind, `${doneButton(item)}${sendButton('Reply', 0, ' data-intent="reply"')}`)
+    : pair(kind, `${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${sendButton('Reply', 0, ' data-intent="reply"')}`));
+  // The board, not the thread, decides the send buttons, so they follow each board load even when the thread is unchanged.
+  function syncSends(el, key) {
+    const at = el.querySelector('form [data-sends]');
+    if (!at) return;
+    const item = state.board?.items.find((i) => i.key === key);
+    const kind = sendsOf(item);
+    if (at.dataset.sends !== kind) { at.insertAdjacentHTML('afterend', sends(kind, item)); at.remove(); }
   }
 
   // Each open card's ui-threads.js threadMessages view. Opening a card marks it seen (app-core.js markSeen) before its
-  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed. A
-  // board left and opened again in this page keeps them, so its open threads show what they showed.
+  // thread draws, so its unread messages start from its read mark from before it opened (B.seenBefore). A board left
+  // and opened again in this page keeps them, so its open threads show what they showed.
   const kept = B.place?.threads;
-  const seenBefore = new Map(kept?.seenBefore || Object.entries(B.seen));
   const moreTaps = new Map(kept?.moreTaps);
   const firstDrawn = new Map(kept?.firstDrawn);
-  B.keep(() => ({ threads: { seenBefore: [...seenBefore], moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  B.keep(() => ({ threads: { moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  const seenAt = (key) => (B.seenBefore.has(key) ? B.seenBefore.get(key) : B.seen[key] || null);
   const newestTs = (msgs) => msgs.reduce((top, m) => [String(m.ts), m.reply?.at ? String(m.reply.at) : ''].reduce((a, b) => (b > a ? b : a), top), '');
-  const viewOf = (key) => ({ seenAt: seenBefore.get(key) || null, more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
+  const viewOf = (key) => ({ seenAt: seenAt(key), more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (!el.matches?.('details.item') || el.open) return;
-    seenBefore.set(el.dataset.key, B.seen[el.dataset.key]);
+    B.seenBefore.delete(el.dataset.key);
     moreTaps.delete(el.dataset.key);
     firstDrawn.delete(el.dataset.key);
   }, true);
@@ -49,11 +61,11 @@ BoardView.part((B) => {
   function renderThread(key, msgs) {
     const el = $(`[data-thread="${CSS.escape(key)}"]`);
     if (!el) return;
-    syncDone(el, key);
+    syncSends(el, key);
     const edits = editsIn(key);
     if (!firstDrawn.has(key) && msgs.length) firstDrawn.set(key, newestTs(msgs));
     const view = viewOf(key);
-    const asked = newQuestionsLine(state.board?.items.find((i) => i.key === key)?.questions, seenBefore.get(key));
+    const asked = newQuestionsLine(state.board?.items.find((i) => i.key === key)?.questions, seenAt(key));
     const lines = asked.length ? [...msgs, ...asked].sort((a, b) => String(a.ts).localeCompare(String(b.ts))) : msgs;
     const sig = JSON.stringify([lines, [...edits.keys()], view]);
     if (el.dataset.sig === sig) return;
@@ -61,36 +73,24 @@ BoardView.part((B) => {
     // The reply form is built once per card, so a refresh never drops what is being typed.
     if (!el.querySelector('.msgs')) {
       const draft = store.get('draft:' + key, '');
-      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="${esc(PLACEHOLDER)}">${esc(draft)}</textarea>`)}
-        <div class="flag-hint" data-hint aria-live="polite">${esc(HINT)}</div>
+      // The row: What's left? at the left, the eye, fire, image and attach at its right, and the send buttons
+      // (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md).
+      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="${esc(PLACEHOLDER)}">${esc(draft)}</textarea>`, { attach: false })}
         <div class="pending-files" data-files></div>
-        <div class="row"><span class="tools">${attachButton()}${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button><button class="primary" type="submit">Send</button></div></form>`;
+        <div class="row"><button class="chip quick" type="button" data-quick="What's left?">What's left?</button><span class="icons">${protoButton(key)}${grillButton(key)}${visualButton(key)}${attachButton()}</span>${sends('one')}</div></form>`;
       BoardAttach.paint('item:' + key, B.site.root);
-      syncFlag(el.querySelector('form'));
     }
-    syncDone(el, key);
+    syncSends(el, key);
     B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(lines, links(key), edits, view)));
     for (const id of edits.keys()) BoardAttach.paint('edit:' + id, B.site.root);
     B.flashChanged?.(el);
   }
 
-  // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
-  // The composer's eye asks for a prototype and its fire for a grill: each is a toggle, one at a time, that Send carries
-  // with whatever is typed, as /prototype or /grill in the text does. Nothing typed sends the bare request.
-  const PLACEHOLDER = 'Reply in this thread… (/prototype or /grill asks for one)';
-  const HINT = 'Tap the eye or the fire to request a prototype or a grill';
-  const flagOf = (f) => f.dataset.flag || slashOf(f.querySelector('textarea').value).flag;
-  function syncFlag(f) {
-    const chosen = f.dataset.flag || null;
-    f.querySelector('button[data-proto]')?.setAttribute('aria-pressed', String(chosen === 'prototype'));
-    f.querySelector('button[data-grill]')?.setAttribute('aria-pressed', String(chosen === 'grill'));
-    const hint = f.querySelector('[data-hint]');
-    if (!hint) return;
-    const flag = flagOf(f);
-    const typed = slashOf(f.querySelector('textarea').value).text || BoardAttach.files(f.dataset.composer, B.site.root).length;
-    hint.classList.toggle('on', Boolean(flag));
-    hint.textContent = !flag ? HINT : typed ? `posts your message, with ${flag} requested in its footer` : `posts one gray line: ${flag} requested`;
-  }
+  // docs/adr/2026-11-05-0430-the-eye-and-fire-send-their-request-at-once.md
+  // The composer's eye asks for a prototype, its fire for a grill and its image for a visual: a tap sends the request at
+  // once, with whatever is typed, as /prototype, /grill or /visual in the text does on Reply. Nothing typed sends the
+  // bare request (docs/adr/2026-11-05-1921-a-visual-is-a-page-an-agent-draws-for-a-thread.md).
+  const PLACEHOLDER = 'Reply in this thread… (/prototype, /grill or /visual asks for one)';
 
   // A load while one for the same thread runs shares it, so a card the page inserts open isn't fetched twice; force
   // starts a new one, after a send. maxAge skips a thread that loaded that recently. from is a load already started
@@ -111,7 +111,7 @@ BoardView.part((B) => {
         loadedAt.set(key, Date.now());
         state.threadCache.set(key, msgs);
         renderThread(key, msgs);
-        B.saveSnapshotSoon?.();
+        B.saveCopySoon?.();
       })
       .catch(() => {})
       .finally(() => { if (inflight.get(key) === p) inflight.delete(key); });
@@ -122,7 +122,6 @@ BoardView.part((B) => {
   B.on(B.root, 'input', (ev) => {
     const f = ev.target.closest('form[data-reply]');
     if (!f || ev.target.tagName !== 'TEXTAREA') return;
-    syncFlag(f);
     if (quieted('draft:' + f.dataset.reply, ev.target)) return;
     store.set('draft:' + f.dataset.reply, ev.target.value);
   });
@@ -130,49 +129,53 @@ BoardView.part((B) => {
     const b = ev.target.closest('form[data-reply] button[data-quick]');
     if (!b) return;
     const key = b.closest('form').dataset.reply;
-    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick }))); loadThread(key, { force: true }); }
-    catch { toast('Could not send'); }
-  });
-  B.on(B.root, 'click', (ev) => {
-    const b = ev.target.closest('form[data-reply] button[data-proto], form[data-reply] button[data-grill]');
-    if (!b) return;
-    const f = b.closest('form');
-    const kind = b.hasAttribute('data-proto') ? 'prototype' : 'grill';
-    if (f.dataset.flag === kind) delete f.dataset.flag; else f.dataset.flag = kind;
-    syncFlag(f);
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    try { await waitOn(b, BoardUI.pending.within(B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick })).then(() => loadThread(key, { force: true })), B.stillWaiting)); }
+    catch (e) { B.failed(e); }
   });
-  B.on(B.root, 'submit', async (ev) => {
-    const f = ev.target.closest('form[data-reply]');
-    if (!f) return;
-    ev.preventDefault();
+  // Sends the composer's draft as one message, or as a request when flag names one; button spins until the thread has it.
+  async function post(f, flag, button) {
     const ta = f.querySelector('textarea');
     ta.blur();
-    const flag = flagOf(f);
     const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    if ((!flag && !text && !files.length) || BoardAttach.busy(id, B.site.root)) return;
+    // An empty box still sends Implement, the card's build action: the board server marks the card ready as it is and
+    // starts the build at once (docs/adr/2026-11-06-0021-a-button-without-a-text-box-posts-a-keyed-status-line.md).
+    const intent = flag ? null : button.dataset.intent || null;
+    if ((!flag && !text && !files.length && intent !== 'build') || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;
-    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}) };
-    try {
-      await waitOn(f.querySelector('button[type=submit]'), sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data))));
+    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}), ...(intent ? { intent } : {}) };
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    const sending = (async () => {
+      await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
+        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data)));
       BoardAttach.clear(id, B.site.root);
-      delete f.dataset.flag;
-      syncFlag(f);
-      loadThread(f.dataset.reply, { force: true });
-    } catch { B.notice('Could not send. Is the host awake?'); }
+      await loadThread(key, { force: true });
+    })();
+    try { await waitOn(button, BoardUI.pending.within(sending, B.stillWaiting)); } catch (e) { B.failed(e); }
+  }
+  B.on(B.root, 'click', (ev) => {
+    const b = ev.target.closest('form[data-reply] button[data-proto], form[data-reply] button[data-grill], form[data-reply] button[data-visual]');
+    if (b) post(b.closest('form'), b.hasAttribute('data-proto') ? 'prototype' : b.hasAttribute('data-grill') ? 'grill' : 'visual', b);
+  });
+  B.on(B.root, 'submit', (ev) => {
+    const f = ev.target.closest('form[data-reply]');
+    if (!f) return;
+    ev.preventDefault();
+    // Done on ⌥↵ (app-asks.js) confirms and closes the card as its tap does (app-cards.js).
+    if (ev.submitter?.dataset.confirm) { B.confirmTap(ev.submitter); return; }
+    post(f, slashOf(f.querySelector('textarea').value).flag, ev.submitter);
   });
-  // Send waits while a composer's files upload, the ask's included (attach.js attach-change).
+  // A composer's send buttons wait while its files upload, the ask's included (attach.js attach-change).
   B.on(B.root, 'attach-change', (ev) => {
-    const b = ev.target.querySelector('button[type=submit]');
-    if (b) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
-    if (ev.target.matches?.('form[data-reply]')) syncFlag(ev.target);
+    for (const b of ev.target.querySelectorAll('button[type=submit]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
+    if (ev.target.matches?.('form[data-reply]')) for (const b of ev.target.querySelectorAll('button[data-proto], button[data-grill], button[data-visual]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
   });
 
   Object.assign(B, {
     thread, renderThread, loadThread,
     repaintThread: (key) => { if (state.threadCache.has(key)) renderThread(key, state.threadCache.get(key)); },
-    syncDone: (key) => { const el = $(`[data-thread="${CSS.escape(key)}"]`); if (el) syncDone(el, key); },
+    syncSends: (key) => { const el = $(`[data-thread="${CSS.escape(key)}"]`); if (el) syncSends(el, key); },
   });
 });

package/board/public/app.html

@@ -6,7 +6,8 @@
 <title>Claude</title>
 <script>
 // The board this URL opens, or `/`'s last board, starts loading with its open cards' threads here, beside the scripts
-// below; app.js loadBoard takes the loads over when it mounts that board. A board's other views load their own, and a
+// below; app.js loadBoard takes the loads over when it mounts that board. With a copy of the board saved under this
+// build (app-snapshot.js copyVersion), it asks only for the changes since the copy's number. A board's other views load their own, and a
 // site this device's last sidebar copy lists as no board loads nothing here. Above the stylesheets, since a script
 // after one waits for it to load.
 window.BoardBoot = (function () {
@@ -16,12 +17,16 @@ window.BoardBoot = (function () {
   if (!route || route === '_hub') return null;
   try { if (JSON.parse(localStorage.getItem('hub:sidebar') || 'null')?.sites?.some((s) => s.route === route && !s.board)) return null; } catch {}
   const base = '/' + encodeURIComponent(route) + '/';
-  const get = (u) => { const p = fetch(base + u, { cache: 'no-store' }).then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status))))); p.catch(() => {}); return p; };
+  // A failed answer rides on the error, for the board view's BoardUI.downOf.
+  const unanswered = (r) => Object.assign(new Error(String(r.status)), { answer: r });
+  const get = (u) => { const p = fetch(base + u, { cache: 'no-store' }).then((r) => (r.ok ? r.json().catch(() => { throw unanswered(r); }) : Promise.reject(unanswered(r)))); p.catch(() => {}); return p; };
   let open = [];
   try { open = JSON.parse(localStorage.getItem(`site:${route}:openItems`) || '[]'); } catch {}
   const focus = /^#item=([^&]+)/.exec(location.hash);
   if (focus) open.push(decodeURIComponent(focus[1]));
-  return { route, board: get('api/board'), threads: new Map([...new Set(open)].map((k) => [k, get('api/thread?key=' + encodeURIComponent(k))])) };
+  let since = null;
+  try { const c = JSON.parse(localStorage.getItem(`site:${route}:copyVersion`) || 'null'); if (c?.build === document.documentElement.dataset.build && Number.isInteger(c.version)) since = c.version; } catch {}
+  return { route, board: get('api/board' + (since === null ? '' : '?since=' + since)), threads: new Map([...new Set(open)].map((k) => [k, get('api/thread?key=' + encodeURIComponent(k))])) };
 })();
 </script>
 <script>try { if (localStorage.getItem('hub:sidebarCollapsed') === '1') document.documentElement.classList.add('sb-collapsed'); } catch {}</script>
@@ -41,7 +46,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/ui.js"></script>
 <script src="/_hub/app/ui-links.js"></script>
 <script src="/_hub/app/ui-enums.js"></script>
-<script src="/_hub/app/ui-phase-bars.js"></script>
+<script src="/_hub/app/ui-progress-bar.js"></script>
 <script src="/_hub/app/ui-order.js"></script>
 <script src="/_hub/app/ui-patch.js"></script>
 <script src="/_hub/app/ui-threads.js"></script>

package/board/public/app.js

@@ -6,11 +6,8 @@
 // them all and no board's state outlives its view but what B.keep keeps for its next mount in this page.
 // BoardView.markup({title}) is the root's inner HTML. BoardView.page(root, site, run) gives a board's other views
 // (view-*.js) the same site, $ and recorders.
-// opts, both from the app shell (shell.js):
+// opts, from the app shell (shell.js):
 //   signal(fn) → off   calls fn on each change signal for this board, from the hub's one stream
-//   live {fresh, generatedAt}
-//                      this board was left fresh and hasn't changed since, so a stored last visit whose board has
-//                      that generatedAt paints live, with the header time `fresh`, rather than dimmed
 // Load this after ui-*.js, attach.js and toasts.js, and before the app-*.js files.
 window.BoardView = (function () {
   const parts = [];
@@ -27,7 +24,11 @@ window.BoardView = (function () {
     try {
       const old = [];
       for (let i = 0; i < localStorage.length; i++) old.push(localStorage.key(i));
-      for (const k of old.filter((k) => /^(openItems|wave|lanes|seenThreads|dismissedAnswers|draft:ask|foldOpen:.+)$/.test(k))) {
+      // Read marks moved to the board (docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md), so this browser's old copies go.
+      for (const k of old.filter((k) => /^(site:[\w-]+:)?(seenThreads|dismissedAnswers)$/.test(k))) localStorage.removeItem(k);
+      // The saved copy moved to IndexedDB (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md).
+      for (const k of old.filter((k) => k === 'boardSnapshots' || k.startsWith('boardSnapshot:'))) localStorage.removeItem(k);
+      for (const k of old.filter((k) => /^(openItems|wave|lanes|draft:ask|foldOpen:.+)$/.test(k))) {
         if (localStorage.getItem(keyOf(k)) != null) continue;
         localStorage.setItem(keyOf(k), localStorage.getItem(k));
         localStorage.removeItem(k);
@@ -127,11 +128,13 @@ window.BoardView = (function () {
       board: null,
       fresh: null,
       openItems: new Set(store.get('openItems', [])),
+      // The cards open when the page loaded: Done and Asks hide those past their cap until the owner opens one this visit.
+      restored: new Set(store.get('openItems', [])),
       threadCache: new Map(),
       edits: new Map(),
       githubPending: null,
       // Main's refresh icon (ui-cards.js mainPull): a tap waiting on the server, and the failed pull's reason open on touch.
-      mainPull: { sending: false, open: false },
+      mainPull: { open: false },
       // The Done cards Show more paged in from the archive past the board's own (app-lanes.js), and how many older ones
       // the archive holds past them, null before the first page.
       archived: { cards: [], left: null },
@@ -142,7 +145,8 @@ window.BoardView = (function () {
     const keep = (fn) => { if (B.alive()) keepers.push(fn); };
     const place = places.get(B.route) || null;
     places.delete(B.route);
-    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, away: opts.away, place, keep });
+    Object.assign(B, { store, state, signal, pause: opts.pause, away: opts.away, place, keep });
+    BoardUI.usagePause = opts.pause;
 
     function mount() {
       if (B.alive()) return;
@@ -187,7 +191,8 @@ window.BoardView = (function () {
         BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main, state.mainPull));
         B.renderMainLog(d.main, load);
         for (const el of $$('details.item[open]')) state.openItems.add(el.dataset.key);
-        for (const it of d.items) if (!it.isNew) markSeen(it, !state.openItems.has(it.key));
+        B.takeMarks(d.items);
+        for (const it of d.items) if (state.openItems.has(it.key)) markSeen(it);
         // An open card's thread is renderThread's (app-threads.js), so a lane repaint leaves it as it is.
         const strips = B.captureStrips();
         setHTML($('#lanes'), B.lanesHtml(d, d.items), { keep: '[data-thread]' });
@@ -217,6 +222,7 @@ window.BoardView = (function () {
       focusKey = BoardUI.record(state.board?.moved, focusKey) || focusKey;
       replyKey = m[2] ? focusKey : null;
       state.openItems.add(focusKey);
+      state.restored.delete(focusKey);
       const it = state.board?.items.find((i) => i.key === focusKey);
       if (it) { const s = store.get('lanes', {}); s[it.lane] = true; store.set('lanes', s); B.openBand({ key: focusKey }); }
       if (it?.fold) store.set(B.FOLDS[it.fold].store, true);
@@ -229,6 +235,15 @@ window.BoardView = (function () {
       ev.preventDefault();
       readHash(); render(); scrollToFocus();
     });
+    // Opens and scrolls to the card key or the band slug on the board → whether the board shows it.
+    function focusOnBoard({ key, slug }) {
+      const band = slug && state.board?.waveBands?.find((b) => b.slug === slug);
+      if (!band && !state.board?.items.some((i) => i.key === key)) return false;
+      if (key) { location.hash = `#item=${encodeURIComponent(key)}`; readHash(); } else B.openBand({ slug });
+      render();
+      if (key) scrollToFocus(); else $(`section.wb[data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
+      return true;
+    }
     // A card missing from the last visit's board waits for the fresh one, which is final.
     function scrollToFocus(final = true) {
       if (!focusKey) return;
@@ -251,24 +266,24 @@ window.BoardView = (function () {
       ta.focus({ preventScroll: true });
     }
 
-    // The last visit's board paints dimmed while the first load runs; it doesn't count as landed, so refresh keeps
-    // spinning, and the header's time is the snapshot's until a load lands (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
-    // → true when it painted live (B.live), so the controls turn on at once.
-    function paintSnapshot() {
-      const snap = B.readSnapshot();
-      if (!snap) return false;
-      const live = Boolean(B.live) && snap.board?.generatedAt === B.live.generatedAt;
-      state.board = snap.board;
-      for (const [key, msgs] of Object.entries(snap.threads)) state.threadCache.set(key, msgs);
-      state.fresh = live ? B.live.fresh : { at: snap.savedAt, sig: null };
-      B.setView(live ? 'fresh' : 'snapshot');
+    // The saved copy paints live before the first load, which asks only for the changes since its number; the lines
+    // that catch-up changes flash (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md). A board that landed
+    // meanwhile stays.
+    // old: a copy another build saved, whose board the next load asks for whole.
+    function paintCopy(copy, { old = false } = {}) {
+      if (!copy || !B.alive() || state.view === 'fresh') return;
+      state.oldCopy = old;
+      state.board = copy.board;
+      for (const [key, msgs] of Object.entries(copy.threads)) state.threadCache.set(key, msgs);
+      state.fresh = { at: copy.savedAt, sig: null };
+      B.setView('fresh');
       readHash();
       hashRead = true;
       render();
       scrollToFocus(false);
       returnToPlace();
-      if (!live) B.holdForFlash();
-      return live;
+      B.holdForFlash();
+      B.linkUp();
     }
 
     // The first load takes over app.html's BoardBoot fetches, so only the first view mounted takes them, and only for
@@ -279,6 +294,10 @@ window.BoardView = (function () {
     globalThis.BoardBoot = null;
     if (boot?.route && boot.route !== B.route) boot = null;
     let preloaded = false;
+    // A load nothing answers gives up after this, so an asleep host reads as out of reach.
+    const LOAD_TIMEOUT = 20000;
+    // A failed answer, carried to showDown for BoardUI.downOf.
+    const unanswered = (r) => Object.assign(new Error(`board ${r.status}`), { answer: r });
     async function loadBoard({ via = 'poll' } = {}) {
       const load = B.boardLoad = (B.boardLoad || 0) + 1;
       const started = boot;
@@ -286,12 +305,15 @@ window.BoardView = (function () {
       const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
       let landed = false;
       try {
-        // A reload names the version of the board on screen: an unchanged board answers 304 with no body
-        // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md), and a changed one a patch from it
-        // (docs/adr/2026-11-04-0332-the-board-sends-per-card-patches.md).
-        const tag = state.view === 'fresh' ? state.board.version : null;
-        const board = await (started?.board || fetch(B.site.url('api/board' + (tag ? '?since=' + encodeURIComponent(tag) : '')), { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) })
-          .then((r) => (r.status === 304 ? null : r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
+        // A reload names the change number of the board on screen: an unchanged board answers 304 with no body
+        // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md), and a changed one a patch of what
+        // changed after it (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md).
+        const tag = state.view === 'fresh' && !state.oldCopy ? state.board.version : null;
+        const timeout = new AbortController();
+        const stopTimer = B.later(LOAD_TIMEOUT, () => timeout.abort());
+        const board = await (started?.board || fetch(B.site.url('api/board' + (tag ? '?since=' + encodeURIComponent(tag) : '')), { cache: 'no-store', signal: timeout.signal, ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) })
+          .then((r) => (r.status === 304 ? null : r.ok ? r.json().catch(() => { throw unanswered(r); }) : Promise.reject(unanswered(r))))
+          .finally(stopTimer));
         if (board) land(board, load); else B.linkUp();
         landed = true;
         if (!preloaded) {
@@ -300,12 +322,36 @@ window.BoardView = (function () {
         }
       } catch (e) {
         B.linkDown();
+        if (state.view !== 'fresh' && B.alive()) await showDown(BoardUI.downOf(e.answer || null));
       }
       await Promise.all(threads);
       if (landed) B.landed(via);
       if (state.view === 'fresh') B.endFlash();
     }
 
+    // A board out of reach with nothing on screen paints the copy another build saved, which the first paint skipped,
+    // guarded: a paint that throws leaves the landing, the kickflip mark and down's two lines in the board's place, and
+    // the landing retries every 5 s while the board can come back by itself
+    // (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
+    let triedOldCopy = false;
+    async function showDown(down) {
+      if (!triedOldCopy) {
+        triedOldCopy = true;
+        const old = await B.readCopy({ anyBuild: true });
+        try { paintCopy(old, { old: true }); } catch {
+          state.board = null;
+          B.setView(null);
+        }
+        if (!B.alive()) return;
+        if (state.view === 'fresh') { B.linkDown(); return; }
+      }
+      state.down = down;
+      $('#downLanding').innerHTML = BoardUI.downLanding(down);
+      $('#downLanding').hidden = false;
+      B.root.classList.add('down');
+    }
+    B.every(5000, () => { if (state.down?.retries && !document.hidden) loadBoard(); });
+
     // A board from the server, a load's or an events POST's, or a patch from the board on screen (ui-patch.js). One built
     // before the board on screen leaves it as it is, so a slow load can't undo a newer one; a newer patch from a board
     // no longer on screen, which another answer replaced meanwhile, reloads instead. → whether it landed
@@ -315,6 +361,12 @@ window.BoardView = (function () {
       if (!board) { signalled(); return false; }
       const first = state.view !== 'fresh';
       state.board = board;
+      state.oldCopy = false;
+      if (state.down) {
+        state.down = null;
+        $('#downLanding').hidden = true;
+        B.root.classList.remove('down');
+      }
       B.setView('fresh');
       if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
       B.linkUp();
@@ -322,7 +374,7 @@ window.BoardView = (function () {
       scrollToFocus();
       returnToPlace();
       B.site.syncBadge();
-      B.saveSnapshotSoon();
+      B.saveCopySoon();
       return true;
     }
 
@@ -336,10 +388,16 @@ window.BoardView = (function () {
       const out = await B.site.send(kind, { ...data, ...(state.view === 'fresh' ? { since: state.board.version } : {}) });
       if (!B.alive()) return out;
       answered?.();
-      land(out.board, B.boardLoad = (B.boardLoad || 0) + 1);
+      if (!land(out.board, B.boardLoad = (B.boardLoad || 0) + 1)) await boardAfter(out.board.generatedAt);
       return out;
     }
 
+    // A board that reload raced the POST left the tap's own board unlanded (land): the tap is not drawn until a board
+    // made after it is, so send waits for one, and a tap's spinner with it (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    async function boardAfter(generatedAt) {
+      for (let tries = 0; tries < 3 && B.alive() && !(state.view === 'fresh' && state.board.generatedAt >= generatedAt); tries++) await (reloading || loadBoard({ via: 'signal' }));
+    }
+
     // The server signals each change to what the board reads, through the shell, and the board reloads at once; the
     // 30 s poll stays as the fallback and the offline check (docs/adr/2026-10-29-1639-the-board-reloads-on-a-change-signal.md).
     let reloading = null;
@@ -356,30 +414,48 @@ window.BoardView = (function () {
 
     // The toast for a tap the server refused, with its reason, or that never reached it.
     const failed = (e) => B.toast(e?.reason || 'That didn’t go through. Is the host awake?');
-    Object.assign(B, { render, loadBoard, send, failed, reload: signalled });
-    const live = paintSnapshot();
+    // A tap's change no board has shown in BoardUI's PENDING_LATE_MS (ui.js pending): the board reloads once and the button rests.
+    function stillWaiting() {
+      if (!B.alive()) return;
+      B.toast('Still waiting on the board');
+      signalled();
+      render();
+    }
+    Object.assign(B, { render, focusOnBoard, loadBoard, send, failed, stillWaiting, reload: signalled });
     B.headerWired();
-    if (live) B.linkUp();
     const sent = BoardUI.sentNotice.take(B.route);
     if (sent) B.toast(sent);
     B.on(document, 'visibilitychange', () => {
       if (document.hidden) return;
       if (signalMissed) { signalMissed = false; signalled(); } else loadBoard();
     });
-    loadBoard();
+    B.readCopy().then(paintCopy).then(() => { if (B.alive()) loadBoard(); });
     B.signal?.(signalled);
     B.every(30000, () => { if (!document.hidden) { loadBoard(); } });
   }
 
-  function markup({ title = '' } = {}) {
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true, moon: true })}
+  // shared: {by, full} for someone the board is shared with, whose board opens with a strip saying what they can do there
+  // (docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md). → the strip's inside
+  function sharedStrip({ by, full }) {
+    const from = `Shared with you${by ? ` by ${BoardUI.esc(by)}` : ''}.`;
+    return full ? `<b>Full.</b> ${from} You can answer and act. Merge and Board settings are ${by ? `${BoardUI.esc(by)}’s` : 'the owner’s'}.`
+      : `<b>View only.</b> ${from} You can look and open Visit links.`;
+  }
+  function markup({ title = '', shared = null } = {}) {
+    const strip = shared ? `<p class="view-only-strip">${sharedStrip(shared)}</p>\n` : '';
+    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', pages: 'questions', moon: true })}
+<div class="split">
 <main>
-  <section id="setup" class="setup" aria-live="polite" hidden></section>
+${strip}  <section id="setup" class="setup" aria-live="polite" hidden></section>
   <section id="answers" class="answer-banner" hidden></section>
-  <section id="waiting" class="waiting" hidden></section>
+  <section id="needsDeck" class="needs-deck" aria-label="Needs you" hidden></section>
   <div id="tryMain"></div>
   <div id="lanes"></div>
+  <div id="downLanding" hidden></div>
+  ${BoardUI.boardFoot()}
 </main>
+<aside id="needsPane" class="needs-pane" aria-label="Needs you"><section id="waiting" class="waiting" hidden></section></aside>
+</div>
 ${BoardNewTask.markup()}
 <dialog id="mainLogSheet" class="sheet" aria-labelledby="mainLogTitle">
   <div class="sheet-body">
@@ -416,5 +492,5 @@ ${BoardNewTask.markup()}
 </dialog>`;
   }
 
-  return { part, create, page, markup };
+  return { part, create, page, markup, sharedStrip };
 })();

package/board/public/attach.js

@@ -1,6 +1,6 @@
 // docs/adr/2026-11-03-1722-every-text-box-attaches-through-attach-js.md
-// Files attached to a composer: any element with data-composer="<id>" holding BoardUI.attachButton(), its text box in
-// BoardUI.dropZone(), and a [data-files] list. Picking files, dropping them on the composer, or pasting them into it
+// Files attached to a composer: any element with data-composer="<id>" holding its text box in BoardUI.dropZone(), which
+// puts BoardUI.attachButton() inside the box, and a [data-files] list. Picking files, dropping them on the composer, or pasting them into it
 // uploads them at once to the api/upload of the site named by the nearest
 // [data-site] around the composer (a board view's root, app.js), else of the page's own site (ClaudeSite). Pending
 // files live in memory by site and composer id, so a page that rebuilds its markup calls paintAll() to show them