@leftoff/cli 0.9.8-beta.9 → 0.9.8

package/ui/app.js

@@ -5,29 +5,43 @@ 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'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
-import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
-import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
+import { restoreAccess, hintHtml, restoreWhen, restoreHeadline, askLine } from './restore-gate.js'
+import { defaultEmoji, PICKER_SET, isEmoji, boardMachineFilter, machineOnlyLabel } from './machines.js'
 import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
+import { anyPending, shouldPoll, streamDead, isStale, liveSignature, wakeReason, createWake, createWatchdog, HEARTBEAT_MS, POLL_MS, AWAY_MS } from './live-wake.js' // 0.9.8 live after sleep
 import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
 import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember, closeTab, moveTab, neighbours, indexOf, sessionOfHash, keepHash, tabView, stripHtml, allTabsItems, openRowHtml, pagerHtml, swipeDir } from './tabs.js' // 0.9.8 tabs for sessions
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
+import { widState, whatItDidSection, copyText as widCopyText, loadError as widError, hiddenText as widHidden, slotSource as widSlot } from './what-it-did.js' // 0.9.8 What it did
+import { hydrateDiffs, renderDiff } from './diff-view.js' // 0.9.8: a file's changes drawn like GitHub's
 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))]
 
@@ -318,6 +332,13 @@ function staleLine(sessions) {
   const ms = [...new Set(sessions.filter((x) => !x.isLocal && x.machine in st).map((x) => x.machine))]
   return ms.length ? '<div class="stale-line faint">' + ms.map((m) => esc(m) + ': showing data as of ' + esc(st[m] ? ago(st[m]) : 'its last sync')).join(' · ') + '</div>' : ''
 }
+// 0.9.8: a board filtered to one Mac says so, with the way back to every Mac.
+function machineOnlyLine() {
+  if (!state.machine) return ''
+  const known = { machines: (state.health && state.health.machines) || [], agents: agentNames() }
+  const agent = known.agents.includes(state.machine) && !known.machines.includes(state.machine)
+  return '<div class="machine-only" role="status">' + (agent ? '' : mEmoji(state.machine) + ' ') + esc(machineOnlyLabel(state.machine, known)) + ' · <button type="button" class="linkish" data-action="machine-all">Show all Macs</button></div>'
+}
 function staleNote(machine) {
   const st = state.health && state.health.sync && state.health.sync.stale
   if (!st || !machine || !(machine in st)) return ''
@@ -756,9 +777,16 @@ async function projectAction(action, btn) {
   }
 }
 let lastMenuAnchor = null
+// The board's Machine filter, kept in this browser ('' = every Mac).
+function setMachineFilter(m) {
+  state.machine = m || ''
+  try { if (state.machine) localStorage.setItem('cp.machine', state.machine); else localStorage.removeItem('cp.machine') } catch {}
+}
 
 async function viewBoard() {
   if (!state.health) await refreshHealth()
+  // 0.9.8: a saved Machine filter for a Mac (or agent) the board no longer knows is dropped
+  if (state.machine && state.health && boardMachineFilter(state.machine, { machines: state.health.machines || [], agents: agentNames() }) !== state.machine) setMachineFilter('')
   if (state.health && state.health.update && state.health.update.available && !state.updates) { try { state.updates = await api('GET', '/v1/updates') } catch {} }
   const [{ sessions: all, viewer, closedCount, todoCount, parked = [] }] = await Promise.all([api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : '')), loadProjects()])
   // 0.8.2: parked sessions have their own section (any age), not a status group
@@ -818,15 +846,18 @@ async function viewBoard() {
   const todoN = f.repos.length || sp || pj ? inRepos.reduce((n, s) => n + ((s.todos && s.todos.length) || 0), 0) : (todoCount || 0)
   html += '<div class="stats">' + Object.entries(FILTERS).map(([k, fl]) =>
     '<button type="button" class="stat' + (filter === k ? ' on' : '') + '" data-action="filter" data-filter="' + k + '" aria-pressed="' + (filter === k) + '" title="' + esc(filter === k ? 'Showing ' + fl.label.toLowerCase() + ' · tap to show all' : 'Show ' + fl.label.toLowerCase()) + '"><div class="n">' + count(k) + (k === 'needs' && todoN ? '<span class="todo-subn" title="To-dos handed back to you (not counted as waiting)">' + todoN + (todoN === 1 ? ' to-do' : ' to-dos') + '</span>' : '') + '</div><div class="k"><span class="pill ' + fl.cls + '" aria-hidden="true"></span>' + esc(fl.label) + '</div></button>').join('') + '</div>'
+  html += machineOnlyLine() // 0.9.8: in the filter rows, with the spaces and repos it narrows
   html += spaceTabs(spaces, sp, spCounts, 'board-space', allShown.length)
   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)
@@ -837,7 +868,7 @@ async function viewBoard() {
     html += '<div class="empty mt"><p><strong>No sessions yet.</strong></p><p>Start Claude Code with the mod loaded (<code>claude --plugin-dir ./mod</code>) or install the settings hooks (<code>leftoff init --hooks</code>). Sessions show up here as soon as you send a prompt.</p></div>'
   } else if (!list.length && shown.length) {
     const pjName = pj ? (projectsUi.list.find((p) => p.id === pj) || {}).name : null
-    const inWhat = (pjName ? ' in ' + pjName : '') + (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')
+    const inWhat = (pjName ? ' in ' + pjName : '') + (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '') + (state.machine ? ' on ' + state.machine : '')
     html += '<div class="empty mt">' + (filter ? 'Nothing ' + esc(FILTERS[filter].label.toLowerCase()) + esc(inWhat) + ' right now.' : 'No sessions' + esc(inWhat) + ' today.') +
       ' <button type="button" class="linkish" data-action="clear-filters">Show everything</button></div>'
   } else if (list.length) {
@@ -860,38 +891,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()) }
   })
 }
 
@@ -1114,9 +1170,9 @@ function restoreBanner() {
   const when = r.restartAt ? ' (' + clock(r.restartAt) + ')' : ''
   const head = '<b>' + n + ' session' + (n === 1 ? ' was' : 's were') + ' open ' + esc(restoreWhen(r)) + '</b>' + esc(when)
   if (!restoreUi.open) {
-    return '<div class="banner info restore" id="restoreBanner" role="status"><span class="grow">' + head + '. Put them back, each in its own Ghostty tab.</span>' +
+    return '<div class="banner info restore" id="restoreBanner" role="status"><span class="grow">' + restoreHeadline(r, { esc, clock }) + '</span>' +
       '<button type="button" class="btn primary" data-action="restore-open">' + icon('rotate-ccw') + 'Restore…</button>' +
-      '<button type="button" class="btn x" data-action="restore-dismiss" aria-label="Not now" title="Not now">✕</button></div>'
+      '<button type="button" class="btn x" data-action="restore-dismiss" aria-label="Not now" data-tip="Not now">✕</button></div>'
   }
   const gate = restoreGate()
   const picked = restorePicked().length
@@ -1124,11 +1180,11 @@ function restoreBanner() {
   const rows = r.sessions.map((s) => '<label class="rs-row"><input type="checkbox" name="rs" value="' + esc(s.id) + '"' + (restoreUi.off.has(s.id) ? '' : ' checked') + '>' +
     '<span class="rs-main"><span class="rs-t">' + esc(s.title || '(untitled)') + '</span><span class="rs-m">' + esc([s.repoLabel, s.branch, s.modelLabel, s.lastAliveAt ? 'last seen ' + ago(s.lastAliveAt) : null, 'cp:' + (s.shortId || s.id.slice(0, 8))].filter(Boolean).join(' · ')) + '</span>' + (s.blocked ? '<span class="rs-m err">' + esc(s.error) + '</span>' : '') + '</span></label>').join('')
   return '<div class="banner info restore open" id="restoreBanner" role="region" aria-label="Restore sessions"><div class="rs-head"><span class="grow">' + head + '. Each opens in a new Ghostty tab, in its folder, with <code>claude --resume</code> and its name.</span>' +
-    '<button type="button" class="btn x" data-action="restore-close" aria-label="Close" title="Close">✕</button></div>' +
+    '<button type="button" class="btn x" data-action="restore-close" aria-label="Close" data-tip="Close">✕</button></div>' +
     '<div class="rs-list">' + rows + '</div>' +
     '<div class="rs-actions">' +
     '<button type="button" class="btn primary" data-action="restore-go" id="restoreGo" data-how="' + (gate.how || 'off') + '"' + (gate.ok && picked && !asking ? '' : ' aria-disabled="true"') +
-      (gate.ok && gate.how !== 'ask' ? '' : ' aria-describedby="restoreHint"') + (gate.ok ? '' : ' title="' + esc(gate.hint.replace(/`/g, '')) + '"') + '>' + icon('rotate-ccw') + 'Restore ' + picked + '</button>' +
+      (gate.ok && gate.how !== 'ask' ? '' : ' aria-describedby="restoreHint"') + '>' + icon('rotate-ccw') + 'Restore ' + picked + '</button>' +
     '<button type="button" class="btn" data-action="restore-all">' + (picked === r.sessions.length ? 'Select none' : 'Select all') + '</button>' +
     '<button type="button" class="btn" data-action="restore-copy">Copy commands</button>' +
     (restoreUi.ask ? restoreAskNote() : gate.ok && gate.how !== 'ask' ? '' : '<span class="rs-note" id="restoreHint">' + hintHtml(gate.hint, esc) + '</span>') +
@@ -1297,47 +1353,166 @@ function ownerOfflineNote(s) {
   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])
-  // 0.9.8 auto-switch host: on leftoff.dev, another Mac's session loads its own data from that Mac
-  if (window.leftoffRelay && window.leftoffRelay.owner) window.leftoffRelay.owner(s.id, s.isLocal === false && !s.agent ? s.machine : null)
+  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)
+// 0.9.8 What it did: per-session state (kept while the board is open), painted
+// in place; loaded when you open the section or tap ↻, never polled.
+const widUi = new Map()
+function widOf(id) { if (!widUi.has(id)) widUi.set(id, widState()); return widUi.get(id) }
+function paintWid(id) {
+  const el = document.getElementById('what-it-did')
+  const s = state.sessions.find((x) => x.id === id)
+  if (!el || !s || !onSession(id)) return
+  const fa = document.activeElement
+  const kb = fa && fa !== document.body && el.contains(fa) ? focusKey(fa) : null
+  el.innerHTML = whatItDidSection(s, widOf(id))
+  if (hydrateDiffs(el, (p) => widSlot(widOf(id), p))) widStickyTop()
+  if (kb) { const hits = el.querySelectorAll(kb); if (hits.length === 1 && !hits[0].disabled) hits[0].focus({ preventScroll: true }) }
+}
+// An open file's header sticks just under the board's own sticky bar, whose height changes with the width.
+function widStickyTop() {
+  let h = 0
+  for (const b of document.querySelectorAll('.top, .tabstrip')) if (b.offsetParent !== null && getComputedStyle(b).position === 'sticky') h = Math.max(h, b.getBoundingClientRect().height)
+  document.documentElement.style.setProperty('--wid-sticky', Math.round(h) + 'px')
+}
+const widPath = (id, what) => '/v1/sessions/' + encodeURIComponent(id) + '/' + what
+async function loadWid(id) {
+  const ui = widOf(id)
+  if (ui.loading) return
+  Object.assign(ui, { loading: true, tools: null, diff: null, toolsError: null, diffError: null, toolFull: {}, toolLoading: {}, files: {}, fileLoading: {} })
+  paintWid(id)
+  await Promise.all([
+    api('GET', widPath(id, 'tools')).then((r) => { ui.tools = r.tools || [] }, (e) => { ui.toolsError = widError(e) }),
+    api('GET', widPath(id, 'diff')).then((r) => { ui.diff = r }, (e) => { ui.diffError = widError(e) }),
+  ])
+  ui.loading = false
+  // a file you had open shows its lines again
+  for (const p of Object.keys(ui.fileOpen)) if (ui.fileOpen[p]) loadWidFile(id, p)
+  paintWid(id)
+}
+async function loadWidFile(id, p) {
+  const ui = widOf(id)
+  const f = ui.diff && (ui.diff.files || []).find((x) => x.path === p)
+  if (!f || f.hidden || f.binary || f.big || ui.fileLoading[p]) return
+  ui.fileLoading[p] = true; paintWid(id)
+  try { const r = await api('GET', widPath(id, 'diff') + '?file=' + encodeURIComponent(p)); ui.files[p] = r.file || { error: 'Not found.' } } catch (e) { ui.files[p] = { error: widError(e) } }
+  delete ui.fileLoading[p]
+  paintWid(id)
+}
+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(),
-    s.isLocal === false && window.leftoffRelay ? window.leftoffRelay.status().then((st) => { state.relayStatus = st }).catch(() => {}) : null])
   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 s-head"><div class="s-head-main">' + (canRename
+  html += '<div class="pagehead s-head" data-sid="' + esc(s.id) + '"><div class="s-head-main">' + (canRename
     ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + titleHtml(sessionTitle(s), esc) + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
     : '<h1>' + titleHtml(sessionTitle(s), esc) + '</h1>') + '<div class="sub">' + statusPill(s) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? (s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource + ' title') : '') + '</div></div>' +
     // 0.9.8: one line each, 44px, an icon and a short label; the group drops under the title as a whole when it doesn't fit beside it
-    '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + 'Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+    '<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: the last tools it ran and its folder's changes, folded; loads when you open it
+  html += '<section class="wid" id="what-it-did">' + whatItDidSection(s, widOf(s.id)) + '</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>'
@@ -1355,10 +1530,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)
 
@@ -1381,18 +1553,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
-  const turns = (state.liveTurns && state.liveTurns[s.id]) || 20 // "Show earlier" adds 20 at a time
-  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live' + (turns > 20 ? '?turns=' + turns : '')) } 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]) || ''
@@ -1401,17 +1583,344 @@ 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">' +
-      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now }) + '</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)
+  { const w = document.getElementById('what-it-did'); if (w && widUi.has(sid) && hydrateDiffs(w, (p) => widSlot(widOf(sid), p))) widStickyTop() }
   if (!r) return
   const ol = r.thread.querySelector('.live-log')
   const empty = r.thread.querySelector('.live-empty')
@@ -1479,34 +1988,141 @@ async function liveEarlierClick(btn) {
   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)
@@ -1669,6 +2285,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)
@@ -1682,7 +2303,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)
@@ -1743,29 +2364,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.
@@ -1774,13 +2433,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')
 }
@@ -1791,6 +2454,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
@@ -1815,16 +2553,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) : []
@@ -1834,10 +2572,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
@@ -1859,7 +2601,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]))
@@ -1877,8 +2619,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>' +
@@ -2183,11 +2936,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)?
@@ -2651,7 +3406,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>'),
@@ -3350,7 +4105,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>' +
@@ -3395,6 +4150,7 @@ 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) {
@@ -3407,12 +4163,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
@@ -3471,7 +4235,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
@@ -3720,6 +4486,15 @@ async function refreshTabSessions() {
     paintTabs()
   } catch {}
 }
+// What had focus in the strip, to find it again after a repaint: the same control,
+// else (Keep open is gone once kept) the same tab's ×, else the tab itself.
+function tabFocusKey(el) {
+  const d = el.dataset, q = (a, v) => '[' + a + '="' + CSS.escape(v) + '"]'
+  if (d.tabClose) return [q('data-tab-close', d.tabClose), q('data-tab', d.tabClose)]
+  if (d.tabKeep) return [q('data-tab-keep', d.tabKeep), q('data-tab-close', d.tabKeep), q('data-tab', d.tabKeep)]
+  if (d.tab) return [q('data-tab', d.tab)]
+  return el.id ? ['#' + CSS.escape(el.id)] : null
+}
 function paintTabs() {
   const views = tabViews()
   const strip = document.getElementById('tabStrip'), row = document.getElementById('openRow'), pager = document.getElementById('tabPager')
@@ -3727,10 +4502,10 @@ function paintTabs() {
   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
+    const had = strip.contains(document.activeElement) ? tabFocusKey(document.activeElement) : 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 }) }
+    if (had) { const el = had.map((q) => strip.querySelector(q)).find(Boolean); if (el) el.focus({ preventScroll: true }) }
   }
   strip.hidden = false
   const rh = openRowHtml(views, esc)
@@ -3798,6 +4573,32 @@ document.addEventListener('click', (e) => {
   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) } })
+// The strip's buttons name themselves in a styled tip under them (hover after a
+// beat, keyboard focus at once), not a native title. The strip scrolls sideways,
+// which clips anything hanging below it, so the tip is one fixed element on the page.
+{
+  const tip = document.createElement('span'); tip.className = 'strip-tip'; tip.setAttribute('aria-hidden', 'true'); document.body.appendChild(tip)
+  let cur = null, timer = 0
+  const hide = () => { clearTimeout(timer); cur = null; tip.classList.remove('on') }
+  const show = (el, delay) => {
+    clearTimeout(timer); cur = el
+    timer = setTimeout(() => {
+      if (cur !== el || !el.isConnected) return hide()
+      tip.textContent = el.dataset.tip
+      const r = el.getBoundingClientRect(), w = tip.offsetWidth
+      tip.style.left = Math.round(Math.max(8, Math.min(innerWidth - w - 8, r.left + r.width / 2 - w / 2))) + 'px'
+      tip.style.top = Math.round(r.bottom + 4) + 'px'
+      tip.classList.add('on')
+    }, delay)
+  }
+  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip]')
+  document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
+  document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
+  document.addEventListener('focusin', (e) => { const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
+  document.addEventListener('focusout', (e) => { if (tipped(e) === cur) hide() })
+  for (const ev of ['pointerdown', 'scroll', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) hide() })
+}
 // 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)
@@ -3819,7 +4620,7 @@ document.addEventListener('click', (e) => { if (e.target.closest && $app.contain
     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, .tabs, .moremenu') || scrollsSideways(t)) return
+    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) => {
@@ -3884,7 +4685,7 @@ function keepPlace() {
   ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
   document.body.appendChild(ptr)
   const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 699.98px)')
-  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
+  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)
@@ -3934,6 +4735,43 @@ function keepPlace() {
   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() {
@@ -4067,6 +4905,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) {
@@ -4216,11 +5055,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
 })
 
@@ -4267,7 +5122,44 @@ 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
+    }
+    // 0.9.8 What it did
+    if (action === 'wid-toggle') { const ui = widOf(id); ui.open = !ui.open; paintWid(id); if (ui.open && !ui.tools && !ui.diff && !ui.loading) loadWid(id); return }
+    if (action === 'wid-refresh') return loadWid(id)
+    if (action === 'wid-tool') {
+      const ui = widOf(id), t = btn.dataset.tool
+      ui.toolOpen[t] = !ui.toolOpen[t]; paintWid(id)
+      // a command's output ends with what matters (a failure, the summary): open it at the end
+      const v = (ui.tools || []).find((x) => x.id === t)
+      const pre = ui.toolOpen[t] && v && (v.tool === 'Bash' || v.error) && document.querySelector('#wid-t-' + CSS.escape(t) + ' .wid-pre')
+      if (pre) pre.scrollTop = pre.scrollHeight
+      return
+    }
+    if (action === 'wid-tool-more') {
+      const ui = widOf(id), t = btn.dataset.tool
+      if (ui.toolLoading[t] === true) return
+      ui.toolLoading[t] = true; paintWid(id)
+      try { const r = await api('GET', widPath(id, 'tools') + '?tool=' + encodeURIComponent(t)); if (r.tool) ui.toolFull[t] = r.tool; delete ui.toolLoading[t] } catch { ui.toolLoading[t] = 'error' }
+      return paintWid(id)
+    }
+    if (action === 'wid-file') { const ui = widOf(id), p = btn.dataset.path; ui.fileOpen[p] = !ui.fileOpen[p]; paintWid(id); if (ui.fileOpen[p] && !ui.files[p]) loadWidFile(id, p); return }
+    if (action === 'wid-copy') {
+      const pageId = parseRoute().arg // the page's session (the copy button carries no id)
+      const ok = await copy(widCopyText(widOf(pageId), btn.dataset.kind, btn.dataset.key))
+      if (ok) {
+        const label = btn.getAttribute('aria-label')
+        clearTimeout(btn._copied); btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.dataset.tip = 'Copied'
+        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', label); 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
@@ -4370,6 +5262,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 }
@@ -4534,7 +5427,8 @@ document.addEventListener('click', async (ev) => {
     if (action === 'tl-session') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, session: btn.dataset.session || null }); return }
     if (action === 'tl-trigger') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, trigger: btn.dataset.trigger || null }); return }
     if (action === 'tl-clear') { saveRepos(window.localStorage, []); location.hash = '#/timeline?repo='; return }
-    if (action === 'clear-filters') { state.moreOpen = false; state.boardSpace = null; saveSpace(null); return setBoardFilter({ repos: [], status: null, project: null }) }
+    if (action === 'clear-filters') { state.moreOpen = false; state.boardSpace = null; saveSpace(null); setMachineFilter(''); return setBoardFilter({ repos: [], status: null, project: null }) }
+    if (action === 'machine-all') { setMachineFilter(''); return render() }
     // Projects (0.9.0): the filter chips, the chip on a card, and the menus
     if (action === 'board-project' || action === 'project-filter') {
       ev.preventDefault(); ev.stopPropagation()
@@ -4557,6 +5451,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)
@@ -4582,6 +5489,11 @@ 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)
@@ -4595,6 +5507,7 @@ document.addEventListener('click', async (ev) => {
       return render()
     }
     if (action === 'file-open') return openDoc(btn.dataset.session, { path: btn.dataset.path, plan: btn.dataset.plan })
+    if (action === 'lv-tool-open') return openToolOutput(id, btn.dataset.tool, btn.dataset.label) // 0.9.8: a Live tool chip opens its output
     if (action === 'doc-close') return closeDoc()
     if (action === 'doc-dl') { ev.preventDefault(); return openDocMenu(btn) }
     if (action === 'doc-copy' || action === 'doc-download' || action === 'doc-pdf') return docAction(action.slice(4))
@@ -4879,6 +5792,46 @@ async function openDoc(sessionId, { path, plan } = {}) {
     el.querySelector('.dv-body').innerHTML = '<div class="empty">' + esc(e.message) + '</div>'
   }
 }
+// 0.9.8 What it did: one tool's output (up to 64 KB, redacted on its Mac) in
+// the file viewer, from a Live tool chip. Copy and Download as text.
+async function openToolOutput(sessionId, toolId, label) {
+  if (!sessionId || !toolId) return
+  const el = docViewerEl()
+  const name = label || 'Tool output'
+  el.querySelector('.dv-title').textContent = name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
+  const dl = el.querySelector('.dv-dl'); dl.hidden = true
+  docUi.r = null; docUi.name = name
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  try {
+    const r = await api('GET', '/v1/sessions/' + encodeURIComponent(sessionId) + '/tools?tool=' + encodeURIComponent(toolId))
+    if (el.hidden) return
+    const t = r.tool || {}
+    el.querySelector('.dv-title').textContent = t.label || name
+    el.querySelector('.dv-sub').textContent = [t.what && t.what !== t.label ? t.what : '', t.error ? 'failed' : '', t.clipped ? 'cut to the first and last parts' : '', r.peer ? 'from ' + r.peer : ''].filter(Boolean).join(' · ')
+    const note = t.running ? 'Still running; no output yet.' : t.hidden ? widHidden(t.hidden) : !t.output && !t.patch ? 'No output.' : ''
+    const body = el.querySelector('.dv-body')
+    // an edit shows what it changed, drawn like a diff (DOM, textContent only)
+    if (!note && t.patch) { body.textContent = ''; const box = document.createElement('div'); box.className = 'gd-doc'; box.appendChild(renderDiff(document, t.patch, { label: 'Changes', numbers: t.patchAt != null })); body.appendChild(box) }
+    else body.innerHTML = note ? '<div class="empty">' + esc(note) + '</div>' : '<pre class="doc-pre">' + esc(t.output) + '</pre>'
+    const fname = t.patch ? 'changes.diff' : 'output.txt'
+    el.querySelector('.dv-ptitle').textContent = fname
+    if (!note) {
+      const doc = { type: 'text', mime: 'text/plain', name: fname, text: t.patch || t.output }
+      docUi.r = doc; docUi.name = fname
+      const items = docMenuItems(doc)
+      dl.hidden = false
+      dl.setAttribute('aria-haspopup', items.length > 1 ? 'menu' : 'false')
+      dl.querySelector('.chev').hidden = items.length <= 1
+      dl.removeAttribute('title')
+      dl.setAttribute('aria-label', 'Copy or download')
+    }
+  } catch (e) {
+    el.querySelector('.dv-body').innerHTML = '<div class="empty">' + esc(widError(e)) + '</div>'
+  }
+}
 function openDocMenu(btn) {
   const r = docUi.r
   const items = docMenuItems(r)
@@ -5069,16 +6022,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) => {
@@ -5139,7 +6097,7 @@ document.addEventListener('change', async (ev) => {
     return cuLoadOptions().then(render)
   }
   if (ev.target.id === 'tlSession') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, session: ev.target.value || null }); return }
-  if (ev.target.id === 'machineFilter') { state.machine = ev.target.value; localStorage.setItem('cp.machine', state.machine); render() }
+  if (ev.target.id === 'machineFilter') { setMachineFilter(ev.target.value); render() }
 })
 
 // Moving between Settings sections only swaps the section shown (v0.5.9): a
@@ -5181,7 +6139,46 @@ 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