@lovek4d/kickflip 0.6.0 → 0.7.0

package/board/public/app-reader.js

@@ -1,11 +1,13 @@
-// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "Open the log"
+// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "View transcript"
 // (ui-threads.js) and a card's or a lineup's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
 // place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
 // and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
 // A link in it closes it first, then opens through the shell.
-// A log written as a stream (headless.mjs: one stream-json event per line) reads as lines, what Claude says and each
-// tool call, with a raw toggle for the file as it is; any other log reads as its text. It is re-read every 3 seconds
-// until the run's result arrives, and follows new lines while read at its end.
+// A log written as a stream (headless.mjs: one stream-json event per line) reads as the run's transcript, the whole of
+// it as GET /api/transcript's rows: what Claude says, and each tool call as one line whose output opens on a tap, with a
+// raw toggle for the file as it is (docs/adr/2026-11-07-1224-view-transcript-reads-the-whole-run-as-rows.md); any other
+// log reads as its text. Every 3 seconds until the run's result arrives it reads on from where it left off, and follows
+// new lines while read at its end.
 BoardView.part((B) => {
   const { $, state } = B;
   const { esc, markdown, linkContext } = BoardUI;
@@ -19,31 +21,13 @@ BoardView.part((B) => {
   let log = null;
   let stopReading = null;
 
-  // → the log's lines, each a stream event or, for a line that isn't one, its text; null when no line is an event.
-  function streamOf(text) {
-    const lines = text.split('\n');
-    if (lines.at(-1) === '') lines.pop();
-    const read = (line) => { try { const e = JSON.parse(line); return typeof e?.type === 'string' ? e : null; } catch { return null; } };
-    const events = lines.map(read);
-    return events.some(Boolean) ? lines.map((line, i) => events[i] ?? line) : null;
+  // A row of the transcript (transcript.mjs); a call with its output opens it on a tap of its line.
+  function rowHtml(r, i) {
+    const tag = r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : '';
+    if (r.out === undefined) return `<div class="reader-row ${r.kind}">${tag}${esc(r.body)}</div>`;
+    const on = log.opened.has(i);
+    return `<div class="reader-row tool call" data-call="${i}"><span class="reader-caret">${on ? '▾' : '▸'}</span>${tag}${esc(r.body)}</div>${on ? `<div class="reader-out">${esc(r.out)}</div>` : ''}`;
   }
-  const short = (v) => (v.length > 400 ? `${v.slice(0, 400)}…` : v);
-  const textOf = (content) => (typeof content === 'string' ? content : content.map((part) => part.text ?? '').join('\n'));
-  const callOf = (input) => input.command ?? input.file_path ?? input.pattern ?? input.url ?? input.description ?? JSON.stringify(input);
-  // A stream line's readable rows {kind, label, body}. Thinking and events other than the start, messages and the
-  // result have none; the raw view shows them.
-  function rowsOf(e) {
-    if (typeof e === 'string') return [{ kind: 'out', body: e }];
-    if (e.type === 'system') return e.subtype === 'init' ? [{ kind: 'sys', label: 'start', body: `${e.model} in ${e.cwd}` }] : [];
-    if (e.type === 'result') return [{ kind: 'text end', label: e.is_error ? 'stopped' : 'done', body: e.result ?? e.subtype }];
-    if (e.type !== 'assistant' && e.type !== 'user') return [];
-    const content = e.message.content;
-    if (typeof content === 'string') return [{ kind: 'text', body: content }];
-    return content.flatMap((c) => (c.type === 'text' ? [{ kind: 'text', body: c.text }]
-      : c.type === 'tool_use' ? [{ kind: 'tool', label: c.name.toLowerCase(), body: callOf(c.input) }]
-      : c.type === 'tool_result' ? [{ kind: 'out', body: short(textOf(c.content)) }] : []));
-  }
-  const rowHtml = (r) => `<div class="reader-row ${r.kind}">${r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : ''}${esc(r.body)}</div>`;
 
   const atEnd = () => body.scrollHeight - body.scrollTop - body.clientHeight < 40;
   const toEnd = () => { body.scrollTop = body.scrollHeight; };
@@ -57,11 +41,11 @@ BoardView.part((B) => {
     if (log?.unseen) more.textContent = `${log.unseen} new ${log.unseen === 1 ? 'line' : 'lines'} ↓`;
   }
   function drawLog() {
-    const { text, stream, raw } = log;
-    body.innerHTML = !text ? '<p class="muted reader-empty">The log is empty so far.</p>'
-      : !stream ? `<pre class="reader-text">${esc(text)}</pre>`
-      : raw ? `<pre class="reader-raw">${esc(text)}</pre>`
-      : stream.flatMap(rowsOf).map(rowHtml).join('');
+    const { rows, stream, raw, text } = log;
+    body.innerHTML = !rows.length ? '<p class="muted reader-empty">The log is empty so far.</p>'
+      : !stream ? `<pre class="reader-text">${esc(rows.map((r) => `${r.body}\n`).join(''))}</pre>`
+      : raw ? (text === null ? '<p class="muted">Loading…</p>' : `<pre class="reader-raw">${esc(text)}</pre>`)
+      : rows.map(rowHtml).join('');
     drawTools();
     drawMore();
   }
@@ -73,24 +57,44 @@ BoardView.part((B) => {
     drawMore();
   }
 
+  // Reads the transcript on from where the last read ended; an output joins its call's line.
   async function readLog(n) {
     let answer;
     try {
-      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { cache: 'no-store' });
+      const r = await fetch(B.site.url(`api/transcript?file=${encodeURIComponent(log.file)}&from=${log.next}`), { cache: 'no-store' });
       answer = { ok: r.ok, ...(await r.json()) };
     } catch { answer = null; }
     if (n !== opened) return;
     if (answer && !answer.ok) { body.innerHTML = `<p class="muted">${esc(answer.error || 'Could not load this log.')}</p>`; return; }
-    if (answer && answer.size !== log.size) {
-      const before = log.stream?.length ?? 0;
-      const stream = streamOf(answer.text);
-      Object.assign(log, { size: answer.size, text: answer.text, stream, finished: Boolean(stream?.some((e) => e.type === 'result')) });
-      if (!log.following) log.unseen += Math.max(0, (stream?.length ?? 0) - before);
+    if (answer && (!log.read || answer.next !== log.next)) {
+      let added = 0;
+      for (const row of answer.rows) {
+        if (row.for) { log.calls.get(row.for).out = row.body; continue; }
+        if (row.id) log.calls.set(row.id, row);
+        log.rows.push(row);
+        added++;
+      }
+      Object.assign(log, { read: true, next: answer.next, stream: log.stream || answer.stream, finished: log.finished || answer.finished });
+      if (!log.following) log.unseen += added;
       drawLog();
       if (log.following) toEnd();
+      if (log.raw) readRaw(n);
     }
     if (!log.finished) stopReading = B.later(3000, () => readLog(n));
   }
+  // The raw toggle's file as it is: GET /api/log, its last 256 KiB.
+  async function readRaw(n) {
+    let text;
+    try {
+      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { cache: 'no-store' });
+      const answer = await r.json();
+      text = r.ok ? answer.text : answer.error;
+    } catch { text = 'Could not load this log.'; }
+    if (n !== opened || !log.raw) return;
+    log.text = text;
+    drawLog();
+    if (log.following) toEnd();
+  }
 
   function show(title, ref) {
     opened++;
@@ -107,8 +111,8 @@ BoardView.part((B) => {
     return opened;
   }
   function openLog(file) {
-    const n = show(`${file.split('-')[0]} log`, file);
-    log = { file, size: -1, text: '', stream: null, raw: false, following: true, unseen: 0, finished: false };
+    const n = show(`${file.split('-')[0]} transcript`, file);
+    log = { file, read: false, next: 0, rows: [], calls: new Map(), opened: new Set(), stream: false, finished: false, raw: false, text: null, following: true, unseen: 0 };
     readLog(n);
   }
   async function openNotes(search) {
@@ -147,8 +151,14 @@ BoardView.part((B) => {
     if (ev.target === sheet) { close(); return; }
     const act = ev.target.closest('[data-reader]')?.dataset.reader;
     if (act === 'close') close();
-    else if (act === 'raw') { log.raw = !log.raw; drawLog(); follow(); }
+    else if (act === 'raw') { log.raw = !log.raw; log.text = null; drawLog(); follow(); if (log.raw) readRaw(opened); }
     else if (act === 'end') follow();
+    const call = ev.target.closest('[data-call]');
+    if (call) {
+      const i = Number(call.dataset.call);
+      if (!log.opened.delete(i)) log.opened.add(i);
+      drawLog();
+    }
     const a = ev.target.closest('a[href]');
     if (!a || !plainTap(ev) || (a.target && a.target !== '_self')) return;
     ev.preventDefault();

package/board/public/app-threads.js

@@ -1,7 +1,7 @@
 // A card's thread on the board view: loading and rendering it, and its reply box. Needs app-core.js.
 BoardView.part((B) => {
   const { $, store, state, quieted, sendDraft, links } = B;
-  const { esc, setHTML, threadMessages, dropZone, sendButton, protoButton, grillButton, visualButton, attachButton, doneButton, doneTone, waitOn, newQuestionsLine } = BoardUI;
+  const { esc, setHTML, threadMessages, dropZone, sendButton, protoButton, grillButton, visualButton, attachButton, doneButton, doneTone, waitOn, newQuestionsLine, BUTTON } = BoardUI;
 
   const REQUEST_EVENT = { prototype: 'prototype-request', grill: 'grill-more', visual: 'visual-request' };
   // A /prototype, /grill or /visual word in a message, the last one winning, and the message without it.
@@ -16,14 +16,18 @@ BoardView.part((B) => {
   // A Todo card's reply box sends with Reply (intent: 'reply') or Implement (intent: 'build'), which is the card's build
   // action: builder orange once the card is ready, quiet before. An In Review card's box has Done then Reply
   // (ui-threads.js doneButton), Done in its tone. Any other card's box sends with Send, carrying no intent. A pair wraps
-  // onto its own line under the row.
-  const REVIEW = new Set(['review', 'stale']);
-  const sendsOf = (item) => (item?.lane === 'todo' ? (item.ready ? 'todo-ready' : 'todo')
-    : REVIEW.has(item?.lane) ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one');
+  // onto its own line under the row. Send or Reply is orange while a message clears the card's Action needed, as on a
+  // card the orchestrator stalled (docs/adr/2026-11-06-1252-stale-is-automatic-stalled-is-the-orchestrators-flag.md).
+  const replyTone = (item) => (item?.resolvedBy === BUTTON.reply ? 'resolves' : undefined);
+  const sendsOf = (item) => [item?.lane === 'todo' ? (item.ready ? 'todo-ready' : 'todo')
+    : item?.lane === 'review' ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one', replyTone(item) && 'reply-resolves'].filter(Boolean).join(' ');
   const pair = (kind, html) => `<span class="send-actions" data-sends="${kind}">${html}</span>`;
-  const sends = (kind, item) => (kind === 'one' ? `<span data-sends="one">${sendButton('Send', 0)}</span>`
-    : kind.startsWith('review') ? pair(kind, `${doneButton(item)}${sendButton('Reply', 0, ' data-intent="reply"')}`)
-    : pair(kind, `${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${sendButton('Reply', 0, ' data-intent="reply"')}`));
+  const sends = (kind, item) => {
+    const reply = (label, attrs = '') => sendButton(label, 0, attrs, replyTone(item));
+    return kind.startsWith('one') ? `<span data-sends="${kind}">${reply('Send')}</span>`
+      : kind.startsWith('review') ? pair(kind, `${doneButton(item)}${reply('Reply', ' data-intent="reply"')}`)
+      : pair(kind, `${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${reply('Reply', ' data-intent="reply"')}`);
+  };
   // The board, not the thread, decides the send buttons, so they follow each board load even when the thread is unchanged.
   function syncSends(el, key) {
     const at = el.querySelector('form [data-sends]');
@@ -140,8 +144,8 @@ BoardView.part((B) => {
     const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    // An empty box still sends Implement, the card's build action: the board server marks the card ready as it is and
-    // starts the build at once (docs/adr/2026-11-06-0021-a-button-without-a-text-box-posts-a-keyed-status-line.md).
+    // An empty box still sends Implement, the card's build action: the board server stages the card for the
+    // orchestrator's review (docs/adr/2026-11-06-0021-a-button-without-a-text-box-posts-a-keyed-status-line.md).
     const intent = flag ? null : button.dataset.intent || null;
     if ((!flag && !text && !files.length && intent !== 'build') || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;

package/board/public/app.html

@@ -22,7 +22,7 @@ window.BoardBoot = (function () {
   const get = (u) => { const p = fetch(base + u, { cache: 'no-store' }).then((r) => (r.ok ? r.json().catch(() => { throw unanswered(r); }) : Promise.reject(unanswered(r)))); p.catch(() => {}); return p; };
   let open = [];
   try { open = JSON.parse(localStorage.getItem(`site:${route}:openItems`) || '[]'); } catch {}
-  const focus = /^#item=([^&]+)/.exec(location.hash);
+  const focus = /[#&](?:selectedCard|item)=([^&]+)/.exec(location.hash);
   if (focus) open.push(decodeURIComponent(focus[1]));
   let since = null;
   try { const c = JSON.parse(localStorage.getItem(`site:${route}:copyVersion`) || 'null'); if (c?.build === document.documentElement.dataset.build && Number.isInteger(c.version)) since = c.version; } catch {}

package/board/public/app.js

@@ -173,7 +173,7 @@ window.BoardView = (function () {
     };
   }
 
-  // The board itself, after every part: rendering, the #item= hash, loading and the change signal.
+  // The board itself, after every part: rendering, the URL fragment, loading and the change signal.
   function start(B) {
     const { $, $$, store, state, steady, markSeen } = B;
     const { setHTML, preloadKeys } = BoardUI;
@@ -206,31 +206,41 @@ window.BoardView = (function () {
     }
 
     // #review=<PR number> opens that review in the Auto Review lane (app-lanes.js openReview), as a held review's push does.
-    // #item=<wave>/<id> opens that card; push notifications link here, with &reply to land in the thread's reply box
+    // #selectedCard=<wave>/<id> (or the older #item=) opens that card, and &openItemsCard=<topic id> opens that pill in the pane; push notifications link here, with &reply to land in the thread's reply box
     // (docs/adr/2026-10-29-1639-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
     let focusKey = null;
     let replyKey = null;
     let hashRead = false;
     // A board this page left goes back to where the owner left it once it first renders, unless its URL names a card.
-    const returnToPlace = () => B.restorePlace({ linked: /^#(?:item|review)=/.test(location.hash) });
+    const returnToPlace = () => B.restorePlace({ linked: /^#(?:selectedCard|item|review)=/.test(location.hash) });
+    // The pane's pill the fragment names opens once the pane has loaded; a phone has no pane, its pill is the Waiting on
+    // you page (shell.js go).
+    function openPill(id, tries = 50) {
+      if (!id || !matchMedia('(min-width: 900px)').matches || B.focusQuestion?.(id) || tries <= 0) return;
+      B.later(100, () => openPill(id, tries - 1));
+    }
     function readHash() {
-      const review = /^#review=(\d+)$/.exec(location.hash);
-      if (review && state.board) { B.openReview(Number(review[1])); return; }
-      const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
-      if (!m) return;
-      focusKey = decodeURIComponent(m[1]);
-      focusKey = BoardUI.record(state.board?.moved, focusKey) || focusKey;
-      replyKey = m[2] ? focusKey : null;
+      const { selectedCard, openItemsCard, review, reply } = AppRouter.fragmentOf(location.hash);
+      if (review && state.board) { B.openReview(review); return; }
+      openPill(openItemsCard);
+      if (!selectedCard) return;
+      focusKey = BoardUI.record(state.board?.moved, selectedCard) || selectedCard;
+      replyKey = reply ? focusKey : null;
       state.openItems.add(focusKey);
       state.restored.delete(focusKey);
       const it = state.board?.items.find((i) => i.key === focusKey);
       if (it) { const s = store.get('lanes', {}); s[it.lane] = true; store.set('lanes', s); B.openBand({ key: focusKey }); }
       if (it?.fold) store.set(B.FOLDS[it.fold].store, true);
     }
+    // The owner's own moves rewrite the fragment in place, with no history entry and no hashchange.
+    B.saveFragment = (changes) => {
+      const hash = AppRouter.hashWith(location.hash, changes);
+      if (hash !== location.hash) history.replaceState(history.state, '', location.pathname + location.search + hash);
+    };
     B.on(window, 'hashchange', () => { readHash(); if (state.board) { render(); scrollToFocus(); } });
     // A card link whose hash is already the page's fires no hashchange, so its tap opens the card here.
     B.on(B.root, 'click', (ev) => {
-      const a = ev.target.closest?.('a[href^="#item="]');
+      const a = ev.target.closest?.('a[href^="#item="], a[href^="#selectedCard="]');
       if (!a || ev.defaultPrevented || a.getAttribute('href') !== location.hash || !state.board) return;
       ev.preventDefault();
       readHash(); render(); scrollToFocus();
@@ -239,7 +249,7 @@ window.BoardView = (function () {
     function focusOnBoard({ key, slug }) {
       const band = slug && state.board?.waveBands?.find((b) => b.slug === slug);
       if (!band && !state.board?.items.some((i) => i.key === key)) return false;
-      if (key) { location.hash = `#item=${encodeURIComponent(key)}`; readHash(); } else B.openBand({ slug });
+      if (key) { location.hash = AppRouter.hashWith(location.hash, { selectedCard: key }); readHash(); } else B.openBand({ slug });
       render();
       if (key) scrollToFocus(); else $(`section.wb[data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
       return true;

package/board/public/progress-review.js

@@ -15,10 +15,10 @@
     const { BUILD_PHASES, START_STEPS } = BoardUI;
     const build = () => [...BUILD_PHASES];
     return [
-      { id: 'grill', name: 'Grilling', lane: 'todo', when: 'A grill planner reads a Todo card and asks its questions', steps: build(),
-        card: { builder: { planner: true, kind: 'grill', progress: 'Grilling · the notes', phase: null, at: ago(2) } } },
-      { id: 'prototype', name: 'Prototyping', lane: 'todo', when: 'A prototype planner draws a Todo card’s takes', steps: build(),
-        card: { builder: { planner: true, kind: 'prototype', progress: 'Prototyping · the takes', phase: null, at: ago(2) } } },
+      { id: 'grill', name: 'Grilling', lane: 'todo', when: 'A grill planner reads a Todo card and asks its questions', steps: [],
+        card: { phase: 'grilling', builder: { planner: true, kind: 'grill', progress: 'Grilling · the notes', phase: null, at: ago(2) } } },
+      { id: 'prototype', name: 'Prototyping', lane: 'todo', when: 'A prototype planner draws a Todo card’s takes', steps: [],
+        card: { phase: 'prototyping', builder: { planner: true, kind: 'prototype', progress: 'Prototyping · the takes', phase: null, at: ago(2) } } },
       { id: 'build', name: 'Build', lane: 'progress', when: 'A builder works the card, step by step', steps: build(),
         card: { builder: { progress: 'Testing · the suite', phase: 'testing', at: ago(2) } } },
       { id: 'check', name: 'Orchestrator review', lane: 'progress', when: 'The orchestrator checks the builder’s calls, on step 4', steps: build(),

package/board/public/prototype-kit.js

@@ -205,25 +205,39 @@
     const stage = document.getElementById('stage');
     let at = { take: null, state: null };
     let frame = null;
+    // The run the frame shows: its since from api/try/prototypes.
+    let framed = null;
     let origin = null;
     let started = false;
     const serve = () => fetch(site.url('api/try'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: 'prototypes' }) }).catch(() => {});
     const post = () => frame.contentWindow.postMessage({ kickflip: 'prototype', ...at }, origin);
+    // Polls the serve while the page is open (docs/adr/2026-11-07-1231-a-base-move-restarts-the-prototype-serve-and-a-demo-hub-never-restarts-itself.md):
+    // a ready run the frame doesn't show, the first or a new one after a restart or a base move, gets a new frame at the
+    // current take and state; a serve that's down shows Starting. A poll that can't reach the board leaves the stage.
     async function poll() {
-      let run = {};
-      try { run = await (await fetch(site.url('api/try/prototypes'), { cache: 'no-store' })).json(); } catch { /* the board is out of reach; ask again */ }
+      let run;
+      try { run = await (await fetch(site.url('api/try/prototypes'), { cache: 'no-store' })).json(); } catch {
+        if (!frame) stage.innerHTML = servedStatus({});
+        wait(poll, 1500);
+        return;
+      }
       if (run.state === 'ready' && run.https) {
-        const src = servedSrc({ https: run.https, path: data.served, ...at });
-        origin = new URL(src).origin;
-        frame = document.createElement('iframe');
-        frame.className = 'kit-served';
-        frame.title = data.title;
-        frame.src = src;
-        // A switch made while the page loaded reaches it once it has.
-        nativeAdd.call(frame, 'load', post);
-        stage.replaceChildren(frame);
+        if (!frame || (run.since ?? null) !== framed) {
+          const src = servedSrc({ https: run.https, path: data.served, ...at });
+          origin = new URL(src).origin;
+          framed = run.since ?? null;
+          frame = document.createElement('iframe');
+          frame.className = 'kit-served';
+          frame.title = data.title;
+          frame.src = src;
+          // A switch made while the page loaded reaches it once it has.
+          nativeAdd.call(frame, 'load', post);
+          stage.replaceChildren(frame);
+        }
+        wait(poll, 3000);
         return;
       }
+      frame = null;
       stage.innerHTML = servedStatus(run);
       // A serve that's down is started once from here; a failed one waits for Try again.
       if (!run.state && !started) { started = true; serve(); }

package/board/public/prototype-switcher.js

@@ -1,13 +1,15 @@
-// The full-bleed prototype viewer's floating controls (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
+// The full-bleed prototype viewer's controls (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
 // docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md,
-// docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md).
+// docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md,
+// docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md).
 // Load it with a relative src after claude.js, on a page whose header leads with the back arrow, then call
 //   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, states: { empty: 'No cards', … }?, initial: 'A', render(take, state) {…}, above: el? })
 // render runs at mount and on each switch of take or state; sw.take is the current key. A served round's named states
 // (docs/adr/2026-11-06-1500-a-prototype-round-is-a-page-in-the-boards-base-worktree.md) are a row of chips above the
 // pager, the state kept in ?state=, else the first. The page's header is hidden: a ✕ at the top
-// right goes back as its back arrow does, and the bottom bar holds the ‹ take › pager. ←/→ and a sideways swipe switch
-// unless a field has focus, and the take stays in ?variant=. With ?q=<owner question id>, the bar's second row offers
+// right goes back as its back arrow does, and the footer, full width on the bottom edge at every width, holds the
+// ‹ take › pager. Framed in the board's right pane, the pane's top bar takes the ✕'s and the Round pill's place. ←/→
+// and a sideways swipe switch unless a field has focus, and the take stays in ?variant=. With ?q=<owner question id>, the bar's second row offers
 // the take as that question's pick: a take is pickable when an option's id equals its key. Choose this drafts it, with
 // the note typed above the bar, in the {choice, note} questions.html keeps for that question, and goes back to the
 // question, whose Send sends it. A card with more than one prototype round gets a Round pill at the top left, which
@@ -65,20 +67,6 @@
     return `${chips}<div class="ps-row"><button type="button" data-ps="prev" aria-label="Previous take">‹</button><span class="ps-name" title="${esc(name)}">${esc(name)}</span><button type="button" data-ps="next" aria-label="Next take">›</button></div>${control ? `<div class="ps-row ps-act">${control}</div>` : ''}`;
   }
 
-  // rounds: the card's prototype questions, oldest round first, as /api/board's card prototypes.rounds lists them
-  // ({n, q, url, confirm, state}). The pill names the round qid is in, out of the newest round's number; a card with a
-  // single round gets none.
-  function roundPill(rounds, qid) {
-    const at = (rounds || []).find((r) => r.q === qid);
-    if (!at || rounds.length < 2) return '';
-    return `<button type="button" class="ps-chip" data-ps-top="rounds">Round ${at.n} of ${Math.max(...rounds.map((r) => r.n))} · earlier</button>`;
-  }
-  const ROUND_WORD = { open: 'open', requested: 'prototype requested' };
-  function roundSheet({ ref, rounds, qid }) {
-    const rows = [...rounds].reverse().map((r) => `<button type="button" data-ps-round="${esc(r.url)}"><span>Round ${r.n}${r.confirm ? ' confirm' : ''}${r.q === qid ? ' · showing' : ''}</span><span>${ROUND_WORD[r.state] || 'answered'}</span></button>`);
-    return `<div class="ps-sheet" role="dialog" aria-label="Rounds"><h3>Rounds on ${esc(ref)}</h3>${rows.join('')}</div>`;
-  }
-
   // A touch from start to end: 1 for a swipe left (the next take), -1 for a swipe right, 0 for anything else: under
   // 50px sideways, more down than across, or starting at the left edge, where the drawer's and the browser's swipes are.
   const swipeStep = (start, end) => {
@@ -88,10 +76,13 @@
 
   const CSS = `
 body > header.top { display:none; }
+/* style.css sets --app-bottom on a phone for the bar the header becomes; hidden here, it leaves nothing to clear. */
+:root { --app-bottom:0px !important; }
 main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
 .ps-top { position:fixed; left:10px; right:10px; top:calc(10px + env(safe-area-inset-top)); z-index:31; display:flex; justify-content:space-between;
   align-items:flex-start; pointer-events:none; font:600 13px -apple-system, system-ui, sans-serif; }
 .ps-top > * { pointer-events:auto; }
+.ps-pending { visibility:hidden; }
 .ps-chip, .ps-close { color:#fff; background:#000a; border:1px solid #fff4; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:inherit; cursor:pointer; }
 .ps-chip { border-radius:999px; padding:0 14px; min-height:40px; }
 .ps-close { margin-left:auto; width:40px; height:40px; border-radius:50%; font-size:17px; line-height:1; }
@@ -101,11 +92,10 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
 .ps-sheet button { display:flex; justify-content:space-between; gap:12px; width:100%; border:0; border-top:1px solid #fff2; background:transparent; color:#fff;
   padding:12px 2px; font:inherit; font-weight:500; text-align:left; cursor:pointer; }
 .ps-sheet button span + span { opacity:.7; }
-.ps-switch { position:fixed; left:10px; right:10px; bottom:calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom)); z-index:30;
-  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
-.ps-switch > * { pointer-events:auto; max-width:100%; min-width:0; box-sizing:border-box; }
-.ps-pill { display:flex; flex-direction:column; gap:6px; width:min(460px, 100%); background:#202026eb; border:1px solid #fff3; border-radius:18px; padding:6px;
-  box-shadow:0 6px 24px #0008; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:600 13px -apple-system, system-ui, sans-serif; }
+.ps-switch { position:fixed; left:0; right:0; bottom:var(--app-bottom, 0px); z-index:30; display:flex; flex-direction:column; align-items:stretch;
+  background:#202026; border-top:1px solid #fff3; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); box-sizing:border-box; }
+.ps-switch > * { min-width:0; box-sizing:border-box; }
+.ps-pill { display:flex; flex-direction:column; gap:6px; border-radius:0; font:600 13px -apple-system, system-ui, sans-serif; }
 .ps-row { display:flex; align-items:center; gap:2px; min-width:0; }
 .ps-pill button { color:#fff; background:transparent; border:0; border-radius:999px; padding:7px 11px; font:inherit; white-space:nowrap; cursor:pointer; }
 .ps-pill button { flex-shrink:0; min-width:44px; min-height:44px; }
@@ -115,14 +105,23 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
 .ps-pill .ps-states button { background:#fff1; font-weight:500; }
 .ps-pill .ps-states button[aria-pressed="true"] { background:#fff; color:#000; font-weight:700; }
 .ps-pill .ps-pick { background:var(--accent, #fff); color:var(--on-accent, #000); font-weight:700; }
-.ps-closed { padding:12px 11px; border-radius:999px; color:#fffa; background:#fff1; white-space:nowrap; }
-.ps-switch .ps-text { width:min(420px, 100%); resize:none; border-radius:12px; border:1px solid #fff3; background:#000d; color:#fff;
-  padding:7px 10px; font:400 16px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
+.ps-closed { box-sizing:border-box; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 11px; border-radius:999px; color:#fffa; background:#fff1; white-space:nowrap; }
+.ps-switch .ps-text { margin-bottom:6px; resize:none; border-radius:12px; border:1px solid #fff3; background:#000d; color:#fff;
+  padding:7px 10px; font:400 16px -apple-system, system-ui, sans-serif; }
 .ps-switch .ps-text::placeholder { color:#fffa; }
 .ps-switch .ps-text[hidden] { display:none; }
-.ps-picked { padding:12px 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
-.ps-note { background:#000d; color:#fff; border-radius:8px; padding:5px 10px; font:500 12px -apple-system, system-ui, sans-serif; text-align:center; }
-.ps-note[hidden] { display:none; }`;
+.ps-picked { box-sizing:border-box; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
+.ps-note { margin-bottom:6px; background:#000d; color:#fff; border-radius:8px; padding:5px 10px; font:500 12px -apple-system, system-ui, sans-serif; text-align:center; }
+.ps-note[hidden] { display:none; }
+@media (min-width: 900px) {
+  .ps-switch { align-items:center; }
+  .ps-pill { width:min(640px, 100%); }
+  .ps-switch .ps-text { width:min(640px, 100%); }
+  .ps-states { flex-wrap:wrap; overflow-x:visible; }
+}
+.ps-pane main.proto-main { padding-top:0; }
+.ps-pane .ps-top { display:none; }
+.ps-pane .ps-states { flex-wrap:wrap; overflow-x:visible; justify-content:center; }`;
 
   const typing = (el) => Boolean(el?.closest?.('input, select, textarea, [contenteditable]:not([contenteditable="false"])'));
 
@@ -133,6 +132,8 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
     const qid = params.get('q');
     const site = globalThis.ClaudeSite;
     if (!document.getElementById('ps-style')) document.head.insertAdjacentHTML('beforeend', `<style id="ps-style">${CSS}</style>`);
+    // Framed in the board's right pane (app-needs.js openViewer), whose top bar holds the way back and the Round pill.
+    if (window.frameElement?.closest('.needs-pane')) document.documentElement.classList.add('ps-pane');
     let take = startTake(keys, params.get('variant'), initial);
     let question = null;
     // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a reload stays on the
@@ -144,18 +145,23 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
     box.className = 'ps-switch';
     box.innerHTML = '<div class="ps-note" role="status" hidden></div><textarea class="ps-text" rows="2" placeholder="Note with your pick (optional)" aria-label="Note with your pick" hidden></textarea><div class="ps-pill"></div>';
     if (above) box.prepend(above);
+    box.classList.add('ps-pending');
     document.body.append(box);
+    // The footer's height, so the page above it ends where it starts (prototype.html reads --ps-footer-h).
+    const measure = () => document.documentElement.style.setProperty('--ps-footer-h', `${box.offsetHeight}px`);
+    new ResizeObserver(measure).observe(box);
     const pill = box.querySelector('.ps-pill');
     const noteEl = box.querySelector('.ps-note');
     const text = box.querySelector('.ps-text');
     // The ✕ and, on a card with earlier rounds, the Round pill and its sheet. boardCard: /api/board's card the question is on.
     const top = document.createElement('div');
-    top.className = 'ps-top';
+    top.className = 'ps-top ps-pending';
     document.body.append(top);
     let boardCard = null;
     let sheet = false;
     const paintTop = () => {
       const rounds = boardCard?.prototypes?.rounds;
+      const { roundPill, roundSheet } = globalThis.BoardUI;
       top.innerHTML = `${roundPill(rounds, qid)}<button type="button" class="ps-close" data-ps-top="close" aria-label="Close">✕</button>${sheet && rounds ? roundSheet({ ref: boardCard.ref, rounds, qid }) : ''}`;
     };
     paintTop();
@@ -165,7 +171,7 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
     function paint() {
       const now = state();
       pill.innerHTML = pillHtml({ name: takes[take], pick: now, states, state: shownState });
-      text.hidden = !(now.kind === 'pick' || now.kind === 'change');
+      text.hidden = !(now.kind === 'pick' || now.kind === 'change' || now.kind === 'picked');
     }
     function go(next) {
       take = next;
@@ -181,7 +187,20 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
       render(take, shownState);
     }
 
+    // The footer and the Round pill stay hidden until the first load settles (or 1.5s pass), so they appear complete in one paint.
+    let revealed = false;
+    const reveal = () => {
+      if (revealed) return;
+      revealed = true;
+      measure();
+      box.classList.remove('ps-pending');
+      top.classList.remove('ps-pending');
+    };
+    setTimeout(reveal, 1500);
     async function load() {
+      try { await fetchQuestion(); } finally { reveal(); }
+    }
+    async function fetchQuestion() {
       if (!qid || !site) return;
       try {
         const board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
@@ -197,7 +216,7 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
       } catch { /* keep the last question shown */ }
       if (fromPush && pickedChoice(question)) {
         const card = /^item:(.+)$/.exec(question.topic || '')?.[1];
-        replaceWith(site.url(card ? `#item=${encodeURIComponent(card)}&reply` : 'questions.html'));
+        replaceWith(site.url(card ? `#selectedCard=${encodeURIComponent(card)}&reply` : 'questions.html'));
         return;
       }
       if (question && !text.value) text.value = readDraft(qid).note || '';
@@ -255,9 +274,10 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
     document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
 
     go(take);
+    measure();
     load();
     return { takes: keys, get take() { return take; }, get state() { return shownState; }, go, show };
   }
 
-  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, roundPill, roundSheet, swipeStep, mount };
+  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, swipeStep, mount };
 })();

package/board/public/prototype.html

@@ -10,8 +10,9 @@
 <link rel="stylesheet" href="sidebar.css">
 <style>
   /* The one page every recorded prototype is (board/server.mjs fills the {{…}} slots; prototype-kit.js documents what a
-     take gets). main keeps room below the stage for the viewer's bar and its note. */
-  main.proto-main { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: calc(150px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+     take gets). main keeps room below the stage for the viewer's footer, at its measured height (prototype-switcher.js),
+     which already holds the bottom inset. */
+  main.proto-main { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: calc(var(--ps-footer-h, 150px) + var(--app-bottom, 0px)); }
   /* kit.hub() is a whole page with its own gutter and header, so it goes edge to edge. */
   main.proto-main:has(> #stage > .kit-hub) { padding-top: 0; }
   /* contain and the transform make the stage the containing block of everything in it, position: fixed included, and
@@ -20,9 +21,11 @@
   #stage:has(> .kit-hub) { padding: 0; }
   #stage .top { position: static; }
   #stage .hub-view main { padding-bottom: 16px; }
-  /* A served round's page, framed from the board's base prototype worktree, edge to edge above the viewer's bar. */
+  /* A served round's page, framed from the board's base prototype worktree, edge to edge from under the ✕ row to the
+     viewer's footer; in the board's right pane (.ps-pane) there is no ✕ row, so it starts at the top. */
   #stage:has(> .kit-served) { max-width: none; padding: 0; }
-  .kit-served { display: block; width: 100%; min-height: 320px; height: calc(100dvh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border: 0; background: var(--panel); }
+  .kit-served { display: block; width: 100%; min-height: 320px; height: calc(100dvh - 60px - var(--ps-footer-h, 150px) - var(--app-bottom, 0px) - env(safe-area-inset-top)); border: 0; background: var(--panel); }
+  .ps-pane .kit-served { height: calc(100dvh - var(--ps-footer-h, 150px)); }
   .kit-served-failed pre { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
   .kit-missing { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); overflow-wrap: anywhere; }
   #protoToast { position: fixed; z-index: 40; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 32px); }