@leftoff/cli 0.9.8-beta.1 → 0.9.8-beta.11

package/ui/app.js

@@ -9,6 +9,14 @@ 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 { navHideStep, NAVHIDE_TYPING } from './navhide.js'
+import { openLightbox } from './lightbox.js' // 0.9.8: the image preview
+import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (pdf.js loads on the first PDF)
+import { isBlank, composerKey, isTouchUi, composerHeight } from './composer.js' // 0.9.8 the Live composer
+import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
+import { wireTips } from './tips.js'
 import { 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'
@@ -16,8 +24,15 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
+import { statusView, elapsedText } from './live-status.js'
+import { anyPending, shouldPoll, streamDead, isStale, liveSignature, wakeReason, createWake, createWatchdog, HEARTBEAT_MS, POLL_MS, AWAY_MS } from './live-wake.js' // 0.9.8 live after sleep
+import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
+import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember, closeTab, moveTab, neighbours, indexOf, sessionOfHash, keepHash, tabView, stripHtml, allTabsItems, openRowHtml, pagerHtml, swipeDir } from './tabs.js' // 0.9.8 tabs for sessions
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
+// 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
+if (typeof MutationObserver === 'function') new MutationObserver(() => lockPulses(document)).observe(document.body, { childList: true, subtree: true })
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
 const agentNames = () => [...new Set(((state.health && state.health.agents) || []).map((a) => a.display || a.name))]
@@ -108,12 +123,16 @@ async function copy(text) {
 // 0.8.7: the copy icon says it worked for a moment (a check, "Copied"), then goes back.
 function copiedMark(btn) {
   clearTimeout(btn._copied)
+  const tip = btn._tip || (btn._tip = btn.title || 'Copy resume command')
   btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.setAttribute('aria-label', 'Copied'); btn.title = 'Copied'
-  btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = 'Copy resume command' }, 1500)
+  btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = tip }, 1500)
 }
 const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
 // 0.9.8 Live link: the session's channel is listening (send it prompts from here)
-const liveBadge = (s) => (s && s.liveLink && s.liveLink.on ? ' <span class="pill live" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
+// It pulses while Claude is running a turn (liveWorking), steady when idle; lockPulses keeps redraws from restarting it.
+const liveBadge = (s) => liveBadgeHtml(s)
+// 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>')
 
@@ -177,11 +196,11 @@ function wtChips(s) {
   return h
 }
 
-function where(s) {
+function where(s, { repo = true } = {}) {
   if (s.agent) return (s.project ? '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(s.repoLabel) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc(s.repoLabel + ' · show only this project') + '">' + esc(s.repoLabel) + '</button>' : '') + agentChip(s.agent)
   const branch = s.repo && s.repo.branch
   const label = s.repoLabel || s.repoName || 'no repo'
-  return projChip(s) + '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' + wtChips(s) +
+  return projChip(s) + (repo ? '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' : '') + wtChips(s) +
     (multi() || !s.isLocal ? (() => { const sn = s.isLocal ? '' : staleNote(s.machine); return '<button type="button" class="chip machine' + (s.isLocal ? '' : ' remote') + (sn ? ' stale' : '') + '" title="' + (s.isLocal ? 'this machine' : sn ? 'showing data as of ' + esc(sn.replace(/^as of /, '')) + ': ' + esc(s.machine) + ' hasn’t synced since' : 'synced from another machine') + '" data-action="machine-emoji" data-machine="' + esc(s.machine) + '"><span class="memo">' + esc(mEmoji(s.machine)) + '</span> ' + esc(s.machine) + (sn ? ' · ' + esc(sn) : '') + '</button>' })() : '') + modelChip(s)
 }
 
@@ -380,9 +399,13 @@ function liveNote(s) {
   if (s.live === 'open' && s.liveVia === 'heartbeat' && !s.isLocal) return 'open (heartbeat)'
   return s.live === 'open' ? 'open' : ''
 }
-function goButton(s) {
+// 0.9.8: { page: true } is the session page's header, where a Go that can't run
+// is left out (its tooltip was the only place the reason showed, and the grey
+// box read as broken); a card keeps the dimmed Go and its short why.
+function goButton(s, { page = false } = {}) {
   if (s.live === 'closed') return ''
   const j = s.jump || {}
+  if (page && (state.viewerLocal === false || !j.supported)) return ''
   // Another machine's session (v0.5.2): Go runs there, through its Leftoff, when it allows it.
   if (!s.isLocal) {
     if (!j.peer) return ''
@@ -432,8 +455,12 @@ function agentCard(s) {
 // closed), a small copy icon for the resume command, and "⋯" for the rest. The
 // ⋯ menu's items ride in the card as an inert <template> (real buttons with the
 // same data-action as before), so the one click handler below runs them unchanged.
+// What Resume runs: codex resume, claude --resume, or for a Live session (0.9.8)
+// leftoff live -- --resume, so it comes back Live.
+function resumeVerb(s) { return s.codingAgent === 'codex' ? 'codex resume' : s.resumeLive ? 'leftoff live -- --resume' : 'claude --resume' }
+function resumeTip(s, lead) { return lead + ': ' + resumeVerb(s) + (s.resumeLive ? ' (it comes back Live)' : '') }
 function copyResumeIcon(s) {
-  return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="Copy resume command">' + icon('copy') + '</button>'
+  return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + '</button>'
 }
 // items: [{ action, label, icon, title, attrs }]
 // 0.9.2: an item may also be { note } (a plain line, no button) and carry a sub line.
@@ -550,7 +577,7 @@ function checkpointSplit(s) {
       '<button type="button" class="btn primary split-more" disabled aria-disabled="true" aria-label="Checkpoint length">' + icon('chevron-down') + '</button></span>'
   }
   return '<span class="split" role="group" aria-label="Checkpoint now">' +
-    '<button type="button" class="btn primary split-main" data-action="checkpoint" data-id="' + esc(s.id) + '" data-length="' + esc(def) + '" title="' + esc('Checkpoint now · ' + lengthLabel(def) + (s.isLocal ? '' : ' · written on ' + s.machine)) + '">Checkpoint now</button>' +
+    '<button type="button" class="btn primary split-main" data-action="checkpoint" data-id="' + esc(s.id) + '" data-length="' + esc(def) + '" title="' + esc('Checkpoint now · ' + lengthLabel(def) + (s.isLocal ? '' : ' · written on ' + s.machine)) + '" aria-label="Checkpoint now">' + icon('bookmark-plus') + 'Checkpoint</button>' +
     '<button type="button" class="btn primary split-more" data-action="cp-lengths" data-id="' + esc(s.id) + '" aria-label="Checkpoint length" title="Choose the length" aria-haspopup="menu" aria-expanded="false">' + icon('chevron-down') + '</button></span>'
 }
 function openLengthMenu(btn, id) {
@@ -574,15 +601,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) + '">' + titleHtml(sessionTitle(s), esc) + '</a>' +
       '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
-    '</div>' + pill(s.status) + liveBadge(s) + '</div>' +
-    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
+    '</div>' + statusPill(s) + liveBadge(s) + '</div>' +
+    '<div class="meta">' + spaceChip(s) + where(s, { repo: !titleIsWhere(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>'
 }
@@ -753,7 +780,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]))
@@ -801,6 +828,7 @@ async function viewBoard() {
   html += projectRow(spaced, pj, 'board-project')
   if (filter === 'closed') {
     html += await closedSection(f, sp)
+    if (parseRoute().name === 's') return // 0.9.8: you opened a session while the board loaded
     $app.innerHTML = banners() + html
     return closedWire()
   }
@@ -842,6 +870,7 @@ function boardSearch(q, closedHits, n) {
 // 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.
 function paintBoardKeepingSearch(h) {
+  if (parseRoute().name === 's') return // 0.9.8: a slow board answer never paints over the session you opened
   const old = document.getElementById('boardQ')
   const keep = old && document.activeElement === old ? { v: old.value, pos: old.selectionStart } : null
   $app.innerHTML = h
@@ -921,10 +950,10 @@ function resumeButton(s, viewer = {}) {
   const busy = closedUi.busy.has(s.id)
   if (s.isLocal) {
     if (!viewer.ghostty) return ''
-    return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="Open it in a new Ghostty tab: ' + (s.codingAgent === 'codex' ? 'codex resume' : 'claude --resume') + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume') + '</button>'
+    return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc(resumeTip(s, 'Open it in a new Ghostty tab')) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume') + '</button>'
   }
   if (!(s.peer && s.peer.ok)) return '' // that Mac can't be reached from here: Copy resume
-  return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc('Open it in a new Ghostty tab on ' + s.machine) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume on ' + esc(s.machine)) + '</button>'
+  return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc(resumeTip(s, 'Open it in a new Ghostty tab on ' + s.machine)) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume on ' + esc(s.machine)) + '</button>'
 }
 function closedCard(s, viewer) {
   const href = '#/s/' + encodeURIComponent(s.id)
@@ -1168,9 +1197,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.
@@ -1239,8 +1270,8 @@ async function viewAgentSession(s) {
   const name = esc(a.display || a.name)
   const hint = typeof a.replyHint === 'string' && a.replyHint.trim() ? a.replyHint.trim() : ''
   let html = '<a class="back" href="#/">← All sessions</a>'
-  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + where(s) + ' <span class="faint">' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + ' · updated ' + esc(ago(s.lastActivityAt)) + '</span></div></div>' +
-    '<div class="actions">' + agentReplyButton(a) + '</div></div>'
+  html += '<div class="pagehead s-head"><div class="s-head-main"><h1>' + esc(s.title || 'Untitled') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + where(s) + ' <span class="faint">' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + ' · updated ' + esc(ago(s.lastActivityAt)) + '</span></div></div>' +
+    '<div class="actions s-actions">' + agentReplyButton(a) + '</div></div>'
   // v0.5.6: agent.url only links the name; the reply affordance and its
   // words come from the feed (agent.reply, agent.replyHint), or nothing.
   html += '<div class="banner info"><span>Read-only. This is ' + (home ? '<a href="' + esc(home) + '" target="_blank" rel="noopener noreferrer">' + name + '</a>' : name) + '’s work, from its feed' + (a.pullsHere ? ', pulled by this Mac' : a.puller ? ', pulled by ' + esc(a.puller) : '') + (a.lastSuccessAt ? ' (last pull ' + esc(ago(a.lastSuccessAt)) + ')' : '') + '.' + (hint ? ' ' + esc(hint.charAt(0).toUpperCase() + hint.slice(1)) + (/[.!?]$/.test(hint) ? '' : '.') : '') + '</span></div>'
@@ -1261,25 +1292,117 @@ async function viewAgentSession(s) {
   $app.innerHTML = banners() + html
 }
 
+// 0.9.8: another Mac's session whose Mac is offline says so plainly, once, near the top
+function ownerOffline(s) {
+  if (!s || s.isLocal !== false || s.agent || !s.machine) return false
+  const st = window.leftoffRelay && state.relayStatus
+  const x = st && (st.macs || []).find((y) => y.machine === s.machine)
+  if (x) return !x.online
+  return !!(s.peer && s.peer.code === 'unreachable')
+}
+function ownerOfflineNote(s) {
+  if (!ownerOffline(s)) return ''
+  const m = esc(s.machine), sn = staleNote(s.machine)
+  return '<p class="owner-off" role="status">' + icon('wifi-off') + '<span>This session lives on <b>' + m + '</b>, which is offline right now. You’re seeing what it last synced' + (sn ? ' (' + esc(sn) + ')' : '') + '. Live, its transcript and Find lists come back when ' + m + ' is.</span></p>'
+}
+// 0.9.8: opening a session is instant. The tap paints the page's shell at
+// once (title and pills from the card we already have, or the whole page from
+// the last visit), then every fetch runs in parallel (the session, its Live
+// thread, spaces, projects, lists) instead of one after another; on a phone
+// through the relay each was a full round trip. A newer navigation wins: a
+// slow answer for a page you already left never paints over the one you're on.
+const sessionCache = new Map() // id -> { s, live, lists, spv }, the last few sessions you opened
+const SESSION_CACHE_MAX = 8
+function cacheSession(id, v) { sessionCache.delete(id); sessionCache.set(id, v); while (sessionCache.size > SESSION_CACHE_MAX) sessionCache.delete(sessionCache.keys().next().value) }
+const onSession = (id) => { const r = parseRoute(); return r.name === 's' && r.arg === id }
+function sessionShellHtml(s) {
+  const head = s
+    ? '<h1>' + titleHtml(sessionTitle(s), esc) + '</h1><div class="sub">' + statusPill(s) + liveBadge(s) + '</div>'
+    : '<h1 class="skel-line skel-title" aria-label="Loading"></h1>'
+  return '<a class="back" href="#/">← All sessions</a><div class="pagehead s-head s-shell" data-sid="' + esc((s && s.id) || '') + '"><div class="s-head-main">' + head + '</div></div>' +
+    '<div class="s-skel" role="status" aria-live="polite" aria-busy="true"><div class="s-skel-note"><span class="lv-spin" aria-hidden="true"></span>Opening…</div>' +
+    '<div class="skel-line"></div><div class="skel-line short"></div><div class="skel-block"></div><div class="skel-line"></div><div class="skel-line short"></div></div>'
+}
+// A selector that finds the same control again after a redraw (null: it can't be told apart).
+function focusKey(el) {
+  if (!el || !el.tagName) return null
+  if (el.id) return '#' + CSS.escape(el.id)
+  const d = el.dataset || {}
+  const keys = ['action', 'lid', 'sid', 'att', 'id', 'tab', 'submitFor'].filter((k) => d[k] != null)
+  if (!keys.length) return null
+  const attr = (k) => '[data-' + k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()) + '="' + CSS.escape(d[k]) + '"]'
+  return el.tagName.toLowerCase() + keys.map(attr).join('')
+}
+function paintSession(s, data) {
+  if (data.live && !data.live.error) liveUi.sig[s.id] = liveSignature(data.live.messages)
+  // a redraw (the live poll, a settled reply) keeps the composer focused with its caret where it was
+  const fa = document.activeElement
+  const kf = fa && fa.classList && fa.classList.contains('composer-input') && $app.contains(fa) ? { d: fa.dataset.draft, a: fa.selectionStart, b: fa.selectionEnd } : null
+  // …and any other control that had focus (a chip, a thumbnail, a button: a
+  // preview closed with Esc puts focus back on one, then a redraw replaced it)
+  const kb = !kf && fa && fa !== document.body && $app.contains(fa) ? focusKey(fa) : null
+  liveKeeper.before($app)
+  $app.innerHTML = sessionPageHtml(s, data)
+  liveAfterRender(s.id)
+  if (kf) {
+    const nt = $app.querySelector('.composer-input')
+    if (nt && nt.dataset.draft === kf.d && !nt.disabled) { nt.focus({ preventScroll: true }); try { const n = nt.value.length; nt.setSelectionRange(Math.min(kf.a, n), Math.min(kf.b, n)) } catch {} }
+  } else if (kb && !$app.contains(document.activeElement)) {
+    const hits = $app.querySelectorAll(kb)
+    if (hits.length === 1 && !hits[0].disabled) hits[0].focus({ preventScroll: true })
+  }
+  aroundWire(s.id)
+}
 async function viewSession(id) {
   if (String(id).startsWith('agent:')) return viewAgentSession(await api('GET', '/v1/sessions/' + encodeURIComponent(id)))
-  const s = await api('GET', '/v1/sessions/' + encodeURIComponent(id))
+  const showing = $app.querySelector('.s-head[data-sid="' + CSS.escape(id) + '"]') // a re-render of the page you're on: no shell
+  const cached = sessionCache.get(id)
+  const known = (cached && cached.s) || state.sessions.find((x) => x.id === id) || null
+  if (!showing) {
+    if (cached) paintSession(cached.s, cached) // the last visit, at once; fresh data replaces it below
+    else { liveKeeper.before($app); $app.innerHTML = sessionShellHtml(known) }
+  }
+  // on leftoff.dev, another Mac's session loads its data from that Mac: say so before the first call
+  const owner = (x) => { if (x && window.leftoffRelay && window.leftoffRelay.owner) window.leftoffRelay.owner(x.id, x.isLocal === false && !x.agent ? x.machine : null) }
+  owner(known)
+  const pS = api('GET', '/v1/sessions/' + encodeURIComponent(id))
+  const pLive = !known || liveWanted(known) ? fetchLive(id) : null // the thread doesn't wait for the session
+  const pLists = known && known.lists && known.lists.length ? fetchLists(id) : null
+  const pRest = Promise.all([api('GET', '/v1/spaces').catch(() => null), loadProjects()])
+  let s
+  try { s = await pS } catch (e) { if (!onSession(id)) return; throw e }
   state.sessions = state.sessions.filter((x) => x.id !== s.id).concat([s])
+  owner(s)
+  const status = s.isLocal === false && window.leftoffRelay ? window.leftoffRelay.status().then((st) => { state.relayStatus = st }).catch(() => {}) : null
+  const lists = s.lists && s.lists.length ? (pLists || fetchLists(id)) : null
+  const live = liveWanted(s) ? (pLive || fetchLive(id)) : !isLive(s) && !s.endedAt && s.live !== 'closed' ? liveHow().then(() => null) : null
+  let [[spv], v, sl] = await Promise.all([pRest, live, lists, status])
+  if (!onSession(id)) return // you moved on while this loaded
+  // a Live fetch that failed keeps the thread you had (its bubbles say "Reconnecting…"), not an empty one
+  const prev = sessionCache.get(id)
+  if (v && v.error && prev && prev.live && !prev.live.error) v = { ...prev.live, error: null }
+  const data = { spv, live: v, lists: sl }
+  if (v && !v.error) cacheSession(id, { s, ...data, live: v })
+  paintSession(s, data)
+}
+const fetchLists = (id) => api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/lists').catch(() => null)
+function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {}) {
   const branch = s.repo && s.repo.branch
-  const [spv] = await Promise.all([api('GET', '/v1/spaces').catch(() => null), loadProjects()])
   let html = '<a class="back" href="#/">← All sessions</a>'
   // 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) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
-    '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+  html += '<div class="pagehead s-head" data-sid="' + esc(s.id) + '"><div class="s-head-main">' + (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">' + titleHtml(sessionTitle(s), esc) + '</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>' + titleHtml(sessionTitle(s), esc) + '</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>' +
+    // 0.9.8: one line each, 44px, an icon and a short label; the group drops under the title as a whole when it doesn't fit beside it
+    '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + 'Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+  html += ownerOfflineNote(s) // 0.9.8: before the facts, where it's seen
   html += '<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)
+  if (isLive(s)) html += (s.needsYou ? sessionNeedsStrip(s) : '') + liveBoxHtml(s, liveV)
   html += parkRow(s)
   html += spacePicker(s, spv, 'session', s.id)
   html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent }) + '</section>'
@@ -1288,15 +1411,14 @@ async function viewSession(id) {
   html += '<section class="sfiles" id="files">' + sessionFilesSection(s, { agoFn: ago }) + '</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 (!isLive(s)) html += liveBoxHtml(s, liveV)
   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>'
   }
   // Lists (v0.5.1): its saved lists in full, the hint, and Find lists in this session
   if (s.lists && s.lists.length) {
-    const sl = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/lists').catch(() => null)
     state.listFull = {}
-    for (const l of (sl && sl.lists) || []) state.listFull[l.ref] = l
+    for (const l of (lists && lists.lists) || []) state.listFull[l.ref] = l
   }
   state.listsMayEdit = state.mayAnswer !== false
   html += '<section class="slists" id="lists">' + sessionListsSection(s) + '</section>'
@@ -1314,59 +1436,597 @@ 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)
-  $app.innerHTML = html
-  aroundWire(s.id)
+  return html
 }
 // ------------------------------------------------------------ Live link (0.9.8 beta)
 
 const isLive = (s) => !!(s && s.liveLink && s.liveLink.on)
 function sessionNeedsStrip(s) { return '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
-const LIVE_STATE = { sent: 'Sent, waiting for the session', received: 'Received by the session', failed: 'Didn’t arrive' }
-function liveEntry(m) {
-  const who = m.from === 'claude' ? 'Claude' : m.from === 'event' ? 'Event' + (m.source ? ' · ' + m.source : '') : 'You' + (m.where && !/^on this machine/.test(m.where) ? ' · ' + m.where : '')
-  const st = m.from === 'claude' ? '' : '<span class="lv-state ' + esc(m.state || '') + '">' + esc(m.state === 'failed' ? (m.errorText || LIVE_STATE.failed) : LIVE_STATE[m.state] || '') + '</span>'
-  return '<li class="lv lv-' + esc(m.from) + '"><div class="lv-who">' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span>' + st + '</div><div class="lv-text">' + esc(m.text) + '</div></li>'
+// 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) {
+// Does this session's page show a Live thread (and so fetch one)?
+const liveWanted = (s) => !!(s && isLive(s) && !s.agent && s.codingAgent !== 'codex' && s.capture !== 'hooks')
+// GET the Live thread; what it says is the newest the page knows (0.9.8: the
+// time of the last good answer decides "Reconnecting…" on a pending bubble).
+async function fetchLive(id, { timeoutMs } = {}) {
+  const turns = (state.liveTurns && state.liveTurns[id]) || 20 // "Show earlier" adds 20 at a time
+  try {
+    const v = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/live' + (turns > 20 ? '?turns=' + turns : ''), null, timeoutMs ? { timeoutMs } : {})
+    noteLive(id, v)
+    return v
+  } catch (e) { return { messages: [], error: e.message } }
+}
+function liveBoxHtml(s, v) {
   if (s.agent || s.codingAgent === 'codex' || s.capture === 'hooks') return ''
   if (!isLive(s)) {
     if (s.endedAt || s.live === 'closed') return ''
-    const how = await liveHow()
+    const how = state.liveHow
     return '<section class="live-box off" aria-label="Live link"><div class="live-head"><h2>Live <span class="pill soon">Beta</span></h2></div>' +
       '<p class="faint">To send this session messages from here or your phone, and answer its permission prompts, start it with <code>leftoff live</code>' +
       (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>' +
-    (msgs.length ? '<ol class="live-log" aria-live="polite">' + msgs.map(liveEntry).join('') + '</ol>' : '<p class="faint live-empty">Nothing sent yet.</p>') +
+    '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id) }) + '</ol>' +
+      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
+      '<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>' +
+    composerHtml(s, draft, may) +
     (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>'
 }
+// The Live composer: one rounded box, a textarea that starts at one line and
+// grows, and a round ↑ in its corner (dim until there's something to send).
+// No interrupt reaches Claude Code from the board, so while it works the
+// button still sends: the message waits for its next turn, as before.
+const SEND_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>'
+const CLIP_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m21.4 11.1-8.9 8.9a5.5 5.5 0 0 1-7.8-7.8l8.9-8.9a3.7 3.7 0 0 1 5.2 5.2l-8.9 8.9a1.8 1.8 0 0 1-2.6-2.6l8.2-8.2"/></svg>'
+const FILE_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>'
+function composerHtml(s, draft, may) {
+  const kbd = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter'
+  const atts = attachList(s.id)
+  const off = !may || (isBlank(draft) && !atts.length)
+  return '<div class="composer live-row' + (may ? '' : ' off') + (atts.length ? ' has-atts' : '') + '" data-sid="' + esc(s.id) + '">' +
+    '<div class="att-chips" aria-label="Attachments"' + (atts.length ? '' : ' hidden') + '>' + atts.map(chipHtml).join('') + '</div>' +
+    '<textarea class="composer-input live-text" rows="1" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" autocomplete="off" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (isTouchUi(window.matchMedia) ? kbd : 'Enter ' + kbd) + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
+    // the phone's own picker (Photo Library, Take Photo, Choose File): any file
+    '<input type="file" class="att-input" multiple tabindex="-1" aria-hidden="true" data-sid="' + esc(s.id) + '"' + (may ? '' : ' disabled') + '>' +
+    '<button type="button" class="composer-attach" data-action="attach" data-id="' + esc(s.id) + '" aria-label="Attach" title="Attach photos or files"' + (may ? '' : ' disabled') + '><span class="composer-clip">' + CLIP_IC + '</span></button>' +
+    '<button type="button" class="composer-send" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '" aria-label="Send" title="Send"' + (off ? ' disabled' : '') + '><span class="composer-dot">' + SEND_IC + '</span></button></div>'
+}
+
+// ------------------------------------------------------------ attachments (0.9.8, ui/attach.js)
+// Each file uploads to the Mac that runs the session as soon as you attach it;
+// the chips live here (not in the DOM), so a redraw of the page keeps them.
+const attachUi = { by: new Map(), urls: new Map(), blobs: new Map(), loading: new Map(), seq: 0, running: 0, queue: [] }
+const attachList = (sid) => attachUi.by.get(sid) || []
+function chipHtml(a) {
+  const pct = a.total ? Math.min(100, Math.round((a.sent / a.total) * 100)) : 0
+  const status = a.status === 'failed' ? 'Didn’t upload' : a.status === 'done' ? fmtSize(a.size) : a.status === 'prep' ? 'Preparing…' : fmtSize(a.size) + ' · ' + pct + '%'
+  return '<div class="att-chip ' + esc(a.status) + '" data-lid="' + esc(a.lid) + '"' + (a.error ? ' title="' + esc(a.error) + '"' : '') + '>' +
+    '<button type="button" class="att-open" data-action="att-chip-open" data-lid="' + esc(a.lid) + '" aria-label="Preview ' + esc(a.name) + '">' +
+    '<span class="att-thumb">' + (a.preview ? '<img src="' + esc(a.preview) + '" alt="">' : FILE_IC) + '</span>' +
+    '<span class="att-meta"><span class="att-name" title="' + esc(a.name) + '">' + esc(shortName(a.name)) + '</span><span class="att-size">' + esc(status) + '</span></span></button>' +
+    (a.status === 'failed' ? '<button type="button" class="att-btn att-retry" data-action="att-retry" data-lid="' + esc(a.lid) + '" aria-label="Retry ' + esc(a.name) + '" title="Retry">↻</button>' : '') +
+    '<button type="button" class="att-btn att-x" data-action="att-remove" data-lid="' + esc(a.lid) + '" aria-label="Remove ' + esc(a.name) + '" title="Remove">×</button>' +
+    (a.status === 'up' || a.status === 'prep' ? '<span class="att-bar" aria-hidden="true"><span data-pct="' + pct + '"></span></span>' : '') + '</div>'
+}
+// The board's CSP takes no inline styles: a progress bar's width is set here.
+function barWidths(root) { for (const b of root.querySelectorAll('.att-bar > span[data-pct]')) b.style.width = b.dataset.pct + '%' }
+// Redraw one session's chips in place (and the ↑'s state).
+function paintChips(sid) {
+  const box = document.querySelector('.composer[data-sid="' + CSS.escape(sid) + '"]')
+  if (!box) return
+  const atts = attachList(sid)
+  const wrap = box.querySelector('.att-chips')
+  const fa = wrap.contains(document.activeElement) ? focusKey(document.activeElement) : null // a progress tick keeps the chip you're on focused
+  wrap.innerHTML = atts.map(chipHtml).join('')
+  if (fa) { const t = wrap.querySelector(fa); if (t) t.focus({ preventScroll: true }) }
+  barWidths(wrap)
+  wrap.hidden = !atts.length
+  box.classList.toggle('has-atts', !!atts.length)
+  const ta = box.querySelector('.composer-input')
+  if (ta) syncComposer(ta)
+}
+function addFiles(sid, files, { pasted = false } = {}) {
+  const list = Array.from(files || []).filter(Boolean)
+  if (!sid || !list.length) return
+  const have = attachList(sid)
+  const plan = attachPlan(list, have.length)
+  if (plan.skipped.length) toast('Not attached: ' + skippedText(plan.skipped), 4200)
+  const add = plan.take.map((f) => {
+    const file = pasted && /^image\.\w+$|^$/.test(f.name || '') ? new File([f], pastedName(f.type), { type: f.type, lastModified: Date.now() }) : f
+    return { lid: 'a' + (++attachUi.seq), sid, file, name: file.name || 'file', size: file.size, type: file.type || '', kind: attachKind(file), status: 'prep', sent: 0, total: file.size, id: null, preview: null, thumb: null, error: null }
+  })
+  if (!add.length) return
+  attachUi.by.set(sid, [...have, ...add])
+  paintChips(sid)
+  try { promoteActive() } catch {}
+  for (const a of add) startUpload(a)
+}
+function startUpload(a) {
+  a.status = 'prep'; a.error = null; a.sent = 0
+  attachUi.queue.push(a); pumpUploads()
+}
+// Three at a time: a phone on a slow line shouldn't open ten uploads at once.
+function pumpUploads() {
+  while (attachUi.running < 3 && attachUi.queue.length) {
+    const a = attachUi.queue.shift()
+    if (!attachList(a.sid).includes(a)) continue
+    attachUi.running++
+    runUpload(a).finally(() => { attachUi.running--; pumpUploads() })
+  }
+}
+async function runUpload(a) {
+  const gone = () => !attachList(a.sid).includes(a)
+  try {
+    if (!a.prepared) {
+      const p = await prepareFile(a.file)
+      a.prepared = p.file; a.thumb = p.thumb
+      a.name = p.file.name || a.name; a.size = p.file.size; a.total = p.file.size; a.type = p.file.type || a.type
+      if (attachKind(p.file) === 'image' && !a.preview && p.thumb) a.preview = 'data:image/jpeg;base64,' + p.thumb
+      // a PDF's first page, for its chip and its bubble (a few seconds at most; without it, the file icon)
+      if (attachKind(p.file) === 'pdf' && !a.thumb) {
+        const t = await Promise.race([pdfThumb(p.file), new Promise((r) => setTimeout(() => r(null), 5000))]).catch(() => null)
+        if (t) { a.thumb = t; a.preview = 'data:image/jpeg;base64,' + t }
+      }
+      if (p.note === 'heic') a.error = 'This browser can’t convert HEIC; it goes as is'
+    }
+    if (gone()) return
+    a.status = 'up'; paintChips(a.sid)
+    let last = 0
+    const f = await uploadFile({ api, sessionId: a.sid, file: a.prepared, thumb: a.thumb, isCancelled: gone,
+      onProgress: (sent, total) => { a.sent = sent; a.total = total; const t = Date.now(); if (t - last > 120 || sent >= total) { last = t; paintChips(a.sid) } } })
+    a.id = f.id; a.size = f.size; a.kind = f.kind; a.status = 'done'
+    if (a.preview) attachUi.urls.set(a.sid + '/' + f.id, a.preview) // the bubble shows it without asking the Mac
+  } catch (e) {
+    if (e.code === 'removed' || gone()) return
+    a.status = 'failed'; a.error = e.message || 'Upload failed'
+  }
+  paintChips(a.sid)
+  attachWaiters()
+}
+let attachWaitList = []
+function attachWaiters() { const w = attachWaitList; attachWaitList = []; for (const f of w) f() }
+// Wait until nothing of this session's is still uploading.
+async function uploadsSettled(sid) {
+  while (attachList(sid).some((a) => a.status === 'prep' || a.status === 'up')) await new Promise((r) => { attachWaitList.push(r); setTimeout(r, 1000) })
+}
+function removeAttachment(lid) {
+  for (const [sid, list] of attachUi.by) {
+    const a = list.find((x) => x.lid === lid)
+    if (!a) continue
+    attachUi.by.set(sid, list.filter((x) => x !== a))
+    paintChips(sid)
+    const ta = document.querySelector('.composer[data-sid="' + CSS.escape(sid) + '"] .composer-input')
+    if (ta && !isTouchUi(window.matchMedia)) ta.focus({ preventScroll: true })
+    return
+  }
+}
+function retryAttachment(lid) {
+  for (const list of attachUi.by.values()) { const a = list.find((x) => x.lid === lid); if (a) { startUpload(a); paintChips(a.sid); return } }
+}
+// The composer a drop or a paste is for: the session page's own (enabled).
+function composerFor(el) {
+  const box = (el && el.closest && el.closest('.composer')) || document.querySelector('#app .composer[data-sid]')
+  return box && !box.classList.contains('off') ? box : null
+}
+document.addEventListener('change', (ev) => {
+  const inp = ev.target
+  if (!inp || !inp.classList || !inp.classList.contains('att-input')) return
+  addFiles(inp.dataset.sid, inp.files)
+  inp.value = '' // the same file can be picked again
+})
+document.addEventListener('paste', (ev) => {
+  const t = ev.target
+  const inComposer = t && t.classList && t.classList.contains('composer-input')
+  if (!inComposer && t && t.closest && t.closest('input, textarea, [contenteditable]')) return
+  const cd = ev.clipboardData
+  const files = cd ? Array.from(cd.files || []).length ? Array.from(cd.files) : Array.from(cd.items || []).filter((i) => i.kind === 'file').map((i) => i.getAsFile()).filter(Boolean) : []
+  if (!files.length) return
+  const box = composerFor(inComposer ? t : null)
+  if (!box) return
+  ev.preventDefault()
+  addFiles(box.dataset.sid, files, { pasted: true })
+})
+{
+  // Drag files onto the session page: the box lights up; drop attaches.
+  const hasFiles = (e) => !!(e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files'))
+  let leaveT = 0
+  const lit = (on) => { const b = document.querySelector('#app .composer[data-sid]'); if (b) b.classList.toggle('att-drop', on) }
+  document.addEventListener('dragover', (e) => { if (!hasFiles(e) || !composerFor(null)) return; e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; lit(true); clearTimeout(leaveT); leaveT = setTimeout(() => lit(false), 300) })
+  document.addEventListener('drop', (e) => {
+    if (!hasFiles(e)) return
+    const box = composerFor(null)
+    e.preventDefault() // never let a stray drop navigate away from the board
+    lit(false)
+    if (box) addFiles(box.dataset.sid, e.dataTransfer.files)
+  })
+}
+// A sent message's attachments in its bubble: thumbnails (tap for full size) or file chips.
+function attBubbleHtml(atts, sid) {
+  return '<div class="lv-atts">' + atts.map((a) => {
+    const s0 = a.sessionId || sid, key = s0 + '/' + a.id
+    const label = esc(a.name) + ' · ' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '')
+    const data = ' data-action="att-open" data-sid="' + esc(s0) + '" data-att="' + esc(a.id) + '" data-name="' + esc(a.name) + '" data-kind="' + esc(a.kind) + '" data-thumb="' + (a.thumb === false ? '0' : '1') + '" data-size="' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '') + '"'
+    if (a.kind === 'image') { const u = attachUi.urls.get(key); return '<button type="button" class="lv-att lv-att-img"' + data + ' aria-label="Open ' + esc(a.name) + '" title="' + label + '"><img alt="' + esc(a.name) + '" data-att-thumb="' + esc(key) + '"' + (u ? ' src="' + esc(u) + '"' : '') + '></button>' }
+    const firstPage = a.kind === 'pdf' && a.thumb !== false ? '<img alt="" data-att-thumb="' + esc(key) + '"' + (attachUi.urls.get(key) ? ' src="' + esc(attachUi.urls.get(key)) + '"' : '') + '>' : '' // its first page, when there is one
+    return '<button type="button" class="lv-att lv-att-file"' + data + ' aria-label="Open ' + esc(a.name) + '" title="' + label + '"><span class="att-thumb' + (firstPage ? ' att-thumb-pdf' : '') + '">' + FILE_IC + firstPage + '</span><span class="att-meta"><span class="att-name">' + esc(a.name) + '</span><span class="att-size">' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '') + '</span></span></button>'
+  }).join('') + '</div>'
+}
+// Thumbnails come from the Mac once, then from memory. data: URLs, because the
+// board's CSP allows images from itself and data: only (no blob:).
+const blobToDataUrl = (b) => new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => resolve(r.result); r.onerror = () => reject(r.error || new Error('unreadable')); r.readAsDataURL(b) })
+function attData(sid, id, { thumb = false } = {}) {
+  const key = sid + '/' + id + (thumb ? '' : '#full')
+  if (attachUi.urls.has(key)) return Promise.resolve({ url: attachUi.urls.get(key), blob: attachUi.blobs.get(key) || null })
+  if (attachUi.loading.has(key)) return attachUi.loading.get(key)
+  const p = fetchAttachment({ api, sessionId: sid, id, thumb }).then(async (b) => { const url = await blobToDataUrl(b); attachUi.urls.set(key, url); attachUi.blobs.set(key, b); return { url, blob: b } }).finally(() => attachUi.loading.delete(key))
+  attachUi.loading.set(key, p)
+  return p
+}
+function hydrateAttThumbs() {
+  for (const img of document.querySelectorAll('#app img[data-att-thumb]:not([src])')) {
+    const key = img.dataset.attThumb
+    if (attachUi.urls.has(key)) { img.src = attachUi.urls.get(key); continue }
+    const btn = img.closest('.lv-att'); if (!btn || btn.dataset.loading) continue
+    btn.dataset.loading = '1'
+    const thumb = btn.dataset.thumb !== '0'
+    attData(btn.dataset.sid, btn.dataset.att, { thumb }).then(({ url }) => { attachUi.urls.set(key, url); for (const i of document.querySelectorAll('#app img[data-att-thumb="' + CSS.escape(key) + '"]')) i.src = url })
+      .catch((e) => {
+        // a PDF sent without a first-page picture (before 0.9.8, or it couldn't be drawn) keeps its icon
+        if (btn.dataset.kind === 'pdf' && e && e.code === 'no_thumb') { for (const i of btn.querySelectorAll('img[data-att-thumb]')) i.remove(); return }
+        btn.classList.add('gone'); btn.title = 'Not on that Mac any more'
+      })
+  }
+}
+// An image opens full screen (ui/lightbox.js) with the other pictures of the
+// same message beside it; the thumbnail shows (blurred) while the full one
+// comes from the Mac. Text and other files keep the docs viewer.
+const attSel = (sid, id) => '.lv-att[data-sid="' + CSS.escape(sid) + '"][data-att="' + CSS.escape(id) + '"]'
+function openImageAttachment(btn) {
+  const group = btn.closest('.lv-atts')
+  const btns = group ? [...group.querySelectorAll('.lv-att[data-kind="image"]')] : [btn]
+  const items = btns.map((b) => {
+    const im = b.querySelector('img'), sid = b.dataset.sid, id = b.dataset.att
+    const full = attachUi.urls.get(sid + '/' + id + '#full')
+    return { name: b.dataset.name || 'image', sizeLabel: b.dataset.size || '', thumb: (im && im.getAttribute('src')) || null, url: full || null,
+      w: im && im.naturalWidth, h: im && im.naturalHeight, load: () => attData(sid, id).then((r) => r.url) }
+  })
+  const sid = btn.dataset.sid, id = btn.dataset.att
+  openLightbox({ items, index: Math.max(0, btns.indexOf(btn)), from: btn.querySelector('img') || btn, refocus: () => document.querySelector('#app ' + attSel(sid, id)) || btn })
+}
+// A chip in the box before it's sent: the picture from the file you picked
+// (a data: URL; the CSP takes no blob:), the other pictures in the box beside it.
+// Any other file: its name and size in the docs viewer (nothing to download yet).
+function openChip(lid) {
+  let a = null
+  for (const list of attachUi.by.values()) { a = list.find((x) => x.lid === lid); if (a) break }
+  if (!a) return
+  const chip = document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]')
+  const isImg = (x) => x.kind === 'image' && (x.preview || /^image\/(png|jpeg|gif|webp|bmp|svg\+xml|avif)$/i.test((x.prepared || x.file || {}).type || ''))
+  const refocus = () => document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]')
+  if (a.kind === 'pdf') {
+    const f = a.prepared || a.file
+    openPdfView({ name: a.name, sizeLabel: fmtSize(a.size), download: false, from: chip, refocus, load: async () => ({ bytes: new Uint8Array(await f.arrayBuffer()) }) })
+    return
+  }
+  if (isImg(a)) {
+    const list = attachList(a.sid).filter(isImg)
+    const items = list.map((x) => ({ name: x.name, sizeLabel: fmtSize(x.size), thumb: x.preview || null, download: false,
+      load: () => { if (!x.fullUrl) x.fullUrl = blobToDataUrl(x.prepared || x.file); return x.fullUrl } }))
+    openLightbox({ items, index: Math.max(0, list.indexOf(a)), from: (chip && chip.querySelector('img')) || chip, refocus: () => document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]') })
+    return
+  }
+  const el = docViewerEl()
+  el.querySelector('.dv-title').textContent = a.name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-dl').hidden = true
+  docUi.r = null; docUi.name = a.name
+  el.querySelector('.dv-body').innerHTML = '<div class="empty att-chip-info"><b>' + esc(a.name) + '</b><br>' + esc(fmtSize(a.size)) + (a.status === 'done' ? ' · goes with your next message' : a.status === 'failed' ? ' · didn’t upload' : ' · uploading') + '</div>'
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  el.querySelector('.dv-x') && el.querySelector('.dv-x').focus({ preventScroll: true })
+}
+// A PDF opens in its own full-screen preview (ui/pdfview.js): the pages drawn
+// from the file the Mac sends back (the same chunked read as a picture).
+function openPdfAttachment(btn) {
+  const sid = btn.dataset.sid, id = btn.dataset.att
+  openPdfView({ name: btn.dataset.name || 'file.pdf', sizeLabel: btn.dataset.size || '', from: btn,
+    load: async () => { const r = await attData(sid, id); return { bytes: new Uint8Array(await r.blob.arrayBuffer()), url: r.url } },
+    refocus: () => document.querySelector('#app ' + attSel(sid, id)) || btn })
+}
+async function openAttachment(btn) {
+  const sid = btn.dataset.sid, id = btn.dataset.att, name = btn.dataset.name || 'file', kind = btn.dataset.kind
+  if (kind === 'image') return openImageAttachment(btn)
+  if (kind === 'pdf') return openPdfAttachment(btn)
+  const el = docViewerEl()
+  el.querySelector('.dv-title').textContent = name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-dl').hidden = true
+  const body = el.querySelector('.dv-body')
+  body.innerHTML = '<div class="empty">Opening…</div>'
+  docUi.r = null; docUi.name = name
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  try {
+    const { url: u, blob } = await attData(sid, id)
+    if (el.hidden) return
+    const dl = '<a class="btn" href="' + esc(u) + '" download="' + esc(name) + '">' + icon('download') + 'Download</a>'
+    if (kind === 'image') body.innerHTML = '<div class="att-full"><img src="' + esc(u) + '" alt="' + esc(name) + '"></div><div class="att-full-actions">' + dl + '</div>'
+    else if (kind === 'text') { const t = blob ? await blob.text() : ''; body.innerHTML = '<pre class="att-text">' + esc(t.slice(0, 200000)) + '</pre><div class="att-full-actions">' + dl + '</div>' }
+    else body.innerHTML = '<div class="empty">' + esc(name) + '</div><div class="att-full-actions">' + dl + '</div>'
+  } catch (e) { if (!el.hidden) body.innerHTML = '<div class="empty">Couldn’t open it: ' + esc(e.message) + '</div>' }
+}
+// Fit the box to its words (one line up to COMPOSER_MAX_LINES, then it scrolls) and light the ↑ when there's something to send.
+function fitComposer(ta) {
+  if (!ta || !ta.isConnected) return
+  const cs = getComputedStyle(ta)
+  const lh = parseFloat(cs.lineHeight) || 22
+  const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0)
+  const keep = ta.scrollTop
+  ta.style.height = 'auto'
+  const r = composerHeight({ scrollHeight: ta.scrollHeight, lineHeight: lh, padY })
+  ta.style.height = r.height + 'px'
+  ta.style.overflowY = r.scroll ? 'auto' : 'hidden'
+  if (r.scroll) ta.scrollTop = keep
+  syncComposer(ta)
+}
+function syncComposer(ta) {
+  const box = ta && ta.closest('.composer')
+  const btn = box && box.querySelector('.composer-send')
+  if (!btn || btn.classList.contains('sending')) return
+  btn.disabled = ta.disabled || (isBlank(ta.value) && !attachList(box.dataset.sid).length)
+}
+document.addEventListener('input', (ev) => { if (ev.target && ev.target.classList && ev.target.classList.contains('composer-input')) fitComposer(ev.target) })
+// Enter on a Mac sends (Shift+Enter: a new line); on a phone Return is a new line. ⌘↵ is the shared handler above.
+document.addEventListener('keydown', (ev) => {
+  const ta = ev.target
+  if (ev.key !== 'Enter' || !ta || !ta.classList || !ta.classList.contains('composer-input')) return
+  if (ev.metaKey || ev.ctrlKey) return // ⌘↵ / Ctrl+↵: the Needs-you handler presses the button
+  if (composerKey(ev, { touch: isTouchUi(window.matchMedia) }) !== 'send') return
+  ev.preventDefault()
+  const cb = ta.closest('.composer')
+  if (ev.repeat || (isBlank(ta.value) && !(cb && attachList(cb.dataset.sid).length))) return
+  const box = ta.closest('.live-box')
+  const btn = box && box.querySelector('[data-submit-for="live"]')
+  if (!btn || btn.disabled) return
+  const last = Number(box.dataset.kbdAt || 0)
+  if (Date.now() - last < 1500) return
+  box.dataset.kbdAt = String(Date.now())
+  btn.click()
+})
+// A tap anywhere on the box (its padding) is a tap in the textarea.
+document.addEventListener('click', (ev) => { const b = ev.target && ev.target.classList && ev.target.classList.contains('composer') ? ev.target : null; const ta = b && b.querySelector('.composer-input'); if (ta && !ta.disabled) ta.focus() })
+// Pressing ↑ keeps the keyboard up (the textarea keeps focus) on a phone.
+document.addEventListener('mousedown', (ev) => { if (ev.target && ev.target.closest && ev.target.closest('.composer-send') && document.activeElement && document.activeElement.classList.contains('composer-input')) ev.preventDefault() })
+// After the session page is drawn: keep the thread (scroll, diffed entries), show "Jump to latest".
+function liveAfterRender(sid) {
+  for (const ta of $app.querySelectorAll('.composer-input')) fitComposer(ta)
+  const r = liveKeeper.after($app)
+  hydrateAttThumbs(); barWidths($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._stick = atBottom(ol)
+    // the button follows the scroll: there whenever you're away from the bottom, gone once you're back
+    ol.addEventListener('scroll', () => { ol._stick = atBottom(ol); liveJumpButton(r.thread, liveKeeper.unseen) }, { passive: true })
+    // at the bottom, the thread stays there while an entry grows (a streamed reply, a code block, late fonts)
+    if (typeof ResizeObserver === 'function') {
+      ol._ro = new ResizeObserver(() => { if (ol._stick && !atBottom(ol, 2)) ol.scrollTop = ol.scrollHeight; liveJumpButton(r.thread, liveKeeper.unseen) })
+    }
+  }
+  if (ol && ol._ro) { ol._ro.disconnect(); ol._ro.observe(ol); for (const li of ol.children) ol._ro.observe(li) }
+  if (ol && r.follow) ol._stick = 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()
+}
+// "Jump to latest ↓" shows whenever the thread is scrolled away from its bottom (with the
+// count of what came in since, when there is any), and hides once you're back at the bottom.
+function liveJumpButton(thread, n) {
+  const b = thread && thread.querySelector('.live-jump')
+  if (!b) return
+  const ol = thread.querySelector('.live-log')
+  const v = jumpView(ol, n)
+  if (!v.show && n > 0) liveKeeper.seen()
+  // on its way down after a tap: don't flash back up mid-scroll
+  if (v.show && thread.dataset.jumping && Date.now() < Number(thread.dataset.jumping)) return
+  b.hidden = !v.show
+  const c = b.querySelector('.live-jump-n')
+  if (c) c.textContent = v.count
+  b.setAttribute('aria-label', v.label)
+}
+function liveJumpClick(btn) {
+  const thread = btn.closest('.live-thread')
+  const ol = thread && thread.querySelector('.live-log')
+  const smooth = !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+  if (thread) thread.dataset.jumping = String(Date.now() + (smooth ? 900 : 0))
+  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: smooth ? 'smooth' : 'auto' })
+  liveKeeper.seen()
+  btn.hidden = true
+  const c = btn.querySelector('.live-jump-n'); if (c) c.textContent = ''
+  // land exactly at the bottom even if something grew mid-scroll, then the button follows the scroll again
+  setTimeout(() => { if (!thread || !thread.isConnected) return; delete thread.dataset.jumping; if (ol && !atBottom(ol, 4)) ol.scrollTop = ol.scrollHeight; liveJumpButton(thread, liveKeeper.unseen) }, smooth ? 950 : 0)
+}
+// "Show earlier": 20 more turns, the view stays on what you were reading (the keeper anchors it).
+async function liveEarlierClick(btn) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  if (!sid) return
+  state.liveTurns = state.liveTurns || {}
+  state.liveTurns[sid] = ((state.liveTurns[sid]) || 20) + 20
+  btn.setAttribute('aria-busy', 'true'); btn.textContent = 'Loading…'
+  await render()
+}
+// The elapsed time beside "Claude is working…", every second while something is in flight.
+// 0.9.8: when what the page shows is older than STALE_MS (the stream died, the
+// phone slept), a running bubble says "Reconnecting…" instead of a timer.
+let liveTimer = null
+function liveTick() {
+  const els = [...document.querySelectorAll('.lv-status[data-since]')]
+  const box = document.querySelector('#live[data-id]')
+  const stale = !!box && isStale(liveUi.okAt[box.dataset.id], Date.now())
+  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)
+    if (!end) {
+      el.classList.toggle('lv-reconnecting', stale)
+      let hint = el.querySelector('.lvs-hint')
+      if (stale && !hint) { hint = document.createElement('span'); hint.className = 'lvs-hint'; hint.textContent = 'Reconnecting…'; (el.querySelector('.lvs-line') || el).append(hint) }
+      if (hint) hint.hidden = !stale
+    }
+  }
+  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)
+}
+
+// 0.9.8: Live keeps up after the phone sleeps (ui/live-wake.js). Every Live
+// fetch notes when it answered and whether a message is still going; while
+// one is, on a visible page, the thread is fetched again every POLL_MS
+// whatever the event stream does.
+const liveUi = { okAt: {}, sig: {}, pending: {}, polling: false }
+function noteLive(id, v) {
+  if (!v || v.error) return
+  liveUi.okAt[id] = Date.now()
+  liveUi.pending[id] = anyPending(v.messages)
+}
+const liveOnScreen = () => { const r = state.route; const box = document.querySelector('#live[data-id]'); return r && r.name === 's' && box && box.dataset.id === r.arg ? r.arg : null }
+// Fetch the thread and diff it into the page, even while you type (busy()
+// holds full redraws back, never the thread). A turn that ended also redraws
+// the rest of the page (the pill stops pulsing) once you're not busy.
+async function refreshLive(reason) {
+  const id = liveOnScreen()
+  if (!id || liveUi.polling) return false
+  liveUi.polling = true; liveUi.triedAt = Date.now()
+  let v
+  try { v = await fetchLive(id, { timeoutMs: 8000 }) } finally { liveUi.polling = false }
+  if (!v || v.error || liveOnScreen() !== id) { liveTick(); return false }
+  const s = state.sessions.find((x) => x.id === id)
+  const sig = liveSignature(v.messages)
+  const before = liveUi.sig[id]
+  liveUi.sig[id] = sig
+  if (s && before !== sig) {
+    const box = document.querySelector('#live')
+    const cur = box && box.querySelector('.live-thread')
+    if (cur) {
+      const tmp = document.createElement('div')
+      tmp.innerHTML = liveBoxHtml(s, v)
+      const fresh = tmp.querySelector('.live-thread')
+      if (fresh) {
+        const next = cur.nextSibling
+        liveKeeper.before(box)
+        box.insertBefore(fresh, next)
+        const r = liveKeeper.after(box)
+        hydrateAttThumbs()
+        if (r) liveJumpButton(r.thread, liveKeeper.unseen)
+      }
+    }
+    const c = sessionCache.get(id); if (c) c.live = v
+    if (!liveUi.pending[id] && !busy()) soon() // settled: the pill, the tab, the card
+  }
+  liveTick()
+  return true
+}
+// The safety net, and the stream's watchdog, on one slow timer.
+const streamDog = createWatchdog()
+const wakeGate = createWake()
+setInterval(() => {
+  if (document.visibilityState === 'hidden') return
+  const id = liveOnScreen()
+  if (shouldPoll({ visible: true, onLive: !!id, pending: !!(id && liveUi.pending[id]) }) && Date.now() - Math.max(liveUi.okAt[id] || 0, liveUi.triedAt || 0) >= POLL_MS - 250) refreshLive('poll')
+  if (streamDog.check() === 'dead') { connect(); refreshView('stream') }
+}, 1000)
+// Coming back (iOS: the Home Screen app returns, the screen unlocks, a
+// bfcache restore, the network returns): fetch what's on screen at once, and
+// open a new stream if the old one missed its pings.
+function refreshView(reason) {
+  if (liveOnScreen()) refreshLive(reason)
+  if (!busy() && !(state.route && ['settings', 'setup'].includes(state.route.name))) render()
+  refreshHealth()
+}
+let awayAt = 0 // when the page went to the background (hidden, or the window lost focus)
+function onWake(ev) {
+  if (ev.type === 'blur' || (ev.type === 'visibilitychange' && document.visibilityState === 'hidden')) { awayAt = awayAt || Date.now(); return }
+  const why = wakeReason(ev.type, { visibilityState: document.visibilityState, persisted: !!ev.persisted })
+  if (!why) return
+  liveTick() // a stale timer turns into "Reconnecting…" before anything else
+  const dead = !stream || stream.readyState === 2 || streamDead(streamDog.lastAt, Date.now(), HEARTBEAT_MS + 2000)
+  const away = awayAt ? Date.now() - awayAt : 0
+  awayAt = 0
+  // a click back into the window a moment later isn't a wake-up; coming back after a while, a restore or the network is
+  if ((why === 'focus' || why === 'visible') && away < AWAY_MS && !dead) return
+  if (!wakeGate.due()) return
+  if (why === 'pageshow-bfcache' || dead) connect()
+  refreshView(why)
+}
+for (const t of ['pageshow', 'focus', 'blur', 'online']) window.addEventListener(t, onWake)
+document.addEventListener('visibilitychange', onWake)
 async function liveSendClick(btn) {
   const box = btn.closest('.live-box')
   const ta = box && box.querySelector('.live-text')
+  const sid = btn.dataset.id
   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…'
+  if (!text && !attachList(sid).length) { if (ta) ta.focus(); return }
+  if (btn.disabled || btn.classList.contains('sending')) return
+  const hadFocus = !!(ta && document.activeElement === ta)
+  btn.classList.add('sending'); btn.disabled = true; btn.setAttribute('aria-busy', 'true'); btn.setAttribute('aria-label', '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 = ''
+    // 0.9.8: attachments still uploading go first; one that failed waits for you (retry or remove)
+    await uploadsSettled(sid)
+    const atts = attachList(sid)
+    const failed = atts.filter((a) => a.status === 'failed').length
+    if (failed) { toast(failed === 1 ? 'A file didn’t upload: retry it or remove it.' : failed + ' files didn’t upload: retry or remove them.', 4200); return }
+    const ids = atts.filter((a) => a.status === 'done' && a.id).map((a) => a.id)
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/live', { text, ...(ids.length ? { attachments: ids } : {}) })
+    // what you typed while it went stays; what was sent goes
+    if (!ta || ta.value.trim() === text) { if (state.drafts) delete state.drafts['live:' + sid]; if (ta) { ta.value = ''; fitComposer(ta) } }
+    if (ids.length) { attachUi.by.set(sid, attachList(sid).filter((a) => !ids.includes(a.id))); paintChips(sid) }
     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 { render() }
+  } catch (e) { toast(e.message, 4200) } finally {
+    await render()
+    const nb = document.querySelector('.live-box [data-action="live-send"]')
+    if (nb) { nb.classList.remove('sending'); nb.removeAttribute('aria-busy'); nb.setAttribute('aria-label', 'Send') }
+    const nt = document.querySelector('.live-box .composer-input')
+    if (nt) { fitComposer(nt); if (hadFocus && !nt.disabled && document.activeElement !== nt) nt.focus({ preventScroll: true }) }
+  }
 }
 
 // ------------------------------------------------------------ search inside transcripts (0.9.6)
@@ -2478,6 +3138,7 @@ async function viewSettings() {
     general: '<div class="section">Needs you</div>' +
       '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a notification when a prompt or question has waited ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
       '<div class="hint">With <code>terminal-notifier</code>, a click jumps to the session.</div>' +
+      '<div class="full push-slot" data-push-slot hidden></div>' +
       '<div class="section">Appearance</div>' +
       '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>' +
       advanced('general', '<label for="f-dormant">Dormant after (min)</label><input id="f-dormant" type="number" min="1" step="1" value="' + esc(c.dormantAfterMin) + '">' +
@@ -3239,7 +3900,8 @@ 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)
+  tabsOnRoute(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3254,6 +3916,7 @@ async function render() {
     else if (r.name === 'search') await viewSearch(r.q || '')
     else if (r.name === 'setup') await viewSetup()
     else await viewBoard()
+    tabsAfterRender()
   } catch (e) {
     if (e.code === 'login_required') return showLogin()
     $app.innerHTML = '<div class="empty">Couldn’t load: ' + esc(e.message) + '</div>'
@@ -3326,6 +3989,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'
@@ -3356,6 +4020,475 @@ 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 700px 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: 700px)').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()
+  paintPush()
+  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() })
+}
+
+// ------------------------------------------------------------ tabs for sessions (0.9.8, ui/tabs.js)
+// The board is the first tab; a session opens as the one preview tab (italic)
+// that the next click replaces, and stays open once you send a Live message,
+// type there, choose Keep open or double-click its tab (⌘/Ctrl-click or a
+// middle-click opens it permanent straight away). Kept per device in
+// localStorage. By width: under 700px the Open row on the board and ‹ N of M ›
+// (or a swipe) on a session page; from 700px the strip. A width change (fold,
+// Split View, rotation) only changes the CSS: the open set, the session and
+// where you were on the page stay.
+const tabsUi = { m: parseStored(localStorage.getItem(TABS_KEY)), active: null, route: null, permanent: null, html: { strip: '', row: '', pager: '' }, anchor: null, logs: new WeakMap(), quietUntil: 0, fetchT: 0, fetchedAt: 0, scrolls: {} }
+window.leftoffTabs = { model: () => JSON.parse(serialize(tabsUi.m)) } // read by test:tabs-ui
+function setTabs(m) {
+  if (m === tabsUi.m) return
+  tabsUi.m = m
+  try { localStorage.setItem(TABS_KEY, serialize(m)) } catch {}
+}
+const tabSession = (id) => state.sessions.find((s) => s.id === id)
+const tabViews = () => tabsUi.m.tabs.map((t) => tabView(t, tabSession(t.id), { title: sessionTitle, working: (s) => liveWorking(s) }))
+function tabsOnRoute(r) {
+  const id = r.name === 's' && r.arg ? String(r.arg) : null
+  if (tabsUi.active && tabsUi.active !== id) tabsUi.scrolls[tabsUi.active] = window.scrollY || 0
+  if (id) {
+    const permanent = tabsUi.permanent === id
+    setTabs(openTab(tabsUi.m, id, { permanent, hash: keepHash(location.hash), title: (tabSession(id) && sessionTitle(tabSession(id))) || '' }))
+  }
+  tabsUi.permanent = null
+  const changed = tabsUi.active !== id || tabsUi.route !== r.name
+  tabsUi.active = id; tabsUi.route = r.name
+  document.body.dataset.route = r.name
+  paintTabs()
+  if (changed) scrollActiveTab()
+}
+function tabsAfterRender() {
+  let m = tabsUi.m
+  for (const t of m.tabs) { const s = tabSession(t.id); if (s) m = remember(m, t.id, { title: sessionTitle(s) }) }
+  setTabs(m)
+  paintTabs()
+  const back = tabsUi.active && tabsUi.restoreScroll === tabsUi.active ? tabsUi.scrolls[tabsUi.active] : null
+  tabsUi.restoreScroll = null
+  if (back != null) window.scrollTo(0, back)
+  noteAnchor()
+  // the other open tabs' pulse and dot: read the sessions again now and then while you're off the board
+  if (tabsUi.route !== 'board' && tabsUi.m.tabs.some((t) => t.id !== tabsUi.active) && Date.now() - tabsUi.fetchedAt > 15000) refreshTabSessions()
+}
+async function refreshTabSessions() {
+  tabsUi.fetchedAt = Date.now()
+  try {
+    const { sessions = [], parked = [] } = await api('GET', '/v1/sessions?limit=200')
+    const fresh = new Map(sessions.concat(parked).map((s) => [s.id, s]))
+    state.sessions = state.sessions.map((s) => (s.id !== tabsUi.active && fresh.has(s.id) ? fresh.get(s.id) : s)).concat([...fresh.values()].filter((s) => !state.sessions.some((x) => x.id === s.id)))
+    paintTabs()
+  } catch {}
+}
+function paintTabs() {
+  const views = tabViews()
+  const strip = document.getElementById('tabStrip'), row = document.getElementById('openRow'), pager = document.getElementById('tabPager')
+  if (!strip) return
+  const sh = stripHtml(views, tabsUi.active, tabsUi.route === 'board', esc)
+  if (sh !== tabsUi.html.strip) {
+    const sc = strip.querySelector('.tab-scroll'), left = sc ? sc.scrollLeft : 0
+    const had = strip.contains(document.activeElement) ? (document.activeElement.dataset.tab || document.activeElement.dataset.tabClose || document.activeElement.dataset.tabKeep || document.activeElement.id) : null
+    strip.innerHTML = sh; tabsUi.html.strip = sh
+    const nsc = strip.querySelector('.tab-scroll'); if (nsc) nsc.scrollLeft = left
+    if (had) { const el = strip.querySelector('[data-tab="' + CSS.escape(had) + '"], [data-tab-close="' + CSS.escape(had) + '"], [data-tab-keep="' + CSS.escape(had) + '"], #' + CSS.escape(had)); if (el) el.focus({ preventScroll: true }) }
+  }
+  strip.hidden = false
+  const rh = openRowHtml(views, esc)
+  if (rh !== tabsUi.html.row) { const c = row.querySelector('.openrow-chips'), l = c ? c.scrollLeft : 0; row.innerHTML = rh; tabsUi.html.row = rh; const nc = row.querySelector('.openrow-chips'); if (nc) nc.scrollLeft = l }
+  row.hidden = !rh
+  const ph = tabsUi.active ? pagerHtml(tabsUi.m, tabsUi.active, views, esc) : ''
+  if (ph !== tabsUi.html.pager) { pager.innerHTML = ph; tabsUi.html.pager = ph }
+  pager.hidden = !ph
+}
+function scrollActiveTab() {
+  const el = document.querySelector('#tabStrip .tab-cell.on'), sc = document.querySelector('#tabStrip .tab-scroll')
+  if (!el || !sc) return
+  const r = el.getBoundingClientRect(), b = sc.getBoundingClientRect()
+  if (r.left < b.left) sc.scrollLeft -= b.left - r.left + 8
+  else if (r.right > b.right) sc.scrollLeft += r.right - b.right + 8
+}
+function keepTab(id) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+function closeTabNow(id) {
+  const { model, next } = closeTab(tabsUi.m, id, tabsUi.active)
+  setTabs(model)
+  delete tabsUi.scrolls[id]
+  if (tabsUi.active === String(id)) {
+    const t = next && model.tabs.find((x) => x.id === next)
+    if (t) tabsUi.restoreScroll = t.id
+    location.hash = t ? tabView(t).href : '#/'
+  } else paintTabs()
+}
+function goTab(href) {
+  const id = sessionOfHash(href)
+  if (id) tabsUi.restoreScroll = id
+  if (location.hash === href) render(); else location.hash = href
+}
+// ⌘/Ctrl-click or a middle-click on any session link: open it as a permanent tab (here, not a new browser tab)
+function sessionLinkId(a) { return a && a.getAttribute && sessionOfHash(a.getAttribute('href') || '') }
+document.addEventListener('click', (e) => {
+  const a = e.target.closest && e.target.closest('a[href^="#/s/"]')
+  if (!a || !(e.metaKey || e.ctrlKey) || e.button !== 0) return
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault(); e.stopPropagation()
+  if (indexOf(tabsUi.m, id) >= 0) setTabs(promote(tabsUi.m, id)); else tabsUi.permanent = id
+  if (location.hash === a.getAttribute('href')) render(); else location.hash = a.getAttribute('href')
+}, true)
+document.addEventListener('mousedown', (e) => { if (e.button === 1 && e.target.closest && e.target.closest('a[href^="#/s/"], #tabStrip .tab-cell')) e.preventDefault() }) // no autoscroll
+document.addEventListener('auxclick', (e) => {
+  if (e.button !== 1 || !e.target.closest) return
+  const cell = e.target.closest('#tabStrip .tab-cell')
+  if (cell) { e.preventDefault(); closeTabNow(cell.dataset.tabId); return } // middle-click a tab: close it
+  const a = e.target.closest('a[href^="#/s/"]')
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault()
+  if (indexOf(tabsUi.m, id) >= 0) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+  else { setTabs(openTab(tabsUi.m, id, { permanent: true })); paintTabs() } // opened in the background, the way a middle-click does
+})
+document.addEventListener('click', (e) => {
+  if (!e.target.closest) return
+  const close = e.target.closest('[data-tab-close]')
+  if (close) { e.preventDefault(); return closeTabNow(close.dataset.tabClose) }
+  const keep = e.target.closest('[data-tab-keep]')
+  if (keep) { e.preventDefault(); return keepTab(keep.dataset.tabKeep) }
+  const go = e.target.closest('[data-tab-go]')
+  if (go) { e.preventDefault(); return goTab(go.dataset.tabGo) }
+  const all = e.target.closest('#tabAll')
+  if (all) { e.preventDefault(); return openActionMenu(all, allTabsItems(tabViews(), tabsUi.active), { title: 'Open sessions' }) }
+  const t = e.target.closest('#tabStrip a[data-tab], #openRow a[data-tab], #tabPager a[data-tab]')
+  if (t && !e.metaKey && !e.ctrlKey && t.dataset.tab !== 'board') { e.preventDefault(); goTab(t.getAttribute('href')) }
+})
+document.addEventListener('dblclick', (e) => { const t = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (t) { e.preventDefault(); keepTab(t.dataset.tabId) } })
+// Working in a session keeps its tab: a Live message, typing there, answering Claude there
+const promoteActive = () => { if (tabsUi.active && tabsUi.route === 's') { const m = promote(tabsUi.m, tabsUi.active); if (m !== tabsUi.m) { setTabs(m); paintTabs() } } }
+for (const ev of ['input', 'change', 'submit']) document.addEventListener(ev, (e) => { if (e.target && $app.contains(e.target) && e.target.type !== 'search') promoteActive() }, true)
+document.addEventListener('click', (e) => { if (e.target.closest && $app.contains(e.target) && e.target.closest('[data-action="live-send"], .live-box [data-action], .need [data-choice], [data-action="ask-answer"], [data-action="rename"]')) promoteActive() }, true)
+// Drag a tab to reorder
+{
+  let dragId = null
+  document.addEventListener('dragstart', (e) => { const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; dragId = c.dataset.tabId; c.classList.add('dragging'); try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', dragId) } catch {} })
+  document.addEventListener('dragover', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; e.preventDefault(); document.querySelectorAll('#tabStrip .drop-before').forEach((x) => x.classList.remove('drop-before')); c.classList.add('drop-before') })
+  document.addEventListener('drop', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (c) { e.preventDefault(); const to = indexOf(tabsUi.m, c.dataset.tabId); const from = indexOf(tabsUi.m, dragId); setTabs(moveTab(tabsUi.m, dragId, from < to ? to - 1 : to)); paintTabs() } })
+  document.addEventListener('dragend', () => { dragId = null; document.querySelectorAll('#tabStrip .dragging, #tabStrip .drop-before').forEach((x) => x.classList.remove('dragging', 'drop-before')) })
+}
+// Phones: swipe left / right on a session page for the next / previous open session
+{
+  let sw = null
+  const narrowQ = window.matchMedia('(max-width: 699.98px)')
+  const scrollsSideways = (el) => { for (let n = el; n && n !== document.body; n = n.parentElement) { if (n.scrollWidth > n.clientWidth + 2 && /(auto|scroll)/.test(getComputedStyle(n).overflowX)) return true } return false }
+  document.addEventListener('touchstart', (e) => {
+    sw = null
+    if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
+    const t = e.target
+    if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .lightbox, .pdfview, .tabs, .moremenu') || scrollsSideways(t)) return
+    sw = { x: e.touches[0].clientX, y: e.touches[0].clientY, at: Date.now() }
+  }, { passive: true })
+  document.addEventListener('touchend', (e) => {
+    if (!sw || !e.changedTouches.length) return
+    const p = e.changedTouches[0]
+    const dir = swipeDir(p.clientX - sw.x, p.clientY - sw.y, Date.now() - sw.at)
+    sw = null
+    if (!dir || (window.getSelection && String(window.getSelection()))) return
+    const n = neighbours(tabsUi.m, tabsUi.active)
+    const to = dir === 'next' ? n.next : n.prev
+    if (!to) return
+    const t = tabsUi.m.tabs.find((x) => x.id === to)
+    document.body.classList.remove('swipe-next', 'swipe-prev'); void document.body.offsetWidth
+    document.body.classList.add('swipe-' + dir); setTimeout(() => document.body.classList.remove('swipe-' + dir), 260)
+    goTab(tabView(t).href)
+  }, { passive: true })
+}
+// A width change keeps your place: the element at the top of the page stays at
+// the top, and a Live chat that was at its newest stays there.
+function anchorY() {
+  let y = 0
+  for (const el of [document.querySelector('.top'), document.getElementById('tabStrip'), document.getElementById('tabPager')]) {
+    if (!el) continue
+    const cs = getComputedStyle(el); if (cs.display === 'none' || !/(fixed|sticky)/.test(cs.position)) continue
+    const r = el.getBoundingClientRect(); if (r.top <= 1 && r.bottom < innerHeight / 2) y = Math.max(y, r.bottom)
+  }
+  return y
+}
+function noteAnchor() {
+  if (Date.now() < tabsUi.quietUntil) return
+  const y = anchorY() + 6, m = $app.getBoundingClientRect()
+  if (m.bottom < y) { tabsUi.anchor = null; return }
+  let el = document.elementFromPoint(Math.max(m.left + 24, Math.min(m.left + m.width / 2, innerWidth - 24)), y)
+  if (!el || !$app.contains(el) || el === $app) { const kids = [...$app.querySelectorAll('h1, h2, h3, p, li, .card, .fact, .lv-msg, section, div')]; el = kids.find((k) => { const r = k.getBoundingClientRect(); return r.bottom > y && r.height > 0 }) || null }
+  tabsUi.anchor = el ? { el, top: el.getBoundingClientRect().top, scrollY: window.scrollY } : null
+}
+function keepPlace() {
+  const a = tabsUi.anchor
+  tabsUi.quietUntil = Date.now() + 250
+  if (a && a.el.isConnected && a.scrollY > 0) window.scrollBy(0, a.el.getBoundingClientRect().top - a.top)
+  document.querySelectorAll('.live-log').forEach((log) => { const st = tabsUi.logs.get(log); if (st && st.bottom) log.scrollTop = log.scrollHeight })
+}
+{
+  let raf = 0
+  window.addEventListener('scroll', () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; noteAnchor() }) }, { passive: true })
+  document.addEventListener('scroll', (e) => { const log = e.target; if (log && log.classList && log.classList.contains('live-log') && Date.now() >= tabsUi.quietUntil) tabsUi.logs.set(log, { bottom: log.scrollHeight - log.scrollTop - log.clientHeight < 24 }) }, true)
+  let lay = layoutFor(innerWidth)
+  window.addEventListener('resize', () => {
+    keepPlace()
+    const now = layoutFor(innerWidth)
+    if (now !== lay) { lay = now; document.body.dataset.layout = now; scrollActiveTab() }
+  })
+  document.body.dataset.layout = lay
+}
+
+// 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: 699.98px)')
+  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .lightbox:not([hidden]), .pdfview: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 })
+}
+
+// Hide the nav on scroll (phones, 0.9.8): under 700px the top row and the bottom
+// bar slide away while you scroll down and come back when you scroll up, reach
+// the top or the very bottom (ui/navhide.js). Only your own scrolling hides
+// them: a route change, the ‹ › pager or a swipe shows them and holds them until
+// you next touch, wheel or key; typing, a menu or a sheet keeps them shown. The
+// page never reflows: the top row stays in the flow and the bar is an overlay
+// over padding that stays.
+{
+  const narrowQ = window.matchMedia('(max-width: 699.98px)')
+  const top = document.querySelector('.top')
+  let st = { hidden: false, anchor: 0 }, raf = 0, held = true
+  const typing = () => { const a = document.activeElement; return !!(a && a !== document.body && a.matches && a.matches(NAVHIDE_TYPING)) }
+  const overlay = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .lo-backdrop, .doc-viewer:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden]), .emoji-sheet-wrap, .relay-screen:not([hidden])')
+  const apply = (hidden) => {
+    if (hidden && top) document.documentElement.style.setProperty('--top-h', top.offsetHeight + 'px')
+    document.body.classList.toggle('nav-hidden', hidden)
+  }
+  const read = () => {
+    raf = 0
+    const se = document.scrollingElement || document.documentElement
+    const y = window.scrollY || se.scrollTop || 0
+    const next = navHideStep(st, { y, max: se.scrollHeight - window.innerHeight, blocked: held || !narrowQ.matches || typing() || overlay() })
+    if (next.hidden !== st.hidden) apply(next.hidden)
+    st = next
+  }
+  const soon = () => { if (!raf) raf = requestAnimationFrame(read) }
+  // no layout read here: this runs on every route change, ahead of the page's own render
+  const showNav = (hold = true) => { if (hold) held = true; const was = st.hidden; st = { hidden: false, anchor: NaN }; if (was) apply(false) }
+  window.addEventListener('scroll', soon, { passive: true })
+  for (const ev of ['touchstart', 'wheel', 'keydown']) window.addEventListener(ev, () => { held = false }, { passive: true, capture: true })
+  window.addEventListener('hashchange', () => showNav(true))
+  document.addEventListener('focusin', (e) => { if (typing() || (top && top.contains(e.target))) showNav(false) })
+  document.addEventListener('click', soon, { passive: true, capture: true }) // a menu or sheet just opened: back they come
+  narrowQ.addEventListener('change', () => showNav(false))
+  window.leftoffNav = { show: () => showNav(true), hidden: () => document.body.classList.contains('nav-hidden') }
 }
 
 // Status popover: open sessions, this Mac, the summarizer, sync, the version, the theme.
@@ -3412,6 +4545,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'
@@ -3639,11 +4773,27 @@ document.addEventListener('keydown', (e) => {
 
 // A card opens its session's page from anywhere on it, except its buttons,
 // links, fields and selected text (0.4.3: the timeline was too hidden).
+// 0.9.8: the tap shows at once (a pressed card with a spinner); the page's
+// shell follows in the same frame (viewSession).
+function cardOpening(c) {
+  for (const x of document.querySelectorAll('.card.opening')) if (x !== c) x.classList.remove('opening')
+  c.classList.add('opening')
+  setTimeout(() => { if (c.isConnected) c.classList.remove('opening') }, 4000)
+}
+document.addEventListener('pointerdown', (ev) => {
+  const c = ev.target.closest && ev.target.closest('.card[data-href]')
+  if (!c || ev.button > 0 || ev.target.closest('button, input, lo-select, lo-combo, textarea, label, summary, [data-action]')) return
+  const a = ev.target.closest('a')
+  if (a && !/^#\/s\//.test(a.getAttribute('href') || '')) return // a repo chip, a PR link: not opening the session
+  cardOpening(c)
+}, { passive: true })
+document.addEventListener('pointercancel', () => { for (const x of document.querySelectorAll('.card.opening')) x.classList.remove('opening') }, true)
 document.addEventListener('click', (ev) => {
   const c = ev.target.closest('.card[data-href]')
   if (!c || ev.defaultPrevented || ev.target.closest('a, button, input, lo-select, lo-combo, textarea, label, summary, [data-action]')) return
   if (String(window.getSelection && window.getSelection()).trim()) return
   if (ev.metaKey || ev.ctrlKey) { window.open(c.dataset.href, '_blank'); return }
+  cardOpening(c)
   location.hash = c.dataset.href
 })
 
@@ -3670,6 +4820,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).
@@ -4003,6 +5155,13 @@ 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 === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) inp.click(); return }
+    if (action === 'att-remove') return removeAttachment(btn.dataset.lid)
+    if (action === 'att-retry') return retryAttachment(btn.dataset.lid)
+    if (action === 'att-open') return openAttachment(btn)
+    if (action === 'att-chip-open') return openChip(btn.dataset.lid)
+    if (action === 'live-jump') return liveJumpClick(btn)
+    if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
@@ -4130,7 +5289,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)
@@ -4164,6 +5323,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()
   }
 }
@@ -4479,7 +5639,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)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
+const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
 // 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) }
@@ -4487,16 +5647,21 @@ let stream = null
 function connect() {
   if (stream) { try { stream.close() } catch {} }
   const es = stream = new EventSource('/v1/stream')
+  const again = connect.opened // a reconnect: events may have been missed while it was down
+  streamDog.opened()
+  // 0.9.8: every event and the daemon's ping say the stream is alive (ui/live-wake.js)
+  es.addEventListener('ping', () => { if (stream === es) streamDog.seen() })
   es.addEventListener('prs.updated', () => { prsUi.at = {} }) // 0.8.5: the PR page reads again on its next paint
   es.addEventListener('projects.updated', () => { projectsUi.at = 0 }) // 0.9.0
-  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated']) es.addEventListener(t, soon)
+  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'projects.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated', 'prs.updated']) es.addEventListener(t, () => { if (stream === es) streamDog.seen(); soon() })
   // v0.5.8: standup text prefetched for a digest is stale once spaces or the digest change
   for (const t of ['spaces.updated', 'digest.created', 'checkpoint.created']) es.addEventListener(t, () => { digestUi.standups = {} })
   es.addEventListener('model.pull', (ev) => { try { onPull(JSON.parse(ev.data)) } catch {} })
   // A daemon that restarted (an upgrade, a folder move) comes back on the same
   // port; if the browser gave up on the stream, open a new one.
   es.onerror = () => { document.getElementById('health').className = 'health down'; if (es.readyState === 2 && stream === es) setTimeout(() => { if (stream === es) connect() }, 3000) }
-  es.onopen = () => refreshHealth()
+  let opens = 0
+  es.onopen = () => { if (stream !== es) return; streamDog.seen(); refreshHealth(); if (again || opens++) refreshView('reconnect'); connect.opened = true }
 }
 
 document.addEventListener('change', async (ev) => {
@@ -4605,3 +5770,6 @@ connect()
 // The home-screen app's service worker (v0.4.6): it only serves an offline page
 // when the Mac can't be reached; it caches no API data and no board pages.
 if ('serviceWorker' in navigator && window.isSecureContext) navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {})
+// 0.9.8: phone notifications. The one per-device button (More on a phone,
+// Settings → General everywhere); the service worker shows the pushes.
+mountPush({ api })