@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/app-lanes.js

@@ -0,0 +1,142 @@
+// 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;
+  const { esc } = BoardUI;
+  const LANES = [
+    { id: 'review', name: 'In Review', open: true },
+    { 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, 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 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 = '') {
+    if (!list.length) return '';
+    return `<details class="fold" data-fold="${esc(id)}" ${store.get(FOLDS[id].store, false) ? 'open' : ''}>
+        <summary><span class="lane-name">${name}</span><span class="count">${list.length}</span>${note ? `<span class="count">· ${note}</span>` : ''}</summary>
+        <div class="fold-list">${list.map((it) => B.card(it)).join('')}</div>
+      </details>`;
+  }
+
+  // One row per finished wave, newest card first, as Done's items arrive sorted.
+  function waveFolds(d, items) {
+    const slugs = [...new Set(items.filter((i) => i.fold === `wave:${i.wave}`).map((i) => i.wave))];
+    return slugs.map((slug) => {
+      const w = d.waves.find((x) => x.slug === slug);
+      const { dropped } = w.finished;
+      return fold(`wave:${slug}`, items.filter((i) => i.fold === `wave:${slug}`), esc(w.title), dropped ? `${dropped} dropped` : '');
+    }).join('');
+  }
+
+  // shown is the board's items after the wave filter and pending deletes.
+  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 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>
+      </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.
+  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) {
+    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;
+    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);
+  }, 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 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; }
+      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 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

@@ -0,0 +1,31 @@
+// The board view's Needs you box: one line per thing waiting on the owner (domain.mjs needsOf), led by the board
+// session's pending prompts, answered in place (prompts.js). Needs app-core.js.
+BoardView.part((B) => {
+  const { $, plural, state, toast } = B;
+  const { esc, promptItem } = BoardUI;
+
+  const prompts = PromptAnswers.wire(B, {
+    list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
+    paint: () => { if (state.board) renderNeeds(state.board); },
+    notify: (text) => toast(text),
+    after: () => B.loadBoard(),
+  });
+
+  function renderNeeds(d) {
+    const parts = (line) => [
+      line.questions ? `<a href="${esc(line.questions.url)}">${plural(line.questions.open, 'question')}</a>` : '',
+      line.ready ? `<a href="${esc(line.ready)}" target="_blank" rel="noopener">Ready on GitHub</a>` : '',
+      line.action ? `<a href="${esc(line.action.url)}">${esc(line.action.label)}</a>` : '',
+    ].filter(Boolean).join(' · ');
+    const needs = (d.needs || []).filter((line) => !line.prompt || prompts.shows(line.prompt));
+    const w = $('#waiting');
+    w.hidden = needs.length === 0;
+    w.innerHTML = needs.length ? `<h2 style="margin:0 0 6px">Needs you · ${needs.length}</h2>
+      <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>` : '';
+  }
+
+  Object.assign(B, { renderNeeds });
+});

package/board/public/app-snapshot.js

@@ -0,0 +1,131 @@
+// 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).
+// Needs app-core.js and ui-snapshot.js; app.js paints it.
+BoardView.part((B) => {
+  const { $$, state } = B;
+  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
+  // dropping first, so they leave room in the browser's 5 MB of storage for the drafts and seen marks, which would
+  // otherwise fail to save.
+  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, BUILD) : null;
+  }
+  // Makes room for this board's raw snapshot.
+  function keepRecent(raw) {
+    let order = [];
+    try { order = JSON.parse(localStorage.getItem(ORDER) || '[]'); } catch {}
+    const stored = [];
+    for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k?.startsWith('boardSnapshot:') && k !== KEY) stored.push(k); }
+    const recent = [...order.filter((k) => stored.includes(k)), ...stored.filter((k) => !order.includes(k))];
+    let used = raw.length;
+    const kept = [KEY];
+    for (const k of recent) {
+      const size = localStorage.getItem(k)?.length || 0;
+      if (used + size <= BUDGET) { used += size; kept.push(k); } else localStorage.removeItem(k);
+    }
+    localStorage.setItem(ORDER, JSON.stringify(kept));
+  }
+  let saveTimer = null;
+  function saveSnapshot() {
+    saveTimer?.();
+    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, [])],
+    });
+    try {
+      if (!raw) { localStorage.removeItem(KEY); return; }
+      keepRecent(raw);
+      localStorage.setItem(KEY, raw);
+    } catch { try { localStorage.removeItem(KEY); } catch {} }
+  }
+  const saveSnapshotSoon = () => { if (!saveTimer) saveTimer = B.later(1000, saveSnapshot); };
+  B.on(window, 'pagehide', () => { if (saveTimer) saveSnapshot(); });
+  // The app shell paints a board it comes back to from this, live when nothing changed since (shell.js).
+  B.atUnmount(saveSnapshot);
+
+  // view is ui-snapshot.js liveControls' view; style.css dims the snapshot and its held controls from the view root's data-board.
+  function setView(view) {
+    state.view = view;
+    B.root.dataset.board = view;
+  }
+  for (const type of ['click', 'submit']) {
+    B.on(B.root, type, (ev) => {
+      const { blocked } = liveControls(state.view);
+      if (!blocked) return;
+      const control = type === 'submit' ? ev.target.querySelector?.('button[type=submit]') : ev.target.closest?.(blocked);
+      if (control?.matches(blocked)) { ev.preventDefault(); ev.stopImmediatePropagation(); }
+    }, true);
+  }
+
+  // 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 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));
+    return out;
+  }
+  const texts = (els) => Object.fromEntries([...els].map(([id, el]) => [id, el.textContent.replace(/\s+/g, ' ').trim()]));
+  let before = null;
+  const holdForFlash = () => { before = texts(lines()); };
+  function flashChanged() {
+    if (!before || state.view !== 'fresh') return;
+    const els = lines();
+    const after = texts(els);
+    for (const id of changedLines(before, after)) {
+      els.get(id).classList.add('flash');
+      before[id] = after[id];
+    }
+  }
+  const endFlash = () => { before = null; };
+
+  // Since the page last drew it, a last visit's board included, a card that changed lanes, or a work card that takes
+  // the place of a drawn New task (its fromAsk), flashes once; any other card whose updateSign changed takes a brief
+  // 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

@@ -0,0 +1,167 @@
+// 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 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.
+  function syncDone(el, key) {
+    const send = el.querySelector('form button[type=submit]');
+    if (!send) return;
+    const html = doneButton(state.board?.items.find((i) => i.key === key));
+    const current = el.querySelector('form [data-confirm="finish"]');
+    if (current?.outerHTML === html) return;
+    current?.remove();
+    if (html) send.insertAdjacentHTML('beforebegin', html);
+  }
+
+  // Each open card's ui-threads.js threadMessages view. Opening a card marks it seen (app-core.js markSeen) before its
+  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed. A
+  // board left and opened again in this page keeps them, so its open threads show what they showed.
+  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) => {
+    const el = ev.target;
+    if (!el.matches?.('details.item') || el.open) return;
+    seenBefore.set(el.dataset.key, B.seen[el.dataset.key]);
+    moreTaps.delete(el.dataset.key);
+    firstDrawn.delete(el.dataset.key);
+  }, true);
+  B.on(B.root, 'click', (ev) => {
+    const key = ev.target.closest('[data-thread-more]')?.closest('[data-thread]')?.dataset.thread;
+    if (key == null) return;
+    moreTaps.set(key, (moreTaps.get(key) || 0) + 1);
+    B.repaintThread(key);
+  });
+
+  const editsIn = (key) => new Map([...state.edits].filter(([, e]) => e.thread === key));
+  function renderThread(key, msgs) {
+    const el = $(`[data-thread="${CSS.escape(key)}"]`);
+    if (!el) return;
+    syncDone(el, key);
+    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]);
+    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>
+        <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>`;
+      BoardAttach.paint('item:' + key, B.site.root);
+    }
+    syncDone(el, key);
+    B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(msgs, links(key), edits, view)));
+    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);
+  }
+
+  // A load while one for the same thread runs shares it, so a card the page inserts open isn't fetched twice; force
+  // starts a new one, after a send. maxAge skips a thread that loaded that recently. from is a load already started
+  // (app.html BoardBoot). A response older than the one shown is dropped. A failed load keeps the previous render.
+  const inflight = new Map();
+  const loadedAt = new Map();
+  const shown = new Map();
+  let seq = 0;
+  function loadThread(key, { force = false, maxAge = 0, from = null } = {}) {
+    if (!force && inflight.has(key)) return inflight.get(key);
+    if (maxAge && Date.now() - (loadedAt.get(key) || 0) < maxAge) return Promise.resolve();
+    const n = ++seq;
+    const p = (from || fetch(B.site.url('api/thread?key=' + encodeURIComponent(key)), { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`thread ${r.status}`)))))
+      .then((msgs) => {
+        if ((shown.get(key) || 0) > n) return;
+        shown.set(key, n);
+        loadedAt.set(key, Date.now());
+        state.threadCache.set(key, msgs);
+        renderThread(key, msgs);
+        B.saveSnapshotSoon?.();
+      })
+      .catch(() => {})
+      .finally(() => { if (inflight.get(key) === p) inflight.delete(key); });
+    inflight.set(key, p);
+    return p;
+  }
+
+  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;
+    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 }); }
+    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]');
+    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'); }
+  });
+  B.on(B.root, 'submit', async (ev) => {
+    const f = ev.target.closest('form[data-reply]');
+    if (!f) return;
+    ev.preventDefault();
+    const ta = f.querySelector('textarea');
+    ta.blur();
+    const 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;
+    const key = f.dataset.reply;
+    const btn = f.querySelector('button[type=submit]'); btn.disabled = true;
+    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 } : {}) })));
+      BoardAttach.clear(id, B.site.root);
+      btn.disabled = false;
+      loadThread(f.dataset.reply, { force: true });
+    } catch { B.notice('Could not send. Is the host awake?'); btn.disabled = false; }
+  });
+  // 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);
+  });
+
+  Object.assign(B, {
+    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

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en" data-build="{{build}}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Claude</title>
+<script>
+// The board this URL opens, or `/`'s last board, starts loading with its open cards' threads here, beside the scripts
+// below; app.js loadBoard takes the loads over when it mounts that board. A board's other views load their own, and a
+// site this device's last sidebar copy lists as no board loads nothing here. Above the stylesheets, since a script
+// after one waits for it to load.
+window.BoardBoot = (function () {
+  if (!/^\/(?:[^/]+\/)?$/.test(location.pathname)) return null;
+  let route = null;
+  try { route = decodeURIComponent(location.pathname.split('/')[1] || '') || localStorage.getItem('hub:lastBoard'); } catch {}
+  if (!route || route === '_hub') return null;
+  try { if (JSON.parse(localStorage.getItem('hub:sidebar') || 'null')?.sites?.some((s) => s.route === route && !s.board)) return null; } catch {}
+  const base = '/' + encodeURIComponent(route) + '/';
+  const get = (u) => { const p = fetch(base + u, { cache: 'no-store' }).then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status))))); p.catch(() => {}); return p; };
+  let open = [];
+  try { open = JSON.parse(localStorage.getItem(`site:${route}:openItems`) || '[]'); } catch {}
+  const focus = /^#item=([^&]+)/.exec(location.hash);
+  if (focus) open.push(decodeURIComponent(focus[1]));
+  return { route, board: get('api/board'), threads: new Map([...new Set(open)].map((k) => [k, get('api/thread?key=' + encodeURIComponent(k))])) };
+})();
+</script>
+<script>try { if (localStorage.getItem('hub:sidebarCollapsed') === '1') document.documentElement.classList.add('sb-collapsed'); } catch {}</script>
+<link rel="stylesheet" href="/_hub/colors.css?v={{colorsVersion}}">
+<link rel="stylesheet" href="/_hub/app/style.css">
+<link rel="stylesheet" href="/_hub/app/hub.css">
+<link rel="stylesheet" href="/_hub/app/sidebar.css">
+<link rel="icon" type="image/png" href="/_hub/kickflip.png">
+<link rel="apple-touch-icon" href="{{touchIcon}}">
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="apple-mobile-web-app-title" content="Claude">
+</head>
+<body class="has-sidebar">
+<aside id="sidebar" class="sidebar" aria-label="Boards">{{sidebar}}</aside>
+<div id="sidebarScrim" class="sidebar-scrim"></div>
+<script id="sidebarData" type="application/json">{{sidebarData}}</script>
+<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>
+<script src="/_hub/app/ui-snapshot.js"></script>
+<script src="/_hub/app/ui-page-header.js"></script>
+<script src="/_hub/app/ui-sidebar.js"></script>
+<script src="/_hub/app/ui-questions.js"></script>
+<script src="/_hub/app/ui-prompts.js"></script>
+<script src="/_hub/app/ui-markdown.js"></script>
+<script src="/_hub/app/ui-hub.js"></script>
+<script src="/_hub/app/toasts.js"></script>
+<script src="/_hub/app/dialogs.js"></script>
+<script src="/_hub/app/prompts.js"></script>
+<script src="/_hub/app/rules-editor.js"></script>
+<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>
+<script src="/_hub/app/app-threads.js"></script>
+<script src="/_hub/app/app-cards.js"></script>
+<script src="/_hub/app/app-lanes.js"></script>
+<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>
+<script src="/_hub/app/view-questions.js"></script>
+<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>
+<script>AppShell.start();</script>
+</body>
+</html>