@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/toasts.js

@@ -0,0 +1,179 @@
+(function () {
+  function create(root) {
+    const stack = document.createElement('div');
+    stack.setAttribute('class', 'toast-stack');
+    stack.setAttribute('aria-label', 'Notifications');
+    root.appendChild(stack);
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+    const enterTime = () => reduced.matches ? 80 : 150;
+    const exitTime = () => reduced.matches ? 100 : 200;
+    let entries = [];
+    let pending = [];
+    let frame = 0;
+    let destroyed = false;
+    const held = (item) => !item.forced && item.holds.size > 0;
+    const opacity = (item) => held(item) || item.phase === 'solid' ? 1
+      : item.phase === 'in' ? 1 - item.remaining / item.fade : item.from * item.remaining / item.fade;
+
+    function layout() {
+      let bottom = 0;
+      for (const item of [...entries].reverse()) {
+        bottom += item.el.getBoundingClientRect().height;
+        item.row.style.transform = `translateY(${-bottom}px)`;
+        bottom += 8;
+      }
+    }
+
+    function draw() {
+      for (const item of entries) item.el.style.opacity = Math.max(0, Math.min(1, opacity(item)));
+    }
+
+    function dismiss(item) {
+      if (!entries.includes(item) || item.forced) return;
+      advance(item, performance.now());
+      item.from = Math.max(0, opacity(item));
+      item.phase = 'out';
+      item.remaining = item.fade = exitTime();
+      item.last = performance.now();
+      item.forced = true;
+      item.holds.clear();
+      draw();
+    }
+
+    function advance(item, now) {
+      if (!held(item)) item.remaining -= Math.max(0, now - item.last);
+      item.last = now;
+      while (item.remaining <= 0) {
+        if (item.phase === 'out') return false;
+        item.phase = item.phase === 'in' ? 'solid' : 'out';
+        item.from = 1;
+        item.fade = exitTime();
+        item.remaining += item.phase === 'solid' ? item.duration : item.fade;
+      }
+      return true;
+    }
+
+    function hold(item, source, on) {
+      if (!entries.includes(item) || item.forced || item.holds.has(source) === on) return;
+      advance(item, performance.now());
+      if (on) {
+        item.holds.add(source);
+        if (item.phase === 'in') { item.phase = 'solid'; item.remaining = item.duration; }
+        if (item.phase === 'out') { item.remaining = item.fade = exitTime(); item.from = 1; }
+      } else item.holds.delete(source);
+      draw();
+    }
+
+    function attach(message) {
+      const row = document.createElement('div');
+      row.setAttribute('class', 'toast-row');
+      row.style.transition = 'none';
+      const el = document.createElement('div');
+      el.setAttribute('class', 'toast');
+      el.setAttribute('role', 'status');
+      el.setAttribute('aria-live', 'polite');
+      el.setAttribute('aria-atomic', 'true');
+      el.setAttribute('tabindex', '0');
+      el.textContent = message.text;
+      row.appendChild(el);
+      const item = { ...message, row, el, phase: 'in', remaining: enterTime(), fade: enterTime(),
+        from: 1, last: performance.now(), holds: new Set(), forced: false, off: [] };
+      const on = (type, fn) => {
+        el.addEventListener(type, fn);
+        item.off.push(() => el.removeEventListener(type, fn));
+      };
+      let touch = null;
+      let suppressClickUntil = 0;
+      on('pointerenter', (e) => { if (e.pointerType === 'mouse') hold(item, 'hover', true); });
+      on('pointerleave', (e) => { if (e.pointerType === 'mouse') hold(item, 'hover', false); });
+      on('pointerdown', (e) => {
+        if (e.pointerType === 'mouse') return;
+        touch = { id: e.pointerId, at: performance.now(), x: e.clientX, y: e.clientY };
+        el.setPointerCapture(e.pointerId);
+        hold(item, 'touch', true);
+      });
+      function release(e) {
+        if (!touch || touch.id !== e.pointerId) return;
+        const wasHold = performance.now() - touch.at > 350 || Math.hypot(e.clientX - touch.x, e.clientY - touch.y) > 10;
+        if (wasHold || e.type !== 'pointerup') suppressClickUntil = performance.now() + 600;
+        touch = null;
+        hold(item, 'touch', false);
+      }
+      on('pointerup', release);
+      on('pointercancel', release);
+      on('lostpointercapture', release);
+      on('contextmenu', (e) => e.preventDefault());
+      on('click', () => { if (performance.now() >= suppressClickUntil) dismiss(item); });
+      on('keydown', (e) => {
+        if (!['Escape', 'Enter', ' '].includes(e.key)) return;
+        e.preventDefault();
+        dismiss(item);
+      });
+      entries.push(item);
+      stack.appendChild(row);
+      observer.observe(el);
+      layout();
+      row.getBoundingClientRect();
+      row.style.transition = '';
+      if (matchMedia('(hover: hover)').matches && el.matches(':hover')) hold(item, 'hover', true);
+    }
+
+    function drain() {
+      while (pending.length && entries.length < 3) attach(pending.shift());
+      // The next arrival waits for eviction's fade so four messages never show together.
+      if (pending.length && entries.length === 3) dismiss(entries[0]);
+    }
+
+    function remove(item) {
+      item.off.forEach((off) => off());
+      observer.unobserve(item.el);
+      item.row.remove();
+    }
+
+    function tick(now) {
+      frame = 0;
+      const expired = entries.filter((item) => !advance(item, now));
+      for (const item of expired) remove(item);
+      if (expired.length) {
+        entries = entries.filter((item) => !expired.includes(item));
+        drain();
+        layout();
+      }
+      draw();
+      if (entries.length) frame = requestAnimationFrame(tick);
+    }
+
+    function toast(text) {
+      if (destroyed || !text.trim()) return;
+      const length = Array.from(text.replace(/\s+/g, ' ').trim()).length;
+      pending.push({ text, duration: length > 100 ? 5000 : 3000 });
+      drain();
+      draw();
+      if (!frame) frame = requestAnimationFrame(tick);
+    }
+
+    function releaseHolds() {
+      const now = performance.now();
+      for (const item of entries) { advance(item, now); item.holds.clear(); }
+      draw();
+    }
+    const visibility = () => { if (document.hidden) releaseHolds(); };
+    window.addEventListener('blur', releaseHolds);
+    document.addEventListener('visibilitychange', visibility);
+    const observer = new ResizeObserver(layout);
+    observer.observe(stack);
+    function destroy() {
+      destroyed = true;
+      cancelAnimationFrame(frame);
+      entries.forEach(remove);
+      observer.disconnect();
+      window.removeEventListener('blur', releaseHolds);
+      document.removeEventListener('visibilitychange', visibility);
+      stack.remove();
+      entries = [];
+      pending = [];
+    }
+    return { toast, destroy };
+  }
+  globalThis.BoardToasts = { create };
+})();

package/board/public/ui-cards.js

@@ -0,0 +1,153 @@
+// Work card renderers: the lines and chips of a card in a lane, on the board page. Needs ui.js and ui-enums.js.
+(function () {
+  const { esc, ago, time, etaLine, workingLine, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, LINK_ARROW } = globalThis.BoardUI;
+  const EXTERNAL = { target: '_blank', rel: 'noopener' };
+  function prChips(it) {
+    const pr = it.pr;
+    if (!pr) return '';
+    const st = pr.state === 'MERGED' ? badge('ready', 'merged') : pr.state === 'CLOSED' ? badge('danger', 'closed') : '';
+    // An open PR's chip ends with its state, marked like the reviewer and CI chips.
+    const open = pr.state === 'OPEN' ? (pr.isDraft ? { tone: 'notice', mark: ' ●', label: 'Draft' } : { tone: 'ready', mark: ' ✓', label: 'Ready for review' }) : { tone: 'normal', mark: '', label: '' };
+    const CI = { pass: { tone: 'ready', mark: '✓' }, fail: { tone: 'danger', mark: '✗' }, pending: { tone: 'notice', mark: '●' } }[pr.checks?.state] || { tone: 'quiet', mark: '?' };
+    const ci = pr.checks && pr.state === 'OPEN' ? badge(CI.tone, `CI ${CI.mark}`, { title: `CI ${pr.checks.state}` }) : '';
+    const repo = (pr.url.match(/github\.com\/[^/]+\/([^/]+)\//) || [])[1] || '';
+    const codex = pr.state === 'OPEN' && pr.codexOpen ? badge('notice', `codex ${esc(pr.codexOpen)}`, { title: `${pr.codexOpen} Codex finding${pr.codexOpen === 1 ? '' : 's'} not answered yet` }) : '';
+    const name = `${repo}#${pr.number}`;
+    const label = open.label ? { title: open.label, attrs: { ...EXTERNAL, 'aria-label': `${name}: ${open.label}` } } : { attrs: EXTERNAL };
+    return `${badge(open.tone, `${esc(name)}${open.mark}`, { href: pr.url, ...label })}${st}${ci}${codex}`;
+  }
+  const linearChips = (it) => (it.linear || []).map((l) => badge('normal', esc(l.id), { href: l.url, title: `${l.id} in Linear`, attrs: EXTERNAL })).join('');
+  const ticketChip = (it) => !it.ticket ? '' : !it.ticket.url ? badge('quiet', esc(it.ticket.id), { title: `${it.ticket.id} · not from this board’s ticket source` }) : badge(it.ticket.source === 'internal' ? 'quiet' : 'normal', esc(it.ticket.id), { href: it.ticket.url, title: `${it.ticket.id}${it.ticket.source === 'internal' ? ' · this board’s own ticket' : it.ticket.source === 'github' ? ' on GitHub' : ' in Linear'}`, attrs: it.ticket.source === 'internal' ? {} : EXTERNAL });
+  const REVIEW = {
+    approved: { tone: 'ready', mark: '✓', label: 'approved' },
+    changes: { tone: 'danger', mark: '✗', label: 'asked for changes' },
+    sent: { tone: 'notice', mark: '●', label: 'sent, not approved yet' },
+    unsent: { tone: 'quiet', mark: '✗', label: 'not sent yet' },
+  };
+  const reviewAge = (rv) => {
+    const days = rv?.since ? Math.floor((Date.now() - new Date(rv.since).getTime()) / 86400000) : 0;
+    return days >= 1 ? ` ${days}d` : '';
+  };
+  function reviewChips(it) {
+    if (!it.pr || it.pr.state !== 'OPEN') return '';
+    return (it.reviewers || []).map((r) => {
+      const rv = globalThis.BoardUI.record(it.review, r);
+      const s = REVIEW[rv?.state || 'unsent'];
+      return badge(s.tone, `${esc(r[0])} ${s.mark}${reviewAge(rv)}`, { title: `${r}: ${s.label}` });
+    }).join('');
+  }
+  const pendingQuestions = (it) => (it.questions && it.questions.state !== 'resolved' ? it.questions.open + it.questions.answered + it.questions.replied : 0);
+  // docs/adr/0045-the-lane-follows-who-acts-next.md
+  function actionChip(it) {
+    if (!it.action) return '';
+    const external = it.action.kind === ACTION_KIND.ready ? EXTERNAL : {};
+    return badge('notice', 'Action needed', { href: it.action.url, title: it.action.label, attrs: { ...external, 'aria-label': `Action needed: ${it.action.label}` } });
+  }
+  const tryWords = (kind) => kind === 'app' ? {
+    go: 'Build', going: 'Building…', done: 'Install', failed: 'Build failed',
+    none: 'No changes to build: this card’s branch matches main.',
+    current: 'Nothing new to build: Install already has this card’s latest push.',
+    busy: 'Building now. The badge turns back into Install when the new build is ready.',
+    autoSub: 'On: the hub builds each card after each push. Off: a card waits for your Build. Main builds again after every merge either way.',
+    saved: (on) => on ? 'Saved. Each push builds its card.' : 'Saved. Cards wait for your Build.',
+  } : {
+    go: 'Serve', going: 'Serving…', done: 'Visit', failed: 'Serve failed',
+    none: 'No changes to serve: this card’s branch matches main.',
+    current: 'Nothing new to serve: Visit already shows this card’s latest push.',
+    busy: 'Serving now. The badge turns back into Visit when the new server is up.',
+    autoSub: 'On: the hub serves each card after each push. Off: a card waits for your Serve. Main serves again after every merge either way.',
+    saved: (on) => on ? 'Saved. Each push serves its card.' : 'Saved. Cards wait for your Serve.',
+  };
+  const spinner = '<span class="try-spin" aria-hidden="true"></span>';
+  function tryOf(it) {
+    if (it.lane === 'done') return null;
+    const t = it.try || (it.install ? { kind: 'app', state: 'ready', stale: it.install.older, sha: it.install.sha, url: it.install.url } : null);
+    return it.builder?.kind === BUILDER_KIND.install ? { ...t, kind: t?.kind || 'app', state: 'running' } : t;
+  }
+  function installState(it) {
+    const t = tryOf(it);
+    if (!t) return null;
+    const words = tryWords(t.kind);
+    if (t.state === 'running') return { tone: 'notice', html: spinner + esc(words.going), attrs: { role: 'status' } };
+    if (t.state === 'failed') return { tone: 'danger', html: `${esc(words.failed)} ${LINK_ARROW}`, href: `#item=${encodeURIComponent(it.key)}`,
+      title: 'The build script stopped with an error. Tap for its log in the card’s thread.', attrs: { 'data-try-log': it.key } };
+    if (t.state !== 'ready' || !t.url) return null;
+    return { tone: t.stale ? 'quiet' : 'ready', html: `${esc(words.done)}${t.stale ? ' (stale)' : ''} ${LINK_ARROW}`, href: t.url,
+      title: t.sha ? `Built from ${t.sha}${t.stale ? '; the branch has newer commits' : ''}` : null, attrs: t.kind === 'web' ? EXTERNAL : {} };
+  }
+  function installChip(it) {
+    const s = installState(it);
+    return s ? badge(s.tone, s.html, { href: s.href, title: s.title, attrs: s.attrs }) : '';
+  }
+  function installButton(it) {
+    const s = installState(it);
+    if (!s) return '';
+    const attrs = Object.entries({ href: s.href, title: s.title, ...s.attrs }).filter(([, v]) => v != null)
+      .map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
+    const tag = s.href ? 'a' : 'span';
+    return `<${tag} class="install tone-${s.tone}"${attrs}>${s.html}</${tag}>`;
+  }
+  function tryButton(it) {
+    const t = tryOf(it);
+    if (it.kind !== 'work' || !t?.script) return '';
+    const words = tryWords(t.kind);
+    const reason = !t.changes ? words.none : t.state === 'running' ? words.busy : t.state === 'ready' && !t.stale ? words.current : '';
+    return `<button type="button" data-try="${esc(it.key)}"${reason ? ` aria-disabled="true" title="${esc(reason)}" data-tip="${esc(reason)}"` : ''}>${t.state === 'failed' && !reason ? 'Retry' : words.go}</button>`;
+  }
+  const BRANCH = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 4-6 3-11 6"/></svg>';
+  function mainBar(main) {
+    if (!main) return '';
+    const words = tryWords(main.kind);
+    const chip = main.state === 'running' ? badge('notice', spinner + esc(words.going), { attrs: { role: 'status' } })
+      : main.state === 'failed' ? badge('danger', esc(words.failed), { title: 'The build script stopped with an error. Its log is data/try/main.log in the board’s folder.' })
+      : main.state === 'ready' && main.url ? badge('ready', `${words.done} ${LINK_ARROW}`, { href: main.url, attrs: main.kind === 'web' ? EXTERNAL : {} }) : '';
+    return `<div class="tb-main" role="region" aria-label="Main’s version">${BRANCH}<div class="tb-main-text">${esc(main.slug)} · <strong>${esc(main.branch)}</strong>@<code>${esc(main.sha)}</code> · ${esc(ago(main.at))}</div><div class="meta">${chip}</div></div>`;
+  }
+  // The open card's Merge, while the board's auto-merge is off: it confirms, then sends card-merge, and reads "Merging…"
+  // while it is sent or waits on the session (docs/adr/0052-auto-merge-is-a-board-setting-off-by-default.md).
+  function mergeButton(it, sending = false) {
+    if (it?.action?.kind !== ACTION_KIND.merge && !it?.merging) return '';
+    const merging = sending || it.merging;
+    return `<button class="${it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${merging ? ' disabled' : ''}>${merging ? 'Merging…' : 'Merge'}</button>`;
+  }
+  const builderLine = (b) => [b.progress || 'Building', b.at && ago(b.at)].filter(Boolean).join(' · ');
+  const stalledChip = (it) => it.lane !== 'done' && it.builder?.stalled ? badge('danger', 'Stalled', {
+    button: true, title: 'No recent progress. Nudge Claude to check this builder',
+    attrs: { type: 'button', 'data-confirm': 'nudge', 'data-key': it.key },
+  }) : '';
+  const unreadCount = (othersAt, seenAt) => (seenAt ? (othersAt || []).filter((t) => String(t) > seenAt).length : 0);
+  const unreadChip = (n) => {
+    if (!n) return '';
+    const label = `${n} unread message${n === 1 ? '' : 's'}`;
+    return `<span class="chip unread" title="${label}" aria-label="${label}">${n} new</span>`;
+  };
+  // A New card's bump, edit and delete, and its line from its ask state (domain.mjs askItem;
+  // docs/adr/0047-the-plus-makes-a-new-card.md). top is whether it is the latest bump.
+  const askActions = (it, top) => `<div class="ask-actions">${bumpButton(it, top)}${it.ask.canEdit ? editButton(it.id) : ''}${withdrawButton(it.id)}</div>`;
+  const cardActions = (it, top) => (it.isNew ? askActions(it, top) : it.bumpable ? `<div class="ask-actions">${cardBumpButton(it.key, top)}</div>` : '');
+  const ASK_STATE = { waiting: 'Waiting', working: `<span class="working">${workingLine}</span>` };
+  const askLine = (ask) => `${ask.from ? `Moved from ${esc(ask.from)} · ` : ''}${esc(time(ask.askedAt))} · ${ask.edited ? 'Edited · ' : ''}${ASK_STATE[ask.state] || ''}`;
+  function workLines(it, { unread = 0, top = false } = {}) {
+    const ids = it.kind === 'ask' ? askChip(it) : it.ticket ? ticketChip(it) : it.ticketSource === 'linear' ? linearChips(it) : it.internal ? badge('quiet', esc(it.ref), { title: 'Work on this site, not a product PR' }) : linearChips(it);
+    const blocked = (it.blockedBy || []).map((d) => badge('notice', `blocked by ${esc(d.ref)}`, { href: `#item=${encodeURIComponent(d.key)}` })).join('');
+    const ready = !blocked && !it.action && it.deps?.length && it.lane === 'todo' ? badge('ready', 'ready to start') : '';
+    const chips = `${it.todoAge ? badge('quiet', esc(it.todoAge)) : ''}${stalledChip(it)}${unreadChip(unread)}${actionChip(it)}${it.kind === 'followup' ? badge('quiet', 'follow-up') : ''}${prChips(it)}${reviewChips(it)}${it.held ? badge('quiet', 'held') : ''}${it.risky ? badge('notice', 'risky') : ''}${it.bumpedAt ? badge('normal', 'bumped') : ''}${ready}${installChip(it)}`;
+    const status = it.isNew && !it.action ? `<div class="line3 sub">${askLine(it.ask)}</div>`
+      : it.waitsOn === 'checking' ? '<div class="line3 sub agent"><span class="working-dot" aria-hidden="true"></span>Orchestrator review</div>'
+      : it.builder ? `<div class="line3 sub agent"><span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}</div>`
+      : it.working ? `<div class="line3 sub agent">${workingLine}</div>`
+      : it.next ? `<div class="line3 sub next">Next: ${esc(it.next)}</div>` : '';
+    const eta = it.eta && it.builder ? `<div class="line3 sub eta">${esc(etaLine(it.eta))}</div>` : '';
+    return `${cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${esc(it.title)}</div>
+      ${status}${eta}
+      ${chips ? `<div class="line2 meta">${chips}</div>` : ''}
+      ${blocked ? `<div class="line5 meta blocked">${blocked}</div>` : ''}`;
+  }
+  const askChip = (it) => badge('normal', it.isNew ? 'New' : 'Task');
+  function planButton(items) {
+    const keys = items.filter((i) => i.kind === 'followup').map((i) => i.key);
+    return keys.length > 1 ? `<button class="link" data-plan="${esc(keys.join(' '))}">Plan a wave from these ${keys.length} follow-ups →</button>` : '';
+  }
+
+  Object.assign(globalThis.BoardUI, { prChips, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionChip, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, builderLine, unreadCount, workLines, askChip, askActions, askLine, planButton });
+})();

package/board/public/ui-enums.js

@@ -0,0 +1,10 @@
+// A card's button names, which board/domain.mjs sets as its actionButton and resolvedBy, the kinds of its owner
+// action, and the builder kinds the page reads. Each value is its name, since cards carry it in the board's JSON.
+// Needs nothing else: board/domain.mjs runs
+// this file in a vm context (docs/adr/0059-an-unstarted-card-waits-on-its-questions-in-todo.md).
+(function () {
+  const BUTTON = Object.freeze({ grill: 'grill', openQuestions: 'openQuestions', markDone: 'markDone', github: 'github', merge: 'merge' });
+  const ACTION_KIND = Object.freeze({ pick: 'pick', questions: 'questions', ready: 'ready', steps: 'steps', merge: 'merge', done: 'done' });
+  const BUILDER_KIND = Object.freeze({ install: 'install' });
+  Object.assign(globalThis.BoardUI ||= {}, { BUTTON, ACTION_KIND, BUILDER_KIND });
+})();

package/board/public/ui-header.js

@@ -0,0 +1,84 @@
+// The board header's time and the In Review header's GitHub line, with when a refresh asks for a check. Needs ui.js.
+(function () {
+  const { since, esc } = globalThis.BoardUI;
+  // The header's short time beside refresh: `at` is when the page last got fresh data (nextFresh), and watcher is
+  // /api/board's checks.watcher (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md). link is 'online',
+  // 'offline' (the last board load failed) or 'reconnecting' (a refresh tap is retrying it).
+  const statusLine = (at, { link = 'online', watcher, pause } = {}) => (pause?.state === 'paused' ? `<span class="late">Paused until ${esc(BoardUI.usageClock(pause.resets_at))}</span>`
+    : link === 'offline' ? `<span class="link-state offline" title="Offline: can't reach the host">${at ? shortSince(at) : 'offline'}</span>`
+    : link === 'reconnecting' ? '<span class="link-state">Reconnecting…</span>'
+    : watcher === 'stopped' ? '<span class="claude late" title="Claude not listening">not listening</span>'
+    : at ? `<span class="fresh" title="Updated ${since(at)}: the last change from the host, or your last refresh">${shortSince(at)}</span>` : '');
+  // What the page shows, for telling whether a change signal brought anything new; generatedAt changes on every load.
+  const freshSig = (board, threads, openKeys) => JSON.stringify([{ ...board, generatedAt: null }, [...openKeys].sort().map((k) => [k, threads.get(k) ?? null])]);
+  // fresh is {at, sig}: the header's time and what the page showed then. via is 'refresh' (a ↻ tap), 'signal' (the
+  // stream's change signal) or 'poll' (any other load). A manual refresh always moves the time, a change signal only when it brought
+  // something the time hasn't counted, a poll never, and any load moves it while none has landed (sig null)
+  // (docs/adr/0031-the-board-reloads-on-a-change-signal.md).
+  const nextFresh = (fresh, { via, at, sig }) => (!fresh?.sig || via === 'refresh' || (via === 'signal' && sig !== fresh.sig) ? { at, sig } : fresh);
+  const shortSince = (iso) => {
+    const s = (Date.now() - Date.parse(iso)) / 1000;
+    return s < 60 ? 'now' : s < 3600 ? Math.round(s / 60) + ' min' : s < 86400 ? Math.round(s / 3600) + ' h' : Math.round(s / 86400) + ' d';
+  };
+  // GitHub's logo guidelines forbid altering the mark, so it stays filled rather than a line icon (docs/adr/0013-icons-are-sf-symbol-style-line-icons.md).
+  const GITHUB_MARK = '<svg class="gh-mark" width="13" height="13" viewBox="0 0 16 16" fill="currentColor" role="img" aria-label="GitHub"><title>GitHub</title><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>';
+  // The GitHub mark opens the Hub links sheet, with a red dot while any link is broken past its grace period
+  // (docs/adr/0046-hub-links-turn-red-only-after-a-grace-period.md). links is /api/board's (hub/boards.mjs linksOf), null
+  // when the hub doesn't list this board. A link without state, from a board server still running older code, reads from ok.
+  const linkState = (l) => l.state || (l.ok ? 'ok' : 'broken');
+  const brokenLinks = (links) => (links || []).filter((l) => linkState(l) === 'broken');
+  const linksMark = (links) => {
+    const broken = brokenLinks(links).length;
+    const label = `Hub links${broken ? `: ${broken} not working` : ''}`;
+    return `<button class="ghost gh-links" type="button" data-hub-links aria-haspopup="dialog" aria-label="${label}" title="${label}">${GITHUB_MARK}${broken ? '<span class="links-dot" aria-hidden="true"></span>' : ''}</button>`;
+  };
+  // The In Review header's right end; pending is whether a check-github request is waiting.
+  const githubLine = (checks, { pending = false, links = null } = {}) => {
+    const mark = linksMark(links);
+    if (pending) return `<span class="github">${mark} Checking…</span>`;
+    if (!checks?.at) return `<span class="github idle" title="GitHub not checked yet">${mark} not checked</span>`;
+    const title = `GitHub checked ${since(checks.at)}${checks.idle ? '; no card shows an open PR' : checks.late ? '; checks are late' : ''}`;
+    const note = checks.late && !checks.idle ? ' · checks are late' : '';
+    return `<span class="github${checks.late && !checks.idle ? ' late' : ''}${checks.idle ? ' idle' : ''}" title="${title}">${mark} ${shortSince(checks.at)}${note}</span>`;
+  };
+
+  const LINK_NAMES = { github: 'GitHub polling', events: 'Events', wakes: 'Daily wakes', push: 'Push notifications', slack: 'Reviewer links' };
+  // The Hub links sheet's list, one row per link with a green dot, a muted one while settling, or a red one
+  // (docs/adr/0040-one-board-registry-for-every-hub-feature.md).
+  const LINK_DOTS = { ok: ['pass', 'Working'], settling: ['', 'Settling'], broken: ['fail', 'Not working'] };
+  const linkRow = (l) => {
+    const st = linkState(l);
+    const [cls, label] = LINK_DOTS[st] || LINK_DOTS.broken;
+    const detail = st === 'settling' ? `Settling: ${l.detail}` : l.detail;
+    return `<li><span class="dot${cls ? ` ${cls}` : ''}" role="img" aria-label="${label}"></span><span><strong>${esc(LINK_NAMES[l.link] || l.link)}</strong><span class="sub">${esc(detail)}</span></span></li>`;
+  };
+  const linksList = (links) => (links?.length
+    ? `<ul class="hub-links">${links.map(linkRow).join('')}</ul>`
+    : '<p class="muted">The hub doesn\'t list this board yet. It picks a board up from the manifest on its next check.</p>');
+
+  // The checklist a new board shows at the top until its session answered the hello and GitHub checks reach it; setup
+  // is /api/board's, null once both pass. Cards can start meanwhile.
+  const setupCard = (setup) => {
+    if (!setup) return '';
+    const step = (ok, done, waiting) => `<li><span class="dot ${ok ? 'pass' : 'pending'}" aria-hidden="true"></span>${ok ? done : waiting}</li>`;
+    return `<h2>Connecting this board</h2><ul class="setup-steps">
+      ${step(setup.events, 'Claude answered the hello', 'Waiting for Claude to answer the hello')}
+      ${step(setup.github, 'GitHub checks reach this board', 'Waiting for the hub\'s next GitHub check')}
+    </ul>`;
+  };
+  const checkLanded = (checks, pendingSince) => Boolean(checks?.at) && Date.parse(checks.at) >= pendingSince;
+  const refreshIcon = (size) => `<svg 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"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`;
+  // The GitHub line's own refresh, spinning and resting while a request is pending. It sits in the lane's summary, so
+  // it is aria-disabled, not disabled: a resting tap must still reach app-header.js's handler, which keeps the lane from folding.
+  const githubRefresh = (checks, pendingSince) => `<button class="ghost gh-refresh${pendingSince ? ' spinning' : ''}" type="button" data-check-github aria-label="Check GitHub" title="Check GitHub"${pendingSince ? ' aria-disabled="true"' : ''}>${refreshIcon(14)}</button>`;
+
+  // Which header controls take taps, and whether refresh spins. The header paints them disabled with refresh spinning;
+  // both turn on together once the first board load has answered or failed.
+  // Offline, refresh stays on so a tap can retry the load (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md).
+  const headerControls = ({ link = 'online', wired = false, boardSettled = false, reloading = false } = {}) => {
+    const ready = wired && boardSettled && !reloading;
+    return { refresh: ready, settings: ready && link === 'online', spin: !boardSettled || reloading };
+  };
+
+  Object.assign(globalThis.BoardUI, { statusLine, freshSig, nextFresh, githubLine, brokenLinks, linksList, setupCard, checkLanded, githubRefresh, refreshIcon, headerControls });
+})();

package/board/public/ui-hub.js

@@ -0,0 +1,94 @@
+// The rows and tiles of the hub page and settings modals (view-hub.js, view-hub-settings.js, view-polling.js), which hub.css styles
+// under .hub-view. Pure: each lays out words hub/views.mjs wrote, and title and sub are HTML.
+(function () {
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const TILE_PATHS = {
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+    moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
+    power: '<path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.8 0"/>',
+    calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/>',
+    snooze: '<path d="M4 10h6l-6 8h6"/><path d="M14 4h6l-6 8h6"/>',
+    laptop: '<rect x="4" y="5" width="16" height="11" rx="1.5"/><path d="M2 19h20"/>',
+    key: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+  };
+  const tile = (key, color) => `<span class="icon sm solid" style="--c:${color}"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${TILE_PATHS[key]}</svg></span>`;
+  const CHEVRON = '<span class="chev" aria-hidden="true">›</span>';
+
+  function row({ icon = '', title, sub = '', wrap = false, trail = '', href, attrs = '' }) {
+    const inner = `${icon}<span class="body"><span class="text"><span class="title">${title}</span>${sub ? `<span class="sub${wrap ? ' wrap' : ''}">${sub}</span>` : ''}</span>${trail}</span>`;
+    return href ? `<a class="row" href="${esc(href)}"${attrs}>${inner}</a>` : `<div class="row"${attrs}>${inner}</div>`;
+  }
+
+  // flash: {text, error} or null, a form's answer shown above the view.
+  const flash = (f) => (f ? `<div class="flash${f.error ? ' error' : ''}" role="${f.error ? 'alert' : 'status'}">${esc(f.text)}</div>` : '');
+
+  // hold: hub/views.mjs hubView's hold, or null for no banner. Its End form posts snooze=off, which view-hub.js sends.
+  const holdBanner = (hold) => (hold ? `<div class="hold-banner"><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">${TILE_PATHS.moon}</svg><span>${esc(hold.text)}</span>${hold.end ? '<form method="post" action="/_hub/settings/notifications"><button class="btn quiet" name="snooze" value="off">End snooze</button></form>' : ''}</div>` : '');
+
+  function pauseBanner(pause) {
+    if (!pause || pause.state === 'normal') return '';
+    const going = pause.state === 'going';
+    const until = BoardUI.usageClock(pause.resets_at);
+    const icon = going ? '<path d="M3.34 19a10 10 0 1 1 17.32 0"/><path d="m12 14 4-4"/>' : '<circle cx="12" cy="12" r="9"/><path d="M10 9v6"/><path d="M14 9v6"/>';
+    const text = going ? `Past the buffer: spending usage until ${until}`
+      : `Work paused: Claude’s ${pause.window === 'five_hour' ? '5‑hour' : 'weekly'} usage is at ${Math.round(pause.used)}%. Resumes ${pause.window === 'five_hour' ? 'at ' : ''}${until}.`;
+    return `<div class="hold-banner ub-banner ub-${going ? 'going' : 'paused'}" role="status"><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">${icon}</svg><span>${esc(text)}</span><form method="post" action="/_hub/settings/keep-going"><button class="btn${going ? '' : ' quiet'}" name="value" value="${going ? 'off' : 'on'}">${going ? 'Stop' : 'Keep going'}</button></form></div>`;
+  }
+
+  function bufferControl(pause) {
+    const at = pause.pause_at;
+    const off = at === 100;
+    return `<div class="u-buffer"><div class="ub-row"><span class="ub-label"><span class="title">Pause work at</span><span class="ub-sub">${off ? 'No buffer' : `${100 - at}% buffer`}</span></span>`
+      + `<form class="segments ub-step" method="post" action="/_hub/settings/pause-at" role="group" aria-label="Pause work at"><button name="value" value="${at - 5}" aria-label="Pause 5% sooner"${at <= 50 ? ' disabled' : ''}>−</button>`
+      + `<output class="${off ? 'off' : ''}" aria-live="polite">${off ? 'Off' : `${at}%`}</output>`
+      + `<button name="value" value="${at + 5}" aria-label="Pause 5% later"${off ? ' disabled' : ''}>+</button></form></div>`
+      + `<p class="u-share-desc">${off ? 'Off: work keeps going until usage runs out.' : 'Claude’s new work waits when either window passes this, and resumes at that window’s reset; Codex hands its work to Opus builders.'}</p></div>`;
+  }
+
+  // What polling does now, the last and next check and the queue, with Send now: hub/views.mjs pollingNow's words.
+  const nowRow = (now, icon = '') => row({ icon, title: esc(now.title), sub: now.lines.map((l) => `<span class="sub wrap">${esc(l)}</span>`).join(''),
+    trail: `<form method="post" action="/_hub/push/flush"><button class="btn quiet" ${now.count ? '' : 'disabled'}>Send now</button></form>` });
+
+  // This device's notifications (hub-kit.js device): state is {title, sub, action: {label, act, quiet, disabled}} or
+  // null while unknown, which keeps the row hidden.
+  function deviceRow(state, { compact = false } = {}) {
+    if (!state) return `<div class="row" id="push" hidden>${tile('bell', '#ef4444')}</div>`;
+    const a = state.action;
+    const button = a ? `<button type="button" class="${a.quiet ? 'btn quiet' : 'btn'}" data-device="${esc(a.act)}"${a.disabled ? ' disabled' : ''}>${esc(a.label)}</button>` : '';
+    return `<div class="row" id="push">${tile('bell', '#ef4444')}<span class="body"><span class="text"><span class="title">${esc(state.title)}</span>${compact ? '' : `<span class="sub wrap">${esc(state.sub)}</span>`}</span>${compact && state.title === 'This device' ? `<span class="val">${state.sub?.startsWith('On') ? 'On' : 'Off'}</span>` : ''}${button}</span></div>`;
+  }
+
+  // The Codex share control: codex is hub/views.mjs hubView's codex, and its form posts to /_hub/settings/codex, which
+  // view-hub.js sends. While Codex isn't usable the choices are disabled, with the reason and the command to run.
+  function codexShare(codex) {
+    const off = !codex.usable;
+    const buttons = codex.choices.map((c) => `<button type="submit" name="value" value="${esc(c.value)}" aria-pressed="${c.on}"${off ? ' disabled' : ''}>${esc(c.label)}</button>`).join('');
+    return `<div class="u-share"><form class="segments${off ? ' is-disabled' : ''}" method="post" action="/_hub/settings/codex" role="group" aria-label="Codex share"${off ? ' aria-disabled="true"' : ''}>${buttons}</form>`
+      + `<p class="u-share-desc">${esc(codex.description)}</p>${codex.fix ? `<p class="u-share-fix"><code>${esc(codex.fix)}</code></p>` : ''}${codex.note ? `<p class="u-share-note">${esc(codex.note)}</p>` : ''}</div>`;
+  }
+
+  // data is the usage reading; codex, when given, draws Codex's block even without a reading: the Codex share control
+  // first, then Codex's bars while share isn't Off.
+  function usageCard(data, codex, pause) {
+    const { usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords } = BoardUI;
+    const products = usageProducts(data);
+    if (codex && !products.includes('codex')) products.push('codex');
+    if (!products.length) return '';
+    const head = (name, tag) => `<div class="u-head"><span class="title">${name}</span>${tag ? `<span class="u-asof">${esc(tag)}</span>` : ''}</div>`;
+    const asof = (r) => (!r.at ? 'no reading' : `${r.five_hour?.state === 'stale' ? 'last seen' : 'read'} ${usageClock(r.at)}`);
+    const windows = (r) => [['5-hour', 'five_hour'], ['Week', 'seven_day']].map(([label, key]) =>
+      `<div class="u-tone-${usageTone(r[key])}${pause?.pause_at < 100 ? ' ub-marked' : ''}"><div class="u-win"><span>${label}</span><span>${usageWords(r, key)}</span></div>${usageBar(r[key]).replace('</span>', `${pause?.pause_at < 100 ? `<span class="ub-mark" style="left:${pause.pause_at}%"></span>` : ''}</span>`)}</div>`).join('');
+    const blocks = products.map((p) => {
+      const r = data?.[p] || { at: null };
+      if (p !== 'codex' || !codex) return `<div class="block u-block">${head(usageNames[p], asof(r))}${windows(r)}${p === 'claude' && pause ? bufferControl(pause) : ''}</div>`;
+      const bars = codex.usable && codex.share !== 'off';
+      return `<div class="block u-block">${head(usageNames.codex, codex.tag || (bars ? asof(r) : ''))}${codexShare(codex)}${bars ? `<div class="u-codex-bars">${windows(r)}</div>` : ''}</div>`;
+    }).join('');
+    const source = [data?.claude && 'Claude Code’s status line, which every busy session redraws', data?.codex && 'Codex’s newest session logs'].filter(Boolean).join(', and ');
+    const note = source ? `<p class="note">From ${source}. A window whose reset time passed reads as reset.</p>` : '';
+    return `<section class="usage"><h2 class="label" style="margin-top:4px">Usage</h2><div class="group">${blocks}</div>${note}</section>`;
+  }
+
+  globalThis.HubUI = { esc, tile, CHEVRON, row, flash, holdBanner, pauseBanner, nowRow, deviceRow, usageCard };
+})();