@lovek4d/kickflip 0.7.0 → 0.7.2

package/board/public/app-reader.js

@@ -1,5 +1,5 @@
 // The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "View transcript"
-// (ui-threads.js) and a card's or a lineup's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
+// (ui-threads.js) and a card's or a wave's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
 // place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
 // and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
 // A link in it closes it first, then opens through the shell.
@@ -21,9 +21,12 @@ BoardView.part((B) => {
   let log = null;
   let stopReading = null;
 
-  // A row of the transcript (transcript.mjs); a call with its output opens it on a tap of its line.
-  function rowHtml(r, i) {
+  // A row of the transcript (transcript.mjs); a call with its output opens it on a tap of its line. What Claude says,
+  // its text rows and its result, is markdown in compact styles, linking the board's refs
+  // (docs/adr/2026-11-09-1453-orchestrator-messages-replies-and-transcript-text-are-markdown.md).
+  function rowHtml(r, i, links) {
     const tag = r.label ? `<span class="reader-tag">${esc(r.label)}</span>` : '';
+    if (r.kind.split(' ')[0] === 'text') return `<div class="reader-row ${r.kind} md">${tag}${markdown(r.body, links)}</div>`;
     if (r.out === undefined) return `<div class="reader-row ${r.kind}">${tag}${esc(r.body)}</div>`;
     const on = log.opened.has(i);
     return `<div class="reader-row tool call" data-call="${i}"><span class="reader-caret">${on ? '▾' : '▸'}</span>${tag}${esc(r.body)}</div>${on ? `<div class="reader-out">${esc(r.out)}</div>` : ''}`;
@@ -42,10 +45,11 @@ BoardView.part((B) => {
   }
   function drawLog() {
     const { rows, stream, raw, text } = log;
+    const links = linkContext(state.board?.items || [], null);
     body.innerHTML = !rows.length ? '<p class="muted reader-empty">The log is empty so far.</p>'
       : !stream ? `<pre class="reader-text">${esc(rows.map((r) => `${r.body}\n`).join(''))}</pre>`
       : raw ? (text === null ? '<p class="muted">Loading…</p>' : `<pre class="reader-raw">${esc(text)}</pre>`)
-      : rows.map(rowHtml).join('');
+      : rows.map((r, i) => rowHtml(r, i, links)).join('');
     drawTools();
     drawMore();
   }
@@ -148,7 +152,7 @@ BoardView.part((B) => {
     else openNotes(href.slice(href.indexOf('?')));
   });
   B.on(sheet, 'click', (ev) => {
-    if (ev.target === sheet) { close(); return; }
+    if (BoardUI.onBackdrop(ev, sheet)) { close(); return; }
     const act = ev.target.closest('[data-reader]')?.dataset.reader;
     if (act === 'close') close();
     else if (act === 'raw') { log.raw = !log.raw; log.text = null; drawLog(); follow(); if (log.raw) readRaw(opened); }

package/board/public/app.js

@@ -128,7 +128,7 @@ window.BoardView = (function () {
       board: null,
       fresh: null,
       openItems: new Set(store.get('openItems', [])),
-      // The cards open when the page loaded: Done and Asks hide those past their cap until the owner opens one this visit.
+      // The cards open when the page loaded: Done hides those past their cap until the owner opens one this visit.
       restored: new Set(store.get('openItems', [])),
       threadCache: new Map(),
       edits: new Map(),
@@ -206,7 +206,7 @@ window.BoardView = (function () {
     }
 
     // #review=<PR number> opens that review in the Auto Review lane (app-lanes.js openReview), as a held review's push does.
-    // #selectedCard=<wave>/<id> (or the older #item=) opens that card, and &openItemsCard=<topic id> opens that pill in the pane; push notifications link here, with &reply to land in the thread's reply box
+    // #selectedCard=<file>/<id> (or the older #item=) opens that card, and &openItemsCard=<topic id> opens that pill in the pane; push notifications link here, with &reply to land in the thread's reply box
     // (docs/adr/2026-10-29-1639-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
     let focusKey = null;
     let replyKey = null;
@@ -251,7 +251,7 @@ window.BoardView = (function () {
       if (!band && !state.board?.items.some((i) => i.key === key)) return false;
       if (key) { location.hash = AppRouter.hashWith(location.hash, { selectedCard: key }); readHash(); } else B.openBand({ slug });
       render();
-      if (key) scrollToFocus(); else $(`section.wb[data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
+      if (key) scrollToFocus(); else $(`section.wb[data-lane="todo"][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.

package/board/public/attach.js

@@ -12,6 +12,7 @@
 //                                painted also gets a bubbling attach-change event with detail {id}
 window.BoardAttach = (function () {
   const LIMIT = 20 * 1024 * 1024;
+  const OVER = 'Over 20 MB';
   const state = new Map();
   const listeners = [];
   let seq = 0;
@@ -32,10 +33,17 @@ window.BoardAttach = (function () {
   const paintAll = () => { for (const c of document.querySelectorAll('[data-composer]')) paint(c.dataset.composer, siteOf(c)); };
 
   function upload(site, id, file) {
-    const p = { id: 'f' + ++seq, name: file.name || 'file', type: file.type || 'application/octet-stream', status: 'uploading', progress: 0 };
+    const p = { id: 'f' + ++seq, name: file.name || 'file', type: file.type || 'application/octet-stream', status: 'uploading', progress: 0, source: file };
     if (/^image\//.test(p.type)) p.preview = URL.createObjectURL(file);
     state.set(keyOf(site, id), [...list(site, id), p]);
     if (file.size > LIMIT) { p.status = 'error'; p.error = 'Over 20 MB'; paint(id, site); return; }
+    send(site, id, p);
+  }
+
+  // Sends p's File and paints it uploading; a retry from an error chip runs it again.
+  function send(site, id, p) {
+    const file = p.source;
+    p.status = 'uploading'; p.progress = 0; delete p.error;
     paint(id, site);
     const xhr = new XMLHttpRequest();
     p.xhr = xhr;
@@ -54,6 +62,11 @@ window.BoardAttach = (function () {
     xhr.send(file);
   }
 
+  function retry(site, id, fileId) {
+    const p = list(site, id).find((x) => x.id === fileId);
+    if (p && p.status === 'error' && p.error !== OVER) send(site, id, p);
+  }
+
   function remove(site, id, fileId) {
     const p = list(site, id).find((x) => x.id === fileId);
     if (!p) return;
@@ -107,7 +120,10 @@ window.BoardAttach = (function () {
   document.addEventListener('click', (ev) => {
     const b = ev.target.closest && ev.target.closest('[data-unattach]');
     const c = b && b.closest('[data-composer]');
-    if (c) { ev.preventDefault(); remove(siteOf(c), c.dataset.composer, b.dataset.unattach); }
+    if (c) { ev.preventDefault(); remove(siteOf(c), c.dataset.composer, b.dataset.unattach); return; }
+    const r = ev.target.closest && ev.target.closest('[data-retry]');
+    const rc = r && r.closest('[data-composer]');
+    if (rc) { ev.preventDefault(); retry(siteOf(rc), rc.dataset.composer, r.dataset.retry); }
   });
 
   return {

package/board/public/dialogs.js

@@ -10,9 +10,9 @@
   // 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 (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 } = {}) {
+  function ticketsControl(root, { value = { source: 'none' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject, keyState } = {}) {
     const { esc } = BoardUI;
-    const draft = { prefix: 'INT', ...value };
+    const draft = { ...value };
     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);
@@ -31,12 +31,12 @@
     const workspace = () => linear?.url_key ?? linear?.workspace ?? draft.workspace;
     const newName = () => (draft.newName ?? title()).trim();
     const ready = () => works() && !linear.error;
-    const read = () => draft.source === 'internal' ? { source: 'internal', prefix: draft.prefix || 'INT' }
+    const read = () => draft.source === 'none' ? { source: 'none' }
       : draft.source === 'github' ? { source: 'github', ...(draft.account ? { account: draft.account } : {}) }
       : !ready() ? { source: 'linear', workspace: draft.workspace, team: draft.team, project: draft.project }
       : draft.project === '__new' && isNew ? { source: 'linear', workspace: workspace(), team: draft.team, new_project: newName() }
       : { source: 'linear', workspace: workspace(), team: draft.team, project: draft.project };
-    const valid = () => draft.source === 'internal' ? /^[A-Z]{2,6}$/.test(draft.prefix || 'INT')
+    const valid = () => draft.source === 'none' ? true
       : draft.source === 'github' ? Boolean(repo())
       : Boolean(ready() && draft.team && draft.project && (draft.project !== '__new' || (isNew && newName())));
     const pickDefaults = () => {
@@ -58,17 +58,17 @@
       const team = esc(draft.team || '');
       const note = draft.project === '__new'
         ? (isNew ? `<p class="muted small">Start creates the project in the ${team} team on Linear.</p>` : `<p class="muted small">Creates the project in the ${team} team on Linear.</p>`)
-        : `<p class="muted small">A new card gets a ${team} issue in ${esc(project?.name || draft.project || '')}, in the ${esc(linear.workspace || workspace())} workspace from Hub’s key. Its badge opens it in Linear.</p>`;
+        : `<p class="muted small">A task gets a ${team} issue in ${esc(project?.name || draft.project || '')}, in the ${esc(linear.workspace || workspace())} workspace from Hub’s key, when you answer yes to its ticket question. Its badge opens it in Linear.</p>`;
       return `<div class="tk-grid"><label class="tk-field"><span>Team</span><select data-tk="team">${(linear.teams || []).map((t) => `<option value="${esc(t.key)}"${t.key === draft.team ? ' selected' : ''}>${esc(t.key)} · ${esc(t.name)}</option>`).join('')}</select></label><label class="tk-field"><span>Project</span><select data-tk="project">${(linear.projects || []).filter((p) => p.team === draft.team).map((p) => `<option value="${esc(p.id)}"${p.id === draft.project ? ' selected' : ''}>${esc(p.name)}</option>`).join('')}<option value="__new"${draft.project === '__new' ? ' selected' : ''}>New project…</option></select></label></div>${draft.project === '__new' ? `<div class="tk-new"><input data-tk="newName" value="${esc(draft.newName ?? title())}" aria-label="New Linear project name" placeholder="Project name" maxlength="80" autocomplete="off">${isNew ? '' : `<button type="button" data-tk-create${creating ? BoardUI.BUSY : ''}>Create</button>`}</div>` : ''}${createError ? `<p class="muted small" role="alert">${esc(createError)}</p>` : ''}${note}`;
     }
     function render() {
       const off = !repo();
-      const segment = `<div class="tk-seg" role="group" aria-label="Ticket source">${[['linear', 'Linear'], ['github', 'GitHub issues'], ['internal', 'Internal']].map(([source, name]) => `<button type="button" data-tk-source="${source}" aria-pressed="${draft.source === source}"${source === 'github' && off ? ' aria-disabled="true"' : ''}>${name}</button>`).join('')}</div>`;
+      const segment = `<div class="tk-seg" role="group" aria-label="Ticket source">${[['linear', 'Linear'], ['github', 'GitHub issues'], ['none', 'None']].map(([source, name]) => `<button type="button" data-tk-source="${source}" aria-pressed="${draft.source === source}"${source === 'github' && off ? ' aria-disabled="true"' : ''}>${name}</button>`).join('')}</div>`;
       const why = `<p class="muted small" role="status">GitHub issues need a repo on GitHub, and ${isNew ? 'the repo chosen above' : 'this board’s repo'} isn’t on GitHub.</p>`;
       let detail;
       if (draft.source === 'github' && off) detail = why;
-      else if (draft.source === 'internal') detail = `<label class="tk-field"><span>Prefix</span><input data-tk="prefix" value="${esc(draft.prefix)}" placeholder="INT" maxlength="6" pattern="[A-Z]{2,6}" title="2–6 uppercase letters" autocapitalize="characters" autocomplete="off" spellcheck="false"></label><p class="muted small" data-tk-example>Cards number ${esc(draft.prefix || 'INT')}-1, ${esc(draft.prefix || 'INT')}-2… on this board. The badge opens the card.</p>`;
-      else if (draft.source === 'github') detail = `<div class="who tk-static"><span>Issues in ${esc(repo())}<span class="muted small sub">${isNew ? 'The repo chosen above' : 'The board’s repo, set above'}. A new card opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''}; its badge reads #41.</span></span></div>`;
+      else if (draft.source === 'none') detail = '<p class="muted small">Every card is a task, numbered T-1, T-2… on this board, with no ticket. Its badge reads Task.</p>';
+      else if (draft.source === 'github') detail = `<div class="who tk-static"><span>Issues in ${esc(repo())}<span class="muted small sub">${isNew ? 'The repo chosen above' : 'The board’s repo, set above'}. A task opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''} when you answer yes to its ticket question; its badge then reads #41.</span></span></div>`;
       else detail = linearDetail();
       root.innerHTML = `${status()}${segment}<div class="tk-detail">${noGithub && off && draft.source !== 'github' ? why : ''}${detail}</div>`;
       if (draft.source === 'linear' && ready()) {
@@ -126,11 +126,9 @@
     const input = (e) => {
       const field = e.target.dataset.tk;
       if (!field || (e.type === 'input' && e.target.tagName === 'SELECT')) return;
-      draft[field] = field === 'prefix' ? e.target.value.toUpperCase() : e.target.value;
-      if (field === 'prefix') e.target.value = draft.prefix;
+      draft[field] = e.target.value;
       if (field === 'team') draft.project = isNew ? '__new' : linear.projects?.find((p) => p.team === draft.team)?.id;
       if (field === 'team' || field === 'project') { createError = ''; render(); }
-      if (field === 'prefix') root.querySelector('[data-tk-example]').textContent = `Cards number ${draft.prefix || 'INT'}-1, ${draft.prefix || 'INT'}-2… on this board. The badge opens the card.`;
       change(read(), valid(), { typing: e.type === 'input' });
     };
     root.addEventListener('click', click);
@@ -190,7 +188,7 @@
     el.setAttribute('class', 'sheet');
     el.setAttribute('aria-labelledby', 'newBoardTitle');
     const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-    const draft = { name: '', purpose: '', github: '', remote: '', branch: '', tickets: { source: 'internal', prefix: 'INT' } };
+    const draft = { name: '', purpose: '', github: '', remote: '', branch: '', tickets: { source: 'none' } };
     let tickets;
     let repos = [], signedIn = false, pasted, selected, edited = false, sending = false, closed = false, generation = 0, lookupTimer, linear;
     const controller = new AbortController();
@@ -348,7 +346,7 @@
       } catch (e) { sending = false; fail(e); sync(); }
     });
     el.addEventListener('cancel', (e) => { e.preventDefault(); done(); });
-    el.addEventListener('click', (e) => { if (e.target === el) done(); });
+    el.addEventListener('click', (e) => { if (BoardUI.onBackdrop(e, el)) done(); });
     el.addEventListener('close', () => {
       if (closed) return;
       closed = true;

package/board/public/hub-kit.js

@@ -181,7 +181,7 @@
     if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
   }
 
-  // The one duration picker Snooze, Keep awake, Pause hub and Pause board share (hub/duration.mjs): chips that post
+  // The one duration picker Snooze, Pause hub and Pause board share (hub/duration.mjs): chips that post
   // `name` to `action` at once, then Custom, whose date and time posts as `name` too. While its setting is on, `on`
   // replaces it with when it ends and a button that posts `name`=off.
   function durationPicker({ id, title, icon, action, name, choices, on, button }) {

package/board/public/hub.css

@@ -76,7 +76,6 @@
 .hub-view .dur-custom input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer; }
 .hub-view .dur-custom:focus-within { outline:2px solid var(--accent); outline-offset:2px; border-radius:7px; }
 .hub-view .dur-on .title { font-weight:600; white-space:normal; }
-.hub-view .awake-on { color:var(--color-notice); font-weight:600; }
 .hub-view code { font-family:var(--mono); font-size:.85em; white-space:nowrap; }
 .hub-view footer { color:var(--muted); font-size:12px; margin:1.8rem 2px 0; }
 .hub-view .host { font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }

package/board/public/linear-key.js

@@ -1,4 +1,4 @@
-// Hub's token slots: Linear's key and Slack's user token. Hub settings › Linear and › Slack mount them, and the Tickets
+// Hub's token slots: Linear's key and Slack's user token. The Hub settings modals for 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>`.
@@ -136,7 +136,7 @@
     }
     dialog.addEventListener('click', (e) => {
       if (e.target.closest?.('[data-lk-done]')) { close(); return; }
-      if (e.target !== dialog) return;
+      if (!BoardUI.onBackdrop(e, dialog)) return;
       const r = dialog.getBoundingClientRect();
       if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) close();
     });

package/board/public/new-task.js

@@ -75,7 +75,7 @@ globalThis.BoardNewTask = (function () {
     B.newTaskKey = newTaskKey;
     B.on(document, 'keydown', newTaskKey);
     B.on($('#sheetClose'), 'click', closeSheet);
-    B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
+    B.on(sheet, 'click', (ev) => { if (BoardUI.onBackdrop(ev, sheet)) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
     // Discuss has the session grill or prototype the task at once; Implement sends the ask with quick: true, and the
     // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).

package/board/public/prototype-kit.js

@@ -87,7 +87,6 @@
       usage: fake.usage(),
       hub: { tone: 'ok', word: 'healthy', detail: '3 of 3 sites up' },
       sites: fake.sites(),
-      polling: { title: 'Checks every minute while you’re here', lines: ['Next check 12:00pm · last 11:45am, 8 PRs, no change', 'No pushes queued.'], count: 0 },
       settings: [['notifications', 'Notifications', 'Pushes on · Off on weekends · This device on'], ['quiet', 'Quiet hours', '10:00pm – 8:00am · pushes held'],
         ['codex', 'Codex share', 'Auto'], ['rules', 'Rules for every board', '1 rule'], ['closed', 'Closed boards', 'No closed boards']],
     }),
@@ -105,7 +104,7 @@
 
   function hub(data = {}) {
     const d = { ...fake.hub(), header: true, ...data };
-    const { row, tile, nowRow, CHEVRON } = HubUI;
+    const { row, tile, CHEVRON } = HubUI;
     const site = (s) => row({ icon: s.icon, title: esc(s.title), sub: s.status ?? '<span class="st ok">up · listening · every link passes</span>', wrap: true, trail: CHEVRON, href: `/${s.route}/` });
     const settings = d.settings.map(([id, title, sub]) => `<button type="button" class="hub-setting" data-setting="${esc(id)}" data-kit-inert aria-haspopup="dialog"><span class="text"><span class="title">${esc(title)}</span><span class="sub">${esc(sub)}</span></span>${CHEVRON}</button>`).join('');
     const usage = d.usageCard ?? HubUI.usageCard(d.usage);
@@ -114,9 +113,7 @@
 <div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `<span class="st ${esc(d.hub.tone)}">${esc(d.hub.word)}</span> · ${esc(d.hub.detail)}`, wrap: true })}</div>
 <h2 class="label">Boards</h2>
 <div class="group">${d.sites.map(site).join('')}</div>
-<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p>
-<h2 class="label">Polling status</h2>
-<div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div></div>
+<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p></div>
 <section class="hub-settings"><h2 class="label">Hub settings</h2>${settings}</section>
 <div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }

package/board/public/router.js

@@ -6,7 +6,7 @@
 //   board {route, hash}         /<route>/, hash such as #selectedCard=<key>&openItemsCard=<topic id>, or the older #item=<key>&reply
 //   settings {route}            /<route>/settings.html, a request to open the modal over that board
 //   questions {route, id}       /<route>/questions.html#<id>
-//   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<lineup slug>, and plan.html, which the board
+//   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<wave slug>, and plan.html, which the board
 //                               redirects there
 //   hub {hash}                  /_hub/ with a settings modal named by hash; legacy /_hub/settings opens the same modals
 //                               ([hub settings open as modals](docs/adr/2026-11-01-1221-hub-settings-open-as-modals.md)),

package/board/public/sidebar.css

@@ -21,7 +21,7 @@
 @media (hover: hover) { .sidebar .sb-close:hover { background: var(--chip); color: var(--text); } }
 .sidebar .sb-label { margin: 12px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
 .sidebar .sb-group { display: flex; flex-direction: column; gap: 2px; }
-.sidebar .sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
+.sidebar .sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; overscroll-behavior: contain; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
 .sidebar .sb-scroll > section { flex: none; }
 .sidebar .sb-utility { padding-top: 6px; }
 .sidebar .sb-boards { margin-top: auto; }
@@ -150,11 +150,11 @@ html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-
 @starting-style { .sidebar.ks-on .ks-label-hint { opacity: 0; } }
 /* The label is the bar's containing block: left 0 is the BOARDS text's edge, and right -8px crosses the label's 8px
    side margin (.sb-label) to the rows' right edge. The bar sits in the label's 4px bottom margin. */
-.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--accent);
+.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--color-notice);
   transform-origin: 0 50%; animation: ks-drain linear forwards; }
 @keyframes ks-drain { to { transform: scaleX(0); } }
 .sidebar .ks-u { transition: color 200ms linear; }
-.sidebar.ks-on .ks-u { color: var(--accent); transition: color 150ms linear; }
+.sidebar.ks-on .ks-u { color: var(--color-notice); transition: color 150ms linear; }
 @starting-style { .sidebar.ks-on .ks-u { color: inherit; } }
 @media (prefers-reduced-motion: reduce) {
   .sidebar .ks-bar { animation: none; }

package/board/public/sidebar.js

@@ -236,7 +236,7 @@
       }
       el.addEventListener('click', (e) => {
         if (sending) return;
-        if (e.target === el || e.target.closest('[data-failed-close]')) { done(); return; }
+        if (BoardUI.onBackdrop(e, el) || e.target.closest('[data-failed-close]')) { done(); return; }
         const dismiss = e.target.closest('[data-failed-dismiss]');
         const retry = e.target.closest('[data-failed-retry]');
         if (dismiss) {
@@ -309,7 +309,7 @@
       el.innerHTML = shortcuts();
       el.addEventListener('cancel', (e) => { e.preventDefault(); closeHelp(); });
       el.addEventListener('close', closeHelp);
-      el.addEventListener('click', (e) => { if (e.target === el) closeHelp(); });
+      el.addEventListener('click', (e) => { if (BoardUI.onBackdrop(e, el)) closeHelp(); });
       help = { el, previous: document.activeElement };
       document.body.appendChild(el);
       el.showModal();

package/board/public/style.css

@@ -93,8 +93,10 @@ button.chip { border: 0; }
 /* The footer status of a stale card, and of one the orchestrator stalled (ui-cards.js timeLine). */
 .card-stale { color: var(--muted); }
 .card-stalled { color: var(--color-danger); }
-/* A bumped-out card's footer status, and a bumped ready card's while the host holds new work (ui-cards.js timeLine). */
-.card-bumped-out, .card-host-held { color: var(--muted); }
+/* A bumped ready card's footer status while the host holds new work, and a paused build's (ui-cards.js timeLine);
+   a build still pausing reads orange. */
+.card-host-held, .card-paused { color: var(--muted); }
+.card-pausing { color: var(--color-notice); }
 .sub.next.idle { color: var(--muted); }
 .sub.refused { color: var(--color-danger); }
 .toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom));
@@ -139,7 +141,7 @@ button.chip { border: 0; }
 .thread-more:active { background: var(--accent-soft); }
 .thread-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .thread-more .n { color: var(--muted); font-weight: 400; }
-/* [answered asks have their own section below Done, and Done and Asks show 10 cards at a time](docs/adr/2026-11-03-0259-answered-asks-have-their-own-section-below-done.md): Done's and Asks' Show more, the thread's look as a row of the lane's list */
+/* [answered asks fold into the one Done list](docs/adr/2026-11-09-1430-answered-asks-fold-into-the-one-done-list.md): Done's Show more, the thread's look as a row of the lane's list */
 .list > .thread-more { width: 100%; margin: 0; border-top: 1px solid var(--line); border-radius: 0; }
 
 @media (max-width: 560px) {
@@ -155,7 +157,7 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wv-link:disabled { color: var(--muted); cursor: default; }
 .wv-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--color-notice); }
 /* docs/adr/2026-11-03-1840-waves-are-bands-in-todo.md: each wave is a lane-style band inside Todo's list. */
-.wb + .wb, .wb-loose { border-top: 1px solid var(--line); }
+.wb + .wb { border-top: 1px solid var(--line); }
 .wb-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; padding: 5px 12px;
   background: var(--band); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
 .wb-head:hover { background: color-mix(in srgb, var(--band), var(--text) 5%); }
@@ -173,7 +175,6 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
   background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; cursor: default; }
 .wb-done { padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
 .wb-done a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
-.wb-loosehead { cursor: default; }
 .wb-counts { position: relative; border: 0; background: none; padding: 4px 0; font: inherit; cursor: help; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .wb-tip { display: none; position: absolute; right: 0; top: 100%; z-index: 6; margin-top: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; text-align: left; }
 .wb-counts:hover .wb-tip, .wb-counts.open .wb-tip { display: block; }
@@ -181,18 +182,6 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wb-counts .wv-review { color: var(--color-info); }
 .wb-counts .wv-progress { color: var(--color-notice); }
 .wb-counts .wv-todo, .wb-counts .wv-done { color: var(--color-quiet); }
-.wb-lane + .wb-lane, .wb-lane + .wb-loose { border-top: 1px solid var(--line); }
-.wb-loosehead:hover { background: var(--band); }
-/* A wave card's step number, inside its id chip, and its ⋯ menu. */
-.wn { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 5px; margin-right: 4px; border-right: 1px solid var(--line); }
-.wb .item, .wb .item > summary .title-wrap { position: relative; }
-.wb-dots[aria-expanded="true"] { color: var(--text); background: var(--chip); }
-.wb-dots svg { display: block; }
-.wb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 160px; padding: 4px;
-  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
-.wb-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; min-height: 0; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
-.wb-menu button:hover:not(:disabled) { background: var(--chip); }
-.wb-menu button:disabled { color: var(--muted); cursor: default; }
 .lane[data-lane="todo"] > .list:has(.wb) { overflow: visible; }
 .nav a.icon { display: inline-flex; align-items: center; padding: 4px; color: var(--muted); }
 .nav a.icon:hover { color: var(--text); }
@@ -218,9 +207,6 @@ code { overflow-wrap: anywhere; }
 /* A file input draws its "Choose File" text at the 16px coarse-pointer size, wider than the button; iOS Safari widens the page to fit it. */
 .attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; font-size: 0; }
 .row > .attach + .muted { flex: 1; min-width: 0; }
-/* The ⌘↵ / Ctrl+↵ hint left of Send: only where there is a keyboard to press it on. */
-.send-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
-@media (hover: hover) and (pointer: fine) { .send-hint { display: inline; } }
 /* A composer's text box (BoardUI.dropZone), its attach button inside at the bottom right with the text kept clear of it:
    while files are dragged over the composer, attach.js marks it .dragging and the box gets a dashed accent outline
    with Drop to attach over it. */
@@ -317,7 +303,7 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 }
 /* The hub lives at the tailnet root, outside this site, so its link is root-absolute. */
 .brand { align-items: center; }
-.hub { display: inline-flex; flex: none; }
+a.hub { display: inline-flex; flex: none; }
 .hub img { width: 32px; height: auto; display: block; image-rendering: pixelated; }
 @keyframes pulse { 50% { opacity: .35; } }
 /* A lane's folds are inset boxes in its list, so they read as part of that lane, not as more lanes. */
@@ -350,7 +336,7 @@ form[data-reply] .icons { display: inline-flex; flex: none; margin-left: auto; }
 /* A composer's send buttons (ui.js sendButton), each with its key as a small gray hint where there is a keyboard and
    room. A pair takes a row of two halves; a Todo card's reply box wraps its pair under the row. */
 .send-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
-.send-actions button, [data-sends] button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+.send-actions button, [data-sends] button, .view-questions .bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .send-actions button { min-height: 44px; }
 form[data-reply] .row { flex-wrap: wrap; gap: 6px; }
 form[data-reply] .row > .send-actions { flex: 0 0 100%; margin-top: 4px; }
@@ -392,12 +378,18 @@ button.attach:disabled { opacity: .35; }
 /* A New card's "waiting", until the orchestrator picks it up: grey, its dot still. */
 .pickup-wait { color: var(--muted); font-size: 12px; font-weight: 600; }
 .pickup-wait .working-dot { background: currentColor; animation: none; }
-.msg.link { padding: 0 10px; margin: 4px 0; font-size: 13px; }
-.msg.builder-status { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--color-notice); overflow-wrap: anywhere; }
+/* Every status line shares this spacing and gutter: the mark sits in the first 23px, and wrapped text hangs under the
+   first line's text, never under the mark. A fold's summary hangs the same way inside its box. Each kind keeps only its colour. */
+.status-line { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
+div.status-line { padding-left: 33px; text-indent: -23px; }
+.status-line > summary { padding-left: 23px; text-indent: -23px; }
+.status-line > ol { text-indent: 0; }
+.msg.builder-status { color: var(--color-notice); }
 .msg.builder-status .working-dot { animation: none; }
-.msg.request { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.msg.request { color: var(--muted); }
 .msg.request.readied { color: var(--color-success); }
-.msg.agent { padding: 0 10px; margin: 4px 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
+.msg.request.hub.fault { color: var(--color-danger); }
+.msg.agent { font-weight: 600; }
 .msg.agent.started { color: var(--color-notice); } .msg.agent.finished { color: var(--color-success); }
 .msg.agent .muted { font-weight: 400; }
 /* A planner's line in the thread, dot included, is the owner's blue; its finish stays green
@@ -420,7 +412,6 @@ button.attach:disabled { opacity: .35; }
 .sub.agent.stale .working-dot { animation: none; }
 /* The one class every paused status takes, gray: the card and thread line, the header, the hub banner. */
 .paused { color: var(--muted); font-weight: 600; }
-.msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
 .msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
 .msg.calls summary::-webkit-details-marker { display: none; }
 .msg.calls[open] summary .mark-icon { transform: rotate(90deg); }
@@ -473,7 +464,7 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .view-only-strip b { color: var(--accent); }
 /* A board out of reach (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md): it reads as before,
    undimmed, and only the buttons that send, ui.js SENDS, are held, the labelled ones saying why; app-header.js stops their taps. */
-.offline :is(form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-band-move], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]) { opacity: .55; cursor: not-allowed; }
+.offline :is(form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]) { opacity: .55; cursor: not-allowed; }
 /* With no copy to show, the landing takes the board's place: the kickflip mark and two lines, as hub/front-door.mjs's page has them. */
 .down-landing { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 24px; text-align: center; }
 .down-landing-mark { display: block; margin-bottom: 8px; width: 70px; height: 60px; object-fit: contain; }
@@ -653,9 +644,20 @@ main > * { transition: opacity .25s ease; }
 .view-questions .opt .lbl { font-weight: 600; }
 .view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .view-questions .opt .det { color: var(--muted); font-size: 13px; }
-.view-questions .opt .suggested { margin-left: 6px; white-space: nowrap; }
-.view-questions .opt .suggested-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
-.view-questions .opt .suggested-why a { color: var(--accent); }
+/* A question's context and an option's detail take markdown at body size: headings drawn as bold lines, blocks tight
+   (docs/adr/2026-11-09-1500-a-questions-descriptions-are-markdown-and-its-text-is-one-brief-line.md). So does any .md
+   box: the orchestrator's thread messages, markdown replies and View transcript's text rows
+   (docs/adr/2026-11-09-1453-orchestrator-messages-replies-and-transcript-text-are-markdown.md), whose blocks break the
+   lines, not the text's own newlines. */
+:is(.msg .body, .reader-row).md { white-space: normal; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) { overflow-wrap: anywhere; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) :is(p, ul, ol, blockquote, pre, table) { margin: 0 0 6px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: 600; margin: 6px 0 2px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) :is(ul, ol) { padding-left: 18px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) :is(pre, code) { white-space: pre-wrap; font-size: 12px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) table { display: block; max-width: 100%; overflow-x: hidden; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det, .md) > :last-child { margin-bottom: 0; }
+.view-questions .opt .suggested-why { margin-top: 4px; color: var(--color-info); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
 .view-questions .note { margin-top: 4px; }
 .view-questions .ans { background: var(--accent-soft); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
 .view-questions .rep { background: var(--claude); border-radius: 9px; padding: 7px 10px; margin-top: 6px; font-size: 13px; }
@@ -687,7 +689,6 @@ main > * { transition: opacity .25s ease; }
 .view-questions .q.resolved .reask-line { margin-top: 10px; }
 .view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg); z-index: 2;
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
-.view-questions .bar .send-hint { margin-left: auto; }
 /* The + rides above the sticky Send bar rather than over its Send. */
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
@@ -739,18 +740,18 @@ main > * { transition: opacity .25s ease; }
 .view-notes .plan li { margin: 3px 0; }
 .view-notes .plan li.nested { margin-left: 20px; }
 .view-notes .plan code { font-size: 12.5px; background: var(--chip); border-radius: 4px; padding: 0 3px; }
-.view-notes .plan pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
-.view-notes .plan pre code { background: none; padding: 0; overflow-wrap: normal; }
+.view-notes .plan pre { white-space: pre-wrap; overflow-x: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
+.view-notes .plan pre code { background: none; padding: 0; }
 .view-notes .plan blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
 .view-notes .plan hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
 .view-notes .plan a { color: var(--accent); }
-.view-notes .md-table { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
-.view-notes .md-table table { border-collapse: collapse; font-size: 13px; line-height: 1.4; }
-.view-notes .md-table th, .view-notes .md-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); min-width: 5em; overflow-wrap: normal; }
+.view-notes .md-table { overflow-x: hidden; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+.view-notes .md-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
+.view-notes .md-table th, .view-notes .md-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
 .view-notes .md-table th { background: var(--bg); font-weight: 600; }
 .view-notes .md-table tr:last-child td { border-bottom: 0; }
-.view-notes .md-table .wide { min-width: 14em; }
-.view-notes .md-table .wider { min-width: 24em; }
+/* The sidebar and every pane never scroll sideways: content wraps at the pane's width, overflow-x hidden is the last guard. */
+.view-questions, .view-notes, .reader-sheet, .pane-viewer { overflow-x: hidden; }
 /* A framed page (view-frame.js) fills the space beside the header, and scrolls inside its frame. */
 .view-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
 .view-frame > .top { flex: none; }
@@ -777,9 +778,7 @@ main > * { transition: opacity .25s ease; }
   .sheet.keyboard-sheet { --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - max(12px, env(safe-area-inset-top)))); }
 }
 
-/* Typing, a text field focused (shell.js sets :root.typing): the floating + dims and stops taking taps, and the page stays as it is. */
-:root.typing .fab { opacity: .35; pointer-events: none; }
-/* On a phone the + hides while typing, so it never sits over the keyboard's field. */
+/* Typing, a text field focused (shell.js sets :root.typing). Only a phone changes: the + hides, so it never sits over the keyboard's field; wider screens keep it as it is. */
 @media (max-width: 699px) {
   :root.typing .fab { display: none; }
   /* The board page bottom bar hides too; --app-bottom stays, so the page does not move. */
@@ -951,7 +950,7 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .deck-opts button.rec { border-color: var(--accent); }
 .deck-opts button.armed { background: var(--color-notice); border-color: var(--color-notice); color: #000; font-weight: 600; }
 .deck-opts .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
-.deck-opts small { display: block; color: var(--muted); font-size: 12.5px; }
+.deck-opts .det { color: var(--muted); font-size: 12.5px; font-weight: 400; }
 .deck-prompt { margin: 0; padding: 0; list-style: none; }
 .deck-prompt li.prompt { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
 .deck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -1005,3 +1004,4 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 }
 /* The Send bar is the last thing on its page: only the phone nav under it is left clear, so its background runs to the edge. */
 body .view-questions main { padding-bottom: var(--app-bottom, 0px); }
+.pfile.retry { cursor: pointer; }