@lovek4d/kickflip 0.5.3 → 0.6.1

package/board/public/hub-kit.js

@@ -1,4 +1,4 @@
-// What the hub page and settings modals share, each through the view's B
+// What the hub page and settings modals share, Board Settings' duration picker included, each through the view's B
 // (app.js BoardView.page), so unmounting the view stops it all: loading and refreshing the view's data, posting its
 // forms for JSON, and this device's notifications row.
 (function () {
@@ -169,5 +169,65 @@
     return { state: (line) => (state && on ? { ...state, sub: `On · ${line}` } : state), busy: () => busy, ready };
   }
 
-  globalThis.HubKit = { live, forms, device };
+  // datetime-local speaks the device's clock; the picker's hidden field carries its UTC ISO value to the server.
+  const localInput = (d) => {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+  function customBounds(input, reset = false) {
+    const now = Date.now();
+    input.min = localInput(new Date(now + 60_000));
+    input.max = localInput(new Date(now + 30 * 86_400_000));
+    if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
+  }
+
+  // The one duration picker Snooze, Keep awake, Pause hub and Pause board share (hub/duration.mjs): chips that post
+  // `name` to `action` at once, then Custom, whose date and time posts as `name` too. While its setting is on, `on`
+  // replaces it with when it ends and a button that posts `name`=off.
+  function durationPicker({ id, title, icon, action, name, choices, on, button }) {
+    const { esc } = HubUI;
+    if (on) return `<div class="row dur-on">${icon}<span class="body"><span class="text title">${esc(on.title)}</span><form method="post" action="${action}"><button class="btn quiet" name="${name}" value="off">${button}</button></form></span></div>`;
+    if (!choices) return '';
+    const chips = choices.map((c) => `<button class="btn quiet" name="${name}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="block" role="group" aria-labelledby="${id}Title"><div class="dur-head">${icon}<span class="title" id="${id}Title">${title}</span></div><div class="dur-chips"><form class="dur-choices" method="post" action="${action}">${chips}</form><form class="dur-custom" method="post" action="${action}"><input type="hidden" name="${name}"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-dur-at required aria-label="Custom ${title.toLowerCase()} until a date and time"></form></div></div>`;
+  }
+
+  // Wires every duration picker under B.root: Custom opens its picker, and closing it submits its form with the time
+  // chosen. → painted(), which a view calls after drawing a picker to set Custom's bounds and suggested time.
+  function durationPickers(B) {
+    let openPicker = null;
+    B.on(B.root, 'click', (e) => {
+      const input = e.target.closest?.('[data-dur-at]');
+      if (!input) return;
+      openPicker = input;
+      customBounds(input, input.value === input.defaultValue);
+      try { input.showPicker(); } catch { /* iOS opens its wheel on the tap itself. */ }
+    });
+    // A chip's pointerdown comes before Custom's focusout; without this reset Custom posts first and the chip's post is dropped.
+    B.on(B.root, 'pointerdown', (e) => {
+      const input = e.target.closest?.('.dur-choices button') && e.target.closest('.dur-chips')?.querySelector('[data-dur-at]');
+      if (!input) return;
+      openPicker = null;
+      input.value = input.defaultValue;
+    });
+    // Closing an opened picker accepts its suggested time; an unchanged field reached by Tab does nothing.
+    const saveCustom = (input) => {
+      if (!input.value || (input !== openPicker && input.value === input.defaultValue) || !input.checkValidity()) return;
+      const at = new Date(input.value);
+      if (Number.isNaN(at.getTime())) return;
+      input.form.querySelector('input[type="hidden"]').value = at.toISOString();
+      input.form.requestSubmit();
+      openPicker = null;
+      input.defaultValue = input.value;
+    };
+    B.on(B.root, 'change', (e) => {
+      if (e.target.matches?.('[data-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
+    });
+    B.on(B.root, 'focusout', (e) => {
+      if (e.target.matches?.('[data-dur-at]')) saveCustom(e.target);
+    });
+    return { painted: () => { for (const input of B.root.querySelectorAll('[data-dur-at]')) customBounds(input, true); } };
+  }
+
+  globalThis.HubKit = { live, forms, device, durationPicker, durationPickers };
 })();

package/board/public/hub.css

@@ -135,6 +135,8 @@
 .hub-view .lk-form input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
 
 .hub-view .ub-banner > button { flex: none; min-height: 32px; }
+.hub-view .hold-banner.ub-paused { border-color: var(--line); background: var(--panel); }
+.hub-view .hold-banner.ub-paused > svg { color: var(--muted); }
 .hub-view .hold-banner.ub-going { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); }
 .hub-view .hold-banner.ub-going > svg { color: var(--color-danger); }
 

package/board/public/new-task.js

@@ -8,14 +8,16 @@ globalThis.BoardNewTask = (function () {
     <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
     ${BoardUI.dropZone('<textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>')}
     <div class="pending-files" data-files></div>
-    <div class="send-actions">${BoardUI.sendButton('Quick build', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
+    <div class="send-actions">${BoardUI.sendButton('Implement', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
     <p class="muted small" id="askStatus" aria-live="polite"></p>
   </form>
 </dialog>`;
 
   function wire(B) {
-    // A shared person looks only (shell.js marks the page shared-view, and style.css hides the +), so n twice opens nothing.
-    if (document.documentElement.classList.contains('shared-view')) return;
+    // A View person looks only (shell.js marks the page shared-view without shared-full, and style.css hides the +), so
+    // n twice opens nothing.
+    const html = document.documentElement.classList;
+    if (html.contains('shared-view') && !html.contains('shared-full')) return;
     const { $, store, toast, quieted, sendDraft } = B;
     const { waitOn, keyedSend } = BoardUI;
     const send = (kind, data) => (B.send ? B.send(kind, data) : B.site.send(kind, data));
@@ -24,7 +26,7 @@ globalThis.BoardNewTask = (function () {
     const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
     // Files picked before the app shell switched away from this board are still attached, so they show again.
     BoardAttach.paint('ask', B.site.root);
-    // ⌘↵ sends the ask as Discuss and ⌥↵ as Quick build (ui.js keyedSend).
+    // ⌘↵ sends the ask as Discuss and ⌥↵ as Implement (ui.js keyedSend).
     B.on($('#askText'), 'keydown', (ev) => {
       const button = keyedSend(ev, $('#askForm'));
       if (!button) return;
@@ -64,7 +66,7 @@ globalThis.BoardNewTask = (function () {
       if (ev.defaultPrevented) { lastN = -Infinity; return; }
       if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
       const field = ev.target.closest && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
-      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('down')) { lastN = -Infinity; return; }
       if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
       lastN = -Infinity;
       ev.preventDefault();
@@ -75,7 +77,7 @@ globalThis.BoardNewTask = (function () {
     B.on($('#sheetClose'), 'click', closeSheet);
     B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
-    // Discuss has the session grill or prototype the task at once; Quick build sends the ask with quick: true, and the
+    // Discuss has the session grill or prototype the task at once; Implement sends the ask with quick: true, and the
     // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
     B.on($('#askForm'), 'submit', async (ev) => {
       ev.preventDefault();

package/board/public/progress-review.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Progress bars</title>
+<link rel="stylesheet" href="colors.css">
+<link rel="stylesheet" href="style.css">
+<style>
+  /* The progress-bar review (progress-review.js): the board's lanes, each card one bar or status line drawn by the real
+     renderers, its colour the lane's --lane, which the lane's colour pick sets; the open card's editor beneath. */
+  .pr-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+  @media (max-width: 799px) { .pr-lanes { grid-template-columns: minmax(0, 1fr); } }
+  .pr-lane > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--lane); border-bottom: 2px solid var(--lane); padding-bottom: 4px; }
+  .pr-lane input[type="color"] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
+  .pr-lane .sub.agent:not(.waiting-gray, .quiet) { color: var(--lane); }
+  .pr-lane .phase-bars:not(.dim) { --bar-fill: var(--lane); }
+  .pr-lane .item[data-open] > summary { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .pr-lane .card-time .sb-steps .phase-bars { gap: 2px; }
+  .pr-editor { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; }
+  .pr-editor h2 { margin: 0 0 8px; font-size: 15px; }
+  .pr-editor label { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
+  .pr-editor :where(input, select) { font-size: 16px; }
+  .pr-editor ol { margin: 8px 0 0; padding: 0; list-style: none; }
+  .pr-editor li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
+  .pr-editor li.over { outline: 2px dashed var(--accent); }
+  .pr-editor .grip { cursor: grab; color: var(--muted); }
+  .pr-send { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+</style>
+</head>
+<body>
+<!--header {"lead":"back","title":"Progress bars","backHref":"./","controls":false}-->
+<main>
+  <p class="muted">Every progress bar and status line the board draws, in the lane it shows in. Tap one to rename it, move it to another lane or rename and reorder its steps; pick each lane's colour; then Send.</p>
+  <div id="review"></div>
+</main>
+<script src="ui.js"></script>
+<script src="ui-links.js"></script>
+<script src="ui-enums.js"></script>
+<script src="ui-progress-bar.js"></script>
+<script src="ui-cards.js"></script>
+<script src="ui-sidebar.js"></script>
+<script src="claude.js"></script>
+<script src="progress-review.js"></script>
+</body>
+</html>

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 };
 })();