@leftoff/cli 0.9.8 → 0.9.9-beta.10

package/ui/app.js

@@ -15,18 +15,20 @@ import { canStartPull, pullStep, pullRelease } from './pull.js'
 import { navHideStep, NAVHIDE_TYPING } from './navhide.js'
 import { openLightbox } from './lightbox.js' // 0.9.8: the image preview
 import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (pdf.js loads on the first PDF)
-import { isBlank, composerKey, isTouchUi, composerHeight } from './composer.js' // 0.9.8 the Live composer
+import { isBlank, composerKey, isTouchUi, composerHeight, composerBoxHtml, keepFocusAfterSend, letGoOfKeyboard } from './composer.js' // 0.9.8 the Live composer
+import { startPageHtml, startPick, startAsksBanner, headlessBarHtml, modePillHtml, modeLabel, startsSettingHtml, localPillHtml, lockedAttrs, lockHtml, startViewerLocal as startViewerAt, startTexts, fillStartTexts, browseTarget, startPairAskHtml, typedPath, fillApproved } from './start.js' // 0.9.9 New session
 import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
 import { wireTips } from './tips.js'
+import { factHtml } from './facts.js' // 0.9.9 the session page's info cards
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
-import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
+import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml, askDocked, askDockHtml, askSlimHtml, askRows, askBottom } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, restoreHeadline, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji, boardMachineFilter, machineOnlyLabel } from './machines.js'
-import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking, liveBoxKind, liveThreadWanted } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { anyPending, shouldPoll, streamDead, isStale, liveSignature, wakeReason, createWake, createWatchdog, HEARTBEAT_MS, POLL_MS, AWAY_MS } from './live-wake.js' // 0.9.8 live after sleep
 import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
@@ -426,15 +428,15 @@ function goButton(s, { page = false } = {}) {
     if (!j.peer) return ''
     // 0.9.2: "Go ↗" like a local card (a phone cut "Go on <machine>" short); the machine is in its title and label
     const label = 'Go ↗', on = 'Go on ' + s.machine
-    if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled aria-label="' + esc(on) + '" title="' + esc(on + ': Go only works from a Mac’s own browser') + '">' + esc(label) + '</button>'
-    if (!j.supported) return '<span class="go-off"><button type="button" class="btn go" disabled aria-label="' + esc(on) + '" title="' + esc(j.reason || '') + '">' + esc(label) + '</button><span class="why">' + esc(peerWhy(j)) + '</span></span>'
+    if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled aria-label="' + esc(on) + '" data-tip="' + esc(on + ': Go only works from a Mac’s own browser') + '">' + esc(label) + '</button>'
+    if (!j.supported) return '<span class="go-off"><button type="button" class="btn go" disabled aria-label="' + esc(on) + '" data-tip="' + esc(j.reason || '') + '">' + esc(label) + '</button><span class="why">' + esc(peerWhy(j)) + '</span></span>'
     const st = goState.get(s.id)
-    return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="' + esc(label) + '" aria-label="' + esc(on) + '" title="' + esc('Bring this session’s tab to the front on ' + s.machine) + '">' + esc(st ? st.label : label) + '</button>'
+    return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="' + esc(label) + '" aria-label="' + esc(on) + '" data-tip="' + esc('Bring this session’s tab to the front on ' + s.machine) + '">' + esc(st ? st.label : label) + '</button>'
   }
-  if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled title="Go switches tabs on the machine running Leftoff, so it only works from that machine’s own browser (localhost)">Go ↗</button>'
-  if (!j.supported) return '<button type="button" class="btn go" disabled title="' + esc('Can’t jump: ' + (j.reason || 'unsupported terminal')) + '">Go ↗</button>'
+  if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled data-tip="Go switches tabs on the machine running Leftoff, so it only works from that machine’s own browser (localhost)">Go ↗</button>'
+  if (!j.supported) return '<button type="button" class="btn go" disabled data-tip="' + esc('Can’t jump: ' + (j.reason || 'unsupported terminal')) + '">Go ↗</button>'
   const st = goState.get(s.id)
-  return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="Go ↗" title="' + esc('Bring this session’s ' + (s.terminal ? s.terminal.label + ' ' : '') + 'tab to the front') + '">' + esc(st ? st.label : 'Go ↗') + '</button>'
+  return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="Go ↗" data-tip="' + esc('Bring this session’s ' + (s.terminal ? s.terminal.label + ' ' : '') + 'tab to the front') + '">' + esc(st ? st.label : 'Go ↗') + '</button>'
 }
 
 // The short reason a cross-machine button is grey (the full one is its tooltip).
@@ -796,6 +798,7 @@ async function viewBoard() {
   state.ghostty = viewer ? viewer.ghostty === true : false
   state.mayAnswer = viewer ? viewer.mayAnswer !== false : true
   try { state.restore = await api('GET', '/v1/restore') } catch { state.restore = null }
+  try { state.starts = await api('GET', '/v1/starts') } catch { state.starts = null } // 0.9.9: starts waiting for a yes here
   const today = new Date(); today.setHours(0, 0, 0, 0)
   const recent = sessions.filter((s) => !(s.status === 'ended' && Date.parse(s.endedAt || 0) < today.getTime()))
   // v0.4.8: sessions with nothing in them yet (no prompt, name or checkpoint,
@@ -835,10 +838,12 @@ async function viewBoard() {
   let html = '<div class="pagehead"><div><h1>Sessions</h1><div class="sub">Every Claude Code session on ' + (multi() ? 'your machines' : 'this machine') + (agentNames().length ? ', plus ' + esc(agentNames().join(' and ')) : '') + ', grouped by what needs you.</div>' + syncChip() + '</div>' +
     '<div class="actions">' + (multi() || agentNames().length ? selectHtml({ id: 'machineFilter', cls: 'btn', label: 'Machine', value: state.machine,
       options: [['', 'All machines'], ...state.health.machines.map((m) => [m, mEmoji(m) + ' ' + m + thisOneSuffix(m, state.health)]), ...agentNames().map((m) => [m, m + ' (agent)'])] }) : '') +
+    '<a class="btn start-new" href="#/new">' + icon('plus') + 'New session</a>' +
     '<a class="btn primary" href="#/catchup/new">' + icon('coffee') + 'Catch me up</a>' +
     '<a class="btn" href="#/digest">' + icon('newspaper') + 'Today’s digest →</a></div></div>'
   html += syncDetails() + staleLine(sessions)
-  html += restoreAsksBanner() + restoreBanner()
+  html += startPairAskHtml(state.starts, { esc, local: startViewerLocal(state.starts && state.starts.viewer), busy: startUi.pairBusy }) // 0.9.9: asked once, at pairing time
+  html += restoreAsksBanner() + startAsksBanner(state.starts, { esc, icon, local: startViewerLocal(state.starts && state.starts.viewer), clock, busy: startUi.busy }) + restoreBanner()
   // Needs you (v0.4.4): every session waiting on you, whatever the filters, longest wait first.
   const needs = needsItems(sessions)
   html += needsStrip(needs, needOpts())
@@ -942,6 +947,7 @@ function boardSearchWire() {
       try { history.replaceState(null, '', hashFor(state.boardFilter || { repos: [], status: null })) } catch {}
       state.route = parseRoute()
       await viewBoard() // the box isn't rebuilt, so the caret stays wherever you've typed to since
+      fillStartTexts($app, startTexts(state.starts, {}))
     }, 160)
   })
   q.addEventListener('keydown', (ev) => {
@@ -1264,7 +1270,7 @@ function paintNeedsCount(n) {
 
 const IS_MAC = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)
 function needOpts(extra = {}) {
-  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, expanded: state.needOpen, turns: state.needTurns, goButton: (s) => goButton(s), agoFn: ago, kbd: IS_MAC ? '⌘↵' : 'Ctrl↵', ...extra }
+  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, expanded: state.needOpen, turns: state.needTurns, goButton: (s) => goButton(s), agoFn: ago, kbd: IS_MAC ? '⌘↵' : 'Ctrl↵', composerKeys: isTouchUi(window.matchMedia) ? 'Meta+Enter Control+Enter' : 'Enter Meta+Enter Control+Enter', ...extra }
 }
 
 // ⌘↵ (Ctrl+↵ off a Mac) in a Needs-you text box (the Deny note, a question's
@@ -1392,8 +1398,9 @@ function paintSession(s, data) {
   liveKeeper.before($app)
   $app.innerHTML = sessionPageHtml(s, data)
   liveAfterRender(s.id)
+  fitAskDetail($app)
   if (kf) {
-    const nt = $app.querySelector('.composer-input')
+    const nt = $app.querySelector('.composer-input[data-draft="' + CSS.escape(kf.d || '') + '"]')
     if (nt && nt.dataset.draft === kf.d && !nt.disabled) { nt.focus({ preventScroll: true }); try { const n = nt.value.length; nt.setSelectionRange(Math.min(kf.a, n), Math.min(kf.b, n)) } catch {} }
   } else if (kb && !$app.contains(document.activeElement)) {
     const hits = $app.querySelectorAll(kb)
@@ -1489,12 +1496,14 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
     // 0.9.8: one line each, 44px, an icon and a short label; the group drops under the title as a whole when it doesn't fit beside it
     '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + 'Copy resume</button>' + (s.liveResumeCommand ? '<button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(s.liveResumeCommand) + '" title="Exit the session in its terminal, then run this to bring it back Live">' + icon('copy') + 'Copy Live resume</button>' : '') + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
   html += ownerOfflineNote(s) // 0.9.8: before the facts, where it's seen
+  html += headlessBarHtml(s, { esc, icon, may: state.mayAnswer !== false, busy: modeBusy.get(s.id) || null, local: state.viewerLocal !== false }) // 0.9.9: started from the board: Stop / Resume, Permissions
+  if (s.headless && s.headless.error) headlessErrors.set(s.id, s.headless.error)
   html += '<div class="facts">' +
-    fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
-    fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id) +
-    fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown') +
-    fact('Terminal', (s.terminal ? s.terminal.label : s.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
-  if (isLive(s)) html += (s.needsYou ? sessionNeedsStrip(s) : '') + liveBoxHtml(s, liveV)
+    fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : ''), '', { copy: (s.repo && s.repo.root) || null, what: 'repo folder' }) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap', { copy: s.worktree.path || null, what: 'worktree folder' }) : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—', '', { copy: s.cwd || null, clip: 34 }) + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
+    fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id, '', { copy: s.id, what: 'session id' }) +
+    fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown', '', { copy: s.live === 'open' && s.liveVia === 'pid' && s.pid != null ? String(s.pid) : null, what: 'process id' }) +
+    fact('Terminal', (s.terminal ? s.terminal.label : s.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || ''), '', { copy: s.shortId ? 'cp:' + s.shortId : null, what: 'terminal tab id' }) + '</div>'
+  if (isLive(s)) html += (s.needsYou && !askDocked(s) ? sessionNeedsStrip(s) : '') + liveBoxHtml(s, liveV) // 0.9.9: a permission ask or question docks in Live, in the composer's place
   html += parkRow(s)
   html += spacePicker(s, spv, 'session', s.id)
   html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent, open: prsUi.open, details: prsUi.details }) + '</section>'
@@ -1504,7 +1513,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   // 0.9.8: the last tools it ran and its folder's changes, folded; loads when you open it
   html += '<section class="wid" id="what-it-did">' + whatItDidSection(s, widOf(s.id)) + '</section>'
   // 0.9.8: a live-linked session keeps its permission card and the prompt box together, near the top
-  if (s.needsYou && !isLive(s)) html += sessionNeedsStrip(s)
+  if (s.needsYou && !isLive(s) && !askDocked(s)) html += sessionNeedsStrip(s)
   if (!isLive(s)) html += liveBoxHtml(s, liveV)
   if (s.statusChanges && s.statusChanges.length) {
     html += '<div class="striplabel">Status history</div><div class="strip">' + s.statusChanges.slice(-24).map((c) => '<span class="s-' + esc(c.status) + '" title="' + esc(clock(c.at)) + '">' + esc(LABEL[c.status] || c.status) + '</span>').join('') + '</div>'
@@ -1539,6 +1548,16 @@ function sessionNeedsStrip(s) { return '<section class="needs-strip one" aria-la
 // 0.9.8 polish: the thread is ui/live-view.js (entries, status, sticking to the
 // bottom); Claude's answer is the session's own (markdown, like the terminal).
 const liveKeeper = createLiveKeeper()
+// A long command folds to three lines with "Show all"; where it fits anyway (a wide window), no button.
+function fitAskDetail(root) {
+  for (const c of root.querySelectorAll('.ask-dock .ask-detail.long:not(.open)')) {
+    if (c.scrollHeight > c.clientHeight + 2) continue
+    c.classList.remove('long')
+    const b = c.parentElement && c.parentElement.querySelector('.ask-more'); if (b) b.hidden = true
+  }
+}
+// 0.9.9 the docked ask: which ones show their whole command, and which you chose to reply to instead (this page only)
+const askUi = { open: new Set(), reply: new Set(), groups: new Set() } // groups: the folded ask rows you opened (closed again on a fresh page)
 const liveSeenKey = (id) => 'lo-live-seen:' + id
 function liveSeen(id) { try { return localStorage.getItem(liveSeenKey(id)) } catch { return null } }
 function markLiveSeen(id, at) { try { localStorage.setItem(liveSeenKey(id), at || new Date().toISOString()) } catch {} }
@@ -1554,7 +1573,8 @@ async function liveHow() {
   return state.liveHow
 }
 // Does this session's page show a Live thread (and so fetch one)?
-const liveWanted = (s) => !!(s && isLive(s) && !s.agent && s.codingAgent !== 'codex' && s.capture !== 'hooks')
+// (0.9.9: a session Leftoff started reports as "hooks" but always has its thread: before, its page never fetched it and read "Nothing sent yet")
+const liveWanted = (s) => liveThreadWanted(s)
 // GET the Live thread; what it says is the newest the page knows (0.9.8: the
 // time of the last good answer decides "Reconnecting…" on a pending bubble).
 async function fetchLive(id, { timeoutMs } = {}) {
@@ -1566,9 +1586,9 @@ async function fetchLive(id, { timeoutMs } = {}) {
   } catch (e) { return { messages: [], error: e.message } }
 }
 function liveBoxHtml(s, v) {
-  if (s.agent || s.codingAgent === 'codex' || s.capture === 'hooks') return ''
-  if (!isLive(s)) {
-    if (s.endedAt || s.live === 'closed') return ''
+  const kind = liveBoxKind(s) // 0.9.9: one Leftoff started talks Live whatever reports it
+  if (kind === 'none') return ''
+  if (kind === 'how') {
     const how = state.liveHow
     return '<section class="live-box off" aria-label="Live link"><div class="live-head"><h2>Live <span class="pill soon">Beta</span></h2></div>' +
       '<p class="faint">To send this session messages from here or your phone, and answer its permission prompts, start it with <code>leftoff live</code>' +
@@ -1581,33 +1601,37 @@ function liveBoxHtml(s, v) {
   const now = Date.now()
   const lastClaude = [...msgs].reverse().find((m) => m.from === 'claude')
   if (lastClaude) markLiveSeen(s.id, lastClaude.at)
-  return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
+  // a session Leftoff started that isn't running now: what was said, read-only (Resume here sends again)
+  if (kind === 'readonly') {
+    if (!msgs.length) return ''
+    return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2>' + modePillHtml(s, { esc }) + '<span class="faint">Not running. Resume it to send more.</span></div>' +
+      '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-label="Messages with this session">' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id), inserts: askRows(s), openGroups: askUi.groups, earlier: (v && v.earlier) || 0, may: false }) + '</ol>' +
+      '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div></section>'
+  }
+  // 0.9.9: a waiting permission ask (or question) takes the composer's place; "Reply instead" brings the composer back for that ask
+  const rows = askRows(s)
+  const bottom = askBottom(s, askUi.reply)
+  const dock = bottom === 'dock', docked = bottom !== 'composer'
+  return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2>' + modePillHtml(s, { esc }) + '<span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
     '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
-      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id) }) + '</ol>' +
-      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id), inserts: rows, openGroups: askUi.groups, earlier: (v && v.earlier) || 0, may }) + '</ol>' +
+      '<p class="faint live-empty"' + (msgs.length || rows.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here' + (s.headless ? '' : ' and in the terminal') + '.</p>' +
       '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
     (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
-    composerHtml(s, draft, may) +
+    (dock ? '<div class="ask-dock-wrap">' + askDockHtml({ ...s.needsYou, session: s }, needOpts({ askOpen: askUi.open })) + '</div>' : (docked ? askSlimHtml(s.needsYou) : '') + composerHtml(s, draft, may)) +
     (may ? '' : '<p class="faint">Sending from another device is off. On a Mac, turn on Settings → Privacy &amp; security → Trust my paired devices.</p>') + '</section>'
 }
 // The Live composer: one rounded box, a textarea that starts at one line and
 // grows, and a round ↑ in its corner (dim until there's something to send).
 // No interrupt reaches Claude Code from the board, so while it works the
 // button still sends: the message waits for its next turn, as before.
-const SEND_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>'
-const CLIP_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m21.4 11.1-8.9 8.9a5.5 5.5 0 0 1-7.8-7.8l8.9-8.9a3.7 3.7 0 0 1 5.2 5.2l-8.9 8.9a1.8 1.8 0 0 1-2.6-2.6l8.2-8.2"/></svg>'
 const FILE_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>'
 function composerHtml(s, draft, may) {
   const kbd = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter'
-  const atts = attachList(s.id)
-  const off = !may || (isBlank(draft) && !atts.length)
-  return '<div class="composer live-row' + (may ? '' : ' off') + (atts.length ? ' has-atts' : '') + '" data-sid="' + esc(s.id) + '">' +
-    '<div class="att-chips" aria-label="Attachments"' + (atts.length ? '' : ' hidden') + '>' + atts.map(chipHtml).join('') + '</div>' +
-    '<textarea class="composer-input live-text" rows="1" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" autocomplete="off" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (isTouchUi(window.matchMedia) ? kbd : 'Enter ' + kbd) + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
-    // the phone's own picker (Photo Library, Take Photo, Choose File): any file
-    '<input type="file" class="att-input" multiple tabindex="-1" aria-hidden="true" data-sid="' + esc(s.id) + '"' + (may ? '' : ' disabled') + '>' +
-    '<button type="button" class="composer-attach" data-action="attach" data-id="' + esc(s.id) + '" aria-label="Attach" title="Attach photos or files"' + (may ? '' : ' disabled') + '><span class="composer-clip">' + CLIP_IC + '</span></button>' +
-    '<button type="button" class="composer-send" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '" aria-label="Send" title="Send"' + (off ? ' disabled' : '') + '><span class="composer-dot">' + SEND_IC + '</span></button></div>'
+  return composerBoxHtml({ sid: s.id, submit: 'live', sendAction: 'live-send', draftKey: 'live:' + s.id, draft, may,
+    placeholder: 'Message this session…', label: 'Message this session', boxClass: 'live-row', inputClass: 'live-text',
+    attach: true, atts: attachList(s.id), chipHtml, keys: isTouchUi(window.matchMedia) ? kbd : 'Enter ' + kbd })
 }
 
 // ------------------------------------------------------------ attachments (0.9.8, ui/attach.js)
@@ -1895,6 +1919,7 @@ function syncComposer(ta) {
 }
 document.addEventListener('input', (ev) => { if (ev.target && ev.target.classList && ev.target.classList.contains('composer-input')) fitComposer(ev.target) })
 // Enter on a Mac sends (Shift+Enter: a new line); on a phone Return is a new line. ⌘↵ is the shared handler above.
+// The same for Live and the Needs-you Reply composer: the key presses its own box's ↑.
 document.addEventListener('keydown', (ev) => {
   const ta = ev.target
   if (ev.key !== 'Enter' || !ta || !ta.classList || !ta.classList.contains('composer-input')) return
@@ -1903,8 +1928,8 @@ document.addEventListener('keydown', (ev) => {
   ev.preventDefault()
   const cb = ta.closest('.composer')
   if (ev.repeat || (isBlank(ta.value) && !(cb && attachList(cb.dataset.sid).length))) return
-  const box = ta.closest('.live-box')
-  const btn = box && box.querySelector('[data-submit-for="live"]')
+  const box = ta.closest('.live-box') || ta.closest('.need') || ta.closest('.start-box')
+  const btn = box && box.querySelector('[data-submit-for="' + CSS.escape(ta.dataset.submit || 'live') + '"]')
   if (!btn || btn.disabled) return
   const last = Number(box.dataset.kbdAt || 0)
   if (Date.now() - last < 1500) return
@@ -2092,6 +2117,58 @@ function onWake(ev) {
 }
 for (const t of ['pageshow', 'focus', 'blur', 'online']) window.addEventListener(t, onWake)
 document.addEventListener('visibilitychange', onWake)
+// 0.9.9 Cancel / Edit on a Queued message: the daemon takes it back from
+// Claude Code's queue (only while it still waits; too late says so plainly).
+// Edit then puts its words (and files) back in the box, after anything typed.
+// 0.9.9 Send now on a Queued message: Claude stops its current step and this
+// one runs next (ahead of any queued before it). The daemon says what Claude
+// Code did; too late (Claude already has it) is a plain message.
+async function sendNowClick(btn) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  const msg = btn.dataset.msg
+  if (!sid || !msg || btn.disabled) return
+  const li = btn.closest('.lv')
+  if (li) li.querySelectorAll('.lv-q-btn').forEach((b) => { b.disabled = true })
+  btn.setAttribute('aria-busy', 'true')
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/live/' + encodeURIComponent(msg) + '/sendnow', {})
+    toast(r.result === 'stopped' ? 'Sent now · Claude stopped its step for it' : 'Sending now', 3000)
+  } catch (e) {
+    toast(e.message, 4200)
+  }
+  await refreshLive('sendnow')
+  await render()
+}
+async function queuedClick(btn, edit) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  const msg = btn.dataset.msg
+  if (!sid || !msg || btn.disabled) return
+  const li = btn.closest('.lv')
+  if (li) li.querySelectorAll('.lv-q-btn').forEach((b) => { b.disabled = true })
+  btn.setAttribute('aria-busy', 'true')
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/live/' + encodeURIComponent(msg) + '/cancel', {})
+    const s = state.sessions.find((x) => x.id === sid)
+    if (edit) {
+      const typed = ((state.drafts && state.drafts['live:' + sid]) || '').trim()
+      state.drafts['live:' + sid] = typed ? typed + '\n\n' + (r.text || '') : (r.text || '')
+      const atts = (r.attachments || []).filter((a) => a && a.id)
+      if (atts.length && !(s && s.isLocal === false)) attachUi.by.set(sid, [...attachList(sid), ...atts.map((a) => ({ lid: 'a' + (++attachUi.seq), sid, file: null, name: a.name || 'file', size: a.size || 0, type: a.type || '', kind: a.kind || 'file', status: 'done', sent: a.size || 0, total: a.size || 0, id: a.id, preview: null, thumb: null, error: null }))])
+      else if (atts.length) toast('Its files didn’t come back: attach them again.', 4200)
+    }
+    toast(edit ? 'Taken back · edit it and send again' : 'Cancelled · Claude never saw it', 3000)
+    await refreshLive('cancel')
+    await render()
+    if (edit) { const ta = document.querySelector('.live-box .composer-input'); if (ta && !ta.disabled) { ta.value = state.drafts['live:' + sid] || ''; fitComposer(ta); ta.focus({ preventScroll: true }) } }
+  } catch (e) {
+    toast(e.message, 4200)
+    await refreshLive('cancel')
+    await render()
+  }
+}
+
 async function liveSendClick(btn) {
   const box = btn.closest('.live-box')
   const ta = box && box.querySelector('.live-text')
@@ -2100,6 +2177,7 @@ async function liveSendClick(btn) {
   if (!text && !attachList(sid).length) { if (ta) ta.focus(); return }
   if (btn.disabled || btn.classList.contains('sending')) return
   const hadFocus = !!(ta && document.activeElement === ta)
+  let sent = false // 0.9.9: went through: a phone's keyboard closes
   btn.classList.add('sending'); btn.disabled = true; btn.setAttribute('aria-busy', 'true'); btn.setAttribute('aria-label', 'Sending…')
   try {
     // 0.9.8: attachments still uploading go first; one that failed waits for you (retry or remove)
@@ -2113,6 +2191,7 @@ async function liveSendClick(btn) {
     if (!ta || ta.value.trim() === text) { if (state.drafts) delete state.drafts['live:' + sid]; if (ta) { ta.value = ''; fitComposer(ta) } }
     if (ids.length) { attachUi.by.set(sid, attachList(sid).filter((a) => !ids.includes(a.id))); paintChips(sid) }
     if (r.state === 'failed') toast('Didn’t arrive: ' + (r.error || 'the session isn’t listening'), 4200)
+    else sent = true
     const ol = box && box.querySelector('.live-log')
     if (ol) ol.scrollTop = ol.scrollHeight // your own message: always follow it
     setTimeout(() => { if (state.route && state.route.name === 's') soon() }, 1500)
@@ -2121,7 +2200,11 @@ async function liveSendClick(btn) {
     const nb = document.querySelector('.live-box [data-action="live-send"]')
     if (nb) { nb.classList.remove('sending'); nb.removeAttribute('aria-busy'); nb.setAttribute('aria-label', 'Send') }
     const nt = document.querySelector('.live-box .composer-input')
-    if (nt) { fitComposer(nt); if (hadFocus && !nt.disabled && document.activeElement !== nt) nt.focus({ preventScroll: true }) }
+    if (nt) {
+      fitComposer(nt)
+      if (!keepFocusAfterSend({ ok: sent, touch: isTouchUi(window.matchMedia) })) letGoOfKeyboard(document)
+      else if (hadFocus && !nt.disabled && document.activeElement !== nt) nt.focus({ preventScroll: true })
+    }
   }
 }
 
@@ -2230,7 +2313,8 @@ function spacePicker(s, spv, kind, key) {
       options: [['', own ? 'Default (repo or Mac)' : s.space + ' · ' + (SPACE_WHY[s.spaceSource] || 'default')], ...opts.map((x) => [x, x]), ['__new', 'New space…']] }) +
     '<span class="faint">' + (kind === 'agent' ? 'For everything from this agent’s feed.' : 'Just this session; repos and Macs are set in <a href="#/settings/spaces">Settings → Spaces</a>.') + '</span></div>'
 }
-function fact(k, v, cls) { return '<div class="fact' + (cls ? ' ' + cls : '') + '"><div class="k">' + esc(k) + '</div><div class="v" title="' + esc(v) + '">' + esc(v) + '</div></div>' }
+// (0.9.9: ui/facts.js; an id or a path copies on tap, its whole value in a data-tip)
+function fact(k, v, cls, opts = {}) { return factHtml(k, v, { cls, ...opts }) }
 
 // PRs (0.6.9): Mine (PRs linked to your sessions, grouped) and Team (every open
 // PR in the repos your sessions are in). The daemon fetches with gh (or asks
@@ -3028,7 +3112,8 @@ function anywhereSection(r, adv = []) {
     '<div class="full hint">Your board at <b>' + esc(r.host || 'yourname.leftoff.dev') + '</b> from any browser, end-to-end encrypted. <a href="https://leftoff.dev/how-it-works" target="_blank" rel="noopener">How it works ↗</a></div>'
   // No name yet on any Mac in this folder: claim one (0.6.1, an email link, no admin token).
   if ((!r.user || su.status === 'pending') && su.status !== 'confirmed') h += signupBlock(r, su, local)
-  h += '<label for="f-anywhere">Use from anywhere</label><label class="check"><input id="f-anywhere" type="checkbox" data-action="relay-toggle"' + (r.enabled ? ' checked' : '') + dis + '><span>On for this Mac (' + esc(r.machine || '') + ')</span></label>'
+  h += '<label for="f-anywhere">Use from anywhere' + localPillHtml({ machine: r.machine, emoji: r.machine ? mEmoji(r.machine) : '', esc }) + '</label><label class="check' + (local ? '' : ' locked') + '"><input id="f-anywhere" type="checkbox" data-action="relay-toggle"' + (r.enabled ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>On for this Mac (' + esc(r.machine || '') + ')</span></label>' +
+    (local ? '' : '<div class="hint local-hint">Change on ' + esc(r.machine || 'that Mac') + '.</div>')
   // The name: up top until there is one, then Advanced (0.6.6).
   const nameRow = '<label for="f-anywhere-user">' + (r.user ? 'Your name' : 'Have a name?') + '</label><div class="anyuser"><input id="f-anywhere-user" value="' + esc(r.user || '') + '" placeholder="yourname" spellcheck="false" autocapitalize="none" autocomplete="off" maxlength="32"' + dis + '><span class="faint mono">.' + dom + '</span>' +
     (local && r.user ? '<button type="button" class="btn sm" data-action="relay-user">Save</button>' : '') + '</div>' +
@@ -3360,6 +3445,7 @@ function queueSave() { clearTimeout(saveUi.timer); saveUi.timer = setTimeout(pai
 
 async function viewSettings() {
   const [c, , remote, sync, peers, st, , , relay, gh] = await Promise.all([api('GET', '/v1/config'), spacesLoad(), api('GET', '/v1/remote').catch(() => null), api('GET', '/v1/sync').catch(() => null), api('GET', '/v1/peers').catch(() => null), api('GET', '/v1/syncthing').catch(() => null), refreshHealth().catch(() => null), agentsLoad(), api('GET', '/v1/relay').catch(() => null), api('GET', '/v1/gh').catch(() => null)])
+  const starts = await api('GET', '/v1/starts').catch(() => null) // 0.9.9: this Mac's own switch
   state.relay = relay
   state.gh = gh
   syncUi.data = sync; syncUi.peers = peers; if (st) stUi.data = st
@@ -3372,7 +3458,7 @@ async function viewSettings() {
   const panes = {
     general: '<div class="section">Needs you</div>' +
       '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a notification when a prompt or question has waited ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
-      '<div class="hint">With <code>terminal-notifier</code>, a click jumps to the session.</div>' +
+      '<div class="hint">They come from “Leftoff” on the Mac the session runs on; a click opens the session.</div>' +
       '<div class="full push-slot" data-push-slot hidden></div>' +
       '<div class="section">Appearance</div>' +
       '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>' +
@@ -3391,13 +3477,14 @@ async function viewSettings() {
       '<label data-row="model">Model</label><div data-row="model" class="models" id="f-models-list" role="radiogroup" aria-label="Model"><div class="nocp">Loading…</div></div>' +
       '<input type="hidden" id="f-model" value="' + esc(sm.model || '') + '">' +
       '<label for="f-base" data-row="base">Server URL</label><input id="f-base" data-row="base" value="' + esc(sm.baseUrl || '') + '">' +
-      '<label for="f-key" data-row="key">API key</label><div class="keyrow" data-row="key"><input id="f-key" type="password" autocomplete="new-password" spellcheck="false"><span class="keystate" id="f-keystate"></span></div>' +
+      '<label for="f-key" data-row="key">API key' + localPillHtml({ machine: c.machineResolved, emoji: c.machineResolved ? mEmoji(c.machineResolved) : '', esc }) + '</label><div class="keyrow" data-row="key"><input id="f-key" type="password" autocomplete="new-password" spellcheck="false"><span class="keystate" id="f-keystate"></span></div>' +
       '<div class="hint" data-row="key" id="f-key-hint"></div>' +
       summariesSection(c) +
       advanced('models', lengthExampleHtml(c)),
     phone: phonePane(relay, remote, unavailable),
     security: '<div class="section" id="answering">Other devices</div>' + (answeringSection(remote, relay) ||
         '<div class="full hint">Nothing reaches this board from elsewhere until <a href="#/settings/phone">Phone &amp; remote</a> is on.</div>') +
+      startsSettingHtml(starts, { esc, local: startViewerLocal(starts && starts.viewer), emoji: starts ? mEmoji(starts.machine) : '', icon }) +
       // a changed machine key needs a click here, so Other machines stays up top then
       (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? machinesSection(peers) : '') +
       advanced('security', (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? '' : machinesSection(peers)) +
@@ -3422,6 +3509,13 @@ async function viewSettings() {
       SETTINGS.map((x) => '<section class="set-pane" data-sec="' + x.key + '" aria-label="' + esc(x.label) + '" hidden>' + panes[x.key] + '</section>').join('') +
       '<div class="full set-save" id="setSave"><span class="faint" id="setSaveNote">Saves every section to config.json in your Leftoff folder.</span><button class="btn primary" type="submit" disabled aria-disabled="true">' + icon('check') + 'Save</button></div></form></div></div>'
   showSettingsSection(r)
+  approvedUi.info = starts; approvedUi.err = ''
+  fillApproved($app, starts) // approved folders: paths as text
+  const ap = document.getElementById('f-start-approve')
+  if (ap) {
+    ap.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); approvedAdd() } })
+    ap.addEventListener('input', () => { if (approvedUi.err) { approvedUi.err = ''; fillApproved($app, approvedUi.info) } })
+  }
   paintSettingsDots()
   syncProviderFields()
   // Claim your name (0.6.1): Enter sends the link instead of saving the form; a link already out keeps polling.
@@ -3601,9 +3695,10 @@ function machinesSection(p) {
   if (!p || p.off) return ''
   const local = p.viewer && p.viewer.local
   let h = '<div class="section" id="machines">Other machines</div>' +
-    '<label for="f-peer-allow">Answer and Go</label><label class="check"><input id="f-peer-allow" type="checkbox"' + (p.allowIncoming ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Allow other machines to answer and Go here</span></label>' +
+    '<label for="f-peer-allow">Answer and Go' + localPillHtml({ machine: p.machine, emoji: p.machine ? mEmoji(p.machine) : '', esc }) + '</label><label class="check' + (local ? '' : ' locked') + '"><input id="f-peer-allow" type="checkbox"' + (p.allowIncoming ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>Allow other machines to answer and Go here</span></label>' +
     '<div class="hint">Off by default. On, a Mac that shares this folder can answer this Mac’s permission prompts and questions and press Go, from its own board. Each command is signed with that Mac’s key from the folder, encrypted, and expires in a minute. ' +
-    (p.allowIncoming ? 'Listening on port ' + esc(p.listening || '—') + (p.relay ? (p.relay.connected ? ' and connected to the relay' : ' · relay not connected') : '') + '.' : 'While it’s off nothing listens.') + ' This Mac’s key: <code>' + esc(p.fingerprint) + '</code></div>'
+    (p.allowIncoming ? 'Listening on port ' + esc(p.listening || '—') + (p.relay ? (p.relay.connected ? ' and connected to the relay' : ' · relay not connected') : '') + '.' : 'While it’s off nothing listens.') + ' This Mac’s key: <code>' + esc(p.fingerprint) + '</code></div>' +
+    (local ? '' : '<div class="hint local-hint">Change on ' + esc(p.machine || 'that Mac') + '.</div>')
   h += '<div class="full">' + protectHtml('machines') + '</div>'
   if (!p.peers.length) return h + '<label>Machines</label><div class="hint">No other Mac in this folder yet.</div>'
   h += '<label>Machines</label><div class="peers">' + p.peers.map((x) => {
@@ -4149,16 +4244,172 @@ async function render() {
     else if (r.name === 'whats-new') await viewWhatsNew()
     else if (r.name === 'docs' && r.arg) await viewDocPage(r.arg)
     else if (r.name === 'search') await viewSearch(r.q || '')
+    else if (r.name === 'new') await viewNewSession()
     else if (r.name === 'setup') await viewSetup()
     else if (r.name === 'tour') { location.replace('#/'); startTour({ api }); return }
     else await viewBoard()
     tabsAfterRender()
+    fillHeadlessErrors()
+    if (r.name !== 'new') fillStartTexts($app, startTexts(state.starts, {})) // 0.9.9: a waiting start's folder, as text
+    // a Needs-you Reply composer (0.9.8) fits a restored multi-line draft
+    for (const ta of $app.querySelectorAll('.reply-composer .composer-input')) fitComposer(ta)
   } catch (e) {
     if (e.code === 'login_required') return showLogin()
     $app.innerHTML = '<div class="empty">Couldn’t load: ' + esc(e.message) + '</div>'
   }
 }
 
+// ------------------------------------------------------------ New session (0.9.9, ui/start.js)
+
+// this Mac's own browser, or the hosted board open on it (the direct door)
+function startViewerLocal(v) { return startViewerAt(v, state.viewerLocal !== false) }
+const modeBusy = new Map() // 0.9.9: a session whose Permissions switch is on its way: id -> mode
+const startUi = { data: null, machine: null, repo: null, where: 'repo', allRepos: false, ask: null, busy: new Set(), sending: false, poll: null, browse: null, custom: null }
+async function viewNewSession() {
+  try { startUi.data = await api('GET', '/v1/start') } catch (e) { if (!startUi.data) throw e }
+  const fa = document.activeElement
+  const kf = fa && fa.classList && fa.classList.contains('start-text') ? { a: fa.selectionStart, b: fa.selectionEnd } : null
+  $app.innerHTML = startPageHtml(startUi.data, startUi, { esc, icon, emoji: mEmoji, local: startViewerLocal(startUi.data.viewer), clock, draft: (state.drafts && state.drafts.start) || '', busy: startUi.sending })
+  fillStartTexts($app, startTexts(startUi.data, startUi)) // folder names and paths: text, never markup
+  { const pi = $app.querySelector('.sb-path-in'); if (pi && startUi.browse && startUi.browse.typed && pi.value !== startUi.browse.typed) pi.value = startUi.browse.typed } // what you were typing survives a redraw
+  const ta = $app.querySelector('.start-text')
+  if (ta) { fitComposer(ta); if (kf && !ta.disabled) { ta.focus({ preventScroll: true }); try { ta.setSelectionRange(kf.a, kf.b) } catch {} } }
+}
+// Other folder…: list one folder on the picked Mac (that Mac's own disk, over the peer link for another Mac)
+async function startBrowse(machine, p, { typed = false } = {}) {
+  const seq = (startUi.browseSeq = (startUi.browseSeq || 0) + 1)
+  const prev = startUi.browse && startUi.browse.machine === machine ? startUi.browse : {}
+  startUi.browse = { ...prev, machine, loading: true, error: null, pathError: null }
+  if (state.route && state.route.name === 'new') render()
+  try {
+    const d = await api('GET', '/v1/start/dirs?machine=' + encodeURIComponent(machine) + (p ? '&path=' + encodeURIComponent(p) : ''), undefined, { timeoutMs: 20000 })
+    if (seq !== startUi.browseSeq || !startUi.browse) return
+    startUi.browse = { machine, loading: false, error: null, pathError: null, typed: typed ? '' : startUi.browse.typed, data: d }
+  } catch (e) {
+    if (seq !== startUi.browseSeq || !startUi.browse) return
+    // a typed path that isn't one you can open: said under the box, and the folder you were in stays
+    startUi.browse = typed ? { ...startUi.browse, loading: false, pathError: e.message } : { ...startUi.browse, loading: false, error: e.message }
+  }
+  if (state.route && state.route.name === 'new') {
+    await render() // the page re-reads before it redraws: focus after
+    const pi = typed && startUi.browse.pathError ? $app.querySelector('.sb-path-in') : null
+    const f = pi || (startUi.browseFocus ? $app.querySelector('.sb-crumb[aria-current]') : null)
+    if (f) f.focus({ preventScroll: true })
+  }
+}
+// "Go to a folder": Enter or Go takes the browser there (the Mac checks it like any other step)
+document.addEventListener('submit', (ev) => {
+  const f = ev.target && ev.target.closest && ev.target.closest('form[data-form="start-browse-path"]')
+  if (!f) return
+  ev.preventDefault()
+  const b = startUi.browse, inp = f.querySelector('.sb-path-in')
+  const want = typedPath(inp ? inp.value : '')
+  if (!b) return
+  if (!want) { startUi.browse = { ...b, pathError: 'Type a folder, like ~/code/web.' }; render().then(() => { const pi = $app.querySelector('.sb-path-in'); if (pi) pi.focus() }); return }
+  startUi.browseFocus = true
+  startBrowse(b.machine, want, { typed: true })
+})
+document.addEventListener('input', (ev) => {
+  if (!ev.target || !ev.target.classList || !ev.target.classList.contains('sb-path-in') || !startUi.browse) return
+  startUi.browse.typed = ev.target.value // kept across the board's redraws
+})
+// The per-Mac pill sits inside its setting's <label>: a tap on it shows its tip
+// (touch has no hover) and never flips the setting.
+document.addEventListener('click', (ev) => {
+  const pill = ev.target && ev.target.closest && ev.target.closest('.local-pill')
+  for (const x of document.querySelectorAll('.local-pill.show')) if (x !== pill) x.classList.remove('show')
+  if (!pill) return
+  ev.preventDefault()
+  pill.classList.toggle('show')
+}, true)
+// 0.9.9 Settings → Approved folders: add (the Mac checks it: inside home, not
+// home itself, not the synced folder; an inline error otherwise, and what you
+// typed stays) and remove. This Mac only (the server checks).
+const approvedUi = { info: null, err: '', busy: false }
+async function approvedAdd() {
+  const inp = document.getElementById('f-start-approve')
+  if (!inp || inp.disabled || approvedUi.busy) return
+  const want = typedPath(inp.value)
+  const fail = (m) => { approvedUi.err = m; fillApproved($app, approvedUi.info, m); inp.focus() }
+  if (!want) return fail('Type a folder, like ~/src.')
+  approvedUi.busy = true
+  try {
+    const r = await api('POST', '/v1/starts/approved', { path: want })
+    approvedUi.busy = false
+    toast(r.added ? 'Approved ' + r.folder + (r.allowRemote ? '' : '. Turn on Allow starting sessions from other devices for it to skip the ask') : r.coveredBy ? 'Already inside ' + r.coveredBy + ', which is approved' : r.folder + ' is already approved', r.added && !r.allowRemote ? 6000 : 3000)
+    await viewSettings()
+    const again = document.getElementById('f-start-approve'); if (again) again.focus({ preventScroll: true })
+  } catch (e) { approvedUi.busy = false; fail(e.message) }
+}
+async function approvedRemove(i) {
+  const a = approvedUi.info && (approvedUi.info.approved || [])[i]
+  if (!a || approvedUi.busy) return
+  approvedUi.busy = true
+  try { const r = await api('POST', '/v1/starts/approved/remove', { path: a.path }); toast(r.folder + ' is no longer approved') } catch (e) { toast(e.message, 5000) }
+  approvedUi.busy = false
+  await viewSettings()
+}
+// 0.9.9: a setting that saves the moment you change it (no Save button) says
+// so beside it: "Saved ✓" for a moment, or what went wrong, inline.
+const savedTimers = new Map()
+function markSaved(id, err = null) {
+  const el = document.getElementById(id)
+  const row = el && (el.closest('label.check') || el)
+  if (!row) return
+  let m = row.querySelector('.saved-mark')
+  if (!m) { m = document.createElement('span'); m.className = 'saved-mark'; row.appendChild(m) } // right beside the checkbox's words
+  m.classList.toggle('bad', !!err); m.classList.remove('gone')
+  m.setAttribute('role', err ? 'alert' : 'status')
+  m.textContent = err ? String(err) : 'Saved ✓'
+  clearTimeout(savedTimers.get(id))
+  if (!err) savedTimers.set(id, setTimeout(() => { m.classList.add('gone'); setTimeout(() => { if (m.classList.contains('gone')) m.remove() }, 400) }, 2000))
+}
+// Claude Code's own words when a session it ran stopped with an error: text, never markup.
+const headlessErrors = new Map()
+function fillHeadlessErrors() {
+  for (const el of $app.querySelectorAll('[data-headless-err]')) {
+    const t = headlessErrors.get(el.dataset.headlessErr) || ''
+    el.textContent = t
+    el.hidden = !t
+  }
+}
+async function startSend(btn) {
+  const box = btn.closest('.start-box')
+  const ta = box && box.querySelector('.start-text')
+  const text = ta ? ta.value.trim() : ''
+  if (!text) { if (ta) ta.focus(); return }
+  if (startUi.sending) return
+  const pick = startPick(startUi.data, startUi)
+  if (!pick.m || !pick.repo) return toast('Pick a Mac and a repo first')
+  startUi.sending = true; btn.disabled = true; btn.classList.add('sending'); btn.setAttribute('aria-busy', 'true')
+  try {
+    const r = await api('POST', '/v1/sessions/start', { machine: pick.m.machine, cwd: pick.repo.path, prompt: text, where: pick.where, mode: pick.mode }, { timeoutMs: 60000 })
+    if (state.drafts) delete state.drafts.start
+    if (!keepFocusAfterSend({ ok: true, touch: isTouchUi(window.matchMedia) })) letGoOfKeyboard(document) // 0.9.9: a phone's keyboard closes
+    if (r.state === 'started' && r.sessionId) { startUi.ask = null; toast('Started on ' + (r.machine || pick.m.machine)); location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+    startUi.ask = { ...r, machine: r.machine || pick.m.machine }
+    pollStartAsk()
+  } catch (e) { toast(e.message, 6000) } finally { startUi.sending = false }
+  if (state.route && state.route.name === 'new') render()
+}
+// The asker's side of a start that waits for a yes at the Mac.
+function pollStartAsk() {
+  clearTimeout(startUi.poll)
+  const a = startUi.ask
+  if (!a || !a.id || !['pending', 'starting'].includes(a.state)) return
+  startUi.poll = setTimeout(async () => {
+    try {
+      const r = await api('GET', '/v1/sessions/start/' + encodeURIComponent(a.id) + '?machine=' + encodeURIComponent(a.machine))
+      if (startUi.ask && startUi.ask.id === a.id) {
+        startUi.ask = { ...a, ...r }
+        if (r.state === 'started' && r.sessionId) { startUi.ask = null; location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+      }
+    } catch (e) { if (e.status === 404) { startUi.ask = { ...a, state: 'failed', error: e.message } } }
+    if (state.route && state.route.name === 'new') render()
+    pollStartAsk()
+  }, 2000)
+}
+
 // First-run setup wizard (0.9.7, ui/wizard.js). Live updates don't redraw it:
 // it keeps its own step and fetches its own state.
 async function viewSetup() {
@@ -5105,7 +5356,7 @@ window.addEventListener('hashchange', () => closeActionMenu())
 const tipsUi = wireTips(document) // 0.9.8: the ⓘ tooltips (Always allow here)
 window.addEventListener('hashchange', () => tipsUi.hide())
 // 0.8.9: a session page's title is a button too (Enter or Space renames it)
-document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"], .lv-q-long[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
 document.addEventListener('keydown', (ev) => {
   const b = ev.target && ev.target.closest && ev.target.closest('[data-action="card-more"]')
@@ -5122,6 +5373,15 @@ document.addEventListener('click', async (ev) => {
   const id = btn.dataset.id || (card && card.dataset.id)
   const s = state.sessions.find((x) => x.id === id) || (closedUi.data && closedUi.data.sessions.find((x) => x.id === id))
   try {
+    // 0.9.9: an info card on the session page (Directory, Worktree, Session id…): the whole value, a check for a moment
+    if (action === 'copy-fact') {
+      const ok = await copy(btn.dataset.copy)
+      if (ok) {
+        clearTimeout(btn._copied); btn.classList.add('copied'); btn.dataset.tip = 'Copied'
+        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.dataset.tip = btn.dataset.copy }, 1500)
+      }
+      return
+    }
     if (action === 'copy-cmd') {
       const ok = await copy(btn.dataset.cmd)
       if (ok && btn.classList.contains('copy-float')) { // 0.9.8: the floating copy shows a check for a moment, no tooltip
@@ -5291,6 +5551,88 @@ document.addEventListener('click', async (ev) => {
       } catch (e) { cuUi.making = false; cuUi.err = e.message; render() }
       return
     }
+    // 0.9.9 New session: the page's choices, the send, a yes or no for a start waiting here, Stop and Resume
+    if (action === 'start-pick') {
+      const k = btn.dataset.k, v = btn.dataset.v
+      if (k === 'machine') { startUi.machine = v; startUi.repo = null; startUi.allRepos = false; startUi.browse = null; startUi.custom = null } else if (k === 'repo') startUi.repo = v; else if (k === 'where') startUi.where = v === 'worktree' ? 'worktree' : 'repo'; else if (k === 'mode') startUi.mode = v
+      return render()
+    }
+    // Other folder…: open the browser at ~, walk it, use a folder
+    if (action === 'start-browse') {
+      const pick = startPick(startUi.data, startUi)
+      if (!pick.m) return
+      if (startUi.browse && startUi.browse.machine === pick.m.machine) { startUi.browse = null; return render() }
+      startUi.browseFocus = false
+      return startBrowse(pick.m.machine, null)
+    }
+    if (action === 'start-browse-go' || action === 'start-browse-up') {
+      const b = startUi.browse
+      const to = action === 'start-browse-up' ? (b && b.data && b.data.parent ? { path: b.data.parent } : null) : browseTarget(b, btn)
+      if (!b || !to) return
+      startUi.browseFocus = true
+      return startBrowse(b.machine, to.path)
+    }
+    if (action === 'start-browse-close') { startUi.browse = null; return render() }
+    if (action === 'start-browse-use') {
+      const b = startUi.browse, d = b && b.data
+      if (!d || !d.parent) return
+      const known = startPick(startUi.data, { ...startUi, machine: b.machine }).m
+      if (d.ran || (known && known.repos.some((r) => r.path === d.path))) startUi.custom = null
+      else startUi.custom = { machine: b.machine, path: d.path, name: d.crumbs[d.crumbs.length - 1].name, label: d.label, git: !!d.git }
+      startUi.repo = d.path
+      if (!d.git) startUi.where = 'repo'
+      startUi.browse = null
+      render()
+      const ta = $app.querySelector('.start-text'); if (ta && !ta.disabled) ta.focus({ preventScroll: true })
+      return
+    }
+    if (action === 'start-all-repos') { startUi.allRepos = true; return render() }
+    if (action === 'pair-ask-yes' || action === 'pair-ask-no') {
+      if (startUi.pairBusy) return
+      startUi.pairBusy = true
+      try {
+        const r = await api('POST', '/v1/starts/pair-ask', { yes: action === 'pair-ask-yes' })
+        toast(r.answered === 'yes' ? 'Other devices can start sessions here' + (r.trustTurnedOn ? ' (Trust my paired devices is on too)' : '') : 'OK, they’ll ask here first', 4000)
+      } catch (e) { toast(e.message, 5000) }
+      startUi.pairBusy = false
+      try { state.starts = await api('GET', '/v1/starts') } catch {}
+      return render()
+    }
+    if (action === 'start-again') { startUi.ask = null; return render() }
+    if (action === 'start-send') return startSend(btn)
+    if (action === 'start-approved-add') return approvedAdd()
+    if (action === 'start-approved-remove') return approvedRemove(Number(btn.dataset.i))
+    if (action === 'start-ask-confirm' || action === 'start-ask-decline' || action === 'start-ask-approve') {
+      if (!id || startUi.busy.has(id)) return
+      startUi.busy.add(id); render()
+      try {
+        // "Always allow in <folder>": approves that folder here, then starts this one
+        const r = await api('POST', '/v1/sessions/start/' + encodeURIComponent(id) + '/' + (action === 'start-ask-decline' ? 'decline' : 'confirm'), action === 'start-ask-approve' ? { approve: true } : {}, { timeoutMs: 60000 })
+        if (r.approved && r.state !== 'failed') toast((r.state === 'started' ? 'Started. ' : '') + 'Folders inside ' + r.approved + ' now start without asking' + (r.allowRemote ? '' : ' once Allow starting sessions from other devices is on'), 5000)
+        else toast(r.state === 'started' ? 'Started' : r.state === 'switched' ? 'Switched to ' + modeLabel(r.mode) : r.state === 'declined' ? 'Declined' : r.state === 'failed' ? 'Didn’t start: ' + (r.error || '') : 'That request was ' + r.state, r.state === 'failed' ? 6000 : 2500)
+        startUi.busy.delete(id)
+        if (r.state === 'started' && r.sessionId) { location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+      } catch (e) { toast(e.message, 5000) }
+      startUi.busy.delete(id)
+      return render()
+    }
+    // 0.9.9 Permissions of a session Leftoff runs: switch it (or, from another device, ask that Mac)
+    if (action === 'headless-mode') {
+      if (!id || modeBusy.has(id) || btn.getAttribute('aria-checked') === 'true') return
+      modeBusy.set(id, btn.dataset.mode); render()
+      try { modeToast(await switchMode(id, btn.dataset.mode)) } catch (e) { toast(e.message, 6000) }
+      modeBusy.delete(id)
+      return render()
+    }
+    if (action === 'ask-auto') return autoRestClick(btn)
+    if (action === 'headless-stop' || action === 'headless-run') {
+      btn.disabled = true
+      try {
+        const r = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/' + (action === 'headless-stop' ? 'stop' : 'run'), {}, { timeoutMs: 30000 })
+        toast(action === 'headless-stop' ? 'Stopping' : r.already ? 'Already running' : 'Running again')
+      } catch (e) { toast(e.message, 6000) }
+      return render()
+    }
     if (action === 'restore-ask-confirm' || action === 'restore-ask-decline') {
       const id = btn.dataset.id
       if (!id || restoreUi.busy.has(id)) return
@@ -5474,6 +5816,34 @@ document.addEventListener('click', async (ev) => {
       return paintDigestFilter()
     }
     // ---- Needs you (v0.4.4)
+    // 0.9.9 the docked ask: open a long command in place; reply instead (the composer comes back); back to the card
+    if (action === 'ask-expand') {
+      const code = btn.closest('.ask-dock') && btn.closest('.ask-dock').querySelector('.ask-detail')
+      const open = !askUi.open.has(btn.dataset.ask)
+      if (open) askUi.open.add(btn.dataset.ask); else askUi.open.delete(btn.dataset.ask)
+      if (code) code.classList.toggle('open', open)
+      btn.setAttribute('aria-expanded', open ? 'true' : 'false'); btn.textContent = open ? 'Show less' : 'Show all'
+      return
+    }
+    // a turn's answered asks, folded into one row: open them in place, fold them again
+    if (action === 'ask-group') {
+      const g = btn.dataset.group, li = btn.closest('.lv-askgroup'), list = li && li.querySelector('.lvag-list')
+      const open = !askUi.groups.has(g)
+      if (open) askUi.groups.add(g); else askUi.groups.delete(g)
+      if (li) li.classList.toggle('open', open)
+      if (list) list.hidden = !open
+      btn.setAttribute('aria-expanded', open ? 'true' : 'false')
+      btn.setAttribute('aria-label', (btn.getAttribute('aria-label') || '').replace(/, (shown|tap to show)$/, open ? ', shown' : ', tap to show'))
+      liveJumpButton(btn.closest('.live-thread'), liveKeeper.unseen)
+      return
+    }
+    if (action === 'ask-reply-instead' || action === 'ask-back') {
+      if (action === 'ask-reply-instead') askUi.reply.add(btn.dataset.ask); else askUi.reply.delete(btn.dataset.ask)
+      await render()
+      if (action === 'ask-reply-instead') { const ta = document.querySelector('.live-box .composer-input'); if (ta && !ta.disabled) ta.focus({ preventScroll: true }) }
+      else { const a = document.querySelector('.ask-dock [data-action="ask-answer"][data-choice="allow"], .ask-dock button:not([disabled])'); if (a) a.focus({ preventScroll: true }) }
+      return
+    }
     if (action === 'ask-deny-open' || action === 'ask-deny-close') {
       const need = btn.closest('.need')
       const form = need && need.querySelector('.deny-form')
@@ -5489,6 +5859,9 @@ document.addEventListener('click', async (ev) => {
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
     if (action === 'live-send') return liveSendClick(btn)
+    if (action === 'lv-queued-cancel' || action === 'lv-queued-edit') return queuedClick(btn, action === 'lv-queued-edit')
+    if (action === 'lv-queued-now') return sendNowClick(btn)
+    if (action === 'lv-queued-more') { if (ev.target.closest('a[href]')) return; const open = !btn.classList.contains('open'); btn.classList.toggle('open', open); btn.setAttribute('aria-expanded', open ? 'true' : 'false'); return }
     if (action === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) inp.click(); return }
     if (action === 'att-remove') return removeAttachment(btn.dataset.lid)
     if (action === 'att-retry') return retryAttachment(btn.dataset.lid)
@@ -5623,6 +5996,28 @@ document.addEventListener('click', async (ev) => {
 
 // Answer a permission prompt or a question from the board. The daemon hands it
 // to the waiting hook or mod; the terminal's own prompt may already have won.
+// 0.9.9 Permissions mid-session (src/session-start.js switchMode): switched, or waiting for a yes at that Mac.
+function switchMode(id, mode) { return api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/mode', { mode }, { timeoutMs: 30000 }) }
+function modeToast(r) {
+  if (r && r.state === 'pending') toast('Asked ' + (r.machine || 'that Mac') + ': someone there says yes, then it switches', 5000)
+  else toast('Permissions: ' + modeLabel(r && r.mode) + (r && r.running === false ? ' (when it runs again)' : ''), 3000)
+}
+// "Auto-approve the rest" on a permission card: allow this call, and switch the session to Auto.
+async function autoRestClick(btn) {
+  const need = btn.closest('.need')
+  if (!need || !need.dataset.ask) return
+  const sid = need.dataset.id
+  need.querySelectorAll('button, input, textarea').forEach((el) => { if (!el.classList.contains('go')) el.disabled = true })
+  btn.textContent = 'Switching…'
+  let sw = null
+  try { sw = await switchMode(sid, 'auto') } catch (e) { toast(e.message, 6000); render(); return }
+  try {
+    await api('POST', '/v1/asks/' + encodeURIComponent(need.dataset.ask) + '/answer', { action: 'allow', auto: true }) // 0.9.9: the thread's row says Auto-approved
+    toast(sw && sw.state === 'pending' ? 'Allowed. Auto waits for a yes on ' + (sw.machine || 'that Mac') : 'Allowed; the rest of this session runs in Auto', 4000)
+  } catch (e) { toast(e.code === 'not_waiting' ? 'Already handled: ' + e.message : e.message, 4200) }
+  render()
+}
+
 async function answerClick(btn, action) {
   const need = btn.closest('.need, .ql-item') // 0.9.8: Quick look's Allow / Deny are the same buttons
   if (!need) return
@@ -5653,6 +6048,7 @@ async function answerClick(btn, action) {
   try {
     const r = await api('POST', '/v1/asks/' + encodeURIComponent(askId) + '/answer', body)
     toast(r.summary + (r.delivered ? ' · Claude Code has it' : ' · waiting for Claude Code to pick it up'), 3600)
+    if (!keepFocusAfterSend({ ok: true, touch: isTouchUi(window.matchMedia) })) letGoOfKeyboard(document) // a typed answer sent: a phone's keyboard closes
     for (const k of Object.keys(state.drafts)) if (k.includes(askId)) delete state.drafts[k]
   } catch (e) {
     toast(e.code === 'not_waiting' ? 'Already handled: ' + e.message : e.message, 4200)
@@ -5667,13 +6063,16 @@ async function replyClick(btn) {
   const need = btn.closest('.need')
   const ta = need && need.querySelector('.reply-text')
   const text = ta ? ta.value.trim() : ''
-  if (!text) { toast('Type a reply first'); return }
+  if (!text) { toast('Type a reply first'); if (ta && !ta.disabled) ta.focus(); return }
   if (text.startsWith('/')) { toast('Replies can’t start with “/”'); return }
-  btn.disabled = true; btn.textContent = 'Sending…'
+  if (btn.classList.contains('sending')) return
+  // the composer's ↑ (0.9.8): it pulses while the reply goes, like Live's
+  btn.disabled = true; btn.classList.add('sending'); btn.setAttribute('aria-busy', 'true'); btn.setAttribute('aria-label', 'Sending…')
   try {
     const r = await api('POST', '/v1/sessions/' + encodeURIComponent(need.dataset.id) + '/reply', { text })
     delete state.drafts['reply:' + need.dataset.id]
     toast(r.queuedBehindTurn ? 'Sent · Claude reads it when the current turn ends' : 'Sent · Claude has it as its next prompt', 3600)
+    if (!keepFocusAfterSend({ ok: true, touch: isTouchUi(window.matchMedia) })) letGoOfKeyboard(document) // a phone's keyboard closes
   } catch (e) { toast(e.message, 4200) } finally { render() }
 }
 
@@ -6014,7 +6413,7 @@ document.addEventListener('submit', async (ev) => {
 
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
-const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
+const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.start-box') && document.activeElement.value) || !!(document.activeElement && document.activeElement.classList && document.activeElement.classList.contains('sb-path-in') && document.activeElement.value)
 // Settings isn't redrawn by live updates: it would wipe what you're editing,
 // and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
 function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && ['settings', 'setup'].includes(state.route.name)) && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }
@@ -6028,7 +6427,7 @@ function connect() {
   es.addEventListener('ping', () => { if (stream === es) streamDog.seen() })
   es.addEventListener('prs.updated', () => { prsUi.at = {} }) // 0.8.5: the PR page reads again on its next paint
   es.addEventListener('projects.updated', () => { projectsUi.at = 0 }) // 0.9.0
-  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated']) es.addEventListener(t, () => { if (stream === es) streamDog.seen(); soon() })
+  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated', 'starts.updated']) es.addEventListener(t, () => { if (stream === es) streamDog.seen(); soon() })
   // v0.5.8: standup text prefetched for a digest is stale once spaces or the digest change
   for (const t of ['spaces.updated', 'digest.created', 'checkpoint.created']) es.addEventListener(t, () => { digestUi.standups = {} })
   es.addEventListener('model.pull', (ev) => { try { onPull(JSON.parse(ev.data)) } catch {} })
@@ -6052,10 +6451,19 @@ document.addEventListener('change', async (ev) => {
     } catch (e) { toast(e.message, 5000) }
     return sel.closest('#spacesBox') ? spacesRepaint() : render()
   }
+  if (ev.target.id === 'f-start-allow') { // 0.9.9: this Mac only
+    const cb = ev.target
+    let err = null
+    try { const r = await api('POST', '/v1/starts/allow', { allow: cb.checked }); toast(r.allowRemote ? 'Your phone and other Macs can now start sessions here' : 'Sessions started from other devices wait for a yes here') } catch (e) { cb.checked = !cb.checked; err = e.message; toast(e.message, 6000) }
+    await viewSettings()
+    return markSaved('f-start-allow', err)
+  }
   if (ev.target.id === 'f-peer-allow') {
     const cb = ev.target
-    try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }
-    return viewSettings()
+    let err = null
+    try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; err = e.message; toast(e.message, 6000) }
+    await viewSettings()
+    return markSaved('f-peer-allow', err)
   }
   if (ev.target.dataset && ev.target.dataset.list && ev.target.type === 'checkbox') {
     const cb = ev.target, done = cb.checked, li = cb.closest('li')