@leftoff/cli 0.9.8 → 0.9.9-beta.10

package/ui/start.js

@@ -0,0 +1,367 @@
+// 0.9.9 New session (docs/plans/start-from-board.md): pick a Mac, a repo it
+// has run Claude Code in, where (the repo, or a new worktree), and the first
+// message (the Live composer, ui/composer.js); Leftoff starts Claude Code there
+// and the session shows on every board right away. Inline on a phone: plain
+// lists of big buttons, no menus or popovers. Pure HTML builders, shared with
+// the unit tests; app.js wires them.
+import { composerBoxHtml } from './composer.js'
+
+const REPOS_SHOWN = 6
+
+// At this Mac: its own browser (the daemon says local), or your hosted board
+// open on it through the direct door (local and direct). boardLocal is the
+// board's own read of where it runs; the direct door overrides it.
+export function startViewerLocal(viewer, boardLocal = true) {
+  return !!(viewer && viewer.local) && (boardLocal || viewer.direct === true)
+}
+
+// The choice the page shows: what you picked, else this Mac (or the first
+// online one), its newest repo, and "In the repo".
+export function startPick(data, ui = {}) {
+  const ms = (data && data.machines) || []
+  const m = ms.find((x) => x.machine === ui.machine && x.online) || ms.find((x) => x.here && x.online && x.repos.length) || ms.find((x) => x.online && x.repos.length) || ms.find((x) => x.here) || ms[0] || null
+  const repos = m ? m.repos : []
+  // Other folder…: a folder that Mac hasn't run Claude Code in (ui.custom), picked in the browser
+  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'
+  // 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).
+export function startRule(data, pick, { local = true } = {}) {
+  const m = pick.m
+  if (!m) return { ok: false, text: 'No Mac to start on.' }
+  if (!local && !data.trust) return { ok: false, text: 'Turn on Trust my paired devices on a Mac first (Settings → Privacy & security), so you can answer its prompts from here.' }
+  if (!m.online) return { ok: false, text: m.machine + ' is offline right now.' }
+  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.' }
+  // …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.' }
+  return { ok: true, text: 'It starts right away if ' + m.machine + ' allows starting sessions from other devices; otherwise someone there confirms it first.' }
+}
+
+const ago = (iso, now) => {
+  const t = Date.parse(iso || ''); if (!Number.isFinite(t)) return ''
+  const s = Math.max(0, Math.round((now - t) / 1000))
+  if (s < 3600) return Math.max(1, Math.round(s / 60)) + 'm ago'
+  if (s < 86400) return Math.round(s / 3600) + 'h ago'
+  return Math.round(s / 86400) + 'd ago'
+}
+
+function opt({ k, v, label, sub = '', on = false, disabled = false, esc }) {
+  return '<button type="button" class="start-opt" role="radio" aria-checked="' + on + '" data-action="start-pick" data-k="' + esc(k) + '" data-v="' + esc(v) + '"' + (disabled ? ' disabled' : '') + '>' +
+    '<span class="start-opt-main">' + label + '</span>' + (sub ? '<span class="start-opt-sub">' + sub + '</span>' : '') + '</button>'
+}
+
+// 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 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.' }
+  if (ask.state === 'failed') return { tone: 'bad', text: 'Didn’t start on ' + ask.machine + ': ' + (ask.error || 'unknown error') }
+  return null
+}
+
+export function startPageHtml(data, ui = {}, { esc, icon, emoji = () => '', local = true, now = Date.now(), clock = (x) => x, draft = '', busy = false } = {}) {
+  const pick = startPick(data, ui)
+  const rule = startRule(data, pick, { local })
+  let h = '<a class="back" href="#/">← All sessions</a>' +
+    '<div class="pagehead"><div><h1>New session</h1><div class="sub">Leftoff starts Claude Code on the Mac you pick. It shows on every board right away: talk to it in Live, approve its edits and commands in Needs you.</div></div></div>'
+  h += '<div class="start" data-start>'
+  // Mac
+  const ms = (data && data.machines) || []
+  h += '<section class="start-sec"><h2 class="start-h">Mac</h2><div class="start-opts" role="radiogroup" aria-label="Mac">' +
+    ms.map((x) => opt({ k: 'machine', v: x.machine, on: !!pick.m && x.machine === pick.m.machine, disabled: !x.online, esc,
+      label: esc((emoji(x.machine) ? emoji(x.machine) + ' ' : '') + x.machine), sub: esc(x.here ? (local ? 'this Mac' : 'the Mac you’re connected to') : x.online ? 'online' : 'offline') })).join('') +
+    '</div></section>'
+  // Repo
+  const repos = pick.m ? pick.m.repos : []
+  const all = !!ui.allRepos || repos.length <= REPOS_SHOWN + 1
+  const shown = all ? repos : repos.slice(0, REPOS_SHOWN).concat(pick.repo && repos.indexOf(pick.repo) >= REPOS_SHOWN ? [pick.repo] : [])
+  const custom = pick.repo && pick.repo.isNew ? pick.repo : null
+  const browsing = !!(pick.m && ui.browse && ui.browse.machine === pick.m.machine)
+  h += '<section class="start-sec"><h2 class="start-h">Repo</h2>'
+  if (!repos.length && !custom) h += '<p class="start-empty">' + esc(pick.m ? pick.m.machine + ' hasn’t run Claude Code in a repo yet.' : 'No Mac yet.') + '</p>'
+  if (pick.m) {
+    h += '<div class="start-opts" role="radiogroup" aria-label="Repo">' + shown.map((r) => opt({ k: 'repo', v: r.path, on: !!pick.repo && r.path === pick.repo.path, esc,
+      label: esc(r.name) + (r.branch ? ' <span class="start-branch">' + esc(r.branch) + '</span>' : ''), sub: esc(r.path.replace(/^\/Users\/[^/]+/, '~')) + (r.lastAt ? ' · ' + esc(ago(r.lastAt, now)) : '') + (r.git === false ? ' · not a git repo' : '') })).join('') +
+      // the folder picked with Other folder… (its name and path go in as text: [data-st], startTexts)
+      (custom ? '<button type="button" class="start-opt start-custom" role="radio" aria-checked="true" data-action="start-pick" data-k="repo" data-v="' + esc(custom.path) + '"><span class="start-opt-main"><span data-st="custom-name"></span> <span class="start-badge new">first time here</span>' + (custom.git ? '' : ' <span class="start-badge">not a git repo</span>') + '</span><span class="start-opt-sub" data-st="custom-path"></span></button>' : '') +
+      (pick.m.online ? '<button type="button" class="start-opt start-other" data-action="start-browse" aria-expanded="' + browsing + '"' + (browsing ? ' aria-controls="start-browse"' : '') + '><span class="start-opt-main">' + icon('folder') + 'Other folder…</span><span class="start-opt-sub">Browse ' + esc(pick.m.machine) + '’s folders</span></button>' : '') + '</div>'
+    if (!all) h += '<button type="button" class="btn start-more" data-action="start-all-repos">Show all ' + repos.length + '</button>'
+    if (browsing) h += startBrowseHtml(ui.browse, { esc, icon, machine: pick.m.machine })
+    if (repos.length) h += '<p class="start-hint">Listed: repos ' + esc(pick.m.machine) + ' has already run Claude Code in. Other folder… picks any folder in your home there; the first time, ' + (pick.m.here && local ? 'starting it is your yes to its hooks.' : 'someone at ' + esc(pick.m.machine) + ' says yes first.') + '</p>'
+  }
+  h += '</section>'
+  // Where
+  h += '<section class="start-sec"><h2 class="start-h">Where</h2><div class="start-opts start-where" role="radiogroup" aria-label="Where">' +
+    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>'
+  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>'
+  return h
+}
+
+// Other folder…: the inline folder browser for one Mac (no popover; full width
+// on a phone). Folder names and paths come from that Mac's disk, so they go in
+// as text afterwards ([data-st], startTexts / fillStartTexts), never as markup.
+// b: { machine, loading, error, data: the GET /v1/start/dirs answer }
+export function startBrowseHtml(b, { esc, icon = () => '', machine = '' } = {}) {
+  let h = '<div class="start-browse" id="start-browse" role="region" aria-label="Folders on ' + esc(machine) + '">'
+  const d = b && b.data
+  // or type one you know (~/src/project, or a full path): the browser goes there; the same rules as walking to it
+  const goTo = '<form class="sb-path" data-form="start-browse-path" novalidate><label class="sb-path-l" for="sb-path-in">Go to a folder</label><div class="sb-path-row">' +
+    '<input type="text" id="sb-path-in" class="sb-path-in" name="path" placeholder="~/code/web" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go"' + (b && b.pathError ? ' aria-invalid="true" aria-describedby="sb-path-err"' : '') + '>' +
+    '<button type="submit" class="btn">Go</button></div>' +
+    (b && b.pathError ? '<p class="start-rule bad sb-path-err" id="sb-path-err" role="alert" data-st="path-err"></p>' : '') + '</form>'
+  if (!d) h += goTo
+  if (d) {
+    h += '<nav class="sb-crumbs" aria-label="Folder">' + d.crumbs.map((c, i) => (i ? '<span class="sb-sep" aria-hidden="true">/</span>' : '') +
+      '<button type="button" class="sb-crumb" data-action="start-browse-go" data-crumb="' + i + '"' + (i === d.crumbs.length - 1 ? ' aria-current="location"' : '') + ' data-st="crumb-' + i + '"></button>').join('') + '</nav>'
+    h += '<div class="sb-here">' +
+      (d.parent ? '<button type="button" class="btn sb-up" data-action="start-browse-up" aria-label="Up one folder">' + icon('chevron-left') + 'Up</button>' : '') +
+      '<span class="sb-cur"><span class="sb-cur-name" data-st="cur"></span>' + (d.git ? ' <span class="start-badge git">git</span>' : ' <span class="start-badge">not a git repo</span>') + '</span>' +
+      '<button type="button" class="btn primary sb-use" data-action="start-browse-use"' + (d.parent ? '' : ' disabled') + '>Use this folder</button></div>'
+    h += goTo
+    if (d.shortcuts && d.shortcuts.length > 1) h += '<div class="sb-cuts"><span class="sb-cuts-l">Jump to</span>' + d.shortcuts.map((c, i) => '<button type="button" class="sb-cut" data-action="start-browse-go" data-cut="' + i + '" data-st="cut-' + i + '"></button>').join('') + '</div>'
+    if (!d.entries.length) h += '<p class="start-empty">No folders in here.</p>'
+    else h += '<ul class="sb-list">' + d.entries.map((e, i) => '<li><button type="button" class="sb-dir" data-action="start-browse-go" data-entry="' + i + '">' + icon('folder') + '<span class="sb-name" data-st="entry-' + i + '"></span>' + (e.git ? '<span class="start-badge git">git</span>' : '') + icon('chevron-right', 'ic sb-go') + '</button></li>').join('') + '</ul>'
+    if (d.capped) h += '<p class="start-hint">Showing the first ' + esc(String(d.entries.length)) + ' of ' + esc(String(d.total)) + ' folders.</p>'
+  }
+  if (b && b.loading) h += '<p class="start-hint" role="status">Loading ' + esc(machine) + '’s folders…</p>'
+  if (b && b.error) h += '<p class="start-rule bad" role="alert">' + esc(b.error) + '</p>'
+  h += '<p class="start-hint">Folders only, by name: hidden ones, node_modules and Library are left out, and so is the synced Leftoff folder.</p>' +
+    '<div class="sb-foot"><button type="button" class="btn" data-action="start-browse-close">Cancel</button></div></div>'
+  return h
+}
+
+// What you typed in "Go to a folder", as a path to ask for: no spaces around
+// it, no quotes a copy brought along, a shell's "\ " back to a space, no
+// trailing slash. "~" stays "~"; the Mac resolves it (src/dirs.js checkFolder).
+export function typedPath(v) {
+  let t = String(v == null ? '' : v).trim()
+  if (/^(['"]).*\1$/.test(t) && t.length >= 2) t = t.slice(1, -1).trim()
+  t = t.replace(/\\ /g, ' ')
+  if (t.length > 1) t = t.replace(/\/+$/, '') || '/'
+  return t
+}
+
+// The text for every [data-st] on the page: names and paths from a Mac's disk.
+export function startTexts(data, ui = {}) {
+  const t = {}
+  const pick = startPick(data, ui)
+  if (pick.repo && pick.repo.isNew) { t['custom-name'] = pick.repo.name || ''; t['custom-path'] = pick.repo.label || pick.repo.path || '' }
+  const d = ui.browse && ui.browse.data
+  if (d) {
+    t.cur = d.label || d.path || ''
+    d.crumbs.forEach((c, i) => { t['crumb-' + i] = c.name })
+    ;(d.shortcuts || []).forEach((c, i) => { t['cut-' + i] = c.label })
+    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 || ''
+    if (a.firstTime && a.approve) t['ask-approve-' + a.id] = a.approve.label || ''
+  }
+  return t
+}
+
+export function fillStartTexts(root, texts) {
+  if (!root || !root.querySelectorAll) return 0
+  let n = 0
+  for (const el of root.querySelectorAll('[data-st]')) { el.textContent = texts[el.getAttribute('data-st')] || ''; n++ }
+  return n
+}
+
+// The folder a browser click means: { path } from a crumb, a shortcut or an entry.
+export function browseTarget(b, el) {
+  const d = b && b.data
+  if (!d || !el || !el.dataset) return null
+  if (el.dataset.crumb != null) return d.crumbs[Number(el.dataset.crumb)] || null
+  if (el.dataset.cut != null) return (d.shortcuts || [])[Number(el.dataset.cut)] || null
+  if (el.dataset.entry != null) return d.entries[Number(el.dataset.entry)] || null
+  return null
+}
+
+// A request waiting on THIS Mac: its board shows it with Start and Decline
+// (only this Mac's own browser may answer).
+export function startAsksBanner(info, { esc, icon, local = true, clock = (x) => x, busy = new Set() } = {}) {
+  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)' : '') + (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
+// off (the words say so). Never shown off this Mac.
+export function startPairAskHtml(info, { esc, local = true, busy = false } = {}) {
+  const a = info && info.pairAsk
+  if (!a || !local) return ''
+  const mac = info.machine || 'this Mac'
+  const who = a.kind === 'mac' ? (a.name || 'your other Mac') : 'your phone'
+  const what = a.kind === 'mac' ? 'Let ' + who + ' start sessions here?' : 'Let your phone start sessions here?'
+  const yes = 'Yes turns on “Allow starting sessions from other devices” for ' + mac + (info.trust ? '' : ', and Trust my paired devices so you can answer its prompts there') + '. It applies to every paired phone and Mac; change it any time in Settings → Privacy & security.'
+  return '<div class="banner info pair-ask" role="region" aria-label="' + esc(what) + '"><span class="grow"><b>' + esc(what) + '</b> ' + esc(a.kind === 'mac' ? who + ' could start Claude Code on ' + mac + ' with nobody here;' : 'It could start Claude Code on ' + mac + ' with nobody here;') + ' its edits and commands still wait for you in Needs you. ' + esc(yes) + '</span>' +
+    '<button type="button" class="btn" data-action="pair-ask-no"' + (busy ? ' aria-disabled="true"' : '') + '>No</button>' +
+    '<button type="button" class="btn" data-action="pair-ask-yes"' + (busy ? ' aria-disabled="true"' : '') + '>Yes, allow</button></div>'
+}
+
+// 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, busy = null, local = true } = {}) {
+  const h = s && s.headless
+  if (!h) return ''
+  const from = s.startedFrom && s.startedFrom.device ? ' from ' + s.startedFrom.device : ''
+  const where = s.machine ? ' on ' + s.machine : ''
+  let text, btn = ''
+  if (h.state === 'running') { text = 'Running' + where + ', started' + from + ' by Leftoff' + (h.awake ? ' · keeping it awake' : ''); if (may) btn = '<button type="button" class="btn" data-action="headless-stop" data-id="' + esc(s.id) + '">' + icon('square') + 'Stop</button>' }
+  else if (h.state === 'stopping') text = 'Stopping' + where + '…'
+  else {
+    text = (h.state === 'paused' ? 'Paused' + where + ' (Leftoff restarted)' : h.error ? 'Claude Code stopped' + where : 'Stopped' + where) + (from ? ', started' + from : '')
+    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.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.
+// 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 ''
+  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
+}