@lovek4d/kickflip 0.1.0 → 0.4.0

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(),
@@ -205,7 +219,7 @@ window.AppShell = (function () {
     const openHere = (href) => { if (!opener(href)) location.assign(href); };
 
     // The board and Waiting on you follow their own hash, so a link that only moves it keeps the view.
-    const sameView = (a, b) => a.kind === b.kind && a.route === b.route && (a.kind !== 'notes' || a.item === b.item) && (a.kind !== 'frame' || a.url === b.url);
+    const sameView = (a, b) => a.kind === b.kind && a.route === b.route && (a.kind !== 'notes' || (a.item === b.item && a.wave === b.wave)) && (a.kind !== 'frame' || a.url === b.url);
     const dirty = () => Boolean(current?.root.querySelector('[data-dirty]'));
     addEventListener('beforeunload', (e) => { if (dirty()) { e.preventDefault(); e.returnValue = ''; } });
 
@@ -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

@@ -30,12 +30,14 @@
 .sidebar .sb-row:active { background: var(--chip); }
 @media (hover: hover) { .sidebar .sb-row:hover { background: color-mix(in srgb, var(--chip) 70%, transparent); text-decoration: none; } }
 .sidebar .sb-row.on { background: var(--accent-soft); }
-.sidebar .sb-turnon { margin: 6px 0 0; background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--line)); }
+.sidebar .sb-turnon { margin: 6px 0 0; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
 .sidebar .sb-update-row { width: 100%; min-height: 48px; margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; text-align: left; font: inherit; color: var(--text);
   background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); cursor: pointer; }
 .sidebar .sb-update-row:disabled { opacity: 1; cursor: default; }
-.sidebar .sb-go { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
+.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,7 +50,39 @@ 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; }
-.sidebar .sb-dismiss { flex: none; min-height: 44px; font-size: 12px; }
+/* 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); }
+@media (hover: hover) { .sidebar .sb-failed:hover { background: color-mix(in srgb, var(--chip) 70%, transparent); } }
+
+#failedStartSheet .sheet-head h2 { font-size: 17px; overflow-wrap: anywhere; }
+#failedStartSheet .fs-error { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-danger) 40%, var(--line)); border-radius: 10px;
+  color: var(--color-danger); font-size: 13px; overflow-wrap: anywhere; }
+#failedStartSheet .fs-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 14px; font-size: 13px; }
+#failedStartSheet .fs-facts dt { color: var(--muted); }
+#failedStartSheet .fs-facts dd { margin: 0; overflow-wrap: anywhere; }
+#failedStartSheet .fs-refused { margin: 0 0 8px; color: var(--color-danger); font-size: 13px; }
+#failedStartSheet .fs-refused[hidden] { display: none; }
+#failedStartSheet .fs-actions { display: flex; gap: 8px; justify-content: flex-end; }
+#failedStartSheet .fs-actions button { min-height: 44px; padding: 6px 16px; }
+@media (min-width: 900px) {
+  #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); }
 
 #newBoardSheet .nb-form { min-width: 0; }
@@ -66,15 +100,15 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 #newBoardSheet .nb-repo:hover, #newBoardSheet .nb-repo:focus-visible { border-color: var(--accent); }
 #newBoardSheet .nb-repo strong { overflow-wrap: anywhere; }
 #newBoardSheet .nb-repo.nb-repo-highlight { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
-#newBoardSheet .nb-repo-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
+#newBoardSheet .nb-repo-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--chip); color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
 #newBoardSheet .nb-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
 #newBoardSheet .nb-box > span { min-width: 0; }
 #newBoardSheet .nb-box strong { display: block; overflow-wrap: anywhere; }
 #newBoardSheet .nb-box-no { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--line)); }
 #newBoardSheet .nb-why { display: block; margin-top: 4px; color: var(--color-danger); font-size: 13px; }
-#newBoardSheet .nb-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: nb-spin .8s linear infinite; }
+#newBoardSheet .nb-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line); border-top-color: var(--color-notice); border-radius: 50%; animation: nb-spin .8s linear infinite; }
 @keyframes nb-spin { to { transform: rotate(360deg); } }
-#newBoardSheet .nb-local { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); }
+#newBoardSheet .nb-local { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
 #newBoardSheet .nb-selected { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
 #newBoardSheet .nb-clone { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 12px; }
 #newBoardSheet [hidden] { display: none; }
@@ -110,11 +144,11 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 @starting-style { .sidebar.ks-on .ks-label-hint { opacity: 0; } }
 /* The label is the bar's containing block: left 0 is the BOARDS text's edge, and right -8px crosses the label's 8px
    side margin (.sb-label) to the rows' right edge. The bar sits in the label's 4px bottom margin. */
-.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--color-notice);
-  transform-origin: 0 50%; animation: ks-drain 3s linear forwards; }
+.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--accent);
+  transform-origin: 0 50%; animation: ks-drain linear forwards; }
 @keyframes ks-drain { to { transform: scaleX(0); } }
 .sidebar .ks-u { transition: color 200ms linear; }
-.sidebar.ks-on .ks-u { color: var(--color-notice); transition: color 150ms linear; }
+.sidebar.ks-on .ks-u { color: var(--accent); transition: color 150ms linear; }
 @starting-style { .sidebar.ks-on .ks-u { color: inherit; } }
 @media (prefers-reduced-motion: reduce) {
   .sidebar .ks-bar { animation: none; }
@@ -126,6 +160,11 @@ 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-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); }
 .sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
@@ -134,7 +173,8 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 @media (prefers-reduced-motion: no-preference) { .sidebar .dot.pulse { animation: sb-pulse 1.4s ease-in-out infinite; } }
 .sidebar .word { flex: none; font-weight: 600; color: var(--tone); }
 .sidebar .t-down, .sidebar .t-needs { --tone: var(--color-danger); }
-.sidebar .t-starting, .sidebar .t-asleep { --tone: var(--muted); }
+.sidebar .t-starting { --tone: var(--color-notice); }
+.sidebar .t-stopped, .sidebar .t-asleep { --tone: var(--muted); }
 .sidebar .t-working { --tone: var(--color-notice); }
 .sidebar .t-building { --tone: var(--color-notice); }
 .sidebar .t-ok { --tone: var(--color-success); }
@@ -162,7 +202,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
   .sidebar .sb-scroll { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
 }
 
-.sidebar .u-tone-ok { --u: var(--accent); }
+.sidebar .u-tone-ok { --u: var(--muted); }
 .sidebar .u-tone-high { --u: var(--color-notice); }
 .sidebar .u-tone-full { --u: var(--color-danger); }
 .sidebar .u-tone-stale, .sidebar .u-tone-none { --u: var(--muted); }

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,7 +27,10 @@
   // 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;
-  // sidebar.css .ks-bar drains over the same time.
+  // 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"])';
   const MODIFIERS = new Set(['Shift', 'Meta', 'Control', 'Alt', 'AltGraph', 'CapsLock', 'Fn']);
@@ -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, 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; } }
@@ -64,38 +70,70 @@
       const logo = [...document.querySelectorAll('.top a.hub')].find(pageLogo);
       if (!logo) return;
       const n = othersWaiting(data, here);
-      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : data?.upgrade ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
-    // switching: {timer, opened} while switch mode shows, opened when it opened the drawer.
+    // 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));
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
       // Screen readers announce a role="status" node only when its own content changes, so the node outlives the repaint.
       const held = aside.querySelector('.sb-update');
       aside.innerHTML = sidebar(data, { here, device, switching: Boolean(switching) });
+      if (switching) {
+        const bar = aside.querySelector('.ks-bar');
+        bar.style.animationDelay = `${switching.started - performance.now()}ms`;
+        bar.style.animationDuration = `${IDLE_MS}ms`;
+      }
       const fresh = aside.querySelector('.sb-update');
       if (held) fresh.replaceWith(held);
-      const row = updateRow(update);
+      const row = updateRow(update, data.upgrade);
       if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
       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();
     }
     function setUpdate(state) {
       update = state;
-      html.classList.toggle('sb-update', Boolean(update));
       paint();
     }
 
@@ -140,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(() => {});
@@ -148,22 +186,89 @@
         onClose: () => aside.querySelector('[data-new-board]')?.focus({ preventScroll: true }),
       });
     }
-    aside.addEventListener('click', async (e) => {
+    aside.addEventListener('click', (e) => {
       const refreshApp = e.target.closest?.('[data-app-reload]');
       if (refreshApp) {
         if (!refreshApp.disabled && update !== 'reloading') { setUpdate('reloading'); reload(); }
         return;
       }
+      const upgradeApp = e.target.closest?.('[data-app-upgrade]');
+      if (upgradeApp) { if (!upgradeApp.disabled) upgrade(upgradeApp); return; }
       if (e.target.closest?.('[data-new-board]')) { newBoard(); return; }
-      const dismiss = e.target.closest?.('[data-dismiss-board]');
-      if (!dismiss || dismiss.disabled) return;
-      dismiss.disabled = true;
-      try {
-        const response = await fetch(`/_hub/new-board/${encodeURIComponent(dismiss.dataset.dismissBoard)}`, { method: 'DELETE' });
-        if (!response.ok) throw new Error(await response.text());
-        await refresh();
-      } catch (e) { dismiss.disabled = false; globalThis.BoardDialogs?.notice(e.message); }
+      const failed = e.target.closest?.('[data-failed-start]');
+      if (failed) openFailed(failed.dataset.failedStart);
     });
+    // 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/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;
+      const previous = document.activeElement;
+      const el = document.createElement('dialog');
+      el.setAttribute('id', 'failedStartSheet');
+      el.setAttribute('class', 'sheet');
+      el.setAttribute('aria-labelledby', 'failedStartTitle');
+      el.innerHTML = failedStart(s, { home: data.home });
+      let sending = false;
+      const done = () => { if (!sending) el.close(); };
+      // The tapped button waits (ui.js waitOn), the other disabled, until the hub answers.
+      async function act(button, request, after) {
+        sending = true;
+        const refused = el.querySelector('.fs-refused');
+        refused.hidden = true;
+        try {
+          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;
+          el.close();
+          refresh().catch(() => {});
+        } catch (e) {
+          sending = false;
+          refused.textContent = e.message;
+          refused.hidden = false;
+        }
+      }
+      el.addEventListener('click', (e) => {
+        if (sending) return;
+        if (e.target === el || e.target.closest('[data-failed-close]')) { done(); return; }
+        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, step: 'starting', stepAt: new Date().toISOString(), askedAt: new Date().toISOString(), failed: false };
+            setData({ ...data, starting: data.starting.map((x) => (x.route === route ? again : x)) });
+          });
+        }
+      });
+      el.addEventListener('cancel', (e) => { e.preventDefault(); done(); });
+      el.addEventListener('close', () => {
+        el.remove();
+        if (previous?.isConnected) previous.focus({ preventScroll: true });
+      });
+      document.body.appendChild(el);
+      el.showModal();
+      (el.querySelector('[data-failed-retry]') || el.querySelector('[data-failed-dismiss]')).focus({ preventScroll: true });
+    }
     document.addEventListener('click', (e) => {
       if (e.metaKey || e.ctrlKey || e.shiftKey) return;
       if (e.target.closest?.('[data-sidebar-close]')) { e.preventDefault(); if (rail.matches) collapse(true); else close(); return; }
@@ -177,7 +282,7 @@
     let lastS = -Infinity;
     function startSwitch() {
       lastS = -Infinity;
-      switching = { opened: !rail.matches && !isOpen(), timer: setTimeout(() => endSwitch(), IDLE_MS) };
+      switching = { opened: !rail.matches && !isOpen(), started: performance.now(), timer: setTimeout(() => endSwitch(), IDLE_MS) };
       if (switching.opened) open();
       aside.classList.add('ks-on');
       paint();