@leftoff/cli 0.9.9-beta.1 → 0.9.9-beta.2

package/docs/SECURITY.md

@@ -106,6 +106,18 @@ Live link is opt-in, per session: only sessions started with `leftoff live` have
 - **Outside events** need this Mac's event key (`~/.config/checkpoints/secrets/live-events`, mode 600, made by `leftoff live key`, replaced with `--new`). Locally that's a Bearer key. Through the relay only an HMAC signature is accepted (5-minute window, replays refused), so the relay can pass an event along but can't read the key, forge an event or change one. Both the relay and the Mac rate-limit, and bodies are capped at 16 KB. Claude's instructions call an event information, not a command, but it is still text Claude reads: anyone with the key can put words in front of your session. Keep the key in your CI's secrets.
 - **Remote Restore** opens Ghostty tabs, so a phone or another Mac can only ask. The Mac shows a notification and a card, and only that Mac's own browser can confirm. Requests expire after 5 minutes, at most 3 wait at once, and they're rate-limited.
 
+### Start a session from the board (0.9.9 beta)
+
+**New session** starts Claude Code on a Mac you pick, headless (`claude -p` with stream-json in and out, run by that Mac's daemon). That is more than answering a prompt (a new agent in your repo, on your Claude plan), so:
+
+- **This Mac's own board** starts it at once. **A phone or another Mac** may start one only when that Mac has *Allow starting sessions from other devices* on (Settings → Privacy & security, off by default) **and** *Trust my paired devices* is on. The switch is kept on that Mac (`~/.config/checkpoints/local/`, not the synced folder, so turning it on one Mac never turns it on another) and only that Mac's own browser can change it (loopback; a phone, the relay or a peer gets 403). Every start from another device shows a notification on the Mac. With the switch off, the request waits up to 5 minutes for a yes on that Mac's board, like Remote Restore. At most 3 wait at once; 3 starts at once, then 1 a minute.
+- **Only repos that Mac has already run Claude Code in** (from its session records; no typed paths). A headless run loads a repo's hooks and `.mcp.json` without the trust dialog, so a folder nobody opened in Claude Code can't be started.
+- **Permission mode `default`, always passed.** Reads in the repo run; every edit and command becomes a Needs-you request (here, the phone, any board; first answer wins) and waits for it, with no 9.5-minute cap since nobody is at a terminal. A request settled any other way is a no. Never `bypassPermissions` or `auto`. AskUserQuestion is answered "ask in words", so Claude asks in plain text and you reply in Live.
+- **Other Macs** reach it over the signed, encrypted peer link (`session.start`, `session.start.get`, `session.headless`; not open actions, so the target Mac's *Allow other machines* applies too).
+- **Nothing new in the folder.** The card, its title and checkpoints as for any session, plus `startedFrom` (device and how it came, not the prompt) and the run's state. Stream output, stdin and stderr stay in the daemon's memory; Claude's transcript stays in `~/.claude` on that Mac; the Live thread and attachments stay where Live keeps them (`~/.config/checkpoints`).
+- **Keeping the Mac awake.** While a turn runs, the daemon holds `caffeinate -i -w <pid>` (idle sleep waits; a closed lid on battery still sleeps). Stop interrupts the turn, closes stdin, then SIGINT, then SIGTERM. A daemon that stops pauses its sessions.
+- **Logged:** one daemon-log line per start, stop and permission request (session id and tool, never prompt text).
+
 ### What it did: tool output and the diff (0.9.8 beta)
 
 The session page's **What it did** shows the last tools a session ran with what they printed, and **This folder's changes** (the session's folder's uncommitted changes). This puts command output and file contents on the board and on your phone, so:

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.9-beta.1",
+  "version": "0.9.9-beta.2",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/core.js

@@ -567,7 +567,7 @@ const SESSION_ORDER = ['id', 'title', 'title_source', 'machine', 'cwd', 'repo',
 export const SESSION_EXTRA = ['inTurn', 'needsInput', 'backgroundTasks', 'turnsSinceCheckpoint', 'dormantStretch',
   'finalCheckpointDone', 'firstPrompt', 'lastPreview', 'lastNotification', 'lastEventAt', 'statusChanges', 'folder',
   'pid', 'tty', 'pidStartedAt', 'pidSource', 'term', 'closedAt', 'answers', 'lastNotificationMessage', 'needsInputAt', 'question', 'questionAt',
-  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive', 'headless', 'startedFrom']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',
@@ -1840,6 +1840,14 @@ export function isNonInteractive({ surface = null, entrypoint = null } = {}) {
   return surface === 'headless' || surface === 'codex-exec'
 }
 
+// 0.9.9: a session Leftoff itself started from the board (src/headless.js).
+// It runs as `claude -p` (entrypoint sdk-cli) but it is your work: the daemon
+// spawned it with LEFTOFF_HEADLESS=<its session id>. Anything else in that
+// variable (empty, a stray value) doesn't count.
+export function isLeftoffHeadless(value) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(String(value || '').trim())
+}
+
 // Our own summarizer's and titler's prompts (buildCheckpointPrompt, TITLE
 // prompt): a session that starts with one is Leftoff talking to a model.
 export function isOwnSummarizerPrompt(p) {

package/mod/hooks/register.js

@@ -19,7 +19,7 @@ import {
   shortId, formatTabTitle, parseTabTitle, detectTerminal, parseProcLine, trailingQuestion,
   parseCheckpointArgs, SUMMARY_LENGTHS, parseBulletList, parseCatchupArgs,
   listHintFrom, extractChecklists, parseTodoArgs, parseDoneArgs, detectBackend, parseParkArgs,
-  boardLinkLines, isNonInteractive, lockForPark, parkLockHeld, unlockParkLocks, parkWorktreeText,
+  boardLinkLines, isNonInteractive, isLeftoffHeadless, lockForPark, parkLockHeld, unlockParkLocks, parkWorktreeText,
 } from './core.js'
 
 const PANE_ID = 'checkpoints'
@@ -28,10 +28,11 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.9-beta.1' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.9-beta.2' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,
+  headless: false, // 0.9.9: started from the board (LEFTOFF_HEADLESS)
   ready: false,
   sessionId: null,
   root: null,
@@ -150,10 +151,19 @@ async function sayHelloAgain($) {
 async function isInternal($) {
   // Leftoff's own claude runs (the summarizer's claude -p, claude plugin …) carry this.
   if ((await $.env.get('LEFTOFF_INTERNAL')) || (await $.env.get('CHECKPOINTS_INTERNAL'))) return true
+  // 0.9.9: a session Leftoff started from the board runs as claude -p, but it is yours.
+  if (await isHeadless($)) return false
   // 0.8.6: `claude -p` / the Agent SDK (CLAUDE_CODE_ENTRYPOINT sdk-*): not a work session.
   try { return isNonInteractive({ entrypoint: await $.env.get('CLAUDE_CODE_ENTRYPOINT') }) } catch { return false }
 }
 
+// 0.9.9: started by Leftoff from the board (src/headless.js): no terminal, no
+// tab to name, the daemon writes the board's messages on its stdin and answers
+// its permission prompts itself, so the mod only reports.
+async function isHeadless($) {
+  try { return isLeftoffHeadless(await $.env.get('LEFTOFF_HEADLESS')) } catch { return false }
+}
+
 async function loadSetup($) {
   const home = (await $.env.get('HOME')) || (await $.env.get('USERPROFILE')) || ''
   st.root = ((await $.env.get('LEFTOFF_DIR')) || (await $.env.get('CHECKPOINTS_DIR')) || home + '/checkpoints').replace(/\/+$/, '')
@@ -577,7 +587,8 @@ async function readBackend($, model) {
 // tab titled. (Claude Code's terminalTitleFromRename setting has to stay on,
 // which it is by default.) With CLAUDE_CODE_DISABLE_TERMINAL_TITLE set, Claude
 // Code draws nothing, so the mod writes OSC 2 to the session's tty instead.
-function tabTitleOn() { return st.cfg.tabTitle !== false && !st.internal && st.surface !== 'headless' }
+const noTab = () => st.surface === 'headless' || st.surface === 'leftoff' // no terminal tab (claude -p, or started from the board)
+function tabTitleOn() { return st.cfg.tabTitle !== false && !st.internal && !noTab() }
 
 function desiredTabTitle(name) {
   const repo = st.record ? repoName(st.record) : null
@@ -865,7 +876,7 @@ const ASK_MAX_MS = 9.5 * 60 * 1000
 
 async function permissionHook($, e, next) {
   const base = await next(e)
-  if (st.internal || !st.sessionId || (base && base.decision)) return base
+  if (st.internal || st.headless || !st.sessionId || (base && base.decision)) return base // headless: the daemon answers on its pipe
   const opened = await api($, 'POST', '/v1/asks', {
     sessionId: e.session_id || st.sessionId, tool: e.tool_name, input: e.tool_input, suggestions: e.permission_suggestions,
     capture: 'mod', cwd: e.cwd, permissionMode: e.permission_mode,
@@ -913,7 +924,7 @@ async function toolRan($, e) {
 // typed in with $.prompt.submit, which Claude Code runs once the session is idle
 // (checked on 2.1.295: a submit during a turn waits for it to end).
 function startReplyLoop($) {
-  if (st.replyLoop || st.internal || st.surface === 'headless') return
+  if (st.replyLoop || st.internal || noTab()) return
   st.replyLoop = true
   const loop = async () => {
     let backoff = 0
@@ -964,6 +975,8 @@ export function register(on, options) {
       try { model = await $.session.model() } catch {}
       let surface = null
       try { const surfaces = await $.session.surfaces(); surface = surfaces && surfaces.length ? surfaces[0] : 'headless' } catch {}
+      st.headless = await isHeadless($)
+      if (st.headless) surface = 'leftoff' // 0.9.9: started from the board, a work session (not 'headless')
       st.record = null
       // Where this session runs: Claude Code's pid + tty (for open/closed and
       // Terminal.app) and the terminal's own ids (for Go).
@@ -1006,7 +1019,7 @@ export function register(on, options) {
         // a new id in the same process (/clear, /resume) runs in the same tab
         ...(parentSessionId ? { proc: st.proc ? { ...st.proc, source: 'mod' } : null, term: st.term } : {}),
       })
-      if (st.surface !== 'headless') {
+      if (!noTab()) {
         const own = e.session_title ? parseTabTitle(e.session_title) : null
         const name = own && !own.id ? own.name : (own && own.name) || st.daemonTitle || null
         await applyTabTitle($, name, { force: !!parentSessionId, current: e.session_title || null })
@@ -1055,8 +1068,8 @@ export function register(on, options) {
     })
     // The daemon titles a session after its first turn (a few seconds of
     // summarizer); name the tab once it has, without waiting for the minute heartbeat.
-    if (st.daemonTitle && st.surface !== 'headless') await noteTitle($, st.daemonTitle)
-    else if (!st.titleSoon && st.surface !== 'headless' && tabTitleOn()) {
+    if (st.daemonTitle && !noTab()) await noteTitle($, st.daemonTitle)
+    else if (!st.titleSoon && !noTab() && tabTitleOn()) {
       st.titleSoon = true
       $.clock.after(12000, () => { heartbeat($).catch(() => {}) })
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.9-beta.1",
+  "version": "0.9.9-beta.2",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -2846,3 +2846,40 @@ del.gd-x { background: var(--gd-del-word); }
 .lv-tools .lv-tool-open::after { content: '›'; position: absolute; right: 8px; top: 0; color: var(--faint); font-size: 14px; }
 .lv-tools .lv-tool-open:hover { background: var(--bg2); color: var(--text); }
 .lv-tools .lv-tool-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* 0.9.9 New session (ui/start.js): plain lists of big choices, inline on a phone */
+.start { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-top: 16px; }
+.start-where .start-opt-sub { white-space: normal; }
+.start-sec { display: flex; flex-direction: column; gap: 8px; }
+.start-h { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
+.start-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
+.start-where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.start-opt { min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; min-width: 0; }
+.start-opt:hover:not(:disabled) { border-color: var(--line-strong); }
+.start-opt[aria-checked="true"] { border-color: var(--accent); background: var(--tint-accent); box-shadow: inset 0 0 0 1px var(--accent); }
+.start-opt:disabled { opacity: .5; cursor: default; }
+.start-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.start-opt-main { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.start-opt-sub { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.start-branch { font-weight: 400; color: var(--muted); font-size: 12px; }
+.start-more { align-self: flex-start; min-height: 44px; }
+.start-hint, .start-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
+.start-rule { margin: 0; font-size: 13px; color: var(--text2); }
+.start-rule.bad { color: var(--red); }
+.start-ask { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.start-ask.wait { border-color: var(--yellow); background: var(--tint-yellow); }
+.start-ask.bad { border-color: var(--red); background: var(--tint-red); }
+.btn.start-new { min-height: 36px; }
+.headless-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font-size: 13px; color: var(--text2); }
+.headless-bar .grow { flex: 1 1 200px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.headless-bar.running { border-color: var(--green); background: var(--tint-green); }
+.headless-bar.paused { border-color: var(--yellow); background: var(--tint-yellow); }
+.headless-bar .btn { min-height: 44px; }
+.headless-err { margin: -4px 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--tint-red); color: var(--text2); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: auto; }
+@media (max-width: 640px) {
+  .start-opts { grid-template-columns: 1fr; }
+  .start-where { grid-template-columns: 1fr 1fr; }
+  .start-opt { min-height: 48px; }
+  .btn.start-new { min-height: 44px; }
+  .start-ask-banner .btn, .start-ask .btn { min-height: 44px; }
+}

package/ui/app.js

@@ -16,6 +16,7 @@ import { navHideStep, NAVHIDE_TYPING } from './navhide.js'
 import { openLightbox } from './lightbox.js' // 0.9.8: the image preview
 import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (pdf.js loads on the first PDF)
 import { isBlank, composerKey, isTouchUi, composerHeight, composerBoxHtml } from './composer.js' // 0.9.8 the Live composer
+import { startPageHtml, startPick, startAsksBanner, headlessBarHtml, startsSettingHtml } from './start.js' // 0.9.9 New session
 import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
 import { wireTips } from './tips.js'
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
@@ -796,6 +797,7 @@ async function viewBoard() {
   state.ghostty = viewer ? viewer.ghostty === true : false
   state.mayAnswer = viewer ? viewer.mayAnswer !== false : true
   try { state.restore = await api('GET', '/v1/restore') } catch { state.restore = null }
+  try { state.starts = await api('GET', '/v1/starts') } catch { state.starts = null } // 0.9.9: starts waiting for a yes here
   const today = new Date(); today.setHours(0, 0, 0, 0)
   const recent = sessions.filter((s) => !(s.status === 'ended' && Date.parse(s.endedAt || 0) < today.getTime()))
   // v0.4.8: sessions with nothing in them yet (no prompt, name or checkpoint,
@@ -835,10 +837,11 @@ async function viewBoard() {
   let html = '<div class="pagehead"><div><h1>Sessions</h1><div class="sub">Every Claude Code session on ' + (multi() ? 'your machines' : 'this machine') + (agentNames().length ? ', plus ' + esc(agentNames().join(' and ')) : '') + ', grouped by what needs you.</div>' + syncChip() + '</div>' +
     '<div class="actions">' + (multi() || agentNames().length ? selectHtml({ id: 'machineFilter', cls: 'btn', label: 'Machine', value: state.machine,
       options: [['', 'All machines'], ...state.health.machines.map((m) => [m, mEmoji(m) + ' ' + m + thisOneSuffix(m, state.health)]), ...agentNames().map((m) => [m, m + ' (agent)'])] }) : '') +
+    '<a class="btn start-new" href="#/new">' + icon('plus') + 'New session</a>' +
     '<a class="btn primary" href="#/catchup/new">' + icon('coffee') + 'Catch me up</a>' +
     '<a class="btn" href="#/digest">' + icon('newspaper') + 'Today’s digest →</a></div></div>'
   html += syncDetails() + staleLine(sessions)
-  html += restoreAsksBanner() + restoreBanner()
+  html += restoreAsksBanner() + startAsksBanner(state.starts, { esc, icon, local: !!(state.starts && state.starts.viewer && state.starts.viewer.local), clock, busy: startUi.busy }) + restoreBanner()
   // Needs you (v0.4.4): every session waiting on you, whatever the filters, longest wait first.
   const needs = needsItems(sessions)
   html += needsStrip(needs, needOpts())
@@ -1489,6 +1492,8 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
     // 0.9.8: one line each, 44px, an icon and a short label; the group drops under the title as a whole when it doesn't fit beside it
     '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + 'Copy resume</button>' + (s.liveResumeCommand ? '<button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(s.liveResumeCommand) + '" title="Exit the session in its terminal, then run this to bring it back Live">' + icon('copy') + 'Copy Live resume</button>' : '') + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
   html += ownerOfflineNote(s) // 0.9.8: before the facts, where it's seen
+  html += headlessBarHtml(s, { esc, icon, may: state.mayAnswer !== false }) // 0.9.9: started from the board: Stop / Resume
+  if (s.headless && s.headless.error) headlessErrors.set(s.id, s.headless.error)
   html += '<div class="facts">' +
     fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
     fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id) +
@@ -1566,7 +1571,7 @@ async function fetchLive(id, { timeoutMs } = {}) {
   } catch (e) { return { messages: [], error: e.message } }
 }
 function liveBoxHtml(s, v) {
-  if (s.agent || s.codingAgent === 'codex' || s.capture === 'hooks') return ''
+  if (s.agent || s.codingAgent === 'codex' || (s.capture === 'hooks' && !s.headless)) return '' // 0.9.9: one Leftoff started talks Live whatever reports it
   if (!isLive(s)) {
     if (s.endedAt || s.live === 'closed') return ''
     const how = state.liveHow
@@ -1584,7 +1589,7 @@ function liveBoxHtml(s, v) {
   return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
     '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
       earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id) }) + '</ol>' +
-      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
+      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here' + (s.headless ? '' : ' and in the terminal') + '.</p>' +
       '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
     (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
     composerHtml(s, draft, may) +
@@ -1896,7 +1901,7 @@ document.addEventListener('keydown', (ev) => {
   ev.preventDefault()
   const cb = ta.closest('.composer')
   if (ev.repeat || (isBlank(ta.value) && !(cb && attachList(cb.dataset.sid).length))) return
-  const box = ta.closest('.live-box') || ta.closest('.need')
+  const box = ta.closest('.live-box') || ta.closest('.need') || ta.closest('.start-box')
   const btn = box && box.querySelector('[data-submit-for="' + CSS.escape(ta.dataset.submit || 'live') + '"]')
   if (!btn || btn.disabled) return
   const last = Number(box.dataset.kbdAt || 0)
@@ -3353,6 +3358,7 @@ function queueSave() { clearTimeout(saveUi.timer); saveUi.timer = setTimeout(pai
 
 async function viewSettings() {
   const [c, , remote, sync, peers, st, , , relay, gh] = await Promise.all([api('GET', '/v1/config'), spacesLoad(), api('GET', '/v1/remote').catch(() => null), api('GET', '/v1/sync').catch(() => null), api('GET', '/v1/peers').catch(() => null), api('GET', '/v1/syncthing').catch(() => null), refreshHealth().catch(() => null), agentsLoad(), api('GET', '/v1/relay').catch(() => null), api('GET', '/v1/gh').catch(() => null)])
+  const starts = await api('GET', '/v1/starts').catch(() => null) // 0.9.9: this Mac's own switch
   state.relay = relay
   state.gh = gh
   syncUi.data = sync; syncUi.peers = peers; if (st) stUi.data = st
@@ -3391,6 +3397,7 @@ async function viewSettings() {
     phone: phonePane(relay, remote, unavailable),
     security: '<div class="section" id="answering">Other devices</div>' + (answeringSection(remote, relay) ||
         '<div class="full hint">Nothing reaches this board from elsewhere until <a href="#/settings/phone">Phone &amp; remote</a> is on.</div>') +
+      startsSettingHtml(starts, { esc, local: !!(starts && starts.viewer && starts.viewer.local) }) +
       // a changed machine key needs a click here, so Other machines stays up top then
       (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? machinesSection(peers) : '') +
       advanced('security', (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? '' : machinesSection(peers)) +
@@ -4142,10 +4149,12 @@ async function render() {
     else if (r.name === 'whats-new') await viewWhatsNew()
     else if (r.name === 'docs' && r.arg) await viewDocPage(r.arg)
     else if (r.name === 'search') await viewSearch(r.q || '')
+    else if (r.name === 'new') await viewNewSession()
     else if (r.name === 'setup') await viewSetup()
     else if (r.name === 'tour') { location.replace('#/'); startTour({ api }); return }
     else await viewBoard()
     tabsAfterRender()
+    fillHeadlessErrors()
     // a Needs-you Reply composer (0.9.8) fits a restored multi-line draft
     for (const ta of $app.querySelectorAll('.reply-composer .composer-input')) fitComposer(ta)
   } catch (e) {
@@ -4154,6 +4163,62 @@ async function render() {
   }
 }
 
+// ------------------------------------------------------------ New session (0.9.9, ui/start.js)
+
+const startUi = { data: null, machine: null, repo: null, where: 'repo', allRepos: false, ask: null, busy: new Set(), sending: false, poll: null }
+async function viewNewSession() {
+  try { startUi.data = await api('GET', '/v1/start') } catch (e) { if (!startUi.data) throw e }
+  const fa = document.activeElement
+  const kf = fa && fa.classList && fa.classList.contains('start-text') ? { a: fa.selectionStart, b: fa.selectionEnd } : null
+  $app.innerHTML = startPageHtml(startUi.data, startUi, { esc, icon, emoji: mEmoji, local: state.viewerLocal !== false && !!(startUi.data.viewer && startUi.data.viewer.local), clock, draft: (state.drafts && state.drafts.start) || '', busy: startUi.sending })
+  const ta = $app.querySelector('.start-text')
+  if (ta) { fitComposer(ta); if (kf && !ta.disabled) { ta.focus({ preventScroll: true }); try { ta.setSelectionRange(kf.a, kf.b) } catch {} } }
+}
+// Claude Code's own words when a session it ran stopped with an error: text, never markup.
+const headlessErrors = new Map()
+function fillHeadlessErrors() {
+  for (const el of $app.querySelectorAll('[data-headless-err]')) {
+    const t = headlessErrors.get(el.dataset.headlessErr) || ''
+    el.textContent = t
+    el.hidden = !t
+  }
+}
+async function startSend(btn) {
+  const box = btn.closest('.start-box')
+  const ta = box && box.querySelector('.start-text')
+  const text = ta ? ta.value.trim() : ''
+  if (!text) { if (ta) ta.focus(); return }
+  if (startUi.sending) return
+  const pick = startPick(startUi.data, startUi)
+  if (!pick.m || !pick.repo) return toast('Pick a Mac and a repo first')
+  startUi.sending = true; btn.disabled = true; btn.classList.add('sending'); btn.setAttribute('aria-busy', 'true')
+  try {
+    const r = await api('POST', '/v1/sessions/start', { machine: pick.m.machine, cwd: pick.repo.path, prompt: text, where: pick.where }, { timeoutMs: 60000 })
+    if (state.drafts) delete state.drafts.start
+    if (r.state === 'started' && r.sessionId) { startUi.ask = null; toast('Started on ' + (r.machine || pick.m.machine)); location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+    startUi.ask = { ...r, machine: r.machine || pick.m.machine }
+    pollStartAsk()
+  } catch (e) { toast(e.message, 6000) } finally { startUi.sending = false }
+  if (state.route && state.route.name === 'new') render()
+}
+// The asker's side of a start that waits for a yes at the Mac.
+function pollStartAsk() {
+  clearTimeout(startUi.poll)
+  const a = startUi.ask
+  if (!a || !a.id || !['pending', 'starting'].includes(a.state)) return
+  startUi.poll = setTimeout(async () => {
+    try {
+      const r = await api('GET', '/v1/sessions/start/' + encodeURIComponent(a.id) + '?machine=' + encodeURIComponent(a.machine))
+      if (startUi.ask && startUi.ask.id === a.id) {
+        startUi.ask = { ...a, ...r }
+        if (r.state === 'started' && r.sessionId) { startUi.ask = null; location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+      }
+    } catch (e) { if (e.status === 404) { startUi.ask = { ...a, state: 'failed', error: e.message } } }
+    if (state.route && state.route.name === 'new') render()
+    pollStartAsk()
+  }, 2000)
+}
+
 // First-run setup wizard (0.9.7, ui/wizard.js). Live updates don't redraw it:
 // it keeps its own step and fetches its own state.
 async function viewSetup() {
@@ -5286,6 +5351,35 @@ document.addEventListener('click', async (ev) => {
       } catch (e) { cuUi.making = false; cuUi.err = e.message; render() }
       return
     }
+    // 0.9.9 New session: the page's choices, the send, a yes or no for a start waiting here, Stop and Resume
+    if (action === 'start-pick') {
+      const k = btn.dataset.k, v = btn.dataset.v
+      if (k === 'machine') { startUi.machine = v; startUi.repo = null; startUi.allRepos = false } else if (k === 'repo') startUi.repo = v; else if (k === 'where') startUi.where = v === 'worktree' ? 'worktree' : 'repo'
+      return render()
+    }
+    if (action === 'start-all-repos') { startUi.allRepos = true; return render() }
+    if (action === 'start-again') { startUi.ask = null; return render() }
+    if (action === 'start-send') return startSend(btn)
+    if (action === 'start-ask-confirm' || action === 'start-ask-decline') {
+      if (!id || startUi.busy.has(id)) return
+      startUi.busy.add(id); render()
+      try {
+        const r = await api('POST', '/v1/sessions/start/' + encodeURIComponent(id) + '/' + (action === 'start-ask-confirm' ? 'confirm' : 'decline'), {}, { timeoutMs: 60000 })
+        toast(r.state === 'started' ? 'Started' : r.state === 'declined' ? 'Declined' : r.state === 'failed' ? 'Didn’t start: ' + (r.error || '') : 'That request was ' + r.state, r.state === 'failed' ? 6000 : 2500)
+        startUi.busy.delete(id)
+        if (r.state === 'started' && r.sessionId) { location.hash = '#/s/' + encodeURIComponent(r.sessionId); return }
+      } catch (e) { toast(e.message, 5000) }
+      startUi.busy.delete(id)
+      return render()
+    }
+    if (action === 'headless-stop' || action === 'headless-run') {
+      btn.disabled = true
+      try {
+        const r = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/' + (action === 'headless-stop' ? 'stop' : 'run'), {}, { timeoutMs: 30000 })
+        toast(action === 'headless-stop' ? 'Stopping' : r.already ? 'Already running' : 'Running again')
+      } catch (e) { toast(e.message, 6000) }
+      return render()
+    }
     if (action === 'restore-ask-confirm' || action === 'restore-ask-decline') {
       const id = btn.dataset.id
       if (!id || restoreUi.busy.has(id)) return
@@ -6011,7 +6105,7 @@ document.addEventListener('submit', async (ev) => {
 
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
-const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
+const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.start-box') && document.activeElement.value)
 // Settings isn't redrawn by live updates: it would wipe what you're editing,
 // and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
 function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && ['settings', 'setup'].includes(state.route.name)) && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }
@@ -6025,7 +6119,7 @@ function connect() {
   es.addEventListener('ping', () => { if (stream === es) streamDog.seen() })
   es.addEventListener('prs.updated', () => { prsUi.at = {} }) // 0.8.5: the PR page reads again on its next paint
   es.addEventListener('projects.updated', () => { projectsUi.at = 0 }) // 0.9.0
-  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated']) es.addEventListener(t, () => { if (stream === es) streamDog.seen(); soon() })
+  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated', 'starts.updated']) es.addEventListener(t, () => { if (stream === es) streamDog.seen(); soon() })
   // v0.5.8: standup text prefetched for a digest is stale once spaces or the digest change
   for (const t of ['spaces.updated', 'digest.created', 'checkpoint.created']) es.addEventListener(t, () => { digestUi.standups = {} })
   es.addEventListener('model.pull', (ev) => { try { onPull(JSON.parse(ev.data)) } catch {} })
@@ -6049,6 +6143,11 @@ document.addEventListener('change', async (ev) => {
     } catch (e) { toast(e.message, 5000) }
     return sel.closest('#spacesBox') ? spacesRepaint() : render()
   }
+  if (ev.target.id === 'f-start-allow') { // 0.9.9: this Mac only
+    const cb = ev.target
+    try { const r = await api('POST', '/v1/starts/allow', { allow: cb.checked }); toast(r.allowRemote ? 'Your phone and other Macs can now start sessions here' : 'Sessions started from other devices wait for a yes here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }
+    return viewSettings()
+  }
   if (ev.target.id === 'f-peer-allow') {
     const cb = ev.target
     try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }

package/ui/icons.js

@@ -46,6 +46,7 @@ export const ICONS = {
   "archive": "<rect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\"/> <path d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8\"/> <path d=\"M10 12h4\"/>",
   "bookmark-plus": "<path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z\"/> <path d=\"M12 7v6\"/> <path d=\"M15 10H9\"/>",
   "circle-check": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"m9 12 2 2 4-4\"/>",
+  "square": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/>",
   "message-square": "<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>"
 }
 

package/ui/start.js

@@ -0,0 +1,136 @@
+// 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
+
+// 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 : []
+  const repo = repos.find((r) => r.path === ui.repo) || repos[0] || null
+  return { m, repo, where: ui.where === 'worktree' ? 'worktree' : 'repo' }
+}
+
+// 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. Open Claude Code there once and it shows up here.' }
+  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.' }
+  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] : [])
+  h += '<section class="start-sec"><h2 class="start-h">Repo</h2>'
+  if (!repos.length) h += '<p class="start-empty">' + esc(pick.m ? pick.m.machine + ' hasn’t run Claude Code in a repo yet.' : 'No Mac yet.') + '</p>'
+  else {
+    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)) : '') })).join('') + '</div>'
+    if (!all) h += '<button type="button" class="btn start-more" data-action="start-all-repos">Show all ' + repos.length + '</button>'
+    h += '<p class="start-hint">Only repos ' + esc(pick.m.machine) + ' has already run Claude Code in.</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: 'its own branch and folder' }) +
+    '</div></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>'
+  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
+}
+
+// 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) => {
+    const b = busy.has(a.id)
+    return '<div class="banner warn start-ask-banner" role="alert" data-ask="' + esc(a.id) + '"><span class="grow"><b>' + esc(a.who || 'Another device') + ' asks to start a session</b> in ' + esc(a.repo) + (a.where === 'worktree' ? ' (new worktree)' : '') + ' on ' + esc(info.machine || 'this Mac') + ': “' + esc(a.prompt) + '” <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>' +
+        '<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('')
+}
+
+// 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 } = {}) {
+  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>' : '')
+}
+
+// Settings → Privacy & security: the one switch, on this Mac only.
+export function startsSettingHtml(info, { esc, local = true } = {}) {
+  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>'
+}