@lovek4d/kickflip 0.6.1 → 0.7.0

package/board/public/prototype-kit.js

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

package/board/public/prototype-switcher.js

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

package/board/public/prototype.html

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

package/board/public/router.js

@@ -3,7 +3,7 @@
 // ui.test.mjs runs them in node:vm. listen() catches clicks on links to a view the shell mounts, and back and forward.
 // A view is {kind, …}:
 //   start                       `/`, which the shell turns into the last board
-//   board {route, hash}         /<route>/, hash such as #item=<key>&reply
+//   board {route, hash}         /<route>/, hash such as #selectedCard=<key>&openItemsCard=<topic id>, or the older #item=<key>&reply
 //   settings {route}            /<route>/settings.html, a request to open the modal over that board
 //   questions {route, id}       /<route>/questions.html#<id>
 //   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<lineup slug>, and plan.html, which the board
@@ -45,6 +45,7 @@ globalThis.AppRouter = (function () {
     if (page === 'questions.html') {
       let id = null;
       try { id = u.hash.length > 1 ? decodeURIComponent(u.hash.slice(1)) : null; } catch { id = u.hash.slice(1); }
+      if (id?.startsWith('openItemsCard=')) id = id.slice('openItemsCard='.length);
       return { kind: 'questions', route, id };
     }
     if (page === 'notes.html' || page === 'plan.html') {
@@ -80,10 +81,10 @@ globalThis.AppRouter = (function () {
 
   // The page tree (docs/adr/2026-10-30-1125-back-follows-the-page-tree.md): a board, its Waiting on you, and a prototype page tied
   // to one of its questions by ?q=, framed. levelOf → 0, 1 or 2 down the tree, or null for a view outside it.
+  // A board's prototype page, which from 900px opens in the board's right pane (shell.js go).
+  const isPrototype = (view, boards) => view?.kind === 'frame' && boards.has(view.route) && /^\/[^/]+\/prototype-[\w-]+\.html$/.test(new URL(view.url, 'http://hub').pathname);
   function questionOf(view, boards) {
-    if (view?.kind !== 'frame' || !boards.has(view.route)) return null;
-    const u = new URL(view.url, 'http://hub');
-    return /^\/[^/]+\/prototype-[\w-]+\.html$/.test(u.pathname) ? u.searchParams.get('q') || null : null;
+    return isPrototype(view, boards) ? new URL(view.url, 'http://hub').searchParams.get('q') || null : null;
   }
   // wide: from 900px Waiting on you is the board's pane, so a prototype's parent is the board itself.
   function levelOf(view, { boards = new Set(), wide = false } = {}) {
@@ -96,7 +97,7 @@ globalThis.AppRouter = (function () {
   function parentsOf(view, { boards = new Set(), card = null, wide = false } = {}) {
     const q = questionOf(view, boards);
     if (!q && view?.kind !== 'questions') return [];
-    const board = { kind: 'board', route: view.route, hash: card ? `#item=${encodeURIComponent(card)}` : '' };
+    const board = { kind: 'board', route: view.route, hash: card ? `#selectedCard=${encodeURIComponent(card)}` : '' };
     return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
@@ -224,5 +225,32 @@ globalThis.AppRouter = (function () {
     return { push: (href, from) => write('push', href, from), replace: (href) => write('replace', href), up };
   }
 
-  return { viewOf, urlOf, mounted, entryOf, listen };
+  // A board's fragment is &-joined keys: selectedCard=<key> (the focused card), openItemsCard=<topic id> (the selected
+  // open-items pill), review=<PR number>, and a bare reply. The older #item=<key> reads as selectedCard.
+  // → {selectedCard, openItemsCard, review, reply}, each null or false when absent.
+  function fragmentOf(hash) {
+    const out = { selectedCard: null, openItemsCard: null, review: null, reply: false };
+    const decode = (v) => { try { return decodeURIComponent(v); } catch { return v; } };
+    for (const part of String(hash).replace(/^#/, '').split('&')) {
+      const eq = part.indexOf('=');
+      const [k, v] = eq < 0 ? [part, ''] : [part.slice(0, eq), part.slice(eq + 1)];
+      if (k === 'selectedCard' || k === 'item') out.selectedCard = decode(v) || null;
+      else if (k === 'openItemsCard') out.openItemsCard = decode(v) || null;
+      else if (k === 'review' && /^\d+$/.test(v)) out.review = Number(v);
+      else if (k === 'reply') out.reply = true;
+    }
+    return out;
+  }
+  // hash with the named keys of changes replaced (null drops one) → the new fragment, '' for none. A #review= link is
+  // alone in its fragment, so a change to a card or pill replaces it; reply is spent once the card is shown.
+  function hashWith(hash, changes) {
+    const now = fragmentOf(hash);
+    const next = { selectedCard: now.selectedCard, openItemsCard: now.openItemsCard, ...changes };
+    const parts = [];
+    if (next.selectedCard) parts.push(`selectedCard=${encodeURIComponent(next.selectedCard)}`);
+    if (next.openItemsCard) parts.push(`openItemsCard=${encodeURIComponent(next.openItemsCard)}`);
+    return parts.length ? '#' + parts.join('&') : '';
+  }
+
+  return { viewOf, urlOf, mounted, entryOf, isPrototype, listen, fragmentOf, hashWith };
 })();

package/board/public/shell.js

@@ -246,24 +246,30 @@ window.AppShell = (function () {
     // Board and Waiting on you are a board's two pages (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md):
     // from 900px the board shows Waiting on you in its pane, so every view of the questions page, a link, a push, a
     // hand-off, a history entry or a cold load, shows the board at its own URL and opens the question's topic there (id,
-    // or null for none). A board just shown takes a moment to fill its pane, so the pane is asked again until it has.
-    function focusPane(id, tries = 50) {
-      if (current?.view.kind !== 'board' || current.v.B.focusQuestion?.(id) || tries <= 0) return;
-      setTimeout(() => focusPane(id, tries - 1), 100);
+    // or null for none). A board's prototype page does the same and opens in the pane
+    // (docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md).
+    const inPane = (view) => wide.matches && (view?.kind === 'questions' || AppRouter.isPrototype(view, boards()));
+    // ask(B) → true once the board's pane did what the view asks. A board just shown takes a moment to fill its pane, so
+    // the pane is asked again until it has.
+    const paneAsk = (view, href) => (view.kind === 'questions' ? (B) => B.focusQuestion?.(view.id) : (B) => B.openViewer?.(href));
+    function askPane(ask, tries = 50) {
+      if (current?.view.kind !== 'board' || ask(current.v.B) || tries <= 0) return;
+      setTimeout(() => askPane(ask, tries - 1), 100);
     }
     function go(view, href, how, from) {
       if (!AppRouter.mounted(view)) return false;
-      if (view.kind === 'questions' && wide.matches) {
+      if (inPane(view)) {
+        const ask = paneAsk(view, href);
         const board = { kind: 'board', route: view.route, hash: '' };
         const boardHref = new URL(AppRouter.urlOf(board), location.href).href;
         if (how === 'pop') history.replaceState(history.state, '', boardHref);
-        // On its own board it only opens the topic, so the URL, history and an open card stay as they are.
+        // On its own board it only asks the pane, so the URL, history and an open card stay as they are.
         else if (current?.view.kind === 'board' && current.route === view.route && !settings) {
-          focusPane(view.id);
+          askPane(ask);
           sidebar.close();
           return true;
         }
-        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) focusPane(view.id); return shown; });
+        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) askPane(ask); return shown; });
       }
       if (view.kind === 'settings') {
         if (current?.view.kind === 'board' && current.route === view.route) {
@@ -317,15 +323,15 @@ window.AppShell = (function () {
     if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
 
     let pane = null;
-    if (first.kind === 'questions' && wide.matches) {
-      pane = { id: first.id };
+    if (inPane(first)) {
+      pane = paneAsk(first, location.href);
       first = { kind: 'board', route: first.route, hash: '' };
       history.replaceState(history.state, '', AppRouter.urlOf(first));
     }
     router = AppRouter.listen({ boards, go, wide: () => wide.matches });
-    // Widening past 900px on Waiting on you swaps to the board with that topic open in the pane.
+    // Widening past 900px on Waiting on you or a prototype swaps to the board with it open in the pane.
     wide.addEventListener('change', () => {
-      if (wide.matches && current?.view.kind === 'questions') go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
+      if (current && inPane(current.view)) go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
     });
     opener = (url, { replace = false, frames = true } = {}) => {
       const view = AppRouter.viewOf(url, { boards: boards() });
@@ -342,7 +348,7 @@ window.AppShell = (function () {
     navigator.serviceWorker?.startMessages?.();
 
     show(first);
-    if (pane) focusPane(pane.id);
+    if (pane) askPane(pane);
     openStream();
     addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
     addEventListener('pageshow', openStream);

package/board/public/sidebar.css

@@ -173,12 +173,12 @@ html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-
 .sidebar .sb-ctx.stale { opacity: .6; }
 .sidebar .lcs { order: -1; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
 .sidebar .lc { flex: none; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; line-height: 18px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
-.sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
+.sidebar .lc-needs { --tone: var(--color-danger); } .sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
 .sidebar .dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
 @keyframes sb-pulse { 50% { opacity: .35; } }
 @media (prefers-reduced-motion: no-preference) { .sidebar .dot.pulse { animation: sb-pulse 1.4s ease-in-out infinite; } }
 .sidebar .word { flex: none; font-weight: 600; color: var(--tone); }
-.sidebar .t-down, .sidebar .t-needs { --tone: var(--color-danger); }
+.sidebar .t-down { --tone: var(--color-danger); }
 .sidebar .t-starting { --tone: var(--color-notice); }
 .sidebar .t-stopped, .sidebar .t-asleep { --tone: var(--muted); }
 .sidebar .t-working { --tone: var(--color-notice); }

package/board/public/style.css

@@ -84,11 +84,17 @@ button.chip { border: 0; }
 .sub.next { color: var(--color-notice); }
 .card-hold { color: var(--color-quiet); }
 .card-blocked, .card-action { color: var(--color-notice); }
-.card-ready { color: var(--color-success); }
-.card-staging { color: var(--color-notice); }
+/* docs/adr/2026-11-11-1200-every-lane-has-phases.md: a card's phase word, toned by who acts next (ui-cards.js PHASE_LOOK). */
+.card-phase.ph-quiet { color: var(--color-quiet); }
+.card-phase.ph-info { color: var(--color-info); }
+.card-phase.ph-notice { color: var(--color-notice); }
+.card-phase.ph-success { color: var(--color-success); }
+.card-phase.ph-merged { color: var(--color-merged); }
 /* The footer status of a stale card, and of one the orchestrator stalled (ui-cards.js timeLine). */
 .card-stale { color: var(--muted); }
 .card-stalled { color: var(--color-danger); }
+/* A bumped-out card's footer status, and a bumped ready card's while the host holds new work (ui-cards.js timeLine). */
+.card-bumped-out, .card-host-held { color: var(--muted); }
 .sub.next.idle { color: var(--muted); }
 .sub.refused { color: var(--color-danger); }
 .toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom));
@@ -383,10 +389,14 @@ button.attach:disabled { opacity: .35; }
 /* The session's working line, "thinking", is the owner's blue with one font, size, weight and pulse on the card and in the thread. */
 .thinking { color: var(--accent); font-size: 12px; font-weight: 600; }
 .thinking .working-dot { background: currentColor; }
+/* A New card's "waiting", until the orchestrator picks it up: grey, its dot still. */
+.pickup-wait { color: var(--muted); font-size: 12px; font-weight: 600; }
+.pickup-wait .working-dot { background: currentColor; animation: none; }
 .msg.link { padding: 0 10px; margin: 4px 0; font-size: 13px; }
 .msg.builder-status { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--color-notice); overflow-wrap: anywhere; }
 .msg.builder-status .working-dot { animation: none; }
 .msg.request { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.msg.request.readied { color: var(--color-success); }
 .msg.agent { padding: 0 10px; margin: 4px 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
 .msg.agent.started { color: var(--color-notice); } .msg.agent.finished { color: var(--color-success); }
 .msg.agent .muted { font-weight: 400; }
@@ -410,7 +420,6 @@ button.attach:disabled { opacity: .35; }
 .sub.agent.stale .working-dot { animation: none; }
 /* The one class every paused status takes, gray: the card and thread line, the header, the hub banner. */
 .paused { color: var(--muted); font-weight: 600; }
-.phase-bars.in-todo { --bar-fill: var(--muted); }
 .msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
 .msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
 .msg.calls summary::-webkit-details-marker { display: none; }
@@ -583,7 +592,7 @@ main > * { transition: opacity .25s ease; }
 .view-settings .who.new { border-color: var(--accent); }
 .view-settings .add { display: flex; gap: 6px; margin-top: 8px; }
 .view-settings .add input { flex: 1; min-width: 0; }
-.view-settings .add.pick { flex-wrap: wrap; }
+.view-settings .add.pick { flex-direction: column; }
 .view-settings .share-now { color: var(--ok); font-weight: 600; }
 .view-settings .share-level { display: flex; gap: 4px; margin-top: 6px; }
 .view-settings .share-level button { min-height: 32px; padding: 4px 12px; font-size: 13px; }
@@ -592,7 +601,11 @@ main > * { transition: opacity .25s ease; }
 .view-settings .share-reach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
 .view-settings .share-reach p { flex: 1 1 220px; margin: 0; }
 .view-settings .share-reach button { flex: none; }
-.view-settings .pick-col { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.view-settings .login-row { display: flex; gap: 6px; }
+.view-settings .login-row input { flex: 1; min-width: 0; }
+.view-settings .chip { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 14px; border: 1px solid var(--accent); font-size: 14px; }
+.view-settings .chip button { padding: 0 6px; min-height: 0; }
+.view-settings .problem { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 9px; }
 .view-settings .pick-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
 .view-settings .pick-list button { text-align: left; }
 .view-settings .pick-list button[aria-pressed="true"] { border-color: var(--accent); }
@@ -650,7 +663,8 @@ main > * { transition: opacity .25s ease; }
 .view-questions .q details > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
 .view-questions .topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; margin-bottom: 4px; }
 .view-questions .topics button { min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
-  background: var(--panel); color: var(--text); white-space: normal; text-align: left; overflow-wrap: anywhere; }
+  background: var(--panel); color: var(--text); display: inline-flex; max-width: 100%; text-align: left; }
+.view-questions .topics .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
 .view-questions .topics button.progress { border-color: var(--line); background: color-mix(in srgb, var(--color-notice) 12%, var(--panel)); }
 .view-questions .topics button.progress[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--color-notice) 12%, var(--accent-soft)); }
@@ -671,7 +685,7 @@ main > * { transition: opacity .25s ease; }
 .view-questions .q.resolved .opt:has(input:checked) .det { display: block; }
 .view-questions .q.resolved .opt:not(:has(input:checked)) { opacity: .6; }
 .view-questions .q.resolved .reask-line { margin-top: 10px; }
-.view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg);
+.view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg); z-index: 2;
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
 .view-questions .bar .send-hint { margin-left: auto; }
 /* The + rides above the sticky Send bar rather than over its Send. */
@@ -748,6 +762,8 @@ main > * { transition: opacity .25s ease; }
   :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
   }
+  /* The nav under the bar already pads the safe area (--app-bottom), so the gap under Send stays the 10px above it. */
+  .view-questions .bar { padding-bottom: 10px; }
   body > .top, body.has-sidebar > :not(.sidebar) > .top {
     position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 7;
     border-bottom: 0; border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
@@ -761,8 +777,14 @@ main > * { transition: opacity .25s ease; }
   .sheet.keyboard-sheet { --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - max(12px, env(safe-area-inset-top)))); }
 }
 
-/* Typing, a text field focused (shell.js sets :root.typing): the floating + is disabled and the page stays as it is. */
+/* Typing, a text field focused (shell.js sets :root.typing): the floating + dims and stops taking taps, and the page stays as it is. */
 :root.typing .fab { opacity: .35; pointer-events: none; }
+/* On a phone the + hides while typing, so it never sits over the keyboard's field. */
+@media (max-width: 699px) {
+  :root.typing .fab { display: none; }
+  /* The board page bottom bar hides too; --app-bottom stays, so the page does not move. */
+  :root.typing body > .top, :root.typing body.has-sidebar > :not(.sidebar) > .top { display: none; }
+}
 
 .settings-modal { position: fixed; inset: max(12px, env(safe-area-inset-top)) 0 calc(12px + max(var(--kb, 0px), var(--app-bottom, 0px))); margin: auto; width: min(680px, calc(100% - 24px));
   height: fit-content; max-width: none; max-height: max(120px, calc(var(--vh, 100dvh) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - 24px - env(safe-area-inset-top)));
@@ -876,6 +898,9 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .reader-row.sys, .reader-row.out { color: var(--muted); font-size: 12.5px; }
 .reader-row.out { padding-left: 28px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .reader-row.tool { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-row.call { cursor: pointer; }
+.reader-caret { display: inline-block; width: 10px; margin-right: 4px; color: var(--muted); }
+.reader-out { margin: 2px 14px 4px 28px; padding: 6px 8px; border-left: 2px solid var(--line); color: var(--muted); font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
 .reader-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--accent); font-size: 11px; }
 .reader-raw, .reader-text { margin: 0; padding: 2px 14px 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .reader-md { padding: 4px 16px 12px; overflow-wrap: anywhere; line-height: 1.5; }
@@ -924,13 +949,14 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .deck-opts { display: flex; flex-direction: column; gap: 6px; }
 .deck-opts button { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
 .deck-opts button.rec { border-color: var(--accent); }
+.deck-opts button.armed { background: var(--color-notice); border-color: var(--color-notice); color: #000; font-weight: 600; }
 .deck-opts .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .deck-opts small { display: block; color: var(--muted); font-size: 12.5px; }
 .deck-prompt { margin: 0; padding: 0; list-style: none; }
 .deck-prompt li.prompt { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
 .deck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
 .deck-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
-.deck-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
+.deck-dots { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
 .deck-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
 .deck-dots i.on { background: var(--color-notice); }
 .deck-bar button { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
@@ -949,12 +975,33 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
   .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
   body.has-sidebar { --sidebar-w: 272px; }
   html.sb-collapsed body.has-sidebar { --sidebar-w: 0px; }
-  .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0; border-left: 1px solid var(--line); }
+  .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px 16px 0; border-left: 1px solid var(--line); }
   .needs-pane .needs-questions main { padding: 0; max-width: none; }
   .needs-pane:has(.q-empty), .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty) { display: flex; flex-direction: column; }
   .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty), .needs-pane .q-empty { flex: 1; min-height: 0; }
   .needs-pane .waiting { margin: 0 0 12px; }
+  .needs-pane * { min-width: 0; overflow-wrap: anywhere; }
+  .needs-pane pre, .needs-pane code { white-space: pre-wrap; }
+  .needs-pane :is(.deck-opts, .row, .actions, .btns) { flex-wrap: wrap; }
+  /* A prototype in the pane (app-needs.js openViewer): a top bar over the framed page, whose footer ends the pane; ⤢
+     (.widened) lays the pane over the lanes, from the sidebar's edge. */
+  .needs-pane.viewing { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
+  .needs-pane.viewing > :not(.pane-viewer) { display: none; }
+  .needs-pane.viewing.widened { position: fixed; top: 56px; left: var(--sidebar-w, 0px); right: 0; bottom: 0; height: auto; z-index: 7; border-left: 0; background: var(--bg); }
+  .pane-viewer { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .pv-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
+  .pv-top .pv-grow { flex: 1; }
+  .pv-top button { min-height: 36px; border-radius: 8px; font-weight: 600; }
+  .pv-top .pv-back { border: 0; background: transparent; color: var(--text); padding: 6px 8px; }
+  .pv-top .pv-back:hover { background: var(--line); }
+  .pv-top .pv-widen { width: 36px; padding: 0; font-size: 17px; }
+  .pv-top .pv-widen[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+  .pv-top .ps-chip { border-radius: 999px; padding: 0 14px; }
+  .pv-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: var(--panel); }
+  .pane-viewer .ps-sheet { position: absolute; left: 8px; right: 8px; top: 56px; z-index: 2; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
+  .pane-viewer .ps-sheet h3 { margin: 0 0 6px; font-size: 14px; }
+  .pane-viewer .ps-sheet button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); padding: 10px 2px; text-align: left; }
+  .pane-viewer .ps-sheet button span + span { color: var(--muted); }
 }
 /* The Send bar is the last thing on its page: only the phone nav under it is left clear, so its background runs to the edge. */
 body .view-questions main { padding-bottom: var(--app-bottom, 0px); }
-.msg.calls.status-fold summary .fold-log { margin-left: 6px; color: var(--accent); text-decoration: underline; }