@leftoff/cli 0.9.8-beta.2 → 0.9.8-beta.21

package/ui/app.js

@@ -5,13 +5,20 @@ import { icon } from './icons.js'
 import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey, openNameSheet } from './picker.js'
 import { SETTINGS, settingsKeyFor } from './settings-nav.js'
 import { mountWizard, shouldAutoOpen } from './wizard.js'
+import { shouldAutoTour, startTour } from './tour.js' // 0.9.8 the product tour
 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 { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
@@ -19,11 +26,20 @@ 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, cardPills, foldsAsEmpty, entryHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } 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: {} }
+// 0.9.8: drafts the update bar's Refresh carried over (ui/update-bar.js)
+const carried = takeCarry()
+if (carried) Object.assign(state.drafts, carried.drafts)
+let updateBar = null
 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))]
 
@@ -113,12 +129,14 @@ 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) => (cardPills(s).live ? ' <span class="pill live-pill" 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) : '' }
 
@@ -184,11 +202,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)
 }
 
@@ -387,9 +405,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 ''
@@ -439,8 +461,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.
@@ -557,7 +583,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) {
@@ -581,10 +607,10 @@ 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(sessionTitle(s)) + '</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>' + statusPill(s) + liveBadge(s) + '</div>' +
-    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' && !cardPills(s).live ? ' · no prompt yet' : '') + '</span>' +
+    '<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>' +
@@ -808,11 +834,13 @@ 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()
   }
   html += repoRow(inSpace, f)
   html += boardSearch(bq, closedHits, list.length)
+  if ((state.boardQ || '').trim() !== bq) return // you typed on while this one loaded: the newer search paints
   if (bq) {
     if (list.length) html += '<div class="grid mt">' + list.map(card).join('') + '</div>'
     paintBoardKeepingSearch(banners() + html)
@@ -846,38 +874,63 @@ function boardSearch(q, closedHits, n) {
       (closedHits ? ' <button type="button" class="linkish" data-action="closed-search" data-q="' + esc(q) + '">' + esc(closedHits + ' closed ' + (closedHits === 1 ? 'match' : 'matches')) + ' →</button>' : '') +
       ' <a class="linkish tx-board-link" href="#/search?q=' + encodeURIComponent(q) + '">' + icon('message-square') + 'Search what was said →</a></div>' : '') + '</div>'
 }
-// A repaint from a live update (or the 30 s refresh) while you type in the
-// search box keeps the box focused, with what you typed and the caret.
+// A repaint from a live update (or the 30 s refresh, or your own typing's
+// search) never rebuilds the search box: everything around it is replaced and
+// the box itself stays the same element, so the caret, a selection, a word
+// being composed and the focus are exactly as you left them. (Rebuilding it
+// and putting the caret back moved the caret while you typed: the typing's
+// own search put back where the caret was when it started, after you'd typed on.)
 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
+  const row = old && old.closest('.board-search-row')
+  if (row && row.parentNode === $app) {
+    const tpl = document.createElement('template')
+    tpl.innerHTML = h
+    const nrow = tpl.content.querySelector('.board-search-row')
+    const nbox = nrow && nrow.querySelector('#boardQ')
+    if (nbox && nrow.parentNode === tpl.content) {
+      const kids = [...tpl.content.childNodes], at = kids.indexOf(nrow)
+      while ($app.firstChild && $app.firstChild !== row) $app.removeChild($app.firstChild)
+      while (row.nextSibling) $app.removeChild(row.nextSibling)
+      row.before(...kids.slice(0, at))
+      row.after(...kids.slice(at + 1))
+      // the note under the box (n matches, closed matches) follows the new answer
+      for (const n of [...row.childNodes]) if (!n.contains(old)) row.removeChild(n)
+      for (const n of [...nrow.childNodes]) if (!n.contains(nbox)) row.appendChild(n)
+      // the words change only when you aren't typing (the address changed, Esc cleared it)
+      if (document.activeElement !== old && !boardQTimer && old.value !== nbox.value) old.value = nbox.value
+      return
+    }
+  }
+  const keep = old && document.activeElement === old ? { v: old.value, a: old.selectionStart, b: old.selectionEnd, d: old.selectionDirection } : null
   $app.innerHTML = h
   if (!keep) return
   const q = document.getElementById('boardQ')
   if (!q) return
   if (q.value !== keep.v) q.value = keep.v
-  q.focus(); try { q.setSelectionRange(keep.pos, keep.pos) } catch {}
+  q.focus({ preventScroll: true }); try { q.setSelectionRange(keep.a, keep.b, keep.d || 'none') } catch {}
 }
 let boardQTimer = null
 function boardSearchWire() {
   const q = document.getElementById('boardQ')
-  if (!q) return
+  if (!q || q.dataset.wired) return // the same box across repaints: wired once
+  q.dataset.wired = '1'
   q.addEventListener('input', () => {
     clearTimeout(boardQTimer)
     boardQTimer = setTimeout(async () => {
-      const pos = q.selectionStart
+      boardQTimer = null
+      if (!q.isConnected) return
       state.boardQ = q.value
       try { history.replaceState(null, '', hashFor(state.boardFilter || { repos: [], status: null })) } catch {}
       state.route = parseRoute()
-      await viewBoard()
-      const again = document.getElementById('boardQ')
-      if (again) { again.focus(); try { again.setSelectionRange(pos, pos) } catch {} }
+      await viewBoard() // the box isn't rebuilt, so the caret stays wherever you've typed to since
     }, 160)
   })
   q.addEventListener('keydown', (ev) => {
     if (ev.key === 'Escape' && q.value) { ev.preventDefault(); q.value = ''; q.dispatchEvent(new Event('input')) }
     // 0.9.6: Enter (Search on the phone's keyboard) opens the full results, transcripts included
-    else if (ev.key === 'Enter' && q.value.trim() && !ev.isComposing) { ev.preventDefault(); clearTimeout(boardQTimer); location.hash = '#/search?q=' + encodeURIComponent(q.value.trim()) }
+    else if (ev.key === 'Enter' && q.value.trim() && !ev.isComposing) { ev.preventDefault(); clearTimeout(boardQTimer); boardQTimer = null; location.hash = '#/search?q=' + encodeURIComponent(q.value.trim()) }
   })
 }
 
@@ -928,10 +981,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)
@@ -1248,8 +1301,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>'
@@ -1270,42 +1323,133 @@ 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(sessionTitle(s)) + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
-    : '<h1>' + esc(sessionTitle(s)) + '</h1>') + '<div class="sub">' + statusPill(s) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? (s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource + ' title') : '') + '</div></div>' +
-    '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+  html += '<div class="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>' + (s.liveResumeCommand ? '<button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(s.liveResumeCommand) + '" title="Exit the session in its terminal, then run this to bring it back Live">' + icon('copy') + 'Copy Live 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>'
+  html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent, open: prsUi.open, details: prsUi.details }) + '</section>'
   // 0.7.0: steps handed back to you, and the docs, plans and artifacts it made
   html += '<section class="stodos" id="todos">' + sessionTodosSection(s, { agoFn: ago, mayEdit: state.mayAnswer !== false }) + '</section>'
   html += '<section class="sfiles" id="files">' + sessionFilesSection(s, { agoFn: ago }) + '</section>'
   // 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>'
@@ -1323,10 +1467,7 @@ async function viewSession(id) {
   const empties = s.checkpoints.filter((cp) => cp.doubt === 'empty') // 0.9.2
   if (empties.length) html += '<details class="tl-doubt"><summary>' + empties.length + ' empty checkpoint' + (empties.length === 1 ? '' : 's') + ' set aside: no messages were found when ' + (empties.length === 1 ? 'it was' : 'they were') + ' written</summary><div class="timeline">' + cpTimeline(empties, null) + '</div></details>'
   html += answeredList(s)
-  liveKeeper.before($app)
-  $app.innerHTML = html
-  liveAfterRender(s.id)
-  aroundWire(s.id)
+  return html
 }
 // ------------------------------------------------------------ Live link (0.9.8 beta)
 
@@ -1349,17 +1490,28 @@ 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>'
+      (how && how.line ? ' (or <code>' + esc(how.line) + '</code>)' : '') + '. Claude Code asks once to load the channel; channels are a research preview.</p>' +
+      (s.liveResumeCommand ? '<p class="faint">Already running? Exit it in its terminal, then paste this to bring it back Live:</p><div class="live-resume-row"><code class="mono">' + esc(s.liveResumeCommand) + '</code><button type="button" class="copy-float" data-action="copy-cmd" data-cmd="' + esc(s.liveResumeCommand) + '" aria-label="Copy Live resume" data-tip="Copy">' + icon('copy') + '</button></div>' : '') + '</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]) || ''
@@ -1368,17 +1520,343 @@ async function liveSection(s) {
   if (lastClaude) markLiveSeen(s.id, lastClaude.at)
   return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
     '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
-      msgs.map((m) => entryHtml(m, { esc, ago, md: renderDoc, now })).join('') + '</ol>' +
+      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')
@@ -1386,8 +1864,16 @@ function liveAfterRender(sid) {
   liveJumpButton(r.thread, liveKeeper.unseen)
   if (ol && !ol.dataset.wired) {
     ol.dataset.wired = '1'
-    ol.addEventListener('scroll', () => { if (atBottom(ol)) { liveKeeper.seen(); liveJumpButton(r.thread, 0) } }, { passive: true })
+    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) {
@@ -1400,48 +1886,179 @@ function liveAfterRender(sid) {
   }
   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
-  b.hidden = !(n > 0)
+  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 = n > 0 ? ' · ' + n + ' new' : ''
+  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')
-  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
-  liveKeeper.seen(); liveJumpButton(thread, 0)
+  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 { await render(); const nb = document.querySelector('.live-box [data-action="live-send"]'); if (nb) { nb.removeAttribute('aria-disabled'); nb.textContent = 'Send' } }
+  } 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)
@@ -1604,6 +2221,11 @@ async function togglePr(url, { retry = false } = {}) {
   const was = prsUi.open.has(url)
   if (was && !retry) prsUi.open.delete(url); else prsUi.open.add(url)
   const repaint = () => {
+    if (state.route && state.route.name === 's') { // 0.9.8: the session page's PRs open in place too
+      const s = state.sessions.find((x) => x.id === state.route.arg), sec = document.getElementById('prs')
+      if (s && sec) sec.innerHTML = sessionPrsSection(s, { mayEdit: !s.agent, open: prsUi.open, details: prsUi.details })
+      return
+    }
     const d = prsUi.data[prsUi.view]
     const r = prRows(d).find((x) => x.pr.url === url)
     const el = [...document.querySelectorAll('article.prrow[data-pr]')].find((a) => a.dataset.pr === url)
@@ -1617,7 +2239,7 @@ async function togglePr(url, { retry = false } = {}) {
   try { res = await api('GET', '/v1/prs/detail?url=' + encodeURIComponent(url) + (retry ? '&fresh=1' : ''), undefined, { timeoutMs: 30000 }) }
   catch (e) { if (e.code === 'login_required') throw e; res = { ok: false, code: 'failed' } }
   prsUi.details[url] = { ...res, at: Date.now() }
-  if (state.route && state.route.name === 'prs') repaint()
+  if (state.route && (state.route.name === 'prs' || state.route.name === 's')) repaint()
 }
 function setPrsFilter(f) {
   const h = prsHash(prsUi.view, f)
@@ -1678,29 +2300,67 @@ async function viewTimeline() {
   $app.innerHTML = html
 }
 
-function renderMd(md, { spaces = [] } = {}) {
+// 0.9.8: a digest line may end in "<!-- s:<id> -->", its session: the title
+// links there and Start here gets that session's Go / Resume.
+const MD_SID = /\s*<!-- s:(\S+?) -->\s*$/
+function briefAction(id, sessions, viewer) {
+  const open = '<a class="btn sh-open" href="#/s/' + encodeURIComponent(id) + '" aria-label="Open the session">Open</a>'
+  const s = sessions && sessions.get(id)
+  if (!s) return open
+  let b = ''
+  // 0.9.8: closed: Resume opens it in a new tab where it can, else (on the Mac) copies the resume command
+  if (s.live === 'closed' || s.status === 'ended') b = resumeButton(s, viewer || {}) || (s.agent || !s.cwd || (viewer && viewer.local === false) || state.viewerLocal === false ? '' : '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy the resume command">' + icon('copy') + 'Resume</button>')
+  else { const g = goButton(s); b = g && !/disabled/.test(g) ? g : '' }
+  return b || open
+}
+
+function renderMd(md, { spaces = [], sessions = null, viewer = null } = {}) {
   const body = md.replace(/^---\n[\s\S]*?\n---\n/, '')
   const inline = (t) => esc(t).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>').replace(/(^|[^\w*])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')  // not inside snake_case names (clutch_hockey)
   const out = []
-  let inList = false, inSec = false
+  let inList = false, inSec = false, inFin = false, seenH2 = false, inUnf = false
+  const closeList = () => { if (inList) { out.push(inList === 'ol' ? '</ol>' : '</ul>'); inList = false } if (inFin) { out.push('</details>'); inFin = false } }
+  const openList = (kind, cls) => { if (inList !== kind) { if (inList) out.push(inList === 'ol' ? '</ol>' : '</ul>'); out.push('<' + kind + (cls ? ' class="' + cls + '"' : '') + '>'); inList = kind } }
+  const href = (id) => '#/s/' + encodeURIComponent(id)
   // v0.5.8: each "## <space>" opens a section with its own Copy for standup;
   // other "## " headings (Lists, Top of mind) are whole-folder sections.
+  // 0.9.8: "## Start here" is the brief's own section, never hidden by a space.
   const openSec = (h) => {
     if (inSec) out.push('</section>')
     inSec = true
-    if (spaces.includes(h)) {
+    if (h === 'Start here') out.push('<section class="start-sec"><h2>' + inline(h) + '</h2>')
+    else if (spaces.includes(h)) {
       out.push('<section class="space-sec" data-space="' + esc(h) + '"><div class="space-head"><h2>' + esc(h) + '</h2>' +
         '<button type="button" class="btn standup-btn' + (h === 'Work' ? ' primary' : '') + '" data-action="standup-copy" data-space="' + esc(h) + '">' + icon('clipboard') + 'Copy for standup</button></div>')
     } else out.push('<section class="other-sec"><h2>' + inline(h) + '</h2>')
   }
-  for (const line of body.split('\n')) {
+  for (const raw of body.split('\n')) {
+    const mid = raw.match(MD_SID)
+    const id = mid ? mid[1] : null
+    const line = mid ? raw.slice(0, mid.index) : raw
+    // 0.9.8: Start here: "1. <step> — **Title** (repo)"
+    const st = /^\d+\. /.test(line) && line.match(/^\d+\. (.*?) — \*\*(.+?)\*\*(?: \(([^)]*)\))?$/)
+    if (st) {
+      openList('ol', 'start')
+      const t = id ? '<a href="' + href(id) + '">' + inline(st[2]) + '</a>' : inline(st[2])
+      out.push('<li' + (id ? ' data-sid="' + esc(id) + '"' : '') + '><div class="sh-main"><span class="sh-step">' + inline(st[1]) + '</span><span class="sh-sess">' + t + (st[3] ? ' <span class="sh-repo">' + esc(st[3]) + '</span>' : '') + '</span></div>' +
+        (id ? '<div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>' : '') + '</li>')
+      continue
+    }
     if (/^- /.test(line)) {
-      if (!inList) { out.push('<ul>'); inList = true }
+      openList('ul')
       // Digest items read "- **Title** (repo · branch) — state": tag the repo so the view can filter.
       const m = line.match(/^- \*\*.*?\*\* \(([^)·]+?)(?: · [^)]*)?\) — /)
+      const attrs = (m ? ' data-repo="' + esc(m[1].trim()) + '"' : '') + (id ? ' data-sid="' + esc(id) + '"' : '')
+      // 0.9.8: "- **Title** (repo · state) — You were …; left off …." with its
+      // session: the title links to it, the sentence under it, the tags quiet.
+      const bi = id && line.match(/^- \*\*(.+?)\*\* \(([^)]*)\) — (.*)$/)
+      // 0.9.8: an Unfinished one is closed, so it has its Resume beside it
+      if (bi && inUnf) { out.push('<li class="bi unf"' + attrs + '><div class="bi-body"><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span></div><div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>'); continue }
+      if (bi) { out.push('<li class="bi"' + attrs + '><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span>'); continue }
       // v0.5.7: the "(repo · branch · machine)" part is set small so the title leads on a phone.
       const li = inline(line.slice(2)).replace(/^(<strong>.*?<\/strong>) (\([^)]*\))( — )/, '$1 <span class="where">$2</span>$3')
-      out.push('<li' + (m ? ' data-repo="' + esc(m[1].trim()) + '"' : '') + '>' + li); continue
+      out.push('<li' + attrs + '>' + li); continue
     }
     if (/^\s{2,}\S/.test(line) && inList) {
       // "Stopped at: … Next: …" is two lines, each with its label.
@@ -1709,13 +2369,17 @@ function renderMd(md, { spaces = [] } = {}) {
       else out.push('<span class="sub">' + inline(t) + '</span>')
       continue
     }
-    if (inList) { out.push('</ul>'); inList = false }
+    closeList()
+    if (/^#{1,3} /.test(line)) inUnf = /^### Unfinished \(\d+\)\s*$/.test(line)
     if (/^# /.test(line)) out.push('<h1>' + inline(line.slice(2)) + '</h1>')
-    else if (/^## /.test(line)) { if (spaces.length) openSec(line.slice(3).trim()); else out.push('<h2>' + inline(line.slice(3)) + '</h2>') }
+    else if (/^## /.test(line)) { seenH2 = true; const h = line.slice(3).trim(); if (spaces.length || h === 'Start here') openSec(h); else { if (inSec) { out.push('</section>'); inSec = false } out.push('<h2>' + inline(h) + '</h2>') } }
+    // 0.9.8: Finished folds away (older digests' "Finished or closed" too)
+    else if (/^### Finished(?: or closed)? \(\d+\)\s*$/.test(line)) { out.push('<details class="fin"><summary>' + inline(line.slice(4).replace(/ or closed/, '')) + '</summary>'); inFin = true }
     else if (/^### /.test(line)) out.push('<h3>' + inline(line.slice(4)) + '</h3>')
-    else if (line.trim()) out.push('<p>' + inline(line) + '</p>')
+    // 0.9.8: the Yesterday / Today opener, above the first section
+    else if (line.trim()) out.push(seenH2 ? '<p>' + inline(line) + '</p>' : '<p class="lede">' + inline(line).replace(/^(Yesterday|Today):/, '<b>$1:</b>') + '</p>')
   }
-  if (inList) out.push('</ul>')
+  closeList()
   if (inSec) out.push('</section>')
   return out.join('\n')
 }
@@ -1726,6 +2390,81 @@ function shortDay(iso) {
   return isNaN(d) ? iso : d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }).replace(',', '')
 }
 
+// The past-digests calendar (0.9.8): one month at a time, Sunday first. A day
+// with a digest is a link (the shared one, else a Mac's own from before one
+// digest a day); the rest are plain numbers. Opens on the picked digest's
+// month; next stops at this month, prev at the first month with a digest.
+const monthOf = (iso) => String(iso).slice(0, 7)
+const localDay = (t = new Date()) => t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0')
+function shiftMonth(ym, by) {
+  const [y, m] = ym.split('-').map(Number)
+  const d = new Date(y, m - 1 + by, 1)
+  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0')
+}
+function digestCalendar() {
+  const { days = [], pick = null } = digestUi.cal || {}
+  const today = localDay()
+  const max = monthOf(today)
+  const min = days.length ? days.map((x) => monthOf(x.day)).sort()[0] : max
+  let ym = digestUi.month || max
+  if (ym > max) ym = max
+  if (ym < min) ym = min
+  digestUi.month = ym
+  const [y, m] = ym.split('-').map(Number)
+  const first = new Date(y, m - 1, 1)
+  const label = first.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const by = new Map(days.map((x) => [x.day, x.d]))
+  const prev = shiftMonth(ym, -1), next = shiftMonth(ym, 1)
+  const name = (x) => new Date(x + '-01T12:00:00').toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const navBtn = (to, ok, dir) => '<button type="button" class="cal-nav" data-action="digest-month" data-to="' + to + '"' + (ok ? '' : ' disabled') + ' aria-label="' + (dir < 0 ? 'Previous month, ' : 'Next month, ') + esc(name(to)) + '">' + icon(dir < 0 ? 'chevron-left' : 'chevron-right') + '</button>'
+  // phones fold it to one week (the picked day's) until you open the month
+  const open = !!digestUi.calOpen
+  let h = '<div class="cal-head">' + navBtn(prev, prev >= min, -1) + '<span class="cal-month" aria-live="polite">' + esc(label) + '</span>' +
+    '<button type="button" class="cal-month cal-fold" data-action="digest-cal-fold" aria-expanded="' + open + '" aria-label="' + esc(label) + (open ? ', show one week' : ', show the whole month') + '">' + esc(label) + icon('chevron-down') + '</button>' + navBtn(next, next <= max, 1) + '</div>'
+  h += '<div class="cal-grid' + (open ? ' open' : '') + '">' + ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((w) => '<span class="cal-wd" aria-hidden="true">' + w + '</span>').join('')
+  const n = new Date(y, m, 0).getDate()
+  const lead0 = first.getDay()
+  const week = (dn) => Math.floor((lead0 + dn - 1) / 7)
+  const inMonth = (x) => x && x.slice(0, 7) === ym
+  const firstHas = days.map((x) => x.day).filter(inMonth).sort()[0]
+  const wk = week(inMonth(pick) ? Number(pick.slice(8)) : inMonth(today) ? Number(today.slice(8)) : firstHas ? Number(firstHas.slice(8)) : 1)
+  for (let i = 0; i < lead0; i++) h += '<span class="cal-day pad' + (wk === 0 ? ' wk' : '') + '" aria-hidden="true"></span>'
+  let count = 0
+  for (let dn = 1; dn <= n; dn++) {
+    const day = ym + '-' + String(dn).padStart(2, '0')
+    const d = by.get(day)
+    const cls = ['cal-day', d ? 'has' : 'none', day === pick ? 'on' : '', day === today ? 'today' : '', week(dn) === wk ? 'wk' : ''].filter(Boolean).join(' ')
+    const long = shortDay(day)
+    if (d) {
+      count++
+      const whose = d.shared ? '' : ', ' + d.machine + '’s own digest'
+      h += '<a class="' + cls + '" href="#/digest/' + day + (d.shared ? '' : '?machine=' + encodeURIComponent(d.machine)) + '" data-day="' + day + '" aria-label="' + esc(long + whose + (day === today ? ', today' : '')) + '"' + (day === pick ? ' aria-current="date"' : '') + '><span class="n">' + dn + '</span><span class="dot" aria-hidden="true"></span></a>'
+    } else h += '<span class="' + cls + '" data-day="' + day + '"><span class="n">' + dn + '</span></span>'
+  }
+  h += '</div>'
+  if (!count) h += '<div class="cal-none">' + (days.length ? 'No digests in ' + esc(first.toLocaleDateString('en-US', { month: 'long' })) + '.' : 'None yet') + '</div>'
+  return h
+}
+
+// Month or fold changed: patch the calendar in place, so the arrows (and the
+// focus on them, with its keyboard ring) stay put.
+function repaintCalendar() {
+  const nav = document.querySelector('nav.digest-cal')
+  if (!nav) return null
+  const t = document.createElement('div')
+  t.innerHTML = digestCalendar()
+  const now = [...nav.querySelectorAll('.cal-head > *')], fresh = [...t.querySelectorAll('.cal-head > *')]
+  now.forEach((el, i) => {
+    const f = fresh[i]
+    for (const a of ['data-to', 'aria-label', 'aria-expanded']) if (f.hasAttribute(a)) el.setAttribute(a, f.getAttribute(a))
+    el.disabled = !!f.disabled
+    if (!el.classList.contains('cal-nav')) el.innerHTML = f.innerHTML
+  })
+  for (const el of nav.querySelectorAll('.cal-grid, .cal-none')) el.remove()
+  nav.append(...t.querySelectorAll('.cal-grid, .cal-none'))
+  return nav
+}
+
 // Digest (v0.5.8): one digest a day for the whole folder. The strip has one
 // pill per day: the shared digest, else (days from before 0.5.8) a Mac's own,
 // labelled with that Mac. Space tabs (All / Work / Personal …) sit above the
@@ -1750,16 +2489,16 @@ async function viewDigest(date, machine) {
   const who = dg.order && dg.order.length > 1 ? ' Made by ' + esc(dg.order[0]) + ' (first in line), or the next Mac awake ' + esc(dg.graceMin) + ' min later.' : ''
   const nextLine = todayLine + (dg.time ? 'Next automatic digest: ' + esc(when(dg.nextAt) || 'at ' + dg.time) + ' · ' + esc(dg.daysLabel || 'Every day') + ', ' + esc(dg.label || dg.time) + '.' + who : 'Automatic digests are off (<a href="#/settings/digest">Settings → Digest</a>).')
   if (dg.lastError) html += '<div class="banner warn" role="status"><span class="grow"><b>The last digest failed</b> (' + esc(ago(dg.lastError.at)) + '): ' + esc(dg.lastError.message) + '. Generate now tries again; <code>leftoff doctor</code> shows it too.</span></div>'
-  html += '<div class="digest-wrap"><nav class="dates digest-dates" aria-label="Past digests">' + (days.length ? days.map((day) => {
-    const d = lead(day)
-    const on = pick === day
-    const label = d.shared ? '' : d.machine
-    return '<a href="#/digest/' + day + (d.shared ? '' : '?machine=' + encodeURIComponent(d.machine)) + '" class="' + (on ? 'on' : '') + '" title="' + esc(day + (d.shared ? '' : ' · ' + d.machine + '’s own digest (from before one digest a day)')) + '"><span class="d-iso">' + day + '</span><span class="d-short">' + esc(shortDay(day)) + '</span>' + (label ? ' <span class="m">' + esc(label) + '</span>' : '') + '</a>'
-  }).join('') : '<span class="nocp">None yet</span>') + '</nav>'
+  // 0.9.8: a month calendar, not a long list: days with a digest are links
+  if (digestUi.date !== pick || !digestUi.month) { digestUi.month = monthOf(pick || localDay()); digestUi.calOpen = false }
+  digestUi.cal = { days: days.map((day) => ({ day, d: lead(day) })), pick }
+  html += '<div class="digest-wrap"><nav class="digest-cal" aria-label="Past digests">' + digestCalendar() + '</nav>'
   let spaces = []
   if (pick) {
     try {
-      const d = await api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : ''))
+      // 0.9.8: the sessions too, for Start here's Go / Resume
+      const [d, sv] = await Promise.all([api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : '')), api('GET', '/v1/sessions?limit=500&archived=1').catch(() => null)])
+      if (sv) { state.sessions = sv.sessions || []; if (sv.viewer) { state.viewerLocal = sv.viewer.local !== false; state.ghostty = sv.viewer.ghostty === true } }
       const fm = d.meta || {}
       const madeAt = fm.generated_at
       spaces = Array.isArray(fm.spaces) ? fm.spaces.map(String) : []
@@ -1769,10 +2508,14 @@ async function viewDigest(date, machine) {
       const also = others.length ? '<div class="digest-also">Also for this day: ' + others.map((x) => '<a href="#/digest/' + x.date + (x.shared ? '' : '?machine=' + encodeURIComponent(x.machine)) + '">' + esc(x.shared ? 'the shared digest' : x.machine + '’s') + '</a>').join(' · ') + '</div>' : ''
       const unnamed = spv && spaces.some((x) => (spv.machines || []).some((m) => !m.set && m.machine === x)) ? '<div class="digest-hint">Spaces are named after your Macs until you pick one for each: <a href="#/settings/spaces">Settings → Spaces</a> (Work, Personal or your own).</div>' : ''
       html += '<article class="md"><div class="digest-meta">' + legacy + (madeAt ? 'Made ' + esc(clock(madeAt)) + whose + ' · ' : '') + nextLine + '</div>' + also + unnamed +
-        '<div id="digestSpaces"></div><div class="repos digest-repos" id="digestRepos"></div>' + renderMd(d.markdown, { spaces }) + '</article>'
+        '<div id="digestSpaces"></div><div class="repos digest-repos" id="digestRepos"></div>' + renderMd(d.markdown, { spaces, sessions: sv ? new Map((sv.sessions || []).map((x) => [x.id, x])) : null, viewer: sv && sv.viewer }) + '</article>'
     } catch (e) { html += '<div class="empty">' + esc(e.message) + '</div>' }
   } else html += '<div class="empty"><p><strong>No digest yet.</strong></p><p>' + nextLine + '</p><p><button type="button" class="btn primary" data-action="gen-digest">Generate now</button> makes one from your sessions so far.</p></div>'
   $app.innerHTML = html + '</div>'
+  // 0.9.8: the brief comes first; the space tabs and repo chips sit under it, over the sessions they filter
+  const art = $app.querySelector('article.md')
+  const after = art && (art.querySelector(':scope > section.start-sec') || [...art.querySelectorAll(':scope > p.lede')].pop())
+  if (after) after.after(...['.digest-hint', '#digestSpaces', '#digestRepos'].map((q) => art.querySelector(q)).filter(Boolean))
   const params = (state.route && state.route.params) || new URLSearchParams()
   state.digestRepos = readFilter(params, window.localStorage).repos
   state.digestSpaces = spaces
@@ -1794,7 +2537,7 @@ function paintDigestFilter() {
   const spaces = state.digestSpaces || []
   const sp = state.digestSpace
   const secs = [...document.querySelectorAll('.md section')]
-  for (const sec of secs) sec.hidden = !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
+  for (const sec of secs) sec.hidden = !sec.classList.contains('start-sec') && !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
   const tabsBox = document.getElementById('digestSpaces')
   if (tabsBox) {
     const counts = new Map(spaces.map((x) => [x, document.querySelectorAll('.md section[data-space="' + CSS.escape(x) + '"] li[data-repo]').length]))
@@ -1812,8 +2555,19 @@ function paintDigestFilter() {
     const any = [...ul.children].some((li) => !li.hidden)
     ul.hidden = !any
     if (h && (h.tagName === 'H2' || h.tagName === 'H3')) h.hidden = !any
+    const fin = ul.closest('details.fin')
+    if (fin) fin.hidden = !any
   }
   if (sel.length) for (const sec of secs) if (sec.classList.contains('space-sec') && !sec.hidden && ![...sec.querySelectorAll('li[data-repo]')].some((li) => !li.hidden)) sec.hidden = true
+  // 0.9.8: a Start here step follows its session's line: hidden with it (space or repo)
+  const startSec = document.querySelector('.md section.start-sec')
+  if (startSec) {
+    for (const li of startSec.querySelectorAll('li[data-sid]')) {
+      const twin = [...document.querySelectorAll('.md li[data-repo][data-sid]')].find((x) => x.dataset.sid === li.dataset.sid)
+      li.hidden = !!twin && (twin.hidden || !!(twin.closest('section') && twin.closest('section').hidden))
+    }
+    startSec.hidden = ![...startSec.querySelectorAll('ol.start > li')].some((li) => !li.hidden)
+  }
   if (counts.size < 2) { box.innerHTML = ''; return }
   const on = (r) => sel.some((tok) => repoMatches({ repoKey: r, repoLabel: r }, tok))
   box.innerHTML = '<div class="track"><button type="button" class="rchip all' + (sel.length ? '' : ' on') + '" data-action="digest-repo" data-repo=""><span class="rl">All</span><span class="rc">' + items.length + '</span></button>' +
@@ -2118,11 +2872,13 @@ async function tryLength() {
   const s = list[0]
   if (!s) { toast('No session yet to try it on'); return }
   box.innerHTML = '<div class="ex-head">Writing a ' + esc(k) + ' checkpoint of “' + esc(s.title || 'Untitled') + '”…</div>'
+  // the page can be redrawn while the summarizer writes (Save re-renders Settings): put the result in the box on screen then
+  const now = () => document.getElementById('f-length-example') || box
   try {
     const cp = await api('POST', '/v1/checkpoints/preview', { sessionId: s.id, length: k })
-    box.innerHTML = '<div class="ex-head">Your session · ' + esc(s.title || 'Untitled') + ' <span class="faint">' + esc(k) + (cp.generator && cp.generator.by ? ' · by ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') : '') + ' · not saved</span></div>' +
+    now().innerHTML = '<div class="ex-head">Your session · ' + esc(s.title || 'Untitled') + ' <span class="faint">' + esc(k) + (cp.generator && cp.generator.by ? ' · by ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') : '') + ' · not saved</span></div>' +
       cpBlock(cp, { showWhen: false, md: true }) + (hasExtras(cp) ? '<div class="cpx">' + cpExtras(cp) + '</div>' : '')
-  } catch (e) { box.innerHTML = lengthExample(k); toast('Couldn’t write it: ' + e.message) }
+  } catch (e) { now().innerHTML = lengthExample(k); toast('Couldn’t write it: ' + e.message) }
 }
 
 // Am I the iPhone home-screen app (or another installed app window)?
@@ -2553,6 +3309,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) + '">' +
@@ -2585,7 +3342,7 @@ async function viewSettings() {
     updates: '<div class="section">About</div>' +
       '<label>Version</label><div class="aboutline"><span class="chip mono">v' + esc(h.version || '') + '</span><a href="#/whats-new">What’s new</a><a href="' + NPM_URL + '" target="_blank" rel="noopener">npm ↗</a></div>' +
       '<div class="hint">' + updateLine() + ' <button type="button" class="linkish" data-action="check-updates">Check now</button></div>' +
-      '<label>Setup</label><div class="aboutline"><a href="#/setup">Run setup again</a></div>' +
+      '<label>Setup</label><div class="aboutline"><a href="#/setup">Run setup again</a> · <a href="#/tour">Take the tour</a></div>' +
       advanced('updates', '<label for="f-updates">Check daily</label><label class="check"><input id="f-updates" type="checkbox"' + (!(c.updates && c.updates.check === false) ? ' checked' : '') + '><span>Look for a new version daily. Nothing installs on its own.</span></label>' +
         '<label>Machine</label><div><span class="chip machine">⌂ ' + esc(c.machineResolved) + '</span></div>' +
         '<label>Folder</label><div><a class="chip mono" href="file://' + esc(c.folder) + '">' + esc(c.folder) + '</a></div>'),
@@ -3284,7 +4041,7 @@ function paintListsCount(lists) {
 // The session page's Lists section: saved lists, the hint, and "Find lists in this session".
 function sessionListsSection(s) {
   const f = listUi.found[s.id]
-  let h = '<h2>Lists <span class="count">' + ((s.lists || []).length) + '</span><button type="button" class="helpq" data-action="list-help-go" title="How lists work">?</button></h2>'
+  let h = '<h2>Lists <span class="count">' + ((s.lists || []).length) + '</span><button type="button" class="helpq" data-action="list-help-inline" aria-expanded="' + (listUi.sHelp ? 'true' : 'false') + '" aria-controls="sListsHelp" title="How lists work">?</button></h2>' + (listUi.sHelp ? listsHelp().replace('id="listsHelp"', 'id="sListsHelp"') : '')
   if (s.lists && s.lists.length) h += '<div class="lists">' + s.lists.map((x) => (state.listFull && state.listFull[x.ref] ? listCard(state.listFull[x.ref], { session: false }) : '')).join('') + '</div>'
   if (s.listHint) h += '<div class="lfound hint"><div><strong>Claude wrote a ' + esc(s.listHint.count) + '-step list</strong>: ' + esc(s.listHint.name) + '</div><div class="row"><button type="button" class="btn primary" data-action="list-save-hint" data-id="' + esc(s.id) + '">Save</button><button type="button" class="btn" data-action="list-dismiss" data-id="' + esc(s.id) + '">Dismiss</button></div></div>'
   h += '<div class="lfind"><button type="button" class="btn" data-action="list-find" data-id="' + esc(s.id) + '"' + (listUi.finding[s.id] ? ' disabled' : '') + '>' + icon('list-checks') + (listUi.finding[s.id] ? 'Reading the transcript…' : 'Find lists in this session') + '</button>' +
@@ -3315,6 +4072,7 @@ function parseRoute() {
 async function render() {
   const r = (state.route = parseRoute())
   paintNav(r)
+  tabsOnRoute(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3328,7 +4086,9 @@ async function render() {
     else if (r.name === 'docs' && r.arg) await viewDocPage(r.arg)
     else if (r.name === 'search') await viewSearch(r.q || '')
     else if (r.name === 'setup') await viewSetup()
+    else if (r.name === 'tour') { location.replace('#/'); startTour({ api }); return }
     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>'
@@ -3339,12 +4099,20 @@ async function render() {
 // it keeps its own step and fetches its own state.
 async function viewSetup() {
   if ($app.querySelector('.wz')) return
-  await mountWizard($app, { api, esc, onDone: () => { location.hash = '#/' } })
+  await mountWizard($app, { api, esc, onDone: () => { location.hash = '#/'; autoTour() } })
 }
 // Opens #/setup by itself once, on a Mac's own board, when the board opens plain (no deep link).
+// Otherwise the product tour gets its turn.
 async function firstRunSetup() {
-  if (location.hash.replace(/^#\/?/, '')) return
-  try { const s = await api('GET', '/v1/setup'); if (shouldAutoOpen(s, (state.route || {}).name) && !location.hash.replace(/^#\/?/, '')) location.replace('#/setup') } catch {}
+  if (!location.hash.replace(/^#\/?/, '')) {
+    try { const s = await api('GET', '/v1/setup'); if (shouldAutoOpen(s, (state.route || {}).name) && !location.hash.replace(/^#\/?/, '')) return location.replace('#/setup') } catch {}
+  }
+  autoTour()
+}
+// The product tour (0.9.8, ui/tour.js): by itself once per Mac, after setup, on
+// the board; #/tour (Settings → Updates & about, the palette) replays it.
+async function autoTour() {
+  try { const t = await api('GET', '/v1/tour'); if (shouldAutoTour(t, parseRoute().name)) startTour({ api, auto: true }) } catch {}
 }
 
 // A remote browser (Tailscale) that hasn't signed in yet: the iPhone
@@ -3403,7 +4171,9 @@ async function refreshHealth() {
     if (dot) dot.hidden = !(h.whatsNew && h.whatsNew.unseen > 0)
     paintMoreDots()
     paintSettingsDots()
+    if (updateBar) updateBar.check(h)
   } catch (e) {
+    if (updateBar) updateBar.check(null) // a failed check changes nothing
     el.className = 'health down'
     el.querySelector('.label').textContent = e && e.code === 'login_required' ? 'not signed in' : 'daemon offline'
     el.title = el.querySelector('.label').textContent
@@ -3436,12 +4206,12 @@ function paintTopDot() {
 }
 
 // ------------------------------------------------------------ the rail, the bottom bar and Quick look (0.9.8)
-// From 820px up the sections sit in a rail on the left; under it, in a bottom
+// 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: 820px)').matches
+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') })
@@ -3470,6 +4240,7 @@ function openMore() {
   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')
@@ -3598,6 +4369,214 @@ function closeQuickLook(focusTab = false) {
   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.
@@ -3606,8 +4585,8 @@ function closeQuickLook(focusTab = false) {
   ptr.className = 'ptr'; ptr.id = 'ptr'; ptr.setAttribute('aria-hidden', 'true'); ptr.hidden = true
   ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
   document.body.appendChild(ptr)
-  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 819.98px)')
-  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
+  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)
@@ -3657,6 +4636,43 @@ function closeQuickLook(focusTab = false) {
   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.
 const statusOpen = () => { const p = document.getElementById('statusPop'); return p && !p.hidden }
 function syncLine() {
@@ -3790,6 +4806,7 @@ function paletteActions() {
   }
   if (projectsUi.mayEdit) out.push({ action: 'project-new', title: 'New project…', sub: 'a named group of repos', icon: 'plus' })
   out.push({ action: 'gen-digest-go', title: 'Today’s digest', sub: 'open it', icon: 'newspaper', href: '#/digest' })
+  out.push({ action: 'tour', title: 'Take the tour', sub: 'a quick look around the board', icon: 'sparkles', href: '#/tour' })
   return out
 }
 function searchGroups(q, r) {
@@ -3939,11 +4956,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
 })
 
@@ -3990,7 +5023,14 @@ document.addEventListener('click', async (ev) => {
   const id = btn.dataset.id || (card && card.dataset.id)
   const s = state.sessions.find((x) => x.id === id) || (closedUi.data && closedUi.data.sessions.find((x) => x.id === id))
   try {
-    if (action === 'copy-cmd') { await copy(btn.dataset.cmd); return }
+    if (action === 'copy-cmd') {
+      const ok = await copy(btn.dataset.cmd)
+      if (ok && btn.classList.contains('copy-float')) { // 0.9.8: the floating copy shows a check for a moment, no tooltip
+        clearTimeout(btn._copied); btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.setAttribute('aria-label', 'Copied'); btn.dataset.tip = 'Copied'
+        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy Live resume'); btn.dataset.tip = 'Copy' }, 1500)
+      }
+      return
+    }
     // PRs (0.6.9)
     if (action === 'prs-view') { const v = btn.dataset.view === 'team' ? 'team' : 'mine'; try { localStorage.setItem('leftoff.prsView', v) } catch {} location.hash = prsHash(v, prsUi.filter); return }
     // 0.8.5: filters (in the hash), expand a PR in place, the Quiet group
@@ -4093,6 +5133,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'list-showall') { listUi.showAll = !listUi.showAll; return render() }
     if (action === 'list-help') { listUi.help = !listUi.help; return render() }
     if (action === 'list-help-go') { listUi.help = true; location.hash = '#/lists'; return }
+    if (action === 'list-help-inline') { listUi.sHelp = !listUi.sHelp; render(); return }
     if (action === 'remote-link' || action === 'remote-code') {
       const l = await api('POST', '/v1/remote/link', action === 'remote-link' ? { full: true } : undefined)
       if (l.needed === false) { toast('No sign-in needed (remoteRequireToken is off)'); return }
@@ -4280,6 +5321,19 @@ document.addEventListener('click', async (ev) => {
       saveSpace(state.digestSpace)
       return paintDigestFilter()
     }
+    if (action === 'digest-cal-fold') {
+      digestUi.calOpen = !digestUi.calOpen
+      repaintCalendar()
+      return
+    }
+    if (action === 'digest-month') {
+      const back = btn.dataset.to < (digestUi.month || '')
+      digestUi.month = btn.dataset.to
+      digestUi.calOpen = true // another month: show all of it
+      const nav = repaintCalendar()
+      if (nav && btn.disabled) { const [p, n] = nav.querySelectorAll('.cal-nav'); const b = back ? n : p; if (!b.disabled) b.focus() } // the end of the range: focus stays on the arrows
+      return
+    }
     if (action === 'standup-copy') return standupCopy(btn)
     if (action === 'standup-close') { const b = btn.closest('.standup-out'); if (b) b.remove(); digestUi.open = null; return }
     if (action === 'space-quick' || action === 'space-repo-add' || action === 'space-unset') return spacesAction(action, btn)
@@ -4305,7 +5359,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)
@@ -4791,16 +5851,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) => {
@@ -4903,9 +5968,51 @@ document.addEventListener('pointerdown', (ev) => {
   if (m && !m.contains(ev.target)) m.open = false
 })
 api('GET', '/v1/config').then((c) => (state.cfg = c)).catch(() => {})
+// 0.9.8: "Leftoff updated · Refresh" when the Mac serving this board has newer
+// files than the ones this page runs. It never reloads by itself; Refresh
+// carries your drafts over and says first what wouldn't come along.
+updateBar = mountUpdateBar({
+  icon,
+  health: () => refreshHealth(),
+  risks: () => {
+    let attachments = 0, uploading = 0
+    for (const list of attachUi.by.values()) for (const a of list) { attachments++; if (a.status === 'prep' || a.status === 'up') uploading++ }
+    const f = document.activeElement
+    const typing = !!(f && /^(INPUT|TEXTAREA)$/.test(f.tagName) && !f.dataset.draft && !f.readOnly && !/^(checkbox|radio|button|submit|range|color|file|search)$/.test(f.type) && !f.closest('.cmdk, #settingsForm') && String(f.value || '').trim())
+    let unsavedSettings = false
+    try { unsavedSettings = settingsChanged().length > 0 } catch {}
+    return { attachments, uploading, unsavedSettings, typing }
+  },
+  carry: () => {
+    const drafts = { ...state.drafts }
+    for (const t of document.querySelectorAll('textarea[data-draft]')) if (t.value) drafts[t.dataset.draft] = t.value
+    const f = document.activeElement
+    const focus = f && f.dataset && f.dataset.draft ? { key: f.dataset.draft, a: f.selectionStart || 0, b: f.selectionEnd || 0 } : lastDraftFocus
+    return { drafts, focus }
+  },
+})
+// The box you were typing in, if you tabbed from it to the bar.
+let lastDraftFocus = null
+document.addEventListener('focusin', (ev) => { if (!(ev.target.closest && ev.target.closest('#updateBar'))) lastDraftFocus = null })
+document.addEventListener('focusout', (ev) => { const t = ev.target; if (t && t.dataset && t.dataset.draft) lastDraftFocus = { key: t.dataset.draft, a: t.selectionStart || 0, b: t.selectionEnd || 0 } })
+// Back from Refresh: the box you were typing in has its text, and (with a
+// keyboard and mouse) the cursor where it was.
+function restoreCarriedFocus(tries = 50) {
+  const f = carried && carried.focus
+  if (!f || isTouchUi(window.matchMedia)) return
+  if (document.activeElement && document.activeElement !== document.body) return // you've moved on
+  const t = [...document.querySelectorAll('textarea[data-draft]')].find((x) => x.dataset.draft === f.key)
+  if (!t || t.disabled) { if (tries > 0) setTimeout(() => restoreCarriedFocus(tries - 1), 100); return } // the session page draws after its data
+  t.focus({ preventScroll: true })
+  try { const n = t.value.length; t.setSelectionRange(Math.min(f.a, n), Math.min(f.b, n)) } catch {}
+}
 refreshHealth().then(render).then(firstRunSetup)
+restoreCarriedFocus()
 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 })