@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/ui-links.js

@@ -0,0 +1,142 @@
+// 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 store.mjs accepts for a follow-up, which an internal ref shares.
+  const LINEAR_ID = /^([A-Z][A-Z0-9]*)-\d+$/;
+  const LINEAR_ISSUE = /^https:\/\/linear\.app\/[^/]+\/issue\//;
+  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 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, 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>, 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' || !i.ref || (!LINEAR_ID.test(i.ref) && i.wave !== wave)) continue;
+      byRef.set(i.ref, [...(byRef.get(i.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));
+  }
+
+  // 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 `<a href="${esc(`${ctx.base || ''}#item=${encodeURIComponent(record(ctx.refs, w))}`)}">${esc(w)}</a>${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 += 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-page-header.js

@@ -0,0 +1,63 @@
+// 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 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. 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 = '…', 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>`
+      + (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 });
+})();

package/board/public/ui-questions.js

@@ -0,0 +1,130 @@
+// Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
+(function () {
+  const { esc, time, replyBody, attachments, attachButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
+  // A short id such as A or C2 leads the label; a word id such as "inline" would repeat it. prototype-switcher.js answerLabel matches.
+  const lead = (o) => (/^[A-Z][0-9]?$/i.test(o.id) ? `${o.id}. ` : '');
+  const choiceLabel = (q, id) => { const o = q.options.find((x) => x.id === id); return o ? `${q.multi ? '' : lead(o)}${o.label}` : id || ''; };
+  const option = (o, { type = 'radio', name, checked = false, numbered = true, shown = false }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}>
+        <span><span class="lbl">${numbered ? esc(lead(o)) : ''}${esc(o.label)}</span>${o.recommended ? '<span class="rec">Recommended</span>' : ''}<div class="det">${esc(o.detail || '')}</div></span></label>`;
+
+  const noteComposer = (id, note) => `<div class="composer" data-composer="${esc(id)}"><textarea class="note" rows="2" placeholder="Note (optional)">${esc(note || '')}</textarea>
+      <div class="note-tools"><div class="pending-files" data-files></div>${attachButton()}</div></div>`;
+
+  const QUESTION_STATE = {
+    open: { label: 'open', tone: 'normal' },
+    answered: { label: 'waiting for claude', tone: 'notice' },
+    replied: { label: 'claude replied', tone: 'ready' },
+    resolved: { label: 'resolved', tone: 'quiet' },
+  };
+  function answerHistory(q, links = {}) {
+    if (!q.answers.length) return '';
+    const body = q.answers.map((a) => `<div class="ans"><div class="muted small">You · ${esc(time(a.ts))}</div>${esc(choiceLabel(q, a.choice))}${a.note ? `<div>${linkText(a.note, links)}</div>` : ''}${attachments(a.files)}</div>
+      ${a.reply ? `<div class="rep"><div class="muted small">Claude</div>${linkHtml(replyBody(a.reply), links)}</div>` : '<div class="muted small" style="margin-top:4px">Waiting for Claude…</div>'}`).join('');
+    const last = q.answers[q.answers.length - 1];
+    return q.state === 'open' || !last.reply ? body : `<details><summary>Your answer and Claude's reply</summary>${body}</details>`;
+  }
+  // A prototype page in the site's public/ opens in place, and its switcher picks a take (board/public/prototype-switcher.js).
+  const PROTOTYPE_PAGE = /^prototype-[\w-]+\.html(?:[?#]|$)/;
+  const isPrototype = (url) => Boolean(url) && PROTOTYPE_PAGE.test(globalThis.location && url.startsWith(location.origin + '/') ? url.replace(/^[^?#]*\//, '') : url);
+  const withParam = (url, key, value) => {
+    const at = url.includes('#') ? url.indexOf('#') : url.length;
+    return `${url.slice(0, at)}${url.slice(0, at).includes('?') ? '&' : '?'}${key}=${encodeURIComponent(value)}${url.slice(at)}`;
+  };
+  const questionLink = (url) => !url ? ''
+    : isPrototype(url) ? `<a class="pill proto" href="${esc(url)}">See the prototypes →</a>`
+    : `<div class="small" style="margin-bottom:8px"><a href="${esc(url)}"${opensHere(url) ? '' : ' target="_blank" rel="noopener"'}>${esc(url.replace(/^https:\/\/(linear\.app\/[^/]+\/issue|github\.com)\//, ''))} ${LINK_ARROW}</a></div>`;
+
+  // A question's takes show inline (docs/adr/0048-a-questions-takes-show-inline.md): an option with `diagram` draws
+  // it with its `practice`, and on a question whose url is a prototype page any other option shows that page's take.
+  const framed = (q) => isPrototype(q.url) && q.options.some((o) => !o.diagram);
+  const inline = (q) => isPrototype(q.url) || q.options.some((o) => o.diagram);
+
+  // rows: [[{text, tone?, to?}]], top to bottom. A box points at the boxes of the next row listed in `to`, else at all
+  // of them; tone is a status colour's name.
+  const TONES = ['quiet', 'info', 'notice', 'danger', 'success'];
+  function diagram(rows) {
+    const label = rows.map((row) => row.map((b) => b.text).join(', ')).join(' → ');
+    return `<div class="flow" role="img" aria-label="${esc(label)}">${rows.map((row, i) => {
+      const edges = i ? rows[i - 1].flatMap((b, from) => (b.to || row.map((_, n) => n)).map((to) => [from, to])) : [];
+      const into = new Set(edges.map(([, to]) => to));
+      const conn = edges.length ? `<svg class="flow-conn" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">${edges.map(([from, to]) =>
+        `<line x1="${((from + 0.5) / rows[i - 1].length) * 100}" y1="0" x2="${((to + 0.5) / row.length) * 100}" y2="100"/>`).join('')}</svg>` : '';
+      return `${conn}<div class="flow-row${row.length > 3 ? ' dense' : ''}" style="grid-template-columns:repeat(${row.length},minmax(0,1fr))">${row.map((b, n) =>
+        `<div class="flow-box${into.has(n) ? ' in' : ''}${TONES.includes(b.tone) ? ` tone-${b.tone}` : ''}">${esc(b.text)}</div>`).join('')}</div>`;
+    }).join('')}</div>`;
+  }
+  const practice = (lines, links) => `<div class="practice"><b>In practice</b><ul>${lines.map((l) => `<li>${linkText(l, links)}</li>`).join('')}</ul></div>`;
+
+  const fullTakes = (q, fit) => isPrototype(q.url) && q.options.every((o) => !o.diagram && !o.practice)
+    && (q.options.length === 1 || q.options.some((o) => fit(o.id)?.scrolls));
+  // Grid heights decide the layout; fullH measures the chosen take at the full content width.
+  function takeBody(q, o, links, fit, full = false) {
+    if (o.diagram) return diagram(o.diagram) + practice(o.practice || [], links);
+    if (!isPrototype(q.url)) return '';
+    const size = fit(o.id);
+    const h = full ? size?.fullH : size?.h;
+    // Every take loads so one outside the viewport can still decide the question's layout.
+    return `<div class="take-shot${h ? '' : ' measuring'}"${h ? ` style="height:${Math.round(h)}px"` : ''}><iframe src="${esc(withParam(q.url, 'take', o.id))}" title="${esc(o.label)}"></iframe></div>`;
+  }
+  function takes(q, chosen, links, fit) {
+    const name = 'c-' + q.id;
+    if (fullTakes(q, fit)) {
+      const shown = q.options.find((o) => o.id === chosen) || q.options.find((o) => o.recommended) || q.options[0];
+      return `<div class="takes takes-full"><div class="take-choices" role="group" aria-label="Takes">${q.options.map((o) => option(o, { name, checked: chosen === o.id, shown: o === shown })).join('')}</div><article class="take" data-opt="${esc(shown.id)}">${takeBody(q, shown, links, fit, true)}</article></div>`;
+    }
+    return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
+  }
+  // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext;
+  // fit(option id) supplies the measured grid and full-width heights.
+  function questionCard(q, { n = 0, draft = {}, links = {}, fit = () => null } = {}) {
+    const last = q.answers[q.answers.length - 1];
+    const chosen = draft.choice ?? (last ? last.choice : null);
+    const st = QUESTION_STATE[q.state];
+    return `<section class="q ${q.urgent && q.state === 'open' ? 'urgent' : ''}" id="${esc(q.id)}" data-q="${esc(q.id)}">
+      <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge(st.tone, esc(st.label))}</div>
+      <h3>${linkText(q.question, links)}</h3>
+      ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
+      ${framed(q) ? '' : questionLink(q.url)}
+      ${q.state === 'resolved' && q.resolved ? `<div class="small muted" style="margin-bottom:8px">Resolved: ${esc(q.resolved)} A new answer reopens it.</div>` : ''}
+      ${inline(q) ? takes(q, chosen, links, fit) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id })).join('')}
+      ${noteComposer('q:' + q.id, draft.note)}
+      ${answerHistory(q, links)}
+    </section>`;
+  }
+  const topicName = (t) => (String(t.title).match(/^([A-Z]+-\d+|[A-Z]\d+):/) || [])[1] || t.title;
+  // Topics from /api/board ownerTopics, in order. pills: unresolved topics with an open question, plus the
+  // current topic wherever it stands; waiting: the other unresolved topics, which wait only on Claude.
+  function topicRow(topics, current) {
+    const pills = topics.filter((t) => t.id === current || (t.state !== 'resolved' && t.open > 0));
+    const waiting = topics.filter((t) => t.id !== current && t.state !== 'resolved' && !(t.open > 0));
+    return { pills, waiting };
+  }
+
+  // owner is in owner.json order; topics are the pills before the answer. A topic-wide Send omits answered.id.
+  function nextQuestion(owner, topics, answered) {
+    const at = owner.findIndex((q) => q.id === answered.id);
+    const open = (q) => q.state === 'open' && q.id !== answered.id;
+    const same = [...owner.slice(at + 1), ...owner.slice(0, Math.max(at, 0))].find((q) => q.topic === answered.topic && open(q));
+    if (same) return same;
+    const ids = topics.map((t) => t.id);
+    const ti = ids.indexOf(answered.topic);
+    const order = ti < 0 ? ids : [...ids.slice(0, ti).reverse(), ...ids.slice(ti + 1)];
+    for (const id of order) {
+      const q = owner.find((q) => q.topic === id && open(q));
+      if (q) return q;
+    }
+    return owner.find(open) || null;
+  }
+
+  // The line a Send or prototype pick leaves for the board it goes back to, read once by that board's view (app.js).
+  // Kept in sessionStorage, so a board opened later in another tab shows none.
+  const noticeKey = (route) => 'sent:' + route;
+  const sentNotice = {
+    put(route, text) { try { sessionStorage.setItem(noticeKey(route), text); } catch {} },
+    take(route) {
+      try { const t = sessionStorage.getItem(noticeKey(route)) || ''; sessionStorage.removeItem(noticeKey(route)); return t; } catch { return ''; }
+    },
+  };
+
+  Object.assign(globalThis.BoardUI, { choiceLabel, option, answerHistory, questionCard, takes, topicName, topicRow, nextQuestion, sentNotice });
+})();