@lovek4d/kickflip 0.4.0 → 0.5.3

package/board/public/app-needs.js

@@ -1,8 +1,16 @@
-// The board view's Needs you box: one line per thing waiting on the owner (domain.mjs needsOf), led by the board
-// session's pending prompts, answered in place (prompts.js). Needs app-core.js.
+// 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;
+// - 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. A link into those
+//   questions, wherever it sits on the board, picks its topic's pill there instead of opening the page.
+// Needs app-core.js.
 BoardView.part((B) => {
   const { $, plural, state, toast } = B;
-  const { esc, promptItem } = BoardUI;
+  const { esc, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
 
   const prompts = PromptAnswers.wire(B, {
     list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
@@ -11,13 +19,21 @@ BoardView.part((B) => {
     after: () => B.loadBoard(),
   });
 
+  // From 900px, the pane beside the lanes, the same width the stylesheet splits the board at.
+  const wide = matchMedia('(min-width: 900px)');
+
   function renderNeeds(d) {
+    const needs = (d.needs || []).filter((line) => !line.prompt || prompts.shows(line.prompt));
+    renderList(wide.matches ? needs.filter((line) => !line.questions || line.ready || line.action) : needs);
+    renderDeck(d, needs);
+  }
+
+  function renderList(needs) {
     const parts = (line) => [
       line.questions ? `<a href="${esc(line.questions.url)}">${plural(line.questions.open, 'question')}</a>` : '',
       line.ready ? `<a href="${esc(line.ready)}" target="_blank" rel="noopener">Ready on GitHub</a>` : '',
       line.action ? `<a href="${esc(line.action.url)}">${esc(line.action.label)}</a>` : '',
     ].filter(Boolean).join(' · ');
-    const needs = (d.needs || []).filter((line) => !line.prompt || prompts.shows(line.prompt));
     const w = $('#waiting');
     w.hidden = needs.length === 0;
     w.innerHTML = needs.length ? `<h2 style="margin:0 0 6px">Needs you · ${needs.length}</h2>
@@ -28,5 +44,114 @@ BoardView.part((B) => {
           : `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">${plural(line.questions.open, 'question')}</span></li>`)).join('')}</ul>` : '';
   }
 
+  // The deck's things, in Needs you order: a prompt; each open question of a line that asks some, in its topic's
+  // order; any other line as itself. → [{id, what, html}]
+  function deckOf(d, needs) {
+    const items = d.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) => {
+      if (line.prompt) return [{ id: `p:${line.prompt.id}`, what: 'Claude asks', html: `<ul class="deck-prompt">${promptItem(line.prompt, prompts.state(line.prompt))}</ul>` }];
+      const what = line.key ? line.title.split(':')[0] : line.title;
+      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) }));
+      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, '']
+        : line.review ? ['Open the review', line.url, ` data-review-open="${line.review}"`]
+        : ['Open', line.url, ''];
+      const title = line.key ? line.title.slice(what.length + 1).trim() : line.title;
+      return [{ id: `l:${line.key || line.review || line.band || line.url}`, what,
+        html: `<h3>${line.key ? `<a href="${esc(line.url)}">${esc(title)}</a>` : esc(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>${esc(q.question)}</h3>${q.context ? `<p class="ctx">${esc(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>${esc(o.detail)}</small>` : ''}</button>`).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.
+  let showing = null;
+  let deck = [];
+  function renderDeck(d, needs) {
+    const el = $('#needsDeck');
+    const before = deck.findIndex((x) => x.id === showing);
+    deck = deckOf(d, needs);
+    el.hidden = deck.length === 0;
+    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 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">${esc(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>` : ''}
+      ${open ? `<a class="deck-more" href="questions.html">All open questions · ${open}${drafted ? ` · ${drafted} drafted, Send there` : ''}</a>` : ''}`);
+  }
+
+  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;
+      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);
+  });
+
+  // From 900px, Waiting on you in the pane under the Needs you lines, mounted while the width lasts.
+  let questions = null;
+  function fitPane() {
+    if (wide.matches === Boolean(questions)) return;
+    if (state.board) renderNeeds(state.board);
+    if (questions) { 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.mount();
+  }
+  // From 900px, a link into open questions for a topic the pane holds picks that topic's pill there, rather than
+  // navigating to the page. It runs before the router's listener, which skips a prevented click.
+  B.on(B.root, 'click', (ev) => {
+    if (ev.defaultPrevented || ev.button || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey || !questions) return;
+    const a = ev.target.closest?.('a[href]');
+    if (!a || (a.target && a.target !== '_self')) return;
+    const home = new URL(`${B.site.root}/`, location.href);
+    const url = new URL(a.getAttribute('href'), home);
+    if (url.pathname !== new URL('questions.html', home).pathname || url.hash.length < 2) return;
+    const id = decodeURIComponent(url.hash.slice(1));
+    const topic = (state.board?.ownerTopics || []).find((t) => t.id === id || t.questions.includes(id));
+    const pill = topic && questions.slot.querySelector(`button[data-topic="${CSS.escape(topic.id)}"]`);
+    if (!pill) return;
+    ev.preventDefault();
+    pill.click();
+    const picked = questions.slot.querySelector(`button[data-topic="${CSS.escape(topic.id)}"]`);
+    picked.focus();
+    picked.scrollIntoView({ block: 'nearest' });
+  });
+  // 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) });
+  });
+  fitPane();
+  B.on(wide, 'change', fitPane);
+  B.atUnmount(() => { questions?.unmount(); questions = null; });
+
   Object.assign(B, { renderNeeds });
 });

package/board/public/app-reader.js

@@ -0,0 +1,174 @@
+// 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
+// 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.
+BoardView.part((B) => {
+  const { $, state } = B;
+  const { esc, markdown, linkContext } = BoardUI;
+  const sheet = $('#readerSheet');
+  const body = sheet.querySelector('.reader-body');
+  const tools = sheet.querySelector('.reader-tools');
+  const more = sheet.querySelector('.reader-new');
+  let opened = 0;
+  let pushed = false;
+  let pending = null;
+  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;
+  }
+  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; };
+  function drawTools() {
+    if (!log?.stream) { tools.innerHTML = ''; return; }
+    const word = log.finished ? 'finished' : log.following ? 'following' : 'paused';
+    tools.innerHTML = `<span class="reader-status${word === 'following' ? ' on' : ''}">${word}</span><button type="button" data-reader="raw" aria-pressed="${log.raw}">raw</button>`;
+  }
+  function drawMore() {
+    more.hidden = !log?.unseen;
+    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('');
+    drawTools();
+    drawMore();
+  }
+  function follow() {
+    log.following = true;
+    log.unseen = 0;
+    toEnd();
+    drawTools();
+    drawMore();
+  }
+
+  async function readLog(n) {
+    let answer;
+    try {
+      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { 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);
+      drawLog();
+      if (log.following) toEnd();
+    }
+    if (!log.finished) stopReading = B.later(3000, () => readLog(n));
+  }
+
+  function show(title, ref) {
+    opened++;
+    stopReading?.();
+    log = null;
+    sheet.querySelector('#readerTitle').textContent = title;
+    sheet.querySelector('.reader-ref').textContent = ref;
+    tools.innerHTML = '';
+    more.hidden = true;
+    body.innerHTML = '<p class="muted">Loading…</p>';
+    sheet.showModal();
+    history.pushState({ ...history.state, idx: history.state.idx + 1, reader: true }, '', location.href);
+    pushed = true;
+    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 };
+    readLog(n);
+  }
+  async function openNotes(search) {
+    const wave = new URLSearchParams(search).has('wave');
+    const n = show('notes', '');
+    let html;
+    try {
+      const r = await fetch(B.site.url(`api/notes${search}`), { cache: 'no-store' });
+      const answer = await r.json();
+      if (!r.ok) throw new Error(answer.error || `notes ${r.status}`);
+      if (n !== opened) return;
+      sheet.querySelector('.reader-ref').textContent = `${wave ? answer.title : answer.ref} notes`;
+      html = `<article class="plan reader-md">${markdown(answer.markdown, linkContext(state.board?.items || [], answer.key ?? null))}</article>`;
+    } catch (e) { html = `<p class="muted">Could not load these notes: ${esc(e.message)}</p>`; }
+    if (n === opened) body.innerHTML = html;
+  }
+  function close() {
+    if (!sheet.open) return;
+    sheet.close();
+    opened++;
+    stopReading?.();
+    if (pushed) { pushed = false; history.back(); }
+  }
+
+  const plainTap = (ev) => !ev.defaultPrevented && ev.button === 0 && !ev.metaKey && !ev.ctrlKey && !ev.shiftKey && !ev.altKey;
+  B.on(B.root, 'click', (ev) => {
+    if (!plainTap(ev)) return;
+    const a = ev.target.closest('a[href^="log.html?"], a[href^="notes.html?"]');
+    if (!a) return;
+    ev.preventDefault();
+    const href = a.getAttribute('href');
+    if (href.startsWith('log.html')) openLog(new URLSearchParams(href.slice(href.indexOf('?'))).get('file'));
+    else openNotes(href.slice(href.indexOf('?')));
+  });
+  B.on(sheet, 'click', (ev) => {
+    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 === 'end') follow();
+    const a = ev.target.closest('a[href]');
+    if (!a || !plainTap(ev) || (a.target && a.target !== '_self')) return;
+    ev.preventDefault();
+    pending = new URL(a.getAttribute('href'), location.href).href;
+    close();
+  });
+  B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); close(); });
+  B.on(body, 'scroll', () => {
+    if (!log?.stream) return;
+    log.following = atEnd();
+    if (log.following) log.unseen = 0;
+    drawTools();
+    drawMore();
+  });
+  // Back while it's open: the router has kept the board, as the entry under it holds the same URL.
+  B.on(window, 'popstate', () => {
+    if (pushed) { pushed = false; sheet.close(); opened++; stopReading?.(); }
+    if (!pending) return;
+    const href = pending;
+    pending = null;
+    if (!AppShell.open(href)) location.assign(href);
+  });
+});

package/board/public/app-snapshot.js

@@ -8,8 +8,8 @@ BoardView.part((B) => {
   // The hub serves every site from one origin, so each board keeps its own key.
   const KEY = 'boardSnapshot:' + B.site.url('');
   // Every board's snapshots together stay within three at ui-snapshot.js's cap, the boards saved least recently
-  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts and seen marks, which would
-  // otherwise fail to save.
+  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts, which would otherwise fail to
+  // save.
   const BUDGET = 3 * SNAPSHOT_MAX;
   const ORDER = 'boardSnapshots';
   const BUILD = document.documentElement.dataset.build;
@@ -91,8 +91,8 @@ BoardView.part((B) => {
   }
   const endFlash = () => { before = null; };
 
-  // Since the page last drew it, a last visit's board included, a card that changed lanes, or a work card that takes
-  // the place of a drawn New task (its fromAsk), flashes once; any other card whose updateSign changed takes a brief
+  // Since the page last drew it, a last visit's board included, a card that changed lanes, a work card that takes
+  // the place of a drawn New task (its fromAsk), or a work card or New task that joins Todo at the bottom, flashes once; any other card whose updateSign changed takes a brief
   // tint on its title row. Neither shows for a change the owner sent from this page: sentHere(key, send) holds the
   // card's next change unsigned until the first board load started after send settles.
   let drawn = new Map();
@@ -109,7 +109,8 @@ BoardView.part((B) => {
     const now = Date.now();
     for (const it of state.board.items) {
       const was = drawn.get(it.key);
-      const moved = was ? was.lane !== it.lane : Boolean(it.fromAsk) && drawn.has(`ask:${it.fromAsk}`);
+      const arrived = !was && drawn.size > 0 && it.lane === 'todo' && (it.isNew || (it.kind === 'work' && !it.fromAsk));
+      const moved = was ? was.lane !== it.lane : arrived || (Boolean(it.fromAsk) && drawn.has(`ask:${it.fromAsk}`));
       const updated = Boolean(was) && was.sign !== updateSign(it);
       const own = ownChanges.get(it.key);
       if (own !== undefined) { if (moved || updated || (load !== null && load > own)) ownChanges.delete(it.key); continue; }

package/board/public/app-threads.js

@@ -1,35 +1,58 @@
 // A card's thread on the board view: loading and rendering it, and its reply box. Needs app-core.js.
 BoardView.part((B) => {
   const { $, store, state, toast, quieted, sendDraft, links } = B;
-  const { esc, setHTML, threadMessages, attachButton, dropZone, protoButton, protoNotice, doneButton, waitOn } = BoardUI;
+  const { esc, setHTML, threadMessages, dropZone, sendButton, protoButton, grillButton, boltButton, doneButton, waitOn, newQuestionsLine } = BoardUI;
+
+  const REQUEST_EVENT = { prototype: 'prototype-request', grill: 'grill-more' };
+  // A /prototype or /grill word in a message, the last one winning, and the message without it.
+  const SLASH = /(^|\s)\/(grill|prototype)(?=\s|$)/g;
+  const slashOf = (value) => ({ flag: [...value.matchAll(SLASH)].pop()?.[2] ?? null, text: value.replace(SLASH, '$1').replace(/ {2,}/g, ' ').trim() });
 
   const thread = (key) => `<div class="thread" data-thread="${esc(key)}"><div class="muted small">Loading thread…</div></div>`;
 
-  // The board, not the thread, decides the Done button, so it follows each board load even when the thread is unchanged.
+  // docs/adr/2026-11-04-2343-each-text-box-sends-its-intent-from-a-key.md,
+  // docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md
+  // A Todo card's reply box sends with Reply (intent: 'reply') or Implement (intent: 'build'), which is the card's build
+  // action: builder orange once the card is ready, quiet before. Any other card's box sends with Send, carrying no intent.
+  // The pair wraps onto its own line under the row.
+  const sendsOf = (item) => (item?.lane !== 'todo' ? 'one' : item.ready ? 'todo-ready' : 'todo');
+  const sends = (kind) => (kind === 'one'
+    ? `<span data-sends="one">${sendButton('Send', 0)}</span>`
+    : `<span class="send-actions" data-sends="${kind}">${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${sendButton('Reply', 0, ' data-intent="reply"')}</span>`);
+  // The board, not the thread, decides the Done button and the send buttons, so they follow each board load even when
+  // the thread is unchanged.
   function syncDone(el, key) {
-    const send = el.querySelector('form button[type=submit]');
-    if (!send) return;
-    const html = doneButton(state.board?.items.find((i) => i.key === key));
+    const at = el.querySelector('form [data-sends]');
+    if (!at) return;
+    const item = state.board?.items.find((i) => i.key === key);
+    const kind = sendsOf(item);
+    const todo = item?.lane === 'todo';
+    if (at.dataset.sends !== kind) { at.insertAdjacentHTML('afterend', sends(kind)); at.remove(); }
+    const tools = el.querySelector('form .tools');
+    const bolt = tools.querySelector('[data-bolt]');
+    if (todo && !bolt) tools.insertAdjacentHTML('afterbegin', boltButton(key));
+    else if (!todo) bolt?.remove();
+    const html = doneButton(item);
     const current = el.querySelector('form [data-confirm="finish"]');
     if (current?.outerHTML === html) return;
     current?.remove();
-    if (html) send.insertAdjacentHTML('beforebegin', html);
+    if (html) el.querySelector('form [data-sends]').insertAdjacentHTML('beforebegin', html);
   }
 
   // Each open card's ui-threads.js threadMessages view. Opening a card marks it seen (app-core.js markSeen) before its
-  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed. A
-  // board left and opened again in this page keeps them, so its open threads show what they showed.
+  // thread draws, so its unread messages start from its read mark from before it opened (B.seenBefore). A board left
+  // and opened again in this page keeps them, so its open threads show what they showed.
   const kept = B.place?.threads;
-  const seenBefore = new Map(kept?.seenBefore || Object.entries(B.seen));
   const moreTaps = new Map(kept?.moreTaps);
   const firstDrawn = new Map(kept?.firstDrawn);
-  B.keep(() => ({ threads: { seenBefore: [...seenBefore], moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  B.keep(() => ({ threads: { moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  const seenAt = (key) => (B.seenBefore.has(key) ? B.seenBefore.get(key) : B.seen[key] || null);
   const newestTs = (msgs) => msgs.reduce((top, m) => [String(m.ts), m.reply?.at ? String(m.reply.at) : ''].reduce((a, b) => (b > a ? b : a), top), '');
-  const viewOf = (key) => ({ seenAt: seenBefore.get(key) || null, more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
+  const viewOf = (key) => ({ seenAt: seenAt(key), more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (!el.matches?.('details.item') || el.open) return;
-    seenBefore.set(el.dataset.key, B.seen[el.dataset.key]);
+    B.seenBefore.delete(el.dataset.key);
     moreTaps.delete(el.dataset.key);
     firstDrawn.delete(el.dataset.key);
   }, true);
@@ -48,28 +71,30 @@ BoardView.part((B) => {
     const edits = editsIn(key);
     if (!firstDrawn.has(key) && msgs.length) firstDrawn.set(key, newestTs(msgs));
     const view = viewOf(key);
-    const sig = JSON.stringify([msgs, [...edits.keys()], view]);
+    const asked = newQuestionsLine(state.board?.items.find((i) => i.key === key)?.questions, seenAt(key));
+    const lines = asked.length ? [...msgs, ...asked].sort((a, b) => String(a.ts).localeCompare(String(b.ts))) : msgs;
+    const sig = JSON.stringify([lines, [...edits.keys()], view]);
     if (el.dataset.sig === sig) return;
     el.dataset.sig = sig;
     // The reply form is built once per card, so a refresh never drops what is being typed.
     if (!el.querySelector('.msgs')) {
       const draft = store.get('draft:' + key, '');
-      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="Reply in this thread…">${esc(draft)}</textarea>`)}
+      el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="${esc(PLACEHOLDER)}">${esc(draft)}</textarea>`)}
         <div class="pending-files" data-files></div>
-        <div class="row">${attachButton()}${protoButton(key)}<button class="chip quick" type="button" data-quick="What's left?">What's left?</button><button class="primary" type="submit">Send</button></div></form>`;
+        <div class="row"><span class="tools">${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button>${sends('one')}</div></form>`;
       BoardAttach.paint('item:' + key, B.site.root);
     }
     syncDone(el, key);
-    B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(msgs, links(key), edits, view)));
+    B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(lines, links(key), edits, view)));
     for (const id of edits.keys()) BoardAttach.paint('edit:' + id, B.site.root);
     B.flashChanged?.(el);
-    // A thread's request is answered by a later thread line, so only a pending one changes the eye.
-    const req = msgs.filter((m) => m.kind === 'prototype-request').pop();
-    const proto = req && (req.state === 'waiting' || req.state === 'working') ? { pending: req.eventId } : null;
-    const pb = el.querySelector('form [data-proto]');
-    if (pb && pb.dataset.protoPending !== proto?.pending) pb.outerHTML = protoButton(key, proto);
   }
 
+  // docs/adr/2026-11-05-0430-the-eye-and-fire-send-their-request-at-once.md
+  // The composer's eye asks for a prototype and its fire for a grill: a tap sends the request at once, with whatever is
+  // typed, as /prototype or /grill in the text does on Reply. Nothing typed sends the bare request.
+  const PLACEHOLDER = 'Reply in this thread… (/prototype or /grill asks for one)';
+
   // A load while one for the same thread runs shares it, so a card the page inserts open isn't fetched twice; force
   // starts a new one, after a send. maxAge skips a thread that loaded that recently. from is a load already started
   // (app.html BoardBoot). A response older than the one shown is dropped. A failed load keeps the previous render.
@@ -99,61 +124,61 @@ BoardView.part((B) => {
 
   B.on(B.root, 'input', (ev) => {
     const f = ev.target.closest('form[data-reply]');
-    if (!f || ev.target.tagName !== 'TEXTAREA' || quieted('draft:' + f.dataset.reply, ev.target)) return;
+    if (!f || ev.target.tagName !== 'TEXTAREA') return;
+    if (quieted('draft:' + f.dataset.reply, ev.target)) return;
     store.set('draft:' + f.dataset.reply, ev.target.value);
   });
   B.on(B.root, 'click', async (ev) => {
     const b = ev.target.closest('form[data-reply] button[data-quick]');
     if (!b) return;
     const key = b.closest('form').dataset.reply;
-    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick }))); loadThread(key, { force: true }); }
-    catch { toast('Could not send'); }
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    try { await waitOn(b, BoardUI.pending.within(B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick })).then(() => loadThread(key, { force: true })), B.stillWaiting)); }
+    catch (e) { B.failed(e); }
   });
+  // docs/adr/2026-11-05-0010-a-lightning-button-in-a-todo-threads-footer-starts-a-quick-build.md
   B.on(B.root, 'click', async (ev) => {
-    const b = ev.target.closest('form[data-reply] button[data-proto]');
+    const b = ev.target.closest('form[data-reply] button[data-bolt]');
     if (!b) return;
-    const key = b.dataset.proto;
-    const pending = b.dataset.protoPending;
-    if (pending) {
-      let latest = null;
-      try { latest = (await B.site.events({ kind: 'ask-bump', limit: 1 }))[0]?.data?.id ?? null; } catch {}
-      const n = protoNotice(pending, latest);
-      if (!n.bump) { B.notice(n.text); return; }
-      if (!(await B.confirm(n.text))) return;
-      await B.bumpAsk(pending, b);
-      return;
-    }
-    if (!(await B.confirm('Ask Claude for prototypes of this item?'))) return;
-    try {
-      await waitOn(b, B.sentHere(key, () => B.send('prototype-request', { key })));
-      b.disabled = true;
-      b.title = b.ariaLabel = 'Prototypes asked for';
-      toast('Asked Claude for prototypes');
-      loadThread(key, { force: true });
-    } catch { toast('Could not send'); }
+    const key = b.dataset.bolt;
+    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: 'Quick build', intent: 'build' }))); loadThread(key, { force: true }); }
+    catch { toast('Could not send'); }
   });
-  B.on(B.root, 'submit', async (ev) => {
-    const f = ev.target.closest('form[data-reply]');
-    if (!f) return;
-    ev.preventDefault();
+  // Sends the composer's draft as one message, or as a request when flag names one; button spins until the thread has it.
+  async function post(f, flag, button) {
     const ta = f.querySelector('textarea');
     ta.blur();
-    const text = ta.value.trim();
+    const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    if ((!text && !files.length) || BoardAttach.busy(id, B.site.root)) return;
+    // An empty box still sends Implement, the card's build action.
+    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;
-    try {
-      await waitOn(f.querySelector('button[type=submit]'), sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.sentHere(key, () => B.send('item-message', { key, text, ...(files.length ? { files } : {}) }))));
+    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}), ...(intent ? { intent } : {}) };
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    const sending = (async () => {
+      await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
+        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data)));
       BoardAttach.clear(id, B.site.root);
-      loadThread(f.dataset.reply, { force: true });
-    } catch { B.notice('Could not send. Is the host awake?'); }
+      await loadThread(key, { force: true });
+    })();
+    try { await waitOn(button, BoardUI.pending.within(sending, B.stillWaiting)); } catch (e) { B.failed(e); }
+  }
+  B.on(B.root, 'click', (ev) => {
+    const b = ev.target.closest('form[data-reply] button[data-proto], form[data-reply] button[data-grill]');
+    if (b) post(b.closest('form'), b.hasAttribute('data-proto') ? 'prototype' : 'grill', b);
+  });
+  B.on(B.root, 'submit', (ev) => {
+    const f = ev.target.closest('form[data-reply]');
+    if (!f) return;
+    ev.preventDefault();
+    post(f, slashOf(f.querySelector('textarea').value).flag, ev.submitter);
   });
-  // Send waits while a composer's files upload, the ask's included (attach.js attach-change).
+  // A composer's send buttons wait while its files upload, the ask's included (attach.js attach-change).
   B.on(B.root, 'attach-change', (ev) => {
-    const b = ev.target.querySelector('button[type=submit]');
-    if (b) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
+    for (const b of ev.target.querySelectorAll('button[type=submit]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
+    if (ev.target.matches?.('form[data-reply]')) for (const b of ev.target.querySelectorAll('button[data-proto], button[data-grill]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
   });
 
   Object.assign(B, {

package/board/public/app.html

@@ -64,6 +64,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/linear-key.js"></script>
 <script src="/_hub/app/sidebar.js"></script>
 <script src="/_hub/app/app.js"></script>
+<script src="/_hub/app/new-task.js"></script>
 <script src="/_hub/app/app-core.js"></script>
 <script src="/_hub/app/app-threads.js"></script>
 <script src="/_hub/app/app-cards.js"></script>
@@ -72,6 +73,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/app-needs.js"></script>
 <script src="/_hub/app/app-header.js"></script>
 <script src="/_hub/app/app-arch.js"></script>
+<script src="/_hub/app/app-reader.js"></script>
 <script src="/_hub/app/app-banner.js"></script>
 <script src="/_hub/app/app-snapshot.js"></script>
 <script src="/_hub/app/view-settings.js"></script>