@lovek4d/kickflip 0.5.3 → 0.6.1

package/board/public/prototype-switcher.js

@@ -1,11 +1,17 @@
-// The floating ‹ take › pill of a question's full-page prototype viewer (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
-// docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md).
+// The full-bleed prototype viewer's floating controls (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
+// docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md,
+// docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md).
 // Load it with a relative src after claude.js, on a page whose header leads with the back arrow, then call
-//   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, initial: 'A', render(take) {…}, above: el? })
-// render runs at mount and on each switch; sw.take is the current key. ←/→ switch unless a field has focus, and the
-// take stays in ?variant=. With ?q=<owner question id>, the pill offers the take as that question's pick: a take is
-// pickable when an option's id equals its key. Pick drafts it, with the note typed above the pill, in the {choice, note}
-// questions.html keeps for that question, and goes back to the question, whose Send sends it.
+//   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, states: { empty: 'No cards', … }?, initial: 'A', render(take, state) {…}, above: el? })
+// render runs at mount and on each switch of take or state; sw.take is the current key. A served round's named states
+// (docs/adr/2026-11-06-1500-a-prototype-round-is-a-page-in-the-boards-base-worktree.md) are a row of chips above the
+// pager, the state kept in ?state=, else the first. The page's header is hidden: a ✕ at the top
+// right goes back as its back arrow does, and the bottom bar holds the ‹ take › pager. ←/→ and a sideways swipe switch
+// unless a field has focus, and the take stays in ?variant=. With ?q=<owner question id>, the bar's second row offers
+// the take as that question's pick: a take is pickable when an option's id equals its key. Choose this drafts it, with
+// the note typed above the bar, in the {choice, note} questions.html keeps for that question, and goes back to the
+// question, whose Send sends it. A card with more than one prototype round gets a Round pill at the top left, which
+// opens a sheet of its rounds (/api/board's card prototypes.rounds, board/domain.mjs).
 (function () {
   const esc = (t) => String(t ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 
@@ -24,15 +30,16 @@
   const shownPick = (question, drafted) => question.state === 'requested' ? question.request?.choice ?? null
     : question.state === 'resolved' ? pickedChoice(question)
     : drafted ?? pickedChoice(question) ?? question.suggested?.option ?? null;
-  // none: no question, the take is not one of its options, or the question is locked and the take isn't its pick.
-  // pick: nothing picked yet. picked: this take is the pick. change: another take is.
+  // none: no question, the take is not one of its options, or the question waits on a requested prototype and the take
+  // isn't its pick. closed: the question is resolved and the take isn't its pick. pick: nothing picked yet. picked: this
+  // take is the pick. change: another take is.
   function pickState(question, take, drafted = null) {
     if (!question) return { kind: 'none' };
     const option = (question.options || []).find((o) => o.id === take);
     const picked = shownPick(question, drafted);
     if (!option) return { kind: 'none', picked };
     if (picked === take) return { kind: 'picked', option, picked };
-    if (locked(question)) return { kind: 'none', picked };
+    if (locked(question)) return { kind: question.state === 'resolved' ? 'closed' : 'none', picked };
     return picked ? { kind: 'change', option, picked } : { kind: 'pick', option };
   }
   // questions.html keeps each question's unsent {choice, note} under this key (ui-questions.js getDraft).
@@ -47,38 +54,87 @@
     if (!app?.open?.(String(url), { replace: true })) location.replace(url);
   }
 
-  function pillHtml({ name, pick = { kind: 'none' } }) {
+  // The bar: the states' chips when the round has states, the ‹ name › pager, and below it on its own row the pick
+  // control, when there is one.
+  function pillHtml({ name, pick = { kind: 'none' }, states = null, state = null }) {
+    const chips = states ? `<div class="ps-row ps-states">${Object.entries(states).map(([key, label]) => `<button type="button" data-ps-state="${esc(key)}" aria-pressed="${key === state}">${esc(label)}</button>`).join('')}</div>` : '';
     const control = pick.kind === 'picked' ? '<span class="ps-picked">Picked</span>'
-      : pick.kind === 'pick' || pick.kind === 'change'
-        ? `<button type="button" class="ps-pick" data-ps="pick">${pick.kind === 'pick' ? 'Pick this' : 'Change pick'}</button>`
-        : '';
-    return `<button type="button" data-ps="prev" aria-label="Previous take">‹</button><span class="ps-name" title="${esc(name)}">${esc(name)}</span><button type="button" data-ps="next" aria-label="Next take">›</button>${control}`;
+      : pick.kind === 'closed' ? '<span class="ps-closed">Round answered</span>'
+      : pick.kind === 'pick' || pick.kind === 'change' ? '<button type="button" class="ps-pick" data-ps="pick">Choose this</button>'
+      : '';
+    return `${chips}<div class="ps-row"><button type="button" data-ps="prev" aria-label="Previous take">‹</button><span class="ps-name" title="${esc(name)}">${esc(name)}</span><button type="button" data-ps="next" aria-label="Next take">›</button></div>${control ? `<div class="ps-row ps-act">${control}</div>` : ''}`;
   }
 
+  // rounds: the card's prototype questions, oldest round first, as /api/board's card prototypes.rounds lists them
+  // ({n, q, url, confirm, state}). The pill names the round qid is in, out of the newest round's number; a card with a
+  // single round gets none.
+  function roundPill(rounds, qid) {
+    const at = (rounds || []).find((r) => r.q === qid);
+    if (!at || rounds.length < 2) return '';
+    return `<button type="button" class="ps-chip" data-ps-top="rounds">Round ${at.n} of ${Math.max(...rounds.map((r) => r.n))} · earlier</button>`;
+  }
+  const ROUND_WORD = { open: 'open', requested: 'prototype requested' };
+  function roundSheet({ ref, rounds, qid }) {
+    const rows = [...rounds].reverse().map((r) => `<button type="button" data-ps-round="${esc(r.url)}"><span>Round ${r.n}${r.confirm ? ' confirm' : ''}${r.q === qid ? ' · showing' : ''}</span><span>${ROUND_WORD[r.state] || 'answered'}</span></button>`);
+    return `<div class="ps-sheet" role="dialog" aria-label="Rounds"><h3>Rounds on ${esc(ref)}</h3>${rows.join('')}</div>`;
+  }
+
+  // A touch from start to end: 1 for a swipe left (the next take), -1 for a swipe right, 0 for anything else: under
+  // 50px sideways, more down than across, or starting at the left edge, where the drawer's and the browser's swipes are.
+  const swipeStep = (start, end) => {
+    const dx = end.x - start.x;
+    return start.x < 24 || Math.abs(dx) < 50 || Math.abs(end.y - start.y) * 2 > Math.abs(dx) ? 0 : dx < 0 ? 1 : -1;
+  };
+
   const CSS = `
-.ps-switch { position:fixed; left:16px; right:16px; bottom:calc(var(--app-bottom, 0px) + 14px + env(safe-area-inset-bottom)); z-index:30;
+body > header.top { display:none; }
+main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
+.ps-top { position:fixed; left:10px; right:10px; top:calc(10px + env(safe-area-inset-top)); z-index:31; display:flex; justify-content:space-between;
+  align-items:flex-start; pointer-events:none; font:600 13px -apple-system, system-ui, sans-serif; }
+.ps-top > * { pointer-events:auto; }
+.ps-chip, .ps-close { color:#fff; background:#000a; border:1px solid #fff4; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:inherit; cursor:pointer; }
+.ps-chip { border-radius:999px; padding:0 14px; min-height:40px; }
+.ps-close { margin-left:auto; width:40px; height:40px; border-radius:50%; font-size:17px; line-height:1; }
+.ps-sheet { position:fixed; left:0; right:0; bottom:0; z-index:32; padding:14px 16px calc(22px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0;
+  background:#26262c; color:#fff; box-shadow:0 -8px 30px #0009; }
+.ps-sheet h3 { margin:0 0 8px; font-size:14px; }
+.ps-sheet button { display:flex; justify-content:space-between; gap:12px; width:100%; border:0; border-top:1px solid #fff2; background:transparent; color:#fff;
+  padding:12px 2px; font:inherit; font-weight:500; text-align:left; cursor:pointer; }
+.ps-sheet button span + span { opacity:.7; }
+.ps-switch { position:fixed; left:10px; right:10px; bottom:calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom)); z-index:30;
   display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
 .ps-switch > * { pointer-events:auto; max-width:100%; min-width:0; box-sizing:border-box; }
-.ps-switch .pill, .ps-pill { display:flex; align-items:center; gap:2px; background:#000d; border:1px solid #fff3; border-radius:999px; padding:4px;
-  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:600 13px -apple-system, system-ui, sans-serif; }
-.ps-switch .pill button, .ps-pill button { color:#fff; background:transparent; border:0; border-radius:999px; padding:7px 11px; font:inherit; white-space:nowrap; cursor:pointer; }
+.ps-pill { display:flex; flex-direction:column; gap:6px; width:min(460px, 100%); background:#202026eb; border:1px solid #fff3; border-radius:18px; padding:6px;
+  box-shadow:0 6px 24px #0008; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font:600 13px -apple-system, system-ui, sans-serif; }
+.ps-row { display:flex; align-items:center; gap:2px; min-width:0; }
+.ps-pill button { color:#fff; background:transparent; border:0; border-radius:999px; padding:7px 11px; font:inherit; white-space:nowrap; cursor:pointer; }
 .ps-pill button { flex-shrink:0; min-width:44px; min-height:44px; }
-.ps-switch .pill button.on { background:#fff; color:#000; }
-.ps-name { flex:0 1 auto; padding:7px 6px; color:#fff; white-space:nowrap; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
-.ps-pill .ps-pick { background:#fff; color:#000; margin-left:2px; }
+.ps-name { flex:1 1 auto; padding:7px 6px; color:#fff; white-space:nowrap; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
+.ps-act > * { flex:1; text-align:center; }
+.ps-states { overflow-x:auto; scrollbar-width:none; gap:4px; }
+.ps-pill .ps-states button { background:#fff1; font-weight:500; }
+.ps-pill .ps-states button[aria-pressed="true"] { background:#fff; color:#000; font-weight:700; }
+.ps-pill .ps-pick { background:var(--accent, #fff); color:var(--on-accent, #000); font-weight:700; }
+.ps-closed { padding:12px 11px; border-radius:999px; color:#fffa; background:#fff1; white-space:nowrap; }
 .ps-switch .ps-text { width:min(420px, 100%); resize:none; border-radius:12px; border:1px solid #fff3; background:#000d; color:#fff;
-  padding:7px 10px; font:400 14px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
+  padding:7px 10px; font:400 16px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
 .ps-switch .ps-text::placeholder { color:#fffa; }
 .ps-switch .ps-text[hidden] { display:none; }
-.ps-picked { margin-left:2px; padding:7px 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
+.ps-picked { padding:12px 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
 .ps-note { background:#000d; color:#fff; border-radius:8px; padding:5px 10px; font:500 12px -apple-system, system-ui, sans-serif; text-align:center; }
-.ps-note[hidden] { display:none; }`;
+.ps-note[hidden] { display:none; }
+@media (min-width: 900px) {
+  .ps-pill { width:min(640px, 100%); }
+  .ps-switch .ps-text { width:min(640px, 100%); }
+  .ps-states { flex-wrap:wrap; overflow-x:visible; }
+}`;
 
   const typing = (el) => Boolean(el?.closest?.('input, select, textarea, [contenteditable]:not([contenteditable="false"])'));
 
-  function mount({ takes, initial, render, above = null }) {
+  function mount({ takes, states = null, initial, render, above = null }) {
     const keys = Object.keys(takes);
     const params = new URLSearchParams(location.search);
+    let shownState = states ? startTake(Object.keys(states), params.get('state')) : null;
     const qid = params.get('q');
     const site = globalThis.ClaudeSite;
     if (!document.getElementById('ps-style')) document.head.insertAdjacentHTML('beforeend', `<style id="ps-style">${CSS}</style>`);
@@ -97,20 +153,37 @@
     const pill = box.querySelector('.ps-pill');
     const noteEl = box.querySelector('.ps-note');
     const text = box.querySelector('.ps-text');
+    // The ✕ and, on a card with earlier rounds, the Round pill and its sheet. boardCard: /api/board's card the question is on.
+    const top = document.createElement('div');
+    top.className = 'ps-top';
+    document.body.append(top);
+    let boardCard = null;
+    let sheet = false;
+    const paintTop = () => {
+      const rounds = boardCard?.prototypes?.rounds;
+      top.innerHTML = `${roundPill(rounds, qid)}<button type="button" class="ps-close" data-ps-top="close" aria-label="Close">✕</button>${sheet && rounds ? roundSheet({ ref: boardCard.ref, rounds, qid }) : ''}`;
+    };
+    paintTop();
 
     const note = (text) => { noteEl.textContent = text || ''; noteEl.hidden = !text; };
     const state = () => pickState(question, take, qid ? readDraft(qid).choice : null);
     function paint() {
       const now = state();
-      pill.innerHTML = pillHtml({ name: takes[take], pick: now });
-      text.hidden = !(now.kind === 'pick' || now.kind === 'change');
+      pill.innerHTML = pillHtml({ name: takes[take], pick: now, states, state: shownState });
+      text.hidden = !(now.kind === 'pick' || now.kind === 'change' || now.kind === 'picked');
     }
     function go(next) {
       take = next;
       const u = new URL(location.href); u.searchParams.set('variant', take); history.replaceState(null, '', u);
       note('');
       paint();
-      render(take);
+      render(take, shownState);
+    }
+    function show(next) {
+      shownState = next;
+      const u = new URL(location.href); u.searchParams.set('state', next); history.replaceState(null, '', u);
+      paint();
+      render(take, shownState);
     }
 
     async function load() {
@@ -124,6 +197,8 @@
           || (topic && (await (await fetch(site.url('api/questions?topic=' + encodeURIComponent(topic.id)), { cache: 'no-store' })).json()).questions.find((q) => q.id === qid))
           || null;
         if (!question) note('This prototype’s question is gone, so there is nothing to pick.');
+        boardCard = topic && board.items.find((i) => i.questions?.topic === topic.id) || null;
+        paintTop();
       } catch { /* keep the last question shown */ }
       if (fromPush && pickedChoice(question)) {
         const card = /^item:(.+)$/.exec(question.topic || '')?.[1];
@@ -148,22 +223,46 @@
     });
 
     pill.addEventListener('click', (e) => {
+      const chip = e.target.closest('[data-ps-state]')?.dataset.psState;
+      if (chip) { show(chip); return; }
       const act = e.target.closest('[data-ps]')?.dataset.ps;
       if (act === 'prev') go(takeAt(keys, take, -1));
       else if (act === 'next') go(takeAt(keys, take, 1));
       else if (act === 'pick') pick();
     });
+    // ✕ follows the hidden header's back arrow, so it goes where back goes (router.js page tree).
+    top.addEventListener('click', (e) => {
+      const round = e.target.closest('[data-ps-round]')?.dataset.psRound;
+      if (round) { replaceWith(site.url(round)); return; }
+      const act = e.target.closest('[data-ps-top]')?.dataset.psTop;
+      if (act === 'close') document.querySelector('header.top a.back').click();
+      else if (act === 'rounds') { sheet = !sheet; paintTop(); }
+    });
     document.addEventListener('keydown', (e) => {
       if (typing(e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
       if (e.key === 'ArrowLeft') go(takeAt(keys, take, -1));
       else if (e.key === 'ArrowRight') go(takeAt(keys, take, 1));
+      else if (e.key === 'Escape' && sheet) { sheet = false; paintTop(); }
     });
+    // A swipe that starts in a box scrolling sideways is that box's own scroll.
+    let touch = null;
+    document.addEventListener('touchstart', (e) => {
+      const t = e.touches[0];
+      const scrolls = (el) => el && el !== document.body && (el.scrollWidth > el.clientWidth && /auto|scroll/.test(getComputedStyle(el).overflowX) ? true : scrolls(el.parentElement));
+      touch = e.touches.length === 1 && !typing(e.target) && !e.target.closest?.('.ps-sheet') && !scrolls(e.target) ? { x: t.clientX, y: t.clientY } : null;
+    }, { passive: true });
+    document.addEventListener('touchend', (e) => {
+      const t = e.changedTouches[0];
+      const step = touch && t ? swipeStep(touch, { x: t.clientX, y: t.clientY }) : 0;
+      touch = null;
+      if (step) go(takeAt(keys, take, step));
+    }, { passive: true });
     document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
 
     go(take);
     load();
-    return { takes: keys, get take() { return take; }, go };
+    return { takes: keys, get take() { return take; }, get state() { return shownState; }, go, show };
   }
 
-  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, mount };
+  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, roundPill, roundSheet, swipeStep, mount };
 })();

package/board/public/prototype.html

@@ -10,7 +10,7 @@
 <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 take pill and its note. */
+     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)); }
   /* 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; }
@@ -20,11 +20,28 @@
   #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. */
+  #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-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); }
   #protoToast[hidden] { display: none; }
   @media (max-width: 899px) { #protoToast { top: max(12px, env(safe-area-inset-top)); } }
 
+  /* A take's own boxes are capped to the stage at phone width, so a fixed-width panel never cuts off. prototype-kit.js
+     (phoneFit) marks what the take lays side by side with data-stack, which stacks in one column whether the take used
+     grid, flex (wrapping or not) or inline-block, and a frame 600px or wider with data-wide: it keeps its own layout
+     and scrolls sideways inside its data-scroll box. */
+  @media (max-width: 599px) {
+    #stage :where(div, section, article, aside, nav, header, footer, main, form, ul, ol, table, figure):not([data-wide]) { max-width: 100%; min-width: 0; }
+    #stage [data-scroll] { overflow-x: auto; max-width: 100%; }
+    #stage [data-wide] { max-width: none; flex-shrink: 0; }
+    #stage [data-stack] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; grid-template-columns: none !important; align-items: stretch !important; }
+    #stage [data-stack] > * { width: auto !important; flex: 0 0 auto !important; grid-column: auto !important; float: none !important; }
+  }
+  /* iOS Safari zooms the page when it focuses a field under 16px. */
+  #stage :where(input, select, textarea) { font-size: 16px; }
   #stage .kit-sidebar.sidebar { position: relative; inset: auto; z-index: auto; transform: none; visibility: visible; transition: none;
     width: min(320px, 100%); height: 640px; margin: 0 auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 14px; }
   #stage .kit-sidebar.sidebar:not(.kit-head) > header.top { display: none; }
@@ -40,15 +57,52 @@
 <main class="proto-main"><div id="stage"></div></main>
 <div class="toast" id="protoToast" role="status" hidden></div>
 <script id="prototypeData" type="application/json">{{prototypeData}}</script>
-<script src="claude.js"></script>
 <script src="ui.js"></script>
 <script src="ui-links.js"></script>
 <script src="ui-enums.js"></script>
-<script src="ui-phase-bars.js"></script>
+<script src="ui-progress-bar.js"></script>
+<script src="ui-order.js"></script>
+<script src="ui-patch.js"></script>
+<script src="ui-threads.js"></script>
 <script src="ui-cards.js"></script>
+<script src="ui-header.js"></script>
+<script src="ui-snapshot.js"></script>
 <script src="ui-page-header.js"></script>
 <script src="ui-sidebar.js"></script>
+<script src="ui-questions.js"></script>
+<script src="ui-prompts.js"></script>
+<script src="ui-markdown.js"></script>
 <script src="ui-hub.js"></script>
+<script src="toasts.js"></script>
+<script src="dialogs.js"></script>
+<script src="prompts.js"></script>
+<script src="rules-editor.js"></script>
+<script src="claude.js"></script>
+<script src="attach.js"></script>
+<script src="hub-kit.js"></script>
+<script src="linear-key.js"></script>
+<script src="sidebar.js"></script>
+<script src="app.js"></script>
+<script src="new-task.js"></script>
+<script src="app-core.js"></script>
+<script src="app-threads.js"></script>
+<script src="app-cards.js"></script>
+<script src="app-lanes.js"></script>
+<script src="app-asks.js"></script>
+<script src="app-needs.js"></script>
+<script src="app-header.js"></script>
+<script src="app-arch.js"></script>
+<script src="app-reader.js"></script>
+<script src="app-banner.js"></script>
+<script src="app-snapshot.js"></script>
+<script src="view-settings.js"></script>
+<script src="view-questions.js"></script>
+<script src="view-notes.js"></script>
+<script src="view-hub.js"></script>
+<script src="view-hub-settings.js"></script>
+<script src="view-frame.js"></script>
+<script src="router.js"></script>
+<script src="shell.js"></script>
 <script src="prototype-switcher.js"></script>
 <script src="prototype-kit.js"></script>
 <script>PrototypeKit.start(JSON.parse(document.getElementById('prototypeData').textContent));</script>

package/board/public/router.js

@@ -85,18 +85,19 @@ globalThis.AppRouter = (function () {
     const u = new URL(view.url, 'http://hub');
     return /^\/[^/]+\/prototype-[\w-]+\.html$/.test(u.pathname) ? u.searchParams.get('q') || null : null;
   }
-  function levelOf(view, { boards = new Set() } = {}) {
+  // 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 } = {}) {
     if (view?.kind === 'board') return 0;
     if (view?.kind === 'questions') return 1;
-    return questionOf(view, boards) ? 2 : null;
+    return questionOf(view, boards) ? (wide ? 1 : 2) : null;
   }
   // → the views above view in the tree, its board first. card: the card whose thread the owner left the board from,
   // which the board keeps open.
-  function parentsOf(view, { boards = new Set(), card = null } = {}) {
+  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)}` : '' };
-    return q ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
+    return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
   // Each history entry carries {idx}, its distance from the shell's first entry, pushed when a push opened it, and on a
@@ -109,8 +110,8 @@ globalThis.AppRouter = (function () {
   // boards() → the board routes now.
   // → {push(href, from), replace(href), up()}: push and replace write an entry for a view go is showing; replace answers
   // 'up' when it went back to a parent instead, which then takes href, and go shows it on that pop.
-  function listen({ boards, go }) {
-    const b = () => ({ boards: boards() });
+  function listen({ boards, go, wide = () => false }) {
+    const b = () => ({ boards: boards(), wide: wide() });
     const mark = (pushed) => (pushed ? { pushed: true } : {});
     let idx = Number.isInteger(history.state?.idx) ? history.state.idx : 0;
     let landing = null;

package/board/public/shell.js

@@ -6,8 +6,8 @@
 // view in place through router.js; a link to anything that isn't a page loads it. Leaving a view whose root holds
 // [data-dirty], an unsaved edit, asks first. The shell holds the hub's one stream, /_hub/stream
 // (hub/stream.mjs): `change {route}` signals the open board, and `sidebar` repaints the sidebar. A board the shell
-// leaves is unmounted; one left fresh whose stream sent no change since paints live when it comes back, and any other
-// paints dimmed from its last visit (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
+// leaves is unmounted, and paints live from its saved copy when it comes back
+// (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md).
 // A push tap reaches it from hub/sw.js as {open: url}, and a page framed inside it hands it a view's URL through
 // AppShell.open(url, {replace, frames}) → true when the shell shows it in place; frames false refuses a frame view.
 // AppShell.reload() reloads the app past the shell the service worker keeps.
@@ -35,6 +35,10 @@ window.AppShell = (function () {
       channel.port1.onmessage = done;
       try { controller.postMessage({ forget: 'shell' }, [channel.port2]); } catch { done(); }
     });
+    // Only this reload starts at the top: iOS put the old offset back once the page had grown and left that area unpainted until a scroll
+    // (docs/adr/2026-11-06-1100-the-shell-turns-off-scroll-restoration.md). pagehide gives ordinary reloads their restore back.
+    history.scrollRestoration = 'manual';
+    addEventListener('pagehide', () => { history.scrollRestoration = 'auto'; }, { once: true });
     setTimeout(() => location.reload(), 0);
   }
 
@@ -57,10 +61,20 @@ window.AppShell = (function () {
     // A stored sidebar's code says nothing about the shell that booted, so it adopts the next live hash.
     bootCode = data?.code || null;
     data ||= read(DATA_KEY);
-    // A board shared with someone else, view only (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
-    // the hub sends them data.shared, and style.css hides what writes under .shared-view.
+    // A board shared with someone else (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+    // the hub sends them data.shared, and style.css hides what writes under .shared-view. On a board they have Full on
+    // (data.shared.full; docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md) the page is .shared-full too,
+    // which shows the composers and card buttons again; levelHere follows the route shown and each sidebar event.
     const shared = data?.shared || null;
     document.documentElement.classList.toggle('shared-view', Boolean(shared));
+    const sharedHere = (route) => ({ by: data?.shared?.by ?? null, full: Boolean(data?.shared?.full?.includes(route)) });
+    function levelHere() {
+      if (!shared || !current) return;
+      const here = sharedHere(current.route);
+      document.documentElement.classList.toggle('shared-full', here.full);
+      const strip = current.root.querySelector('.view-only-strip');
+      if (strip) strip.innerHTML = BoardView.sharedStrip(here);
+    }
     sidebar = Sidebar.mount({ data, poll: false, reload, open: (href) => { if (!open(href)) location.assign(href); } });
     const boards = () => new Set((data?.sites || []).filter((s) => s.board).map((s) => s.route));
     const titleOf = (route) => data?.sites?.find((s) => s.route === route)?.title || route;
@@ -72,13 +86,8 @@ window.AppShell = (function () {
       listeners.get(route).add(fn);
       return () => listeners.get(route)?.delete(fn);
     };
-    // route → {fresh, generatedAt} for each board left fresh with no change since. Trusted only while the stream is up:
-    // a dropped stream may have missed a change, so its return forgets them all.
-    const left = new Map();
-    let streamUp = false;
     let current = null;
     function changed(route) {
-      left.delete(route);
       for (const fn of listeners.get(route) || []) fn();
     }
 
@@ -94,8 +103,7 @@ window.AppShell = (function () {
       const cur = es = new EventSource('/_hub/stream');
       cur.addEventListener('open', () => {
         tries = 0;
-        streamUp = true;
-        if (opened) { left.clear(); if (current) changed(current.route); }
+        if (opened && current) changed(current.route);
         opened = true;
       });
       cur.addEventListener('change', (e) => {
@@ -107,10 +115,10 @@ window.AppShell = (function () {
         try { data = JSON.parse(e.data); } catch { return; }
         codeSeen(data.code);
         sidebar.setData(data);
+        levelHere();
         current?.v?.B?.renderStatus?.();
       });
       cur.addEventListener('error', () => {
-        streamUp = false;
         if (cur.readyState !== EventSource.CLOSED || es !== cur) return;
         retry = setTimeout(openStream, Math.min(30000, 1000 * 2 ** tries++));
       });
@@ -131,6 +139,14 @@ window.AppShell = (function () {
     };
     for (const type of ['pointerdown', 'keydown', 'scroll']) addEventListener(type, beat, { capture: true, passive: true });
 
+    // docs/adr/2026-11-05-1834-while-typing-the-header-is-a-strip-and-the-send-bar-sits-on-the-keyboard.md
+    // While a text field has focus :root.typing is set and style.css disables the floating + (New task); nothing else
+    // on the page moves.
+    document.addEventListener('focusin', (ev) => {
+      document.documentElement.classList.toggle('typing', ev.target.matches?.('textarea, input[type="text"], input:not([type])') ?? false);
+    });
+    document.addEventListener('focusout', () => document.documentElement.classList.remove('typing'));
+
     // A view that changed what the sidebar's foot rows say, such as notifications, asks for a fresh copy
     // rather than waiting for the stream's next one.
     async function refreshSidebar() {
@@ -179,29 +195,23 @@ window.AppShell = (function () {
       const board = view.kind === 'board';
       const hub = route === undefined;
       const siteTitle = hub ? 'Hub' : titleOf(route);
-      if (current) {
-        const st = current.v.B.state;
-        const keep = streamUp && st?.view === 'fresh' && st.board ? { fresh: st.fresh, generatedAt: st.board.generatedAt } : null;
-        current.v.unmount();
-        if (keep) left.set(current.route, keep);
-      }
+      if (current) current.v.unmount();
       const page = board ? null : AppViews[view.kind];
       const root = document.createElement('div');
       root.className = board ? 'view-board' : page.className;
-      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared }) : page.markup(view, { siteTitle });
+      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared: shared && sharedHere(route) }) : page.markup(view, { siteTitle });
       if (current) current.root.replaceWith(root); else scrim.after(root);
       const siteRoot = hub ? '/_hub' : '/' + encodeURIComponent(route);
       let v;
       if (board) {
-        const live = streamUp ? left.get(route) || null : null;
-        left.delete(route);
-        v = BoardView.create(root, siteRoot, { signal: signalFor(route), live, pause: () => data?.pause, away: () => data?.away });
+        v = BoardView.create(root, siteRoot, { signal: signalFor(route), pause: () => data?.sites?.find((s) => s.route === route)?.pause || data?.pause, away: () => data?.away });
       } else {
         v = page.create(root, siteRoot, { view, siteTitle, boards, open: openHere, toggleSidebar: sidebar.toggle, keydown: sidebar.keydown, pointerdown: sidebar.pointerdown,
           reload: () => go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'reload'), closeSidebar: sidebar.close, up: () => router.up(),
           loaded: (url, title) => { if (current?.v === v) framed(url, title); }, sidebarChanged: refreshSidebar });
       }
       current = { view, route, root, v };
+      levelHere();
       document.title = board ? siteTitle : page.title(view, { siteTitle });
       if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
       sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
@@ -232,8 +242,29 @@ window.AppShell = (function () {
     // go(view, href, how, from): router.js's, with how 'replace' for a framed page's hand-off and 'reload' for a view's
     // own refresh. → true, or a promise of whether the view switched once the owner answers about an unsaved edit.
     let router = null;
+    const wide = matchMedia('(min-width: 900px)');
+    // 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);
+    }
     function go(view, href, how, from) {
       if (!AppRouter.mounted(view)) return false;
+      if (view.kind === 'questions' && wide.matches) {
+        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.
+        else if (current?.view.kind === 'board' && current.route === view.route && !settings) {
+          focusPane(view.id);
+          sidebar.close();
+          return true;
+        }
+        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) focusPane(view.id); return shown; });
+      }
       if (view.kind === 'settings') {
         if (current?.view.kind === 'board' && current.route === view.route) {
           const here = AppRouter.viewOf(location.href, { boards: boards() });
@@ -285,7 +316,17 @@ window.AppShell = (function () {
     }
     if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
 
-    router = AppRouter.listen({ boards, go });
+    let pane = null;
+    if (first.kind === 'questions' && wide.matches) {
+      pane = { id: first.id };
+      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.
+    wide.addEventListener('change', () => {
+      if (wide.matches && current?.view.kind === 'questions') go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
+    });
     opener = (url, { replace = false, frames = true } = {}) => {
       const view = AppRouter.viewOf(url, { boards: boards() });
       if (!AppRouter.mounted(view) || (!frames && view.kind === 'frame')) return false;
@@ -301,6 +342,7 @@ window.AppShell = (function () {
     navigator.serviceWorker?.startMessages?.();
 
     show(first);
+    if (pane) focusPane(pane.id);
     openStream();
     addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
     addEventListener('pageshow', openStream);
@@ -309,7 +351,6 @@ window.AppShell = (function () {
     addEventListener('pagehide', (e) => {
       if (!e.persisted || !es) return;
       clearTimeout(retry);
-      streamUp = false;
       es.close();
     });
   }

package/board/public/sidebar.css

@@ -41,6 +41,11 @@
 html.sb-update body.has-sidebar > .top .hub, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
 html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub::after {
   content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
+/* A busy hub gets an orange dot on the logo and a broken one a red dot, in the update dot's place (red, then orange, then blue). */
+html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > .top .hub, html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
+html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > .top .hub::after, html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > :not(.sidebar) > .top .hub::after {
+  content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--color-notice); box-shadow: 0 0 0 2px var(--bg); }
+html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-sidebar > :not(.sidebar) > .top .hub::after { background: var(--color-danger); }
 .sidebar .sb-text { flex: 1; min-width: 0; }
 .sidebar .sb-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .sidebar .sb-moon { display: inline-block; margin-left: 5px; color: var(--muted); vertical-align: -1px; }
@@ -180,6 +185,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .t-building { --tone: var(--color-notice); }
 .sidebar .t-ok { --tone: var(--color-success); }
 .sidebar .t-wait { --tone: var(--color-notice); }
+.sidebar .t-paused { --tone: var(--muted); }
 
 @media (min-width: 900px) {
   body.has-sidebar { padding-left: 272px; }