@leftoff/cli 0.0.0-stage → 0.6.3

package/ui/app.js

@@ -0,0 +1,2979 @@
+// Leftoff web UI: plain JS, no build step, no CDN. Talks to the daemon's
+// /v1 API on the same origin (auth rides the cookie set at GET /).
+import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
+import { icon } from './icons.js'
+import { selectHtml, comboHtml, closeMenu } from './picker.js'
+import { SETTINGS, settingsKeyFor } from './settings-nav.js'
+import { repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches } from './repos.js'
+import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer } from './needs.js'
+import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
+import { mdInline, renderSection } from './changelog-md.js'
+const $app = document.getElementById('app')
+const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true }
+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))]
+
+const ORDER = [
+  ['needs_input', 'Needs you'],
+  ['active', 'Active'],
+  ['background', 'Background'],
+  ['waiting', 'Waiting'],
+  ['dormant', 'Dormant'],
+  ['stale', 'Stale'],
+  ['ended', 'Ended today'],
+]
+const LABEL = { needs_input: 'needs you', active: 'active', background: 'background', waiting: 'waiting', dormant: 'dormant', stale: 'stale', ended: 'ended' }
+
+// ------------------------------------------------------------ helpers
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+
+// Spaces (v0.5.8): Work / Personal / …, one remembered choice for the board and the digest.
+const SPACE_KEY = 'lo.space'
+const SPACE_WHY = { session: 'set for this session', repo: 'from its repo', agent: 'set for this agent', machine: 'its Mac’s default', default: 'its Mac’s name; pick a space in Settings → Spaces' }
+function sortSpacesUi(list) { return [...new Set(list.filter(Boolean))].sort((a, b) => (a === 'Work' ? -1 : b === 'Work' ? 1 : a.localeCompare(b, 'en', { sensitivity: 'base' }) || a.localeCompare(b))) }
+function spaceChip(s, { force = false } = {}) {
+  if (!s || !s.space || (!force && !state.showSpaces)) return ''
+  return '<span class="chip space" title="' + esc('Space: ' + s.space + ' (' + (SPACE_WHY[s.spaceSource] || '') + ')') + '">' + esc(s.space) + '</span>'
+}
+function readSpace(params) {
+  const v = params && params.get ? params.get('space') : null
+  if (v !== null && v !== undefined) return v || null
+  try { return window.localStorage.getItem(SPACE_KEY) || null } catch { return null }
+}
+function saveSpace(v) { try { if (v) window.localStorage.setItem(SPACE_KEY, v); else window.localStorage.removeItem(SPACE_KEY) } catch {} }
+// The tab row: All, then each space with its count. action: the data-action for a click.
+function spaceTabs(spaces, sel, counts, action, total) {
+  if (spaces.length < 2 && !sel) return ''
+  const b = (v, label, n) => '<button type="button" class="stab' + ((sel || '') === v ? ' on' : '') + '" role="tab" aria-selected="' + ((sel || '') === v) + '" data-action="' + action + '" data-space="' + esc(v) + '"><span class="sl">' + esc(label) + '</span>' + (n != null ? '<span class="rc">' + n + '</span>' : '') + '</button>'
+  return '<div class="spacetabs" role="tablist" aria-label="Spaces"><div class="track">' + b('', 'All', total) + spaces.map((sp) => b(sp, sp, counts ? counts.get(sp) || 0 : null)).join('') + '</div></div>'
+}
+
+async function api(method, path, body, { timeoutMs } = {}) {
+  const res = await fetch(path, { method, headers: body ? { 'content-type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined, credentials: 'same-origin', ...(timeoutMs && typeof AbortSignal !== 'undefined' && AbortSignal.timeout ? { signal: AbortSignal.timeout(timeoutMs) } : {}) })
+  const j = await res.json().catch(() => ({}))
+  if (!res.ok) { const e = new Error((j.error && j.error.message) || 'HTTP ' + res.status); e.code = j.error && j.error.code; e.status = res.status; throw e }
+  return j
+}
+
+function ago(iso) {
+  if (!iso) return '—'
+  const s = Math.max(0, (Date.now() - Date.parse(iso)) / 1000)
+  if (s < 45) return 'just now'
+  if (s < 3600) return Math.round(s / 60) + 'm ago'
+  if (s < 86400) return Math.round(s / 3600) + 'h ago'
+  return Math.round(s / 86400) + 'd ago'
+}
+function idle(sec) {
+  if (sec == null) return ''
+  if (sec < 60) return 'idle <1m'
+  if (sec < 3600) return 'idle ' + Math.round(sec / 60) + 'm'
+  if (sec < 86400) return 'idle ' + Math.round(sec / 3600) + 'h'
+  return 'idle ' + Math.round(sec / 86400) + 'd'
+}
+function clock(iso) { return iso ? new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '—' }
+function toast(msg, ms = 2600) {
+  const t = document.getElementById('toast')
+  t.textContent = msg
+  t.classList.add('show')
+  clearTimeout(toast.t)
+  toast.t = setTimeout(() => t.classList.remove('show'), ms)
+}
+async function copy(text) {
+  try { await navigator.clipboard.writeText(text); toast('Copied: ' + text) } catch { prompt('Copy this:', text) }
+}
+const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
+
+const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
+
+// The sections an informative / long checkpoint adds below the three lines (v0.4.6).
+const EXTRA_TITLES = [['decisions', 'Key decisions'], ['questions', 'Open questions'], ['files', 'Files touched'], ['didntWork', 'What didn’t work'], ['recap', 'Recap'], ['nextSteps', 'Next steps']]
+function hasExtras(cp) { return !!cp && EXTRA_TITLES.some(([k]) => (Array.isArray(cp[k]) ? cp[k].length : !!cp[k])) }
+function cpExtras(cp) {
+  let h = ''
+  for (const [k, title] of EXTRA_TITLES) {
+    const v = cp[k]
+    if (!v || (Array.isArray(v) && !v.length)) continue
+    h += '<div class="cpx-sec cpx-' + k + '"><div class="cpx-h">' + esc(title) + '</div>'
+    if (k === 'recap') h += '<p>' + fmtCode(v) + '</p>'
+    else if (k === 'files') h += '<ul>' + v.map((f) => '<li>' + (f.path ? '<code>' + esc(f.path) + '</code>' : '') + (f.path && f.why ? ' — ' : '') + fmtCode(f.why || '') + '</li>').join('') + '</ul>'
+    else h += '<' + (k === 'nextSteps' ? 'ol' : 'ul') + '>' + v.map((x) => '<li>' + fmtCode(x) + '</li>').join('') + '</' + (k === 'nextSteps' ? 'ol' : 'ul') + '>'
+    h += '</div>'
+  }
+  return h
+}
+
+// more: show the informative / long sections, folded (open: unfolded).
+function cpBlock(cp, { showWhen = true, more = false, open = false } = {}) {
+  if (!cp) return '<div class="nocp">No checkpoint yet. One appears when the session goes quiet, or press “Checkpoint now”.</div>'
+  const you = /^YOU:/i.test(cp.next || '')
+  const n = EXTRA_TITLES.filter(([k]) => (Array.isArray(cp[k]) ? cp[k].length : !!cp[k])).length
+  return '<dl class="cp">' +
+    '<dt>Doing</dt><dd>' + fmtCode(cp.doing) + '</dd>' +
+    '<dt>Stopped</dt><dd>' + fmtCode(cp.stoppedAt) + '</dd>' +
+    '<dt>Next</dt><dd class="next' + (you ? ' you' : '') + '">' + fmtCode(cp.next) + '</dd>' +
+    (showWhen ? '<div class="when">' + esc(cp.trigger) + ' checkpoint · ' + esc(ago(cp.createdAt)) + (cp.generator && cp.generator.by ? ' · by ' + esc(cp.generator.by) : '') + '</div>' : '') +
+    '</dl>' +
+    (more && n ? '<details class="cp-more"' + (open ? ' open' : '') + '><summary>' + (cp.length === 'long' ? 'Recap, decisions, files' : 'Decisions, files, open questions') + ' <span class="faint">· ' + n + ' section' + (n === 1 ? '' : 's') + '</span></summary><div class="cpx">' + cpExtras(cp) + '</div></details>' : '')
+}
+
+// External agents (v0.5.4): the chip a feed's sessions wear, like a machine's.
+function agentChip(a, { title } = {}) {
+  if (!a) return ''
+  return '<span class="chip machine agent' + (a.ok === false ? ' stale' : '') + '" title="' + esc(title || ('external agent · ' + (a.pullsHere ? 'pulled by this Mac' : 'pulled by ' + (a.puller || 'another Mac')) + (a.lastSuccessAt ? ' · last pull ' + ago(a.lastSuccessAt) : ''))) + '">' + esc(a.icon || '◆') + ' ' + esc(a.display || a.name) + '</span>'
+}
+
+function where(s) {
+  if (s.agent) return (s.project ? '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(s.repoLabel) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc(s.repoLabel + ' · show only this project') + '">' + esc(s.repoLabel) + '</button>' : '') + agentChip(s.agent)
+  const branch = s.repo && s.repo.branch
+  const label = s.repoLabel || s.repoName || 'no repo'
+  return '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' +
+    (multi() || !s.isLocal ? '<span class="chip machine' + (s.isLocal ? '' : ' remote') + '" title="' + (s.isLocal ? 'this machine' : 'synced from another machine') + '">⌂ ' + esc(s.machine) + '</span>' : '')
+}
+
+// Notices above the board: things that need the user's hand, from /v1/health.
+function banners() {
+  const h = state.health || {}
+  let out = ''
+  const wn = h.whatsNew || {}
+  if (wn.upgradeNotice) {
+    out += '<div class="banner info" role="status"><span class="grow"><b>Updated to v' + esc(h.version) + '</b>' + (wn.upgradedFrom && /^\d/.test(wn.upgradedFrom) ? ' from v' + esc(wn.upgradedFrom) : '') + '. See what changed.</span>' +
+      '<a class="btn primary" href="#/whats-new">What’s new</a><button type="button" class="btn x" data-action="dismiss-upgrade" aria-label="Dismiss" title="Dismiss">✕</button></div>'
+  }
+  const u = h.update || {}
+  if (u.available) {
+    const inc = (state.updates && state.updates.incoming) || []
+    const items = inc.slice(0, 2).flatMap((e) => e.sections.flatMap((s) => s.items.map((it) => ({ v: e.version, t: it })))).slice(0, 4)
+    out += '<div class="banner info update" role="status"><div class="grow"><b>Leftoff ' + (u.remoteVersion ? 'v' + esc(u.remoteVersion) : esc(u.remoteSha || 'update')) + ' is available</b> · you have v' + esc(h.version) +
+      (items.length ? '<ul class="incoming">' + items.map((x) => '<li>' + mdInline(firstSentence(x.t)) + '</li>').join('') + '</ul>' : '') + '</div>' +
+      '<code class="cmd">leftoff upgrade</code><button type="button" class="btn" data-action="copy-cmd" data-cmd="leftoff upgrade">Copy</button></div>'
+  }
+  const mod = h.mod
+  if (mod && mod.failed && mod.failed.length) {
+    out += '<div class="banner warn" role="status"><b>Some mod commands didn\'t register</b> in the last Claude Code session' + (mod.machine ? ' on ' + esc(mod.machine) : '') + ': ' +
+      mod.failed.map((f) => '<code>/' + esc(f.want) + '</code> (' + esc(f.error || 'unknown error') + ')').join(', ') + '. Run <code>leftoff doctor</code> for details.</div>'
+  }
+  return out
+}
+
+function updateLine() {
+  const h = state.health || {}
+  const u = h.update || {}
+  if (u.available) return 'v' + esc(u.remoteVersion || '?') + ' is available: run <code>leftoff upgrade</code>.'
+  if (u.error) return 'Last check couldn’t reach the repo (' + esc(u.error) + ').'
+  if (u.checkedAt) return 'Up to date (v' + esc(h.version) + '), checked ' + esc(ago(u.checkedAt)) + '.'
+  return 'Not checked yet.'
+}
+
+// **bold**, `code`, [text](url) and bare links (ui/changelog-md.js); everything else escaped.
+const mdInlineMain = (s) => mdInline(s)
+function firstSentence(s) { const m = String(s).match(/^(.+?[.!?])(\s|$)/); return m ? m[1] : s }
+
+async function viewWhatsNew() {
+  const cl = await api('GET', '/v1/changelog')
+  const u = (state.health && state.health.update) || {}
+  let upd = null
+  if (u.available) { try { upd = await api('GET', '/v1/updates') } catch {} }
+  let html = '<div class="pagehead"><div><h1>What’s new</h1><div class="sub">You’re on v' + esc(cl.current) + '. New since you last looked are marked.</div></div>' +
+    '<div class="actions"><button type="button" class="btn" data-action="check-updates">Check for updates</button></div></div>'
+  if (upd && upd.available && upd.incoming && upd.incoming.length) {
+    html += '<h2>Coming in the next update</h2><div class="wn">' + upd.incoming.map((e) => wnCard(e, { coming: true })).join('') + '</div>' +
+      '<div class="banner info mt"><span class="grow">Install it with <code>leftoff upgrade</code>. It updates the CLI and the mod and restarts the daemon.</span><button type="button" class="btn" data-action="copy-cmd" data-cmd="leftoff upgrade">Copy</button></div><h2>Installed</h2>'
+  }
+  html += '<div class="wn">' + cl.entries.map((e) => wnCard(e, { current: e.version === cl.current })).join('') + '</div>'
+  if (!cl.entries.length) html += '<div class="empty">No changelog in this install.</div>'
+  $app.innerHTML = html
+  if (cl.entries.some((e) => e.isNew) || cl.upgradeNotice) {
+    try { await api('POST', '/v1/changelog/seen', { version: cl.current }); refreshHealth() } catch {}
+  }
+}
+
+function wnCard(e, { current = false, coming = false } = {}) {
+  return '<article class="wn-card' + (e.isNew ? ' is-new' : '') + (coming ? ' coming' : '') + '">' +
+    '<header><span class="wn-ver">v' + esc(e.version) + '</span>' + (e.date ? '<span class="wn-date">' + esc(e.date) + '</span>' : '') +
+    (e.isNew ? '<span class="pill new">New</span>' : '') + (current ? '<span class="pill here">Installed</span>' : '') + (coming ? '<span class="pill soon">Available</span>' : '') + '</header>' +
+    e.sections.map(renderSection).join('') +
+    '</article>'
+}
+
+// Open or closed, for real (v0.4): the daemon checks Claude Code's pid on this
+// machine every 30 s; other machines' sessions go by their heartbeat.
+function liveDot(s) {
+  const term = s.terminal ? ' in ' + s.terminal.label : ''
+  let cls = 'unknown', tip = 'Open or closed: unknown (hooks-only capture records no process)'
+  if (s.live === 'open') {
+    cls = 'open'
+    tip = s.liveVia === 'pid' ? 'Open · Claude Code is running' + term + (s.tty ? ' (' + s.tty.replace('/dev/', '') + ')' : '') : 'Open · heartbeat from ' + s.machine + ' (can\'t check its process from here)'
+  } else if (s.live === 'closed') {
+    cls = 'closed'
+    tip = 'Closed ' + ago(s.closedAt) + (s.liveVia === 'pid' ? ' · its Claude Code process exited' : s.liveVia === 'heartbeat' ? ' · no heartbeat' : '')
+  }
+  return '<span class="live ' + cls + '" title="' + esc(tip) + '" aria-label="' + esc(tip) + '"></span>'
+}
+function liveNote(s) {
+  if (s.live === 'closed') return 'closed ' + ago(s.closedAt)
+  if (s.live === 'open' && s.liveVia === 'heartbeat' && !s.isLocal) return 'open (heartbeat)'
+  return s.live === 'open' ? 'open' : ''
+}
+function goButton(s) {
+  if (s.live === 'closed') return ''
+  const j = s.jump || {}
+  // Another machine's session (v0.5.2): Go runs there, through its Leftoff, when it allows it.
+  if (!s.isLocal) {
+    if (!j.peer) return ''
+    const label = 'Go on ' + s.machine + ' ↗'
+    if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled title="Go only works from a Mac’s own browser">' + esc(label) + '</button>'
+    if (!j.supported) return '<span class="go-off"><button type="button" class="btn go" disabled title="' + esc(j.reason || '') + '">' + esc(label) + '</button><span class="why">' + esc(peerWhy(j)) + '</span></span>'
+    const st = goState.get(s.id)
+    return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="' + esc(label) + '" title="' + esc('Bring this session’s tab to the front on ' + s.machine) + '">' + esc(st ? st.label : label) + '</button>'
+  }
+  if (state.viewerLocal === false) return '<button type="button" class="btn go" disabled title="Go switches tabs on the machine running Leftoff, so it only works from that machine’s own browser (localhost)">Go ↗</button>'
+  if (!j.supported) return '<button type="button" class="btn go" disabled title="' + esc('Can’t jump: ' + (j.reason || 'unsupported terminal')) + '">Go ↗</button>'
+  const st = goState.get(s.id)
+  return '<button type="button" class="btn go' + (st && st.cls ? ' ' + st.cls : '') + '" data-action="go" data-id="' + esc(s.id) + '"' + (st && st.disabled ? ' disabled' : '') + ' data-idle="Go ↗" title="' + esc('Bring this session’s ' + (s.terminal ? s.terminal.label + ' ' : '') + 'tab to the front') + '">' + esc(st ? st.label : 'Go ↗') + '</button>'
+}
+
+// The short reason a cross-machine button is grey (the full one is its tooltip).
+function peerWhy(j) {
+  const c = j.code
+  return c === 'not_allowed' ? 'not allowed on ' + j.peer : c === 'unreachable' ? j.peer + ' isn’t reachable' : c === 'key_changed' ? j.peer + '’s key changed' : c === 'no_key' ? j.peer + ' needs Leftoff 0.5.2' : c === 'checking' ? 'checking ' + j.peer + '…' : c === 'no_route' ? 'no route to ' + j.peer : c === 'off' ? 'off here' : (j.reason || '').replace(/^runs on [^:]+: /, '')
+}
+
+const AGENT_STATUS = { active: 'working on it', waiting: 'waiting', done: 'done' }
+const plain = (t) => '<span class="plain">' + esc(t) + '</span>'
+function agentCpBlock(cp) {
+  if (!cp) return '<div class="nocp">No checkpoint in the feed yet.</div>'
+  return '<dl class="cp">' + '<dt>Latest</dt><dd>' + plain(cp.summary) + '</dd>' + (cp.done ? '<dt>Done</dt><dd>' + plain(cp.done) + '</dd>' : '') +
+    (cp.next ? '<dt>Next</dt><dd class="next">' + plain(cp.next) + '</dd>' : '') + '<dt>When</dt><dd class="faint">' + esc(ago(cp.createdAt)) + '</dd></dl>'
+}
+function agentListChips(s) {
+  return (s.lists || []).map((l) => '<a class="chip listchip' + (l.done === l.total ? ' done' : '') + '" href="' + listHref(l.ref) + '" title="' + esc(l.name) + ' (read-only)">' + icon('list-checks') + esc(l.progress) + ' <span class="ln">' + esc(l.name) + '</span></a>').join('')
+}
+function agentCard(s) {
+  const a = s.agent || {}
+  const n = s.needsYou
+  const href = '#/s/' + encodeURIComponent(s.id)
+  return '<article class="card agentcard ' + esc(s.status) + '" data-id="' + esc(s.id) + '" data-href="' + esc(href) + '">' +
+    '<div class="row1"><div class="title"><a href="' + href + '">' + esc(s.title || 'Untitled') + '</a></div>' + pill(s.status) + '</div>' +
+    '<div class="meta">' + spaceChip(s) + where(s) + '<span>' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + '</span><span>·</span><span>updated ' + esc(ago(s.lastActivityAt)) + '</span></div>' +
+    agentListChips(s) + (n ? cardBadge(n) : '') + agentCpBlock(s.latestCheckpoint) +
+    '<a class="cplink" href="' + href + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session') + ' →</a>' +
+    '<div class="actions-row">' + (n ? agentReplyButton(a, 'btn') : '') +
+      '<span class="ro">read-only · from ' + esc(a.display || a.name) + '’s feed</span></div></article>'
+}
+
+function card(s) {
+  if (s.agent) return agentCard(s)
+  const endedNote = s.live === 'closed' ? '' : s.status === 'ended' ? 'ended ' + ago(s.endedAt) : idle(s.idleSec)
+  const ln = liveNote(s)
+  const nb = s.needsYou ? cardBadge(s.needsYou) : ''
+  return '<article class="card ' + esc(s.status) + (s.live === 'closed' ? ' is-closed' : '') + (s.needsYou && s.needsYou.blocking ? ' needs-you' : '') + '" data-id="' + esc(s.id) + '" data-href="#/s/' + esc(encodeURIComponent(s.id)) + '">' +
+    '<div class="row1"><div class="title">' + liveDot(s) +
+      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' +
+      '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
+    '</div>' + pill(s.status) + '</div>' +
+    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
+      (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
+    listChips(s) + nb + cpBlock(s.latestCheckpoint) +
+    '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
+    '<div class="actions-row">' + goButton(s) +
+      '<button type="button" class="btn" data-action="resume">Copy resume</button>' +
+      (s.isLocal ? '<button type="button" class="btn" data-action="checkpoint">Checkpoint now</button>' +
+        '<button type="button" class="btn" data-action="pin">' + (s.pinned ? 'Unpin' : 'Pin') + '</button>' +
+        '<button type="button" class="btn" data-action="archive">Archive</button>' : '<span class="ro">' + (s.peer && s.peer.ok ? 'lives on ' + esc(s.machine) + ' · answering and Go work through it' : 'read-only here · lives on ' + esc(s.machine)) + '</span>') +
+    '</div></article>'
+}
+
+// ------------------------------------------------------------ views
+
+const FILTERS = {
+  needs: { label: 'Needs you', cls: 's-needs_input', statuses: ['needs_input'] },
+  active: { label: 'Active', cls: 's-active', statuses: ['active', 'background'] },
+  waiting: { label: 'Waiting', cls: 's-waiting', statuses: ['waiting'] },
+  dormant: { label: 'Dormant', cls: 's-dormant', statuses: ['dormant', 'stale'] },
+  ended: { label: 'Ended today', cls: 's-ended', statuses: ['ended'] },
+}
+
+// The board's filter: hash first, then the last repo choice from this browser.
+function boardFilter() {
+  const params = (state.route && state.route.params) || new URLSearchParams()
+  const f = readFilter(params, window.localStorage)
+  // A bare #/ restored from localStorage: put it in the address bar so the
+  // view is linkable as it stands.
+  if (f.from === 'storage') history.replaceState(null, '', hashFor(f))
+  state.boardFilter = f
+  return f
+}
+function setBoardFilter(next) {
+  const f = { repos: next.repos || [], status: next.status || null }
+  saveRepos(window.localStorage, f.repos)
+  history.replaceState(null, '', hashFor(f))
+  state.route = parseRoute()
+  return render()
+}
+// The board's filter link, or the same on the Needs you page (#/waiting?repo=…).
+function hashFor(f) {
+  let h = filterHash(f)
+  if (state.boardSpace) h += (h.includes('?') ? '&' : '?') + 'space=' + encodeURIComponent(state.boardSpace)
+  return state.route && state.route.name === 'waiting' ? h.replace(/^#\//, '#/waiting') : h
+}
+
+// The repo chips under the stats: All, then repos by most recent activity,
+// the top 8 in the row and the rest behind More ▾ with a filter box.
+function repoRow(shown, f) {
+  const statusOnly = applyFilter(shown, { status: f.status })
+  return chipBar(repoChips(shown, { countIn: statusOnly }), f.repos, statusOnly.length, 'no sessions today')
+}
+
+// The repo chip row, shared by the board and the timeline: All, the top 8,
+// and More ▾ with a filter box. chips: repoChips() output.
+function chipBar(chips, selected, allCount, emptyNote) {
+  if (chips.length < 2 && !selected.length) return ''
+  // A repo named in the link but with nothing here still gets a chip, so it can be cleared.
+  for (const tok of selected) if (!chips.some((c) => chipSelected([tok], c))) chips.push({ key: tok, label: tok, count: 0, total: 0, last: 0, missing: true })
+  const { shown: row, more } = splitChips(chips, selected, 8)
+  const chip = (c) => '<button type="button" class="rchip' + (chipSelected(selected, c) ? ' on' : '') + (c.count ? '' : ' zero') + '" data-action="repo" data-repo="' + esc(c.label) + '" data-key="' + esc(c.key) + '" title="' + esc((c.missing ? emptyNote + ' · ' : '') + c.key + ' · shift- or ⌘-click to pick several') + '" aria-pressed="' + chipSelected(selected, c) + '"><span class="rl">' + esc(c.label) + '</span><span class="rc">' + c.count + '</span></button>'
+  const all = '<button type="button" class="rchip all' + (selected.length ? '' : ' on') + '" data-action="repo-all" aria-pressed="' + !selected.length + '"><span class="rl">All</span><span class="rc">' + allCount + '</span></button>'
+  let menu = ''
+  if (more.length) {
+    menu = '<details class="repomore"' + (state.moreOpen ? ' open' : '') + '><summary class="rchip">More ▾ <span class="rc">' + more.length + '</span></summary><div class="menu" role="menu">' +
+      '<input type="search" class="morefilter" placeholder="Filter repos…" aria-label="Filter repos" value="' + esc(state.moreQuery || '') + '">' +
+      '<div class="opts">' + more.map((c) => '<button type="button" class="opt' + (chipSelected(selected, c) ? ' on' : '') + '" data-action="repo" data-repo="' + esc(c.label) + '" data-key="' + esc(c.key) + '" data-search="' + esc((c.label + ' ' + c.key).toLowerCase()) + '" title="' + esc(c.key) + '"' + (state.moreQuery && !(c.label + ' ' + c.key).toLowerCase().includes(state.moreQuery.toLowerCase()) ? ' hidden' : '') + '><span class="rl">' + esc(c.label) + '</span><span class="rc">' + c.count + '</span></button>').join('') + '</div></div></details>'
+  }
+  return '<div class="repos" role="group" aria-label="Filter by repo"><div class="track">' + all + row.map(chip).join('') + '</div>' + menu + '</div>'
+}
+
+async function viewBoard() {
+  if (!state.health) await refreshHealth()
+  if (state.health && state.health.update && state.health.update.available && !state.updates) { try { state.updates = await api('GET', '/v1/updates') } catch {} }
+  const { sessions, viewer } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
+  state.sessions = sessions
+  state.viewerLocal = viewer ? viewer.local !== false : true
+  state.mayAnswer = viewer ? viewer.mayAnswer !== false : true
+  try { state.restore = await api('GET', '/v1/restore') } catch { state.restore = null }
+  const today = new Date(); today.setHours(0, 0, 0, 0)
+  const recent = sessions.filter((s) => !(s.status === 'ended' && Date.parse(s.endedAt || 0) < today.getTime()))
+  // v0.4.8: sessions with nothing in them yet (no prompt, name or checkpoint,
+  // not a resumed conversation) fold into one "N empty sessions" row. One
+  // appears on the board as itself after its first prompt. Pinned ones, and
+  // ones that need you, always show.
+  const isFolded = (s) => s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking)
+  const shown = recent.filter((s) => !isFolded(s))
+  const empties = recent.filter(isFolded)
+  const rank = Object.fromEntries(ORDER.map(([k], i) => [k, i]))
+  // grouped Needs you → Active → Background → Waiting → Dormant → Stale → Ended today; pinned first within a group
+  shown.sort((a, b) => (rank[a.status] - rank[b.status]) || (b.pinned - a.pinned) || (Date.parse(b.lastActivityAt || 0) - Date.parse(a.lastActivityAt || 0)))
+  // Status AND repo (v0.4.2). The repo choice lives in the hash (linkable)
+  // and in localStorage (survives a bare #/); the status choice in the hash.
+  const f = boardFilter()
+  const filter = f.status
+  // Spaces (v0.5.8): All / Work / Personal …, ahead of status and repo.
+  const spaces = sortSpacesUi(recent.map((s) => s.space))
+  state.showSpaces = spaces.length > 1
+  let sp = readSpace((state.route && state.route.params) || new URLSearchParams())
+  if (sp && !spaces.includes(sp)) sp = null
+  state.boardSpace = sp
+  const spCounts = new Map(spaces.map((x) => [x, shown.filter((s) => s.space === x).length]))
+  const allShown = shown
+  const inSpace = sp ? shown.filter((s) => s.space === sp) : shown
+  const inRepos = applyFilter(inSpace, { repos: f.repos })
+  const count = (k) => inRepos.filter((s) => FILTERS[k].statuses.includes(s.status)).length
+  const list = applyFilter(inSpace, f)
+  let html = '<div class="pagehead"><div><h1>Sessions</h1><div class="sub">Every Claude Code session on ' + (multi() ? 'your machines' : 'this machine') + (agentNames().length ? ', plus ' + esc(agentNames().join(' and ')) : '') + ', grouped by what needs you.</div></div>' +
+    '<div class="actions">' + (multi() || agentNames().length ? selectHtml({ id: 'machineFilter', cls: 'btn', label: 'Machine', value: state.machine,
+      options: [['', 'All machines'], ...state.health.machines.map((m) => [m, m + (m === state.health.machine ? ' (this one)' : '')]), ...agentNames().map((m) => [m, m + ' (agent)'])] }) : '') +
+    '<a class="btn primary" href="#/catchup/new">' + icon('coffee') + 'Catch me up</a>' +
+    '<a class="btn" href="#/digest">' + icon('newspaper') + 'Today’s digest →</a></div></div>'
+  html += restoreBanner()
+  // Needs you (v0.4.4): every session waiting on you, whatever the filters, longest wait first.
+  const needs = needsItems(sessions)
+  html += needsStrip(needs, needOpts())
+  html += '<div class="stats">' + Object.entries(FILTERS).map(([k, fl]) =>
+    '<button type="button" class="stat' + (filter === k ? ' on' : '') + '" data-action="filter" data-filter="' + k + '"><div class="n">' + count(k) + '</div><div class="k"><span class="pill ' + fl.cls + '" aria-hidden="true"></span>' + esc(fl.label) + '</div></button>').join('') + '</div>'
+  html += spaceTabs(spaces, sp, spCounts, 'board-space', allShown.length)
+  html += repoRow(inSpace, f)
+  if (!shown.length && !empties.length) {
+    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 inWhat = (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')
+    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) {
+    html += '<div class="grid mt">' + list.map(card).join('') + '</div>'
+  }
+  html += emptyFold(applyFilter(sp ? empties.filter((s) => s.space === sp) : empties, { repos: f.repos }))
+  $app.innerHTML = banners() + html
+}
+
+// The folded row of empty sessions (v0.4.8), closed by default.
+function emptyFold(list) {
+  if (!list.length) return ''
+  const n = list.length
+  return '<details class="emptyfold mt" id="emptyFold"' + (state.emptyOpen ? ' open' : '') + '>' +
+    '<summary><span class="ef-n">' + n + '</span> ' + (n === 1 ? 'empty session' : 'empty sessions') +
+    '<span class="ef-hint">open, no prompt yet · each shows up here as itself after its first prompt</span></summary>' +
+    '<div class="grid">' + list.map(card).join('') + '</div></details>'
+}
+
+// Restore (v0.4.7): the sessions that were open before this machine restarted,
+// with a checkbox each; Restore opens each in a new Ghostty tab, resumed by id.
+// Opening tabs runs on the Mac, so (like Go) only its own browser may press it.
+const restoreUi = { open: false, off: new Set(), result: null }
+function restoreDismissKey(r) { return 'lo.restore.dismissed:' + (r.restartAt || '') }
+function restorePicked() { const r = state.restore; return r ? r.sessions.filter((s) => !restoreUi.off.has(s.id)) : [] }
+function restoreBanner() {
+  const r = state.restore
+  if (!r || !r.sessions || !r.sessions.length) return restoreUi.result ? restoreResult() : ''
+  try { if (localStorage.getItem(restoreDismissKey(r)) === '1' && !restoreUi.open) return '' } catch {}
+  const n = r.sessions.length
+  const what = r.restartKind === 'boot' ? (r.ghostty ? 'your Mac' : 'this machine') + ' restarted' : 'Leftoff restarted'
+  const when = r.restartAt ? ' (' + clock(r.restartAt) + ')' : ''
+  const head = '<b>' + n + ' session' + (n === 1 ? ' was' : 's were') + ' open before ' + what + '</b>' + esc(when)
+  if (!restoreUi.open) {
+    return '<div class="banner info restore" id="restoreBanner" role="status"><span class="grow">' + head + '. Put them back, each in its own Ghostty tab.</span>' +
+      '<button type="button" class="btn primary" data-action="restore-open">' + icon('rotate-ccw') + 'Restore…</button>' +
+      '<button type="button" class="btn x" data-action="restore-dismiss" aria-label="Not now" title="Not now">✕</button></div>'
+  }
+  const local = state.viewerLocal !== false
+  const picked = restorePicked().length
+  const rows = r.sessions.map((s) => '<label class="rs-row"><input type="checkbox" name="rs" value="' + esc(s.id) + '"' + (restoreUi.off.has(s.id) ? '' : ' checked') + '>' +
+    '<span class="rs-main"><span class="rs-t">' + esc(s.title || '(untitled)') + '</span><span class="rs-m">' + esc([s.repoLabel, s.branch, s.lastAliveAt ? 'last seen ' + ago(s.lastAliveAt) : null, 'cp:' + (s.shortId || s.id.slice(0, 8))].filter(Boolean).join(' · ')) + '</span></span></label>').join('')
+  return '<div class="banner info restore open" id="restoreBanner" role="region" aria-label="Restore sessions"><div class="rs-head"><span class="grow">' + head + '. Each opens in a new Ghostty tab, in its folder, with <code>claude --resume</code> and its name.</span>' +
+    '<button type="button" class="btn x" data-action="restore-close" aria-label="Close" title="Close">✕</button></div>' +
+    '<div class="rs-list">' + rows + '</div>' +
+    '<div class="rs-actions">' +
+    (local ? '<button type="button" class="btn primary" data-action="restore-go" id="restoreGo"' + (picked ? '' : ' disabled') + '>' + icon('rotate-ccw') + 'Restore ' + picked + '</button>'
+      : '<button type="button" class="btn primary" disabled title="Restore opens Ghostty tabs on the Mac running Leftoff, so it only works from that Mac’s own browser (localhost)">Restore ' + picked + '</button>') +
+    '<button type="button" class="btn" data-action="restore-all">' + (picked === r.sessions.length ? 'Select none' : 'Select all') + '</button>' +
+    '<button type="button" class="btn" data-action="restore-copy">Copy commands</button>' +
+    (local ? '' : '<span class="rs-note">This opens tabs on the Mac, so only its own browser can do it (or run <code>leftoff restore</code> there).</span>') +
+    '</div>' + (restoreUi.result ? restoreResult() : '') + '</div>'
+}
+function restoreResult() {
+  const x = restoreUi.result
+  if (!x) return ''
+  if (x.how === 'print') {
+    return '<div class="banner warn rs-result" role="alert"><div class="grow"><b>Couldn’t open Ghostty tabs</b>: ' + esc(x.message) + '. Run these yourself, one per tab:' +
+      '<pre class="rs-cmds">' + esc(x.sessions.map((s) => s.command).join('\n')) + '</pre></div><button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(x.sessions.map((s) => s.command).join('\n')) + '">Copy</button></div>'
+  }
+  const bad = x.sessions.filter((s) => !s.ok)
+  if (!bad.length) return ''
+  return '<div class="banner warn rs-result" role="alert"><div class="grow"><b>' + bad.length + ' didn’t open</b>:<pre class="rs-cmds">' + esc(bad.map((s) => s.command + '   # ' + (s.error || '')).join('\n')) + '</pre></div></div>'
+}
+
+// #/waiting (v0.4.4): everything waiting on you, longest wait first, the board's
+// repo chips, and what happened to recent requests while you were away.
+async function viewWaiting() {
+  const [{ sessions, viewer }, needs] = await Promise.all([api('GET', '/v1/sessions?limit=200'), api('GET', '/v1/needs?recent=20')])
+  state.sessions = sessions
+  state.viewerLocal = viewer ? viewer.local !== false : true
+  state.mayAnswer = viewer ? viewer.mayAnswer !== false : true
+  const all = needsItems(sessions)
+  const f = boardFilter()
+  const shownSessions = applyFilter(all.map((n) => n.session), { repos: f.repos })
+  const items = all.filter((n) => shownSessions.includes(n.session))
+  let html = '<div class="pagehead"><div><h1>Needs you</h1><div class="sub">Permission prompts and questions waiting on you, longest wait first. Answer here, or Go to the terminal.' +
+    (state.mayAnswer ? '' : ' Answering from this device is off.') + '</div></div></div>'
+  html += chipBar(repoChips(all.map((n) => n.session)), f.repos, all.length, 'nothing waiting')
+  if (!items.length) html += '<div class="empty mt"><p><strong>Nothing waiting on you.</strong></p><p>When a session asks for permission or asks you a question, it shows up here and at the top of the board.' + (f.repos.length && all.length ? ' (' + all.length + ' in other repos. <button type="button" class="linkish" data-action="clear-filters">Show all</button>)' : '') + '</p></div>'
+  else html += '<section class="needs-strip quiet mt" aria-label="Waiting"><div class="needs-list">' + items.map((n) => needPanel(n, needOpts())).join('') + '</div></section>'
+  const recent = needs.recent || []
+  html += '<details class="recent"' + (state.recentOpen !== false ? ' open' : '') + '><summary>Recently answered <span class="count">' + recent.length + '</span></summary>' +
+    (recent.length ? '<ul>' + recent.map((r) => '<li><span class="t" title="' + esc(r.at) + '">' + esc(ago(r.at)) + '</span><a href="#/s/' + encodeURIComponent(r.session.id) + '">' + esc(r.session.title || 'Untitled session') + '</a>' +
+      (r.session.repoLabel ? '<span class="chip mono">' + esc(r.session.repoLabel) + '</span>' : '') +
+      '<span class="out-' + esc(r.state) + '">' + esc(r.outcome) + '</span><span class="what">' + esc(String(r.what || '').slice(0, 200)) + '</span>' +
+      (r.where ? '<span class="where">' + esc(r.where) + '</span>' : '') + '</li>').join('') + '</ul>'
+      : '<div class="nocp">Nothing yet since the daemon started.</div>') +
+    '<div class="hint">Board answers are also written to each session’s answers.md. This list is kept since the daemon last started.</div></details>'
+  $app.innerHTML = banners() + html
+}
+
+// The nav's count, the page title and the favicon dot: visible from a background tab.
+function paintNeedsCount(n) {
+  const c = document.getElementById('needsCount')
+  if (c) { c.hidden = !n; c.textContent = n > 99 ? '99+' : String(n) }
+  const tab = document.getElementById('needsTab')
+  if (tab) { tab.classList.toggle('has-needs', !!n); tab.title = n ? n + ' waiting on you' : 'Nothing waiting on you' }
+  document.title = (n ? '(' + n + ') ' : '') + 'Leftoff'
+  // The tab icon gets a red dot while something waits (leftoff-favicon-badge,
+  // v0.4.5); the PNG is for browsers without SVG favicons.
+  const fav = document.getElementById('favicon')
+  const png = document.getElementById('favicon-png')
+  if (fav && paintNeedsCount.last !== !!n) {
+    paintNeedsCount.last = !!n
+    fav.href = n ? 'favicon-badge.svg' : 'favicon.svg'
+    if (png) png.href = n ? 'favicon-badge-32.png' : 'favicon-32.png'
+  }
+}
+
+const IS_MAC = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)
+function needOpts(extra = {}) {
+  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, goButton: (s) => goButton(s), agoFn: ago, kbd: IS_MAC ? '⌘↵' : 'Ctrl↵', ...extra }
+}
+
+// ⌘↵ (Ctrl+↵ off a Mac) in a Needs-you text box (the Deny note, a question's
+// typed answer, the Reply box) presses that box's button, the same click as the
+// mouse: same request, same rate limit and Origin check. Plain Enter still types
+// a newline in the Reply box. Held keys repeat; only the first press counts, and
+// a second press within 1.5 s of a sent one is ignored (v0.4.6).
+document.addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.altKey || ev.shiftKey) return
+  const box = ev.target && ev.target.closest && ev.target.closest('[data-submit]')
+  const need = box && box.closest('.need')
+  if (!need) return
+  ev.preventDefault()
+  if (ev.repeat || ev.isComposing) return
+  const btn = need.querySelector('[data-submit-for="' + box.dataset.submit + '"]')
+  if (!btn || btn.disabled) return
+  const last = Number(need.dataset.kbdAt || 0)
+  if (Date.now() - last < 1500) return
+  need.dataset.kbdAt = String(Date.now())
+  btn.click()
+})
+// Settings → Spaces: Enter in the repo field adds the override instead of saving Settings
+// (the suggestion list takes Enter first while one is highlighted).
+document.addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Enter' || ev.defaultPrevented || !(ev.target && ev.target.closest && ev.target.closest('#f-space-repo'))) return
+  ev.preventDefault()
+  const b = document.querySelector('[data-action="space-repo-add"]')
+  if (b && !b.disabled) b.click()
+})
+// Settings → Agents: Enter in the add form adds the feed instead of saving Settings.
+document.addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Enter' || !(ev.target && ev.target.matches && ev.target.matches('[data-agent-field]'))) return
+  ev.preventDefault()
+  const b = document.querySelector('[data-action="agent-add"]')
+  if (b && !b.disabled) b.click()
+})
+function answeredList(s) {
+  const list = (s.answers || []).slice().reverse()
+  if (!list.length) return ''
+  return '<h2>Answered from the board <span class="count">' + list.length + '</span></h2><ul class="answered">' + list.map((a) =>
+    '<li><span class="t">' + esc(clock(a.at)) + '</span><b>' + esc(a.summary) + '</b>' + (a.what ? ' · <span class="mono">' + esc(String(a.what).slice(0, 160)) + '</span>' : '') +
+    '<span class="where">' + esc(a.where || '') + (a.delivered === false ? ' · not picked up' : '') + '</span></li>').join('') + '</ul>' +
+    '<div class="hint">Also in answers.md in this session’s folder.</div>'
+}
+
+// External agents (v0.5.4): a feed session's page. Everything is the feed's
+// text, escaped; links are https only (the daemon drops anything else).
+async function viewAgentSession(s) {
+  const a = s.agent || {}
+  const home = httpsOnly(a.url)
+  const name = esc(a.display || a.name)
+  const hint = typeof a.replyHint === 'string' && a.replyHint.trim() ? a.replyHint.trim() : ''
+  let html = '<a class="back" href="#/">← All sessions</a>'
+  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + where(s) + ' <span class="faint">' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + ' · updated ' + esc(ago(s.lastActivityAt)) + '</span></div></div>' +
+    '<div class="actions">' + agentReplyButton(a) + '</div></div>'
+  // v0.5.6: agent.url only links the name; the reply affordance and its
+  // words come from the feed (agent.reply, agent.replyHint), or nothing.
+  html += '<div class="banner info"><span>Read-only. This is ' + (home ? '<a href="' + esc(home) + '" target="_blank" rel="noopener noreferrer">' + name + '</a>' : name) + '’s work, from its feed' + (a.pullsHere ? ', pulled by this Mac' : a.puller ? ', pulled by ' + esc(a.puller) : '') + (a.lastSuccessAt ? ' (last pull ' + esc(ago(a.lastSuccessAt)) + ')' : '') + '.' + (hint ? ' ' + esc(hint.charAt(0).toUpperCase() + hint.slice(1)) + (/[.!?]$/.test(hint) ? '' : '.') : '') + '</span></div>'
+  if (s.needsYou) html += '<h2>Needs you</h2><div class="needs">' + agentNeedPanel(s.needsYou, s) + '</div>'
+  const lists = s.lists || []
+  if (lists.length) {
+    let full = []
+    try { full = (await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/lists')).lists || [] } catch {}
+    html += '<h2>Lists <span class="count">' + full.length + '</span></h2><div class="lists">' + full.map((l) => listCard(l, { session: false })).join('') + '</div>'
+  }
+  const links = (s.links || []).filter((k) => httpsOnly(k.url))
+  if (links.length) html += '<h2>Links</h2><ul class="agent-links">' + links.map((k) => '<li><a href="' + esc(httpsOnly(k.url)) + '" target="_blank" rel="noopener noreferrer">' + esc(k.label) + ' ↗</a> <span class="faint mono">' + esc(new URL(k.url).host) + '</span></li>').join('') + '</ul>'
+  const cps = s.checkpoints || []
+  html += '<h2>Checkpoints <span class="count">' + cps.length + '</span></h2>'
+  html += cps.length ? '<div class="agent-cps">' + cps.map((c) => '<article class="cpcard"><div class="cphead"><span class="mono faint">' + esc(clock(c.createdAt)) + '</span></div>' + agentCpBlock(c) + '</article>').join('') + '</div>' : '<div class="nocp">No checkpoints in the feed yet.</div>'
+  html += '<div class="facts">' + fact('Agent', (a.display || a.name) + ' (feed “' + a.name + '”)') + (s.project ? fact('Project', s.project) : '') + fact('Started', clock(s.startedAt)) + fact('Updated', clock(s.lastActivityAt)) + (s.file ? fact('File', s.file) : '') + '</div>'
+  html += spacePicker(s, await api('GET', '/v1/spaces').catch(() => null), 'agent', a.name)
+  $app.innerHTML = banners() + html
+}
+
+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))
+  state.sessions = state.sessions.filter((x) => x.id !== s.id).concat([s])
+  const branch = s.repo && s.repo.branch
+  const spv = await api('GET', '/v1/spaces').catch(() => null)
+  let html = '<a class="back" href="#/">← All sessions</a>'
+  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled session') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
+    '<div class="actions">' + goButton(s) + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (s.isLocal ? '<button type="button" class="btn primary" data-action="checkpoint" data-id="' + esc(s.id) + '">Checkpoint now</button>' : '') + '</div></div>'
+  html += '<div class="facts">' +
+    fact('Machine', s.machine + (s.isLocal ? ' (this one)' : ' (synced)')) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + 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.model || '—') + 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.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
+  html += spacePicker(s, spv, 'session', s.id)
+  if (s.needsYou) html += '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>'
+  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
+  }
+  state.listsMayEdit = state.mayAnswer !== false
+  html += '<section class="slists" id="lists">' + sessionListsSection(s) + '</section>'
+  html += '<h2>Checkpoints <span class="count">' + s.checkpointCount + '</span></h2>'
+  const newestCp = s.checkpoints.reduce((a, b) => (!a || String(b.createdAt) > String(a.createdAt) ? b : a), null)
+  if (!s.checkpoints.length) html += '<div class="empty">No checkpoints yet.</div>'
+  else html += '<div class="timeline">' + s.checkpoints.map((cp) =>
+    '<div class="tl-item ' + esc(cp.trigger) + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><span class="trig">' + esc(cp.trigger) + '</span><span>' + esc(ago(cp.createdAt)) + '</span>' +
+    (cp.generator && cp.generator.by ? '<span>· ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + '</span>' : '') + '</div>' +
+    cpBlock(cp, { showWhen: false, more: true, open: cp === newestCp }) +
+    (cp.userNote ? '<div class="note">✎ ' + esc(cp.userNote) + '</div>' : '') +
+    (cp.filesTouched && cp.filesTouched.length ? '<div class="files">' + cp.filesTouched.map((f) => '<span class="chip mono">' + esc(f) + '</span>').join('') + '</div>' : '') +
+    '</div>').join('') + '</div>'
+  html += answeredList(s)
+  $app.innerHTML = html
+}
+// Space of one session (or, on an agent's page, of that agent's feed): its
+// own override, or back to the repo / Mac default (v0.5.8).
+function spacePicker(s, spv, kind, key) {
+  if (!spv) return ''
+  const own = kind === 'session' ? s.spaceSource === 'session' : s.spaceSource === 'agent'
+  const opts = sortSpacesUi([...(spv.spaces || []), s.space])
+  return '<div class="spacepick"><label for="f-space-one">Space</label>' +
+    selectHtml({ id: 'f-space-one', value: own ? s.space : '', attrs: { 'data-space-kind': kind, 'data-space-key': key },
+      options: [['', own ? 'Default (repo or Mac)' : s.space + ' · ' + (SPACE_WHY[s.spaceSource] || 'default')], ...opts.map((x) => [x, x]), ['__new', 'New space…']] }) +
+    '<span class="faint">' + (kind === 'agent' ? 'For everything from this agent’s feed.' : 'Just this session; repos and Macs are set in <a href="#/settings/spaces">Settings → Spaces</a>.') + '</span></div>'
+}
+function fact(k, v) { return '<div class="fact"><div class="k">' + esc(k) + '</div><div class="v" title="' + esc(v) + '">' + esc(v) + '</div></div>' }
+
+// Timeline (0.4.3): the board's repo chips (same remembered pick), a session
+// filter and a trigger filter. #/timeline?repo=a,b&session=<id>&trigger=manual
+const TRIGGER_FILTERS = { manual: { label: 'Manual', test: (t) => t === 'manual' }, auto: { label: 'Automatic', test: (t) => t !== 'manual' && t !== 'session_end' }, closed: { label: 'Closed', test: (t) => t === 'session_end' } }
+function timelineHash({ repos = [], session = null, trigger = null } = {}) {
+  const h = filterHash({ repos }).replace(/^#\//, '')
+  const parts = h ? [h.replace(/^\?/, '')] : []
+  if (session) parts.push('session=' + encodeURIComponent(session))
+  if (trigger) parts.push('trigger=' + encodeURIComponent(trigger))
+  return '#/timeline' + (parts.length ? '?' + parts.join('&') : '')
+}
+async function viewTimeline() {
+  const params = (state.route && state.route.params) || new URLSearchParams()
+  const f = readFilter(params, window.localStorage)
+  const session = params.get('session') || null
+  const trigger = TRIGGER_FILTERS[params.get('trigger')] ? params.get('trigger') : null
+  if (f.from === 'storage') history.replaceState(null, '', timelineHash({ repos: f.repos, session, trigger }))
+  state.tlFilter = { repos: f.repos, session, trigger }
+  const [{ checkpoints }, { sessions }] = await Promise.all([api('GET', '/v1/checkpoints?limit=1000'), api('GET', '/v1/sessions?limit=500&archived=1')])
+  const byId = new Map(sessions.map((x) => [x.id, x]))
+  // each checkpoint gets its session's repo, so it filters like the board
+  const items = checkpoints.map((cp) => { const se = byId.get(cp.sessionId) || {}; return { cp, id: cp.sessionId, repoKey: se.repoKey || cp.repo || 'no-repo', repoLabel: se.repoLabel || cp.repo || 'no repo', repoName: cp.repo, lastActivityAt: cp.createdAt, title: cp.sessionTitle || se.title } })
+  const trig = (x) => !trigger || TRIGGER_FILTERS[trigger].test(x.cp.trigger)
+  const inRepos = applyFilter(items, { repos: f.repos })
+  const list = inRepos.filter((x) => (!session || x.id === session) && trig(x))
+  const chips = repoChips(items, { countIn: items.filter((x) => (!session || x.id === session) && trig(x)) })
+  // sessions to pick from: those with checkpoints in the chosen repos
+  const sessOpts = []
+  for (const x of inRepos) if (!sessOpts.some((o) => o.id === x.id)) sessOpts.push({ id: x.id, title: x.title || 'Untitled', repo: x.repoLabel })
+  const cur = session ? (byId.get(session) || {}).title || (items.find((x) => x.id === session) || {}).title || session.slice(0, 8) : null
+  let html = '<div class="pagehead"><div><h1>Timeline</h1><div class="sub">Every checkpoint across sessions, newest first. Click a session’s name to see only its checkpoints.</div></div>' +
+    (session ? '<div class="actions"><a class="btn" href="#/s/' + encodeURIComponent(session) + '">Open session →</a></div>' : '') + '</div>'
+  html += chipBar(chips, f.repos, items.filter((x) => (!session || x.id === session) && trig(x)).length, 'no checkpoints')
+  html += '<div class="tlbar">' +
+    '<div class="tlsel">' + selectHtml({ id: 'tlSession', label: 'Session', value: session || '',
+      options: [['', 'All sessions (' + sessOpts.length + ')'], ...sessOpts.map((o) => ({ value: o.id, label: o.title, sub: f.repos.length === 1 ? '' : o.repo }))] }) + '</div>' +
+    (session ? '<button type="button" class="pillx" data-action="tl-session" data-session="" title="Show every session">× session: ' + esc(cur) + '</button>' : '') +
+    '<div class="seg" role="group" aria-label="Kind of checkpoint">' + [['', 'All']].concat(Object.entries(TRIGGER_FILTERS).map(([k, v]) => [k, v.label])).map(([k, l]) => '<button type="button" data-action="tl-trigger" data-trigger="' + k + '" aria-pressed="' + ((trigger || '') === k) + '">' + l + '</button>').join('') + '</div></div>'
+  if (!checkpoints.length) html += '<div class="empty mt">No checkpoints yet.</div>'
+  else if (!list.length) html += '<div class="empty mt">No checkpoints match. <button type="button" class="linkish" data-action="tl-clear">Show everything</button></div>'
+  else html += '<div class="timeline mt">' + list.slice(0, 300).map(({ cp, repoLabel, repoKey }) =>
+    '<div class="tl-item ' + esc(cp.trigger) + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><a class="tl-title" href="' + esc(timelineHash({ repos: f.repos, session: cp.sessionId, trigger })) + '" title="Only this session’s checkpoints">' + esc(cp.sessionTitle || 'Untitled') + '</a>' +
+    '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(repoLabel) + '" data-key="' + esc(repoKey) + '" title="' + esc(repoKey + ' · show only this repo') + '">' + esc(repoLabel) + (cp.branch ? ' · ' + esc(cp.branch) : '') + '</button><span class="trig">' + esc(cp.trigger) + '</span></div>' + cpBlock(cp, { showWhen: false, more: true }) + '</div>').join('') + '</div>'
+  $app.innerHTML = html
+}
+
+function renderMd(md, { spaces = [] } = {}) {
+  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
+  // v0.5.8: each "## <space>" opens a section with its own Copy for standup;
+  // other "## " headings (Lists, Top of mind) are whole-folder sections.
+  const openSec = (h) => {
+    if (inSec) out.push('</section>')
+    inSec = true
+    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')) {
+    if (/^- /.test(line)) {
+      if (!inList) { out.push('<ul>'); inList = true }
+      // Digest items read "- **Title** (repo · branch) — state": tag the repo so the view can filter.
+      const m = line.match(/^- \*\*.*?\*\* \(([^)·]+?)(?: · [^)]*)?\) — /)
+      // 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
+    }
+    if (/^\s{2,}\S/.test(line) && inList) {
+      // "Stopped at: … Next: …" is two lines, each with its label.
+      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
+      if (sm) out.push('<span class="sub"><span class="k">' + sm[1] + '</span> ' + inline(sm[2]) + '</span>' + (sm[3] ? '<span class="sub"><span class="k">' + sm[3] + '</span> ' + inline(sm[4]) + '</span>' : ''))
+      else out.push('<span class="sub">' + inline(t) + '</span>')
+      continue
+    }
+    if (inList) { out.push('</ul>'); inList = false }
+    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)) out.push('<h3>' + inline(line.slice(4)) + '</h3>')
+    else if (line.trim()) out.push('<p>' + inline(line) + '</p>')
+  }
+  if (inList) out.push('</ul>')
+  if (inSec) out.push('</section>')
+  return out.join('\n')
+}
+
+// "2026-10-10" → "Sat Oct 10" for the phone's past-digests strip (v0.5.7).
+function shortDay(iso) {
+  const d = new Date(iso + 'T12:00:00')
+  return isNaN(d) ? iso : d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }).replace(',', '')
+}
+
+// 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
+// repo chips, which only count the picked space.
+const digestUi = { standups: {}, date: null, open: null }
+async function viewDigest(date, machine) {
+  const [{ digests }, spv] = await Promise.all([api('GET', '/v1/digests'), api('GET', '/v1/spaces').catch(() => null)])
+  const byDay = new Map()
+  for (const d of digests) { if (!byDay.has(d.date)) byDay.set(d.date, []); byDay.get(d.date).push(d) }
+  const days = [...byDay.keys()]
+  const lead = (day) => byDay.get(day)[0] // shared first, then this Mac's, then others (the daemon's order)
+  const pickD = date ? (digests.find((d) => d.date === date && (machine ? d.machine === machine : true)) || { date, machine: machine || null }) : days[0] ? lead(days[0]) : null
+  const pick = pickD && pickD.date
+  let html = '<div class="pagehead"><div><h1>Daily digest</h1><div class="sub">Where you left off, one digest a day for every Mac in the folder, ' + (state.cfg && state.cfg.digest && state.cfg.digest.time ? 'made each morning at ' + esc(state.cfg.digest.time) : 'made on demand') + ' and saved as markdown.</div></div>' +
+    '<div class="actions"><a class="btn" href="#/catchup/new">' + icon('coffee') + 'Catch me up</a><button type="button" class="btn primary" data-action="gen-digest">' + icon('refresh-cw') + 'Generate now</button></div></div>'
+  // When the next automatic one comes, and a failed one, visibly (v0.4.2).
+  try { await refreshHealth() } catch {}
+  const dg = (state.health && state.health.digest) || {}
+  const when = (iso) => { if (!iso) return null; const t = new Date(iso); const today = new Date(); const tom = new Date(); tom.setDate(tom.getDate() + 1); const hm = t.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); return t.toDateString() === today.toDateString() ? (Date.parse(iso) <= Date.now() + 30000 ? 'in a few seconds' : 'today at ' + hm) : t.toDateString() === tom.toDateString() ? 'tomorrow at ' + hm : clock(iso) }
+  const dayName = { sun: 'Sunday', mon: 'Monday', tue: 'Tuesday', wed: 'Wednesday', thu: 'Thursday', fri: 'Friday', sat: 'Saturday' }[dg.todayDay] || 'today'
+  const todayLine = dg.todayNote === 'no activity' ? 'No activity today (' + dayName + '), so no digest was written. ' : dg.todayNote === 'not a digest day' ? dayName + ' isn’t a digest day (' + esc(dg.daysLabel || '') + '). ' : /^waiting for /.test(dg.todayNote || '') ? 'Today’s comes from ' + esc(dg.first) + '; this Mac makes it if there’s none by ' + esc(when(dg.nextAt) || '') + '. ' : ''
+  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>'
+  let spaces = []
+  if (pick) {
+    try {
+      const d = await api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : ''))
+      const fm = d.meta || {}
+      const madeAt = fm.generated_at
+      spaces = Array.isArray(fm.spaces) ? fm.spaces.map(String) : []
+      const whose = d.shared ? (d.by ? ' by ' + esc(d.by) : '') : ''
+      const legacy = !d.shared && d.machine ? '<span class="chip machine">⌂ ' + esc(d.machine) + '</span> ' + esc(d.machine) + '’s own digest, from before one digest a day. ' : ''
+      const others = (d.others || []).filter((x) => x.machine || x.shared)
+      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>'
+    } 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>'
+  const params = (state.route && state.route.params) || new URLSearchParams()
+  state.digestRepos = readFilter(params, window.localStorage).repos
+  state.digestSpaces = spaces
+  let sp = readSpace(params)
+  state.digestSpace = sp && spaces.includes(sp) ? sp : null
+  if (digestUi.date !== pick) { digestUi.standups = {}; digestUi.open = null; digestUi.date = pick }
+  paintDigestFilter()
+  // Prefetch each space's standup text, so a tap copies at once (iOS only
+  // lets a page write the clipboard inside the tap itself).
+  if (pick && spaces.length && !(pickD && pickD.machine)) for (const x of spaces) if (!digestUi.standups[x]) api('GET', '/v1/standup?' + new URLSearchParams({ space: x, date: pick })).then((r) => { digestUi.standups[x] = r.text }).catch(() => {})
+}
+
+// The digest's filters: space tabs (v0.5.8), then repo chips (v0.4.2) from
+// the repos in the picked space; a pick hides the other items and any
+// section left empty. Shares the board's remembered repo and space choices.
+function paintDigestFilter() {
+  const box = document.getElementById('digestRepos')
+  if (!box) return
+  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)
+  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]))
+    tabsBox.innerHTML = spaceTabs(spaces, sp, counts, 'digest-space', document.querySelectorAll('.md section.space-sec li[data-repo]').length)
+  }
+  const visibleLi = (li) => !li.closest('section') || !li.closest('section').hidden
+  const items = [...document.querySelectorAll('.md li[data-repo]')].filter(visibleLi)
+  const counts = new Map()
+  for (const li of items) counts.set(li.dataset.repo, (counts.get(li.dataset.repo) || 0) + 1)
+  const sel = (state.digestRepos || []).filter((tok) => [...counts.keys()].some((r) => repoMatches({ repoKey: r, repoLabel: r }, tok)))
+  const keep = (r) => !sel.length || sel.some((tok) => repoMatches({ repoKey: r, repoLabel: r }, tok))
+  for (const li of document.querySelectorAll('.md li[data-repo]')) li.hidden = !keep(li.dataset.repo)
+  for (const ul of document.querySelectorAll('.md ul')) {
+    const h = ul.previousElementSibling
+    const any = [...ul.children].some((li) => !li.hidden)
+    ul.hidden = !any
+    if (h && (h.tagName === 'H2' || h.tagName === 'H3')) h.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
+  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>' +
+    [...counts.entries()].map(([r, n]) => '<button type="button" class="rchip' + (on(r) ? ' on' : '') + '" data-action="digest-repo" data-repo="' + esc(r) + '" title="' + esc(r) + '" aria-pressed="' + on(r) + '"><span class="rl">' + esc(r) + '</span><span class="rc">' + n + '</span></button>').join('') + '</div>'
+}
+
+// "Copy for standup" (v0.5.8): the clipboard when the browser allows it
+// (inside the tap), else the text selected in a box to copy by hand. Either
+// way the text shows under the section's heading.
+async function standupCopy(btn) {
+  const space = btn.dataset.space
+  const sec = btn.closest('section')
+  let text = digestUi.standups[space]
+  let copied = false
+  if (text) copied = await clipWrite(text)
+  else {
+    btn.disabled = true
+    try { text = (await api('GET', '/v1/standup?' + new URLSearchParams({ space, date: digestUi.date || '' }))).text; digestUi.standups[space] = text } catch (e) { btn.disabled = false; return toast(e.message, 5000) }
+    btn.disabled = false
+    copied = await clipWrite(text)
+  }
+  if (!sec) return
+  let box = sec.querySelector('.standup-out')
+  if (!box) { box = document.createElement('div'); box.className = 'standup-out'; sec.querySelector('.space-head').after(box) }
+  box.innerHTML = '<div class="so-head"><span class="' + (copied ? 'ok' : '') + '">' + (copied ? icon('check') + 'Copied for Slack' : 'Select all and copy') + '</span><button type="button" class="linkish" data-action="standup-close">Close</button></div>' +
+    '<textarea readonly rows="' + Math.min(14, text.split('\n').length + 1) + '" aria-label="' + esc(space) + ' standup">' + esc(text) + '</textarea>'
+  const ta = box.querySelector('textarea')
+  if (!copied) { ta.focus(); ta.select(); try { ta.setSelectionRange(0, text.length) } catch {} ; try { if (document.execCommand('copy')) box.querySelector('.so-head span').innerHTML = icon('check') + 'Copied for Slack' } catch {} }
+  digestUi.open = space
+}
+async function clipWrite(text) {
+  try { if (navigator.clipboard && window.isSecureContext !== false) { await navigator.clipboard.writeText(text); return true } } catch {}
+  return false
+}
+
+// ------------------------------------------------------------ catch me up (v0.5.0)
+//
+// Pick repos and a window, get one recap: a short summary on top, then per
+// repo and session what got done, where it stopped, what's next, open
+// questions, and what's waiting on you now (answered right here, like Needs
+// you). Every catch-up is saved to catchups/ in the folder and listed on the left.
+
+const cuUi = { open: false, since: 'last', from: '', to: '', repos: null, machines: null, opts: null, making: false, err: null }
+
+function cuWhen(iso) { return iso ? new Date(iso).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '—' }
+function cuSince() { return cuUi.since === 'custom' ? (cuUi.from || '') : cuUi.since }
+
+async function cuLoadOptions() {
+  const qs = new URLSearchParams()
+  const since = cuSince()
+  if (since) qs.set('since', since)
+  if (cuUi.since === 'custom' && cuUi.to) qs.set('to', cuUi.to)
+  try { cuUi.opts = await api('GET', '/v1/catchups/options?' + qs.toString()); cuUi.err = null } catch (e) { cuUi.err = e.message }
+}
+
+function cuPicker() {
+  const o = cuUi.opts
+  const winBtns = ((o && o.windows) || [{ key: 'last', label: 'Since I last caught up' }, { key: '24h', label: 'Last 24 hours' }, { key: 'workday', label: 'Since the last workday' }, { key: '7d', label: 'Last 7 days' }, { key: 'custom', label: 'Custom…' }])
+    .map((w) => '<button type="button" class="cu-win" data-action="cu-win" data-win="' + esc(w.key) + '" aria-pressed="' + (cuUi.since === w.key) + '"' + (w.from ? ' title="from ' + esc(cuWhen(w.from)) + '"' : '') + '>' + esc(w.label) + '</button>').join('')
+  let h = '<section class="cu-picker" aria-label="New catch-up"><div class="cu-row"><div class="cu-k">When</div><div class="cu-wins" role="group" aria-label="Window">' + winBtns + '</div></div>'
+  if (cuUi.since === 'custom') {
+    h += '<div class="cu-row"><div class="cu-k"></div><div class="cu-custom"><label>From <input type="datetime-local" id="cuFrom" value="' + esc(cuUi.from) + '"></label><label>To <input type="datetime-local" id="cuTo" value="' + esc(cuUi.to) + '" placeholder="now"></label></div></div>'
+  }
+  if (cuUi.err) h += '<div class="cu-row"><div class="cu-k"></div><div class="cu-err">' + esc(cuUi.err) + '</div></div>'
+  if (o && !cuUi.err) {
+    h += '<div class="cu-row"><div class="cu-k"></div><div class="cu-winline">' + esc(o.window.label) + ': ' + esc(cuWhen(o.window.from)) + ' → ' + esc(cuWhen(o.window.to)) + (o.window.fallback === 'no earlier catch-up' ? ' · no earlier catch-up yet' : '') + '</div></div>'
+    const repos = o.repos || []
+    const sel = cuUi.repos || new Set(repos.map((r) => r.key))
+    h += '<div class="cu-row"><div class="cu-k">Repos</div><div class="cu-repos">'
+    if (!repos.length) h += '<span class="faint">No sessions with activity in this window.</span>'
+    else {
+      h += '<button type="button" class="linkish" data-action="cu-repos-all">' + (sel.size === repos.length ? 'None' : 'All') + '</button>'
+      h += repos.map((r) => '<label class="cu-repo' + (sel.has(r.key) ? ' on' : '') + '" title="' + esc(r.key) + '"><input type="checkbox" data-cu-repo="' + esc(r.key) + '"' + (sel.has(r.key) ? ' checked' : '') + '><span class="rl">' + esc(r.label) + '</span><span class="rc">' + r.count + '</span>' + (r.needsYou ? '<span class="cu-needdot" title="' + r.needsYou + ' waiting on you"></span>' : '') + '</label>').join('')
+    }
+    h += '</div></div>'
+    const ms_ = o.allMachines || []
+    if (ms_.length > 1) {
+      const msel = cuUi.machines || new Set(ms_)
+      h += '<div class="cu-row"><div class="cu-k">Machines</div><div class="cu-repos">' + ms_.map((m) => '<label class="cu-repo' + (msel.has(m) ? ' on' : '') + '"><input type="checkbox" data-cu-machine="' + esc(m) + '"' + (msel.has(m) ? ' checked' : '') + '><span class="rl">' + esc(m) + '</span></label>').join('') + '</div></div>'
+    }
+  }
+  const nRepos = o ? (cuUi.repos ? cuUi.repos.size : (o.repos || []).length) : 0
+  h += '<div class="cu-row cu-go"><div class="cu-k"></div><div><button type="button" class="btn primary" data-action="cu-make"' + (cuUi.making || (o && !nRepos) || cuUi.err ? ' disabled' : '') + '>' + icon('coffee') + (cuUi.making ? 'Catching you up…' : 'Catch me up') + '</button>' +
+    '<button type="button" class="btn" data-action="cu-close">Cancel</button>' +
+    (cuUi.making ? '<span class="faint cu-wait">Reading checkpoints' + (state.health && state.health.summarizer && state.health.summarizer !== 'heuristic' ? ', then the summary from ' + esc(state.health.summarizer) : '') + '…</span>' : '') + '</div></div></section>'
+  return h
+}
+
+// The live session for each id in this catch-up (for Go, Copy resume and Needs you).
+function cuLive(id) { return (state.sessions || []).find((s) => s.id === id) || null }
+
+function cuSessionCard(x) {
+  const s = cuLive(x.id)
+  const isAgent = !!(x.agent || String(x.id || '').startsWith('agent:'))
+  const mdInline = isAgent ? esc : mdInlineMain // feed text is plain text, never links or markup
+  const li = (arr) => '<ul>' + arr.map((d) => '<li>' + mdInline((d)) + '</li>').join('') + '</ul>'
+  let h = '<article class="cu-s" data-id="' + esc(x.id || '') + '">'
+  h += '<div class="cu-sh">' + (s ? liveDot(s) : '') + (x.id ? '<a class="cu-st" href="#/s/' + encodeURIComponent(x.id) + '">' + esc(x.title) + '</a>' : '<span class="cu-st">' + esc(x.title) + '</span>') + '</div>'
+  if (x.line) h += '<div class="cu-line">' + esc(x.line) + (s && s.live === 'open' ? ' · <span class="livenote open">open now</span>' : '') + '</div>'
+  const rows = []
+  if (x.needsYou) rows.push(['Needs you', '<span class="cu-need">' + mdInline((x.needsYou)) + '</span>'])
+  if (x.done.length) rows.push(['Done', x.done.length === 1 ? mdInline((x.done[0])) : li(x.done)])
+  if (x.stoppedAt) rows.push([isAgent ? 'Latest' : 'Stopped at', mdInline((x.stoppedAt))])
+  if (x.lastReply) rows.push(['Since then', mdInline((x.lastReply))])
+  if (x.next) rows.push(['Next', mdInline((x.next)) + (x.nextSteps.length ? li(x.nextSteps) : '')])
+  if (x.questions.length) rows.push(['Open questions', li(x.questions)])
+  h += '<dl class="cu-dl">' + rows.map(([k, v]) => '<dt>' + esc(k) + '</dt><dd>' + v + '</dd>').join('') + '</dl>'
+  if (isAgent) return h + '<div class="actions-row">' + agentReplyButton((s && s.agent) || x.agent, 'btn') + (x.id ? '<a class="btn" href="#/s/' + encodeURIComponent(x.id) + '">Session →</a>' : '') + '<span class="ro">read-only · from an agent’s feed</span></div></article>'
+  h += '<div class="actions-row">' + (s ? goButton(s) : '') + (x.resume ? '<button type="button" class="btn" data-action="copy-cmd" data-cmd="' + esc(x.resume) + '">Copy resume</button>' : '') +
+    (x.id ? '<a class="btn" href="#/s/' + encodeURIComponent(x.id) + '">Session →</a>' : '') + '</div>'
+  return h + '</article>'
+}
+
+async function viewCatchup(name) {
+  if (!state.health) await refreshHealth()
+  const [{ catchups }, sv, lv] = await Promise.all([api('GET', '/v1/catchups'), api('GET', '/v1/sessions?limit=300').catch(() => ({ sessions: [] })), api('GET', '/v1/lists').catch(() => null)])
+  state.sessions = sv.sessions || []
+  state.lists = lv ? lv.lists : []
+  if (lv) state.listsMayEdit = lv.mayEdit !== false
+  if (sv.viewer) { state.viewerLocal = sv.viewer.local !== false; state.mayAnswer = sv.viewer.mayAnswer !== false }
+  if (name === 'new' || (!catchups.length && !name)) { if (!cuUi.open) { cuUi.open = true; cuUi.repos = null; cuUi.machines = null; cuUi.opts = null } }
+  if (cuUi.open && !cuUi.opts && !cuUi.err) await cuLoadOptions()
+  const pick = name && name !== 'new' ? name : (catchups[0] && catchups[0].name)
+  let html = '<div class="pagehead"><div><h1>Catch me up</h1><div class="sub">What happened across your sessions while you were away: what got done, where each one stopped, and what’s waiting on you.</div></div>' +
+    '<div class="actions">' + (cuUi.open ? '' : '<button type="button" class="btn primary" data-action="cu-open">' + icon('coffee') + 'New catch-up</button>') + '</div></div>'
+  if (cuUi.open) html += cuPicker()
+  html += '<div class="digest-wrap cu-wrap"><nav class="dates cu-list" aria-label="Past catch-ups">' + (catchups.length ? catchups.map((c) => '<a href="#/catchup/' + esc(c.name) + '" class="' + (c.name === pick ? 'on' : '') + '"><span class="cu-ln">' + esc(cuWhen(c.generatedAt)) + '</span><span class="m">' + esc(c.label || '') + ' · ' + (c.sessions == null ? '?' : c.sessions) + '</span></a>').join('') : '<span class="nocp">None yet</span>') + '</nav>'
+  if (pick) {
+    let c = null
+    try { c = await api('GET', '/v1/catchups/' + encodeURIComponent(pick)) } catch (e) { html += '<div class="empty">' + esc(e.message) + '</div>' }
+    if (c) html += cuArticle(c)
+  } else if (!cuUi.open) html += '<div class="empty"><p><strong>No catch-ups yet.</strong></p><p>Pick repos and a window and get one recap. From a terminal: <code>leftoff catchup</code>.</p></div>'
+  else html += '<div></div>'
+  html += '</div>'
+  $app.innerHTML = banners() + html
+}
+
+function cuArticle(c) {
+  const p = c.parsed, m = p.meta
+  const ids = new Set([...(m.sessionIds || []), ...p.repos.flatMap((r) => r.sessions.map((x) => x.id))].filter(Boolean))
+  const nRepos = p.repos.length, nS = p.repos.reduce((a, r) => a + r.sessions.length, 0)
+  let h = '<article class="md cu" data-name="' + esc(c.name) + '"><h1>' + esc((m.window && m.window.label) || m.title || 'Catch-up') + '</h1>'
+  h += '<div class="digest-meta">' + esc(cuWhen(m.window && m.window.from)) + ' → ' + esc(cuWhen(m.window && m.window.to)) + ' · ' + nS + ' session' + (nS === 1 ? '' : 's') + ' in ' + nRepos + ' repo' + (nRepos === 1 ? '' : 's') +
+    (m.machines && m.machines.length > 1 ? ' · ' + esc(m.machines.join(', ')) : '') + ' · summary by ' + esc(m.model === 'heuristic' ? 'Leftoff (no model)' : m.model || '?') +
+    ' · <button type="button" class="linkish" data-action="copy-cmd" data-cmd="' + esc(c.markdown) + '">Copy as Markdown</button></div>'
+  h += '<ul class="cu-summary">' + p.summary.map((b) => '<li>' + mdInline((b)) + '</li>').join('') + '</ul>'
+  // Needs you, live: what is waiting right now in these sessions, answerable here.
+  const live = (state.sessions || []).filter((s) => ids.has(s.id) && s.needsYou)
+  if (live.length) h += '<h2>Needs you now (' + live.length + ')</h2><div class="needs cu-needs">' + live.map((s) => needPanel({ ...s.needsYou, session: s }, needOpts())).join('') + '</div>'
+  else if (p.needsYou.length) h += '<h2>Was waiting on you (' + p.needsYou.length + ')</h2><ul>' + p.needsYou.map((n) => '<li><a href="#/s/' + encodeURIComponent(n.id || '') + '"><strong>' + esc(n.title) + '</strong></a> <span class="faint">' + esc(n.repo) + '</span><span class="sub">' + (String(n.id || '').startsWith('agent:') ? esc(n.needsYou) : mdInline((n.needsYou))) + '</span></li>').join('') + '</ul>'
+  // Lists (v0.5.1): still open, with live progress when the list is still in the folder
+  const so = (p.stillOpen || []).map((x) => ({ ...x, live: (state.lists || []).find((l) => l.ref === x.ref) || null })).filter((x) => !x.live || (!x.live.archived && x.live.done < x.live.total))
+  if (so.length) {
+    h += '<h2>Still open (' + so.length + ')</h2><div class="lists cu-lists">' + so.map((x) => x.live ? listCard({ ...x.live, items: x.live.items.filter((it) => !it.done) }, { full: false }) :
+      '<div class="listcard"><div class="lhead"><span class="lname">' + esc(x.name) + '</span><span class="lprog">' + esc(x.done + '/' + x.total) + '</span></div><ul class="checklist">' + x.next.map((it) => '<li><label><input type="checkbox" disabled><span class="n">' + esc(it.n) + '</span><span class="t">' + (String(x.ref || '').startsWith('~') ? esc(it.text) : mdInline(it.text)) + '</span></label></li>').join('') + '</ul></div>').join('') + '</div>'
+  }
+  for (const r of p.repos) h += '<h2>' + esc(r.label) + ' <span class="faint">(' + r.sessions.length + ')</span></h2>' + r.sessions.map(cuSessionCard).join('')
+  if (!nS) h += '<p class="faint">No sessions with activity in this window.</p>'
+  return h + '</article>'
+}
+
+const PROVIDERS = [
+  ['auto', 'Auto', 'claude CLI if found, else an Anthropic key, else no model'],
+  ['claude', 'Claude (your Claude Code login)', 'runs claude -p; no key'],
+  ['ollama', 'Ollama (local)', 'free and private; runs on this machine'],
+  ['ollama-cloud', 'Ollama cloud (API key)', 'hosted models on ollama.com; nothing to download'],
+  ['openai-compatible', 'LM Studio / OpenAI-compatible', 'any local /v1/chat/completions server'],
+  ['anthropic', 'Anthropic API key', 'Claude Haiku over the API'],
+  ['heuristic', 'No model', 'last prompt + last reply; works offline'],
+]
+const PROVIDER_FIELDS = {
+  auto: { model: true, base: false, key: null, modelPh: 'haiku', basePh: '' },
+  claude: { model: true, base: false, key: null, modelPh: 'haiku · sonnet', basePh: '' },
+  ollama: { model: true, base: true, key: null, modelPh: 'qwen2.5:3b', basePh: 'http://localhost:11434' },
+  'ollama-cloud': { model: true, base: true, key: 'ollama-cloud', modelPh: 'gpt-oss:20b', basePh: 'https://ollama.com' },
+  'openai-compatible': { model: true, base: true, key: null, modelPh: 'qwen2.5-7b-instruct', basePh: 'http://localhost:1234/v1' },
+  anthropic: { model: true, base: false, key: 'anthropic', modelPh: 'haiku · sonnet · claude-haiku-4-5', basePh: '' },
+  heuristic: { model: false, base: false, key: null, modelPh: '', basePh: '' },
+}
+const THEME_ICONS = {
+  light: '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  dark: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>',
+  system: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 20h8M12 16v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+}
+
+function syncProviderFields() {
+  const prov = document.getElementById('f-mode').value
+  const f = PROVIDER_FIELDS[prov] || PROVIDER_FIELDS.auto
+  const c = state.cfg || {}
+  const show = (id, on) => document.querySelectorAll('[data-row="' + id + '"]').forEach((el) => { el.hidden = !on })
+  show('model', f.model); show('base', f.base && (prov === 'openai-compatible' || !!(c.summarizer && c.summarizer.baseUrl && String(c.summarizer.provider || '').toLowerCase() === prov))); show('key', !!f.key)
+  document.getElementById('f-base').placeholder = f.basePh
+  if (f.model) loadModels(prov)
+  const info = PROVIDERS.find((p) => p[0] === prov)
+  document.getElementById('f-mode-hint').textContent = (info ? info[2] : '') + (prov === (c.summarizer && c.summarizer.provider || 'auto') ? ' · now using: ' + c.summarizerResolved : '')
+  if (f.key) {
+    const k = (c.keys && c.keys[f.key]) || {}
+    const st = document.getElementById('f-keystate')
+    st.className = 'keystate ' + (k.found ? 'ok' : 'no')
+    st.textContent = k.found ? '✓ key found' + (k.envSet ? ' ($' + k.env + ')' : ' (saved)') : 'no key yet'
+    document.getElementById('f-key').placeholder = k.found ? 'paste a new key to replace it' : 'paste your key, or set $' + (k.env || '') + ' for the daemon'
+    document.getElementById('f-key-hint').innerHTML = (f.key === 'ollama-cloud' ? 'Create one at <a href="https://ollama.com/settings/keys" target="_blank" rel="noopener">ollama.com/settings/keys</a>. ' : '') +
+      'Saved to ' + esc(k.file || '.secret/') + ' (mode 0600), never config.json. $' + esc(k.env || '') + ' wins if the daemon sees it.'
+  }
+}
+
+// Settings → Models & summaries → Model (v0.4.3): the same short card list for every
+// provider; local Ollama suggestions download from here (curated ones only).
+state.pulls = {}
+async function loadModels(prov) {
+  const box = document.getElementById('f-models-list')
+  if (!box) return
+  box.dataset.provider = prov
+  try {
+    const d = await api('GET', '/v1/models?provider=' + encodeURIComponent(prov))
+    if (box.dataset.provider !== prov) return
+    state.models = d
+    for (const c of d.choices) if (c.pull) state.pulls[c.tag] = c.pull
+    paintModels()
+  } catch (e) { box.innerHTML = '<div class="nocp">Couldn’t list models: ' + esc(e.message) + '</div>' }
+}
+function pullLine(pl) {
+  if (!pl) return ''
+  if (pl.error) return '<div class="pull err">Download failed: ' + esc(pl.error) + '</div>'
+  if (pl.cancelled) return '<div class="pull">Download cancelled.</div>'
+  if (pl.done) return ''
+  const pct = Math.round((pl.fraction || 0) * 100)
+  const mbs = pl.bps ? ' · ' + (pl.bps / 1e6).toFixed(1) + ' MB/s' : ''
+  const of = pl.total ? ' · ' + (pl.completed / 1e9).toFixed(2) + ' of ' + (pl.total / 1e9).toFixed(1) + ' GB' : ''
+  return '<div class="pull"><div class="pbar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '"><i data-pct="' + pct + '"></i></div>' +
+    '<div class="ptext">' + pct + '%' + of + mbs + (pl.use ? ' · will switch to it when done' : '') + ' <button type="button" class="linkish" data-action="pull-cancel" data-tag="' + esc(pl.tag) + '">Cancel</button></div></div>'
+}
+function paintModels() {
+  const box = document.getElementById('f-models-list')
+  const d = state.models
+  if (!box || !d) return
+  const cur = document.getElementById('f-model').value
+  const isCur = (c) => cur ? (c.tag === cur || c.tag === cur + ':latest' || cur === c.tag + ':latest') : c.current
+  const onAny = d.choices.some(isCur)
+  const card = (c) => {
+    const pl = state.pulls[c.tag]
+    const pulling = pl && !pl.done && !pl.error && !pl.cancelled
+    const installed = c.installed || (pl && pl.done)
+    const needsDl = d.provider === 'ollama' && !installed
+    const side = d.provider !== 'ollama' ? '' : installed ? '<span class="badge ok">✓ on this machine</span>'
+      : pulling ? '' : c.canDownload ? '<button type="button" class="btn small" data-action="pull-model" data-tag="' + esc(c.tag) + '" data-use="1">' + icon('download') + 'Download &amp; use</button>' : '<span class="badge">not downloaded</span>'
+    return '<div class="mcard' + (isCur(c) ? ' on' : '') + (needsDl ? ' needs-dl' : '') + '" role="radio" tabindex="0" aria-checked="' + !!isCur(c) + '" data-action="pick-model" data-tag="' + esc(c.tag) + '"' + (needsDl ? ' data-needs-dl="1"' : '') + '>' +
+      '<span class="dot" aria-hidden="true"></span><span class="mmain"><span class="mname">' + esc(c.name) + (c.recommended ? ' <span class="badge acc">Suggested</span>' : '') + '</span>' +
+      (c.note ? '<span class="mnote">' + esc(c.note) + '</span>' : '') + (c.hint ? '<span class="mhint">' + esc(c.hint) + '</span>' : '') + pullLine(pl) + '</span>' +
+      '<span class="mside">' + side + '</span></div>'
+  }
+  const canStart = d.status && d.status.canStart && state.viewerLocal !== false
+  const st = d.status ? '<div class="mstatus ' + (d.status.ok ? 'ok' : 'warn') + '">' + esc(d.status.text) +
+    (canStart ? ' <button type="button" class="btn small" data-action="ollama-start">' + icon('play') + 'Start Ollama</button>' : '') + '</div>' : ''
+  const other = cur && !onAny ? cur : ''
+  box.innerHTML = st + d.choices.map(card).join('') + (d.choices.length ? '' : '<div class="nocp">No models found.</div>') +
+    '<details class="other"' + (other ? ' open' : '') + '><summary>Other model…</summary><input id="f-model-other" placeholder="' + esc((PROVIDER_FIELDS[d.provider] || {}).modelPh || 'model name') + '" value="' + esc(other) + '" spellcheck="false" aria-label="Other model name"><span class="hint">Any model name this provider accepts. Overrides the cards above.</span></details>'
+  // widths through the CSSOM: the page's CSP has no inline style attributes
+  box.querySelectorAll('.pbar i[data-pct]').forEach((i) => { i.style.width = i.dataset.pct + '%' })
+}
+function onPull(v) {
+  const was = state.pulls[v.tag]
+  state.pulls[v.tag] = v
+  if (state.route && state.route.name === 'settings') {
+    if (v.done && (!was || !was.done) && v.use) { const m = document.getElementById('f-model'); if (m) m.value = v.tag; const sel = document.getElementById('f-mode'); if (sel) sel.value = 'ollama' }
+    paintModels()
+  }
+  if (v.done && (!was || !was.done)) toast(v.use ? 'Downloaded ' + v.tag + '. Checkpoints now summarize with it.' : 'Downloaded ' + v.tag, 6000)
+  if (v.error && (!was || !was.error)) toast('Couldn’t download ' + v.tag + ': ' + v.error, 10000)
+}
+
+// Settings → Models & summaries (v0.4.6): how long a checkpoint is, with the example for
+// the length picked, and a try-out on a real session (generated, not saved).
+function lengthExample(k) {
+  const o = LENGTH_CHOICES.find((x) => x.key === k) || LENGTH_CHOICES[1]
+  const ex = SUMMARY_EXAMPLES[o.key]
+  return '<div class="ex-head">Example · ' + esc(o.label) + ' <span class="faint">' + esc(o.approx) + '</span></div>' + cpBlock(ex, { showWhen: false }) +
+    (hasExtras(ex) ? '<div class="cpx">' + cpExtras(ex) + '</div>' : '')
+}
+function summariesSection(c) {
+  const cur = (c.summary && c.summary.length) || 'informative'
+  return '<div class="section" id="summaries">Summaries</div>' +
+    '<label>Checkpoint length</label><div class="lengths" role="radiogroup" aria-label="Checkpoint length">' + LENGTH_CHOICES.map((o) =>
+      '<label class="lenopt"><input type="radio" name="f-length" value="' + o.key + '"' + (cur === o.key ? ' checked' : '') + '>' +
+      '<span class="lo-t">' + esc(o.label) + (o.recommended ? ' <span class="lo-rec">default</span>' : '') + '</span><span class="lo-a">' + esc(o.approx) + '</span><span class="lo-b">' + esc(o.blurb) + '</span></label>').join('') + '</div>' +
+    '<div class="hint">In a session, <code>/cp --short</code> or <code>/cp --long</code> overrides it for one checkpoint. The board, the pane and the digest always use the first three lines.</div>' +
+    '<label>Example</label><div class="len-example" id="f-length-example" aria-live="polite">' + lengthExample(cur) + '</div>' +
+    '<div class="hint"><button type="button" class="linkish" data-action="length-try">Try the selected length on your latest session</button> <span class="faint">(runs the summarizer once; nothing is saved)</span></div>'
+}
+async function tryLength() {
+  const k = ((document.querySelector('input[name="f-length"]:checked') || {}).value) || 'informative'
+  const box = document.getElementById('f-length-example')
+  let list = state.sessions.length ? state.sessions : ((await api('GET', '/v1/sessions?limit=50').catch(() => ({ sessions: [] }))).sessions || [])
+  list = list.filter((x) => x.isLocal !== false).sort((a, b) => String(b.lastActivityAt || '').localeCompare(String(a.lastActivityAt || '')))
+  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>'
+  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) : '') : '') + ' · not saved</span></div>' +
+      cpBlock(cp, { showWhen: false }) + (hasExtras(cp) ? '<div class="cpx">' + cpExtras(cp) + '</div>' : '')
+  } catch (e) { box.innerHTML = lengthExample(k); toast('Couldn’t write it: ' + e.message) }
+}
+
+// Am I the iPhone home-screen app (or another installed app window)?
+const standalone = () => !!(window.navigator.standalone || (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches))
+const isIOS = () => /iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+
+// Add to Home Screen, in the words iOS uses (v0.4.6).
+function homeScreenSteps(local) {
+  return '<ol class="steps">' +
+    (local ? '<li>Scan the QR code with the iPhone camera. Safari opens the board, signed in.</li>' : '') +
+    '<li>In Safari, tap <b>Share</b> <span class="faint">(the square with the arrow)</span>, then <b>Add to Home Screen</b>, then <b>Add</b>.</li>' +
+    '<li>Open <b>Leftoff</b> from the home screen. It keeps its own sign-in, separate from Safari, so it asks for a code once: ' + (local ? 'type the 6-character code shown here.' : 'tap “Get a code” below in Safari first, then type it in the app.') + '</li>' +
+    '<li>That’s it for 30 days; each visit moves the 30 days on.</li></ol>'
+}
+
+// Settings → Remote access: the tailnet URL, signing a phone in (a QR code and a
+// typed code, v0.4.6), add to home screen, who's signed in, answering.
+function remoteSection(r) {
+  if (!r) return ''
+  const local = r.via !== 'remote'
+  let h = '<div class="section dup" id="remote">Remote access</div>'
+  if (!r.enabled) {
+    return h + '<label>Status</label><div><span class="chip">Off</span></div>' +
+      '<div class="hint full2">To open the board from your phone over your tailnet, run <code>leftoff tailscale on</code> on this machine: it sets up Tailscale Serve (https, tailnet only), checks the address and prints a QR code to scan. ' +
+      'No Tailscale? <code>ssh -N -L ' + esc(location.port || '7429') + ':127.0.0.1:' + esc(location.port || '7429') + ' you@this-machine</code></div>'
+  }
+  const n = r.sessions.length
+  h += '<label>URL</label><div class="remote-urls">' + r.urls.map((u) => '<span class="chip mono">' + esc(u) + '</span><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(u) + '">Copy</button>').join('') + '</div>' +
+    '<div class="hint">Tailscale Serve, https, inside your tailnet only (Funnel is never used). The iPhone needs the Tailscale app, connected.</div>' +
+    '<label>Signed in</label><div>' + (r.requireToken
+      ? esc(n + ' browser' + (n === 1 ? '' : 's')) + (r.via === 'remote' ? ' · <span class="chip">this one</span>' : '')
+      : '<span class="chip">no sign-in needed</span>') + '</div>' +
+    '<div class="hint">' + (r.requireToken ? 'A signed-in browser stays signed in for 30 days after its last visit.' : 'Anyone on your tailnet who can reach the URL gets the board (remoteRequireToken is off).') + '</div>'
+  if (r.requireToken) {
+    if (local) {
+      h += '<label>Sign in a phone</label><div class="remote-actions"><button type="button" class="btn primary" data-action="remote-link">' + icon('qr-code') + 'Show QR code</button>' +
+        (n ? '<button type="button" class="btn" data-action="remote-revoke">Sign out remote browsers</button>' : '') + '</div>' +
+        '<div class="full signin" id="remoteLink" hidden></div>'
+    } else {
+      h += '<label>Home-screen app</label><div class="remote-actions"><button type="button" class="btn primary" data-action="remote-code">Get a code</button></div>' +
+        '<div class="hint">' + (standalone() ? 'You’re in the home-screen app, signed in.' : 'The home-screen app has its own sign-in. Get a code here, then type it in the app.') + '</div>' +
+        '<div class="full signin" id="remoteLink" hidden></div>'
+    }
+    h += '<label>Add to Home Screen</label><div class="howto">' + homeScreenSteps(local) + '</div>'
+  }
+  return h
+}
+
+// Claim <name>.leftoff.dev from Settings (0.6.1): name + email, then a link
+// to press Confirm on. Plain inputs and buttons only (no native select).
+function signupBlock(r, su, local) {
+  const dom = esc(r.domain || 'leftoff.dev')
+  if (su.status === 'pending') {
+    return '<label>Claim your name</label><div class="signup-wait" role="status" aria-live="polite">' +
+      '<div class="sw-head"><span class="spin" aria-hidden="true"></span><b>Check your email</b></div>' +
+      '<div>We sent a link to <b>' + esc(su.email || '') + '</b>. Open it and press <b>Confirm ' + esc(su.host || '') + '</b>. This page finishes on its own.</div>' +
+      '<div class="faint">The link works for 30 minutes.' + (su.claimed ? ' Your leftoff.dev claim carries over.' : '') + '</div>' +
+      (local ? '<div class="remote-actions"><button type="button" class="btn sm" data-action="relay-signup-resend" data-user="' + esc(su.user || '') + '" data-email="' + esc(su.email || '') + '">Send a new link</button><button type="button" class="linkish" data-action="relay-signup-cancel">Use a different name or email</button></div>' : '') +
+      '</div>'
+  }
+  const bad = su.status === 'expired' ? 'That link expired. Send a new one.' : su.status === 'replaced' ? 'A newer link was sent; use the newest email.' : ''
+  const dis = local ? '' : ' disabled'
+  return '<label for="f-signup-user">Claim your name</label><div class="signup">' +
+    '<div class="anyuser"><input id="f-signup-user" value="' + esc(su.user || '') + '" placeholder="yourname" spellcheck="false" autocapitalize="none" autocomplete="off" maxlength="32" aria-describedby="signupHint"' + dis + '><span class="faint mono">.' + dom + '</span></div>' +
+    '<input id="f-signup-email" type="email" inputmode="email" placeholder="you@example.com" autocomplete="email" spellcheck="false" autocapitalize="none" aria-label="Email for the confirmation link"' + dis + '>' +
+    '<div class="remote-actions"><button type="button" class="btn primary" data-action="relay-signup"' + dis + '>' + icon('mail') + 'Email me a link</button></div>' +
+    (bad ? '<div class="hint warnish">' + esc(bad) + '</div>' : '') + '<div class="hint warnish" id="signupErr" hidden></div>' +
+    '</div><div class="hint" id="signupHint">' + (local ? 'Use your board from anywhere: we email you a link, you press Confirm, and this Mac is on <b>yourname.' + dom + '</b>. Free during the beta. Or in a terminal: <code>leftoff relay signup yourname</code>.' : 'Claim a name from a Mac.') + '</div>'
+}
+
+// Use from anywhere (v0.6.0): the hosted relay at <user>.leftoff.dev. The
+// switch, the name, the relay's state, pairing a phone, the paired devices.
+function anywhereSection(r) {
+  if (!r) return ''
+  const v = r.viewer || {}
+  const local = !!v.local
+  const dis = local ? '' : ' disabled'
+  const dom = esc(r.domain || 'leftoff.dev')
+  const su = r.signup || { status: 'none' }
+  let h = '<div class="section" id="anywhere">Use from anywhere</div>' +
+    '<div class="full hint">Your board at <b>' + esc(r.host || 'you.leftoff.dev') + '</b> on your phone or any browser, with no Tailscale and no open ports. Each Mac keeps one outbound connection to your relay. The board’s data is end-to-end encrypted between a paired browser and your Macs, so the relay passes along what it can’t read. <a href="https://leftoff.dev/how-it-works" target="_blank" rel="noopener">How it works ↗</a></div>'
+  // No name yet on any Mac in this folder: claim one (0.6.1, an email link, no admin token).
+  if ((!r.user || su.status === 'pending') && su.status !== 'confirmed') h += signupBlock(r, su, local)
+  h += '<label for="f-anywhere">Use from anywhere</label><label class="check"><input id="f-anywhere" type="checkbox" data-action="relay-toggle"' + (r.enabled ? ' checked' : '') + dis + '><span>On for this Mac (' + esc(r.machine || '') + ')</span></label>' +
+    '<label for="f-anywhere-user">' + (r.user ? 'Your name' : 'Have a name?') + '</label><div class="anyuser"><input id="f-anywhere-user" value="' + esc(r.user || '') + '" placeholder="yourname" spellcheck="false" autocapitalize="none" autocomplete="off" maxlength="32"' + dis + '><span class="faint mono">.' + dom + '</span>' +
+    (local && r.user ? '<button type="button" class="btn sm" data-action="relay-user">Save</button>' : '') + '</div>' +
+    '<div class="hint">' + (r.user ? 'Your own subdomain. Your other Macs join on their own when you switch this on there, while a Mac that’s already on it is awake.' : 'Already claimed one on another Mac? Type it here and switch this on; that Mac vouches for this one while it’s awake.') + '</div>'
+  if (r.enabled) {
+    const st = r.connected ? '<span class="chip ok">Connected' + (r.latencyMs != null ? ' · ' + esc(r.latencyMs) + ' ms' : '') + '</span>' : '<span class="chip warn">' + (r.connecting && !r.problem ? 'Connecting…' : 'Not connected') + '</span>'
+    h += '<label>Relay</label><div class="relaystat">' + st + (r.problem ? '<div class="hint warnish">' + esc(r.problem) + '</div>' : '') + '</div>'
+    if (r.boardUrl) h += '<label>Address</label><div class="remote-urls"><span class="chip mono">' + esc(r.boardUrl) + '</span><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(r.boardUrl) + '">Copy</button></div>'
+    if (local) h += '<label>Pair a phone</label><div class="remote-actions"><button type="button" class="btn primary" data-action="relay-pair"' + (r.connected ? '' : ' disabled') + '>' + icon('qr-code') + 'Pair a phone</button></div>' +
+      '<div class="full signin" id="relayPair" hidden></div>'
+  }
+  const list = r.list || []
+  h += '<label>Paired devices</label><div class="devlist">' + (list.length ? list.map((d) =>
+    '<div class="dev" data-device="' + esc(d.id) + '"><div class="dev-main"><b>' + esc(d.name) + '</b>' + (v.device === d.id ? ' <span class="chip">this one</span>' : '') +
+    '<div class="faint">Paired ' + esc(fmtAgo(d.createdAt)) + ' on ' + esc(d.pairedOn || '?') + (d.lastSeenAt ? ' · used ' + esc(fmtAgo(d.lastSeenAt)) : '') + ' · reaches ' + esc((d.macs || []).join(', ')) + '</div></div>' +
+    (local ? '<button type="button" class="btn sm danger" data-action="relay-revoke" data-device="' + esc(d.id) + '" data-name="' + esc(d.name) + '">Revoke</button>' : '') + '</div>').join('')
+    : '<div class="faint">None yet.</div>') + '</div>' +
+    '<div class="hint">' + (local ? 'Revoking works at once: the relay refuses the device and your Macs throw away its key.' : 'Revoke devices from a Mac.') + ' Answering prompts from a phone follows <a href="#/settings/security">Privacy &amp; security</a>. Planned: a passkey as a second factor.</div>'
+  return h
+}
+function fmtAgo(iso) {
+  const t = Date.parse(iso || ''); if (!t) return 'never'
+  const m = Math.round((Date.now() - t) / 60000)
+  return m < 2 ? 'just now' : m < 60 ? m + ' min ago' : m < 36 * 60 ? Math.round(m / 60) + ' h ago' : Math.round(m / 1440) + ' days ago'
+}
+let relayPairTimer = null
+// While a signup link is out, ask the daemon every 2 s whether it was confirmed.
+let signupTimer = null
+function stopSignupPoll() { if (signupTimer) clearInterval(signupTimer); signupTimer = null }
+function relaySignupPoll() {
+  if (signupTimer) return
+  signupTimer = setInterval(async () => {
+    if (!document.querySelector('.signup-wait')) return stopSignupPoll()
+    let st; try { st = await api('GET', '/v1/relay/signup') } catch { return }
+    if (st.status === 'pending') return
+    stopSignupPoll()
+    if (st.status === 'confirmed') toast('✓ ' + st.host + ' is yours. Pair your phone next.')
+    render()
+  }, 2000)
+}
+function paintRelayPair(l) {
+  const box = document.getElementById('relayPair')
+  if (!box) return
+  box.hidden = false; box.classList.remove('expired')
+  box.innerHTML = '<div class="qr"><img alt="QR code: scan with the iPhone camera" width="220" height="220" src="data:image/svg+xml;base64,' + btoa(l.qrSvg) + '"></div>' +
+    '<div class="signin-text"><div class="faint">Scan with your phone’s camera, or open this link on it:</div><code class="link">' + esc(l.link) + '</code>' +
+    '<button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(l.link) + '">Copy link</button>' +
+    '<div class="faint gap">Or type this code at ' + esc(l.link.split('#')[0]) + ':</div><div class="code-big long" aria-label="Pairing code">' + esc(l.code) + '</div>' +
+    '<div class="expiry" id="relayExpiry" data-expires="' + esc(l.expiresAt) + '"></div>' +
+    '<button type="button" class="linkish" data-action="relay-pair">New code</button></div>'
+  const tick = () => {
+    const el = document.getElementById('relayExpiry')
+    if (!el) { clearInterval(relayPairTimer); relayPairTimer = null; return }
+    const left = Date.parse(el.dataset.expires) - Date.now()
+    if (left <= 0) { el.textContent = 'Expired. Make a new one.'; el.classList.add('warn'); box.classList.add('expired'); clearInterval(relayPairTimer); relayPairTimer = null; return }
+    el.textContent = 'Works once · expires in ' + Math.floor(left / 60000) + ':' + String(Math.floor(left / 1000) % 60).padStart(2, '0')
+  }
+  if (relayPairTimer) clearInterval(relayPairTimer)
+  relayPairTimer = setInterval(tick, 1000); tick()
+}
+
+// Answering prompts from another device (v0.4.4): off unless turned on here, on
+// this machine. Shown in Settings → Privacy & security since 0.5.9, only while
+// remote access is on (as before).
+function answeringSection(r, relay) {
+  const anywhere = !!(relay && (relay.enabled || (relay.list || []).length))
+  if (!r || !(r.enabled || anywhere)) return ''
+  const local = r.via !== 'remote'
+  const allow = !!(state.cfg && state.cfg.remote && state.cfg.remote.allowAnswers)
+  return '<label for="f-remote-answers">Answering</label><label class="check"><input id="f-remote-answers" type="checkbox"' + (allow ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Allow answering permission prompts and questions from other devices</span></label>' +
+    '<div class="warnbox"><b>Think before turning this on.</b> Anyone signed in to this board over Tailscale, or using a browser you paired for Use from anywhere, could then approve what Claude runs on this machine, including commands that delete files or push code. Off, other devices still see what’s waiting and can’t answer it. ' +
+    (local ? 'Every answer is recorded in the session’s answers.md with where it came from.' : 'This can only be changed on the machine running Leftoff.') + '</div>'
+}
+
+// The sign-in box under "Show QR code" / "Get a code": the QR image, the link,
+// the code, and a live countdown to its expiry.
+let signinTimer = null
+function paintSignin(l) {
+  const box = document.getElementById('remoteLink')
+  if (!box) return
+  box.hidden = false
+  const code = '<div class="code-big" aria-label="Sign-in code">' + esc(l.code) + '</div>'
+  box.innerHTML = (l.qrSvg ? '<div class="qr"><img alt="QR code: scan with the iPhone camera" width="220" height="220" src="data:image/svg+xml;base64,' + btoa(l.qrSvg) + '"></div>' : '') +
+    '<div class="signin-text">' +
+    (l.qrSvg ? '<div class="faint">Scan with the iPhone camera, or open:</div><code class="link">' + esc(l.url) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(l.url) + '">Copy link</button>' +
+      '<div class="faint gap">Home-screen app? Type this code in it:</div>' : '<div class="faint">Type this code in the home-screen app:</div>') + code +
+    '<div class="expiry" id="signinExpiry" data-expires="' + esc(l.expiresAt) + '"></div>' +
+    '<button type="button" class="linkish" data-action="' + (l.qrSvg ? 'remote-link' : 'remote-code') + '">New ' + (l.qrSvg ? 'QR code and code' : 'code') + '</button></div>'
+  const tick = () => {
+    const el = document.getElementById('signinExpiry')
+    if (!el) { clearInterval(signinTimer); signinTimer = null; return }
+    const left = Date.parse(el.dataset.expires) - Date.now()
+    if (left <= 0) { el.textContent = 'Expired. Make a new one.'; el.classList.add('warn'); box.classList.add('expired'); clearInterval(signinTimer); signinTimer = null; return }
+    const m = Math.floor(left / 60000), sec = Math.floor(left / 1000) % 60
+    el.textContent = 'Works once · expires in ' + m + ':' + String(sec).padStart(2, '0') + ' (at ' + new Date(el.dataset.expires).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) + ')'
+  }
+  if (signinTimer) clearInterval(signinTimer)
+  signinTimer = setInterval(tick, 1000)
+  tick()
+}
+
+// Settings → Digest (v0.4.3): time with its zone, days, skip quiet days, zone override.
+const DAY_KEYS = [['mon', 'M', 'Monday'], ['tue', 'T', 'Tuesday'], ['wed', 'W', 'Wednesday'], ['thu', 'T', 'Thursday'], ['fri', 'F', 'Friday'], ['sat', 'S', 'Saturday'], ['sun', 'S', 'Sunday']]
+function browserZone() { try { return Intl.DateTimeFormat().resolvedOptions().timeZone } catch { return '' } }
+function digestSettings(c) {
+  const d = c.digest || {}
+  const dg = (state.health && state.health.digest) || {}
+  const days = Array.isArray(d.days) && d.days.length ? d.days : DAY_KEYS.map(([k]) => k)
+  const zone = dg.timeZone || d.timeZone || dg.daemonZone || ''
+  const bz = browserZone()
+  let zones = []
+  try { zones = Intl.supportedValuesOf('timeZone') } catch {}
+  const zoneNote = bz && zone && bz !== zone ? '<div class="hint warnish">This browser is in ' + esc(bz) + '. The digest runs on ' + esc(zone) + ' time' + (d.timeZone ? ' (set below)' : ', the zone of the machine running Leftoff') + '.</div>' : ''
+  return '<div class="section dup" id="digest">Digest</div>' +
+    '<label for="f-time">Time</label><div class="timerow"><input id="f-time" type="time" value="' + esc(d.time || '') + '"><span class="zone" id="f-zone">' + esc(zone) + (dg.zoneAbbr && dg.zoneAbbr !== zone ? ' (' + esc(dg.zoneAbbr) + ')' : '') + '</span></div>' +
+    '<div class="hint">' + (dg.time ? 'Next one: ' + esc(dg.nextAt ? clock(dg.nextAt) : '—') + '. ' : '') + 'Clear the time to turn automatic digests off.</div>' + zoneNote +
+    '<label>Days</label><div class="days" role="group" aria-label="Digest days">' + DAY_KEYS.map(([k, l, full]) => '<button type="button" class="day" data-action="day-toggle" data-day="' + k + '" aria-pressed="' + days.includes(k) + '" title="' + full + '" aria-label="' + full + '">' + l + '</button>').join('') +
+      '<span class="presets"><button type="button" class="linkish" data-action="days-preset" data-days="all">Every day</button> · <button type="button" class="linkish" data-action="days-preset" data-days="weekdays">Weekdays</button></span></div>' +
+    '<label for="f-skip">Quiet days</label><label class="check"><input id="f-skip" type="checkbox"' + (d.skipEmpty !== false ? ' checked' : '') + '><span>Skip days with no activity (no empty digest is written).</span></label>' +
+    '<label for="f-tz">Time zone</label>' + selectHtml({ id: 'f-tz', value: d.timeZone || '', options: [['', 'This machine’s (' + (dg.daemonZone || '?') + ')'], ...zones.map((z) => [z, z.replace(/_/g, ' ')])] })
+}
+
+// Settings (v0.5.9): one section at a time. Desktop (≥900px) has a sidebar of
+// sections with the chosen one on the right; a phone gets an iOS-style list
+// that drills into a section with a back link. Every section has its own link
+// (#/settings/spaces) that survives a reload; the old ones (#/settings?spaces,
+// ?sync, ?remote…) land on the same section. All fields stay in one form, so
+// Save still saves every section, exactly as before; switching sections never
+// redraws the form, so nothing you typed is lost.
+const settingsUi = { q: '' }
+const wideSettings = () => window.matchMedia('(min-width: 900px)').matches
+function settingsKey(r) { return r ? settingsKeyFor(r.arg, r.params ? [...r.params.keys()] : []) : null }
+// The old links (#/settings?spaces) become the new form in the address bar, without a reload.
+function canonSettingsHash(r) {
+  const k = settingsKey(r)
+  if (k && (r.arg !== k || [...r.params.keys()].length)) { try { history.replaceState(null, '', '#/settings/' + k) } catch {} }
+}
+const settingsSec = (k) => SETTINGS.find((x) => x.key === k) || SETTINGS[0]
+
+// Small dots on a section: what used to show at the top of the page.
+function settingsDots() {
+  const dots = {}
+  const add = (k, level, why) => { const d = dots[k] || (dots[k] = { level, why: [] }); if (level === 'warn') d.level = 'warn'; d.why.push(why) }
+  const st = stUi.data
+  if (st && st.installed) {
+    if (!st.running) add('sync', 'warn', 'Syncthing is installed but not running')
+    else if (st.folder) {
+      if (st.folder.isCurrent === false) add('sync', 'warn', 'Syncthing shares another folder than the one Leftoff uses')
+      if ((st.folder.errors || []).length) add('sync', 'warn', 'Syncthing reports a folder error')
+      for (const p of st.peers || []) if (p.notSharing) add('sync', 'warn', p.name + ' isn’t sharing the folder yet'); else if (!p.connected && (!p.lastSeen || Date.now() - Date.parse(p.lastSeen) > 864e5)) add('sync', 'warn', p.name + ' hasn’t connected for over a day')
+    }
+    if ((st.knocked || []).length) add('sync', 'warn', 'A Mac asked to connect without the pairing proof')
+  }
+  if (st && st.run && st.run.state === 'failed') add('sync', 'warn', 'The last Syncthing step failed')
+  const peers = syncUi.peers && syncUi.peers.peers
+  if (peers && peers.some((x) => x.trust === 'key_changed')) add('security', 'warn', 'A machine’s key changed')
+  const ag = agentUi.data && agentUi.data.agents
+  if (ag && ag.some((a) => a.status && a.status.error)) add('agents', 'warn', 'A feed couldn’t be pulled')
+  const h = state.health || {}
+  if (h.digest && h.digest.lastError) add('digest', 'warn', 'The last digest failed')
+  if (h.update && h.update.available) add('updates', 'info', 'Update available: v' + (h.update.remoteVersion || '?'))
+  const sp = spacesUi.data
+  if (sp && (sp.machines || []).some((m) => !m.set)) add('spaces', 'info', 'A Mac has no space yet')
+  return dots
+}
+function paintSettingsDots() {
+  const wrap = document.getElementById('settingsWrap')
+  if (!wrap) return
+  const dots = settingsDots()
+  for (const a of wrap.querySelectorAll('.set-nav a[data-sec]')) {
+    const d = dots[a.dataset.sec], el = a.querySelector('.sdot')
+    el.hidden = !d
+    el.className = 'sdot' + (d ? ' ' + d.level : '')
+    el.title = d ? d.why.join(' · ') : ''
+    el.textContent = d ? d.why.join('. ') : ''
+  }
+}
+
+// Search inside settings: section names, their key words, and every label in them.
+function settingsFilter() {
+  const wrap = document.getElementById('settingsWrap')
+  if (!wrap) return null
+  const q = settingsUi.q.trim().toLowerCase()
+  let first = null
+  for (const sec of SETTINGS) {
+    const a = wrap.querySelector('.set-nav a[data-sec="' + sec.key + '"]')
+    const pane = wrap.querySelector('.set-pane[data-sec="' + sec.key + '"]')
+    const labels = pane ? [...pane.querySelectorAll('label, .section, .sp-sub, .ah strong, summary')].map((el) => el.textContent.toLowerCase()) : []
+    const hit = !q || (sec.label + ' ' + sec.words).toLowerCase().includes(q) || labels.some((t) => t.includes(q))
+    a.parentElement.hidden = !hit
+    if (hit && !first) first = sec.key
+  }
+  wrap.querySelectorAll('.set-hit').forEach((el) => el.classList.remove('set-hit'))
+  if (q) for (const el of wrap.querySelectorAll('.set-pane:not([hidden]) label, .set-pane:not([hidden]) .section, .set-pane:not([hidden]) .sp-sub')) if (el.textContent.toLowerCase().includes(q)) el.classList.add('set-hit')
+  const none = wrap.querySelector('.set-nomatch')
+  none.hidden = !!first
+  none.textContent = first ? '' : 'Nothing in Settings matches “' + settingsUi.q.trim() + '”.'
+  return first
+}
+
+// Show one section without redrawing the form.
+function showSettingsSection(r) {
+  const wrap = document.getElementById('settingsWrap')
+  if (!wrap) return
+  canonSettingsHash(r)
+  closeMenu()
+  const asked = settingsKey(r)
+  const sec = settingsSec(asked || 'general')
+  wrap.classList.toggle('has-sec', !!asked)
+  wrap.classList.toggle('no-sec', !asked)
+  for (const p of wrap.querySelectorAll('.set-pane')) p.hidden = p.dataset.sec !== sec.key
+  for (const a of wrap.querySelectorAll('.set-nav a[data-sec]')) { const on = a.dataset.sec === sec.key; a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') }
+  document.getElementById('setTitle').textContent = sec.label
+  document.getElementById('setSub').textContent = sec.sub
+  // Save shows where a section has fields that Save writes (Privacy & security has none while remote access is off)
+  const pane = wrap.querySelector('.set-pane[data-sec="' + sec.key + '"]')
+  document.getElementById('setSave').hidden = !(sec.save && pane && pane.querySelector('input:not([type="hidden"]):not([data-agent-field]), lo-select, .day'))
+  document.title = (asked || wideSettings() ? sec.label + ' · ' : '') + 'Settings · Leftoff'
+  settingsFilter()
+  if (!wideSettings() || wrap.getBoundingClientRect().top < 0) window.scrollTo(0, 0)
+}
+
+async function viewSettings() {
+  const [c, , remote, sync, peers, st, , , relay] = await Promise.all([api('GET', '/v1/config'), spacesLoad(), api('GET', '/v1/remote').catch(() => null), api('GET', '/v1/sync').catch(() => null), api('GET', '/v1/peers').catch(() => null), api('GET', '/v1/syncthing').catch(() => null), refreshHealth().catch(() => null), agentsLoad(), api('GET', '/v1/relay').catch(() => null)])
+  state.relay = relay
+  syncUi.data = sync; syncUi.peers = peers; if (st) stUi.data = st
+  state.cfg = c
+  const sm = c.summarizer || {}
+  const cur = String(sm.provider || sm.mode || 'auto').toLowerCase()
+  const pref = window.cpTheme ? window.cpTheme.pref() : 'system'
+  const h = state.health || {}
+  const unavailable = (what) => '<div class="full hint set-empty">' + esc(what) + '</div>'
+  const panes = {
+    general: '<div class="section">Checkpoints</div>' +
+      '<label for="f-dormant">Dormant after (min)</label><input id="f-dormant" type="number" min="1" step="1" value="' + esc(c.dormantAfterMin) + '">' +
+      '<div class="hint">A session with no activity this long gets a checkpoint.</div>' +
+      '<label for="f-gap">Min gap (min)</label><input id="f-gap" type="number" min="0" step="1" value="' + esc(c.minGapMin) + '">' +
+      '<div class="hint">No automatic checkpoint closer than this to the last one.</div>' +
+      '<div class="section">Needs you</div>' +
+      '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a macOS notification when a session has waited on a permission prompt or question for ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
+      '<div class="hint">Answered sooner (in the terminal or here), no notification. With <code>terminal-notifier</code> installed (<code>brew install terminal-notifier</code>), clicking the notification jumps to the session.</div>' +
+      '<div class="section">Appearance</div>' +
+      '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>',
+    digest: digestSettings(c),
+    spaces: '<div class="full-box" id="spacesBox">' + spacesSectionHtml() + '</div>',
+    sync: syncSection(sync, stUi.data) || unavailable('Couldn’t read the sync status from Leftoff.'),
+    agents: '<div class="full-box" id="agentsBox">' + agentsSectionHtml() + '</div>',
+    models: '<div class="section">Summarizer</div>' +
+      '<label for="f-mode">Provider</label>' + selectHtml({ id: 'f-mode', value: cur, options: PROVIDERS.map(([v, label]) => [v, label]) }) +
+      '<div class="hint" id="f-mode-hint"></div>' +
+      '<label data-row="model">Model</label><div data-row="model" class="models" id="f-models-list" role="radiogroup" aria-label="Model"><div class="nocp">Loading…</div></div>' +
+      '<input type="hidden" id="f-model" value="' + esc(sm.model || '') + '">' +
+      '<label for="f-base" data-row="base">Server URL</label><input id="f-base" data-row="base" value="' + esc(sm.baseUrl || '') + '">' +
+      '<label for="f-key" data-row="key">API key</label><div class="keyrow" data-row="key"><input id="f-key" type="password" autocomplete="new-password" spellcheck="false"><span class="keystate" id="f-keystate"></span></div>' +
+      '<div class="hint" data-row="key" id="f-key-hint"></div>' +
+      summariesSection(c),
+    phone: (anywhereSection(relay) ? anywhereSection(relay) + '<div class="section">Over Tailscale</div>' : '') + (remoteSection(remote) || unavailable('Couldn’t read remote access from Leftoff.')) +
+      (remote && remote.enabled ? '<div class="full hint set-link">Answering prompts from your phone is in <a href="#/settings/security">Privacy &amp; security</a>.</div>' : ''),
+    security: '<div class="section" id="answering">Answering from other devices</div>' + (answeringSection(remote, relay) ||
+        '<div class="full hint">Other devices reach this board only once remote access or Use from anywhere is on (<a href="#/settings/phone">Phone &amp; remote</a>). Until then nothing can answer from elsewhere.</div>') +
+      machinesSection(peers) +
+      '<div class="section">Your data</div>' +
+      '<div class="full hint">Everything Leftoff writes is plain Markdown and JSON in your Leftoff folder. API keys, machine keys and the board token stay on each Mac. <a href="' + SECURITY_URL + '" target="_blank" rel="noopener">The full security notes ↗</a></div>',
+    updates: '<div class="section">Updates</div>' +
+      '<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 newer version once a day. Nothing installs on its own.</span></label>' +
+      '<div class="hint">' + updateLine() + ' <button type="button" class="linkish" data-action="check-updates">Check now</button></div>' +
+      '<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="' + REPO_URL + '" target="_blank" rel="noopener">GitHub ↗</a></div>' +
+      '<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>',
+  }
+  const r = state.route || parseRoute()
+  $app.innerHTML = '<div class="settings no-sec" id="settingsWrap">' +
+    '<aside class="set-nav"><div class="set-navhead"><h1>Settings</h1></div>' +
+      '<div class="set-search">' + icon('search') + '<input id="setFilter" type="search" placeholder="Search settings" aria-label="Search settings" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(settingsUi.q) + '"></div>' +
+      '<nav aria-label="Settings sections"><ul>' + SETTINGS.map((x) => '<li><a href="#/settings/' + x.key + '" data-sec="' + x.key + '">' + icon(x.icon) + '<span class="set-lbl">' + esc(x.label) + '</span><span class="sdot" hidden></span>' + icon('chevron-right', 'ic set-chev') + '</a></li>').join('') + '</ul></nav>' +
+      '<p class="set-nomatch" hidden></p></aside>' +
+    '<div class="set-main"><div class="set-head"><a class="set-back" href="#/settings">' + icon('chevron-left') + 'Settings</a><h2 id="setTitle"></h2><div class="sub" id="setSub"></div></div>' +
+      '<form class="form" id="settingsForm" autocomplete="off">' +
+      SETTINGS.map((x) => '<section class="set-pane" data-sec="' + x.key + '" aria-label="' + esc(x.label) + '" hidden>' + panes[x.key] + '</section>').join('') +
+      '<div class="full set-save" id="setSave"><span class="faint">Saves every section to config.json in your Leftoff folder.</span><button class="btn primary" type="submit">' + icon('check') + 'Save</button></div></form></div></div>'
+  showSettingsSection(r)
+  paintSettingsDots()
+  syncProviderFields()
+  // Claim your name (0.6.1): Enter sends the link instead of saving the form; a link already out keeps polling.
+  for (const id of ['f-signup-user', 'f-signup-email']) { const el = document.getElementById(id); if (!el) continue; el.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); const b = document.querySelector('[data-action="relay-signup"]'); if (b) b.click() } }); el.addEventListener('input', () => { const er = document.getElementById('signupErr'); if (er) er.hidden = true }) }
+  if (document.querySelector('.signup-wait')) relaySignupPoll()
+  for (const el of document.querySelectorAll('input[name="f-length"]')) el.addEventListener('change', () => { const ex = document.getElementById('f-length-example'); if (ex) ex.innerHTML = lengthExample(el.value) })
+  if (syncUi.step) paintSyncWizard()
+  stSchedule()
+  document.getElementById('f-mode').addEventListener('change', () => {
+    const c = state.cfg || {}
+    const same = document.getElementById('f-mode').value === String((c.summarizer && c.summarizer.provider) || 'auto').toLowerCase()
+    document.getElementById('f-model').value = same ? (c.summarizer.model || '') : ''
+    syncProviderFields()
+  })
+  const f = document.getElementById('setFilter')
+  f.addEventListener('input', () => { settingsUi.q = f.value; settingsFilter() })
+  f.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape' && f.value) { ev.preventDefault(); f.value = ''; settingsUi.q = ''; settingsFilter() }
+    if (ev.key === 'Enter') { ev.preventDefault(); const k = settingsFilter(); if (k) location.hash = '#/settings/' + k }
+  })
+}
+
+// ------------------------------------------------------------ sync and other machines (v0.5.2)
+
+const syncUi = { step: null, pick: null, custom: '', plan: null, data: null, peers: null, error: null, moving: null }
+
+function syncSection(d, st) {
+  if (!d) return ''
+  const local = d.viewer && d.viewer.local
+  const cur = d.current || {}
+  let h = '<div class="section dup" id="sync">Sync</div>' +
+    '<label>Folder</label><div class="syncnow"><span class="chip mono">' + esc(cur.display || '') + '</span>' +
+    (cur.syncedBy ? '<span class="chip ok">' + icon('check') + 'in ' + esc(cur.syncedBy.label) + '</span>' : '<span class="chip">not in a synced folder</span>') + '</div>' +
+    '<div class="hint">' + (cur.syncedBy ? 'Every Mac that uses this folder shows up on one board. Each writes only its own files, so they never collide.' : 'Put the folder in Syncthing, Dropbox or iCloud Drive and every Mac you use shows up on one board.') + '</div>'
+  h += stSection(st)
+  const stOwns = st && st.folder && st.folder.isCurrent
+  if (local) h += '<label>' + (st ? 'Other sync' : 'Set up') + '</label><div><button type="button" class="btn' + (cur.syncedBy || st ? '' : ' primary') + '" data-action="sync-open">' + icon('folder-sync') + (cur.syncedBy ? 'Move or join another folder' : st ? 'Use iCloud, Dropbox or another folder' : 'Set up syncing') + '</button></div>'
+  else h += '<label>Set up</label><div class="hint">Moving the folder is done on the Mac itself (its own browser, or <code>leftoff move</code>).</div>'
+  h += '<div class="full" id="syncWizard"' + (syncUi.step ? '' : ' hidden') + '></div>'
+  if (cur.syncedBy && d.join && !stOwns) h += '<label>Other Macs</label><div class="joinline"><code class="cmd">' + esc(d.join.installed) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(d.join.installed) + '">Copy</button></div>' +
+    '<div class="hint">Run it on each other Mac once the folder has synced there. Not installed yet: <code>' + esc(d.join.fresh) + '</code></div>'
+  for (const b of d.backups || []) {
+    h += '<label>Old folder</label><div class="backup"><span class="chip mono">' + esc(b.display) + '</span>' + (local ? '<button type="button" class="btn sm" data-action="sync-delete-backup" data-path="' + esc(b.path) + '">Delete it…</button>' : '') + '</div>' +
+      '<div class="hint">Kept from the move' + (b.at ? ' on ' + esc(clock(b.at)) : '') + '. Leftoff never deletes it on its own; delete it once the board looks right.</div>'
+  }
+  return h
+}
+
+// ------------------------------------------------------------ Settings → Agents (v0.5.4)
+
+const REPO_URL = 'https://github.com/OneSillyApp/leftoff'
+const AGENT_HOSTING_URL = REPO_URL + '/blob/main/docs/agent-feed-hosting.md'
+const agentUi = { data: null, err: null, busy: false }
+function agentStatusLine(a) {
+  const st = a.status || {}
+  const when = (t) => (t ? ago(t) : 'never')
+  if (st.error) return '<span class="chip warn">' + esc(st.error.code === 'unreachable' ? 'unreachable' : st.error.code === 'invalid' ? 'invalid feed' : st.error.code === 'unauthorized' ? 'key refused' : 'error') + '</span> <span>' + esc(st.error.message) + '</span>' +
+    '<div class="faint">Last success: ' + esc(when(st.lastSuccessAt)) + ' · tried ' + esc(when(st.lastAttemptAt)) + '</div>' +
+    (st.error.details && st.error.details.length ? '<details class="agent-details"><summary>Details</summary><ul>' + st.error.details.map((d) => '<li class="mono">' + esc(d) + '</li>').join('') + '</ul></details>' : '')
+  if (st.ok) return '<span class="chip ok">' + icon('check') + 'pulled ' + esc(when(st.lastSuccessAt)) + '</span> <span>' + esc(a.sessions) + ' session' + (a.sessions === 1 ? '' : 's') + (a.needsYou ? ' · ' + esc(a.needsYou) + ' waiting on you' : '') + '</span>'
+  return '<span class="chip">not pulled yet</span>'
+}
+function agentRow(a, local) {
+  const who = a.pullsHere ? 'pulled by this Mac every ' + esc(Math.round((agentUi.data && agentUi.data.pollSec || 120) / 60)) + ' min' : a.puller ? 'pulled by ' + esc(a.puller) + (a.hasKey ? '' : ' (its key is on that Mac)') : 'not pulled'
+  return '<div class="agentrow" data-agent="' + esc(a.name) + '">' +
+    '<div class="ah">' + agentChipHtml(a) + '<span class="mono faint">' + esc(a.name) + '</span></div>' +
+    '<div class="as">' + agentStatusLine(a) + '</div>' +
+    '<div class="faint am"><span class="mono">' + esc(a.feedUrl || '') + '</span> · ' + who + '</div>' +
+    '<div class="row">' + (a.pullsHere ? '<button type="button" class="btn" data-action="agent-refresh" data-name="' + esc(a.name) + '">Refresh</button>' : '') +
+      (local ? '<button type="button" class="btn" data-action="agent-remove" data-name="' + esc(a.name) + '">Remove</button>' : '') + '</div></div>'
+}
+function agentsSectionHtml() {
+  const d = agentUi.data
+  if (!d) return '<div class="section dup" id="agents">Agents</div><div class="full nocp">' + esc(agentUi.err || 'Loading…') + '</div>'
+  const local = d.viewer && d.viewer.local
+  let h = '<div class="section dup" id="agents">Agents</div>' +
+    '<div class="full hint">Work you do with an AI assistant outside Claude Code (Tab, and later others) shows up on the board like another machine. The agent publishes a private feed; ' + (d.agents.length ? 'one Mac pulls it every 2 minutes and the sessions sync to the others as Markdown in <code>agents/</code>.' : 'one Mac pulls it every 2 minutes. Its sessions, “needs you” items and lists show up read-only.') +
+    ' <a class="agent-howto" href="' + AGENT_HOSTING_URL + '" target="_blank" rel="noopener noreferrer">How to host a feed ↗</a></div>'
+  h += '<div class="full agents">' + (d.agents.length ? d.agents.map((a) => agentRow(a, local)).join('') : '<div class="nocp">No agent feeds yet.</div>') + '</div>'
+  if (local) {
+    h += '<div class="full agentadd"><div class="ah"><strong>Add agent feed</strong></div>' +
+      '<div class="agrid"><label for="f-agent-name">Name</label><input id="f-agent-name" data-agent-field placeholder="tab" maxlength="31" autocapitalize="off" spellcheck="false" pattern="[a-z0-9][a-z0-9-]*">' +
+      '<label for="f-agent-url">Feed URL</label><input id="f-agent-url" data-agent-field type="url" placeholder="https://…/feed.json" spellcheck="false">' +
+      '<label for="f-agent-key">Key</label><input id="f-agent-key" data-agent-field type="password" autocomplete="new-password" spellcheck="false" placeholder="the feed’s key"></div>' +
+      '<div class="row"><button type="button" class="btn primary" data-action="agent-add"' + (agentUi.busy ? ' disabled' : '') + '>' + (agentUi.busy ? 'Adding…' : 'Add and pull') + '</button><span class="faint">The key stays on this Mac (~/.config/checkpoints/agents/, mode 0600). Only the name and URL go in the synced folder.</span></div>' +
+      (agentUi.addErr ? '<div class="need-note warn">' + esc(agentUi.addErr) + '</div>' : '') + '</div>'
+  } else h += '<div class="full hint">Adding or removing a feed works on the Mac running Leftoff (or <code>leftoff agents add</code>).</div>'
+  return h
+}
+async function agentsLoad() { try { agentUi.data = await api('GET', '/v1/agents'); agentUi.err = null } catch (e) { agentUi.err = e.message } }
+async function agentsRepaint() {
+  await agentsLoad()
+  const el = document.getElementById('agentsBox')
+  if (el) el.innerHTML = agentsSectionHtml()
+  paintSettingsDots()
+}
+async function agentAdd(btn) {
+  const v = (id) => (document.getElementById(id) || {}).value || ''
+  const body = { name: v('f-agent-name').trim().toLowerCase(), url: v('f-agent-url').trim(), key: v('f-agent-key') }
+  if (!body.name || !body.url) { agentUi.addErr = 'Give it a name and the feed URL.'; return agentsRepaint() }
+  agentUi.busy = true; agentUi.addErr = null; btn.disabled = true; btn.textContent = 'Adding…'
+  try {
+    const r = await api('POST', '/v1/agents', body, { timeoutMs: 30000 })
+    const p = r.pull || {}
+    toast(p.result === 'error' ? 'Added ' + body.name + ', but the first pull failed: ' + ((p.error && p.error.message) || 'error') : 'Added ' + body.name + (p.applied ? ': ' + p.applied.sessions + ' session' + (p.applied.sessions === 1 ? '' : 's') : ''), 4000)
+  } catch (e) { agentUi.addErr = e.message }
+  agentUi.busy = false
+  await refreshHealth().catch(() => {})
+  return agentsRepaint()
+}
+
+// Settings → Spaces (v0.5.8): each Mac's default space, repo overrides,
+// agent feeds. Saved at once to spaces.json in the folder (no Save button).
+const spacesUi = { data: null, err: null }
+async function spacesLoad() { try { spacesUi.data = await api('GET', '/v1/spaces'); spacesUi.err = null } catch (e) { spacesUi.err = e.message } }
+async function spacesRepaint() { await spacesLoad(); const el = document.getElementById('spacesBox'); if (el) el.innerHTML = spacesSectionHtml(); paintSettingsDots() }
+function spaceSelect(kind, key, current, opts, { unsetLabel, isSet = true } = {}) {
+  return selectHtml({ cls: 'spsel', label: 'Space for ' + key, value: isSet ? current : '', attrs: { 'data-space-kind': kind, 'data-space-key': key },
+    options: [['', unsetLabel], ...opts.map((x) => [x, x]), ['__new', 'New space…']] })
+}
+function spacesSectionHtml() {
+  const d = spacesUi.data
+  if (!d) return '<div class="section dup" id="spaces">Spaces</div><div class="full nocp">' + esc(spacesUi.err || 'Loading…') + '</div>'
+  const opts = sortSpacesUi([...(d.spaces || []), ...(d.quickPicks || [])])
+  let h = '<div class="section dup" id="spaces">Spaces</div>' +
+    '<div class="full hint sp-explain">A space is a name like <b>Work</b> or <b>Personal</b>. Every session belongs to one: its own pick, else its repo’s, else its Mac’s default. The digest has a section per space with <b>Copy for standup</b>, and the board can show one space at a time. Saved in <code>spaces.json</code> in the synced folder, so every Mac agrees. <span class="faint">Planned: spaces will also decide which Macs each part of the folder syncs to, so Personal never lands on a work Mac.</span></div>'
+  h += '<div class="full spaces"><div class="sp-sub">Macs and their default space</div>' + d.machines.map((m) =>
+    '<div class="sprow"><div class="sp-name"><span class="chip machine">⌂ ' + esc(m.machine) + '</span>' + (m.here ? '<span class="faint">this Mac</span>' : '') + (m.set ? '' : '<span class="faint">no space yet, so it’s “' + esc(m.machine) + '”</span>') + '</div>' +
+    '<div class="sp-pick">' + (d.quickPicks || []).map((q) => '<button type="button" class="spq" data-action="space-quick" data-key="' + esc(m.machine) + '" data-space="' + esc(q) + '" aria-pressed="' + (m.set && m.space === q) + '">' + esc(q) + '</button>').join('') +
+    spaceSelect('machine', m.machine, m.space, opts, { unsetLabel: 'Its name', isSet: m.set }) + '</div></div>').join('') + '</div>'
+  h += '<div class="full spaces"><div class="sp-sub">Repo overrides <span class="faint">a repo counts as this space on every Mac (matched by its folder name)</span></div>' +
+    (d.repos.length ? d.repos.map((r) => '<div class="sprow"><div class="sp-name"><span class="chip mono">' + esc(r.key) + '</span></div><div class="sp-pick"><span class="chip space">' + esc(r.space) + '</span><button type="button" class="btn" data-action="space-unset" data-kind="repo" data-key="' + esc(r.key) + '">Remove</button></div></div>').join('') : '<div class="nocp">None yet. A work repo you also open on your personal Mac goes here.</div>') +
+    '<div class="sprow spadd">' + comboHtml({ id: 'f-space-repo', label: 'Repo', placeholder: 'repo folder name',
+      options: (d.repoSuggestions || (d.knownRepos || []).map((r) => ({ name: r }))).map((r) => ({ value: r.name, label: r.name, sub: r.parent || '' })) }) +
+    selectHtml({ id: 'f-space-repo-space', label: 'Space', options: opts.map((x) => [x, x]) }) +
+    '<button type="button" class="btn" data-action="space-repo-add">' + icon('plus') + 'Add</button></div></div>'
+  if (d.agents && d.agents.length) {
+    h += '<div class="full spaces"><div class="sp-sub">Agent feeds <span class="faint">default: the space of the Mac that pulls the feed</span></div>' + d.agents.map((a) => {
+      const own = (d.agentOverrides || []).find((x) => x.key === a.name)
+      return '<div class="sprow"><div class="sp-name"><span class="chip machine agent">' + esc(a.display || a.name) + '</span>' + (a.puller ? '<span class="faint">pulled by ' + esc(a.puller) + '</span>' : '') + '</div><div class="sp-pick">' + spaceSelect('agent', a.name, own ? own.space : a.space, opts, { unsetLabel: 'Its Mac’s (' + (own ? 'default' : a.space) + ')', isSet: !!own }) + '</div></div>'
+    }).join('') + '</div>'
+  }
+  if (d.sessions && d.sessions.length) h += '<div class="full hint">' + d.sessions.length + ' session' + (d.sessions.length === 1 ? ' has its' : 's have their') + ' own space (set on the session’s page).</div>'
+  h += '<div class="full hint">From a terminal: <code>leftoff spaces</code>, <code>leftoff spaces set-machine Work</code>, <code>leftoff spaces set-repo &lt;repo&gt; Work</code>, <code>leftoff standup --copy</code>.</div>'
+  return h
+}
+async function spacesAction(action, btn) {
+  let body
+  if (action === 'space-quick') body = { kind: 'machine', key: btn.dataset.key, space: btn.getAttribute('aria-pressed') === 'true' ? null : btn.dataset.space }
+  else if (action === 'space-unset') body = { kind: btn.dataset.kind, key: btn.dataset.key, space: null }
+  else {
+    const repo = (document.getElementById('f-space-repo') || {}).value || ''
+    const space = (document.getElementById('f-space-repo-space') || {}).value || ''
+    if (!repo.trim()) return toast('Type the repo’s folder name')
+    body = { kind: 'repo', key: repo.trim(), space }
+  }
+  btn.disabled = true
+  try { await api('POST', '/v1/spaces', body); toast(body.space ? (body.kind === 'repo' ? body.key + ' counts as ' : body.key + ' is in ') + body.space : 'Removed') } catch (e) { toast(e.message, 5000) }
+  return spacesRepaint()
+}
+
+function machinesSection(p) {
+  if (!p || p.off) return ''
+  const local = p.viewer && p.viewer.local
+  let h = '<div class="section" id="machines">Other machines</div>' +
+    '<label for="f-peer-allow">Answer and Go</label><label class="check"><input id="f-peer-allow" type="checkbox"' + (p.allowIncoming ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Allow other machines to answer and Go here</span></label>' +
+    '<div class="hint">Off by default. On, a Mac that shares this folder can answer this Mac’s permission prompts and questions and press Go, from its own board. Each command is signed with that Mac’s key from the folder, encrypted, and expires in a minute. ' +
+    (p.allowIncoming ? 'Listening on port ' + esc(p.listening || '—') + (p.relay ? (p.relay.connected ? ' and connected to the relay' : ' · relay not connected') : '') + '.' : 'While it’s off nothing listens.') + ' This Mac’s key: <code>' + esc(p.fingerprint) + '</code></div>'
+  h += '<div class="full">' + protectHtml('machines') + '</div>'
+  if (!p.peers.length) return h + '<label>Machines</label><div class="hint">No other Mac in this folder yet.</div>'
+  h += '<label>Machines</label><div class="peers">' + p.peers.map((x) => {
+    const u = x.usable || {}
+    const st = u.ok ? '<span class="chip ok">' + icon('check') + 'can answer and Go there · ' + esc(u.via === 'relay' ? 'through the relay' : 'direct') + '</span>' : '<span class="chip' + (x.trust === 'key_changed' ? ' warn' : '') + '">' + esc(u.reason || '') + '</span>'
+    return '<div class="peer" data-machine="' + esc(x.machine) + '"><span class="chip machine remote">⌂ ' + esc(x.machine) + '</span>' + st +
+      '<span class="fp" title="its key">' + esc(x.fingerprint || '') + '</span>' +
+      (x.trust === 'key_changed' && local ? '<button type="button" class="btn sm" data-action="peer-trust" data-machine="' + esc(x.machine) + '">Trust the new key</button>' : '') + '</div>'
+  }).join('') + '</div>'
+  return h + '<div class="hint">A machine’s key is trusted the first time this Mac sees it. If it changes, actions stop until you confirm it here.</div>'
+}
+
+function paintSyncWizard() {
+  const el = document.getElementById('syncWizard')
+  if (!el) return
+  el.hidden = !syncUi.step
+  const d = syncUi.data || {}
+  let h = '<div class="wizard">'
+  const steps = ['Pick a folder', 'Check', 'Move', 'Other Macs']
+  const at = { pick: 0, preview: 1, moving: 2, done: 3, failed: 2 }[syncUi.step] || 0
+  h += '<ol class="wsteps">' + steps.map((s, i) => '<li class="' + (i < at ? 'done' : i === at ? 'now' : '') + '">' + esc(s) + '</li>').join('') + '</ol>'
+  if (syncUi.step === 'pick') {
+    const cands = d.candidates || []
+    h += cands.length ? '' : '<p class="hint">No Syncthing, Dropbox or iCloud Drive folder found on this Mac. Type any folder that something syncs.</p>'
+    h += '<div class="wpicks" role="radiogroup" aria-label="Synced folder">' + cands.map((c, i) => '<button type="button" class="wpick' + (syncUi.pick === c.suggested ? ' on' : '') + '" role="radio" aria-checked="' + (syncUi.pick === c.suggested) + '" data-action="sync-pick" data-path="' + esc(c.suggested) + '">' +
+      '<b>' + esc(c.label) + (c.recommended ? ' <span class="chip ok">recommended</span>' : '') + '</b><span class="mono">' + esc(c.display) + '</span>' +
+      (c.hasLeftoff ? '<span class="join">Already has Leftoff from another Mac: this joins it</span>' : '') + '<span class="tradeoff">' + esc(c.tradeoff) + '</span></button>').join('') +
+      '<div class="wpick other' + (syncUi.pick === '__custom' ? ' on' : '') + '"><b>Another folder</b><input id="syncCustom" placeholder="~/Google Drive/Leftoff" value="' + esc(syncUi.custom) + '" spellcheck="false" autocomplete="off"><span class="tradeoff">Any folder works if something syncs it. Leftoff only needs plain files.</span></div></div>'
+    const picked = cands.find((c) => c.suggested === syncUi.pick)
+    h += protectHtml(picked ? picked.provider : 'other')
+    h += '<div class="wactions"><button type="button" class="btn" data-action="sync-cancel">Cancel</button><button type="button" class="btn primary" data-action="sync-preview"' + (syncUi.pick ? '' : ' disabled') + '>Next: check it</button></div>'
+  } else if (syncUi.step === 'preview' && syncUi.plan) {
+    const p = syncUi.plan, n = p.counts || {}
+    const problems = [...(p.errors || []), ...(p.collisions || [])]
+    h += '<p><b>' + (p.merge ? 'Join ' : 'Move to ') + '</b><span class="mono">' + esc(p.toDisplay || p.to) + '</span></p>'
+    if (problems.length) h += problems.map((e) => '<div class="warnbox">' + esc(e.message) + '</div>').join('')
+    else {
+      h += '<ul class="wplan"><li>' + esc(n.total) + ' files: ' + esc(n.copy) + ' to copy' + (n.same ? ', ' + esc(n.same) + ' already there' : '') + (n.keepTarget ? ', ' + esc(n.keepTarget) + ' kept from the joined folder' : '') + (n.conflictCopy ? ', ' + esc(n.conflictCopy) + ' list' + (n.conflictCopy === 1 ? '' : 's') + ' merged item by item' : '') + '</li>' +
+        (p.warnings || []).map((w) => '<li>' + esc(w.message) + '</li>').join('') +
+        '<li>Leftoff stops for a few seconds, copies everything, checks every file, then restarts on the new folder.</li>' +
+        '<li>The old folder stays, renamed to <span class="mono">' + esc(p.backupDisplay || p.backup) + '</span>, until you delete it.</li></ul>'
+    }
+    h += '<div class="wactions"><button type="button" class="btn" data-action="sync-back">Back</button>' + (problems.length ? '' : '<button type="button" class="btn primary" data-action="sync-move">' + (p.merge ? 'Join it' : 'Move it') + '</button>') + '</div>'
+  } else if (syncUi.step === 'moving') {
+    h += '<p class="wmoving"><span class="spin" aria-hidden="true"></span>' + esc(syncUi.moving || 'Moving…') + '</p><p class="hint">The board reconnects on its own when Leftoff is back.</p>'
+  } else if (syncUi.step === 'done') {
+    const m = (d.lastMove || {})
+    h += '<div class="okbox">' + icon('check') + (m.merge ? 'Joined' : 'Moved') + '. ' + esc(m.copied) + ' files copied and ' + esc(m.verified) + ' checked. Leftoff now uses <span class="mono">' + esc((d.current || {}).display || '') + '</span>.</div>' +
+      '<p><b>On each other Mac</b>, once the folder has synced there, run:</p>' +
+      '<div class="joinline"><code class="cmd">' + esc(d.join.installed) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(d.join.installed) + '">Copy</button></div>' +
+      '<p class="hint">Not installed there yet: <code>' + esc(d.join.fresh) + '</code>. It merges with what’s already in the folder; nothing is overwritten.</p>' +
+      '<p class="hint">Then, on the Mac you want to answer from another one: Settings → Privacy & security → “Allow other machines to answer and Go here”.</p>' +
+      '<div class="wactions"><button type="button" class="btn primary" data-action="sync-cancel">Done</button></div>'
+  } else if (syncUi.step === 'failed') {
+    h += '<div class="warnbox">The move stopped: ' + esc(syncUi.error || 'unknown error') + '. Everything was put back; Leftoff still uses <span class="mono">' + esc((d.current || {}).display || '') + '</span>.</div><div class="wactions"><button type="button" class="btn" data-action="sync-back">Back</button></div>'
+  }
+  el.innerHTML = h + '</div>'
+  const ci = document.getElementById('syncCustom')
+  if (ci) ci.addEventListener('input', () => { syncUi.custom = ci.value; syncUi.pick = ci.value.trim() ? '__custom' : null; const b = document.querySelector('[data-action="sync-preview"]'); if (b) b.disabled = !syncUi.pick; document.querySelectorAll('.wpick').forEach((x) => x.classList.toggle('on', x.classList.contains('other') && !!syncUi.pick)) })
+}
+
+async function syncAction(action, btn) {
+  if (action === 'sync-open') { syncUi.step = 'pick'; syncUi.plan = null; const c = ((syncUi.data || {}).candidates || [])[0]; if (!syncUi.pick && c) syncUi.pick = c.suggested; paintSyncWizard(); document.getElementById('syncWizard').scrollIntoView({ block: 'nearest' }); return }
+  if (action === 'sync-cancel') { syncUi.step = null; return viewSettings() }
+  if (action === 'sync-pick') { syncUi.pick = btn.dataset.path; return paintSyncWizard() }
+  if (action === 'sync-back') { syncUi.step = 'pick'; return paintSyncWizard() }
+  if (action === 'sync-preview') {
+    const to = syncUi.pick === '__custom' ? syncUi.custom.trim() : syncUi.pick
+    btn.disabled = true
+    try { syncUi.plan = await api('POST', '/v1/sync/plan', { to }); syncUi.step = 'preview' } catch (e) { toast(e.message, 6000) }
+    return paintSyncWizard()
+  }
+  if (action === 'sync-move') {
+    btn.disabled = true
+    try { await api('POST', '/v1/sync/move', { to: syncUi.plan.to }) } catch (e) { toast(e.message, 8000); btn.disabled = false; return }
+    syncUi.step = 'moving'; syncUi.moving = 'Stopping Leftoff and copying…'; paintSyncWizard()
+    const t0 = Date.now()
+    for (;;) {
+      await new Promise((r) => setTimeout(r, 700))
+      if (Date.now() - t0 > 180000) { syncUi.step = 'failed'; syncUi.error = 'no word back in 3 minutes (check `leftoff status`)'; break }
+      let d
+      try { d = await api('GET', '/v1/sync', undefined, { timeoutMs: 1500 }) } catch { syncUi.moving = 'Leftoff is restarting…'; paintSyncWizard(); continue }
+      const m = d.lastMove || {}
+      if (m.to !== syncUi.plan.to || new Date(m.at) < new Date(t0 - 5000)) continue
+      syncUi.data = d
+      if (m.state === 'done') { syncUi.step = 'done'; break }
+      if (m.state === 'failed' || m.state === 'refused') { syncUi.step = 'failed'; syncUi.error = m.error; break }
+      syncUi.moving = m.message || 'Moving…'; paintSyncWizard()
+    }
+    const keep = syncUi.step
+    connect() // the daemon restarted: a fresh live-update stream
+    await viewSettings()
+    syncUi.step = keep
+    return paintSyncWizard()
+  }
+  if (action === 'sync-delete-backup') {
+    const p = btn.dataset.path
+    if (btn.dataset.armed !== '1') { btn.dataset.armed = '1'; btn.textContent = 'Delete for good'; btn.classList.add('danger'); toast('Press again to delete ' + p + '. This can’t be undone.', 6000); return }
+    try { await api('POST', '/v1/sync/backup/delete', { path: p, confirm: true }); toast('Deleted the old folder') } catch (e) { toast(e.message, 6000) }
+    return viewSettings()
+  }
+  if (action === 'peer-trust') {
+    try { await api('POST', '/v1/peers/' + encodeURIComponent(btn.dataset.machine) + '/trust'); toast('Trusting ' + btn.dataset.machine + '’s new key') } catch (e) { toast(e.message, 6000) }
+    return viewSettings()
+  }
+}
+
+// ------------------------------------------------------------ Easy Syncthing (v0.5.3)
+// Install Syncthing (Homebrew, after a confirm click), put the folder in it,
+// pair another Mac with a one-time code, join with a code, status, stop. All
+// changes are loopback only; a phone sees the status and nothing else.
+
+const SECURITY_URL = REPO_URL + '/blob/main/docs/SECURITY.md'
+const PROTECT = {
+  syncthing: ['Device to device, encrypted in transit (TLS). No cloud copy.', 'Relays and discovery servers only see encrypted traffic and which devices connect.', 'Your board token, phone sign-ins and API keys stay on each Mac.', 'Only the Mac that uses your one-time code is accepted.'],
+  icloud: ['A copy lives on Apple’s servers, under Apple’s terms.', 'With Advanced Data Protection on, iCloud Drive is end-to-end encrypted. Without it, Apple holds the keys.', 'API keys and machine keys stay on each Mac. The board token and phone sign-in records (hashes only) sync with the folder.', 'Choose “Keep Downloaded” so files stay on disk.'],
+  dropbox: ['A copy lives on Dropbox’s servers, under Dropbox’s terms. Dropbox can read it.', 'API keys and machine keys stay on each Mac. The board token and phone sign-in records (hashes only) sync with the folder.', 'Make the folder “available offline” so files stay on disk.'],
+  other: ['Whoever runs that sync or storage can read the files.', 'API keys and machine keys stay on each Mac.', 'Leftoff only writes plain Markdown and JSON there.'],
+  machines: ['Off by default, per Mac. While it’s off, nothing listens.', 'Each command is signed by the sending Mac, encrypted for this one, and expires in 60 seconds. Replays are refused.', 'A relay only passes along messages it can’t read.', 'A Mac’s private key never leaves it; a changed key is refused until you confirm it.'],
+}
+function protectHtml(kind, { open = false } = {}) {
+  const items = PROTECT[kind] || PROTECT.other
+  return '<details class="protect"' + (open ? ' open' : '') + '><summary>' + icon('check') + 'How your data is protected</summary><ul>' + items.map((t) => '<li>' + esc(t) + '</li>').join('') + '</ul>' +
+    '<a href="' + SECURITY_URL + '" target="_blank" rel="noopener">The full security notes</a></details>'
+}
+
+const stUi = { data: null, panel: null, pair: null, joinCode: '', path: '', timer: null, busy: false, error: null, showLog: false }
+
+function stCountdown(iso) {
+  const s = Math.max(0, Math.round((new Date(iso).getTime() - Date.now()) / 1000))
+  return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0')
+}
+
+function stSection(d) {
+  if (!d) return ''
+  return '<label class="toplabel">Syncthing</label><div class="stwrap" id="stBox">' + stBoxHtml(d) + '</div>'
+}
+
+function stStatusLine(d) {
+  if (!d.installed) return '<span class="chip">not installed</span>'
+  if (!d.running) return '<span class="chip warn">installed · not running</span>'
+  const f = d.folder
+  let h = '<span class="chip ok">' + icon('check') + 'running' + (d.version ? ' · ' + esc(d.version) : '') + '</span>'
+  if (f) {
+    const files = f.globalFiles != null ? (f.needFiles ? (f.inSyncFiles || 0) + '/' + f.globalFiles + ' files' : f.globalFiles + ' files') : ''
+    h += '<span class="chip' + (f.needFiles ? '' : ' ok') + '">' + esc(f.needFiles ? 'syncing' : 'in sync') + (files ? ' · ' + esc(files) : '') + '</span>' +
+      '<span class="chip">last sync ' + esc(f.lastSync ? ago(f.lastSync) : 'never') + '</span>'
+  }
+  return h
+}
+
+function stPeersHtml(d) {
+  if (!d.folder) return ''
+  if (!d.peers.length) return '<div class="hint">No other Mac yet.</div>'
+  return '<div class="stpeers">' + d.peers.map((p) => '<div class="stpeer"><span class="chip machine remote">⌂ ' + esc(p.name) + '</span>' +
+    (p.connected ? '<span class="chip ok">' + icon('check') + 'connected' + (p.completion != null && p.completion < 100 ? ' · ' + esc(p.completion) + '%' : '') + '</span>' : p.notSharing ? '<span class="chip warn">not sharing Leftoff with this Mac yet</span>' : '<span class="chip">not connected' + (p.lastSeen ? ' · seen ' + esc(ago(p.lastSeen)) : '') + '</span>') + '</div>').join('') + '</div>'
+}
+
+// A Mac that knocked during a pairing without the proof (never auto-accepted).
+// Accepting is a click on this Mac, then a confirm.
+function stKnockedHtml(d, local) {
+  return (d.knocked || []).map((k) => {
+    const confirming = local && stUi.panel === 'accept' && stUi.acceptId === k.deviceId
+    let h = '<div class="warnbox stknock"><p>A Mac named <b>“' + esc(k.name) + '”</b> asked to connect without the pairing proof, so Leftoff didn’t accept it.' + (k.at ? ' <span class="muted">' + esc(ago(k.at)) + ' · ' + esc(k.short) + '</span>' : '') + '</p>'
+    if (!local) return h + '<p class="hint">Accepting happens on this Mac itself.</p></div>'
+    if (confirming) return h + '<p>Add “' + esc(k.name) + '” to Syncthing and share only the Leftoff folder with it? Only if it’s your Mac.</p><div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn primary" data-action="st-accept-go" data-id="' + esc(k.deviceId) + '">Add and share Leftoff</button></div></div>'
+    return h + '<div class="wactions"><button type="button" class="btn" data-action="st-accept" data-id="' + esc(k.deviceId) + '">Accept ' + esc(k.name) + '</button></div></div>'
+  }).join('')
+}
+
+function stInstallHtml(d) {
+  const inst = d.install || {}
+  const job = inst.job || {}
+  if (job.state === 'running') {
+    return '<div class="wizard"><p class="wmoving"><span class="spin" aria-hidden="true"></span>' + esc(job.stage === 'Starting Syncthing…' ? 'Starting Syncthing…' : 'Installing Syncthing… this takes about a minute.') + '</p>' +
+      '<pre class="stlog" aria-live="polite">' + esc((job.lines || []).slice(-10).join('\n')) + '</pre></div>'
+  }
+  if (job.state === 'failed') {
+    return '<div class="wizard"><div class="warnbox">' + esc(job.error || 'The install stopped.') + '</div>' +
+      (stUi.showLog ? '<pre class="stlog">' + esc((job.lines || []).slice(-30).join('\n')) + '</pre>' : '') +
+      '<div class="wactions"><button type="button" class="btn" data-action="st-log">' + (stUi.showLog ? 'Hide details' : 'Details') + '</button><button type="button" class="btn primary" data-action="st-install-go">Try again</button></div></div>'
+  }
+  if (!inst.brew) {
+    return '<div class="wizard"><p><b>Install Syncthing</b></p><ol class="stdirs">' +
+      '<li>Install Homebrew from <a href="https://brew.sh" target="_blank" rel="noopener">brew.sh</a> (one line in Terminal). Then press Check again and Leftoff installs Syncthing for you.</li>' +
+      '<li>Or download Syncthing for macOS from <a href="https://syncthing.net/downloads/" target="_blank" rel="noopener">syncthing.net</a> and open it once.</li></ol>' +
+      '<div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn primary" data-action="st-refresh">Check again</button></div></div>'
+  }
+  return '<div class="wizard"><p><b>Install Syncthing</b></p><p>Leftoff will run:</p>' +
+    '<div class="joinline"><code class="cmd">' + esc(inst.command) + '</code></div>' +
+    '<p class="hint">Syncthing comes from Homebrew and runs quietly in the background, starting at login. You won’t need to open it.</p>' +
+    '<div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn primary" data-action="st-install-go">' + icon('check') + 'Install</button></div></div>'
+}
+
+function stRunHtml(run, { kind }) {
+  if (!run || run.kind !== kind) return ''
+  if (run.state === 'failed') return '<div class="warnbox">' + esc(run.error || 'It stopped.') + '</div>'
+  if (run.state === 'done') return '<div class="okbox">' + icon('check') + esc(kind === 'join' ? 'Done. This Mac and ' + (run.with || 'your other Mac') + ' share the folder.' : 'The Leftoff folder is in Syncthing.') + '</div>'
+  const pct = run.total ? Math.round(100 * (run.have || 0) / run.total) : null
+  const stuck = run.stuck ? '<div class="warnbox ststuck"><p><b>If it’s stuck</b>, add this Mac by hand on ' + esc(run.stuck.first) + ':</p><ol class="stdirs">' + (run.stuck.steps || []).map((x) => '<li>' + esc(x) + '</li>').join('') + '</ol>' + (run.stuck.board ? '<p class="hint">' + esc(run.stuck.board).replace('Settings → Sync', '<a href="#/settings/sync">Settings → Sync</a>') + '</p>' : '') + '</div>' : ''
+  return '<p class="wmoving"><span class="spin" aria-hidden="true"></span>' + esc(run.message || 'Working…') + '</p>' + (pct != null ? '<progress class="bar" max="100" value="' + pct + '"></progress>' : '') + stuck
+}
+
+function stPairHtml(d) {
+  const p = stUi.pair
+  const pr = d.pairing || {}
+  if (!p) return ''
+  const peer = pr.paired ? (d.peers || []).find((x) => x.name === pr.paired.name) : null
+  let status
+  if (pr.paired) status = peer && peer.connected && peer.completion === 100 ? '<div class="okbox">' + icon('check') + 'Done: ' + esc(pr.paired.name) + ' is paired and in sync.</div>'
+    : '<p class="wmoving"><span class="spin" aria-hidden="true"></span>Paired with ' + esc(pr.paired.name) + ' · ' + esc(peer && peer.connected ? 'syncing' + (peer.completion != null ? ' (' + peer.completion + '%)' : '…') : 'connecting…') + '</p>'
+  else if (pr.expired || (!pr.armed && !pr.used)) status = '<div class="warnbox">The code expired; nothing was accepted. <button type="button" class="linkish" data-action="st-pair">Make a new one</button></div>'
+  else status = '<p class="wmoving"><span class="spin" aria-hidden="true"></span>Waiting for your other Mac…</p><p class="hint">The code works once, for the next ' + esc(stCountdown(p.expiresAt)) + '. Only the Mac that uses it is accepted.</p>'
+  return '<div class="wizard stpair"><p><b>On your other Mac</b>, run this in Terminal:</p>' +
+    '<div class="joinline"><code class="cmd">' + esc(p.command) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(p.command) + '">Copy</button></div>' +
+    '<p class="hint">Leftoff not installed there yet? <button type="button" class="linkish" data-action="copy-cmd" data-cmd="' + esc(p.fresh) + '">Copy the npx version</button> (it installs Leftoff, then joins).</p>' +
+    '<p class="hint">Or on its board: Settings → Sync → Join another Mac, and paste the code.</p>' +
+    status +
+    '<div class="wactions">' + (pr.paired ? '<button type="button" class="btn primary" data-action="st-close">Done</button>' : '<button type="button" class="btn" data-action="st-pair-cancel">Cancel code</button>') + '</div></div>'
+}
+
+function stBoxHtml(d) {
+  const local = d.viewer && d.viewer.local
+  let h = '<div class="ststatus">' + stStatusLine(d) + (d.folder ? '<span class="chip mono">' + esc(d.folder.display) + '</span>' : '') + '</div>'
+  if (d.folder) h += stPeersHtml(d)
+  h += stKnockedHtml(d, local)
+  for (const e of (d.folder && d.folder.errors) || []) h += '<div class="warnbox">' + esc((e.path ? e.path + ': ' : '') + e.error) + '</div>'
+  if (!local) return h + '<div class="hint">Installing, pairing and joining happen on the Mac itself.</div>'
+  const run = d.run && Date.now() - new Date(d.run.at).getTime() < 3600000 ? d.run : null
+  const running = run && !['done', 'failed'].includes(run.state)
+  if (stUi.panel === 'install' || (d.install && d.install.job && d.install.job.state === 'running')) h += stInstallHtml(d)
+  else if (stUi.panel === 'join' || stUi.panel === 'join-run' || (running && run.kind === 'join')) {
+    h += '<div class="wizard"><p><b>Join another Mac</b></p>'
+    if (run && run.kind === 'join' && (running || stUi.panel === 'join-run')) {
+      h += stRunHtml(run, { kind: 'join' })
+      if (run.state === 'failed' && run.code === 'needs_install') h += '<div class="wactions"><button type="button" class="btn primary" data-action="st-install">Install Syncthing first</button></div>'
+      else if (!running) h += '<div class="wactions"><button type="button" class="btn" data-action="st-close">' + (run.state === 'done' ? 'Done' : 'Close') + '</button>' + (run.state === 'failed' ? '<button type="button" class="btn primary" data-action="st-join">Try again</button>' : '') + '</div>'
+    } else {
+      h += '<p class="hint">Paste the code from your first Mac (Settings → Sync → Pair another Mac).</p>' +
+        '<textarea id="stCode" class="stcode" rows="3" placeholder="LO1-…" spellcheck="false" autocomplete="off" autocapitalize="characters">' + esc(stUi.joinCode) + '</textarea>' +
+        (d.installed ? '' : '<p class="hint">Syncthing isn’t installed here yet; Leftoff will offer to install it first.</p>') +
+        '<div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn primary" data-action="st-join-go">Join</button></div>'
+    }
+    h += '</div>'
+  } else if (stUi.panel === 'pair') h += stPairHtml(d)
+  else if (stUi.panel === 'setup' || stUi.panel === 'setup-run' || (running && run.kind === 'setup')) {
+    h += '<div class="wizard"><p><b>Sync this folder with Syncthing</b></p>'
+    if (run && run.kind === 'setup' && (running || stUi.panel === 'setup-run')) {
+      h += stRunHtml(run, { kind: 'setup' }) + '<p class="hint">The board reconnects on its own if Leftoff restarts.</p>'
+      if (!running) h += '<div class="wactions"><button type="button" class="btn' + (run.state === 'done' ? '' : ' primary') + '" data-action="st-close">Close</button>' + (run.state === 'done' ? '<button type="button" class="btn primary" data-action="st-pair">Pair another Mac</button>' : '') + '</div>'
+    } else {
+      h += '<label class="stlabel" for="stPath">Folder</label><input id="stPath" class="mono" value="' + esc(stUi.path || tildeUi(d.suggestedPath || '')) + '" spellcheck="false" autocomplete="off">' +
+        '<p class="hint">Leftoff moves your data there (copies, checks every file, keeps the old folder as a backup) and shares it in Syncthing. Your other Syncthing folders are left alone.</p>' +
+        protectHtml('syncthing') +
+        '<div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn primary" data-action="st-setup-go">Set it up</button></div>'
+    }
+    h += '</div>'
+  } else if (stUi.panel === 'stop') {
+    h += '<div class="wizard"><p><b>Stop syncing?</b></p><p class="hint">Syncthing stops sharing ' + esc(d.folder ? d.folder.display : 'the folder') + '. The files stay here and Leftoff keeps using them; your other Mac stops getting updates. Nothing else in Syncthing changes.</p>' +
+      '<div class="wactions"><button type="button" class="btn" data-action="st-close">Cancel</button><button type="button" class="btn danger" data-action="st-stop-go">Stop syncing</button></div></div>'
+  }
+  // the buttons for the current state
+  const b = []
+  if (!stUi.panel && !running) {
+    if (!d.installed) b.push('<button type="button" class="btn primary" data-action="st-install">' + icon('folder-sync') + 'Install Syncthing (recommended)</button>')
+    else if (!d.running) b.push('<button type="button" class="btn primary" data-action="st-start">Start Syncthing</button>')
+    else if (!d.folder) b.push('<button type="button" class="btn primary" data-action="st-setup">' + icon('folder-sync') + 'Sync this folder</button>')
+    else b.push('<button type="button" class="btn primary" data-action="st-pair">Pair another Mac</button>')
+    b.push('<button type="button" class="btn" data-action="st-join">Join another Mac</button>')
+    if (d.folder) b.push('<button type="button" class="btn" data-action="st-stop">Stop syncing…</button>')
+  }
+  if (b.length) h += '<div class="stactions">' + b.join('') + '</div>'
+  if (!stUi.panel && !d.installed) h += '<div class="hint">Syncthing keeps your Macs in sync directly, with no cloud copy. Leftoff installs it, sets it up and pairs your Macs; you won’t need its own app.</div>'
+  if (!stUi.panel && d.nested && !d.folder) h += '<div class="hint">This folder is already inside your Syncthing folder “' + esc(d.nested.label) + '”. To pair by code, Leftoff needs its own folder.</div>'
+  return h
+}
+
+function tildeUi(p) { const h = (state.cfg && state.cfg.folder || '').match(/^(\/Users\/[^/]+|\/home\/[^/]+)/); return h && p.startsWith(h[1] + '/') ? '~' + p.slice(h[1].length) : p }
+
+async function stRefresh() {
+  const before = stUi.data && stUi.data.run
+  try { stUi.data = await api('GET', '/v1/syncthing', undefined, { timeoutMs: 4000 }) } catch { return false }
+  const after = stUi.data.run
+  // a setup or join that just finished moved the folder: redraw all of Settings once
+  if (after && after.state === 'done' && (!before || before.state !== 'done' || before.at !== after.at) && ['setup', 'join'].includes(after.kind)) { await viewSettings(); return true }
+  stPaint()
+  return true
+}
+function stPaint() {
+  const el = document.getElementById('stBox')
+  if (!el || !stUi.data) return
+  const ta = document.getElementById('stCode'); if (ta) stUi.joinCode = ta.value
+  const pi = document.getElementById('stPath'); if (pi) stUi.path = pi.value
+  const focused = document.activeElement && document.activeElement.id
+  el.innerHTML = stBoxHtml(stUi.data)
+  paintSettingsDots()
+  if (focused && ['stCode', 'stPath'].includes(focused)) { const f = document.getElementById(focused); if (f) { f.focus(); try { f.setSelectionRange(f.value.length, f.value.length) } catch {} } }
+}
+function stLive() {
+  const d = stUi.data || {}
+  const job = d.install && d.install.job
+  const run = d.run && !['done', 'failed'].includes(d.run.state)
+  return (job && job.state === 'running') || run || stUi.panel === 'pair' || stUi.panel === 'setup-run' || stUi.panel === 'join-run'
+}
+function stSchedule() {
+  clearTimeout(stUi.timer)
+  stUi.timer = setTimeout(async () => {
+    if (!document.getElementById('stBox')) return
+    if (stLive()) await stRefresh()
+    stSchedule()
+  }, 1000)
+}
+
+async function stAction(action, btn) {
+  const d = stUi.data || {}
+  if (action === 'st-close') { stUi.panel = null; stUi.pair = null; stUi.error = null; await stRefresh(); return viewSettings() }
+  if (action === 'st-refresh') { await stRefresh(); if (stUi.data && stUi.data.installed) stUi.panel = null; return stPaint() }
+  if (action === 'st-log') { stUi.showLog = !stUi.showLog; return stPaint() }
+  if (action === 'st-install') { stUi.panel = 'install'; return stPaint() }
+  if (action === 'st-install-go') {
+    btn.disabled = true
+    try { await api('POST', '/v1/syncthing/install', { confirm: true }) } catch (e) { toast(e.message, 6000); btn.disabled = false; return }
+    stUi.panel = 'install'
+    await stRefresh()
+    // after it finishes, close the panel on success
+    const wait = async () => { const j = stUi.data && stUi.data.install && stUi.data.install.job; if (j && j.state === 'done') { stUi.panel = null; toast('Syncthing is installed and running'); return viewSettings() } if (j && j.state === 'running') setTimeout(async () => { await stRefresh(); wait() }, 900) }
+    return wait()
+  }
+  if (action === 'st-start') { btn.disabled = true; try { await api('POST', '/v1/syncthing/start', {}); toast('Syncthing is running') } catch (e) { toast(e.message, 6000) } await stRefresh(); return }
+  if (action === 'st-setup') { stUi.panel = 'setup'; return stPaint() }
+  if (action === 'st-setup-go') {
+    const p = (document.getElementById('stPath') || {}).value
+    btn.disabled = true
+    try { await api('POST', '/v1/syncthing/setup', { path: p }) } catch (e) { toast(e.message, 6000); btn.disabled = false; return }
+    stUi.panel = 'setup-run'
+    stUi.data = { ...d, run: { kind: 'setup', state: 'starting', message: 'Starting…', at: new Date().toISOString() } }
+    stPaint()
+    return
+  }
+  if (action === 'st-pair') {
+    try { stUi.pair = await api('POST', '/v1/syncthing/pair', {}) } catch (e) { toast(e.message, 6000); return }
+    stUi.panel = 'pair'
+    await stRefresh()
+    return
+  }
+  if (action === 'st-pair-cancel') { await api('POST', '/v1/syncthing/pair/cancel', {}).catch(() => {}); stUi.panel = null; stUi.pair = null; return stRefresh() }
+  if (action === 'st-join') { stUi.panel = 'join'; stUi.data = { ...d, run: null }; return stPaint() }
+  if (action === 'st-join-go') {
+    const code = ((document.getElementById('stCode') || {}).value || '').trim()
+    if (!code) { toast('Paste the code from your other Mac first'); return }
+    btn.disabled = true
+    try { await api('POST', '/v1/syncthing/join', { code }) } catch (e) { toast(e.message, 7000); btn.disabled = false; return }
+    stUi.panel = 'join-run'
+    stUi.data = { ...d, run: { kind: 'join', state: 'starting', message: 'Checking Syncthing…', at: new Date().toISOString() } }
+    stPaint()
+    return
+  }
+  if (action === 'st-accept') { stUi.panel = 'accept'; stUi.acceptId = btn.dataset.id; return stPaint() }
+  if (action === 'st-accept-go') {
+    btn.disabled = true
+    try { const r = await api('POST', '/v1/syncthing/accept', { deviceId: btn.dataset.id, confirm: true }); toast('Added ' + ((r.paired && r.paired.name) || 'that Mac') + ' and shared the Leftoff folder with it') } catch (e) { toast(e.message, 7000) }
+    stUi.panel = null; stUi.acceptId = null; stUi.pair = null
+    return stRefresh()
+  }
+  if (action === 'st-stop') { stUi.panel = 'stop'; return stPaint() }
+  if (action === 'st-stop-go') {
+    btn.disabled = true
+    try { await api('POST', '/v1/syncthing/stop', { confirm: true }); toast('Stopped syncing. The files are still here.') } catch (e) { toast(e.message, 6000) }
+    stUi.panel = null
+    return viewSettings()
+  }
+}
+
+async function viewSearch(q) {
+  const r = await api('GET', '/v1/search?q=' + encodeURIComponent(q))
+  let html = '<div class="pagehead"><div><h1>Search</h1><div class="sub">“' + esc(q) + '” · ' + r.sessions.length + ' sessions, ' + r.checkpoints.length + ' checkpoints</div></div></div>'
+  if (r.sessions.length) html += '<h2>Sessions</h2><div class="grid">' + r.sessions.map(card).join('') + '</div>'
+  if (r.checkpoints.length) html += '<h2>Checkpoints</h2><div class="timeline">' + r.checkpoints.map((cp) => '<div class="tl-item ' + esc(cp.trigger) + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><a class="tl-title" href="#/s/' + encodeURIComponent(cp.sessionId) + '">' + esc(cp.sessionTitle || 'Untitled') + '</a></div>' + cpBlock(cp, { showWhen: false }) + '</div>').join('') + '</div>'
+  if (!r.sessions.length && !r.checkpoints.length) html += '<div class="empty mt">Nothing matched.</div>'
+  $app.innerHTML = html
+}
+
+// ------------------------------------------------------------ lists (v0.5.1)
+
+const listUi = { found: {}, finding: {}, showAll: false, help: false }
+const listHref = (ref) => '#/lists/' + String(ref).split('/').map(encodeURIComponent).join('/')
+
+function listChips(s) {
+  let h = ''
+  for (const l of s.lists || []) h += '<a class="chip listchip' + (l.done === l.total ? ' done' : '') + '" href="' + listHref(l.ref) + '" title="' + esc(l.name) + '">' + icon('list-checks') + esc(l.progress) + ' <span class="ln">' + esc(l.name) + '</span></a>'
+  if (s.listHint && state.mayAnswer !== false) h += '<span class="chip listhint">Claude wrote a ' + esc(s.listHint.count) + '-step list · <button type="button" class="linkish" data-action="list-save-hint" title="Save “' + esc(s.listHint.name) + '” as a list you can tick off">Save</button>' +
+    '<button type="button" class="icon x" data-action="list-dismiss" title="Not a list to keep" aria-label="Dismiss">×</button></span>'
+  return h ? '<div class="listchips">' + h + '</div>' : ''
+}
+
+const mayEditLists = () => state.listsMayEdit !== false
+function listItemsHtml(l, { max = 0 } = {}) {
+  const items = max ? l.items.slice(0, max) : l.items
+  const dis = mayEditLists() && !l.readOnly ? '' : ' disabled'
+  const text = l.readOnly ? esc : mdInline
+  return '<ul class="checklist">' + items.map((it) =>
+    '<li class="' + (it.done ? 'done' : '') + '"><label><input type="checkbox" data-list="' + esc(l.ref) + '" data-n="' + esc(it.n) + '"' + (it.done ? ' checked' : '') + dis + '>' +
+    '<span class="n">' + esc(it.n) + '</span><span class="t">' + text(it.text) + '</span></label></li>').join('') +
+    (max && l.items.length > max ? '<li class="more"><a href="' + listHref(l.ref) + '">+' + (l.items.length - max) + ' more</a></li>' : '') + '</ul>'
+}
+
+function listCard(l, { full = true, session = true } = {}) {
+  const pct = l.total ? Math.round((l.done / l.total) * 100) : 0
+  const src = l.sourceSession ? (state.sessions || []).find((x) => x.id === l.sourceSession) : null
+  const edit = mayEditLists() && !l.readOnly
+  return '<article class="listcard' + (l.readOnly ? ' readonly' : '') + (l.archived ? ' archived' : '') + (l.done === l.total ? ' complete' : '') + '" data-ref="' + esc(l.ref) + '">' +
+    '<div class="lhead"><a class="lname" href="' + listHref(l.ref) + '">' + esc(l.name) + '</a>' +
+      (edit ? '<button type="button" class="icon" data-action="list-rename" data-ref="' + esc(l.ref) + '" title="Rename">✎</button>' : '') +
+      (l.agent ? agentChip(l.agent, { title: 'from ' + (l.agent.display || l.agent.name) + '’s feed · read-only' }) : '') +
+      '<span class="lprog" title="' + esc(l.done + ' of ' + l.total + ' done') + '">' + esc(l.progress) + '</span></div>' +
+    '<progress class="bar" max="' + Math.max(1, l.total) + '" value="' + l.done + '" aria-label="' + esc(pct + '% done') + '"></progress>' +
+    listItemsHtml(l) +
+    (edit && !l.archived ? '<form class="addform" data-list-add="' + esc(l.ref) + '"><input type="text" name="text" placeholder="Add an item" aria-label="Add an item to ' + esc(l.name) + '" maxlength="500"><button type="submit" class="btn">' + icon('plus') + 'Add</button></form>' : '') +
+    '<div class="lfoot">' + (session && l.sourceSession ? '<a href="#/s/' + encodeURIComponent(l.sourceSession) + '">from ' + esc((src && src.title) || l.sourceTitle || 'its session') + '</a>' : '<span>' + esc(l.repo || 'no repo') + '</span>') +
+      (l.sourceMachine && multi() ? '<span>· ' + esc(l.sourceMachine) + '</span>' : '') + '<span>· updated ' + esc(ago(l.updated)) + '</span>' +
+      (edit ? '<button type="button" class="linkish" data-action="list-archive" data-ref="' + esc(l.ref) + '" data-archived="' + (l.archived ? '0' : '1') + '">' + (l.archived ? 'Unarchive' : 'Archive') + '</button>' : '') +
+      (l.readOnly ? '<span class="faint">read-only · tell ' + esc((l.agent && l.agent.display) || 'the agent') + ' to tick items</span>' : '<span class="faint mono">lists/' + esc(l.ref) + '.md</span>') + '</div>' +
+    '</article>'
+}
+
+function listsHelp() {
+  return '<section class="lhelp" id="listsHelp"><h3>How lists work</h3><ol>' +
+    '<li><strong>Ask Claude for steps.</strong> “What are the next steps to submit to the App Store?” Work as usual.</li>' +
+    '<li><strong>Save it.</strong> When Claude writes a checklist, the session’s card shows <em>Claude wrote a 7-step list · Save</em>. One click. Or type <code>/cp-todo</code> in the session. Older sessions: open the session and use <em>Find lists in this session</em>.</li>' +
+    '<li><strong>Tick items off</strong> here or on your phone, with <code>/cp-done 3</code> in the session, or just tell Claude “step 3 is done”: it knows the list and runs <code>leftoff todo done</code> itself.</li></ol>' +
+    '<p class="faint">Nothing is saved without your click. Lists are plain Markdown in <code>lists/&lt;repo&gt;/</code> in your folder, so they sync and you can edit them by hand. Item numbers never change. Claude’s own internal to-do list is separate and never shows up here.' +
+    (mayEditLists() ? '' : ' Ticking from this device is off: it follows the same switch as answering (Settings → Privacy & security on the machine running Leftoff).') + '</p></section>'
+}
+
+async function viewLists(ref) {
+  const [o, sv] = await Promise.all([api('GET', '/v1/lists?all=1'), api('GET', '/v1/sessions?limit=300').catch(() => ({ sessions: [] }))])
+  state.sessions = sv.sessions || state.sessions
+  state.listsMayEdit = o.mayEdit !== false
+  paintListsCount(o.lists)
+  const helpOn = listUi.help || (state.route && state.route.params && state.route.params.get('help') === '1')
+  if (ref) {
+    const l = o.lists.find((x) => x.ref === ref)
+    let html = '<a class="back" href="#/lists">← All lists</a>'
+    if (!l) { $app.innerHTML = html + '<div class="empty">That list is gone (renamed, or deleted from the folder).</div>'; return }
+    html += '<div class="lists one">' + listCard(l) + '</div>'
+    $app.innerHTML = html
+    return
+  }
+  const open = o.lists.filter((l) => !l.archived && (listUi.showAll || l.done < l.total))
+  const hidden = o.lists.length - open.length
+  let html = '<div class="pagehead"><div><h1>Lists <button type="button" class="helpq" data-action="list-help" aria-expanded="' + (helpOn ? 'true' : 'false') + '" title="How lists work">?</button></h1>' +
+    '<div class="sub">Checklists Claude wrote for you, saved from your sessions. Tick them off here, on your phone, or in the session.' + (o.lists.some((l) => l.readOnly) ? ' Lists from an agent’s feed are read-only.' : '') + '</div></div>' +
+    '<div class="actions">' + (hidden || listUi.showAll ? '<button type="button" class="btn" data-action="list-showall">' + (listUi.showAll ? 'Hide finished & archived' : 'Show finished & archived (' + hidden + ')') + '</button>' : '') + '</div></div>'
+  if (helpOn) html += listsHelp()
+  if (!state.listsMayEdit) html += '<div class="banner info">Read-only from this device. Ticking lists from another device follows the same switch as answering: Settings → Privacy & security, on the machine running Leftoff.</div>'
+  const shown = listUi.showAll ? o.lists : open
+  if (!shown.length) {
+    html += '<div class="empty">' + (o.lists.length ? 'Every list is done. 🎉' : 'No lists yet.') + '<br><span class="faint">When Claude writes you a checklist, its session card shows <strong>Save</strong>. Or type <code>/cp-todo</code> in the session.</span>' +
+      (helpOn ? '' : '<br><button type="button" class="linkish" data-action="list-help">How lists work</button>') + '</div>'
+  }
+  const byRepo = new Map()
+  for (const l of shown) { const k = l.repo || 'no repo'; if (!byRepo.has(k)) byRepo.set(k, []); byRepo.get(k).push(l) }
+  for (const [repo, ls] of [...byRepo.entries()].sort((a, b) => a[0].localeCompare(b[0]))) html += '<h2>' + esc(repo) + ' <span class="count">' + ls.length + '</span></h2><div class="lists">' + ls.map((l) => listCard(l)).join('') + '</div>'
+  $app.innerHTML = html
+}
+
+function paintListsCount(lists) {
+  const el = document.getElementById('listsCount')
+  if (!el || !lists) return
+  const n = lists.filter((l) => !l.archived && l.done < l.total).length
+  el.hidden = !n
+  el.textContent = n ? String(n) : ''
+}
+
+// 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>'
+  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>' +
+    '<span class="faint">Reads Claude Code’s transcript, so lists from before this version count too.</span></div>'
+  if (f && f.error) h += '<div class="lfound err">' + esc(f.error) + '</div>'
+  else if (f) {
+    if (!f.candidates.length) h += '<div class="lfound none">No checklists in this session’s transcript (' + esc(f.messages) + ' messages). Leftoff looks for “- [ ]” checklists, and numbered or bulleted lists under a heading like “Next steps”.</div>'
+    for (const c of f.candidates) {
+      h += '<div class="lfound"><div class="fhead"><strong>' + esc(c.name) + '</strong> <span class="faint">' + esc(c.count) + ' items · ' + esc(c.kind) + '</span></div>' +
+        '<ol class="preview">' + c.items.slice(0, 6).map((it) => '<li' + (it.done ? ' class="done"' : '') + '>' + mdInline(it.text) + '</li>').join('') + (c.items.length > 6 ? '<li class="faint">…' + (c.items.length - 6) + ' more</li>' : '') + '</ol>' +
+        '<div class="row">' + (c.savedAs ? '<a class="btn" href="' + listHref(c.savedAs.ref) + '">Saved as “' + esc(c.savedAs.name) + '” →</a>' : mayEditLists() ? '<button type="button" class="btn primary" data-action="list-save-cand" data-id="' + esc(s.id) + '" data-n="' + esc(c.n) + '">Save</button>' : '<span class="faint">read-only from this device</span>') + '</div></div>'
+    }
+  }
+  return h
+}
+
+// ------------------------------------------------------------ router
+
+function parseRoute() {
+  const h = location.hash.replace(/^#\/?/, '')
+  const [path, qs] = h.split('?')
+  const parts = path.split('/').filter(Boolean)
+  const params = new URLSearchParams(qs || '')
+  if (parts[0] === 'lists' && parts.length > 2) return { name: 'lists', arg: parts.slice(1).map(decodeURIComponent).join('/'), q: null, params }
+  return { name: parts[0] || 'board', arg: parts[1] ? decodeURIComponent(parts[1]) : null, q: params.get('q'), params }
+}
+
+async function render() {
+  const r = (state.route = parseRoute())
+  document.querySelectorAll('.tabs a, .topright a[data-route]').forEach((a) => { const on = a.dataset.route === (r.name === 's' ? 'board' : r.name === 'catchup' ? 'digest' : r.name); a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
+  try {
+    if (r.name === 's' && r.arg) await viewSession(r.arg)
+    else if (r.name === 'waiting') await viewWaiting()
+    else if (r.name === 'timeline') await viewTimeline()
+    else if (r.name === 'digest') await viewDigest(r.arg, r.params.get('machine'))
+    else if (r.name === 'catchup') await viewCatchup(r.arg)
+    else if (r.name === 'lists') await viewLists(r.arg)
+    else if (r.name === 'settings') await viewSettings()
+    else if (r.name === 'whats-new') await viewWhatsNew()
+    else if (r.name === 'search') await viewSearch(r.q || '')
+    else await viewBoard()
+  } catch (e) {
+    if (e.code === 'login_required') return showLogin()
+    $app.innerHTML = '<div class="empty">Couldn’t load: ' + esc(e.message) + '</div>'
+  }
+}
+
+// A remote browser (Tailscale) that hasn't signed in yet: the iPhone
+// home-screen app always lands here first (it has its own cookie jar), so the
+// typed code is the main way in; the QR link is the other.
+function showLogin() {
+  const expired = new URLSearchParams(location.search).get('login') === 'expired'
+  const app = standalone()
+  $app.innerHTML = '<div class="empty login"><div class="login-title">Sign in' + (app ? ' the Leftoff app' : ' this browser') + '</div>' +
+    (expired ? '<p class="warn">That QR code or link was already used or has expired. Each one works once, for 15 minutes.</p>' : '') +
+    '<form class="codeform" id="codeForm" autocomplete="off"><label for="signinCode">Sign-in code</label>' +
+    '<input id="signinCode" name="code" inputmode="text" autocapitalize="characters" autocorrect="off" spellcheck="false" autocomplete="one-time-code" maxlength="8" placeholder="ABC-123" aria-describedby="codeHelp">' +
+    '<button class="btn primary" type="submit">Sign in</button><div class="codeerr warn" id="codeErr" role="alert" hidden></div></form>' +
+    '<p id="codeHelp">Get a code on the machine running Leftoff: <code>leftoff link</code>, or Settings → Phone & remote → Show QR code.' +
+    (app ? '' : ' Or scan the QR code with the camera instead.') + '</p>' +
+    '<p class="faint">Signed in, this ' + (app ? 'app' : 'browser') + ' stays signed in for 30 days after its last visit.</p></div>'
+  const el = document.getElementById('health'); if (el) { el.className = 'health down'; el.querySelector('.label').textContent = 'not signed in' }
+  const input = document.getElementById('signinCode')
+  input.addEventListener('input', () => {
+    const v = input.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6)
+    input.value = v.length > 3 ? v.slice(0, 3) + '-' + v.slice(3) : v
+  })
+  document.getElementById('codeForm').addEventListener('submit', async (ev) => {
+    ev.preventDefault()
+    const err = document.getElementById('codeErr')
+    err.hidden = true
+    try {
+      const res = await fetch('/v1/remote/signin', { method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ code: input.value }) })
+      const j = await res.json().catch(() => ({}))
+      if (!res.ok) throw new Error((j.error && j.error.message) || 'HTTP ' + res.status)
+      location.replace('/')
+    } catch (e) { err.textContent = e.message; err.hidden = false; input.select() }
+  })
+  input.focus()
+}
+
+async function refreshHealth() {
+  const el = document.getElementById('health')
+  try {
+    const h = await api('GET', '/v1/health')
+    state.health = h
+    el.className = 'health up'
+    // the header shows this Mac's name; the rest is in the status popover (v0.5.9)
+    const summary = h.sessionsOpen + ' open · ' + h.machine + ' · ' + h.summarizer
+    el.querySelector('.label').textContent = h.machine
+    el.title = summary
+    el.setAttribute('aria-label', 'Status: ' + summary)
+    const brand = document.getElementById('brand')
+    if (brand) brand.title = 'Leftoff v' + h.version + (h.update && h.update.available ? ' · update available: v' + (h.update.remoteVersion || '?') : '')
+    paintTopDot()
+    if (statusOpen()) paintStatus()
+    paintNeedsCount(Number(h.needsYou) || 0)
+    { const lc = document.getElementById('listsCount'); if (lc) { lc.hidden = !h.listsOpen; lc.textContent = h.listsOpen ? String(h.listsOpen) : '' } }
+    if (h.answering) state.mayAnswer = h.answering.allowedHere !== false
+    const dot = document.querySelector('#wnTab .newdot')
+    if (dot) dot.hidden = !(h.whatsNew && h.whatsNew.unseen > 0)
+    paintSettingsDots()
+  } catch (e) {
+    el.className = 'health down'
+    el.querySelector('.label').textContent = e && e.code === 'login_required' ? 'not signed in' : 'daemon offline'
+    el.title = el.querySelector('.label').textContent
+    el.setAttribute('aria-label', 'Status: ' + el.title)
+  }
+}
+
+// ------------------------------------------------------------ the top bar (v0.5.9)
+// Calm and roomy: the five main tabs; on the right a search button (⌘K), this
+// Mac's status (a popover with the details and the theme), What's new and
+// Settings as icons. Nothing wraps or is cut off from 900px up.
+
+const isMac = /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent)
+{ const k = document.getElementById('searchKbd'); if (k) k.textContent = isMac ? '⌘K' : 'Ctrl K'; const b = document.getElementById('searchBtn'); if (b) b.title = 'Search (' + (isMac ? '⌘K' : 'Ctrl+K') + ' or /)' }
+
+// The gear's dot: anything a Settings section would flag (an update, a failed digest, a feed that can't be pulled, sync trouble).
+function paintTopDot() {
+  const el = document.querySelector('#setTab .topdot')
+  if (!el) return
+  const d = settingsDots()
+  const h = state.health || {}
+  if ((h.agents || []).some((a) => a.ok === false) && !d.agents) d.agents = { level: 'warn', why: ['A feed couldn’t be pulled'] }
+  const all = Object.values(d)
+  const warn = all.some((x) => x.level === 'warn')
+  el.hidden = !all.length || (!warn && !(h.update && h.update.available))
+  el.className = 'topdot' + (warn ? ' warn' : '')
+  const why = all.flatMap((x) => x.why)
+  document.getElementById('setTab').title = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
+}
+
+// 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() {
+  const st = stUi.data
+  if (!st) return 'checking…'
+  if (!st.installed) return syncUi.data && syncUi.data.current && syncUi.data.current.syncedBy ? 'in ' + syncUi.data.current.syncedBy.label : 'not set up'
+  const d = settingsDots().sync
+  if (d) return d.why[0]
+  if (!st.folder) return 'Syncthing running, folder not shared yet'
+  const peers = (st.peers || []).filter((p) => p.connected).length
+  return (st.folder.needFiles ? 'syncing' : 'in sync') + ' · ' + peers + ' other Mac' + (peers === 1 ? '' : 's') + ' connected'
+}
+function paintStatus() {
+  const pop = document.getElementById('statusPop')
+  if (!pop) return
+  const h = state.health
+  const pref = window.cpTheme ? window.cpTheme.pref() : 'system'
+  const row = (k, v, cls) => '<div class="sp-row"><span class="sp-k">' + esc(k) + '</span><span class="sp-v' + (cls ? ' ' + cls : '') + '">' + v + '</span></div>'
+  const syncWarn = !!settingsDots().sync
+  pop.innerHTML = '<div class="sp-head"><span class="dot ' + (h ? 'up' : 'down') + '"></span><b>' + esc(h ? h.machine : 'Leftoff') + '</b><span class="faint">' + (h ? (window.leftoffRelay ? 'through the relay' : 'this Mac') : 'offline') + '</span></div>' +
+    (h ? row('Sessions', esc(h.sessionsOpen + ' open') + ' <span class="faint">of ' + esc(h.sessionsTotal) + '</span>') +
+      (h.needsYou ? row('Needs you', '<a href="#/waiting">' + esc(h.needsYou) + ' waiting</a>') : '') +
+      row('Summaries', esc(h.summarizer + (h.summarizerDetail && h.summarizerDetail.model ? ' · ' + h.summarizerDetail.model : '')) + ' <a href="#/settings/models">Change</a>') +
+      relayRows(row) +
+      ((h.machines || []).length > 1 && !window.leftoffRelay ? row('Macs', esc(h.machines.join(', '))) : '') +
+      row('Sync', '<a href="#/settings/sync">' + esc(syncLine()) + '</a>', syncWarn ? 'warnish' : '') +
+      row('Version', esc('v' + h.version) + (h.update && h.update.available ? ' · <a href="#/settings/updates">v' + esc(h.update.remoteVersion || '?') + ' available</a>' : ' · <a href="#/whats-new">What’s new</a>'))
+      : '<p class="faint">The daemon isn’t answering.</p>') +
+    '<div class="sp-row sp-theme"><span class="sp-k">Theme</span><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div></div>' +
+    '<div class="sp-links"><a href="#/settings">' + icon('settings') + 'Settings</a><a href="#/whats-new">' + icon('sparkles') + 'What’s new</a></div>'
+  placeStatus()
+}
+// Through the relay (v0.6.0): which Mac this board comes from, and a switcher.
+function relayRows(row) {
+  const lr = window.leftoffRelay
+  if (!lr) return ''
+  const st = state.relayStatus
+  const macs = st ? st.macs : [{ machine: lr.mac, online: true }]
+  return '<div class="sp-row sp-macs"><span class="sp-k">Mac</span><div class="theme macswitch" role="group" aria-label="Which Mac">' + macs.map((m) =>
+    '<button type="button" data-action="relay-mac" data-mac="' + esc(m.machine) + '" aria-pressed="' + (m.machine === lr.mac) + '"' + (m.online ? '' : ' disabled title="asleep · last seen ' + esc(fmtAgo(m.lastSeen)) + '"') + '><span class="mdot ' + (m.online ? 'on' : 'off') + '"></span>' + esc(m.machine) + '</button>').join('') + '</div></div>' +
+    row('Relay', esc(location.hostname) + (lr.latencyMs != null ? ' <span class="faint">· ' + esc(lr.latencyMs) + ' ms</span>' : '') + ' <span class="faint">· end-to-end encrypted</span>')
+}
+function placeStatus() {
+  const pop = document.getElementById('statusPop'), b = document.getElementById('health')
+  if (!pop || pop.hidden || !b) return
+  const r = b.getBoundingClientRect(), vw = document.documentElement.clientWidth
+  if (vw < 600) { pop.style.left = '8px'; pop.style.right = '8px'; pop.style.top = (r.bottom + 8) + 'px'; return }
+  pop.style.right = 'auto'
+  pop.style.top = (r.bottom + 8) + 'px'
+  pop.style.left = Math.max(8, Math.min(r.right - pop.offsetWidth, vw - 8 - pop.offsetWidth)) + 'px'
+}
+async function toggleStatus(open = !statusOpen()) {
+  const pop = document.getElementById('statusPop'), b = document.getElementById('health')
+  if (!pop) return
+  pop.hidden = !open
+  b.setAttribute('aria-expanded', String(open))
+  if (!open) return
+  closeMenu(); closeSearch()
+  paintStatus()
+  if (window.leftoffRelay) window.leftoffRelay.status().then((st) => { state.relayStatus = st; if (statusOpen()) paintStatus() }).catch(() => {})
+  // sync health: read it now if Settings hasn't
+  if (!stUi.data) {
+    const [st, sync] = await Promise.all([api('GET', '/v1/syncthing', undefined, { timeoutMs: 4000 }).catch(() => null), syncUi.data ? null : api('GET', '/v1/sync').catch(() => null)])
+    if (st) stUi.data = st
+    if (sync) syncUi.data = sync
+    if (statusOpen()) paintStatus()
+    paintTopDot()
+  }
+}
+document.getElementById('health').addEventListener('click', () => toggleStatus())
+document.addEventListener('pointerdown', (e) => { if (statusOpen() && !e.target.closest('#statusPop, #health')) toggleStatus(false) }, true)
+document.getElementById('statusPop').addEventListener('click', (e) => { if (e.target.closest('a')) toggleStatus(false) })
+document.addEventListener('click', (e) => { if (statusOpen() && e.target.closest('#statusPop [data-theme-set]')) setTimeout(paintStatus, 0) })
+window.addEventListener('resize', () => { placeStatus() })
+
+// ⌘K search: a centered panel with the results grouped as you type. Enter on
+// nothing picked opens the full results page (#/search?q=…), as before.
+const searchUi = { seq: 0, items: [], active: -1, timer: null, last: null }
+const PAGES = [['Board', '#/'], ['Needs you', '#/waiting'], ['Lists', '#/lists'], ['Timeline', '#/timeline'], ['Digest', '#/digest'], ['Catch me up', '#/catchup/new'], ['What’s new', '#/whats-new'], ['Settings', '#/settings']]
+const searchIsOpen = () => !document.getElementById('cmdk').hidden
+function openSearch(prefill) {
+  const box = document.getElementById('cmdk'), q = document.getElementById('q')
+  closeMenu(); if (statusOpen()) toggleStatus(false)
+  box.hidden = false
+  document.documentElement.classList.add('cmdk-open')
+  if (prefill != null) q.value = prefill
+  else if (state.route && state.route.name === 'search') q.value = state.route.q || ''
+  q.focus(); q.select()
+  searchUi.back = document.activeElement
+  paintSearch()
+}
+function closeSearch() {
+  const box = document.getElementById('cmdk')
+  if (!box || box.hidden) return
+  box.hidden = true
+  document.documentElement.classList.remove('cmdk-open')
+  clearTimeout(searchUi.timer)
+}
+function searchGroups(q, r) {
+  const low = q.toLowerCase()
+  const groups = []
+  const pages = PAGES.filter(([n]) => !low || n.toLowerCase().includes(low)).map(([n, href]) => ({ href, title: n, sub: '', icon: 'layout-dashboard' }))
+  const sets = low ? SETTINGS.filter((x) => (x.label + ' ' + x.words).toLowerCase().includes(low)).map((x) => ({ href: '#/settings/' + x.key, title: 'Settings → ' + x.label, sub: x.sub, icon: x.icon })) : []
+  if (r) {
+    if (r.sessions.length) groups.push(['Sessions', r.sessions.slice(0, 6).map((x) => ({ href: '#/s/' + encodeURIComponent(x.id), title: x.title || 'Untitled', sub: [x.repoLabel || x.repoName, x.machine, x.lastActivityAt ? ago(x.lastActivityAt) : ''].filter(Boolean).join(' · '), icon: 'history' }))])
+    if (r.checkpoints.length) groups.push(['Checkpoints', r.checkpoints.slice(0, 6).map((cp) => ({ href: '#/s/' + encodeURIComponent(cp.sessionId), title: cp.doing || cp.next || 'Checkpoint', sub: [cp.sessionTitle || 'Untitled', cp.createdAt ? clock(cp.createdAt) : ''].filter(Boolean).join(' · '), icon: 'check' }))])
+  }
+  if (sets.length) groups.push(['Settings', sets.slice(0, 5)])
+  if (pages.length) groups.push(['Go to', pages.slice(0, low ? 4 : 8)])
+  return groups
+}
+function paintSearch() {
+  const q = document.getElementById('q').value.trim()
+  const list = document.getElementById('cmdkList')
+  const r = searchUi.last && searchUi.last.q === q ? searchUi.last.r : null
+  const groups = searchGroups(q, r)
+  searchUi.items = []
+  let h = ''
+  if (q) { searchUi.items.push({ href: '#/search?q=' + encodeURIComponent(q), title: 'All results for “' + q + '”', icon: 'search' }) }
+  for (const [name, items] of groups) { h += '<div class="cmdk-group" role="presentation">' + esc(name) + '</div>'; for (const it of items) { searchUi.items.push(it); h += optHtml(it, searchUi.items.length - 1) } }
+  if (q) h = optHtml(searchUi.items[0], 0) + h
+  if (q && q.length >= 2 && !r) h += '<div class="cmdk-note">Searching…</div>'
+  else if (q && r && !r.sessions.length && !r.checkpoints.length) h += '<div class="cmdk-note">No sessions or checkpoints match “' + esc(q) + '”.</div>'
+  list.innerHTML = h
+  setSearchActive(searchUi.items.length ? 0 : -1)
+  function optHtml(it, i) { return '<a class="cmdk-opt" role="option" id="cmdk-o' + i + '" data-i="' + i + '" href="' + esc(it.href) + '" aria-selected="false">' + icon(it.icon || 'search') + '<span class="co-text"><span class="co-title">' + esc(it.title) + '</span>' + (it.sub ? '<span class="co-sub">' + esc(it.sub) + '</span>' : '') + '</span></a>' }
+}
+function setSearchActive(i) {
+  searchUi.active = i
+  const q = document.getElementById('q')
+  document.querySelectorAll('.cmdk-opt').forEach((el) => { const on = Number(el.dataset.i) === i; el.classList.toggle('active', on); el.setAttribute('aria-selected', String(on)); if (on) el.scrollIntoView({ block: 'nearest' }) })
+  if (i >= 0) q.setAttribute('aria-activedescendant', 'cmdk-o' + i); else q.removeAttribute('aria-activedescendant')
+}
+async function runSearch() {
+  const q = document.getElementById('q').value.trim()
+  const seq = ++searchUi.seq
+  if (q.length < 2) { paintSearch(); return }
+  paintSearch()
+  try {
+    const r = await api('GET', '/v1/search?q=' + encodeURIComponent(q))
+    if (seq !== searchUi.seq) return
+    searchUi.last = { q, r }
+  } catch { if (seq === searchUi.seq) searchUi.last = { q, r: { sessions: [], checkpoints: [] } } }
+  if (searchIsOpen()) paintSearch()
+}
+document.getElementById('searchBtn').addEventListener('click', () => openSearch())
+document.getElementById('q').addEventListener('input', () => { clearTimeout(searchUi.timer); paintSearch(); searchUi.timer = setTimeout(runSearch, 160) })
+document.getElementById('q').addEventListener('keydown', (e) => {
+  const n = searchUi.items.length
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (n) setSearchActive((searchUi.active + (e.key === 'ArrowDown' ? 1 : -1) + n) % n) }
+  else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeSearch(); document.getElementById('searchBtn').focus() }
+})
+document.getElementById('cmdk').addEventListener('click', (e) => {
+  if (e.target.closest('[data-cmdk-close]') || e.target === e.currentTarget) { closeSearch(); return }
+  if (e.target.closest('.cmdk-opt')) closeSearch()
+})
+document.getElementById('cmdk').addEventListener('mousemove', (e) => { const o = e.target.closest('.cmdk-opt'); if (o && Number(o.dataset.i) !== searchUi.active) setSearchActive(Number(o.dataset.i)) })
+document.addEventListener('keydown', (e) => {
+  const typing = e.target && (e.target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName))
+  if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === 'k' || e.key === 'K')) { e.preventDefault(); if (searchIsOpen()) closeSearch(); else openSearch(); return }
+  if (e.key === '/' && !typing && !e.metaKey && !e.ctrlKey && !e.altKey && !searchIsOpen()) { e.preventDefault(); openSearch(); return }
+  if (e.key === 'Escape' && statusOpen()) { toggleStatus(false); document.getElementById('health').focus() }
+})
+
+
+// ------------------------------------------------------------ actions
+
+// 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).
+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 }
+  location.hash = c.dataset.href
+})
+
+document.addEventListener('click', async (ev) => {
+  const btn = ev.target.closest('[data-action]')
+  if (!btn) return
+  // An action never navigates: a stray <a href="#"> would change the hash and
+  // the router would drop you on the board (0.4.1: Settings → Check now did).
+  if (btn.tagName === 'A' && (btn.getAttribute('href') || '#') === '#') ev.preventDefault()
+  const action = btn.dataset.action
+  const card = btn.closest('[data-id]')
+  const id = btn.dataset.id || (card && card.dataset.id)
+  const s = state.sessions.find((x) => x.id === id)
+  try {
+    if (action === 'copy-cmd') { await copy(btn.dataset.cmd); return }
+    // Use from anywhere (v0.6.0)
+    if (action === 'relay-toggle') {
+      const on = btn.checked
+      const user = ((document.getElementById('f-anywhere-user') || {}).value || '').trim().toLowerCase()
+      if (on && !user) { btn.checked = false; toast('Type your name first (your subdomain, e.g. yourname)'); document.getElementById('f-anywhere-user').focus(); return }
+      try { await api('POST', on ? '/v1/relay/enable' : '/v1/relay/disable', on ? { user } : undefined); toast(on ? 'Use from anywhere is on: connecting to ' + user + '.leftoff.dev' : 'Use from anywhere is off for this Mac') }
+      catch (e) { btn.checked = !on; toast(e.message, 5000); return }
+      setTimeout(() => { if (state.route && state.route.name === 'settings') render() }, 1200)
+      return render()
+    }
+    if (action === 'relay-user') {
+      const user = (document.getElementById('f-anywhere-user').value || '').trim().toLowerCase()
+      await api('POST', '/v1/relay/enable', { user }); toast('Saved: ' + user + '.leftoff.dev'); return render()
+    }
+    if (action === 'relay-signup' || action === 'relay-signup-resend') {
+      const user = action === 'relay-signup' ? ((document.getElementById('f-signup-user') || {}).value || '').trim().toLowerCase() : btn.dataset.user
+      const email = action === 'relay-signup' ? ((document.getElementById('f-signup-email') || {}).value || '').trim() : btn.dataset.email
+      const errEl = document.getElementById('signupErr')
+      const say = (m) => { if (errEl) { errEl.textContent = m; errEl.hidden = !m } else if (m) toast(m) }
+      if (!/^[a-z0-9](?:[a-z0-9-]{0,30}[a-z0-9])?$/.test(user) || user.includes('--')) { say('A name is 2–32 lowercase letters, digits or hyphens.'); const el = document.getElementById('f-signup-user'); if (el) el.focus(); return }
+      if (!/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(email)) { say('That doesn’t look like an email address.'); const el = document.getElementById('f-signup-email'); if (el) el.focus(); return }
+      btn.disabled = true
+      try { await api('POST', '/v1/relay/signup', { user, email }); toast('Sent a link to ' + email) } catch (e) { btn.disabled = false; say(e.message); return }
+      await render(); relaySignupPoll(); return
+    }
+    if (action === 'relay-signup-cancel') { await api('POST', '/v1/relay/signup/cancel'); stopSignupPoll(); return render() }
+    if (action === 'relay-pair') { const l = await api('POST', '/v1/relay/pair'); paintRelayPair(l); return }
+    if (action === 'relay-revoke') {
+      if (!confirm('Revoke ' + btn.dataset.name + '? It stops working at once and needs pairing again.')) return
+      const r = await api('POST', '/v1/relay/devices/' + encodeURIComponent(btn.dataset.device) + '/revoke')
+      toast('Revoked ' + btn.dataset.name + (r.relay === 'done' ? '' : ' (the relay hears it once this Mac reconnects)')); return render()
+    }
+    if (action === 'relay-mac') { if (window.leftoffRelay && btn.dataset.mac !== window.leftoffRelay.mac) window.leftoffRelay.pick(btn.dataset.mac); return }
+    // Lists (v0.5.1)
+    if (action === 'list-save-hint') {
+      btn.disabled = true
+      const r = await api('POST', '/v1/lists', { sessionId: id, fromHint: true })
+      toast('Saved “' + r.list.name + '” · ' + r.list.total + ' items')
+      return render()
+    }
+    if (action === 'list-dismiss') { await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/list-hint/dismiss'); return render() }
+    if (action === 'list-find') {
+      listUi.finding[id] = true; render()
+      try { listUi.found[id] = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/lists/find') } catch (e) { listUi.found[id] = { error: e.message } }
+      listUi.finding[id] = false
+      await render()
+      const el = document.getElementById('lists'); if (el) el.scrollIntoView({ block: 'start' })
+      return
+    }
+    if (action === 'list-save-cand') {
+      btn.disabled = true
+      const r = await api('POST', '/v1/lists', { sessionId: id, fromTranscript: Number(btn.dataset.n) })
+      toast('Saved “' + r.list.name + '” · ' + r.list.total + ' items')
+      try { listUi.found[id] = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/lists/find') } catch {}
+      return render()
+    }
+    if (action === 'list-rename') {
+      const cur = (btn.closest('.listcard') && btn.closest('.listcard').querySelector('.lname') || {}).textContent || ''
+      const name = window.prompt('Rename this list', cur)
+      if (!name || !name.trim() || name.trim() === cur) return
+      await api('POST', '/v1/lists/' + btn.dataset.ref + '/change', { name: name.trim() })
+      return render()
+    }
+    if (action === 'list-archive') {
+      const archived = btn.dataset.archived === '1'
+      await api('POST', '/v1/lists/' + btn.dataset.ref + '/change', { archived })
+      toast(archived ? 'Archived. It’s still in the folder; “Show finished & archived” brings it back.' : 'Back on your lists')
+      return render()
+    }
+    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 === 'remote-link' || action === 'remote-code') {
+      const l = await api('POST', '/v1/remote/link')
+      if (l.needed === false) { toast('No sign-in needed (remoteRequireToken is off)'); return }
+      paintSignin(l); return
+    }
+    if (action === 'length-try') { await tryLength(); return }
+    if (action === 'cu-open') { cuUi.open = true; cuUi.opts = null; cuUi.err = null; cuUi.repos = null; cuUi.machines = null; return render() }
+    if (action === 'cu-close') { cuUi.open = false; if (state.route && state.route.arg === 'new') { location.hash = '#/catchup'; return } return render() }
+    if (action === 'cu-win') {
+      cuUi.since = btn.dataset.win; cuUi.repos = null
+      if (cuUi.since === 'custom' && !cuUi.from) { const d = new Date(Date.now() - 86400000); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); cuUi.from = d.toISOString().slice(0, 16) }
+      await cuLoadOptions(); return render()
+    }
+    if (action === 'cu-repos-all') { const all = (cuUi.opts && cuUi.opts.repos) || []; const sel = cuUi.repos || new Set(all.map((r) => r.key)); cuUi.repos = sel.size === all.length ? new Set() : null; return render() }
+    if (action === 'cu-make') {
+      const o = cuUi.opts || {}
+      const all = (o.repos || []).map((r) => r.key)
+      const repos = cuUi.repos && cuUi.repos.size !== all.length ? [...cuUi.repos] : []
+      const machines = cuUi.machines && o.allMachines && cuUi.machines.size !== o.allMachines.length ? [...cuUi.machines] : []
+      cuUi.making = true; render()
+      try {
+        const r = await api('POST', '/v1/catchups', { since: cuSince() || undefined, to: cuUi.since === 'custom' && cuUi.to ? cuUi.to : undefined, repos, machines }, { timeoutMs: 120000 })
+        cuUi.open = false; cuUi.making = false; cuUi.opts = null
+        location.hash = '#/catchup/' + r.name
+        if (state.route && state.route.arg === r.name) render()
+      } catch (e) { cuUi.making = false; cuUi.err = e.message; render() }
+      return
+    }
+    if (action === 'restore-open') { restoreUi.open = true; restoreUi.result = null; return render() }
+    if (action === 'restore-close') { restoreUi.open = false; return render() }
+    if (action === 'restore-dismiss') { try { localStorage.setItem(restoreDismissKey(state.restore || {}), '1') } catch {} restoreUi.open = false; return render() }
+    if (action === 'restore-all') { const all = restorePicked().length === (state.restore ? state.restore.sessions.length : 0); restoreUi.off = new Set(all && state.restore ? state.restore.sessions.map((x) => x.id) : []); return render() }
+    if (action === 'restore-copy') { const p = restorePicked(); if (!p.length) { toast('Pick at least one'); return } await copy(p.map((x) => x.command).join('\n')); return }
+    if (action === 'restore-go') {
+      const ids = restorePicked().map((x) => x.id)
+      if (!ids.length) return
+      btn.disabled = true; btn.textContent = 'Opening ' + ids.length + '…'
+      const r = await api('POST', '/v1/restore', { ids }, { timeoutMs: 60000 })
+      restoreUi.result = r.how === 'print' || r.failed ? r : null
+      if (r.how === 'ghostty' && r.opened) { toast('Restored ' + r.opened + ' in Ghostty' + (r.failed ? ' · ' + r.failed + ' didn’t open' : '')); if (!r.failed) restoreUi.open = false }
+      return render()
+    }
+    if (action === 'remote-revoke') {
+      if (!confirm('Sign out every remote browser, the home-screen app included? Each needs a new QR code or code.')) return
+      const r = await api('POST', '/v1/remote/revoke'); toast('Signed out ' + r.revoked + ' browser' + (r.revoked === 1 ? '' : 's')); return render()
+    }
+    if (action === 'dismiss-upgrade') { await api('POST', '/v1/changelog/dismiss'); await refreshHealth(); return render() }
+    if (action === 'agent-add') return agentAdd(btn)
+    if (action === 'agent-refresh') {
+      const name = btn.dataset.name
+      btn.disabled = true; btn.textContent = 'Pulling…'
+      try { const r = await api('POST', '/v1/agents/' + encodeURIComponent(name) + '/refresh'); toast(r.result === 'error' ? 'Couldn’t pull ' + name + ': ' + ((r.error && r.error.message) || 'error') : r.result === 'unchanged' ? name + ': nothing new' : 'Pulled ' + name) } catch (e) { toast(e.message, 5000) }
+      await refreshHealth().catch(() => {}); return agentsRepaint()
+    }
+    if (action === 'agent-remove') {
+      const name = btn.dataset.name
+      if (!confirm('Stop pulling “' + name + '” and take it off the board? Its history moves to agents/.removed/ in the folder (nothing is deleted), and this Mac forgets its key.')) return
+      try { await api('DELETE', '/v1/agents/' + encodeURIComponent(name)); toast('Removed ' + name) } catch (e) { toast(e.message, 5000) }
+      await refreshHealth().catch(() => {}); return agentsRepaint()
+    }
+    if (action === 'check-updates') {
+      btn.disabled = true; btn.textContent = 'Checking…'
+      const u = await api('POST', '/v1/updates/check')
+      state.updates = u
+      toast(u.error ? 'Couldn’t check: ' + u.error : u.available ? 'Update available: ' + (u.remote.version ? 'v' + u.remote.version : u.remote.sha.slice(0, 7)) : 'You’re up to date')
+      await refreshHealth(); return render()
+    }
+    if (action === 'filter') {
+      const f = state.boardFilter || readFilter(state.route && state.route.params, window.localStorage)
+      return setBoardFilter({ repos: f.repos, status: f.status === btn.dataset.filter ? null : btn.dataset.filter })
+    }
+    if (action === 'repo') {
+      ev.preventDefault()
+      const onBoard = state.route && (state.route.name === 'board' || state.route.name === 'waiting')
+      const f = onBoard && state.boardFilter ? state.boardFilter : readFilter('', window.localStorage)
+      const repos = toggleRepo(f.repos, { key: btn.dataset.key || btn.dataset.repo, label: btn.dataset.repo }, ev.shiftKey || ev.metaKey || ev.ctrlKey)
+      if (btn.classList.contains('opt')) state.moreOpen = ev.shiftKey || ev.metaKey || ev.ctrlKey
+      if (state.route && state.route.name === 'timeline') {
+        const tf = state.tlFilter || {}
+        const r2 = toggleRepo(tf.repos || [], { key: btn.dataset.key || btn.dataset.repo, label: btn.dataset.repo }, ev.shiftKey || ev.metaKey || ev.ctrlKey)
+        saveRepos(window.localStorage, r2); location.hash = timelineHash({ repos: r2, session: null, trigger: tf.trigger }); return
+      }
+      if (!onBoard) { saveRepos(window.localStorage, repos); location.hash = filterHash({ repos, status: null }); return }
+      return setBoardFilter({ repos, status: f.status })
+    }
+    if (action === 'pick-model') {
+      if (btn.dataset.needsDl) { toast('Download it first: press Download & use'); return }
+      document.getElementById('f-model').value = btn.dataset.tag
+      const o = document.getElementById('f-model-other'); if (o) o.value = ''
+      return paintModels()
+    }
+    if (action === 'ollama-start') {
+      btn.disabled = true; btn.textContent = 'Starting…'
+      try {
+        const r = await api('POST', '/v1/models/ollama/start')
+        if (r.models) state.models = r.models
+        toast(r.ok ? (r.already ? 'Ollama is already running' : 'Ollama is running') : 'Started ' + (r.shell || 'Ollama') + ', but it didn’t answer within 20 s', r.ok ? 3000 : 8000)
+      } finally { paintModels() }
+      return
+    }
+    if (action === 'pull-model') {
+      btn.disabled = true
+      const v = await api('POST', '/v1/models/pull', { tag: btn.dataset.tag, use: btn.dataset.use === '1' })
+      onPull(v); return
+    }
+    if (action === 'pull-cancel') { const v = await api('DELETE', '/v1/models/pull/' + encodeURIComponent(btn.dataset.tag)); onPull(v); return }
+    if (action === 'day-toggle') {
+      const on = btn.getAttribute('aria-pressed') === 'true'
+      if (on && document.querySelectorAll('.days .day[aria-pressed="true"]').length === 1) { toast('Pick at least one day'); return }
+      btn.setAttribute('aria-pressed', String(!on)); return
+    }
+    if (action === 'days-preset') {
+      const want = btn.dataset.days === 'weekdays' ? ['mon', 'tue', 'wed', 'thu', 'fri'] : DAY_KEYS.map(([k]) => k)
+      document.querySelectorAll('.days .day').forEach((b) => b.setAttribute('aria-pressed', String(want.includes(b.dataset.day)))); return
+    }
+    if (action === 'repo-all') {
+      state.moreOpen = false
+      if (state.route && state.route.name === 'timeline') { saveRepos(window.localStorage, []); location.hash = timelineHash({ repos: [], session: null, trigger: (state.tlFilter || {}).trigger }); return }
+      return setBoardFilter({ repos: [], status: (state.boardFilter || {}).status })
+    }
+    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 }) }
+    // Spaces (v0.5.8)
+    if (action === 'board-space') {
+      state.boardSpace = btn.dataset.space || null
+      saveSpace(state.boardSpace)
+      const f = state.boardFilter || readFilter(state.route && state.route.params, window.localStorage)
+      return setBoardFilter({ repos: f.repos, status: f.status })
+    }
+    if (action === 'digest-space') {
+      state.digestSpace = btn.dataset.space || null
+      saveSpace(state.digestSpace)
+      return paintDigestFilter()
+    }
+    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)
+    if (action === 'digest-repo') {
+      const cur = state.digestRepos || []
+      state.digestRepos = btn.dataset.repo ? toggleRepo(cur, btn.dataset.repo, ev.shiftKey || ev.metaKey || ev.ctrlKey) : []
+      saveRepos(window.localStorage, state.digestRepos)
+      return paintDigestFilter()
+    }
+    // ---- Needs you (v0.4.4)
+    if (action === 'ask-deny-open' || action === 'ask-deny-close') {
+      const need = btn.closest('.need')
+      const form = need && need.querySelector('.deny-form')
+      if (form) { form.hidden = action === 'ask-deny-close'; if (!form.hidden) form.querySelector('input').focus() }
+      return
+    }
+    if (action === 'ask-pick') {
+      const q = btn.closest('.need-q')
+      if (q && !q.dataset.multi) q.querySelectorAll('.opt').forEach((o) => { if (o !== btn) o.setAttribute('aria-pressed', 'false') })
+      btn.setAttribute('aria-pressed', btn.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')
+      return
+    }
+    if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
+    if (action === 'reply-send') return replyClick(btn)
+    if (action === 'go') return goClick(btn, id, s)
+    if (action && action.startsWith('st-')) return stAction(action, btn)
+    if (action && action.startsWith('sync-') || action === 'peer-trust') return syncAction(action, btn)
+    if (action === 'resume') {
+      const cmd = s ? s.resumeCommand : (await api('GET', '/v1/sessions/' + encodeURIComponent(id))).resumeCommand
+      await copy(cmd)
+    } else if (action === 'checkpoint') {
+      btn.disabled = true; btn.textContent = 'Writing…'
+      const cp = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/checkpoints', { trigger: 'manual', generate: true })
+      toast('Checkpoint saved · Next: ' + cp.next)
+      render()
+    } else if (action === 'pin') {
+      await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { pinned: !(s && s.pinned) }); render()
+    } else if (action === 'archive') {
+      await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { archived: true }); toast('Archived'); render()
+    } else if (action === 'gen-digest') {
+      btn.disabled = true; btn.textContent = 'Generating…'
+      const d = await api('POST', '/v1/digests', {})
+      digestUi.standups = {}; digestUi.date = null
+      location.hash = '#/digest/' + d.meta.date
+      render()
+    } else if (action === 'rename') {
+      const box = btn.closest('.title')
+      if (!box || box.querySelector('input')) return
+      const current = s ? s.title || '' : ''
+      box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title">'
+      const input = box.querySelector('input')
+      input.focus(); input.select()
+      let finished = false
+      const done = async (save) => {
+        if (finished) return
+        finished = true
+        if (save && input.value.trim() && input.value.trim() !== current) {
+          await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { title: input.value.trim() })
+          toast('Renamed. With the mod, the session and its tab title follow within a minute')
+        }
+        render()
+      }
+      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') done(true); if (e.key === 'Escape') done(false) })
+      input.addEventListener('blur', () => done(true))
+    }
+  } catch (e) { toast(e.message); btn.disabled = false }
+})
+
+
+// Answer a permission prompt or a question from the board. The daemon hands it
+// to the waiting hook or mod; the terminal's own prompt may already have won.
+async function answerClick(btn, action) {
+  const need = btn.closest('.need')
+  if (!need) return
+  const askId = need.dataset.ask, key = need.dataset.key
+  const s = state.sessions.find((x) => x.id === need.dataset.id)
+  const n = s && s.needsYou
+  let body
+  if (action === 'ask-pick-send') {
+    const q = n && n.ask && n.ask.questions && n.ask.questions[0]
+    body = { action: 'answer', answers: { [q ? q.question : '']: btn.dataset.label } }
+  } else if (btn.dataset.choice === 'answer') {
+    const qs = (n && n.ask && n.ask.questions) || []
+    const picks = {}, typed = {}
+    need.querySelectorAll('.need-q').forEach((el) => {
+      const i = Number(el.dataset.q)
+      picks[i] = [...el.querySelectorAll('.opt[aria-pressed="true"]')].map((o) => o.dataset.label)
+      const t = el.querySelector('.qother'); typed[i] = t ? t.value : ''
+    })
+    body = { action: 'answer', ...questionAnswer(qs, picks, typed) }
+    if (!Object.keys(body.answers).length) { toast('Pick an option or type an answer first'); return }
+  } else if (btn.dataset.choice === 'deny') {
+    const note = need.querySelector('.deny-note')
+    body = { action: 'deny', message: note ? note.value.trim() : '' }
+  } else body = { action: btn.dataset.choice }
+  need.querySelectorAll('button, input, textarea').forEach((el) => { if (!el.classList.contains('go')) el.disabled = true })
+  btn.textContent = 'Sending…'
+  state.pendingAsk[key] = 'Sending…'
+  try {
+    const r = await api('POST', '/v1/asks/' + encodeURIComponent(askId) + '/answer', body)
+    toast(r.summary + (r.delivered ? ' · Claude Code has it' : ' · waiting for Claude Code to pick it up'), 3600)
+    for (const k of Object.keys(state.drafts)) if (k.includes(askId)) delete state.drafts[k]
+  } catch (e) {
+    toast(e.code === 'not_waiting' ? 'Already handled: ' + e.message : e.message, 4200)
+  } finally {
+    delete state.pendingAsk[key]
+    render()
+  }
+}
+
+async function replyClick(btn) {
+  const need = btn.closest('.need')
+  const ta = need && need.querySelector('.reply-text')
+  const text = ta ? ta.value.trim() : ''
+  if (!text) { toast('Type a reply first'); return }
+  if (text.startsWith('/')) { toast('Replies can’t start with “/”'); return }
+  btn.disabled = true; btn.textContent = 'Sending…'
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(need.dataset.id) + '/reply', { text })
+    delete state.drafts['reply:' + need.dataset.id]
+    toast(r.queuedBehindTurn ? 'Sent · Claude reads it when the current turn ends' : 'Sent · Claude has it as its next prompt', 3600)
+  } catch (e) { toast(e.message, 4200) } finally { render() }
+}
+
+// Go: "Switching…" at once, a note if it's slow, the result (with timings when slow) after.
+function goClick(btn, id, s) {
+  return goWithFeedback({
+    id,
+    title: s && s.title,
+    label: s && s.terminal && s.terminal.label,
+    toast,
+    getBtn: () => document.querySelector('.btn.go[data-id="' + (window.CSS && CSS.escape ? CSS.escape(id) : id) + '"]') || btn,
+    post: () => api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/go', {}, { timeoutMs: GIVE_UP_MS }),
+  })
+}
+
+document.addEventListener('submit', async (ev) => {
+  if (ev.target.dataset && ev.target.dataset.listAdd) {
+    ev.preventDefault()
+    const input = ev.target.querySelector('input[name=text]')
+    const text = input.value.trim()
+    if (!text) return
+    try { await api('POST', '/v1/lists/' + ev.target.dataset.listAdd + '/change', { add: text }); input.value = ''; await render(); const again = document.querySelector('form[data-list-add="' + ev.target.dataset.listAdd + '"] input'); if (again) again.focus() } catch (e) { toast(e.message, 5000) }
+    return
+  }
+  if (ev.target.id === 'searchForm') {
+    ev.preventDefault()
+    const q = document.getElementById('q').value.trim()
+    const it = searchUi.items[searchUi.active]
+    closeSearch()
+    location.hash = it ? it.href : q ? '#/search?q=' + encodeURIComponent(q) : location.hash
+  } else if (ev.target.id === 'settingsForm') {
+    ev.preventDefault()
+    try {
+      const prov = document.getElementById('f-mode').value
+      const f = PROVIDER_FIELDS[prov] || PROVIDER_FIELDS.auto
+      const prev = (state.cfg && state.cfg.summarizer) || {}
+      const changed = String(prev.provider || 'auto').toLowerCase() !== prov
+      const summarizer = {
+        provider: prov,
+        model: (f.model && (((document.getElementById('f-model-other') || {}).value || '').trim() || document.getElementById('f-model').value.trim())) || 'haiku',
+        baseUrl: (f.base && document.getElementById('f-base').value.trim()) || null,
+      }
+      // A key setting from another provider must not follow the switch.
+      if (changed) { summarizer.apiKeyEnv = null; summarizer.apiKeyFile = null }
+      const key = f.key ? document.getElementById('f-key').value.trim() : ''
+      if (key) await api('PUT', '/v1/config/keys/' + f.key, { key })
+      await api('PATCH', '/v1/config', {
+        dormantAfterMin: Number(document.getElementById('f-dormant').value),
+        minGapMin: Number(document.getElementById('f-gap').value),
+        digest: {
+          time: document.getElementById('f-time').value || null,
+          days: [...document.querySelectorAll('.days .day[aria-pressed="true"]')].map((b) => b.dataset.day),
+          skipEmpty: document.getElementById('f-skip').checked,
+          timeZone: document.getElementById('f-tz').value || null,
+        },
+        summarizer,
+        summary: { length: ((document.querySelector('input[name="f-length"]:checked') || {}).value) || 'informative' },
+        updates: { check: document.getElementById('f-updates').checked },
+        notify: { needsYou: document.getElementById('f-notify').checked },
+        ...(() => {
+          const el = document.getElementById('f-remote-answers')
+          if (!el || el.disabled || el.checked === !!(state.cfg.remote && state.cfg.remote.allowAnswers)) return {}
+          if (el.checked && !confirm('Allow approving prompts from other devices on your tailnet? Anyone signed in to the board there could approve commands on this machine.')) { el.checked = false; return {} }
+          return { remote: { allowAnswers: el.checked } }
+        })(),
+      })
+      toast(key ? 'Saved · key stored in .secret/' : 'Saved'); render(); refreshHealth()
+    } catch (e) { toast(e.message) }
+  }
+})
+
+// Live updates over SSE; re-render the current view, at most every 800 ms.
+let pending = null
+const busy = () => !!document.querySelector('.lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName))
+// Settings isn't redrawn by live updates: it would wipe what you're editing,
+// and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
+function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && state.route.name === 'settings') && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }
+let stream = null
+function connect() {
+  if (stream) { try { stream.close() } catch {} }
+  const es = stream = new EventSource('/v1/stream')
+  for (const t of ['session.updated', 'checkpoint.created', 'digest.created', 'spaces.updated', 'catchup.created', 'needs.updated', 'restore.updated', 'lists.updated', 'peers.updated', 'agents.updated', 'relay.updated']) es.addEventListener(t, 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()
+}
+
+document.addEventListener('change', async (ev) => {
+  // Spaces (v0.5.8): a session's or agent's own space, a Mac's default.
+  if (ev.target.dataset && ev.target.dataset.spaceKind) {
+    const sel = ev.target
+    let space = sel.value
+    if (space === '__new') { space = (prompt('Name the space (e.g. Work, Personal, Clients):') || '').trim(); if (!space) { sel.selectedIndex = 0; return } }
+    try {
+      await api('POST', '/v1/spaces', { kind: sel.dataset.spaceKind, key: sel.dataset.spaceKey, space: space || null })
+      toast(space ? 'Now in ' + space : 'Back to the default space')
+    } catch (e) { toast(e.message, 5000) }
+    return sel.closest('#spacesBox') ? spacesRepaint() : render()
+  }
+  if (ev.target.id === 'f-peer-allow') {
+    const cb = ev.target
+    try { const r = await api('POST', '/v1/peers/allow', { allow: cb.checked }); toast(r.allowIncoming ? 'Other machines may now answer and Go here' : 'Other machines can no longer answer or Go here') } catch (e) { cb.checked = !cb.checked; toast(e.message, 6000) }
+    return viewSettings()
+  }
+  if (ev.target.dataset && ev.target.dataset.list && ev.target.type === 'checkbox') {
+    const cb = ev.target, done = cb.checked, li = cb.closest('li')
+    if (li) li.classList.toggle('done', done)
+    try {
+      const r = await api('POST', '/v1/lists/' + cb.dataset.list + '/change', done ? { done: [Number(cb.dataset.n)] } : { undone: [Number(cb.dataset.n)] })
+      const card = cb.closest('.listcard')
+      if (card) { const p = card.querySelector('.lprog'); if (p) p.textContent = r.list.progress; const b = card.querySelector('progress.bar'); if (b) { b.max = Math.max(1, r.list.total); b.value = r.list.done } card.classList.toggle('complete', r.list.done === r.list.total) }
+      if (r.list.done === r.list.total && done) toast('“' + r.list.name + '” is done 🎉')
+    } catch (e) { cb.checked = !done; if (li) li.classList.toggle('done', !done); toast(e.message, 5000) }
+    return
+  }
+  if (ev.target.name === 'rs') {
+    if (ev.target.checked) restoreUi.off.delete(ev.target.value); else restoreUi.off.add(ev.target.value)
+    const n = restorePicked().length
+    const go = document.getElementById('restoreGo')
+    if (go) { go.disabled = !n; go.innerHTML = icon('rotate-ccw') + 'Restore ' + n }
+    const all = document.querySelector('[data-action="restore-all"]')
+    if (all) all.textContent = n === (state.restore ? state.restore.sessions.length : 0) ? 'Select none' : 'Select all'
+    return
+  }
+  if (ev.target.dataset && ev.target.dataset.cuRepo != null) {
+    const all = ((cuUi.opts && cuUi.opts.repos) || []).map((r) => r.key)
+    const sel = cuUi.repos || new Set(all)
+    if (ev.target.checked) sel.add(ev.target.dataset.cuRepo); else sel.delete(ev.target.dataset.cuRepo)
+    cuUi.repos = sel.size === all.length ? null : sel
+    return render()
+  }
+  if (ev.target.dataset && ev.target.dataset.cuMachine != null) {
+    const all = (cuUi.opts && cuUi.opts.allMachines) || []
+    const sel = cuUi.machines || new Set(all)
+    if (ev.target.checked) sel.add(ev.target.dataset.cuMachine); else sel.delete(ev.target.dataset.cuMachine)
+    cuUi.machines = sel.size === all.length ? null : sel
+    return render()
+  }
+  if (ev.target.id === 'cuFrom' || ev.target.id === 'cuTo') {
+    if (ev.target.id === 'cuFrom') cuUi.from = ev.target.value; else cuUi.to = ev.target.value
+    cuUi.repos = null
+    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() }
+})
+
+// Moving between Settings sections only swaps the section shown (v0.5.9): a
+// redraw would drop what you typed in another section before saving.
+window.addEventListener('hashchange', () => {
+  const r = parseRoute()
+  if (r.name === 'settings' && state.route && state.route.name === 'settings' && document.getElementById('settingsWrap')) { state.route = r; return showSettingsSection(r) }
+  closeMenu(); closeSearch(); if (statusOpen()) toggleStatus(false)
+  render()
+})
+setInterval(() => { if (state.route && ['board', 'waiting'].includes(state.route.name) && !busy()) render() }, 30000)
+// More ▾: remember open/closed across re-renders, filter its list as you type, close on an outside click or Escape.
+document.addEventListener('toggle', (ev) => {
+  if (ev.target.id === 'emptyFold') { state.emptyOpen = ev.target.open; return }
+  if (!ev.target.classList || !ev.target.classList.contains('repomore')) return
+  state.moreOpen = ev.target.open
+  if (ev.target.open) { const i = ev.target.querySelector('.morefilter'); if (i) i.focus() }
+}, true)
+document.addEventListener('input', (ev) => {
+  if (ev.target.dataset && ev.target.dataset.draft) { state.drafts[ev.target.dataset.draft] = ev.target.value; return }
+  if (!ev.target.classList.contains('morefilter')) return
+  state.moreQuery = ev.target.value
+  const q = ev.target.value.trim().toLowerCase()
+  for (const o of document.querySelectorAll('.repomore .opt')) o.hidden = !!q && !o.dataset.search.includes(q)
+})
+document.addEventListener('keydown', (ev) => {
+  if ((ev.key === 'Enter' || ev.key === ' ') && ev.target.classList && ev.target.classList.contains('mcard')) { ev.preventDefault(); ev.target.click(); return }
+  const m = document.querySelector('.repomore[open]')
+  if (!m) return
+  if (ev.key === 'Escape') { m.open = false; return }
+  if (ev.key === 'Enter' && ev.target.classList.contains('morefilter')) {
+    ev.preventDefault()
+    const first = [...m.querySelectorAll('.opt')].find((o) => !o.hidden)
+    if (first) first.click()
+  }
+})
+document.addEventListener('pointerdown', (ev) => {
+  const m = document.querySelector('.repomore[open]')
+  if (m && !m.contains(ev.target)) m.open = false
+})
+api('GET', '/v1/config').then((c) => (state.cfg = c)).catch(() => {})
+refreshHealth().then(render)
+connect()
+
+// The home-screen app's service worker (v0.4.6): it only serves an offline page
+// when the Mac can't be reached; it caches no API data and no board pages.
+if ('serviceWorker' in navigator && window.isSecureContext) navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {})