@lovek4d/kickflip 0.3.1 → 0.5.0

package/board/public/app-lanes.js

@@ -1,9 +1,9 @@
-// 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.
+// The board view's lanes and the Auto Review lane leading them: each lane's header and cards, Todo's Queued section, Done's and Asks' Show more,
+// Done's finished-wave folds, and Todo's wave bands with their Implement, triage and card order.
 // Needs app-core.js and app-cards.js.
 BoardView.part((B) => {
   const { $, store, state } = B;
-  const { esc } = BoardUI;
+  const { esc, waitOn } = BoardUI;
   const LANES = [
     { id: 'review', name: 'In Review', open: true },
     { id: 'stale', name: 'Stale', open: true, hideEmpty: true },
@@ -12,17 +12,44 @@ BoardView.part((B) => {
     { 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
+  // docs/adr/2026-11-03-0259-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).
+  // open stays shown past the cap. Show more says how many are left (docs/adr/2026-10-29-1639-lists-never-cut-silently.md).
+  // older is how many cards wait past `cards` in the archive; the tap that would show past `cards` fetches them first.
   const STEP = 10;
   const moreTaps = new Map();
-  function cappedRows(laneId, cards) {
+  function cappedRows(laneId, cards, older = 0) {
     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;
+    const left = Math.max(0, cards.length - shown);
+    const n = left + (older || 0);
+    const words = `${n} older card${n === 1 ? '' : 's'}`;
+    const fetches = older !== 0 && shown + STEP > cards.length;
     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>` : '');
+      + (n > 0 ? `<button type="button" class="thread-more" data-lane-more="${laneId}"${fetches ? ' data-fetch' : ''}>Show more <span class="n">· ${words}</span></button>` : '');
+  }
+
+  // docs/adr/2026-11-04-0307-the-board-keeps-the-newest-100-done-cards.md
+  // Done shows the board's Done cards, then those paged in from the archive (GET /api/done), 100 a page, newest first.
+  // The board says how many the archive holds (doneArchived), so Done's count is the true total before any page is fetched.
+  const { archived } = state;
+  const olderThanBoard = (d) => Math.max(0, d.doneArchived - archived.cards.filter((c) => !d.items.some((i) => i.key === c.key)).length);
+  function doneRows(d, open) {
+    const onBoard = new Set(d.items.map((i) => i.key));
+    const cards = [...open, ...archived.cards.filter((c) => !onBoard.has(c.key))].sort((a, b) => String(b.sortAt || '').localeCompare(String(a.sortAt || '')));
+    return cappedRows('done', cards, olderThanBoard(d));
+  }
+  function doneCount(d, items) {
+    const onBoard = new Set(d.items.map((i) => i.key));
+    const older = olderThanBoard(d);
+    return `${items.length + archived.cards.filter((c) => !onBoard.has(c.key)).length + older}`;
+  }
+  async function fetchOlder() {
+    const last = archived.cards.at(-1);
+    const r = await fetch(B.site.url(`api/done${last ? `?before=${encodeURIComponent(`${last.sortAt}|${last.key}`)}` : ''}`), { cache: 'no-store' });
+    if (!r.ok) throw new Error(`done ${r.status}`);
+    const page = await r.json();
+    archived.cards.push(...page.cards);
   }
 
   // A fold's open state lives in storage, not in setHTML's summary-text match, because its row's count changes.
@@ -47,79 +74,160 @@ BoardView.part((B) => {
     }).join('');
   }
 
-  // shown is the board's items after the wave filter and pending deletes.
+  // docs/adr/2026-11-03-1731-each-board-reviews-incoming-prs-that-touch-its-work.md: the Auto Review lane leads the lanes. The PRs
+  // the owner has open are kept in memory, as cards are.
+  const openReviews = new Set();
+  const reviewsHtml = (d) => BoardUI.reviewLane(d.reviews, {
+    open: { lane: store.get('lanes', {}).reviews, earlier: store.get(FOLDS['reviews-earlier'].store, false), cards: openReviews } });
+  // Opens PR number's review and its lane or fold, for a Needs you line or a push's #review=<number>.
+  function openReview(number) {
+    openReviews.add(number);
+    const s = store.get('lanes', {}); s.reviews = true; store.set('lanes', s);
+    if (state.board?.reviews?.earlier.some((c) => c.number === number)) store.set(FOLDS['reviews-earlier'].store, true);
+    B.render();
+    $(`[data-review="${number}"]`)?.scrollIntoView({ block: 'start' });
+  }
+
+  // shown is the board's items less pending deletes.
   function lanesHtml(d, shown) {
     const laneState = store.get('lanes', {});
-    return LANES.map((lane) => {
+    return reviewsHtml(d) + 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 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);
+      const rows = lane.id === 'todo' ? todoRows(d, shown, open) : (lane.id === 'done' ? doneRows(d, open) : 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>
+        <summary><span class="lane-name">${lane.name}</span><span class="count">${lane.id === 'done' ? doneCount(d, items) : 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>
       </details>`;
     }).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.
+  // docs/adr/2026-11-03-1840-waves-are-bands-in-todo.md
+  // Todo's wave bands (domain.mjs waveBandsOf), then its cards in no wave under Not in a wave. A band's open state lives
+  // in storage once the owner taps its head; until then only the first band whose next card is ready (a wave file's:
+  // any Todo card) starts open. A band's name shows its goal as a tooltip, or a popover on a long-press. menu is the
+  // card whose ⋯ menu is open, goalShown the band whose goal popover is open.
+  let menu = null;
+  let goalShown = null;
   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.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>`;
+  const bandStore = (slug) => FOLDS[`band:${slug}`].store;
+  const bandOpen = (band, first) => store.get(bandStore(band.slug), band.slug === first);
+  const LANE_WORDS = { progress: 'in progress', review: 'in review', stale: 'stale' };
+  const DOTS = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>';
+
+  // docs/adr/2026-11-04-0150-queued-sits-at-the-top-of-todo.md
+  // Todo's Queued section, which holds the cards waiting for an implementer slot, the next to build on top, as they
+  // arrive (domain.mjs laneOrder), then its wave bands and loose cards.
+  function todoRows(d, shown, all) {
+    const queued = all.filter((i) => i.queued);
+    const head = queued.length ? `<div class="wb-loose lane-queue"><div class="wb-head wb-loosehead"><span class="lane-name">Queued</span><span class="count">${queued.length}</span></div>${queued.map((it) => B.card(it)).join('')}</div>` : '';
+    return head + bandRows(d, shown, all.filter((i) => !i.queued));
   }
-  function renderWaves(d) {
-    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>` : ''}` : '');
+
+  function bandRows(d, shown, todo) {
+    const bands = d.waveBands || [];
+    const byKey = new Map(shown.filter((i) => !i.queued).map((i) => [i.key, i]));
+    const banded = new Set(bands.flatMap((b) => b.keys));
+    const loose = todo.filter((i) => !banded.has(i.key));
+    const first = bands.find((b) => (b.next ? b.next.ready : b.keys.some((k) => byKey.get(k)?.ready)))?.slug;
+    if (!bands.length) return loose.map((it) => B.card(it)).join('');
+    return bands.map((b) => bandHtml(b, b.keys.map((k) => byKey.get(k)).filter(Boolean), bandOpen(b, first))).join('')
+      + (loose.length ? `<div class="wb-loose"><div class="wb-head wb-loosehead"><span class="lane-name">Not in a wave</span><span class="count">${loose.length}</span></div>${loose.map((it) => B.card(it)).join('')}</div>` : '');
+  }
+
+  function bandHtml(band, cards, open) {
+    const todo = cards.filter((i) => i.lane === 'todo');
+    const done = cards.filter((i) => i.lane === 'done');
+    const now = cards.filter((i) => LANE_WORDS[i.lane]).map((i) => `${esc(i.ref)} ${i.queued ? 'queued' : LANE_WORDS[i.lane]}`);
+    const progress = [`${band.merged} of ${band.total} merged`, ...now].join(' · ');
+    const name = `<span class="lane-name wb-name"${band.goal ? ` title="${esc(band.goal)}" data-goal="${esc(band.slug)}"` : ''}>${esc(band.title)}</span>`;
+    const notes = band.kind === 'lineup' ? `<span class="external-link"><a href="notes.html?wave=${encodeURIComponent(band.slug)}">Notes ${BoardUI.LINK_ARROW}</a></span><span class="external-separator" aria-hidden="true"> · </span>` : '';
+    const next = band.next;
+    const go = !next ? '' : next.ready
+      ? `<button type="button" class="wv-link" data-confirm="card-build" data-key="${esc(next.key)}">Implement</button>`
+      : `<span class="wb-next">next: ${esc(next.ref)} ${esc(next.word)}</span>`;
+    const pop = goalShown === band.slug && band.goal ? `<div class="wb-pop" role="tooltip">${esc(band.goal)}</div>` : '';
+    const head = `<div class="wb-head" data-band-toggle="${esc(band.slug)}" role="button" tabindex="0" aria-expanded="${open}">${BoardUI.WAVE_ICON}`
+      + `<span class="wb-label">${name} <span class="count">${todo.length}</span> <span class="count">· ${progress}</span></span>`
+      + `<span class="wb-end"><span class="wb-links">${notes}${triageLink(band)}</span>${go}</span>${pop}</div>`;
+    if (!open) return `<section class="wb" data-band="${esc(band.slug)}">${head}</section>`;
+    const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#item=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
+    const step = (it) => (band.kind === 'lineup' ? band.phases.findIndex((p) => p.includes(it.key)) + 1 : 0);
+    const actions = (it, at) => (band.kind !== 'lineup' ? null : cardMenu(band.slug, it.key, at, todo.length));
+    return `<section class="wb" data-band="${esc(band.slug)}" data-open>${head}<div class="wb-body">${doneRow}${todo.map((it, at) => B.card(it, { step: step(it), actions: actions(it, at) })).join('')}</div></section>`;
+  }
+
+  // A lineup card's ⋯ and, while open, its menu: Move up and Move down among the band's Todo cards. A move waits for
+  // the server (board/server.mjs lineup-move): the tapped move waits and the other is disabled meanwhile.
+  function cardMenu(slug, key, at, count) {
+    const shown = menu === key;
+    const item = (by, label) => {
+      const off = by < 0 ? at === 0 : at === count - 1;
+      return `<button type="button" role="menuitem" data-band-move="${by}" data-band="${esc(slug)}" data-key="${esc(key)}"${off ? ' disabled' : ''}>${label}</button>`;
+    };
+    return `<div class="ask-actions"><button type="button" class="ghost icon wb-dots" data-band-menu="${esc(key)}" aria-label="Card menu" aria-haspopup="menu" aria-expanded="${shown}">${DOTS}</button>`
+      + (shown ? `<div class="wb-menu" role="menu">${item(-1, '↑ Move up')}${item(1, '↓ Move down')}</div>` : '') + '</div>';
+  }
+
+  // Opens the band holding card key or named slug, for a #item= link or a Needs you line.
+  function openBand({ key, slug }) {
+    const band = (state.board?.waveBands || []).find((b) => b.slug === slug || b.keys.includes(key));
+    if (band) store.set(bandStore(band.slug), true);
+    return band;
   }
-  const showWave = (slug) => { state.waveFilter = slug; store.set('wave', slug); B.render(); };
 
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (el.matches?.('details.lane')) {
       const s = store.get('lanes', {}); s[el.dataset.lane] = el.open; store.set('lanes', s);
     } else if (el.matches?.('details.fold')) store.set(FOLDS[el.dataset.fold].store, el.open);
+    else if (el.matches?.('details.rv-card, details.rv-line')) {
+      if (el.open) openReviews.add(Number(el.dataset.review)); else openReviews.delete(Number(el.dataset.review));
+    }
   }, true);
 
   B.on(B.root, 'click', async (ev) => {
+    const answer = ev.target.closest('button[data-review-answer]');
+    if (answer) {
+      // The tapped answer waits, and the review's other answer is disabled, until the server records it.
+      const pr = Number(answer.dataset.review);
+      try { await waitOn(answer, B.send('review-answer', { pr, answer: answer.dataset.reviewAnswer }), { group: answer.parentNode.querySelectorAll('button') }); }
+      catch { B.notice('Could not send. Is the host awake?'); }
+      return;
+    }
+    const review = ev.target.closest('a[data-review-open]');
+    if (review) { ev.preventDefault(); openReview(Number(review.dataset.reviewOpen)); return; }
     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; }
+    if (more) {
+      if (more.hasAttribute('data-fetch')) {
+        try { await waitOn(more, fetchOlder()); } catch { B.toast('Could not load older cards. Is the host awake?'); return; }
+        if (!B.alive()) return;
+      }
+      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 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.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; }
+      try { await waitOn(pb, B.send('plan-waves', { keys: pb.dataset.plan.split(' ') })); pb.textContent = 'Planning… its questions appear in Needs you'; pb.disabled = true; }
+      catch { B.notice('Could not send. Is the host awake?'); }
       return;
     }
     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 row = state.board.waveBands.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?`;
@@ -131,12 +239,58 @@ BoardView.part((B) => {
       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);
+    const show = ev.target.closest('a[data-band-show]');
+    if (show) {
+      ev.preventDefault();
+      if (!openBand({ slug: show.dataset.bandShow })) return;
+      const s = store.get('lanes', {}); s.todo = true; store.set('lanes', s);
+      B.render();
+      $(`.wb[data-band="${CSS.escape(show.dataset.bandShow)}"]`)?.scrollIntoView({ block: 'start' });
+    }
+  });
+
+  // A band's ⋯ menu and its moves, its head's fold and its name's goal popover. A long-press on the name (touch only;
+  // a mouse has the tooltip) opens the popover, and the click that ends the press neither folds the band nor closes it.
+  let press = null;
+  let pressed = false;
+  const endPress = () => { press?.(); press = null; };
+  B.on(B.root, 'pointerdown', (ev) => {
+    pressed = false;
+    const name = ev.target.closest?.('[data-goal]');
+    if (!name || ev.pointerType === 'mouse') return;
+    endPress();
+    press = B.later(450, () => { press = null; pressed = true; goalShown = name.dataset.goal; B.render(); });
+  });
+  for (const type of ['pointerup', 'pointercancel']) B.on(B.root, type, endPress);
+  B.on(B.root, 'contextmenu', (ev) => { if (ev.target.closest?.('[data-goal]')) ev.preventDefault(); });
+  B.on(B.root, 'click', async (ev) => {
+    if (pressed) { pressed = false; ev.preventDefault(); return; }
+    if (goalShown) { goalShown = null; B.render(); if (ev.target.closest('.wb-head')) return; }
+    const dots = ev.target.closest('button[data-band-menu]');
+    if (dots) { ev.preventDefault(); menu = menu === dots.dataset.bandMenu ? null : dots.dataset.bandMenu; B.render(); return; }
+    const mv = ev.target.closest('button[data-band-move]');
+    if (mv) {
+      ev.preventDefault();
+      if (mv.disabled) return;
+      const { band, key } = mv.dataset;
+      try { await waitOn(mv, B.send('lineup-move', { lineup: band, key, by: Number(mv.dataset.bandMove) }), { group: mv.parentNode.querySelectorAll('button') }); }
+      catch { B.toast('Could not move it. Is the host awake?'); }
+      menu = null;
+      B.render();
+      return;
+    }
+    if (menu && !ev.target.closest('.wb-menu')) { menu = null; B.render(); if (ev.target.closest('summary')) { ev.preventDefault(); return; } }
+    const head = ev.target.closest('[data-band-toggle]');
+    if (head && !ev.target.closest('a, button')) {
+      const slug = head.dataset.bandToggle;
+      store.set(bandStore(slug), head.getAttribute('aria-expanded') !== 'true');
+      B.render();
+    }
+  });
+  B.on(B.root, 'keydown', (ev) => {
+    const head = ev.target.closest?.('[data-band-toggle]');
+    if (head && ev.target === head && (ev.key === 'Enter' || ev.key === ' ')) { ev.preventDefault(); head.click(); }
   });
 
-  Object.assign(B, { FOLDS, lanesHtml, renderWaves });
+  Object.assign(B, { FOLDS, lanesHtml, openReview, openBand });
 });

package/board/public/app-needs.js

@@ -23,7 +23,8 @@ 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>`
+          : line.review ? `<li><a href="${esc(line.url)}" data-review-open="${line.review}">${esc(line.title)}</a> <span class="muted small">· review held for you</span></li>`
+          : line.band ? `<li><a href="#" data-band-show="${esc(line.band)}">${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-reader.js

@@ -0,0 +1,174 @@
+// The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "Open the log →"
+// (ui-threads.js) and a card's or a lineup's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
+// place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
+// and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
+// A link in it closes it first, then opens through the shell.
+// A log written as a stream (headless.mjs: one stream-json event per line) reads as lines, what Claude says and each
+// tool call, with a raw toggle for the file as it is; any other log reads as its text. It is re-read every 3 seconds
+// until the run's result arrives, and follows new lines while read at its end.
+BoardView.part((B) => {
+  const { $, state } = B;
+  const { esc, markdown, linkContext } = BoardUI;
+  const sheet = $('#readerSheet');
+  const body = sheet.querySelector('.reader-body');
+  const tools = sheet.querySelector('.reader-tools');
+  const more = sheet.querySelector('.reader-new');
+  let opened = 0;
+  let pushed = false;
+  let pending = null;
+  let log = null;
+  let stopReading = null;
+
+  // → the log's lines, each a stream event or, for a line that isn't one, its text; null when no line is an event.
+  function streamOf(text) {
+    const lines = text.split('\n');
+    if (lines.at(-1) === '') lines.pop();
+    const read = (line) => { try { const e = JSON.parse(line); return typeof e?.type === 'string' ? e : null; } catch { return null; } };
+    const events = lines.map(read);
+    return events.some(Boolean) ? lines.map((line, i) => events[i] ?? line) : null;
+  }
+  const short = (v) => (v.length > 400 ? `${v.slice(0, 400)}…` : v);
+  const textOf = (content) => (typeof content === 'string' ? content : content.map((part) => part.text ?? '').join('\n'));
+  const callOf = (input) => input.command ?? input.file_path ?? input.pattern ?? input.url ?? input.description ?? JSON.stringify(input);
+  // A stream line's readable rows {kind, label, body}. Thinking and events other than the start, messages and the
+  // result have none; the raw view shows them.
+  function rowsOf(e) {
+    if (typeof e === 'string') return [{ kind: 'out', body: e }];
+    if (e.type === 'system') return e.subtype === 'init' ? [{ kind: 'sys', label: 'start', body: `${e.model} in ${e.cwd}` }] : [];
+    if (e.type === 'result') return [{ kind: 'text end', label: e.is_error ? 'stopped' : 'done', body: e.result ?? e.subtype }];
+    if (e.type !== 'assistant' && e.type !== 'user') return [];
+    const content = e.message.content;
+    if (typeof content === 'string') return [{ kind: 'text', body: content }];
+    return content.flatMap((c) => (c.type === 'text' ? [{ kind: 'text', body: c.text }]
+      : c.type === 'tool_use' ? [{ kind: 'tool', label: c.name.toLowerCase(), body: callOf(c.input) }]
+      : c.type === 'tool_result' ? [{ kind: 'out', body: short(textOf(c.content)) }] : []));
+  }
+  const rowHtml = (r) => `<div class="reader-row ${r.kind}">${r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : ''}${esc(r.body)}</div>`;
+
+  const atEnd = () => body.scrollHeight - body.scrollTop - body.clientHeight < 40;
+  const toEnd = () => { body.scrollTop = body.scrollHeight; };
+  function drawTools() {
+    if (!log?.stream) { tools.innerHTML = ''; return; }
+    const word = log.finished ? 'finished' : log.following ? 'following' : 'paused';
+    tools.innerHTML = `<span class="reader-status${word === 'following' ? ' on' : ''}">${word}</span><button type="button" data-reader="raw" aria-pressed="${log.raw}">raw</button>`;
+  }
+  function drawMore() {
+    more.hidden = !log?.unseen;
+    if (log?.unseen) more.textContent = `${log.unseen} new ${log.unseen === 1 ? 'line' : 'lines'} ↓`;
+  }
+  function drawLog() {
+    const { text, stream, raw } = log;
+    body.innerHTML = !text ? '<p class="muted reader-empty">The log is empty so far.</p>'
+      : !stream ? `<pre class="reader-text">${esc(text)}</pre>`
+      : raw ? `<pre class="reader-raw">${esc(text)}</pre>`
+      : stream.flatMap(rowsOf).map(rowHtml).join('');
+    drawTools();
+    drawMore();
+  }
+  function follow() {
+    log.following = true;
+    log.unseen = 0;
+    toEnd();
+    drawTools();
+    drawMore();
+  }
+
+  async function readLog(n) {
+    let answer;
+    try {
+      const r = await fetch(B.site.url(`api/log?file=${encodeURIComponent(log.file)}`), { cache: 'no-store' });
+      answer = { ok: r.ok, ...(await r.json()) };
+    } catch { answer = null; }
+    if (n !== opened) return;
+    if (answer && !answer.ok) { body.innerHTML = `<p class="muted">${esc(answer.error || 'Could not load this log.')}</p>`; return; }
+    if (answer && answer.size !== log.size) {
+      const before = log.stream?.length ?? 0;
+      const stream = streamOf(answer.text);
+      Object.assign(log, { size: answer.size, text: answer.text, stream, finished: Boolean(stream?.some((e) => e.type === 'result')) });
+      if (!log.following) log.unseen += Math.max(0, (stream?.length ?? 0) - before);
+      drawLog();
+      if (log.following) toEnd();
+    }
+    if (!log.finished) stopReading = B.later(3000, () => readLog(n));
+  }
+
+  function show(title, ref) {
+    opened++;
+    stopReading?.();
+    log = null;
+    sheet.querySelector('#readerTitle').textContent = title;
+    sheet.querySelector('.reader-ref').textContent = ref;
+    tools.innerHTML = '';
+    more.hidden = true;
+    body.innerHTML = '<p class="muted">Loading…</p>';
+    sheet.showModal();
+    history.pushState({ ...history.state, idx: history.state.idx + 1, reader: true }, '', location.href);
+    pushed = true;
+    return opened;
+  }
+  function openLog(file) {
+    const n = show(`${file.split('-')[0]} log`, file);
+    log = { file, size: -1, text: '', stream: null, raw: false, following: true, unseen: 0, finished: false };
+    readLog(n);
+  }
+  async function openNotes(search) {
+    const wave = new URLSearchParams(search).has('wave');
+    const n = show('notes', '');
+    let html;
+    try {
+      const r = await fetch(B.site.url(`api/notes${search}`), { cache: 'no-store' });
+      const answer = await r.json();
+      if (!r.ok) throw new Error(answer.error || `notes ${r.status}`);
+      if (n !== opened) return;
+      sheet.querySelector('.reader-ref').textContent = `${wave ? answer.title : answer.ref} notes`;
+      html = `<article class="plan reader-md">${markdown(answer.markdown, linkContext(state.board?.items || [], answer.key ?? null))}</article>`;
+    } catch (e) { html = `<p class="muted">Could not load these notes: ${esc(e.message)}</p>`; }
+    if (n === opened) body.innerHTML = html;
+  }
+  function close() {
+    if (!sheet.open) return;
+    sheet.close();
+    opened++;
+    stopReading?.();
+    if (pushed) { pushed = false; history.back(); }
+  }
+
+  const plainTap = (ev) => !ev.defaultPrevented && ev.button === 0 && !ev.metaKey && !ev.ctrlKey && !ev.shiftKey && !ev.altKey;
+  B.on(B.root, 'click', (ev) => {
+    if (!plainTap(ev)) return;
+    const a = ev.target.closest('a[href^="log.html?"], a[href^="notes.html?"]');
+    if (!a) return;
+    ev.preventDefault();
+    const href = a.getAttribute('href');
+    if (href.startsWith('log.html')) openLog(new URLSearchParams(href.slice(href.indexOf('?'))).get('file'));
+    else openNotes(href.slice(href.indexOf('?')));
+  });
+  B.on(sheet, 'click', (ev) => {
+    if (ev.target === sheet) { close(); return; }
+    const act = ev.target.closest('[data-reader]')?.dataset.reader;
+    if (act === 'close') close();
+    else if (act === 'raw') { log.raw = !log.raw; drawLog(); follow(); }
+    else if (act === 'end') follow();
+    const a = ev.target.closest('a[href]');
+    if (!a || !plainTap(ev) || (a.target && a.target !== '_self')) return;
+    ev.preventDefault();
+    pending = new URL(a.getAttribute('href'), location.href).href;
+    close();
+  });
+  B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); close(); });
+  B.on(body, 'scroll', () => {
+    if (!log?.stream) return;
+    log.following = atEnd();
+    if (log.following) log.unseen = 0;
+    drawTools();
+    drawMore();
+  });
+  // Back while it's open: the router has kept the board, as the entry under it holds the same URL.
+  B.on(window, 'popstate', () => {
+    if (pushed) { pushed = false; sheet.close(); opened++; stopReading?.(); }
+    if (!pending) return;
+    const href = pending;
+    pending = null;
+    if (!AppShell.open(href)) location.assign(href);
+  });
+});

package/board/public/app-snapshot.js

@@ -1,6 +1,6 @@
 // The last visit's board on the board view: reading and saving it, holding the controls that send until the fresh
-// 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).
+// board lands, flashing the lines the fresh board changed (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md), and
+// the sign on a card that changed lanes or was updated (docs/adr/2026-11-02-2354-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;