@lovek4d/kickflip 0.3.1 → 0.5.0

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(),
@@ -186,7 +200,11 @@ window.AppShell = (function () {
       if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
       sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
       scrollTo(0, 0);
+      // Every other page of a board has the board's + and its sheet too; the hub's own pages aren't a board's.
+      const plus = !board && boards().has(route);
+      if (plus) root.insertAdjacentHTML('beforeend', BoardNewTask.markup());
       v.mount();
+      if (plus) BoardNewTask.wire(v.B);
       if (modal) showSettings();
     }
 
@@ -254,7 +272,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 +312,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); }
@@ -67,6 +84,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
   #failedStartSheet { inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 48px); }
 }
 .sidebar .sb-row .icon.sb-plus { color: var(--muted); background: var(--chip); }
+.sidebar .sb-row .icon.sb-start-icon { color: var(--accent); }
 
 #newBoardSheet .nb-form { min-width: 0; }
 #newBoardSheet .sheet-head { margin-bottom: 8px; }
@@ -143,7 +161,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)) });
           });
         }