@lovek4d/kickflip 0.3.1 → 0.4.0

package/board/public/ui.js

@@ -49,16 +49,18 @@
   }
   const CLIP = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
   const attachButton = () => `<label class="attach" title="Attach files"><input type="file" multiple data-attach aria-label="Attach files">${CLIP}</label>`;
+  // A composer's text box, which attach.js outlines with Drop to attach while files are dragged over the composer.
+  const dropZone = (textarea) => `<div class="dz">${textarea}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
   const icon = (body, size = 18, attrs = '') => `<svg${attrs} width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
   // An SVG, not ↗: iOS Safari can draw ↗ as an emoji tile even with U+FE0E.
   const LINK_ARROW = icon('<path d="M7 17 17 7"/><path d="M7 7h10v10"/>', '1em', ' class="link-arrow" style="vertical-align:-0.125em"');
   const EYE = icon('<path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/>');
   const TRASH = icon('<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>');
   const ELLIPSIS = icon('<circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/>');
-  // Asks Claude for throwaway prototypes of one item (docs/adr/0015-prototypes-come-on-request.md).
-  function protoButton(id, state = null, { label = 'Ask for prototypes', disabled = false } = {}) {
-    if (state?.pending) return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" data-proto-pending="${esc(state.pending)}" aria-label="Prototypes are being made" title="Prototypes are being made"${disabled ? ' disabled' : ''}>${ELLIPSIS}</button>`;
-    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}"${disabled ? ' disabled' : ''}>${EYE}</button>`;
+  // Asks Claude for throwaway prototypes of one item (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
+  function protoButton(id, state = null, { label = 'Ask for prototypes' } = {}) {
+    if (state?.pending) return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" data-proto-pending="${esc(state.pending)}" aria-label="Prototypes are being made" title="Prototypes are being made">${ELLIPSIS}</button>`;
+    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}">${EYE}</button>`;
   }
   // latestBump is the data.id of the newest ask-bump event.
   const protoNotice = (eventId, latestBump) => (latestBump === eventId
@@ -71,15 +73,15 @@
   const editButton = (id) => `<button class="ghost icon" data-edit="${esc(id)}" aria-label="Edit" title="Edit">${PENCIL}</button>`;
   // A waiting ask's bump, which app-asks.js sends as ask-bump {id}, filled orange once bumped and disabled on the latest
   // bump. A work card's is the same icon: app-cards.js sends card-bump {key} with no confirm, and on a bumped card, where
-  // it is filled orange, card-unbump {key} (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md,
-  // docs/adr/0145-build-on-a-blocked-card-queues-it.md).
+  // it is filled orange, card-unbump {key} (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md,
+  // docs/adr/2026-11-03-0301-build-on-a-blocked-card-queues-it.md).
   const bumpButton = (it, top) => `<button class="ghost icon${it.bumpedAt ? ' bumped' : ''}" data-bump="${esc(it.id)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
   const cardBumpButton = (key, bumped) => (bumped
     ? `<button class="ghost icon bumped" data-card-bump="${esc(key)}" data-bumped aria-pressed="true" aria-label="Unbump" title="Bumped. Tap to unbump">${BUMP}</button>`
     : `<button class="ghost icon" data-card-bump="${esc(key)}" aria-pressed="false" aria-label="Bump to top" title="Bump to top">${BUMP}</button>`);
-  const workingLine = '<span class="working-dot" aria-hidden="true"></span>Working on it';
+  const workingLine = '<span class="thinking"><span class="working-dot" aria-hidden="true"></span>thinking</span>';
   // html is markup the caller has escaped; href, title and attrs values are escaped here.
-  const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready']);
+  const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready', 'merged']);
   function badge(tone, html, { href, title, button = false, attrs = {} } = {}) {
     if (!BADGE_TONES.includes(tone)) throw new Error(`unknown badge tone: ${tone}`);
     const extra = Object.entries({ href, title, ...attrs }).filter(([, v]) => v != null).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
@@ -212,21 +214,87 @@
     }
     lastHtml.set(el, html);
     if (openDetails.size) for (const d of el.querySelectorAll('details:not([open])')) if (openDetails.has(detailsKey(d))) d.open = true;
+    for (const w of waits) { const b = waitingButton(w); if (b && !b.classList.contains(w.mark)) markWaiting(b, w); }
     return true;
   }
 
+  // Closes <details> d at once: its toggle event comes a task later, and a setHTML before it would reopen it.
+  function closeDetails(d) {
+    openDetails.delete(detailsKey(d));
+    d.open = false;
+  }
+
+  // A tap that saves something waits for the server (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md,
+  // docs/adr/2026-11-03-1915-every-pending-control-waits-in-one-style.md): waitOn(control, promise, {group}) disables
+  // control until promise settles and marks it tap-waiting and aria-busy. style.css button[aria-busy="true"] keeps a
+  // button's colours and width and shows a spinner in its text colour in place of its content, or pulses a bump icon
+  // orange. A toggle, select or field keeps its face, with a spinner beside it: after its caption in a .tk-field, else
+  // just before it. group: the other choices of the same setting, disabled (tap-blocked) with no spinner meanwhile.
+  // A repaint meanwhile (setHTML) patches each back to its markup, so setHTML marks it again, found by its id and data
+  // attributes when the repaint replaced it. Settling restores the disabled and aria-busy its latest markup had. → promise
+  // Work that outlives its request (a restart, an update, a merge) draws its button with BUSY in its markup until the
+  // state the page draws from says the work is done.
+  const BUSY = ' disabled aria-busy="true"';
+  const waits = new Set();
+  function markWaiting(b, w) {
+    w.el = b;
+    w.disabled = b.disabled;
+    w.busy = b.getAttribute('aria-busy');
+    b.disabled = true;
+    b.classList.add(w.mark);
+    if (w.mark !== 'tap-waiting') return;
+    b.setAttribute('aria-busy', 'true');
+    if (b.tagName === 'BUTTON') return;
+    w.spin?.remove();
+    w.spin = document.createElement('span');
+    w.spin.setAttribute('class', 'try-spin tap-beside');
+    w.spin.setAttribute('aria-hidden', 'true');
+    const caption = b.closest('.tk-field')?.firstElementChild;
+    if (caption && caption !== b) caption.appendChild(w.spin);
+    else b.before(w.spin);
+  }
+  const waitingButton = (w) => (w.el.isConnected && w.el.matches(w.selector) ? w.el
+    : w.named ? document.body.querySelector(w.selector) : null);
+  function waitFor(el, mark) {
+    const named = [...el.attributes].filter(({ name }) => name === 'id' || name.startsWith('data-'));
+    const w = { mark, selector: el.tagName.toLowerCase() + named.map(({ name, value }) => (value ? `[${name}="${CSS.escape(value)}"]` : `[${name}]`)).join(''), named: named.length > 0 };
+    markWaiting(el, w);
+    waits.add(w);
+    return w;
+  }
+  function waitOn(control, promise, { group = [] } = {}) {
+    const mine = [waitFor(control, 'tap-waiting'), ...[...group].filter((el) => el !== control).map((el) => waitFor(el, 'tap-blocked'))];
+    const done = () => {
+      for (const w of mine) {
+        waits.delete(w);
+        w.spin?.remove();
+        // setHTML keeps w.el the node it last marked; one a plain innerHTML replaced is gone with its mark.
+        const b = w.el;
+        if (!b.classList.contains(w.mark)) continue;
+        b.classList.remove(w.mark);
+        if (w.mark === 'tap-waiting') { if (w.busy === null) b.removeAttribute('aria-busy'); else b.setAttribute('aria-busy', w.busy); }
+        b.disabled = w.disabled;
+      }
+    };
+    promise.then(done, done);
+    return promise;
+  }
+
   // While a board restarts, the hub answers its own 502 page, and a request can fail outright. fetchJSON waits that out:
   // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs) and retries with a growing backoff,
   // then throws once about limit ms have passed. Any other answer resolves {ok, status, body}, a 404's {error} included.
+  // tag is the version of the board the page holds: an unchanged board answers 304, which resolves with body null
+  // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
   const RESTARTING = 'Board restarting…';
   const restartNotice = () => `<span class="muted small restarting">${RESTARTING}</span>`;
-  async function fetchJSON(url, { onWait = () => {}, limit = 30000, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
+  async function fetchJSON(url, { onWait = () => {}, limit = 30000, tag = null, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
     let waited = 0;
     let delay = 500;
     for (;;) {
       let failure;
       try {
-        const r = await get(url, { cache: 'no-store' });
+        const r = await get(url, { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) });
+        if (r.status === 304) return { ok: true, status: 304, body: null };
         const body = await r.text().then((t) => JSON.parse(t)).catch(() => undefined);
         if (body !== undefined && r.status < 500) return { ok: r.ok, status: r.status, body };
         failure = new Error(r.status >= 500 ? `the board answered ${r.status}` : 'the board did not answer with JSON');
@@ -241,7 +309,7 @@
 
   globalThis.BoardUI = {
     LINK_ARROW,
-    esc, record, time, ago, since, clock, etaLine, cardTime, replyBody, setHTML, fetchJSON, RESTARTING, restartNotice,
-    attachments, attachButton, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+    esc, record, time, ago, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, fetchJSON, RESTARTING, restartNotice,
+    attachments, attachButton, dropZone, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
   };
 })();

package/board/public/view-frame.js

@@ -1,5 +1,5 @@
 // Any other page on the hub as a view of the app shell (shell.js): another site, a prototype, or a board page that isn't
-// a view of its own, in a same-origin frame beside the board header (docs/adr/0055-one-app-for-the-whole-hub.md). The
+// a view of its own, in a same-origin frame beside the board header (docs/adr/2026-10-29-2005-one-app-for-the-whole-hub.md). The
 // header's title follows the page's, and Open alone ↗ loads the page by itself (?alone=1, hub/shell.mjs pageOf). A
 // page that draws the board header itself, such as a prototype or another site's page, hides this one; its logo then
 // toggles the sidebar as this one's would, and hides while the rail shows. The page's own navigations stay in the frame

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

@@ -1,6 +1,6 @@
-// HubSettings: summary rows below Hub’s health and status open centred settings modals (ADR 0075), using
-// settingsView's words from GET /_hub/api/settings. Each toggle and snooze posts to /_hub/settings/notifications, and
-// Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key does through linear-key.js; Done waits for
+// HubSettings: summary rows below Hub’s health and status open centred settings modals ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)), using
+// settingsView's words from GET /_hub/api/settings. Each toggle and snooze posts to /_hub/settings/notifications, Quiet
+// hours' times and hold to /_hub/settings/quiet, and Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key does through linear-key.js; Done waits for
 // a key's save to land. The rules editor saves through POST /_hub/settings/rules
 // and marks [data-dirty] while an edit is unsaved, so the shell asks before leaving then. The data refreshes every 30 seconds while nothing is being edited.
 (function () {
@@ -33,11 +33,11 @@
 
   const snoozeRow = (d) => durationPicker({ id: 'snooze', title: 'Snooze', icon: HubUI.tile('snooze', '#a855f7'), action: ACTION, name: 'snooze',
     choices: d.snooze?.choices, on: d.snoozed, button: 'End' });
-  // Grey while off and orange while on, as the machine working (docs/adr/0096-colour-says-whos-waiting.md).
+  // Grey while off and orange while on, as the machine working (docs/adr/2026-11-01-1817-colour-says-whos-waiting.md).
   const awakeRow = (a) => durationPicker({ id: 'awake', title: 'Keep awake', icon: HubUI.tile('coffee', a.on ? 'var(--color-notice)' : 'var(--color-quiet)'),
     action: '/_hub/settings/keep-awake', name: 'keep_awake', choices: a.choices, on: a.on, button: 'Turn off' });
 
-  // The on/off, snooze and weekend rows (docs/adr/0032-notifications-can-be-off-snoozed-or-off-on-weekends.md).
+  // The on/off, snooze and weekend rows (docs/adr/2026-10-29-1639-notifications-can-be-off-snoozed-or-off-on-weekends.md).
   function notificationRows(d) {
     const { tile } = HubUI;
     const toggle = ({ icon, set, title, checked, attrs = '' }) => `<form class="row field" method="post" action="${ACTION}"><input type="hidden" name="set" value="${set}">${icon}<label class="body"><span class="text"><span class="title">${title}</span></span><input type="checkbox" name="value" value="on" class="toggle"${attrs}${checked ? ' checked' : ''}></label></form>`;
@@ -47,9 +47,20 @@
     return `${onRow}\n${snoozeRow(d)}\n${weekendRow}`;
   }
 
-  const sections = [['notifications', 'Notifications'], ['polling', 'Polling'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
+  // Quiet hours (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md): start and
+  // end, each saved once its picker closes, the overnight hold, the muted cadence hint and what the snoozes and wake read.
+  function quietRows(q) {
+    const { row, tile } = HubUI;
+    const time = (name, title, value) => `<form class="row field" method="post" action="/_hub/settings/quiet"><label class="body"><span class="text title">${title}</span><input type="time" name="${name}" value="${esc(value)}" required data-autosave></label></form>`;
+    const holdRow = `<form class="row field" method="post" action="/_hub/settings/quiet"><input type="hidden" name="set" value="hold">${tile('moon', 'var(--accent)')}<label class="body"><span class="text"><span class="title">Hold pushes</span><span class="sub wrap">${esc(q.hold.sub)}</span></span><input type="checkbox" name="value" value="on" class="toggle" data-submit${q.hold.on ? ' checked' : ''}></label></form>`;
+    const reads = q.reads.map((r) => row({ title: esc(r.title), sub: `<span class="sub wrap">${esc(r.sub)}</span>` })).join('');
+    return `<div class="group">${time('start', 'Starts', q.start)}${time('end', 'Ends', q.end)}${holdRow}</div><p class="quiet-hint">${esc(q.hint)}</p>`
+      + `<h2 class="label">Snoozes and wakes read</h2><div class="group">${reads}</div>`;
+  }
+
+  const sections = [['notifications', 'Notifications'], ['quiet', 'Quiet hours'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
   const sectionOf = (hash) => {
-    const id = { push: 'notifications', 'closed-boards': 'closed' }[hash?.slice(1)] || hash?.slice(1);
+    const id = { push: 'notifications', 'closed-boards': 'closed', polling: 'quiet' }[hash?.slice(1)] || hash?.slice(1);
     return sections.some(([section]) => section === id) ? id : null;
   };
   const markup = () => `${sections.map(([id, title]) => `<button type="button" class="hub-setting" id="${id}" data-settings-open="${id}" aria-haspopup="dialog"><span class="text"><span class="title">${title}</span><span class="sub" data-summary="${id}">Loading…</span></span><span class="chev" aria-hidden="true">›</span></button>`).join('')}
@@ -65,7 +76,6 @@
       let settingsURL = '/_hub/';
       let returnFocus = null;
       let unfitModal = null;
-      let polling = null;
       let flash = null;
       let rules = null;
       let rulesJSON = '';
@@ -78,6 +88,8 @@
         const scrollTop = B.$('.settings-body').scrollTop;
         if (active === 'notifications') {
           content.innerHTML = `<div class="group">${deviceRow(device.state(last.device), { compact: true })}${notificationRows(last)}${last.presence ? row({ icon: tile('laptop', 'var(--color-quiet)'), title: esc(last.presence.title) }) : ''}</div>`;
+        } else if (active === 'quiet') {
+          content.innerHTML = quietRows(last.quiet);
         } else if (active === 'keep-awake') {
           content.innerHTML = last.awake.unsupported ? `<p class="note">${esc(last.awake.unsupported)}.</p>`
             : `<div class="group">${awakeRow(last.awake)}</div><p class="note">Runs <code>caffeinate -ims</code> on the host so it doesn’t sleep while boards work. The screen can still turn off.</p>`;
@@ -89,7 +101,7 @@
               busy: (on) => LinearKey.doneBusy(modal.querySelectorAll('[data-settings-dismiss]'), on) });
           }
         } else if (active === 'closed') {
-          content.innerHTML = `<div class="group">${(last.closed || []).length ? last.closed.map((b) => `<div class="row"><span class="body"><span class="text"><span class="title">${esc(b.title)}</span><span class="sub wrap">/${esc(b.route)}</span></span><button class="btn" type="button" data-reopen="${esc(b.route)}"${reopening ? ' disabled' : ''}>${reopening === b.route ? 'Reopening…' : 'Reopen'}</button></span></div>`).join('') : '<p class="note">No closed boards.</p>'}</div>`;
+          content.innerHTML = `<div class="group">${(last.closed || []).length ? last.closed.map((b) => `<div class="row"><span class="body"><span class="text"><span class="title">${esc(b.title)}</span><span class="sub wrap">/${esc(b.route)}</span></span><button class="btn" type="button" data-reopen="${esc(b.route)}"${reopening === b.route ? BoardUI.BUSY : reopening ? ' disabled' : ''}>Reopen</button></span></div>`).join('') : '<p class="note">No closed boards.</p>'}</div>`;
         }
         const input = B.$('[data-dur-at]');
         if (input) customBounds(input, true);
@@ -97,7 +109,7 @@
         B.$('#keep-awake').disabled = Boolean(last.awake.unsupported);
         const summaries = {
           notifications: [last.on.on ? 'Pushes on' : 'Pushes off', last.snoozed?.summary, last.weekends.on ? 'Off on weekends' : '', deviceSummary()].filter(Boolean).join(' · '),
-          polling: last.polling,
+          quiet: last.quiet.summary,
           'keep-awake': last.awake.summary,
           linear: last.linear?.summary || 'No key',
           rules: last.rules.length ? `${last.rules.length} rule${last.rules.length === 1 ? '' : 's'}` : 'None yet',
@@ -138,7 +150,6 @@
       }
 
       function closeModal(restore = true) {
-        polling?.unmount(); polling = null;
         unfitModal?.(); unfitModal = null;
         modal.close();
         linearKey?.destroy(); linearKey = null;
@@ -168,13 +179,9 @@
             modal.showModal();
             B.$('.settings-body').scrollTop = 0;
             B.$('#hubSettingsTitle').focus({ preventScroll: true });
-            if (id === 'polling') {
-              polling = HubPolling.create(content, siteRoot, { ...ctx, view, changed: () => B.refreshSettings?.() });
-              polling.mount();
-            }
           }
-        } else if (id === 'polling') polling?.B.selectWindow?.(view.w || null);
-        settingsURL = AppRouter.urlOf({ kind: 'hub', ...(id ? { hash: `#${id}` } : {}), ...(id === 'polling' && view.w ? { w: view.w } : {}) });
+        }
+        settingsURL = AppRouter.urlOf({ kind: 'hub', ...(id ? { hash: `#${id}` } : {}) });
         history.replaceState(history.state, '', settingsURL);
         return true;
       };
@@ -254,7 +261,7 @@
         else on.checked = true;
       });
       const forms = HubKit.forms(B, {
-        accepts: (action) => action !== '/_hub/push/flush' && action !== '/_hub/settings/polling',
+        accepts: (action) => action !== '/_hub/push/flush',
         answer(out) {
           last = out;
           flash = null;

package/board/public/view-hub.js

@@ -1,6 +1,7 @@
 // The hub page, /_hub/, a view of the app shell (shell.js): a banner while pushes are held or snoozed, the Usage card with Claude model and Codex share, Needs you for the pending
 // prompts of sessions that own no board, Health, Integrations (readiness.mjs words), each site's health and board links,
-// polling status, then hub settings summary rows (ADR 0075). A board's row can carry Restart (hub/restart-board.mjs). Health comes from GET /_hub/api/hub.
+// polling status, then hub settings summary rows ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)). A board's row can carry Restart (hub/restart-board.mjs), and
+// the Hub row Restart hub while the hub runs older code than its files. Health comes from GET /_hub/api/hub.
 // Its data refreshes every 30 seconds while it shows (hub-kit.js live).
 (function () {
   // The last data, which a return to the view paints at once.
@@ -11,14 +12,14 @@
     return sessions.map((s) => `<div class="remembered"><p>Always allow · session <code>${esc(s.session)}</code></p><ul>${s.rules.map((rule) => `<li><code>${esc(rule)}</code></li>`).join('')}</ul></div>`).join('');
   }
 
-  const RESTARTING = '<span class="st wait">Restarting</span> · stopping its session, then starting it again';
+  const RESTARTING = '<span class="st wait">restarting</span> · stopping its session, then starting it again';
 
   // A board with Restart (hub/restart-board.mjs restartable) keeps its link and chevron around the button, since a
-  // button can't sit inside a link.
+  // button can't sit inside a link. Restart waits (ui.js BUSY) until its POST answers, once the board is back up.
   function restartRow(s, sub, busy) {
     const href = esc(s.href);
     return `<div class="row site-row"><a class="site-link" href="${href}">${s.icon}<span class="text"><span class="title">${esc(s.title)}</span><span class="sub wrap">${sub}</span></span></a>`
-      + `<button type="button" class="btn quiet restart-btn" data-restart="${esc(s.route)}" data-title="${esc(s.title)}" aria-label="Restart ${esc(s.title)}"${busy ? ' disabled aria-busy="true"' : ''}>${busy ? '<span class="try-spin" aria-hidden="true"></span>Restarting…' : 'Restart'}</button>`
+      + `<button type="button" class="btn quiet restart-btn" data-restart="${esc(s.route)}" data-title="${esc(s.title)}" aria-label="Restart ${esc(s.title)}"${busy ? BoardUI.BUSY : ''}>Restart</button>`
       + `<a class="chev" href="${href}" tabindex="-1" aria-hidden="true">›</a></div>`;
   }
 
@@ -39,8 +40,8 @@
     const fixHtml = (fix) => fix.command ? `<code>${esc(fix.command)}</code>` : fix.settings
       ? `${esc(fix.text)} <button type="button" class="link" data-settings-open="${esc(fix.settings)}">${esc(fix.label)}</button>.` : esc(fix.text);
     const rows = integrations.map((it) => row({ icon: tile(it.id, it.ready ? 'var(--color-quiet)' : 'var(--color-notice)'), title: esc(it.name), wrap: true,
-      sub: it.ready ? `<span class="st ok">Ready</span> · ${esc(it.detail)}`
-        : `<span class="st wait">Not ready</span> · ${esc(it.missing)}<span class="links"><span class="rd-fix">${fixHtml(it.fix)}</span><span class="rd-waits">${esc(it.waits)}</span></span>` })).join('');
+      sub: it.ready ? `<span class="st ok">ready</span> · ${esc(it.detail)}`
+        : `<span class="st wait">not ready</span> · ${esc(it.missing)}<span class="links"><span class="rd-fix">${fixHtml(it.fix)}</span>${it.waits ? `<span class="rd-waits">${esc(it.waits)}</span>` : ''}</span>` })).join('');
     return `<h2 class="label" id="integrations">Integrations</h2><div class="group">${rows}</div>
 <p class="note">A feature that needs an integration stays off until it’s ready, and says why.</p>
 `;
@@ -52,11 +53,20 @@
     return shown.length ? `<section class="waiting"><h2>Needs you · ${shown.length}</h2><ul>${shown.map((p) => BoardUI.promptItem(p, prompts.state(p))).join('')}</ul></section>` : '';
   }
 
-  function html(d, { flash, prompts, restarting }) {
+  // Restart hub, while the hub runs older code than its files (hub/views.mjs hubView's hub.restart). It waits (ui.js BUSY)
+  // from the tap until the hub answers with its new code and the page reloads.
+  const restartHubButton = (busy) => `<button type="button" class="btn quiet restart-btn" id="restart-hub" data-restart-hub${busy ? BoardUI.BUSY : ''}>Restart hub</button>`;
+
+  function html(d, { flash, prompts, restarting, restartingHub }) {
     const { row, tile, nowRow } = HubUI;
     const usage = HubUI.usageCard(d.usage, d.codex, d.pause, d.claude);
+    // The status word is plain text, except while the hub runs older code: then it opens the Restart hub confirm and waits like that button.
+    const word = d.hub.restart
+      ? `<button type="button" class="st ${esc(d.hub.tone)}" data-restart-hub${restartingHub ? BoardUI.BUSY : ''}>${esc(d.hub.word)}</button>`
+      : `<span class="st ${esc(d.hub.tone)}">${esc(d.hub.word)}</span>`;
     return `${HubUI.flash(flash)}${HubUI.pauseBanner(d.pause)}${HubUI.holdBanner(d.hold)}${usage}${promptsHtml(d.prompts || [], prompts)}<h2 class="label"${usage ? '' : ' style="margin-top:4px"'}>Health</h2>
-<div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `<button type="button" class="st ${esc(d.hub.tone)}" data-jump="integrations">${esc(d.hub.word)}</button> ·${esc(d.hub.detail)}${d.awake ? `<span class="links"><span><span class="awake-on">Keeping awake</span> ${esc(d.awake)}</span></span>` : ''}`, wrap: true })}
+<div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `${word} ·${esc(d.hub.detail)}${d.awake ? `<span class="links"><span><span class="awake-on">Keeping awake</span> ${esc(d.awake)}</span></span>` : ''}`, wrap: true,
+    trail: d.hub.restart ? restartHubButton(restartingHub) : '' })}
 ${d.empty ? row({ title: 'No sites yet', sub: 'In a Claude session, run <code>/kickflip &lt;route&gt;</code>.' }) : ''}</div>
 ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembered?.length ? `<h2 class="label">Sessions without a board</h2><div class="group">${rememberedHtml(d.remembered)}</div>` : ''}<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, the fetch of its repo, events (its session and a watcher run, or the hub can wake it), daily wakes and reviewer links. One that just broke reads settling first.</p>
 <h2 class="label">Polling status</h2>
@@ -102,19 +112,50 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
         restarting.delete(route);
         if (B.alive()) { paint(); load(); }
       }
+      // Restart hub asks the host to restart the hub service (POST /_hub/restart-hub), then waits for the hub to answer
+      // with other code than it ran (its x-hub-code) and reloads the app; past HUB_WAIT tries it says how to restart by hand.
+      let restartingHub = false;
+      const HUB_WAIT = 120;
+      async function restartHub() {
+        if (restartingHub || !(await BoardDialogs.confirm('This restarts the hub on the host so it runs the code in its files. Its pages stop answering until it’s back, then this page reloads. Restart the hub?'))) return;
+        restartingHub = true;
+        flash = null;
+        paint();
+        let out = null, before = null;
+        try {
+          const r = await fetch('/_hub/restart-hub', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: '{}' });
+          out = await r.json().catch(() => null);
+          if (!r.ok || !out) throw new Error();
+          before = r.headers.get('x-hub-code');
+        } catch {
+          restartingHub = false;
+          flash = { text: out?.error || 'Could not restart the hub. Is the host awake?', error: true };
+          if (B.alive()) paint();
+          return;
+        }
+        for (let i = 0; i < HUB_WAIT && B.alive(); i++) {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          try {
+            const r = await fetch('/_hub/api/hub', { cache: 'no-store', headers: { accept: 'application/json' } });
+            const code = r.headers.get('x-hub-code');
+            if (r.ok && code && code !== before) return AppShell.reload();
+          } catch { /* the hub is down while it restarts */ }
+        }
+        restartingHub = false;
+        flash = { text: `The hub hasn’t come back. On the host, run ${out.command}`, error: true };
+        if (B.alive()) paint();
+      }
       B.on(main, 'click', (e) => {
         const opener = e.target.closest?.('[data-settings-open]');
         if (opener) B.openSettings({ hash: `#${opener.dataset.settingsOpen}` }, opener);
-        // The Hub's status word jumps to what's behind it: Integrations, then each board's links below them.
-        const jump = e.target.closest?.('[data-jump]');
-        if (jump) B.$(`#${jump.dataset.jump}`).scrollIntoView({ behavior: 'smooth', block: 'start' });
+        if (e.target.closest?.('[data-restart-hub]')) restartHub();
         const restarter = e.target.closest?.('[data-restart]');
         if (restarter) restart(restarter.dataset.restart, restarter.dataset.title);
       });
       const foot = B.$('.hub-foot');
       const paint = () => {
         if (!last) return;
-        main.innerHTML = html(last, { flash, prompts, restarting });
+        main.innerHTML = html(last, { flash, prompts, restarting, restartingHub });
         foot.innerHTML = footer(last);
       };
       const prompts = PromptAnswers.wire(B, {

package/board/public/view-notes.js

@@ -1,5 +1,5 @@
 // An item's notes, /<route>/notes.html?item=<wave>/<id>, a view of the app shell (shell.js)
-// (docs/adr/0053-notes-replace-the-full-plan-and-cards-start-on-their-own.md). Back goes to the item's card.
+// (docs/adr/2026-10-29-1816-notes-replace-the-full-plan-and-cards-start-on-their-own.md). Back goes to the item's card.
 // ?wave=<slug> shows a wave's goal, order and note instead, and back goes to the board.
 (globalThis.AppViews ||= {}).notes = {
   className: 'view-notes',