@lovek4d/kickflip 0.5.3 → 0.6.0

package/board/public/ui-snapshot.js

@@ -1,73 +1,64 @@
-// The last board this device showed, which the board page paints dimmed until the fresh board lands, and what the
-// page may do meanwhile (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md). Needs ui.js.
+// The board this device last held, saved in IndexedDB with its change number, which the board page paints live on open
+// and catches up from (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md). Needs ui.js.
 (function () {
-  // Characters, one board's most; app-snapshot.js keeps every board's within three of these.
-  const SNAPSHOT_MAX = 900000;
   const ACTIVE_LANES = ['review', 'stale', 'progress', 'todo'];
 
-  // What a first paint shows of board: every card as the board sent it, Done cards already slim (board/domain.mjs
-  // slimDone), or the open lanes alone when openOnly. It keeps no version, since it isn't the board that version names,
-  // so the first reload downloads the whole board (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
-  const firstPaint = ({ version: _, ...board }, openOnly) => ({ ...board, items: openOnly ? board.items.filter((it) => it.lane !== 'done') : board.items });
-
-  // threads maps item keys to thread messages (app.js state.threadCache). The board goes in as firstPaint, then threads of
-  // `keep` first and the rest while they fit under max; threads of items no longer on the board are dropped. When the
-  // board still won't fit, Done cards go too. build is the saving page's (app.html data-build). Null when open lanes alone won't fit.
-  function packSnapshot(board, threads, { build, savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
-    const headOf = (b) => `{"build":${JSON.stringify(build)},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(b)},"threads":{`;
-    let shown = firstPaint(board, false);
-    let head = headOf(shown);
-    if (head.length + 2 > max) {
-      shown = firstPaint(board, true);
-      head = headOf(shown);
-      if (head.length + 2 > max) return null;
-    }
-    const onBoard = new Set(shown.items.map((i) => i.key));
-    let out = head;
-    let n = 0;
-    for (const key of new Set([...keep, ...threads.keys()])) {
-      if (!onBoard.has(key) || !threads.has(key)) continue;
-      const part = `${n ? ',' : ''}${JSON.stringify(key)}:${JSON.stringify(threads.get(key))}`;
-      if (out.length + part.length + 2 > max) continue;
-      out += part;
-      n++;
-    }
-    return `${out}}}`;
-  }
+  // threads maps item keys to thread messages (app.js state.threadCache). → {build, savedAt, board, threads} with the
+  // threads of the cards on the board; build is the saving page's (app.html data-build).
+  const copyOf = (board, threads, { build, savedAt }) => {
+    const onBoard = new Set(board.items.map((i) => i.key));
+    return { build, savedAt, board, threads: Object.fromEntries([...threads].filter(([key]) => onBoard.has(key))) };
+  };
 
-  // → {savedAt, board, threads: {key: messages}}, or null for anything packSnapshot didn't write under this build: code
-  // from another build may read the board's shape differently, and a paint that throws stops the live load.
-  function unpackSnapshot(raw, build) {
-    let s;
-    try { s = JSON.parse(raw); } catch { return null; }
-    if (s?.build !== build || !Array.isArray(s.board?.items) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
+  // → {savedAt, board, threads}, or null for anything copyOf didn't write under this build: code from another build may
+  // read the board's shape differently, and a paint that throws stops the live load.
+  function readCopy(s, build) {
+    if (!s || s.build !== build || !Array.isArray(s.board?.items) || !Number.isInteger(s.board.version) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
     const threads = Object.fromEntries(Object.entries(s.threads && typeof s.threads === 'object' ? s.threads : {}).filter(([, m]) => Array.isArray(m)));
     return { savedAt: s.savedAt, board: s.board, threads };
   }
 
+  // One transaction on a store of the copies' database: 'boards', each board's copy, or 'pages', a side page's answers
+  // (pageCopy). fn(store) → the request whose result it resolves with. Rejects where IndexedDB is missing or refuses.
+  function copyStore(name, mode, fn) {
+    return new Promise((resolve, reject) => {
+      const open = indexedDB.open('kickflip-boards', 2);
+      open.onupgradeneeded = () => { for (const s of ['boards', 'pages']) if (!open.result.objectStoreNames.contains(s)) open.result.createObjectStore(s); };
+      open.onerror = () => reject(open.error);
+      open.onsuccess = () => {
+        const db = open.result;
+        const tx = db.transaction(name, mode);
+        const req = fn(tx.objectStore(name));
+        tx.oncomplete = () => { db.close(); resolve(req.result); };
+        tx.onerror = tx.onabort = () => { db.close(); reject(tx.error); };
+      };
+    });
+  }
+
+  // A side page's last answer from each URL it reads, Notes' and Settings', for showing while the board can't be reached
+  // (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md). read(url) → {savedAt, body} or null.
+  const pageCopy = {
+    save: (url, body) => copyStore('pages', 'readwrite', (store) => store.put({ savedAt: new Date().toISOString(), body }, url)).catch(() => {}),
+    read: (url) => copyStore('pages', 'readonly', (store) => store.get(url)).then((c) => (typeof c?.savedAt === 'string' ? c : null), () => null),
+  };
+
+  // The copy of the board at key, the board view's site URL: the copy build saved, or with build null any build's.
+  // → {savedAt, board, threads} or null.
+  const boardCopy = (key, build) => copyStore('boards', 'readonly', (store) => store.get(key)).then((s) => readCopy(s, build ?? s?.build), () => null);
+
   // The cards whose threads load right after the board, so tapping one opens it filled; open cards load with the board.
   const preloadKeys = (items, open) => {
     const opened = new Set(open);
     return items.filter((i) => ACTIVE_LANES.includes(i.lane) && !opened.has(i.key)).map((i) => i.key);
   };
 
-  // What the board page takes taps on. view is 'snapshot' while the last visit shows, 'fresh' once a board load landed,
-  // and null before either. blocked selects the controls that send to the host and wait for the fresh board; style.css's
-  // INT-61 block dims the same list.
-  const SNAPSHOT_BLOCKED = ['.actions button', 'button[data-plan]', 'button[data-bump]', 'button[data-card-bump]', 'button[data-edit]', 'button[data-withdraw]',
-    'button[data-check-github]', 'form[data-reply] button[type=submit]', 'form[data-reply] button[data-quick]', 'form[data-reply] button[data-proto]', 'form[data-reply] button[data-confirm]', '.prompt button'].join(', ');
-  const liveControls = (view) => {
-    const fresh = view !== 'snapshot';
-    return { read: true, ask: true, cards: fresh, send: fresh, blocked: fresh ? '' : SNAPSHOT_BLOCKED };
-  };
-
   // before and after map a line's id to its text; the ids of the lines that are new or read differently flash once.
   const changedLines = (before, after) => Object.keys(after).filter((id) => globalThis.BoardUI.record(before, id) !== after[id]);
 
-  // What counts as a card's update: a new thread line, a status or Next line change, or a PR or CI change
+  // What counts as a card's update: a new thread line, a lane, status or Next line change, or a PR or CI change
   // (docs/adr/2026-11-02-2354-an-updated-card-takes-a-brief-tint.md). Two board items read the same exactly when it is unchanged.
-  const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.status ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? null,
+  const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.lane ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? null,
     it.next ?? null, it.ask?.state ?? null, ...(it.prs || []).map((pr) => [pr.state, pr.isDraft, pr.reviewDecision, pr.checks?.state ?? null])]);
 
-  Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX });
+  Object.assign(globalThis.BoardUI, { copyOf, readCopy, copyStore, pageCopy, boardCopy, preloadKeys, changedLines, updateSign });
 })();

package/board/public/ui-threads.js

@@ -1,7 +1,7 @@
 // A card's thread: the orchestrator's lines (who claude, named Orchestrator), its builders' asks, the owner's messages and
 // their replies. Needs ui.js, ui-links.js and ui-enums.js.
 (function () {
-  const { esc, time, etaLine, replyBody, attachments, dropZone, sendButton, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, mark, statusMark, BUTTON } = globalThis.BoardUI;
+  const { esc, escText, time, etaLine, replyBody, attachments, dropZone, sendButton, editButton, withdrawButton, thinkingLine, linkText, linkHtml, anyLink, mark, statusMark, BUTTON } = globalThis.BoardUI;
   const VIA = { slack: ' · Slack', github: ' · GitHub' };
   // A link to a card on this board (#item=<key>) or on another board (/<route>/#item=<key>, an ask's move), or ''.
   function cardLink(link) {
@@ -15,52 +15,79 @@
   const stateOf = (m) => m.state || (m.reply ? 'replied' : 'waiting');
   // A message's footer: the tap it came from (m.status, such as "answers submitted"), then, to its right, Claude's
   // pick-up while it waits (docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
-  const PICK_UP = { working: workingLine, waiting: 'Waiting for Claude…' };
+  const PICK_UP = { working: thinkingLine, waiting: () => 'Waiting for Claude…' };
   const msgFooter = (m) => {
-    const parts = [m.status && `<span class="foot-status">${statusMark(m.status)}${esc(m.status)}</span>`, PICK_UP[stateOf(m)]].filter(Boolean);
+    const parts = [m.status && `<span class="foot-status">${statusMark(m.status)}${esc(m.status)}</span>`, PICK_UP[stateOf(m)]?.()].filter(Boolean);
     return parts.length ? `<div class="reply muted small">${parts.join('')}</div>` : '';
   };
   // Each reply becomes Claude's own message at the time it was written, quoting the owner's message
   // when other messages came between them. A reply with no time follows its message.
   const withReplies = (msgs) => {
+    // A folded submit's answers each reply, quoting their own block.
     const out = msgs.flatMap((m, i) => [{ m, at: String(m.ts), i, part: 0 },
-      ...(m.eventId && m.reply ? [{ m: { ts: m.reply.at || m.ts, who: 'claude', kind: 'reply', reply: m.reply }, of: m, at: String(m.reply.at || m.ts), i, part: 1 }] : [])]);
+      ...(m.answers || [m]).filter((a) => a.eventId && a.reply).map((a) => ({ m: { ts: a.reply.at || m.ts, who: 'claude', kind: 'reply', reply: a.reply }, of: m, quoted: m.answers ? a.text : m.text, at: String(a.reply.at || m.ts), i, part: 1 }))]);
     out.sort((a, b) => a.at.localeCompare(b.at) || a.i - b.i || a.part - b.part);
-    return out.map(({ m, of }, n) => (of ? { ...m, quote: out[n - 1]?.m === of ? '' : of.text || '' } : m));
+    return out.map(({ m, of, quoted }, n) => (of ? { ...m, quote: out[n - 1]?.m === of && !(of.answers?.length > 1) ? '' : quoted || '' } : m));
   };
   // A message being edited shows its edit box in place of its text; app-asks.js handles the form, and attach.js the
   // files it adds to the message, under composer id edit:<event id>.
   const editForm = (id, text) => `<form class="edit-form" data-edit-form="${esc(id)}" data-composer="edit:${esc(id)}">${dropZone(`<textarea rows="3">${esc(text)}</textarea>`)}
         <div class="pending-files" data-files></div>
         <div class="send-actions"><button type="button" data-edit-cancel>Cancel</button>${sendButton('Save', 0)}</div></form>`;
-  // batched: an answer followed by another of the owner's answers in its state, which carries the batch's footer.
-  const line = (m, links, edits, batched = false) => (m.kind === 'reply'
+  const line = (m, links, edits) => (m.kind === 'reply'
     ? `<div class="msg claude reply-msg"><div class="who">Orchestrator · ${esc(time(m.ts))}</div>${m.quote ? `<blockquote class="quote">${linkText(m.quote, links)}</blockquote>` : ''}<div class="body">${linkHtml(replyBody(m.reply), links)}</div></div>`
-    : m.kind === 'ask-link' ? `<div class="msg link"><a href="${esc(m.link)}">${esc(m.text)} →</a></div>`
-    : m.request ? `<div class="msg request">${statusMark(m.text)}${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
-    : m.kind === 'questions' ? `<div class="msg builder-status planner new-questions">${statusMark('questions')}<a href="${esc(m.link)}">${esc(m.text)}</a> <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'ask-link' ? `<div class="msg link">${statusMark('ask-link')}<a href="${esc(m.link)}">${escText(m.text)} →</a></div>`
+    // docs/adr/2026-11-05-1921-a-visual-is-a-page-an-agent-draws-for-a-thread.md: a visual's page opens full page.
+    : m.kind === 'visual' ? `<div class="msg link visual">${statusMark('visual')}<a href="${esc(m.link)}">${escText(m.text)} →</a> <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    // A request line's mark is its words' icon, or m.mark's for a line whose words vary; a Full person's names them.
+    : m.request && m.card ? `<div class="msg request">${statusMark(m.mark)}<a href="${esc(m.link)}">${escText(m.text)}</a> <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.request ? `<div class="msg request">${statusMark(m.mark || m.text)}${escText(m.text)} <span class="muted">· ${m.by ? `${esc(m.by)} · ` : ''}${esc(time(m.ts))}</span></div>`
+    // docs/adr/2026-11-07-1400-a-card-stores-its-lane-and-facts-replace-statuses.md: a card's move between lanes.
+    : m.kind === 'move' ? `<div class="msg request move">${statusMark('move')}${escText(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'questions' ? `<div class="msg builder-status planner new-questions">${statusMark('questions')}<a href="${esc(m.link)}">${escText(m.text)}</a> <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.folded ? foldedRun(m, links, edits)
     : m.kind === 'status' ? `<div class="msg builder-status${m.planner ? ' planner' : ''}">${mark('<span class="working-dot"></span>')}${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
-    : m.kind === 'calls' ? `<details class="msg calls"><summary>${statusMark('judgment calls')}${esc(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
-    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}">${mark('<span class="agent-dot"></span>')}${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
+    : m.kind === 'calls' ? `<details class="msg calls"><summary>${statusMark('judgment calls')}${escText(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
+    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}">${mark('<span class="agent-dot"></span>')}${escText(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
         ${m.canDelete || m.canEdit ? `<div class="ask-actions">${m.canEdit ? editButton(m.eventId) : ''}${m.canDelete ? withdrawButton(m.eventId) : ''}</div>` : ''}
-        <div class="who">${m.who === 'love' ? 'You' : m.who === 'claude' ? 'Orchestrator' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
+        <div class="who">${m.who === 'love' ? (m.by ? esc(m.by) : 'You') : m.who === 'claude' ? 'Orchestrator' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
         <div class="body"${edits.has(m.eventId) ? ' hidden' : ''}>${m.html ? linkHtml(m.html, links) : linkText(m.text, links)}</div>${edits.has(m.eventId) ? editForm(m.eventId, edits.get(m.eventId).text) : ''}${attachments(m.files)}
         ${m.log ? `<div class="small"><a href="log.html?file=${encodeURIComponent(m.log)}">Open the log</a></div>` : ''}
         ${m.link ? `<div class="small">${cardLink(m.link) || anyLink(m.link, m.link)}</div>` : ''}
-        ${m.eventId && !batched ? msgFooter(m) : ''}
+        ${m.eventId ? msgFooter(m) : ''}
       </div>`);
 
+  // One agent run (domain.mjs threadOf gives its started line, status lines and finished line the same `run`) is one
+  // closed details line at its started line's place: the agent, running with its newest status text or finished, and
+  // no line count, and ending with a log link beside the summary when the run has a log; expanding it shows the run's lines.
+  function foldedRun(m, links, edits) {
+    const statuses = m.folded.filter((f) => f.kind === 'status');
+    const running = !m.folded.some((f) => f.finished);
+    const newest = statuses.at(-1);
+    const tail = running ? (newest ? `running · ${escText(newest.text)}` : 'running') : 'finished';
+    const log = m.folded.find((f) => f.log)?.log;
+    const logLink = log ? ` <a class="fold-log" href="log.html?file=${encodeURIComponent(log)}">log</a>` : '';
+    return `<details class="msg calls status-fold${m.planner ? ' planner' : ''}"><summary${running ? '' : ' class="finished"'}>${statusMark('status lines')}${escText(m.agent)} · ${tail}${logLink}</summary>${m.folded.map((f) => line(f, links, edits)).join('')}</details>`;
+  }
+  function foldStatus(lines) {
+    const runs = new Map();
+    for (const m of lines) if (m.run && (m.kind === 'status' || m.kind === 'agent')) runs.set(m.run, [...(runs.get(m.run) || []), m]);
+    return lines.flatMap((m) => {
+      const run = m.run && (m.kind === 'status' || m.kind === 'agent') ? runs.get(m.run) : null;
+      if (!run) return [m];
+      return m === run[0] ? [{ ...m, folded: run }] : [];
+    });
+  }
+
   const STEP = 3;
   const UNREAD_CAP = 10;
-  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link', 'questions']);
+  // Every kind of system line; each leads with a mark, and a test renders each, so a new kind needs an entry in ui.js MARK_ICONS.
+  const SYSTEM_KINDS = ['status', 'agent', 'calls', 'ask-link', 'questions', 'visual', 'command', 'move'];
+  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link', 'questions', 'move']);
   const isMessage = (m) => !NOT_MESSAGE.has(m.kind);
   // Only Claude's and GitHub's messages are unread, as on the badge (domain.mjs othersAt, ui-cards.js unreadCount); the
   // orchestrator's answer to a builder's ask never is.
-  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && m.kind !== 'builder-answer' && (m.who === 'claude' || m.via === 'github') && String(m.ts) > seenAt;
-  const batchedAt = (lines, i) => {
-    const next = lines.slice(i + 1).find(isMessage);
-    return lines[i].kind === 'owner-answer' && next?.kind === 'owner-answer' && stateOf(next) === stateOf(lines[i]);
-  };
+  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && m.kind !== 'command' && m.kind !== 'builder-answer' && (m.who === 'claude' || m.via === 'github') && String(m.ts) > seenAt;
   // The window opens from the oldest unread message, at most UNREAD_CAP messages back; a message being edited always shows.
   function threadWindow(lines, { seenAt = null, more = 0, upto = null }, edits) {
     const counted = lines.flatMap((m, i) => (isMessage(m) && (!upto || String(m.ts) <= upto) ? [i] : []));
@@ -79,21 +106,23 @@
   // draws the open card's window, so lines after `upto` add below without hiding older ones; null draws every line.
   function threadMessages(msgs, links = {}, edits = new Map(), view = null) {
     if (!msgs.length) return '<div class="muted small">No messages here yet.</div>';
-    const lines = withReplies(msgs);
+    const lines = foldStatus(withReplies(msgs));
     const { start, hidden } = view ? threadWindow(lines, view, edits) : { start: 0, hidden: 0 };
     const shown = lines.slice(start);
     if (start && shown[0].kind === 'reply' && !shown[0].quote) shown[0] = { ...shown[0], quote: lines[start - 1].text || '' };
-    return (hidden ? moreButton(hidden) : '') + shown.map((m, i) => line(m, links, edits, batchedAt(lines, start + i))).join('');
+    return (hidden ? moreButton(hidden) : '') + shown.map((m) => line(m, links, edits)).join('');
   }
 
-  // The reply form's Done sends ask-done or card-done; the board applies it before the session follows up.
-  // docs/adr/2026-11-02-0009-the-board-applies-the-owners-hold-resume-and-done-at-once.md
+  // docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md
+  // An In Review card's Done, the second of its thread box's pair after Reply, on ⌥↵. It confirms and sends ask-done or
+  // card-done (app-cards.js); the board applies it before the session follows up
+  // (docs/adr/2026-11-02-0009-the-board-applies-the-owners-hold-resume-and-done-at-once.md).
   // Orange while it clears an ask's Action needed, primary while a reopened card waits only on it
   // (docs/adr/2026-11-03-0137-a-card-waiting-only-to-be-closed-has-no-action-needed.md).
+  const doneTone = (it) => (it.resolvedBy === BUTTON.done ? 'resolves' : it.awaitsDone ? 'closes' : '');
   function doneButton(it) {
-    if (!it?.finishable) return '';
-    const tone = it.resolvedBy === BUTTON.markDone ? 'resolves' : it.awaitsDone ? 'closes' : '';
-    return `<button type="button"${tone ? ` class="${tone}"` : ''} data-confirm="finish" data-key="${esc(it.key)}">Done</button>`;
+    const tone = doneTone(it);
+    return sendButton('Done', 1, `${tone ? ` class="${tone}"` : ''} data-confirm="finish" data-key="${esc(it.key)}"`);
   }
 
   // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
@@ -105,5 +134,5 @@
     return [{ ts: fresh.at(-1), who: 'claude', kind: 'questions', text: `${fresh.length} new question${fresh.length === 1 ? '' : 's'}`, link: `questions.html#${encodeURIComponent(questions.first)}` }];
   }
 
-  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton, newQuestionsLine });
+  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton, doneTone, newQuestionsLine, SYSTEM_KINDS });
 })();

package/board/public/ui.js

@@ -53,8 +53,9 @@
   const CLIP = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
   const attachButton = () => `<label class="attach" title="Attach files"><input type="file" multiple data-attach aria-label="Attach files">${CLIP}</label>`;
   // A composer's text box with its attach button inside at the bottom right, which attach.js outlines with Drop to
-  // attach while files are dragged over the composer.
-  const dropZone = (textarea) => `<div class="dz">${textarea}${attachButton()}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
+  // attach while files are dragged over the composer. attach: false leaves the button out, for a composer that puts it
+  // on its row (app-threads.js).
+  const dropZone = (textarea, { attach = true } = {}) => `<div class="dz${attach ? '' : ' bare'}">${textarea}${attach ? attachButton() : ''}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
   // docs/adr/2026-11-04-2343-each-text-box-sends-its-intent-from-a-key.md
   // A composer's send buttons: the one with nth 0 presses on ⌘↵ and the one with nth 1, where there is one, on ⌥↵,
   // wherever each sits in the row (Ctrl+↵ and
@@ -71,27 +72,46 @@
   const icon = (body, size = 18, attrs = '') => `<svg${attrs} width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
   // An SVG, not ↗: iOS Safari can draw ↗ as an emoji tile even with U+FE0E.
   const LINK_ARROW = icon('<path d="M7 17 17 7"/><path d="M7 7h10v10"/>', '1em', ' class="link-arrow" style="vertical-align:-0.125em"');
+  // Escaped text with each ↗ (and a trailing U+FE0E) drawn as LINK_ARROW; for owner-facing text, never an attribute.
+  const escText = (s) => esc(s).replace(/\u2197\uFE0E?/g, LINK_ARROW);
   const EYE = icon('<path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/>');
   const TRASH = icon('<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>');
   const FIRE = icon('<path d="M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-6 1-9z"/>');
-  const BOLT = icon('<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>');
+  const IMAGE_PATHS = '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>';
   // Asks Claude for throwaway prototypes of one item (docs/adr/2026-10-29-1639-prototypes-come-on-request.md): a
   // question's eye sends at once; a thread's eye is a toggle that Send carries (app-threads.js).
   const protoButton = (id, { label = 'Ask for prototypes' } = {}) => `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}">${EYE}</button>`;
   // The thread's fire, the eye's twin for a grill.
   const grillButton = (id) => `<button type="button" class="attach proto-ask" data-grill="${esc(id)}" aria-label="Ask for a grill" title="Ask for a grill">${FIRE}</button>`;
-  // A Todo card's thread footer lightning: starts a quick build of the card at once (app-threads.js).
-  const boltButton = (id) => `<button type="button" class="attach proto-ask" data-bolt="${esc(id)}" aria-label="Quick build" title="Quick build">${BOLT}</button>`;
+  // The thread's image, asking for a visual: a page an agent draws to answer in the thread (app-threads.js;
+  // docs/adr/2026-11-05-1921-a-visual-is-a-page-an-agent-draws-for-a-thread.md).
+  const visualButton = (id) => `<button type="button" class="attach proto-ask" data-visual="${esc(id)}" aria-label="Ask for a visual" title="Ask for a visual">${icon(IMAGE_PATHS)}</button>`;
   // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
   // A thread status line's leading mark, its icon or dot centred in one fixed box so every line's text starts at the
-  // same place: the request's eye, fire or quick build's lightning, answers' check, new questions' plain question mark, a builder's dot.
+  // same place: a command line's icon by its words (domain.mjs COMMANDS: the request's eye, fire or image, Implement's
+  // code brackets, Hold's pause, Resume's play, Done's circled check), Reply's arrow, answers' check, a reopened
+  // question's turn-back arrow, new questions' plain question mark, a builder's dot.
   const mini = (body, cls = '') => `<svg class="mark-icon${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+  const LINK = mini('<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/>');
   const MARK_ICONS = {
-    'prototype requested': mini('<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
-    'grill requested': mini('<path d="M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-6 1-9z"/>'),
-    'quick build: no grill': mini('<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>'),
+    'Prototype requested': mini('<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
+    'Grill requested': mini('<path d="M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-6 1-9z"/>'),
+    'Visual requested': mini(IMAGE_PATHS),
+    'Re-ask requested': mini('<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>'),
+    visual: mini(IMAGE_PATHS),
+    'ask-link': mini('<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>'),
+    move: mini('<path d="M3 7h14"/><path d="m13 3 4 4-4 4"/><path d="M21 17H7"/><path d="m11 13-4 4 4 4"/>'),
+    'Implementation requested': mini('<path d="m8 6-6 6 6 6"/><path d="m16 6 6 6-6 6"/>'),
+    Held: mini('<path d="M9 5v14"/><path d="M15 5v14"/>'),
+    Resumed: mini('<path d="M7 4v16l13-8z"/>'),
+    'Related to': LINK, 'Unrelated from': LINK, 'Follow-up': LINK, 'Follow-up of': LINK,
+    'Marked done': mini('<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>'),
+    Reply: mini('<path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/>'),
+    Implement: mini('<path d="m8 6-6 6 6 6"/><path d="m16 6 6 6-6 6"/>'),
     'answers submitted': mini('<path d="M20 6 9 17l-5-5"/>'),
+    'question reopened': mini('<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>'),
     'judgment calls': mini('<path d="m9 6 6 6-6 6"/>'),
+    'status lines': mini('<path d="m9 6 6 6-6 6"/>'),
     questions: mini('<path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01"/>', ' big'),
   };
   const mark = (inner = '') => `<span class="mark" aria-hidden="true">${inner}</span>`;
@@ -110,6 +130,12 @@
     ? `<button class="ghost icon bumped" data-card-bump="${esc(key)}" data-bumped aria-pressed="true" aria-label="Unbump" title="Bumped. Tap to unbump">${BUMP}</button>`
     : `<button class="ghost icon" data-card-bump="${esc(key)}" aria-pressed="false" aria-label="Bump to top" title="Bump to top">${BUMP}</button>`);
   const workingLine = '<span class="thinking"><span class="working-dot" aria-hidden="true"></span>thinking</span>';
+  // Every paused status, whatever its place, is this one class (style.css .paused); BoardUI.usagePause is set by the
+  // board view (app.js) to read the hub's usage pause.
+  const PAUSED = '<span class="paused">paused</span>';
+  const isPaused = () => BoardUI.usagePause?.()?.state === 'paused';
+  // The orchestrator's "thinking" while its usage allows, else paused.
+  const thinkingLine = () => (isPaused() ? PAUSED : workingLine);
   // html is markup the caller has escaped; href, title and attrs values are escaped here.
   const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready', 'merged']);
   function badge(tone, html, { href, title, button = false, attrs = {} } = {}) {
@@ -131,11 +157,11 @@
   // under el it was, so a card that moves lanes keeps its open thread. A textarea keeps what was typed in it, and an
   // element matching opts.keep stays as it is, for markup another part paints. The focused field keeps its focus when
   // its card moves (focusSafe). setHTML skips an unchanged rebuild, and reopens each <details> the reader left open,
-  // matched by its owning [data-key] and summary text. Open state is tracked page-wide, so content filled in after a
+  // matched by its owning [data-key] and summary text (a card itself by its key alone, its summary text changing as it ages). Open state is tracked page-wide, so content filled in after a
   // parent rebuild reopens too.
   const lastHtml = new WeakMap();
   const openDetails = new Set();
-  const detailsKey = (d) => `${(d.closest('[data-key]') || {}).dataset?.key || ''}|${(d.querySelector(':scope > summary')?.textContent || '').trim()}`;
+  const detailsKey = (d) => d.matches('[data-key]') ? d.dataset.key : `${(d.closest('[data-key]') || {}).dataset?.key || ''}|${(d.querySelector(':scope > summary')?.textContent || '').trim()}`;
   globalThis.document?.addEventListener('toggle', (ev) => {
     if (ev.target.tagName !== 'DETAILS') return;
     if (ev.target.open) openDetails.add(detailsKey(ev.target)); else openDetails.delete(detailsKey(ev.target));
@@ -342,11 +368,57 @@
     },
   };
 
+  // Why a board request failed, from what the hub marks on its answer (hub/hub.mjs sendDown, hub/front-door.mjs refuse)
+  // (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md). answer is the response, or null when
+  // nothing answered or the request timed out; online is navigator.onLine. → {state, line, hint, retries}: the landing's
+  // two lines, and whether the board can come back by itself, so the page keeps retrying.
+  const BACK = 'This page comes back by itself.';
+  const DOWN = {
+    restarting: { line: 'Board restarting' },
+    stopped: { line: 'Board stopped', hint: 'Nothing answers on its port. Its Claude session has to start it.' },
+    removed: { line: 'This board is gone', hint: 'The hub no longer lists it.', retries: false },
+    access: { line: 'You no longer have access', hint: 'Ask its owner to share it again.', retries: false },
+    erroring: { line: 'Board restarting', hint: 'It answers with errors. Retrying for 30 seconds.' },
+    unreachable: { line: 'Board offline', hint: 'The hub, your connection or the Mac is down. Retrying.' },
+  };
+  const RESTART_WHY = { code: 'Its code changed.', starting: 'It’s starting.', crashed: 'It stopped, and the hub is starting it again.' };
+  function downOf(answer, online = navigator.onLine !== false) {
+    const why = online && answer ? answer.headers.get('x-kickflip-down') : null;
+    const state = !online || !answer ? 'unreachable'
+      : RESTART_WHY[why] ? 'restarting'
+        : DOWN[why] ? why
+          : answer.headers.get('x-app-shell') ? 'access'
+            : why || answer.headers.get('x-kickflip-hub') ? 'erroring' : 'unreachable';
+    return { state, retries: true, ...DOWN[state], ...(state === 'restarting' ? { hint: `${RESTART_WHY[why]} ${BACK}` } : {}) };
+  }
+  // A view's place when it has no copy to show: the kickflip mark and down's two lines, as the no-access page has them.
+  const downLanding = (down) => `<div class="down-landing" data-down="${down.state}"><img class="down-landing-mark" src="/_hub/kickflip.png" width="70" height="60" alt="">
+<p class="down-landing-line">${esc(down.line)}</p><p class="down-landing-hint">${esc(down.hint)}</p></div>`;
+  // The line over a side page painted from its copy while the board can't be reached.
+  const copyNote = (what, savedAt) => `<p class="note copy-note">Copy of ${esc(what)} as of ${since(savedAt)}. Read only.</p>`;
+  // The buttons that send, which a board out of reach holds (style.css .offline): every one greyed and stopped, keeping its
+  // label and size. Reading controls, folds, links, Edit and drafts stay live.
+  const SENDS = `form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-band-move], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]`;
+  // While held(), a tap on one of root's sending buttons, and any form's submit there, Enter's included, goes nowhere, and onHeld
+  // tells the tap it is waiting. on is the view's B.on.
+  function holdSends(on, root, held, onHeld) {
+    const stop = (ev) => {
+      if (!held() || (ev.type === 'click' && !ev.target.closest?.(SENDS))) return;
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+      onHeld();
+    };
+    on(root, 'click', stop, true);
+    on(root, 'submit', stop, true);
+  }
+
   // While a board restarts, the hub answers its own 502 page, and a request can fail outright. fetchJSON waits that out:
-  // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs) and retries with a growing backoff,
-  // then throws once about limit ms have passed. Any other answer resolves {ok, status, body}, a 404's {error} included.
+  // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs, down) and retries with a growing backoff,
+  // then throws once about limit ms have passed, the error carrying down (downOf). Any other answer resolves
+  // {ok, status, body}, a 404's {error} included.
   // tag is the version of the board the page holds: an unchanged board answers 304, which resolves with body null
   // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+  const WAITING = 'Waiting for the board to reconnect';
   const RESTARTING = 'Board restarting…';
   const restartNotice = () => `<span class="muted small restarting">${RESTARTING}</span>`;
   async function fetchJSON(url, { onWait = () => {}, limit = 30000, tag = null, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
@@ -354,15 +426,18 @@
     let delay = 500;
     for (;;) {
       let failure;
+      let answer = null;
       try {
         const r = await get(url, { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) });
         if (r.status === 304) return { ok: true, status: 304, body: null };
         const body = await r.text().then((t) => JSON.parse(t)).catch(() => undefined);
         if (body !== undefined && r.status < 500) return { ok: r.ok, status: r.status, body };
+        answer = r;
         failure = new Error(r.status >= 500 ? `the board answered ${r.status}` : 'the board did not answer with JSON');
       } catch { failure = new Error('Offline. Is the host awake?'); }
+      failure.down = downOf(answer);
       if (waited >= limit) throw failure;
-      onWait(waited);
+      onWait(waited, failure.down);
       await sleep(delay);
       waited += delay;
       delay = Math.min(delay * 2, 4000);
@@ -370,8 +445,8 @@
   }
 
   globalThis.BoardUI = {
-    LINK_ARROW,
-    esc, record, time, ago, lasted, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, pending, fetchJSON, RESTARTING, restartNotice,
-    attachments, attachButton, dropZone, sendButton, keyedSend, pendingFiles, protoButton, grillButton, boltButton, mark, statusMark, MARK_ICONS, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+    LINK_ARROW, escText,
+    esc, record, time, ago, lasted, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, pending, fetchJSON, WAITING, RESTARTING, restartNotice, downOf, downLanding, copyNote, SENDS, holdSends,
+    attachments, attachButton, dropZone, sendButton, keyedSend, pendingFiles, protoButton, grillButton, visualButton, mark, statusMark, MARK_ICONS, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, thinkingLine, isPaused, PAUSED, BADGE_TONES, badge,
   };
 })();

package/board/public/view-hub-settings.js

@@ -1,5 +1,5 @@
 // HubSettings: summary rows below Hub’s health and status open centred settings modals ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)), using
-// settingsView's words from GET /_hub/api/settings. Each toggle and snooze posts to /_hub/settings/notifications, Quiet
+// settingsView's words from GET /_hub/api/settings. Pause hub, first, posts to /_hub/settings/hub-pause. Each toggle and snooze posts to /_hub/settings/notifications, Quiet
 // hours' times and hold to /_hub/settings/quiet, and Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key and Slack's token do through linear-key.js; Done waits for
 // a key's save to land. The rules editor saves through POST /_hub/settings/rules
 // and marks [data-dirty] while an edit is unsaved, so the shell asks before leaving then. The data refreshes every 30 seconds while nothing is being edited.
@@ -9,28 +9,10 @@
   const { esc } = HubUI;
   const ACTION = '/_hub/settings/notifications';
 
-  // datetime-local speaks the device's clock; the picker's hidden field carries its UTC ISO value to the hub.
-  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 and Keep awake 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 }) {
-    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>`;
-  }
-
+  const { durationPicker } = HubKit;
+  // Pause hub (docs/adr/2026-11-05-1849-pause-board-and-pause-hub-pause-new-work-by-hand.md), gray as every paused status.
+  const pauseRow = (p) => durationPicker({ id: 'pauseHub', title: 'Pause hub', icon: HubUI.tile('pause', 'var(--color-quiet)'),
+    action: '/_hub/settings/hub-pause', name: 'pause', choices: p.choices, on: p.on, button: 'Resume' });
   const snoozeRow = (d) => durationPicker({ id: 'snooze', title: 'Snooze', icon: HubUI.tile('snooze', '#a855f7'), action: ACTION, name: 'snooze',
     choices: d.snooze?.choices, on: d.snoozed, button: 'End' });
   // Grey while off and orange while on, as the machine working (docs/adr/2026-11-01-1817-colour-says-whos-waiting.md).
@@ -58,7 +40,7 @@
       + `<h2 class="label">Snoozes and wakes read</h2><div class="group">${reads}</div>`;
   }
 
-  const sections = [['notifications', 'Notifications'], ['quiet', 'Quiet hours'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['slack', 'Slack'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
+  const sections = [['pause', 'Pause hub'], ['notifications', 'Notifications'], ['quiet', 'Quiet hours'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['slack', 'Slack'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
   const sectionOf = (hash) => {
     const id = { push: 'notifications', 'closed-boards': 'closed', polling: 'quiet' }[hash?.slice(1)] || hash?.slice(1);
     return sections.some(([section]) => section === id) ? id : null;
@@ -80,13 +62,16 @@
       let rules = null;
       let rulesJSON = '';
       let tokenSlot = null;
+      const pickers = HubKit.durationPickers(B);
 
       function paint() {
         if (!last) return;
         const { row, tile, deviceRow } = HubUI;
         top.innerHTML = HubUI.flash(flash);
         const scrollTop = B.$('.settings-body').scrollTop;
-        if (active === 'notifications') {
+        if (active === 'pause') {
+          content.innerHTML = `<div class="group">${pauseRow(last.pause)}</div><p class="note">Running steps finish. No new builders, planners or pulls start on any board until then, as when usage reaches the pause line.</p>`;
+        } else if (active === 'notifications') {
           content.innerHTML = `<div class="group">${deviceRow(device.state(last.device), { compact: true })}${notificationRows(last)}</div>`;
         } else if (active === 'quiet') {
           content.innerHTML = quietRows(last.quiet);
@@ -103,11 +88,11 @@
         } else if (active === 'closed') {
           content.innerHTML = `<div class="group">${(last.closed || []).length ? last.closed.map((b) => `<div class="row"><span class="body"><span class="text"><span class="title">${esc(b.title)}</span><span class="sub wrap">/${esc(b.route)}</span></span><button class="btn" type="button" data-reopen="${esc(b.route)}"${reopening === b.route ? BoardUI.BUSY : reopening ? ' disabled' : ''}>Reopen</button></span></div>`).join('') : '<p class="note">No closed boards.</p>'}</div>`;
         }
-        const input = B.$('[data-dur-at]');
-        if (input) customBounds(input, true);
+        pickers.painted();
         B.$('.settings-body').scrollTop = scrollTop;
         B.$('#keep-awake').disabled = Boolean(last.awake.unsupported);
         const summaries = {
+          pause: last.pause.summary,
           notifications: [last.on.on ? 'Pushes on' : 'Pushes off', last.snoozed?.summary, last.weekends.on ? 'Off on weekends' : '', deviceSummary()].filter(Boolean).join(' · '),
           quiet: last.quiet.summary,
           'keep-awake': last.awake.summary,
@@ -207,37 +192,6 @@
       B.atUnmount(() => closeModal(false));
       const device = HubKit.device(B, { paint, changed: () => ctx.sidebarChanged?.() });
       device.ready.then(() => { if (B.alive()) paint(); });
-      let openPicker = null;
-      B.on(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(root, 'pointerdown', (e) => {
-        const input = e.target.closest?.('.dur-choices button') && B.$('[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(root, 'change', (e) => {
-        if (e.target.matches?.('[data-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
-      });
-      B.on(root, 'focusout', (e) => {
-        if (e.target.matches?.('[data-dur-at]')) saveCustom(e.target);
-      });
       B.on(root, 'click', async (e) => {
         const button = e.target.closest?.('[data-reopen]');
         if (!button || reopening) return;