@lovek4d/kickflip 0.5.3 → 0.6.0

package/board/public/progress-review.js

@@ -0,0 +1,158 @@
+// The progress-bar review page (progress-review.html; docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.md): the
+// board's lanes with one made-up card per progress bar or status line the board draws, each drawn by the real renderer
+// (ui-cards.js workLines, ui-sidebar.js startSteps) and its steps read from them (BUILD_PHASES, START_STEPS). Tapping a
+// card opens its editor beneath: its name, its lane and its steps' names and order. Each lane has a colour pick. Send
+// posts the whole review as one owner ask, the event the + makes, which the orchestrator files as its own card.
+(function () {
+  const LANES = [['todo', 'Todo'], ['progress', 'In Progress'], ['review', 'In Review']];
+  const LANE_NAME = Object.fromEntries(LANES);
+  const STEP_SEP = ' › ';
+  const ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString();
+
+  // Each bar or line: the lane it shows in, when, its steps (none for a status line) and the card fields that make the
+  // real renderer draw it there.
+  function entries() {
+    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: '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(),
+        card: { waitsOn: 'checking' } },
+      { id: 'install', name: 'Install', lane: 'progress', when: 'The install builder runs; the card keeps the step its build reached', steps: build(),
+        card: { builder: { kind: 'install', progress: 'Installing on the phone', phase: null, at: ago(1) }, reachedPhase: 'landing' } },
+      { id: 'start', name: 'Board start', lane: 'progress', when: 'A new board clones, starts its orchestrator and lands, in the sidebar', steps: Object.values(START_STEPS),
+        start: { step: 'starting', stepAt: ago(0.5) } },
+      { id: 'rebase', name: 'Rebase run', lane: 'review', when: 'A PR conflicts with main and the board rebases it', steps: [],
+        card: { builder: { progress: 'Rebasing onto main', phase: null, at: ago(1) } } },
+      { id: 'merging', name: 'Merging', lane: 'review', when: 'The owner tapped Merge', steps: [], card: { next: 'Merging' } },
+      { id: 'stopped', name: 'Land stopped', lane: 'review', when: 'A land stopped short of main', steps: [],
+        card: { landStopped: { words: 'Land stopped: CI failed', at: ago(3) } } },
+    ].map((e) => ({ ...e, cardLane: e.lane }));
+  }
+
+  // A card's markup, as a board card draws it, the entry's step names beneath. The card stays in the lane the board draws
+  // it in today (cardLane), so its renderer draws what the board does; the page's lane column only recolours it.
+  function cardHtml(e) {
+    const { esc, escText, workLines, startSteps, startCaption } = BoardUI;
+    const steps = `<div class="line3 sub muted">${e.steps.length ? esc(e.steps.join(STEP_SEP)) : 'a status line, no bar'}</div>`;
+    const when = `<div class="line3 sub muted">${escText(e.when)}</div>`;
+    if (e.start) {
+      return `<div class="line1 title">${escText(e.name)}</div><div class="line3 sub agent">${esc(startCaption(e.start))}</div>${when}${steps}<div class="line6 sub card-time">${startSteps(e.start)}</div>`;
+    }
+    const card = { kind: 'work', key: `review/${e.id}`, id: e.id, ref: e.id, title: e.name, internal: true, held: false, risky: false,
+      deps: [], blockedBy: [], bumpable: false, isNew: false, builder: null, next: null, sortAt: ago(6), ...e.card, lane: e.cardLane };
+    return `${workLines(card)}${when}${steps}`;
+  }
+
+  // Send's text: every bar with its lane and steps, each change marked with what the board draws now (was).
+  // now and was are {entries, colours: {lane: colour}}.
+  function reviewText(now, was) {
+    const before = Object.fromEntries(was.entries.map((e) => [e.id, e]));
+    const changed = (a, b) => (a === b ? a : `${a} (was ${b})`);
+    const colours = LANES.map(([lane, name]) => `${name} ${changed(now.colours[lane], was.colours[lane])}`).join(', ');
+    const lines = now.entries.map((e) => {
+      const b = before[e.id];
+      const steps = e.steps.length ? changed(e.steps.join(STEP_SEP), b.steps.join(STEP_SEP)) : 'a status line, no bar';
+      return `${changed(e.name, b.name)}, ${changed(LANE_NAME[e.lane], LANE_NAME[b.lane])}: ${steps}`;
+    });
+    return ['Progress bar review', '', `Lane colours: ${colours}`, '', ...lines].join('\n');
+  }
+
+  function mount(root) {
+    const { esc } = BoardUI;
+    const css = getComputedStyle(document.documentElement);
+    const laneColour = { todo: '--muted', progress: '--color-notice', review: '--color-info' };
+    const colours = Object.fromEntries(LANES.map(([lane]) => [lane, css.getPropertyValue(laneColour[lane]).trim()]));
+    const was = { entries: entries(), colours: { ...colours } };
+    const list = entries();
+    let open = list[0];
+    let dragged = null;
+
+    const lanes = () => `<div class="pr-lanes">${LANES.map(([lane, name]) => `<section class="pr-lane" style="--lane:${esc(colours[lane])}">
+      <h2><span>${esc(name)}</span><input type="color" data-colour="${lane}" value="${esc(colours[lane])}" aria-label="${esc(name)} colour"></h2>
+      <div class="lane"><div class="list">${list.filter((e) => e.lane === lane).map((e) => `<details class="item" data-entry="${e.id}"${e === open ? ' data-open' : ''}>
+        <summary class="work"><span class="status ${e.cardLane}"></span><div class="title-wrap">${cardHtml(e)}</div></summary></details>`).join('') || '<div class="empty">Nothing here</div>'}</div></div>
+      </section>`).join('')}</div>`;
+    const editor = () => `<section class="pr-editor" aria-label="Edit ${esc(open.name)}"><h2>Editing ${esc(open.name)}</h2>
+      <label>Name <input data-name value="${esc(open.name)}"></label>
+      <label>Lane <select data-lane>${LANES.map(([lane, name]) => `<option value="${lane}"${lane === open.lane ? ' selected' : ''}>${esc(name)}</option>`).join('')}</select></label>
+      ${open.steps.length ? `<ol>${open.steps.map((s, k) => `<li draggable="true" data-k="${k}"><span class="grip" aria-hidden="true">⠿</span>
+        <input data-step="${k}" value="${esc(s)}" aria-label="Step ${k + 1}">
+        <button type="button" class="btn quiet" data-move="${k}" value="-1" aria-label="Move step ${k + 1} earlier"${k ? '' : ' disabled'}>↑</button>
+        <button type="button" class="btn quiet" data-move="${k}" value="1" aria-label="Move step ${k + 1} later"${k < open.steps.length - 1 ? '' : ' disabled'}>↓</button></li>`).join('')}</ol>`
+        : '<p class="muted">A status line, no steps.</p>'}</section>`;
+    root.innerHTML = '<div data-lanes></div><div data-editor></div><div class="pr-send"><button type="button" class="primary" data-send>Send</button><span class="muted" role="status" data-sent></span></div>';
+    const drawLanes = () => { root.querySelector('[data-lanes]').innerHTML = lanes(); };
+    const draw = () => { drawLanes(); root.querySelector('[data-editor]').innerHTML = editor(); };
+    const move = (from, to) => {
+      if (to < 0 || to >= open.steps.length) return;
+      const [step] = open.steps.splice(from, 1);
+      open.steps.splice(to, 0, step);
+      draw();
+    };
+    draw();
+
+    root.addEventListener('click', async (ev) => {
+      const summary = ev.target.closest('summary');
+      if (summary) {
+        ev.preventDefault();
+        open = list.find((e) => e.id === summary.parentElement.dataset.entry);
+        draw();
+        return;
+      }
+      const b = ev.target.closest('button');
+      if (b?.dataset.move !== undefined) { move(Number(b.dataset.move), Number(b.dataset.move) + Number(b.value)); return; }
+      if (b?.dataset.send === undefined) return;
+      const sent = root.querySelector('[data-sent]');
+      b.disabled = true;
+      try {
+        await ClaudeSite.send('ask', { text: reviewText({ entries: list, colours }, was) });
+        sent.textContent = 'Sent. The orchestrator files it as a card.';
+      } catch (e) {
+        sent.textContent = `Couldn’t send: ${e.reason || e.message}`;
+      } finally {
+        b.disabled = false;
+      }
+    });
+    // Typing renames on the cards as it goes; the editor itself is redrawn only on a change of lane or order, so it keeps focus.
+    root.addEventListener('input', (ev) => {
+      const t = ev.target;
+      if (t.dataset.colour) colours[t.dataset.colour] = t.value;
+      else if (t.dataset.name !== undefined) open.name = t.value;
+      else if (t.dataset.step) open.steps[Number(t.dataset.step)] = t.value;
+      else return;
+      drawLanes();
+    });
+    root.addEventListener('change', (ev) => {
+      if (ev.target.dataset.lane === undefined) return;
+      open.lane = ev.target.value;
+      draw();
+    });
+    root.addEventListener('dragstart', (ev) => { dragged = ev.target.closest?.('li[data-k]')?.dataset.k ?? null; });
+    root.addEventListener('dragover', (ev) => {
+      const li = ev.target.closest?.('li[data-k]');
+      if (dragged === null || !li) return;
+      ev.preventDefault();
+      root.querySelectorAll('li.over').forEach((x) => x.classList.toggle('over', x === li));
+      li.classList.add('over');
+    });
+    root.addEventListener('drop', (ev) => {
+      const li = ev.target.closest?.('li[data-k]');
+      if (dragged === null || !li) return;
+      ev.preventDefault();
+      const from = Number(dragged);
+      dragged = null;
+      move(from, Number(li.dataset.k));
+    });
+    root.addEventListener('dragend', () => { dragged = null; root.querySelectorAll('li.over').forEach((x) => x.classList.remove('over')); });
+  }
+
+  globalThis.ProgressReview = { entries, cardHtml, reviewText, mount };
+  const root = globalThis.document?.getElementById('review');
+  if (root) mount(root);
+})();

package/board/public/prototype-kit.js

@@ -1,9 +1,10 @@
+// A served round (prototype add --served) has no take files: start frames its page instead (served below).
 // What a prototype's take files get, on the page board/server.mjs serves from prototype.html for each topic recorded
 // with board.mjs prototype add (docs/adr/2026-11-01-1448-the-board-serves-every-prototype-from-one-template.md). A take file,
 // public/prototypes/<topic>/<KEY>.js, is a module:
 //   export function render(stage, kit) { stage.innerHTML = kit.hub(); return () => {…} }   // the cleanup is optional
 // render runs on every switch to that take with a fresh, empty stage; it may be async. The stage contains its layout
-// and paint, so nothing in it, position: fixed included, can cover the header, the take pill or the app shell.
+// and paint, so nothing in it, position: fixed included, can cover the viewer's bar, its ✕ or the app shell.
 //   kit.sidebar(data?, {here, switching, device, head, height})  ui-sidebar.js sidebar() as an open drawer card in the
 //                                       page's flow, rail width from 900px; head shows its Kickflip header
 //   kit.hub(data?)                      the Hub page (view-hub.js) in flow: {usage, usageCard (HTML in its place),
@@ -14,14 +15,56 @@
 //   kit.on(target, type, fn, opts)      a listener removed on the next switch
 //   kit.fake                            made-up data: at(ms), sites(), usage({claude, codex}), sidebar(), hub(), items()
 //   kit.esc                             HTML escaping
-// BoardUI and HubUI, the real renderers, are globals too. A link in the stage never navigates and a form never
+// The page loads every script app.html does, in its order, so BoardUI and HubUI, every real renderer included, are globals too. A link in the stage never navigates and a form never
 // submits: each toasts unless the take's own handler shows a toast. Listeners a take adds to document or window,
 // and its timers, end on the next switch. Interactions must work on a tap: a phone has no hover.
+// At phone width (under 600px) the page caps every box in the stage to the stage's width and stacks a take's side-by-side
+// panels in one column, whether they sit in a grid, a flex row (wrapping or not) or inline-block (phoneFit below).
+// A frame laid out wider than the phone (a 720px or desktop mock) keeps its own layout and scrolls sideways in its box.
+// Fields in the stage are 16px, so iOS Safari doesn't zoom when one gets focus.
 (function () {
   const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
   const wait = globalThis.setTimeout.bind(globalThis);
   const unwait = globalThis.clearTimeout.bind(globalThis);
 
+  // Phone width: the page caps the take's boxes to the stage (prototype.html). Panels the take puts side by side get
+  // data-stack, which CSS stacks in one column, and a frame the take gives a width of 600px or more (a 720px or desktop
+  // mock) gets data-wide, with its parent data-scroll, so the frame keeps its layout and scrolls sideways in its box.
+  const PHONE = '(max-width: 599px)';
+  const WIDE = 600;
+  const px = (v) => (/^[\d.]+px$/.test(v) ? parseFloat(v) : 0);
+  const rulesOf = (list) => [...list].flatMap((r) => (r.selectorText ? [r] : r.cssRules && !(r.media && !matchMedia(r.media.mediaText).matches) ? rulesOf(r.cssRules) : []));
+  const styleRules = () => [...document.styleSheets].flatMap((sheet) => { try { return rulesOf(sheet.cssRules); } catch { return []; } });
+  const declaredWidth = (el, rules) => Math.max(px(el.style.width), px(el.style.minWidth), ...rules.filter((r) => el.matches(r.selectorText)).map((r) => Math.max(px(r.style.width), px(r.style.minWidth))));
+  const sideBySide = (a, b) => a.right <= b.left + 1 && Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 40;
+  const isPanel = (el) => el.offsetWidth >= 120 && el.offsetHeight >= 80 && getComputedStyle(el).position !== 'absolute';
+  function phoneFit(stage) {
+    stage.querySelectorAll('[data-wide], [data-scroll], [data-stack]').forEach((el) => { delete el.dataset.wide; delete el.dataset.scroll; delete el.dataset.stack; });
+    if (!matchMedia(PHONE).matches) return;
+    const rules = styleRules();
+    for (const el of stage.querySelectorAll('*')) {
+      if (declaredWidth(el, rules) < WIDE || el.parentElement.closest('[data-wide]')) continue;
+      el.dataset.wide = '';
+      el.parentElement.dataset.scroll = '';
+    }
+    const walk = (el) => {
+      const rects = [...el.children].filter(isPanel).map((c) => c.getBoundingClientRect());
+      if (rects.some((a, i) => rects.some((b, j) => i < j && sideBySide(a, b)))) { el.dataset.stack = ''; return; }
+      [...el.children].filter((c) => !('wide' in c.dataset)).forEach(walk);
+    };
+    walk(stage);
+  }
+  function fitPhone(stage, ends) {
+    let queued = false;
+    const observer = new MutationObserver(() => queue());
+    const run = () => { queued = false; observer.disconnect(); phoneFit(stage); observer.observe(stage, { childList: true, subtree: true }); };
+    const queue = () => { if (!queued) { queued = true; requestAnimationFrame(run); } };
+    const mq = matchMedia(PHONE);
+    mq.addEventListener('change', queue);
+    ends.push(() => { observer.disconnect(); mq.removeEventListener('change', queue); });
+    run();
+  }
+
   const at = (ms) => new Date(Date.now() + ms).toISOString();
   const svg = (paths) => `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
   const siteIcon = (color, paths) => `<span class="icon" style="--c:${color}" aria-hidden="true">${svg(paths)}</span>`;
@@ -66,7 +109,7 @@
     const site = (s) => row({ icon: s.icon, title: esc(s.title), sub: s.status ?? '<span class="st ok">up · listening · every link passes</span>', wrap: true, trail: CHEVRON, href: `/${s.route}/` });
     const settings = d.settings.map(([id, title, sub]) => `<button type="button" class="hub-setting" data-setting="${esc(id)}" data-kit-inert aria-haspopup="dialog"><span class="text"><span class="title">${esc(title)}</span><span class="sub">${esc(sub)}</span></span>${CHEVRON}</button>`).join('');
     const usage = d.usageCard ?? HubUI.usageCard(d.usage);
-    const header = d.header ? BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', logoHref: '/_hub/', settingsHref: null }) : '';
+    const header = d.header ? BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', logoHref: '/_hub/' }) : '';
     return `<div class="hub-view view-hub kit-hub">${header}<main class="has-top"><div class="hub-status">${usage}${d.afterUsage || ''}<h2 class="label">Health</h2>
 <div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `<span class="st ${esc(d.hub.tone)}">${esc(d.hub.word)}</span> · ${esc(d.hub.detail)}`, wrap: true })}</div>
 <h2 class="label">Boards</h2>
@@ -142,7 +185,68 @@
   // place → [scrollTop, scrollLeft] of each box in stage scrolled away from its start.
   const scrolledBoxes = (stage) => new Map(placesIn(stage).filter(([el]) => el.scrollTop || el.scrollLeft).map(([el, place]) => [place, [el.scrollTop, el.scrollLeft]]));
 
+  // docs/adr/2026-11-06-1500-a-prototype-round-is-a-page-in-the-boards-base-worktree.md
+  // A served round frames its page from the board's base prototype worktree, at that serve's try port on this host, the
+  // take and state in its URL at first and then sent by message, which shared/prototype-frame.js hands the page.
+  function servedSrc({ https, path, take, state }) {
+    const url = new URL(path, `https://${location.hostname}:${https}`);
+    url.searchParams.set('variant', take);
+    if (state) url.searchParams.set('state', state);
+    return url.href;
+  }
+  // The stage while the serve isn't ready ({state, lines} from api/try/prototypes): Starting, or its failure with the
+  // log's last lines and Try again.
+  function servedStatus(run) {
+    if (run.state !== 'failed') return '<p class="kit-missing">Starting the prototype site…</p>';
+    return `<div class="kit-missing kit-served-failed"><p>The prototype site didn’t start.</p><pre>${esc((run.lines || []).join('\n'))}</pre><button type="button" data-kit-served="retry">Try again</button></div>`;
+  }
+  function served(data) {
+    const site = globalThis.ClaudeSite;
+    const stage = document.getElementById('stage');
+    let at = { take: null, state: null };
+    let frame = 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);
+    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 */ }
+      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);
+        return;
+      }
+      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(); }
+      if (run.state !== 'failed') wait(poll, 1500);
+    }
+    nativeAdd.call(stage, 'click', (e) => {
+      if (!e.target.closest?.('[data-kit-served="retry"]')) return;
+      stage.innerHTML = servedStatus({});
+      serve().then(() => wait(poll, 1500));
+    });
+    const takes = Object.fromEntries(data.takes.map((t) => [t.key, t.label]));
+    const states = data.states ? Object.fromEntries(data.states.map((s) => [s.key, s.label])) : null;
+    const sw = PrototypeSwitcher.mount({ takes, states, initial: data.takes[0].key, render(take, state) {
+      at = { take, state };
+      document.documentElement.dataset.take = take;
+      if (frame) post();
+    } });
+    poll();
+    return sw;
+  }
+
   function start(data) {
+    if (data.served) return served(data);
     const keys = data.takes.map((t) => t.key);
     const takes = Object.fromEntries(data.takes.map((t) => [t.key, t.label]));
     let cleanup = null;
@@ -208,11 +312,12 @@
         console.error(err);
         if (n === shown) stage.innerHTML = `<p class="kit-missing">Take ${esc(key)} failed: ${esc(err?.message || err)}</p>`;
       }
+      fitPhone(stage, ends);
       settle();
     }
 
     return PrototypeSwitcher.mount({ takes, initial: keys[0], render });
   }
 
-  globalThis.PrototypeKit = { ...kit, start };
+  globalThis.PrototypeKit = { ...kit, start, servedSrc, servedStatus };
 })();

package/board/public/prototype-switcher.js

@@ -1,11 +1,17 @@
-// The floating ‹ take › pill of a question's full-page prototype viewer (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).
+// 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 pick: a take is
-// pickable when an option's id equals its key. Pick drafts it, with the note typed above the pill, in the {choice, note}
-// questions.html keeps for that question, and goes back to the question, whose Send sends it.
+//   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]);
 
@@ -24,15 +30,16 @@
   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 is locked and the take isn't its pick.
-  // pick: nothing picked yet. picked: this take is the pick. change: another take is.
+  // 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 = shownPick(question, drafted);
     if (!option) return { kind: 'none', picked };
     if (picked === take) return { kind: 'picked', option, picked };
-    if (locked(question)) return { kind: 'none', picked };
+    if (locked(question)) return { kind: question.state === 'resolved' ? 'closed' : 'none', picked };
     return picked ? { kind: 'change', option, picked } : { kind: 'pick', option };
   }
   // questions.html keeps each question's unsent {choice, note} under this key (ui-questions.js getDraft).
@@ -47,38 +54,82 @@
     if (!app?.open?.(String(url), { replace: true })) location.replace(url);
   }
 
-  function pillHtml({ name, pick = { kind: 'none' } }) {
+  // 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">${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-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; }`;
 
   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>`);
@@ -97,12 +148,23 @@
     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';
+    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 now = state();
-      pill.innerHTML = pillHtml({ name: takes[take], pick: now });
+      pill.innerHTML = pillHtml({ name: takes[take], pick: now, states, state: shownState });
       text.hidden = !(now.kind === 'pick' || now.kind === 'change');
     }
     function go(next) {
@@ -110,7 +172,13 @@
       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() {
@@ -124,6 +192,8 @@
           || (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];
@@ -148,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 { 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, pillHtml, mount };
+  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, roundPill, roundSheet, swipeStep, mount };
 })();