@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/ui-sidebar.js

@@ -0,0 +1,177 @@
+// The sidebar of every site (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md), drawn from the hub's
+// /_hub/sidebar.json. It needs only ui-page-header.js, loaded before it, for its head, which is the page header itself:
+// the app shell runs it through sidebar.js, and hub/hub.mjs renders the shell's first sidebar with both in a vm context.
+// Its links are root-absolute, since every site and hub page sits beside this one on the hub. sidebar.css styles it.
+(function () {
+  // ui.js replaces the BoardUI global when it loads after this, so the header renderer is held here.
+  const { header } = globalThis.BoardUI || {};
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const svg = (paths, size = 17) => `<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 ICONS = {
+    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"/>',
+    sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/>',
+    pulse: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+    close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
+    up: '<circle cx="12" cy="12" r="9"/><path d="m8 12 4-4 4 4"/><path d="M12 16V8"/>',
+  };
+  const tile = (key, color) => `<span class="icon sm solid" style="--c:${color}" aria-hidden="true">${svg(ICONS[key])}</span>`;
+  const word = (tone, text) => `<span class="dot t-${tone}" aria-hidden="true"></span><span class="word t-${tone}">${esc(text)}</span>`;
+  const usageProducts = (data) => ['claude', 'codex'].filter((p) => data?.[p]);
+  const usageNames = { claude: 'Claude', codex: 'Codex' };
+  function usageClock(iso) {
+    const d = new Date(iso ?? '');
+    if (!Number.isFinite(d.getTime())) return '—';
+    const time = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?([AP])M/i, (_, x) => `${x.toLowerCase()}m`);
+    return new Date().toDateString() === d.toDateString() ? time : `${d.toLocaleDateString([], { weekday: 'short' })} ${time}`;
+  }
+  const usageTone = (w) => !w ? 'none' : w.state === 'stale' ? 'stale' : w.used_percentage >= 90 ? 'full' : w.used_percentage >= 75 ? 'high' : 'ok';
+  const usageBar = (w) => `<span class="u-bar" aria-hidden="true"><i style="width:${w?.state === 'stale' ? 0 : Math.max(0, Math.min(100, w?.used_percentage || 0))}%"></i></span>`;
+  function usageWords(reading, key) {
+    const w = reading[key];
+    if (!w) return 'No reading';
+    if (w.state === 'stale') return `${Math.round(w.used_percentage)}% at ${esc(usageClock(reading.at))}`;
+    if (w.state === 'reset') return `Reset ${esc(usageClock(w.resets_at))}`;
+    return `<span class="u-num">${Math.round(w.used_percentage)}%</span> · resets ${esc(usageClock(w.resets_at))}`;
+  }
+  function sidebarUsage(data) {
+    const products = usageProducts(data);
+    return products.length ? `<span class="sb-usage">${products.map((p) => {
+      const r = data[p];
+      const w = r.five_hour;
+      const name = `<span class="u-name">${usageNames[p]}</span>`;
+      const words = !w ? `${name} · no reading yet`
+        : w.state === 'stale' ? `${name} · last seen ${esc(usageClock(r.at))}`
+          : w.state === 'reset' ? `${name} · reset ${esc(usageClock(w.resets_at))}`
+            : `${name} ${usageWords(r, 'five_hour')}`;
+      return `<span class="u-one u-tone-${usageTone(w)}"><span class="u-line">${words}</span>${usageBar(w)}</span>`;
+    }).join('')}</span>` : '';
+  }
+  // The utility rows, in the order they show.
+  const UTILITY = [
+    { href: '/_hub/', title: 'Hub', icon: tile('pulse', '#64748b') },
+  ];
+  const siteHref = (s) => `/${encodeURIComponent(s.route)}/`;
+
+  // Switch mode's keys (sidebar.js; docs/adr/0056-switch-mode-letters-come-from-names-in-join-order.md): each linked row the
+  // sidebar draws, boards first for numbering, as {href, title, board, num, letter, at}. The first nine boards take num '1'–'9'.
+  // Every row takes as letter the first a–z letter of its title not yet taken, at index `at` of the title's characters,
+  // claiming in this order: boards by `created`, then pages by `created`, a site with none after those with one, then
+  // the Hub rows. So a new board never takes another board's letter. A row with no letter left gets none.
+  function switchKeys(data) {
+    const sites = data?.sites || [];
+    const site = (rank) => (s) => ({ href: siteHref(s), title: String(s.title ?? s.route), board: rank === 0, rank, joined: Date.parse(s.created) });
+    const rows = [...sites.filter((s) => s.board).map(site(0)), ...sites.filter((s) => !s.board).map(site(1)),
+      ...UTILITY.map((f, i) => ({ href: f.href, title: f.title, board: false, rank: 2, joined: i }))];
+    rows.filter((r) => r.board).slice(0, 9).forEach((r, i) => { r.num = String(i + 1); });
+    const when = (r) => (Number.isFinite(r.joined) ? r.joined : Infinity);
+    const taken = new Set();
+    for (const r of [...rows].sort((a, b) => a.rank - b.rank || when(a) - when(b))) {
+      const chars = [...r.title];
+      const at = chars.findIndex((c) => /^[a-z]$/.test(c.toLowerCase()) && !taken.has(c.toLowerCase()));
+      if (at < 0) continue;
+      r.letter = chars[at].toLowerCase();
+      r.at = at;
+      taken.add(r.letter);
+    }
+    return rows.map(({ href, title, board, num, letter, at }) => ({ href, title, board, num, letter, at }));
+  }
+
+  // key: the row's switchKeys entry while switch mode shows, else undefined. The tile carries a board's number, or any
+  // other row's letter, and the title marks its letter; sidebar.css shows them in place of the glyph under .ks-on.
+  // mark: HTML after the title, such as Hub's moon.
+  function row({ href, icon, title, sub = '', extra = '', mark = '', on = false, cls = '', key }) {
+    const shown = key && (key.board ? key.num : key.letter);
+    const tileHtml = shown ? icon.replace(/<\/span>$/, `<span class="ks-key">${esc(shown)}</span></span>`) : icon;
+    const chars = [...title];
+    const titleHtml = key?.letter ? `${esc(chars.slice(0, key.at).join(''))}<span class="ks-u">${esc(chars[key.at])}</span>${esc(chars.slice(key.at + 1).join(''))}` : esc(title);
+    return `<a class="sb-row${on ? ' on' : ''}${cls ? ` ${cls}` : ''}" href="${esc(href)}"${on ? ' aria-current="page"' : ''}>${tileHtml}`
+      + `<span class="sb-text"><span class="sb-title">${titleHtml}${mark}</span>${sub ? `<span class="sb-sub">${sub}</span>` : ''}${extra}</span></a>`;
+  }
+
+  // What waits on the owner on every site but `here`: the count on the logo that opens the drawer.
+  function othersWaiting(data, here) {
+    return (data?.sites || []).reduce((n, s) => n + (s.route === here ? 0 : Number(s.count) || 0), 0);
+  }
+
+  function repoLabel(repo, home) {
+    if (!home) return repo;
+    return repo === home ? '~' : repo.startsWith(`${home}/`) ? `~${repo.slice(home.length)}` : repo;
+  }
+
+  // The shortcuts sheet's rows (sidebar.js opens it on h h), grouped by where each key works. A new shortcut is added
+  // here; the code that answers its key lives with the view it acts on.
+  const SHORTCUTS = [
+    { group: 'Anywhere', rows: [
+      { keys: ['s', 's'], what: 'Switch boards and pages', sub: 'Then the key on a row' },
+      { keys: ['h', 'h'], what: 'This help' },
+      { keys: ['Esc'], what: 'Close', sub: 'The help, a sheet, the drawer or switch mode' },
+    ] },
+    { group: 'On a board', rows: [{ keys: ['n', 'n'], what: 'New card' }] },
+    { group: 'Writing', rows: [{ keys: ['⌘', '↵'], what: 'Send', sub: 'Ctrl ↵ off a Mac' }] },
+  ];
+  // The shortcuts sheet's content, inside its <dialog aria-labelledby="shortcutsTitle">.
+  function shortcuts() {
+    const keycaps = (keys) => `<span class="sc-keys">${keys.map((k) => `<kbd class="sc-key">${esc(k)}</kbd>`).join('')}</span>`;
+    const rowHtml = (r) => `<div class="sc-row"><span class="sc-what">${esc(r.what)}${r.sub ? `<span class="sc-sub">${esc(r.sub)}</span>` : ''}</span>${keycaps(r.keys)}</div>`;
+    return `<div class="sheet-body"><div class="sheet-head"><h2 id="shortcutsTitle">Keyboard shortcuts</h2></div>`
+      + SHORTCUTS.map((g) => `<section class="sc-group" aria-label="${esc(g.group)}"><h3>${esc(g.group)}</h3>${g.rows.map(rowHtml).join('')}</section>`).join('')
+      + '<p class="sc-foot">Press h twice anywhere to open this. Esc to close.</p></div>';
+  }
+
+  function updateRow(update) {
+    return update ? `<button type="button" class="sb-row sb-update-row" data-app-reload${update === 'reloading' ? ' disabled' : ''}>${tile('up', 'var(--accent)')}`
+      + `<span class="sb-text"><span class="sb-title">New version</span></span><span class="sb-go">${update === 'reloading' ? 'Reloading…' : 'Reload'}</span></button>` : '';
+  }
+
+  // data: /_hub/sidebar.json. here: a site's route or a hub page's path without its leading slash. device: this device's push
+  // subscription as sidebar.js finds it, 'on' | 'off' | 'blocked' | 'install' (iOS outside the Home Screen app), or
+  // null while unknown or unsupported. switching: switch mode shows, each row with its key and the hint on the Boards label.
+  // update: null | 'ready' | 'reloading'.
+  function sidebar(data, { here = '', device = null, switching = false, update = null } = {}) {
+    const sites = data?.sites || [];
+    const keys = switching ? new Map(switchKeys(data).map((k) => [k.href, k])) : null;
+    const paused = data?.pause?.state === 'paused';
+    const siteRow = (s) => {
+      const sub = paused && s.board ? word('wait', 'Paused') + (s.sub || '').replace(/<span class="dot [^"]*"[^>]*><\/span><span class="word [^"]*">[^<]*<\/span>/, '') : s.sub;
+      return row({ href: siteHref(s), icon: s.icon, title: s.title, sub: sub ? `<span class="sb-status">${sub}</span>` : '', on: s.route === here, key: keys?.get(siteHref(s)) });
+    };
+    const boards = sites.filter((s) => s.board);
+    const pages = sites.filter((s) => !s.board);
+    const plus = `<span class="icon sb-plus" aria-hidden="true">${svg(ICONS.plus, 20)}</span>`;
+    const pending = (data?.starting || []).map((s) => `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
+      + `<span class="sb-text"><span class="sb-title">${s.failed ? "Didn't start" : s.phase === 'cloning' ? 'Cloning…' : 'Starting…'}</span><span class="sb-sub">${esc(s.title)}${s.repo ? ` · ${esc(repoLabel(s.repo, data.home))}` : ''}${s.failed ? '' : s.phase === 'cloning' ? ' · Cloning from GitHub' : ' · Waiting for the board to answer'}</span>${s.error ? `<span class="sb-sub">${esc(s.error)}</span>` : ''}</span>`
+      + (s.failed ? `<button type="button" class="sb-dismiss" data-dismiss-board="${esc(s.route)}" aria-label="Dismiss ${esc(s.title)}">Dismiss</button>` : '') + '</div>').join('');
+    const newBoard = `<button type="button" class="sb-row sb-new" data-new-board aria-haspopup="dialog">${plus}<span class="sb-text"><span class="sb-title">New board</span></span></button>`;
+    const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', '#ef4444'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
+      : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', '#ef4444'), title: 'Add Claude to your Home Screen', sub: 'Notifications come only to the Home Screen app', cls: 'sb-turnon' })
+      : '';
+    const usage = sidebarUsage(data?.usage);
+    const hub = paused ? { tone: 'wait', word: 'Paused', detail: `until ${usageClock(data.pause.resets_at)}` } : data?.hub;
+    const n = data?.notifications || {};
+    const lower = (text) => String(text || '').replace(/^\w/, (c) => c.toLowerCase());
+    const notify = device === 'blocked' ? word('needs', 'Notifications blocked on this device')
+      : n.state === 'off' ? word('needs', `Notifications ${lower(n.text || 'Off')}`) : '';
+    // A phone shows no title tooltip, so there the moon only marks the hold; the hub page's banner says it.
+    const held = esc(`Notifications ${lower(n.text)}`);
+    const moon = n.state === 'held' ? `<span class="sb-moon" role="img" aria-label="${held}" title="${held}">${svg(ICONS.moon, 13)}</span>` : '';
+    const subs = {
+      '/_hub/': (hub ? `<span class="sb-status">${word(hub.tone, hub.word)}<span>${esc(hub.detail)}</span></span>` : '')
+        + (notify ? `<span class="sb-status">${notify}</span>` : ''),
+    };
+    const selected = here.startsWith('_hub') ? '/_hub' : `/${here.replace(/\/$/, '')}`;
+    const hint = switching ? '<span class="ks-label-hint" role="status">– press a key to switch<i class="ks-bar"></i></span>' : '';
+    const close = `<div class="nav"><button type="button" class="sb-close" data-sidebar-close aria-label="Close boards">${svg(ICONS.close, 20)}</button></div>`;
+    return header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
+      leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } })
+      + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update)}</div><div class="sb-group">`
+      + UTILITY.map((f) => row({ ...f, on: f.href.replace(/\/$/, '') === selected, sub: subs[f.href], mark: f.href === '/_hub/' ? moon : '', ...(f.href === '/_hub/' && usage ? { extra: usage, cls: 'sb-hub-usage' } : {}), key: keys?.get(f.href) })).join('')
+      + `</div>${turnOn}</section>`
+      + (pages.length ? `<section class="sb-pages" aria-label="Pages"><div class="sb-label">Pages</div><div class="sb-group">${pages.map(siteRow).join('')}</div></section>` : '')
+      + `<section class="sb-boards" aria-label="Boards"><div class="sb-label ks-label"><span class="ks-label-text">Boards</span>${hint}</div>`
+      + `<div class="sb-group">${boards.map(siteRow).join('')}${pending}${newBoard}</div></section></div>`;
+  }
+
+  Object.assign(globalThis.BoardUI ||= {}, { sidebar, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
+})();

package/board/public/ui-snapshot.js

@@ -0,0 +1,56 @@
+// The last board this device showed, which the board page paints dimmed until the fresh board lands, and what the
+// page may do meanwhile (docs/adr/0028-the-board-opens-on-the-last-visit.md). Needs ui.js.
+(function () {
+  const VERSION = 1;
+  // Characters, one board's most; app-snapshot.js keeps every board's within three of these.
+  const SNAPSHOT_MAX = 900000;
+  const ACTIVE_LANES = ['review', 'stale', 'progress', 'todo'];
+
+  // threads maps item keys to thread messages (app.js state.threadCache). Threads of `keep` go in first, then the
+  // rest while they fit under max; threads of items no longer on the board are dropped. Null when the board alone won't fit.
+  function packSnapshot(board, threads, { savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
+    const head = `{"v":${VERSION},"savedAt":${JSON.stringify(savedAt)},"board":${JSON.stringify(board)},"threads":{`;
+    if (head.length + 2 > max) return null;
+    const onBoard = new Set(board.items.map((i) => i.key));
+    let out = head;
+    let n = 0;
+    for (const key of new Set([...keep, ...threads.keys()])) {
+      if (!onBoard.has(key) || !threads.has(key)) continue;
+      const part = `${n ? ',' : ''}${JSON.stringify(key)}:${JSON.stringify(threads.get(key))}`;
+      if (out.length + part.length + 2 > max) continue;
+      out += part;
+      n++;
+    }
+    return `${out}}}`;
+  }
+
+  // → {savedAt, board, threads: {key: messages}}, or null for anything packSnapshot didn't write.
+  function unpackSnapshot(raw) {
+    let s;
+    try { s = JSON.parse(raw); } catch { return null; }
+    if (s?.v !== VERSION || !Array.isArray(s.board?.items) || typeof s.savedAt !== 'string' || !Number.isFinite(Date.parse(s.savedAt))) return null;
+    const threads = Object.fromEntries(Object.entries(s.threads && typeof s.threads === 'object' ? s.threads : {}).filter(([, m]) => Array.isArray(m)));
+    return { savedAt: s.savedAt, board: s.board, threads };
+  }
+
+  // The cards whose threads load right after the board, so tapping one opens it filled; open cards load with the board.
+  const preloadKeys = (items, open) => {
+    const opened = new Set(open);
+    return items.filter((i) => ACTIVE_LANES.includes(i.lane) && !opened.has(i.key)).map((i) => i.key);
+  };
+
+  // What the board page takes taps on. view is 'snapshot' while the last visit shows, 'fresh' once a board load landed,
+  // and null before either. blocked selects the controls that send to the host and wait for the fresh board; style.css's
+  // INT-61 block dims the same list.
+  const SNAPSHOT_BLOCKED = ['.actions button', 'button[data-plan]', 'button[data-bump]', 'button[data-confirm="bump"]', 'button[data-edit]', 'button[data-withdraw]',
+    'button[data-check-github]', 'form[data-reply] button[type=submit]', 'form[data-reply] button[data-quick]', 'form[data-reply] button[data-proto]', 'form[data-reply] button[data-confirm]', '.prompt button'].join(', ');
+  const liveControls = (view) => {
+    const fresh = view !== 'snapshot';
+    return { read: true, ask: true, cards: fresh, send: fresh, blocked: fresh ? '' : SNAPSHOT_BLOCKED };
+  };
+
+  // before and after map a line's id to its text; the ids of the lines that are new or read differently flash once.
+  const changedLines = (before, after) => Object.keys(after).filter((id) => globalThis.BoardUI.record(before, id) !== after[id]);
+
+  Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, SNAPSHOT_MAX });
+})();

package/board/public/ui-threads.js

@@ -0,0 +1,81 @@
+// A card's thread: Claude's lines, the owner's messages and their replies. Needs ui.js, ui-links.js and ui-enums.js.
+(function () {
+  const { esc, time, etaLine, replyBody, attachments, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, BUTTON } = globalThis.BoardUI;
+  const VIA = { slack: ' · Slack', github: ' · GitHub' };
+  // A link to a card on this board (#item=<key>) or on another board (/<route>/#item=<key>, an ask's move), or ''.
+  function cardLink(link) {
+    const key = /^(?:\/[\w-]+\/)?#item=([^&]+)/.exec(link)?.[1];
+    if (!key) return '';
+    let ask = key.startsWith('ask:');
+    try { ask = decodeURIComponent(key).startsWith('ask:'); } catch {}
+    return `<a href="${esc(link)}">Open the ${ask ? 'task' : 'card'} →</a>`;
+  }
+  // A message's state comes from domain.mjs threadOf.
+  const stateOf = (m) => m.state || (m.reply ? 'replied' : 'waiting');
+  const msgFooter = (m) => ({
+    working: () => `<div class="reply muted small">${workingLine}</div>`,
+    waiting: () => '<div class="reply muted small">Waiting for Claude…</div>',
+  }[stateOf(m)] || (() => ''))();
+  // Each reply becomes Claude's own message at the time it was written, quoting the owner's message
+  // when other messages came between them. A reply with no time follows its message.
+  const withReplies = (msgs) => {
+    const out = msgs.flatMap((m, i) => [{ m, at: String(m.ts), i, part: 0 },
+      ...(m.eventId && m.reply ? [{ m: { ts: m.reply.at || m.ts, who: 'claude', kind: 'reply', reply: m.reply }, of: m, at: String(m.reply.at || m.ts), i, part: 1 }] : [])]);
+    out.sort((a, b) => a.at.localeCompare(b.at) || a.i - b.i || a.part - b.part);
+    return out.map(({ m, of }, n) => (of ? { ...m, quote: out[n - 1]?.m === of ? '' : of.text || '' } : m));
+  };
+  // A message being edited shows its edit box in place of its text; app-asks.js handles the form.
+  const editForm = (id, text) => `<form class="edit-form" data-edit-form="${esc(id)}"><textarea rows="3">${esc(text)}</textarea>
+        <div class="row"><span></span><span><button type="button" data-edit-cancel>Cancel</button> <button class="primary" type="submit">Save</button></span></div></form>`;
+  const line = (m, links, edits) => (m.kind === 'reply'
+    ? `<div class="msg claude reply-msg"><div class="who">Claude · ${esc(time(m.ts))}</div>${m.quote ? `<blockquote class="quote">${linkText(m.quote, links)}</blockquote>` : ''}<div class="body">${linkHtml(replyBody(m.reply), links)}</div></div>`
+    : m.kind === 'ask-link' ? `<div class="msg link"><a href="${esc(m.link)}">${esc(m.text)} →</a></div>`
+    : m.kind === 'status' ? `<div class="msg builder-status"><span class="working-dot" aria-hidden="true"></span>${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}"><span class="agent-dot" aria-hidden="true"></span>${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
+        ${m.canDelete || m.canEdit ? `<div class="ask-actions">${m.canEdit ? editButton(m.eventId) : ''}${m.canDelete ? withdrawButton(m.eventId) : ''}</div>` : ''}
+        <div class="who">${m.who === 'love' ? 'You' : m.who === 'claude' ? 'Claude' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
+        <div class="body"${edits.has(m.eventId) ? ' hidden' : ''}>${m.html ? linkHtml(m.html, links) : linkText(m.text, links)}</div>${edits.has(m.eventId) ? editForm(m.eventId, edits.get(m.eventId).text) : ''}${attachments(m.files)}
+        ${m.link ? `<div class="small">${cardLink(m.link) || anyLink(m.link, m.link)}</div>` : ''}
+        ${m.eventId ? msgFooter(m) : ''}
+      </div>`);
+
+  const STEP = 3;
+  const NOT_MESSAGE = new Set(['status', 'agent', 'ask-link']);
+  const isMessage = (m) => !NOT_MESSAGE.has(m.kind);
+  // The badge's unread test (domain.mjs othersAt, ui-cards.js unreadCount).
+  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && m.who !== 'love' && String(m.ts) > seenAt;
+  function threadWindow(lines, { seenAt = null, more = 0, upto = null }, edits) {
+    const counted = lines.flatMap((m, i) => (isMessage(m) && (!upto || String(m.ts) <= upto) ? [i] : []));
+    const firstUnread = lines.findIndex((m) => unread(m, seenAt));
+    const unreadSpan = firstUnread < 0 ? 0 : counted.filter((i) => i >= firstUnread).length;
+    const want = Math.max(STEP, unreadSpan) + STEP * more;
+    const pinned = lines.findIndex((m) => m.eventId && (edits.has(m.eventId) || ['waiting', 'working'].includes(stateOf(m))));
+    const start = Math.min(counted.length > want ? counted[counted.length - want] : 0, pinned < 0 ? Infinity : pinned);
+    const hidden = lines.filter((m, i) => i < start && isMessage(m)).length;
+    return { start: hidden ? start : 0, hidden };
+  }
+  const moreButton = (hidden) => `<button type="button" class="thread-more" data-thread-more>Show more <span class="n">· ${hidden} previous message${hidden === 1 ? '' : 's'}</span></button>`;
+
+  // links: the thread's ui-links.js linkContext. edits: the open edit boxes by event id, {text}. view: {seenAt, more,
+  // upto}, the card's seen mark from before it opened, its Show more taps and its newest line's ts when it first drew,
+  // draws the open card's window, so lines after `upto` add below without hiding older ones; null draws every line.
+  function threadMessages(msgs, links = {}, edits = new Map(), view = null) {
+    if (!msgs.length) return '<div class="muted small">No messages here yet.</div>';
+    const lines = withReplies(msgs);
+    const { start, hidden } = view ? threadWindow(lines, view, edits) : { start: 0, hidden: 0 };
+    const shown = lines.slice(start);
+    if (start && shown[0].kind === 'reply' && !shown[0].quote) shown[0] = { ...shown[0], quote: lines[start - 1].text || '' };
+    return (hidden ? moreButton(hidden) : '') + shown.map((m) => line(m, links, edits)).join('');
+  }
+
+  // The reply form's Done, just left of Send, on every card not in Done: an ask's sends ask-done, a work card's or
+  // follow-up's card-done, which reads "Closing…" until the session sets its status
+  // (docs/adr/0035-an-ask-can-wait-in-progress-until-the-owner-marks-it-done.md).
+  function doneButton(it, sending = false) {
+    if (!it?.finishable) return '';
+    const closing = it.kind !== 'ask' && (sending || it.closing);
+    return `<button type="button"${it.resolvedBy === BUTTON.markDone ? ' class="resolves"' : ''} data-confirm="finish" data-key="${esc(it.key)}"${closing ? ' disabled' : ''}>${closing ? 'Closing…' : 'Done'}</button>`;
+  }
+
+  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton });
+})();

package/board/public/ui.js

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