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

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,12 +292,76 @@ 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.
-export function startsSettingHtml(info, { esc, local = true } = {}) {
+// 0.9.9: a setting kept only on one Mac (not in the synced config.json) wears a
+// pill beside its label: "🖥️ studio only", with a styled tip. Synced settings
+// get none, so the pill alone tells you which kind it is.
+export const LOCAL_TIP = 'Kept on this Mac; doesn’t sync.'
+export function localPillHtml({ machine, emoji = '', esc }) {
+  return ' <span class="local-pill" data-tip="' + esc(LOCAL_TIP) + '">' + (emoji ? '<span aria-hidden="true">' + esc(emoji) + '</span> ' : '') + esc(machine || 'this Mac') + ' only<span class="sr-only">: ' + esc(LOCAL_TIP) + '</span></span>'
+}
+// Away from that Mac the control is locked, and looks it: a lock, not just grey.
+export function lockedAttrs(local) { return local ? '' : ' disabled aria-disabled="true"' }
+export function lockHtml(local, icon) { return local ? '' : '<span class="lock" aria-hidden="true">' + (icon ? icon('lock') : '🔒') + '</span>' }
+
+export function startsSettingHtml(info, { esc, local = true, emoji = '', icon = null } = {}) {
+  if (!info) return ''
+  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. 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 ''
-  return '<label for="f-start-allow">Start sessions</label><label class="check"><input id="f-start-allow" type="checkbox"' + (info.allowRemote ? ' checked' : '') + (local ? '' : ' disabled') + '><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. Kept on this Mac only (it doesn’t sync)' + (local ? '.' : '; change it on ' + esc(info.machine || 'that Mac') + '.') + '</div>'
+  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
 }