@lovek4d/kickflip 0.5.3 → 0.6.0

package/board/public/prototype.html

@@ -10,7 +10,7 @@
 <link rel="stylesheet" href="sidebar.css">
 <style>
   /* The one page every recorded prototype is (board/server.mjs fills the {{…}} slots; prototype-kit.js documents what a
-     take gets). main keeps room below the stage for the take pill and its note. */
+     take gets). main keeps room below the stage for the viewer's bar and its note. */
   main.proto-main { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: calc(150px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
   /* kit.hub() is a whole page with its own gutter and header, so it goes edge to edge. */
   main.proto-main:has(> #stage > .kit-hub) { padding-top: 0; }
@@ -20,11 +20,28 @@
   #stage:has(> .kit-hub) { padding: 0; }
   #stage .top { position: static; }
   #stage .hub-view main { padding-bottom: 16px; }
+  /* A served round's page, framed from the board's base prototype worktree, edge to edge above the viewer's bar. */
+  #stage:has(> .kit-served) { max-width: none; padding: 0; }
+  .kit-served { display: block; width: 100%; min-height: 320px; height: calc(100dvh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border: 0; background: var(--panel); }
+  .kit-served-failed pre { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
   .kit-missing { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); overflow-wrap: anywhere; }
   #protoToast { position: fixed; z-index: 40; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 32px); }
   #protoToast[hidden] { display: none; }
   @media (max-width: 899px) { #protoToast { top: max(12px, env(safe-area-inset-top)); } }
 
+  /* A take's own boxes are capped to the stage at phone width, so a fixed-width panel never cuts off. prototype-kit.js
+     (phoneFit) marks what the take lays side by side with data-stack, which stacks in one column whether the take used
+     grid, flex (wrapping or not) or inline-block, and a frame 600px or wider with data-wide: it keeps its own layout
+     and scrolls sideways inside its data-scroll box. */
+  @media (max-width: 599px) {
+    #stage :where(div, section, article, aside, nav, header, footer, main, form, ul, ol, table, figure):not([data-wide]) { max-width: 100%; min-width: 0; }
+    #stage [data-scroll] { overflow-x: auto; max-width: 100%; }
+    #stage [data-wide] { max-width: none; flex-shrink: 0; }
+    #stage [data-stack] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; grid-template-columns: none !important; align-items: stretch !important; }
+    #stage [data-stack] > * { width: auto !important; flex: 0 0 auto !important; grid-column: auto !important; float: none !important; }
+  }
+  /* iOS Safari zooms the page when it focuses a field under 16px. */
+  #stage :where(input, select, textarea) { font-size: 16px; }
   #stage .kit-sidebar.sidebar { position: relative; inset: auto; z-index: auto; transform: none; visibility: visible; transition: none;
     width: min(320px, 100%); height: 640px; margin: 0 auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 14px; }
   #stage .kit-sidebar.sidebar:not(.kit-head) > header.top { display: none; }
@@ -40,15 +57,52 @@
 <main class="proto-main"><div id="stage"></div></main>
 <div class="toast" id="protoToast" role="status" hidden></div>
 <script id="prototypeData" type="application/json">{{prototypeData}}</script>
-<script src="claude.js"></script>
 <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-progress-bar.js"></script>
+<script src="ui-order.js"></script>
+<script src="ui-patch.js"></script>
+<script src="ui-threads.js"></script>
 <script src="ui-cards.js"></script>
+<script src="ui-header.js"></script>
+<script src="ui-snapshot.js"></script>
 <script src="ui-page-header.js"></script>
 <script src="ui-sidebar.js"></script>
+<script src="ui-questions.js"></script>
+<script src="ui-prompts.js"></script>
+<script src="ui-markdown.js"></script>
 <script src="ui-hub.js"></script>
+<script src="toasts.js"></script>
+<script src="dialogs.js"></script>
+<script src="prompts.js"></script>
+<script src="rules-editor.js"></script>
+<script src="claude.js"></script>
+<script src="attach.js"></script>
+<script src="hub-kit.js"></script>
+<script src="linear-key.js"></script>
+<script src="sidebar.js"></script>
+<script src="app.js"></script>
+<script src="new-task.js"></script>
+<script src="app-core.js"></script>
+<script src="app-threads.js"></script>
+<script src="app-cards.js"></script>
+<script src="app-lanes.js"></script>
+<script src="app-asks.js"></script>
+<script src="app-needs.js"></script>
+<script src="app-header.js"></script>
+<script src="app-arch.js"></script>
+<script src="app-reader.js"></script>
+<script src="app-banner.js"></script>
+<script src="app-snapshot.js"></script>
+<script src="view-settings.js"></script>
+<script src="view-questions.js"></script>
+<script src="view-notes.js"></script>
+<script src="view-hub.js"></script>
+<script src="view-hub-settings.js"></script>
+<script src="view-frame.js"></script>
+<script src="router.js"></script>
+<script src="shell.js"></script>
 <script src="prototype-switcher.js"></script>
 <script src="prototype-kit.js"></script>
 <script>PrototypeKit.start(JSON.parse(document.getElementById('prototypeData').textContent));</script>

package/board/public/router.js

@@ -85,18 +85,19 @@ globalThis.AppRouter = (function () {
     const u = new URL(view.url, 'http://hub');
     return /^\/[^/]+\/prototype-[\w-]+\.html$/.test(u.pathname) ? u.searchParams.get('q') || null : null;
   }
-  function levelOf(view, { boards = new Set() } = {}) {
+  // wide: from 900px Waiting on you is the board's pane, so a prototype's parent is the board itself.
+  function levelOf(view, { boards = new Set(), wide = false } = {}) {
     if (view?.kind === 'board') return 0;
     if (view?.kind === 'questions') return 1;
-    return questionOf(view, boards) ? 2 : null;
+    return questionOf(view, boards) ? (wide ? 1 : 2) : null;
   }
   // → the views above view in the tree, its board first. card: the card whose thread the owner left the board from,
   // which the board keeps open.
-  function parentsOf(view, { boards = new Set(), card = null } = {}) {
+  function parentsOf(view, { boards = new Set(), card = null, wide = false } = {}) {
     const q = questionOf(view, boards);
     if (!q && view?.kind !== 'questions') return [];
     const board = { kind: 'board', route: view.route, hash: card ? `#item=${encodeURIComponent(card)}` : '' };
-    return q ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
+    return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
   // Each history entry carries {idx}, its distance from the shell's first entry, pushed when a push opened it, and on a
@@ -109,8 +110,8 @@ globalThis.AppRouter = (function () {
   // boards() → the board routes now.
   // → {push(href, from), replace(href), up()}: push and replace write an entry for a view go is showing; replace answers
   // 'up' when it went back to a parent instead, which then takes href, and go shows it on that pop.
-  function listen({ boards, go }) {
-    const b = () => ({ boards: boards() });
+  function listen({ boards, go, wide = () => false }) {
+    const b = () => ({ boards: boards(), wide: wide() });
     const mark = (pushed) => (pushed ? { pushed: true } : {});
     let idx = Number.isInteger(history.state?.idx) ? history.state.idx : 0;
     let landing = null;

package/board/public/shell.js

@@ -6,8 +6,8 @@
 // view in place through router.js; a link to anything that isn't a page loads it. Leaving a view whose root holds
 // [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/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
+// leaves is unmounted, and paints live from its saved copy when it comes back
+// (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.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.
@@ -44,6 +44,9 @@ window.AppShell = (function () {
   }
 
   async function start() {
+    // The shell sends every view to the top itself, so the browser's own scroll restore is off: after a reload iOS put the old
+    // offset back once the page had grown, and left that area unpainted until a scroll (docs/adr/2026-11-06-1100-the-shell-turns-off-scroll-restoration.md).
+    history.scrollRestoration = 'manual';
     // A frame that lands on a view's URL, such as a framed page's link back to its card, shows it in the shell around it.
     if (outer()?.open(location.href, { frames: false })) return;
     // The same URL and scope as hub-kit.js's push registration, so the one registration and its push subscription stay.
@@ -57,10 +60,20 @@ window.AppShell = (function () {
     // A stored sidebar's code says nothing about the shell that booted, so it adopts the next live hash.
     bootCode = data?.code || null;
     data ||= read(DATA_KEY);
-    // A board shared with someone else, view only (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
-    // the hub sends them data.shared, and style.css hides what writes under .shared-view.
+    // A board shared with someone else (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+    // the hub sends them data.shared, and style.css hides what writes under .shared-view. On a board they have Full on
+    // (data.shared.full; docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md) the page is .shared-full too,
+    // which shows the composers and card buttons again; levelHere follows the route shown and each sidebar event.
     const shared = data?.shared || null;
     document.documentElement.classList.toggle('shared-view', Boolean(shared));
+    const sharedHere = (route) => ({ by: data?.shared?.by ?? null, full: Boolean(data?.shared?.full?.includes(route)) });
+    function levelHere() {
+      if (!shared || !current) return;
+      const here = sharedHere(current.route);
+      document.documentElement.classList.toggle('shared-full', here.full);
+      const strip = current.root.querySelector('.view-only-strip');
+      if (strip) strip.innerHTML = BoardView.sharedStrip(here);
+    }
     sidebar = Sidebar.mount({ data, poll: false, reload, open: (href) => { if (!open(href)) location.assign(href); } });
     const boards = () => new Set((data?.sites || []).filter((s) => s.board).map((s) => s.route));
     const titleOf = (route) => data?.sites?.find((s) => s.route === route)?.title || route;
@@ -72,13 +85,8 @@ window.AppShell = (function () {
       listeners.get(route).add(fn);
       return () => listeners.get(route)?.delete(fn);
     };
-    // route → {fresh, generatedAt} for each board left fresh with no change since. Trusted only while the stream is up:
-    // a dropped stream may have missed a change, so its return forgets them all.
-    const left = new Map();
-    let streamUp = false;
     let current = null;
     function changed(route) {
-      left.delete(route);
       for (const fn of listeners.get(route) || []) fn();
     }
 
@@ -94,8 +102,7 @@ window.AppShell = (function () {
       const cur = es = new EventSource('/_hub/stream');
       cur.addEventListener('open', () => {
         tries = 0;
-        streamUp = true;
-        if (opened) { left.clear(); if (current) changed(current.route); }
+        if (opened && current) changed(current.route);
         opened = true;
       });
       cur.addEventListener('change', (e) => {
@@ -107,10 +114,10 @@ window.AppShell = (function () {
         try { data = JSON.parse(e.data); } catch { return; }
         codeSeen(data.code);
         sidebar.setData(data);
+        levelHere();
         current?.v?.B?.renderStatus?.();
       });
       cur.addEventListener('error', () => {
-        streamUp = false;
         if (cur.readyState !== EventSource.CLOSED || es !== cur) return;
         retry = setTimeout(openStream, Math.min(30000, 1000 * 2 ** tries++));
       });
@@ -131,6 +138,14 @@ window.AppShell = (function () {
     };
     for (const type of ['pointerdown', 'keydown', 'scroll']) addEventListener(type, beat, { capture: true, passive: true });
 
+    // docs/adr/2026-11-05-1834-while-typing-the-header-is-a-strip-and-the-send-bar-sits-on-the-keyboard.md
+    // While a text field has focus :root.typing is set and style.css disables the floating + (New task); nothing else
+    // on the page moves.
+    document.addEventListener('focusin', (ev) => {
+      document.documentElement.classList.toggle('typing', ev.target.matches?.('textarea, input[type="text"], input:not([type])') ?? false);
+    });
+    document.addEventListener('focusout', () => document.documentElement.classList.remove('typing'));
+
     // 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() {
@@ -179,29 +194,23 @@ window.AppShell = (function () {
       const board = view.kind === 'board';
       const hub = route === undefined;
       const siteTitle = hub ? 'Hub' : titleOf(route);
-      if (current) {
-        const st = current.v.B.state;
-        const keep = streamUp && st?.view === 'fresh' && st.board ? { fresh: st.fresh, generatedAt: st.board.generatedAt } : null;
-        current.v.unmount();
-        if (keep) left.set(current.route, keep);
-      }
+      if (current) current.v.unmount();
       const page = board ? null : AppViews[view.kind];
       const root = document.createElement('div');
       root.className = board ? 'view-board' : page.className;
-      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared }) : page.markup(view, { siteTitle });
+      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared: shared && sharedHere(route) }) : page.markup(view, { siteTitle });
       if (current) current.root.replaceWith(root); else scrim.after(root);
       const siteRoot = hub ? '/_hub' : '/' + encodeURIComponent(route);
       let v;
       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, away: () => data?.away });
+        v = BoardView.create(root, siteRoot, { signal: signalFor(route), pause: () => data?.sites?.find((s) => s.route === route)?.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(),
           loaded: (url, title) => { if (current?.v === v) framed(url, title); }, sidebarChanged: refreshSidebar });
       }
       current = { view, route, root, v };
+      levelHere();
       document.title = board ? siteTitle : page.title(view, { siteTitle });
       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);
@@ -232,8 +241,29 @@ window.AppShell = (function () {
     // go(view, href, how, from): router.js's, with how 'replace' for a framed page's hand-off and 'reload' for a view's
     // own refresh. → true, or a promise of whether the view switched once the owner answers about an unsaved edit.
     let router = null;
+    const wide = matchMedia('(min-width: 900px)');
+    // Board and Waiting on you are a board's two pages (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md):
+    // from 900px the board shows Waiting on you in its pane, so every view of the questions page, a link, a push, a
+    // hand-off, a history entry or a cold load, shows the board at its own URL and opens the question's topic there (id,
+    // or null for none). A board just shown takes a moment to fill its pane, so the pane is asked again until it has.
+    function focusPane(id, tries = 50) {
+      if (current?.view.kind !== 'board' || current.v.B.focusQuestion?.(id) || tries <= 0) return;
+      setTimeout(() => focusPane(id, tries - 1), 100);
+    }
     function go(view, href, how, from) {
       if (!AppRouter.mounted(view)) return false;
+      if (view.kind === 'questions' && wide.matches) {
+        const board = { kind: 'board', route: view.route, hash: '' };
+        const boardHref = new URL(AppRouter.urlOf(board), location.href).href;
+        if (how === 'pop') history.replaceState(history.state, '', boardHref);
+        // On its own board it only opens the topic, so the URL, history and an open card stay as they are.
+        else if (current?.view.kind === 'board' && current.route === view.route && !settings) {
+          focusPane(view.id);
+          sidebar.close();
+          return true;
+        }
+        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) focusPane(view.id); return shown; });
+      }
       if (view.kind === 'settings') {
         if (current?.view.kind === 'board' && current.route === view.route) {
           const here = AppRouter.viewOf(location.href, { boards: boards() });
@@ -285,7 +315,17 @@ window.AppShell = (function () {
     }
     if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
 
-    router = AppRouter.listen({ boards, go });
+    let pane = null;
+    if (first.kind === 'questions' && wide.matches) {
+      pane = { id: first.id };
+      first = { kind: 'board', route: first.route, hash: '' };
+      history.replaceState(history.state, '', AppRouter.urlOf(first));
+    }
+    router = AppRouter.listen({ boards, go, wide: () => wide.matches });
+    // Widening past 900px on Waiting on you swaps to the board with that topic open in the pane.
+    wide.addEventListener('change', () => {
+      if (wide.matches && current?.view.kind === 'questions') go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
+    });
     opener = (url, { replace = false, frames = true } = {}) => {
       const view = AppRouter.viewOf(url, { boards: boards() });
       if (!AppRouter.mounted(view) || (!frames && view.kind === 'frame')) return false;
@@ -301,6 +341,7 @@ window.AppShell = (function () {
     navigator.serviceWorker?.startMessages?.();
 
     show(first);
+    if (pane) focusPane(pane.id);
     openStream();
     addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
     addEventListener('pageshow', openStream);
@@ -309,7 +350,6 @@ window.AppShell = (function () {
     addEventListener('pagehide', (e) => {
       if (!e.persisted || !es) return;
       clearTimeout(retry);
-      streamUp = false;
       es.close();
     });
   }

package/board/public/sidebar.css

@@ -180,6 +180,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .t-building { --tone: var(--color-notice); }
 .sidebar .t-ok { --tone: var(--color-success); }
 .sidebar .t-wait { --tone: var(--color-notice); }
+.sidebar .t-paused { --tone: var(--muted); }
 
 @media (min-width: 900px) {
   body.has-sidebar { padding-left: 272px; }

package/board/public/sidebar.js

@@ -1,5 +1,5 @@
 // The sidebar's behaviour on a page with <aside id="sidebar" class="sidebar"> and <div id="sidebarScrim"
-// 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).
+// class="sidebar-scrim">, after ui-progress-bar.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
@@ -17,8 +17,8 @@
 // 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.
+// tick in place each second, and its running bar beats on every pulse's one clock (ui-progress-bar.js onePulse). 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.
@@ -27,8 +27,7 @@
   // 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;
+  // sidebar.css sb-join's length.
   const JOIN_MS = 2500;
   // paint() sets the bar's duration from this and its delay from switching.started.
   const IDLE_MS = 3000;
@@ -58,9 +57,8 @@
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
     let device = null;
     let update = null;
-    // While Restart waits for the hub: null | {version} | {version, error}, which replaces the hub's upgrade field in the row.
-    let restart = null;
-    const upgradeShown = () => (restart ? { state: restart.error ? 'updated' : 'restarting', ...restart } : data?.upgrade);
+    // The hub's version when this page booted; the row names the version only once it differs.
+    let bootVersion = data?.version ?? null;
     let updateHTML = '';
     const rail = matchMedia(RAIL);
     const html = document.documentElement;
@@ -73,7 +71,7 @@
       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' : upgradeShown() ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
     // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
@@ -91,7 +89,6 @@
     }
     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; }
@@ -104,7 +101,7 @@
     }
     // 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 || upgradeShown()));
+      html.classList.toggle('sb-update', Boolean(update));
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
@@ -116,11 +113,14 @@
         bar.style.animationDelay = `${switching.started - performance.now()}ms`;
         bar.style.animationDuration = `${IDLE_MS}ms`;
       }
+      // A shared person's sidebar has no update row (ui-sidebar.js).
       const fresh = aside.querySelector('.sb-update');
-      if (held) fresh.replaceWith(held);
-      const row = updateRow(update, upgradeShown());
-      if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
-      updateHTML = row;
+      if (fresh) {
+        if (held) fresh.replaceWith(held);
+        const row = updateRow(update, data.version && data.version !== bootVersion ? data.version : null);
+        if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
+        updateHTML = row;
+      }
       const list = aside.querySelector('.sb-scroll');
       if (list) list.scrollTop = top ?? list.scrollHeight;
       paintStarts();
@@ -131,6 +131,7 @@
       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());
+      bootVersion ??= next.version ?? null;
       data = next;
       write(DATA_KEY, JSON.stringify(data));
       paint();
@@ -195,64 +196,10 @@
         if (!refreshApp.disabled && update !== 'reloading') { setUpdate('reloading'); reload(); }
         return;
       }
-      const restartApp = e.target.closest?.('[data-app-restart]');
-      if (restartApp) { if (!restartApp.disabled) restartHub(); 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 failed = e.target.closest?.('[data-failed-start]');
       if (failed) openFailed(failed.dataset.failedStart);
     });
-    // Restart asks the hub to restart (POST /_hub/restart-hub), then polls until it answers with other code than it ran (its
-    // x-hub-code) and reloads the page (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md).
-    // Past RESTART_TRIES polls the row goes back to Restart with how to restart by hand.
-    const RESTART_TRIES = 120;
-    async function restartHub() {
-      if (restart) return;
-      const version = data.upgrade.version;
-      restart = { version };
-      paint();
-      let before, command;
-      try {
-        const response = await fetch('/_hub/restart-hub', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: '{}' });
-        const body = await response.json().catch(() => ({}));
-        if (!response.ok) throw new Error(body.error || 'The hub didn’t restart.');
-        before = response.headers.get('x-hub-code');
-        command = body.command;
-      } catch (e) {
-        restart = { version, error: e.message || 'The hub didn’t answer.' };
-        paint();
-        restart = null;
-        return;
-      }
-      for (let i = 0; i < RESTART_TRIES; i++) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        try {
-          const response = await fetch('/_hub/api/hub', { cache: 'no-store', headers: { accept: 'application/json' } });
-          const code = response.headers.get('x-hub-code');
-          if (response.ok && code && code !== before) { reload(); return; }
-        } catch { /* the hub is down while it restarts */ }
-      }
-      restart = { version, error: `The hub hasn’t come back. On the host, run ${command}` };
-      paint();
-      restart = null;
-    }
-    // Update pulls again after a failed pull (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md). The row
-    // waits (ui.js waitOn) until the hub answers with what it did, then while that pull 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) {