@lovek4d/kickflip 0.3.1 → 0.4.0

package/board/public/log.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Log</title>
+<link rel="stylesheet" href="colors.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<!--header {"lead":"back","title":"Log","titleId":"ref","backHref":"./","controls":false}-->
+<main>
+  <p class="muted" id="note"></p>
+  <pre class="log" id="log">Loading the log…</pre>
+</main>
+<style>
+  /* The tail of a builder's log (GET /api/log), newest at the bottom. */
+  pre.log { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+</style>
+<script>
+// Shows the tail of the log named by ?file=, last lines in view, and re-reads it every 3 seconds while it grows;
+// the page stays where the reader scrolled to when they've left the bottom.
+(function () {
+  const name = new URLSearchParams(location.search).get('file') || '';
+  const log = document.getElementById('log');
+  const note = document.getElementById('note');
+  document.getElementById('ref').textContent = name || 'Log';
+  document.title = name || 'Log';
+  let size = -1;
+  async function read() {
+    try {
+      const r = await fetch('api/log?file=' + encodeURIComponent(name), { cache: 'no-store' });
+      const body = await r.json();
+      if (!r.ok) { log.textContent = body.error || 'Could not load this log.'; return; }
+      if (body.size === size) return;
+      const atEnd = size === -1 || innerHeight + scrollY >= document.documentElement.scrollHeight - 40;
+      size = body.size;
+      log.textContent = body.text || 'The log is empty so far.';
+      note.textContent = body.truncated ? 'Showing the last 256 KiB.' : '';
+      if (atEnd) scrollTo(0, document.documentElement.scrollHeight);
+    } catch { /* the next read tries again */ }
+  }
+  read();
+  setInterval(read, 3000);
+})();
+</script>
+</body>
+</html>

package/board/public/prompts.js

@@ -1,5 +1,5 @@
 // Answering pending prompts from their Needs you lines (ui-prompts.js promptItem), on a board view and the hub page,
-// through the hub's POST /_hub/prompts/<id>/answer (docs/adr/0060-background-sessions-prompts-come-to-the-phone.md).
+// through the hub's POST /_hub/prompts/<id>/answer (docs/adr/2026-10-30-1516-background-sessions-prompts-come-to-the-phone.md).
 // Allow once, Deny, Skip and a single question's option send on the tap. Always allow confirms first, naming its rule,
 // since it covers every later call like it until the session ends. Several questions, or one taking several picks,
 // send with Send once each has a pick.
@@ -8,13 +8,14 @@ globalThis.PromptAnswers = (function () {
   // short message; after() runs once an answer has gone. → {state(p) for promptItem, shows(p)}
   function wire(B, { list, paint, notify, after = () => {} }) {
     const picks = new Map();
-    const sending = new Set();
+    // Each prompt whose answer is out, to the button tapped (ui-prompts.js promptItem's sending).
+    const sending = new Map();
     // Answered here, hidden until the view's next load drops them.
     const answered = new Set();
     const picksOf = (id) => { if (!picks.has(id)) picks.set(id, {}); return picks.get(id); };
 
-    async function send(p, body) {
-      sending.add(p.id);
+    async function send(p, body, tapped) {
+      sending.set(p.id, tapped);
       paint();
       try {
         const r = await fetch(`/_hub/prompts/${encodeURIComponent(p.id)}/answer`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
@@ -40,23 +41,23 @@ globalThis.PromptAnswers = (function () {
         const got = mine[i] || [];
         const label = opt.dataset.promptOpt;
         mine[i] = q.multiSelect ? (got.includes(label) ? got.filter((l) => l !== label) : [...got, label]) : [label];
-        if (BoardUI.oneTap(p)) send(p, BoardUI.promptAnswer(p, mine));
+        if (BoardUI.oneTap(p)) send(p, BoardUI.promptAnswer(p, mine), `${i}:${label}`);
         else paint();
         return;
       }
       if (ev.target.closest('button[data-prompt-send]')) {
         const body = BoardUI.promptAnswer(p, picksOf(p.id));
-        if (body) send(p, body);
+        if (body) send(p, body, 'send');
         return;
       }
       const choice = ev.target.closest('button[data-prompt-choice]')?.dataset.promptChoice;
       if (!choice) return;
       if (choice === 'always' && !(await BoardDialogs.confirm(`Always allow ${p.rule} for the rest of this session?`))) return;
-      send(p, { choice });
+      send(p, { choice }, choice);
     });
 
     return {
-      state: (p) => ({ picks: picks.get(p.id) || {}, sending: sending.has(p.id) }),
+      state: (p) => ({ picks: picks.get(p.id) || {}, sending: sending.get(p.id) ?? null }),
       shows: (p) => !answered.has(p.id),
     };
   }

package/board/public/prototype-kit.js

@@ -1,5 +1,5 @@
 // What a prototype's take files get, on the page board/server.mjs serves from prototype.html for each topic recorded
-// with board.mjs prototype add (docs/adr/0089-the-board-serves-every-prototype-from-one-template.md). A take file,
+// with board.mjs prototype add (docs/adr/2026-11-01-1448-the-board-serves-every-prototype-from-one-template.md). A take file,
 // public/prototypes/<topic>/<KEY>.js, is a module:
 //   export function render(stage, kit) { stage.innerHTML = kit.hub(); return () => {…} }   // the cleanup is optional
 // render runs on every switch to that take with a fresh, empty stage; it may be async. The stage contains its layout
@@ -39,13 +39,13 @@
       ...(claude === null ? {} : { claude: reading(...[claude, 61].flat().slice(0, 2), 2 * 60_000, 3.4, 2.6) }),
       ...(codex === null ? {} : { codex: reading(...[codex, 40].flat().slice(0, 2), 6 * 60_000, 1.2, 4.1) }),
     }),
-    sidebar: () => ({ total: 1, sites: fake.sites(), hub: { tone: 'ok', word: 'Healthy', detail: '3 of 3 sites up' }, notifications: { state: 'on' }, usage: fake.usage() }),
+    sidebar: () => ({ total: 1, sites: fake.sites(), hub: { tone: 'ok', word: 'healthy', detail: '3 of 3 sites up' }, notifications: { state: 'on' }, usage: fake.usage() }),
     hub: () => ({
       usage: fake.usage(),
-      hub: { tone: 'ok', word: 'Healthy', detail: '3 of 3 sites up' },
+      hub: { tone: 'ok', word: 'healthy', detail: '3 of 3 sites up' },
       sites: fake.sites(),
-      polling: { title: 'Checks every 15 min until 6:00pm', lines: ['Next check 12:00pm · last 11:45am, 8 PRs, no change', 'No pushes queued.'], count: 0 },
-      settings: [['notifications', 'Notifications', 'Pushes on · Off on weekends · This device on'], ['polling', 'Polling', '3 windows, 52 checks a day · held overnight'],
+      polling: { title: 'Checks every minute while you’re here', lines: ['Next check 12:00pm · last 11:45am, 8 PRs, no change', 'No pushes queued.'], count: 0 },
+      settings: [['notifications', 'Notifications', 'Pushes on · Off on weekends · This device on'], ['quiet', 'Quiet hours', '10:00pm – 8:00am · pushes held'],
         ['codex', 'Codex share', 'Auto'], ['rules', 'Rules for every board', '1 rule'], ['closed', 'Closed boards', 'No closed boards']],
     }),
     items: () => [
@@ -63,7 +63,7 @@
   function hub(data = {}) {
     const d = { ...fake.hub(), header: true, ...data };
     const { row, tile, nowRow, CHEVRON } = HubUI;
-    const site = (s) => row({ icon: s.icon, title: esc(s.title), sub: s.status ?? '<span class="st ok">Up · listening · every link passes</span>', wrap: true, trail: CHEVRON, href: `/${s.route}/` });
+    const site = (s) => row({ icon: s.icon, title: esc(s.title), sub: s.status ?? '<span class="st ok">up · listening · every link passes</span>', wrap: true, trail: CHEVRON, href: `/${s.route}/` });
     const settings = d.settings.map(([id, title, sub]) => `<button type="button" class="hub-setting" data-setting="${esc(id)}" data-kit-inert aria-haspopup="dialog"><span class="text"><span class="title">${esc(title)}</span><span class="sub">${esc(sub)}</span></span>${CHEVRON}</button>`).join('');
     const usage = d.usageCard ?? HubUI.usageCard(d.usage);
     const header = d.header ? BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', logoHref: '/_hub/', settingsHref: null }) : '';

package/board/public/prototype-switcher.js

@@ -1,4 +1,4 @@
-// The floating ‹ take › pill every prototype page switches its takes with (docs/adr/0015-prototypes-come-on-request.md).
+// The floating ‹ take › pill every prototype page switches its takes with (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
 // Load it with a relative src after claude.js, on a page whose header leads with the back arrow, then call
 //   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, initial: 'A', render(take) {…}, above: el? })
 // render runs at mount and on each switch; sw.take is the current key. ←/→ switch unless a field has focus, and the
@@ -8,7 +8,7 @@
 // PrototypeSwitcher.current is the mounted switcher, whose go(key) shows another take in place; Waiting on you uses it
 // to switch its full-width frame without a reload (view-questions.js inPlace).
 // With ?take=<key> the page shows that take alone, with no header or pill, as questions.html frames it
-// (docs/adr/0048-a-questions-takes-show-inline.md); a page hides its own extras under html.ps-embed. There main's
+// (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md); a page hides its own extras under html.ps-embed. There main's
 // bottom padding, kept clear for the pill, shrinks to 12px whatever the page sets, since questions.html sizes the frame
 // to the page's height.
 (function () {
@@ -120,6 +120,8 @@
     let take = startTake(keys, params.get('variant'), initial);
     let question = null;
     let topics = [];
+    // The board's cards, which name their own question topics (ui-questions.js cardTopics).
+    let cards = [];
     // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a pick made here or a
     // reload stays on the page; only the first load sends an already-picked question on to its card's thread.
     let fromPush = params.get('from') === 'push';
@@ -154,8 +156,14 @@
       let board = null;
       try {
         board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
-        question = (board.owner || []).find((q) => q.id === qid) || null;
-        topics = board.ownerTopics || [];
+        topics = board.ownerTopics;
+        cards = board.items || [];
+        // A resolved question is left out of /api/board, and its topic's resolved questions hold it
+        // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+        const topic = topics.find((t) => t.questions.includes(qid));
+        question = board.owner.find((q) => q.id === qid)
+          || (topic && (await (await fetch(site.url('api/questions?topic=' + encodeURIComponent(topic.id)), { cache: 'no-store' })).json()).questions.find((q) => q.id === qid))
+          || null;
         if (!question) note('This prototype’s question is gone, so there is nothing to pick.');
       } catch { /* keep the last question shown */ }
       if (fromPush && pickedChoice(question)) {
@@ -179,7 +187,7 @@
         ui = await sharedQuestions(site);
         pills = ui.topicRow(topics, answered.topic).pills;
         const topic = topics.find((t) => t.id === answered.topic);
-        name = topic ? ui.topicName(topic) : '';
+        name = topic ? ui.topicName(ui.cardTopics([topic], cards)[0]) : '';
         await site.send('owner-answer', { id: answered.id, question: answered.question, choice: state.option.id, label: answerLabel(state.option), note: text.value.trim() });
       } catch { busy = false; paint(); note('Could not send. Is the host awake?'); return; }
       try { localStorage.removeItem(draftKey(qid)); } catch { /* nothing kept */ }

package/board/public/prototype.html

@@ -44,6 +44,7 @@
 <script src="ui.js"></script>
 <script src="ui-links.js"></script>
 <script src="ui-enums.js"></script>
+<script src="ui-phase-bars.js"></script>
 <script src="ui-cards.js"></script>
 <script src="ui-page-header.js"></script>
 <script src="ui-sidebar.js"></script>

package/board/public/router.js

@@ -1,4 +1,4 @@
-// The app shell's router (docs/adr/0055-one-app-for-the-whole-hub.md): every URL on the hub names a view, and a view
+// The app shell's router (docs/adr/2026-10-29-2005-one-app-for-the-whole-hub.md): every URL on the hub names a view, and a view
 // names its URL, so a push link, a reload and a shared link all land on the same view. viewOf and urlOf are pure;
 // ui.test.mjs runs them in node:vm. listen() catches clicks on links to a view the shell mounts, and back and forward.
 // A view is {kind, …}:
@@ -8,8 +8,9 @@
 //   questions {route, id}       /<route>/questions.html#<id>
 //   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<lineup slug>, and plan.html, which the board
 //                               redirects there
-//   hub {hash, w}              /_hub/ with a settings modal named by hash; legacy /_hub/settings and
-//                               /_hub/settings/polling?w=<HH:MM> open the same modals (ADR 0075)
+//   hub {hash}                  /_hub/ with a settings modal named by hash; legacy /_hub/settings opens the same modals
+//                               ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)),
+//                               and the old Polling page, /_hub/settings/polling, opens Quiet hours
 //   frame {route, url}          any other page under a route, a folder or an .html file: other sites, prototypes and
 //                               every other board page, shown in a frame
 // Any other URL, such as an image or another origin, is no view (null) and loads as itself.
@@ -29,8 +30,8 @@ globalThis.AppRouter = (function () {
     const p = u.pathname;
     if (p === '/') return { kind: 'start' };
     if (['/_hub/', '/_hub/settings', '/_hub/settings/polling'].includes(p)) {
-      const hash = p === '/_hub/settings/polling' ? '#polling' : u.hash || (p === '/_hub/settings' ? '#notifications' : '');
-      return { kind: 'hub', ...(hash ? { hash } : {}), ...(hash === '#polling' && u.searchParams.get('w') ? { w: u.searchParams.get('w') } : {}) };
+      const hash = p === '/_hub/settings/polling' ? '#quiet' : u.hash || (p === '/_hub/settings' ? '#notifications' : '');
+      return { kind: 'hub', ...(hash ? { hash } : {}) };
     }
     const m = /^\/([^/]+)\/(.*)$/.exec(p);
     let route = null;
@@ -60,7 +61,7 @@ globalThis.AppRouter = (function () {
       case 'settings': return `${r}settings.html`;
       case 'questions': return `${r}questions.html${view.id ? `#${encodeURIComponent(view.id)}` : ''}`;
       case 'notes': return `${r}notes.html${view.wave ? `?wave=${encodeURIComponent(view.wave)}` : view.item ? `?item=${encodeURIComponent(view.item)}` : ''}`;
-      case 'hub': return `/_hub/${view.w ? `?w=${encodeURIComponent(view.w)}` : ''}${view.hash || ''}`;
+      case 'hub': return `/_hub/${view.hash || ''}`;
       default: return view.url;
     }
   }
@@ -77,7 +78,7 @@ globalThis.AppRouter = (function () {
     return { href: u.href, pushed };
   }
 
-  // The page tree (docs/adr/0058-back-follows-the-page-tree.md): a board, its Waiting on you, and a prototype page tied
+  // The page tree (docs/adr/2026-10-30-1125-back-follows-the-page-tree.md): a board, its Waiting on you, and a prototype page tied
   // to one of its questions by ?q=, framed. levelOf → 0, 1 or 2 down the tree, or null for a view outside it.
   function questionOf(view, boards) {
     if (view?.kind !== 'frame' || !boards.has(view.route)) return null;

package/board/public/rules-editor.js

@@ -1,5 +1,5 @@
 // The rules editor on Board Settings and on the Hub page
-// (docs/adr/0039-rules-live-on-settings-at-hub-and-board-level.md). Edits stay on the page until Save, as the
+// (docs/adr/2026-10-29-1639-rules-live-on-settings-at-hub-and-board-level.md). Edits stay on the page until Save, as the
 // reviewers list does; Save hands {rules: [{id?, text}], base: [the ids it loaded]} to the page's save(), whose
 // server merges it (hub/rules.mjs applyRules). It brings its own CSS, colours from colors.css only, and takes the page's
 // button classes. rows, payload, dirty and render are pure, for ui.test.mjs; mount touches the DOM.
@@ -110,10 +110,9 @@
     addBox.addEventListener('keydown', (ev) => { if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) { ev.preventDefault(); add(); } });
     addBox.addEventListener('input', mark);
     saveBtn.addEventListener('click', async () => {
-      saveBtn.disabled = true;
-      status.textContent = 'Saving…';
+      status.textContent = '';
       try {
-        const r = await opts.save(payload(list));
+        const r = await BoardUI.waitOn(saveBtn, opts.save(payload(list)));
         list = rows(r.rules);
         editing = null;
         status.textContent = r.message || 'Saved.';

package/board/public/shell.js

@@ -1,4 +1,4 @@
-// The app shell (app.html; docs/adr/0055-one-app-for-the-whole-hub.md): the sidebar, mounted once, beside one view at a
+// The app shell (app.html; docs/adr/2026-10-29-2005-one-app-for-the-whole-hub.md): the sidebar, mounted once, beside one view at a
 // time. A board's view is BoardView (app.js); Waiting on you and Notes are AppViews.questions and .notes,
 // the Hub page AppViews.hub with its settings modals, and every other page AppViews.frame. Board Settings mounts over the board
 // as a modal. Each page is {className, title(view, {siteTitle}), markup(view, {siteTitle}), create(root,
@@ -7,9 +7,10 @@
 // [data-dirty], an unsaved edit, asks first. The shell holds the hub's one stream, /_hub/stream
 // (hub/stream.mjs): `change {route}` signals the open board, and `sidebar` repaints the sidebar. A board the shell
 // leaves is unmounted; one left fresh whose stream sent no change since paints live when it comes back, and any other
-// paints dimmed from its last visit (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+// paints dimmed from its last visit (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
 // A push tap reaches it from hub/sw.js as {open: url}, and a page framed inside it hands it a view's URL through
 // AppShell.open(url, {replace, frames}) → true when the shell shows it in place; frames false refuses a frame view.
+// AppShell.reload() reloads the app past the shell the service worker keeps.
 window.AppShell = (function () {
   const LAST_KEY = 'hub:lastBoard';
   const DATA_KEY = 'hub:sidebar';
@@ -111,7 +112,20 @@ window.AppShell = (function () {
       });
     }
 
-    // A view that changed what the sidebar's foot rows say, such as notifications or polling, asks for a fresh copy
+    // A tap, key or scroll on any page tells the hub the owner is here (hub/presence.mjs ownerTracker), at most once a
+    // minute while present. While away the first one goes at once and the moon goes from this page at the same moment
+    // (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md).
+    let beatAt = 0;
+    const beat = () => {
+      const away = Boolean(data?.away);
+      if (!away && Date.now() - beatAt < 60_000) return;
+      beatAt = Date.now();
+      if (away) { data = { ...data, away: false }; current?.v?.B?.renderStatus?.(); }
+      fetch('/_hub/presence', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' }).catch(() => { beatAt = 0; });
+    };
+    for (const type of ['pointerdown', 'keydown', 'scroll']) addEventListener(type, beat, { capture: true, passive: true });
+
+    // A view that changed what the sidebar's foot rows say, such as notifications, asks for a fresh copy
     // rather than waiting for the stream's next one.
     async function refreshSidebar() {
       sidebar.checkDevice();
@@ -175,7 +189,7 @@ window.AppShell = (function () {
       if (board) {
         const live = streamUp ? left.get(route) || null : null;
         left.delete(route);
-        v = BoardView.create(root, siteRoot, { signal: signalFor(route), live, pause: () => data?.pause });
+        v = BoardView.create(root, siteRoot, { signal: signalFor(route), live, pause: () => data?.pause, away: () => data?.away });
       } else {
         v = page.create(root, siteRoot, { view, siteTitle, boards, open: openHere, toggleSidebar: sidebar.toggle, keydown: sidebar.keydown, pointerdown: sidebar.pointerdown,
           reload: () => go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'reload'), closeSidebar: sidebar.close, up: () => router.up(),
@@ -254,7 +268,7 @@ window.AppShell = (function () {
     }
 
     // `/` opens this device's last board, else the board the hub picks (sidebar data's start), else the hub's page
-    // (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md).
+    // (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
     let first = AppRouter.viewOf(location.href, { boards: boards() });
     if (first?.kind === 'start') {
       let last = null;
@@ -294,5 +308,5 @@ window.AppShell = (function () {
     });
   }
 
-  return { start, open, codeSeen };
+  return { start, open, codeSeen, reload };
 })();

package/board/public/sidebar.css

@@ -36,6 +36,8 @@
 .sidebar .sb-update-row:disabled { opacity: 1; cursor: default; }
 .sidebar .sb-go { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; }
 .sidebar .sb-update-row:disabled .sb-go { background: transparent; color: var(--muted); padding-right: 0; font-weight: 400; }
+/* While Reload or Upgrade runs, its pill keeps its blue with a spinner in place of its word (style.css, ui.js BUSY). */
+.sidebar .sb-update-row[aria-busy="true"] .sb-go { background: var(--accent); color: var(--on-accent); padding-right: 10px; font-weight: 600; }
 html.sb-update body.has-sidebar > .top .hub, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
 html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub::after {
   content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
@@ -48,6 +50,21 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .sb-new { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; }
 .sidebar .sb-starting { color: var(--muted); }
 .sidebar .sb-starting:hover, .sidebar .sb-starting:active { background: transparent; }
+/* A starting board's steps on the board's phase bars, spread evenly across the row, its step and seconds below
+   (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md). */
+.sidebar .sb-steps { display: flex; margin: 6px 0 4px; }
+.sidebar .sb-steps .phase-bars { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; }
+.sidebar .sb-steps .phase-bars i { flex: 1 1 0; width: auto; min-width: 0; }
+.sidebar .sb-step { font-variant-numeric: tabular-nums; }
+/* At join the board's row fades in, ringed for a moment (sidebar.js). */
+.sidebar .sb-joined { animation: sb-join 2.5s ease-out both; }
+@keyframes sb-join {
+  0% { opacity: 0; transform: translateY(4px); box-shadow: 0 0 0 1px var(--accent) inset; }
+  20% { opacity: 1; transform: none; box-shadow: 0 0 0 1px var(--accent) inset; }
+  80% { box-shadow: 0 0 0 1px var(--accent) inset; }
+  100% { box-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) { .sidebar .sb-joined { animation: none; } }
 .sidebar .sb-failed { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: var(--text); }
 .sidebar .sb-failed .sb-title { color: var(--color-danger); }
 .sidebar .sb-failed:active { background: var(--chip); }
@@ -143,7 +160,10 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 
 /* A site's status (hub/home.mjs statusLine): the lane chips wrap on their own line, and the status word goes below them. */
 .sidebar .sb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
-.sidebar .sb-ctx { font-size: 12px; color: var(--muted); }
+.sidebar .sb-head { display: flex; align-items: baseline; gap: 8px; }
+.sidebar .sb-head .sb-title { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+.sidebar .sb-ctx { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.sidebar .sb-ctx.full { color: var(--color-danger); font-weight: 600; }
 .sidebar .sb-ctx.stale { opacity: .6; }
 .sidebar .lcs { order: -1; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
 .sidebar .lc { flex: none; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; line-height: 18px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }

package/board/public/sidebar.js

@@ -1,11 +1,11 @@
 // The sidebar's behaviour on a page with <aside id="sidebar" class="sidebar"> and <div id="sidebarScrim"
-// class="sidebar-scrim">, after ui-page-header.js and ui-sidebar.js (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md).
+// class="sidebar-scrim">, after ui-phase-bars.js, ui-page-header.js and ui-sidebar.js (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
 // Sidebar.mount({here, data}) paints `data` or the last copy this device stored; the app shell hands it each new copy
 // through setData from its one stream (shell.js). The page header's logo (a.hub) toggles the sidebar at every
 // width, with what waits on the other sites in its accessible label. Below 900px the sidebar is a drawer: the logo or a swipe in from the
 // left edge opens it, and the scrim, Escape, ✕, the drawer's own logo or a swipe back closes it. From 900px it is a
 // rail, which its own logo collapses and the page's logo brings back; this device remembers that, and <html> carries
-// sb-collapsed meanwhile (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md).
+// sb-collapsed meanwhile (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
 // Switch mode: s pressed twice within a second, outside a text field, a contenteditable or an open dialog, shows each
 // row's key (ui-sidebar.js switchKeys), opening the drawer or showing a collapsed rail until it ends; the next key opens
 // that row through open(href). Escape, a click, a held modifier, typing in a field or 3 seconds with no key end it
@@ -16,6 +16,9 @@
 // → {setHere(route), setData(data), setUpdate(state), checkDevice(), close(), toggle(), keydown(e), pointerdown()}, toggle doing what the
 // logo does, checkDevice reading this device's push subscription again, and keydown and pointerdown taking a framed
 // page's events (view-frame.js), as the document's own
+// A starting board's row (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md): its seconds
+// tick in place each second, and a repaint sets its running bar's pulse from the clock, so a new copy never restarts
+// it. When the board joins, its row fades in, and a repaint during the fade carries it on from where it was.
 (function () {
   const DATA_KEY = 'hub:sidebar';
   // app.html reads it before the first paint, so a collapsed rail never shows for a moment.
@@ -24,6 +27,9 @@
   // A phone has no keys to press, so it never shows the shortcuts sheet.
   const DESKTOP = '(hover: hover) and (pointer: fine)';
   const TWICE_MS = 1000;
+  // style.css pulse-fill's period, and sidebar.css sb-join's length.
+  const PULSE_MS = 1400;
+  const JOIN_MS = 2500;
   // paint() sets the bar's duration from this and its delay from switching.started.
   const IDLE_MS = 3000;
   const FIELD = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
@@ -46,7 +52,7 @@
     const aside = document.getElementById('sidebar');
     const scrim = document.getElementById('sidebarScrim');
     // ui.js replaces the BoardUI global when it loads after this, so the renderers are held here.
-    const { sidebar, failedStart, updateRow, othersWaiting, switchKeys, shortcuts } = globalThis.BoardUI || {};
+    const { sidebar, failedStart, startCaption, updateRow, othersWaiting, switchKeys, shortcuts } = globalThis.BoardUI || {};
     const none = { setHere() {}, setData() {}, setUpdate() {}, checkDevice() {}, close() {}, toggle() {}, keydown() {}, pointerdown() {} };
     if (!aside || !sidebar) return none;
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
@@ -69,6 +75,30 @@
     // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
     let painted = false;
+    // joined: when each board that was starting joined, by route, through its fade. ticker: the seconds' interval while
+    // a start runs.
+    const joined = new Map();
+    let ticker = null;
+    const startsRunning = () => (data?.starting || []).filter((s) => !s.failed);
+    function tickSteps() {
+      for (const s of startsRunning()) {
+        const caption = aside.querySelector(`[data-starting="${s.route}"] .sb-step`);
+        if (caption) caption.textContent = startCaption(s);
+      }
+    }
+    function paintStarts() {
+      const now = Date.now();
+      for (const bar of aside.querySelectorAll('.sb-starting .phase-bars i.now')) bar.style.animationDelay = `-${now % PULSE_MS}ms`;
+      for (const [route, at] of joined) {
+        const row = now - at < JOIN_MS && aside.querySelector(`a.sb-row[href="/${encodeURIComponent(route)}/"]`);
+        if (!row) { joined.delete(route); continue; }
+        row.classList.add('sb-joined');
+        row.style.animationDelay = `-${now - at}ms`;
+      }
+      const running = startsRunning().length > 0;
+      if (running && !ticker) ticker = setInterval(tickSteps, 1000);
+      if (!running && ticker) { clearInterval(ticker); ticker = null; }
+    }
     // A repaint keeps the drawer's scroll, so a new copy doesn't move the list under a finger.
     function paint() {
       html.classList.toggle('sb-update', Boolean(update || data?.upgrade));
@@ -90,11 +120,14 @@
       updateHTML = row;
       const list = aside.querySelector('.sb-scroll');
       if (list) list.scrollTop = top ?? list.scrollHeight;
+      paintStarts();
       painted = true;
       logoCount();
     }
     function setData(next) {
       if (!next) return;
+      const starting = new Set(startsRunning().map((s) => s.route));
+      for (const s of next.sites || []) if (starting.has(s.route)) joined.set(s.route, Date.now());
       data = next;
       write(DATA_KEY, JSON.stringify(data));
       paint();
@@ -145,7 +178,7 @@
           const response = await fetch('/_hub/new-board', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(input) });
           if (!response.ok) throw new Error(await response.text());
           const { route } = await response.json();
-          setData({ ...data, starting: [...(data?.starting || []).filter((s) => s.route !== route), { route, title: input.name, repo: selected.clone, phase: selected.cloned ? 'starting' : 'cloning', askedAt: new Date().toISOString(), failed: false }] });
+          setData({ ...data, starting: [...(data?.starting || []).filter((s) => s.route !== route), { route, title: input.name, repo: selected.clone, step: selected.cloned ? 'starting' : 'cloning', stepAt: new Date().toISOString(), askedAt: new Date().toISOString(), failed: false }] });
           if (rail.matches) collapse(false); else open();
           aside.querySelector(`[data-starting="${route}"]`)?.scrollIntoView({ block: 'nearest' });
           refresh().catch(() => {});
@@ -165,25 +198,24 @@
       const failed = e.target.closest?.('[data-failed-start]');
       if (failed) openFailed(failed.dataset.failedStart);
     });
-    // Upgrade asks the hub to run kickflip update (docs/adr/0161-the-hub-offers-a-newer-kickflip-from-npm.md). The row
-    // keeps its words until the hub answers with what it did, and a refusal shows as a failed update.
-    let upgrading = false;
-    async function upgrade(button) {
-      if (upgrading) return;
-      upgrading = true;
-      button.disabled = true;
-      let next;
-      try {
-        const response = await fetch('/_hub/upgrade', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
-        const body = await response.json().catch(() => ({}));
-        next = response.ok ? body.upgrade : { ...data.upgrade, state: 'failed', error: body.error || 'The hub didn’t answer.' };
-      } catch {
-        next = { ...data.upgrade, state: 'failed', error: 'The hub didn’t answer.' };
-      } finally { upgrading = false; }
-      setData({ ...data, upgrade: next });
+    // Upgrade asks the hub to run kickflip update (docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). The row
+    // waits (ui.js waitOn) until the hub answers with what it did, then while that update waits or runs (ui-sidebar.js
+    // updateRow), and a refusal shows as a failed update.
+    function upgrade(button) {
+      BoardUI.waitOn(button, (async () => {
+        let next;
+        try {
+          const response = await fetch('/_hub/upgrade', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
+          const body = await response.json().catch(() => ({}));
+          next = response.ok ? body.upgrade : { ...data.upgrade, state: 'failed', error: body.error || 'The hub didn’t answer.' };
+        } catch {
+          next = { ...data.upgrade, state: 'failed', error: 'The hub didn’t answer.' };
+        }
+        setData({ ...data, upgrade: next });
+      })());
     }
-    // A failed start's sheet (docs/adr/0130-a-failed-start-retries-from-its-sheet.md). Dismiss deletes its Starting
-    // record; Retry starts it again, and its row reads Starting… until the hub's next copy says otherwise.
+    // A failed start's sheet (docs/adr/2026-11-02-2006-a-failed-start-retries-from-its-sheet.md). Dismiss deletes its Starting
+    // record; Retry starts it again, and its row reads starting… until the hub's next copy says otherwise.
     function openFailed(route) {
       const s = (data?.starting || []).find((x) => x.route === route && x.failed);
       if (!s || document.getElementById('failedStartSheet')) return;
@@ -195,13 +227,13 @@
       el.innerHTML = failedStart(s, { home: data.home });
       let sending = false;
       const done = () => { if (!sending) el.close(); };
-      async function act(request, after) {
+      // The tapped button waits (ui.js waitOn), the other disabled, until the hub answers.
+      async function act(button, request, after) {
         sending = true;
-        el.querySelectorAll('.fs-actions button').forEach((b) => { b.disabled = true; });
         const refused = el.querySelector('.fs-refused');
         refused.hidden = true;
         try {
-          const response = await fetch(`/_hub/new-board/${encodeURIComponent(route)}${request.path || ''}`, request.options);
+          const response = await BoardUI.waitOn(button, fetch(`/_hub/new-board/${encodeURIComponent(route)}${request.path || ''}`, request.options), { group: el.querySelectorAll('.fs-actions button') });
           if (!response.ok) throw new Error(await response.text());
           after();
           sending = false;
@@ -209,7 +241,6 @@
           refresh().catch(() => {});
         } catch (e) {
           sending = false;
-          el.querySelectorAll('.fs-actions button').forEach((b) => { b.disabled = false; });
           refused.textContent = e.message;
           refused.hidden = false;
         }
@@ -217,12 +248,14 @@
       el.addEventListener('click', (e) => {
         if (sending) return;
         if (e.target === el || e.target.closest('[data-failed-close]')) { done(); return; }
-        if (e.target.closest('[data-failed-dismiss]')) {
-          act({ options: { method: 'DELETE' } }, () => setData({ ...data, starting: data.starting.filter((x) => x.route !== route) }));
-        } else if (e.target.closest('[data-failed-retry]')) {
-          act({ path: '/retry', options: { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' } }, () => {
+        const dismiss = e.target.closest('[data-failed-dismiss]');
+        const retry = e.target.closest('[data-failed-retry]');
+        if (dismiss) {
+          act(dismiss, { options: { method: 'DELETE' } }, () => setData({ ...data, starting: data.starting.filter((x) => x.route !== route) }));
+        } else if (retry) {
+          act(retry, { path: '/retry', options: { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' } }, () => {
             const { error, ...rest } = s;
-            const again = { ...rest, phase: 'starting', askedAt: new Date().toISOString(), failed: false };
+            const again = { ...rest, step: 'starting', stepAt: new Date().toISOString(), askedAt: new Date().toISOString(), failed: false };
             setData({ ...data, starting: data.starting.map((x) => (x.route === route ? again : x)) });
           });
         }