@lovek4d/kickflip 0.5.0 → 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>
@@ -75,7 +118,7 @@
 <h2 class="label">Polling status</h2>
 <div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div></div>
 <section class="hub-settings"><h2 class="label">Hub settings</h2>${settings}</section>
-<div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span></footer></div></main></div>`;
+<div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }
 
   const LANES = [['review', 'In Review'], ['progress', 'In Progress'], ['todo', 'Todo'], ['done', 'Done']];
@@ -127,7 +170,83 @@
 
   const kit = { sidebar, hub, cards, sheet, toast, on, fake, esc };
 
+  // [element, place] for each element in stage, its place the tag and class of it and each ancestor up to the stage, with
+  // a count telling apart boxes that share one, so a take drawn again finds the same box.
+  function placesIn(stage) {
+    const seen = new Map();
+    return [...stage.querySelectorAll('*')].map((el) => {
+      let path = '';
+      for (let at = el; at && at !== stage; at = at.parentElement) path = `${at.tagName}.${at.className}/${path}`;
+      const n = seen.get(path) || 0;
+      seen.set(path, n + 1);
+      return [el, `${path}#${n}`];
+    });
+  }
+  // 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;
@@ -158,13 +277,23 @@
       try { cleanup?.(); } catch (err) { console.error(err); }
       cleanup = null;
       ends.splice(0).forEach((end) => end());
-      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn.
+      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn, and
+      // each box scrolled inside the take scrolls where it was once the new take has drawn the same box.
       const old = document.getElementById('stage');
       const stage = old.cloneNode(false);
       const y = window.scrollY;
+      const scrolled = scrolledBoxes(old);
       stage.style.minHeight = `${old.offsetHeight}px`;
       old.replaceWith(stage);
-      const settle = () => { if (n !== shown) return; stage.style.minHeight = ''; window.scrollTo(0, y); };
+      const settle = () => {
+        if (n !== shown) return;
+        stage.style.minHeight = '';
+        for (const [el, place] of placesIn(stage)) {
+          const at = scrolled.get(place);
+          if (at) [el.scrollTop, el.scrollLeft] = at;
+        }
+        window.scrollTo(0, y);
+      };
       document.documentElement.dataset.take = key;
       const take = data.takes.find((t) => t.key === key);
       if (!take.src) {
@@ -183,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 };
 })();