@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/toasts.js

@@ -0,0 +1,181 @@
+(function () {
+  // How long a toast fades in and out; the board's bump icon fades its fill on the same timing (app.js fadeBump).
+  const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const enterTime = () => reduced() ? 80 : 150;
+  const exitTime = () => reduced() ? 100 : 200;
+
+  function create(root) {
+    const stack = document.createElement('div');
+    stack.setAttribute('class', 'toast-stack');
+    stack.setAttribute('aria-label', 'Notifications');
+    root.appendChild(stack);
+    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, enterTime, exitTime };
+})();

package/board/public/ui-cards.js

@@ -0,0 +1,218 @@
+// 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, clock, cardTime, 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: 'quiet', 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('quiet', 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('quiet', 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'];
+      const age = reviewAge(rv).trim();
+      return badge(s.tone, `${esc(rv?.github || r)}${age ? ` (${age})` : ''} ${s.mark}`, { title: `${r}${rv?.github ? ` (${rv.github})` : ''}: ${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
+  // Action needed, last of the time line's orange words, linking to what the owner acts on
+  // (docs/adr/0145-build-on-a-blocked-card-queues-it.md).
+  function actionWords(it) {
+    if (!it.action) return '';
+    const external = it.action.kind === ACTION_KIND.ready ? Object.entries(EXTERNAL).map(([k, v]) => ` ${k}="${esc(v)}"`).join('') : '';
+    return `<a class="card-action" href="${esc(it.action.url)}" title="${esc(it.action.label)}" aria-label="${esc(`Action needed: ${it.action.label}`)}"${external}>Action needed</a>`;
+  }
+  // Each unfinished dep, linking to its card: "blocked by #53, #54".
+  function blockedWords(it) {
+    const deps = it.blockedBy || [];
+    return deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
+  }
+  const tryWords = (kind) => kind === 'app' ? {
+    go: 'Build', going: 'Building…', done: 'Install', failed: 'Build failed',
+    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',
+    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>';
+  const tryURL = (run) => run.kind === 'web' ? run.port ? `https://${location.hostname}:${run.port}/` : null : run.url;
+  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);
+    const run = t ? { ...t, url: tryURL(t) } : null;
+    return it.builder?.kind === BUILDER_KIND.install ? { ...run, kind: run?.kind || 'app', state: 'running' } : run;
+  }
+  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}>`;
+  }
+  // A card's Serve / Build, only while the board's Auto-build is off and its branch has changes
+  // (docs/adr/0124-only-the-owner-or-auto-build-starts-a-card-run.md).
+  function tryButton(it) {
+    const t = tryOf(it);
+    if (it.kind !== 'work' || !t?.script || t.autoBuild || !t.changes) return '';
+    const words = tryWords(t.kind);
+    const reason = 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 url = tryURL(main);
+    const chip = main.state === 'running' ? badge('notice', spinner + esc(words.going), { attrs: { role: 'status' } })
+      : main.state === 'failed' ? badge('danger', esc(words.failed), { button: true, attrs: { type: 'button', 'data-main-log': '', 'aria-haspopup': 'dialog' }, title: 'Read main’s build log and retry this tip.' })
+      : main.state === 'ready' && url ? badge('ready', `${words.done} ${LINK_ARROW}`, { href: 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>`;
+  }
+  // The open card's Implement, rightmost in its action row, on a card board/domain.mjs marks buildable: it confirms, then
+  // sends card-build, and reads "Starting…" while it is sent and the board server starts the implementer. Build and Serve
+  // mean the package only (docs/adr/0122-a-todo-card-that-nothing-blocks-has-build.md,
+  // docs/adr/0139-a-build-tap-starts-the-build-in-the-board-server.md, docs/adr/0166-a-todo-cards-button-reads-implement.md).
+  function buildButton(it, sending = false) {
+    if (!it.buildable) return '';
+    return `<button class="build" data-confirm="card-build" data-key="${esc(it.key)}"${sending ? ' disabled' : ''}>${sending ? 'Starting…' : 'Implement'}</button>`;
+  }
+  // A builder the Implement tap started reads "Waiting for orchestrator" until the session's builder posts its first line.
+  const builderLine = (b) => [b.progress || (b.waiting ? 'Waiting for orchestrator' : 'Starting'), b.at && ago(b.at)].filter(Boolean).join(' · ');
+  // Five bars at the end of the time row while a build runs on an In Progress card: done phases filled, the current one
+  // marked. The phases are store.mjs PHASES (docs/adr/0137-a-builder-status-line-is-a-phase-and-a-short-detail.md,
+  // docs/adr/0160-a-building-cards-phase-bars-end-its-time-row.md).
+  const BUILD_PHASES = ['reading', 'building', 'testing', 'checking', 'landing'];
+  function phaseBars(phase) {
+    const at = BUILD_PHASES.indexOf(phase);
+    if (at < 0) return '';
+    const name = `${phase[0].toUpperCase()}${phase.slice(1)}`;
+    return `<span class="phase-bars" role="img" aria-label="${name}, step ${at + 1} of ${BUILD_PHASES.length}">${BUILD_PHASES.map((_, i) => `<i class="${i < at ? 'done' : i === at ? 'now' : ''}"></i>`).join('')}</span>`;
+  }
+  const stalledChip = (it) => it.lane !== 'done' && it.builder?.stalled ? badge('danger', 'Stalled', {
+    button: true, title: 'No recent progress. Nudge Claude to check this implementer',
+    attrs: { type: 'button', 'data-confirm': 'nudge', 'data-key': it.key },
+  }) : '';
+  const unreadCount = (othersAt, seenAt) => (seenAt ? (othersAt || []).filter((t) => String(t) > seenAt).length : 0);
+  // When a hold ends, as a card reads it: the time today, the weekday within six days, else the date
+  // (docs/adr/0118-a-card-can-be-held-until-a-time.md).
+  function heldUntilWords(iso, now = new Date()) {
+    const d = new Date(iso);
+    const midnight = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+    const days = Math.round((midnight(d) - midnight(now)) / 86400000);
+    if (days === 0) return clock(d);
+    if (days > 0 && days < 7) return `${d.toLocaleDateString([], { weekday: 'short' })} ${clock(d)}`;
+    return `${d.toLocaleDateString([], { month: 'numeric', day: 'numeric' })}, ${clock(d)}`;
+  }
+  function holdWords(it) {
+    if (!it.held) return '';
+    const d = it.heldUntil && new Date(it.heldUntil);
+    const title = !d ? 'Held until you unhold it.'
+      : `Held until ${d.toLocaleDateString([], { weekday: 'short', month: 'numeric', day: 'numeric' })}, ${clock(d)}. ${it.lane === 'todo' ? 'It starts on its own then, once nothing else blocks it.' : 'Claude picks it up again then.'}`;
+    return `<span class="card-hold" title="${esc(title)}">${esc(d ? `held until ${heldUntilWords(it.heldUntil)}` : 'held')}</span>`;
+  }
+  // A card's last line: the time its lane sorts by (domain.mjs sortAt), then its hold, what blocks it, then Action needed
+  // or ready, then a building card's phase bars, then its unread count, which app-cards.js takes away when the card opens
+  // (docs/adr/0154-a-new-card-is-ready-grilling-or-prototyping.md, docs/adr/0160-a-building-cards-phase-bars-end-its-time-row.md).
+  const SEP = '<span class="sep"> · </span>';
+  function timeLine(it, unread, bars) {
+    const iso = it.sortAt;
+    const parts = [iso && `<time datetime="${esc(iso)}">${esc(cardTime(iso))}</time>`, holdWords(it), blockedWords(it), actionWords(it), it.ready && '<span class="card-ready">ready</span>'].filter(Boolean);
+    const count = unread ? `<span class="card-unread">${parts.length || bars ? SEP : ''}${unread} new message${unread === 1 ? '' : 's'}</span>` : '';
+    const tail = bars ? `${parts.length ? SEP : ''}${bars}` : '';
+    if (!parts.length && !count && !tail) return '';
+    return `<div class="line6 sub card-time">${parts.join(SEP)}${tail}${count}</div>`;
+  }
+  // The Hold sheet's picker (app-cards.js): /api/board's holdChoices, the chips hub/duration.mjs shares with Snooze and
+  // Keep awake, then Custom. Its .hub-view root takes hub.css's duration picker rules, which view-hub-settings.js
+  // durationPicker's markup also uses.
+  function holdPicker(key, choices) {
+    const chips = choices.map((c) => `<button type="button" class="btn quiet" data-hold-for="${esc(key)}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="hub-view"><div class="dur-chips" role="group" aria-labelledby="holdTitle"><div class="dur-choices">${chips}</div>`
+      + `<div class="dur-custom"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-hold-at="${esc(key)}" required aria-label="Custom hold until a date and time"></div></div></div>`;
+  }
+  // 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, Boolean(it.bumpedAt))}</div>` : '');
+  const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' && `<span class="working">${workingLine}</span>`].filter(Boolean).join(' · ');
+  function workLines(it, { unread = 0, top = false } = {}) {
+    const ticket = 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);
+    // A card from an ask reads New until its session sets ready, grilling or prototyping (domain.mjs unsorted).
+    const ids = it.kind === 'ask' ? askChip(it) : it.unsorted ? `${badge('notice', 'New')} ${ticket}` : ticket;
+    const wave = it.lineup ? badge('quiet', `${WAVE_ICON}${esc(it.lineup.title)}`, { title: `In the wave ${it.lineup.title}` }) : '';
+    const chips = `${stalledChip(it)}${it.followUp ? badge('quiet', 'follow-up') : ''}${prChips(it)}${reviewChips(it)}${it.risky ? badge('notice', 'risky') : ''}${installChip(it)}`;
+    const status = it.isNew && !it.action ? (askLine(it.ask) && `<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${it.builder.planner ? ' planner' : ''}"><span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}</div>`
+      : it.refusal ? `<div class="line3 sub refused">${esc(it.refusal)}</div>`
+      : it.working ? `<div class="line3 sub agent">${workingLine}</div>`
+      : it.next ? `<div class="line3 sub next${it.lane === 'todo' || it.lane === 'done' || it.held ? ' idle' : ''}">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>` : ''}
+      ${wave ? `<div class="line5 meta">${wave}</div>` : ''}
+      ${timeLine(it, unread, it.lane === 'progress' && it.builder && !it.builder.planner && it.waitsOn !== 'checking' ? phaseBars(it.builder.phase) : '')}`;
+  }
+  const WAVE_ICON = '<svg class="wave-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/><path d="M2 16c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/></svg>';
+  const askChip = (it) => (it.isNew ? badge('notice', 'New') : '');
+  function planButton(items) {
+    const keys = items.filter((i) => i.kind === 'work' && !i.held && !i.blockedBy?.length).map((i) => i.key);
+    return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}">Plan waves</button>` : '';
+  }
+
+  Object.assign(globalThis.BoardUI, { prChips, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, buildButton, builderLine, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON });
+})();

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,93 @@
+// 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): a grey asleep while
+  // the hub can wake the session, waking… once a wake is under way (waking: the page asked for one and the board hasn't
+  // said so yet), and a red not listening when nothing will wake it
+  // (docs/adr/0147-boards-run-in-the-background-and-the-hub-board-in-tmux.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, waking = false } = {}) => (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 === 'waking' || (waking && watcher === 'asleep') ? '<span class="claude asleep" title="Waking: the hub is resuming its session">waking…</span>'
+    : watcher === 'asleep' ? '<span class="claude asleep" title="Asleep: its session idled out. Refresh, or any tap on the page, wakes it">asleep</span>'
+    : watcher === 'stopped' ? '<span class="claude down" 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, mark = GITHUB_MARK) => {
+    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}">${mark}${broken ? '<span class="links-dot" aria-hidden="true"></span>' : ''}</button>`;
+  };
+  // A board on a plain git remote has no GitHub checks, so the In Review header names its repo, host/path, instead
+  // (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
+  const REMOTE_MARK = '<svg class="gh-mark" width="13" height="13" 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>';
+  const remoteLine = (remote, { links = null } = {}) => `<span class="github remote" title="This board’s repo">${linksMark(links, REMOTE_MARK)} <span class="remote-name">${esc(remote.name)}</span></span>`;
+  // 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', 'repo-fetch': 'Repo fetch', events: 'Events', wakes: 'Daily wakes', 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')}
+      ${setup.github === undefined ? '' : 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, remoteLine, brokenLinks, linksList, setupCard, checkLanded, githubRefresh, refreshIcon, headerControls });
+})();