@lovek4d/kickflip 0.5.0 → 0.5.3

package/board/public/ui-questions.js

@@ -1,16 +1,20 @@
 // Owner questions, for Waiting on you (view-questions.js). Needs ui.js and ui-links.js.
 (function () {
-  const { esc, time, ago, replyBody, attachments, attachButton, dropZone, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
-  // A short id such as A or C2 leads the label; a word id such as "inline" would repeat it. prototype-switcher.js answerLabel matches.
+  const { esc, time, ago, replyBody, attachments, dropZone, protoButton, linkText, linkHtml, badge, opensHere, LINK_ARROW } = globalThis.BoardUI;
+  // A short id such as A or C2 leads the label; a word id such as "inline" would repeat it.
   const lead = (o) => (/^[A-Z][0-9]?$/i.test(o.id) ? `${o.id}. ` : '');
   const choiceLabel = (q, id) => { const o = q.options.find((x) => x.id === id); return o ? `${q.multi ? '' : lead(o)}${o.label}` : id || ''; };
   // suggested: the line under a suggested option saying where the owner chose it before, as HTML.
-  const option = (o, { type = 'radio', name, checked = false, numbered = true, shown = false, locked = false, suggested = '' }) => `<label class="opt"${shown ? ' aria-current="true"' : ''}><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${locked ? ' disabled' : ''}>
+  const option = (o, { type = 'radio', name, checked = false, numbered = true, locked = false, suggested = '' }) => `<label class="opt"><input type="${type}" name="${esc(name)}" value="${esc(o.id)}" ${checked ? 'checked' : ''}${locked ? ' disabled' : ''}>
         <span><span class="lbl">${numbered ? esc(lead(o)) : ''}${esc(o.label)}</span>${suggested ? badge('ready', 'suggested').replace('class="chip', 'class="chip suggested') : ''}${o.recommended ? '<span class="rec">recommended</span>' : ''}<div class="det">${esc(o.detail || '')}</div>${suggested ? `<div class="suggested-why">${suggested}</div>` : ''}</span></label>`;
   // docs/adr/2026-11-04-2200-overnight-triage-suggests-your-earlier-answers.md
   // A question's pick on this device: its unsent draft, else its last answer, else the option the overnight triage
   // suggested, pre-checked so the topic's Send sends it.
   const choiceOf = (q, draft) => draft.choice ?? (q.answers.length ? q.answers[q.answers.length - 1].choice : q.suggested?.option ?? null);
+  // A question's unsent {choice, note} on this device, in localStorage under qdraft:<id>. view-questions.js and the
+  // phone's deck (app-needs.js) and the prototype viewer's Pick (prototype-switcher.js) write it.
+  const getDraft = (id) => { try { return JSON.parse(localStorage.getItem('qdraft:' + id) || '{}'); } catch { return {}; } };
+  const setDraft = (id, v) => { try { localStorage.setItem('qdraft:' + id, JSON.stringify(v)); } catch {} };
   const suggestedLine = (q, o, links) => q.suggested?.option === o.id ? linkText(`You answered this on ${q.suggested.card}: "${q.suggested.answer}"`, links) : '';
 
   const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
@@ -18,7 +22,7 @@
   // requested until its prototype round arrives (view-questions.js).
   const questionEye = (q) => protoButton('q:' + q.id, { label: 'Ask for a prototype instead' });
   const noteComposer = (q, note) => `<div class="composer" data-composer="${esc('q:' + q.id)}">${dropZone(`<textarea class="note" rows="2" placeholder="Note (optional)">${esc(note || '')}</textarea>`)}
-      <div class="note-tools">${attachButton()}${questionEye(q)}<div class="pending-files" data-files></div></div></div>`;
+      <div class="note-tools">${questionEye(q)}<div class="pending-files" data-files></div></div></div>`;
 
   const QUESTION_STATE = {
     open: { label: 'open', tone: 'normal' },
@@ -40,7 +44,9 @@
     const last = q.answers[q.answers.length - 1];
     return q.state === 'open' || !last.reply ? body : `<details><summary>Your answer and Claude's reply</summary>${body}</details>`;
   }
-  // A prototype page in the site's public/ opens in place, and its switcher picks a take (board/public/prototype-switcher.js).
+  // A prototype page in the site's public/ is the question's full-page viewer: it opens in place, shows one take at a
+  // time, and its switcher drafts a pick (board/public/prototype-switcher.js,
+  // docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md).
   const PROTOTYPE_PAGE = /^prototype-[\w-]+\.html(?:[?#]|$)/;
   const isPrototype = (url) => Boolean(url) && PROTOTYPE_PAGE.test(globalThis.location && url.startsWith(location.origin + '/') ? url.replace(/^[^?#]*\//, '') : url);
   const withParam = (url, key, value) => {
@@ -48,13 +54,11 @@
     return `${url.slice(0, at)}${url.slice(0, at).includes('?') ? '&' : '?'}${key}=${encodeURIComponent(value)}${url.slice(at)}`;
   };
   const questionLink = (url) => !url ? ''
-    : isPrototype(url) ? `<a class="pill proto" href="${esc(url)}">See the prototypes →</a>`
+    : isPrototype(url) ? `<a class="button proto-view" href="${esc(url)}">View prototypes</a>`
     : `<div class="small" style="margin-bottom:8px"><a href="${esc(url)}"${opensHere(url) ? '' : ' target="_blank" rel="noopener"'}>${esc(url.replace(/^https:\/\/(linear\.app\/[^/]+\/issue|github\.com)\//, ''))} ${LINK_ARROW}</a></div>`;
 
-  // A question's takes show inline (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md): an option with `diagram` draws
-  // it with its `practice`, and on a question whose url is a prototype page any other option shows that page's take.
-  const framed = (q) => isPrototype(q.url) && q.options.some((o) => !o.diagram);
-  const inline = (q) => isPrototype(q.url) || q.options.some((o) => o.diagram);
+  // An option with `diagram` draws it with its `practice` in the question (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md).
+  const drawn = (q) => q.options.some((o) => o.diagram);
 
   // rows: [[{text, tone?, to?}]], top to bottom. A box points at the boxes of the next row listed in `to`, else at all
   // of them; tone is a status colour's name.
@@ -72,28 +76,12 @@
   }
   const practice = (lines, links) => `<div class="practice"><b>In practice</b><ul>${lines.map((l) => `<li>${linkText(l, links)}</li>`).join('')}</ul></div>`;
 
-  const fullTakes = (q, fit) => isPrototype(q.url) && q.options.every((o) => !o.diagram && !o.practice)
-    && (q.options.length === 1 || q.options.some((o) => fit(o.id)?.scrolls));
-  // Grid heights decide the layout; fullH measures the chosen take at the full content width.
-  function takeBody(q, o, links, fit, full = false) {
-    if (o.diagram) return diagram(o.diagram) + practice(o.practice || [], links);
-    if (!isPrototype(q.url)) return '';
-    const size = fit(o.id);
-    const h = full ? size?.fullH : size?.h;
-    // Every take loads so one outside the viewport can still decide the question's layout.
-    return `<div class="take-shot${h ? '' : ' measuring'}"${h ? ` style="height:${Math.round(h)}px"` : ''}><iframe src="${esc(withParam(q.url, 'take', o.id))}" title="${esc(o.label)}"></iframe></div>`;
-  }
-  function takes(q, chosen, links, fit, locked = false) {
+  function takes(q, chosen, links, locked = false) {
     const name = 'c-' + q.id;
-    if (fullTakes(q, fit)) {
-      const shown = q.options.find((o) => o.id === chosen) || q.options.find((o) => o.recommended) || q.options[0];
-      return `<div class="takes takes-full"><div class="take-choices" role="group" aria-label="Takes">${q.options.map((o) => option(o, { name, checked: chosen === o.id, shown: o === shown, locked, suggested: suggestedLine(q, o, links) })).join('')}</div><article class="take" data-opt="${esc(shown.id)}">${takeBody(q, shown, links, fit, true)}</article></div>`;
-    }
-    return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })}${takeBody(q, o, links, fit)}</article>`).join('')}</div>`;
+    return `<div class="takes">${q.options.map((o) => `<article class="take" data-opt="${esc(o.id)}">${option(o, { name, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })}${o.diagram ? diagram(o.diagram) + practice(o.practice || [], links) : ''}</article>`).join('')}</div>`;
   }
-  // A confirm links its one take alone, and says why it is asked.
-  const confirmLines = (q) => !q.confirm_of ? ''
-    : `<a class="pill proto pr-open" href="${esc(withParam(q.url, 'take', q.options[0].id))}">Open the prototype →</a>${q.state === 'open' ? `<div class="pr-rule">${RULE_ICON}A pick with a note gets a one-take confirm once Claude has updated the take.</div>` : ''}`;
+  // A confirm says why it is asked; its View prototypes opens the viewer on its one take (?variant=).
+  const confirmLine = (q) => q.confirm_of && q.state === 'open' ? `<div class="pr-rule">${RULE_ICON}A pick with a note gets a one-take confirm once Claude has updated the take.</div>` : '';
   // docs/adr/2026-11-04-2001-a-resolved-question-is-read-only-and-can-be-asked-again.md
   // A resolved question, read-only: its green resolved badge asks Claude to ask it again (view-questions.js sends
   // `reask-request` once the owner confirms), how it was resolved and when it was acted on (resolved_at), its last pick
@@ -115,11 +103,10 @@
       ${q.reask ? '<div class="small muted reask-line">re-ask requested</div>' : ''}
     </section>`;
   }
-  // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext;
-  // fit(option id) supplies the measured grid and full-width heights.
+  // An owner question from /api/board; draft is this device's unsent {choice, note}; links its ui-links.js linkContext.
   // A question waiting on the prototype the owner asked for is locked at the pick and note the request sent until its
   // round arrives (docs/adr/2026-11-04-2130-a-prototype-request-waits-for-its-prototype.md).
-  function questionCard(q, { n = 0, draft = {}, links = {}, fit = () => null } = {}) {
+  function questionCard(q, { n = 0, draft = {}, links = {} } = {}) {
     if (q.state === 'resolved') return resolvedCard(q, links);
     const locked = q.state === 'requested';
     const chosen = locked ? q.request.choice : choiceOf(q, draft);
@@ -127,9 +114,9 @@
       <div class="row" style="margin:0"><span class="muted small">${n ? n + '. ' : ''}${esc(q.source || '')}</span>${badge(QUESTION_STATE[q.state].tone, QUESTION_STATE[q.state].label)}</div>
       <h3>${linkText(q.question, links)}</h3>
       ${q.context ? `<div class="ctx">${linkText(q.context, links)}</div>` : ''}
-      ${framed(q) ? '' : questionLink(q.url)}
-      ${confirmLines(q)}
-      ${inline(q) ? takes(q, chosen, links, fit, locked) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })).join('')}
+      ${questionLink(q.confirm_of && isPrototype(q.url) ? withParam(q.url, 'variant', q.options[0].id) : q.url)}
+      ${confirmLine(q)}
+      ${drawn(q) ? takes(q, chosen, links, locked) : q.options.map((o) => option(o, { name: 'c-' + q.id, checked: chosen === o.id, locked, suggested: suggestedLine(q, o, links) })).join('')}
       ${locked ? (q.request.note ? `<div class="ans"><div class="muted small">You · ${esc(time(q.request.ts))}</div><div>${linkText(q.request.note, links)}</div></div>` : '') : noteComposer(q, draft.note)}
       ${answerHistory(q, links)}
     </section>`;
@@ -142,7 +129,7 @@
     const byKey = new Map(cards.map((c) => [c.key, c]));
     return topics.map((t) => {
       const c = t.title === undefined && byKey.get(t.card);
-      return c ? { ...t, title: `${c.ref}: ${c.title}`, summary: 'Questions about this work item.', ...(c.kind === 'ask' ? { askedAt: c.ask.askedAt } : {}) } : t;
+      return c ? { ...t, title: `${c.ref}: ${c.title}`, ...(c.kind === 'ask' ? { askedAt: c.ask.askedAt } : {}) } : t;
     });
   }
   // Topics from /api/board ownerTopics, in order. pills: unresolved topics with an open question, plus the
@@ -179,5 +166,5 @@
     },
   };
 
-  Object.assign(globalThis.BoardUI, { choiceLabel, choiceOf, option, answerHistory, questionCard, roundChip, takes, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
+  Object.assign(globalThis.BoardUI, { isPrototype, getDraft, setDraft, choiceLabel, choiceOf, option, answerHistory, questionCard, roundChip, topicName, cardTopics, topicRow, nextQuestion, sentNotice });
 })();

package/board/public/ui-sidebar.js

@@ -69,7 +69,7 @@
     const sites = data?.sites || [];
     const site = (rank) => (s) => ({ href: siteHref(s), title: String(s.title ?? s.route), board: rank === 0, rank, joined: Date.parse(s.created) });
     const rows = [...sites.filter((s) => s.board).map(site(0)), ...sites.filter((s) => !s.board).map(site(1)),
-      ...UTILITY.map((f, i) => ({ href: f.href, title: f.title, board: false, rank: 2, joined: i }))];
+      ...(data?.shared ? [] : UTILITY).map((f, i) => ({ href: f.href, title: f.title, board: false, rank: 2, joined: i }))];
     rows.filter((r) => r.board).slice(0, 9).forEach((r, i) => { r.num = String(i + 1); });
     const when = (r) => (Number.isFinite(r.joined) ? r.joined : Infinity);
     const taken = new Set();
@@ -176,25 +176,28 @@
   }
 
   // The New version row. update: the app's reload, null | 'ready' | 'reloading', which comes first. upgrade:
-  // /_hub/sidebar.json's npm update, null | {state: available | waiting | updating | failed, version, builders, error}
-  // (hub/upgrade.mjs; docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). A reload, and an asked
-  // update until it runs out, waits (ui.js BUSY): its pill keeps its blue with a spinner in place of its word.
+  // /_hub/sidebar.json's npm update, null | {state: available | updating | updated | restarting | failed, version, error}
+  // (hub/upgrade.mjs; docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md). The hub pulls a new
+  // version itself, so the row reads Updated to v<version> with Restart; restarting is the sidebar's own state while the hub
+  // restarts. A reload, a pull and a restart wait (ui.js BUSY): the pill keeps its blue with a spinner in place of its word.
   function updateRow(update, upgrade) {
     const button = (attr, busy, title, sub, go) => `<button type="button" class="sb-row sb-update-row" ${attr}${busy ? globalThis.BoardUI.BUSY : ''}>${tile('up', 'var(--accent)')}`
       + `<span class="sb-text"><span class="sb-title">${title}</span>${sub ? `<span class="sb-sub">${esc(sub)}</span>` : ''}</span><span class="sb-go">${go}</span></button>`;
     if (update) return button('data-app-reload', update === 'reloading', 'New version', '', 'Reload');
     if (!upgrade) return '';
-    if (upgrade.state === 'waiting') return button('data-app-upgrade', true, `Update waits for ${upgrade.builders} implementer${upgrade.builders === 1 ? '' : 's'}`, '', 'Upgrade');
-    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Update available', '', 'Upgrade');
-    if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Upgrade');
-    return button('data-app-upgrade', false, 'Update available', '', 'Upgrade');
+    if (upgrade.state === 'updated') return button('data-app-restart', false, `Updated to v${esc(upgrade.version)}`, upgrade.error, 'Restart');
+    if (upgrade.state === 'restarting') return button('data-app-restart', true, `Restarting to v${esc(upgrade.version)}`, '', 'Restart');
+    if (upgrade.state === 'updating') return button('data-app-upgrade', true, 'Updating', '', 'Update');
+    if (upgrade.state === 'failed') return button('data-app-upgrade', false, 'Update failed', upgrade.error, 'Update');
+    return button('data-app-upgrade', false, 'Update available', '', 'Update');
   }
 
   // data: /_hub/sidebar.json. here: a site's route or a hub page's path without its leading slash. device: this device's push
   // subscription as sidebar.js finds it, 'on' | 'off' | 'blocked' | 'install' (iOS outside the Home Screen app), or
   // null while unknown or unsupported. switching: switch mode shows, each row with its key and the hint on the Boards label.
   // update: null | 'ready' | 'reloading'.
-  // now: the time a starting board's seconds count to.
+  // now: the time a starting board's seconds count to. A shared person's data (data.shared; hub/share.mjs sharedSidebar)
+  // draws their boards alone: no Hub row, update or notification rows, and no New board.
   function sidebar(data, { here = '', device = null, switching = false, update = null, now = Date.now() } = {}) {
     const sites = data?.sites || [];
     const keys = switching ? new Map(switchKeys(data).map((k) => [k.href, k])) : null;
@@ -231,13 +234,16 @@
     const selected = here.startsWith('_hub') ? '/_hub' : `/${here.replace(/\/$/, '')}`;
     const hint = switching ? '<span class="ks-label-hint" role="status">– press a key to switch<i class="ks-bar"></i></span>' : '';
     const close = `<div class="nav"><button type="button" class="sb-close" data-sidebar-close aria-label="Close boards">${svg(ICONS.close, 20)}</button></div>`;
-    return header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
-      leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } })
+    const top = header({ lead: 'logo', title: 'Kickflip', level: 2, controls: false, trail: close, logoSrc: '/_hub/kickflip.png',
+      leadAttrs: { 'aria-label': 'Hide boards', title: 'Hide boards', 'data-sidebar-close': '' } });
+    const boardsLabel = `<div class="sb-label ks-label"><span class="ks-label-text">Boards</span>${hint}</div>`;
+    if (data?.shared) return `${top}<div class="sb-scroll"><section class="sb-boards" aria-label="Boards">${boardsLabel}<div class="sb-group">${boards.map(siteRow).join('')}</div></section></div>`;
+    return top
       + `<div class="sb-scroll"><section class="sb-utility" aria-label="Hub"><div class="sb-update" role="status">${updateRow(update, data?.upgrade)}</div><div class="sb-group">`
       + UTILITY.map((f) => row({ ...f, on: f.href.replace(/\/$/, '') === selected, sub: subs[f.href], mark: f.href === '/_hub/' ? moon : '', ...(f.href === '/_hub/' && usage ? { extra: usage, cls: 'sb-hub-usage' } : {}), key: keys?.get(f.href) })).join('')
       + `</div>${turnOn}</section>`
       + (pages.length ? `<section class="sb-pages" aria-label="Pages"><div class="sb-label">Pages</div><div class="sb-group">${pages.map(siteRow).join('')}</div></section>` : '')
-      + `<section class="sb-boards" aria-label="Boards"><div class="sb-label ks-label"><span class="ks-label-text">Boards</span>${hint}</div>`
+      + `<section class="sb-boards" aria-label="Boards">${boardsLabel}`
       + `<div class="sb-group">${boards.map(siteRow).join('')}${pending}${newBoard}</div></section></div>`;
   }
 

package/board/public/ui-threads.js

@@ -1,7 +1,7 @@
 // A card's thread: the orchestrator's lines (who claude, named Orchestrator), its builders' asks, the owner's messages and
 // their replies. Needs ui.js, ui-links.js and ui-enums.js.
 (function () {
-  const { esc, time, etaLine, replyBody, attachments, attachButton, dropZone, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, mark, statusMark, BUTTON } = globalThis.BoardUI;
+  const { esc, time, etaLine, replyBody, attachments, dropZone, sendButton, editButton, withdrawButton, workingLine, linkText, linkHtml, anyLink, mark, statusMark, BUTTON } = globalThis.BoardUI;
   const VIA = { slack: ' · Slack', github: ' · GitHub' };
   // A link to a card on this board (#item=<key>) or on another board (/<route>/#item=<key>, an ask's move), or ''.
   function cardLink(link) {
@@ -32,7 +32,7 @@
   // files it adds to the message, under composer id edit:<event id>.
   const editForm = (id, text) => `<form class="edit-form" data-edit-form="${esc(id)}" data-composer="edit:${esc(id)}">${dropZone(`<textarea rows="3">${esc(text)}</textarea>`)}
         <div class="pending-files" data-files></div>
-        <div class="row">${attachButton()}<span><button type="button" data-edit-cancel>Cancel</button> <button class="primary" type="submit">Save</button></span></div></form>`;
+        <div class="send-actions"><button type="button" data-edit-cancel>Cancel</button>${sendButton('Save', 0)}</div></form>`;
   // batched: an answer followed by another of the owner's answers in its state, which carries the batch's footer.
   const line = (m, links, edits, batched = false) => (m.kind === 'reply'
     ? `<div class="msg claude reply-msg"><div class="who">Orchestrator · ${esc(time(m.ts))}</div>${m.quote ? `<blockquote class="quote">${linkText(m.quote, links)}</blockquote>` : ''}<div class="body">${linkHtml(replyBody(m.reply), links)}</div></div>`
@@ -45,7 +45,7 @@
         ${m.canDelete || m.canEdit ? `<div class="ask-actions">${m.canEdit ? editButton(m.eventId) : ''}${m.canDelete ? withdrawButton(m.eventId) : ''}</div>` : ''}
         <div class="who">${m.who === 'love' ? 'You' : m.who === 'claude' ? 'Orchestrator' : esc(m.who)}${VIA[m.via] || ''}${m.moved ? ' · Moved' : ''}${m.from ? ` · Moved from ${esc(m.from)}` : ''}${m.edited ? ' · Edited' : ''} · ${esc(time(m.ts))}</div>
         <div class="body"${edits.has(m.eventId) ? ' hidden' : ''}>${m.html ? linkHtml(m.html, links) : linkText(m.text, links)}</div>${edits.has(m.eventId) ? editForm(m.eventId, edits.get(m.eventId).text) : ''}${attachments(m.files)}
-        ${m.log ? `<div class="small"><a href="log.html?file=${encodeURIComponent(m.log)}">Open the log →</a></div>` : ''}
+        ${m.log ? `<div class="small"><a href="log.html?file=${encodeURIComponent(m.log)}">Open the log</a></div>` : ''}
         ${m.link ? `<div class="small">${cardLink(m.link) || anyLink(m.link, m.link)}</div>` : ''}
         ${m.eventId && !batched ? msgFooter(m) : ''}
       </div>`);

package/board/public/ui.js

@@ -52,19 +52,36 @@
   }
   const CLIP = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
   const attachButton = () => `<label class="attach" title="Attach files"><input type="file" multiple data-attach aria-label="Attach files">${CLIP}</label>`;
-  // A composer's text box, which attach.js outlines with Drop to attach while files are dragged over the composer.
-  const dropZone = (textarea) => `<div class="dz">${textarea}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
+  // A composer's text box with its attach button inside at the bottom right, which attach.js outlines with Drop to
+  // attach while files are dragged over the composer.
+  const dropZone = (textarea) => `<div class="dz">${textarea}${attachButton()}<div class="dz-hint" aria-hidden="true">Drop to attach</div></div>`;
+  // docs/adr/2026-11-04-2343-each-text-box-sends-its-intent-from-a-key.md
+  // A composer's send buttons: the one with nth 0 presses on ⌘↵ and the one with nth 1, where there is one, on ⌥↵,
+  // wherever each sits in the row (Ctrl+↵ and
+  // Alt+↵ off a Mac), each with its key as a small gray hint that style.css shows only where there is a keyboard and room.
+  const MAC = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform || globalThis.navigator?.userAgent || '');
+  const SEND_KEYS = MAC ? ['⌘↵', '⌥↵'] : ['Ctrl+↵', 'Alt+↵'];
+  const sendButton = (label, nth, attrs = '') => `<button type="submit"${nth === 0 ? ' class="primary"' : ''} data-nth="${nth}"${attrs}>${esc(label)}<span class="key-hint" aria-hidden="true">${SEND_KEYS[nth]}</span></button>`;
+  // The send button an Enter keydown in form's box presses, or null.
+  const keyedSend = (ev, form) => {
+    if (ev.key !== 'Enter' || ev.isComposing) return null;
+    const nth = (ev.metaKey || ev.ctrlKey) && !ev.altKey ? 0 : ev.altKey && !ev.metaKey && !ev.ctrlKey ? 1 : -1;
+    return nth < 0 ? null : form.querySelector(`button[type="submit"][data-nth="${nth}"]`);
+  };
   const icon = (body, size = 18, attrs = '') => `<svg${attrs} width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
   // An SVG, not ↗: iOS Safari can draw ↗ as an emoji tile even with U+FE0E.
   const LINK_ARROW = icon('<path d="M7 17 17 7"/><path d="M7 7h10v10"/>', '1em', ' class="link-arrow" style="vertical-align:-0.125em"');
   const EYE = icon('<path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/>');
   const TRASH = icon('<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>');
   const FIRE = icon('<path d="M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-6 1-9z"/>');
+  const BOLT = icon('<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>');
   // Asks Claude for throwaway prototypes of one item (docs/adr/2026-10-29-1639-prototypes-come-on-request.md): a
   // question's eye sends at once; a thread's eye is a toggle that Send carries (app-threads.js).
   const protoButton = (id, { label = 'Ask for prototypes' } = {}) => `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}">${EYE}</button>`;
   // The thread's fire, the eye's twin for a grill.
   const grillButton = (id) => `<button type="button" class="attach proto-ask" data-grill="${esc(id)}" aria-label="Ask for a grill" title="Ask for a grill">${FIRE}</button>`;
+  // A Todo card's thread footer lightning: starts a quick build of the card at once (app-threads.js).
+  const boltButton = (id) => `<button type="button" class="attach proto-ask" data-bolt="${esc(id)}" aria-label="Quick build" title="Quick build">${BOLT}</button>`;
   // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
   // A thread status line's leading mark, its icon or dot centred in one fixed box so every line's text starts at the
   // same place: the request's eye, fire or quick build's lightning, answers' check, new questions' plain question mark, a builder's dot.
@@ -72,7 +89,7 @@
   const MARK_ICONS = {
     'prototype requested': mini('<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
     'grill requested': mini('<path d="M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-6 1-9z"/>'),
-    'quick build: no grill, as you asked': mini('<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>'),
+    'quick build: no grill': mini('<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>'),
     'answers submitted': mini('<path d="M20 6 9 17l-5-5"/>'),
     'judgment calls': mini('<path d="m9 6 6 6-6 6"/>'),
     questions: mini('<path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01"/>', ' big'),
@@ -299,14 +316,29 @@
   // until(board) holds. start(id, until) on the tap; answered(id, generatedAt) with the generatedAt of the POST's board;
   // drop(id) when the POST is refused. Boards made before the POST answered never end it, so a reload that races the POST
   // keeps the spinner.
+  // A tap whose answer carries no board (a bare fetch) calls answered(id) with no time: any board then ends it, so its
+  // until() must hold only for a change the tap caused. start(id, until, onLate): if no board ends it within
+  // PENDING_LATE_MS the entry drops and onLate() runs (the page reloads once and says so).
+  const PENDING_LATE_MS = 60000;
   const pendings = new Map();
   const pending = {
-    start(id, until) { pendings.set(id, { until, after: null }); },
-    answered(id, after) { const p = pendings.get(id); if (p) p.after = after; },
-    drop(id) { pendings.delete(id); },
+    start(id, until, onLate = null) {
+      pending.drop(id);
+      const late = onLate && setTimeout(() => { pendings.delete(id); onLate(); }, PENDING_LATE_MS);
+      pendings.set(id, { until, after: null, late });
+    },
+    answered(id, after = '') { const p = pendings.get(id); if (p) p.after = after; },
+    drop(id) { clearTimeout(pendings.get(id)?.late); pendings.delete(id); },
     has: (id) => pendings.has(id),
+    // A tap whose change is drawn by the page's own load, not by a board (a thread, a page's redraw): resolves when work
+    // settles, or after PENDING_LATE_MS calls onLate() and resolves, so waitOn's spinner rests either way.
+    within(work, onLate) {
+      let timer;
+      const late = new Promise((resolve) => { timer = setTimeout(() => { onLate(); resolve(); }, PENDING_LATE_MS); });
+      return Promise.race([work, late]).finally(() => clearTimeout(timer));
+    },
     settle(board) {
-      for (const [id, p] of pendings) if (p.after !== null && board.generatedAt >= p.after && p.until(board)) pendings.delete(id);
+      for (const [id, p] of pendings) if (p.after !== null && board.generatedAt >= p.after && p.until(board)) pending.drop(id);
     },
   };
 
@@ -340,6 +372,6 @@
   globalThis.BoardUI = {
     LINK_ARROW,
     esc, record, time, ago, lasted, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, pending, fetchJSON, RESTARTING, restartNotice,
-    attachments, attachButton, dropZone, pendingFiles, protoButton, grillButton, mark, statusMark, MARK_ICONS, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+    attachments, attachButton, dropZone, sendButton, keyedSend, pendingFiles, protoButton, grillButton, boltButton, mark, statusMark, MARK_ICONS, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
   };
 })();

package/board/public/view-hub-settings.js

@@ -1,6 +1,6 @@
 // HubSettings: summary rows below Hub’s health and status open centred settings modals ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)), using
 // settingsView's words from GET /_hub/api/settings. Each toggle and snooze posts to /_hub/settings/notifications, Quiet
-// hours' times and hold to /_hub/settings/quiet, and Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key does through linear-key.js; Done waits for
+// hours' times and hold to /_hub/settings/quiet, and Keep awake to /_hub/settings/keep-awake, and saves at once, as Linear's key and Slack's token do through linear-key.js; Done waits for
 // a key's save to land. The rules editor saves through POST /_hub/settings/rules
 // and marks [data-dirty] while an edit is unsaved, so the shell asks before leaving then. The data refreshes every 30 seconds while nothing is being edited.
 (function () {
@@ -58,7 +58,7 @@
       + `<h2 class="label">Snoozes and wakes read</h2><div class="group">${reads}</div>`;
   }
 
-  const sections = [['notifications', 'Notifications'], ['quiet', 'Quiet hours'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
+  const sections = [['notifications', 'Notifications'], ['quiet', 'Quiet hours'], ['keep-awake', 'Keep awake'], ['linear', 'Linear'], ['slack', 'Slack'], ['rules', 'Rules for every board'], ['closed', 'Closed boards']];
   const sectionOf = (hash) => {
     const id = { push: 'notifications', 'closed-boards': 'closed', polling: 'quiet' }[hash?.slice(1)] || hash?.slice(1);
     return sections.some(([section]) => section === id) ? id : null;
@@ -79,7 +79,7 @@
       let flash = null;
       let rules = null;
       let rulesJSON = '';
-      let linearKey = null;
+      let tokenSlot = null;
 
       function paint() {
         if (!last) return;
@@ -87,16 +87,16 @@
         top.innerHTML = HubUI.flash(flash);
         const scrollTop = B.$('.settings-body').scrollTop;
         if (active === 'notifications') {
-          content.innerHTML = `<div class="group">${deviceRow(device.state(last.device), { compact: true })}${notificationRows(last)}${last.presence ? row({ icon: tile('laptop', 'var(--color-quiet)'), title: esc(last.presence.title) }) : ''}</div>`;
+          content.innerHTML = `<div class="group">${deviceRow(device.state(last.device), { compact: true })}${notificationRows(last)}</div>`;
         } else if (active === 'quiet') {
           content.innerHTML = quietRows(last.quiet);
         } else if (active === 'keep-awake') {
           content.innerHTML = last.awake.unsupported ? `<p class="note">${esc(last.awake.unsupported)}.</p>`
             : `<div class="group">${awakeRow(last.awake)}</div><p class="note">Runs <code>caffeinate -ims</code> on the host so it doesn’t sleep while boards work. The screen can still turn off.</p>`;
-        } else if (active === 'linear') {
-          if (linearKey) linearKey.set(last.linear);
+        } else if (active === 'linear' || active === 'slack') {
+          if (tokenSlot) tokenSlot.set(last[active]);
           else {
-            linearKey = LinearKey.mount(content, { linear: last.linear,
+            tokenSlot = LinearKey.mount(content, { kind: active, state: last[active],
               saved(out) { last = out; flash = null; paint(); ctx.sidebarChanged?.(); },
               busy: (on) => LinearKey.doneBusy(modal.querySelectorAll('[data-settings-dismiss]'), on) });
           }
@@ -112,6 +112,7 @@
           quiet: last.quiet.summary,
           'keep-awake': last.awake.summary,
           linear: last.linear?.summary || 'No key',
+          slack: last.slack?.summary || 'No token',
           rules: last.rules.length ? `${last.rules.length} rule${last.rules.length === 1 ? '' : 's'}` : 'None yet',
           closed: last.closed?.length ? `${last.closed.length} closed` : 'No closed boards',
         };
@@ -152,7 +153,7 @@
       function closeModal(restore = true) {
         unfitModal?.(); unfitModal = null;
         modal.close();
-        linearKey?.destroy(); linearKey = null;
+        tokenSlot?.destroy(); tokenSlot = null;
         content.innerHTML = '';
         rules = null;
         active = null;
@@ -186,8 +187,8 @@
         return true;
       };
       const dismiss = () => {
-        if (!linearKey?.busy()) { B.openSettings({ kind: 'hub' }); return; }
-        linearKey.settled().then(() => { if (B.alive()) B.openSettings({ kind: 'hub' }); });
+        if (!tokenSlot?.busy()) { B.openSettings({ kind: 'hub' }); return; }
+        tokenSlot.settled().then(() => { if (B.alive()) B.openSettings({ kind: 'hub' }); });
       };
       B.on(modal, 'cancel', (e) => { e.preventDefault(); dismiss(); });
       B.on(root, 'click', (e) => {

package/board/public/view-hub.js

@@ -39,8 +39,12 @@
     const { row, tile } = HubUI;
     const fixHtml = (fix) => fix.command ? `<code>${esc(fix.command)}</code>` : fix.settings
       ? `${esc(fix.text)} <button type="button" class="link" data-settings-open="${esc(fix.settings)}">${esc(fix.label)}</button>.` : esc(fix.text);
+    // One line per device with notifications on: kind, browser, last seen, and a Remove that forgets it.
+    const mine = (() => { try { return localStorage.getItem('kickflip.push.id'); } catch { return null; } })();
+    const deviceLine = (d) => `<span class="rd-device">${esc([d.kind, d.browser, `seen ${BoardUI.ago(d.added)}`].filter(Boolean).join(' · '))}${d.id === mine ? ' · <b>this device</b>' : ''} <button type="button" class="link" data-forget-device="${esc(d.id)}">Remove</button></span>`;
+    const devices = (it) => it.devices?.length ? `<span class="links">${it.devices.map(deviceLine).join('')}</span>` : '';
     const rows = integrations.map((it) => row({ icon: tile(it.id, it.ready ? 'var(--color-quiet)' : 'var(--color-notice)'), title: esc(it.name), wrap: true,
-      sub: it.ready ? `<span class="st ok">ready</span> · ${esc(it.detail)}`
+      sub: it.ready ? `<span class="st ok">ready</span> · ${esc(it.detail)}${devices(it)}`
         : `<span class="st wait">not ready</span> · ${esc(it.missing)}<span class="links"><span class="rd-fix">${fixHtml(it.fix)}</span>${it.waits ? `<span class="rd-waits">${esc(it.waits)}</span>` : ''}</span>` })).join('');
     return `<h2 class="label" id="integrations">Integrations</h2><div class="group">${rows}</div>
 <p class="note">A feature that needs an integration stays off until it’s ready, and says why.</p>
@@ -73,7 +77,7 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
 <div class="group">${nowRow(d.polling, tile('clock', d.polling.count ? 'var(--color-notice)' : 'var(--color-quiet)'))}</div>`;
   }
 
-  const footer = (d) => `<footer>${esc(d.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">${esc(d.host)}</span></footer>`;
+  const footer = (d) => `<footer>${esc(d.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">${esc(d.host)}</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v${esc(d.version)}</span></footer>`;
 
   // iOS shows an app badge only in a Home Screen app with notifications allowed; elsewhere this does nothing.
   function badge(n) {
@@ -109,8 +113,11 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
           if (!r.ok || !out) throw new Error();
           if (B.alive()) B.toast(`${out.title} is back up, and its session is listening.`);
         } catch { flash = { text: out?.error || `Could not restart ${title}. Is the host awake?`, error: true }; }
+        // The row keeps its Restart busy until the hub's data shows the board's new word, and only a refusal loads after
+        // (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+        if (!flash && B.alive()) await BoardUI.pending.within(load(), () => { B.toast('Still waiting on the board'); load(); });
         restarting.delete(route);
-        if (B.alive()) { paint(); load(); }
+        if (B.alive()) { paint(); if (flash) load(); }
       }
       // Restart hub asks the host to restart the hub service (POST /_hub/restart-hub), then waits for the hub to answer
       // with other code than it ran (its x-hub-code) and reloads the app; past HUB_WAIT tries it says how to restart by hand.
@@ -145,7 +152,14 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
         flash = { text: `The hub hasn’t come back. On the host, run ${out.command}`, error: true };
         if (B.alive()) paint();
       }
+      async function forgetDevice(id) {
+        const out = await fetch('/_hub/push/forget', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id }) }).then((r) => r.ok, () => false);
+        if (!out) { flash = { text: 'Could not remove that device. Is the host awake?', error: true }; paint(); return; }
+        load();
+      }
       B.on(main, 'click', (e) => {
+        const forgetter = e.target.closest?.('[data-forget-device]');
+        if (forgetter) forgetDevice(forgetter.dataset.forgetDevice);
         const opener = e.target.closest?.('[data-settings-open]');
         if (opener) B.openSettings({ hash: `#${opener.dataset.settingsOpen}` }, opener);
         if (e.target.closest?.('[data-restart-hub]')) restartHub();