@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/ui-hub.js

@@ -0,0 +1,112 @@
+// 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 = {
+    github: '<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"/>',
+    codex: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3"/><path d="M13 15h4"/>',
+    linear: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+    slack: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+    tailscale: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18"/>',
+    notifications: '<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"/>',
+    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"/>',
+    coffee: '<path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><path d="M6 2v2"/><path d="M10 2v2"/><path d="M14 2v2"/>',
+    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>`;
+  }
+
+  // builder: the word for who builds Codex's work, hub/views.mjs hubView's claude.builder.
+  function bufferControl(pause, builder) {
+    const at = pause.pause_at;
+    const off = at === 100;
+    return `<div class="block"><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 ${builder} implementers.`}</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', 'var(--accent)')}</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', state.action?.act === 'test' ? 'var(--color-success)' : 'var(--accent)')}<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>` : ''}</div>`;
+  }
+
+  // The Claude model control, drawn as Codex share's: claude is hub/views.mjs hubView's claude, and its form posts to
+  // /_hub/settings/claude-model, which view-hub.js sends.
+  function claudeModel(claude) {
+    const buttons = claude.choices.map((c) => `<button type="submit" name="value" value="${esc(c.value)}" aria-pressed="${c.on}">${esc(c.label)}</button>`).join('');
+    return `<div class="u-share"><form class="segments" method="post" action="/_hub/settings/claude-model" role="group" aria-label="Claude model">${buttons}</form>`
+      + `<p class="u-share-desc">${esc(claude.description)}</p></div>`;
+  }
+
+  // data is the usage reading; claude, when given, opens Claude's block with the Claude model control, even without a
+  // 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, claude) {
+    const { usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords } = BoardUI;
+    const products = usageProducts(data);
+    if (claude && !products.includes('claude')) products.unshift('claude');
+    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 === 'claude' && claude) return `<div class="block u-block">${head(usageNames.claude, asof(r))}${claudeModel(claude)}${windows(r)}</div>`;
+      if (p !== 'codex' || !codex) return `<div class="block u-block">${head(usageNames[p], asof(r))}${windows(r)}</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 buffer = pause && products.includes('claude') ? bufferControl(pause, claude?.builder ?? 'Claude') : '';
+    return `<section class="usage"><h2 class="label" style="margin-top:4px">Usage</h2><div class="group">${blocks}${buffer}</div></section>`;
+  }
+
+  globalThis.HubUI = { esc, tile, CHEVRON, row, flash, holdBanner, pauseBanner, nowRow, deviceRow, usageCard };
+})();

package/board/public/ui-links.js

@@ -0,0 +1,150 @@
+// Links the refs in Claude- and owner-written text as the board renders it, so no one links a ref by hand: a card's
+// ref opens that card, a Linear id or PR opens its page, and a bare URL becomes a link. Needs ui.js; load it before
+// the ui-*.js files that render text.
+(function () {
+  const { esc, record } = globalThis.BoardUI;
+  // The Linear id shape, which an internal ref shares.
+  const LINEAR_ID = /^([A-Z][A-Z0-9]*)-\d+$/;
+  const LINEAR_ISSUE = /^https:\/\/linear\.app\/[^/]+\/issue\//;
+  // A GitHub ticket's ref (board/domain.mjs refOf).
+  const ISSUE = /^#\d+$/;
+  const prUrl = (repo, n) => `https://github.com/${repo}/pull/${n}`;
+
+  // What a renderer needs to link text shown on item `key` (null for none): each ref, and each card id that differs
+  // from its ref, to its card's key, the issue url prefix of each Linear team the board's cards link to (none on a
+  // board without a workspace), that item's repo for a bare #n that is no card's ref, and `base`, which a page other
+  // than the board sets to './' so a card link opens the board. A ref shaped like a Linear id, such as INT-<n>, or a
+  // ticket #n links from anywhere; a wave's own short id, such as B1, links only from that wave's cards, since a plan
+  // for another wave reuses those names.
+  function linkContext(items = [], key = null, { base = '' } = {}) {
+    const wave = key && !key.startsWith('ask:') ? key.slice(0, key.indexOf('/')) : null;
+    const byRef = new Map();
+    for (const i of items) {
+      if (i.kind === 'ask') continue;
+      for (const ref of new Set([i.ref, i.id])) {
+        if (!ref || (!LINEAR_ID.test(ref) && !ISSUE.test(ref) && i.wave !== wave)) continue;
+        byRef.set(ref, [...(byRef.get(ref) || []), i]);
+      }
+    }
+    const refs = Object.create(null);
+    for (const [ref, list] of byRef) {
+      const pick = list.length === 1 ? list[0] : list.find((i) => i.wave === wave);
+      if (pick) refs[ref] = pick.key;
+    }
+    const teams = Object.create(null);
+    const repos = Object.create(null);
+    for (const i of items) {
+      if (i.repo) repos[i.repo.split('/')[1]] = i.repo;
+      if (i.internal) continue;
+      for (const l of i.linear || []) {
+        const team = LINEAR_ID.exec(l.id || '')?.[1];
+        const prefix = LINEAR_ISSUE.exec(l.url || '')?.[0];
+        if (team && prefix && !teams[team]) teams[team] = prefix;
+      }
+    }
+    return { refs, teams, repos, repo: items.find((i) => i.key === key)?.repo || null, base };
+  }
+
+  const TOKEN = new RegExp([
+    String.raw`(https?:\/\/[^\s<>"'\u0000-\u001f]+)`,
+    String.raw`(?<![\w.\/-])(?:([A-Za-z0-9][\w.-]*)\/)?([A-Za-z0-9][\w.-]*)#(\d+)(?!\w)`,
+    String.raw`(?<![\w&#\/])#(\d+)(?!\w)`,
+    String.raw`(?<![\w-])([A-Za-z]\w*(?:-\w+)*)`,
+  ].join('|'), 'g');
+  const out = (href, label) => `<a href="${esc(href)}" target="_blank" rel="noopener">${esc(label)}</a>`;
+  // A link to a page on this hub opens in place; only another origin opens a new window.
+  const opensHere = (href) => !/^[a-z][\w+.-]*:/i.test(href) || Boolean(globalThis.location?.origin && href.startsWith(location.origin + '/'));
+  const anyLink = (href, label) => (opensHere(href) ? `<a href="${esc(href)}">${esc(label)}</a>` : out(href, label));
+  const count = (s, c) => s.split(c).length - 1;
+
+  // Trailing punctuation ends a sentence, not the URL, unless it closes a bracket the URL opened.
+  function urlLink(raw) {
+    let url = raw;
+    while (/[.,;:!?)\]]$/.test(url)) {
+      const c = url.at(-1);
+      if ((c === ')' && count(url, '(') >= count(url, ')')) || (c === ']' && count(url, '[') >= count(url, ']'))) break;
+      url = url.slice(0, -1);
+    }
+    return anyLink(url, url) + esc(raw.slice(url.length));
+  }
+
+  const cardLink = (ref, ctx) => `<a href="${esc(`${ctx.base || ''}#item=${encodeURIComponent(record(ctx.refs, ref))}`)}">${esc(ref)}</a>`;
+
+  // The longest hyphen-prefix of a word that is a known ref or a Linear id, then the rest as text.
+  function wordLink(word, ctx) {
+    for (let w = word; w; w = w.includes('-') ? w.slice(0, w.lastIndexOf('-')) : '') {
+      const rest = esc(word.slice(w.length));
+      if (record(ctx.refs, w)) return cardLink(w, ctx) + rest;
+      const team = LINEAR_ID.exec(w)?.[1];
+      const prefix = team && team !== 'INT' && record(ctx.teams, team);
+      if (prefix) return out(prefix + w, w) + rest;
+    }
+    return esc(word);
+  }
+
+  // A bare #n that reads as a hex colour stays text.
+  const colour = (n) => n.startsWith('0') || n.length === 6 || n.length === 8;
+
+  // Plain text in, escaped HTML out, with each ref linked.
+  function linkText(text, ctx = {}) {
+    const s = String(text ?? '');
+    let html = '';
+    let at = 0;
+    for (const m of s.matchAll(TOKEN)) {
+      const [all, url, owner, name, n, bare, word] = m;
+      html += esc(s.slice(at, m.index));
+      at = m.index + all.length;
+      if (url) html += urlLink(url);
+      else if (name) {
+        const repo = owner ? `${owner}/${name}` : record(ctx.repos, name);
+        html += repo ? out(prUrl(repo, n), all) : esc(all);
+      } else if (bare) html += record(ctx.refs, all) ? cardLink(all, ctx) : ctx.repo && !colour(bare) ? out(prUrl(ctx.repo, bare), all) : esc(all);
+      else html += wordLink(word, ctx);
+    }
+    return html + esc(s.slice(at));
+  }
+
+  const TAG = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][\w-]*)(?:[^>"']|"[^"]*"|'[^']*')*>/g;
+  // Text inside these stays as written: a link can't nest in a link or a control, and preformatted text is code.
+  const KEEP = new Set(['a', 'button', 'label', 'option', 'pre', 'script', 'select', 'style', 'textarea']);
+  const ENTITY = /(&(?:#x[\da-f]+|#\d+|[a-z][a-z\d]*);)/i;
+  const NAMED = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' };
+  function decode(e) {
+    const n = e.slice(1, -1).toLowerCase();
+    if (n[0] !== '#') return record(NAMED, n) ?? null;
+    const code = n[1] === 'x' ? parseInt(n.slice(2), 16) : parseInt(n.slice(1), 10);
+    return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : null;
+  }
+  // An HTML text run, decoded and relinked; an entity with no plain-text form is kept as written.
+  function linkRun(run, ctx) {
+    let html = '';
+    let buf = '';
+    for (const [n, part] of run.split(ENTITY).entries()) {
+      const plain = n % 2 ? decode(part) : part;
+      if (plain !== null) { buf += plain; continue; }
+      html += linkText(buf, ctx) + part;
+      buf = '';
+    }
+    return html + linkText(buf, ctx);
+  }
+
+  // An HTML fragment Claude wrote, with refs linked in its text outside links, controls and <pre>.
+  function linkHtml(html, ctx = {}) {
+    const s = String(html ?? '');
+    let res = '';
+    let at = 0;
+    let keep = 0;
+    for (const m of s.matchAll(TAG)) {
+      const run = s.slice(at, m.index);
+      res += keep ? run : linkRun(run, ctx);
+      res += m[0];
+      at = m.index + m[0].length;
+      const name = (m[2] || '').toLowerCase();
+      if (KEEP.has(name) && !m[0].endsWith('/>')) keep = Math.max(0, keep + (m[1] ? -1 : 1));
+    }
+    const tail = s.slice(at);
+    return res + (keep ? tail : linkRun(tail, ctx));
+  }
+
+  Object.assign(globalThis.BoardUI, { linkContext, linkText, linkHtml, opensHere, anyLink });
+})();

package/board/public/ui-markdown.js

@@ -0,0 +1,80 @@
+// A small Markdown renderer for Notes (view-notes.js; docs/adr/0024-a-full-plan-opens-as-a-page-on-the-site.md). Needs ui.js and ui-links.js.
+(function () {
+  const { esc, linkHtml } = globalThis.BoardUI;
+  // Raw HTML is escaped first, so a link's href can only break out through its scheme.
+  const safeUrl = (u) => /^(https?:|mailto:)/i.test(u) || !/^[\w+.-]*:/.test(u);
+  const WIDE_CELL = 80;
+  const WIDER_CELL = 200;
+
+  function inline(s) {
+    return String(s).split(/(`[^`]*`)/).map((part, n) => (n % 2 ? `<code>${esc(part.slice(1, -1))}</code>` : esc(part)
+      .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (m, label, url) => (safeUrl(url) ? `<a href="${url}" target="_blank" rel="noopener">${label}</a>` : m))
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/(^|[^*\w])\*(?!\s)([^*]+?)\*(?!\w)/g, '$1<em>$2</em>'))).join('');
+  }
+
+  const FENCE = /^\s*```/;
+  const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+  const RULE = /^\s*([-*_])(\s*\1){2,}\s*$/;
+  const QUOTE = /^\s*>/;
+  const ITEM = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/;
+  const TABLE_SEP = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/;
+  const cells = (line) => line.trim().replace(/^\|/, '').replace(/(?<!\\)\|$/, '').split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, '|'));
+  const startsTable = (lines, i) => lines[i].includes('|') && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1]);
+  const startsBlock = (lines, i) => FENCE.test(lines[i]) || HEADING.test(lines[i]) || RULE.test(lines[i]) || QUOTE.test(lines[i]) || ITEM.test(lines[i]) || startsTable(lines, i);
+
+  // links: a ui-links.js linkContext, to link the refs in the plan's text.
+  function markdown(src, links = null) {
+    const lines = String(src ?? '').replace(/\r\n?/g, '\n').split('\n');
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      let m;
+      if (!line.trim()) { i++; continue; }
+      if (FENCE.test(line)) {
+        const body = [];
+        for (i++; i < lines.length && !FENCE.test(lines[i]); i++) body.push(lines[i]);
+        i++;
+        out.push(`<pre><code>${esc(body.join('\n'))}</code></pre>`);
+      } else if ((m = HEADING.exec(line))) {
+        out.push(`<h${m[1].length}>${inline(m[2])}</h${m[1].length}>`);
+        i++;
+      } else if (RULE.test(line)) {
+        out.push('<hr>');
+        i++;
+      } else if (startsTable(lines, i)) {
+        const head = cells(line);
+        const rows = [];
+        for (i += 2; i < lines.length && lines[i].trim() && lines[i].includes('|'); i++) rows.push(cells(lines[i]));
+        const cell = (tag, c) => `<${tag}${c.length > WIDER_CELL ? ' class="wider"' : c.length > WIDE_CELL ? ' class="wide"' : ''}>${inline(c)}</${tag}>`;
+        out.push(`<div class="md-table"><table><thead><tr>${head.map((c) => cell('th', c)).join('')}</tr></thead>`
+          + `<tbody>${rows.map((r) => `<tr>${r.map((c) => cell('td', c)).join('')}</tr>`).join('')}</tbody></table></div>`);
+      } else if (QUOTE.test(line)) {
+        const body = [];
+        for (; i < lines.length && QUOTE.test(lines[i]); i++) body.push(lines[i].replace(/^\s*>\s?/, ''));
+        out.push(`<blockquote>${markdown(body.join('\n'))}</blockquote>`);
+      } else if ((m = ITEM.exec(line))) {
+        const ordered = /\d/.test(m[2]);
+        const base = m[1].length;
+        const items = [];
+        while (i < lines.length) {
+          const it = ITEM.exec(lines[i]);
+          if (it && (it[1].length > base || /\d/.test(it[2]) === ordered)) { items.push({ nested: it[1].length > base, text: it[3] }); i++; }
+          else if (items.length && lines[i].trim() && /^\s{2,}/.test(lines[i])) { items[items.length - 1].text += ` ${lines[i].trim()}`; i++; }
+          else break;
+        }
+        const tag = ordered ? 'ol' : 'ul';
+        out.push(`<${tag}>${items.map((it) => `<li${it.nested ? ' class="nested"' : ''}>${inline(it.text)}</li>`).join('')}</${tag}>`);
+      } else {
+        const body = [];
+        for (; i < lines.length && lines[i].trim() && !startsBlock(lines, i); i++) body.push(lines[i].trim());
+        out.push(`<p>${inline(body.join(' '))}</p>`);
+      }
+    }
+    const html = out.join('\n');
+    return links ? linkHtml(html, links) : html;
+  }
+
+  Object.assign(globalThis.BoardUI, { markdown });
+})();

package/board/public/ui-order.js

@@ -0,0 +1,18 @@
+// The board's order of its items, each lane together, which board/domain.mjs sorts the board by and the page sorts a
+// tap it draws at once by, so the card lands where the server will put it
+// (docs/adr/0140-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, bumpedAt, sortAt, order and key.
+// Needs nothing else: board/domain.mjs runs this file in a vm context.
+(function () {
+  const LANE_ORDER = { review: 0, stale: 1, progress: 2, todo: 3, done: 4, asks: 5 };
+  // New cards lead Todo, oldest first, so the top one is the next taken (docs/adr/0047-the-plus-makes-a-new-card.md);
+  // then bumped cards, the latest bump on top (docs/adr/0019-a-card-that-hasnt-started-can-be-bumped.md); then the rest
+  // newest first by sortAt, a card with no time last, the last added to its wave file on top.
+  function laneOrder(a, b) {
+    const bumped = (i) => i.bumpedAt || '';
+    const unsorted = (i) => (i.isNew ? 0 : 1);
+    const at = (i) => String(i.sortAt || '');
+    const age = a.isNew ? at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
+    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || unsorted(a) - unsorted(b) || bumped(b).localeCompare(bumped(a)) || age || b.order - a.order || a.key.localeCompare(b.key);
+  }
+  Object.assign(globalThis.BoardUI ||= {}, { laneOrder });
+})();

package/board/public/ui-page-header.js

@@ -0,0 +1,65 @@
+// Every page's header, for the board pages and the hub's pages alike. It needs nothing else, since board/server.mjs
+// renders each board page's <!--header {…}--> with it and hub/hub.mjs renders the hub's headers, each in a vm context.
+(function () {
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const icon = (size, paths) => `<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">${paths}</svg>`;
+  const ARROW = icon(24, '<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>');
+  const REFRESH = icon(18, '<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"/>');
+  const GEAR = icon(18, '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>');
+  const BULB = icon(18, '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>');
+  const id = (v) => (v ? ` id="${esc(v)}"` : '');
+
+  // Where the back arrow goes (docs/adr/0048-a-questions-takes-show-inline.md): 'back', one step back in history, when
+  // the page before was on this hub; else 'href', its backHref. A page a push opened always takes its backHref. idx is
+  // the entry's index in history.state, set by an in-app router: when present, it alone says whether a step back exists.
+  function backStep({ pushed = false, referrer = '', href, depth = 1, idx }) {
+    if (pushed) return 'href';
+    if (Number.isInteger(idx)) return idx > 0 ? 'back' : 'href';
+    let ref = null;
+    try { ref = referrer ? new URL(referrer) : null; } catch { ref = null; }
+    return ref && ref.origin === new URL(href).origin && ref.href !== href && depth > 1 ? 'back' : 'href';
+  }
+
+  // Runs in the page as the header's own script, so it uses nothing outside itself and step. The push mark lives in
+  // sessionStorage, since prototype-switcher.js drops from=push (board/store.mjs pushUrl) from the URL; a reload keeps it.
+  function wireBack(step) {
+    const key = 'from-push:' + location.pathname;
+    let pushed = new URLSearchParams(location.search).get('from') === 'push';
+    try {
+      if (pushed) sessionStorage.setItem(key, '1');
+      else if (performance.getEntriesByType('navigation')[0]?.type === 'navigate') sessionStorage.removeItem(key);
+      pushed = sessionStorage.getItem(key) === '1';
+    } catch { /* no storage: only this load knows */ }
+    const target = () => step({ pushed, referrer: document.referrer, href: location.href, depth: history.length, idx: history.state?.idx });
+    globalThis.PageBack = { pushed, target };
+    document.addEventListener('click', (e) => {
+      if (e.metaKey || e.ctrlKey || e.shiftKey || !e.target.closest?.('a.back') || target() !== 'back') return;
+      e.preventDefault();
+      history.back();
+    });
+  }
+
+  // lead is 'logo' (the kickflip, which toggles the sidebar, sidebar.js; logoHref, the hub's page, without it)
+  // or 'back' (the arrow, which follows backStep, with backHref the work item or the board, beside a phone-only logo). The controls (time and refresh, gear) paint disabled with refresh spinning until the
+  // page's script turns them on (docs/adr/0021-the-board-shows-github-checks-and-watcher-health.md). With controls
+  // false, trail (HTML) takes their place. bulb puts the architecture review's bulb between them (app-arch.js). leadAttrs adds to or replaces the lead link's attributes, and level is the
+  // title's heading level, for a header that isn't the page's own, such as the sidebar's (ui-sidebar.js).
+  function header({ lead = 'logo', title = '', titleId, backHref = './', backLabel = 'Back to the board', backId, logoSrc = 'kickflip.png',
+    controls = true, trail = '', time = '…', bulb = false, settingsHref = 'settings.html', logoHref = '/_hub/', leadAttrs = {}, level = 1 } = {}) {
+    const attrs = (base) => Object.entries({ ...base, ...leadAttrs }).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
+    const logo = (cls = 'hub') => `<a class="${cls}" href="${esc(logoHref)}"${attrs({ 'aria-label': 'Boards' })}><img src="${esc(logoSrc)}" alt=""></a>`;
+    const first = lead === 'back'
+      ? `<a class="back" href="${esc(backHref)}"${id(backId)}${attrs({ 'aria-label': backLabel })}>${ARROW}</a>${logo('hub phone-logo')}`
+      : logo();
+    const nav = controls ? `<nav class="nav">`
+      + `<span class="refresh"><button class="ghost spinning" id="refresh" type="button" disabled aria-label="Refresh" title="Refresh">${REFRESH}</button><span class="muted" id="status">${esc(time)}</span></span>`
+      + (bulb ? `<button class="ghost icon arch-bulb" id="archBulb" type="button" aria-label="Architecture review" title="Architecture review" aria-haspopup="dialog">${BULB}</button>` : '')
+      + (settingsHref ? `<a href="${esc(settingsHref)}" id="settingsLink" class="ghost icon" aria-label="Settings" title="Settings" aria-disabled="true" tabindex="-1" aria-haspopup="dialog">${GEAR}</a>` : '')
+      + `</nav>` : trail;
+    const script = lead === 'back' ? `<script>(${wireBack})(${backStep});</script>` : '';
+    const h = `h${[1, 2, 3, 4, 5, 6].includes(level) ? level : 1}`;
+    return `<header class="top"><div class="brand">${first}<${h}${id(titleId)}>${esc(title)}</${h}></div>${nav}</header>${script}`;
+  }
+
+  Object.assign(globalThis.BoardUI ||= {}, { header, backStep });
+})();

package/board/public/ui-prompts.js

@@ -0,0 +1,39 @@
+// A pending prompt's Needs you line (hub/prompts.mjs shown): a permission prompt with Allow once, Always allow and
+// Deny, or an AskUserQuestion with its options as buttons and Skip, and Send when it takes more than one tap.
+(function () {
+  const { esc, ago } = globalThis.BoardUI;
+
+  // The answer a question prompt's picks make, {choice: 'allow', answers: {<question>: <label, or labels joined by
+  // ", ">}}, or null until every question has a pick. picks: {<question index>: [label]}.
+  function promptAnswer(p, picks = {}) {
+    const answers = Object.create(null);
+    for (const [i, q] of (p.questions || []).entries()) {
+      const got = picks[i] || [];
+      if (!got.length) return null;
+      answers[q.question] = got.join(', ');
+    }
+    return { choice: 'allow', answers };
+  }
+
+  // Whether one tap on an option answers: a single question that takes one pick.
+  const oneTap = (p) => p.questions?.length === 1 && !p.questions[0].multiSelect;
+
+  // sending: true while the answer goes, which disables the line's buttons.
+  function promptItem(p, { picks = {}, sending = false } = {}) {
+    const off = sending ? ' disabled' : '';
+    const where = [ago(p.at), p.cwd].filter(Boolean).map(esc).join(' · ');
+    const head = `<div class="prompt-head"><b>${esc(p.questions ? 'Question' : p.tool)}</b><span class="muted small">${where}</span></div>`;
+    const status = sending ? '<span class="muted small">Sending…</span>' : '';
+    if (p.questions) {
+      const questions = p.questions.map((q, i) => `<div class="prompt-q"><p>${q.header ? `<span class="chip">${esc(q.header)}</span> ` : ''}${esc(q.question)}</p>
+<div class="prompt-options" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" data-prompt-q="${i}" data-prompt-opt="${esc(o.label)}" aria-pressed="${(picks[i] || []).includes(o.label)}"${off}><span class="lbl">${esc(o.label)}</span>${o.description ? `<span class="det">${esc(o.description)}</span>` : ''}</button>`).join('')}</div></div>`).join('');
+      const send = oneTap(p) ? '' : `<button type="button" class="primary" data-prompt-send${promptAnswer(p, picks) && !sending ? '' : ' disabled'}>Send</button>`;
+      return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${questions}<div class="prompt-actions">${send}<button type="button" class="deny" data-prompt-choice="deny"${off}>Skip</button>${status}</div></li>`;
+    }
+    const detail = p.detail ? `<pre class="prompt-detail">${esc(p.detail)}</pre>` : `<p class="prompt-what">Wants to ${esc(p.action)}</p>`;
+    const rule = p.rule ? `<p class="muted small prompt-rule">Always allow adds <code>${esc(p.rule)}</code> until the session ends.</p>` : '';
+    return `<li class="prompt" data-prompt="${esc(p.id)}">${head}${detail}<div class="prompt-actions"><button type="button" class="primary" data-prompt-choice="allow"${off}>Allow once</button><button type="button" data-prompt-choice="always"${off}>Always allow</button><button type="button" class="deny" data-prompt-choice="deny"${off}>Deny</button>${status}</div>${rule}</li>`;
+  }
+
+  Object.assign(globalThis.BoardUI, { promptItem, promptAnswer, oneTap });
+})();