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

package/ui/live-view.js

@@ -3,7 +3,7 @@
 // thread survive the board's re-renders: the same list element stays on the
 // page, messages are diffed in, and it sticks to the bottom only when you are
 // already there.
-import { statusView, elapsedText, ranWithoutAsking } from './live-status.js'
+import { statusView, elapsedText, ranWithoutAsking, isQueued } from './live-status.js'
 import { parseAttachedLines } from './attach.js'
 
 const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
@@ -218,7 +218,7 @@ export function messageAttachments(m) {
   if (!/Attached: /.test(m.text || '')) return { text: m.text || '', attachments: [] }
   return parseAttachedLines(m.text)
 }
-export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, attHtml = null }) {
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, attHtml = null, may = true }) {
   const who = senderLabel(m)
   const title = m.from === 'you' ? senderTitle(m) : ''
   let body
@@ -237,13 +237,16 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, at
     if (st && (st.ran || []).length) foot += toolsHtml(st, { esc, now, open: false })
     const ran = (m.ranWithoutAsking || []).length ? m.ranWithoutAsking : []
     if (ran.length) foot += '<div class="lv-note">Ran without asking: ' + esc(ran.join(', ')) + ' <span class="faint">(read-only or allowed in your Claude Code settings, so no Allow/Deny)</span></div>'
+  } else if (m.status && m.from === 'you' && isQueued(m.status)) {
+    foot = queuedHtml(m, { esc, may })
   } else if (m.status) {
     foot = deliveryHtml(m.status, { esc, error: m.errorText })
   } else if (m.state) {
     foot = '<div class="lv-tick ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received ✓✓' : 'Sent ✓') + '</div>'
   }
-  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '')
-  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>' + body + foot + '</li>'
+  const queued = m.from === 'you' && isQueued(m.status)
+  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '') + (queued ? '|q' + (may ? 1 : 0) : '')
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + (queued ? ' lv-queued' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>' + body + foot + '</li>'
 }
 
 const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
@@ -259,6 +262,19 @@ export function deliveryHtml(st, { esc, error = null }) {
   return '<div class="lv-tick' + (got ? ' got' : '') + '" title="' + esc(got ? 'Claude Code received it' : 'Waiting for the session to pick it up') + '">' + (got ? 'Received <span aria-hidden="true">✓✓</span>' : 'Sent <span aria-hidden="true">✓</span>') + '</div>'
 }
 
+// 0.9.9 Under a message still waiting behind Claude's turn: "Queued", then
+// Edit and Cancel where Leftoff can truly take it back (a session Leftoff runs,
+// and you may send from this device), else the plain fact. No tooltip.
+export function queuedHtml(m, { esc, may = true }) {
+  const st = m.status || {}
+  const id = esc(m.id || '')
+  const acts = st.cancellable && may
+    ? '<span class="lv-q-acts"><button type="button" class="btn lv-q-btn" data-action="lv-queued-edit" data-msg="' + id + '" aria-label="Edit this queued message">Edit</button>' +
+      '<button type="button" class="btn lv-q-btn" data-action="lv-queued-cancel" data-msg="' + id + '" aria-label="Cancel this queued message">Cancel</button></span>'
+    : '<span class="lv-q-hint">Claude reads it after its current step</span>'
+  return '<div class="lv-q" role="status"><span class="lv-q-tag">Queued</span>' + acts + '</div>'
+}
+
 // "git -C /a/b diff --cached --quiet" → "git -C /a… --cached --quiet": the start and the end stay visible.
 export function midClip(s, n = 56) {
   const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim()
@@ -312,16 +328,39 @@ export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
 }
 
 // The whole thread: each message you sent, then Claude's side of that turn.
+// opts.inserts (0.9.9): other rows ({ at, html }: the permission asks) go in
+// where they happened, before the first message after them; with earlier
+// messages not shown yet, one from before the first shown waits for "Show earlier".
 export function threadHtml(msgs, opts) {
   const list = msgs || []
   const byId = new Map(list.filter((m) => m.from !== 'claude' && m.id).map((m) => [m.id, m]))
   const answered = new Set(list.filter((m) => m.from === 'claude' && m.replyTo).map((m) => m.replyTo))
+  const t = (x) => { const v = Date.parse(x || ''); return Number.isFinite(v) ? v : null }
+  const first = list.length ? t(list[0].at) : null
+  const ins = ((opts && opts.inserts) || []).filter((r) => r && r.html)
+    .map((r, i) => ({ ...r, t: t(r.at), i }))
+    .filter((r) => !(opts.earlier > 0 && first != null && r.t != null && r.t < first))
+    .sort((a, b) => ((a.t == null ? Infinity : a.t) - (b.t == null ? Infinity : b.t)) || a.i - b.i)
+  let k = 0
+  const upTo = (at) => { let h = ''; while (k < ins.length && ins[k].t != null && at != null && ins[k].t < at) h += ins[k++].html; return h }
+  // 0.9.9: messages Queued behind Claude's turn wait at the bottom, in the order
+  // sent, with no Working bubble; once Claude takes one in it goes back to its place
+  const waiting = list.filter((m) => m.from === 'you' && isQueued(m.status) && !answered.has(m.id))
+  const rest = waiting.length ? list.filter((m) => !waiting.includes(m)) : list
   let html = ''
-  for (const m of list) {
-    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); continue }
+  rest.forEach((m, i) => {
+    html += upTo(t(m.at))
+    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); return }
     html += entryHtml(m, opts)
-    if (m.status && !m.status.folded && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
-  }
+    if (m.status && !m.status.folded && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') {
+      // the asks of this turn go before Claude's Working bubble: the answer that replaces it in place then lands after them, as on a fresh page
+      const next = i + 1 < rest.length ? t(rest[i + 1].at) : null
+      html += upTo(next == null ? Infinity : next)
+      html += pendingClaudeHtml(m, opts)
+    }
+  })
+  while (k < ins.length) html += ins[k++].html
+  for (const m of waiting) html += entryHtml(m, opts)
   return html
 }
 
@@ -342,7 +381,7 @@ export { ranWithoutAsking }
 // A content signature, to replace only the entries that changed (the time-ago
 // text is left out so a minute ticking over doesn't redraw a reply).
 function sigHash(s) { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36) }
-export function entrySig(m) { return JSON.stringify([m.text, (m.attachments || []).map((a) => a.id), m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], m.done, m.ranWithoutAsking, m.errorText]) }
+export function entrySig(m) { return JSON.stringify([m.text, (m.attachments || []).map((a) => a.id), m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null, !!m.status.queued, !!m.status.cancellable], m.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper
 

package/ui/live-wake.js

@@ -55,7 +55,7 @@ export function backoffMs(attempt) {
 export function liveSignature(msgs) {
   return (msgs || []).map((m) => {
     const st = m.status || {}
-    return [m.id || m.key || '', m.from || '', st.phase || '', st.tool ? st.tool.name : '', st.waiting ? 'w' : '', st.endedAt || '', m.text ? String(m.text).length : 0].join(':')
+    return [m.id || m.key || '', m.from || '', st.phase || '', st.tool ? st.tool.name : '', st.waiting ? 'w' : '', st.endedAt || '', m.text ? String(m.text).length : 0, st.queued ? (st.cancellable ? 'qc' : 'q') : ''].join(':')
   }).join('|')
 }
 

package/ui/needs.js

@@ -10,6 +10,7 @@
 import { mdInline } from './changelog-md.js'
 import { tipHtml, tipId } from './tips.js'
 import { composerBoxHtml } from './composer.js'
+import { liveBoxKind } from './live-view.js'
 
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
@@ -87,6 +88,17 @@ export function alwaysButton(ask, dis = '', opts = {}) {
     tipHtml({ id, label: 'What “' + label + '” does', html: alwaysTipHtml(ask, opts.session) }) + '</span>'
 }
 
+// 0.9.9 "Auto-approve the rest": only for a running session Leftoff started
+// (it can switch Claude Code's mode mid-session, src/headless.js setMode).
+// Allows this call, then switches the session to Auto (from another device:
+// the same rule as starting one there; else that Mac says yes first).
+export const AUTO_REST_TIP = 'Allows this, then switches this session to Auto: routine steps just run; riskier ones get a safety check that lets them run or blocks them. Back to Ask me on the session page.'
+export function autoRestButton(s, dis = '') {
+  const h = s && s.headless
+  if (!h || h.state !== 'running' || h.mode === 'auto') return ''
+  return '<button type="button" class="btn auto-rest" data-action="ask-auto"' + dis + ' aria-label="Auto-approve the rest of this session" data-tip="' + esc(AUTO_REST_TIP) + '">Auto-approve the rest</button>'
+}
+
 // opts: { mayAnswer, goButton(session) -> html, drafts: { [key]: text }, pending: { [key]: label }, compact, kbd }
 export function needPanel(n, opts = {}) {
   const s = n.session || {}
@@ -98,11 +110,11 @@ export function needPanel(n, opts = {}) {
   const dis = !may || busy ? ' disabled' : ''
   if (n.kind === 'agent') return agentNeedPanel(n, s)
   const go = opts.goButton ? opts.goButton(s) : ''
-  let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
+  let h = '<article class="need ' + (opts.dockClass ? esc(opts.dockClass) + ' ' : '') + 'k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
   h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
     (opts.compact ? '' : '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' + (s.repoLabel ? '<span class="chip mono">' + esc(s.repoLabel) + '</span>' : '')) +
     (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" data-tip="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
-    '<span class="need-kind">' + esc(n.label || KIND_LABEL[n.kind] || '') + '</span>' +
+    '<span class="need-kind">' + esc(n.label || KIND_LABEL[n.kind] || '') + '</span>' + (opts.countHtml || '') +
     (n.waitSec != null ? '<span class="need-wait"' + (n.since ? ' data-tip="since ' + esc(n.since) + '"' : '') + '>' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
   h += needContextHtml(n, opts) + prCardHtml(n.pr)
   if (n.kind === 'permission' && n.ask) {
@@ -114,6 +126,7 @@ export function needPanel(n, opts = {}) {
       '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
       alwaysButton(n.ask, dis, { session: s }) +
       (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' data-tip="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
+      autoRestButton(s, dis) + // 0.9.9: a session Leftoff runs: allow this, and switch it to Auto
       '<button type="button" class="btn deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' + go + '</div>' +
       '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
       '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny' + kbdHint(opts) + '</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
@@ -151,6 +164,7 @@ export function needPanel(n, opts = {}) {
   }
   if (!may && n.kind !== 'terminal') h += '<div class="need-note warn">Answering from this device is off. Turn it on in Settings → Privacy & security on the machine running Leftoff, or use Go there.</div>'
   if (busy) h += '<div class="need-note">' + esc(busy) + '</div>'
+  if (opts.tail) h += opts.tail
   return h + '</article>'
 }
 
@@ -463,3 +477,145 @@ export function quickRepliesHtml(n, dis = '') {
   if (!list.length) return ''
   return '<div class="quick-replies" role="group" aria-label="Quick replies">' + list.map((t) => '<button type="button" class="qr" data-action="quick-reply" data-text="' + esc(t) + '"' + dis + '>' + esc(t) + '</button>').join('') + '</div>'
 }
+
+// ------------------------------------------------------------ the ask in Live (0.9.9)
+// On a session page with a Live composer, a waiting permission prompt or
+// question takes the composer's place at the bottom of Live (phone first: the
+// buttons are where the thumb and the keyboard were), one at a time ("1 of 3"),
+// and each ask also gets a short row in the thread where it happened, which
+// stays as history once it is answered. "Reply instead" brings the composer
+// back for a waiting ask (app.js keeps that per ask, on this page only).
+
+// Does this session's page dock its ask in Live (instead of the Needs-you strip above it)?
+export function askDocked(s) {
+  const n = s && s.needsYou
+  if (!n || !n.ask || (n.kind !== 'permission' && n.kind !== 'question')) return false
+  return liveBoxKind(s) === 'thread'
+}
+
+// What sits at the bottom of Live: 'dock' (the ask, in the composer's place),
+// 'slim' (you chose Reply instead: the composer, with one line about the ask
+// above it) or 'composer'. reply: the ask ids you chose to reply to instead.
+export function askBottom(s, reply = null) {
+  if (!askDocked(s)) return 'composer'
+  return reply && reply.has && reply.has(s.needsYou.ask.id) ? 'slim' : 'dock'
+}
+
+// "Run" -> "Wants to run" (waiting) / "Asked to run" (answered)
+export function askPhrase(verb, { done = false } = {}) {
+  const v = String(verb || '').trim()
+  if (!v) return done ? 'Asked to use a tool' : 'Wants to use a tool'
+  return (done ? 'Asked to ' : 'Wants to ') + v.charAt(0).toLowerCase() + v.slice(1)
+}
+
+// A command or path long enough to fold to three lines, with "Show all" to open it in place.
+export const ASK_LONG_CHARS = 110
+export const askIsLong = (detail) => { const t = String(detail || ''); return t.length > ASK_LONG_CHARS || t.split('\n').length > 3 }
+
+// "1 of 3" when more than one is waiting (answered in order: the next one shows when this one is answered).
+export function askCountHtml(n) {
+  const more = Number(n && n.more) || 0
+  if (more < 1) return ''
+  return '<span class="ask-count" aria-label="' + esc('1 of ' + (more + 1) + ' waiting') + '">1 of ' + esc(String(more + 1)) + '</span>'
+}
+
+const replyInsteadHtml = (askId) => '<button type="button" class="ask-reply-instead" data-action="ask-reply-instead" data-ask="' + esc(askId) + '">Reply instead</button>'
+
+// The card in the composer's place. opts: needPanel's, plus askOpen (Set of ask ids shown in full).
+export function askDockHtml(n, opts = {}) {
+  const s = n.session || {}
+  const askId = n.ask ? n.ask.id : ''
+  // a question: Needs you's own card (options, Other…, Send / Skip), in the dock
+  if (n.kind !== 'permission') return needPanel(n, { ...opts, compact: true, dockClass: 'ask-dock', countHtml: askCountHtml(n), tail: replyInsteadHtml(askId) })
+  const may = opts.mayAnswer !== false
+  const key = askId
+  const busy = opts.pending && opts.pending[key]
+  const dis = !may || busy ? ' disabled' : ''
+  const drafts = opts.drafts || {}
+  const d = n.ask.describe || {}
+  const detail = String(d.detail || '')
+  const long = askIsLong(detail)
+  const open = !!(opts.askOpen && opts.askOpen.has && opts.askOpen.has(askId))
+  const did = 'ask-detail-' + String(askId).replace(/[^A-Za-z0-9_-]/g, '')
+  const go0 = opts.goButton ? opts.goButton(s) : ''
+  const go = /\sdisabled[\s>=]/.test(go0) ? '' : go0 // a Go that can't go is a full row of nothing on a phone
+  let h = '<article class="need ask-dock k-permission' + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '" data-ask="' + esc(askId) + '" data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + ' aria-label="Claude needs your OK">'
+  h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
+    (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" data-tip="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
+    '<span class="need-kind">' + esc(n.label || KIND_LABEL.permission) + '</span>' + askCountHtml(n) +
+    (n.waitSec != null ? '<span class="need-wait">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>'
+  h += '<div class="ask-what"><div class="ask-verb">' + esc(askPhrase(d.verb || ('Use ' + (n.ask.tool || 'a tool')))) + (detail ? ':' : '') + '</div>' + (d.note ? '<div class="ask-note">' + esc(d.note) + '</div>' : '') +
+    (detail ? '<code class="ask-detail' + (long ? ' long' : '') + (open ? ' open' : '') + '" id="' + esc(did) + '">' + esc(detail) + '</code>' : '') +
+    (long ? '<button type="button" class="ask-more" data-action="ask-expand" data-ask="' + esc(askId) + '" aria-expanded="' + (open ? 'true' : 'false') + '" aria-controls="' + esc(did) + '">' + (open ? 'Show less' : 'Show all') + '</button>' : '') + '</div>'
+  h += '<div class="ask-actions">' +
+    '<button type="button" class="btn allow ask-allow" data-action="ask-answer" data-choice="allow"' + dis + ' aria-label="Allow once">Allow</button>' +
+    '<button type="button" class="btn deny ask-deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' +
+    autoRestButton(s, dis) +
+    alwaysButton(n.ask, dis, { session: s, scope: 'dock' }) +
+    (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' data-tip="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') +
+    go + '</div>'
+  h += '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
+    '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
+  if (!may) h += '<div class="need-note warn">Answering from this device is off. Turn it on in Settings → Privacy & security on the machine running Leftoff, or use Go there.</div>'
+  if (busy) h += '<div class="need-note">' + esc(busy) + '</div>'
+  return h + replyInsteadHtml(askId) + '</article>'
+}
+
+// After "Reply instead": the composer is back, with one line above it that
+// says what is still waiting and brings the card back.
+export function askSlimHtml(n) {
+  const d = (n && n.ask && n.ask.describe) || {}
+  const what = n.kind === 'permission' ? askPhrase(d.verb || ('Use ' + ((n.ask && n.ask.tool) || 'a tool'))) + (d.detail ? ': ' + d.detail : '') : 'Asked: ' + ((((n.ask && n.ask.questions) || [])[0] || {}).question || 'a question')
+  return '<div class="ask-slim" data-ask="' + esc(n.ask ? n.ask.id : '') + '"><span class="need-dot" aria-hidden="true"></span><span class="ask-slim-t">' + esc(what) + '</span>' +
+    '<button type="button" class="btn ask-back" data-action="ask-back" data-ask="' + esc(n.ask ? n.ask.id : '') + '">Answer' + (Number(n.more) > 0 ? ' (' + esc(String(Number(n.more) + 1)) + ')' : '') + '</button></div>'
+}
+
+// The thread's rows: every ask of this session the board knows, waiting (the
+// card and the ones behind it) or answered from the board (the session's
+// answers list), each at the time Claude asked. -> [{ key, at, html }]
+const STATE_LABEL = { allow: 'Allowed', allow_session: 'Allowed for this session', allow_always: 'Always allowed here', deny: 'Denied', answer: 'Answered' }
+export function askRowState(a) {
+  if (!a) return 'Waiting'
+  if (a.auto) return 'Auto-approved'
+  if (a.kind === 'question' && a.action === 'deny') return 'Skipped'
+  return STATE_LABEL[a.action] || 'Answered'
+}
+function splitWhat(what) {
+  const t = String(what || '')
+  const i = t.indexOf(': ')
+  return i > 0 && i < 40 ? { verb: t.slice(0, i), detail: t.slice(i + 2) } : { verb: '', detail: t }
+}
+export function askRows(s) {
+  if (!s) return []
+  const rows = []
+  const seen = new Set()
+  const n = s.needsYou
+  const waiting = []
+  if (n && n.ask && (n.kind === 'permission' || n.kind === 'question')) {
+    waiting.push({ id: n.ask.id, kind: n.kind, since: n.since, describe: n.ask.describe || null, question: n.kind === 'question' ? (((n.ask.questions || [])[0] || {}).question || '') : null, first: true })
+    for (const q of n.queue || []) waiting.push(q)
+  }
+  for (const w of waiting) {
+    if (!w || !w.id || seen.has(w.id)) continue
+    seen.add(w.id)
+    rows.push({ key: 'ask:' + w.id, at: w.since || null, waiting: true, kind: w.kind, verb: w.describe ? w.describe.verb : '', detail: w.kind === 'question' ? w.question : (w.describe ? w.describe.detail : ''), state: 'Waiting' })
+  }
+  for (const a of s.answers || []) {
+    if (!a || (a.kind !== 'permission' && a.kind !== 'question')) continue
+    const id = a.askId || null
+    if (id && seen.has(id)) continue
+    if (id) seen.add(id)
+    const w = a.kind === 'question' ? { verb: '', detail: a.what || '' } : splitWhat(a.what)
+    rows.push({ key: 'ask:' + (id || 'a' + String(a.at || '')), at: a.askedAt || a.at || null, waiting: false, kind: a.kind, verb: w.verb, detail: w.detail, state: askRowState(a), note: a.action === 'deny' && a.summary && /“/.test(a.summary) ? a.summary.replace(/^Denied\s*/, '') : '' })
+  }
+  return rows.map((r) => ({ key: r.key, at: r.at, html: askRowHtml(r) }))
+}
+const TONE = { Waiting: 'wait', Denied: 'no', Skipped: 'no', 'Auto-approved': 'auto' }
+export function askRowHtml(r) {
+  const what = r.kind === 'question' ? (r.waiting ? 'Asks you' : 'Asked you') : askPhrase(r.verb, { done: !r.waiting })
+  const sig = [r.state, r.detail, r.note].join('|')
+  let h32 = 5381; for (let i = 0; i < sig.length; i++) h32 = ((h32 << 5) + h32 + sig.charCodeAt(i)) | 0
+  return '<li class="lv-ask t-' + (TONE[r.state] || 'ok') + '" data-key="' + esc(r.key) + '" data-sig="' + (h32 >>> 0).toString(36) + '">' +
+    '<span class="lva-what"><span class="lva-verb">' + esc(what) + (r.detail ? ':' : '') + '</span>' + (r.detail ? ' <code>' + esc(String(r.detail).slice(0, 300)) + '</code>' : '') + '</span>' +
+    '<span class="lva-state">' + esc(r.waiting ? 'Waiting for you' : r.state) + (r.note ? ' ' + esc(r.note) : '') + '</span></li>'
+}

package/ui/start.js

@@ -25,7 +25,35 @@ export function startPick(data, ui = {}) {
   const custom = m && ui.custom && ui.custom.machine === m.machine && ui.custom.path === ui.repo && !repos.some((r) => r.path === ui.custom.path) ? { ...ui.custom, isNew: true } : null
   const repo = repos.find((r) => r.path === ui.repo) || custom || repos[0] || null
   const where = ui.where === 'worktree' && !(repo && repo.git === false) ? 'worktree' : 'repo'
-  return { m, repo, where }
+  // Permissions: what you picked, else what this board last used for that Mac (kept on the Mac you're connected to), else Ask me
+  const mode = START_MODES.some((x) => x.v === ui.mode) ? ui.mode : m && START_MODES.some((x) => x.v === m.lastMode) ? m.lastMode : 'default'
+  return { m, repo, where, mode }
+}
+
+// 0.9.9 Permissions for a session Leftoff starts (src/claude-headless.js
+// ALLOWED_MODES, checked against Claude Code 2.1.300). Never "skip all asks"
+// (bypassPermissions): too much to hand a start from a phone. A session in
+// your own terminal keeps its own mode (Shift+Tab there).
+export const START_MODES = Object.freeze([
+  { v: 'default', label: 'Ask me', sub: 'every edit and command', text: 'Reads run freely; every edit and command waits for you in Needs you (here, your phone, any board).' },
+  { v: 'acceptEdits', label: 'Accept edits', sub: 'edits go through, commands ask', text: 'File edits in the folder go through without asking (so do simple file commands like mkdir); other commands still wait for you in Needs you.' },
+  { v: 'auto', label: 'Auto', sub: 'a safety check decides', text: 'Claude Code’s auto mode: routine steps just run. Riskier ones get a separate safety check (a little extra usage) that lets them run or blocks them; a blocked step is skipped and Claude says why. Few or no asks.' },
+])
+export const TERMINAL_MODE_HINT = 'Sessions you run in your own terminal aren’t changed: press Shift+Tab in Claude Code there.'
+export function modeLabel(mode) { const x = START_MODES.find((y) => y.v === (mode === 'manual' ? 'default' : mode)); return x ? x.label : mode === 'plan' ? 'Plan' : String(mode || 'Ask me') }
+
+// The session page's small pill beside Live: the mode Claude Code reports.
+export function modePillHtml(s, { esc }) {
+  const h = s && s.headless
+  if (!h || !h.mode) return ''
+  const m = h.mode
+  return ' <span class="mode-pill m-' + esc(m) + '" data-tip="' + esc('Permissions: ' + modeLabel(m) + (h.state === 'running' ? '' : ' (when it runs again)')) + '">' + esc(modeLabel(m)) + '</span>'
+}
+
+// Is a path inside one of a Mac's approved folders (its real paths)?
+export function underApproved(p, approved) {
+  const x = String(p || '')
+  return !!x && (Array.isArray(approved) ? approved : []).some((a) => typeof a === 'string' && a && (x === a || x.startsWith(a.endsWith('/') ? a : a + '/')))
 }
 
 // What happens when you press ↑, in one sentence (or why you can't).
@@ -37,7 +65,10 @@ export function startRule(data, pick, { local = true } = {}) {
   if (!pick.repo) return { ok: false, text: m.machine + ' hasn’t run Claude Code in a repo yet. Pick Other folder…, or open Claude Code there once and it shows up here.' }
   // a folder that Mac hasn't run Claude Code in: its hooks run, so only a person at that Mac says yes
   if (pick.repo.isNew && m.here && local) return { ok: true, text: 'First time Claude Code runs in this folder on this Mac: it starts right away and runs the folder’s hooks and MCP servers.' }
-  if (pick.repo.isNew) return { ok: true, text: 'First time in this folder on ' + m.machine + ', so someone there confirms it first (it runs the folder’s hooks), even with “Allow starting sessions from other devices” on.' }
+  // …unless it's inside a folder approved on that Mac and its switch is on (that Mac decides; this is what it told us)
+  if (pick.repo.isNew && m.here && m.allowRemote === true && underApproved(pick.repo.path, m.approved)) return { ok: true, text: 'First time in this folder, but it’s inside a folder approved on ' + m.machine + ': it starts right away, and ' + m.machine + ' shows a notification.' }
+  if (pick.repo.isNew && m.here) return { ok: true, text: 'First time in this folder on ' + m.machine + ', so someone there confirms it first (it runs the folder’s hooks). They can approve the folder above it there, so the next ones start right away.' }
+  if (pick.repo.isNew) return { ok: true, text: 'First time in this folder on ' + m.machine + ', so someone there confirms it first (it runs the folder’s hooks), unless it’s inside a folder approved there.' }
   if (m.here && local) return { ok: true, text: 'It starts right away on this Mac.' }
   if (m.here && m.allowRemote === true) return { ok: true, text: 'It starts right away, and ' + m.machine + ' shows a notification.' }
   if (m.here) return { ok: true, text: 'Someone at ' + m.machine + ' confirms it first (up to 5 minutes). To skip that, turn on “Allow starting sessions from other devices” in its Settings.' }
@@ -60,7 +91,7 @@ function opt({ k, v, label, sub = '', on = false, disabled = false, esc }) {
 // The waiting line after a start that has to be confirmed at the Mac.
 export function startAskLine(ask, { clock = (x) => x } = {}) {
   if (!ask) return null
-  if (ask.state === 'pending') return { tone: 'wait', text: 'Waiting for a yes on ' + ask.machine + ' (until ' + clock(ask.expiresAt) + '). It shows on that Mac’s board and as a notification.' + (ask.firstTime ? ' A first time in a folder always asks there.' : '') }
+  if (ask.state === 'pending') return { tone: 'wait', text: 'Waiting for a yes on ' + ask.machine + ' (until ' + clock(ask.expiresAt) + '). It shows on that Mac’s board and as a notification.' + (ask.firstTime ? ' A first time in a folder asks there, unless it’s inside a folder approved there.' : '') }
   if (ask.state === 'starting') return { tone: 'wait', text: 'Starting on ' + ask.machine + '…' }
   if (ask.state === 'declined') return { tone: 'bad', text: 'Declined on ' + ask.machine + '.' }
   if (ask.state === 'expired') return { tone: 'bad', text: 'Nobody confirmed it on ' + ask.machine + ' in time.' }
@@ -104,11 +135,15 @@ export function startPageHtml(data, ui = {}, { esc, icon, emoji = () => '', loca
     opt({ k: 'where', v: 'repo', on: pick.where === 'repo', esc, label: 'In the repo', sub: 'on its current branch' }) +
     opt({ k: 'where', v: 'worktree', on: pick.where === 'worktree', esc, label: 'New worktree', sub: pick.repo && pick.repo.git === false ? 'needs a git repo' : 'its own branch and folder', disabled: !!(pick.repo && pick.repo.git === false) }) +
     '</div></section>'
+  // Permissions (0.9.9)
+  const mo = START_MODES.find((x) => x.v === pick.mode) || START_MODES[0]
+  h += '<section class="start-sec"><h2 class="start-h">Permissions</h2><div class="start-opts start-mode" role="radiogroup" aria-label="Permissions">' +
+    START_MODES.map((x) => opt({ k: 'mode', v: x.v, on: x.v === mo.v, esc, label: esc(x.label), sub: esc(x.sub) })).join('') +
+    '</div><p class="start-hint start-mode-hint">' + esc(mo.text) + ' ' + esc(TERMINAL_MODE_HINT) + '</p></section>'
   // First message
   h += '<section class="start-sec"><h2 class="start-h" id="start-msg-h">First message</h2><div class="start-box">' +
     composerBoxHtml({ submit: 'start', sendAction: 'start-send', draftKey: 'start', draft, may: rule.ok && !ui.ask, busy, placeholder: 'What should Claude do?', label: 'First message', inputClass: 'start-text', keys: 'Enter Meta+Enter Control+Enter' }) +
-    '</div><p class="start-rule' + (rule.ok ? '' : ' bad') + '" role="status">' + esc(rule.text) + '</p>' +
-    '<p class="start-hint">Reads run freely; every edit and command waits for you in Needs you (here, your phone, any board).</p>'
+    '</div><p class="start-rule' + (rule.ok ? '' : ' bad') + '" role="status">' + esc(rule.text) + '</p>'
   const line = startAskLine(ui.ask, { clock })
   if (line) h += '<div class="start-ask ' + line.tone + '" role="status">' + esc(line.text) + (ui.ask && ['declined', 'expired', 'failed'].includes(ui.ask.state) ? ' <button type="button" class="btn" data-action="start-again">Try again</button>' : '') + '</div>'
   h += '</section></div>'
@@ -172,7 +207,10 @@ export function startTexts(data, ui = {}) {
     d.entries.forEach((e, i) => { t['entry-' + i] = e.name })
   }
   if (ui.browse && ui.browse.pathError) t['path-err'] = ui.browse.pathError
-  for (const a of (data && Array.isArray(data.pending) ? data.pending : [])) if (a.firstTime) t['ask-folder-' + a.id] = a.folder || ''
+  for (const a of (data && Array.isArray(data.pending) ? data.pending : [])) {
+    if (a.firstTime) t['ask-folder-' + a.id] = a.folder || ''
+    if (a.firstTime && a.approve) t['ask-approve-' + a.id] = a.approve.label || ''
+  }
   return t
 }
 
@@ -199,15 +237,29 @@ export function startAsksBanner(info, { esc, icon, local = true, clock = (x) =>
   const asks = info && Array.isArray(info.pending) ? info.pending : []
   if (!asks.length) return ''
   return asks.map((a) => {
+    if (a.kind === 'mode') return modeAskBannerHtml(a, info, { esc, local, clock, busy })
     const b = busy.has(a.id)
     const where = a.firstTime ? '<span data-st="ask-folder-' + esc(a.id) + '"></span>' : esc(a.repo)
-    return '<div class="banner warn start-ask-banner' + (a.firstTime ? ' first' : '') + '" role="alert" data-ask="' + esc(a.id) + '"><span class="grow"><b>' + esc(a.who || 'Another device') + ' asks to start a session</b> in ' + where + (a.where === 'worktree' ? ' (new worktree)' : '') + ' on ' + esc(info.machine || 'this Mac') + ': “' + esc(a.prompt) + '”' +
+    return '<div class="banner warn start-ask-banner' + (a.firstTime ? ' first' : '') + '" role="alert" data-ask="' + esc(a.id) + '"><span class="grow"><b>' + esc(a.who || 'Another device') + ' asks to start a session</b> in ' + where + (a.where === 'worktree' ? ' (new worktree)' : '') + (a.mode && a.mode !== 'default' ? ' in <b>' + esc(modeLabel(a.mode)) + '</b>' : '') + ' on ' + esc(info.machine || 'this Mac') + ': “' + esc(a.prompt) + '”' +
       (a.firstTime ? ' <b class="start-first">First time in this folder; this runs its hooks.</b>' : '') + ' <span class="rs-m">Until ' + esc(clock(a.expiresAt)) + '.</span></span>' +
       (local ? '<button type="button" class="btn primary" data-action="start-ask-confirm" data-id="' + esc(a.id) + '"' + (b ? ' aria-disabled="true"' : '') + '>' + icon('play') + (b ? 'Starting…' : 'Start it') + '</button>' +
+        // a first time: approve the folder above it here, and start this one (the folder is text, put in by fillStartTexts)
+        (a.firstTime && a.approve ? '<button type="button" class="btn approve" data-action="start-ask-approve" data-id="' + esc(a.id) + '"' + (b ? ' aria-disabled="true"' : '') + '>Always allow in <span class="mono" data-st="ask-approve-' + esc(a.id) + '"></span></button>' : '') +
         '<button type="button" class="btn" data-action="start-ask-decline" data-id="' + esc(a.id) + '"' + (b ? ' aria-disabled="true"' : '') + '>Decline</button>' : '<span class="rs-m">Someone at that Mac confirms it there.</span>') + '</div>'
   }).join('')
 }
 
+// A phone or another Mac asks to switch a running session to Accept edits or
+// Auto while "Allow starting sessions from other devices" is off: the same
+// yes at this Mac a start needs (src/session-start.js switchMode).
+export function modeAskBannerHtml(a, info, { esc, local = true, clock = (x) => x, busy = new Set() } = {}) {
+  const b = busy.has(a.id)
+  const mo = START_MODES.find((x) => x.v === a.mode)
+  return '<div class="banner warn start-ask-banner mode-ask" role="alert" data-ask="' + esc(a.id) + '"><span class="grow"><b>' + esc(a.who || 'Another device') + ' asks to switch ' + esc(a.repo || 'a session') + ' to ' + esc(modeLabel(a.mode)) + '</b> on ' + esc(info.machine || 'this Mac') + '. ' + esc(mo ? mo.text : '') + ' <span class="rs-m">Until ' + esc(clock(a.expiresAt)) + '.</span></span>' +
+    (local ? '<button type="button" class="btn primary" data-action="start-ask-confirm" data-id="' + esc(a.id) + '"' + (b ? ' aria-disabled="true"' : '') + '>' + (b ? 'Switching…' : 'Switch it') + '</button>' +
+      '<button type="button" class="btn" data-action="start-ask-decline" data-id="' + esc(a.id) + '"' + (b ? ' aria-disabled="true"' : '') + '>Decline</button>' : '<span class="rs-m">Someone at that Mac confirms it there.</span>') + '</div>'
+}
+
 // Asked once on THIS Mac's board when it pairs a phone or sees a new Mac:
 // may it start sessions here? No is the default (first, and what doing
 // nothing means); Yes turns on the switch, and Trust my paired devices if it's
@@ -227,7 +279,7 @@ export function startPairAskHtml(info, { esc, local = true, busy = false } = {})
 // The session page's line for a session Leftoff runs: where it runs, who
 // started it, and Stop / Resume. The error (Claude Code's own words) is put
 // in with textContent by app.js ([data-headless-err]).
-export function headlessBarHtml(s, { esc, icon, may = true } = {}) {
+export function headlessBarHtml(s, { esc, icon, may = true, busy = null, local = true } = {}) {
   const h = s && s.headless
   if (!h) return ''
   const from = s.startedFrom && s.startedFrom.device ? ' from ' + s.startedFrom.device : ''
@@ -240,7 +292,22 @@ export function headlessBarHtml(s, { esc, icon, may = true } = {}) {
     if (may) btn = '<button type="button" class="btn primary" data-action="headless-run" data-id="' + esc(s.id) + '">' + icon('play') + 'Resume here</button>'
   }
   return '<div class="headless-bar ' + esc(h.state) + '" data-sid="' + esc(s.id) + '"><span class="grow">' + icon('play') + esc(text) + '</span>' + btn + '</div>' +
-    (h.error && h.state !== 'running' ? '<pre class="headless-err" data-headless-err="' + esc(s.id) + '"></pre>' : '')
+    (h.error && h.state !== 'running' ? '<pre class="headless-err" data-headless-err="' + esc(s.id) + '"></pre>' : '') +
+    (h.state !== 'stopping' ? headlessModeHtml(s, { esc, may, busy, local }) : '')
+}
+
+// The session page's Permissions switch for a session Leftoff runs: the same
+// three as New session. Running, it switches Claude Code mid-session; stopped,
+// it's the mode Resume starts it in.
+export function headlessModeHtml(s, { esc, may = true, busy = null, local = true } = {}) {
+  const h = s && s.headless
+  if (!h || !may) return '' // can't change it from here (no Trust): the pill beside Live still says which
+  const cur = h.mode === 'manual' ? 'default' : h.mode || 'default'
+  const mo = START_MODES.find((x) => x.v === cur)
+  const remote = !local || s.isLocal === false
+  return '<div class="headless-mode" role="group" aria-label="Permissions"><span class="hm-l">Permissions</span><div class="hm-seg" role="radiogroup" aria-label="Permissions">' +
+    START_MODES.map((x) => '<button type="button" class="hm-opt" role="radio" aria-checked="' + (x.v === cur) + '" data-action="headless-mode" data-id="' + esc(s.id) + '" data-mode="' + esc(x.v) + '"' + (busy ? ' disabled' : '') + ' data-tip="' + esc(x.text) + '">' + esc(x.label) + (busy === x.v ? '…' : '') + '</button>').join('') +
+    '</div><p class="hint hm-hint">' + esc(mo ? mo.text : 'Claude Code is in ' + modeLabel(cur) + ' mode.') + (h.state === 'running' ? '' : ' Applies when you Resume it.') + ' ' + (remote ? 'From another device, Accept edits and Auto follow that Mac’s “Allow starting sessions from other devices” (else someone there says yes). ' : '') + esc(TERMINAL_MODE_HINT) + '</p></div>'
 }
 
 // Settings → Privacy & security: the one switch, on this Mac only.
@@ -260,6 +327,41 @@ export function startsSettingHtml(info, { esc, local = true, emoji = '', icon =
   const m = esc(info.machine || 'that Mac')
   return '<label for="f-start-allow">Start sessions' + localPillHtml({ machine: info.machine, emoji, esc }) + '</label>' +
     '<label class="check' + (local ? '' : ' locked') + '"><input id="f-start-allow" type="checkbox"' + (info.allowRemote ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>Allow starting sessions from other devices</span></label>' +
-    '<div class="hint">Off: a session your phone or another Mac starts here waits until someone at this Mac confirms it. On: it starts right away, and this Mac shows a notification each time. Needs Trust my paired devices.</div>' +
-    '<div class="hint local-hint">' + (local ? 'Or run <code>leftoff starts on</code> on this Mac.' : 'Change on ' + m + ', or run <code>leftoff starts on</code> there.') + '</div>'
+    '<div class="hint">Off: a session your phone or another Mac starts here waits until someone at this Mac confirms it. On: it starts right away, and this Mac shows a notification each time. A folder this Mac hasn’t run Claude Code in still asks here first, unless it’s inside an approved folder. Needs Trust my paired devices.</div>' +
+    '<div class="hint local-hint">' + (local ? 'Or run <code>leftoff starts on</code> on this Mac.' : 'Change on ' + m + ', or run <code>leftoff starts on</code> there.') + '</div>' +
+    approvedSettingHtml(info, { esc, local, emoji, icon })
+}
+
+// Approved folders (0.9.9): with the switch on, a first-time folder inside one
+// starts from your other devices without asking here. Kept on this Mac; added
+// and removed only at it. Every path is put in as text by fillApproved.
+export function approvedSettingHtml(info, { esc, local = true, emoji = '', icon = null } = {}) {
+  if (!info) return ''
+  const list = Array.isArray(info.approved) ? info.approved : []
+  const m = esc(info.machine || 'that Mac')
+  return '<label for="f-start-approve">Approved folders' + localPillHtml({ machine: info.machine, emoji, esc }) + '</label>' +
+    '<div class="approved' + (local ? '' : ' locked') + '" data-approved>' +
+      (list.length ? '<ul class="approved-list">' + list.map((a, i) => '<li><span class="approved-path mono" data-apt="row-' + i + '"></span>' +
+        (local ? '<button type="button" class="btn approved-x" data-action="start-approved-remove" data-i="' + i + '" data-apt-label="row-' + i + '">' + (icon ? icon('x') : '✕') + '<span>Remove</span></button>' : '') + '</li>').join('') + '</ul>'
+        : '<div class="approved-none">None yet.</div>') +
+      '<div class="approved-add">' + lockHtml(local, icon) + '<input id="f-start-approve" type="text" inputmode="url" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="~/src" aria-describedby="f-start-approve-err"' + lockedAttrs(local) + '>' +
+        '<button type="button" class="btn" data-action="start-approved-add"' + lockedAttrs(local) + '>Add</button></div>' +
+      '<div class="approved-err" id="f-start-approve-err" role="alert" data-apt="err" hidden></div>' +
+    '</div>' +
+    '<div class="hint">With the switch on, a folder this Mac hasn’t run Claude Code in starts right away from your other devices when it’s inside one of these. Folders in your home, not home itself.' + (local ? '' : ' Change on ' + m + ', or run <code>leftoff starts allow ~/src</code> there.') + '</div>'
+}
+
+// The paths, as text (never markup), and each Remove's name for a screen reader.
+export function fillApproved(root, info, err = '') {
+  if (!root || !root.querySelectorAll) return 0
+  const list = info && Array.isArray(info.approved) ? info.approved : []
+  let n = 0
+  for (const el of root.querySelectorAll('[data-apt]')) {
+    const k = el.getAttribute('data-apt')
+    if (k === 'err') { el.textContent = err || ''; el.hidden = !err; n++; continue }
+    const a = list[Number(k.replace('row-', ''))]
+    el.textContent = a ? a.label || a.path : ''; n++
+  }
+  for (const b of root.querySelectorAll('[data-apt-label]')) { const a = list[Number(b.getAttribute('data-apt-label').replace('row-', ''))]; if (a) b.setAttribute('aria-label', 'Remove ' + (a.label || a.path)) }
+  return n
 }