@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/prototype-switcher.js

@@ -1,16 +1,17 @@
-// The floating ‹ take › pill every prototype page switches its takes with (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
+// The full-bleed prototype viewer's floating 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).
 // 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', … }, initial: 'A', render(take) {…}, above: el? })
-// render runs at mount and on each switch; sw.take is the current key. ←/→ switch unless a field has focus, and the
-// take stays in ?variant=. With ?q=<owner question id>, the pill offers the take as that question's answer: a take
-// is pickable when an option's id equals its key. Pick sends the owner-answer event questions.html sends, with the
-// note typed above the pill, then moves on through BoardUI.nextQuestion (ui-questions.js).
-// PrototypeSwitcher.current is the mounted switcher, whose go(key) shows another take in place; Waiting on you uses it
-// to switch its full-width frame without a reload (view-questions.js inPlace).
-// With ?take=<key> the page shows that take alone, with no header or pill, as questions.html frames it
-// (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md); a page hides its own extras under html.ps-embed. There main's
-// bottom padding, kept clear for the pill, shrinks to 12px whatever the page sets, since questions.html sizes the frame
-// to the page's height.
+//   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
+// 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
+// opens a sheet of its rounds (/api/board's card prototypes.rounds, board/domain.mjs).
 (function () {
   const esc = (t) => String(t ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 
@@ -20,110 +21,122 @@
   };
   const startTake = (keys, wanted, initial) => (keys.includes(wanted) ? wanted : keys.includes(initial) ? initial : keys[0]);
 
-  // The owner's current pick is the latest answer that chose an option; a note-only answer keeps the earlier pick.
+  // The owner's last sent pick is the latest answer that chose an option; a note-only answer keeps the earlier pick.
   const pickedChoice = (question) => [...(question?.answers || [])].reverse().find((a) => a.choice)?.choice ?? null;
-  // none: no question, or the take is not one of its options. pick: nothing picked yet. picked: this take is the
-  // owner's pick. change: another take is.
-  function pickState(question, take) {
+  // The pick a question shows on Waiting on you (ui-questions.js choiceOf): drafted, this device's unsent pick, which Send
+  // would send, else the last answer's, else the option the overnight triage suggested. A resolved question is locked at
+  // its last answer, and one waiting on the prototype the owner asked for at the request's pick.
+  const locked = (question) => question.state === 'resolved' || question.state === 'requested';
+  const shownPick = (question, drafted) => question.state === 'requested' ? question.request?.choice ?? null
+    : question.state === 'resolved' ? pickedChoice(question)
+    : drafted ?? pickedChoice(question) ?? question.suggested?.option ?? null;
+  // none: no question, the take is not one of its options, or the question waits on a requested prototype and the take
+  // isn't its pick. closed: the question is resolved and the take isn't its pick. pick: nothing picked yet. picked: this
+  // take is the pick. change: another take is.
+  function pickState(question, take, drafted = null) {
     if (!question) return { kind: 'none' };
     const option = (question.options || []).find((o) => o.id === take);
-    const picked = pickedChoice(question);
+    const picked = shownPick(question, drafted);
     if (!option) return { kind: 'none', picked };
-    if (!picked) return { kind: 'pick', option };
-    return { kind: picked === take ? 'picked' : 'change', option, picked };
+    if (picked === take) return { kind: 'picked', option, picked };
+    if (locked(question)) return { kind: question.state === 'resolved' ? 'closed' : 'none', picked };
+    return picked ? { kind: 'change', option, picked } : { kind: 'pick', option };
   }
-  // Matches ui-questions.js choiceLabel for a single-choice question.
-  const answerLabel = (option) => `${/^[A-Z][0-9]?$/i.test(option.id) ? `${option.id}. ` : ''}${option.label}`;
-  const questionUrl = (q) => (/^prototype-[\w-]+\.html(?:[?#]|$)/.test(q.url || '') ? q.url : `questions.html#${encodeURIComponent(q.id)}`);
-  // questions.html keeps each question's unsent {choice, note} under this key; a pick sent here takes its note and clears it.
+  // questions.html keeps each question's unsent {choice, note} under this key (ui-questions.js getDraft).
   const draftKey = (qid) => 'qdraft:' + qid;
   const readDraft = (qid) => { try { return JSON.parse(localStorage.getItem(draftKey(qid)) || '{}'); } catch { return {}; } };
-  // In place of this page: framed in the app shell, the shell shows the URL's view in place (board/public/shell.js
-  // AppShell.open); alone, or for a URL that isn't a view, the page loads it.
+  const writeDraft = (qid, draft) => { try { localStorage.setItem(draftKey(qid), JSON.stringify(draft)); } catch { /* nothing kept */ } };
+  // In place of this page: framed in the app shell, the shell shows the URL's view in place, going up to the question
+  // the viewer sits under (board/public/shell.js AppShell.open, router.js); alone, the page loads it.
   function replaceWith(url) {
     let app = null;
     try { app = window.top !== window ? window.top.AppShell : null; } catch { app = null; }
     if (!app?.open?.(String(url), { replace: true })) location.replace(url);
   }
 
-  // Prototype pages need only claude.js and this switcher. In the shell, its BoardUI also owns the board's notice.
-  let questionsUI = null;
-  const sharedQuestions = (site) => (questionsUI ||= (async () => {
-    try { if (window.top !== window && window.top.BoardUI?.nextQuestion) return window.top.BoardUI; } catch {}
-    for (const [file, key] of [['ui.js', 'esc'], ['ui-links.js', 'linkText'], ['ui-questions.js', 'nextQuestion']]) {
-      if (globalThis.BoardUI?.[key]) continue;
-      await new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = site.url(file);
-        script.onload = resolve;
-        script.onerror = reject;
-        document.head.append(script);
-      });
-    }
-    return globalThis.BoardUI;
-  })().catch((e) => { questionsUI = null; throw e; }));
-
-  function pillHtml({ name, pick = { kind: 'none' }, busy = false }) {
+  // The bar: the states' chips when the round has states, the ‹ name › pager, and below it on its own row the pick
+  // control, when there is one.
+  function pillHtml({ name, pick = { kind: 'none' }, states = null, state = null }) {
+    const chips = states ? `<div class="ps-row ps-states">${Object.entries(states).map(([key, label]) => `<button type="button" data-ps-state="${esc(key)}" aria-pressed="${key === state}">${esc(label)}</button>`).join('')}</div>` : '';
     const control = pick.kind === 'picked' ? '<span class="ps-picked">Picked</span>'
-      : pick.kind === 'pick' || pick.kind === 'change'
-        ? `<button type="button" class="ps-pick" data-ps="pick"${busy ? ' disabled' : ''}>${busy ? 'Sending…' : pick.kind === 'pick' ? 'Pick this' : 'Change pick'}</button>`
-        : '';
-    return `<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>${control}`;
+      : pick.kind === 'closed' ? '<span class="ps-closed">Round answered</span>'
+      : pick.kind === 'pick' || pick.kind === 'change' ? '<button type="button" class="ps-pick" data-ps="pick">Choose this</button>'
+      : '';
+    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) => {
+    const dx = end.x - start.x;
+    return start.x < 24 || Math.abs(dx) < 50 || Math.abs(end.y - start.y) * 2 > Math.abs(dx) ? 0 : dx < 0 ? 1 : -1;
+  };
 
   const CSS = `
-.ps-switch { position:fixed; left:16px; right:16px; bottom:calc(var(--app-bottom, 0px) + 14px + env(safe-area-inset-bottom)); z-index:30;
+body > header.top { display:none; }
+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-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; }
+.ps-sheet { position:fixed; left:0; right:0; bottom:0; z-index:32; padding:14px 16px calc(22px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0;
+  background:#26262c; color:#fff; box-shadow:0 -8px 30px #0009; }
+.ps-sheet h3 { margin:0 0 8px; font-size:14px; }
+.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-switch .pill, .ps-pill { display:flex; align-items:center; gap:2px; background:#000d; border:1px solid #fff3; border-radius:999px; padding:4px;
-  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:600 13px -apple-system, system-ui, sans-serif; }
-.ps-switch .pill button, .ps-pill button { color:#fff; background:transparent; border:0; border-radius:999px; padding:7px 11px; font:inherit; white-space:nowrap; cursor:pointer; }
+.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-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; }
-.ps-switch .pill button.on { background:#fff; color:#000; }
-.ps-name { flex:0 1 auto; padding:7px 6px; color:#fff; white-space:nowrap; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
-.ps-pill .ps-pick { background:#fff; color:#000; margin-left:2px; }
-.ps-pill .ps-pick:disabled { opacity:.6; cursor:default; }
+.ps-name { flex:1 1 auto; padding:7px 6px; color:#fff; white-space:nowrap; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
+.ps-act > * { flex:1; text-align:center; }
+.ps-states { overflow-x:auto; scrollbar-width:none; gap:4px; }
+.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 14px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
+  padding:7px 10px; font:400 16px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
 .ps-switch .ps-text::placeholder { color:#fffa; }
 .ps-switch .ps-text[hidden] { display:none; }
-.ps-picked { margin-left:2px; padding:7px 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
+.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-embed header.top { display:none; }
-.ps-embed main { padding-bottom:12px !important; }`;
+.ps-note[hidden] { display:none; }`;
 
   const typing = (el) => Boolean(el?.closest?.('input, select, textarea, [contenteditable]:not([contenteditable="false"])'));
 
-  function mount({ takes, initial, render, above = null }) {
+  function mount({ takes, states = null, initial, render, above = null }) {
     const keys = Object.keys(takes);
     const params = new URLSearchParams(location.search);
+    let shownState = states ? startTake(Object.keys(states), params.get('state')) : null;
     const qid = params.get('q');
     const site = globalThis.ClaudeSite;
     if (!document.getElementById('ps-style')) document.head.insertAdjacentHTML('beforeend', `<style id="ps-style">${CSS}</style>`);
-    if (params.has('take')) {
-      let only = startTake(keys, params.get('take'), initial);
-      document.documentElement.classList.add('ps-embed');
-      render(only);
-      const embedded = {
-        takes: keys,
-        get take() { return only; },
-        go(next) {
-          if (!keys.includes(next) || next === only) return;
-          only = next;
-          const u = new URL(location.href); u.searchParams.set('take', only); history.replaceState(history.state, '', u);
-          render(only);
-        },
-      };
-      return (globalThis.PrototypeSwitcher.current = embedded);
-    }
     let take = startTake(keys, params.get('variant'), initial);
     let question = null;
-    let topics = [];
-    // The board's cards, which name their own question topics (ui-questions.js cardTopics).
-    let cards = [];
-    // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a pick made here or a
-    // reload stays on the page; only the first load sends an already-picked question on to its card's thread.
+    // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a reload stays on the
+    // page; only the first load sends an already-picked question on to its card's thread.
     let fromPush = params.get('from') === 'push';
     if (fromPush) { const u = new URL(location.href); u.searchParams.delete('from'); history.replaceState(null, '', u); }
 
@@ -135,36 +148,52 @@
     const pill = box.querySelector('.ps-pill');
     const noteEl = box.querySelector('.ps-note');
     const text = box.querySelector('.ps-text');
-    let busy = false;
+    // 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';
+    document.body.append(top);
+    let boardCard = null;
+    let sheet = false;
+    const paintTop = () => {
+      const rounds = boardCard?.prototypes?.rounds;
+      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();
 
     const note = (text) => { noteEl.textContent = text || ''; noteEl.hidden = !text; };
+    const state = () => pickState(question, take, qid ? readDraft(qid).choice : null);
     function paint() {
-      const state = pickState(question, take);
-      pill.innerHTML = pillHtml({ name: takes[take], pick: state, busy });
-      text.hidden = !(state.kind === 'pick' || state.kind === 'change');
+      const now = state();
+      pill.innerHTML = pillHtml({ name: takes[take], pick: now, states, state: shownState });
+      text.hidden = !(now.kind === 'pick' || now.kind === 'change');
     }
     function go(next) {
       take = next;
       const u = new URL(location.href); u.searchParams.set('variant', take); history.replaceState(null, '', u);
       note('');
       paint();
-      render(take);
+      render(take, shownState);
+    }
+    function show(next) {
+      shownState = next;
+      const u = new URL(location.href); u.searchParams.set('state', next); history.replaceState(null, '', u);
+      paint();
+      render(take, shownState);
     }
 
     async function load() {
       if (!qid || !site) return;
-      let board = null;
       try {
-        board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
-        topics = board.ownerTopics;
-        cards = board.items || [];
+        const board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
         // A resolved question is left out of /api/board, and its topic's resolved questions hold it
         // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
-        const topic = topics.find((t) => t.questions.includes(qid));
+        const topic = board.ownerTopics.find((t) => t.questions.includes(qid));
         question = board.owner.find((q) => q.id === qid)
           || (topic && (await (await fetch(site.url('api/questions?topic=' + encodeURIComponent(topic.id)), { cache: 'no-store' })).json()).questions.find((q) => q.id === qid))
           || null;
         if (!question) note('This prototype’s question is gone, so there is nothing to pick.');
+        boardCard = topic && board.items.find((i) => i.questions?.topic === topic.id) || null;
+        paintTop();
       } catch { /* keep the last question shown */ }
       if (fromPush && pickedChoice(question)) {
         const card = /^item:(.+)$/.exec(question.topic || '')?.[1];
@@ -174,37 +203,13 @@
       if (question && !text.value) text.value = readDraft(qid).note || '';
       fromPush = false;
       paint();
-      return board;
     }
 
-    async function pick() {
-      const state = pickState(question, take);
-      if (busy || !(state.kind === 'pick' || state.kind === 'change')) return;
-      busy = true; paint();
-      const answered = question;
-      let ui, pills, name;
-      try {
-        ui = await sharedQuestions(site);
-        pills = ui.topicRow(topics, answered.topic).pills;
-        const topic = topics.find((t) => t.id === answered.topic);
-        name = topic ? ui.topicName(ui.cardTopics([topic], cards)[0]) : '';
-        await site.send('owner-answer', { id: answered.id, question: answered.question, choice: state.option.id, label: answerLabel(state.option), note: text.value.trim() });
-      } catch { busy = false; paint(); note('Could not send. Is the host awake?'); return; }
-      try { localStorage.removeItem(draftKey(qid)); } catch { /* nothing kept */ }
-      text.value = '';
-      busy = false;
-      note('Sent. Claude replies on the card.');
-      const board = await load();
-      const next = ui.nextQuestion(board?.owner || [], pills, answered);
-      if (next) {
-        const u = new URL(site.url(questionUrl(next)), location.href);
-        if (globalThis.PageBack?.pushed) u.searchParams.set('from', 'push');
-        replaceWith(u);
-      } else {
-        const route = new URL(site.url(''), location.href).pathname.replace(/^\/+|\/+$/g, '');
-        ui.sentNotice.put(route, `Sent 1 answer${name ? ` to ${name}` : ''}.`);
-        replaceWith(site.url('./'));
-      }
+    function pick() {
+      const now = state();
+      if (!(now.kind === 'pick' || now.kind === 'change')) return;
+      writeDraft(qid, { ...readDraft(qid), choice: now.option.id, note: text.value.trim() });
+      replaceWith(site.url(`questions.html#${encodeURIComponent(qid)}`));
     }
     text.addEventListener('keydown', (e) => {
       if (e.key !== 'Enter' || !(e.metaKey || e.ctrlKey) || e.isComposing) return;
@@ -213,22 +218,46 @@
     });
 
     pill.addEventListener('click', (e) => {
+      const chip = e.target.closest('[data-ps-state]')?.dataset.psState;
+      if (chip) { show(chip); return; }
       const act = e.target.closest('[data-ps]')?.dataset.ps;
       if (act === 'prev') go(takeAt(keys, take, -1));
       else if (act === 'next') go(takeAt(keys, take, 1));
       else if (act === 'pick') pick();
     });
+    // ✕ follows the hidden header's back arrow, so it goes where back goes (router.js page tree).
+    top.addEventListener('click', (e) => {
+      const round = e.target.closest('[data-ps-round]')?.dataset.psRound;
+      if (round) { replaceWith(site.url(round)); return; }
+      const act = e.target.closest('[data-ps-top]')?.dataset.psTop;
+      if (act === 'close') document.querySelector('header.top a.back').click();
+      else if (act === 'rounds') { sheet = !sheet; paintTop(); }
+    });
     document.addEventListener('keydown', (e) => {
       if (typing(e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
       if (e.key === 'ArrowLeft') go(takeAt(keys, take, -1));
       else if (e.key === 'ArrowRight') go(takeAt(keys, take, 1));
+      else if (e.key === 'Escape' && sheet) { sheet = false; paintTop(); }
     });
+    // A swipe that starts in a box scrolling sideways is that box's own scroll.
+    let touch = null;
+    document.addEventListener('touchstart', (e) => {
+      const t = e.touches[0];
+      const scrolls = (el) => el && el !== document.body && (el.scrollWidth > el.clientWidth && /auto|scroll/.test(getComputedStyle(el).overflowX) ? true : scrolls(el.parentElement));
+      touch = e.touches.length === 1 && !typing(e.target) && !e.target.closest?.('.ps-sheet') && !scrolls(e.target) ? { x: t.clientX, y: t.clientY } : null;
+    }, { passive: true });
+    document.addEventListener('touchend', (e) => {
+      const t = e.changedTouches[0];
+      const step = touch && t ? swipeStep(touch, { x: t.clientX, y: t.clientY }) : 0;
+      touch = null;
+      if (step) go(takeAt(keys, take, step));
+    }, { passive: true });
     document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
 
     go(take);
     load();
-    return (globalThis.PrototypeSwitcher.current = { takes: keys, get take() { return take; }, go });
+    return { takes: keys, get take() { return take; }, get state() { return shownState; }, go, show };
   }
 
-  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, answerLabel, pillHtml, mount };
+  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, roundPill, roundSheet, swipeStep, mount };
 })();

package/board/public/prototype.html

@@ -10,7 +10,7 @@
 <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 take pill and its note. */
+     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)); }
   /* 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; }
@@ -20,11 +20,28 @@
   #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. */
+  #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-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); }
   #protoToast[hidden] { display: none; }
   @media (max-width: 899px) { #protoToast { top: max(12px, env(safe-area-inset-top)); } }
 
+  /* A take's own boxes are capped to the stage at phone width, so a fixed-width panel never cuts off. prototype-kit.js
+     (phoneFit) marks what the take lays side by side with data-stack, which stacks in one column whether the take used
+     grid, flex (wrapping or not) or inline-block, and a frame 600px or wider with data-wide: it keeps its own layout
+     and scrolls sideways inside its data-scroll box. */
+  @media (max-width: 599px) {
+    #stage :where(div, section, article, aside, nav, header, footer, main, form, ul, ol, table, figure):not([data-wide]) { max-width: 100%; min-width: 0; }
+    #stage [data-scroll] { overflow-x: auto; max-width: 100%; }
+    #stage [data-wide] { max-width: none; flex-shrink: 0; }
+    #stage [data-stack] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; grid-template-columns: none !important; align-items: stretch !important; }
+    #stage [data-stack] > * { width: auto !important; flex: 0 0 auto !important; grid-column: auto !important; float: none !important; }
+  }
+  /* iOS Safari zooms the page when it focuses a field under 16px. */
+  #stage :where(input, select, textarea) { font-size: 16px; }
   #stage .kit-sidebar.sidebar { position: relative; inset: auto; z-index: auto; transform: none; visibility: visible; transition: none;
     width: min(320px, 100%); height: 640px; margin: 0 auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 14px; }
   #stage .kit-sidebar.sidebar:not(.kit-head) > header.top { display: none; }
@@ -40,15 +57,52 @@
 <main class="proto-main"><div id="stage"></div></main>
 <div class="toast" id="protoToast" role="status" hidden></div>
 <script id="prototypeData" type="application/json">{{prototypeData}}</script>
-<script src="claude.js"></script>
 <script src="ui.js"></script>
 <script src="ui-links.js"></script>
 <script src="ui-enums.js"></script>
-<script src="ui-phase-bars.js"></script>
+<script src="ui-progress-bar.js"></script>
+<script src="ui-order.js"></script>
+<script src="ui-patch.js"></script>
+<script src="ui-threads.js"></script>
 <script src="ui-cards.js"></script>
+<script src="ui-header.js"></script>
+<script src="ui-snapshot.js"></script>
 <script src="ui-page-header.js"></script>
 <script src="ui-sidebar.js"></script>
+<script src="ui-questions.js"></script>
+<script src="ui-prompts.js"></script>
+<script src="ui-markdown.js"></script>
 <script src="ui-hub.js"></script>
+<script src="toasts.js"></script>
+<script src="dialogs.js"></script>
+<script src="prompts.js"></script>
+<script src="rules-editor.js"></script>
+<script src="claude.js"></script>
+<script src="attach.js"></script>
+<script src="hub-kit.js"></script>
+<script src="linear-key.js"></script>
+<script src="sidebar.js"></script>
+<script src="app.js"></script>
+<script src="new-task.js"></script>
+<script src="app-core.js"></script>
+<script src="app-threads.js"></script>
+<script src="app-cards.js"></script>
+<script src="app-lanes.js"></script>
+<script src="app-asks.js"></script>
+<script src="app-needs.js"></script>
+<script src="app-header.js"></script>
+<script src="app-arch.js"></script>
+<script src="app-reader.js"></script>
+<script src="app-banner.js"></script>
+<script src="app-snapshot.js"></script>
+<script src="view-settings.js"></script>
+<script src="view-questions.js"></script>
+<script src="view-notes.js"></script>
+<script src="view-hub.js"></script>
+<script src="view-hub-settings.js"></script>
+<script src="view-frame.js"></script>
+<script src="router.js"></script>
+<script src="shell.js"></script>
 <script src="prototype-switcher.js"></script>
 <script src="prototype-kit.js"></script>
 <script>PrototypeKit.start(JSON.parse(document.getElementById('prototypeData').textContent));</script>

package/board/public/router.js

@@ -85,18 +85,19 @@ globalThis.AppRouter = (function () {
     const u = new URL(view.url, 'http://hub');
     return /^\/[^/]+\/prototype-[\w-]+\.html$/.test(u.pathname) ? u.searchParams.get('q') || null : null;
   }
-  function levelOf(view, { boards = new Set() } = {}) {
+  // wide: from 900px Waiting on you is the board's pane, so a prototype's parent is the board itself.
+  function levelOf(view, { boards = new Set(), wide = false } = {}) {
     if (view?.kind === 'board') return 0;
     if (view?.kind === 'questions') return 1;
-    return questionOf(view, boards) ? 2 : null;
+    return questionOf(view, boards) ? (wide ? 1 : 2) : null;
   }
   // → the views above view in the tree, its board first. card: the card whose thread the owner left the board from,
   // which the board keeps open.
-  function parentsOf(view, { boards = new Set(), card = null } = {}) {
+  function parentsOf(view, { boards = new Set(), card = null, wide = false } = {}) {
     const q = questionOf(view, boards);
     if (!q && view?.kind !== 'questions') return [];
     const board = { kind: 'board', route: view.route, hash: card ? `#item=${encodeURIComponent(card)}` : '' };
-    return q ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
+    return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
   // Each history entry carries {idx}, its distance from the shell's first entry, pushed when a push opened it, and on a
@@ -109,8 +110,8 @@ globalThis.AppRouter = (function () {
   // boards() → the board routes now.
   // → {push(href, from), replace(href), up()}: push and replace write an entry for a view go is showing; replace answers
   // 'up' when it went back to a parent instead, which then takes href, and go shows it on that pop.
-  function listen({ boards, go }) {
-    const b = () => ({ boards: boards() });
+  function listen({ boards, go, wide = () => false }) {
+    const b = () => ({ boards: boards(), wide: wide() });
     const mark = (pushed) => (pushed ? { pushed: true } : {});
     let idx = Number.isInteger(history.state?.idx) ? history.state.idx : 0;
     let landing = null;