@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/view-frame.js

@@ -0,0 +1,93 @@
+// 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
+// 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
+// and in the browser's history; each load hands its URL and title to the shell. A tap in the frame on a link to any
+// other view, the page's own back arrow included, goes to the shell.
+// ctx, from shell.js: {view, siteTitle, boards() → board routes, open(href) shows a URL in the shell or loads it,
+// toggleSidebar(), keydown(e) and pointerdown(e) for switch mode, loaded(url, title) after each load, up() → true when
+// the shown page is in the page tree and the router took it up a level (router.js)}.
+(function () {
+  // sidebar.js's rail.
+  const RAIL = '(min-width: 900px)';
+  const LOGO_CSS = '<style id="hub-frame-logo">html.hub-rail body > header.top a.hub { display: none; }</style>';
+  const alone = (url) => {
+    const u = new URL(url, location.href);
+    u.searchParams.set('alone', '1');
+    return u.pathname + u.search + u.hash;
+  };
+
+  (globalThis.AppViews ||= {}).frame = {
+    className: 'view-frame',
+    title: (view, { siteTitle }) => siteTitle,
+    markup: (view, { siteTitle }) => {
+      const { esc, header, LINK_ARROW } = BoardUI;
+      const open = `<nav class="nav"><a class="alone" href="${esc(alone(view.url))}" target="_blank" rel="noopener">Open alone ${LINK_ARROW}</a></nav>`;
+      return `${header({ lead: 'logo', title: siteTitle, logoSrc: '/_hub/kickflip.png', controls: false, trail: open })}
+<iframe class="frame-page" src="${esc(view.url)}" title="${esc(siteTitle)}"></iframe>`;
+    },
+
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const frame = B.$('iframe.frame-page');
+      const heading = B.$(':scope > .top h1');
+      const openAlone = B.$(':scope > .top a.alone');
+      const rail = matchMedia(RAIL);
+      let shown = null;
+      const syncLogo = () => shown?.documentElement.classList.toggle('hub-rail', rail.matches && !document.documentElement.classList.contains('sb-collapsed'));
+      B.on(rail, 'change', syncLogo);
+      const collapse = new MutationObserver(syncLogo);
+      collapse.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+      B.atUnmount(() => collapse.disconnect());
+
+      function tap(e, win) {
+        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (e.target.closest?.('body > header.top a.hub')) { e.preventDefault(); ctx.toggleSidebar(); return; }
+        const a = e.target.closest?.('a[href]');
+        if (!a || a.hasAttribute('download') || !['', '_self', '_top', '_parent'].includes(a.target)) return;
+        const view = AppRouter.viewOf(a.href, { boards: ctx.boards() });
+        if (!view) return;
+        const to = new URL(a.href);
+        if (to.pathname === win.location.pathname && to.search === win.location.search && to.hash) return;
+        // The page's own back arrow (ui-page-header.js) already went back when a page before it is in this frame.
+        const back = a.classList.contains('back') && Boolean(a.closest('header.top'));
+        if (!back && view.kind === 'frame' && (a.target || '_self') === '_self') return;
+        e.preventDefault();
+        if (back && BoardUI.backStep({ pushed: history.state?.pushed === true, href: location.href, idx: history.state?.idx }) === 'back') history.back();
+        else ctx.open(a.href);
+      }
+      // A prototype's back arrow goes up to Waiting on you whatever its own backHref says, so the shell takes it before
+      // the page's own header script (ui-page-header.js wireBack) can.
+      function upTap(e) {
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || !e.target.closest?.('header.top a.back') || !ctx.up?.()) return;
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      B.on(frame, 'load', () => {
+        let win = null;
+        let doc = null;
+        try {
+          win = frame.contentWindow;
+          doc = win.document;
+          if (win.location.href === 'about:blank') return;
+        } catch { return; /* another origin: the page is its own */ }
+        const title = doc.title || ctx.siteTitle;
+        heading.textContent = title;
+        frame.title = title;
+        const url = win.location.pathname + win.location.search + win.location.hash;
+        openAlone.href = alone(url);
+        root.classList.toggle('own-header', Boolean(doc.querySelector('body > header.top')));
+        if (!doc.getElementById('hub-frame-logo')) doc.head?.insertAdjacentHTML('beforeend', LOGO_CSS);
+        shown = doc;
+        syncLogo();
+        B.on(win, 'click', upTap, true);
+        B.on(doc, 'click', (e) => tap(e, win));
+        // Switch mode (sidebar.js) answers keys and clicks in the frame as it does the shell's own.
+        if (ctx.keydown) B.on(doc, 'keydown', ctx.keydown, true);
+        if (ctx.pointerdown) B.on(doc, 'pointerdown', ctx.pointerdown, true);
+        ctx.loaded(url, title);
+      });
+    }),
+  };
+})();

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

@@ -0,0 +1,266 @@
+// 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.
+(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.
+  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())}`;
+  };
+  function customBounds(input, reset = false) {
+    const now = Date.now();
+    input.min = localInput(new Date(now + 60_000));
+    input.max = localInput(new Date(now + 30 * 86_400_000));
+    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 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' });
+    return `${onRow}\n${snoozeRow(d)}\n${weekendRow}`;
+  }
+
+  const sections = [['notifications', 'Notifications'], ['polling', 'Polling'], ['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;
+  };
+  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('')}
+<dialog class="settings-modal hub-modal" id="hubSettingsModal" aria-labelledby="hubSettingsTitle"><div class="settings-head"><div><h2 id="hubSettingsTitle" tabindex="-1"></h2><p class="muted small">Hub settings</p></div><button type="button" class="ghost" data-settings-dismiss aria-label="Close hub settings">✕</button></div><div class="set settings-body"><div class="hs-flash"></div><div class="setting-content"></div></div><div class="settings-footer"><button type="button" data-settings-dismiss>Done</button></div></dialog>`;
+
+  globalThis.HubSettings = {
+    markup,
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const top = B.$('.hs-flash');
+      const modal = B.$('#hubSettingsModal');
+      const content = B.$('.setting-content');
+      let active = null;
+      let settingsURL = '/_hub/';
+      let returnFocus = null;
+      let unfitModal = null;
+      let polling = null;
+      let flash = null;
+      let rules = null;
+      let rulesJSON = '';
+
+      function paint() {
+        if (!last) return;
+        const { row, tile, deviceRow } = HubUI;
+        top.innerHTML = HubUI.flash(flash);
+        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 === '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;
+        } 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>`;
+        }
+        B.$('.settings-body').scrollTop = scrollTop;
+        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,
+          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',
+        };
+        for (const [id] of sections) B.$(`[data-summary="${id}"]`).textContent = summaries[id];
+        if (active !== 'rules') return;
+        const rulesBox = B.$('#hubRules');
+        const json = JSON.stringify(last.rules);
+        if (!rules) {
+          rules = RulesEditor.mount(rulesBox, {
+            rules: last.rules, buttons: { primary: 'btn', quiet: 'btn quiet', icon: 'btn quiet' },
+            empty: 'No rules for every board yet.', placeholder: 'Add a rule, such as: Screenshots in every PR that changes a page',
+            async save(body) {
+              const r = await fetch('/_hub/settings/rules', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+              const out = await r.json().catch(() => ({}));
+              if (!r.ok) throw new Error(out.error || 'Could not save. Is the host awake?');
+              const n = out.events.length;
+              last.rules = out.rules;
+              B.$('[data-summary="rules"]').textContent = out.rules.length ? `${out.rules.length} rule${out.rules.length === 1 ? '' : 's'}` : 'None yet';
+              rulesJSON = JSON.stringify(out.rules);
+              return { rules: out.rules, message: !out.changed ? 'Nothing changed.' : `Saved. Sent to ${n} board${n === 1 ? '' : 's'}${out.failed.length ? `; ${out.failed.length} could not take it.` : '.'}` };
+            },
+          });
+          rulesJSON = json;
+        } else if (json !== rulesJSON && !rulesBox.hasAttribute('data-dirty')) {
+          rules.set(last.rules);
+          rulesJSON = json;
+        }
+      }
+
+      // hub-kit.js device() titles its row 'This device' only where this device can take pushes.
+      function deviceSummary() {
+        const d = device.state('');
+        if (!d) return '';
+        if (d.title !== 'This device') return d.title;
+        return d.sub?.startsWith('On') ? 'This device on' : 'This device off';
+      }
+
+      function closeModal(restore = true) {
+        polling?.unmount(); polling = null;
+        unfitModal?.(); unfitModal = null;
+        modal.close();
+        content.innerHTML = '';
+        rules = null;
+        active = null;
+        if (restore && returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
+      }
+      // Also used by shell.js for legacy links, pushes, back and forward. Replacing the URL keeps Hub's history.
+      B.openSettings = async (view, opener) => {
+        const id = sectionOf(view?.hash);
+        if (active && id !== active && modal.querySelector('[data-dirty]')) {
+          if (!(await BoardDialogs.confirm('Leave without saving? Your unsaved edits here will be lost.'))) return false;
+          if (!B.alive()) return false;
+        }
+        if (id !== active) {
+          closeModal(!id);
+          active = id;
+          if (id) {
+            returnFocus = opener || B.$(`#${id}`);
+            B.$('#hubSettingsTitle').textContent = sections.find(([section]) => section === id)[1];
+            content.innerHTML = id === 'rules' ? '<div id="hubRules" class="rules-box"></div>' : '<p class="note">Loading…</p>';
+            flash = null;
+            paint();
+            unfitModal = BoardDialogs.fitSheet(modal);
+            ctx.closeSidebar?.();
+            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 } : {}) });
+        history.replaceState(history.state, '', settingsURL);
+        return true;
+      };
+      const dismiss = () => 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]');
+        if (opener) { B.openSettings({ hash: `#${opener.dataset.settingsOpen}` }, opener); return; }
+        if (e.target.closest?.('[data-settings-dismiss]')) { dismiss(); return; }
+        if (e.target === modal) {
+          const r = modal.getBoundingClientRect();
+          if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dismiss();
+        }
+      });
+      B.on(window, 'hashchange', async () => {
+        if (!(await B.openSettings(AppRouter.viewOf(location.href))) && B.alive()) history.replaceState(history.state, '', settingsURL);
+      });
+      let reopening = null;
+      B.atUnmount(() => closeModal(false));
+      const device = HubKit.device(B, { paint, changed: () => ctx.sidebarChanged?.() });
+      device.ready.then(() => { if (B.alive()) paint(); });
+      let openPicker = null;
+      B.on(root, 'click', (e) => {
+        const input = e.target.closest?.('[data-snooze-at]');
+        if (!input) return;
+        openPicker = input;
+        customBounds(input, input.value === input.defaultValue);
+        try { input.showPicker(); } catch { /* iOS opens its wheel on the tap itself. */ }
+      });
+      // 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]');
+        if (!input) return;
+        openPicker = null;
+        input.value = input.defaultValue;
+      });
+      // Closing an opened picker accepts its suggested time; an unchanged field reached by Tab does nothing.
+      const saveCustom = (input) => {
+        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.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);
+      });
+      B.on(root, 'focusout', (e) => {
+        if (e.target.matches?.('[data-snooze-at]')) saveCustom(e.target);
+      });
+      B.on(root, 'click', async (e) => {
+        const button = e.target.closest?.('[data-reopen]');
+        if (!button || reopening) return;
+        reopening = button.dataset.reopen;
+        flash = null;
+        paint();
+        try {
+          const r = await fetch('/_hub/reopen-board', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ route: reopening }) });
+          const out = await r.json();
+          if (!r.ok) throw new Error(out.error || 'Could not reopen board.');
+          last.closed = (last.closed || []).filter((b) => b.route !== out.route);
+          ctx.sidebarChanged?.();
+          flash = { text: 'Board reopened. Its recorded session is resuming.' };
+        } catch (error) { flash = { text: error.message || 'Could not reopen board. Is the host awake?', error: true }; }
+        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;
+        if (on.checked || await BoardDialogs.confirm(on.dataset.confirm)) on.form.requestSubmit();
+        else on.checked = true;
+      });
+      const forms = HubKit.forms(B, {
+        accepts: (action) => action !== '/_hub/push/flush' && action !== '/_hub/settings/polling',
+        answer(out) {
+          last = out;
+          flash = null;
+          paint();
+          ctx.sidebarChanged?.();
+        },
+        fail(message) {
+          flash = { text: message, error: true };
+          paint();
+        },
+      });
+      B.refreshSettings = HubKit.live(B, {
+        url: () => '/_hub/api/settings',
+        paint(d) {
+          if (!d) { if (!last) top.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; return; }
+          last = d;
+          paint();
+        },
+        busy: () => Boolean(reopening) || device.busy() || forms.busy() || Boolean(root.querySelector('dialog[open], [data-dirty], input:focus, textarea:focus')),
+      });
+      paint();
+      B.openSettings(ctx.view);
+    }),
+  };
+})();

package/board/public/view-hub.js

@@ -0,0 +1,99 @@
+// 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.
+// 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.
+  let last = null;
+  const { esc } = HubUI;
+
+  function rememberedHtml(sessions = []) {
+    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 { row, CHEVRON } = HubUI;
+    const site = (s) => {
+      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);
+    };
+    return groups.map((g) => `<h2 class="label">${esc(g.label)}</h2>\n<div class="group">${g.sites.map(site).join('')}</div>\n`).join('');
+  }
+
+  // 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 }) {
+    const { row, tile, nowRow } = HubUI;
+    const usage = HubUI.usageCard(d.usage, d.codex, d.pause);
+    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 })}
+${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>
+<h2 class="label">Polling status</h2>
+<div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</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>`;
+
+  // iOS shows an app badge only in a Home Screen app with notifications allowed; elsewhere this does nothing.
+  function badge(n) {
+    if (!('setAppBadge' in navigator)) return;
+    try { (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch(() => {}); } catch { /* not allowed here */ }
+  }
+
+  (globalThis.AppViews ||= {}).hub = {
+    className: 'hub-view view-hub',
+    title: () => 'Hub',
+    markup: () => `${BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', settingsHref: null })}
+<main class="has-top"><div class="hub-status"></div><section class="hub-settings" aria-labelledby="hubSettingsLabel"><h2 class="label" id="hubSettingsLabel">Hub settings</h2>${HubSettings.markup()}</section><div class="hub-foot"></div></main>`,
+
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const main = B.$('.hub-status');
+      // A change in the Notifications modal can start or end the hold the banner shows.
+      const settings = HubSettings.create(B.$('.hub-settings'), siteRoot, { ...ctx, sidebarChanged: () => { ctx.sidebarChanged?.(); load(); } });
+      settings.mount();
+      B.atUnmount(() => settings.unmount());
+      B.on(B.$('#refresh'), 'click', () => settings.B.refreshSettings?.());
+      let flash = null;
+      B.openSettings = (...args) => settings.B.openSettings(...args);
+      const foot = B.$('.hub-foot');
+      const paint = () => {
+        if (!last) return;
+        main.innerHTML = html(last, { flash, prompts });
+        foot.innerHTML = footer(last);
+      };
+      const prompts = PromptAnswers.wire(B, {
+        list: () => last?.prompts || [],
+        paint,
+        notify(text) { flash = { text, error: true }; paint(); },
+        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')),
+        answer(out, action) {
+          if (['/_hub/settings/codex', '/_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?.(); }
+          ctx.sidebarChanged?.();
+        },
+        fail(message) { flash = { text: message, error: true }; paint(); },
+      });
+      const load = HubKit.live(B, {
+        url: () => '/_hub/api/hub',
+        paint(d) {
+          if (!d) { if (!last) main.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; return; }
+          last = d;
+          paint();
+          badge(Number(d.total) || 0);
+        },
+        busy: () => forms.busy() || Boolean(root.querySelector('[data-dirty]')) || Boolean(root.querySelector('dialog[open]')),
+      });
+      paint();
+    }),
+  };
+})();

package/board/public/view-notes.js

@@ -0,0 +1,29 @@
+// 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.
+(globalThis.AppViews ||= {}).notes = {
+  className: 'view-notes',
+  title: () => 'Notes',
+  markup: ({ item }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: `./#item=${encodeURIComponent(item || '')}`, controls: false })}
+<main>
+  <article class="plan" id="plan"><p class="muted">Loading the notes…</p></article>
+</main>`,
+
+  create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, async (B) => {
+    const { $, site } = B;
+    const { esc, markdown, linkContext, fetchJSON, restartNotice } = BoardUI;
+    const key = ctx.view.item || '';
+    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(); } });
+      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`;
+      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

@@ -0,0 +1,87 @@
+// HubPolling, the editor inside Hub’s Polling modal (ADR 0075): the day’s windows, overnight hold
+// and daily wakes, in hub/views.mjs pollingView's words from GET /_hub/api/polling. ?w= names the window shown,
+// which a tap on the day bar changes in place. Each change posts to /_hub/settings/polling and saves at once.
+(function () {
+  // The last data, which a return to the view paints at once.
+  let last = null;
+  const { esc } = HubUI;
+  const ACTION = '/_hub/settings/polling';
+  // Each change posts op and w, the shown window's start.
+  const form = (op, w, inner, attrs = '') => `<form method="post" action="${ACTION}"${attrs}>${op ? `<input type="hidden" name="op" value="${op}">` : ''}<input type="hidden" name="w" value="${esc(w)}">${inner}</form>`;
+
+  function dayBar(day, sel) {
+    const segs = day.segments.map((g) => `<a class="seg${g.w === sel ? ' sel' : ''}${g.held ? ' held' : ''}" href="${esc(AppRouter.urlOf({ kind: 'hub', hash: '#polling', w: g.w }))}" data-w="${esc(g.w)}" style="left:${g.left};width:${g.width};--k:${g.shade}"`
+      + ` 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>',
+      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('');
+    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>`;
+  }
+
+  function html(d, sel, flash) {
+    const { row, tile, nowRow } = HubUI;
+    const w = d.windows.find((x) => x.from === sel);
+    const chips = w.every.map((c) => `<button class="btn${c.on ? '' : ' quiet'}" name="value" value="${c.minutes}"${c.on ? ' aria-pressed="true"' : ''}>${esc(c.label)}</button>`).join('');
+    const wakeChips = d.wakes.map((t) => `<button class="btn quiet" name="value" value="${esc(t.value)}" aria-label="Remove the ${esc(t.label)} wake">${esc(t.label)} ✕</button>`).join('');
+    return `${HubUI.flash(flash)}<h2 class="label" style="margin-top:4px">Now</h2>
+<div class="group">${nowRow(d.now)}</div>
+<h2 class="label" id="day">Your day</h2>
+<div class="group"><div class="block">${dayBar(d.day, w.from)}</div></div>
+<h2 class="label" id="window">${esc(w.range)}</h2>
+<div class="group">
+${form('from', w.from, `<label class="body"><span class="text title">Starts</span><input type="time" name="value" value="${esc(w.from)}" required data-autosave></label>`, ' class="row field"')}
+${row({ title: 'Ends', trail: `<span class="val">${esc(w.ends)}</span>` })}
+${form('every', w.from, `<span class="title">Checks every</span><span class="chips">${chips}</span><span class="sub" style="margin-top:6px">${esc(w.checks)}</span>`, ' class="block"')}
+${form('', w.from, `<button class="btn quiet" name="op" value="split"${w.split ? '' : ' disabled'}>Split in two</button><button class="btn quiet danger" name="op" value="remove"${w.remove ? '' : ' disabled'}>Remove</button>`, ' class="block split"')}
+</div>
+<h2 class="label" id="quiet">Quiet times</h2>
+<div class="group">${form('hold', w.from, `${tile('moon', '#6366f1')}<label class="body"><span class="text"><span class="title">Hold pushes overnight</span></span><input type="checkbox" name="value" value="on" class="toggle" data-submit${d.hold.on ? ' checked' : ''}></label>`, ' class="row field"')}</div>
+<h2 class="label" id="wakes">Daily wakes</h2>
+<div class="group"><div class="block"><div class="chips" style="margin-top:0">${wakeChips ? form('wake-remove', w.from, wakeChips) : ''}${form('wake-add', w.from, '<input type="time" name="value" required aria-label="New wake time"><button class="btn quiet">+ Add</button>', ' class="field"')}</div></div></div>`;
+  }
+
+  globalThis.HubPolling = {
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const main = root;
+      let sel = ctx.view?.w || null;
+      let flash = null;
+      const shown = () => (last.windows.some((x) => x.from === sel) ? sel : last.select);
+      const paint = () => { if (last) main.innerHTML = html(last, shown(), flash); };
+      // The shown window lives in the URL, so a reload or a shared link shows it too.
+      const select = (w) => {
+        sel = w;
+        history.replaceState(history.state, '', AppRouter.urlOf({ kind: 'hub', hash: '#polling', w }));
+        paint();
+      };
+      B.selectWindow = select;
+      B.on(root, 'click', (e) => {
+        const seg = e.target.closest?.('a.seg[data-w]');
+        if (!seg || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        e.preventDefault();
+        select(seg.dataset.w);
+      });
+      const forms = HubKit.forms(B, {
+        answer(out, action) {
+          if (action === ACTION) { last = out; flash = null; select(out.select); }
+          else { flash = { text: out.message, error: !out.ok }; load(); }
+          ctx.changed?.();
+          ctx.sidebarChanged?.();
+        },
+        fail(message) { flash = { text: message, error: true }; paint(); },
+      });
+      const load = HubKit.live(B, {
+        url: () => `/_hub/api/polling${sel ? `?w=${encodeURIComponent(sel)}` : ''}`,
+        paint(d) {
+          if (!d) { if (!last) main.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; return; }
+          last = d;
+          paint();
+        },
+        busy: () => forms.busy() || Boolean(root.querySelector('input:focus')),
+      });
+      paint();
+    }),
+  };
+})();