@lovek4d/kickflip 0.3.1 → 0.4.0

package/board/public/app.js

@@ -109,10 +109,13 @@ 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;
     // B.keep(fn): a part adds fn() → {…} to what the board keeps as it unmounts, read before any part's unmount step.
@@ -120,7 +123,7 @@ window.BoardView = (function () {
     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 });
+    Object.assign(B, { store, state, signal, live: opts.live || null, pause: opts.pause, away: opts.away, place, keep });
 
     function mount() {
       if (B.alive()) return;
@@ -161,32 +164,33 @@ window.BoardView = (function () {
       steady(() => {
         B.renderHeader(d);
         B.renderArch(d);
-        B.renderWaves(d);
-        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main));
+        BoardUI.setHTML($('#tryMain'), BoardUI.mainBar(d.main, state.mainPull));
         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]' });
+        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);
       });
-      paintFades();
       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=/.test(location.hash) });
+    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]);
@@ -194,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(); } });
@@ -228,13 +232,13 @@ 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();
       if (!snap) return false;
       const live = Boolean(B.live) && snap.board?.generatedAt === B.live.generatedAt;
-      served = state.board = snap.board;
+      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');
@@ -262,13 +266,17 @@ window.BoardView = (function () {
       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);
+        // 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();
@@ -278,16 +286,15 @@ window.BoardView = (function () {
       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;
+    // 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';
-      served = board;
-      state.board = drawn();
+      state.board = board;
       B.setView('fresh');
       if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
       B.linkUp();
@@ -298,61 +305,23 @@ window.BoardView = (function () {
       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);
+    // 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;
     }
-    // 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).
+    // 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;
@@ -365,9 +334,9 @@ window.BoardView = (function () {
       });
     }
 
-    // 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 });
+    // 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();
@@ -383,12 +352,11 @@ window.BoardView = (function () {
   }
 
   function markup({ title = '' } = {}) {
-    return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true })}
+    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"></div>
   <div id="tryMain"></div>
   <div id="lanes"></div>
 </main>
@@ -396,8 +364,10 @@ window.BoardView = (function () {
 <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>

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]');

package/board/public/dialogs.js

@@ -1,18 +1,56 @@
 // Every confirmation and notice is the browser's own window.confirm or window.alert; no page imitates a native dialog.
-// Load before any page script that asks (docs/adr/0146-confirmations-are-the-browsers-own.md).
+// Load before any page script that asks (docs/adr/2026-11-03-0259-confirmations-are-the-browsers-own.md).
 (function () {
   // linear: Hub's /_hub/api/linear answer, else loadLinear() fetches it once Linear is the source. Linear is picked only
-  // while Hub's key works; tapping it without one opens Hub's key modal over the page (linear-key.js,
-  // docs/adr/0117-a-board-picks-linear-only-while-hubs-key-works.md). A New board's "New project…" reads as
+  // while Hub's key works; tapping it without one opens Hub's key modal over the page, or with keyState the key field
+  // inline (linear-key.js,
+  // docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A New board's "New project…" reads as
   // new_project, which the hub creates on Start; Board Settings creates it with createProject. change(value, valid,
   // {loaded, typing}) follows each change: loaded when only Linear's lists arrived, typing while a text field is being typed in.
   // GitHub issues needs repo(), the board's GitHub owner/name: without one, as on a board whose repo is another git
-  // remote, it can't be picked and says why (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
-  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject } = {}) {
+  // remote, it can't be picked and says why (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
+  // With keyState(), Hub's /_hub/api/settings `linear`, as Board Settings passes it, the source row reads its live state
+  // as a status word, and Linear tapped without a working key opens Hub's key field in keySlot, an element outside any
+  // form, since the key field is a form of its own; keyBusy(on) follows each save of the key
+  // (docs/adr/2026-11-04-0227-every-new-card-gets-a-ticket-in-the-boards-current-source.md).
+  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject, keyState, keySlot, keyBusy = () => {} } = {}) {
     const { esc } = BoardUI;
     const draft = { prefix: 'INT', ...value };
-    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false;
+    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false, key = null, inline = null;
     const works = () => Boolean(linear?.set && !linear.refused);
+    const keyWorks = () => Boolean(key?.set && !key.refused);
+    const keyWord = () => (keyWorks() ? 'linear key saved' : key.refused ? 'Linear refused the key' : 'no Linear key');
+    const statusWord = () => (draft.source === 'linear' && keyWorks() ? 'linear · connected' : `${draft.source} · ${keyWord()}`);
+    function status() {
+      if (!key) return '';
+      const on = draft.source === 'linear' && keyWorks();
+      return `<div class="tk-status${on ? ' on' : ''}" data-tk-status role="status"><span class="dot" aria-hidden="true"></span><b>${esc(statusWord())}</b></div>`;
+    }
+    // Hub's key field in keySlot. Once a key works, Linear is picked.
+    function openInline() {
+      if (!inline) {
+        keySlot.innerHTML = '<p class="tk-ask">Linear needs a key. Paste one here.</p><div class="hub-view"><main></main></div>';
+        inline = LinearKey.mount(keySlot.querySelector('main'), { linear: key, busy: keyBusy,
+          saved: (out) => { key = out.linear; render(); },
+          worked: async () => {
+            closeInline();
+            draft.source = 'linear';
+            await load();
+            if (destroyed) return;
+            pickDefaults();
+            render(); root.querySelector('[data-tk-source="linear"]').focus(); change(read(), valid());
+          } });
+        keySlot.hidden = false;
+      }
+      keySlot.querySelector('#linearKey')?.focus({ preventScroll: true });
+    }
+    function closeInline() {
+      if (!inline) return;
+      inline.destroy();
+      inline = null;
+      keySlot.hidden = true;
+      keySlot.innerHTML = '';
+    }
     async function load() {
       linear = { loading: true };
       render();
@@ -49,7 +87,7 @@
       const note = draft.project === '__new'
         ? (isNew ? `<p class="muted small">Start creates the project in the ${team} team on Linear.</p>` : `<p class="muted small">Creates the project in the ${team} team on Linear.</p>`)
         : `<p class="muted small">A new card gets a ${team} issue in ${esc(project?.name || draft.project || '')}, in the ${esc(linear.workspace || workspace())} workspace from Hub’s key. Its badge opens it in Linear.</p>`;
-      return `<div class="tk-grid"><label class="tk-field"><span>Team</span><select data-tk="team">${(linear.teams || []).map((t) => `<option value="${esc(t.key)}"${t.key === draft.team ? ' selected' : ''}>${esc(t.key)} · ${esc(t.name)}</option>`).join('')}</select></label><label class="tk-field"><span>Project</span><select data-tk="project">${(linear.projects || []).filter((p) => p.team === draft.team).map((p) => `<option value="${esc(p.id)}"${p.id === draft.project ? ' selected' : ''}>${esc(p.name)}</option>`).join('')}<option value="__new"${draft.project === '__new' ? ' selected' : ''}>New project…</option></select></label></div>${draft.project === '__new' ? `<div class="tk-new"><input data-tk="newName" value="${esc(draft.newName ?? title())}" aria-label="New Linear project name" placeholder="Project name" maxlength="80" autocomplete="off">${isNew ? '' : `<button type="button" data-tk-create${creating ? ' disabled' : ''}>${creating ? 'Creating…' : 'Create'}</button>`}</div>` : ''}${createError ? `<p class="muted small" role="alert">${esc(createError)}</p>` : ''}${note}`;
+      return `<div class="tk-grid"><label class="tk-field"><span>Team</span><select data-tk="team">${(linear.teams || []).map((t) => `<option value="${esc(t.key)}"${t.key === draft.team ? ' selected' : ''}>${esc(t.key)} · ${esc(t.name)}</option>`).join('')}</select></label><label class="tk-field"><span>Project</span><select data-tk="project">${(linear.projects || []).filter((p) => p.team === draft.team).map((p) => `<option value="${esc(p.id)}"${p.id === draft.project ? ' selected' : ''}>${esc(p.name)}</option>`).join('')}<option value="__new"${draft.project === '__new' ? ' selected' : ''}>New project…</option></select></label></div>${draft.project === '__new' ? `<div class="tk-new"><input data-tk="newName" value="${esc(draft.newName ?? title())}" aria-label="New Linear project name" placeholder="Project name" maxlength="80" autocomplete="off">${isNew ? '' : `<button type="button" data-tk-create${creating ? BoardUI.BUSY : ''}>Create</button>`}</div>` : ''}${createError ? `<p class="muted small" role="alert">${esc(createError)}</p>` : ''}${note}`;
     }
     function render() {
       const off = !repo();
@@ -60,7 +98,7 @@
       else if (draft.source === 'internal') detail = `<label class="tk-field"><span>Prefix</span><input data-tk="prefix" value="${esc(draft.prefix)}" placeholder="INT" maxlength="6" pattern="[A-Z]{2,6}" title="2–6 uppercase letters" autocapitalize="characters" autocomplete="off" spellcheck="false"></label><p class="muted small" data-tk-example>Cards number ${esc(draft.prefix || 'INT')}-1, ${esc(draft.prefix || 'INT')}-2… on this board. The badge opens the card.</p>`;
       else if (draft.source === 'github') detail = `<div class="who tk-static"><span>Issues in ${esc(repo())}<span class="muted small sub">${isNew ? 'The repo chosen above' : 'The board’s repo, set above'}. A new card opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''}; its badge reads #41.</span></span></div>`;
       else detail = linearDetail();
-      root.innerHTML = `${segment}<div class="tk-detail">${noGithub && off && draft.source !== 'github' ? why : ''}${detail}</div>`;
+      root.innerHTML = `${status()}${segment}<div class="tk-detail">${noGithub && off && draft.source !== 'github' ? why : ''}${detail}</div>`;
       if (draft.source === 'linear' && ready()) {
         root.querySelector('[data-tk="team"]').value = draft.team || '';
         root.querySelector('[data-tk="project"]').value = draft.project || '';
@@ -76,6 +114,9 @@
       if (!works()) {
         draft.source = before;
         render();
+        await keyed;
+        if (destroyed) return;
+        if (key) { openInline(); return; }
         asking = true;
         const added = await LinearKey.open();
         asking = false;
@@ -108,6 +149,7 @@
       noGithub = button.dataset.tkSource === 'github' && !repo();
       if (noGithub) { render(); root.querySelector('[data-tk-source="github"]').focus(); return; }
       if (button.dataset.tkSource === 'linear') { pickLinear(); return; }
+      closeInline();
       draft.source = button.dataset.tkSource;
       render(); root.querySelector(`[data-tk-source="${draft.source}"]`).focus(); change(read(), valid());
     };
@@ -126,11 +168,13 @@
     root.addEventListener('change', input);
     render();
     if (draft.source === 'linear' && !linear) load().then(() => { if (destroyed) return; pickDefaults(); render(); change(read(), valid(), { loaded: true }); });
+    // Without an answer the row has no status word, and Linear without a key opens Hub's key modal as on New board.
+    const keyed = keyState ? keyState().then((state) => { if (destroyed) return; key = state; render(); }, () => {}) : null;
     return { read, valid, render, nameChanged() {
         const field = root.querySelector('[data-tk="newName"]');
         if (field && draft.newName === undefined) field.value = title();
       },
-      destroy() { destroyed = true; root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
+      destroy() { destroyed = true; closeInline(); root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
   }
   function fitSheet(sheet) {
     const vv = window.visualViewport;
@@ -193,16 +237,16 @@
       return d;
     };
     const fail = (e) => { if (!closed) { error.textContent = e.message; error.hidden = false; } };
-    // A repo already on the host joins from its folder instead (docs/adr/0143-kickflip-join-adds-the-current-repository-as-a-board.md).
+    // A repo already on the host joins from its folder instead (docs/adr/2026-11-03-0248-kickflip-join-adds-the-current-repository-as-a-board.md).
     const joinHint = current ? '' : '<p class="nb-help" data-join-hint>A repo already on the host running Kickflip? Run <code>kickflip join</code> in its folder.</p>';
     function sync() { start.disabled = sending || !(draft.github || draft.remote) || !draft.branch || (!current && (!draft.name.trim() || !tickets?.valid())); }
     // A repo row's id is its GitHub owner/name, or the git link of a repo on another host, which the row names by
     // host/path and labels with its host where a GitHub row says Private or Public
-    // (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
+    // (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
     const idOf = (r) => r.github || r.remote;
     const nameOf = (r) => r.github || r.name;
     const access = (r) => (r.remote ? r.host : r.private ? 'Private' : 'Public');
-    const row = (r, highlighted = false) => `<button type="button" class="nb-repo${highlighted ? ' nb-repo-highlight' : ''}" data-repo="${esc(idOf(r))}"><strong>${esc(nameOf(r))}</strong>${r.listed === false ? '<span class="nb-repo-tag">Not in your list</span>' : ''}<span class="nb-help">${esc(access(r))} · <time datetime="${esc(r.pushedAt)}">${r.pushedAt ? `Pushed ${esc(new Date(r.pushedAt).toLocaleString())}` : r.listed === false ? 'Last push unknown' : 'No pushes yet'}</time></span><span class="nb-help">${esc(r.description)}</span><span class="nb-local">${r.cloned ? `✓ In .repos${r.shared.length ? ` · shared with ${esc(r.shared.map((b) => b.title).join(', '))}` : ' · already cloned'}` : 'Not cloned in .repos'}</span></button>`;
+    const row = (r, highlighted = false) => `<button type="button" class="nb-repo${highlighted ? ' nb-repo-highlight' : ''}" data-repo="${esc(idOf(r))}"><strong>${esc(nameOf(r))}</strong>${r.listed === false ? '<span class="nb-repo-tag">Not in your list</span>' : ''}<span class="nb-help">${esc(access(r))} · <time datetime="${esc(r.pushedAt)}">${r.pushedAt ? `Pushed ${esc(new Date(r.pushedAt).toLocaleString())}` : r.listed === false ? 'Last push unknown' : 'No pushes yet'}</time></span><span class="nb-help">${esc(r.description)}</span><span class="nb-local">${r.cloned ? `✓ Cloned${r.shared.length ? ` · shared with ${esc(r.shared.map((b) => b.title).join(', '))}` : ' · already cloned'}` : 'Not cloned yet'}</span></button>`;
     const results = (html) => { el.querySelector('[data-repo-results]').innerHTML = html; };
     function rows(query = '') {
       if (!signedIn) { results(''); return; }
@@ -278,7 +322,7 @@
       if (!edited) draft.name = nameOf(selected).split('/').at(-1);
       error.hidden = true;
       const shared = selected.shared.map((b) => b.title).join(', ');
-      content.innerHTML = `<button type="button" data-back-repos>‹ Back</button><p class="nb-next">${current ? 'Repo details' : '2 · Board details'}</p><div class="nb-selected"><strong>${esc(nameOf(selected))}</strong><span class="nb-help">${esc(access(selected))}</span><p>${selected.cloned ? shared ? `Shared with ${esc(shared)}` : 'Already cloned in .repos' : 'Clones to'}<code class="nb-clone">${esc(selected.clone)}</code></p></div><label class="nb-field"><span>Default branch for this board</span><select name="branch" disabled><option value="">Loading branches…</option></select><span class="nb-help" data-branch-help></span></label><p class="nb-next">Each board’s implementers work in separate worktrees off this clone. Sharing the clone doesn’t share their working files.</p>${current ? '<p class="nb-next">New implementers and GitHub links will use the selected repo.</p>' : `<label class="nb-field"><span>Name</span><input name="name" type="text" value="${esc(draft.name)}" required maxlength="60" autocomplete="off"></label><label class="nb-field"><span>What it’s for</span><input name="purpose" type="text" value="${esc(draft.purpose)}" maxlength="240"><span class="nb-help">One line to get the board started. Optional.</span></label><p class="nb-next">The hub ${selected.cloned ? 'reuses the clone' : 'clones the repo'} and starts your board. You can keep using your other boards.</p>`}`;
+      content.innerHTML = `<button type="button" data-back-repos>‹ Back</button><p class="nb-next">${current ? 'Repo details' : '2 · Board details'}</p><div class="nb-selected"><strong>${esc(nameOf(selected))}</strong><span class="nb-help">${esc(access(selected))}</span><p>${selected.cloned ? shared ? `Shared with ${esc(shared)}` : 'Already cloned' : 'Clones to'}<code class="nb-clone">${esc(selected.clone)}</code></p></div><label class="nb-field"><span>Default branch for this board</span><select name="branch" disabled><option value="">Loading branches…</option></select><span class="nb-help" data-branch-help></span></label><p class="nb-next">Each board’s implementers work in separate worktrees off this clone. Sharing the clone doesn’t share their working files.</p>${current ? '<p class="nb-next">New implementers and GitHub links will use the selected repo.</p>' : `<label class="nb-field"><span>Name</span><input name="name" type="text" value="${esc(draft.name)}" required maxlength="60" autocomplete="off"></label><label class="nb-field"><span>What it’s for</span><input name="purpose" type="text" value="${esc(draft.purpose)}" maxlength="240"><span class="nb-help">One line to get the board started. Optional.</span></label><p class="nb-next">The hub ${selected.cloned ? 'reuses the clone' : 'clones the repo'} and starts your board. You can keep using your other boards.</p>`}`;
       if (!current) {
         content.querySelectorAll('.nb-next')[content.querySelectorAll('.nb-next').length - 1].insertAdjacentHTML('beforebegin', '<div class="nb-field tk-section" role="group" aria-labelledby="nbTicketsLabel"><span id="nbTicketsLabel">Tickets</span><span class="nb-help">Where this board’s cards get their tickets. You can change it in Board settings.</span><div data-board-tickets></div></div>');
         tickets = ticketsControl(content.querySelector('[data-board-tickets]'), { value: draft.tickets, linear, loadLinear: async () => (linear = await request('/_hub/api/linear')),
@@ -327,7 +371,8 @@
       error.hidden = true;
       try {
         const repo = draft.remote ? { remote: draft.remote } : { github: draft.github };
-        await save(current ? { ...repo, branch: draft.branch } : { name: draft.name.trim(), purpose: draft.purpose.trim(), ...repo, branch: draft.branch, tickets: tickets.read() }, selected);
+        // Start, or Use repo, waits (ui.js waitOn) until the hub answers; a new board's own start then shows in the sidebar.
+        await BoardUI.waitOn(start, save(current ? { ...repo, branch: draft.branch } : { name: draft.name.trim(), purpose: draft.purpose.trim(), ...repo, branch: draft.branch, tickets: tickets.read() }, selected));
         sending = false;
         el.close();
       } catch (e) { sending = false; fail(e); sync(); }

package/board/public/hub-kit.js

@@ -52,6 +52,8 @@
   // the hub's answer, fail(message) a refusal. A checkbox marked data-submit saves on change, and a time input marked
   // data-autosave once its picker closes, so turning an iOS wheel doesn't save each value it passes. accepts(action, form)
   // limits it to some of those forms, since the Hub page and its hub settings each wire their own over one root.
+  // While a post is out its control waits (ui.js waitOn): the tapped button, or else the form's toggle or field, with
+  // the form's other buttons, the setting's other choices, disabled.
   // → {busy()}, true while a post is out
   function forms(B, { answer, fail, accepts = () => true }) {
     let sending = false;
@@ -65,9 +67,10 @@
       const body = new URLSearchParams(new FormData(form));
       if (e.submitter?.name) body.append(e.submitter.name, e.submitter.value);
       sending = true;
+      const post = fetch(action, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body })
+        .then(async (r) => [r, await r.json().catch(() => null)]);
       try {
-        const r = await fetch(action, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
-        const out = await r.json().catch(() => null);
+        const [r, out] = await BoardUI.waitOn(e.submitter || form.querySelector('input:not([type="hidden"]), select'), post, { group: form.querySelectorAll('button') });
         if (!B.alive()) return;
         if (r.ok && out) answer(out, action); else fail(out?.error || FAILED);
       } catch {
@@ -106,7 +109,7 @@
     const show = (next, isOn = false) => { if (!B.alive()) return; state = next; on = isOn; paint(); };
     // The endpoint this device last gave the hub, kept in this browser, so that once the subscription goes (the
     // browser dropped or replaced it, or notifications were blocked) the page tells the hub to forget it
-    // (docs/adr/0149-the-hub-reads-healthy-degraded-or-a-site-down.md).
+    // (docs/adr/2026-11-03-0501-the-hub-reads-healthy-degraded-or-a-site-down.md).
     const KEPT = 'kickflip.push.endpoint';
     const kept = () => { try { return localStorage.getItem(KEPT); } catch { return null; } };
     const keep = (endpoint) => { try { if (endpoint) localStorage.setItem(KEPT, endpoint); else localStorage.removeItem(KEPT); } catch { /* storage blocked here */ } };
@@ -138,7 +141,7 @@
     }
     async function enable() {
       busy = true;
-      show({ ...state, action: { ...state.action, disabled: true } }, on);
+      show({ ...state, action: { ...state.action, busy: true } }, on);
       try {
         if (await Notification.requestPermission() !== 'granted') { await render(); return; }
         const reg = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
@@ -152,9 +155,9 @@
       finally { busy = false; }
     }
     async function test() {
-      show({ ...state, action: { ...state.action, disabled: true } }, true);
+      show({ ...state, action: { ...state.action, busy: true } }, true);
       const r = await post('/_hub/push/test').catch(() => null);
-      show({ ...state, action: { ...state.action, label: r?.sent ? 'Sent' : 'Could not send' } }, true);
+      show({ ...state, action: { ...state.action, busy: false, label: r?.sent ? 'Sent' : 'Could not send' } }, true);
     }
     B.on(B.root, 'click', (e) => {
       const act = e.target.closest?.('[data-device]')?.dataset.device;

package/board/public/hub.css

@@ -1,4 +1,4 @@
-/* The hub page and settings modals (view-hub.js, view-hub-settings.js, view-polling.js), whose root carries .hub-view, and the hub's
+/* The hub page and settings modals (view-hub.js, view-hub-settings.js), whose root carries .hub-view, and the hub's
    down page (hub/hub.mjs), whose <html> does, and the board's Hold sheet picker (ui-cards.js holdPicker), which shares the
    duration picker's rules; served as /_hub/app/hub.css and /_hub/hub.css. Every rule is under
    .hub-view, since style.css uses the same short class names. The app shell links it after style.css, so a rule here
@@ -47,22 +47,7 @@
 .hub-view .chips form { display:contents; }
 .hub-view .chips form.field { display:inline-flex; gap:6px; }
 .hub-view .chips .field input { min-height:0; padding:.2rem .5rem; width:7.5rem; }
-.hub-view .split { display:flex; gap:8px; justify-content:flex-end; }
-.hub-view .day { position:relative; padding:18px 0 20px; }
-.hub-view .day .bar { position:relative; height:40px; border-radius:8px; overflow:hidden; background:var(--chip); }
-.hub-view .day .seg { position:absolute; top:0; bottom:0; display:grid; place-items:center; overflow:hidden; border-right:2px solid var(--panel);
-  background:color-mix(in srgb, var(--muted) var(--k), var(--chip)); }
-.hub-view .day .seg.held { background-image:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 22%, transparent) 5px 8px); }
-.hub-view .day .seg.sel { box-shadow:inset 0 0 0 3px var(--text); z-index:2; }
-.hub-view .day .seg span { font-size:11px; font-weight:600; line-height:1.5; color:var(--text); background:color-mix(in srgb, var(--panel) 85%, transparent); border-radius:4px; padding:0 4px; }
-.hub-view .day .pin { position:absolute; top:2px; transform:translateX(-50%); color:var(--color-notice); font-size:11px; line-height:1; }
-.hub-view .day .now { position:absolute; top:14px; height:48px; width:2px; margin-left:-1px; background:var(--text); z-index:3; pointer-events:none; }
-.hub-view .day .ticks { position:absolute; left:0; right:0; bottom:0; height:16px; font-size:10px; color:var(--muted); }
-.hub-view .day .ticks span { position:absolute; transform:translateX(-50%); }
-.hub-view .day .ticks span:first-child { transform:none; } .hub-view .day .ticks span:last-child { transform:translateX(-100%); }
-.hub-view .legend { display:flex; gap:4px 12px; flex-wrap:wrap; font-size:11px; color:var(--muted); }
-.hub-view .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
-.hub-view #day, .hub-view #window, .hub-view #quiet, .hub-view #wakes { scroll-margin-top:64px; }
+.hub-view .quiet-hint { margin:6px 14px 0; color:var(--muted); font-size:12px; }
 .hub-view .field input { flex:none; font:inherit; font-size:16px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; min-height:2.2rem; width:8.75rem; min-width:0; text-align:right; }
 .hub-view .field input[type=number] { width:5rem; }
 .hub-view .field input.toggle { width:1.4rem; height:1.4rem; min-height:0; padding:0; accent-color:var(--accent); }
@@ -167,4 +152,6 @@
 .hub-view .rd-fix button.link { padding: 0; font-size: inherit; }
 .hub-view .site-row > .site-link { flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:inherit; }
 .hub-view .restart-btn { min-width:76px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
-.hub-view .restart-btn .try-spin { width:9px; height:9px; }
+/* A waiting button keeps its own look (style.css button[aria-busy="true"]), over .btn's and a step's disabled dimming. */
+.hub-view button[aria-busy="true"]:disabled { opacity:1; }
+.hub-view .ub-step button[aria-busy="true"]:disabled { color:var(--text); }

package/board/public/linear-key.js

@@ -1,6 +1,6 @@
 // Hub's Linear key slot. Hub settings › Linear mounts it, and the Tickets control (dialogs.js) opens it over Board
 // settings or New board when Linear is tapped without a working key
-// (docs/adr/0117-a-board-picks-linear-only-while-hubs-key-works.md). A key saves on paste, change or Enter through
+// (docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A key saves on paste, change or Enter through
 // POST /_hub/settings/linear, which checks it with Linear; linear is hub/views.mjs settingsView's `linear`.
 (function () {
   const FAILED = 'Could not save. Is the host awake?';
@@ -68,7 +68,7 @@
     };
     const onClick = async (e) => {
       if (!e.target.closest?.('[data-linear-remove]') || pending) return;
-      if (await BoardDialogs.confirm('Boards on Linear can’t create issues or move tickets until you add a key again. Remove the Linear key?') && !destroyed) post(new URLSearchParams({ remove: '1' }));
+      if (await BoardDialogs.confirm('Boards on Linear fall back to internal tickets, and their cards keep the Linear tickets they have. Remove the Linear key?') && !destroyed) post(new URLSearchParams({ remove: '1' }));
     };
     const listeners = [['paste', onPaste], ['change', onChange], ['submit', onSubmit], ['click', onClick]];
     for (const [type, fn] of listeners) root.addEventListener(type, fn);
@@ -82,11 +82,13 @@
     };
   }
 
-  // Done's spinner while a save is out (style.css .settings-footer [aria-busy]).
+  // The footer's Done waits, disabled with a spinner in place of its word (style.css button[aria-busy="true"]), while a
+  // save is out; ✕, Escape and the backdrop close once it lands.
   function doneBusy(buttons, busy) {
     for (const b of buttons) {
+      if (!b.closest('.settings-footer')) continue;
+      b.disabled = busy;
       if (busy) b.setAttribute('aria-busy', 'true'); else b.removeAttribute('aria-busy');
-      if (b.closest('.settings-footer')) b.innerHTML = `${busy ? SPIN : ''}Done`;
     }
   }