@lovek4d/kickflip 0.5.0 → 0.5.3

package/board/public/app-threads.js

@@ -1,7 +1,7 @@
 // A card's thread on the board view: loading and rendering it, and its reply box. Needs app-core.js.
 BoardView.part((B) => {
   const { $, store, state, toast, quieted, sendDraft, links } = B;
-  const { esc, setHTML, threadMessages, attachButton, dropZone, protoButton, grillButton, doneButton, waitOn, newQuestionsLine } = BoardUI;
+  const { esc, setHTML, threadMessages, dropZone, sendButton, protoButton, grillButton, boltButton, doneButton, waitOn, newQuestionsLine } = BoardUI;
 
   const REQUEST_EVENT = { prototype: 'prototype-request', grill: 'grill-more' };
   // A /prototype or /grill word in a message, the last one winning, and the message without it.
@@ -10,31 +10,49 @@ BoardView.part((B) => {
 
   const thread = (key) => `<div class="thread" data-thread="${esc(key)}"><div class="muted small">Loading thread…</div></div>`;
 
-  // The board, not the thread, decides the Done button, so it follows each board load even when the thread is unchanged.
+  // docs/adr/2026-11-04-2343-each-text-box-sends-its-intent-from-a-key.md,
+  // docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md
+  // A Todo card's reply box sends with Reply (intent: 'reply') or Implement (intent: 'build'), which is the card's build
+  // action: builder orange once the card is ready, quiet before. Any other card's box sends with Send, carrying no intent.
+  // The pair wraps onto its own line under the row.
+  const sendsOf = (item) => (item?.lane !== 'todo' ? 'one' : item.ready ? 'todo-ready' : 'todo');
+  const sends = (kind) => (kind === 'one'
+    ? `<span data-sends="one">${sendButton('Send', 0)}</span>`
+    : `<span class="send-actions" data-sends="${kind}">${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${sendButton('Reply', 0, ' data-intent="reply"')}</span>`);
+  // The board, not the thread, decides the Done button and the send buttons, so they follow each board load even when
+  // the thread is unchanged.
   function syncDone(el, key) {
-    const send = el.querySelector('form button[type=submit]');
-    if (!send) return;
-    const html = doneButton(state.board?.items.find((i) => i.key === key));
+    const at = el.querySelector('form [data-sends]');
+    if (!at) return;
+    const item = state.board?.items.find((i) => i.key === key);
+    const kind = sendsOf(item);
+    const todo = item?.lane === 'todo';
+    if (at.dataset.sends !== kind) { at.insertAdjacentHTML('afterend', sends(kind)); at.remove(); }
+    const tools = el.querySelector('form .tools');
+    const bolt = tools.querySelector('[data-bolt]');
+    if (todo && !bolt) tools.insertAdjacentHTML('afterbegin', boltButton(key));
+    else if (!todo) bolt?.remove();
+    const html = doneButton(item);
     const current = el.querySelector('form [data-confirm="finish"]');
     if (current?.outerHTML === html) return;
     current?.remove();
-    if (html) send.insertAdjacentHTML('beforebegin', html);
+    if (html) el.querySelector('form [data-sends]').insertAdjacentHTML('beforebegin', html);
   }
 
   // Each open card's ui-threads.js threadMessages view. Opening a card marks it seen (app-core.js markSeen) before its
-  // thread draws, so its unread messages start from its seen mark as the page loaded or as the card last closed. A
-  // board left and opened again in this page keeps them, so its open threads show what they showed.
+  // thread draws, so its unread messages start from its read mark from before it opened (B.seenBefore). A board left
+  // and opened again in this page keeps them, so its open threads show what they showed.
   const kept = B.place?.threads;
-  const seenBefore = new Map(kept?.seenBefore || Object.entries(B.seen));
   const moreTaps = new Map(kept?.moreTaps);
   const firstDrawn = new Map(kept?.firstDrawn);
-  B.keep(() => ({ threads: { seenBefore: [...seenBefore], moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  B.keep(() => ({ threads: { moreTaps: [...moreTaps], firstDrawn: [...firstDrawn] } }));
+  const seenAt = (key) => (B.seenBefore.has(key) ? B.seenBefore.get(key) : B.seen[key] || null);
   const newestTs = (msgs) => msgs.reduce((top, m) => [String(m.ts), m.reply?.at ? String(m.reply.at) : ''].reduce((a, b) => (b > a ? b : a), top), '');
-  const viewOf = (key) => ({ seenAt: seenBefore.get(key) || null, more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
+  const viewOf = (key) => ({ seenAt: seenAt(key), more: moreTaps.get(key) || 0, upto: firstDrawn.get(key) || null });
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (!el.matches?.('details.item') || el.open) return;
-    seenBefore.set(el.dataset.key, B.seen[el.dataset.key]);
+    B.seenBefore.delete(el.dataset.key);
     moreTaps.delete(el.dataset.key);
     firstDrawn.delete(el.dataset.key);
   }, true);
@@ -53,7 +71,7 @@ BoardView.part((B) => {
     const edits = editsIn(key);
     if (!firstDrawn.has(key) && msgs.length) firstDrawn.set(key, newestTs(msgs));
     const view = viewOf(key);
-    const asked = newQuestionsLine(state.board?.items.find((i) => i.key === key)?.questions, seenBefore.get(key));
+    const asked = newQuestionsLine(state.board?.items.find((i) => i.key === key)?.questions, seenAt(key));
     const lines = asked.length ? [...msgs, ...asked].sort((a, b) => String(a.ts).localeCompare(String(b.ts))) : msgs;
     const sig = JSON.stringify([lines, [...edits.keys()], view]);
     if (el.dataset.sig === sig) return;
@@ -62,11 +80,9 @@ BoardView.part((B) => {
     if (!el.querySelector('.msgs')) {
       const draft = store.get('draft:' + key, '');
       el.innerHTML = `<div class="msgs"></div><form data-reply="${esc(key)}" data-composer="item:${esc(key)}">${dropZone(`<textarea rows="2" placeholder="${esc(PLACEHOLDER)}">${esc(draft)}</textarea>`)}
-        <div class="flag-hint" data-hint aria-live="polite">${esc(HINT)}</div>
         <div class="pending-files" data-files></div>
-        <div class="row"><span class="tools">${attachButton()}${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button><button class="primary" type="submit">Send</button></div></form>`;
+        <div class="row"><span class="tools">${protoButton(key)}${grillButton(key)}</span><button class="chip quick" type="button" data-quick="What's left?">What's left?</button>${sends('one')}</div></form>`;
       BoardAttach.paint('item:' + key, B.site.root);
-      syncFlag(el.querySelector('form'));
     }
     syncDone(el, key);
     B.steady(() => setHTML(el.querySelector('.msgs'), threadMessages(lines, links(key), edits, view)));
@@ -74,23 +90,10 @@ BoardView.part((B) => {
     B.flashChanged?.(el);
   }
 
-  // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
-  // The composer's eye asks for a prototype and its fire for a grill: each is a toggle, one at a time, that Send carries
-  // with whatever is typed, as /prototype or /grill in the text does. Nothing typed sends the bare request.
+  // docs/adr/2026-11-05-0430-the-eye-and-fire-send-their-request-at-once.md
+  // The composer's eye asks for a prototype and its fire for a grill: a tap sends the request at once, with whatever is
+  // typed, as /prototype or /grill in the text does on Reply. Nothing typed sends the bare request.
   const PLACEHOLDER = 'Reply in this thread… (/prototype or /grill asks for one)';
-  const HINT = 'Tap the eye or the fire to request a prototype or a grill';
-  const flagOf = (f) => f.dataset.flag || slashOf(f.querySelector('textarea').value).flag;
-  function syncFlag(f) {
-    const chosen = f.dataset.flag || null;
-    f.querySelector('button[data-proto]')?.setAttribute('aria-pressed', String(chosen === 'prototype'));
-    f.querySelector('button[data-grill]')?.setAttribute('aria-pressed', String(chosen === 'grill'));
-    const hint = f.querySelector('[data-hint]');
-    if (!hint) return;
-    const flag = flagOf(f);
-    const typed = slashOf(f.querySelector('textarea').value).text || BoardAttach.files(f.dataset.composer, B.site.root).length;
-    hint.classList.toggle('on', Boolean(flag));
-    hint.textContent = !flag ? HINT : typed ? `posts your message, with ${flag} requested in its footer` : `posts one gray line: ${flag} requested`;
-  }
 
   // A load while one for the same thread runs shares it, so a card the page inserts open isn't fetched twice; force
   // starts a new one, after a send. maxAge skips a thread that loaded that recently. from is a load already started
@@ -122,7 +125,6 @@ BoardView.part((B) => {
   B.on(B.root, 'input', (ev) => {
     const f = ev.target.closest('form[data-reply]');
     if (!f || ev.target.tagName !== 'TEXTAREA') return;
-    syncFlag(f);
     if (quieted('draft:' + f.dataset.reply, ev.target)) return;
     store.set('draft:' + f.dataset.reply, ev.target.value);
   });
@@ -130,44 +132,53 @@ BoardView.part((B) => {
     const b = ev.target.closest('form[data-reply] button[data-quick]');
     if (!b) return;
     const key = b.closest('form').dataset.reply;
-    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick }))); loadThread(key, { force: true }); }
-    catch { toast('Could not send'); }
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    try { await waitOn(b, BoardUI.pending.within(B.sentHere(key, () => B.send('item-message', { key, text: b.dataset.quick })).then(() => loadThread(key, { force: true })), B.stillWaiting)); }
+    catch (e) { B.failed(e); }
   });
-  B.on(B.root, 'click', (ev) => {
-    const b = ev.target.closest('form[data-reply] button[data-proto], form[data-reply] button[data-grill]');
+  // docs/adr/2026-11-05-0010-a-lightning-button-in-a-todo-threads-footer-starts-a-quick-build.md
+  B.on(B.root, 'click', async (ev) => {
+    const b = ev.target.closest('form[data-reply] button[data-bolt]');
     if (!b) return;
-    const f = b.closest('form');
-    const kind = b.hasAttribute('data-proto') ? 'prototype' : 'grill';
-    if (f.dataset.flag === kind) delete f.dataset.flag; else f.dataset.flag = kind;
-    syncFlag(f);
+    const key = b.dataset.bolt;
+    try { await waitOn(b, B.sentHere(key, () => B.send('item-message', { key, text: 'Quick build', intent: 'build' }))); loadThread(key, { force: true }); }
+    catch { toast('Could not send'); }
   });
-  B.on(B.root, 'submit', async (ev) => {
-    const f = ev.target.closest('form[data-reply]');
-    if (!f) return;
-    ev.preventDefault();
+  // Sends the composer's draft as one message, or as a request when flag names one; button spins until the thread has it.
+  async function post(f, flag, button) {
     const ta = f.querySelector('textarea');
     ta.blur();
-    const flag = flagOf(f);
     const text = flag ? slashOf(ta.value).text : ta.value.trim();
     const id = f.dataset.composer;
     const files = BoardAttach.files(id, B.site.root);
-    if ((!flag && !text && !files.length) || BoardAttach.busy(id, B.site.root)) return;
+    // An empty box still sends Implement, the card's build action.
+    const intent = flag ? null : button.dataset.intent || null;
+    if ((!flag && !text && !files.length && intent !== 'build') || BoardAttach.busy(id, B.site.root)) return;
     const key = f.dataset.reply;
-    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}) };
-    try {
-      await waitOn(f.querySelector('button[type=submit]'), sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
-        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data))));
+    const data = { key, ...(text || !flag ? { text } : {}), ...(files.length ? { files } : {}), ...(intent ? { intent } : {}) };
+    // Spins until the thread shows the message (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+    const sending = (async () => {
+      await sendDraft('draft:' + key, ta, () => $(`form[data-reply="${CSS.escape(key)}"] textarea`),
+        () => B.sentHere(key, () => B.send(REQUEST_EVENT[flag] || 'item-message', data)));
       BoardAttach.clear(id, B.site.root);
-      delete f.dataset.flag;
-      syncFlag(f);
-      loadThread(f.dataset.reply, { force: true });
-    } catch { B.notice('Could not send. Is the host awake?'); }
+      await loadThread(key, { force: true });
+    })();
+    try { await waitOn(button, BoardUI.pending.within(sending, B.stillWaiting)); } catch (e) { B.failed(e); }
+  }
+  B.on(B.root, 'click', (ev) => {
+    const b = ev.target.closest('form[data-reply] button[data-proto], form[data-reply] button[data-grill]');
+    if (b) post(b.closest('form'), b.hasAttribute('data-proto') ? 'prototype' : 'grill', b);
+  });
+  B.on(B.root, 'submit', (ev) => {
+    const f = ev.target.closest('form[data-reply]');
+    if (!f) return;
+    ev.preventDefault();
+    post(f, slashOf(f.querySelector('textarea').value).flag, ev.submitter);
   });
-  // Send waits while a composer's files upload, the ask's included (attach.js attach-change).
+  // A composer's send buttons wait while its files upload, the ask's included (attach.js attach-change).
   B.on(B.root, 'attach-change', (ev) => {
-    const b = ev.target.querySelector('button[type=submit]');
-    if (b) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
-    if (ev.target.matches?.('form[data-reply]')) syncFlag(ev.target);
+    for (const b of ev.target.querySelectorAll('button[type=submit]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
+    if (ev.target.matches?.('form[data-reply]')) for (const b of ev.target.querySelectorAll('button[data-proto], button[data-grill]')) b.disabled = BoardAttach.busy(ev.detail.id, B.site.root);
   });
 
   Object.assign(B, {

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);
@@ -131,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 },
@@ -187,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]' });
@@ -229,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;
@@ -336,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;
@@ -356,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();
@@ -371,15 +396,20 @@ 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>
+<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">

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/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;
   }