@lovek4d/kickflip 0.5.0 → 0.5.3

package/board/public/view-questions.js

@@ -4,7 +4,8 @@
 // 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
@@ -12,23 +13,25 @@
 // 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 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).
+// 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: 'back', title: 'Waiting on you', controls: false, trail: '<span class="muted small" id="progress"></span>' })}
 <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, questionCard, roundChip, linkContext, badge, topicName, cardTopics, topicRow, nextQuestion, sentNotice, fetchJSON, restartNotice } = 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
@@ -48,14 +51,6 @@
     // 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);
@@ -68,9 +63,10 @@
     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${arrived ? ' class="arrived"' : ''} 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
@@ -94,12 +90,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,8 +105,8 @@
     }
 
     function render() {
-      clearTakeResources();
       loadResolved();
+      drawn = drawnOf();
       const el = $('#page');
       const qs = visible();
       if (!qs.length) {
@@ -123,111 +121,14 @@
         ? `<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('')}
+        ${live.map((q, i) => questionCard(q, { n: soloId ? 0 : i + 1, draft: getDraft(q.id), links: links(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>` : ''}
         <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()}`;
       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) =>
@@ -255,33 +156,44 @@
       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: (d.note || '').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');
       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('reask-request', { ...(key ? { key } : {}), question: q.id }); } catch (e) { refused(e); return; }
+        if (!B.alive()) return;
+        if (!land(out.board, false)) await load(false);
+        await loadResolved(true);
+        repaint(false);
+      })(), stillWaiting));
     }
 
     function updateBar() {
@@ -341,17 +253,66 @@
       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, the folds under the form 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 live = visible().filter((q) => q.state !== 'resolved').length - added.length;
+      const before = form.querySelector('details.resolved-group') || form.querySelector('.bar');
+      added.forEach((q, i) => before.insertAdjacentHTML('beforebegin', questionCard(q, { n: live + i + 1, draft: getDraft(q.id), links: links(q) })));
+      const opened = new Set();
+      for (const d of [...page.children]) if (d.matches('details.done')) { if (d.open) opened.add(d.querySelector('summary').textContent.split(' ·')[0]); d.remove(); }
+      page.insertAdjacentHTML('beforeend', waitingTopics() + resolvedTopics());
+      for (const d of page.children) if (d.matches('details.done') && opened.has(d.querySelector('summary').textContent.split(' ·')[0])) d.open = true;
+      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;
@@ -363,7 +324,7 @@
         shown = sigNow();
         const y = scrollY;
         render();
-        scrollTo(0, y);
+        scroll(y);
         return;
       }
       sentLine = footer;
@@ -374,11 +335,11 @@
         topicId = from;
       } else {
         topicId = next.topic;
-        history.replaceState(history.state, '', '#' + encodeURIComponent(next.id));
+        setHash(next.id);
       }
       shown = sigNow();
       render();
-      scrollTo(0, 0);
+      scroll(0);
     }
 
     B.on(root, 'click', (ev) => {
@@ -391,38 +352,13 @@
       if (b) {
         soloId = null; topicId = 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;
@@ -451,41 +387,48 @@
         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` : ''}`;
-      });
+      // 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);
+    // While a text field is focused and the keyboard is up, the bar docks on the keyboard (style.css .kb-up) from
+    // visualViewport, which iOS reports apart from the layout viewport the sticky bar follows.
+    const vv = window.visualViewport;
+    let typing = false;
+    const dock = () => {
+      const kb = vv ? Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)) : 0;
+      root.style.setProperty('--kb', kb + 'px');
+      root.classList.toggle('kb-up', typing && kb > 0);
+    };
+    B.on(root, 'focusin', (ev) => { typing = ev.target.matches?.('textarea, input[type="text"], input:not([type])') ?? false; dock(); });
+    B.on(root, 'focusout', () => { typing = false; dock(); });
+    if (vv) { B.on(vv, 'resize', dock); B.on(vv, 'scroll', dock); }
     // 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);
     });
 
     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());
+};