@leftoff/cli 0.9.5 → 0.9.7

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 } 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')
@@ -205,7 +207,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 +312,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.'
@@ -830,9 +832,10 @@ async function viewBoard() {
 // 0.8.6: search the board. The words live in the URL (?q=), typing keeps the
 // focus, and matches among closed sessions are one tap away.
 function boardSearch(q, closedHits, n) {
-  return '<div class="board-search-row"><div class="set-search board-search">' + icon('search') + '<input id="boardQ" type="search" placeholder="Find a session: title, repo, branch, folder or id" aria-label="Find a session" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(q) + '"></div>' +
+  return '<div class="board-search-row"><div class="set-search board-search">' + icon('search') + '<input id="boardQ" type="search" enterkeyhint="search" placeholder="Find a session, or anything said in one" aria-label="Find a session, or search what was said in sessions" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(q) + '"></div>' +
     (q ? '<div class="board-search-note">' + (n ? esc(n + (n === 1 ? ' match' : ' matches')) : 'No open or recent session matches.') +
-      (closedHits ? ' <button type="button" class="linkish" data-action="closed-search" data-q="' + esc(q) + '">' + esc(closedHits + ' closed ' + (closedHits === 1 ? 'match' : 'matches')) + ' →</button>' : '') + '</div>' : '') + '</div>'
+      (closedHits ? ' <button type="button" class="linkish" data-action="closed-search" data-q="' + esc(q) + '">' + esc(closedHits + ' closed ' + (closedHits === 1 ? 'match' : 'matches')) + ' →</button>' : '') +
+      ' <a class="linkish tx-board-link" href="#/search?q=' + encodeURIComponent(q) + '">' + icon('message-square') + 'Search what was said →</a></div>' : '') + '</div>'
 }
 // A repaint from a live update (or the 30 s refresh) while you type in the
 // search box keeps the box focused, with what you typed and the caret.
@@ -862,7 +865,11 @@ function boardSearchWire() {
       if (again) { again.focus(); try { again.setSelectionRange(pos, pos) } catch {} }
     }, 160)
   })
-  q.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && q.value) { ev.preventDefault(); q.value = ''; q.dispatchEvent(new Event('input')) } })
+  q.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape' && q.value) { ev.preventDefault(); q.value = ''; q.dispatchEvent(new Event('input')) }
+    // 0.9.6: Enter (Search on the phone's keyboard) opens the full results, transcripts included
+    else if (ev.key === 'Enter' && q.value.trim() && !ev.isComposing) { ev.preventDefault(); clearTimeout(boardQTimer); location.hash = '#/search?q=' + encodeURIComponent(q.value.trim()) }
+  })
 }
 
 // Closed (0.6.7): every ended session on every machine, newest first, with
@@ -1028,26 +1035,32 @@ 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 }
 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 }) })
+}
 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 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('')
@@ -1055,13 +1068,15 @@ function restoreBanner() {
     '<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 ? '' : ' aria-disabled="true"') +
+      (gate.ok ? '' : ' aria-describedby="restoreHint" 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>') +
+    (gate.ok ? '' : '<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 ''
@@ -1259,6 +1274,92 @@ async function viewSession(id) {
   if (empties.length) html += '<details class="tl-doubt"><summary>' + empties.length + ' empty checkpoint' + (empties.length === 1 ? '' : 's') + ' set aside: no messages were found when ' + (empties.length === 1 ? 'it was' : 'they were') + ' written</summary><div class="timeline">' + cpTimeline(empties, null) + '</div></details>'
   html += answeredList(s)
   $app.innerHTML = html
+  aroundWire(s.id)
+}
+// ------------------------------------------------------------ search inside transcripts (0.9.6)
+
+// Plain text + [start, end] ranges -> escaped HTML with <mark>s (ranges that
+// overlap, run backwards or past the end are skipped).
+function markedHtml(text, marks) {
+  const t = String(text || '')
+  let h = '', at = 0
+  for (const m of Array.isArray(marks) ? marks : []) {
+    const a = Number(m && m[0]), b = Number(m && m[1])
+    if (!(Number.isInteger(a) && Number.isInteger(b) && a >= at && b > a && b <= t.length)) continue
+    h += esc(t.slice(at, a)) + '<mark>' + esc(t.slice(a, b)) + '</mark>'
+    at = b
+  }
+  return h + esc(t.slice(at))
+}
+const txHref = (h, q) => '#/s/' + encodeURIComponent(h.sessionId) + (h.anchor != null ? '?hit=' + encodeURIComponent(h.anchor) + '&q=' + encodeURIComponent(q) : '')
+const txWho = (h) => h.role === 'assistant' ? 'Claude' : 'You'
+function txSub(h) {
+  return [h.project && h.project.name ? projectLabel(h.project) : h.repoLabel, multi() || (h.machine && state.health && h.machine !== state.health.machine) ? h.machine : '', h.at ? ago(h.at) : '', h.hits > 1 ? h.hits + ' matches' : ''].filter(Boolean).join(' · ')
+}
+const nfmt = (n) => Number(n || 0).toLocaleString()
+// "Still indexing (n of m)", other Macs that weren't searched, or null.
+function txNotes(r) {
+  const out = []
+  const me = (r.machines || []).find((m) => m.self) || {}
+  if (me.status === 'indexing') out.push('Still indexing transcripts' + (me.total ? ' (' + nfmt(me.done) + ' of ' + nfmt(me.total) + ')' : '') + '. Results so far.')
+  if (me.status === 'off') out.push('Transcript search is off on this Mac.')
+  for (const m of r.machines || []) {
+    if (m.self) continue
+    if (m.status === 'indexing') out.push(m.machine + ' is still indexing' + (m.total ? ' (' + nfmt(m.done) + ' of ' + nfmt(m.total) + ')' : '') + '.')
+    else if (m.status === 'unreachable') out.push(m.machine + ' wasn’t searched (not reachable right now).')
+    else if (m.status === 'needs_update') out.push(m.machine + ' wasn’t searched (it needs Leftoff 0.9.6).')
+  }
+  return out
+}
+// One hit as a result row (search page, board).
+function txHitHtml(h, q) {
+  return '<a class="tx-hit" href="' + esc(txHref(h, q)) + '">' +
+    '<span class="tx-title">' + esc(h.title || 'Untitled') + (h.endedAt ? '<span class="tx-tag">closed</span>' : '') + '</span>' +
+    '<span class="tx-sub">' + esc(txSub(h)) + '</span>' +
+    '<span class="tx-snip"><span class="tx-who ' + (h.role === 'assistant' ? 'a' : 'u') + '">' + esc(txWho(h)) + '</span> ' + markedHtml(h.snippet, h.marks) + '</span></a>'
+}
+function txSectionHtml(r, q, { more = null } = {}) {
+  if (!r) return '<h2 class="tx-h">In transcripts</h2><div class="tx-note">Searching transcripts…</div>'
+  const notes = txNotes(r)
+  let h = '<h2 class="tx-h">In transcripts' + (r.results.length ? ' <span class="tx-count">' + esc(r.results.length + (r.results.length === 1 ? ' session' : ' sessions')) + '</span>' : '') + '</h2>'
+  const idx = notes.find((n) => /^Still indexing/.test(n))
+  if (idx) h += '<div class="tx-note tx-indexing" role="status"><span class="spin" aria-hidden="true"></span>' + esc(idx) + '</div>'
+  if (r.results.length) h += '<div class="tx-list">' + r.results.map((x) => txHitHtml(x, q)).join('') + '</div>'
+  else if (!notes.some((n) => /^Still indexing/.test(n))) h += '<div class="tx-note tx-empty">Nothing you or Claude said matches “' + esc(q) + '”.</div>'
+  for (const n of notes) if (n !== idx) h += '<div class="tx-note">' + esc(n) + '</div>'
+  if (more) h += '<div class="tx-more"><a href="' + esc(more) + '">All results for “' + esc(q) + '” →</a></div>'
+  return h
+}
+const txQuery = (q, limit) => api('GET', '/v1/search?in=transcripts&limit=' + limit + '&q=' + encodeURIComponent(q))
+
+// The session page opened from a transcript hit: the message and the turns
+// around it, at the top, scrolled to.
+const aroundCache = new Map()
+async function aroundWire(id) {
+  const r = state.route
+  if (!r || r.name !== 's' || !r.params || r.params.get('hit') == null) return
+  const anchor = r.params.get('hit'), q = r.params.get('q') || ''
+  const key = id + '|' + anchor + '|' + q
+  const head = document.querySelector('#app .pagehead')
+  if (!head) return
+  let box = document.getElementById('txAround')
+  if (!box) { box = document.createElement('section'); box.id = 'txAround'; box.className = 'tx-around'; box.setAttribute('aria-label', 'Found in the transcript'); head.after(box) }
+  const first = !aroundCache.has(key)
+  let d = aroundCache.get(key)
+  if (!d) {
+    box.innerHTML = '<div class="tx-around-head">Found in the transcript</div><div class="tx-note">Loading…</div>'
+    try { d = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/around?anchor=' + encodeURIComponent(anchor) + '&q=' + encodeURIComponent(q)) } catch (e) { d = { error: e.message, messages: [] } }
+    aroundCache.set(key, d)
+    if (!document.getElementById('txAround')) return
+  }
+  const close = '<a class="icon x tx-close" href="#/s/' + encodeURIComponent(id) + '" aria-label="Close" title="Close">×</a>'
+  if (!d.messages || !d.messages.length) { box.innerHTML = '<div class="tx-around-head">Found in the transcript' + close + '</div><div class="tx-note">' + esc(d.error ? 'Couldn’t read that part of the transcript: ' + d.error : 'That message isn’t in the index any more (the transcript changed).') + '</div>'; return }
+  box.innerHTML = '<div class="tx-around-head">Found in the transcript' + (q ? ' · “' + esc(q) + '”' : '') + close + '</div>' +
+    d.messages.map((m) => '<div class="tx-msg ' + (m.role === 'assistant' ? 'a' : 'u') + (m.hit ? ' hit' : '') + '"' + (m.hit ? ' id="txHit" tabindex="-1"' : '') + '><div class="tx-msg-head"><span class="tx-who ' + (m.role === 'assistant' ? 'a' : 'u') + '">' + (m.role === 'assistant' ? 'Claude' : 'You') + '</span>' + (m.at ? '<span class="t" title="' + esc(clock(m.at)) + '">' + esc(ago(m.at)) + '</span>' : '') + '</div><div class="tx-msg-text">' + markedHtml(m.text, m.marks) + '</div></div>').join('')
+  if (first) {
+    const hit = document.getElementById('txHit')
+    if (hit) { hit.scrollIntoView({ block: 'center' }); const mk = hit.querySelector('mark'); if (mk && hit.scrollHeight > hit.clientHeight) mk.scrollIntoView({ block: 'center' }) }
+  }
 }
 function cpTimeline(list, newestCp) {
   return list.map((cp) =>
@@ -2316,6 +2417,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>'),
@@ -2887,12 +2989,36 @@ async function stAction(action, btn) {
 }
 
 async function viewSearch(q) {
-  const r = await api('GET', '/v1/search?q=' + encodeURIComponent(q))
-  let html = '<div class="pagehead"><div><h1>Search</h1><div class="sub">“' + esc(q) + '” · ' + r.sessions.length + ' sessions, ' + r.checkpoints.length + ' checkpoints</div></div></div>'
-  if (r.sessions.length) html += '<h2>Sessions</h2><div class="grid">' + r.sessions.map(card).join('') + '</div>'
-  if (r.checkpoints.length) html += '<h2>Checkpoints</h2><div class="timeline">' + r.checkpoints.map((cp) => '<div class="tl-item ' + esc(cp.trigger) + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><a class="tl-title" href="#/s/' + encodeURIComponent(cp.sessionId) + '">' + esc(cp.sessionTitle || 'Untitled') + '</a></div>' + cpBlock(cp, { showWhen: false }) + '</div>').join('') + '</div>'
-  if (!r.sessions.length && !r.checkpoints.length) html += '<div class="empty mt">Nothing matched.</div>'
-  $app.innerHTML = html
+  const form = '<form class="search-page-form" id="searchPageForm" role="search"><div class="set-search">' + icon('search') + '<input id="searchPageQ" type="search" enterkeyhint="search" placeholder="Search sessions and what was said in them" aria-label="Search" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(q) + '"></div><button class="btn primary" type="submit">Search</button></form>'
+  if (!q.trim()) { $app.innerHTML = '<div class="pagehead"><div><h1>Search</h1><div class="sub">Titles, checkpoints, and everything you and Claude said.</div></div></div>' + form; return searchPageWire() }
+  const seq = (viewSearch.seq = (viewSearch.seq || 0) + 1)
+  const [r, tx] = await Promise.all([api('GET', '/v1/search?q=' + encodeURIComponent(q)), txQuery(q, 30).catch(() => null)])
+  if (seq !== viewSearch.seq) return
+  const paint = (tx) => {
+    let html = '<div class="pagehead"><div><h1>Search</h1><div class="sub">“' + esc(q) + '” · ' + r.sessions.length + (r.sessions.length === 1 ? ' session, ' : ' sessions, ') + r.checkpoints.length + (r.checkpoints.length === 1 ? ' checkpoint' : ' checkpoints') + (tx ? ', ' + tx.results.length + ' in transcripts' : '') + '</div></div></div>' + form
+    if (r.sessions.length) html += '<h2>Sessions</h2><div class="grid">' + r.sessions.map(card).join('') + '</div>'
+    html += '<section class="tx-section">' + txSectionHtml(tx || { results: [], machines: [] }, q) + '</section>'
+    if (r.checkpoints.length) html += '<h2>Checkpoints</h2><div class="timeline">' + r.checkpoints.map((cp) => '<div class="tl-item ' + esc(cp.trigger) + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><a class="tl-title" href="#/s/' + encodeURIComponent(cp.sessionId) + '">' + esc(cp.sessionTitle || 'Untitled') + '</a></div>' + cpBlock(cp, { showWhen: false }) + '</div>').join('') + '</div>'
+    if (!r.sessions.length && !r.checkpoints.length && tx && !tx.results.length && !txNotes(tx).length) html += '<div class="empty mt">Nothing matched.</div>'
+    $app.innerHTML = html
+    searchPageWire()
+  }
+  paint(tx)
+  // still indexing: look again in a moment (results fill in as the index grows)
+  if (tx && (tx.machines || []).some((m) => m.status === 'indexing')) setTimeout(async () => {
+    if (seq !== viewSearch.seq || !state.route || state.route.name !== 'search' || document.activeElement === document.getElementById('searchPageQ')) return
+    const again = await txQuery(q, 30).catch(() => null)
+    if (again && seq === viewSearch.seq && state.route.name === 'search') { paint(again); if ((again.machines || []).some((m) => m.status === 'indexing')) setTimeout(() => { if (seq === viewSearch.seq && state.route.name === 'search') render() }, 3000) }
+  }, 2500)
+}
+function searchPageWire() {
+  const f = document.getElementById('searchPageForm')
+  if (!f) return
+  f.addEventListener('submit', (e) => {
+    e.preventDefault()
+    const v = document.getElementById('searchPageQ').value.trim()
+    location.hash = '#/search' + (v ? '?q=' + encodeURIComponent(v) : '')
+  })
 }
 
 // ------------------------------------------------------------ lists (v0.5.1)
@@ -3033,6 +3159,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()
@@ -3040,6 +3167,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.
@@ -3280,6 +3419,21 @@ function searchGroups(q, r) {
     if ((r.files || []).length) groups.push(['Files', r.files.slice(0, 5).map((f) => ({ href: '#/s/' + encodeURIComponent(f.sessionId), title: f.name, sub: f.sessionTitle || '', icon: 'file-text' }))])
     if (r.checkpoints.length) groups.push(['Checkpoints', r.checkpoints.slice(0, 4).map((cp) => ({ href: '#/s/' + encodeURIComponent(cp.sessionId), title: plainCp(cp.doing || cp.next) || 'Checkpoint', sub: [cp.sessionTitle || 'Untitled', cp.createdAt ? clock(cp.createdAt) : ''].filter(Boolean).join(' · '), icon: 'check' }))])
   }
+  // 0.9.6: what was said in sessions, below the rest of the results
+  if (low && low.length >= 2) {
+    const tx = searchUi.tx && searchUi.tx.q === q ? searchUi.tx.r : null
+    if (!tx) groups.push(['In transcripts', [], '<span class="spin" aria-hidden="true"></span>Searching transcripts…'])
+    else {
+      const notes = txNotes(tx)
+      const items = tx.results.slice(0, 6).map((h) => ({ href: txHref(h, q), title: h.title || 'Untitled', sub: txSub(h), snip: h, icon: 'message-square' }))
+      const indexing = notes.find((n) => /^Still indexing/.test(n))
+      // "still indexing" leads the section (what's below is partial); the rest follows the rows
+      const lead = indexing ? '<span class="spin" aria-hidden="true"></span>' + esc(indexing) : ''
+      const note = (!items.length && !indexing ? 'Nothing you or Claude said matches “' + esc(q) + '”.' : '') +
+        notes.filter((n) => n !== indexing).map((n) => '<span class="tx-note-line">' + esc(n) + '</span>').join('')
+      if (items.length || note || lead) groups.push(['In transcripts', items, note, lead])
+    }
+  }
   if (acts.length) groups.push(['Actions', acts.slice(0, low ? 4 : 5)])
   if (sets.length) groups.push(['Settings', sets.slice(0, 5)])
   if (pages.length) groups.push(['Go to', pages.slice(0, low ? 4 : 8)])
@@ -3312,14 +3466,20 @@ function paintSearch() {
   searchUi.items = []
   let h = ''
   if (q) { searchUi.items.push({ href: '#/search?q=' + encodeURIComponent(q), title: 'All results for “' + q + '”', icon: 'search' }) }
-  for (const [name, items] of groups) { h += '<div class="cmdk-group" role="presentation">' + esc(name) + '</div>'; for (const it of items) { searchUi.items.push(it); h += optHtml(it, searchUi.items.length - 1) } }
-  if (q) h = optHtml(searchUi.items[0], 0) + h
+  const tx = searchUi.tx && searchUi.tx.q === q ? searchUi.tx.r : null
   if (q && q.length >= 2 && !r) h += '<div class="cmdk-note">Searching…</div>'
-  else if (q && r && !r.sessions.length && !r.checkpoints.length && !(r.projects || []).length && !(r.prs || []).length && !(r.files || []).length && !(r.lists || []).length && !(r.todos || []).length) h += '<div class="cmdk-note">Nothing matches “' + esc(q) + '”.</div>'
+  else if (q && r && !r.sessions.length && !r.checkpoints.length && !(r.projects || []).length && !(r.prs || []).length && !(r.files || []).length && !(r.lists || []).length && !(r.todos || []).length && !(tx && tx.results.length)) h += '<div class="cmdk-note">Nothing matches “' + esc(q) + '”' + (tx ? '' : ' by name') + '.</div>'
+  for (const [name, items, note, lead] of groups) {
+    h += '<div class="cmdk-group' + (name === 'In transcripts' ? ' tx-group' : '') + '" role="presentation">' + esc(name) + '</div>'
+    if (lead) h += '<div class="cmdk-note tx-note tx-lead">' + lead + '</div>'
+    for (const it of items) { searchUi.items.push(it); h += optHtml(it, searchUi.items.length - 1) }
+    if (note) h += '<div class="cmdk-note tx-note">' + note + '</div>'
+  }
+  if (q) h = optHtml(searchUi.items[0], 0) + h
   list.innerHTML = h
   // 0.9.0: Enter opens the best match (the first result); ↑ reaches "All results for …"
   setSearchActive(q && searchUi.items.length > 1 ? 1 : searchUi.items.length ? 0 : -1)
-  function optHtml(it, i) { return '<a class="cmdk-opt" role="option" id="cmdk-o' + i + '" data-i="' + i + '" href="' + esc(it.href || '#') + '"' + (it.ext ? ' target="_blank" rel="noopener"' : '') + (it.action ? ' data-palette-action="' + esc(it.action) + '"' : '') + ' aria-selected="false">' + icon(it.icon || 'search') + '<span class="co-text"><span class="co-title">' + esc(it.title) + '</span>' + (it.sub ? '<span class="co-sub">' + esc(it.sub) + '</span>' : '') + '</span></a>' }
+  function optHtml(it, i) { return '<a class="cmdk-opt' + (it.snip ? ' tx-opt' : '') + '" role="option" id="cmdk-o' + i + '" data-i="' + i + '" href="' + esc(it.href || '#') + '"' + (it.ext ? ' target="_blank" rel="noopener"' : '') + (it.action ? ' data-palette-action="' + esc(it.action) + '"' : '') + ' aria-selected="false">' + icon(it.icon || 'search') + '<span class="co-text"><span class="co-title">' + esc(it.title) + '</span>' + (it.sub ? '<span class="co-sub">' + esc(it.sub) + '</span>' : '') + (it.snip ? '<span class="co-snip"><span class="tx-who ' + (it.snip.role === 'assistant' ? 'a' : 'u') + '">' + esc(txWho(it.snip)) + '</span> ' + markedHtml(it.snip.snippet, it.snip.marks) + '</span>' : '') + '</span></a>' }
 }
 function setSearchActive(i) {
   searchUi.active = i
@@ -3333,17 +3493,39 @@ async function runSearch() {
   if (q.length < 2) { paintSearch(); return }
   paintSearch()
   try {
+    // 0.9.6: transcripts in parallel; names and checkpoints paint first
+    const txp = txQuery(q, 6).then((tr) => { if (seq === searchUi.seq) { searchUi.tx = { q, r: tr }; if (searchIsOpen()) paintSearchKeeping() } }, () => { if (seq === searchUi.seq) { searchUi.tx = { q, r: { results: [], machines: [] } }; if (searchIsOpen()) paintSearchKeeping() } })
     const r = await api('GET', '/v1/search?light=1&limit=20&q=' + encodeURIComponent(q))
     if (seq !== searchUi.seq) return
     searchUi.last = { q, r }
+    if (searchIsOpen()) paintSearchKeeping()
+    await txp
+    // still indexing: ask again while the palette stays open on the same words
+    const tx = searchUi.tx && searchUi.tx.q === q ? searchUi.tx.r : null
+    if (tx && (tx.machines || []).some((m) => m.status === 'indexing')) setTimeout(() => { if (seq === searchUi.seq && searchIsOpen()) runSearchAgain(q, seq) }, 2500)
+    return
   } catch { if (seq === searchUi.seq) searchUi.last = { q, r: { sessions: [], checkpoints: [], prs: [], projects: [], lists: [], todos: [], files: [] } } }
   if (searchIsOpen()) paintSearch()
 }
+async function runSearchAgain(q, seq) {
+  try { const tr = await txQuery(q, 6); if (seq !== searchUi.seq) return; searchUi.tx = { q, r: tr }; if (searchIsOpen()) paintSearchKeeping() } catch { return }
+  const tx = searchUi.tx.r
+  if ((tx.machines || []).some((m) => m.status === 'indexing')) setTimeout(() => { if (seq === searchUi.seq && searchIsOpen()) runSearchAgain(q, seq) }, 2500)
+}
+// A repaint when results arrive keeps the row you had moved to (by its link).
+function paintSearchKeeping() {
+  const was = searchUi.items[searchUi.active]
+  const moved = searchUi.moved
+  paintSearch()
+  if (!moved || !was) return
+  const i = searchUi.items.findIndex((it) => it.href === was.href && it.title === was.title)
+  if (i >= 0) setSearchActive(i)
+}
 document.getElementById('searchBtn').addEventListener('click', () => openSearch())
-document.getElementById('q').addEventListener('input', () => { clearTimeout(searchUi.timer); paintSearch(); searchUi.timer = setTimeout(runSearch, 160) })
+document.getElementById('q').addEventListener('input', () => { clearTimeout(searchUi.timer); searchUi.moved = false; paintSearch(); searchUi.timer = setTimeout(runSearch, 160) })
 document.getElementById('q').addEventListener('keydown', (e) => {
   const n = searchUi.items.length
-  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (n) setSearchActive((searchUi.active + (e.key === 'ArrowDown' ? 1 : -1) + n) % n) }
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); searchUi.moved = true; if (n) setSearchActive((searchUi.active + (e.key === 'ArrowDown' ? 1 : -1) + n) % n) }
   else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeSearch(); document.getElementById('searchBtn').focus() }
 })
 document.getElementById('cmdk').addEventListener('click', (e) => {
@@ -3551,7 +3733,9 @@ 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 }
       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
@@ -4180,7 +4364,7 @@ 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))
 // 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 {} }
@@ -4230,7 +4414,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
@@ -4297,7 +4481,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/icons.js

@@ -45,7 +45,8 @@ export const ICONS = {
   "pin-off": "<path d=\"M12 17v5\"/> <path d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\"/> <path d=\"m2 2 20 20\"/> <path d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\"/>",
   "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\"/>"
+  "circle-check": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"m9 12 2 2 4-4\"/>",
+  "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\"/>"
 }
 
 export function icon(name, cls = 'ic') {

package/ui/restore-gate.js

@@ -0,0 +1,40 @@
+// 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)
+// -> { ok, how: 'local' | 'direct' | null, hint: text with `commands` or null }
+export function restoreAccess({ local = false, hosted = false, route = null, routeMac = null, machine = null, phone = 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 (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.' }
+}
+
+// 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'
+}