@lovek4d/kickflip 0.6.1 → 0.7.1

package/board/public/prototype-kit.js

@@ -87,7 +87,6 @@
       usage: fake.usage(),
       hub: { tone: 'ok', word: 'healthy', detail: '3 of 3 sites up' },
       sites: fake.sites(),
-      polling: { title: 'Checks every minute while you’re here', lines: ['Next check 12:00pm · last 11:45am, 8 PRs, no change', 'No pushes queued.'], count: 0 },
       settings: [['notifications', 'Notifications', 'Pushes on · Off on weekends · This device on'], ['quiet', 'Quiet hours', '10:00pm – 8:00am · pushes held'],
         ['codex', 'Codex share', 'Auto'], ['rules', 'Rules for every board', '1 rule'], ['closed', 'Closed boards', 'No closed boards']],
     }),
@@ -105,7 +104,7 @@
 
   function hub(data = {}) {
     const d = { ...fake.hub(), header: true, ...data };
-    const { row, tile, nowRow, CHEVRON } = HubUI;
+    const { row, tile, CHEVRON } = HubUI;
     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);
@@ -114,9 +113,7 @@
 <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>
 <div class="group">${d.sites.map(site).join('')}</div>
-<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p>
-<h2 class="label">Polling status</h2>
-<div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div></div>
+<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p></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><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }
@@ -205,25 +202,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,10 +3,10 @@
 // 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
+//   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<wave slug>, and plan.html, which the board
 //                               redirects there
 //   hub {hash}                  /_hub/ with a settings modal named by hash; legacy /_hub/settings opens the same modals
 //                               ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)),
@@ -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

@@ -150,11 +150,11 @@ html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-
 @starting-style { .sidebar.ks-on .ks-label-hint { opacity: 0; } }
 /* The label is the bar's containing block: left 0 is the BOARDS text's edge, and right -8px crosses the label's 8px
    side margin (.sb-label) to the rows' right edge. The bar sits in the label's 4px bottom margin. */
-.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--accent);
+.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--color-notice);
   transform-origin: 0 50%; animation: ks-drain linear forwards; }
 @keyframes ks-drain { to { transform: scaleX(0); } }
 .sidebar .ks-u { transition: color 200ms linear; }
-.sidebar.ks-on .ks-u { color: var(--accent); transition: color 150ms linear; }
+.sidebar.ks-on .ks-u { color: var(--color-notice); transition: color 150ms linear; }
 @starting-style { .sidebar.ks-on .ks-u { color: inherit; } }
 @media (prefers-reduced-motion: reduce) {
   .sidebar .ks-bar { animation: none; }
@@ -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/sidebar.js

@@ -236,7 +236,7 @@
       }
       el.addEventListener('click', (e) => {
         if (sending) return;
-        if (e.target === el || e.target.closest('[data-failed-close]')) { done(); return; }
+        if (BoardUI.onBackdrop(e, el) || e.target.closest('[data-failed-close]')) { done(); return; }
         const dismiss = e.target.closest('[data-failed-dismiss]');
         const retry = e.target.closest('[data-failed-retry]');
         if (dismiss) {
@@ -309,7 +309,7 @@
       el.innerHTML = shortcuts();
       el.addEventListener('cancel', (e) => { e.preventDefault(); closeHelp(); });
       el.addEventListener('close', closeHelp);
-      el.addEventListener('click', (e) => { if (e.target === el) closeHelp(); });
+      el.addEventListener('click', (e) => { if (BoardUI.onBackdrop(e, el)) closeHelp(); });
       help = { el, previous: document.activeElement };
       document.body.appendChild(el);
       el.showModal();