@lovek4d/kickflip 0.4.0 → 0.5.3

package/board/public/app.js

@@ -27,7 +27,9 @@ window.BoardView = (function () {
     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))) {
+      // Read marks moved to the board (docs/adr/2026-11-05-0910-read-marks-live-on-the-board.md), so this browser's old copies go.
+      for (const k of old.filter((k) => /^(site:[\w-]+:)?(seenThreads|dismissedAnswers)$/.test(k))) localStorage.removeItem(k);
+      for (const k of old.filter((k) => /^(openItems|wave|lanes|draft:ask|foldOpen:.+)$/.test(k))) {
         if (localStorage.getItem(keyOf(k)) != null) continue;
         localStorage.setItem(keyOf(k), localStorage.getItem(k));
         localStorage.removeItem(k);
@@ -86,7 +88,26 @@ window.BoardView = (function () {
       }
       toasts.toast(text);
     };
-    const B = { root, site, route, toast, $, $$, on, every, later, sleep, watch, atUnmount, alive: () => alive, own: (off) => (alive ? own(off) : off()) };
+    const store = storeFor(route);
+  // iOS commits a pending predictive-text word after Send clears the box, which would refill it and resave the draft.
+  // So Send blurs first, and input is dropped while the send runs and for a moment after it succeeds.
+  const quiet = new Map();
+  function quieted(draftKey, ta) {
+    const until = quiet.get(draftKey) || 0;
+    if (until <= Date.now()) return false;
+    if (until !== Infinity) ta.value = '';
+    return true;
+  }
+  async function sendDraft(draftKey, ta, current, send) {
+    ta.blur();
+    quiet.set(draftKey, Infinity);
+    try { await send(); } catch (e) { quiet.delete(draftKey); store.set(draftKey, (current() || ta).value); throw e; }
+    store.set(draftKey, '');
+    const now = current();
+    if (now) now.value = '';
+    quiet.set(draftKey, Date.now() + 1000);
+  }
+    const B = { root, site, route, store, quieted, sendDraft, toast, $, $$, on, every, later, sleep, watch, atUnmount, alive: () => alive, own: (off) => (alive ? own(off) : off()) };
     return {
       B,
       start() { alive = true; },
@@ -100,7 +121,7 @@ window.BoardView = (function () {
 
   function create(root, siteRoot, opts = {}) {
     const { B, start: begin, stop } = base(root, siteRoot);
-    const store = storeFor(B.route);
+    const { store } = B;
     // 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.
@@ -112,7 +133,7 @@ window.BoardView = (function () {
       edits: new Map(),
       githubPending: 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 },
+      mainPull: { 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 },
@@ -158,6 +179,7 @@ window.BoardView = (function () {
     // Renders open threads from state.threadCache; loadBoard and opening a card load them.
     function render(load = null) {
       const d = state.board;
+      BoardUI.pending.settle(d);
       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;
@@ -167,7 +189,8 @@ window.BoardView = (function () {
         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));
+        B.takeMarks(d.items);
+        for (const it of d.items) if (state.openItems.has(it.key)) markSeen(it);
         // An open card's thread is renderThread's (app-threads.js), so a lane repaint leaves it as it is.
         const strips = B.captureStrips();
         setHTML($('#lanes'), B.lanesHtml(d, d.items), { keep: '[data-thread]' });
@@ -209,6 +232,15 @@ window.BoardView = (function () {
       ev.preventDefault();
       readHash(); render(); scrollToFocus();
     });
+    // Opens and scrolls to the card key or the band slug on the board → whether the board shows it.
+    function focusOnBoard({ key, slug }) {
+      const band = slug && state.board?.waveBands?.find((b) => b.slug === slug);
+      if (!band && !state.board?.items.some((i) => i.key === key)) return false;
+      if (key) { location.hash = `#item=${encodeURIComponent(key)}`; readHash(); } else B.openBand({ slug });
+      render();
+      if (key) scrollToFocus(); else $(`section.wb[data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
+      return true;
+    }
     // A card missing from the last visit's board waits for the fresh one, which is final.
     function scrollToFocus(final = true) {
       if (!focusKey) return;
@@ -316,10 +348,16 @@ window.BoardView = (function () {
       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);
+      if (!land(out.board, B.boardLoad = (B.boardLoad || 0) + 1)) await boardAfter(out.board.generatedAt);
       return out;
     }
 
+    // A board that reload raced the POST left the tap's own board unlanded (land): the tap is not drawn until a board
+    // made after it is, so send waits for one, and a tap's spinner with it (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    async function boardAfter(generatedAt) {
+      for (let tries = 0; tries < 3 && B.alive() && !(state.view === 'fresh' && state.board.generatedAt >= generatedAt); tries++) await (reloading || loadBoard({ via: 'signal' }));
+    }
+
     // 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/2026-10-29-1639-the-board-reloads-on-a-change-signal.md).
     let reloading = null;
@@ -336,7 +374,14 @@ window.BoardView = (function () {
 
     // 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 });
+    // A tap's change no board has shown in BoardUI's PENDING_LATE_MS (ui.js pending): the board reloads once and the button rests.
+    function stillWaiting() {
+      if (!B.alive()) return;
+      B.toast('Still waiting on the board');
+      signalled();
+      render();
+    }
+    Object.assign(B, { render, focusOnBoard, loadBoard, send, failed, stillWaiting, reload: signalled });
     const live = paintSnapshot();
     B.headerWired();
     if (live) B.linkUp();
@@ -351,29 +396,21 @@ window.BoardView = (function () {
     B.every(30000, () => { if (!document.hidden) { loadBoard(); } });
   }
 
-  function markup({ title = '' } = {}) {
+  // shared: the shell's data.shared for someone the board is shared with, view only, whose board opens with a strip saying so.
+  function markup({ title = '', shared = null } = {}) {
+    const strip = shared ? `<p class="view-only-strip"><b>View only.</b> Shared with you${shared.by ? ` by ${BoardUI.esc(shared.by)}` : ''}. You can look and open Visit links.</p>\n` : '';
     return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', bulb: true, moon: true })}
+<div class="split">
 <main>
-  <section id="setup" class="setup" aria-live="polite" hidden></section>
+${strip}  <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>
+  <section id="needsDeck" class="needs-deck" aria-label="Needs you" hidden></section>
   <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>
-    ${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>
+<aside id="needsPane" class="needs-pane" aria-label="Needs you"><section id="waiting" class="waiting" hidden></section></aside>
+</div>
+${BoardNewTask.markup()}
 <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>
@@ -396,6 +433,11 @@ window.BoardView = (function () {
     <div id="archBody" class="arch-body"></div>
   </div>
 </dialog>
+<dialog id="readerSheet" class="sheet reader-sheet" aria-labelledby="readerTitle">
+  <div class="reader-head"><h2 id="readerTitle"></h2><span class="reader-ref"></span><span class="reader-tools"></span><button type="button" class="ghost" data-reader="close" aria-label="Close">✕</button></div>
+  <div class="reader-body" tabindex="0"></div>
+  <button type="button" class="reader-new" data-reader="end" hidden></button>
+</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,6 +1,6 @@
 // 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
+// Files attached to a composer: any element with data-composer="<id>" holding its text box in BoardUI.dropZone(), which
+// puts BoardUI.attachButton() inside the box, 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

package/board/public/dialogs.js

@@ -2,21 +2,18 @@
 // 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, or with keyState the key field
-  // inline (linear-key.js,
+  // while Hub's key works; tapping it without one opens Hub's key modal over the page (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/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 = () => {} } = {}) {
+  // as a status word (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 } = {}) {
     const { esc } = BoardUI;
     const draft = { prefix: 'INT', ...value };
-    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false, key = null, inline = null;
+    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false, key = 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');
@@ -26,31 +23,6 @@
       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();
@@ -114,13 +86,12 @@
       if (!works()) {
         draft.source = before;
         render();
-        await keyed;
-        if (destroyed) return;
-        if (key) { openInline(); return; }
         asking = true;
         const added = await LinearKey.open();
         asking = false;
         if (destroyed || !added) return;
+        if (keyState) key = await keyState().catch(() => key);
+        if (destroyed) return;
         draft.source = 'linear';
         await load();
         if (destroyed) return;
@@ -149,7 +120,6 @@
       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());
     };
@@ -168,13 +138,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;
+    // Without an answer the row has no status word.
+    if (keyState) keyState().then((state) => { if (destroyed) return; key = state; render(); }, () => {});
     return { read, valid, render, nameChanged() {
         const field = root.querySelector('[data-tk="newName"]');
         if (field && draft.newName === undefined) field.value = title();
       },
-      destroy() { destroyed = true; closeInline(); root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
+      destroy() { destroyed = true; root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
   }
   function fitSheet(sheet) {
     const vv = window.visualViewport;

package/board/public/hub-kit.js

@@ -113,6 +113,8 @@
     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 */ } };
+    // The id the hub gave that subscription, so the Integrations list marks this device's line (view-hub.js).
+    const subscribe = (sub) => post('/_hub/push/subscribe', sub.toJSON()).then(({ id }) => { try { localStorage.setItem('kickflip.push.id', id); } catch { /* storage blocked here */ } });
     const settle = (endpoint = null) => {
       const old = kept();
       if (old && old !== endpoint) post('/_hub/push/unsubscribe', { endpoint: old }).catch(() => {});
@@ -133,7 +135,7 @@
       const sub = await reg?.pushManager.getSubscription();
       settle(sub?.toJSON().endpoint);
       if (sub) {
-        post('/_hub/push/subscribe', sub.toJSON()).catch(() => {});
+        subscribe(sub).catch(() => {});
         show({ title: 'This device', action: { label: 'Test', act: 'test', quiet: true } }, true);
       } else {
         show({ title: 'This device', sub: 'Off · Claude sessions tell you here when something needs you.', action: { label: 'Turn on', act: 'on' } });
@@ -148,7 +150,7 @@
         await navigator.serviceWorker.ready;
         const { key } = await (await fetch('/_hub/push/key')).json();
         const sub = (await reg.pushManager.getSubscription()) || await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) });
-        await post('/_hub/push/subscribe', sub.toJSON());
+        await subscribe(sub);
         await render();
         changed();
       } catch (err) { show({ title: 'Could not turn on notifications', sub: String(err?.message || err) }); }

package/board/public/hub.css

@@ -87,6 +87,7 @@
 .hub-view .remembered { padding:0 12px 10px; color:var(--muted); font-size:12px; }
 .hub-view .remembered p { margin:0; }
 .hub-view .remembered ul { margin:4px 0 0; padding-left:18px; }
+.hub-view :is(.hub-modal, .sheet) code { white-space: pre-wrap; overflow-wrap: anywhere; }
 .hub-view .remembered code { white-space:pre-wrap; overflow-wrap:anywhere; }
 
 @media (max-width: 899px) {

package/board/public/linear-key.js

@@ -1,44 +1,55 @@
-// 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/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`.
+// Hub's token slots: Linear's key and Slack's user token. Hub settings › Linear and › Slack mount them, and the Tickets
+// control (dialogs.js) opens Linear's over Board settings or New board when Linear is tapped without a working key
+// (docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A token saves on paste, change or Enter
+// through POST /_hub/settings/<kind>, which checks it with the service; state is hub/views.mjs settingsView's `<kind>`.
 (function () {
   const FAILED = 'Could not save. Is the host awake?';
   const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
-  const works = (linear) => Boolean(linear?.set && !linear.refused);
+  const works = (state) => Boolean(state?.set && !state.refused);
+  const KINDS = {
+    linear: { field: 'key', input: 'linearKey', checking: 'Checking the key with Linear…', first: 'Paste a Linear API key', replace: 'Paste a new key to replace it', label: 'Linear API key',
+      note: 'Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. A board can pick Linear for its tickets only while this key works.',
+      confirm: 'Boards on Linear fall back to internal tickets, and their cards keep the Linear tickets they have. Remove the Linear key?' },
+    slack: { field: 'token', input: 'slackToken', checking: 'Checking the token with Slack…', first: 'Paste a Slack user token', replace: 'Paste a new token to replace it', label: 'Slack user token',
+      note: 'Stays on the host. The hub sends your reviewers their PR links, git_merged reactions and weekday digests as you, in your DMs with them.',
+      confirm: 'Reviewer links, reactions and digests stop until a token is back. Remove the Slack token?' },
+  };
 
-  function slot(linear, { checking, flash }) {
+  function slot(kind, state, { checking, flash }) {
     const { esc, row, tile } = HubUI;
-    const sub = checking ? `<span class="lk-checking">${SPIN}Checking the key with Linear…</span>`
-      : `${linear.down ? `<span class="st down">${esc(linear.down)}</span> · ` : ''}${linear.keys
-        ? esc(linear.sub).replace(esc(linear.keys.label), `<a href="${esc(linear.keys.url)}" target="_blank" rel="noopener">${esc(linear.keys.label)}</a>`)
-        : esc(linear.sub)}`;
-    const remove = linear.set && !checking ? '<button type="button" class="btn quiet danger" data-linear-remove>Remove</button>' : '';
-    const placeholder = checking ? 'Checking…' : linear.set ? 'Paste a new key to replace it' : 'Paste a Linear API key';
-    return `${HubUI.flash(flash)}<div class="group">${row({ icon: tile('key', linear.refused ? 'var(--color-danger)' : 'var(--color-quiet)'), title: esc(linear.title), sub, wrap: !works(linear), trail: remove })}`
-      + `<form class="block lk-form"><input id="linearKey" name="key" type="password" required${checking ? ' disabled' : ''} placeholder="${placeholder}" aria-label="Linear API key" autocomplete="off" autocapitalize="off" spellcheck="false"></form></div>`
-      + '<p class="note">Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. A board can pick Linear for its tickets only while this key works.</p>';
+    const k = KINDS[kind];
+    const sub = checking ? `<span class="lk-checking">${SPIN}${k.checking}</span>`
+      : `${state.down ? `<span class="st down">${esc(state.down)}</span> · ` : ''}${state.keys
+        ? esc(state.sub).replace(esc(state.keys.label), `<a href="${esc(state.keys.url)}" target="_blank" rel="noopener">${esc(state.keys.label)}</a>`)
+        : esc(state.sub)}`;
+    const remove = state.set && !checking ? `<button type="button" class="btn quiet danger" data-${kind}-remove>Remove</button>` : '';
+    const placeholder = checking ? 'Checking…' : state.set ? k.replace : k.first;
+    return `${HubUI.flash(flash)}<div class="group">${row({ icon: tile('key', state.refused ? 'var(--color-danger)' : 'var(--color-quiet)'), title: esc(state.title), sub, wrap: !works(state), trail: remove })}`
+      + `<form class="block lk-form"><input id="${k.input}" name="${k.field}" type="password" required${checking ? ' disabled' : ''} placeholder="${placeholder}" aria-label="${k.label}" autocomplete="off" autocapitalize="off" spellcheck="false"></form></div>`
+      + `<p class="note">${k.note}</p>`;
   }
 
-  // Draws the slot into root and saves from it. busy(true) starts each save and busy(false) ends it; saved(out) gets
-  // each answer, /_hub/api/settings's JSON, before the slot repaints; worked() follows a saved key Linear accepted.
-  // → {busy(), settled(): a promise that resolves once no save is out, linear(), set(linear) unless busy, destroy()}
-  function mount(root, { linear, saved = () => {}, worked = () => {}, busy = () => {} }) {
-    let current = linear, flash = null, checking = false, pending = null, destroyed = false;
+  // Draws kind's slot into root and saves from it. busy(true) starts each save and busy(false) ends it; saved(out) gets
+  // each answer, /_hub/api/settings's JSON, before the slot repaints; worked() follows a saved token the service accepted.
+  // → {busy(), settled(): a promise that resolves once no save is out, state(), set(state) unless busy, destroy()}
+  function mount(root, { kind = 'linear', state, saved = () => {}, worked = () => {}, busy = () => {} }) {
+    const k = KINDS[kind];
+    const input = `#${k.input}`;
+    let current = state, flash = null, checking = false, pending = null, destroyed = false;
     const paint = () => {
-      const typed = root.querySelector('#linearKey')?.value || '';
-      root.innerHTML = slot(current, { checking, flash });
-      if (!checking) root.querySelector('#linearKey').value = typed;
+      const typed = root.querySelector(input)?.value || '';
+      root.innerHTML = slot(kind, current, { checking, flash });
+      if (!checking) root.querySelector(input).value = typed;
     };
     function post(body) {
-      checking = body.has('key');
+      checking = body.has(k.field);
       flash = null;
       pending = (async () => {
         try {
-          const r = await fetch('/_hub/settings/linear', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
+          const r = await fetch(`/_hub/settings/${kind}`, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
           const out = await r.json().catch(() => null);
           if (destroyed) return;
-          if (r.ok && out) { current = out.linear; saved(out); } else flash = { text: out?.error || FAILED, error: true };
+          if (r.ok && out) { current = out[kind]; saved(out); } else flash = { text: out?.error || FAILED, error: true };
         } catch { flash = { text: FAILED, error: true }; }
         const key = checking;
         checking = false;
@@ -52,23 +63,23 @@
       paint();
       return pending;
     }
-    const save = (value) => { if (!pending && value.trim()) post(new URLSearchParams({ key: value.trim() })); };
+    const save = (value) => { if (!pending && value.trim()) post(new URLSearchParams({ [k.field]: value.trim() })); };
     const onPaste = (e) => {
       const text = e.clipboardData?.getData('text');
-      if (!e.target.matches?.('#linearKey') || !text) return;
+      if (!e.target.matches?.(input) || !text) return;
       e.preventDefault();
       e.target.value = text.trim();
       save(e.target.value);
     };
-    const onChange = (e) => { if (e.target.matches?.('#linearKey')) save(e.target.value); };
+    const onChange = (e) => { if (e.target.matches?.(input)) save(e.target.value); };
     const onSubmit = (e) => {
       if (!e.target.matches?.('.lk-form')) return;
       e.preventDefault();
-      save(e.target.querySelector('#linearKey').value);
+      save(e.target.querySelector(input).value);
     };
     const onClick = async (e) => {
-      if (!e.target.closest?.('[data-linear-remove]') || pending) return;
-      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' }));
+      if (!e.target.closest?.(`[data-${kind}-remove]`) || pending) return;
+      if (await BoardDialogs.confirm(k.confirm) && !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);
@@ -76,7 +87,7 @@
     return {
       busy: () => Boolean(pending),
       settled: () => pending || Promise.resolve(),
-      linear: () => current,
+      state: () => current,
       set(next) { if (!pending) { current = next; paint(); } },
       destroy() { destroyed = true; for (const [type, fn] of listeners) root.removeEventListener(type, fn); },
     };
@@ -115,7 +126,7 @@
       dialog.close();
       wrap.remove();
       if (previous?.isConnected) previous.focus({ preventScroll: true });
-      resolve(works(key?.linear()));
+      resolve(works(key?.state()));
     }
     function close() {
       if (!key?.busy()) { finish(); return; }
@@ -134,7 +145,7 @@
     wrap.querySelector('#linearKeyTitle').focus({ preventScroll: true });
     fetch('/_hub/api/settings', { cache: 'no-store', headers: { accept: 'application/json' } }).then((r) => (r.ok ? r.json() : Promise.reject())).then((out) => {
       if (finished) return;
-      key = mount(content, { linear: out.linear, worked: finish, busy: (on) => doneBusy(wrap.querySelectorAll('[data-lk-done]'), on) });
+      key = mount(content, { state: out.linear, worked: finish, busy: (on) => doneBusy(wrap.querySelectorAll('[data-lk-done]'), on) });
     }).catch(() => { if (!finished) content.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; });
     return result;
   }

package/board/public/new-task.js

@@ -0,0 +1,100 @@
+// The + button and the sheet that sends a new task as an ask event, on the board's main page alone: the board view's markup
+// (app.js) puts BoardNewTask.markup() in its root and app-asks.js wires it with BoardNewTask.wire(B). No other page
+// opts in. The ask goes through B.send, which lands the board the ask changed. B.newTaskKey(ev) is the n-twice handler, which a framed page's document also feeds.
+globalThis.BoardNewTask = (function () {
+  const markup = () => `<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>
+    ${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="send-actions">${BoardUI.sendButton('Quick build', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
+    <p class="muted small" id="askStatus" aria-live="polite"></p>
+  </form>
+</dialog>`;
+
+  function wire(B) {
+    // A shared person looks only (shell.js marks the page shared-view, and style.css hides the +), so n twice opens nothing.
+    if (document.documentElement.classList.contains('shared-view')) return;
+    const { $, store, toast, quieted, sendDraft } = B;
+    const { waitOn, keyedSend } = BoardUI;
+    const send = (kind, data) => (B.send ? B.send(kind, data) : B.site.send(kind, data));
+    // The ask box is a bottom sheet: a <dialog> opened from the + button. Closing keeps the draft.
+    const sheet = $('#sheet');
+    const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
+    // Files picked before the app shell switched away from this board are still attached, so they show again.
+    BoardAttach.paint('ask', B.site.root);
+    // ⌘↵ sends the ask as Discuss and ⌥↵ as Quick build (ui.js keyedSend).
+    B.on($('#askText'), 'keydown', (ev) => {
+      const button = keyedSend(ev, $('#askForm'));
+      if (!button) return;
+      ev.preventDefault();
+      $('#askForm').requestSubmit(button);
+    });
+    $('#askText').value = store.get('draft:ask', '');
+    B.on($('#askText'), 'input', (e) => { if (!quieted('draft:ask', e.target)) store.set('draft:ask', e.target.value); });
+    let stopFitting = null;
+    const stopFit = () => { stopFitting?.(); stopFitting = null; };
+    B.on(sheet, 'close', stopFit);
+    B.atUnmount(stopFit);
+    function openSheet() {
+      if (sheet.open) return;
+      stopFit();
+      stopFitting = BoardDialogs.fitSheet(sheet);
+      sheet.classList.remove('closing');
+      sheet.showModal();
+      $('#askText').focus();
+      $('#compose').setAttribute('aria-expanded', 'true');
+    }
+    function closeSheet() {
+      if (!sheet.open || sheet.classList.contains('closing')) return;
+      $('#compose').setAttribute('aria-expanded', 'false');
+      if (reduceMotion.matches) { sheet.close(); return; }
+      sheet.classList.add('closing');
+      B.later(180, () => { sheet.classList.remove('closing'); sheet.close(); });
+    }
+    B.on($('#compose'), 'click', openSheet);
+    // n pressed twice opens the sheet, as the + button's tooltip says, unless a field or another dialog has focus. With
+    // nothing focused the key goes to <body>, outside the view, so this listens on the document, and a framed page's
+    // own document is given to the same handler (view-frame.js). A key switch mode used (sidebar.js) comes
+    // defaultPrevented and doesn't count.
+    const TWICE_MS = 500;
+    let lastN = -Infinity;
+    const newTaskKey = (ev) => {
+      if (ev.defaultPrevented) { lastN = -Infinity; return; }
+      if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
+      const field = ev.target.closest && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
+      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+      if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
+      lastN = -Infinity;
+      ev.preventDefault();
+      openSheet();
+    };
+    B.newTaskKey = newTaskKey;
+    B.on(document, 'keydown', newTaskKey);
+    B.on($('#sheetClose'), 'click', closeSheet);
+    B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
+    B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
+    // Discuss has the session grill or prototype the task at once; Quick build sends the ask with quick: true, and the
+    // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
+    B.on($('#askForm'), 'submit', async (ev) => {
+      ev.preventDefault();
+      $('#askText').blur();
+      const text = $('#askText').value.trim();
+      const files = BoardAttach.files('ask', B.site.root);
+      const button = ev.submitter;
+      const quick = button.dataset.intent === 'quick';
+      if ((!text && !files.length) || BoardAttach.busy('ask', B.site.root)) return;
+      $('#askStatus').textContent = '';
+      try {
+        await waitOn(button, sendDraft('draft:ask', $('#askText'), () => $('#askText'), () => send('ask', { text, ...(files.length ? { files } : {}), ...(quick ? { quick: true } : {}) })));
+        BoardAttach.clear('ask', B.site.root);
+        $('#askStatus').textContent = '';
+        closeSheet();
+        toast('Sent');
+      } catch { $('#askStatus').textContent = 'Could not send'; }
+    });
+  }
+
+  return { markup, wire };
+})();

package/board/public/prototype-kit.js

@@ -75,7 +75,7 @@
 <h2 class="label">Polling status</h2>
 <div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div></div>
 <section class="hub-settings"><h2 class="label">Hub settings</h2>${settings}</section>
-<div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span></footer></div></main></div>`;
+<div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }
 
   const LANES = [['review', 'In Review'], ['progress', 'In Progress'], ['todo', 'Todo'], ['done', 'Done']];
@@ -127,6 +127,21 @@
 
   const kit = { sidebar, hub, cards, sheet, toast, on, fake, esc };
 
+  // [element, place] for each element in stage, its place the tag and class of it and each ancestor up to the stage, with
+  // a count telling apart boxes that share one, so a take drawn again finds the same box.
+  function placesIn(stage) {
+    const seen = new Map();
+    return [...stage.querySelectorAll('*')].map((el) => {
+      let path = '';
+      for (let at = el; at && at !== stage; at = at.parentElement) path = `${at.tagName}.${at.className}/${path}`;
+      const n = seen.get(path) || 0;
+      seen.set(path, n + 1);
+      return [el, `${path}#${n}`];
+    });
+  }
+  // place → [scrollTop, scrollLeft] of each box in stage scrolled away from its start.
+  const scrolledBoxes = (stage) => new Map(placesIn(stage).filter(([el]) => el.scrollTop || el.scrollLeft).map(([el, place]) => [place, [el.scrollTop, el.scrollLeft]]));
+
   function start(data) {
     const keys = data.takes.map((t) => t.key);
     const takes = Object.fromEntries(data.takes.map((t) => [t.key, t.label]));
@@ -158,13 +173,23 @@
       try { cleanup?.(); } catch (err) { console.error(err); }
       cleanup = null;
       ends.splice(0).forEach((end) => end());
-      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn.
+      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn, and
+      // each box scrolled inside the take scrolls where it was once the new take has drawn the same box.
       const old = document.getElementById('stage');
       const stage = old.cloneNode(false);
       const y = window.scrollY;
+      const scrolled = scrolledBoxes(old);
       stage.style.minHeight = `${old.offsetHeight}px`;
       old.replaceWith(stage);
-      const settle = () => { if (n !== shown) return; stage.style.minHeight = ''; window.scrollTo(0, y); };
+      const settle = () => {
+        if (n !== shown) return;
+        stage.style.minHeight = '';
+        for (const [el, place] of placesIn(stage)) {
+          const at = scrolled.get(place);
+          if (at) [el.scrollTop, el.scrollLeft] = at;
+        }
+        window.scrollTo(0, y);
+      };
       document.documentElement.dataset.take = key;
       const take = data.takes.find((t) => t.key === key);
       if (!take.src) {