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

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.9-beta.6",
+  "version": "0.9.9-beta.7",
   "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

@@ -1509,13 +1509,48 @@ export function fallbackTitle(session) {
   return repoName(session) + (branch ? '@' + branch : '') + (words ? ' · ' + words : '')
 }
 
-export const TITLE_SYSTEM = 'Write a title of at most 6 words for a coding session, based on its first prompt. Reply with the title only, no quotes, no punctuation at the end.'
+// 0.9.9: the title is in the language the user writes in (English when unsure),
+// one language, one script: a small local model once named an English session
+// "Ants README笑话" ("joke" in Chinese).
+export const TITLE_LANGUAGE = 'Write it in the same language as the user\'s own messages (English if unsure), in one language only: never mix in words or characters from another language.'
+export const TITLE_SYSTEM = 'Write a title of at most 6 words for a coding session, based on its first prompt. ' + TITLE_LANGUAGE + ' Reply with the title only, no quotes, no punctuation at the end.'
 
 export function cleanTitle(text) {
-  const t = String(text || '').split('\n').map((l) => l.trim()).find(Boolean) || ''
+  const t = String(text || '').replace(/<think>[\s\S]*?<\/think>/gi, '').split('\n').map((l) => l.trim()).find(Boolean) || ''
   return clip(t.replace(/^title\s*:\s*/i, '').replace(/^["'`*]+|["'`*.]+$/g, ''), 60)
 }
 
+// The writing systems in a text's letters (digits, punctuation and emoji have none).
+// Chinese and Japanese characters count as one ("han").
+const SCRIPTS = [
+  ['latin', /\p{Script=Latin}/u], ['han', /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}]/u], ['hangul', /\p{Script=Hangul}/u],
+  ['cyrillic', /\p{Script=Cyrillic}/u], ['greek', /\p{Script=Greek}/u], ['arabic', /\p{Script=Arabic}/u], ['hebrew', /\p{Script=Hebrew}/u],
+  ['thai', /\p{Script=Thai}/u], ['devanagari', /\p{Script=Devanagari}/u],
+]
+export function scriptsOf(text) {
+  const out = new Set()
+  for (const ch of String(text || '')) {
+    if (!/\p{L}/u.test(ch)) continue
+    const hit = SCRIPTS.find(([, re]) => re.test(ch))
+    out.add(hit ? hit[0] : 'other')
+  }
+  return out
+}
+// Does a generated title keep to the user's writing? Every script in it must
+// be one the user wrote in; Latin letters are always fine (file names, code,
+// "README"). A title that brings in another script is dropped for the fallback.
+export function titleFitsUser(title, userText) {
+  const mine = scriptsOf(userText)
+  for (const sc of scriptsOf(title)) if (sc !== 'latin' && !mine.has(sc)) return false
+  return true
+}
+// The line under a title prompt that pins the language: written in Latin
+// letters only, the title is too (what small models drift from).
+export function titleLanguageLine(userText) {
+  const mine = scriptsOf(userText)
+  return [...mine].some((sc) => sc !== 'latin') ? 'Title language: the language of the messages above.' : 'Title language: the language of the messages above (English if unsure), Latin letters only.'
+}
+
 // ---------------------------------------------------------------- catch me up (v0.5.0)
 
 // A model reply -> its bullet lines (at most max), or null when fewer than two.

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ 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.6' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.9-beta.7' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.9-beta.6",
+  "version": "0.9.9-beta.7",
   "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

@@ -182,6 +182,20 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .fact { background: var(--card); box-shadow: var(--card-shadow); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
 .fact .k { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
 .fact .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fact .k, .fact .v { display: block; }
+/* 0.9.9: a card with an id or a path is a button: tap copies the whole value, which is its tip */
+.fact.copyable { position: relative; width: 100%; min-height: 44px; text-align: left; cursor: pointer; font: inherit; color: inherit; outline: none; -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s; }
+.fact.copyable .k { display: flex; align-items: center; gap: 6px; }
+.fact-ic { display: inline-grid; margin-left: auto; color: var(--faint); opacity: .55; transition: opacity .12s, color .12s; }
+.fact-ic svg { width: 13px; height: 13px; }
+@media (hover: hover) { .fact.copyable:hover { border-color: var(--line-strong); } .fact.copyable:hover .fact-ic { opacity: 1; color: var(--text2); } }
+.fact.copyable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.fact.copyable:focus-visible .fact-ic { opacity: 1; }
+.fact.copyable.copied { border-color: var(--accent); }
+.fact.copyable.copied .fact-ic { opacity: 1; color: var(--accent); }
+.fact.copyable[data-tip]::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font: 500 12px/1.35 var(--mono); text-transform: none; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
+@media (hover: hover) { .fact.copyable[data-tip]:hover::after { display: block; } }
+.fact.copyable[data-tip]:focus-visible::after, .fact.copyable.copied[data-tip]::after { display: block; }
 .strip { display: flex; gap: 3px; margin: 8px 0 4px; flex-wrap: wrap; }
 .strip span { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
 .timeline { position: relative; margin-left: 8px; padding-left: 22px; border-left: 2px solid var(--line); }
@@ -2951,3 +2965,22 @@ del.gd-x { background: var(--gd-del-word); }
 /* 0.9.9 asked at pairing time: may other devices start sessions here? */
 .pair-ask .grow { min-width: 0; }
 @media (pointer: coarse) { .pair-ask > .btn { min-height: 44px; } }
+
+/* 0.9.9 a setting that saves on change says so beside it, then fades */
+.saved-mark { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--green, var(--accent)); transition: opacity .35s ease; }
+.saved-mark.bad { color: var(--red); font-weight: 400; white-space: normal; }
+.saved-mark.gone { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .saved-mark { transition: none; } }
+
+/* 0.9.9 settings kept on one Mac only: "🖥️ studio only" beside the label (a styled tip,
+   never title=), and a locked control (a lock, aria-disabled) when you're not at that Mac */
+.local-pill { position: relative; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg2); color: var(--text2); font-size: 11.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; vertical-align: 1px; cursor: default; }
+.local-pill::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 4px); left: 0; width: max-content; max-width: min(240px, 70vw); padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: normal; pointer-events: none; z-index: 20; }
+@media (hover: hover) { .local-pill:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
+.local-pill.show::after { display: block; }
+@media (prefers-reduced-motion: reduce) { .local-pill::after { animation: none !important; } }
+.local-pill .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.form label.check.locked { color: var(--muted); cursor: not-allowed; }
+.form label.check.locked input { cursor: not-allowed; }
+.form label.check .lock { display: inline-flex; color: var(--muted); }
+.form label.check .lock .ic { width: 14px; height: 14px; }

package/ui/app.js

@@ -16,9 +16,10 @@ import { navHideStep, NAVHIDE_TYPING } from './navhide.js'
 import { openLightbox } from './lightbox.js' // 0.9.8: the image preview
 import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (pdf.js loads on the first PDF)
 import { isBlank, composerKey, isTouchUi, composerHeight, composerBoxHtml } from './composer.js' // 0.9.8 the Live composer
-import { startPageHtml, startPick, startAsksBanner, headlessBarHtml, startsSettingHtml, startViewerLocal as startViewerAt, startTexts, fillStartTexts, browseTarget, startPairAskHtml, typedPath } from './start.js' // 0.9.9 New session
+import { startPageHtml, startPick, startAsksBanner, headlessBarHtml, startsSettingHtml, localPillHtml, lockedAttrs, lockHtml, startViewerLocal as startViewerAt, startTexts, fillStartTexts, browseTarget, startPairAskHtml, typedPath } from './start.js' // 0.9.9 New session
 import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
 import { wireTips } from './tips.js'
+import { factHtml } from './facts.js' // 0.9.9 the session page's info cards
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
@@ -27,7 +28,7 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, restoreHeadline, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji, boardMachineFilter, machineOnlyLabel } from './machines.js'
-import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking, liveBoxKind, liveThreadWanted } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { anyPending, shouldPoll, streamDead, isStale, liveSignature, wakeReason, createWake, createWatchdog, HEARTBEAT_MS, POLL_MS, AWAY_MS } from './live-wake.js' // 0.9.8 live after sleep
 import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
@@ -1497,10 +1498,10 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   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) +
-    fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown') +
-    fact('Terminal', (s.terminal ? s.terminal.label : s.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
+    fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : ''), '', { copy: (s.repo && s.repo.root) || null, what: 'repo folder' }) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap', { copy: s.worktree.path || null, what: 'worktree folder' }) : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—', '', { copy: s.cwd || null, clip: 34 }) + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
+    fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id, '', { copy: s.id, what: 'session id' }) +
+    fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown', '', { copy: s.live === 'open' && s.liveVia === 'pid' && s.pid != null ? String(s.pid) : null, what: 'process id' }) +
+    fact('Terminal', (s.terminal ? s.terminal.label : s.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || ''), '', { copy: s.shortId ? 'cp:' + s.shortId : null, what: 'terminal tab id' }) + '</div>'
   if (isLive(s)) html += (s.needsYou ? sessionNeedsStrip(s) : '') + liveBoxHtml(s, liveV)
   html += parkRow(s)
   html += spacePicker(s, spv, 'session', s.id)
@@ -1561,7 +1562,8 @@ async function liveHow() {
   return state.liveHow
 }
 // Does this session's page show a Live thread (and so fetch one)?
-const liveWanted = (s) => !!(s && isLive(s) && !s.agent && s.codingAgent !== 'codex' && s.capture !== 'hooks')
+// (0.9.9: a session Leftoff started reports as "hooks" but always has its thread: before, its page never fetched it and read "Nothing sent yet")
+const liveWanted = (s) => liveThreadWanted(s)
 // GET the Live thread; what it says is the newest the page knows (0.9.8: the
 // time of the last good answer decides "Reconnecting…" on a pending bubble).
 async function fetchLive(id, { timeoutMs } = {}) {
@@ -1573,9 +1575,9 @@ async function fetchLive(id, { timeoutMs } = {}) {
   } catch (e) { return { messages: [], error: e.message } }
 }
 function liveBoxHtml(s, v) {
-  if (s.agent || s.codingAgent === 'codex' || (s.capture === 'hooks' && !s.headless)) return '' // 0.9.9: one Leftoff started talks Live whatever reports it
-  if (!isLive(s)) {
-    if (s.endedAt || s.live === 'closed') return ''
+  const kind = liveBoxKind(s) // 0.9.9: one Leftoff started talks Live whatever reports it
+  if (kind === 'none') return ''
+  if (kind === 'how') {
     const how = state.liveHow
     return '<section class="live-box off" aria-label="Live link"><div class="live-head"><h2>Live <span class="pill soon">Beta</span></h2></div>' +
       '<p class="faint">To send this session messages from here or your phone, and answer its permission prompts, start it with <code>leftoff live</code>' +
@@ -1588,6 +1590,14 @@ function liveBoxHtml(s, v) {
   const now = Date.now()
   const lastClaude = [...msgs].reverse().find((m) => m.from === 'claude')
   if (lastClaude) markLiveSeen(s.id, lastClaude.at)
+  // a session Leftoff started that isn't running now: what was said, read-only (Resume here sends again)
+  if (kind === 'readonly') {
+    if (!msgs.length) return ''
+    return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Not running. Resume it to send more.</span></div>' +
+      '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-label="Messages with this session">' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id) }) + '</ol>' +
+      '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div></section>'
+  }
   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>' +
@@ -2230,7 +2240,8 @@ function spacePicker(s, spv, kind, key) {
       options: [['', own ? 'Default (repo or Mac)' : s.space + ' · ' + (SPACE_WHY[s.spaceSource] || 'default')], ...opts.map((x) => [x, x]), ['__new', 'New space…']] }) +
     '<span class="faint">' + (kind === 'agent' ? 'For everything from this agent’s feed.' : 'Just this session; repos and Macs are set in <a href="#/settings/spaces">Settings → Spaces</a>.') + '</span></div>'
 }
-function fact(k, v, cls) { return '<div class="fact' + (cls ? ' ' + cls : '') + '"><div class="k">' + esc(k) + '</div><div class="v" title="' + esc(v) + '">' + esc(v) + '</div></div>' }
+// (0.9.9: ui/facts.js; an id or a path copies on tap, its whole value in a data-tip)
+function fact(k, v, cls, opts = {}) { return factHtml(k, v, { cls, ...opts }) }
 
 // PRs (0.6.9): Mine (PRs linked to your sessions, grouped) and Team (every open
 // PR in the repos your sessions are in). The daemon fetches with gh (or asks
@@ -3028,7 +3039,8 @@ function anywhereSection(r, adv = []) {
     '<div class="full hint">Your board at <b>' + esc(r.host || 'yourname.leftoff.dev') + '</b> from any browser, end-to-end encrypted. <a href="https://leftoff.dev/how-it-works" target="_blank" rel="noopener">How it works ↗</a></div>'
   // No name yet on any Mac in this folder: claim one (0.6.1, an email link, no admin token).
   if ((!r.user || su.status === 'pending') && su.status !== 'confirmed') h += signupBlock(r, su, local)
-  h += '<label for="f-anywhere">Use from anywhere</label><label class="check"><input id="f-anywhere" type="checkbox" data-action="relay-toggle"' + (r.enabled ? ' checked' : '') + dis + '><span>On for this Mac (' + esc(r.machine || '') + ')</span></label>'
+  h += '<label for="f-anywhere">Use from anywhere' + localPillHtml({ machine: r.machine, emoji: r.machine ? mEmoji(r.machine) : '', esc }) + '</label><label class="check' + (local ? '' : ' locked') + '"><input id="f-anywhere" type="checkbox" data-action="relay-toggle"' + (r.enabled ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>On for this Mac (' + esc(r.machine || '') + ')</span></label>' +
+    (local ? '' : '<div class="hint local-hint">Change on ' + esc(r.machine || 'that Mac') + '.</div>')
   // The name: up top until there is one, then Advanced (0.6.6).
   const nameRow = '<label for="f-anywhere-user">' + (r.user ? 'Your name' : 'Have a name?') + '</label><div class="anyuser"><input id="f-anywhere-user" value="' + esc(r.user || '') + '" placeholder="yourname" spellcheck="false" autocapitalize="none" autocomplete="off" maxlength="32"' + dis + '><span class="faint mono">.' + dom + '</span>' +
     (local && r.user ? '<button type="button" class="btn sm" data-action="relay-user">Save</button>' : '') + '</div>' +
@@ -3392,14 +3404,14 @@ async function viewSettings() {
       '<label data-row="model">Model</label><div data-row="model" class="models" id="f-models-list" role="radiogroup" aria-label="Model"><div class="nocp">Loading…</div></div>' +
       '<input type="hidden" id="f-model" value="' + esc(sm.model || '') + '">' +
       '<label for="f-base" data-row="base">Server URL</label><input id="f-base" data-row="base" value="' + esc(sm.baseUrl || '') + '">' +
-      '<label for="f-key" data-row="key">API key</label><div class="keyrow" data-row="key"><input id="f-key" type="password" autocomplete="new-password" spellcheck="false"><span class="keystate" id="f-keystate"></span></div>' +
+      '<label for="f-key" data-row="key">API key' + localPillHtml({ machine: c.machineResolved, emoji: c.machineResolved ? mEmoji(c.machineResolved) : '', esc }) + '</label><div class="keyrow" data-row="key"><input id="f-key" type="password" autocomplete="new-password" spellcheck="false"><span class="keystate" id="f-keystate"></span></div>' +
       '<div class="hint" data-row="key" id="f-key-hint"></div>' +
       summariesSection(c) +
       advanced('models', lengthExampleHtml(c)),
     phone: phonePane(relay, remote, unavailable),
     security: '<div class="section" id="answering">Other devices</div>' + (answeringSection(remote, relay) ||
         '<div class="full hint">Nothing reaches this board from elsewhere until <a href="#/settings/phone">Phone &amp; remote</a> is on.</div>') +
-      startsSettingHtml(starts, { esc, local: startViewerLocal(starts && starts.viewer) }) +
+      startsSettingHtml(starts, { esc, local: startViewerLocal(starts && starts.viewer), emoji: starts ? mEmoji(starts.machine) : '', icon }) +
       // a changed machine key needs a click here, so Other machines stays up top then
       (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? machinesSection(peers) : '') +
       advanced('security', (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? '' : machinesSection(peers)) +
@@ -3603,9 +3615,10 @@ function machinesSection(p) {
   if (!p || p.off) return ''
   const local = p.viewer && p.viewer.local
   let h = '<div class="section" id="machines">Other machines</div>' +
-    '<label for="f-peer-allow">Answer and Go</label><label class="check"><input id="f-peer-allow" type="checkbox"' + (p.allowIncoming ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Allow other machines to answer and Go here</span></label>' +
+    '<label for="f-peer-allow">Answer and Go' + localPillHtml({ machine: p.machine, emoji: p.machine ? mEmoji(p.machine) : '', esc }) + '</label><label class="check' + (local ? '' : ' locked') + '"><input id="f-peer-allow" type="checkbox"' + (p.allowIncoming ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>Allow other machines to answer and Go here</span></label>' +
     '<div class="hint">Off by default. On, a Mac that shares this folder can answer this Mac’s permission prompts and questions and press Go, from its own board. Each command is signed with that Mac’s key from the folder, encrypted, and expires in a minute. ' +
-    (p.allowIncoming ? 'Listening on port ' + esc(p.listening || '—') + (p.relay ? (p.relay.connected ? ' and connected to the relay' : ' · relay not connected') : '') + '.' : 'While it’s off nothing listens.') + ' This Mac’s key: <code>' + esc(p.fingerprint) + '</code></div>'
+    (p.allowIncoming ? 'Listening on port ' + esc(p.listening || '—') + (p.relay ? (p.relay.connected ? ' and connected to the relay' : ' · relay not connected') : '') + '.' : 'While it’s off nothing listens.') + ' This Mac’s key: <code>' + esc(p.fingerprint) + '</code></div>' +
+    (local ? '' : '<div class="hint local-hint">Change on ' + esc(p.machine || 'that Mac') + '.</div>')
   h += '<div class="full">' + protectHtml('machines') + '</div>'
   if (!p.peers.length) return h + '<label>Machines</label><div class="hint">No other Mac in this folder yet.</div>'
   h += '<label>Machines</label><div class="peers">' + p.peers.map((x) => {
@@ -4219,6 +4232,30 @@ document.addEventListener('input', (ev) => {
   if (!ev.target || !ev.target.classList || !ev.target.classList.contains('sb-path-in') || !startUi.browse) return
   startUi.browse.typed = ev.target.value // kept across the board's redraws
 })
+// The per-Mac pill sits inside its setting's <label>: a tap on it shows its tip
+// (touch has no hover) and never flips the setting.
+document.addEventListener('click', (ev) => {
+  const pill = ev.target && ev.target.closest && ev.target.closest('.local-pill')
+  for (const x of document.querySelectorAll('.local-pill.show')) if (x !== pill) x.classList.remove('show')
+  if (!pill) return
+  ev.preventDefault()
+  pill.classList.toggle('show')
+}, true)
+// 0.9.9: a setting that saves the moment you change it (no Save button) says
+// so beside it: "Saved ✓" for a moment, or what went wrong, inline.
+const savedTimers = new Map()
+function markSaved(id, err = null) {
+  const el = document.getElementById(id)
+  const row = el && (el.closest('label.check') || el)
+  if (!row) return
+  let m = row.querySelector('.saved-mark')
+  if (!m) { m = document.createElement('span'); m.className = 'saved-mark'; row.appendChild(m) } // right beside the checkbox's words
+  m.classList.toggle('bad', !!err); m.classList.remove('gone')
+  m.setAttribute('role', err ? 'alert' : 'status')
+  m.textContent = err ? String(err) : 'Saved ✓'
+  clearTimeout(savedTimers.get(id))
+  if (!err) savedTimers.set(id, setTimeout(() => { m.classList.add('gone'); setTimeout(() => { if (m.classList.contains('gone')) m.remove() }, 400) }, 2000))
+}
 // Claude Code's own words when a session it ran stopped with an error: text, never markup.
 const headlessErrors = new Map()
 function fillHeadlessErrors() {
@@ -5227,6 +5264,15 @@ document.addEventListener('click', async (ev) => {
   const id = btn.dataset.id || (card && card.dataset.id)
   const s = state.sessions.find((x) => x.id === id) || (closedUi.data && closedUi.data.sessions.find((x) => x.id === id))
   try {
+    // 0.9.9: an info card on the session page (Directory, Worktree, Session id…): the whole value, a check for a moment
+    if (action === 'copy-fact') {
+      const ok = await copy(btn.dataset.copy)
+      if (ok) {
+        clearTimeout(btn._copied); btn.classList.add('copied'); btn.dataset.tip = 'Copied'
+        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.dataset.tip = btn.dataset.copy }, 1500)
+      }
+      return
+    }
     if (action === 'copy-cmd') {
       const ok = await copy(btn.dataset.cmd)
       if (ok && btn.classList.contains('copy-float')) { // 0.9.8: the floating copy shows a check for a moment, no tooltip
@@ -6230,13 +6276,17 @@ document.addEventListener('change', async (ev) => {
   }
   if (ev.target.id === 'f-start-allow') { // 0.9.9: this Mac only
     const cb = ev.target
-    try { const r = await api('POST', '/v1/starts/allow', { allow: cb.checked }); toast(r.allowRemote ? 'Your phone and other Macs can now start sessions here' : 'Sessions started from other devices wait for a yes here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }
-    return viewSettings()
+    let err = null
+    try { const r = await api('POST', '/v1/starts/allow', { allow: cb.checked }); toast(r.allowRemote ? 'Your phone and other Macs can now start sessions here' : 'Sessions started from other devices wait for a yes here') } catch (e) { cb.checked = !cb.checked; err = e.message; toast(e.message, 6000) }
+    await viewSettings()
+    return markSaved('f-start-allow', err)
   }
   if (ev.target.id === 'f-peer-allow') {
     const cb = ev.target
-    try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }
-    return viewSettings()
+    let err = null
+    try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; err = e.message; toast(e.message, 6000) }
+    await viewSettings()
+    return markSaved('f-peer-allow', err)
   }
   if (ev.target.dataset && ev.target.dataset.list && ev.target.type === 'checkbox') {
     const cb = ev.target, done = cb.checked, li = cb.closest('li')

package/ui/facts.js

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

package/ui/icons.js

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

package/ui/live-view.js

@@ -9,6 +9,23 @@ import { parseAttachedLines } from './attach.js'
 const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
 export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.endedAt && s.live !== 'closed')
 
+// 0.9.9: which Live box a session's page shows, and so whether it fetches the
+// thread. A session Leftoff started (headless) always has one, whatever its
+// capture says ("hooks": its card came from the daemon before Claude's first
+// hook): its first message and the reply are in it, while it runs and after
+// it stops. Another hooks-only session has no Live at all; any other one has
+// a thread while it is live-linked and the how-to otherwise.
+//   -> 'none' | 'thread' | 'readonly' (a stopped headless one: no composer) | 'how'
+export function liveBoxKind(s) {
+  if (!s || s.agent || s.codingAgent === 'codex') return 'none'
+  if (s.capture === 'hooks' && !s.headless) return 'none'
+  if (s.liveLink && s.liveLink.on) return 'thread'
+  if (s.headless) return 'readonly'
+  if (s.endedAt || s.live === 'closed') return 'none'
+  return 'how'
+}
+export const liveThreadWanted = (s) => { const k = liveBoxKind(s); return k === 'thread' || k === 'readonly' }
+
 // The name a session goes by. A live session is never "Untitled": until it has
 // a title (its first prompt, Claude Code's /rename, a generated one) it goes by
 // its repo and branch.

package/ui/start.js

@@ -244,8 +244,22 @@ export function headlessBarHtml(s, { esc, icon, may = true } = {}) {
 }
 
 // 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 ''
-  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 m = esc(info.machine || 'that Mac')
+  return '<label for="f-start-allow">Start sessions' + localPillHtml({ machine: info.machine, emoji, esc }) + '</label>' +
+    '<label class="check' + (local ? '' : ' locked') + '"><input id="f-start-allow" type="checkbox"' + (info.allowRemote ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>Allow starting sessions from other devices</span></label>' +
+    '<div class="hint">Off: a session your phone or another Mac starts here waits until someone at this Mac confirms it. On: it starts right away, and this Mac shows a notification each time. Needs Trust my paired devices.</div>' +
+    '<div class="hint local-hint">' + (local ? 'Or run <code>leftoff starts on</code> on this Mac.' : 'Change on ' + m + ', or run <code>leftoff starts on</code> there.') + '</div>'
 }