@lovek4d/kickflip 0.4.0 → 0.5.3

package/board/public/ui-sidebar.js

@@ -14,6 +14,11 @@
     pulse: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
     close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
     plus: '<path d="M12 5v14M5 12h14"/>',
+    // A starting board's step icons, one per START_STEPS key. No open icon set (Lucide, Tabler) has a skateboard, so landing's
+    // deck with upturned ends over two wheels is drawn here.
+    cloning: '<path d="M12 4v11M7.5 10.5 12 15l4.5-4.5M5 20h14"/>',
+    starting: '<path d="m5 7 5 5-5 5M12 18h7"/>',
+    landing: '<path d="M2.5 9c0 1.7 1.2 3 3 3h13c1.8 0 3-1.3 3-3"/><circle cx="7.5" cy="16.5" r="2"/><circle cx="16.5" cy="16.5" r="2"/>',
     moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
     up: '<circle cx="12" cy="12" r="9"/><path d="m8 12 4-4 4 4"/><path d="M12 16V8"/>',
   };
@@ -64,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();
@@ -149,11 +154,12 @@
       + `<dl class="fs-facts">${fact('Repo', s.repo && esc(repoLabel(s.repo, home)))}${fact('Branch', s.branch && `<code>${esc(s.branch)}</code>`)}`
       + `${fact('Tickets', s.tickets && esc(ticketsLabel(s.tickets)))}${fact('Asked', s.askedAt && esc(askedWhen(s.askedAt, now)))}</dl>`
       + '<p class="fs-refused" role="alert" hidden></p>'
-      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
+      + `<div class="sheet-actions fs-actions"><button type="button" data-failed-dismiss>Dismiss</button>${s.branch && !s.joined ? '<button type="button" class="primary" data-failed-retry>Retry</button>' : ''}</div></div>`;
   }
 
   // A starting board's three steps (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md):
-  // s.step is cloning, starting (the orchestrator's session) or landing (the session joining the hub), since s.stepAt.
+  // s.step is cloning, starting (the orchestrator's session, until it joins the hub) or landing (the joined board, until it
+  // listens), since s.stepAt.
   // Cloning fills its bar to git's percent; the later steps run the bars' pulse, never a fill.
   const START_STEPS = { cloning: 'cloning', starting: 'starting orchestrator', landing: 'landing it' };
   const STEP_KEYS = Object.keys(START_STEPS);
@@ -170,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;
@@ -203,7 +212,7 @@
     const pending = (data?.starting || []).map((s) => (s.failed
       ? `<button type="button" class="sb-row sb-starting sb-failed" data-starting="${esc(s.route)}" data-failed-start="${esc(s.route)}" aria-haspopup="dialog">${plus}`
         + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span><span class="sb-sub">failed to start</span></span></button>`
-      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}">${plus}`
+      : `<div class="sb-row sb-starting" data-starting="${esc(s.route)}"><span class="icon sb-plus sb-start-icon" aria-hidden="true">${svg(ICONS[s.step], 20)}</span>`
         + `<span class="sb-text"><span class="sb-title">${esc(s.title)}</span>${startSteps(s)}<span class="sb-sub sb-step">${esc(startCaption(s, now))}</span></span></div>`)).join('');
     const newBoard = `<button type="button" class="sb-row sb-new" data-new-board aria-haspopup="dialog">${plus}<span class="sb-text"><span class="sb-title">New board</span></span></button>`;
     const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
@@ -225,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, 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) {
@@ -13,10 +13,13 @@
   }
   // A message's state comes from domain.mjs threadOf.
   const stateOf = (m) => m.state || (m.reply ? 'replied' : 'waiting');
-  const msgFooter = (m) => ({
-    working: () => `<div class="reply muted small">${workingLine}</div>`,
-    waiting: () => '<div class="reply muted small">Waiting for Claude…</div>',
-  }[stateOf(m)] || (() => ''))();
+  // A message's footer: the tap it came from (m.status, such as "answers submitted"), then, to its right, Claude's
+  // pick-up while it waits (docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
+  const PICK_UP = { working: workingLine, waiting: 'Waiting for Claude…' };
+  const msgFooter = (m) => {
+    const parts = [m.status && `<span class="foot-status">${statusMark(m.status)}${esc(m.status)}</span>`, PICK_UP[stateOf(m)]].filter(Boolean);
+    return parts.length ? `<div class="reply muted small">${parts.join('')}</div>` : '';
+  };
   // Each reply becomes Claude's own message at the time it was written, quoting the owner's message
   // when other messages came between them. A reply with no time follows its message.
   const withReplies = (msgs) => {
@@ -29,26 +32,27 @@
   // 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>`;
-  // batched: an answer followed by another of the owner's answers in its state, which carries the batch's Waiting for Claude.
+        <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>`
     : m.kind === 'ask-link' ? `<div class="msg link"><a href="${esc(m.link)}">${esc(m.text)} →</a></div>`
-    : m.request ? `<div class="msg request">${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
-    : m.kind === 'status' ? `<div class="msg builder-status${m.planner ? ' planner' : ''}"><span class="working-dot" aria-hidden="true"></span>${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
-    : m.kind === 'calls' ? `<details class="msg calls"><summary>${esc(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
-    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}"><span class="agent-dot" aria-hidden="true"></span>${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
+    : m.request ? `<div class="msg request">${statusMark(m.text)}${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'questions' ? `<div class="msg builder-status planner new-questions">${statusMark('questions')}<a href="${esc(m.link)}">${esc(m.text)}</a> <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'status' ? `<div class="msg builder-status${m.planner ? ' planner' : ''}">${mark('<span class="working-dot"></span>')}${linkText(m.text, links)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
+    : m.kind === 'calls' ? `<details class="msg calls"><summary>${statusMark('judgment calls')}${esc(m.text)}'s judgment calls · ${m.calls.length} · ${m.verified ? `verified ${esc(time(m.verified.at))}` : 'not verified yet'}</summary><ol>${m.calls.map((c) => `<li>${linkText(c, links)}</li>`).join('')}</ol>${m.verified?.note ? `<div class="small">Verified: ${linkText(m.verified.note, links)}</div>` : ''}</details>`
+    : m.kind === 'agent' ? `<div class="msg agent ${m.finished ? 'finished' : 'started'}${m.planner ? ' planner' : ''}">${mark('<span class="agent-dot"></span>')}${esc(m.text)} <span class="muted">· ${esc(time(m.ts))}${m.eta ? ` · ${esc(etaLine(m.eta))}` : ''}</span></div>` : `<div class="msg ${m.who === 'love' ? 'love' : m.who === 'claude' ? 'claude' : 'other'}"${m.eventId ? ` data-event="${esc(m.eventId)}"` : ''}>
         ${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>`);
 
   const STEP = 3;
   const UNREAD_CAP = 10;
-  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link']);
+  const NOT_MESSAGE = new Set(['status', 'agent', 'calls', 'ask-link', 'questions']);
   const isMessage = (m) => !NOT_MESSAGE.has(m.kind);
   // Only Claude's and GitHub's messages are unread, as on the badge (domain.mjs othersAt, ui-cards.js unreadCount); the
   // orchestrator's answer to a builder's ask never is.
@@ -92,5 +96,14 @@
     return `<button type="button"${tone ? ` class="${tone}"` : ''} data-confirm="finish" data-key="${esc(it.key)}">Done</button>`;
   }
 
-  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton });
+  // docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md
+  // A card's open questions asked since seenAt as one blue line in its thread, at the newest one's time, linking to the
+  // first: it.questions from the board. → [line], or [] with none new or no seen mark.
+  function newQuestionsLine(questions, seenAt) {
+    const fresh = seenAt ? (questions?.askedAt || []).filter((t) => String(t) > seenAt) : [];
+    if (!fresh.length) return [];
+    return [{ ts: fresh.at(-1), who: 'claude', kind: 'questions', text: `${fresh.length} new question${fresh.length === 1 ? '' : 's'}`, link: `questions.html#${encodeURIComponent(questions.first)}` }];
+  }
+
+  Object.assign(globalThis.BoardUI, { threadMessages, withReplies, doneButton, newQuestionsLine });
 })();

package/board/public/ui.js

@@ -13,6 +13,9 @@
     if (s < 86400) return Math.round(s / 3600) + 'h ago';
     return Math.round(s / 86400) + 'd ago';
   };
+  // How long ago a card's status was first set, as its status line ends: "just now", "14m", "3h", "2d"
+  // (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md).
+  const lasted = (iso) => ago(iso).replace(/ ago$/, '');
   const since = (iso) => {
     const s = (Date.now() - new Date(iso).getTime()) / 1000;
     return s < 60 ? 'just now' : s < 3600 ? Math.round(s / 60) + ' min ago' : s < 86400 ? Math.round(s / 3600) + ' h ago' : Math.round(s / 86400) + ' d ago';
@@ -49,23 +52,50 @@
   }
   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 ELLIPSIS = icon('<circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/>');
-  // Asks Claude for throwaway prototypes of one item (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
-  function protoButton(id, state = null, { label = 'Ask for prototypes' } = {}) {
-    if (state?.pending) return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" data-proto-pending="${esc(state.pending)}" aria-label="Prototypes are being made" title="Prototypes are being made">${ELLIPSIS}</button>`;
-    return `<button type="button" class="attach proto-ask" data-proto="${esc(id)}" aria-label="${esc(label)}" title="${esc(label)}">${EYE}</button>`;
-  }
-  // latestBump is the data.id of the newest ask-bump event.
-  const protoNotice = (eventId, latestBump) => (latestBump === eventId
-    ? { text: 'Prototypes are being made.', bump: false }
-    : { text: 'Prototypes are being made. Bump them to the top of the queue?', bump: true });
+  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.
+  const mini = (body, cls = '') => `<svg class="mark-icon${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+  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': 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'),
+  };
+  const mark = (inner = '') => `<span class="mark" aria-hidden="true">${inner}</span>`;
+  const statusMark = (words) => mark(MARK_ICONS[words] || '');
   const PENCIL = icon('<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>');
   const BUMP = icon('<path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/>');
   // Deletes or edits a pending ask or thread message; app-asks.js handles [data-withdraw] and [data-edit] on one path.
@@ -280,6 +310,38 @@
     return promise;
   }
 
+  // docs/adr/2026-11-04-2320-a-merge-tap-waits-its-turn-to-land.md
+  // A tap whose change shows only in a later board: its button draws BUSY while pending.has(id), id being
+  // "<card key>:<action>", whatever repaints it, until settle(board) finds a board made after the tap's answer for which
+  // 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, 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)) pending.drop(id);
+    },
+  };
+
   // While a board restarts, the hub answers its own 502 page, and a request can fail outright. fetchJSON waits that out:
   // on a network error, a 5xx or a body that isn't JSON it calls onWait(waitedMs) and retries with a growing backoff,
   // then throws once about limit ms have passed. Any other answer resolves {ok, status, body}, a 404's {error} included.
@@ -309,7 +371,7 @@
 
   globalThis.BoardUI = {
     LINK_ARROW,
-    esc, record, time, ago, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, fetchJSON, RESTARTING, restartNotice,
-    attachments, attachButton, dropZone, pendingFiles, protoButton, protoNotice, withdrawButton, editButton, bumpButton, cardBumpButton, workingLine, BADGE_TONES, badge,
+    esc, record, time, ago, lasted, since, clock, etaLine, cardTime, replyBody, setHTML, closeDetails, BUSY, waitOn, pending, fetchJSON, RESTARTING, restartNotice,
+    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-frame.js

@@ -85,6 +85,7 @@
         B.on(doc, 'click', (e) => tap(e, win));
         // Switch mode (sidebar.js) answers keys and clicks in the frame as it does the shell's own.
         if (ctx.keydown) B.on(doc, 'keydown', ctx.keydown, true);
+        if (B.newTaskKey) B.on(doc, 'keydown', B.newTaskKey);
         if (ctx.pointerdown) B.on(doc, 'pointerdown', ctx.pointerdown, true);
         ctx.loaded(url, title);
       });

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();