@leftoff/cli 0.9.9-beta.6 → 0.9.9-beta.8

package/ui/app.js

@@ -15,19 +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, composerBoxHtml } from './composer.js' // 0.9.8 the Live composer
-import { startPageHtml, startPick, startAsksBanner, headlessBarHtml, startsSettingHtml, startViewerLocal as startViewerAt, startTexts, fillStartTexts, browseTarget, startPairAskHtml, typedPath } from './start.js' // 0.9.9 New session
+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
@@ -1397,6 +1398,7 @@ 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[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 {} }
@@ -1494,14 +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 }) // 0.9.9: started from the board: Stop / Resume
+  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>'
@@ -1511,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>'
@@ -1546,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() }
 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 {} }
@@ -1561,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 } = {}) {
@@ -1573,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' && !s.headless)) return '' // 0.9.9: one Leftoff started talks Live whatever reports it
-  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>' +
@@ -1588,13 +1601,25 @@ 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), 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' + (s.headless ? '' : ' 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, 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
@@ -2092,6 +2117,38 @@ 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.
+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 +2157,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 +2171,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 +2180,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 +2293,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 +3092,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>' +
@@ -3373,7 +3438,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>' +
@@ -3392,14 +3457,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) }) +
+      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)) +
@@ -3424,6 +3489,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.
@@ -3603,9 +3675,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) => {
@@ -4170,6 +4243,7 @@ async function render() {
 
 // 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 }
@@ -4219,6 +4293,57 @@ 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() {
@@ -4238,8 +4363,9 @@ async function startSend(btn) {
   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 }, { timeoutMs: 60000 })
+    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()
@@ -5227,6 +5353,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
@@ -5399,7 +5534,7 @@ document.addEventListener('click', async (ev) => {
     // 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'
+      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
@@ -5445,18 +5580,31 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'start-again') { startUi.ask = null; return render() }
     if (action === 'start-send') return startSend(btn)
-    if (action === 'start-ask-confirm' || action === 'start-ask-decline') {
+    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 {
-        const r = await api('POST', '/v1/sessions/start/' + encodeURIComponent(id) + '/' + (action === 'start-ask-confirm' ? 'confirm' : 'decline'), {}, { timeoutMs: 60000 })
-        toast(r.state === 'started' ? 'Started' : r.state === 'declined' ? 'Declined' : r.state === 'failed' ? 'Didn’t start: ' + (r.error || '') : 'That request was ' + r.state, r.state === 'failed' ? 6000 : 2500)
+        // "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 {
@@ -5648,6 +5796,22 @@ 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
+    }
+    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')
@@ -5663,6 +5827,7 @@ 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 === '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)
@@ -5797,6 +5962,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
@@ -5827,6 +6014,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)
@@ -5850,6 +6038,7 @@ async function replyClick(btn) {
     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() }
 }
 
@@ -6230,13 +6419,17 @@ document.addEventListener('change', async (ev) => {
   }
   if (ev.target.id === 'f-start-allow') { // 0.9.9: this Mac only
     const cb = ev.target
-    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; toast(e.message, 6000) }
-    return viewSettings()
+    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')

package/ui/composer.js

@@ -34,6 +34,18 @@ export function isTouchUi(matchMedia) {
   } catch { return false }
 }
 
+// 0.9.9 After a send that went through, a phone's keyboard closes: the text
+// box lets go of focus. On a Mac (a fine pointer) focus stays, so you can keep
+// typing. A send that failed keeps its text and its focus everywhere.
+export function keepFocusAfterSend({ ok = false, touch = false } = {}) { return !ok || !touch }
+// Let go of the focused text box (the on-screen keyboard closes); true if one had it.
+export function letGoOfKeyboard(doc) {
+  const a = doc && doc.activeElement
+  if (!a || a === doc.body || !/^(TEXTAREA|INPUT)$/.test(String(a.tagName || '').toUpperCase()) || typeof a.blur !== 'function') return false
+  a.blur()
+  return true
+}
+
 // The height the box should be for its content: scrollHeight is the
 // textarea's at height:auto (padding included), lineHeight and padY in px.
 // -> { height, scroll } where scroll says the content is taller than the cap.

package/ui/facts.js

@@ -0,0 +1,34 @@
+// 0.9.9 the session page's info cards (Machine, Repo, Directory, Session id…).
+// Pure (the unit tests read it). A card whose value is an id or a path is a
+// button: tap or click copies the whole value (the toast says it), the whole
+// value is its data-tip, and it is a 44px target. A long path shows its start
+// and its end, the part that tells worktrees apart.
+import { icon } from './icons.js'
+import { midClip } from './live-view.js'
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// factHtml('Turns', '3') or factHtml('Directory', cwd, { copy: cwd, what: 'directory', clip: 34 })
+//   copy: the full value to copy (a card without one is plain); what: its name in "Copy <what>"
+//   shown: what the card shows when it isn't the copied value itself (the worktree's name for its path)
+// A long path: its start, then its last folder whole ("/Users/you…/add-a-joke-0994").
+export function clipPath(p, n = 34) {
+  const t = String(p == null ? '' : p)
+  if (t.length <= n) return t
+  const i = t.replace(/\/+$/, '').lastIndexOf('/')
+  const last = i >= 0 ? t.slice(i + 1) : ''
+  if (!last || last.length > n - 8) return midClip(t, n)
+  return t.slice(0, n - last.length - 2) + '…/' + last
+}
+
+export function factHtml(k, v, { cls = '', copy = null, what = null, shown = null, clip = 0 } = {}) {
+  const value = String(v == null ? '' : v)
+  const view = shown != null ? String(shown) : clip ? (value.includes('/') ? clipPath(value, clip) : midClip(value, clip)) : value
+  if (copy == null || copy === '') {
+    return '<div class="fact' + (cls ? ' ' + cls : '') + '"><div class="k">' + esc(k) + '</div><div class="v">' + esc(view) + '</div></div>'
+  }
+  const full = String(copy)
+  return '<button type="button" class="fact copyable' + (cls ? ' ' + cls : '') + '" data-action="copy-fact" data-copy="' + esc(full) + '" data-tip="' + esc(full) + '" aria-label="' + esc('Copy ' + (what || k.toLowerCase()) + ': ' + full) + '">' +
+    '<span class="k">' + esc(k) + '<span class="fact-ic" aria-hidden="true">' + icon('copy') + '</span></span><span class="v">' + esc(view) + '</span></button>'
+}

package/ui/icons.js

@@ -17,6 +17,7 @@ export const ICONS = {
   "qr-code": "<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/> <path d=\"M21 16h-3a2 2 0 0 0-2 2v3\"/> <path d=\"M21 21v.01\"/> <path d=\"M12 7v3a2 2 0 0 1-2 2H7\"/> <path d=\"M3 12h.01\"/> <path d=\"M12 3h.01\"/> <path d=\"M12 16v.01\"/> <path d=\"M16 12h1\"/> <path d=\"M21 12v.01\"/> <path d=\"M12 21v-1\"/>",
   "refresh-cw": "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/> <path d=\"M21 3v5h-5\"/> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/> <path d=\"M8 16H3v5\"/>",
   "check": "<path d=\"M20 6 9 17l-5-5\"/>",
+  "lock": "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
   "folder-sync": "<path d=\"M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v.5\"/> <path d=\"M12 10v4h4\"/> <path d=\"m12 14 1.535-1.605a5 5 0 0 1 8 1.5\"/> <path d=\"M22 22v-4h-4\"/> <path d=\"m22 18-1.535 1.605a5 5 0 0 1-8-1.5\"/>",
   "bell": "<path d=\"M10.268 21a2 2 0 0 0 3.464 0\"/> <path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\"/>",
   "x": "<path d=\"M18 6 6 18\"/> <path d=\"m6 6 12 12\"/>",