@leftoff/cli 0.9.7 → 0.9.8-beta.2

package/ui/app.js

@@ -9,13 +9,18 @@ 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'
 import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches, orderSelectedFirst, searchMatches, saveProject, inProject, projectChips, projectLabel } from './repos.js'
+import { navKey, moreActive, badgeText, quickLookItems, quickLookHtml } from './nav.js'
+import { canStartPull, pullStep, pullRelease } from './pull.js'
+import { wireTips } from './tips.js'
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 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, isPhoneUa } from './viewer.js'
-import { restoreAccess, hintHtml, restoreWhen } from './restore-gate.js'
+import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
+import { sessionTitle, cardPills, foldsAsEmpty, entryHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom } from './live-view.js' // 0.9.8 Live link polish
+import { statusView, elapsedText } from './live-status.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
@@ -112,6 +117,10 @@ 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) => (cardPills(s).live ? ' <span class="pill live-pill" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
+// The status pill beside it: a live session that is only waiting shows just Live (never "dormant").
+const statusPill = (s) => { const st = cardPills(s).status; return st ? pill(st) : '' }
 
 const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
 
@@ -572,15 +581,15 @@ function card(s) {
   const nb = s.needsYou ? cardBadge(s.needsYou) : ''
   return '<article class="card ' + esc(s.status) + (s.live === 'closed' ? ' is-closed' : '') + (s.needsYou && s.needsYou.blocking ? ' needs-you' : '') + '" data-id="' + esc(s.id) + '" data-href="#/s/' + esc(encodeURIComponent(s.id)) + '">' +
     '<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>' +
+      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(sessionTitle(s)) + '</a>' +
       '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
-    '</div>' + pill(s.status) + '</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>' +
+    '</div>' + statusPill(s) + 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' && !cardPills(s).live ? ' · 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)) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
     '<div class="actions-row">' + (goButton(s) || (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '')) +
-      copyResumeIcon(s) +
+      chatButton(s) + copyResumeIcon(s) +
       (s.isLocal ? '' : remoteNote(s)) + moreMenu(s, sessionMenuItems(s)) +
     '</div></article>'
 }
@@ -751,7 +760,7 @@ async function viewBoard() {
   // not a resumed conversation) fold into one "N empty sessions" row. One
   // appears on the board as itself after its first prompt. Pinned ones, and
   // ones that need you, always show.
-  const isFolded = (s) => s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking)
+  const isFolded = (s) => foldsAsEmpty(s) // 0.9.8: never a live session
   const shown = recent.filter((s) => !isFolded(s))
   const empties = recent.filter(isFolded)
   const rank = Object.fromEntries(ORDER.map(([k], i) => [k, i]))
@@ -787,7 +796,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())
@@ -1039,14 +1048,49 @@ function emptyFold(list) {
 // (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 }) })
+    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
@@ -1062,17 +1106,18 @@ function restoreBanner() {
   }
   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">' +
-    '<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 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>' +
-    (gate.ok ? '' : '<span class="rs-note" id="restoreHint">' + hintHtml(gate.hint, esc) + '</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
@@ -1130,9 +1175,11 @@ async function viewWaiting() {
 // The nav's count, the page title and the favicon dot: visible from a background tab.
 function paintNeedsCount(n) {
   const c = document.getElementById('needsCount')
-  if (c) { c.hidden = !n; c.textContent = n > 99 ? '99+' : String(n) }
+  if (c) { c.hidden = !n; c.textContent = badgeText(n) }
   const tab = document.getElementById('needsTab')
   if (tab) { tab.classList.toggle('has-needs', !!n); tab.title = n ? n + ' waiting on you' : 'Nothing waiting on you' }
+  if (quickLookOpen() && paintNeedsCount.count !== n) loadQuickLook()
+  paintNeedsCount.count = n
   document.title = (n ? '(' + n + ') ' : '') + 'Leftoff'
   // The tab icon gets a red dot while something waits (leftoff-favicon-badge,
   // v0.4.5); the PNG is for browsers without SVG favicons.
@@ -1158,7 +1205,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
@@ -1233,21 +1280,24 @@ async function viewSession(id) {
   // 0.8.9: rename in place: tap the title or the pencil (this Mac's sessions; like /cp-name, your name wins over automatic ones)
   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>' +
+    ? '<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(sessionTitle(s)) + '</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(sessionTitle(s)) + '</h1>') + '<div class="sub">' + statusPill(s) + 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 === 'prompt' ? 'named from the first prompt' : 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>'
   }
@@ -1273,9 +1323,127 @@ async function viewSession(id) {
   const empties = s.checkpoints.filter((cp) => cp.doubt === 'empty') // 0.9.2
   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)
+  liveKeeper.before($app)
   $app.innerHTML = html
+  liveAfterRender(s.id)
   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>' }
+// 0.9.8 polish: the thread is ui/live-view.js (entries, status, sticking to the
+// bottom); Claude's answer is the session's own (markdown, like the terminal).
+const liveKeeper = createLiveKeeper()
+const liveSeenKey = (id) => 'lo-live-seen:' + id
+function liveSeen(id) { try { return localStorage.getItem(liveSeenKey(id)) } catch { return null } }
+function markLiveSeen(id, at) { try { localStorage.setItem(liveSeenKey(id), at || new Date().toISOString()) } catch {} }
+// "Chat" on a live card: straight to the Live box (#/s/<id>/live), with a dot when Claude replied since you last looked.
+function chatButton(s) {
+  if (!cardPills(s).live || s.agent) return ''
+  const unread = hasUnread(s.liveLink && s.liveLink.lastReplyAt, liveSeen(s.id))
+  return '<a class="btn chat-btn" href="' + esc(liveHref(s.id)) + '" aria-label="' + esc('Chat with this session' + (unread ? ' (new reply)' : '')) + '">Chat' + (unread ? '<span class="unread-dot" aria-hidden="true"></span>' : '') + '</a>'
+}
+// 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]) || ''
+  const now = Date.now()
+  const lastClaude = [...msgs].reverse().find((m) => m.from === 'claude')
+  if (lastClaude) markLiveSeen(s.id, lastClaude.at)
+  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">' +
+      msgs.map((m) => entryHtml(m, { esc, ago, md: renderDoc, now })).join('') + '</ol>' +
+      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
+      '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
+    (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
+    '<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>'
+}
+// After the session page is drawn: keep the thread (scroll, diffed entries), show "Jump to latest".
+function liveAfterRender(sid) {
+  const r = liveKeeper.after($app)
+  if (!r) return
+  const ol = r.thread.querySelector('.live-log')
+  const empty = r.thread.querySelector('.live-empty')
+  if (empty && ol) empty.hidden = ol.children.length > 0
+  liveJumpButton(r.thread, liveKeeper.unseen)
+  if (ol && !ol.dataset.wired) {
+    ol.dataset.wired = '1'
+    ol.addEventListener('scroll', () => { if (atBottom(ol)) { liveKeeper.seen(); liveJumpButton(r.thread, 0) } }, { passive: true })
+  }
+  // #/s/<id>/live: scroll to the box once, and ready the input on a Mac (no keyboard popping up on a phone)
+  const want = parseLiveRoute(location.hash)
+  if (want === sid && state.liveFocused !== location.hash + '|' + sid) {
+    state.liveFocused = location.hash + '|' + sid
+    const box = document.getElementById('live')
+    if (box) box.scrollIntoView({ block: 'start', behavior: 'auto' })
+    if (ol) ol.scrollTop = ol.scrollHeight
+    const ta = box && box.querySelector('.live-text')
+    if (ta && !ta.disabled && !(window.matchMedia && window.matchMedia('(pointer: coarse)').matches)) ta.focus({ preventScroll: true })
+  }
+  liveTick()
+}
+function liveJumpButton(thread, n) {
+  const b = thread && thread.querySelector('.live-jump')
+  if (!b) return
+  b.hidden = !(n > 0)
+  const c = b.querySelector('.live-jump-n')
+  if (c) c.textContent = n > 0 ? ' · ' + n + ' new' : ''
+}
+function liveJumpClick(btn) {
+  const thread = btn.closest('.live-thread')
+  const ol = thread && thread.querySelector('.live-log')
+  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
+  liveKeeper.seen(); liveJumpButton(thread, 0)
+}
+// The elapsed time beside "Claude is working…", every second while something is in flight.
+let liveTimer = null
+function liveTick() {
+  const els = [...document.querySelectorAll('.lv-status[data-since]')]
+  for (const el of els) {
+    const since = Number(el.dataset.since) || 0
+    const end = Number(el.dataset.final) || 0
+    const t = el.querySelector('.lvs-time')
+    if (t && since) t.textContent = elapsedText((end || Date.now()) - since)
+  }
+  const running = els.some((el) => !el.dataset.final)
+  if (running && !liveTimer) liveTimer = setInterval(() => { if (!document.querySelector('.lv-status[data-since]:not([data-final])')) { clearInterval(liveTimer); liveTimer = null } liveTick() }, 1000)
+}
+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)
+    const ol = box && box.querySelector('.live-log')
+    if (ol) ol.scrollTop = ol.scrollHeight // your own message: always follow it
+    setTimeout(() => { if (state.route && state.route.name === 's') soon() }, 1500)
+  } catch (e) { toast(e.message, 4200) } finally { await render(); const nb = document.querySelector('.live-box [data-action="live-send"]'); if (nb) { nb.removeAttribute('aria-disabled'); nb.textContent = 'Send' } }
+}
+
 // ------------------------------------------------------------ search inside transcripts (0.9.6)
 
 // Plain text + [start, end] ranges -> escaped HTML with <mark>s (ranges that
@@ -3146,7 +3314,7 @@ function parseRoute() {
 
 async function render() {
   const r = (state.route = parseRoute())
-  document.querySelectorAll('.tabs a, .topright a[data-route]').forEach((a) => { const on = a.dataset.route === (r.name === 's' ? 'board' : r.name === 'catchup' ? 'digest' : r.name); a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
+  paintNav(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3233,6 +3401,7 @@ async function refreshHealth() {
     if (h.answering) state.mayAnswer = h.answering.allowedHere !== false
     const dot = document.querySelector('#wnTab .newdot')
     if (dot) dot.hidden = !(h.whatsNew && h.whatsNew.unseen > 0)
+    paintMoreDots()
     paintSettingsDots()
   } catch (e) {
     el.className = 'health down'
@@ -3263,6 +3432,229 @@ function paintTopDot() {
   el.className = 'topdot' + (warn ? ' warn' : '')
   const why = all.flatMap((x) => x.why)
   document.getElementById('setTab').title = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
+  paintMoreDots()
+}
+
+// ------------------------------------------------------------ the rail, the bottom bar and Quick look (0.9.8)
+// From 820px up the sections sit in a rail on the left; under it, in a bottom
+// bar with the rest under More. Hover the Needs you item (or long-press it on a
+// phone, or press ↓/→ on it) for Quick look: the count and the five longest
+// waits, with Allow / Deny on permission prompts (the Needs you page's own
+// buttons, so the same checks apply and nothing is answered without a click).
+const railMode = () => window.matchMedia('(min-width: 820px)').matches
+function paintNav(r = state.route || parseRoute()) {
+  const key = navKey(r.name)
+  document.querySelectorAll('.tabs a[data-route], .topright a[data-route], #moreMenu a[data-route]').forEach((a) => { const on = a.dataset.route === key; a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
+  const more = document.getElementById('moreBtn')
+  if (more) more.classList.toggle('on', moreActive(key))
+}
+function paintMoreDots() {
+  const wn = document.querySelector('#wnTab .newdot'), st = document.querySelector('#setTab .topdot')
+  const mwn = document.querySelector('#moreMenu .newdot'), mst = document.querySelector('#moreMenu .topdot')
+  if (mwn && wn) mwn.hidden = wn.hidden
+  if (mst && st) { mst.hidden = st.hidden; mst.className = st.className }
+  const md = document.querySelector('#moreBtn .moredot')
+  if (md) { md.hidden = !((wn && !wn.hidden) || (st && !st.hidden)); md.className = 'moredot' + (st && !st.hidden && st.classList.contains('warn') ? ' warn' : '') }
+}
+
+// More (phones)
+const moreOpen = () => { const m = document.getElementById('moreMenu'); return !!m && !m.hidden }
+function closeMore(focusBtn = false) {
+  const m = document.getElementById('moreMenu'), b = document.getElementById('moreBtn')
+  if (!m || m.hidden) return
+  m.hidden = true
+  if (b) { b.setAttribute('aria-expanded', 'false'); if (focusBtn) b.focus() }
+}
+function openMore() {
+  const m = document.getElementById('moreMenu'), b = document.getElementById('moreBtn')
+  if (!m) return
+  closeQuickLook(); toggleStatus(false)
+  paintMoreDots()
+  m.hidden = false
+  if (b) b.setAttribute('aria-expanded', 'true')
+  const first = m.querySelector('a.on') || m.querySelector('a')
+  if (first) first.focus()
+}
+document.getElementById('moreBtn').addEventListener('click', () => (moreOpen() ? closeMore() : openMore()))
+document.getElementById('moreMenu').addEventListener('click', (e) => { if (e.target.closest('a')) closeMore() })
+document.getElementById('moreMenu').addEventListener('keydown', (e) => {
+  const items = [...document.querySelectorAll('#moreMenu a')]
+  const i = items.indexOf(document.activeElement)
+  if (e.key === 'Escape') { e.preventDefault(); closeMore(true) }
+  else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const n = items[(i + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length]; if (n) n.focus() }
+  else if (e.key === 'Tab') closeMore()
+})
+
+// Quick look
+const qlUi = { open: false, how: null, openT: 0, closeT: 0, suppressClick: false, model: null, seq: 0 }
+const quickLookOpen = () => qlUi.open
+function quickLookFocusables() { const p = document.getElementById('quickLook'); return p ? [...p.querySelectorAll('a[href], button:not([disabled])')] : [] }
+function paintQuickLook() {
+  const pop = document.getElementById('quickLook')
+  if (!pop || !qlUi.open) return
+  const had = pop.contains(document.activeElement) ? document.activeElement : null
+  const keep = had && (had.closest('.ql-item') ? { key: had.closest('.ql-item').dataset.key, choice: had.dataset.choice || '', main: had.classList.contains('ql-main') } : { foot: had.classList.contains('ql-foot') })
+  const model = qlUi.model || { total: Number((state.health || {}).needsYou) || 0, items: [], more: 0 }
+  pop.innerHTML = quickLookHtml(model, { mayAnswer: state.mayAnswer, pending: state.pendingAsk })
+  pop.setAttribute('aria-busy', qlUi.model ? 'false' : 'true')
+  placeQuickLook()
+  if (keep) {
+    let el = null
+    if (keep.key) { const row = [...pop.querySelectorAll('.ql-item')].find((x) => x.dataset.key === keep.key); if (row) el = keep.main ? row.querySelector('.ql-main') : row.querySelector('[data-choice="' + keep.choice + '"]:not([disabled])') }
+    else if (keep.foot) el = pop.querySelector('.ql-foot')
+    ;(el || quickLookFocusables()[0] || pop).focus()
+  }
+}
+function placeQuickLook() {
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  if (!pop || pop.hidden || !tab) return
+  if (!railMode()) { pop.style.left = ''; pop.style.top = ''; return } // the CSS puts it above the bottom bar
+  const r = tab.getBoundingClientRect(), rail = document.querySelector('.top').getBoundingClientRect()
+  pop.style.left = (Math.max(r.right, rail.right) + 8) + 'px'
+  pop.style.top = Math.max(8, Math.min(r.top - 6, window.innerHeight - 8 - pop.offsetHeight)) + 'px'
+}
+// The sessions behind the popover: what the page already has, then a fresh read.
+async function loadQuickLook() {
+  const seq = ++qlUi.seq
+  if (state.sessions && state.sessions.length && !qlUi.model) { qlUi.model = quickLookItems(state.sessions); paintQuickLook() }
+  try {
+    const { sessions, viewer } = await api('GET', '/v1/sessions?limit=200', undefined, { timeoutMs: 8000 })
+    if (seq !== qlUi.seq) return
+    if (viewer) state.mayAnswer = viewer.mayAnswer !== false
+    qlUi.model = quickLookItems(sessions || [])
+  } catch { if (!qlUi.model) qlUi.model = { total: 0, items: [], more: 0, failed: true } }
+  paintQuickLook()
+}
+function openQuickLook(how = 'hover') {
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  if (!pop || !tab) return
+  clearTimeout(qlUi.openT); clearTimeout(qlUi.closeT)
+  if (qlUi.open) { if (how !== 'hover') { qlUi.how = how; const f = quickLookFocusables()[0]; if (f) f.focus() } return }
+  closeMore(); toggleStatus(false)
+  qlUi.open = true; qlUi.how = how; qlUi.model = null
+  pop.hidden = false
+  tab.setAttribute('aria-expanded', 'true')
+  // Hover never takes focus; the keyboard and a long-press move into the card (and Tab stays inside it).
+  pop.setAttribute('aria-modal', how === 'hover' ? 'false' : 'true')
+  paintQuickLook()
+  if (how !== 'hover') { const f = quickLookFocusables()[0]; (f || pop).focus() }
+  loadQuickLook()
+}
+function closeQuickLook(focusTab = false) {
+  clearTimeout(qlUi.openT); clearTimeout(qlUi.closeT)
+  if (!qlUi.open) return
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  const inside = pop && pop.contains(document.activeElement)
+  qlUi.open = false; qlUi.seq++
+  if (pop) { pop.hidden = true; pop.innerHTML = '' }
+  if (tab) { tab.setAttribute('aria-expanded', 'false'); if (focusTab || inside) tab.focus() }
+}
+{
+  const tab = document.getElementById('needsTab'), pop = document.getElementById('quickLook')
+  const canHover = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches
+  const later = (fn, ms) => { clearTimeout(qlUi.closeT); clearTimeout(qlUi.openT); return setTimeout(fn, ms) }
+  tab.addEventListener('mouseenter', () => { if (!canHover()) return; clearTimeout(qlUi.closeT); if (!qlUi.open) qlUi.openT = later(() => openQuickLook('hover'), 280) })
+  tab.addEventListener('mouseleave', () => { clearTimeout(qlUi.openT); if (qlUi.open && qlUi.how === 'hover') qlUi.closeT = setTimeout(() => closeQuickLook(), 320) })
+  pop.addEventListener('mouseenter', () => clearTimeout(qlUi.closeT))
+  pop.addEventListener('mouseleave', () => { if (qlUi.open && qlUi.how === 'hover' && !pop.contains(document.activeElement)) qlUi.closeT = setTimeout(() => closeQuickLook(), 320) })
+  // Long-press on a touch screen; the tap that ends it doesn't navigate.
+  let lp = null
+  tab.addEventListener('pointerdown', (e) => {
+    if (e.pointerType === 'mouse') return
+    const x = e.clientX, y = e.clientY
+    clearTimeout(lp && lp.t)
+    lp = { x, y, t: setTimeout(() => { qlUi.suppressClick = true; openQuickLook('touch'); if (navigator.vibrate) try { navigator.vibrate(10) } catch {} }, 450) }
+  })
+  const cancel = () => { if (lp) { clearTimeout(lp.t); lp = null } }
+  tab.addEventListener('pointerup', cancel)
+  tab.addEventListener('pointercancel', cancel)
+  tab.addEventListener('pointermove', (e) => { if (lp && Math.hypot(e.clientX - lp.x, e.clientY - lp.y) > 10) cancel() })
+  tab.addEventListener('contextmenu', (e) => { if (qlUi.open || lp) e.preventDefault() })
+  tab.addEventListener('click', (e) => {
+    if (qlUi.suppressClick) { qlUi.suppressClick = false; e.preventDefault(); return }
+    // A second tap while it's open goes to the page, as the footer does.
+    closeQuickLook()
+  })
+  tab.addEventListener('keydown', (e) => {
+    if (['ArrowDown', 'ArrowRight', 'ArrowUp'].includes(e.key) && !e.altKey && !e.metaKey && !e.ctrlKey) { e.preventDefault(); openQuickLook('keyboard') }
+  })
+  pop.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeQuickLook(true); return }
+    if (e.key !== 'Tab') return
+    const f = quickLookFocusables()
+    if (!f.length) { e.preventDefault(); return }
+    const i = f.indexOf(document.activeElement)
+    if (e.shiftKey && i <= 0) { e.preventDefault(); f[f.length - 1].focus() }
+    else if (!e.shiftKey && (i === -1 || i === f.length - 1)) { e.preventDefault(); f[0].focus() }
+  })
+  pop.addEventListener('focusin', () => { clearTimeout(qlUi.closeT); pop.setAttribute('aria-modal', 'true') })
+  pop.addEventListener('click', (e) => { const a = e.target.closest('a[href]'); if (a) closeQuickLook() })
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && qlUi.open) closeQuickLook(true) })
+  document.addEventListener('pointerdown', (e) => {
+    if (qlUi.open && !e.target.closest('#quickLook, #needsTab')) closeQuickLook()
+    if (moreOpen() && !e.target.closest('#moreMenu, #moreBtn')) closeMore()
+  }, true)
+  window.addEventListener('hashchange', () => { closeQuickLook(); closeMore() })
+  window.addEventListener('resize', () => { placeQuickLook(); if (statusOpen()) placeStatus() })
+}
+
+// Pull to refresh (phones, 0.9.8): pull down from the top of a page and let go
+// past the line; the page reads its data again, the same as a live update (no
+// full reload unless that fails). Never from a field, the Live box or a menu.
+{
+  const ptr = document.createElement('div')
+  ptr.className = 'ptr'; ptr.id = 'ptr'; ptr.setAttribute('aria-hidden', 'true'); ptr.hidden = true
+  ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
+  document.body.appendChild(ptr)
+  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 819.98px)')
+  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
+  let pull = null, refreshing = false
+  const paint = (step) => {
+    ptr.hidden = !step || (!step.pulling && !refreshing)
+    if (ptr.hidden) return
+    ptr.style.transform = 'translate(-50%, ' + (refreshing ? 56 : step.dist) + 'px)'
+    ptr.style.setProperty('--ptr-turn', String(Math.round((step.progress || 0) * 270)) + 'deg')
+    ptr.style.opacity = refreshing ? '1' : String(Math.min(1, 0.25 + (step.progress || 0)))
+    ptr.classList.toggle('armed', !!step.armed)
+    ptr.classList.toggle('busy', refreshing)
+  }
+  async function pullRefresh() {
+    refreshing = true; paint({ pulling: true, dist: 56, progress: 1, armed: true })
+    const started = Date.now()
+    try {
+      prsUi.at = {}; projectsUi.at = 0
+      const r = state.route || parseRoute()
+      const editing = busy() || ['settings', 'setup'].includes(r.name)
+      await Promise.all([editing ? null : render(), refreshHealth()])
+    } catch { location.reload(); return }
+    await new Promise((res) => setTimeout(res, Math.max(0, 450 - (Date.now() - started)))) // long enough to see it turn
+    refreshing = false; ptr.classList.remove('busy', 'armed'); ptr.hidden = true
+  }
+  window.leftoffPullRefresh = pullRefresh
+  document.addEventListener('touchstart', (e) => {
+    if (refreshing || e.touches.length !== 1) { pull = null; return }
+    const t = e.touches[0]
+    pull = canStartPull({ coarse: coarse.matches, narrow: narrow.matches, scrollY: window.scrollY || document.scrollingElement.scrollTop, target: e.target, overlayOpen: overlayOpen() }) ? { x: t.clientX, y: t.clientY, step: null } : null
+  }, { passive: true })
+  document.addEventListener('touchmove', (e) => {
+    if (!pull || e.touches.length !== 1) return
+    const t = e.touches[0]
+    const step = pullStep(t.clientY - pull.y, t.clientX - pull.x)
+    if (!step.pulling && !pull.step) { if (t.clientY - pull.y < -4 || Math.abs(t.clientX - pull.x) > 10) pull = null; return }
+    if ((window.scrollY || 0) > 0) { pull = null; paint(null); return }
+    if (e.cancelable) e.preventDefault() // ours, not the page's rubber band or the browser's own pull
+    pull.step = step
+    paint(step)
+  }, { passive: false })
+  const end = () => {
+    if (!pull) return
+    const what = pullRelease(pull.step)
+    pull = null
+    if (what === 'refresh') pullRefresh()
+    else paint(null)
+  }
+  document.addEventListener('touchend', end, { passive: true })
+  document.addEventListener('touchcancel', () => { pull = null; if (!refreshing) paint(null) }, { passive: true })
 }
 
 // Status popover: open sessions, this Mac, the summarizer, sync, the version, the theme.
@@ -3319,6 +3711,7 @@ function placeStatus() {
   const pop = document.getElementById('statusPop'), b = document.getElementById('health')
   if (!pop || pop.hidden || !b) return
   const r = b.getBoundingClientRect(), vw = document.documentElement.clientWidth
+  if (railMode()) { pop.style.right = 'auto'; pop.style.left = (document.querySelector('.top').getBoundingClientRect().right + 8) + 'px'; pop.style.top = Math.max(8, Math.min(r.bottom - pop.offsetHeight, window.innerHeight - 8 - pop.offsetHeight)) + 'px'; return } // 0.9.8: beside the rail
   if (vw < 600) { pop.style.left = '8px'; pop.style.right = '8px'; pop.style.top = (r.bottom + 8) + 'px'; return }
   pop.style.right = 'auto'
   pop.style.top = (r.bottom + 8) + 'px'
@@ -3577,6 +3970,8 @@ document.addEventListener('input', (ev) => {
 document.addEventListener('keydown', (ev) => { if (ev.target.id === 'prs-q' && ev.key === 'Escape' && ev.target.value) { ev.preventDefault(); ev.target.value = ''; ev.target.dispatchEvent(new Event('input', { bubbles: true })) } })
 
 window.addEventListener('hashchange', () => closeActionMenu())
+const tipsUi = wireTips(document) // 0.9.8: the ⓘ tooltips (Always allow here)
+window.addEventListener('hashchange', () => tipsUi.hide())
 // 0.8.9: a session page's title is a button too (Enter or Space renames it)
 document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
@@ -3726,6 +4121,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() }
@@ -3736,6 +4143,18 @@ document.addEventListener('click', async (ev) => {
       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
@@ -3885,6 +4304,8 @@ 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 === 'live-jump') return liveJumpClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
@@ -4012,7 +4433,7 @@ document.addEventListener('click', async (ev) => {
 // Answer a permission prompt or a question from the board. The daemon hands it
 // to the waiting hook or mod; the terminal's own prompt may already have won.
 async function answerClick(btn, action) {
-  const need = btn.closest('.need')
+  const need = btn.closest('.need, .ql-item') // 0.9.8: Quick look's Allow / Deny are the same buttons
   if (!need) return
   const askId = need.dataset.ask, key = need.dataset.key
   const s = state.sessions.find((x) => x.id === need.dataset.id)
@@ -4046,6 +4467,7 @@ async function answerClick(btn, action) {
     toast(e.code === 'not_waiting' ? 'Already handled: ' + e.message : e.message, 4200)
   } finally {
     delete state.pendingAsk[key]
+    if (need.classList.contains('ql-item')) { await loadQuickLook(); refreshHealth() }
     render()
   }
 }
@@ -4361,7 +4783,7 @@ document.addEventListener('submit', async (ev) => {
 
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
-const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .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]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
 // Settings isn't redrawn by live updates: it would wipe what you're editing,
 // and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
 function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && ['settings', 'setup'].includes(state.route.name)) && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }