@lovek4d/kickflip 0.5.3 → 0.6.0

package/board/public/app-threads.js

@@ -1,42 +1,36 @@
 // 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 } = 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.
+  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);
-    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 +61,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 +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>`)}
+      // 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 +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); });
@@ -136,14 +133,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 +140,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 +156,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 };
 })();

package/board/public/hub-kit.js

@@ -1,4 +1,4 @@
-// What the hub page and settings modals share, each through the view's B
+// What the hub page and settings modals share, Board Settings' duration picker included, each through the view's B
 // (app.js BoardView.page), so unmounting the view stops it all: loading and refreshing the view's data, posting its
 // forms for JSON, and this device's notifications row.
 (function () {
@@ -169,5 +169,65 @@
     return { state: (line) => (state && on ? { ...state, sub: `On · ${line}` } : state), busy: () => busy, ready };
   }
 
-  globalThis.HubKit = { live, forms, device };
+  // datetime-local speaks the device's clock; the picker's hidden field carries its UTC ISO value to the server.
+  const localInput = (d) => {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+  function customBounds(input, reset = false) {
+    const now = Date.now();
+    input.min = localInput(new Date(now + 60_000));
+    input.max = localInput(new Date(now + 30 * 86_400_000));
+    if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
+  }
+
+  // The one duration picker Snooze, Keep awake, Pause hub and Pause board share (hub/duration.mjs): chips that post
+  // `name` to `action` at once, then Custom, whose date and time posts as `name` too. While its setting is on, `on`
+  // replaces it with when it ends and a button that posts `name`=off.
+  function durationPicker({ id, title, icon, action, name, choices, on, button }) {
+    const { esc } = HubUI;
+    if (on) return `<div class="row dur-on">${icon}<span class="body"><span class="text title">${esc(on.title)}</span><form method="post" action="${action}"><button class="btn quiet" name="${name}" value="off">${button}</button></form></span></div>`;
+    if (!choices) return '';
+    const chips = choices.map((c) => `<button class="btn quiet" name="${name}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="block" role="group" aria-labelledby="${id}Title"><div class="dur-head">${icon}<span class="title" id="${id}Title">${title}</span></div><div class="dur-chips"><form class="dur-choices" method="post" action="${action}">${chips}</form><form class="dur-custom" method="post" action="${action}"><input type="hidden" name="${name}"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-dur-at required aria-label="Custom ${title.toLowerCase()} until a date and time"></form></div></div>`;
+  }
+
+  // Wires every duration picker under B.root: Custom opens its picker, and closing it submits its form with the time
+  // chosen. → painted(), which a view calls after drawing a picker to set Custom's bounds and suggested time.
+  function durationPickers(B) {
+    let openPicker = null;
+    B.on(B.root, 'click', (e) => {
+      const input = e.target.closest?.('[data-dur-at]');
+      if (!input) return;
+      openPicker = input;
+      customBounds(input, input.value === input.defaultValue);
+      try { input.showPicker(); } catch { /* iOS opens its wheel on the tap itself. */ }
+    });
+    // A chip's pointerdown comes before Custom's focusout; without this reset Custom posts first and the chip's post is dropped.
+    B.on(B.root, 'pointerdown', (e) => {
+      const input = e.target.closest?.('.dur-choices button') && e.target.closest('.dur-chips')?.querySelector('[data-dur-at]');
+      if (!input) return;
+      openPicker = null;
+      input.value = input.defaultValue;
+    });
+    // Closing an opened picker accepts its suggested time; an unchanged field reached by Tab does nothing.
+    const saveCustom = (input) => {
+      if (!input.value || (input !== openPicker && input.value === input.defaultValue) || !input.checkValidity()) return;
+      const at = new Date(input.value);
+      if (Number.isNaN(at.getTime())) return;
+      input.form.querySelector('input[type="hidden"]').value = at.toISOString();
+      input.form.requestSubmit();
+      openPicker = null;
+      input.defaultValue = input.value;
+    };
+    B.on(B.root, 'change', (e) => {
+      if (e.target.matches?.('[data-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
+    });
+    B.on(B.root, 'focusout', (e) => {
+      if (e.target.matches?.('[data-dur-at]')) saveCustom(e.target);
+    });
+    return { painted: () => { for (const input of B.root.querySelectorAll('[data-dur-at]')) customBounds(input, true); } };
+  }
+
+  globalThis.HubKit = { live, forms, device, durationPicker, durationPickers };
 })();

package/board/public/hub.css

@@ -135,6 +135,8 @@
 .hub-view .lk-form input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
 
 .hub-view .ub-banner > button { flex: none; min-height: 32px; }
+.hub-view .hold-banner.ub-paused { border-color: var(--line); background: var(--panel); }
+.hub-view .hold-banner.ub-paused > svg { color: var(--muted); }
 .hub-view .hold-banner.ub-going { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); }
 .hub-view .hold-banner.ub-going > svg { color: var(--color-danger); }
 

package/board/public/new-task.js

@@ -8,14 +8,16 @@ globalThis.BoardNewTask = (function () {
     <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
     ${BoardUI.dropZone('<textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>')}
     <div class="pending-files" data-files></div>
-    <div class="send-actions">${BoardUI.sendButton('Quick build', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
+    <div class="send-actions">${BoardUI.sendButton('Implement', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
     <p class="muted small" id="askStatus" aria-live="polite"></p>
   </form>
 </dialog>`;
 
   function wire(B) {
-    // A shared person looks only (shell.js marks the page shared-view, and style.css hides the +), so n twice opens nothing.
-    if (document.documentElement.classList.contains('shared-view')) return;
+    // A View person looks only (shell.js marks the page shared-view without shared-full, and style.css hides the +), so
+    // n twice opens nothing.
+    const html = document.documentElement.classList;
+    if (html.contains('shared-view') && !html.contains('shared-full')) return;
     const { $, store, toast, quieted, sendDraft } = B;
     const { waitOn, keyedSend } = BoardUI;
     const send = (kind, data) => (B.send ? B.send(kind, data) : B.site.send(kind, data));
@@ -24,7 +26,7 @@ globalThis.BoardNewTask = (function () {
     const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
     // Files picked before the app shell switched away from this board are still attached, so they show again.
     BoardAttach.paint('ask', B.site.root);
-    // ⌘↵ sends the ask as Discuss and ⌥↵ as Quick build (ui.js keyedSend).
+    // ⌘↵ sends the ask as Discuss and ⌥↵ as Implement (ui.js keyedSend).
     B.on($('#askText'), 'keydown', (ev) => {
       const button = keyedSend(ev, $('#askForm'));
       if (!button) return;
@@ -64,7 +66,7 @@ globalThis.BoardNewTask = (function () {
       if (ev.defaultPrevented) { lastN = -Infinity; return; }
       if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
       const field = ev.target.closest && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
-      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('down')) { lastN = -Infinity; return; }
       if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
       lastN = -Infinity;
       ev.preventDefault();
@@ -75,7 +77,7 @@ globalThis.BoardNewTask = (function () {
     B.on($('#sheetClose'), 'click', closeSheet);
     B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
-    // Discuss has the session grill or prototype the task at once; Quick build sends the ask with quick: true, and the
+    // Discuss has the session grill or prototype the task at once; Implement sends the ask with quick: true, and the
     // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
     B.on($('#askForm'), 'submit', async (ev) => {
       ev.preventDefault();

package/board/public/progress-review.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Progress bars</title>
+<link rel="stylesheet" href="colors.css">
+<link rel="stylesheet" href="style.css">
+<style>
+  /* The progress-bar review (progress-review.js): the board's lanes, each card one bar or status line drawn by the real
+     renderers, its colour the lane's --lane, which the lane's colour pick sets; the open card's editor beneath. */
+  .pr-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+  @media (max-width: 799px) { .pr-lanes { grid-template-columns: minmax(0, 1fr); } }
+  .pr-lane > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--lane); border-bottom: 2px solid var(--lane); padding-bottom: 4px; }
+  .pr-lane input[type="color"] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
+  .pr-lane .sub.agent:not(.waiting-gray, .quiet) { color: var(--lane); }
+  .pr-lane .phase-bars:not(.dim) { --bar-fill: var(--lane); }
+  .pr-lane .item[data-open] > summary { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .pr-lane .card-time .sb-steps .phase-bars { gap: 2px; }
+  .pr-editor { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; }
+  .pr-editor h2 { margin: 0 0 8px; font-size: 15px; }
+  .pr-editor label { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
+  .pr-editor :where(input, select) { font-size: 16px; }
+  .pr-editor ol { margin: 8px 0 0; padding: 0; list-style: none; }
+  .pr-editor li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
+  .pr-editor li.over { outline: 2px dashed var(--accent); }
+  .pr-editor .grip { cursor: grab; color: var(--muted); }
+  .pr-send { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+</style>
+</head>
+<body>
+<!--header {"lead":"back","title":"Progress bars","backHref":"./","controls":false}-->
+<main>
+  <p class="muted">Every progress bar and status line the board draws, in the lane it shows in. Tap one to rename it, move it to another lane or rename and reorder its steps; pick each lane's colour; then Send.</p>
+  <div id="review"></div>
+</main>
+<script src="ui.js"></script>
+<script src="ui-links.js"></script>
+<script src="ui-enums.js"></script>
+<script src="ui-progress-bar.js"></script>
+<script src="ui-cards.js"></script>
+<script src="ui-sidebar.js"></script>
+<script src="claude.js"></script>
+<script src="progress-review.js"></script>
+</body>
+</html>