@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/view-questions.js

@@ -4,31 +4,41 @@
 // opens the topic whose pill was to its left before the Send, else to its right, and with no topic left that has an
 // open question goes back to the board, where the Sent line shows as a toast (BoardUI.sentNotice). An open question
 // with `urgent: true` in owner.json shows alone first, and its Send follows the same rule for its topic. A question
-// whose options are prototype takes frames each take with ?take= (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md).
+// whose url is a prototype page shows its options and a View prototypes link to its full-page viewer
+// (docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md).
 // Each question's eye sends `prototype-request {key?, question, note, choice}` for that question instead of an answer,
 // with its note box as the note and its pick so far as the choice (docs/adr/2026-11-02-1822-each-question-has-its-own-prototype-eye.md).
 // The question then reads prototype requested, locked, until its prototype round arrives, and once the request is
 // recorded the page moves on as a Send does (docs/adr/2026-11-03-1803-a-question-asked-for-a-prototype-is-resolved.md,
 // docs/adr/2026-11-04-2130-a-prototype-request-waits-for-its-prototype.md).
-// A topic's resolved questions fold under "resolved (N)", read-only; a resolved question's badge, once confirmed, sends
-// `reask-request {key?, question}` (docs/adr/2026-11-04-2001-a-resolved-question-is-read-only-and-can-be-asked-again.md).
-// fits: each framed take's measured size, kept across repaints and visits so a take redraws at its size at once.
-(globalThis.AppViews ||= {}).questions = ((fits) => ({
+// A question the owner has sent an answer to is resolved: read-only, green, with a Resolved badge. One that resolves
+// while its topic shows stays in place until you leave that topic, by a pill, a link or the move on after the last
+// Send; a topic's sent questions otherwise fold under "resolved (N)", which names only the count, above its open ones. A sent question's badge, once confirmed, sends `question-reopen {key?, question}`, and the question
+// opens again with its last pick and note for a new Send. Each question is numbered by its place on its card
+// (docs/adr/2026-11-05-2331-a-sent-answer-is-resolved-in-place-until-the-page-reloads.md,
+// docs/adr/2026-11-06-1100-resolved-questions-fold-away-once-you-leave-their-topic.md).
+// A topic or question that arrives while the page shows inserts its pill or card where it belongs, and the counts
+// update, with no repaint, so the open topic, its picks, the note being typed and the scroll stay
+// (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md).
+// The page shows open questions only: it ends at the Send bar, opens by itself only a topic with an open question, and
+// with none shows the hub's moon and "no open questions". A link to a question still opens its topic, as a work item's
+// Questions button does (docs/adr/2026-11-06-0037-the-open-questions-page-shows-open-questions-only.md).
+// markup({embedded: true}) and ctx.embedded mount it in the board's desktop Needs you pane (app-needs.js): no header,
+// and the board's URL and scroll are left alone.
+(globalThis.AppViews ||= {}).questions = {
   className: 'view-questions',
   title: () => 'Waiting On You',
-  markup: () => `${BoardUI.header({ lead: 'back', title: 'Waiting on you', controls: false, trail: '<span class="muted small" id="progress"></span>' })}
+  markup: ({ embedded = false } = {}) => `${embedded ? '' : BoardUI.header({ lead: 'logo', title: 'Waiting on you', logoSrc: '/_hub/kickflip.png', controls: false, trail: '<span class="muted small" id="progress"></span>', pages: 'board' })}
 <main>
-  <section id="page"></section>
+  ${embedded ? '<span class="muted small" id="progress" hidden></span>' : ''}<section id="page"></section>
 </main>`,
 
   create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
     const { $, site } = B;
-    const { esc, choiceLabel, choiceOf, questionCard, roundChip, takes, linkContext, badge, topicName, cardTopics, topicRow, nextQuestion, sentNotice, fetchJSON, restartNotice } = BoardUI;
-    // prototype-switcher.js reads a draft's note and clears the draft once it sends that question's answer.
-    const draftKey = (id) => 'qdraft:' + id;
-    const getDraft = (id) => { try { return JSON.parse(localStorage.getItem(draftKey(id)) || '{}'); } catch { return {}; } };
-    const setDraft = (id, v) => { try { localStorage.setItem(draftKey(id), JSON.stringify(v)); } catch {} };
-    const hashId = () => { const h = location.hash.slice(1); try { return decodeURIComponent(h); } catch { return h; } };
+    const scroll = (y) => { if (!ctx.embedded) scrollTo(0, y); };
+    const setHash = (id) => { if (!ctx.embedded) history.replaceState(history.state, '', '#' + encodeURIComponent(id)); };
+    const { esc, getDraft, setDraft, choiceLabel, choiceOf, noteOf, isSent, questionCard, roundChip, linkContext, badge, topicName, cardTopics, topicRow, nextQuestion, sentNotice, fetchJSON, downLanding } = BoardUI;
+    const hashId = () => { if (ctx.embedded) return ''; const h = location.hash.slice(1); try { return decodeURIComponent(h); } catch { return h; } };
 
     let all = [];
     // The shown topic's resolved questions, which /api/board leaves out: GET /api/questions answers them as the topic
@@ -43,46 +53,52 @@
     let soloId = null;
     let shown = '';
     let sentLine = '';
+    // The shown topic's questions this page has drawn unsent, which stay in place once sent or resolved until you leave
+    // the topic (setTopic).
+    const inPlace = new Set();
     // The footer after a prototype request: the blue spinner, then these words.
     const PROTOTYPE_REQUESTED = 'prototype requested';
     // The bar's line while a suggested option is still pre-checked.
     const SUGGESTED = 'suggested options are selected';
     const statusHtml = (line) => (line.startsWith(PROTOTYPE_REQUESTED) ? '<span class="try-spin" aria-hidden="true"></span>' : '') + esc(line);
-    let scrollTake = null;
-    const takeResources = new Map();
-    const clearTakeResources = (within = root) => {
-      for (const [shot, release] of takeResources) {
-        if (!shot.isConnected || within.contains(shot)) { release(); takeResources.delete(shot); }
-      }
-    };
-    B.atUnmount(() => clearTakeResources());
 
     const send = (kind, data) => site.send(kind, { ...data, ...(board ? { since: board.version } : {}) });
     const byId = (id) => all.find((q) => q.id === id) || resolved.questions.find((q) => q.id === id);
     const topicOf = (qid) => topics.find((t) => t.questions.includes(qid)) || null;
     const openTopics = () => topics.filter((t) => t.state !== 'resolved');
     const links = (q) => linkContext(items, q.topic?.startsWith('item:') ? q.topic.slice(5) : null, { base: './' });
-    const urgentOpen = () => all.find((q) => q.urgent && q.state === 'open');
+    // Shows a topic, or none; the topic left folds its sent questions.
+    const setTopic = (id) => {
+      if (id !== topicId) for (const qid of topics.find((t) => t.id === topicId)?.questions || []) inPlace.delete(qid);
+      topicId = id;
+    };
+    const urgentOpen =() => all.find((q) => q.urgent && q.state === 'open');
+    // A question's number on its card: its place in its topic, which keeps every question it has had.
+    const numberOf = (q) => (topicOf(q.id)?.questions.indexOf(q.id) ?? -1) + 1;
+    // The questions the form shows, in order; the rest of qs fold under resolved (N).
+    const inForm = (qs) => qs.filter((q) => !isSent(q) || inPlace.has(q.id));
 
     // docs/adr/2026-10-29-1639-waiting-on-you-leads-with-what-needs-the-owner.md
     function topicBar() {
       const list = topicRow(topics, topicId).pills;
       if (list.length < 2) return '';
-      return `<div class="topics" role="group" aria-label="Topics">${list.map((t) =>
-        `<button data-topic="${esc(t.id)}" aria-pressed="${t.id === topicId}" title="${esc(t.title)}">${esc(topicName(t))}<span class="n">${t.state === 'resolved' ? 'resolved' : t.open}</span></button>`).join('')}</div>`;
+      return `<div class="topics" role="group" aria-label="Topics">${list.map((t) => pillHtml(t)).join('')}</div>`;
     }
+    // An arrival (arrive) slides in with a glow and settles (style.css .arrived).
+    const pillHtml = (t, arrived = false) => `<button class="${arrived ? 'arrived ' : ''}${t.progress ? 'progress' : ''}" data-topic="${esc(t.id)}" aria-pressed="${t.id === topicId}" title="${esc(t.title)}">${esc(topicName(t))}<span class="n">${t.state === 'resolved' ? 'resolved' : t.open}</span></button>`;
     const topicHead = (t) => t ? `<div class="topichead muted small"><span>${esc(t.title)}${t.summary ? ` · ${esc(t.summary)}` : ''}</span>${roundChip(t.round)}</div>` : '';
 
-    // Only open questions changed here since their last answer, with files attached, or with a suggested option
-    // pre-checked and never answered, are sent; a resolved one is read-only.
+    // Only open questions changed here since their last answer, with files attached, reopened with a pick, or with a
+    // suggested option pre-checked and never answered, are sent; a sent one is read-only.
     const filesOf = (q) => BoardAttach.files('q:' + q.id, site.root);
     const uploading = (qs) => qs.some((q) => BoardAttach.busy('q:' + q.id, site.root));
     function pending(qs) {
-      return qs.filter((q) => q.state !== 'resolved' && q.state !== 'requested').filter((q) => {
+      return qs.filter((q) => q.state === 'open').filter((q) => {
         const d = getDraft(q.id);
         if (filesOf(q).length) return true;
         const last = q.answers[q.answers.length - 1];
         if (!last && q.suggested) return true;
+        if (q.reopened && choiceOf(q, d) !== null) return true;
         if (!('choice' in d) && !d.note) return false;
         return !last || (d.choice ?? last.choice) !== last.choice || (d.note || '') !== (last.note || '');
       });
@@ -94,12 +110,14 @@
       return t ? t.questions.map(byId).filter(Boolean) : [];
     }
 
-    function loadResolved() {
+    // → the fetch of the topic's resolved questions, or null when they are held. force asks again; the questions held stay
+    // drawn until the new ones land.
+    function loadResolved(force = false) {
       const t = soloId ? null : topics.find((x) => x.id === topicId);
-      if (!t?.resolved || (resolved.topic === t.id && resolved.n === t.resolved)) return;
-      resolved = { topic: t.id, n: t.resolved, questions: [] };
+      if (!t?.resolved || (!force && resolved.topic === t.id && resolved.n === t.resolved)) return null;
+      resolved = { topic: t.id, n: t.resolved, questions: resolved.topic === t.id ? resolved.questions : [] };
       const asked = resolved;
-      fetchJSON(site.url('api/questions?topic=' + encodeURIComponent(t.id)), { sleep: B.sleep }).then(({ body }) => {
+      return fetchJSON(site.url('api/questions?topic=' + encodeURIComponent(t.id)), { sleep: B.sleep }).then(({ body }) => {
         if (!B.alive() || resolved !== asked) return;
         asked.questions = body.questions || [];
         repaint(false);
@@ -107,139 +125,31 @@
     }
 
     function render() {
-      clearTakeResources();
       loadResolved();
+      drawn = drawnOf();
       const el = $('#page');
       const qs = visible();
       if (!qs.length) {
-        el.innerHTML = '<p class="muted">Nothing is waiting on you.</p>' + waitingTopics() + resolvedTopics();
+        el.innerHTML = `<div class="q-empty"><svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${HubUI.TILE_PATHS.moon}</svg><p class="muted">no open questions</p></div>`;
         $('#progress').textContent = '';
         return;
       }
       const t = topics.find((x) => x.id === topicId);
-      const live = qs.filter((q) => q.state !== 'resolved');
-      const done = qs.filter((q) => q.state === 'resolved');
+      const live = inForm(qs);
+      const done = qs.filter((q) => !live.includes(q));
+      for (const q of live) inPlace.add(q.id);
       const head = soloId
         ? `<div class="solo">${badge('notice', 'needs you first')}<button class="ghost" id="showAll">All questions</button></div>`
         : `${topicBar()}${topicHead(t)}`;
       el.innerHTML = `${head}<form id="qform">
-        ${live.map((q, i) => questionCard(q, { n: soloId ? 0 : i + 1, draft: getDraft(q.id), links: links(q), fit: fitOf(q) })).join('')}
-        ${done.length ? `<details class="done resolved-group"><summary><span class="caret" aria-hidden="true">›</span><span>resolved (${done.length})</span><span class="names">${done.map((q) => esc(q.id)).join(', ')}</span></summary>${done.map((q) => questionCard(q, { links: links(q) })).join('')}</details>` : ''}
+        ${done.length ? `<details class="done resolved-group"><summary><span class="caret" aria-hidden="true">›</span><span>resolved (${done.length})</span></summary>${done.map((q) => questionCard(q, { n: numberOf(q), links: links(q) })).join('')}</details>` : ''}
+        ${live.map((q) => questionCard(q, { n: numberOf(q), draft: getDraft(q.id), links: links(q) })).join('')}
         <div class="bar"><span class="muted small${sentLine ? ' sent' : ''}" id="qstatus" role="status">${statusHtml(sentLine)}</span><span class="send-hint" aria-hidden="true">${/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? '⌘↵' : 'Ctrl+↵'}</span><button class="primary" type="submit" id="send">Send</button></div>
-      </form>${soloId ? '' : waitingTopics() + resolvedTopics()}`;
+      </form>`;
       BoardAttach.paintAll();
-      el.querySelectorAll('.take-shot').forEach(fitTake);
       updateBar();
     }
 
-    // A width sets its page's height, so a size measured at another width is measured again.
-    const fitKey = (qid, oid) => `${site.root}\n${qid}\n${oid}`;
-    const fitOf = (q) => (oid) => { const f = fits.get(fitKey(q.id, oid)); return f && f.w === window.innerWidth ? f : null; };
-    // A phone's header is a bar at the bottom (docs/adr/2026-10-31-1532-phone-headers-sit-at-the-bottom.md), so only a header
-    // at the top covers the frame's top.
-    const frameTop = (shot) => {
-      const head = $('header.top')?.getBoundingClientRect();
-      const over = head && head.top < innerHeight / 2 ? head.bottom : 0;
-      return Math.max(0, scrollY + shot.getBoundingClientRect().top - over);
-    };
-    function repaintTakes(sec) {
-      if (!sec.querySelector('.takes')) return;
-      const q = byId(sec.dataset.q);
-      const old = sec.querySelector('.takes');
-      clearTakeResources(old);
-      old.outerHTML = takes(q, choiceOf(q, getDraft(q.id)), links(q), fitOf(q));
-      sec.querySelectorAll('.take-shot').forEach(fitTake);
-    }
-
-    // A full-screen take gets the screen between the header and the Send bar.
-    const screenH = () => Math.max(320, innerHeight - ($('header.top')?.offsetHeight || 0) - ($('#qform .bar')?.offsetHeight || 0));
-
-    // A framed take is sized to its page once it loads, since the frame can't scroll. A page that fills its frame at
-    // any height is a full-screen take and gets screenH. A full-screen take, or a grid take past 80% of the screen's
-    // height, turns its question into one full-width take under a choice row
-    // (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md).
-    function fitTake(shot) {
-      const frame = shot.querySelector('iframe');
-      const sec = shot.closest('section.q');
-      // A switch in place (inPlace) changes the take a frame shows, and so the key its size is kept under.
-      const key = () => fitKey(sec.dataset.q, shot.closest('.take').dataset.opt);
-      const full = Boolean(shot.closest('.takes-full'));
-      let watcher = null;
-      let probing = false;
-      let raf = 0;
-      const measure = () => {
-        try {
-          const doc = frame.contentDocument;
-          // The body's own height: the document's scrollHeight never drops below the frame's.
-          return doc?.body && doc.location.href !== 'about:blank' ? Math.ceil(doc.body.getBoundingClientRect().height) : null;
-        } catch { return null; }
-      };
-      const sizeNow = () => { const f = fits.get(key()); return f?.w === window.innerWidth ? { ...f } : { w: window.innerWidth }; };
-      const fillsFrame = (h) => Math.abs(h - frame.clientHeight) <= 1;
-      // A page as tall as its frame is grown once: a page sized by its content keeps its height, a full-screen one
-      // follows the frame.
-      const probe = () => {
-        probing = true;
-        shot.style.height = `${frame.clientHeight + 202}px`;
-        raf = requestAnimationFrame(() => raf = requestAnimationFrame(() => {
-          raf = 0;
-          probing = false;
-          const h = measure();
-          if (h === null || !shot.isConnected || !B.alive()) return;
-          fits.set(key(), { ...sizeNow(), fills: fillsFrame(h) });
-          apply();
-        }));
-      };
-      const apply = () => {
-        if (probing) return;
-        const h = measure();
-        if (h === null || !shot.isConnected || !B.alive()) return;
-        const size = sizeNow();
-        if (size.fills === undefined) {
-          if (fillsFrame(h)) { probe(); return; }
-          size.fills = false;
-        }
-        // The shot's border is 1px each side, and the frame fills the rest.
-        const height = size.fills ? screenH() : h + 2;
-        if (full) size.fullH = height;
-        else { size.h = height; size.scrolls = size.fills || h > window.innerHeight * 0.8; }
-        fits.set(key(), size);
-        const q = byId(sec.dataset.q);
-        if (!full && size.scrolls && q.options.every((o) => !o.diagram && !o.practice)) {
-          repaintTakes(sec);
-          return;
-        }
-        shot.style.height = `${height}px`;
-        shot.classList.remove('measuring');
-        if (scrollTake === shot) { scrollTo(0, frameTop(shot)); scrollTake = null; }
-      };
-      const off = B.on(frame, 'load', () => {
-        if (measure() === null || !B.alive()) return;
-        watcher?.disconnect();
-        watcher = null;
-        apply();
-        // A page that grows after it loads, or narrows with the view, is measured again.
-        if (!shot.isConnected) return;
-        try {
-          watcher = new frame.contentWindow.ResizeObserver(apply);
-          watcher.observe(frame.contentDocument.body);
-        } catch {}
-      });
-      takeResources.set(shot, () => { off(); watcher?.disconnect(); if (raf) cancelAnimationFrame(raf); });
-    }
-
-    function waitingTopics() {
-      const list = topicRow(topics, topicId).waiting;
-      return list.length ? `<details class="done"><summary>Waiting on Claude · ${list.length}</summary>${list.map((t) =>
-        `<div class="trow"><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button><span class="muted small">${t.answered ? 'answered' : 'Claude replied'}</span></div>`).join('')}</details>` : '';
-    }
-
-    function resolvedTopics() {
-      const done = topics.filter((t) => t.state === 'resolved' && t.id !== topicId);
-      return done.length ? `<details class="done"><summary>Resolved topics · ${done.length}</summary>${done.map((t) =>
-        `<div><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button></div>`).join('')}</details>` : '';
-    }
-
     // The topic a tap on this page acts for, the pills before it and its name, which moveOn reads once it is recorded.
     function leaving() {
       const from = soloId ? topicOf(soloId)?.id : topicId;
@@ -255,33 +165,45 @@
       moveOn(from, pills, what, typeof footer === 'function' ? footer() : footer, typeof footer !== 'function');
     }
 
-    // The tapped Prototype button waits (ui.js waitOn) while the request is sent.
-    async function askPrototype(q, button) {
-      const st = $('#qstatus');
+    // A tap's change no load has drawn in BoardUI's PENDING_LATE_MS: the board loads once and the button rests.
+    function stillWaiting() {
+      if (!B.alive()) return;
+      B.toast('Still waiting on the board');
+      shown = '';
+      load(false);
+    }
+    // A refusal rests the button with its reason on the status line, as before.
+    const refused = (e) => { $('#qstatus').textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; };
+
+    // The tapped Prototype button waits (ui.js waitOn) until the page shows the request
+    // (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    function askPrototype(q, button) {
       const key = q.topic?.startsWith('item:') ? q.topic.slice(5) : null;
       const at = leaving();
-      st.textContent = '';
+      $('#qstatus').textContent = '';
       const d = getDraft(q.id);
-      let out;
-      try { out = await BoardUI.waitOn(button, send('prototype-request', { ...(key ? { key } : {}), question: q.id, note: (d.note || '').trim(), choice: choiceOf(q, d) })); }
-      catch (e) { st.textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; return; }
-      setDraft(q.id, {});
-      await moveOnOnceLoaded(at, `Prototype requested${at.name ? ` for ${at.name}` : ''}.`, out, PROTOTYPE_REQUESTED);
+      return BoardUI.waitOn(button, BoardUI.pending.within((async () => {
+        let out;
+        try { out = await send('prototype-request', { ...(key ? { key } : {}), question: q.id, note: noteOf(q, d).trim(), choice: choiceOf(q, d) }); } catch (e) { refused(e); return; }
+        setDraft(q.id, {});
+        await moveOnOnceLoaded(at, `Prototype requested${at.name ? ` for ${at.name}` : ''}.`, out, PROTOTYPE_REQUESTED);
+      })(), stillWaiting));
     }
 
-    // A resolved question's badge asks Claude to ask it again from the card's current notes, once the owner confirms.
-    // The topic's resolved questions load again, so the question shows its re-ask under way.
-    async function askAgain(q, button) {
-      if (!(await BoardDialogs.confirm('Ask this again from today’s context?')) || !B.alive()) return;
-      const st = $('#qstatus');
+    // A sent question's Resolved badge reopens it once the owner confirms: the question opens in place with its last
+    // pick and note, and stays in the form until you leave the topic.
+    async function reopen(q, button) {
+      if (!(await BoardDialogs.confirm('Reopen this question?')) || !B.alive()) return;
       const key = q.topic?.startsWith('item:') ? q.topic.slice(5) : null;
-      let out;
-      try { out = await BoardUI.waitOn(button, send('reask-request', { ...(key ? { key } : {}), question: q.id })); }
-      catch (e) { st.textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; return; }
-      if (!B.alive()) return;
-      resolved = { topic: null, n: 0, questions: [] };
-      if (!land(out.board, false)) await load(false);
-      repaint(false);
+      await BoardUI.waitOn(button, BoardUI.pending.within((async () => {
+        let out;
+        try { out = await send('question-reopen', { ...(key ? { key } : {}), question: q.id }); } catch (e) { refused(e); return; }
+        if (!B.alive()) return;
+        inPlace.add(q.id);
+        sentLine = '';
+        if (!land(out.board, false)) await load(false);
+        repaint(false);
+      })(), stillWaiting));
     }
 
     function updateBar() {
@@ -289,7 +211,7 @@
       const n = pending(qs).length;
       const b = $('#send');
       if (b) { b.disabled = !n || uploading(qs); b.textContent = uploading(qs) ? 'Uploading…' : 'Send'; }
-      const live = qs.filter((q) => q.state !== 'resolved');
+      const live = inForm(qs);
       const answered = live.filter((q) => q.state !== 'open').length;
       // docs/adr/2026-11-04-2200-overnight-triage-suggests-your-earlier-answers.md
       const prechecked = live.some((q) => q.suggested && !q.answers.length && choiceOf(q, getDraft(q.id)) === q.suggested.option);
@@ -300,10 +222,10 @@
 
     function pick(hash) {
       const u = urgentOpen();
-      if (u && (!hash || hash === u.id)) { soloId = u.id; topicId = topicOf(u.id)?.id ?? null; return; }
+      if (u && (!hash || hash === u.id)) { soloId = u.id; setTopic(topicOf(u.id)?.id ?? null); return; }
       soloId = null;
-      const t = (hash && topicOf(hash)) || openTopics().find((x) => x.open) || openTopics()[0];
-      topicId = t ? t.id : null;
+      const t = (hash && topicOf(hash)) || topics.find((x) => x.open);
+      setTopic(t ? t.id : null);
     }
 
     const sigNow = () => JSON.stringify([soloId, topicId, topics.map((t) => [t.id, t.state, t.open, t.answered, t.round]), visible().map((q) => [q.id, q.state, q.answers.length, q.answers.map((a) => Boolean(a.reply)), Boolean(q.reask)])]);
@@ -312,16 +234,30 @@
     let loading = null;
     let loaded = false;
     const load = (first) => (loading ||= fetchBoard(first).finally(() => { loading = null; }));
+    // While the board can't be reached, the page holds its sending buttons and shows the board's copy here, painted live,
+    // or with none and nothing landed the landing for why (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
+    let copy = null;
+    BoardUI.holdSends(B.on, root, () => root.classList.contains('offline'), () => B.toast(BoardUI.WAITING));
+    const out = (down) => {
+      root.classList.add('offline');
+      copy ||= BoardUI.boardCopy(site.url(''), document.documentElement.dataset.build);
+      copy.then((c) => {
+        if (!B.alive() || loaded) return;
+        if (!c) { $('#page').innerHTML = downLanding(down); return; }
+        land(c.board, true);
+        repaint(true);
+      });
+    };
     async function fetchBoard(first) {
-      const page = $('#page');
       try {
-        const { body: d } = await fetchJSON(site.url('api/board' + (board ? '?since=' + encodeURIComponent(board.version) : '')), { tag: board?.version, onWait: () => { if (first) page.innerHTML = restartNotice(); }, sleep: B.sleep });
+        const { body: d } = await fetchJSON(site.url('api/board' + (board ? '?since=' + encodeURIComponent(board.version) : '')), { tag: board?.version, onWait: (ms, down) => out(down), sleep: B.sleep });
         if (!B.alive()) return false;
+        root.classList.remove('offline');
         if (d) land(d, first);
         repaint(first);
         return true;
       } catch (e) {
-        if (first) page.innerHTML = `<p class="muted">Could not load the questions: ${esc(e.message)}</p>`;
+        out(e.down);
         return false;
       }
     }
@@ -341,29 +277,75 @@
       loaded = true;
       return true;
     }
-    // Draws what changed, unless the owner is typing a note.
+    // Draws what changed: an arrival in place (arrive), else the whole page, unless the owner is typing a note.
     function repaint(first) {
       const sig = sigNow();
+      if (sig === shown) return;
+      if (!first && arrive()) { shown = sig; return; }
       const active = document.activeElement;
-      if (sig !== shown && !(active && active.tagName === 'TEXTAREA')) {
-        shown = sig;
-        const y = scrollY;
-        render();
-        scrollTo(0, first ? 0 : y);
+      if (active && active.tagName === 'TEXTAREA') return;
+      shown = sig;
+      const y = scrollY;
+      render();
+      scroll(first ? 0 : y);
+    }
+
+    // What render last drew of the topic: its questions in order as they stood, and its resolved count.
+    const drawnOf = () => {
+      const t = topics.find((x) => x.id === topicId);
+      return { solo: soloId, topic: topicId, resolved: t?.resolved || 0, qs: visible().map((q) => JSON.stringify([q.id, q.state, q.answers.length, q.answers.map((a) => Boolean(a.reply)), Boolean(q.reask)])) };
+    };
+    let drawn = null;
+    // A change that only adds topics, counts or open questions at the end of the shown topic is drawn in place: each
+    // pill keeps its node and a new one lands at its place in the row, a new question's card goes after the last open
+    // one, and the topic line and the bar update. → false when anything shown changed.
+    function arrive() {
+      const form = $('#qform');
+      const now = drawnOf();
+      if (!form || !drawn || now.solo || drawn.solo || now.topic !== drawn.topic || now.resolved !== drawn.resolved
+        || drawn.qs.some((s, i) => now.qs[i] !== s)) return false;
+      const added = visible().slice(drawn.qs.length);
+      if (added.some((q) => q.state !== 'open')) return false;
+      const page = $('#page');
+      const list = topicRow(topics, topicId).pills;
+      const bar = page.querySelector('.topics');
+      if (list.length < 2) bar?.remove();
+      else if (!bar) page.insertAdjacentHTML('afterbegin', topicBar());
+      else {
+        const pills = list.map((t) => bar.querySelector(`button[data-topic="${CSS.escape(t.id)}"]`) || fragmentOf(pillHtml(t, true)));
+        for (const b of [...bar.children]) if (!pills.includes(b)) b.remove();
+        pills.forEach((b, i) => {
+          const t = list[i];
+          b.setAttribute('aria-pressed', String(t.id === topicId));
+          b.querySelector('.n').textContent = t.state === 'resolved' ? 'resolved' : String(t.open);
+          if (bar.children[i] !== b) bar.insertBefore(b, bar.children[i] || null);
+        });
       }
+      const head = page.querySelector('.topichead');
+      const headHtml = topicHead(topics.find((x) => x.id === topicId));
+      if (head && head.outerHTML !== headHtml) head.outerHTML = headHtml;
+      const sendBar = form.querySelector('.bar');
+      for (const q of added) {
+        inPlace.add(q.id);
+        sendBar.insertAdjacentHTML('beforebegin', questionCard(q, { n: numberOf(q), draft: getDraft(q.id), links: links(q) }));
+      }
+      BoardAttach.paintAll();
+      drawn = now;
+      updateBar();
+      return true;
     }
+    const fragmentOf = (html) => { const box = document.createElement('div'); box.innerHTML = html; return box.firstElementChild; };
 
     function moveOn(from, pills, what, footer = what, countOpen = true) {
       soloId = null;
       const next = nextQuestion(all, pills, { topic: from });
       const left = topics.find((t) => t.id === from)?.open || 0;
       if (next?.topic === from) {
-        topicId = from;
         sentLine = countOpen ? `${footer.replace(/\.?$/, '.')} ${left} still open.` : footer;
         shown = sigNow();
         const y = scrollY;
         render();
-        scrollTo(0, y);
+        scroll(y);
         return;
       }
       sentLine = footer;
@@ -371,58 +353,34 @@
         sentNotice.put(B.route, what);
         if (ctx.up?.()) return;
         sentNotice.take(B.route);
-        topicId = from;
+        setTopic(null);
+        B.toast(what);
       } else {
-        topicId = next.topic;
-        history.replaceState(history.state, '', '#' + encodeURIComponent(next.id));
+        setTopic(next.topic);
+        setHash(next.id);
       }
       shown = sigNow();
       render();
-      scrollTo(0, 0);
+      scroll(0);
     }
 
     B.on(root, 'click', (ev) => {
       if (ev.target.id === 'showAll') { soloId = null; sentLine = ''; shown = ''; render(); return; }
       const eye = ev.target.closest && ev.target.closest('[data-proto]');
       if (eye) { askPrototype(byId(eye.closest('section.q').dataset.q), eye); return; }
-      const reask = ev.target.closest && ev.target.closest('[data-reask]');
-      if (reask) { if (!reask.disabled) askAgain(byId(reask.dataset.reask), reask); return; }
+      const reopenBadge = ev.target.closest && ev.target.closest('[data-reopen]');
+      if (reopenBadge) { if (!reopenBadge.disabled) reopen(byId(reopenBadge.dataset.reopen), reopenBadge); return; }
       const b = ev.target.closest && ev.target.closest('[data-topic]');
       if (b) {
-        soloId = null; topicId = b.dataset.topic; sentLine = ''; shown = '';
+        soloId = null; setTopic(b.dataset.topic); sentLine = ''; shown = '';
         const first = topics.find((t) => t.id === topicId)?.questions[0];
-        if (first) history.replaceState(history.state, '', '#' + encodeURIComponent(first));
-        render(); scrollTo(0, 0);
+        if (first) setHash(first);
+        render(); scroll(0);
       }
     });
-    // The full-width frame shows another take without reloading, where its page's switcher can
-    // (prototype-switcher.js current.go), so the page keeps its place. → false when it can't.
-    function inPlace(full, choice) {
-      const take = full.querySelector('.take');
-      const frame = take?.querySelector('iframe');
-      let sw = null;
-      try { sw = frame?.contentWindow?.PrototypeSwitcher?.current; } catch { sw = null; }
-      if (!sw?.go || !sw.takes?.includes(choice)) return false;
-      sw.go(choice);
-      take.dataset.opt = choice;
-      for (const label of full.querySelectorAll('.take-choices .opt')) {
-        if (label.querySelector('input')?.value === choice) label.setAttribute('aria-current', 'true');
-        else label.removeAttribute('aria-current');
-      }
-      return true;
-    }
     B.on(root, 'change', (ev) => {
       const sec = ev.target.closest('section.q'); if (!sec || ev.target.type !== 'radio') return;
       const d = getDraft(sec.dataset.q); d.choice = ev.target.value; setDraft(sec.dataset.q, d); updateBar();
-      const full = sec.querySelector('.takes-full');
-      if (full && inPlace(full, d.choice)) return;
-      if (full) {
-        const top = frameTop(full.querySelector('.take-shot'));
-        repaintTakes(sec);
-        scrollTake = sec.querySelector('.take-shot');
-        sec.querySelector(`input[value="${CSS.escape(d.choice)}"]`)?.focus({ preventScroll: true });
-        scrollTo(0, top);
-      }
     });
     B.on(root, 'input', (ev) => {
       const sec = ev.target.closest('section.q'); if (!sec || ev.target.tagName !== 'TEXTAREA') return;
@@ -449,43 +407,50 @@
         const d = getDraft(q.id);
         const choice = choiceOf(q, d);
         const files = filesOf(q);
-        return { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: (d.note || '').trim(), ...(files.length ? { files } : {}) };
-      });
-      let out;
-      try { out = await BoardUI.waitOn($('#send'), send('owner-answers', { answers })); }
-      catch (e) { st.textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; return; }
-      for (const q of list) {
-        setDraft(q.id, {});
-        BoardAttach.clear('q:' + q.id, site.root);
-      }
-      await moveOnOnceLoaded(at, `Sent ${list.length} answer${list.length === 1 ? '' : 's'}${at.name ? ` to ${at.name}` : ''}.`, out, () => {
-        const open = all.filter((q) => q.state === 'open').length;
-        return `sent ${list.length} answer${list.length === 1 ? '' : 's'}${open ? ` · ${open} still open` : ''}`;
+        return { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: noteOf(q, d).trim(), ...(files.length ? { files } : {}) };
       });
+      // Send waits until the page has moved on (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+      await BoardUI.waitOn($('#send'), BoardUI.pending.within((async () => {
+        let out;
+        try { out = await send('owner-answers', { answers }); } catch (e) { refused(e); return; }
+        for (const q of list) {
+          setDraft(q.id, {});
+          BoardAttach.clear('q:' + q.id, site.root);
+        }
+        await moveOnOnceLoaded(at, `Sent ${list.length} answer${list.length === 1 ? '' : 's'}${at.name ? ` to ${at.name}` : ''}.`, out, () => {
+          const open = all.filter((q) => q.state === 'open').length;
+          return `sent ${list.length} answer${list.length === 1 ? '' : 's'}${open ? ` · ${open} still open` : ''}`;
+        });
+      })(), stillWaiting));
     });
     // Each composer painted raises a bubbling attach-change (attach.js).
     B.on(root, 'attach-change', updateBar);
     // A link to another question here only moves the hash.
-    B.on(window, 'hashchange', () => {
+    if (!ctx.embedded) B.on(window, 'hashchange', () => {
       if (!loaded) return;
       pick(hashId());
       sentLine = '';
       shown = '';
       render();
-      scrollTo(0, 0);
+      scroll(0);
     });
 
+    // In the board's pane, the shell opens the topic of a question or topic id there, a resolved one included, and with
+    // none or one that's gone the topic the page would open (app-needs.js focusQuestion). → false before the first load.
+    if (ctx.embedded) B.openTopic = (id) => {
+      if (!loaded) return false;
+      const topic = topics.find((t) => t.id === id);
+      if (topic) { soloId = null; setTopic(topic.id); } else pick(id || '');
+      sentLine = '';
+      shown = '';
+      render();
+      return true;
+    };
+
     load(true);
     B.every(15000, () => { if (!document.hidden) load(false); });
     B.on(document, 'visibilitychange', () => { if (!document.hidden) load(false); });
-    // An answer sent from a standalone prototype is reloaded when this page returns from the browser cache.
+    // A pick drafted on a standalone prototype page shows when this page returns from the browser cache.
     B.on(window, 'pageshow', (ev) => { if (ev.persisted) { shown = ''; load(false); } });
-    // A new width needs grid measurements before choosing either layout again.
-    let width = window.innerWidth;
-    B.on(window, 'resize', () => {
-      if (window.innerWidth === width) return;
-      width = window.innerWidth;
-      root.querySelectorAll('section.q').forEach(repaintTakes);
-    });
   }),
-}))(new Map());
+};