@lovek4d/kickflip 0.3.1 → 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, protoButton, protoNotice, doneButton } = 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,25 +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)}"><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
@@ -98,40 +121,25 @@ 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) => {
     const b = ev.target.closest('form[data-reply] button[data-quick]');
     if (!b) return;
     const key = b.closest('form').dataset.reply;
-    b.disabled = true;
-    try { await B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick })); loadThread(key, { force: true }); }
+    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.disabled = false;
   });
-  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);
-      return;
-    }
-    if (!(await B.confirm('Ask Claude for prototypes of this item?'))) return;
-    b.disabled = true;
-    try {
-      await B.sentHere(key, () => B.send('prototype-request', { key }));
-      b.title = b.ariaLabel = 'Prototypes asked for';
-      toast('Asked Claude for prototypes');
-      loadThread(key, { force: true });
-    } catch { b.disabled = false; 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]');
@@ -139,24 +147,27 @@ 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 btn = f.querySelector('button[type=submit]'); btn.disabled = true;
+    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}) };
     try {
-      await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.sentHere(key, () => B.send('item-message', { key, text, ...(files.length ? { files } : {}) })));
+      await waitOn(f.querySelector('button[type=submit]'), 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);
-      btn.disabled = false;
+      delete f.dataset.flag;
+      syncFlag(f);
       loadThread(f.dataset.reply, { force: true });
-    } catch { B.notice('Could not send. Is the host awake?'); btn.disabled = false; }
+    } catch { B.notice('Could not send. Is the host awake?'); }
   });
   // Send waits while a composer's 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);
+    if (ev.target.matches?.('form[data-reply]')) syncFlag(ev.target);
   });
 
   Object.assign(B, {

package/board/public/app.html

@@ -41,7 +41,9 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/ui.js"></script>
 <script src="/_hub/app/ui-links.js"></script>
 <script src="/_hub/app/ui-enums.js"></script>
+<script src="/_hub/app/ui-phase-bars.js"></script>
 <script src="/_hub/app/ui-order.js"></script>
+<script src="/_hub/app/ui-patch.js"></script>
 <script src="/_hub/app/ui-threads.js"></script>
 <script src="/_hub/app/ui-cards.js"></script>
 <script src="/_hub/app/ui-header.js"></script>
@@ -62,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>
@@ -70,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>
@@ -77,7 +81,6 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/view-notes.js"></script>
 <script src="/_hub/app/view-hub.js"></script>
 <script src="/_hub/app/view-hub-settings.js"></script>
-<script src="/_hub/app/view-polling.js"></script>
 <script src="/_hub/app/view-frame.js"></script>
 <script src="/_hub/app/router.js"></script>
 <script src="/_hub/app/shell.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.
@@ -109,10 +128,13 @@ window.BoardView = (function () {
       fresh: null,
       openItems: new Set(store.get('openItems', [])),
       threadCache: new Map(),
-      withdrawnAsks: new Set(),
       edits: new Map(),
       githubPending: null,
-      waveFilter: store.get('wave', null),
+      // Main's refresh icon (ui-cards.js mainPull): a tap waiting on the server, and the failed pull's reason open on touch.
+      mainPull: { sending: false, open: false },
+      // The Done cards Show more paged in from the archive past the board's own (app-lanes.js), and how many older ones
+      // the archive holds past them, null before the first page.
+      archived: { cards: [], left: null },
     };
     const signal = opts.signal ? (fn) => { if (B.alive()) B.own(opts.signal(fn)); } : null;
     // B.keep(fn): a part adds fn() → {…} to what the board keeps as it unmounts, read before any part's unmount step.
@@ -120,7 +142,7 @@ window.BoardView = (function () {
     const keep = (fn) => { if (B.alive()) keepers.push(fn); };
     const place = places.get(B.route) || null;
     places.delete(B.route);
-    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, place, keep });
+    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, away: opts.away, place, keep });
 
     function mount() {
       if (B.alive()) return;
@@ -155,38 +177,40 @@ 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;
       steady(() => {
         B.renderHeader(d);
         B.renderArch(d);
-        B.renderWaves(d);
-        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main));
+        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main, state.mainPull));
         B.renderMainLog(d.main, load);
-        const live = d.items.filter((i) => !state.withdrawnAsks.has(i.id));
-        const shown = state.waveFilter ? live.filter((i) => i.wave === state.waveFilter || i.lineup?.slug === state.waveFilter) : live;
         for (const el of $$('details.item[open]')) state.openItems.add(el.dataset.key);
         for (const it of d.items) if (!it.isNew) markSeen(it, !state.openItems.has(it.key));
         // An open card's thread is renderThread's (app-threads.js), so a lane repaint leaves it as it is.
-        setHTML($('#lanes'), B.lanesHtml(d, shown), { keep: '[data-thread]' });
+        const strips = B.captureStrips();
+        setHTML($('#lanes'), B.lanesHtml(d, d.items), { keep: '[data-thread]' });
         for (const key of state.openItems) if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
+        B.moveStrips(d.items, strips);
         B.renderNeeds(d);
         B.renderBanner(d);
       });
-      paintFades();
       B.flashChanged();
       B.signCards(load);
     }
 
+    // #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
-    // (docs/adr/0036-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
+    // (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=/.test(location.hash) });
+    const returnToPlace = () => B.restorePlace({ linked: /^#(?:item|review)=/.test(location.hash) });
     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]);
@@ -194,7 +218,7 @@ window.BoardView = (function () {
       replyKey = m[2] ? focusKey : null;
       state.openItems.add(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); }
+      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);
     }
     B.on(window, 'hashchange', () => { readHash(); if (state.board) { render(); scrollToFocus(); } });
@@ -228,13 +252,13 @@ window.BoardView = (function () {
     }
 
     // The last visit's board paints dimmed while the first load runs; it doesn't count as landed, so refresh keeps
-    // spinning, and the header's time is the snapshot's until a load lands (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+    // spinning, and the header's time is the snapshot's until a load lands (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
     // → true when it painted live (B.live), so the controls turn on at once.
     function paintSnapshot() {
       const snap = B.readSnapshot();
       if (!snap) return false;
       const live = Boolean(B.live) && snap.board?.generatedAt === B.live.generatedAt;
-      served = state.board = snap.board;
+      state.board = snap.board;
       for (const [key, msgs] of Object.entries(snap.threads)) state.threadCache.set(key, msgs);
       state.fresh = live ? B.live.fresh : { at: snap.savedAt, sig: null };
       B.setView(live ? 'fresh' : 'snapshot');
@@ -262,13 +286,17 @@ window.BoardView = (function () {
       const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
       let landed = false;
       try {
-        const board = await (started?.board || fetch(B.site.url('api/board'), { cache: 'no-store' })
-          .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
-        land(board, load);
+        // A reload names the version of the board on screen: an unchanged board answers 304 with no body
+        // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md), and a changed one a patch from it
+        // (docs/adr/2026-11-04-0332-the-board-sends-per-card-patches.md).
+        const tag = state.view === 'fresh' ? state.board.version : null;
+        const board = await (started?.board || fetch(B.site.url('api/board' + (tag ? '?since=' + encodeURIComponent(tag) : '')), { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) })
+          .then((r) => (r.status === 304 ? null : r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
+        if (board) land(board, load); else B.linkUp();
         landed = true;
         if (!preloaded) {
           preloaded = true;
-          for (const key of preloadKeys(board.items, state.openItems)) B.loadThread(key);
+          for (const key of preloadKeys(state.board.items, state.openItems)) B.loadThread(key);
         }
       } catch (e) {
         B.linkDown();
@@ -278,16 +306,15 @@ window.BoardView = (function () {
       if (state.view === 'fresh') B.endFlash();
     }
 
-    // A board from the server, a load's or an events POST's, with the taps still in flight drawn over it. One built
-    // before the board on screen leaves it as it is, so a slow load can't undo a newer one. → whether it landed
-    let served = null;
-    const drawing = new Set();
-    const drawn = () => [...drawing].reduce((board, draw) => draw(board), served);
-    function land(board, load) {
-      if (state.view === 'fresh' && served && board.generatedAt < served.generatedAt) return false;
+    // A board from the server, a load's or an events POST's, or a patch from the board on screen (ui-patch.js). One built
+    // before the board on screen leaves it as it is, so a slow load can't undo a newer one; a newer patch from a board
+    // no longer on screen, which another answer replaced meanwhile, reloads instead. → whether it landed
+    function land(answer, load) {
+      if (state.view === 'fresh' && state.board && answer.generatedAt < state.board.generatedAt) return false;
+      const board = answer.since === undefined ? answer : BoardUI.applyPatch(state.view === 'fresh' ? state.board : null, answer);
+      if (!board) { signalled(); return false; }
       const first = state.view !== 'fresh';
-      served = board;
-      state.board = drawn();
+      state.board = board;
       B.setView('fresh');
       if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
       B.linkUp();
@@ -298,61 +325,23 @@ window.BoardView = (function () {
       B.saveSnapshotSoon();
       return true;
     }
-    function undraw(draw) {
-      drawing.delete(draw);
-      state.board = drawn();
-      render();
-    }
 
-    // An owner tap (docs/adr/0151-every-owner-tap-the-server-can-apply-draws-at-once.md): the events POST answers with
-    // the board as the tap left it, which lands as a load of its own, so the tap needs no reload. draw(board) → board is
-    // what the tap changes when its result follows from the tap alone: the page draws it before the POST and keeps it
-    // over every board that lands until the POST settles; a failed POST takes it back off and throws.
-    async function send(kind, data, draw = null) {
-      if (draw) {
-        drawing.add(draw);
-        state.board = drawn();
-        render();
-      }
-      let out;
-      try { out = await B.site.send(kind, data); }
-      catch (e) {
-        if (draw && B.alive()) undraw(draw);
-        throw e;
-      }
-      drawing.delete(draw);
-      // A board newer than the POST's already holds the tap.
-      if (B.alive() && !land(out.board, B.boardLoad = (B.boardLoad || 0) + 1) && draw) undraw(draw);
+    // An owner tap that saves something (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md): the events POST
+    // answers once the server has recorded the tap, with the board as the tap left it, which lands as a load of its own,
+    // so the tap needs no reload (docs/adr/2026-11-03-0500-every-owner-tap-the-server-can-apply-draws-at-once.md); it names
+    // the version on screen, so the answer is a patch from it. Nothing draws
+    // before that answer. answered() runs once it comes, before its board lands. A refusal throws, carrying the
+    // server's reason for failed.
+    async function send(kind, data, answered = null) {
+      const out = await B.site.send(kind, { ...data, ...(state.view === 'fresh' ? { since: state.board.version } : {}) });
+      if (!B.alive()) return out;
+      answered?.();
+      land(out.board, B.boardLoad = (B.boardLoad || 0) + 1);
       return out;
     }
-    // A draw that changes the item with that key, the board's order kept as the server sorts it.
-    const drawItem = (key, change) => (board) => ({ ...board, items: board.items.map((i) => (i.key === key ? change({ ...i }) : i)).sort(BoardUI.laneOrder) });
-
-    // The bump icon's fill fades in as a tap bumps a card and out as one unbumps it, on a toast's timing (toasts.js), and
-    // keeps fading through any redraw meanwhile. selector names the icon.
-    const fades = new Map();
-    function paintFades() {
-      for (const [selector, { name, ms }] of fades) {
-        const icon = $(selector);
-        if (!icon) continue;
-        icon.classList.add(name);
-        icon.style.setProperty('--bump-fade', `${ms}ms`);
-      }
-    }
-    function fadeBump(selector, on) {
-      const fade = { name: on ? 'bump-in' : 'bump-out', ms: on ? BoardToasts.enterTime() : BoardToasts.exitTime() };
-      $(selector)?.classList.remove('bump-in', 'bump-out');
-      fades.set(selector, fade);
-      paintFades();
-      B.later(fade.ms, () => {
-        if (fades.get(selector) !== fade) return;
-        fades.delete(selector);
-        $(selector)?.classList.remove(fade.name);
-      });
-    }
 
     // The server signals each change to what the board reads, through the shell, and the board reloads at once; the
-    // 30 s poll stays as the fallback and the offline check (docs/adr/0031-the-board-reloads-on-a-change-signal.md).
+    // 30 s poll stays as the fallback and the offline check (docs/adr/2026-10-29-1639-the-board-reloads-on-a-change-signal.md).
     let reloading = null;
     let reloadAgain = false;
     let signalMissed = false;
@@ -365,9 +354,9 @@ window.BoardView = (function () {
       });
     }
 
-    // The toast for a tap drawn at once whose POST failed, as the page takes the drawing back off.
-    const FAILED = 'That didn’t go through. Is the host awake?';
-    Object.assign(B, { render, loadBoard, send, drawItem, fadeBump, reload: signalled, FAILED });
+    // The toast for a tap the server refused, with its reason, or that never reached it.
+    const failed = (e) => B.toast(e?.reason || 'That didn’t go through. Is the host awake?');
+    Object.assign(B, { render, loadBoard, send, failed, reload: signalled });
     const live = paintSnapshot();
     B.headerWired();
     if (live) B.linkUp();
@@ -383,27 +372,15 @@ window.BoardView = (function () {
   }
 
   function markup({ title = '' } = {}) {
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true })}
+    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true, moon: true })}
 <main>
   <section id="setup" class="setup" aria-live="polite" hidden></section>
   <section id="answers" class="answer-banner" hidden></section>
   <section id="waiting" class="waiting" hidden></section>
-  <div id="waves"></div>
   <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>
-    <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="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>
@@ -426,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/attach.js

@@ -1,5 +1,7 @@
-// Files attached to a composer: any element with data-composer="<id>" holding BoardUI.attachButton()
-// and a [data-files] list. Picking files uploads them at once to the api/upload of the site named by the nearest
+// docs/adr/2026-11-03-1722-every-text-box-attaches-through-attach-js.md
+// Files attached to a composer: any element with data-composer="<id>" holding BoardUI.attachButton(), its text box in
+// BoardUI.dropZone(), and a [data-files] list. Picking files, dropping them on the composer, or pasting them into it
+// uploads them at once to the api/upload of the site named by the nearest
 // [data-site] around the composer (a board view's root, app.js), else of the page's own site (ClaudeSite). Pending
 // files live in memory by site and composer id, so a page that rebuilds its markup calls paintAll() to show them
 // again, and a board the app shell switches away from keeps its own. site defaults to the page's own below.
@@ -65,9 +67,43 @@ window.BoardAttach = (function () {
     const input = ev.target.closest && ev.target.closest('input[data-attach]');
     const c = input && input.closest('[data-composer]');
     if (!c) return;
-    for (const f of input.files) upload(siteOf(c), c.dataset.composer, f);
+    addFiles(c, input.files);
     input.value = '';
   });
+  // A drag of files over a composer marks it .dragging, which outlines its drop zone. dragenter and dragleave fire on
+  // each child it crosses, so the composer counts them, and a drop ends the drag.
+  const depth = new WeakMap();
+  const composerOf = (ev) => (ev.target.closest && ev.target.closest('[data-composer]')) || null;
+  const carriesFiles = (ev) => [...(ev.dataTransfer?.types || [])].includes('Files');
+  const setDepth = (c, n) => { depth.set(c, n); c.classList.toggle('dragging', n > 0); };
+  const addFiles = (c, files) => { for (const f of files) upload(siteOf(c), c.dataset.composer, f); };
+  document.addEventListener('dragenter', (ev) => {
+    const c = composerOf(ev);
+    if (c && carriesFiles(ev)) setDepth(c, (depth.get(c) || 0) + 1);
+  });
+  document.addEventListener('dragleave', (ev) => {
+    const c = composerOf(ev);
+    if (c && depth.get(c)) setDepth(c, depth.get(c) - 1);
+  });
+  // A file drag is taken anywhere on the page, so a drop that misses every composer does nothing in place of the
+  // browser opening the file over the board.
+  document.addEventListener('dragover', (ev) => { if (carriesFiles(ev)) ev.preventDefault(); });
+  document.addEventListener('drop', (ev) => {
+    if (!carriesFiles(ev)) return;
+    ev.preventDefault();
+    const c = composerOf(ev);
+    if (!c) return;
+    setDepth(c, 0);
+    addFiles(c, ev.dataTransfer.files);
+  });
+  // A paste that carries files attaches them in place of pasting; a paste of text alone pastes as usual.
+  document.addEventListener('paste', (ev) => {
+    const c = composerOf(ev);
+    const files = [...(ev.clipboardData?.files || [])];
+    if (!c || !files.length) return;
+    ev.preventDefault();
+    addFiles(c, files);
+  });
   document.addEventListener('click', (ev) => {
     const b = ev.target.closest && ev.target.closest('[data-unattach]');
     const c = b && b.closest('[data-composer]');