@leftoff/cli 0.9.6 → 0.9.8-beta.1

package/ui/app.js

@@ -4,6 +4,7 @@ import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
 import { icon } from './icons.js'
 import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey, openNameSheet } from './picker.js'
 import { SETTINGS, settingsKeyFor } from './settings-nav.js'
+import { mountWizard, shouldAutoOpen } from './wizard.js'
 import { changedKeys } from './settings-dirty.js'
 import { looksMd, stripMd, plainCp } from './cp-text.js'
 import { beginWriting, settleWriting, reconcileWriting, dismissWriting, isWriting, writingText, WRITING_SYNC_MS, FRESH_MS } from './writing.js'
@@ -12,7 +13,8 @@ import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentRepl
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
-import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix } from './viewer.js'
+import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
+import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
@@ -110,6 +112,8 @@ function copiedMark(btn) {
   btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = 'Copy resume command' }, 1500)
 }
 const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
+// 0.9.8 Live link: the session's channel is listening (send it prompts from here)
+const liveBadge = (s) => (s && s.liveLink && s.liveLink.on ? ' <span class="pill live" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
 
 const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
 
@@ -205,7 +209,7 @@ function banners() {
     const items = inc.slice(0, 2).flatMap((e) => e.sections.flatMap((s) => s.items.map((it) => ({ v: e.version, t: it })))).slice(0, 4)
     out += '<div class="banner info update" role="status"><div class="grow"><b>Leftoff ' + (u.remoteVersion ? 'v' + esc(u.remoteVersion) : esc(u.remoteSha || 'update')) + ' is available</b> · you have v' + esc(h.version) +
       (items.length ? '<ul class="incoming">' + items.map((x) => '<li>' + mdInline(firstSentence(x.t)) + '</li>').join('') + '</ul>' : '') + '</div>' +
-      '<code class="cmd">leftoff upgrade</code><button type="button" class="btn" data-action="copy-cmd" data-cmd="leftoff upgrade">Copy</button></div>'
+      '<code class="cmd">' + esc(u.upgradeCommand || 'leftoff upgrade') + '</code><button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(u.upgradeCommand || 'leftoff upgrade') + '">Copy</button></div>'
   }
   out += syncBanners(h)
   const mod = h.mod
@@ -310,7 +314,7 @@ function staleNote(machine) {
 function updateLine() {
   const h = state.health || {}
   const u = h.update || {}
-  if (u.available) return 'v' + esc(u.remoteVersion || '?') + ' is available: run <code>leftoff upgrade</code>.'
+  if (u.available) return 'v' + esc(u.remoteVersion || '?') + ' is available: run <code>' + esc(u.upgradeCommand || 'leftoff upgrade') + '</code>.'
   if (u.error) return 'Last check couldn’t reach the repo (' + esc(u.error) + ').'
   if (u.checkedAt) return 'Up to date (v' + esc(h.version) + '), checked ' + esc(ago(u.checkedAt)) + '.'
   return 'Not checked yet.'
@@ -572,7 +576,7 @@ function card(s) {
     '<div class="row1"><div class="title">' + liveDot(s) +
       (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' +
       '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
-    '</div>' + pill(s.status) + '</div>' +
+    '</div>' + pill(s.status) + liveBadge(s) + '</div>' +
     '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
     cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpArea(s, cpBlock(s.latestCheckpoint)) +
@@ -785,7 +789,7 @@ async function viewBoard() {
     '<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 += restoreBanner()
+  html += restoreAsksBanner() + 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())
@@ -1033,40 +1037,84 @@ function emptyFold(list) {
     '<div class="grid">' + list.map(card).join('') + '</div></details>'
 }
 
-// Restore (v0.4.7): the sessions that were open before this machine restarted,
+// Restore (v0.4.7): the sessions that were open before this machine restarted
+// (0.9.7: or when the terminal quit),
 // with a checkbox each; Restore opens each in a new Ghostty tab, resumed by id.
 // Opening tabs runs on the Mac, so (like Go) only its own browser may press it.
-const restoreUi = { open: false, off: new Set(), result: null }
+const restoreUi = { open: false, off: new Set(), result: null, ask: null, busy: new Set() }
 function restoreDismissKey(r) { return 'lo.restore.dismissed:' + (r.restartAt || '') }
 function restorePicked() { const r = state.restore; return r ? r.sessions.filter((s) => !restoreUi.off.has(s.id)) : [] }
+// 0.9.7: this Mac's own board, or the hosted board open on it (the direct path)
+function restoreGate() {
+  const lr = window.leftoffRelay, r = state.restore || {}
+  return restoreAccess({ local: state.viewerLocal !== false, hosted: !!lr, route: lr ? lr.route : null, routeMac: lr ? lr.mac : null, machine: r.machine || null,
+    phone: isPhoneUa(navigator.userAgent, { maxTouchPoints: navigator.maxTouchPoints || 0 }), canAsk: Array.isArray(r.asks) })
+}
+// 0.9.8: Restore asked from a phone or another Mac, waiting on THIS Mac: confirm
+// or decline here (this Mac's own board, or the hosted board open on it).
+function restoreAsksBanner() {
+  const r = state.restore
+  const asks = r && Array.isArray(r.asks) ? r.asks : []
+  if (!asks.length) return ''
+  const gate = restoreGate()
+  const here = gate.how === 'local' || gate.how === 'direct'
+  return asks.map((a) => {
+    const what = a.count + ' session' + (a.count === 1 ? '' : 's') + (a.titles && a.titles.length ? ': ' + a.titles.join(', ') + (a.count > a.titles.length ? '…' : '') : '')
+    const busy = restoreUi.busy.has(a.id)
+    return '<div class="banner warn restore-ask" role="alert" data-ask="' + esc(a.id) + '"><span class="grow"><b>' + esc(a.who || 'Another device') + ' asks to restore ' + esc(what) + '</b> on ' + esc(r.machine || 'this Mac') + '. ' +
+      (here ? 'Open them here, each in a new Ghostty tab?' : 'Someone at ' + esc(r.machine || 'that Mac') + ' has to confirm it there.') + ' <span class="rs-m">Until ' + esc(clock(a.expiresAt)) + '.</span></span>' +
+      (here ? '<button type="button" class="btn primary" data-action="restore-ask-confirm" data-id="' + esc(a.id) + '"' + (busy ? ' aria-disabled="true"' : '') + '>' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Open ' + a.count + ' tab' + (a.count === 1 ? '' : 's')) + '</button>' +
+        '<button type="button" class="btn" data-action="restore-ask-decline" data-id="' + esc(a.id) + '"' + (busy ? ' aria-disabled="true"' : '') + '>Decline</button>' : '') + '</div>'
+  }).join('')
+}
+function restoreAskNote() {
+  const x = askLine(restoreUi.ask, { clock })
+  return x ? '<span class="rs-note rs-ask ' + x.tone + '" id="restoreAskNote" role="status">' + hintHtml(x.text, esc) + '</span>' : ''
+}
+// The asker's side: poll the request until it's settled.
+async function pollRestoreAsk() {
+  const a = restoreUi.ask
+  if (!a || !a.id || !['pending', 'confirming'].includes(a.state)) return
+  try {
+    const r = await api('GET', '/v1/restore/asks/' + encodeURIComponent(a.id) + (a.machine ? '?machine=' + encodeURIComponent(a.machine) : ''))
+    if (restoreUi.ask && restoreUi.ask.id === a.id) {
+      const changed = r.state !== a.state
+      restoreUi.ask = { ...a, ...r, machine: a.machine || r.machine }
+      if (changed) { const el = document.getElementById('restoreBanner'); if (el) el.outerHTML = restoreBanner(); if (r.state === 'confirmed') toast('Restored on ' + (a.machine || 'that Mac')) }
+    }
+  } catch (e) { if (restoreUi.ask && restoreUi.ask.id === a.id && /gone|not_found/.test(String(e.message))) restoreUi.ask = { ...a, state: 'failed', error: e.message } }
+  if (restoreUi.ask && ['pending', 'confirming'].includes(restoreUi.ask.state)) setTimeout(pollRestoreAsk, 2000)
+}
 function restoreBanner() {
   const r = state.restore
   if (!r || !r.sessions || !r.sessions.length) return restoreUi.result ? restoreResult() : ''
   try { if (localStorage.getItem(restoreDismissKey(r)) === '1' && !restoreUi.open) return '' } catch {}
   const n = r.sessions.length
-  const what = r.restartKind === 'boot' ? (r.ghostty ? 'your Mac' : 'this machine') + ' restarted' : 'Leftoff restarted'
   const when = r.restartAt ? ' (' + clock(r.restartAt) + ')' : ''
-  const head = '<b>' + n + ' session' + (n === 1 ? ' was' : 's were') + ' open before ' + what + '</b>' + esc(when)
+  const head = '<b>' + n + ' session' + (n === 1 ? ' was' : 's were') + ' open ' + esc(restoreWhen(r)) + '</b>' + esc(when)
   if (!restoreUi.open) {
     return '<div class="banner info restore" id="restoreBanner" role="status"><span class="grow">' + head + '. Put them back, each in its own Ghostty tab.</span>' +
       '<button type="button" class="btn primary" data-action="restore-open">' + icon('rotate-ccw') + 'Restore…</button>' +
       '<button type="button" class="btn x" data-action="restore-dismiss" aria-label="Not now" title="Not now">✕</button></div>'
   }
-  const local = state.viewerLocal !== false
+  const gate = restoreGate()
   const picked = restorePicked().length
+  const asking = restoreUi.ask && ['pending', 'confirming'].includes(restoreUi.ask.state)
   const rows = r.sessions.map((s) => '<label class="rs-row"><input type="checkbox" name="rs" value="' + esc(s.id) + '"' + (restoreUi.off.has(s.id) ? '' : ' checked') + '>' +
     '<span class="rs-main"><span class="rs-t">' + esc(s.title || '(untitled)') + '</span><span class="rs-m">' + esc([s.repoLabel, s.branch, s.modelLabel, s.lastAliveAt ? 'last seen ' + ago(s.lastAliveAt) : null, 'cp:' + (s.shortId || s.id.slice(0, 8))].filter(Boolean).join(' · ')) + '</span>' + (s.blocked ? '<span class="rs-m err">' + esc(s.error) + '</span>' : '') + '</span></label>').join('')
   return '<div class="banner info restore open" id="restoreBanner" role="region" aria-label="Restore sessions"><div class="rs-head"><span class="grow">' + head + '. Each opens in a new Ghostty tab, in its folder, with <code>claude --resume</code> and its name.</span>' +
     '<button type="button" class="btn x" data-action="restore-close" aria-label="Close" title="Close">✕</button></div>' +
     '<div class="rs-list">' + rows + '</div>' +
     '<div class="rs-actions">' +
-    (local ? '<button type="button" class="btn primary" data-action="restore-go" id="restoreGo"' + (picked ? '' : ' disabled') + '>' + icon('rotate-ccw') + 'Restore ' + picked + '</button>'
-      : '<button type="button" class="btn primary" disabled title="Restore opens Ghostty tabs on the Mac running Leftoff, so it only works from that Mac’s own browser (localhost)">Restore ' + picked + '</button>') +
+    '<button type="button" class="btn primary" data-action="restore-go" id="restoreGo" data-how="' + (gate.how || 'off') + '"' + (gate.ok && picked && !asking ? '' : ' aria-disabled="true"') +
+      (gate.ok && gate.how !== 'ask' ? '' : ' aria-describedby="restoreHint"') + (gate.ok ? '' : ' title="' + esc(gate.hint.replace(/`/g, '')) + '"') + '>' + icon('rotate-ccw') + 'Restore ' + picked + '</button>' +
     '<button type="button" class="btn" data-action="restore-all">' + (picked === r.sessions.length ? 'Select none' : 'Select all') + '</button>' +
     '<button type="button" class="btn" data-action="restore-copy">Copy commands</button>' +
-    (local ? '' : '<span class="rs-note">This opens tabs on the Mac, so only its own browser can do it (or run <code>leftoff restore</code> there).</span>') +
+    (restoreUi.ask ? restoreAskNote() : gate.ok && gate.how !== 'ask' ? '' : '<span class="rs-note" id="restoreHint">' + hintHtml(gate.hint, esc) + '</span>') +
     '</div>' + (restoreUi.result ? restoreResult() : '') + '</div>'
 }
+// 0.9.7: the hosted board found (or lost) this Mac's direct path: Restore follows it
+if (typeof window !== 'undefined') window.addEventListener('leftoff-route', () => { const el = restoreUi.open && document.getElementById('restoreBanner'); if (el) el.outerHTML = restoreBanner() })
 function restoreResult() {
   const x = restoreUi.result
   if (!x) return ''
@@ -1148,7 +1196,7 @@ function needOpts(extra = {}) {
 document.addEventListener('keydown', (ev) => {
   if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.altKey || ev.shiftKey) return
   const box = ev.target && ev.target.closest && ev.target.closest('[data-submit]')
-  const need = box && box.closest('.need')
+  const need = box && (box.closest('.need') || box.closest('.live-box')) // 0.9.8: the Live box too
   if (!need) return
   ev.preventDefault()
   if (ev.repeat || ev.isComposing) return
@@ -1224,20 +1272,23 @@ async function viewSession(id) {
   const canRename = reachOf(s) === 'local' || reachOf(s) === 'peer' // 0.9.2: another Mac's session renames through it
   html += '<div class="pagehead"><div>' + (canRename
     ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + esc(s.title || 'Untitled session') + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
-    : '<h1>' + esc(s.title || 'Untitled session') + '</h1>') + '<div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
+    : '<h1>' + esc(s.title || 'Untitled session') + '</h1>') + '<div class="sub">' + pill(s.status) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
     '<div class="actions">' + goButton(s) + (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) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy 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 += '<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>'
+  if (isLive(s)) html += (s.needsYou ? sessionNeedsStrip(s) : '') + await liveSection(s)
   html += parkRow(s)
   html += spacePicker(s, spv, 'session', s.id)
   html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent }) + '</section>'
   // 0.7.0: steps handed back to you, and the docs, plans and artifacts it made
   html += '<section class="stodos" id="todos">' + sessionTodosSection(s, { agoFn: ago, mayEdit: state.mayAnswer !== false }) + '</section>'
   html += '<section class="sfiles" id="files">' + sessionFilesSection(s, { agoFn: ago }) + '</section>'
-  if (s.needsYou) html += '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>'
+  // 0.9.8: a live-linked session keeps its permission card and the prompt box together, near the top
+  if (s.needsYou && !isLive(s)) html += sessionNeedsStrip(s)
+  if (!isLive(s)) html += await liveSection(s)
   if (s.statusChanges && s.statusChanges.length) {
     html += '<div class="striplabel">Status history</div><div class="strip">' + s.statusChanges.slice(-24).map((c) => '<span class="s-' + esc(c.status) + '" title="' + esc(clock(c.at)) + '">' + esc(LABEL[c.status] || c.status) + '</span>').join('') + '</div>'
   }
@@ -1266,6 +1317,58 @@ async function viewSession(id) {
   $app.innerHTML = html
   aroundWire(s.id)
 }
+// ------------------------------------------------------------ Live link (0.9.8 beta)
+
+const isLive = (s) => !!(s && s.liveLink && s.liveLink.on)
+function sessionNeedsStrip(s) { return '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
+const LIVE_STATE = { sent: 'Sent, waiting for the session', received: 'Received by the session', failed: 'Didn’t arrive' }
+function liveEntry(m) {
+  const who = m.from === 'claude' ? 'Claude' : m.from === 'event' ? 'Event' + (m.source ? ' · ' + m.source : '') : 'You' + (m.where && !/^on this machine/.test(m.where) ? ' · ' + m.where : '')
+  const st = m.from === 'claude' ? '' : '<span class="lv-state ' + esc(m.state || '') + '">' + esc(m.state === 'failed' ? (m.errorText || LIVE_STATE.failed) : LIVE_STATE[m.state] || '') + '</span>'
+  return '<li class="lv lv-' + esc(m.from) + '"><div class="lv-who">' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span>' + st + '</div><div class="lv-text">' + esc(m.text) + '</div></li>'
+}
+// The how-to for a session that isn't live (fetched once: the claude line has this Mac's path).
+async function liveHow() {
+  if (state.liveHow === undefined) { try { state.liveHow = await api('GET', '/v1/live') } catch { state.liveHow = null } }
+  return state.liveHow
+}
+async function liveSection(s) {
+  if (s.agent || s.codingAgent === 'codex' || s.capture === 'hooks') return ''
+  if (!isLive(s)) {
+    if (s.endedAt || s.live === 'closed') return ''
+    const how = await 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>' +
+      (how && how.line ? ' (or <code>' + esc(how.line) + '</code>)' : '') + '. Claude Code asks once to load the channel; channels are a research preview.</p></section>'
+  }
+  let v = null
+  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live') } catch (e) { v = { messages: [], error: e.message } }
+  const msgs = (v && v.messages) || []
+  const may = state.mayAnswer !== false
+  const draft = (state.drafts && state.drafts['live:' + s.id]) || ''
+  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>' +
+    (msgs.length ? '<ol class="live-log" aria-live="polite">' + msgs.map(liveEntry).join('') + '</ol>' : '<p class="faint live-empty">Nothing sent yet.</p>') +
+    (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
+    '<div class="reply-row live-row"><textarea class="reply-text live-text" rows="2" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter') + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
+    '<button type="button" class="btn primary" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '"' + (may ? '' : ' aria-disabled="true"') + '>Send</button></div>' +
+    (may ? '' : '<p class="faint">Sending from another device is off. On a Mac, turn on Settings → Privacy &amp; security → Trust my paired devices.</p>') + '</section>'
+}
+async function liveSendClick(btn) {
+  const box = btn.closest('.live-box')
+  const ta = box && box.querySelector('.live-text')
+  const text = ta ? ta.value.trim() : ''
+  if (!text) { toast('Type a message first'); return }
+  if (btn.getAttribute('aria-disabled') === 'true') return
+  btn.setAttribute('aria-disabled', 'true'); btn.textContent = 'Sending…'
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(btn.dataset.id) + '/live', { text })
+    if (state.drafts) delete state.drafts['live:' + btn.dataset.id]
+    if (ta) ta.value = ''
+    if (r.state === 'failed') toast('Didn’t arrive: ' + (r.error || 'the session isn’t listening'), 4200)
+    setTimeout(() => { if (state.route && state.route.name === 's') soon() }, 1500)
+  } catch (e) { toast(e.message, 4200) } finally { render() }
+}
+
 // ------------------------------------------------------------ search inside transcripts (0.9.6)
 
 // Plain text + [start, end] ranges -> escaped HTML with <mark>s (ranges that
@@ -2407,6 +2510,7 @@ async function viewSettings() {
     updates: '<div class="section">About</div>' +
       '<label>Version</label><div class="aboutline"><span class="chip mono">v' + esc(h.version || '') + '</span><a href="#/whats-new">What’s new</a><a href="' + NPM_URL + '" target="_blank" rel="noopener">npm ↗</a></div>' +
       '<div class="hint">' + updateLine() + ' <button type="button" class="linkish" data-action="check-updates">Check now</button></div>' +
+      '<label>Setup</label><div class="aboutline"><a href="#/setup">Run setup again</a></div>' +
       advanced('updates', '<label for="f-updates">Check daily</label><label class="check"><input id="f-updates" type="checkbox"' + (!(c.updates && c.updates.check === false) ? ' checked' : '') + '><span>Look for a new version daily. Nothing installs on its own.</span></label>' +
         '<label>Machine</label><div><span class="chip machine">⌂ ' + esc(c.machineResolved) + '</span></div>' +
         '<label>Folder</label><div><a class="chip mono" href="file://' + esc(c.folder) + '">' + esc(c.folder) + '</a></div>'),
@@ -3148,6 +3252,7 @@ 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 === 'setup') await viewSetup()
     else await viewBoard()
   } catch (e) {
     if (e.code === 'login_required') return showLogin()
@@ -3155,6 +3260,18 @@ async function render() {
   }
 }
 
+// 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() {
+  if ($app.querySelector('.wz')) return
+  await mountWizard($app, { api, esc, onDone: () => { location.hash = '#/' } })
+}
+// Opens #/setup by itself once, on a Mac's own board, when the board opens plain (no deep link).
+async function firstRunSetup() {
+  if (location.hash.replace(/^#\/?/, '')) return
+  try { const s = await api('GET', '/v1/setup'); if (shouldAutoOpen(s, (state.route || {}).name) && !location.hash.replace(/^#\/?/, '')) location.replace('#/setup') } catch {}
+}
+
 // A remote browser (Tailscale) that hasn't signed in yet: the iPhone
 // home-screen app always lands here first (it has its own cookie jar), so the
 // typed code is the main way in; the QR link is the other.
@@ -3702,6 +3819,18 @@ document.addEventListener('click', async (ev) => {
       } catch (e) { cuUi.making = false; cuUi.err = e.message; render() }
       return
     }
+    if (action === 'restore-ask-confirm' || action === 'restore-ask-decline') {
+      const id = btn.dataset.id
+      if (!id || restoreUi.busy.has(id)) return
+      restoreUi.busy.add(id); render()
+      try {
+        const r = await api('POST', '/v1/restore/asks/' + encodeURIComponent(id) + '/' + (action === 'restore-ask-confirm' ? 'confirm' : 'decline'), {}, { timeoutMs: 60000 })
+        toast(r.state === 'confirmed' ? 'Restored ' + ((r.result && r.result.opened) || 0) + ' in Ghostty' : r.state === 'declined' ? 'Declined' : 'That request was ' + r.state)
+      } catch (e) { toast(e.message, 5000) }
+      restoreUi.busy.delete(id)
+      try { state.restore = await api('GET', '/v1/restore') } catch {}
+      return render()
+    }
     if (action === 'restore-open') { restoreUi.open = true; restoreUi.result = null; return render() }
     if (action === 'restore-close') { restoreUi.open = false; return render() }
     if (action === 'restore-dismiss') { try { localStorage.setItem(restoreDismissKey(state.restore || {}), '1') } catch {} restoreUi.open = false; return render() }
@@ -3709,7 +3838,21 @@ document.addEventListener('click', async (ev) => {
     if (action === 'restore-copy') { const p = restorePicked(); if (!p.length) { toast('Pick at least one'); return } await copy(p.map((x) => x.command).join('\n')); return }
     if (action === 'restore-go') {
       const ids = restorePicked().map((x) => x.id)
-      if (!ids.length) return
+      if (!ids.length) { toast('Pick at least one'); return }
+      const gate = restoreGate()
+      if (!gate.ok) { toast(gate.hint.replace(/`/g, ''), 6000); return }
+      // 0.9.8: from a phone or another Mac, ask that Mac; a person there confirms
+      if (gate.how === 'ask') {
+        if (restoreUi.ask && ['pending', 'confirming'].includes(restoreUi.ask.state)) return
+        const machine = (state.restore && state.restore.machine) || null
+        btn.setAttribute('aria-disabled', 'true'); btn.textContent = 'Asking ' + (machine || 'the Mac') + '…'
+        try {
+          const r = await api('POST', '/v1/restore/asks', { machine, ids })
+          restoreUi.ask = { ...r, machine: machine || r.machine }
+          setTimeout(pollRestoreAsk, 2000)
+        } catch (e) { restoreUi.ask = { state: 'error', machine, error: e.message } }
+        return render()
+      }
       btn.disabled = true; btn.textContent = 'Opening ' + ids.length + '…'
       const r = await api('POST', '/v1/restore', { ids }, { timeoutMs: 60000 })
       restoreUi.result = r.how === 'print' || r.failed ? r : null
@@ -3859,6 +4002,7 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
+    if (action === 'live-send') return liveSendClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
@@ -4335,10 +4479,10 @@ 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]), .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))
+const busy = () => !!document.querySelector('.doc-viewer: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)
 // 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 && state.route.name === 'settings') && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }
+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) }
 let stream = null
 function connect() {
   if (stream) { try { stream.close() } catch {} }
@@ -4388,7 +4532,7 @@ document.addEventListener('change', async (ev) => {
     if (ev.target.checked) restoreUi.off.delete(ev.target.value); else restoreUi.off.add(ev.target.value)
     const n = restorePicked().length
     const go = document.getElementById('restoreGo')
-    if (go) { go.disabled = !n; go.innerHTML = icon('rotate-ccw') + 'Restore ' + n }
+    if (go) { if (n && restoreGate().ok) go.removeAttribute('aria-disabled'); else go.setAttribute('aria-disabled', 'true'); go.innerHTML = icon('rotate-ccw') + 'Restore ' + n }
     const all = document.querySelector('[data-action="restore-all"]')
     if (all) all.textContent = n === (state.restore ? state.restore.sessions.length : 0) ? 'Select none' : 'Select all'
     return
@@ -4455,7 +4599,7 @@ document.addEventListener('pointerdown', (ev) => {
   if (m && !m.contains(ev.target)) m.open = false
 })
 api('GET', '/v1/config').then((c) => (state.cfg = c)).catch(() => {})
-refreshHealth().then(render)
+refreshHealth().then(render).then(firstRunSetup)
 connect()
 
 // The home-screen app's service worker (v0.4.6): it only serves an offline page

package/ui/direct.js

@@ -1,6 +1,7 @@
 // 0.9.3: "direct when on the same Mac". The hosted board (<user>.leftoff.dev)
 // open on a Mac that runs Leftoff asks that Mac's own daemon over
-// http://127.0.0.1:7429 instead of through the relay; the address bar stays.
+// http://127.0.0.1:7429 (0.9.7: or https://leftoff.localhost) instead of
+// through the relay; the address bar stays.
 //
 // The request is the very envelope the relay would carry (ui/relay-crypto.js),
 // posted to /v1/relay/direct (src/direct.js) instead of /_relay/api. So going
@@ -21,7 +22,13 @@ import { LOCAL_PORT, isPhoneUa } from './viewer.js'
 export const DIRECT_PATH = '/v1/relay/direct'
 export const PROBE_EVERY_MS = 60000
 export const FOCUS_GAP_MS = 10000
+// 0.9.7: Leftoff's own https://leftoff.localhost (`leftoff setup`, Caddy in
+// front of 127.0.0.1:7429) is asked too: an https page may always call an
+// https address, where Safari refuses plain http://127.0.0.1. Both go to the
+// same daemon; the first that proves itself is used.
+export const HTTPS_LOCAL = 'https://leftoff.localhost'
 export function directUrl(port = LOCAL_PORT) { return 'http://127.0.0.1:' + port + DIRECT_PATH }
+export function directUrls(port = LOCAL_PORT) { return [HTTPS_LOCAL + DIRECT_PATH, directUrl(port)] }
 
 export class DirectError extends Error { constructor(code, message) { super(message || code); this.code = code } }
 
@@ -37,14 +44,18 @@ export function directMatch(info, { user, picked } = {}) {
 export function aborted(signal) { return !!(signal && signal.aborted) }
 
 export class DirectRoute {
-  constructor({ user, port = LOCAL_PORT, fetchImpl, now = () => Date.now(), ua = '', maxTouchPoints = 0, every = PROBE_EVERY_MS, focusGap = FOCUS_GAP_MS } = {}) {
+  constructor({ user, port = LOCAL_PORT, urls = null, fetchImpl, now = () => Date.now(), ua = '', maxTouchPoints = 0, every = PROBE_EVERY_MS, focusGap = FOCUS_GAP_MS } = {}) {
     this.user = user; this.port = port; this.fetchImpl = fetchImpl; this.now = now
+    this.urls = urls && urls.length ? urls.slice() : directUrls(port)
+    this.base = null // the address that answered last (one of urls)
     // a phone or tablet never runs Leftoff: don't ask (and don't trip a permission prompt)
     this.never = isPhoneUa(ua, { maxTouchPoints })
     this.every = every; this.focusGap = focusGap
     this.on = false; this.machine = null; this.checkedAt = 0; this.inflight = null; this.lastError = null; this.latencyMs = null
   }
-  get url() { return directUrl(this.port) }
+  get url() { return this.base || this.urls[this.urls.length - 1] }
+  // 'https' (https://leftoff.localhost) or 'http' (127.0.0.1), once one answered
+  get via() { return this.base ? (this.base.startsWith('https:') ? 'https' : 'http') : null }
 
   // -> the machine (direct confirmed, not yet switched on) or null. Never throws.
   probe({ picked = null, verify = null, timeoutMs = 1500 } = {}) {
@@ -53,15 +64,20 @@ export class DirectRoute {
     this.inflight = (async () => {
       this.checkedAt = this.now()
       const t0 = this.now()
-      let info
-      try {
-        const r = await this.fetchImpl(this.url, { mode: 'cors', credentials: 'omit', cache: 'no-store', signal: timeoutSignal(timeoutMs) })
-        if (r.status !== 200) return null
-        info = await r.json()
-      } catch { return null }
-      const m = directMatch(info, { user: this.user, picked })
-      if (!m) return null
-      if (verify) { let ok = false; try { ok = await verify(m) } catch { ok = false } if (!ok) return null }
+      // every address at once; the first that is this account's Leftoff wins
+      const ask = async (url) => {
+        const r = await this.fetchImpl(url, { mode: 'cors', credentials: 'omit', cache: 'no-store', signal: timeoutSignal(timeoutMs) })
+        if (r.status !== 200) throw new DirectError('http_' + r.status)
+        const m = directMatch(await r.json(), { user: this.user, picked })
+        if (!m) throw new DirectError('not_ours')
+        return { url, m }
+      }
+      let hit
+      try { hit = await firstOf(this.urls.map(ask)) } catch { return null }
+      const prev = this.base
+      this.base = hit.url
+      const m = hit.m
+      if (verify) { let ok = false; try { ok = await verify(m) } catch { ok = false } if (!ok) { this.base = prev; return null } }
       this.latencyMs = Math.max(0, Math.round(this.now() - t0))
       return m
     })().finally(() => { this.inflight = null })
@@ -108,6 +124,15 @@ export function toResponse(out) {
   return new Response(nullBody ? null : out.b, { status: out.s, headers: out.h })
 }
 
+// Promise.any, for browsers and runtimes without it.
+function firstOf(ps) {
+  return new Promise((resolve, reject) => {
+    let left = ps.length
+    if (!left) return reject(new DirectError('none'))
+    for (const p of ps) Promise.resolve(p).then(resolve, () => { if (--left === 0) reject(new DirectError('none')) })
+  })
+}
+
 function timeoutSignal(ms) {
   if (typeof AbortSignal !== 'undefined' && AbortSignal.timeout) return AbortSignal.timeout(ms)
   const c = new AbortController(); setTimeout(() => c.abort(), ms); return c.signal

package/ui/needs.js

@@ -81,7 +81,7 @@ export function needPanel(n, opts = {}) {
     if (n.more) h += '<div class="need-note">+' + n.more + ' more waiting after this one</div>'
     h += '<div class="need-actions">' +
       '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
-      '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' title="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>' +
+      (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' title="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
       '<button type="button" class="btn deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' + go + '</div>' +
       '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
       '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny' + kbdHint(opts) + '</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'

package/ui/restore-gate.js

@@ -0,0 +1,64 @@
+// 0.9.7: may this board press Restore, and if not, what would make it work.
+// Restore opens Ghostty tabs on the Mac the restore card belongs to, so the
+// board must be on that Mac: its own browser on localhost, or your hosted
+// board (<user>.leftoff.dev) open on it and talking to it over the direct path
+// (ui/direct.js: http://127.0.0.1:7429 or https://leftoff.localhost). The
+// daemon checks the same thing again (src/direct.js DIRECT_LOCAL); this only
+// decides how the button looks and what the hint says. Plain logic, no DOM.
+//
+//   local     the page is that Mac's own board (viewer.local)
+//   hosted    the page is the hosted board (window.leftoffRelay)
+//   route     'direct' | 'relay' (leftoffRelay.route), routeMac: the Mac it is on
+//   machine   the Mac the restore card belongs to
+//   phone     a phone or tablet (never runs Leftoff)
+//   canAsk    0.9.8: that Mac takes Restore requests from other devices (GET /v1/restore has asks)
+// -> { ok, how: 'local' | 'direct' | 'ask' | null, hint: text with `commands` or null }
+//   'ask': the request goes to that Mac, where a person confirms before any tab opens.
+export function restoreAccess({ local = false, hosted = false, route = null, routeMac = null, machine = null, phone = false, canAsk = false } = {}) {
+  if (local && !hosted) return { ok: true, how: 'local', hint: null }
+  if (hosted && !phone && route === 'direct' && machine && routeMac === machine) return { ok: true, how: 'direct', hint: null }
+  const m = machine || 'the Mac'
+  if (canAsk && machine) return { ok: true, how: 'ask', hint: 'Restore asks ' + m + ' first: someone at ' + m + ' confirms before the tabs open.' }
+  if (phone) return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + ', so it can’t run from a phone yet. On ' + m + ', run `leftoff restore`.' }
+  if (hosted) {
+    return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + '. Open this board on ' + m + ', or run `leftoff restore` there. Already on ' + m + '? Run `leftoff setup` and turn on https://leftoff.localhost so this page can reach it.' }
+  }
+  return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + ', so it works from ' + m + '’s own browser. Or run `leftoff restore` there.' }
+}
+
+// 0.9.8: what the card says about a Restore it asked another Mac for.
+//   ask: { state, machine, count, expiresAt, result, error }  -> { text, tone: 'info' | 'ok' | 'warn' }
+export function askLine(ask, { clock = (iso) => iso } = {}) {
+  if (!ask) return null
+  const m = ask.machine || 'the Mac', n = ask.count || 0
+  const tabs = n + ' tab' + (n === 1 ? '' : 's')
+  switch (ask.state) {
+    case 'pending': return { text: 'Waiting for someone at ' + m + ' to confirm' + (ask.expiresAt ? ' (until ' + clock(ask.expiresAt) + ')' : '') + '…', tone: 'info' }
+    case 'confirming': return { text: 'Confirmed on ' + m + ': opening ' + tabs + '…', tone: 'info' }
+    case 'confirmed': {
+      const r = ask.result || {}
+      if (r.how === 'print') return { text: 'Confirmed on ' + m + ', but Ghostty didn’t open there: run `leftoff restore` on ' + m + '.', tone: 'warn' }
+      return { text: 'Confirmed on ' + m + ': ' + (r.opened || 0) + ' of ' + tabs + ' opened' + (r.failed ? ', ' + r.failed + ' didn’t' : '') + '.', tone: r.failed ? 'warn' : 'ok' }
+    }
+    case 'declined': return { text: 'Declined on ' + m + '. Nothing was opened.', tone: 'warn' }
+    case 'expired': return { text: 'Nobody confirmed on ' + m + ' in time. Nothing was opened.', tone: 'warn' }
+    case 'failed': return { text: 'It didn’t work on ' + m + ': ' + (ask.error || 'an error') + '.', tone: 'warn' }
+    default: return { text: ask.error || 'Couldn’t ask ' + m + '.', tone: 'warn' }
+  }
+}
+
+// The hint as HTML: escaped, `commands` in <code>.
+export function hintHtml(hint, esc) {
+  return String(hint || '').split('`').map((part, i) => (i % 2 ? '<code>' + esc(part) + '</code>' : esc(part))).join('')
+}
+
+// 0.9.7: when the restore card's sessions were open, from GET /v1/restore:
+// restartKind 'quit' (the terminal quit while the Mac stayed up; restartTerminal
+// names it when known), 'boot' or 'daemon'. short: the CLI's one-liners.
+//   -> "when Ghostty quit" | "before your Mac restarted" | "before Leftoff restarted"
+export function restoreWhen(r = {}, { short = false } = {}) {
+  if (r.restartKind === 'quit') return 'when ' + (r.restartTerminal || 'the terminal') + ' quit'
+  if (short) return 'before the restart'
+  if (r.restartKind === 'boot') return 'before ' + (r.ghostty === false ? 'this machine' : 'your Mac') + ' restarted'
+  return 'before Leftoff restarted'
+}