@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/app.js

@@ -0,0 +1,438 @@
+// 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 but what B.keep keeps for its next mount in this page.
+// BoardView.markup({title}) is the root's inner HTML. BoardView.page(root, site, run) gives a board's other views
+// (view-*.js) the same site, $ and recorders.
+// opts, both from the app shell (shell.js):
+//   signal(fn) → off   calls fn on each change signal for this board, from the hub's one stream
+//   live {fresh, generatedAt}
+//                      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); };
+  // route → what a board's view kept as it unmounted, which its next mount in this page reads as B.place. A reload
+  // starts with none.
+  const places = new Map();
+
+  // Every board shares the hub's one origin, so each keeps its keys under site:<route>:; app.html's preload reads
+  // openItems by the same key. Thread and question drafts are already per card and keep their own keys.
+  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;
+    // B.keep(fn): a part adds fn() → {…} to what the board keeps as it unmounts, read before any part's unmount step.
+    const keepers = [];
+    const keep = (fn) => { if (B.alive()) keepers.push(fn); };
+    const place = places.get(B.route) || null;
+    places.delete(B.route);
+    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, place, keep });
+
+    function mount() {
+      if (B.alive()) return;
+      begin();
+      for (const p of parts) p(B);
+      start(B);
+    }
+    function unmount() {
+      if (B.alive()) places.set(B.route, Object.assign({}, ...keepers.map((fn) => fn())));
+      keepers.length = 0;
+      stop();
+    }
+    return { B, mount, unmount };
+  }
+
+  // A view other than the board: run(B) adds what it needs through B's recorders when the view mounts.
+  // → {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(load = null) {
+      const d = state.board;
+      const title = $(':scope > .top h1');
+      if (d.title && title && title.textContent !== d.title) title.textContent = d.title;
+      if (d.title && document.title !== d.title) document.title = d.title;
+      steady(() => {
+        B.renderHeader(d);
+        B.renderArch(d);
+        B.renderWaves(d);
+        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main));
+        B.renderMainLog(d.main, load);
+        const live = d.items.filter((i) => !state.withdrawnAsks.has(i.id));
+        const shown = state.waveFilter ? live.filter((i) => i.wave === state.waveFilter || i.lineup?.slug === state.waveFilter) : live;
+        for (const el of $$('details.item[open]')) state.openItems.add(el.dataset.key);
+        for (const it of d.items) if (!it.isNew) markSeen(it, !state.openItems.has(it.key));
+        // An open card's thread is renderThread's (app-threads.js), so a lane repaint leaves it as it is.
+        setHTML($('#lanes'), B.lanesHtml(d, shown), { keep: '[data-thread]' });
+        for (const key of state.openItems) if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
+        B.renderNeeds(d);
+        B.renderBanner(d);
+      });
+      paintFades();
+      B.flashChanged();
+      B.signCards(load);
+    }
+
+    // #item=<wave>/<id> opens that card; push notifications link here, with &reply to land in the thread's reply box
+    // (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;
+    // A board this page left goes back to where the owner left it once it first renders, unless its URL names a card.
+    const returnToPlace = () => B.restorePlace({ linked: /^#item=/.test(location.hash) });
+    function readHash() {
+      const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
+      if (!m) return;
+      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;
+      served = state.board = snap.board;
+      for (const [key, msgs] of Object.entries(snap.threads)) state.threadCache.set(key, msgs);
+      state.fresh = live ? B.live.fresh : { at: snap.savedAt, sig: null };
+      B.setView(live ? 'fresh' : 'snapshot');
+      readHash();
+      hashRead = true;
+      render();
+      scrollToFocus(false);
+      returnToPlace();
+      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 load = B.boardLoad = (B.boardLoad || 0) + 1;
+      const started = boot;
+      boot = null;
+      const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
+      let landed = false;
+      try {
+        const board = await (started?.board || fetch(B.site.url('api/board'), { cache: 'no-store' })
+          .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
+        land(board, load);
+        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();
+    }
+
+    // A board from the server, a load's or an events POST's, with the taps still in flight drawn over it. One built
+    // before the board on screen leaves it as it is, so a slow load can't undo a newer one. → whether it landed
+    let served = null;
+    const drawing = new Set();
+    const drawn = () => [...drawing].reduce((board, draw) => draw(board), served);
+    function land(board, load) {
+      if (state.view === 'fresh' && served && board.generatedAt < served.generatedAt) return false;
+      const first = state.view !== 'fresh';
+      served = board;
+      state.board = drawn();
+      B.setView('fresh');
+      if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
+      B.linkUp();
+      render(load);
+      scrollToFocus();
+      returnToPlace();
+      B.site.syncBadge();
+      B.saveSnapshotSoon();
+      return true;
+    }
+    function undraw(draw) {
+      drawing.delete(draw);
+      state.board = drawn();
+      render();
+    }
+
+    // An owner tap (docs/adr/0151-every-owner-tap-the-server-can-apply-draws-at-once.md): the events POST answers with
+    // the board as the tap left it, which lands as a load of its own, so the tap needs no reload. draw(board) → board is
+    // what the tap changes when its result follows from the tap alone: the page draws it before the POST and keeps it
+    // over every board that lands until the POST settles; a failed POST takes it back off and throws.
+    async function send(kind, data, draw = null) {
+      if (draw) {
+        drawing.add(draw);
+        state.board = drawn();
+        render();
+      }
+      let out;
+      try { out = await B.site.send(kind, data); }
+      catch (e) {
+        if (draw && B.alive()) undraw(draw);
+        throw e;
+      }
+      drawing.delete(draw);
+      // A board newer than the POST's already holds the tap.
+      if (B.alive() && !land(out.board, B.boardLoad = (B.boardLoad || 0) + 1) && draw) undraw(draw);
+      return out;
+    }
+    // A draw that changes the item with that key, the board's order kept as the server sorts it.
+    const drawItem = (key, change) => (board) => ({ ...board, items: board.items.map((i) => (i.key === key ? change({ ...i }) : i)).sort(BoardUI.laneOrder) });
+
+    // The bump icon's fill fades in as a tap bumps a card and out as one unbumps it, on a toast's timing (toasts.js), and
+    // keeps fading through any redraw meanwhile. selector names the icon.
+    const fades = new Map();
+    function paintFades() {
+      for (const [selector, { name, ms }] of fades) {
+        const icon = $(selector);
+        if (!icon) continue;
+        icon.classList.add(name);
+        icon.style.setProperty('--bump-fade', `${ms}ms`);
+      }
+    }
+    function fadeBump(selector, on) {
+      const fade = { name: on ? 'bump-in' : 'bump-out', ms: on ? BoardToasts.enterTime() : BoardToasts.exitTime() };
+      $(selector)?.classList.remove('bump-in', 'bump-out');
+      fades.set(selector, fade);
+      paintFades();
+      B.later(fade.ms, () => {
+        if (fades.get(selector) !== fade) return;
+        fades.delete(selector);
+        $(selector)?.classList.remove(fade.name);
+      });
+    }
+
+    // The server signals each change to what the board reads, through the shell, and the board reloads at once; the
+    // 30 s poll stays as the fallback and the offline check (docs/adr/0031-the-board-reloads-on-a-change-signal.md).
+    let reloading = null;
+    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(); }
+      });
+    }
+
+    // The toast for a tap drawn at once whose POST failed, as the page takes the drawing back off.
+    const FAILED = 'That didn’t go through. Is the host awake?';
+    Object.assign(B, { render, loadBoard, send, drawItem, fadeBump, reload: signalled, FAILED });
+    const live = paintSnapshot();
+    B.headerWired();
+    if (live) B.linkUp();
+    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', bulb: true })}
+<main>
+  <section id="setup" class="setup" aria-live="polite" hidden></section>
+  <section id="answers" class="answer-banner" hidden></section>
+  <section id="waiting" class="waiting" hidden></section>
+  <div id="waves"></div>
+  <div id="tryMain"></div>
+  <div id="lanes"></div>
+</main>
+<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+<dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
+  <form id="askForm" data-composer="ask">
+    <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
+    <textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>
+    <div class="pending-files" data-files></div>
+    <div class="row">
+      <span class="muted small" id="askStatus"></span>
+      <button type="submit" class="primary">Send</button>
+    </div>
+  </form>
+</dialog>
+<dialog id="mainLogSheet" class="sheet" aria-labelledby="mainLogTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="mainLogTitle"></h2><button type="button" class="ghost" id="mainLogClose" aria-label="Close">✕</button></div>
+    <p id="mainLogSource" class="main-log-source muted small"></p>
+    <pre id="mainLogLines" class="main-log-lines" tabindex="0" aria-label="Main’s build log"></pre>
+    <p id="mainLogReason" class="small" role="status" hidden></p>
+    <div class="main-log-actions"><button type="button" class="primary" id="mainLogRetry">Retry</button></div>
+  </div>
+</dialog>
+<dialog id="holdSheet" class="sheet hold-sheet" aria-labelledby="holdTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="holdTitle" tabindex="-1"></h2><button type="button" class="ghost" id="holdClose" aria-label="Close">✕</button></div>
+    <p id="holdLede" class="hold-lede muted"></p>
+    <div id="holdPicker"></div>
+  </div>
+</dialog>
+<dialog id="archSheet" class="sheet arch-sheet" aria-labelledby="archTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="archTitle">Architecture review</h2><button type="button" class="ghost" id="archClose" aria-label="Close sheet">✕</button></div>
+    <div id="archBody" class="arch-body"></div>
+  </div>
+</dialog>
+<dialog id="linksSheet" class="sheet" aria-labelledby="linksTitle">
+  <div class="sheet-body">
+    <div class="sheet-head"><h2 id="linksTitle">Hub links</h2><button type="button" class="ghost" id="linksClose" aria-label="Close">✕</button></div>
+    <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,
+  };
+})();