@lovek4d/kickflip 0.3.1 → 0.4.0

package/board/public/view-questions.js

@@ -4,9 +4,11 @@
 // 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/0048-a-questions-takes-show-inline.md).
+// whose options are prototype takes frames each take with ?take= (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.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/0126-each-question-has-its-own-prototype-eye.md).
+// 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 board server resolves the question with it, and once it 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).
 // 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) => ({
   className: 'view-questions',
@@ -18,7 +20,7 @@
 
   create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
     const { $, site } = B;
-    const { esc, choiceLabel, questionCard, roundChip, takes, linkContext, badge, topicName, topicRow, nextQuestion, sentNotice, fetchJSON, restartNotice } = BoardUI;
+    const { esc, choiceLabel, 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 {}; } };
@@ -26,12 +28,21 @@
     const hashId = () => { 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
+    // shows, and again once its resolved count changes or after a failed load, at its next draw (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
+    let resolved = { topic: null, n: 0, questions: [] };
+    // The board last landed, whose version the next load and each tap name, so an unchanged board downloads nothing
+    // and a changed one comes as a patch (ui-patch.js).
+    let board = null;
     let items = [];
     let topics = [];
     let topicId = null;
     let soloId = null;
     let shown = '';
     let sentLine = '';
+    // The footer after a prototype request: the blue spinner, then these words.
+    const PROTOTYPE_REQUESTED = 'prototype requested';
+    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) => {
@@ -41,13 +52,14 @@
     };
     B.atUnmount(() => clearTakeResources());
 
-    const byId = (id) => all.find((q) => q.id === id);
+    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');
 
-    // docs/adr/0038-waiting-on-you-leads-with-what-needs-the-owner.md
+    // 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 '';
@@ -61,7 +73,6 @@
     const uploading = (qs) => qs.some((q) => BoardAttach.busy('q:' + q.id, site.root));
     function pending(qs) {
       return qs.filter((q) => {
-        if (q.state === 'requested') return false;
         const d = getDraft(q.id);
         if (filesOf(q).length) return true;
         if (!('choice' in d) && !d.note) return false;
@@ -76,8 +87,21 @@
       return t ? t.questions.map(byId).filter(Boolean) : [];
     }
 
+    function loadResolved() {
+      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: [] };
+      const asked = resolved;
+      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);
+      }, () => { if (resolved === asked) resolved = { topic: null, n: 0, questions: [] }; });
+    }
+
     function render() {
       clearTakeResources();
+      loadResolved();
       const el = $('#page');
       const qs = visible();
       if (!qs.length) {
@@ -94,7 +118,7 @@
       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"><summary>Resolved · ${done.length}</summary>${done.map((q) => questionCard(q, { draft: getDraft(q.id), links: links(q), fit: fitOf(q) })).join('')}</details>` : ''}
-        <div class="bar"><span class="muted small${sentLine ? ' sent' : ''}" id="qstatus" role="status">${esc(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>
+        <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);
@@ -104,7 +128,7 @@
     // 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/0070-phone-headers-sit-at-the-bottom.md), so only a header
+    // 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();
@@ -128,7 +152,7 @@
     // 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/0048-a-questions-takes-show-inline.md).
+    // (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');
@@ -202,7 +226,7 @@
     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.requested ? 'prototype requested' : t.answered ? 'answered' : 'Claude replied'}</span></div>`).join('')}</details>` : '';
+        `<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() {
@@ -211,25 +235,41 @@
         `<div><button class="ghost" data-topic="${esc(t.id)}">${esc(t.title)}</button></div>`).join('')}</details>` : '';
     }
 
-    async function askPrototype(q) {
+    // 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;
+      return { from, pills: topicRow(topics, from).pills, name: topicName(topics.find((t) => t.id === from) || { title: '' }) };
+    }
+    // After a recorded tap: a load that started before it went out would read its question as still open.
+    // `footer` is a line or, for a Send, a function of the reloaded board giving the whole line.
+    // The tap's POST answers with the board as it left it, which lands here in place of a reload.
+    async function moveOnOnceLoaded({ from, pills }, what, out, footer = what) {
+      await loading;
+      if (!B.alive()) return;
+      if (!land(out.board, false)) await load(false);
+      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');
       const key = q.topic?.startsWith('item:') ? q.topic.slice(5) : null;
-      st.textContent = 'Sending…';
+      const at = leaving();
+      st.textContent = '';
       const d = getDraft(q.id);
       const last = q.answers[q.answers.length - 1];
-      try { await site.send('prototype-request', { ...(key ? { key } : {}), question: q.id, note: (d.note || '').trim(), choice: d.choice ?? (last ? last.choice : null) }); }
-      catch { st.textContent = 'Could not send. Is the host awake?'; return; }
+      let out;
+      try { out = await BoardUI.waitOn(button, send('prototype-request', { ...(key ? { key } : {}), question: q.id, note: (d.note || '').trim(), choice: d.choice ?? (last ? last.choice : null) })); }
+      catch (e) { st.textContent = e.reason ? `Nothing was sent: ${e.reason}` : 'Could not send. Is the host awake?'; return; }
       setDraft(q.id, {});
-      sentLine = 'Prototype please.';
-      await loading;
-      if (await load(false)) { shown = sigNow(); render(); }
+      await moveOnOnceLoaded(at, `Prototype requested${at.name ? ` for ${at.name}` : ''}.`, out, PROTOTYPE_REQUESTED);
     }
 
     function updateBar() {
       const qs = visible();
       const n = pending(qs).length;
       const b = $('#send');
-      if (b) { b.disabled = !n || uploading(qs); b.textContent = uploading(qs) ? 'Uploading…' : n ? `Send ${n} answer${n === 1 ? '' : 's'}` : 'Send'; }
+      if (b) { b.disabled = !n || uploading(qs); b.textContent = uploading(qs) ? 'Uploading…' : 'Send'; }
       const live = qs.filter((q) => q.state !== 'resolved');
       const answered = live.filter((q) => q.state !== 'open').length;
       $('#progress').textContent = live.length > 1 ? `${answered}/${live.length} answered` : '';
@@ -252,45 +292,58 @@
     async function fetchBoard(first) {
       const page = $('#page');
       try {
-        const { body: d } = await fetchJSON(site.url('api/board'), { 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: () => { if (first) page.innerHTML = restartNotice(); }, sleep: B.sleep });
         if (!B.alive()) return false;
-        all = d.owner || [];
-        items = d.items || [];
-        topics = d.ownerTopics || [];
-        site.syncBadge();
-        if (first) pick(hashId());
-        else if (soloId && byId(soloId)?.state !== 'open') pick('');
-        else if (!topics.some((t) => t.id === topicId)) pick('');
-        loaded = true;
-        const sig = sigNow();
-        const active = document.activeElement;
-        if (sig !== shown && !(active && active.tagName === 'TEXTAREA')) {
-          shown = sig;
-          const y = scrollY;
-          render();
-          scrollTo(0, first ? 0 : y);
-        }
+        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>`;
         return false;
       }
     }
+    // A board, or a patch from the board held, from a load or a tap's POST. → false for a patch from a board no longer
+    // held, which leaves the page as it is.
+    function land(d, first) {
+      const next = d.since === undefined ? d : BoardUI.applyPatch(board, d);
+      if (!next) return false;
+      board = next;
+      all = board.owner;
+      items = board.items;
+      topics = cardTopics(board.ownerTopics, items);
+      site.syncBadge();
+      if (first) pick(hashId());
+      else if (soloId && byId(soloId)?.state !== 'open') pick('');
+      else if (!topics.some((t) => t.id === topicId)) pick('');
+      loaded = true;
+      return true;
+    }
+    // Draws what changed, unless the owner is typing a note.
+    function repaint(first) {
+      const sig = sigNow();
+      const active = document.activeElement;
+      if (sig !== shown && !(active && active.tagName === 'TEXTAREA')) {
+        shown = sig;
+        const y = scrollY;
+        render();
+        scrollTo(0, first ? 0 : y);
+      }
+    }
 
-    function moveOn(from, pills, what) {
+    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 = `${what} ${left} still open, answer ${left === 1 ? 'it' : 'them'} any time.`;
+        sentLine = countOpen ? `${footer.replace(/\.?$/, '.')} ${left} still open.` : footer;
         shown = sigNow();
         const y = scrollY;
         render();
         scrollTo(0, y);
         return;
       }
-      sentLine = what;
+      sentLine = footer;
       if (!next) {
         sentNotice.put(B.route, what);
         if (ctx.up?.()) return;
@@ -308,7 +361,7 @@
     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) { if (!eye.disabled) askPrototype(byId(eye.closest('section.q').dataset.q)); return; }
+      if (eye) { askPrototype(byId(eye.closest('section.q').dataset.q), eye); return; }
       const b = ev.target.closest && ev.target.closest('[data-topic]');
       if (b) { soloId = null; topicId = b.dataset.topic; sentLine = ''; shown = ''; render(); scrollTo(0, 0); }
     });
@@ -359,11 +412,9 @@
       const st = $('#qstatus');
       if (uploading(visible())) return;
       if (!list.length) { st.textContent = 'Pick an option or write a note first.'; return; }
-      st.textContent = 'Sending…';
-      const from = soloId ? topicOf(soloId)?.id : topicId;
-      const pills = topicRow(topics, from).pills;
-      const name = topicName(topics.find((t) => t.id === from) || { title: '' });
-      // docs/adr/0163-send-records-every-ready-answer-in-one-request.md: one request, recorded all or none.
+      st.textContent = '';
+      const at = leaving();
+      // docs/adr/2026-11-03-1519-send-records-every-ready-answer-in-one-request.md: one request, recorded all or none. Send waits meanwhile.
       const answers = list.map((q) => {
         const d = getDraft(q.id);
         const last = q.answers[q.answers.length - 1];
@@ -371,17 +422,17 @@
         const files = filesOf(q);
         return { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: (d.note || '').trim(), ...(files.length ? { files } : {}) };
       });
-      try { await site.send('owner-answers', { answers }); }
+      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);
       }
-      const what = `Sent ${list.length} answer${list.length === 1 ? '' : 's'}${name ? ` to ${name}` : ''}.`;
-      // A load that started before these answers went out would read them as still open.
-      await loading;
-      if (await load(false)) moveOn(from, pills, what);
-      else if (B.alive()) { sentLine = what; $('#qstatus').textContent = what; $('#qstatus').classList.add('sent'); }
+      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` : ''}`;
+      });
     });
     // Each composer painted raises a bubbling attach-change (attach.js).
     B.on(root, 'attach-change', updateBar);