@lovek4d/kickflip 0.1.0 → 0.3.1

package/board/public/app-lanes.js

@@ -1,4 +1,5 @@
-// The board view's lanes and wave filter: each lane's header and cards, the "N older" and finished-wave folds, and the wave bars.
+// The board view's lanes and the Waves section above them: each lane's header and cards, Done's and Asks' Show more,
+// Done's finished-wave folds, and the wave rows that filter the lanes and start a wave's triage.
 // Needs app-core.js and app-cards.js.
 BoardView.part((B) => {
   const { $, store, state } = B;
@@ -8,11 +9,24 @@ BoardView.part((B) => {
     { id: 'stale', name: 'Stale', open: true, hideEmpty: true },
     { id: 'progress', name: 'In Progress', open: true },
     { id: 'todo', name: 'Todo', open: true },
-    { id: 'done', name: 'Done', open: false },
+    { id: 'done', name: 'Done', open: false, capped: true },
+    { id: 'asks', name: 'Asks', open: false, capped: true },
   ];
+  // docs/adr/0144-answered-asks-have-their-own-section-below-done.md
+  // A capped lane shows STEP cards, and each Show more tap adds STEP more, kept in memory per lane. A card the owner has
+  // open stays shown past the cap. Show more says how many are left (docs/adr/0012-lists-never-cut-silently.md).
+  const STEP = 10;
+  const moreTaps = new Map();
+  function cappedRows(laneId, cards) {
+    const lastOpen = cards.findLastIndex((it) => state.openItems.has(it.key));
+    const shown = Math.max(STEP * (1 + (moreTaps.get(laneId) || 0)), lastOpen + 1);
+    const left = cards.length - shown;
+    return cards.slice(0, shown).map((it) => B.card(it)).join('')
+      + (left > 0 ? `<button type="button" class="thread-more" data-lane-more="${laneId}">Show more <span class="n">· ${left} older card${left === 1 ? '' : 's'}</span></button>` : '');
+  }
 
   // A fold's open state lives in storage, not in setHTML's summary-text match, because its row's count changes.
-  // Fold ids are 'older', 'asks' or wave:<slug> (board/domain.mjs), so any id maps to its own storage key.
+  // Fold ids are wave:<slug> (board/domain.mjs waveFold), so any id maps to its own storage key.
   const FOLDS = new Proxy({}, { get: (_, id) => ({ store: `foldOpen:${String(id)}` }) });
   // A fold's header reads like a lane's: its name, then its count, then an optional note.
   function fold(id, list, name, note = '') {
@@ -37,14 +51,13 @@ BoardView.part((B) => {
   function lanesHtml(d, shown) {
     const laneState = store.get('lanes', {});
     return LANES.map((lane) => {
+      // Items arrive in each lane's fixed order (domain.mjs laneOrder).
       const items = shown.filter((i) => i.lane === lane.id);
       if (lane.hideEmpty && !items.length) return '';
-      const open = laneState[lane.id] ?? lane.open;
-      const older = items.filter((i) => i.fold === 'older');
-      const asks = items.filter((i) => i.fold === 'asks');
-      const rows = items.filter((i) => !i.fold).map((it) => B.card(it)).join('') + fold('asks', asks, 'Answered')
-        + waveFolds(d, items) + fold('older', older, 'Older');
-      return `<details class="lane" data-lane="${lane.id}" ${open ? 'open' : ''}>
+      const expanded = laneState[lane.id] ?? lane.open;
+      const open = items.filter((i) => !i.fold);
+      const rows = (lane.capped ? cappedRows(lane.id, open) : open.map((it) => B.card(it)).join('')) + waveFolds(d, items);
+      return `<details class="lane" data-lane="${lane.id}" ${expanded ? 'open' : ''}>
         <summary><span class="lane-name">${lane.name}</span><span class="count">${items.length}</span>${lane.id === 'review' ? B.githubHeader(d) : ''}</summary>
         <div class="list">${rows || '<div class="empty">Nothing here.</div>'}
         ${lane.id === 'todo' ? BoardUI.planButton(items) : ''}</div>
@@ -52,21 +65,38 @@ BoardView.part((B) => {
     }).join('');
   }
 
+  // The Waves section: a lane of one row per open wave (domain.mjs waveRowsOf). Tapping a row shows only its cards;
+  // Notes and Triage act without filtering. A lineup has them at the row's foot, and a wave file has only Triage, at
+  // the end of its name line.
+  const triaging = new Set();
+  const triageTopic = (r) => `${r.kind}:${r.slug}`;
+  function triageLink(r) {
+    if (r.triage.running || triaging.has(triageTopic(r))) return '<span class="wv-busy" role="status"><span class="try-spin" aria-hidden="true"></span>Triaging…</span>';
+    if (r.triage.questions) return `<span class="muted">Triage: ${B.plural(r.triage.questions, 'open question')}</span>`;
+    return `<button type="button" class="wv-link" data-triage="${esc(triageTopic(r))}">Triage</button>`;
+  }
+  function waveRow(r) {
+    const on = r.slug === state.waveFilter;
+    const lineup = r.kind === 'lineup';
+    const links = lineup ? `<div class="wv-links"><span class="external-link"><a href="notes.html?wave=${encodeURIComponent(r.slug)}">Notes ${BoardUI.LINK_ARROW}</a></span><span class="external-link"><span class="external-separator" aria-hidden="true"> · </span>${triageLink(r)}</span></div>` : '';
+    return `<div class="wv-row${on ? ' on' : ''}" data-wave-row="${esc(r.slug)}">
+        <div class="wv-id"><button type="button" class="wv-name" aria-pressed="${on}">${BoardUI.WAVE_ICON}<span>${esc(r.title)}</span></button><span class="muted small">${r.merged} of ${r.total} merged</span>${lineup ? '' : `<span class="wv-end">${triageLink(r)}</span>`}</div>
+        ${r.goal ? `<div class="wv-note"><b>Goal</b> ${esc(r.goal)}</div>` : ''}
+        ${r.order ? `<div class="wv-note"><b>Order</b> ${r.order.map((o) => esc(o.ref)).join(' → ')}</div>` : ''}
+        ${links}
+      </div>`;
+  }
   function renderWaves(d) {
-    if (d.waves.some((w) => w.finished && w.slug === state.waveFilter)) { state.waveFilter = null; store.set('wave', null); }
-    const rows = d.waves.map((w) => {
-      const items = d.items.filter((i) => i.wave === w.slug);
-      const merged = items.filter((i) => i.pr?.state === 'MERGED' || (!i.pr && i.lane === 'done')).length;
-      const drafts = items.filter((i) => i.pr?.state === 'OPEN' && i.pr.isDraft).length;
-      const review = items.filter((i) => i.pr?.state === 'OPEN' && !i.pr.isDraft).length;
-      return { w, total: items.length, merged, drafts, review };
-    }).filter((r) => r.total && !r.w.finished);
-    $('#waves').innerHTML = rows.map(({ w, total, merged, drafts, review }) => `<button class="wave ${w.slug === state.waveFilter ? 'on' : ''}" data-wave="${esc(w.slug)}">
-        <span class="wave-name">${esc(w.title)}</span>
-        <span class="muted small">${merged} of ${total} ${w.internal ? 'done' : 'merged'}${review ? ` · ${review} in review` : ''}${drafts ? ` · ${drafts} draft${drafts === 1 ? '' : 's'}` : ''}</span>
-        <span class="bar"><span style="width:${Math.round((merged / total) * 100)}%"></span></span>
-      </button>`).join('');
+    const rows = d.waveRows || [];
+    if (state.waveFilter && !rows.some((r) => r.slug === state.waveFilter)) { state.waveFilter = null; store.set('wave', null); }
+    const open = store.get('lanes', {}).waves ?? true;
+    const shown = rows.find((r) => r.slug === state.waveFilter);
+    BoardUI.setHTML($('#waves'), rows.length ? `<details class="lane" data-lane="waves" ${open ? 'open' : ''}>
+        <summary><span class="lane-name">Waves</span><span class="count">${rows.length}</span></summary>
+        <div class="list">${rows.map(waveRow).join('')}</div>
+      </details>${shown ? `<div class="wv-showing muted small">Showing ${esc(shown.title)} only · <button type="button" class="wv-all">Show all</button></div>` : ''}` : '');
   }
+  const showWave = (slug) => { state.waveFilter = slug; store.set('wave', slug); B.render(); };
 
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
@@ -76,16 +106,36 @@ BoardView.part((B) => {
   }, true);
 
   B.on(B.root, 'click', async (ev) => {
+    const more = ev.target.closest('[data-lane-more]');
+    if (more) { moreTaps.set(more.dataset.laneMore, (moreTaps.get(more.dataset.laneMore) || 0) + 1); B.render(); return; }
     const pb = ev.target.closest('button[data-plan]');
     if (pb) {
-      if (!(await B.confirm('Claude groups these follow-ups into a small wave and asks you about the plan in Needs you. Nothing builds until you answer. Start?'))) return;
+      if (!(await B.confirm('Claude triages these Todo cards into one or more waves and asks you about them in Needs you. Nothing is implemented until you answer. Start?'))) return;
       pb.disabled = true;
-      try { await B.site.send('plan-followups', { keys: pb.dataset.plan.split(' ') }); pb.textContent = 'Planning… its questions appear in Needs you'; }
+      try { await B.send('plan-waves', { keys: pb.dataset.plan.split(' ') }); pb.textContent = 'Planning… its questions appear in Needs you'; }
       catch { B.notice('Could not send. Is the host awake?'); pb.disabled = false; }
       return;
     }
-    const wb = ev.target.closest('button[data-wave]');
-    if (wb) { state.waveFilter = wb.dataset.wave !== state.waveFilter ? wb.dataset.wave : null; store.set('wave', state.waveFilter); B.render(); }
+    const tb = ev.target.closest('button[data-triage]');
+    if (tb) {
+      const topic = tb.dataset.triage;
+      const row = state.board.waveRows.find((r) => triageTopic(r) === topic);
+      const asks = row.kind === 'lineup'
+        ? `Claude reads the code for ${row.title}'s unstarted cards and asks you in Needs you about splitting, merging, adding or closing any. Start?`
+        : `Claude checks ${row.title}'s unfinished cards, fixes what it can and asks you in Needs you about any that need you. Start?`;
+      if (!(await B.confirm(asks))) return;
+      triaging.add(topic);
+      B.render();
+      try { await B.send('wave-triage', { [row.kind]: row.slug }); }
+      catch { B.notice('Could not send. Is the host awake?'); }
+      finally { triaging.delete(topic); B.render(); }
+      return;
+    }
+    const go = ev.target.closest('a[data-wave-show]');
+    if (go) { ev.preventDefault(); showWave(go.dataset.waveShow); $('#waves').scrollIntoView({ block: 'start' }); return; }
+    if (ev.target.closest('.wv-all')) { showWave(null); return; }
+    const row = ev.target.closest('.wv-row');
+    if (row && !ev.target.closest('a')) showWave(row.dataset.waveRow !== state.waveFilter ? row.dataset.waveRow : null);
   });
 
   Object.assign(B, { FOLDS, lanesHtml, renderWaves });

package/board/public/app-needs.js

@@ -23,6 +23,7 @@ BoardView.part((B) => {
     w.innerHTML = needs.length ? `<h2 style="margin:0 0 6px">Needs you · ${needs.length}</h2>
       <ul>${needs.map((line) => (line.prompt ? promptItem(line.prompt, prompts.state(line.prompt))
         : line.key ? `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
+          : line.waveRow ? `<li><a href="#waves" data-wave-show="${esc(line.waveRow)}">${esc(line.title)}</a> <span class="muted small">· ${parts(line)}</span></li>`
           : `<li><a href="${esc(line.url)}">${esc(line.title)}</a> <span class="muted small">${plural(line.questions.open, 'question')}</span></li>`)).join('')}</ul>` : '';
   }
 

package/board/public/app-snapshot.js

@@ -1,9 +1,10 @@
 // The last visit's board on the board view: reading and saving it, holding the controls that send until the fresh
-// board lands, and flashing the lines the fresh board changed (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+// board lands, flashing the lines the fresh board changed (docs/adr/0028-the-board-opens-on-the-last-visit.md), and
+// the sign on a card that changed lanes or was updated (docs/adr/0135-an-updated-card-takes-a-brief-tint.md).
 // Needs app-core.js and ui-snapshot.js; app.js paints it.
 BoardView.part((B) => {
   const { $$, state } = B;
-  const { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, SNAPSHOT_MAX } = BoardUI;
+  const { packSnapshot, unpackSnapshot, preloadKeys, liveControls, changedLines, updateSign, SNAPSHOT_MAX } = BoardUI;
   // 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
@@ -11,11 +12,12 @@ BoardView.part((B) => {
   // otherwise fail to save.
   const BUDGET = 3 * SNAPSHOT_MAX;
   const ORDER = 'boardSnapshots';
+  const BUILD = document.documentElement.dataset.build;
 
   function readSnapshot() {
     let raw = null;
     try { raw = localStorage.getItem(KEY); } catch {}
-    return raw ? unpackSnapshot(raw) : null;
+    return raw ? unpackSnapshot(raw, BUILD) : null;
   }
   // Makes room for this board's raw snapshot.
   function keepRecent(raw) {
@@ -38,6 +40,7 @@ BoardView.part((B) => {
     saveTimer = null;
     if (state.view !== 'fresh' || !state.board) return;
     const raw = packSnapshot(state.board, state.threadCache, {
+      build: BUILD,
       savedAt: state.board.generatedAt || new Date().toISOString(),
       keep: [...state.openItems, ...preloadKeys(state.board.items, [])],
     });
@@ -66,13 +69,9 @@ BoardView.part((B) => {
     }, true);
   }
 
-  // The lines a fresh board can change: each card line, lane count, Needs you line and thread message.
+  // The lines a fresh board can change: each lane count, Needs you line and thread message. A card shows its own sign below.
   function lines() {
     const out = new Map();
-    for (const wrap of $$('details.item[data-key] > summary .title-wrap')) {
-      const key = wrap.closest('[data-key]').dataset.key;
-      [...wrap.children].forEach((el, i) => out.set(`${key}|${i}`, el));
-    }
     for (const count of $$('.lane[data-lane] > summary .count')) out.set(`lane:${count.closest('.lane').dataset.lane}`, count);
     $$('#waiting li').forEach((li, i) => out.set(`needs:${i}`, li));
     for (const msgs of $$('[data-thread] > .msgs')) [...msgs.children].forEach((m, i) => out.set(`thread:${msgs.parentElement.dataset.thread}|${i}`, m));
@@ -86,12 +85,47 @@ BoardView.part((B) => {
     const els = lines();
     const after = texts(els);
     for (const id of changedLines(before, after)) {
-      const el = els.get(id);
-      (el.closest('details.item') || el).classList.add('flash');
+      els.get(id).classList.add('flash');
       before[id] = after[id];
     }
   }
   const endFlash = () => { before = null; };
 
-  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash });
+  // 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
+  // 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();
+  const ownChanges = new Map();
+  async function sentHere(key, send) {
+    ownChanges.set(key, Infinity);
+    try { return await send(); } finally { ownChanges.set(key, B.boardLoad || 0); }
+  }
+  // Each sign's style.css animation length. A lane repaint resets a card's classes, so a sign still running is put back
+  // as far into its animation as it was.
+  const SIGNS = { flash: 1600, tint: 2400 };
+  const running = new Map();
+  function signCards(load = null) {
+    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 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; }
+      if ((moved || updated) && state.view === 'fresh') running.set(it.key, { sign: moved ? 'flash' : 'tint', at: now });
+    }
+    drawn = new Map(state.board.items.map((i) => [i.key, { lane: i.lane, sign: updateSign(i) }]));
+    for (const [key, { sign, at }] of running) {
+      const card = now - at < SIGNS[sign] && B.root.querySelector(`details.item[data-key="${CSS.escape(key)}"]`);
+      if (!card) { running.delete(key); continue; }
+      // Re-adding the class after a layout read restarts the animation, from the delay's point.
+      card.classList.remove('flash', 'tint');
+      card.style.setProperty('--sign-delay', `-${now - at}ms`);
+      void card.offsetWidth;
+      card.classList.add(sign);
+    }
+  }
+
+  Object.assign(B, { readSnapshot, saveSnapshotSoon, setView, holdForFlash, flashChanged, endFlash, sentHere, signCards });
 });

package/board/public/app-threads.js

@@ -6,11 +6,10 @@ BoardView.part((B) => {
   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.
-  const sendingDone = new Set();
   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), sendingDone.has(key));
+    const html = doneButton(state.board?.items.find((i) => i.key === key));
     const current = el.querySelector('form [data-confirm="finish"]');
     if (current?.outerHTML === html) return;
     current?.remove();
@@ -18,10 +17,13 @@ BoardView.part((B) => {
   }
 
   // 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.
-  const seenBefore = new Map(Object.entries(B.seen));
-  const moreTaps = new Map();
-  const firstDrawn = new Map();
+  // 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.
+  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] } }));
   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 });
   B.on(B.root, 'toggle', (ev) => {
@@ -104,7 +106,7 @@ BoardView.part((B) => {
     if (!b) return;
     const key = b.closest('form').dataset.reply;
     b.disabled = true;
-    try { await B.site.send('item-message', { key, text: b.dataset.quick }); loadThread(key, { force: true }); }
+    try { await B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick })); loadThread(key, { force: true }); }
     catch { toast('Could not send'); }
     b.disabled = false;
   });
@@ -119,13 +121,13 @@ BoardView.part((B) => {
       const n = protoNotice(pending, latest);
       if (!n.bump) { B.notice(n.text); return; }
       if (!(await B.confirm(n.text))) return;
-      try { await B.site.send('ask-bump', { id: pending }); toast('Bumped to the top'); } catch { toast('Could not bump'); }
+      await B.bumpAsk(pending);
       return;
     }
     if (!(await B.confirm('Ask Claude for prototypes of this item?'))) return;
     b.disabled = true;
     try {
-      await B.site.send('prototype-request', { key });
+      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 });
@@ -145,7 +147,7 @@ BoardView.part((B) => {
     const btn = f.querySelector('button[type=submit]'); btn.disabled = true;
     try {
       await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.site.send('item-message', { key, text, ...(files.length ? { files } : {}) }));
+        () => B.sentHere(key, () => B.send('item-message', { key, text, ...(files.length ? { files } : {}) })));
       BoardAttach.clear(id, B.site.root);
       btn.disabled = false;
       loadThread(f.dataset.reply, { force: true });
@@ -158,7 +160,7 @@ BoardView.part((B) => {
   });
 
   Object.assign(B, {
-    thread, renderThread, loadThread, sendingDone,
+    thread, renderThread, loadThread,
     repaintThread: (key) => { if (state.threadCache.has(key)) renderThread(key, state.threadCache.get(key)); },
     syncDone: (key) => { const el = $(`[data-thread="${CSS.escape(key)}"]`); if (el) syncDone(el, key); },
   });

package/board/public/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-build="{{build}}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
@@ -41,6 +41,7 @@ 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-order.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>
@@ -58,6 +59,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/claude.js"></script>
 <script src="/_hub/app/attach.js"></script>
 <script src="/_hub/app/hub-kit.js"></script>
+<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/app-core.js"></script>
@@ -67,6 +69,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/app-asks.js"></script>
 <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-banner.js"></script>
 <script src="/_hub/app/app-snapshot.js"></script>
 <script src="/_hub/app/view-settings.js"></script>

package/board/public/app.js

@@ -3,8 +3,9 @@
 // and mount() runs the parts in load order, then renders the board from /api/board and per-item threads from
 // /api/thread. Actions go out as events through B.site.send (each wakes Claude). Parts add listeners, intervals,
 // timers, watches and unmount steps only through B.on, B.every, B.later, B.watch and B.atUnmount, so unmount() undoes
-// them all and no board's state outlives its view. BoardView.markup({title}) is the root's inner
-// HTML. BoardView.page(root, site, run) gives a board's other views (view-*.js) the same site, $ and recorders.
+// them all and no board's state outlives its view but what B.keep keeps for its next mount in this page.
+// BoardView.markup({title}) is the root's inner HTML. BoardView.page(root, site, run) gives a board's other views
+// (view-*.js) the same site, $ and recorders.
 // opts, both from the app shell (shell.js):
 //   signal(fn) → off   calls fn on each change signal for this board, from the hub's one stream
 //   live {fresh, generatedAt}
@@ -14,6 +15,9 @@
 window.BoardView = (function () {
   const parts = [];
   const part = (fn) => { parts.push(fn); };
+  // route → what a board's view kept as it unmounted, which its next mount in this page reads as B.place. A reload
+  // starts with none.
+  const places = new Map();
 
   // Every board shares the hub's one origin, so each keeps its keys under site:<route>:; app.html's preload reads
   // openItems by the same key. Thread and question drafts are already per card and keep their own keys.
@@ -111,7 +115,12 @@ window.BoardView = (function () {
       waveFilter: store.get('wave', null),
     };
     const signal = opts.signal ? (fn) => { if (B.alive()) B.own(opts.signal(fn)); } : null;
-    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause });
+    // B.keep(fn): a part adds fn() → {…} to what the board keeps as it unmounts, read before any part's unmount step.
+    const keepers = [];
+    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 });
 
     function mount() {
       if (B.alive()) return;
@@ -119,7 +128,12 @@ window.BoardView = (function () {
       for (const p of parts) p(B);
       start(B);
     }
-    return { B, mount, unmount: stop };
+    function unmount() {
+      if (B.alive()) places.set(B.route, Object.assign({}, ...keepers.map((fn) => fn())));
+      keepers.length = 0;
+      stop();
+    }
+    return { B, mount, unmount };
   }
 
   // A view other than the board: run(B) adds what it needs through B's recorders when the view mounts.
@@ -139,17 +153,19 @@ window.BoardView = (function () {
     const { setHTML, preloadKeys } = BoardUI;
 
     // Renders open threads from state.threadCache; loadBoard and opening a card load them.
-    function render() {
+    function render(load = null) {
       const d = state.board;
       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));
+        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) : live;
+        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.
@@ -158,7 +174,9 @@ window.BoardView = (function () {
         B.renderNeeds(d);
         B.renderBanner(d);
       });
+      paintFades();
       B.flashChanged();
+      B.signCards(load);
     }
 
     // #item=<wave>/<id> opens that card; push notifications link here, with &reply to land in the thread's reply box
@@ -166,6 +184,8 @@ window.BoardView = (function () {
     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) });
     function readHash() {
       const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
       if (!m) return;
@@ -214,7 +234,7 @@ window.BoardView = (function () {
       const snap = B.readSnapshot();
       if (!snap) return false;
       const live = Boolean(B.live) && snap.board?.generatedAt === B.live.generatedAt;
-      state.board = snap.board;
+      served = 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');
@@ -222,6 +242,7 @@ window.BoardView = (function () {
       hashRead = true;
       render();
       scrollToFocus(false);
+      returnToPlace();
       if (!live) B.holdForFlash();
       return live;
     }
@@ -235,6 +256,7 @@ window.BoardView = (function () {
     if (boot?.route && boot.route !== B.route) boot = null;
     let preloaded = false;
     async function loadBoard({ via = 'poll' } = {}) {
+      const load = B.boardLoad = (B.boardLoad || 0) + 1;
       const started = boot;
       boot = null;
       const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
@@ -242,15 +264,7 @@ window.BoardView = (function () {
       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}`)))));
-        const first = state.view !== 'fresh';
-        state.board = board;
-        B.setView('fresh');
-        if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
-        B.linkUp();
-        render();
-        scrollToFocus();
-        B.site.syncBadge();
-        B.saveSnapshotSoon();
+        land(board, load);
         landed = true;
         if (!preloaded) {
           preloaded = true;
@@ -264,6 +278,79 @@ 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;
+      const first = state.view !== 'fresh';
+      served = board;
+      state.board = drawn();
+      B.setView('fresh');
+      if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
+      B.linkUp();
+      render(load);
+      scrollToFocus();
+      returnToPlace();
+      B.site.syncBadge();
+      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);
+      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).
     let reloading = null;
@@ -278,7 +365,9 @@ window.BoardView = (function () {
       });
     }
 
-    Object.assign(B, { render, loadBoard });
+    // 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 });
     const live = paintSnapshot();
     B.headerWired();
     if (live) B.linkUp();
@@ -294,16 +383,16 @@ window.BoardView = (function () {
   }
 
   function markup({ title = '' } = {}) {
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png' })}
+    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: 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" class="waves"></div>
+  <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="26" height="26" 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>
+<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>
@@ -315,6 +404,28 @@ window.BoardView = (function () {
     </div>
   </form>
 </dialog>
+<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>
+    <p id="mainLogSource" class="main-log-source muted small"></p>
+    <pre id="mainLogLines" class="main-log-lines" tabindex="0" aria-label="Main’s build log"></pre>
+    <p id="mainLogReason" class="small" role="status" hidden></p>
+    <div class="main-log-actions"><button type="button" class="primary" id="mainLogRetry">Retry</button></div>
+  </div>
+</dialog>
+<dialog id="holdSheet" class="sheet hold-sheet" aria-labelledby="holdTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="holdTitle" tabindex="-1"></h2><button type="button" class="ghost" id="holdClose" aria-label="Close">✕</button></div>
+    <p id="holdLede" class="hold-lede muted"></p>
+    <div id="holdPicker"></div>
+  </div>
+</dialog>
+<dialog id="archSheet" class="sheet arch-sheet" aria-labelledby="archTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="archTitle">Architecture review</h2><button type="button" class="ghost" id="archClose" aria-label="Close sheet">✕</button></div>
+    <div id="archBody" class="arch-body"></div>
+  </div>
+</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>