@lovek4d/kickflip 0.1.0 → 0.3.1

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.
+// 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
+// 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,25 +21,33 @@
     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>`;
   }
 
+  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).
+  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).
   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']];
+  const sections = [['notifications', 'Notifications'], ['polling', 'Polling'], ['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);
     return sections.some(([section]) => section === id) ? id : null;
@@ -60,6 +69,7 @@
       let flash = null;
       let rules = null;
       let rulesJSON = '';
+      let linearKey = null;
 
       function paint() {
         if (!last) return;
@@ -68,21 +78,27 @@
         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 === '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>`;
         }
+        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(' · '),
+          notifications: [last.on.on ? 'Pushes on' : 'Pushes off', last.snoozed?.summary, last.weekends.on ? 'Off on weekends' : '', deviceSummary()].filter(Boolean).join(' · '),
           polling: last.polling,
+          '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',
@@ -125,6 +141,7 @@
         polling?.unmount(); polling = null;
         unfitModal?.(); unfitModal = null;
         modal.close();
+        linearKey?.destroy(); linearKey = null;
         content.innerHTML = '';
         rules = null;
         active = null;
@@ -161,7 +178,10 @@
         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 +201,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 +209,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 +219,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 +247,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;

package/board/public/view-hub.js

@@ -1,6 +1,6 @@
-// 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 (ADR 0075). A board's row can carry Restart (hub/restart-board.mjs). 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 +11,56 @@
     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.
+  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>`
+      + `<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><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 }) {
+  function html(d, { flash, prompts, restarting }) {
     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);
     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: `<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 })}
 ${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 +85,36 @@ ${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(); }
+      }
+      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' });
+        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 });
         foot.innerHTML = footer(last);
       };
       const prompts = PromptAnswers.wire(B, {
@@ -73,9 +124,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.
+// ?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>`;

package/board/public/view-polling.js

@@ -14,10 +14,10 @@
       + ` aria-label="${esc(g.aria)}"${g.w === sel ? ' aria-current="true"' : ''}>${g.label ? `<span>${esc(g.label)}</span>` : ''}</a>`).join('');
     const pins = day.pins.map((p) => `<span class="pin" style="left:${p.left}" title="${esc(p.title)}" aria-hidden="true">▼</span>`).join('');
     const ticks = ['12am', '6am', '12pm', '6pm', '12am'].map((t, i) => `<span style="left:${i * 25}%">${t}</span>`).join('');
-    const legend = ['<span><i style="background:var(--accent)"></i>darker checks more often</span>',
-      day.held && '<span><i style="background:repeating-linear-gradient(135deg,var(--accent) 0 3px,var(--chip) 3px 5px)"></i>pushes held</span>',
+    const legend = ['<span><i style="background:var(--muted)"></i>darker checks more often</span>',
+      day.held && '<span><i style="background:repeating-linear-gradient(135deg,var(--muted) 0 3px,var(--chip) 3px 5px)"></i>pushes held</span>',
       day.wakes && '<span style="color:var(--color-notice)">▼ wake</span>',
-      '<span><i style="background:var(--color-danger);width:2px"></i>now</span>'].filter(Boolean).join('');
+      '<span><i style="background:var(--text);width:2px"></i>now</span>'].filter(Boolean).join('');
     return `<div class="day">${pins}<span class="now" style="left:${day.now}" aria-hidden="true"></span><div class="bar">${segs}</div><div class="ticks" aria-hidden="true">${ticks}</div></div><div class="legend">${legend}</div>`;
   }
 

package/board/public/view-questions.js

@@ -5,6 +5,8 @@
 // open question goes back to the board, where the Sent line shows as a toast (BoardUI.sentNotice). An open question
 // with `urgent: true` in owner.json shows alone first, and its Send follows the same rule for its topic. A question
 // whose options are prototype takes frames each take with ?take= (docs/adr/0048-a-questions-takes-show-inline.md).
+// Each question's eye sends `prototype-request {key?, question, note, choice}` for that question instead of an answer,
+// with its note box as the note and its pick so far as the choice (docs/adr/0126-each-question-has-its-own-prototype-eye.md).
 // fits: each framed take's measured size, kept across repaints and visits so a take redraws at its size at once.
 (globalThis.AppViews ||= {}).questions = ((fits) => ({
   className: 'view-questions',
@@ -16,7 +18,7 @@
 
   create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
     const { $, site } = B;
-    const { esc, choiceLabel, questionCard, takes, linkContext, badge, topicName, topicRow, nextQuestion, sentNotice, fetchJSON, restartNotice } = BoardUI;
+    const { esc, choiceLabel, questionCard, roundChip, takes, linkContext, badge, topicName, topicRow, nextQuestion, sentNotice, fetchJSON, restartNotice } = BoardUI;
     // prototype-switcher.js reads a draft's note and clears the draft once it sends that question's answer.
     const draftKey = (id) => 'qdraft:' + id;
     const getDraft = (id) => { try { return JSON.parse(localStorage.getItem(draftKey(id)) || '{}'); } catch { return {}; } };
@@ -52,13 +54,14 @@
       return `<div class="topics" role="group" aria-label="Topics">${list.map((t) =>
         `<button data-topic="${esc(t.id)}" aria-pressed="${t.id === topicId}" title="${esc(t.title)}">${esc(topicName(t))}<span class="n">${t.state === 'resolved' ? 'resolved' : t.open}</span></button>`).join('')}</div>`;
     }
-    const topicHead = (t) => t ? `<div class="topichead muted small">${esc(t.title)}${t.summary ? ` · ${esc(t.summary)}` : ''}</div>` : '';
+    const topicHead = (t) => t ? `<div class="topichead muted small"><span>${esc(t.title)}${t.summary ? ` · ${esc(t.summary)}` : ''}</span>${roundChip(t.round)}</div>` : '';
 
     // Only questions changed here since their last answer, or with files attached, are sent.
     const filesOf = (q) => BoardAttach.files('q:' + q.id, site.root);
     const uploading = (qs) => qs.some((q) => BoardAttach.busy('q:' + q.id, site.root));
     function pending(qs) {
       return qs.filter((q) => {
+        if (q.state === 'requested') return false;
         const d = getDraft(q.id);
         if (filesOf(q).length) return true;
         if (!('choice' in d) && !d.note) return false;
@@ -199,7 +202,7 @@
     function waitingTopics() {
       const list = topicRow(topics, topicId).waiting;
       return list.length ? `<details class="done"><summary>Waiting on Claude · ${list.length}</summary>${list.map((t) =>
-        `<div class="trow"><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button><span class="muted small">${t.answered ? 'answered' : 'Claude replied'}</span></div>`).join('')}</details>` : '';
+        `<div class="trow"><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button><span class="muted small">${t.requested ? 'prototype requested' : t.answered ? 'answered' : 'Claude replied'}</span></div>`).join('')}</details>` : '';
     }
 
     function resolvedTopics() {
@@ -208,6 +211,20 @@
         `<div><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button></div>`).join('')}</details>` : '';
     }
 
+    async function askPrototype(q) {
+      const st = $('#qstatus');
+      const key = q.topic?.startsWith('item:') ? q.topic.slice(5) : null;
+      st.textContent = 'Sending…';
+      const d = getDraft(q.id);
+      const last = q.answers[q.answers.length - 1];
+      try { await site.send('prototype-request', { ...(key ? { key } : {}), question: q.id, note: (d.note || '').trim(), choice: d.choice ?? (last ? last.choice : null) }); }
+      catch { st.textContent = 'Could not send. Is the host awake?'; return; }
+      setDraft(q.id, {});
+      sentLine = 'Prototype please.';
+      await loading;
+      if (await load(false)) { shown = sigNow(); render(); }
+    }
+
     function updateBar() {
       const qs = visible();
       const n = pending(qs).length;
@@ -226,7 +243,7 @@
       topicId = t ? t.id : null;
     }
 
-    const sigNow = () => JSON.stringify([soloId, topicId, topics.map((t) => [t.id, t.state, t.open, t.answered]), visible().map((q) => [q.id, q.state, q.answers.length, q.answers.map((a) => Boolean(a.reply))])]);
+    const sigNow = () => JSON.stringify([soloId, topicId, topics.map((t) => [t.id, t.state, t.open, t.answered, t.round]), visible().map((q) => [q.id, q.state, q.answers.length, q.answers.map((a) => Boolean(a.reply))])]);
     // One load at a time: a load waiting out a board restart would otherwise overlap the next poll's. A load asked for
     // while one runs shares it. → true when the board's answer landed in this view.
     let loading = null;
@@ -290,6 +307,8 @@
 
     B.on(root, 'click', (ev) => {
       if (ev.target.id === 'showAll') { soloId = null; sentLine = ''; shown = ''; render(); return; }
+      const eye = ev.target.closest && ev.target.closest('[data-proto]');
+      if (eye) { if (!eye.disabled) askPrototype(byId(eye.closest('section.q').dataset.q)); return; }
       const b = ev.target.closest && ev.target.closest('[data-topic]');
       if (b) { soloId = null; topicId = b.dataset.topic; sentLine = ''; shown = ''; render(); scrollTo(0, 0); }
     });
@@ -344,24 +363,25 @@
       const from = soloId ? topicOf(soloId)?.id : topicId;
       const pills = topicRow(topics, from).pills;
       const name = topicName(topics.find((t) => t.id === from) || { title: '' });
-      let sent = 0;
-      try {
-        for (const q of list) {
-          const d = getDraft(q.id);
-          const last = q.answers[q.answers.length - 1];
-          const choice = d.choice ?? (last ? last.choice : null);
-          const files = filesOf(q);
-          await site.send('owner-answer', { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: (d.note || '').trim(), ...(files.length ? { files } : {}) });
-          setDraft(q.id, {});
-          BoardAttach.clear('q:' + q.id, site.root);
-          sent++;
-        }
-        const what = `Sent ${sent} answer${sent === 1 ? '' : 's'}${name ? ` to ${name}` : ''}.`;
-        // A load that started before these answers went out would read them as still open.
-        await loading;
-        if (await load(false)) moveOn(from, pills, what);
-        else if (B.alive()) { sentLine = what; $('#qstatus').textContent = what; $('#qstatus').classList.add('sent'); }
-      } catch { st.textContent = sent ? `Sent ${sent} of ${list.length}. Is the host awake?` : 'Could not send. Is the host awake?'; }
+      // docs/adr/0163-send-records-every-ready-answer-in-one-request.md: one request, recorded all or none.
+      const answers = list.map((q) => {
+        const d = getDraft(q.id);
+        const last = q.answers[q.answers.length - 1];
+        const choice = d.choice ?? (last ? last.choice : null);
+        const files = filesOf(q);
+        return { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: (d.note || '').trim(), ...(files.length ? { files } : {}) };
+      });
+      try { await site.send('owner-answers', { answers }); }
+      catch (e) { st.textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; return; }
+      for (const q of list) {
+        setDraft(q.id, {});
+        BoardAttach.clear('q:' + q.id, site.root);
+      }
+      const what = `Sent ${list.length} answer${list.length === 1 ? '' : 's'}${name ? ` to ${name}` : ''}.`;
+      // A load that started before these answers went out would read them as still open.
+      await loading;
+      if (await load(false)) moveOn(from, pills, what);
+      else if (B.alive()) { sentLine = what; $('#qstatus').textContent = what; $('#qstatus').classList.add('sent'); }
     });
     // Each composer painted raises a bubbling attach-change (attach.js).
     B.on(root, 'attach-change', updateBar);