@lovek4d/kickflip 0.1.0 → 0.4.0

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

@@ -1,14 +1,15 @@
-// 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 saves
-// at once. 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.
+// 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 () {
   // The last data, which a return to the view paints at once.
   let last = null;
   const { esc } = HubUI;
   const ACTION = '/_hub/settings/notifications';
 
-  // datetime-local speaks the device's clock; the hidden snooze field carries its UTC ISO value to the hub.
+  // datetime-local speaks the device's clock; the picker's hidden field carries its UTC ISO value to the hub.
   const localInput = (d) => {
     const pad = (n) => String(n).padStart(2, '0');
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
@@ -20,27 +21,46 @@
     if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
   }
 
-  function snoozeRow(d) {
-    const icon = HubUI.tile('snooze', '#a855f7');
-    if (d.snoozed) return `<div class="row snooze-on">${icon}<span class="body"><span class="text title">${esc(d.snoozed.title)}</span><form method="post" action="${ACTION}"><button class="btn quiet" name="snooze" value="off">End</button></form></span></div>`;
-    if (!d.snooze) return '';
-    const chips = d.snooze.choices.map((c) => `<button class="btn quiet" name="snooze" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
-    return `<div class="block" role="group" aria-labelledby="snoozeTitle"><div class="snooze-head">${icon}<span class="title" id="snoozeTitle">Snooze</span></div><div class="snooze-chips"><form class="snooze-choices" method="post" action="${ACTION}">${chips}</form><form class="snooze-custom" method="post" action="${ACTION}"><input type="hidden" name="snooze"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-snooze-at required aria-label="Custom snooze until a date and time"></form></div></div>`;
+  // The one duration picker Snooze and Keep awake share (hub/duration.mjs): chips that post `name` to `action` at once,
+  // then Custom, whose date and time posts as `name` too. While its setting is on, `on` replaces it with when it ends
+  // and a button that posts `name`=off.
+  function durationPicker({ id, title, icon, action, name, choices, on, button }) {
+    if (on) return `<div class="row dur-on">${icon}<span class="body"><span class="text title">${esc(on.title)}</span><form method="post" action="${action}"><button class="btn quiet" name="${name}" value="off">${button}</button></form></span></div>`;
+    if (!choices) return '';
+    const chips = choices.map((c) => `<button class="btn quiet" name="${name}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="block" role="group" aria-labelledby="${id}Title"><div class="dur-head">${icon}<span class="title" id="${id}Title">${title}</span></div><div class="dur-chips"><form class="dur-choices" method="post" action="${action}">${chips}</form><form class="dur-custom" method="post" action="${action}"><input type="hidden" name="${name}"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-dur-at required aria-label="Custom ${title.toLowerCase()} until a date and time"></form></div></div>`;
   }
 
-  // The on/off, snooze and weekend rows (docs/adr/0032-notifications-can-be-off-snoozed-or-off-on-weekends.md).
+  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/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/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>`;
     const onRow = toggle({ icon: tile('power', d.on.on ? '#22c55e' : '#6b7280'), set: 'on', title: 'Push notifications', checked: d.on.on,
       attrs: ` id="notifyOn" data-confirm="${esc(d.on.confirm)}"` });
-    const weekendRow = toggle({ icon: tile('calendar', '#0ea5e9'), set: 'weekends', title: 'Off on weekends', checked: d.weekends.on, attrs: ' data-submit' });
+    const weekendRow = toggle({ icon: tile('calendar', 'var(--color-quiet)'), set: 'weekends', title: 'Off on weekends', checked: d.weekends.on, attrs: ' data-submit' });
     return `${onRow}\n${snoozeRow(d)}\n${weekendRow}`;
   }
 
-  const sections = [['notifications', 'Notifications'], ['polling', 'Polling'], ['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('')}
@@ -56,10 +76,10 @@
       let settingsURL = '/_hub/';
       let returnFocus = null;
       let unfitModal = null;
-      let polling = null;
       let flash = null;
       let rules = null;
       let rulesJSON = '';
+      let linearKey = null;
 
       function paint() {
         if (!last) return;
@@ -68,21 +88,29 @@
         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>`;
-          const input = B.$('[data-snooze-at]');
-          if (input) customBounds(input, true);
+        } 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>`;
         } else if (active === 'linear') {
-          const typed = B.$('#linearKey')?.value || '';
-          const l = last.linear;
-          const remove = l.set ? `<form method="post" action="/_hub/settings/linear"><input type="hidden" name="remove" value="1"><button type="button" class="btn quiet danger" data-linear-remove>Remove</button></form>` : '';
-          content.innerHTML = `<div class="group">${row({ icon: tile('key', l.set ? '#5e6ad2' : '#6b7280'), title: esc(l.title), sub: esc(l.sub), wrap: !l.set, trail: remove })}<form class="block lk-form" method="post" action="/_hub/settings/linear"><input id="linearKey" name="key" type="password" required placeholder="${l.set ? 'Paste a new key to replace it' : 'Paste a Linear API key'}" aria-label="Linear API key" autocomplete="off" autocapitalize="off" spellcheck="false"><button class="btn">Save</button></form></div><p class="note">Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. Without a key, each board’s session does that through its Linear MCP.</p>`;
-          B.$('#linearKey').value = typed;
+          if (linearKey) linearKey.set(last.linear);
+          else {
+            linearKey = LinearKey.mount(content, { linear: last.linear,
+              saved(out) { last = out; flash = null; paint(); ctx.sidebarChanged?.(); },
+              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);
         B.$('.settings-body').scrollTop = scrollTop;
+        B.$('#keep-awake').disabled = Boolean(last.awake.unsupported);
         const summaries = {
-          notifications: [last.on.on ? 'Pushes on' : 'Pushes off', last.snoozed?.title, last.weekends.on ? 'Off on weekends' : '', deviceSummary()].filter(Boolean).join(' · '),
-          polling: last.polling,
+          notifications: [last.on.on ? 'Pushes on' : 'Pushes off', last.snoozed?.summary, last.weekends.on ? 'Off on weekends' : '', deviceSummary()].filter(Boolean).join(' · '),
+          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',
           closed: last.closed?.length ? `${last.closed.length} closed` : 'No closed boards',
@@ -122,9 +150,9 @@
       }
 
       function closeModal(restore = true) {
-        polling?.unmount(); polling = null;
         unfitModal?.(); unfitModal = null;
         modal.close();
+        linearKey?.destroy(); linearKey = null;
         content.innerHTML = '';
         rules = null;
         active = null;
@@ -151,17 +179,16 @@
             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;
       };
-      const dismiss = () => B.openSettings({ kind: 'hub' });
+      const dismiss = () => {
+        if (!linearKey?.busy()) { B.openSettings({ kind: 'hub' }); return; }
+        linearKey.settled().then(() => { if (B.alive()) B.openSettings({ kind: 'hub' }); });
+      };
       B.on(modal, 'cancel', (e) => { e.preventDefault(); dismiss(); });
       B.on(root, 'click', (e) => {
         const opener = e.target.closest?.('[data-settings-open]');
@@ -181,7 +208,7 @@
       device.ready.then(() => { if (B.alive()) paint(); });
       let openPicker = null;
       B.on(root, 'click', (e) => {
-        const input = e.target.closest?.('[data-snooze-at]');
+        const input = e.target.closest?.('[data-dur-at]');
         if (!input) return;
         openPicker = input;
         customBounds(input, input.value === input.defaultValue);
@@ -189,7 +216,7 @@
       });
       // A chip's pointerdown comes before Custom's focusout; without this reset Custom posts first and the chip's post is dropped.
       B.on(root, 'pointerdown', (e) => {
-        const input = e.target.closest?.('.snooze-choices button') && B.$('[data-snooze-at]');
+        const input = e.target.closest?.('.dur-choices button') && B.$('[data-dur-at]');
         if (!input) return;
         openPicker = null;
         input.value = input.defaultValue;
@@ -199,16 +226,16 @@
         if (!input.value || (input !== openPicker && input.value === input.defaultValue) || !input.checkValidity()) return;
         const at = new Date(input.value);
         if (Number.isNaN(at.getTime())) return;
-        input.form.querySelector('[name="snooze"]').value = at.toISOString();
+        input.form.querySelector('input[type="hidden"]').value = at.toISOString();
         input.form.requestSubmit();
         openPicker = null;
         input.defaultValue = input.value;
       };
       B.on(root, 'change', (e) => {
-        if (e.target.matches?.('[data-snooze-at]') && document.activeElement !== e.target) saveCustom(e.target);
+        if (e.target.matches?.('[data-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
       });
       B.on(root, 'focusout', (e) => {
-        if (e.target.matches?.('[data-snooze-at]')) saveCustom(e.target);
+        if (e.target.matches?.('[data-dur-at]')) saveCustom(e.target);
       });
       B.on(root, 'click', async (e) => {
         const button = e.target.closest?.('[data-reopen]');
@@ -227,10 +254,6 @@
         reopening = null;
         if (B.alive()) paint();
       });
-      B.on(root, 'click', async (e) => {
-        const remove = e.target.closest?.('[data-linear-remove]');
-        if (remove && await BoardDialogs.confirm('Remove the Linear key? Boards on Linear can’t create issues or move tickets until you add one again.', { ok: 'Remove' }) && B.alive()) remove.closest('form').requestSubmit();
-      });
       B.on(root, 'change', async (e) => {
         const on = e.target;
         if (on.id !== 'notifyOn') return;
@@ -238,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 Codex share, Needs you for the pending
-// prompts of sessions that own no board, the hub's health, each site's health and board links,
-// polling status, then hub settings summary rows (ADR 0075). Health comes from GET /_hub/api/hub.
+// 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 ([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,30 +12,65 @@
     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('');
   }
 
-  function sitesHtml(groups) {
+  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. 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 ? BoardUI.BUSY : ''}>Restart</button>`
+      + `<a class="chev" href="${href}" tabindex="-1" aria-hidden="true">›</a></div>`;
+  }
+
+  // restarting: the routes whose Restart is out.
+  function sitesHtml(groups, restarting) {
     const { row, CHEVRON } = HubUI;
     const site = (s) => {
+      const busy = restarting.has(s.route);
       const lines = s.lines.length ? `<span class="links">${s.lines.map((l) => `<span><b>${esc(l.link)}</b> ${esc(l.detail)}</span>`).join('')}</span>` : '';
-      return row({ icon: s.icon, title: esc(s.title), sub: `<span class="st ${esc(s.tone)}">${esc(s.word)}</span>${lines}`, wrap: true, trail: CHEVRON, href: s.href }) + rememberedHtml(s.remembered);
+      const sub = busy ? RESTARTING : `<span class="st ${esc(s.tone)}">${esc(s.word)}</span>${lines}`;
+      return (s.restart ? restartRow(s, sub, busy) : row({ icon: s.icon, title: esc(s.title), sub, wrap: true, trail: CHEVRON, href: s.href })) + rememberedHtml(s.remembered);
     };
     return groups.map((g) => `<h2 class="label">${esc(g.label)}</h2>\n<div class="group">${g.sites.map(site).join('')}</div>\n`).join('');
   }
 
+  function integrationsHtml(integrations) {
+    const { row, tile } = HubUI;
+    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>${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>
+`;
+  }
+
   // A pending prompt from a session that owns no board waits here (prompts.js).
   function promptsHtml(list, prompts) {
     const shown = list.filter(prompts.shows);
     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 }) {
+  // 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);
+    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: `<span class="st ${esc(d.hub.tone)}">${esc(d.hub.word)}</span> · ${esc(d.hub.detail)}`, 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>
-${sitesHtml(d.groups)}${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, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p>
+${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>
-<div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div>`;
+<div class="group">${nowRow(d.polling, tile('clock', d.polling.count ? 'var(--color-notice)' : 'var(--color-quiet)'))}</div>`;
   }
 
   const footer = (d) => `<footer>${esc(d.sites)}. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">${esc(d.host)}</span></footer>`;
@@ -59,11 +95,67 @@ ${sitesHtml(d.groups)}${d.remembered?.length ? `<h2 class="label">Sessions witho
       B.atUnmount(() => settings.unmount());
       B.on(B.$('#refresh'), 'click', () => settings.B.refreshSettings?.());
       let flash = null;
+      const restarting = new Set();
       B.openSettings = (...args) => settings.B.openSettings(...args);
+      async function restart(route, title) {
+        if (restarting.has(route) || !(await BoardDialogs.confirm(`This stops ${title}’s session mid-task, along with any implementer it started, then restarts its server and resumes the session. Its cards and threads stay. For a stuck board. Restart ${title}?`))) return;
+        restarting.add(route);
+        flash = null;
+        paint();
+        let out = null;
+        try {
+          const r = await fetch('/_hub/restart-board', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: JSON.stringify({ route }) });
+          out = await r.json().catch(() => null);
+          if (!r.ok || !out) throw new Error();
+          if (B.alive()) B.toast(`${out.title} is back up, and its session is listening.`);
+        } catch { flash = { text: out?.error || `Could not restart ${title}. Is the host awake?`, error: true }; }
+        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);
+        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 });
+        main.innerHTML = html(last, { flash, prompts, restarting, restartingHub });
         foot.innerHTML = footer(last);
       };
       const prompts = PromptAnswers.wire(B, {
@@ -73,9 +165,9 @@ ${sitesHtml(d.groups)}${d.remembered?.length ? `<h2 class="label">Sessions witho
         after: () => load(),
       });
       const forms = HubKit.forms(B, {
-        accepts: (action, form) => action === '/_hub/push/flush' || ['/_hub/settings/codex', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action) || Boolean(form?.closest?.('.hold-banner')),
+        accepts: (action, form) => action === '/_hub/push/flush' || ['/_hub/settings/codex', '/_hub/settings/claude-model', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action) || Boolean(form?.closest?.('.hold-banner')),
         answer(out, action) {
-          if (['/_hub/settings/codex', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action)) {
+          if (['/_hub/settings/codex', '/_hub/settings/claude-model', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action)) {
             last = out; flash = null; paint();
             if (action.endsWith('/keep-going')) B.toast(out.pause.state === 'going' ? `Keep going: work runs past the buffer until ${BoardUI.usageClock(out.pause.resets_at)}.` : 'Stopped: new work waits again.');
           } else if (action === '/_hub/push/flush') { flash = { text: out.message, error: !out.ok }; load(); } else { flash = null; load(); settings.B.refreshSettings?.(); }

package/board/public/view-notes.js

@@ -1,9 +1,10 @@
 // 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',
   title: () => 'Notes',
-  markup: ({ item }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: `./#item=${encodeURIComponent(item || '')}`, controls: false })}
+  markup: ({ item, wave }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: wave ? './' : `./#item=${encodeURIComponent(item || '')}`, controls: false })}
 <main>
   <article class="plan" id="plan"><p class="muted">Loading the notes…</p></article>
 </main>`,
@@ -12,15 +13,17 @@
     const { $, site } = B;
     const { esc, markdown, linkContext, fetchJSON, restartNotice } = BoardUI;
     const key = ctx.view.item || '';
+    const wave = ctx.view.wave;
     const el = $('#plan');
     const get = (url, opts = {}) => fetchJSON(url, { ...opts, sleep: B.sleep });
     try {
       const board = get(site.url('api/board')).then((r) => r.body).catch(() => ({}));
-      const r = await get(site.url(`api/notes?item=${encodeURIComponent(key)}`), { onWait: () => { el.innerHTML = restartNotice(); } });
+      const query = wave ? `wave=${encodeURIComponent(wave)}` : `item=${encodeURIComponent(key)}`;
+      const r = await get(site.url(`api/notes?${query}`), { onWait: () => { el.innerHTML = restartNotice(); } });
       if (!B.alive()) return;
       if (!r.ok) throw new Error(r.body.error || `notes ${r.status}`);
-      $('#ref').textContent = `${r.body.ref} notes`;
-      document.title = `${r.body.ref} notes`;
+      $('#ref').textContent = `${wave ? r.body.title : r.body.ref} notes`;
+      document.title = $('#ref').textContent;
       el.innerHTML = markdown(r.body.markdown, linkContext((await board).items || [], key, { base: './' }));
     } catch (e) {
       el.innerHTML = `<p class="muted">Could not load these notes: ${esc(e.message)}</p>`;