@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/app-threads.js

@@ -0,0 +1,165 @@
+// 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.
+  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 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.
+  const seenBefore = new Map(Object.entries(B.seen));
+  const moreTaps = new Map();
+  const firstDrawn = new Map();
+  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.site.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;
+      try { await B.site.send('ask-bump', { id: pending }); toast('Bumped to the top'); } catch { toast('Could not bump'); }
+      return;
+    }
+    if (!(await B.confirm('Ask Claude for prototypes of this item?'))) return;
+    b.disabled = true;
+    try {
+      await B.site.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.site.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, sendingDone,
+    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,83 @@
+<!doctype html>
+<html lang="en">
+<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-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/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-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>

package/board/public/app.js

@@ -0,0 +1,327 @@
+// The board view. Each app-*.js file registers a part with BoardView.part((B) => …); BoardView.create(root, site, opts)
+// builds one board's B over its root element and its site root (such as '/hub-orchestrator', through ClaudeSite.site),
+// 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.
+// 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}
+//                      this board was left fresh and hasn't changed since, so a stored last visit whose board has
+//                      that generatedAt paints live, with the header time `fresh`, rather than dimmed
+// Load this after ui-*.js, attach.js and toasts.js, and before the app-*.js files.
+window.BoardView = (function () {
+  const parts = [];
+  const part = (fn) => { parts.push(fn); };
+
+  // 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.
+  function storeFor(route) {
+    const keyOf = (k) => (/^(draft:(?!ask$)|qdraft:)/.test(k) ? k : `site:${route}:${k}`);
+    // The keys boards kept unprefixed move once, to the first board opened; a key whose new name is taken stays.
+    try {
+      const old = [];
+      for (let i = 0; i < localStorage.length; i++) old.push(localStorage.key(i));
+      for (const k of old.filter((k) => /^(openItems|wave|lanes|seenThreads|dismissedAnswers|draft:ask|foldOpen:.+)$/.test(k))) {
+        if (localStorage.getItem(keyOf(k)) != null) continue;
+        localStorage.setItem(keyOf(k), localStorage.getItem(k));
+        localStorage.removeItem(k);
+      }
+    } catch { /* no storage: nothing to move */ }
+    return {
+      get(k, d) { try { const v = localStorage.getItem(keyOf(k)); return v == null ? d : JSON.parse(v); } catch { return d; } },
+      set(k, v) { try { localStorage.setItem(keyOf(k), JSON.stringify(v)); } catch {} },
+    };
+  }
+
+  // What every view of one site shares: its ClaudeSite.site, a $ and $$ scoped to its root, and the recorders. Each
+  // recorder returns a function that undoes what it added, and stop() runs every one still pending, so a view adds
+  // listeners, intervals, timers, watches and unmount steps only through them. Before start() and after
+  // stop() they add nothing. B.sleep(ms) resolves after ms, and never once the view is gone, so a retry loop stops.
+  function base(root, siteRoot) {
+    const site = ClaudeSite.site(siteRoot);
+    const route = new URL(site.url('')).pathname.replace(/^\/+|\/+$/g, '');
+    // attach.js uploads each composer's files to the site of the [data-site] around it.
+    root.dataset.site = site.root;
+    let alive = false;
+    const undo = new Set();
+    const own = (off) => { undo.add(off); return () => { undo.delete(off); off(); }; };
+    const on = (target, type, fn, opts) => {
+      if (!alive || !target) return () => {};
+      target.addEventListener(type, fn, opts);
+      return own(() => target.removeEventListener(type, fn, opts));
+    };
+    const every = (ms, fn) => {
+      if (!alive) return () => {};
+      const t = setInterval(fn, ms);
+      return own(() => clearInterval(t));
+    };
+    const later = (ms, fn) => {
+      if (!alive) return () => {};
+      const off = () => clearTimeout(t);
+      const t = setTimeout(() => { undo.delete(off); fn(); }, ms);
+      return own(off);
+    };
+    const sleep = (ms) => new Promise((resolve) => { later(ms, resolve); });
+    const watch = (fn, opts) => {
+      if (!alive) return null;
+      const w = site.watch(fn, opts);
+      own(() => w.stop());
+      return w;
+    };
+    const atUnmount = (fn) => { if (alive) own(fn); };
+    const $ = (s, el = root) => el.querySelector(s);
+    const $$ = (s, el = root) => el.querySelectorAll(s);
+    let toasts = null;
+    const toast = (text) => {
+      if (!alive) return;
+      if (!toasts) {
+        toasts = BoardToasts.create(root);
+        own(() => { toasts.destroy(); toasts = null; });
+      }
+      toasts.toast(text);
+    };
+    const B = { root, site, route, toast, $, $$, on, every, later, sleep, watch, atUnmount, alive: () => alive, own: (off) => (alive ? own(off) : off()) };
+    return {
+      B,
+      start() { alive = true; },
+      stop() {
+        alive = false;
+        for (const off of [...undo]) off();
+        undo.clear();
+      },
+    };
+  }
+
+  function create(root, siteRoot, opts = {}) {
+    const { B, start: begin, stop } = base(root, siteRoot);
+    const store = storeFor(B.route);
+    // board is the last /api/board; githubPending the time of a refresh's unanswered check-github request; fresh the
+    // header's time, ui-header.js nextFresh's {at, sig}; edits each open edit box by its message's event id,
+    // {thread, data, text}, data being what ask-edited sends besides the text.
+    const state = {
+      board: null,
+      fresh: null,
+      openItems: new Set(store.get('openItems', [])),
+      threadCache: new Map(),
+      withdrawnAsks: new Set(),
+      edits: new Map(),
+      githubPending: null,
+      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 });
+
+    function mount() {
+      if (B.alive()) return;
+      begin();
+      for (const p of parts) p(B);
+      start(B);
+    }
+    return { B, mount, unmount: stop };
+  }
+
+  // A view other than the board: run(B) adds what it needs through B's recorders when the view mounts.
+  // → {B, mount, unmount}
+  function page(root, siteRoot, run) {
+    const { B, start: begin, stop } = base(root, siteRoot);
+    return {
+      B,
+      mount() { if (B.alive()) return; begin(); run(B); },
+      unmount: stop,
+    };
+  }
+
+  // The board itself, after every part: rendering, the #item= hash, loading and the change signal.
+  function start(B) {
+    const { $, $$, store, state, steady, markSeen } = B;
+    const { setHTML, preloadKeys } = BoardUI;
+
+    // Renders open threads from state.threadCache; loadBoard and opening a card load them.
+    function render() {
+      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.renderWaves(d);
+        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main));
+        const live = d.items.filter((i) => !state.withdrawnAsks.has(i.id));
+        const shown = state.waveFilter ? live.filter((i) => i.wave === state.waveFilter) : live;
+        for (const el of $$('details.item[open]')) state.openItems.add(el.dataset.key);
+        for (const it of d.items) if (!it.isNew) markSeen(it, !state.openItems.has(it.key));
+        // An open card's thread is renderThread's (app-threads.js), so a lane repaint leaves it as it is.
+        setHTML($('#lanes'), B.lanesHtml(d, shown), { keep: '[data-thread]' });
+        for (const key of state.openItems) if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
+        B.renderNeeds(d);
+        B.renderBanner(d);
+      });
+      B.flashChanged();
+    }
+
+    // #item=<wave>/<id> opens that card; push notifications link here, with &reply to land in the thread's reply box
+    // (docs/adr/0036-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
+    let focusKey = null;
+    let replyKey = null;
+    let hashRead = false;
+    function readHash() {
+      const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
+      if (!m) return;
+      focusKey = decodeURIComponent(m[1]);
+      focusKey = BoardUI.record(state.board?.moved, focusKey) || focusKey;
+      replyKey = m[2] ? focusKey : null;
+      state.openItems.add(focusKey);
+      const it = state.board?.items.find((i) => i.key === focusKey);
+      if (it) { const s = store.get('lanes', {}); s[it.lane] = true; store.set('lanes', s); }
+      if (it?.fold) store.set(B.FOLDS[it.fold].store, true);
+    }
+    B.on(window, 'hashchange', () => { readHash(); if (state.board) { render(); scrollToFocus(); } });
+    // A card link whose hash is already the page's fires no hashchange, so its tap opens the card here.
+    B.on(B.root, 'click', (ev) => {
+      const a = ev.target.closest?.('a[href^="#item="]');
+      if (!a || ev.defaultPrevented || a.getAttribute('href') !== location.hash || !state.board) return;
+      ev.preventDefault();
+      readHash(); render(); scrollToFocus();
+    });
+    // A card missing from the last visit's board waits for the fresh one, which is final.
+    function scrollToFocus(final = true) {
+      if (!focusKey) return;
+      const el = $(`details.item[data-key="${CSS.escape(focusKey)}"]`);
+      // The desktop header, or below 900px the status bar, would cover the card's title row.
+      if (el) {
+        el.style.scrollMarginTop = matchMedia('(min-width: 900px)').matches
+          ? `${($(':scope > .top')?.offsetHeight || 0) + 8}px` : 'calc(env(safe-area-inset-top) + 8px)';
+        el.scrollIntoView({ block: 'start' });
+      }
+      if (el && replyKey === focusKey) focusReply(replyKey);
+      if (el || final) focusKey = replyKey = null;
+    }
+    // The thread loads after the card opens, so its reply box is waited for, briefly. iOS shows no keyboard for a
+    // focus that no tap started, so the box is also brought into view: one tap on it then types.
+    function focusReply(key, tries = 20) {
+      const ta = $(`form[data-reply="${CSS.escape(key)}"] textarea`);
+      if (!ta) { if (tries > 0) B.later(150, () => focusReply(key, tries - 1)); return; }
+      ta.scrollIntoView({ block: 'center' });
+      ta.focus({ preventScroll: true });
+    }
+
+    // The last visit's board paints dimmed while the first load runs; it doesn't count as landed, so refresh keeps
+    // spinning, and the header's time is the snapshot's until a load lands (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+    // → true when it painted live (B.live), so the controls turn on at once.
+    function paintSnapshot() {
+      const snap = B.readSnapshot();
+      if (!snap) return false;
+      const live = Boolean(B.live) && snap.board?.generatedAt === B.live.generatedAt;
+      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');
+      readHash();
+      hashRead = true;
+      render();
+      scrollToFocus(false);
+      if (!live) B.holdForFlash();
+      return live;
+    }
+
+    // The first load takes over app.html's BoardBoot fetches, so only the first view mounted takes them, and only for
+    // its own board. Each load fetches the open cards' threads beside the
+    // board. via is ui-header.js nextFresh's: a refresh or a change signal fetches every open thread anew rather than
+    // share a load that started before the change.
+    let boot = globalThis.BoardBoot || null;
+    globalThis.BoardBoot = null;
+    if (boot?.route && boot.route !== B.route) boot = null;
+    let preloaded = false;
+    async function loadBoard({ via = 'poll' } = {}) {
+      const started = boot;
+      boot = null;
+      const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
+      let landed = false;
+      try {
+        const board = await (started?.board || fetch(B.site.url('api/board'), { cache: 'no-store' })
+          .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
+        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();
+        landed = true;
+        if (!preloaded) {
+          preloaded = true;
+          for (const key of preloadKeys(board.items, state.openItems)) B.loadThread(key);
+        }
+      } catch (e) {
+        B.linkDown();
+      }
+      await Promise.all(threads);
+      if (landed) B.landed(via);
+      if (state.view === 'fresh') B.endFlash();
+    }
+
+    // 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;
+    let reloadAgain = false;
+    let signalMissed = false;
+    function signalled() {
+      if (document.hidden) { signalMissed = true; return; }
+      if (reloading) { reloadAgain = true; return; }
+      reloading = loadBoard({ via: 'signal' }).finally(() => {
+        reloading = null;
+        if (reloadAgain) { reloadAgain = false; signalled(); }
+      });
+    }
+
+    Object.assign(B, { render, loadBoard });
+    const live = paintSnapshot();
+    B.headerWired();
+    if (live) B.linkUp();
+    const sent = BoardUI.sentNotice.take(B.route);
+    if (sent) B.toast(sent);
+    B.on(document, 'visibilitychange', () => {
+      if (document.hidden) return;
+      if (signalMissed) { signalMissed = false; signalled(); } else loadBoard();
+    });
+    loadBoard();
+    B.signal?.(signalled);
+    B.every(30000, () => { if (!document.hidden) { loadBoard(); } });
+  }
+
+  function markup({ title = '' } = {}) {
+    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png' })}
+<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="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>
+<dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
+  <form id="askForm" data-composer="ask">
+    <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
+    <textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>
+    <div class="pending-files" data-files></div>
+    <div class="row">
+      <span class="muted small" id="askStatus"></span>
+      <button type="submit" class="primary">Send</button>
+    </div>
+  </form>
+</dialog>
+<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>
+    <div id="linksList"></div>
+  </div>
+</dialog>`;
+  }
+
+  return { part, create, page, markup };
+})();

package/board/public/attach.js

@@ -0,0 +1,84 @@
+// Files attached to a composer: any element with data-composer="<id>" holding BoardUI.attachButton()
+// and a [data-files] list. Picking files uploads them at once to the api/upload of the site named by the nearest
+// [data-site] around the composer (a board view's root, app.js), else of the page's own site (ClaudeSite). Pending
+// files live in memory by site and composer id, so a page that rebuilds its markup calls paintAll() to show them
+// again, and a board the app shell switches away from keeps its own. site defaults to the page's own below.
+//   BoardAttach.files(id, site)  the uploaded files, ready for an event's data.files
+//   BoardAttach.busy(id, site)   true while any upload is running
+//   BoardAttach.clear(id, site)  after sending
+//   BoardAttach.onChange(fn)     fn(id) after each change, such as to disable Send while busy; each composer
+//                                painted also gets a bubbling attach-change event with detail {id}
+window.BoardAttach = (function () {
+  const LIMIT = 20 * 1024 * 1024;
+  const state = new Map();
+  const listeners = [];
+  let seq = 0;
+  const own = () => ClaudeSite.root;
+  const siteOf = (el) => el.closest('[data-site]')?.dataset.site || own();
+  const keyOf = (site, id) => `${site}|${id}`;
+  const list = (site, id) => state.get(keyOf(site, id)) || [];
+  const composers = (site, id) => [...document.querySelectorAll(`[data-composer="${CSS.escape(id)}"]`)].filter((c) => siteOf(c) === site);
+
+  function paint(id, site = own()) {
+    for (const c of composers(site, id)) {
+      const el = c.querySelector('[data-files]');
+      if (el) el.innerHTML = BoardUI.pendingFiles(list(site, id));
+      c.dispatchEvent(new CustomEvent('attach-change', { bubbles: true, detail: { id } }));
+    }
+    for (const fn of listeners) fn(id);
+  }
+  const paintAll = () => { for (const c of document.querySelectorAll('[data-composer]')) paint(c.dataset.composer, siteOf(c)); };
+
+  function upload(site, id, file) {
+    const p = { id: 'f' + ++seq, name: file.name || 'file', type: file.type || 'application/octet-stream', status: 'uploading', progress: 0 };
+    if (/^image\//.test(p.type)) p.preview = URL.createObjectURL(file);
+    state.set(keyOf(site, id), [...list(site, id), p]);
+    if (file.size > LIMIT) { p.status = 'error'; p.error = 'Over 20 MB'; paint(id, site); return; }
+    paint(id, site);
+    const xhr = new XMLHttpRequest();
+    p.xhr = xhr;
+    xhr.open('POST', `${site}/api/upload`);
+    xhr.setRequestHeader('x-filename', encodeURIComponent(p.name));
+    xhr.setRequestHeader('content-type', p.type);
+    xhr.upload.onprogress = (e) => { if (e.lengthComputable) { p.progress = e.loaded / e.total; paint(id, site); } };
+    xhr.onload = () => {
+      let body = null;
+      try { body = JSON.parse(xhr.responseText); } catch {}
+      if (xhr.status === 200 && body) { p.status = 'done'; p.file = body; }
+      else { p.status = 'error'; p.error = xhr.status === 413 ? 'Over 20 MB' : (body && body.error) || 'Upload failed'; }
+      paint(id, site);
+    };
+    xhr.onerror = () => { p.status = 'error'; p.error = 'Upload failed'; paint(id, site); };
+    xhr.send(file);
+  }
+
+  function remove(site, id, fileId) {
+    const p = list(site, id).find((x) => x.id === fileId);
+    if (!p) return;
+    if (p.status === 'uploading') p.xhr.abort();
+    if (p.preview) URL.revokeObjectURL(p.preview);
+    state.set(keyOf(site, id), list(site, id).filter((x) => x !== p));
+    paint(id, site);
+  }
+
+  document.addEventListener('change', (ev) => {
+    const input = ev.target.closest && ev.target.closest('input[data-attach]');
+    const c = input && input.closest('[data-composer]');
+    if (!c) return;
+    for (const f of input.files) upload(siteOf(c), c.dataset.composer, f);
+    input.value = '';
+  });
+  document.addEventListener('click', (ev) => {
+    const b = ev.target.closest && ev.target.closest('[data-unattach]');
+    const c = b && b.closest('[data-composer]');
+    if (c) { ev.preventDefault(); remove(siteOf(c), c.dataset.composer, b.dataset.unattach); }
+  });
+
+  return {
+    files: (id, site = own()) => list(site, id).filter((p) => p.status === 'done').map((p) => p.file),
+    busy: (id, site = own()) => list(site, id).some((p) => p.status === 'uploading'),
+    clear(id, site = own()) { for (const p of list(site, id)) if (p.preview) URL.revokeObjectURL(p.preview); state.delete(keyOf(site, id)); paint(id, site); },
+    onChange(fn) { listeners.push(fn); },
+    paint, paintAll,
+  };
+})();