@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/ui-questions.js

@@ -0,0 +1,151 @@
+// Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
+(function () {
+  const { esc, time, replyBody, attachments, attachButton, protoButton, 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, disabled = false }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${disabled ? ' disabled' : ''}>
+        <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 SPIN = '<span class="try-spin" aria-hidden="true"></span>';
+  // A question's eye sends `prototype-request {key?, question, note, choice}` for that question alone (view-questions.js);
+  // once sent, the eye is off with a "prototype requested" badge right after it until the round arrives.
+  const questionEye = (q) => q.state === 'resolved' ? ''
+    : protoButton('q:' + q.id, null, { label: 'Ask for a prototype instead', disabled: q.state === 'requested' })
+      + (q.state === 'requested' ? badge('normal', `${SPIN}prototype requested`) : '');
+  const noteComposer = (q, note) => `<div class="composer" data-composer="${esc('q:' + q.id)}"><textarea class="note" rows="2" placeholder="Note (optional)"${q.state === 'requested' ? ' disabled' : ''}>${esc(note || '')}</textarea>
+      <div class="note-tools">${attachButton()}${questionEye(q)}<div class="pending-files" data-files></div></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' },
+  };
+  // docs/adr/0111-a-prototype-round-ends-with-a-one-take-confirm.md
+  // A topic's latest prototype round from /api/board ownerTopics: {n, state: making|back|closed, take}.
+  const roundChip = (r) => !r ? ''
+    : r.state === 'making' ? badge('notice', `${SPIN}Prototype round ${r.n}`)
+    : r.state === 'closed' ? badge('quiet', `Round ${r.n} closed · take ${esc(r.take)}`)
+    : badge('normal', `Prototype round ${r.n}`);
+  const RULE_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>';
+  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>` : a.acted ? '' : '<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;
+    const disabled = q.state === 'requested';
+    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, disabled })).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, disabled })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
+  }
+  // A confirm links its one take alone, and says why it is asked.
+  const confirmLines = (q) => !q.confirm_of || q.state === 'resolved' ? ''
+    : `<a class="pill proto pr-open" href="${esc(withParam(q.url, 'take', q.options[0].id))}">Open the prototype →</a>${q.state === 'open' ? `<div class="pr-rule">${RULE_ICON}A pick with a note gets a one-take confirm once Claude has updated the take.</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.
+  // A requested question shows the note and pick its prototype was asked with, locked.
+  function questionCard(q, { n = 0, draft = {}, links = {}, fit = () => null } = {}) {
+    const last = q.answers[q.answers.length - 1];
+    const busy = q.state === 'requested';
+    const shown = busy ? q.request : draft;
+    const chosen = shown.choice ?? (last ? last.choice : null);
+    return `<section class="q ${q.urgent && q.state === 'open' ? 'urgent' : ''}${busy ? ' pr-busy' : ''}" 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>${busy ? '' : badge(QUESTION_STATE[q.state].tone, esc(QUESTION_STATE[q.state].label))}</div>
+      <h3>${linkText(q.question, links)}</h3>
+      ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
+      ${framed(q) ? '' : questionLink(q.url)}
+      ${confirmLines(q)}
+      ${q.state === 'resolved' && q.resolved ? `<div class="small muted" style="margin-bottom:8px">Resolved: ${esc(q.resolved)}${/[.!?]$/.test(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, disabled: busy })).join('')}
+      ${noteComposer(q, shown.note)}
+      ${answerHistory(q, links)}
+    </section>`;
+  }
+  // A card's pill is its ID, or for an ask (item:ask:<id>) the time it appeared; other topics keep their title.
+  const topicName = (t) => (t.askedAt ? BoardUI.cardTime(t.askedAt) : (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, roundChip, takes, topicName, topicRow, nextQuestion, sentNotice });
+})();

package/board/public/ui-sidebar.js

@@ -0,0 +1,215 @@
+// 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>';
+  }
+
+  const ticketsLabel = (t) => (t.source === 'internal' ? `Internal · ${t.prefix}` : t.source === 'github' ? `GitHub issues${t.account ? ` · ${t.account}` : ''}` : `Linear · ${t.team}`);
+  // A board's context window: its owner session's latest percent, dimmed with its age once older than ten minutes.
+  const CTX_STALE_MIN = 10;
+  function contextWords(ctx) {
+    if (!ctx) return '';
+    const minutes = Math.floor((Date.now() - Date.parse(ctx.at)) / 60_000);
+    if (!(minutes >= CTX_STALE_MIN)) return `<span class="sb-ctx">${Math.round(ctx.percent)}% ctx</span>`;
+    const age = minutes < 60 ? `${minutes} min` : minutes < 1440 ? `${Math.floor(minutes / 60)} h` : `${Math.floor(minutes / 1440)} d`;
+    return `<span class="sb-ctx stale">${Math.round(ctx.percent)}% ctx · ${age} ago</span>`;
+  }
+  function askedWhen(iso, now) {
+    const minutes = Math.floor((now - Date.parse(iso)) / 60_000);
+    return minutes < 1 ? 'just now' : minutes < 60 ? `${minutes} min ago` : usageClock(iso);
+  }
+  // The sheet a failed start's row opens (sidebar.js), inside its <dialog aria-labelledby="failedStartTitle">: the error,
+  // what the start used and when it was asked, then Dismiss and Retry. s: a /_hub/sidebar.json starting entry. Only a
+  // New board start records a branch, and only that start can run again, so a row without one has no Retry.
+  function failedStart(s, { home, now = Date.now() } = {}) {
+    const fact = (name, value) => (value ? `<dt>${name}</dt><dd>${value}</dd>` : '');
+    return `<div class="sheet-body"><div class="sheet-head"><h2 id="failedStartTitle">${esc(s.title)} failed to start</h2><button type="button" data-failed-close aria-label="Close sheet">✕</button></div>`
+      + `<p class="fs-error">${esc(s.error || "Its session didn't answer within 15 minutes.")}</p>`
+      + `<dl class="fs-facts">${fact('Repo', s.repo && esc(repoLabel(s.repo, home)))}${fact('Branch', s.branch && `<code>${esc(s.branch)}</code>`)}`
+      + `${fact('Tickets', s.tickets && esc(ticketsLabel(s.tickets)))}${fact('Asked', s.askedAt && esc(askedWhen(s.askedAt, now)))}</dl>`
+      + '<p class="fs-refused" role="alert" hidden></p>'
+      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
+  }
+
+  // The New version row. update: the app's reload, null | 'ready' | 'reloading', which comes first. upgrade:
+  // /_hub/sidebar.json's npm update, null | {state: available | waiting | updating | failed, version, builders, error}
+  // (hub/upgrade.mjs; docs/adr/0161-the-hub-offers-a-newer-kickflip-from-npm.md).
+  function updateRow(update, upgrade) {
+    const button = (attr, disabled, title, sub, go) => `<button type="button" class="sb-row sb-update-row" ${attr}${disabled ? ' disabled' : ''}>${tile('up', 'var(--accent)')}`
+      + `<span class="sb-text"><span class="sb-title">${title}</span>${sub ? `<span class="sb-sub">${esc(sub)}</span>` : ''}</span>${go ? `<span class="sb-go">${go}</span>` : ''}</button>`;
+    if (update) return button('data-app-reload', update === 'reloading', 'New version', '', update === 'reloading' ? 'Reloading…' : 'Reload');
+    if (!upgrade) return '';
+    if (upgrade.state === 'waiting') return button('data-app-upgrade', true, `Update waits for ${upgrade.builders} implementer${upgrade.builders === 1 ? '' : 's'}`, '', '');
+    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Update available', '', 'Updating…');
+    if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Upgrade');
+    return button('data-app-upgrade', false, 'Update available', '', 'Upgrade');
+  }
+
+  // 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 || s.ctx ? `<span class="sb-status">${sub}${contextWords(s.ctx)}</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) => (s.failed
+      ? `<button type="button" class="sb-row sb-starting sb-failed" data-starting="${esc(s.route)}" data-failed-start="${esc(s.route)}" aria-haspopup="dialog">${plus}`
+        + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span><span class="sb-sub">failed to start</span></span></button>`
+      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
+        + `<span class="sb-text"><span class="sb-title">${s.phase === 'cloning' ? 'Cloning…' : 'Starting…'}</span><span class="sb-sub">${esc(s.title)}${s.repo ? ` · ${esc(repoLabel(s.repo, data.home))}` : ''}${s.phase === 'cloning' ? ' · Cloning from GitHub' : ' · Waiting for the board to answer'}</span></span></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', 'var(--accent)'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
+      : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), 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, data?.upgrade)}</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, failedStart, updateRow, othersWaiting, switchKeys, shortcuts, repoLabel, usageProducts, usageNames, usageClock, usageTone, usageBar, usageWords });
+})();

package/board/public/ui-snapshot.js

@@ -0,0 +1,62 @@
+// 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 () {
+  // 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. build is the saving page's
+  // (app.html data-build). Null when the board alone won't fit.
+  function packSnapshot(board, threads, { build, savedAt, keep = [], max = SNAPSHOT_MAX } = {}) {
+    const head = `{"build":${JSON.stringify(build)},"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 under this build: code
+  // from another build may read the board's shape differently, and a paint that throws stops the live load.
+  function unpackSnapshot(raw, build) {
+    let s;
+    try { s = JSON.parse(raw); } catch { return null; }
+    if (s?.build !== build || !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-card-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]);
+
+  // What counts as a card's update: a new thread line, a status or Next line change, or a PR or CI change
+  // (docs/adr/0135-an-updated-card-takes-a-brief-tint.md). Two board items read the same exactly when it is unchanged.
+  const updateSign = (it) => JSON.stringify([it.threadCount ?? 0, it.status ?? null, it.builder?.progress ?? null, it.working ?? null, it.waitsOn ?? null,
+    it.next ?? null, it.ask?.state ?? null, it.pr ? [it.pr.state, it.pr.isDraft, it.pr.reviewDecision, it.pr.checks?.state ?? null] : null]);
+
+  Object.assign(globalThis.BoardUI, { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX });
+})();

package/board/public/ui-threads.js

@@ -0,0 +1,90 @@
+// 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>`;
+  // batched: an answer followed by another of the owner's answers in its state, which carries the batch's Waiting for Claude.
+  const line = (m, links, edits, batched = false) => (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${m.planner ? ' planner' : ''}"><span class="working-dot" aria-hidden="true"></span>${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'calls' ? `<details class="msg calls"><summary>${esc(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
+    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}"><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 && !batched ? msgFooter(m) : ''}
+      </div>`);
+
+  const STEP = 3;
+  const UNREAD_CAP = 10;
+  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link']);
+  const isMessage = (m) => !NOT_MESSAGE.has(m.kind);
+  // Only Claude's and GitHub's messages are unread, as on the badge (domain.mjs othersAt, ui-cards.js unreadCount).
+  const unread = (m, seenAt) => Boolean(seenAt) && isMessage(m) && (m.who === 'claude' || m.via === 'github') && String(m.ts) > seenAt;
+  const batchedAt = (lines, i) => {
+    const next = lines.slice(i + 1).find(isMessage);
+    return lines[i].kind === 'owner-answer' && next?.kind === 'owner-answer' && stateOf(next) === stateOf(lines[i]);
+  };
+  // The window opens from the oldest unread message, at most UNREAD_CAP messages back; a message being edited always shows.
+  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, Math.min(UNREAD_CAP, unreadSpan)) + STEP * more;
+    const pinned = lines.findIndex((m) => m.eventId && edits.has(m.eventId));
+    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, i) => line(m, links, edits, batchedAt(lines, start + i))).join('');
+  }
+
+  // The reply form's Done sends ask-done or card-done; the board applies it before the session follows up.
+  // docs/adr/0106-the-board-applies-the-owners-hold-resume-and-done-at-once.md
+  // Orange while it clears an ask's Action needed, primary while a reopened card waits only on it
+  // (docs/adr/0136-a-card-waiting-only-to-be-closed-has-no-action-needed.md).
+  function doneButton(it) {
+    if (!it?.finishable) return '';
+    const tone = it.resolvedBy === BUTTON.markDone ? 'resolves' : it.awaitsDone ? 'closes' : '';
+    return `<button type="button"${tone ? ` class="${tone}"` : ''} data-confirm="finish" data-key="${esc(it.key)}">Done</button>`;
+  }
+
+  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton });
+})();