@lovek4d/kickflip 0.6.1 → 0.7.1

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, markdown, 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.
@@ -61,6 +65,7 @@ BoardView.part((B) => {
   // order; any other line as itself. → [{id, what, html}]
   function deckOf(d, needs) {
     const items = d.items || [];
+    const links = BoardUI.linkContext(items);
     const owner = (d.owner || []).filter((q) => q.state === 'open');
     const topicOf = (line) => line.topic || items.find((it) => it.key === line.key)?.questions?.topic || null;
     return needs.flatMap((line) => {
@@ -69,7 +74,7 @@ BoardView.part((B) => {
       const topic = line.questions && topicOf(line);
       const order = (d.ownerTopics || []).find((t) => t.id === topic)?.questions || [];
       const asks = topic ? owner.filter((q) => q.topic === topic).sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id)) : [];
-      if (asks.length) return asks.map((q) => ({ id: `q:${q.id}`, what, html: questionHtml(q) }));
+      if (asks.length) return asks.map((q) => ({ id: `q:${q.id}`, what, html: questionHtml(q, links) }));
       const [label, href, attrs] = line.questions ? [`Answer ${plural(line.questions.open, 'question')}`, line.questions.url, '']
         : line.ready ? ['Ready on GitHub', line.ready, ' target="_blank" rel="noopener"']
         : line.action ? [line.action.label, line.action.url, '']
@@ -80,11 +85,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>` }];
     });
   }
-  const questionHtml = (q) => {
-    const picked = getDraft(q.id).choice;
-    return `<h3>${escText(q.question)}</h3>${q.context ? `<p class="ctx">${escText(q.context)}</p>` : ''}
+  // The marked option, the question's drafted pick, reads Send “<label>”.
+  const questionHtml = (q, links) => {
+    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 ? `<div class="det">${markdown(o.detail, links)}</div>` : ''}</button>`;
+    };
+    return `<h3>${escText(q.question)}</h3>${q.context ? `<div class="ctx">${markdown(q.context, links)}</div>` : ''}
     ${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 +109,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;
+    const drafted = (d.owner || []).filter((q) => q.state === 'open' && getDraft(q.id).choice != null).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> or file:<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:') || id.startsWith('file:')) 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 +183,66 @@ 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 (#selectedCard=<key>&reply, board/store.mjs threadUrl), the switcher's for a question
+  // already picked among them, closes the viewer, so the thread it sent the owner to shows. The older #item=<key>&reply
+  // reads the same.
+  B.on(window, 'hashchange', () => {
+    const at = AppRouter.fragmentOf(location.hash);
+    if (at.selectedCard && at.reply) 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"
-// (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
+// 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 wave'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) {
@@ -144,11 +148,17 @@ BoardView.part((B) => {
     else openNotes(href.slice(href.indexOf('?')));
   });
   B.on(sheet, 'click', (ev) => {
-    if (ev.target === sheet) { close(); return; }
+    if (BoardUI.onBackdrop(ev, 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=<file>/<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,9 +249,9 @@ 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' });
+      if (key) scrollToFocus(); else $(`section.wb[data-lane="todo"][data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
       return true;
     }
     // A card missing from the last visit's board waits for the fresh one, which is final.

package/board/public/dialogs.js

@@ -348,7 +348,7 @@
       } catch (e) { sending = false; fail(e); sync(); }
     });
     el.addEventListener('cancel', (e) => { e.preventDefault(); done(); });
-    el.addEventListener('click', (e) => { if (e.target === el) done(); });
+    el.addEventListener('click', (e) => { if (BoardUI.onBackdrop(e, el)) done(); });
     el.addEventListener('close', () => {
       if (closed) return;
       closed = true;

package/board/public/hub-kit.js

@@ -181,7 +181,7 @@
     if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
   }
 
-  // The one duration picker Snooze, Keep awake, Pause hub and Pause board share (hub/duration.mjs): chips that post
+  // The one duration picker Snooze, Pause hub and Pause board share (hub/duration.mjs): chips that post
   // `name` to `action` at once, then Custom, whose date and time posts as `name` too. While its setting is on, `on`
   // replaces it with when it ends and a button that posts `name`=off.
   function durationPicker({ id, title, icon, action, name, choices, on, button }) {

package/board/public/hub.css

@@ -95,6 +95,8 @@
 }
 
 .hub-view .hub-settings { margin-top: 24px; }
+.hub-view .hub-inline > div + div { margin-top: 16px; }
+.hub-view .hub-inline + .label { margin-top: 24px; }
 .hub-view .hub-setting { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--panel); }
 .hub-view .hub-setting .text { flex: 1; min-width: 0; }
 .hub-view .hub-setting .title { font-weight: 600; }

package/board/public/linear-key.js

@@ -136,7 +136,7 @@
     }
     dialog.addEventListener('click', (e) => {
       if (e.target.closest?.('[data-lk-done]')) { close(); return; }
-      if (e.target !== dialog) return;
+      if (!BoardUI.onBackdrop(e, dialog)) return;
       const r = dialog.getBoundingClientRect();
       if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) close();
     });

package/board/public/new-task.js

@@ -75,7 +75,7 @@ globalThis.BoardNewTask = (function () {
     B.newTaskKey = newTaskKey;
     B.on(document, 'keydown', newTaskKey);
     B.on($('#sheetClose'), 'click', closeSheet);
-    B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
+    B.on(sheet, 'click', (ev) => { if (BoardUI.onBackdrop(ev, sheet)) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
     // Discuss has the session grill or prototype the task at once; Implement sends the ask with quick: true, and the
     // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).

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(),