@lovek4d/kickflip 0.5.3 → 0.6.1

package/board/public/app-snapshot.js

@@ -1,72 +1,41 @@
-// The last visit's board on the board view: reading and saving it, holding the controls that send until the fresh
-// board lands, flashing the lines the fresh board changed (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md), and
-// the sign on a card that changed lanes or was updated (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md).
+// The board view's saved copy: reading it from IndexedDB and saving it there with its change number
+// (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md), flashing the lines the catch-up changed, and the sign
+// on a card that changed lanes or was updated (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md).
 // Needs app-core.js and ui-snapshot.js; app.js paints it.
 BoardView.part((B) => {
   const { $$, state } = B;
-  const { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX } = BoardUI;
-  // The hub serves every site from one origin, so each board keeps its own key.
-  const KEY = 'boardSnapshot:' + B.site.url('');
-  // Every board's snapshots together stay within three at ui-snapshot.js's cap, the boards saved least recently
-  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts, which would otherwise fail to
-  // save.
-  const BUDGET = 3 * SNAPSHOT_MAX;
-  const ORDER = 'boardSnapshots';
+  const { copyOf, boardCopy, copyStore, preloadKeys, changedLines, updateSign } = BoardUI;
+  // The hub serves every site from one origin, so each board keeps its own key in the one store.
+  const KEY = B.site.url('');
   const BUILD = document.documentElement.dataset.build;
 
-  function readSnapshot() {
-    let raw = null;
-    try { raw = localStorage.getItem(KEY); } catch {}
-    return raw ? unpackSnapshot(raw, BUILD) : null;
-  }
-  // Makes room for this board's raw snapshot.
-  function keepRecent(raw) {
-    let order = [];
-    try { order = JSON.parse(localStorage.getItem(ORDER) || '[]'); } catch {}
-    const stored = [];
-    for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k?.startsWith('boardSnapshot:') && k !== KEY) stored.push(k); }
-    const recent = [...order.filter((k) => stored.includes(k)), ...stored.filter((k) => !order.includes(k))];
-    let used = raw.length;
-    const kept = [KEY];
-    for (const k of recent) {
-      const size = localStorage.getItem(k)?.length || 0;
-      if (used + size <= BUDGET) { used += size; kept.push(k); } else localStorage.removeItem(k);
-    }
-    localStorage.setItem(ORDER, JSON.stringify(kept));
-  }
+  const copies = (mode, fn) => copyStore('boards', mode, fn);
+
+  // → {savedAt, board, threads} or null. anyBuild reads a copy another build saved too, which only a board out of reach
+  // paints, guarded (app.js showDown).
+  const readCopy = ({ anyBuild = false } = {}) => boardCopy(KEY, anyBuild ? null : BUILD);
+
+  // Saves the board on screen. app.html's boot reads copyVersion before any script loads, so its first board request
+  // asks since the copy's number; it names no number when the save failed.
   let saveTimer = null;
-  function saveSnapshot() {
+  async function saveCopy() {
     saveTimer?.();
     saveTimer = null;
     if (state.view !== 'fresh' || !state.board) return;
-    const raw = packSnapshot(state.board, state.threadCache, {
-      build: BUILD,
-      savedAt: state.board.generatedAt || new Date().toISOString(),
-      keep: [...state.openItems, ...preloadKeys(state.board.items, [])],
-    });
+    const copy = copyOf(state.board, state.threadCache, { build: BUILD, savedAt: state.board.generatedAt || new Date().toISOString() });
     try {
-      if (!raw) { localStorage.removeItem(KEY); return; }
-      keepRecent(raw);
-      localStorage.setItem(KEY, raw);
-    } catch { try { localStorage.removeItem(KEY); } catch {} }
+      await copies('readwrite', (store) => store.put(copy, KEY));
+      B.store.set('copyVersion', { build: BUILD, version: copy.board.version });
+    } catch { B.store.set('copyVersion', null); }
   }
-  const saveSnapshotSoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveSnapshot); };
-  B.on(window, 'pagehide', () => { if (saveTimer) saveSnapshot(); });
-  // The app shell paints a board it comes back to from this, live when nothing changed since (shell.js).
-  B.atUnmount(saveSnapshot);
+  const saveCopySoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveCopy); };
+  B.on(window, 'pagehide', () => { if (saveTimer) saveCopy(); });
+  B.atUnmount(saveCopy);
 
-  // view is ui-snapshot.js liveControls' view; style.css dims the snapshot and its held controls from the view root's data-board.
+  // view is null until a board paints, then 'fresh'; a guarded paint that failed sets it back to null.
   function setView(view) {
     state.view = view;
-    B.root.dataset.board = view;
-  }
-  for (const type of ['click', 'submit']) {
-    B.on(B.root, type, (ev) => {
-      const { blocked } = liveControls(state.view);
-      if (!blocked) return;
-      const control = type === 'submit' ? ev.target.querySelector?.('button[type=submit]') : ev.target.closest?.(blocked);
-      if (control?.matches(blocked)) { ev.preventDefault(); ev.stopImmediatePropagation(); }
-    }, true);
+    if (view) B.root.dataset.board = view; else delete B.root.dataset.board;
   }
 
   // The lines a fresh board can change: each lane count, Needs you line and thread message. A card shows its own sign below.
@@ -79,31 +48,39 @@ BoardView.part((B) => {
   }
   const texts = (els) => Object.fromEntries([...els].map(([id, el]) => [id, el.textContent.replace(/\s+/g, ' ').trim()]));
   let before = null;
+  // The one highlight: every changed line, moved card and updated card takes the full tint of style.css .tint. Re-adding
+  // the class after a layout read restarts the animation, from the delay's point.
+  function highlight(el, elapsed = 0) {
+    el.classList.remove('tint');
+    el.style.setProperty('--sign-delay', `-${elapsed}ms`);
+    void el.offsetWidth;
+    el.classList.add('tint');
+  }
   const holdForFlash = () => { before = texts(lines()); };
   function flashChanged() {
     if (!before || state.view !== 'fresh') return;
     const els = lines();
     const after = texts(els);
     for (const id of changedLines(before, after)) {
-      els.get(id).classList.add('flash');
+      highlight(els.get(id));
       before[id] = after[id];
     }
   }
   const endFlash = () => { before = null; };
 
   // Since the page last drew it, a last visit's board included, a card that changed lanes, a work card that takes
-  // the place of a drawn New task (its fromAsk), or a work card or New task that joins Todo at the bottom, flashes once; any other card whose updateSign changed takes a brief
-  // tint on its title row. Neither shows for a change the owner sent from this page: sentHere(key, send) holds the
-  // card's next change unsigned until the first board load started after send settles.
+  // the place of a drawn New task (its fromAsk), a work card or New task that joins Todo at the bottom, or any other
+  // card whose updateSign changed takes the same tint. It does not show for a change the owner sent from this page:
+  // sentHere(key, send) holds the card's next change unsigned until the first board load started after send settles.
   let drawn = new Map();
   const ownChanges = new Map();
   async function sentHere(key, send) {
     ownChanges.set(key, Infinity);
     try { return await send(); } finally { ownChanges.set(key, B.boardLoad || 0); }
   }
-  // Each sign's style.css animation length. A lane repaint resets a card's classes, so a sign still running is put back
+  // The tint's style.css animation length. A lane repaint resets a card's classes, so a tint still running is put back
   // as far into its animation as it was.
-  const SIGNS = { flash: 1600, tint: 2400 };
+  const TINT_MS = 2400;
   const running = new Map();
   function signCards(load = null) {
     const now = Date.now();
@@ -114,19 +91,15 @@ BoardView.part((B) => {
       const updated = Boolean(was) && was.sign !== updateSign(it);
       const own = ownChanges.get(it.key);
       if (own !== undefined) { if (moved || updated || (load !== null && load > own)) ownChanges.delete(it.key); continue; }
-      if ((moved || updated) && state.view === 'fresh') running.set(it.key, { sign: moved ? 'flash' : 'tint', at: now });
+      if ((moved || updated) && state.view === 'fresh') running.set(it.key, now);
     }
     drawn = new Map(state.board.items.map((i) => [i.key, { lane: i.lane, sign: updateSign(i) }]));
-    for (const [key, { sign, at }] of running) {
-      const card = now - at < SIGNS[sign] && B.root.querySelector(`details.item[data-key="${CSS.escape(key)}"]`);
+    for (const [key, at] of running) {
+      const card = now - at < TINT_MS && B.root.querySelector(`details.item[data-key="${CSS.escape(key)}"]`);
       if (!card) { running.delete(key); continue; }
-      // Re-adding the class after a layout read restarts the animation, from the delay's point.
-      card.classList.remove('flash', 'tint');
-      card.style.setProperty('--sign-delay', `-${now - at}ms`);
-      void card.offsetWidth;
-      card.classList.add(sign);
+      highlight(card, now - at);
     }
   }
 
-  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash, sentHere, signCards });
+  Object.assign(B, { readCopy, saveCopySoon, setView, holdForFlash, flashChanged, endFlash, highlight, sentHere, signCards });
 });

package/board/public/app-threads.js

@@ -1,42 +1,40 @@
 // 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, dropZone, sendButton, protoButton, grillButton, boltButton, 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, BUTTON } = 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>`;
 
   // 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. Any other card's box sends with Send, carrying no intent.
-  // The pair wraps onto its own line under the row.
-  const sendsOf = (item) => (item?.lane !== 'todo' ? 'one' : item.ready ? 'todo-ready' : 'todo');
-  const sends = (kind) => (kind === 'one'
-    ? `<span data-sends="one">${sendButton('Send', 0)}</span>`
-    : `<span class="send-actions" data-sends="${kind}">${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${sendButton('Reply', 0, ' data-intent="reply"')}</span>`);
-  // The board, not the thread, decides the Done button and the send buttons, so they follow each board load even when
-  // the thread is unchanged.
-  function syncDone(el, key) {
+  // 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. Send or Reply is orange while a message clears the card's Action needed, as on a
+  // card the orchestrator stalled (docs/adr/2026-11-06-1252-stale-is-automatic-stalled-is-the-orchestrators-flag.md).
+  const replyTone = (item) => (item?.resolvedBy === BUTTON.reply ? 'resolves' : undefined);
+  const sendsOf = (item) => [item?.lane === 'todo' ? (item.ready ? 'todo-ready' : 'todo')
+    : item?.lane === 'review' ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one', replyTone(item) && 'reply-resolves'].filter(Boolean).join(' ');
+  const pair = (kind, html) => `<span class="send-actions" data-sends="${kind}">${html}</span>`;
+  const sends = (kind, item) => {
+    const reply = (label, attrs = '') => sendButton(label, 0, attrs, replyTone(item));
+    return kind.startsWith('one') ? `<span data-sends="${kind}">${reply('Send')}</span>`
+      : kind.startsWith('review') ? pair(kind, `${doneButton(item)}${reply('Reply', ' data-intent="reply"')}`)
+      : pair(kind, `${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${reply('Reply', ' 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);
-    const todo = item?.lane === 'todo';
-    if (at.dataset.sends !== kind) { at.insertAdjacentHTML('afterend', sends(kind)); at.remove(); }
-    const tools = el.querySelector('form .tools');
-    const bolt = tools.querySelector('[data-bolt]');
-    if (todo && !bolt) tools.insertAdjacentHTML('afterbegin', boltButton(key));
-    else if (!todo) bolt?.remove();
-    const html = doneButton(item);
-    const current = el.querySelector('form [data-confirm="finish"]');
-    if (current?.outerHTML === html) return;
-    current?.remove();
-    if (html) el.querySelector('form [data-sends]').insertAdjacentHTML('beforebegin', html);
+    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
@@ -67,7 +65,7 @@ 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);
@@ -79,21 +77,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>`)}
+      // 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">${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button>${sends('one')}</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);
     }
-    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-05-0430-the-eye-and-fire-send-their-request-at-once.md
-  // The composer's eye asks for a prototype and its fire for a grill: a tap sends the request at once, with whatever is
-  // typed, as /prototype or /grill in the text does on Reply. Nothing typed sends the bare request.
-  const PLACEHOLDER = 'Reply in this thread… (/prototype or /grill asks for one)';
+  // 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
@@ -114,7 +115,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); });
@@ -136,14 +137,6 @@ BoardView.part((B) => {
     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); }
   });
-  // docs/adr/2026-11-05-0010-a-lightning-button-in-a-todo-threads-footer-starts-a-quick-build.md
-  B.on(B.root, 'click', async (ev) => {
-    const b = ev.target.closest('form[data-reply] button[data-bolt]');
-    if (!b) return;
-    const key = b.dataset.bolt;
-    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: 'Quick build', intent: 'build' }))); loadThread(key, { force: true }); }
-    catch { toast('Could not send'); }
-  });
   // 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');
@@ -151,7 +144,8 @@ BoardView.part((B) => {
     const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    // An empty box still sends Implement, the card's build action.
+    // 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;
@@ -166,24 +160,26 @@ BoardView.part((B) => {
     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]');
-    if (b) post(b.closest('form'), b.hasAttribute('data-proto') ? 'prototype' : 'grill', b);
+    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);
   });
   // 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) => {
     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]')) 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 = [];
@@ -29,6 +26,8 @@ window.BoardView = (function () {
       for (let i = 0; i < localStorage.length; i++) old.push(localStorage.key(i));
       // 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));
@@ -129,6 +128,8 @@ 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,
@@ -144,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;
@@ -220,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);
@@ -263,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
@@ -291,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;
@@ -298,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) {
@@ -312,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
@@ -327,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();
@@ -334,7 +374,7 @@ window.BoardView = (function () {
       scrollToFocus();
       returnToPlace();
       B.site.syncBadge();
-      B.saveSnapshotSoon();
+      B.saveCopySoon();
       return true;
     }
 
@@ -382,24 +422,28 @@ window.BoardView = (function () {
       render();
     }
     Object.assign(B, { render, focusOnBoard, loadBoard, send, failed, stillWaiting, reload: signalled });
-    const live = paintSnapshot();
     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(); } });
   }
 
-  // shared: the shell's data.shared for someone the board is shared with, view only, whose board opens with a strip saying so.
+  // 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"><b>View only.</b> Shared with you${shared.by ? ` by ${BoardUI.esc(shared.by)}` : ''}. You can look and open Visit links.</p>\n` : '';
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true, moon: true })}
+    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>
 ${strip}  <section id="setup" class="setup" aria-live="polite" hidden></section>
@@ -407,6 +451,8 @@ ${strip}  <section id="setup" class="setup" aria-live="polite" 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>
@@ -446,5 +492,5 @@ ${BoardNewTask.markup()}
 </dialog>`;
   }
 
-  return { part, create, page, markup };
+  return { part, create, page, markup, sharedStrip };
 })();