@lovek4d/kickflip 0.1.0 → 0.4.0

package/board/public/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-build="{{build}}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
@@ -41,6 +41,9 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/ui.js"></script>
 <script src="/_hub/app/ui-links.js"></script>
 <script src="/_hub/app/ui-enums.js"></script>
+<script src="/_hub/app/ui-phase-bars.js"></script>
+<script src="/_hub/app/ui-order.js"></script>
+<script src="/_hub/app/ui-patch.js"></script>
 <script src="/_hub/app/ui-threads.js"></script>
 <script src="/_hub/app/ui-cards.js"></script>
 <script src="/_hub/app/ui-header.js"></script>
@@ -58,6 +61,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/claude.js"></script>
 <script src="/_hub/app/attach.js"></script>
 <script src="/_hub/app/hub-kit.js"></script>
+<script src="/_hub/app/linear-key.js"></script>
 <script src="/_hub/app/sidebar.js"></script>
 <script src="/_hub/app/app.js"></script>
 <script src="/_hub/app/app-core.js"></script>
@@ -67,6 +71,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/app-asks.js"></script>
 <script src="/_hub/app/app-needs.js"></script>
 <script src="/_hub/app/app-header.js"></script>
+<script src="/_hub/app/app-arch.js"></script>
 <script src="/_hub/app/app-banner.js"></script>
 <script src="/_hub/app/app-snapshot.js"></script>
 <script src="/_hub/app/view-settings.js"></script>
@@ -74,7 +79,6 @@ window.BoardBoot = (function () {
 <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>

package/board/public/app.js

@@ -3,8 +3,9 @@
 // and mount() runs the parts in load order, then renders the board from /api/board and per-item threads from
 // /api/thread. Actions go out as events through B.site.send (each wakes Claude). Parts add listeners, intervals,
 // timers, watches and unmount steps only through B.on, B.every, B.later, B.watch and B.atUnmount, so unmount() undoes
-// them all and no board's state outlives its view. BoardView.markup({title}) is the root's inner
-// HTML. BoardView.page(root, site, run) gives a board's other views (view-*.js) the same site, $ and recorders.
+// them all and no board's state outlives its view but what B.keep keeps for its next mount in this page.
+// BoardView.markup({title}) is the root's inner HTML. BoardView.page(root, site, run) gives a board's other views
+// (view-*.js) the same site, $ and recorders.
 // opts, both from the app shell (shell.js):
 //   signal(fn) → off   calls fn on each change signal for this board, from the hub's one stream
 //   live {fresh, generatedAt}
@@ -14,6 +15,9 @@
 window.BoardView = (function () {
   const parts = [];
   const part = (fn) => { parts.push(fn); };
+  // route → what a board's view kept as it unmounted, which its next mount in this page reads as B.place. A reload
+  // starts with none.
+  const places = new Map();
 
   // Every board shares the hub's one origin, so each keeps its keys under site:<route>:; app.html's preload reads
   // openItems by the same key. Thread and question drafts are already per card and keep their own keys.
@@ -105,13 +109,21 @@ window.BoardView = (function () {
       fresh: null,
       openItems: new Set(store.get('openItems', [])),
       threadCache: new Map(),
-      withdrawnAsks: new Set(),
       edits: new Map(),
       githubPending: null,
-      waveFilter: store.get('wave', null),
+      // Main's refresh icon (ui-cards.js mainPull): a tap waiting on the server, and the failed pull's reason open on touch.
+      mainPull: { sending: false, open: false },
+      // The Done cards Show more paged in from the archive past the board's own (app-lanes.js), and how many older ones
+      // the archive holds past them, null before the first page.
+      archived: { cards: [], left: null },
     };
     const signal = opts.signal ? (fn) => { if (B.alive()) B.own(opts.signal(fn)); } : null;
-    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause });
+    // B.keep(fn): a part adds fn() → {…} to what the board keeps as it unmounts, read before any part's unmount step.
+    const keepers = [];
+    const keep = (fn) => { if (B.alive()) keepers.push(fn); };
+    const place = places.get(B.route) || null;
+    places.delete(B.route);
+    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, away: opts.away, place, keep });
 
     function mount() {
       if (B.alive()) return;
@@ -119,7 +131,12 @@ window.BoardView = (function () {
       for (const p of parts) p(B);
       start(B);
     }
-    return { B, mount, unmount: stop };
+    function unmount() {
+      if (B.alive()) places.set(B.route, Object.assign({}, ...keepers.map((fn) => fn())));
+      keepers.length = 0;
+      stop();
+    }
+    return { B, mount, unmount };
   }
 
   // A view other than the board: run(B) adds what it needs through B's recorders when the view mounts.
@@ -139,34 +156,41 @@ window.BoardView = (function () {
     const { setHTML, preloadKeys } = BoardUI;
 
     // Renders open threads from state.threadCache; loadBoard and opening a card load them.
-    function render() {
+    function render(load = null) {
       const d = state.board;
       const title = $(':scope > .top h1');
       if (d.title && title && title.textContent !== d.title) title.textContent = d.title;
       if (d.title && document.title !== d.title) document.title = d.title;
       steady(() => {
         B.renderHeader(d);
-        B.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;
+        B.renderArch(d);
+        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main, state.mainPull));
+        B.renderMainLog(d.main, load);
         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]' });
+        const strips = B.captureStrips();
+        setHTML($('#lanes'), B.lanesHtml(d, d.items), { keep: '[data-thread]' });
         for (const key of state.openItems) if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
+        B.moveStrips(d.items, strips);
         B.renderNeeds(d);
         B.renderBanner(d);
       });
       B.flashChanged();
+      B.signCards(load);
     }
 
+    // #review=<PR number> opens that review in the Auto Review lane (app-lanes.js openReview), as a held review's push does.
     // #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.
+    // (docs/adr/2026-10-29-1639-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|review)=/.test(location.hash) });
     function readHash() {
+      const review = /^#review=(\d+)$/.exec(location.hash);
+      if (review && state.board) { B.openReview(Number(review[1])); return; }
       const m = /^#item=([^&]+)(&reply)?$/.exec(location.hash);
       if (!m) return;
       focusKey = decodeURIComponent(m[1]);
@@ -174,7 +198,7 @@ window.BoardView = (function () {
       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) { const s = store.get('lanes', {}); s[it.lane] = true; store.set('lanes', s); B.openBand({ key: focusKey }); }
       if (it?.fold) store.set(B.FOLDS[it.fold].store, true);
     }
     B.on(window, 'hashchange', () => { readHash(); if (state.board) { render(); scrollToFocus(); } });
@@ -208,7 +232,7 @@ window.BoardView = (function () {
     }
 
     // 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).
+    // spinning, and the header's time is the snapshot's until a load lands (docs/adr/2026-10-29-1639-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();
@@ -222,6 +246,7 @@ window.BoardView = (function () {
       hashRead = true;
       render();
       scrollToFocus(false);
+      returnToPlace();
       if (!live) B.holdForFlash();
       return live;
     }
@@ -235,26 +260,23 @@ window.BoardView = (function () {
     if (boot?.route && boot.route !== B.route) boot = null;
     let preloaded = false;
     async function loadBoard({ via = 'poll' } = {}) {
+      const load = B.boardLoad = (B.boardLoad || 0) + 1;
       const started = boot;
       boot = null;
       const threads = [...state.openItems].map((k) => B.loadThread(k, { from: started?.threads.get(k) || null, force: via !== 'poll' }));
       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();
+        // A reload names the version of the board on screen: an unchanged board answers 304 with no body
+        // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md), and a changed one a patch from it
+        // (docs/adr/2026-11-04-0332-the-board-sends-per-card-patches.md).
+        const tag = state.view === 'fresh' ? state.board.version : null;
+        const board = await (started?.board || fetch(B.site.url('api/board' + (tag ? '?since=' + encodeURIComponent(tag) : '')), { cache: 'no-store', ...(tag ? { headers: { 'if-none-match': `"${tag}"` } } : {}) })
+          .then((r) => (r.status === 304 ? null : r.ok ? r.json() : Promise.reject(new Error(`board ${r.status}`)))));
+        if (board) land(board, load); else B.linkUp();
         landed = true;
         if (!preloaded) {
           preloaded = true;
-          for (const key of preloadKeys(board.items, state.openItems)) B.loadThread(key);
+          for (const key of preloadKeys(state.board.items, state.openItems)) B.loadThread(key);
         }
       } catch (e) {
         B.linkDown();
@@ -264,8 +286,42 @@ window.BoardView = (function () {
       if (state.view === 'fresh') B.endFlash();
     }
 
+    // A board from the server, a load's or an events POST's, or a patch from the board on screen (ui-patch.js). One built
+    // before the board on screen leaves it as it is, so a slow load can't undo a newer one; a newer patch from a board
+    // no longer on screen, which another answer replaced meanwhile, reloads instead. → whether it landed
+    function land(answer, load) {
+      if (state.view === 'fresh' && state.board && answer.generatedAt < state.board.generatedAt) return false;
+      const board = answer.since === undefined ? answer : BoardUI.applyPatch(state.view === 'fresh' ? state.board : null, answer);
+      if (!board) { signalled(); return false; }
+      const first = state.view !== 'fresh';
+      state.board = board;
+      B.setView('fresh');
+      if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
+      B.linkUp();
+      render(load);
+      scrollToFocus();
+      returnToPlace();
+      B.site.syncBadge();
+      B.saveSnapshotSoon();
+      return true;
+    }
+
+    // An owner tap that saves something (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md): the events POST
+    // answers once the server has recorded the tap, with the board as the tap left it, which lands as a load of its own,
+    // so the tap needs no reload (docs/adr/2026-11-03-0500-every-owner-tap-the-server-can-apply-draws-at-once.md); it names
+    // the version on screen, so the answer is a patch from it. Nothing draws
+    // before that answer. answered() runs once it comes, before its board lands. A refusal throws, carrying the
+    // server's reason for failed.
+    async function send(kind, data, answered = null) {
+      const out = await B.site.send(kind, { ...data, ...(state.view === 'fresh' ? { since: state.board.version } : {}) });
+      if (!B.alive()) return out;
+      answered?.();
+      land(out.board, B.boardLoad = (B.boardLoad || 0) + 1);
+      return out;
+    }
+
     // 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).
+    // 30 s poll stays as the fallback and the offline check (docs/adr/2026-10-29-1639-the-board-reloads-on-a-change-signal.md).
     let reloading = null;
     let reloadAgain = false;
     let signalMissed = false;
@@ -278,7 +334,9 @@ window.BoardView = (function () {
       });
     }
 
-    Object.assign(B, { render, loadBoard });
+    // The toast for a tap the server refused, with its reason, or that never reached it.
+    const failed = (e) => B.toast(e?.reason || 'That didn’t go through. Is the host awake?');
+    Object.assign(B, { render, loadBoard, send, failed, reload: signalled });
     const live = paintSnapshot();
     B.headerWired();
     if (live) B.linkUp();
@@ -294,27 +352,50 @@ window.BoardView = (function () {
   }
 
   function markup({ title = '' } = {}) {
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png' })}
+    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true, moon: true })}
 <main>
   <section id="setup" class="setup" aria-live="polite" hidden></section>
   <section id="answers" class="answer-banner" hidden></section>
   <section id="waiting" class="waiting" hidden></section>
-  <div id="waves" class="waves"></div>
   <div id="tryMain"></div>
   <div id="lanes"></div>
 </main>
-<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
 <dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
   <form id="askForm" data-composer="ask">
     <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
-    <textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>
+    ${BoardUI.dropZone('<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="tk-seg ask-seg" role="group" aria-label="Before building"><button type="button" id="askDiscuss" aria-pressed="true">Discuss</button><button type="button" id="askQuick" aria-pressed="false">Quick build</button></div>
+    <p class="muted small ask-choice-help" id="askChoiceHelp" aria-live="polite"></p>
     <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>

package/board/public/attach.js

@@ -1,5 +1,7 @@
-// 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
+// docs/adr/2026-11-03-1722-every-text-box-attaches-through-attach-js.md
+// Files attached to a composer: any element with data-composer="<id>" holding BoardUI.attachButton(), its text box in
+// BoardUI.dropZone(), and a [data-files] list. Picking files, dropping them on the composer, or pasting them into it
+// 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.
@@ -65,9 +67,43 @@ window.BoardAttach = (function () {
     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);
+    addFiles(c, input.files);
     input.value = '';
   });
+  // A drag of files over a composer marks it .dragging, which outlines its drop zone. dragenter and dragleave fire on
+  // each child it crosses, so the composer counts them, and a drop ends the drag.
+  const depth = new WeakMap();
+  const composerOf = (ev) => (ev.target.closest && ev.target.closest('[data-composer]')) || null;
+  const carriesFiles = (ev) => [...(ev.dataTransfer?.types || [])].includes('Files');
+  const setDepth = (c, n) => { depth.set(c, n); c.classList.toggle('dragging', n > 0); };
+  const addFiles = (c, files) => { for (const f of files) upload(siteOf(c), c.dataset.composer, f); };
+  document.addEventListener('dragenter', (ev) => {
+    const c = composerOf(ev);
+    if (c && carriesFiles(ev)) setDepth(c, (depth.get(c) || 0) + 1);
+  });
+  document.addEventListener('dragleave', (ev) => {
+    const c = composerOf(ev);
+    if (c && depth.get(c)) setDepth(c, depth.get(c) - 1);
+  });
+  // A file drag is taken anywhere on the page, so a drop that misses every composer does nothing in place of the
+  // browser opening the file over the board.
+  document.addEventListener('dragover', (ev) => { if (carriesFiles(ev)) ev.preventDefault(); });
+  document.addEventListener('drop', (ev) => {
+    if (!carriesFiles(ev)) return;
+    ev.preventDefault();
+    const c = composerOf(ev);
+    if (!c) return;
+    setDepth(c, 0);
+    addFiles(c, ev.dataTransfer.files);
+  });
+  // A paste that carries files attaches them in place of pasting; a paste of text alone pastes as usual.
+  document.addEventListener('paste', (ev) => {
+    const c = composerOf(ev);
+    const files = [...(ev.clipboardData?.files || [])];
+    if (!c || !files.length) return;
+    ev.preventDefault();
+    addFiles(c, files);
+  });
   document.addEventListener('click', (ev) => {
     const b = ev.target.closest && ev.target.closest('[data-unattach]');
     const c = b && b.closest('[data-composer]');