@lovek4d/kickflip 0.6.1 → 0.7.0

package/board/onboarding.mjs

@@ -8,4 +8,4 @@ What this card does:
 - Ask the owner what the project is for and which words they use for its parts; their wording goes in verbatim.
 - If the repo already has a CONTEXT.md or ADRs, extend them rather than start again.
 `,b=[{id:"onboard-build",title:"Prepare .kickflip/build",notes:p,needsNoBuild:!0},{id:"onboard-context",title:"Write the repo's CONTEXT.md glossary and first ADR",notes:u}];function T(e,i){try{return c("git",["-C",e,"ls-tree",`${i}:.kickflip`],{encoding:"utf8",stdio:["ignore","pipe","ignore"],timeout:3e3}).split(`
-`).some(r=>/^100755 blob \S+\tbuild(-.+)?$/.test(r))}catch{return!1}}o(T,"hasBuildScript");function y(e,{prefix:i="INT",hasBuild:s,now:r=new Date}){return b.filter(t=>!(t.needsNoBuild&&s)).map((t,a)=>{const n=`${t.id}-notes.md`;return l.writeFileSync(d.join(d.dirname(e),n),t.notes),{id:t.id,title:t.title,created:new Date(r.getTime()+a).toISOString(),state:"grilling",ticket:`${i}-${a+1}`,plan:n}})}o(y,"onboardingItems");export{T as hasBuildScript,y as onboardingItems};
+`).some(r=>/^100755 blob \S+\tbuild(-.+)?$/.test(r))}catch{return!1}}o(T,"hasBuildScript");function y(e,{prefix:i="INT",hasBuild:s,now:r=new Date}){return b.filter(t=>!(t.needsNoBuild&&s)).map((t,a)=>{const n=`${t.id}-notes.md`;return l.writeFileSync(d.join(d.dirname(e),n),t.notes),{id:t.id,title:t.title,created:new Date(r.getTime()+a).toISOString(),phase:"grilling",ticket:`${i}-${a+1}`,plan:n}})}o(y,"onboardingItems");export{T as hasBuildScript,y as onboardingItems};

package/board/prototype-page.mjs

@@ -1 +1 @@
-var u=Object.defineProperty;var r=(t,e)=>u(t,"name",{value:e,configurable:!0});import o from"node:fs/promises";import c from"node:path";import{fileURLToPath as f}from"node:url";import{takeFile as d}from"./store.mjs";const g=c.join(c.dirname(f(import.meta.url)),"public","prototype.html"),k=r(t=>String(t).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]),"esc"),$=r(t=>`${Math.floor(t.mtimeMs).toString(36)}-${t.size.toString(36)}`,"versionOf"),p=r(t=>JSON.stringify(t).replace(/</g,"\\u003c").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029"),"scriptJSON");async function O(t,e){const n=e.served?e.takes:await Promise.all(e.takes.map(async a=>{const i=`prototypes/${e.topic}/${a.key}.js`,s=await o.stat(d(t,e.topic,a.key)).catch(()=>null);return{key:a.key,label:a.label,src:s?.isFile()?`${i}?v=${$(s)}`:null,file:i}})),l=`${e.title} \xB7 prototype`,m={lead:"back",backHref:e.card?`./#item=${encodeURIComponent(e.card)}`:"./",title:l,controls:!1},y={prototypeTitle:k(l),prototypeHeader:`<!--header ${p(m).replace(/>/g,"\\u003e")}-->`,prototypeData:p({topic:e.topic,title:e.title,takes:n,...e.served?{served:e.served,states:e.states||null}:{}})};return(await o.readFile(g,"utf8")).replace(/\{\{(prototypeTitle|prototypeHeader|prototypeData)\}\}/g,(a,i)=>y[i])}r(O,"prototypePage");export{g as PROTOTYPE_TEMPLATE,k as esc,O as prototypePage,$ as versionOf};
+var d=Object.defineProperty;var r=(t,e)=>d(t,"name",{value:e,configurable:!0});import c from"node:fs/promises";import o from"node:path";import{fileURLToPath as u}from"node:url";import{takeFile as f}from"./store.mjs";const g=o.join(o.dirname(u(import.meta.url)),"public","prototype.html"),k=r(t=>String(t).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]),"esc"),$=r(t=>`${Math.floor(t.mtimeMs).toString(36)}-${t.size.toString(36)}`,"versionOf"),p=r(t=>JSON.stringify(t).replace(/</g,"\\u003c").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029"),"scriptJSON");async function O(t,e){const n=e.served?e.takes:await Promise.all(e.takes.map(async a=>{const l=`prototypes/${e.topic}/${a.key}.js`,i=await c.stat(f(t,e.topic,a.key)).catch(()=>null);return{key:a.key,label:a.label,src:i?.isFile()?`${l}?v=${$(i)}`:null,file:l}})),s=`${e.title} \xB7 prototype`,m={lead:"back",backHref:e.card?`./#selectedCard=${encodeURIComponent(e.card)}`:"./",title:s,controls:!1},y={prototypeTitle:k(s),prototypeHeader:`<!--header ${p(m).replace(/>/g,"\\u003e")}-->`,prototypeData:p({topic:e.topic,title:e.title,takes:n,...e.served?{served:e.served,states:e.states||null}:{}})};return(await c.readFile(g,"utf8")).replace(/\{\{(prototypeTitle|prototypeHeader|prototypeData)\}\}/g,(a,l)=>y[l])}r(O,"prototypePage");export{g as PROTOTYPE_TEMPLATE,k as esc,O as prototypePage,$ as versionOf};

package/board/public/app-arch.js

@@ -16,7 +16,7 @@ BoardView.part((B) => {
         + `<button type="button" class="arch-run" data-arch-open="${esc(last.key)}">Open ${esc(last.ref)}</button>`;
     }
     const lastHtml = last ? `<div class="arch-last"><span>Last review: <b>${esc(last.wave)}</b> · ${esc(day(last.at))}</span>`
-      + `<span class="muted">${B.plural(last.findings, 'finding')}, ${last.built} built · <a href="#item=${encodeURIComponent(last.key)}" data-arch-open="${esc(last.key)}">${esc(last.ref)} ${LINK_ARROW}</a></span></div>` : '';
+      + `<span class="muted">${B.plural(last.findings, 'finding')}, ${last.built} built · <a href="#selectedCard=${encodeURIComponent(last.key)}" data-arch-open="${esc(last.key)}">${esc(last.ref)} ${LINK_ARROW}</a></span></div>` : '';
     const waits = a.waits ? `<p class="arch-waits" role="status">${esc(a.waits)}</p>` : '';
     return `${lastHtml}${waits}<button type="button" class="primary arch-run" data-arch-run${starting ? BoardUI.BUSY : a.waits ? ' disabled' : ''}>Run a review of ${esc(a.repo)}</button>`
       + '<p class="muted">Claude reads the repo and makes a wave. Its first card asks you one question per finding.</p>';
@@ -36,7 +36,7 @@ BoardView.part((B) => {
 
   function openCard(key) {
     sheet.close();
-    const hash = `#item=${encodeURIComponent(key)}`;
+    const hash = `#selectedCard=${encodeURIComponent(key)}`;
     if (location.hash === hash) window.dispatchEvent(new HashChangeEvent('hashchange'));
     else location.hash = hash;
   }

package/board/public/app-banner.js

@@ -33,7 +33,7 @@ BoardView.part((B) => {
     if (!open) return;
     const key = open.dataset.answer;
     markSeen(d.items.find((i) => i.key === key));
-    const hash = `#item=${encodeURIComponent(key)}`;
+    const hash = `#selectedCard=${encodeURIComponent(key)}`;
     if (location.hash === hash) history.replaceState(null, '', location.pathname + location.search);
     location.hash = hash;
   });

package/board/public/app-cards.js

@@ -249,7 +249,7 @@ BoardView.part((B) => {
     </div>`;
   }
 
-  const cardLink = (l) => `<a class="card-link" href="#item=${encodeURIComponent(l.key)}">${esc(l.ref)}</a>`;
+  const cardLink = (l) => `<a class="card-link" href="#selectedCard=${encodeURIComponent(l.key)}">${esc(l.ref)}</a>`;
   // A card whose branch is pushed to a plain git remote has no PR to link, so its line copies the branch name
   // (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
   const pushedLink = (it) => `<a href="#" data-copy-branch="${esc(it.pushed.branch)}" title="Copy the branch name">${esc(pushedWords(it))}</a>`;
@@ -311,8 +311,10 @@ BoardView.part((B) => {
   };
   const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
 
-  // The latest bump among New cards takes no second bump (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md).
-  const latestBump = (it) => Boolean(it.isNew && it.bumpedAt) && !state.board.items.some((i) => i.isNew && (i.bumpedAt || '') > it.bumpedAt);
+  // A bumped New card takes no second bump, which would only move it behind the earlier bumps
+  // (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md,
+  // docs/adr/2026-11-06-1700-a-bump-marks-the-priority-through-every-lane.md).
+  const bumpedAsk = (it) => Boolean(it.isNew && it.bumpedAt);
   // band {step, actions} draws the card in a wave band (app-lanes.js).
   // Its open questions asked since this browser last opened it are one more unread message: the thread's "N new
   // questions" line (app-threads.js; docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
@@ -322,7 +324,7 @@ BoardView.part((B) => {
     return `<details class="item" data-key="${esc(it.key)}" ${state.openItems.has(it.key) ? 'open' : ''}>
           <summary class="work">
             <span class="status ${it.lane}"></span>
-            <div class="title-wrap">${workLines(it, { unread, top: latestBump(it), ...band })}</div>
+            <div class="title-wrap">${workLines(it, { unread, top: bumpedAsk(it), ...band })}</div>
           </summary>
           ${state.openItems.has(it.key) ? detail(it) : ''}
         </details>`;
@@ -389,6 +391,13 @@ BoardView.part((B) => {
     drawn = true;
   }
 
+  // A card the owner opens is the URL's selected card. A card restored open on load fires toggle too, so the tap is
+  // what counts, not the toggle.
+  B.on(B.root, 'click', (ev) => {
+    const card = ev.target.closest?.('details.item > summary')?.parentNode;
+    if (card && !card.open) B.saveFragment({ selectedCard: card.dataset.key });
+  });
+
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (!el.matches?.('details.item')) return;

package/board/public/app-lanes.js

@@ -170,7 +170,7 @@ BoardView.part((B) => {
       + `<span class="wb-label">${name} <span class="count">${todo.length}</span>${progress}</span>`
       + waveCounts(band, 'todo') + `<span class="wb-end"><span class="wb-links">${notes}</span>${go}</span>${pop}</div>`;
     if (!open) return `<section class="wb" data-band="${esc(band.slug)}">${head}</section>`;
-    const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#item=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
+    const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#selectedCard=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
     const step = (it) => (band.kind === 'lineup' ? band.phases.findIndex((p) => p.includes(it.key)) + 1 : 0);
     const actions = (it, at) => (band.kind !== 'lineup' ? null : cardMenu(band.slug, it.key, at, todo.length));
     return `<section class="wb" data-band="${esc(band.slug)}" data-open>${head}<div class="wb-body">${doneRow}${todo.map((it, at) => B.card(it, { step: step(it), actions: actions(it, at) })).join('')}</div></section>`;
@@ -188,7 +188,7 @@ BoardView.part((B) => {
       + (shown ? `<div class="wb-menu" role="menu">${item(-1, '↑ Move up')}${item(1, '↓ Move down')}</div>` : '') + '</div>';
   }
 
-  // Opens the band holding card key or named slug, for a #item= link or a Needs you line.
+  // Opens the band holding card key or named slug, for a #selectedCard= link or a Needs you line.
   function openBand({ key, slug }) {
     const band = (state.board?.waveBands || []).find((b) => b.slug === slug || b.keys.includes(key));
     if (band) store.set(bandStore(band.slug), true);

package/board/public/app-needs.js

@@ -1,18 +1,21 @@
 // The board view's Needs you (domain.mjs needsOf), led by the board session's pending prompts, answered in place
 // (prompts.js). It draws twice, and the stylesheet shows one by width
 // (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md):
-// - on a phone, #needsDeck at the top of the board: one thing at a time, a question's options drafting its answer on the tap
-//   (the draft Send on the questions page sends) and a prompt's buttons answering it, Skip to the next, a dot for each thing waiting, and All open questions at its foot;
+// - on a phone, #needsDeck at the top of the board: one thing at a time, a question's option marked on the first tap,
+//   turning into Send “<label>”, and sent with the question's drafted note and files on a tap on it
+//   (docs/adr/2026-11-07-1212-a-deck-option-sends-on-a-second-tap.md), a prompt's buttons answering it, Prev and Next
+//   beside a dot for each thing waiting, and All open questions at its foot;
 // - from 900px, #waiting, one line each, in the pane beside the lanes, over Waiting on you mounted there
 //   (view-questions.js, embedded) while the width lasts. Waiting on you shows the questions there, so #waiting leaves out
 //   a line that only asks questions, and with nothing else left the orange section is gone. Every questions URL lands
-//   here at that width (shell.js go, focusQuestion), and a pill's double-click focuses its card on the board
-//   (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md).
+//   here at that width (shell.js go, focusQuestion), and two taps on a pill focus its card on the board
+//   (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md). A prototype opens in the pane too, in place of
+//   Waiting on you until its ‹ Open questions (openViewer).
 // Below 900px the header's ? opens Waiting on you, with the open-question count as its badge.
 // Needs app-core.js.
 BoardView.part((B) => {
   const { $, plural, state, toast } = B;
-  const { esc, escText, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
+  const { esc, escText, promptItem, choiceLabel, isPrototype, getDraft, setDraft, noteOf, waitOn } = BoardUI;
 
   const prompts = PromptAnswers.wire(B, {
     list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
@@ -29,6 +32,7 @@ BoardView.part((B) => {
     renderList(wide.matches ? needs.filter((line) => !line.questions || line.ready || line.action) : needs);
     renderDeck(d, needs);
     renderAsk(d);
+    if (viewer) paintViewer(d);
   }
 
   // The header's ? below 900px, which opens Waiting on you, carries the open-question count as its badge.
@@ -80,11 +84,17 @@ BoardView.part((B) => {
         html: `<h3>${line.key ? `<a href="${esc(line.url)}">${escText(title)}</a>` : escText(title)}</h3>${line.review ? '<p class="ctx">review held for you</p>' : ''}<div class="deck-acts"><a class="button primary" href="${esc(href)}"${attrs}>${esc(label)}</a></div>` }];
     });
   }
+  // The marked option, the question's drafted pick, reads Send “<label>”.
   const questionHtml = (q) => {
-    const picked = getDraft(q.id).choice;
+    const marked = getDraft(q.id).choice;
+    const optionHtml = (o) => {
+      const armed = o.id === marked;
+      const label = armed ? `Send “${esc(o.label)}”` : `${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}`;
+      return `<button type="button" class="${[o.recommended && 'rec', armed && 'armed'].filter(Boolean).join(' ')}" aria-pressed="${armed}" data-deck-pick="${esc(o.id)}"><span class="lbl">${label}</span>${o.detail ? `<small>${escText(o.detail)}</small>` : ''}</button>`;
+    };
     return `<h3>${escText(q.question)}</h3>${q.context ? `<p class="ctx">${escText(q.context)}</p>` : ''}
     ${isPrototype(q.url) ? `<a class="button deck-proto" href="${esc(q.url)}">View prototypes</a>` : ''}
-    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" class="${o.recommended ? 'rec' : ''}" aria-pressed="${o.id === picked}" data-deck-pick="${esc(o.id)}"><span class="lbl">${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}</span>${o.detail ? `<small>${escText(o.detail)}</small>` : ''}</button>`).join('')}</div>`;
+    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map(optionHtml).join('')}</div>`;
   };
 
   // The thing on screen, by id, so an arrival or a repaint keeps it; once it is gone the deck shows what took its place.
@@ -98,46 +108,73 @@ BoardView.part((B) => {
     if (!deck.length) { el.innerHTML = ''; showing = null; return; }
     const now = deck.find((x) => x.id === showing) || deck[Math.min(Math.max(before, 0), deck.length - 1)];
     showing = now.id;
+    const at = deck.indexOf(now);
     const open = (d.owner || []).filter((q) => q.state === 'open').length;
     const drafted = (d.owner || []).filter((q) => q.state === 'open' && 'choice' in getDraft(q.id)).length;
     BoardUI.setHTML(el, `<div class="deck-head"><h2>Needs you</h2><span class="deck-n">${deck.length}</span></div>
       <div class="deck-card" data-deck="${esc(now.id)}"><p class="deck-what">${escText(now.what)}</p>${now.html}</div>
-      ${deck.length > 1 ? `<div class="deck-bar"><span class="deck-dots" aria-hidden="true">${deck.map((x) => `<i${x === now ? ' class="on"' : ''}></i>`).join('')}</span><button type="button" class="ghost" data-deck-skip>Skip →</button></div>` : ''}
+      ${deck.length > 1 ? `<div class="deck-bar"><button type="button" class="ghost" data-deck-prev${at === 0 ? ' disabled' : ''}>← Prev</button><span class="deck-dots" aria-hidden="true">${deck.map((x) => `<i${x === now ? ' class="on"' : ''}></i>`).join('')}</span><button type="button" class="ghost" data-deck-next${at === deck.length - 1 ? ' disabled' : ''}>Next →</button></div>` : ''}
       ${open ? `<a class="deck-more" href="questions.html">All open questions · ${open}${drafted ? ` · ${drafted} drafted, Send there` : ''}</a>` : ''}`);
   }
 
+  // The deck's index one step from the thing on screen; the ends hold.
+  const stepFrom = (step) => Math.min(Math.max(deck.findIndex((x) => x.id === showing) + step, 0), deck.length - 1);
   B.on(B.root, 'click', (ev) => {
     if (!ev.target.closest?.('#needsDeck')) return;
-    if (ev.target.closest('[data-deck-skip]')) {
-      const at = deck.findIndex((x) => x.id === showing);
-      showing = deck[(at + 1) % deck.length].id;
+    const step = ev.target.closest('[data-deck-prev]') ? -1 : ev.target.closest('[data-deck-next]') ? 1 : 0;
+    if (step) {
+      showing = deck[stepFrom(step)].id;
       renderNeeds(state.board);
       return;
     }
     const opt = ev.target.closest('button[data-deck-pick]');
     if (!opt) return;
     const id = opt.closest('[data-deck]').dataset.deck.slice(2);
-    setDraft(id, { ...getDraft(id), choice: opt.dataset.deckPick });
-    const at = deck.findIndex((x) => x.id === showing);
-    showing = deck[(at + 1) % deck.length].id;
-    renderNeeds(state.board);
+    const choice = opt.dataset.deckPick;
+    const draft = getDraft(id);
+    if (draft.choice !== choice) {
+      setDraft(id, { ...draft, choice });
+      renderNeeds(state.board);
+      return;
+    }
+    sendAnswer((state.board.owner || []).find((q) => q.id === id), choice, opt);
   });
 
+  // The marked option's tap sends it with the question's drafted note and files, as the questions page's Send does, and
+  // spins until the board shows the question answered, which takes it off the deck. Files still uploading hold it.
+  async function sendAnswer(q, choice, button) {
+    const composer = 'q:' + q.id;
+    if (BoardAttach.busy(composer, B.site.root)) { toast('Wait for the upload to finish'); return; }
+    const files = BoardAttach.files(composer, B.site.root);
+    const answer = { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: noteOf(q, getDraft(q.id)).trim(), ...(files.length ? { files } : {}) };
+    const sent = () => { setDraft(q.id, {}); BoardAttach.clear(composer, B.site.root); };
+    try {
+      await waitOn(button, BoardUI.pending.within(B.send('owner-answers', { answers: [answer] }, sent), B.stillWaiting));
+    } catch (e) { B.failed(e); }
+  }
+
   // From 900px, Waiting on you in the pane under the Needs you lines, mounted while the width lasts.
   let questions = null;
+  // Two taps on a pane pill focus its topic on the board: item:<key> is a card (an ask is one, ask:<id>),
+  // wave:<slug> a band; any other topic, or one the board doesn't show, does nothing.
+  function openOnBoard(id) {
+    if (id.startsWith('item:')) B.focusOnBoard({ key: id.slice(5) });
+    else if (id.startsWith('wave:')) B.focusOnBoard({ slug: id.slice(5) });
+  }
   function fitPane() {
     if (wide.matches === Boolean(questions)) return;
     if (state.board) renderNeeds(state.board);
-    if (questions) { questions.unmount(); questions.slot.remove(); questions = null; return; }
+    if (questions) { closeViewer(); questions.unmount(); questions.slot.remove(); questions = null; return; }
     $('#needsPane').insertAdjacentHTML('beforeend', `<div class="view-questions needs-questions">${AppViews.questions.markup({ embedded: true })}</div>`);
     const slot = $('#needsPane .needs-questions');
-    questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true }), { slot });
+    questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true, openOnBoard, onTopic: (id) => B.saveFragment({ openItemsCard: id }) }), { slot });
     questions.mount();
   }
   // The shell's one rule for a questions URL from 900px (shell.js go): it shows the board and asks here for the question
   // or topic id, or null for none. The pane opens its topic, resolved or not, and focuses its pill → false while there
   // is no pane or it hasn't loaded, so the shell asks again.
   function focusQuestion(id) {
+    closeViewer();
     const topic = (state.board?.ownerTopics || []).find((t) => t.id === id || t.questions.includes(id));
     if (!questions?.B.openTopic(topic?.id ?? id)) return false;
     const pill = questions.slot.querySelector('.topics button[aria-pressed="true"]');
@@ -145,18 +182,62 @@ BoardView.part((B) => {
     pill?.scrollIntoView({ block: 'nearest' });
     return true;
   }
-  // A double-click on a pane pill focuses its topic on the board: item:<key> is a card (an ask is one, ask:<id>),
-  // wave:<slug> a band; any other topic, or one the board doesn't show, does nothing.
-  B.on(B.root, 'dblclick', (ev) => {
-    const pill = questions && ev.target.closest?.('button[data-topic]');
-    if (!pill || !questions.slot.contains(pill)) return;
-    const id = pill.dataset.topic;
-    if (id.startsWith('item:')) B.focusOnBoard({ key: id.slice(5) });
-    else if (id.startsWith('wave:')) B.focusOnBoard({ slug: id.slice(5) });
+
+  // From 900px a prototype opens in the pane (docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md,
+  // shell.js go): a top bar of ‹ Open questions, ⤢ and the card's Round pill over the prototype page framed at the
+  // pane's width, which shows its footer at the bottom of the pane (prototype-switcher.js .ps-pane). ⤢ widens the pane
+  // over the lanes and back. ‹ returns to Waiting on you with the round's question focused, as Choose this does through
+  // the shell. viewer: {url, q, widened, sheet} while one is open. → false while there is no pane, so the shell asks again.
+  let viewer = null;
+  function openViewer(url) {
+    if (!questions) return false;
+    viewer = { url, q: new URL(url, location.href).searchParams.get('q'), widened: viewer?.widened ?? false, sheet: false };
+    paintViewer();
+    return true;
+  }
+  // board: the board download it shows, which renderNeeds passes before state.board holds it.
+  function paintViewer(board = state.board) {
+    const pane = $('#needsPane');
+    pane.classList.toggle('viewing', Boolean(viewer));
+    pane.classList.toggle('widened', Boolean(viewer?.widened));
+    let box = pane.querySelector('.pane-viewer');
+    if (!viewer) { box?.remove(); return; }
+    if (!box) {
+      pane.insertAdjacentHTML('beforeend', '<div class="pane-viewer"><div class="pv-top"></div><iframe class="pv-frame" title="Prototype"></iframe></div>');
+      box = pane.querySelector('.pane-viewer');
+    }
+    const card = (board?.items || []).find((it) => it.prototypes?.rounds?.some((r) => r.q === viewer.q));
+    const rounds = card?.prototypes.rounds;
+    box.querySelector('.pv-top').innerHTML = `<button type="button" class="pv-back" data-pv="back">‹ Open questions</button><span class="pv-grow"></span>
+      <button type="button" class="pv-widen" data-pv="widen" aria-pressed="${viewer.widened}" aria-label="Widen over the lanes" title="Widen over the lanes">⤢</button>${BoardUI.roundPill(rounds, viewer.q)}`;
+    box.querySelector('.ps-sheet')?.remove();
+    if (viewer.sheet && rounds) box.insertAdjacentHTML('beforeend', BoardUI.roundSheet({ ref: card.ref, rounds, qid: viewer.q }));
+    const frame = box.querySelector('iframe.pv-frame');
+    if (frame.getAttribute('src') !== viewer.url) frame.setAttribute('src', viewer.url);
+  }
+  function closeViewer() {
+    if (!viewer) return;
+    viewer = null;
+    paintViewer();
+  }
+  B.on(B.root, 'click', (ev) => {
+    if (!viewer || !ev.target.closest?.('#needsPane .pane-viewer')) return;
+    const round = ev.target.closest('[data-ps-round]')?.dataset.psRound;
+    if (round) { openViewer(round); return; }
+    const act = ev.target.closest('[data-pv], [data-ps-top]');
+    if (!act) return;
+    if (act.dataset.pv === 'back') { focusQuestion(viewer.q); return; }
+    if (act.dataset.pv === 'widen') viewer.widened = !viewer.widened;
+    else viewer.sheet = !viewer.sheet;
+    paintViewer();
   });
+  // A push to a card's thread (#item=<key>&reply, board/store.mjs pushUrl), the switcher's for a question already picked
+  // among them, closes the viewer, so the thread it sent the owner to shows.
+  B.on(window, 'hashchange', () => { if (/^#item=[^&]+&reply$/.test(location.hash)) closeViewer(); });
+
   fitPane();
   B.on(wide, 'change', fitPane);
   B.atUnmount(() => { questions?.unmount(); questions = null; });
 
-  Object.assign(B, { renderNeeds, focusQuestion });
+  Object.assign(B, { renderNeeds, focusQuestion, openViewer });
 });

package/board/public/app-reader.js

@@ -1,11 +1,13 @@
-// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "Open the log"
+// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "View transcript"
 // (ui-threads.js) and a card's or a lineup's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
 // place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
 // and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
 // A link in it closes it first, then opens through the shell.
-// A log written as a stream (headless.mjs: one stream-json event per line) reads as lines, what Claude says and each
-// tool call, with a raw toggle for the file as it is; any other log reads as its text. It is re-read every 3 seconds
-// until the run's result arrives, and follows new lines while read at its end.
+// A log written as a stream (headless.mjs: one stream-json event per line) reads as the run's transcript, the whole of
+// it as GET /api/transcript's rows: what Claude says, and each tool call as one line whose output opens on a tap, with a
+// raw toggle for the file as it is (docs/adr/2026-11-07-1224-view-transcript-reads-the-whole-run-as-rows.md); any other
+// log reads as its text. Every 3 seconds until the run's result arrives it reads on from where it left off, and follows
+// new lines while read at its end.
 BoardView.part((B) => {
   const { $, state } = B;
   const { esc, markdown, linkContext } = BoardUI;
@@ -19,31 +21,13 @@ BoardView.part((B) => {
   let log = null;
   let stopReading = null;
 
-  // → the log's lines, each a stream event or, for a line that isn't one, its text; null when no line is an event.
-  function streamOf(text) {
-    const lines = text.split('\n');
-    if (lines.at(-1) === '') lines.pop();
-    const read = (line) => { try { const e = JSON.parse(line); return typeof e?.type === 'string' ? e : null; } catch { return null; } };
-    const events = lines.map(read);
-    return events.some(Boolean) ? lines.map((line, i) => events[i] ?? line) : null;
+  // A row of the transcript (transcript.mjs); a call with its output opens it on a tap of its line.
+  function rowHtml(r, i) {
+    const tag = r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : '';
+    if (r.out === undefined) return `<div class="reader-row ${r.kind}">${tag}${esc(r.body)}</div>`;
+    const on = log.opened.has(i);
+    return `<div class="reader-row tool call" data-call="${i}"><span class="reader-caret">${on ? '▾' : '▸'}</span>${tag}${esc(r.body)}</div>${on ? `<div class="reader-out">${esc(r.out)}</div>` : ''}`;
   }
-  const short = (v) => (v.length > 400 ? `${v.slice(0, 400)}…` : v);
-  const textOf = (content) => (typeof content === 'string' ? content : content.map((part) => part.text ?? '').join('\n'));
-  const callOf = (input) => input.command ?? input.file_path ?? input.pattern ?? input.url ?? input.description ?? JSON.stringify(input);
-  // A stream line's readable rows {kind, label, body}. Thinking and events other than the start, messages and the
-  // result have none; the raw view shows them.
-  function rowsOf(e) {
-    if (typeof e === 'string') return [{ kind: 'out', body: e }];
-    if (e.type === 'system') return e.subtype === 'init' ? [{ kind: 'sys', label: 'start', body: `${e.model} in ${e.cwd}` }] : [];
-    if (e.type === 'result') return [{ kind: 'text end', label: e.is_error ? 'stopped' : 'done', body: e.result ?? e.subtype }];
-    if (e.type !== 'assistant' && e.type !== 'user') return [];
-    const content = e.message.content;
-    if (typeof content === 'string') return [{ kind: 'text', body: content }];
-    return content.flatMap((c) => (c.type === 'text' ? [{ kind: 'text', body: c.text }]
-      : c.type === 'tool_use' ? [{ kind: 'tool', label: c.name.toLowerCase(), body: callOf(c.input) }]
-      : c.type === 'tool_result' ? [{ kind: 'out', body: short(textOf(c.content)) }] : []));
-  }
-  const rowHtml = (r) => `<div class="reader-row ${r.kind}">${r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : ''}${esc(r.body)}</div>`;
 
   const atEnd = () => body.scrollHeight - body.scrollTop - body.clientHeight < 40;
   const toEnd = () => { body.scrollTop = body.scrollHeight; };
@@ -57,11 +41,11 @@ BoardView.part((B) => {
     if (log?.unseen) more.textContent = `${log.unseen} new ${log.unseen === 1 ? 'line' : 'lines'} ↓`;
   }
   function drawLog() {
-    const { text, stream, raw } = log;
-    body.innerHTML = !text ? '<p class="muted reader-empty">The log is empty so far.</p>'
-      : !stream ? `<pre class="reader-text">${esc(text)}</pre>`
-      : raw ? `<pre class="reader-raw">${esc(text)}</pre>`
-      : stream.flatMap(rowsOf).map(rowHtml).join('');
+    const { rows, stream, raw, text } = log;
+    body.innerHTML = !rows.length ? '<p class="muted reader-empty">The log is empty so far.</p>'
+      : !stream ? `<pre class="reader-text">${esc(rows.map((r) => `${r.body}\n`).join(''))}</pre>`
+      : raw ? (text === null ? '<p class="muted">Loading…</p>' : `<pre class="reader-raw">${esc(text)}</pre>`)
+      : rows.map(rowHtml).join('');
     drawTools();
     drawMore();
   }
@@ -73,24 +57,44 @@ BoardView.part((B) => {
     drawMore();
   }
 
+  // Reads the transcript on from where the last read ended; an output joins its call's line.
   async function readLog(n) {
     let answer;
     try {
-      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { cache: 'no-store' });
+      const r = await fetch(B.site.url(`api/transcript?file=${encodeURIComponent(log.file)}&from=${log.next}`), { cache: 'no-store' });
       answer = { ok: r.ok, ...(await r.json()) };
     } catch { answer = null; }
     if (n !== opened) return;
     if (answer && !answer.ok) { body.innerHTML = `<p class="muted">${esc(answer.error || 'Could not load this log.')}</p>`; return; }
-    if (answer && answer.size !== log.size) {
-      const before = log.stream?.length ?? 0;
-      const stream = streamOf(answer.text);
-      Object.assign(log, { size: answer.size, text: answer.text, stream, finished: Boolean(stream?.some((e) => e.type === 'result')) });
-      if (!log.following) log.unseen += Math.max(0, (stream?.length ?? 0) - before);
+    if (answer && (!log.read || answer.next !== log.next)) {
+      let added = 0;
+      for (const row of answer.rows) {
+        if (row.for) { log.calls.get(row.for).out = row.body; continue; }
+        if (row.id) log.calls.set(row.id, row);
+        log.rows.push(row);
+        added++;
+      }
+      Object.assign(log, { read: true, next: answer.next, stream: log.stream || answer.stream, finished: log.finished || answer.finished });
+      if (!log.following) log.unseen += added;
       drawLog();
       if (log.following) toEnd();
+      if (log.raw) readRaw(n);
     }
     if (!log.finished) stopReading = B.later(3000, () => readLog(n));
   }
+  // The raw toggle's file as it is: GET /api/log, its last 256 KiB.
+  async function readRaw(n) {
+    let text;
+    try {
+      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { cache: 'no-store' });
+      const answer = await r.json();
+      text = r.ok ? answer.text : answer.error;
+    } catch { text = 'Could not load this log.'; }
+    if (n !== opened || !log.raw) return;
+    log.text = text;
+    drawLog();
+    if (log.following) toEnd();
+  }
 
   function show(title, ref) {
     opened++;
@@ -107,8 +111,8 @@ BoardView.part((B) => {
     return opened;
   }
   function openLog(file) {
-    const n = show(`${file.split('-')[0]} log`, file);
-    log = { file, size: -1, text: '', stream: null, raw: false, following: true, unseen: 0, finished: false };
+    const n = show(`${file.split('-')[0]} transcript`, file);
+    log = { file, read: false, next: 0, rows: [], calls: new Map(), opened: new Set(), stream: false, finished: false, raw: false, text: null, following: true, unseen: 0 };
     readLog(n);
   }
   async function openNotes(search) {
@@ -147,8 +151,14 @@ BoardView.part((B) => {
     if (ev.target === sheet) { close(); return; }
     const act = ev.target.closest('[data-reader]')?.dataset.reader;
     if (act === 'close') close();
-    else if (act === 'raw') { log.raw = !log.raw; drawLog(); follow(); }
+    else if (act === 'raw') { log.raw = !log.raw; log.text = null; drawLog(); follow(); if (log.raw) readRaw(opened); }
     else if (act === 'end') follow();
+    const call = ev.target.closest('[data-call]');
+    if (call) {
+      const i = Number(call.dataset.call);
+      if (!log.opened.delete(i)) log.opened.add(i);
+      drawLog();
+    }
     const a = ev.target.closest('a[href]');
     if (!a || !plainTap(ev) || (a.target && a.target !== '_self')) return;
     ev.preventDefault();

package/board/public/app-threads.js

@@ -144,8 +144,8 @@ BoardView.part((B) => {
     const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    // An empty box still sends Implement, the card's build action: the board server marks the card ready as it is and
-    // starts the build at once (docs/adr/2026-11-06-0021-a-button-without-a-text-box-posts-a-keyed-status-line.md).
+    // An empty box still sends Implement, the card's build action: the board server stages the card for the
+    // orchestrator's review (docs/adr/2026-11-06-0021-a-button-without-a-text-box-posts-a-keyed-status-line.md).
     const intent = flag ? null : button.dataset.intent || null;
     if ((!flag && !text && !files.length && intent !== 'build') || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;

package/board/public/app.html

@@ -22,7 +22,7 @@ window.BoardBoot = (function () {
   const get = (u) => { const p = fetch(base + u, { cache: 'no-store' }).then((r) => (r.ok ? r.json().catch(() => { throw unanswered(r); }) : Promise.reject(unanswered(r)))); p.catch(() => {}); return p; };
   let open = [];
   try { open = JSON.parse(localStorage.getItem(`site:${route}:openItems`) || '[]'); } catch {}
-  const focus = /^#item=([^&]+)/.exec(location.hash);
+  const focus = /[#&](?:selectedCard|item)=([^&]+)/.exec(location.hash);
   if (focus) open.push(decodeURIComponent(focus[1]));
   let since = null;
   try { const c = JSON.parse(localStorage.getItem(`site:${route}:copyVersion`) || 'null'); if (c?.build === document.documentElement.dataset.build && Number.isInteger(c.version)) since = c.version; } catch {}

package/board/public/app.js

@@ -173,7 +173,7 @@ window.BoardView = (function () {
     };
   }
 
-  // The board itself, after every part: rendering, the #item= hash, loading and the change signal.
+  // The board itself, after every part: rendering, the URL fragment, loading and the change signal.
   function start(B) {
     const { $, $$, store, state, steady, markSeen } = B;
     const { setHTML, preloadKeys } = BoardUI;
@@ -206,31 +206,41 @@ window.BoardView = (function () {
     }
 
     // #review=<PR number> opens that review in the Auto Review lane (app-lanes.js openReview), as a held review's push does.
-    // #item=<wave>/<id> opens that card; push notifications link here, with &reply to land in the thread's reply box
+    // #selectedCard=<wave>/<id> (or the older #item=) opens that card, and &openItemsCard=<topic id> opens that pill in the pane; push notifications link here, with &reply to land in the thread's reply box
     // (docs/adr/2026-10-29-1639-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
     let focusKey = null;
     let replyKey = null;
     let hashRead = false;
     // A board this page left goes back to where the owner left it once it first renders, unless its URL names a card.
-    const returnToPlace = () => B.restorePlace({ linked: /^#(?:item|review)=/.test(location.hash) });
+    const returnToPlace = () => B.restorePlace({ linked: /^#(?:selectedCard|item|review)=/.test(location.hash) });
+    // The pane's pill the fragment names opens once the pane has loaded; a phone has no pane, its pill is the Waiting on
+    // you page (shell.js go).
+    function openPill(id, tries = 50) {
+      if (!id || !matchMedia('(min-width: 900px)').matches || B.focusQuestion?.(id) || tries <= 0) return;
+      B.later(100, () => openPill(id, tries - 1));
+    }
     function readHash() {
-      const review = /^#review=(\d+)$/.exec(location.hash);
-      if (review && state.board) { B.openReview(Number(review[1])); return; }
-      const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
-      if (!m) return;
-      focusKey = decodeURIComponent(m[1]);
-      focusKey = BoardUI.record(state.board?.moved, focusKey) || focusKey;
-      replyKey = m[2] ? focusKey : null;
+      const { selectedCard, openItemsCard, review, reply } = AppRouter.fragmentOf(location.hash);
+      if (review && state.board) { B.openReview(review); return; }
+      openPill(openItemsCard);
+      if (!selectedCard) return;
+      focusKey = BoardUI.record(state.board?.moved, selectedCard) || selectedCard;
+      replyKey = reply ? focusKey : null;
       state.openItems.add(focusKey);
       state.restored.delete(focusKey);
       const it = state.board?.items.find((i) => i.key === focusKey);
       if (it) { const s = store.get('lanes', {}); s[it.lane] = true; store.set('lanes', s); B.openBand({ key: focusKey }); }
       if (it?.fold) store.set(B.FOLDS[it.fold].store, true);
     }
+    // The owner's own moves rewrite the fragment in place, with no history entry and no hashchange.
+    B.saveFragment = (changes) => {
+      const hash = AppRouter.hashWith(location.hash, changes);
+      if (hash !== location.hash) history.replaceState(history.state, '', location.pathname + location.search + hash);
+    };
     B.on(window, 'hashchange', () => { readHash(); if (state.board) { render(); scrollToFocus(); } });
     // A card link whose hash is already the page's fires no hashchange, so its tap opens the card here.
     B.on(B.root, 'click', (ev) => {
-      const a = ev.target.closest?.('a[href^="#item="]');
+      const a = ev.target.closest?.('a[href^="#item="], a[href^="#selectedCard="]');
       if (!a || ev.defaultPrevented || a.getAttribute('href') !== location.hash || !state.board) return;
       ev.preventDefault();
       readHash(); render(); scrollToFocus();
@@ -239,7 +249,7 @@ window.BoardView = (function () {
     function focusOnBoard({ key, slug }) {
       const band = slug && state.board?.waveBands?.find((b) => b.slug === slug);
       if (!band && !state.board?.items.some((i) => i.key === key)) return false;
-      if (key) { location.hash = `#item=${encodeURIComponent(key)}`; readHash(); } else B.openBand({ slug });
+      if (key) { location.hash = AppRouter.hashWith(location.hash, { selectedCard: key }); readHash(); } else B.openBand({ slug });
       render();
       if (key) scrollToFocus(); else $(`section.wb[data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
       return true;

package/board/public/progress-review.js

@@ -15,10 +15,10 @@
     const { BUILD_PHASES, START_STEPS } = BoardUI;
     const build = () => [...BUILD_PHASES];
     return [
-      { id: 'grill', name: 'Grilling', lane: 'todo', when: 'A grill planner reads a Todo card and asks its questions', steps: build(),
-        card: { builder: { planner: true, kind: 'grill', progress: 'Grilling · the notes', phase: null, at: ago(2) } } },
-      { id: 'prototype', name: 'Prototyping', lane: 'todo', when: 'A prototype planner draws a Todo card’s takes', steps: build(),
-        card: { builder: { planner: true, kind: 'prototype', progress: 'Prototyping · the takes', phase: null, at: ago(2) } } },
+      { id: 'grill', name: 'Grilling', lane: 'todo', when: 'A grill planner reads a Todo card and asks its questions', steps: [],
+        card: { phase: 'grilling', builder: { planner: true, kind: 'grill', progress: 'Grilling · the notes', phase: null, at: ago(2) } } },
+      { id: 'prototype', name: 'Prototyping', lane: 'todo', when: 'A prototype planner draws a Todo card’s takes', steps: [],
+        card: { phase: 'prototyping', builder: { planner: true, kind: 'prototype', progress: 'Prototyping · the takes', phase: null, at: ago(2) } } },
       { id: 'build', name: 'Build', lane: 'progress', when: 'A builder works the card, step by step', steps: build(),
         card: { builder: { progress: 'Testing · the suite', phase: 'testing', at: ago(2) } } },
       { id: 'check', name: 'Orchestrator review', lane: 'progress', when: 'The orchestrator checks the builder’s calls, on step 4', steps: build(),