@lovek4d/kickflip 0.4.0 → 0.5.0

package/board/public/app-threads.js

@@ -1,7 +1,12 @@
 // 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, attachButton, dropZone, protoButton, grillButton, 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>`;
 
@@ -48,26 +53,43 @@ 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, seenBefore.get(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="flag-hint" data-hint aria-live="polite">${esc(HINT)}</div>
         <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">${attachButton()}${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button><button class="primary" type="submit">Send</button></div></form>`;
       BoardAttach.paint('item:' + key, B.site.root);
+      syncFlag(el.querySelector('form'));
     }
     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-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
+  // The composer's eye asks for a prototype and its fire for a grill: each is a toggle, one at a time, that Send carries
+  // with whatever is typed, as /prototype or /grill in the text does. Nothing typed sends the bare request.
+  const PLACEHOLDER = 'Reply in this thread… (/prototype or /grill asks for one)';
+  const HINT = 'Tap the eye or the fire to request a prototype or a grill';
+  const flagOf = (f) => f.dataset.flag || slashOf(f.querySelector('textarea').value).flag;
+  function syncFlag(f) {
+    const chosen = f.dataset.flag || null;
+    f.querySelector('button[data-proto]')?.setAttribute('aria-pressed', String(chosen === 'prototype'));
+    f.querySelector('button[data-grill]')?.setAttribute('aria-pressed', String(chosen === 'grill'));
+    const hint = f.querySelector('[data-hint]');
+    if (!hint) return;
+    const flag = flagOf(f);
+    const typed = slashOf(f.querySelector('textarea').value).text || BoardAttach.files(f.dataset.composer, B.site.root).length;
+    hint.classList.toggle('on', Boolean(flag));
+    hint.textContent = !flag ? HINT : typed ? `posts your message, with ${flag} requested in its footer` : `posts one gray line: ${flag} requested`;
   }
 
   // A load while one for the same thread runs shares it, so a card the page inserts open isn't fetched twice; force
@@ -99,7 +121,9 @@ 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;
+    syncFlag(f);
+    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) => {
@@ -109,28 +133,13 @@ BoardView.part((B) => {
     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'); }
   });
-  B.on(B.root, 'click', async (ev) => {
-    const b = ev.target.closest('form[data-reply] button[data-proto]');
+  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) 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 f = b.closest('form');
+    const kind = b.hasAttribute('data-proto') ? 'prototype' : 'grill';
+    if (f.dataset.flag === kind) delete f.dataset.flag; else f.dataset.flag = kind;
+    syncFlag(f);
   });
   B.on(B.root, 'submit', async (ev) => {
     const f = ev.target.closest('form[data-reply]');
@@ -138,15 +147,19 @@ BoardView.part((B) => {
     ev.preventDefault();
     const ta = f.querySelector('textarea');
     ta.blur();
-    const text = ta.value.trim();
+    const flag = flagOf(f);
+    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;
+    if ((!flag && !text && !files.length) || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;
+    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}) };
     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 } : {}) }))));
+        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data))));
       BoardAttach.clear(id, B.site.root);
+      delete f.dataset.flag;
+      syncFlag(f);
       loadThread(f.dataset.reply, { force: true });
     } catch { B.notice('Could not send. Is the host awake?'); }
   });
@@ -154,6 +167,7 @@ BoardView.part((B) => {
   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);
+    if (ev.target.matches?.('form[data-reply]')) syncFlag(ev.target);
   });
 
   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>

package/board/public/app.js

@@ -86,7 +86,26 @@ window.BoardView = (function () {
       }
       toasts.toast(text);
     };
-    const B = { root, site, route, toast, $, $$, on, every, later, sleep, watch, atUnmount, alive: () => alive, own: (off) => (alive ? own(off) : off()) };
+    const store = storeFor(route);
+  // iOS commits a pending predictive-text word after Send clears the box, which would refill it and resave the draft.
+  // So Send blurs first, and input is dropped while the send runs and for a moment after it succeeds.
+  const quiet = new Map();
+  function quieted(draftKey, ta) {
+    const until = quiet.get(draftKey) || 0;
+    if (until <= Date.now()) return false;
+    if (until !== Infinity) ta.value = '';
+    return true;
+  }
+  async function sendDraft(draftKey, ta, current, send) {
+    ta.blur();
+    quiet.set(draftKey, Infinity);
+    try { await send(); } catch (e) { quiet.delete(draftKey); store.set(draftKey, (current() || ta).value); throw e; }
+    store.set(draftKey, '');
+    const now = current();
+    if (now) now.value = '';
+    quiet.set(draftKey, Date.now() + 1000);
+  }
+    const B = { root, site, route, store, quieted, sendDraft, toast, $, $$, on, every, later, sleep, watch, atUnmount, alive: () => alive, own: (off) => (alive ? own(off) : off()) };
     return {
       B,
       start() { alive = true; },
@@ -100,7 +119,7 @@ window.BoardView = (function () {
 
   function create(root, siteRoot, opts = {}) {
     const { B, start: begin, stop } = base(root, siteRoot);
-    const store = storeFor(B.route);
+    const { store } = B;
     // board is the last /api/board; githubPending the time of a refresh's unanswered check-github request; fresh the
     // header's time, ui-header.js nextFresh's {at, sig}; edits each open edit box by its message's event id,
     // {thread, data, text}, data being what ask-edited sends besides the text.
@@ -158,6 +177,7 @@ window.BoardView = (function () {
     // Renders open threads from state.threadCache; loadBoard and opening a card load them.
     function render(load = null) {
       const d = state.board;
+      BoardUI.pending.settle(d);
       const title = $(':scope > .top h1');
       if (d.title && title && title.textContent !== d.title) title.textContent = d.title;
       if (d.title && document.title !== d.title) document.title = d.title;
@@ -360,20 +380,7 @@ window.BoardView = (function () {
   <div id="tryMain"></div>
   <div id="lanes"></div>
 </main>
-<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
-<dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
-  <form id="askForm" data-composer="ask">
-    <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
-    ${BoardUI.dropZone('<textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>')}
-    <div class="pending-files" data-files></div>
-    <div class="tk-seg ask-seg" role="group" aria-label="Before building"><button type="button" id="askDiscuss" aria-pressed="true">Discuss</button><button type="button" id="askQuick" aria-pressed="false">Quick build</button></div>
-    <p class="muted small ask-choice-help" id="askChoiceHelp" aria-live="polite"></p>
-    <div class="row">
-      <span class="muted small" id="askStatus"></span>
-      <button type="submit" class="primary">Send</button>
-    </div>
-  </form>
-</dialog>
+${BoardNewTask.markup()}
 <dialog id="mainLogSheet" class="sheet" aria-labelledby="mainLogTitle">
   <div class="sheet-body">
     <div class="sheet-head"><h2 id="mainLogTitle"></h2><button type="button" class="ghost" id="mainLogClose" aria-label="Close">✕</button></div>
@@ -396,6 +403,11 @@ window.BoardView = (function () {
     <div id="archBody" class="arch-body"></div>
   </div>
 </dialog>
+<dialog id="readerSheet" class="sheet reader-sheet" aria-labelledby="readerTitle">
+  <div class="reader-head"><h2 id="readerTitle"></h2><span class="reader-ref"></span><span class="reader-tools"></span><button type="button" class="ghost" data-reader="close" aria-label="Close">✕</button></div>
+  <div class="reader-body" tabindex="0"></div>
+  <button type="button" class="reader-new" data-reader="end" hidden></button>
+</dialog>
 <dialog id="linksSheet" class="sheet" aria-labelledby="linksTitle">
   <div class="sheet-body">
     <div class="sheet-head"><h2 id="linksTitle">Hub links</h2><button type="button" class="ghost" id="linksClose" aria-label="Close">✕</button></div>

package/board/public/hub.css

@@ -87,6 +87,7 @@
 .hub-view .remembered { padding:0 12px 10px; color:var(--muted); font-size:12px; }
 .hub-view .remembered p { margin:0; }
 .hub-view .remembered ul { margin:4px 0 0; padding-left:18px; }
+.hub-view :is(.hub-modal, .sheet) code { white-space: pre-wrap; overflow-wrap: anywhere; }
 .hub-view .remembered code { white-space:pre-wrap; overflow-wrap:anywhere; }
 
 @media (max-width: 899px) {

package/board/public/new-task.js

@@ -0,0 +1,121 @@
+// The + button and the sheet that sends a new task as an ask event, on every page of a board: the board view's markup
+// (app.js) and each other view of a board (shell.js) put BoardNewTask.markup() in their root and wire it with
+// BoardNewTask.wire(B) once mounted. A board's view sends through B.send, which lands the board the ask changed; any
+// other view sends through its site. B.newTaskKey(ev) is the n-twice handler, which a framed page's document also feeds.
+globalThis.BoardNewTask = (function () {
+  const markup = () => `<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+<dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
+  <form id="askForm" data-composer="ask">
+    <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
+    ${BoardUI.dropZone('<textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>')}
+    <div class="pending-files" data-files></div>
+    <div class="tk-seg ask-seg" role="group" aria-label="Before building"><button type="button" id="askDiscuss" aria-pressed="true">Discuss</button><button type="button" id="askQuick" aria-pressed="false">Quick build</button></div>
+    <p class="muted small ask-choice-help" id="askChoiceHelp" aria-live="polite"></p>
+    <div class="row">
+      <span class="muted small" id="askStatus"></span>
+      <button type="submit" class="primary">Send</button>
+    </div>
+  </form>
+</dialog>`;
+
+  function wire(B) {
+    const { $, store, toast, quieted, sendDraft } = B;
+    const { attachButton, waitOn } = BoardUI;
+    const send = (kind, data) => (B.send ? B.send(kind, data) : B.site.send(kind, data));
+    // The ask box is a bottom sheet: a <dialog> opened from the + button. Closing keeps the draft.
+    const sheet = $('#sheet');
+    const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
+    if (!$('#askForm .row .attach')) $('#askForm .row').insertAdjacentHTML('afterbegin', attachButton());
+    // Files picked before the app shell switched away from this board are still attached, so they show again.
+    BoardAttach.paint('ask', B.site.root);
+    const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+    if (!$('#askForm .send-hint')) $('#askForm button[type=submit]').insertAdjacentHTML('beforebegin', `<span class="send-hint" aria-hidden="true">${isMac ? '⌘↵' : 'Ctrl+↵'}</span>`);
+    // ⌘↵ (Ctrl+↵ off a Mac) sends the ask from its box.
+    B.on($('#askText'), 'keydown', (ev) => {
+      if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.isComposing) return;
+      ev.preventDefault();
+      $('#askForm').requestSubmit();
+    });
+    $('#askText').value = store.get('draft:ask', '');
+    B.on($('#askText'), 'input', (e) => { if (!quieted('draft:ask', e.target)) store.set('draft:ask', e.target.value); });
+    let stopFitting = null;
+    const stopFit = () => { stopFitting?.(); stopFitting = null; };
+    B.on(sheet, 'close', stopFit);
+    B.atUnmount(stopFit);
+    function openSheet() {
+      if (sheet.open) return;
+      stopFit();
+      stopFitting = BoardDialogs.fitSheet(sheet);
+      sheet.classList.remove('closing');
+      sheet.showModal();
+      $('#askText').focus();
+      $('#compose').setAttribute('aria-expanded', 'true');
+    }
+    function closeSheet() {
+      if (!sheet.open || sheet.classList.contains('closing')) return;
+      $('#compose').setAttribute('aria-expanded', 'false');
+      if (reduceMotion.matches) { sheet.close(); return; }
+      sheet.classList.add('closing');
+      B.later(180, () => { sheet.classList.remove('closing'); sheet.close(); });
+    }
+    B.on($('#compose'), 'click', openSheet);
+    // n pressed twice opens the sheet, as the + button's tooltip says, unless a field or another dialog has focus. With
+    // nothing focused the key goes to <body>, outside the view, so this listens on the document, and a framed page's
+    // own document is given to the same handler (view-frame.js). A key switch mode used (sidebar.js) comes
+    // defaultPrevented and doesn't count.
+    const TWICE_MS = 500;
+    let lastN = -Infinity;
+    const newTaskKey = (ev) => {
+      if (ev.defaultPrevented) { lastN = -Infinity; return; }
+      if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
+      const field = ev.target.closest && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
+      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+      if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
+      lastN = -Infinity;
+      ev.preventDefault();
+      openSheet();
+    };
+    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, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
+    // Discuss or Quick build, above Send: Discuss, the default, has the session grill or prototype the task at once; Quick
+    // build sends the ask with quick: true, and the session marks the card ready. Each send goes back to Discuss
+    // (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
+    const CHOICE_HELP = {
+      discuss: 'Discuss: Claude grills or prototypes it first, then waits for you.',
+      quick: 'Quick build: for changes you’re sure about; Claude marks it ready and builds.',
+    };
+    let quick = false;
+    function choose(isQuick) {
+      quick = isQuick;
+      $('#askDiscuss').setAttribute('aria-pressed', String(!quick));
+      $('#askQuick').setAttribute('aria-pressed', String(quick));
+      $('#askChoiceHelp').textContent = CHOICE_HELP[quick ? 'quick' : 'discuss'];
+    }
+    choose(false);
+    B.on(B.root, 'click', (ev) => {
+      const b = ev.target.closest('#askDiscuss, #askQuick');
+      if (b) choose(b.id === 'askQuick');
+    });
+    B.on($('#askForm'), 'submit', async (ev) => {
+      ev.preventDefault();
+      $('#askText').blur();
+      const text = $('#askText').value.trim();
+      const files = BoardAttach.files('ask', B.site.root);
+      if ((!text && !files.length) || BoardAttach.busy('ask', B.site.root)) return;
+      $('#askStatus').textContent = '';
+      try {
+        await waitOn($('#askForm button[type="submit"]'), sendDraft('draft:ask', $('#askText'), () => $('#askText'), () => send('ask', { text, ...(files.length ? { files } : {}), ...(quick ? { quick: true } : {}) })));
+        BoardAttach.clear('ask', B.site.root);
+        choose(false);
+        $('#askStatus').textContent = '';
+        closeSheet();
+        toast('Sent');
+      } catch { $('#askStatus').textContent = 'Could not send'; }
+    });
+  }
+
+  return { markup, wire };
+})();

package/board/public/shell.js

@@ -200,7 +200,11 @@ window.AppShell = (function () {
       if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
       sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
       scrollTo(0, 0);
+      // Every other page of a board has the board's + and its sheet too; the hub's own pages aren't a board's.
+      const plus = !board && boards().has(route);
+      if (plus) root.insertAdjacentHTML('beforeend', BoardNewTask.markup());
       v.mount();
+      if (plus) BoardNewTask.wire(v.B);
       if (modal) showSettings();
     }
 

package/board/public/sidebar.css

@@ -84,6 +84,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
   #failedStartSheet { inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 48px); }
 }
 .sidebar .sb-row .icon.sb-plus { color: var(--muted); background: var(--chip); }
+.sidebar .sb-row .icon.sb-start-icon { color: var(--accent); }
 
 #newBoardSheet .nb-form { min-width: 0; }
 #newBoardSheet .sheet-head { margin-bottom: 8px; }

package/board/public/style.css

@@ -257,6 +257,10 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 .sheet::backdrop { background: rgba(0,0,0,.35); touch-action: none; }
 /* A phone sheet sits above the bottom bar, which already pads the safe area (--app-bottom). */
 .sheet form { padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--app-bottom, 0px))); }
+/* Modals never scroll sideways: content wraps at the modal's width, and overflow-x hidden is only the last guard. */
+.sheet, .settings-modal { overflow-x: hidden; overflow-wrap: anywhere; }
+.settings-body { overflow-x: hidden; overflow-wrap: anywhere; }
+.sheet input, .sheet select, .sheet textarea, .settings-modal input, .settings-modal select, .settings-modal textarea { max-width: 100%; min-width: 0; }
 /* A sheet's last row of buttons stays in view at the foot of its scrolling content. Sticking stops at the scroll
    area's bottom padding, so the shadow covers what scrolls through that padding. */
 .sheet-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 8px; background: var(--panel); box-shadow: 0 40px 0 var(--panel); }
@@ -343,7 +347,11 @@ button.attach:disabled { opacity: .35; }
 @keyframes pulse-fill { 50% { background-color: color-mix(in srgb, var(--color-notice) 35%, transparent); } }
 @media (prefers-reduced-motion: no-preference) { .phase-bars:not(.dim) i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
 /* A stale build's status line, dot included, is the needs-you red, and a tap on it nudges Claude (ui-cards.js builderStatus). */
-button.sub.agent.stalled { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; color: var(--color-danger); }
+/* A status line that is a button is drawn as the div it replaces: this one reset, then only a colour per state. The font
+   shorthand stays out so .sub's 12px wins. */
+button.sub { display: block; width: 100%; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
+  font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
+button.sub.agent.stalled { color: var(--color-danger); }
 .stalled .working-dot { background: currentColor; }
 .brand { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
 .brand .hub { grid-row: 1 / span 2; align-self: center; }
@@ -361,10 +369,39 @@ button.sub.agent.stalled { display: block; width: 100%; padding: 0; border: 0; b
    (docs/adr/2026-11-03-1551-planners-and-implementers-are-two-kinds-of-agent.md). */
 .sub.agent.planner, .msg.builder-status.planner, .msg.agent.started.planner { color: var(--accent); }
 .planner .working-dot { background: currentColor; }
+/* Every status line on an In Progress card is the phase-bar orange, a planner's too, and every build or plan line on a
+   Todo card the owner's blue, dot included; a Todo card's planner dashes are that blue, the running one pulsing
+   (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md). */
+.sub.agent.in-progress { color: var(--color-notice); }
+.sub.agent.in-todo { color: var(--accent); }
+.sub.agent.in-progress .working-dot, .sub.agent.in-todo .working-dot { background: currentColor; }
+.phase-bars.plan { --bar-fill: var(--accent); }
+@keyframes pulse-fill-plan { 50% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
+@media (prefers-reduced-motion: no-preference) { .phase-bars.plan:not(.dim) i.now { animation-name: pulse-fill-plan; } }
 .msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
-.msg.calls summary { cursor: pointer; color: var(--muted); }
-.msg.calls ol { margin: 4px 0; padding-left: 20px; }
+.msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
+.msg.calls summary::-webkit-details-marker { display: none; }
+.msg.calls[open] summary .mark-icon { transform: rotate(90deg); }
+.msg.calls ol { margin: 4px 0; padding-left: 23px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
+/* Every thread status line's leading mark, icon or dot, sits centred in one 18px box, so the text after it always starts
+   at the same place; the box is 12px tall so line heights stay
+   (docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md). */
+.mark { display: inline-block; position: relative; width: 18px; height: 12px; margin-right: 5px; vertical-align: -1px; flex: none; }
+.mark > * { position: absolute; inset: 0; margin: auto; }
+.mark .working-dot, .mark .agent-dot { margin: auto; vertical-align: 0; }
+.mark-icon { width: 12px; height: 12px; }
+/* New questions' plain question mark is a size up from its siblings. */
+.mark-icon.big { width: 18px; height: 18px; }
+.msg.new-questions a { color: inherit; }
+/* A message's footer: the tap it came from, then Claude's pick-up to its right. */
+.msg .reply { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
+.msg-foot .foot-status { display: inline-flex; align-items: center; }
+/* The thread's eye and fire are toggles: pressed reads as chosen, and the hint under the box says what Send posts. */
+form[data-reply] .tools { display: inline-flex; flex: none; }
+button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
+.flag-hint { margin: 4px 2px 0; min-height: 1.2em; color: var(--muted); font-size: 12px; }
+.flag-hint.on { color: var(--accent); }
 /* INT-30: card line order */
 .line6 { margin-top: 4px; }
 .card-time time { font-variant-numeric: tabular-nums; }
@@ -527,6 +564,9 @@ main > * { transition: opacity .25s ease; }
 .view-questions .opt .lbl { font-weight: 600; }
 .view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .view-questions .opt .det { color: var(--muted); font-size: 13px; }
+.view-questions .opt .suggested { margin-left: 6px; white-space: nowrap; }
+.view-questions .opt .suggested-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
+.view-questions .opt .suggested-why a { color: var(--accent); }
 .view-questions .note { margin-top: 4px; }
 .view-questions .ans { background: var(--accent-soft); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
 .view-questions .rep { background: var(--claude); border-radius: 9px; padding: 7px 10px; margin-top: 6px; font-size: 13px; }
@@ -543,9 +583,24 @@ main > * { transition: opacity .25s ease; }
 .view-questions details.done button.ghost { font-size: 14px; text-align: left; padding: 6px 2px; }
 .view-questions details.done .trow button { min-width: 0; }
 .view-questions details.done .trow span { flex: none; }
+.view-questions details.resolved-group > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0; }
+.view-questions details.resolved-group > summary::-webkit-details-marker { display: none; }
+.view-questions details.resolved-group > summary .caret { transition: transform .15s; }
+.view-questions details.resolved-group[open] > summary .caret { transform: rotate(90deg); }
+.view-questions details.resolved-group > summary .names { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.view-questions .q.resolved button.chip { cursor: pointer; font: inherit; font-size: 12px; min-height: 28px; }
+.view-questions .q.resolved button.chip:disabled { cursor: default; }
+.view-questions .q.resolved .resolved-line { margin: 8px 0; }
+.view-questions .q.resolved .opt { cursor: default; }
+.view-questions .q.resolved .opt .det { display: none; }
+.view-questions .q.resolved .opt:has(input:checked) .det { display: block; }
+.view-questions .q.resolved .opt:not(:has(input:checked)) { opacity: .6; }
+.view-questions .q.resolved .reask-line { margin-top: 10px; }
 .view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg);
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
 .view-questions .bar .send-hint { margin-left: auto; }
+/* The + rides above the sticky Send bar rather than over its Send. */
+.view-questions:has(.bar) .fab { bottom: calc(var(--app-bottom, 0px) + var(--fab-edge) + 72px); }
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
 .view-questions .solo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
@@ -735,6 +790,39 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .main-log-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
 .main-log-actions button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 18px; }
 #mainLogReason { color: var(--color-notice); overflow-wrap: anywhere; }
+/* The reader sheet (app-reader.js): a builder's log or notes, 85% of the height from the bottom. Its body scrolls
+   down only: every line wraps (#252). */
+.reader-sheet { height: 85dvh; max-height: 85dvh; padding: 0; overflow: hidden; }
+.reader-sheet[open] { display: flex; flex-direction: column; }
+.reader-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
+.reader-head h2 { flex: none; margin: 0; font-size: 15px; }
+.reader-ref { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.reader-tools { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.reader-tools:empty { display: none; }
+.reader-tools button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
+.reader-tools button[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
+.reader-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
+.reader-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+.reader-status.on { color: var(--accent); }
+.reader-status.on::before { background: var(--accent); animation: reader-pulse 1.4s ease-in-out infinite; }
+@keyframes reader-pulse { 50% { opacity: .35; } }
+.reader-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 0 max(12px, env(safe-area-inset-bottom)); }
+.reader-body > .muted { padding: 8px 14px; margin: 0; }
+.reader-row { padding: 5px 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.reader-row.text { padding-top: 9px; }
+.reader-row.end { margin: 6px 14px 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); }
+.reader-row.sys, .reader-row.out { color: var(--muted); font-size: 12.5px; }
+.reader-row.out { padding-left: 28px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-row.tool { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--accent); font-size: 11px; }
+.reader-raw, .reader-text { margin: 0; padding: 2px 14px 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-md { padding: 4px 16px 12px; overflow-wrap: anywhere; line-height: 1.5; }
+.reader-md h1 { font-size: 17px; margin: 10px 0 6px; }
+.reader-md h2, .reader-md h3 { font-size: 15px; }
+.reader-md pre, .reader-md code { white-space: pre-wrap; overflow-wrap: anywhere; }
+.reader-md table { display: block; max-width: 100%; overflow-x: hidden; }
+.reader-new { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); border: 0; border-radius: 999px; padding: 7px 14px; background: var(--accent); color: var(--on-accent); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
+.reader-new[hidden] { display: none; }
 
 /* The Auto Review lane (ui-cards.js reviewLane): its cards read like the board's, and Posted earlier's lines like a fold's. */
 .rv-card, .rv-line { border-top: 1px solid var(--line); }