@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/ui.js

@@ -0,0 +1,247 @@
+// Renderers the board's pages share, and the base the other ui-*.js files add to BoardUI. Each returns an HTML
+// string and touches no DOM or storage: ui.test.mjs runs these files in node:vm, where neither exists. Load this first.
+// fetchJSON is the side pages' one way to read the board's API.
+(function () {
+  const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const record = (records, key) => (Object.hasOwn(records || {}, key) ? records[key] : undefined);
+  const time = (iso) => new Date(iso).toLocaleString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+  const ago = (iso) => {
+    if (!iso) return '';
+    const s = (Date.now() - new Date(iso).getTime()) / 1000;
+    if (s < 60) return 'just now';
+    if (s < 3600) return Math.round(s / 60) + 'm ago';
+    if (s < 86400) return Math.round(s / 3600) + 'h ago';
+    return Math.round(s / 86400) + 'd ago';
+  };
+  const since = (iso) => {
+    const s = (Date.now() - new Date(iso).getTime()) / 1000;
+    return s < 60 ? 'just now' : s < 3600 ? Math.round(s / 60) + ' min ago' : s < 86400 ? Math.round(s / 3600) + ' h ago' : Math.round(s / 86400) + ' d ago';
+  };
+  const clock = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?([AP]M)$/i, (_, m) => ` ${m.toLowerCase()}`);
+  // "ETA about 4:30 pm", with the day when it isn't today.
+  function etaLine(iso, now = new Date()) {
+    const d = new Date(iso);
+    const day = d.toDateString() === now.toDateString() ? '' : `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })}, `;
+    return `ETA about ${day}${clock(d)}`;
+  }
+  // A card's last line: the time only today, with the day before today, and with the year too past 365 days.
+  function cardTime(iso, now = new Date()) {
+    const d = new Date(iso);
+    const at = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    if (d.toDateString() === now.toDateString()) return at;
+    const day = d.toLocaleDateString([], { month: 'numeric', day: 'numeric', ...(now - d > 365 * 86400000 ? { year: 'numeric' } : {}) });
+    return `${day}, ${at}`;
+  }
+  const replyBody = (reply) => reply.html ?? esc(JSON.stringify(reply.json));
+
+  // Attachments are uploads from POST /api/upload: {name, url, path, type, size}. Only uploads/ URLs become links.
+  const uploadUrl = (f) => (/^uploads\/[\w.-]+$/.test(f.url || '') ? f.url : null);
+  const isImage = (f) => /^image\//.test(f.type || '');
+  function attachments(files) {
+    if (!files?.length) return '';
+    return `<div class="files">${files.map((f) => {
+      const url = uploadUrl(f);
+      if (!url) return `<span class="file-link">${esc(f.name)}</span>`;
+      return isImage(f)
+        ? `<a class="file-thumb" href="${esc(url)}" target="_blank" rel="noopener" title="${esc(f.name)}"><img src="${esc(url)}" alt="${esc(f.name)}" loading="lazy"></a>`
+        : `<a class="file-link" href="${esc(url)}" target="_blank" rel="noopener">${esc(f.name)}</a>`;
+    }).join('')}</div>`;
+  }
+  const CLIP = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+  const attachButton = () => `<label class="attach" title="Attach files"><input type="file" multiple data-attach aria-label="Attach files">${CLIP}</label>`;
+  const icon = (body, size = 18, attrs = '') => `<svg${attrs} width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+  // An SVG, not ↗: iOS Safari can draw ↗ as an emoji tile even with U+FE0E.
+  const LINK_ARROW = icon('<path d="M7 17 17 7"/><path d="M7 7h10v10"/>', '1em', ' class="link-arrow" style="vertical-align:-0.125em"');
+  const EYE = icon('<path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/>');
+  const TRASH = icon('<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>');
+  const ELLIPSIS = icon('<circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/>');
+  // Asks Claude for throwaway prototypes of one item (docs/adr/0015-prototypes-come-on-request.md).
+  function protoButton(id, state = null, { label = 'Ask for prototypes', disabled = false } = {}) {
+    if (state?.pending) return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" data-proto-pending="${esc(state.pending)}" aria-label="Prototypes are being made" title="Prototypes are being made"${disabled ? ' disabled' : ''}>${ELLIPSIS}</button>`;
+    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}"${disabled ? ' disabled' : ''}>${EYE}</button>`;
+  }
+  // latestBump is the data.id of the newest ask-bump event.
+  const protoNotice = (eventId, latestBump) => (latestBump === eventId
+    ? { text: 'Prototypes are being made.', bump: false }
+    : { text: 'Prototypes are being made. Bump them to the top of the queue?', bump: true });
+  const PENCIL = icon('<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>');
+  const BUMP = icon('<path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/>');
+  // Deletes or edits a pending ask or thread message; app-asks.js handles [data-withdraw] and [data-edit] on one path.
+  const withdrawButton = (id) => `<button class="ghost icon" data-withdraw="${esc(id)}" aria-label="Delete" title="Delete">${TRASH}</button>`;
+  const editButton = (id) => `<button class="ghost icon" data-edit="${esc(id)}" aria-label="Edit" title="Edit">${PENCIL}</button>`;
+  // A waiting ask's bump, which app-asks.js sends as ask-bump {id}, filled orange once bumped and disabled on the latest
+  // bump. A work card's is the same icon: app-cards.js sends card-bump {key} with no confirm, and on a bumped card, where
+  // it is filled orange, card-unbump {key} (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md,
+  // docs/adr/0145-build-on-a-blocked-card-queues-it.md).
+  const bumpButton = (it, top) => `<button class="ghost icon${it.bumpedAt ? ' bumped' : ''}" data-bump="${esc(it.id)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
+  const cardBumpButton = (key, bumped) => (bumped
+    ? `<button class="ghost icon bumped" data-card-bump="${esc(key)}" data-bumped aria-pressed="true" aria-label="Unbump" title="Bumped. Tap to unbump">${BUMP}</button>`
+    : `<button class="ghost icon" data-card-bump="${esc(key)}" aria-pressed="false" aria-label="Bump to top" title="Bump to top">${BUMP}</button>`);
+  const workingLine = '<span class="working-dot" aria-hidden="true"></span>Working on it';
+  // html is markup the caller has escaped; href, title and attrs values are escaped here.
+  const BADGE_TONES = Object.freeze(['quiet', 'normal', 'notice', 'danger', 'ready']);
+  function badge(tone, html, { href, title, button = false, attrs = {} } = {}) {
+    if (!BADGE_TONES.includes(tone)) throw new Error(`unknown badge tone: ${tone}`);
+    const extra = Object.entries({ href, title, ...attrs }).filter(([, v]) => v != null).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
+    const tag = button ? 'button' : href == null ? 'span' : 'a';
+    return `<${tag} class="chip tone-${tone}"${extra}>${html}</${tag}>`;
+  }
+  // A composer's files before sending: {id, name, type, preview, status: uploading|done|error, progress (0–1), error}.
+  const pendingFiles = (list) => list.map((p) => `<span class="pfile ${esc(p.status)}" title="${esc(p.name)}">
+      ${isImage(p) && p.preview ? `<img src="${esc(p.preview)}" alt="${esc(p.name)}">` : `<span class="pname">${esc(p.name)}</span>`}
+      ${p.status === 'uploading' ? `<span class="pbar" role="progressbar" aria-label="Uploading ${esc(p.name)}" aria-valuenow="${Math.round((p.progress || 0) * 100)}"><span style="width:${Math.max(4, Math.round((p.progress || 0) * 100))}%"></span></span>` : ''}
+      ${p.status === 'error' ? `<span class="perr">${esc(p.error || 'Upload failed')}</span>` : ''}
+      <button type="button" class="unattach" data-unattach="${esc(p.id)}" aria-label="Remove ${esc(p.name)}">✕</button></span>`).join('');
+
+  // Replacing innerHTML would close every <details> inside, collapsing what the reader had open, and replace the field
+  // being typed in, dropping its text, cursor and focus, and on iOS the keyboard. So setHTML patches el in place: a
+  // node stays when the new markup has one of its tag at its place, and an element with a key (keyOf) stays wherever
+  // under el it was, so a card that moves lanes keeps its open thread. A textarea keeps what was typed in it, and an
+  // element matching opts.keep stays as it is, for markup another part paints. The focused field keeps its focus when
+  // its card moves (focusSafe). setHTML skips an unchanged rebuild, and reopens each <details> the reader left open,
+  // matched by its owning [data-key] and summary text. Open state is tracked page-wide, so content filled in after a
+  // parent rebuild reopens too.
+  const lastHtml = new WeakMap();
+  const openDetails = new Set();
+  const detailsKey = (d) => `${(d.closest('[data-key]') || {}).dataset?.key || ''}|${(d.querySelector(':scope > summary')?.textContent || '').trim()}`;
+  globalThis.document?.addEventListener('toggle', (ev) => {
+    if (ev.target.tagName !== 'DETAILS') return;
+    if (ev.target.open) openDetails.add(detailsKey(ev.target)); else openDetails.delete(detailsKey(ev.target));
+  }, true);
+  const KEYS = ['id', 'data-thread', 'data-event', 'data-edit-form', 'data-lane', 'data-fold'];
+  function keyOf(n) {
+    if (n.nodeType !== 1) return null;
+    if (n.tagName === 'DETAILS' && n.hasAttribute('data-key')) return `DETAILS|${n.getAttribute('data-key')}`;
+    const a = KEYS.find((k) => n.hasAttribute(k));
+    return a ? `${n.tagName}|${a}=${n.getAttribute(a)}` : null;
+  }
+  function keyedUnder(el, keep) {
+    const keyed = new Map();
+    const walk = (p) => {
+      for (const c of p.children) {
+        const k = keyOf(c);
+        if (k && !keyed.has(k)) keyed.set(k, c);
+        if (!(keep && c.matches(keep))) walk(c);
+      }
+    };
+    walk(el);
+    return keyed;
+  }
+  const holdsFocus = (n) => n.contains(document.activeElement);
+  // insertBefore blurs the node it moves, and on iOS closes the keyboard; moveBefore keeps its focus, but moves only
+  // between connected nodes.
+  function move(parent, n, ref) {
+    if (parent.moveBefore && n.isConnected && parent.isConnected) parent.moveBefore(n, ref);
+    else parent.insertBefore(n, ref);
+  }
+  // Without moveBefore, the focused field's ancestors under el never move: each is patched into the node at the same
+  // depth on the path to the field's nearest keyed ancestor in the new markup, so a card that changes lanes takes over
+  // the old lane's node. → Map from each new markup node on that path to the old node it patches; empty when the
+  // paths' depths or tags differ, and app-core.js keepFocus refocuses the field after the move.
+  function focusSafe(el, next, keyed) {
+    const pins = new Map();
+    const a = document.activeElement;
+    if (el.moveBefore || !a || a === el || !el.contains(a)) return pins;
+    const olds = [];
+    for (let n = a; n !== el; n = n.parentNode) olds.unshift(n);
+    for (let i = olds.length - 1; i >= 0; i--) {
+      const k = keyOf(olds[i]);
+      const found = k && [...next.querySelectorAll('*')].find((d) => keyOf(d) === k);
+      if (!found) continue;
+      const news = [];
+      for (let n = found; n !== next; n = n.parentNode) news.unshift(n);
+      if (news.length !== i + 1 || news.some((n, j) => n.tagName !== olds[j].tagName)) return pins;
+      news.forEach((n, j) => { pins.set(n, olds[j]); keyed.delete(keyOf(olds[j])); });
+      return pins;
+    }
+    return pins;
+  }
+  // ctx: {keyed, keep, pins, pinned}, pinned being the old nodes in pins, which only their own new node takes.
+  function patchNode(old, next, ctx) {
+    if (old.nodeType !== 1) { if (old.nodeValue !== next.nodeValue) old.nodeValue = next.nodeValue; return; }
+    if (ctx.keep && old.matches(ctx.keep)) return;
+    for (const { name } of [...old.attributes]) if (!next.hasAttribute(name)) old.removeAttribute(name);
+    for (const { name, value } of [...next.attributes]) if (old.getAttribute(name) !== value) old.setAttribute(name, value);
+    if (old.tagName !== 'TEXTAREA') patchChildren(old, next, ctx);
+  }
+  function patchChildren(parent, next, ctx) {
+    const { keyed, pins, pinned } = ctx;
+    let cur = parent.firstChild;
+    for (const n of [...next.childNodes]) {
+      const k = keyOf(n);
+      let match = pins.get(n) || null;
+      if (!match && k) {
+        match = keyed.get(k) || null;
+        if (match?.contains(parent)) match = null;
+        if (match) keyed.delete(k);
+      } else if (!match && cur && !keyOf(cur) && !pinned.has(cur) && cur.nodeName === n.nodeName) match = cur;
+      if (!match) {
+        parent.insertBefore(n, cur);
+        if (n.nodeType === 1) {
+          for (const d of n.querySelectorAll('*')) {
+            const dk = n.contains(d) && keyOf(d);
+            const old = dk && keyed.get(dk);
+            if (!old || old.contains(n)) continue;
+            keyed.delete(dk);
+            move(d.parentNode, old, d);
+            d.remove();
+            patchNode(old, d, ctx);
+          }
+        }
+        continue;
+      }
+      if (match === cur) cur = cur.nextSibling;
+      else if (match.parentNode === parent && holdsFocus(match)) {
+        // Moving the node that holds focus would blur it, so the siblings before it leave instead.
+        while (cur !== match) { const after = cur.nextSibling; cur.remove(); cur = after; }
+        cur = match.nextSibling;
+      } else move(parent, match, cur);
+      patchNode(match, n, ctx);
+    }
+    while (cur) { const after = cur.nextSibling; cur.remove(); cur = after; }
+  }
+  function setHTML(el, html, { keep = null } = {}) {
+    if (lastHtml.get(el) === html) return false;
+    if (!el.firstChild) el.innerHTML = html;
+    else {
+      const t = document.createElement('template');
+      t.innerHTML = html;
+      const keyed = keyedUnder(el, keep);
+      const pins = focusSafe(el, t.content, keyed);
+      patchChildren(el, t.content, { keyed, keep, pins, pinned: new Set(pins.values()) });
+    }
+    lastHtml.set(el, html);
+    if (openDetails.size) for (const d of el.querySelectorAll('details:not([open])')) if (openDetails.has(detailsKey(d))) d.open = true;
+    return true;
+  }
+
+  // While a board restarts, the hub answers its own 502 page, and a request can fail outright. fetchJSON waits that out:
+  // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs) and retries with a growing backoff,
+  // then throws once about limit ms have passed. Any other answer resolves {ok, status, body}, a 404's {error} included.
+  const RESTARTING = 'Board restarting…';
+  const restartNotice = () => `<span class="muted small restarting">${RESTARTING}</span>`;
+  async function fetchJSON(url, { onWait = () => {}, limit = 30000, fetch: get = globalThis.fetch, sleep = (ms) => new Promise((r) => setTimeout(r, ms)) } = {}) {
+    let waited = 0;
+    let delay = 500;
+    for (;;) {
+      let failure;
+      try {
+        const r = await get(url, { cache: 'no-store' });
+        const body = await r.text().then((t) => JSON.parse(t)).catch(() => undefined);
+        if (body !== undefined && r.status < 500) return { ok: r.ok, status: r.status, body };
+        failure = new Error(r.status >= 500 ? `the board answered ${r.status}` : 'the board did not answer with JSON');
+      } catch { failure = new Error('Offline. Is the host awake?'); }
+      if (waited >= limit) throw failure;
+      onWait(waited);
+      await sleep(delay);
+      waited += delay;
+      delay = Math.min(delay * 2, 4000);
+    }
+  }
+
+  globalThis.BoardUI = {
+    LINK_ARROW,
+    esc, record, time, ago, since, clock, etaLine, cardTime, replyBody, setHTML, fetchJSON, RESTARTING, restartNotice,
+    attachments, attachButton, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+  };
+})();

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,282 @@
+// HubSettings: summary rows below Hub’s health and status open centred settings modals (ADR 0075), using
+// settingsView's words from GET /_hub/api/settings. Each toggle and snooze posts to /_hub/settings/notifications, and
+// Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key does through linear-key.js; Done waits for
+// 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 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())}`;
+  };
+  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));
+  }
+
+  // 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', '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'], ['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;
+  };
+  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 = '';
+      let linearKey = null;
+
+      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>`;
+        } 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') {
+          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?.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',
+        };
+        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();
+        linearKey?.destroy(); linearKey = null;
+        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 = () => {
+        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]');
+        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-dur-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?.('.dur-choices button') && B.$('[data-dur-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('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-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
+      });
+      B.on(root, 'focusout', (e) => {
+        if (e.target.matches?.('[data-dur-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, '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);
+    }),
+  };
+})();