@leftoff/cli 0.6.3 → 0.6.8

package/ui/app.js

@@ -4,12 +4,12 @@ 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 { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches } from './repos.js'
+import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
 const $app = document.getElementById('app')
-const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true }
+const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
 const agentNames = () => [...new Set(((state.health && state.health.agents) || []).map((a) => a.display || a.name))]
 
@@ -74,10 +74,25 @@ function clock(iso) { return iso ? new Date(iso).toLocaleString(undefined, { mon
 function toast(msg, ms = 2600) {
   const t = document.getElementById('toast')
   t.textContent = msg
+  t.classList.remove('has-action')
   t.classList.add('show')
   clearTimeout(toast.t)
   toast.t = setTimeout(() => t.classList.remove('show'), ms)
 }
+// A toast with an Undo button (0.6.5, dismissing a need): about 5 s.
+function toastUndo(msg, onUndo, ms = 5000) {
+  const t = document.getElementById('toast')
+  t.innerHTML = ''
+  const span = document.createElement('span')
+  span.textContent = msg
+  const b = document.createElement('button')
+  b.type = 'button'; b.className = 'toast-undo'; b.textContent = 'Undo'
+  b.onclick = () => { t.classList.remove('show', 'has-action'); clearTimeout(toast.t); onUndo() }
+  t.append(span, b)
+  t.classList.add('show', 'has-action')
+  clearTimeout(toast.t)
+  toast.t = setTimeout(() => t.classList.remove('show', 'has-action'), ms)
+}
 async function copy(text) {
   try { await navigator.clipboard.writeText(text); toast('Copied: ' + text) } catch { prompt('Copy this:', text) }
 }
@@ -127,7 +142,16 @@ function where(s) {
   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>' : '')
+    (multi() || !s.isLocal ? '<span class="chip machine' + (s.isLocal ? '' : ' remote') + '" title="' + (s.isLocal ? 'this machine' : 'synced from another machine') + '">⌂ ' + esc(s.machine) + '</span>' : '') + modelChip(s)
+}
+
+// 0.6.8: a session that ran through Ollama (or another server) says so on its card.
+function modelChip(s) {
+  if (!s || !s.backend || !s.modelLabel) return ''
+  // the model name gives way first; "· Ollama" always shows
+  const i = s.modelLabel.lastIndexOf(' · ')
+  const inner = i > 0 ? '<span class="m">' + esc(s.modelLabel.slice(0, i)) + '</span><span class="via">· ' + esc(s.modelLabel.slice(i + 3)) + '</span>' : '<span class="m">' + esc(s.modelLabel) + '</span>'
+  return '<span class="chip model" title="' + esc((s.backend.kind === 'ollama' ? 'Runs through Ollama: ' : 'Runs on another server: ') + s.modelLabel) + '">' + inner + '</span>'
 }
 
 // Notices above the board: things that need the user's hand, from /v1/health.
@@ -291,6 +315,7 @@ const FILTERS = {
   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'] },
+  closed: { label: 'Closed', cls: 's-closed', statuses: ['ended'] },
 }
 
 // The board's filter: hash first, then the last repo choice from this browser.
@@ -345,9 +370,10 @@ function chipBar(chips, selected, allCount, emptyNote) {
 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) : ''))
+  const { sessions, viewer, closedCount } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
   state.sessions = sessions
   state.viewerLocal = viewer ? viewer.local !== false : true
+  state.ghostty = viewer ? viewer.ghostty === true : false
   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)
@@ -376,8 +402,8 @@ async function viewBoard() {
   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)
+  const count = (k) => k === 'closed' ? (closedCount == null ? '—' : closedCount) : inRepos.filter((s) => inStatus(s, k)).length
+  const list = filter === 'closed' ? [] : 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)'])] }) : '') +
@@ -390,6 +416,11 @@ async function viewBoard() {
   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)
+  if (filter === 'closed') {
+    html += await closedSection(f, sp)
+    $app.innerHTML = banners() + html
+    return closedWire()
+  }
   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>'
@@ -402,6 +433,115 @@ async function viewBoard() {
   }
   html += emptyFold(applyFilter(sp ? empties.filter((s) => s.space === sp) : empties, { repos: f.repos }))
   $app.innerHTML = banners() + html
+  revealStat()
+}
+
+// Closed (0.6.7): every ended session on every machine, newest first, with
+// a search box and Show more. Each card has its last checkpoint and Resume,
+// which reopens it in a new Ghostty tab (claude --resume) on the Mac that owns it.
+const CLOSED_PAGE = 30
+const closedUi = { q: '', limit: CLOSED_PAGE, data: null, seq: 0, timer: null, busy: new Set() }
+function closedQuery(f, sp) {
+  const qs = new URLSearchParams({ limit: String(closedUi.limit) })
+  if (closedUi.q.trim()) qs.set('q', closedUi.q.trim())
+  if (state.machine) qs.set('machine', state.machine)
+  if (f.repos.length) qs.set('repo', f.repos.join(','))
+  if (sp) qs.set('space', sp)
+  return '/v1/sessions/closed?' + qs
+}
+async function closedFetch(f, sp) {
+  const seq = ++closedUi.seq
+  const r = await api('GET', closedQuery(f, sp))
+  if (seq === closedUi.seq) closedUi.data = r
+  return closedUi.data
+}
+async function closedSection(f, sp) {
+  const r = await closedFetch(f, sp)
+  return chipBar(r.repos.map((c) => ({ ...c, count: c.total })), f.repos, r.total, 'nothing closed yet') +
+    '<div class="closed-head"><div class="set-search closed-search">' + icon('search') + '<input id="closedQ" type="search" placeholder="Search closed sessions" aria-label="Search closed sessions" autocomplete="off" autocapitalize="off" spellcheck="false" value="' + esc(closedUi.q) + '"></div></div>' +
+    '<div id="closedList">' + closedListHtml(r, f, sp) + '</div>'
+}
+function closedListHtml(r, f, sp) {
+  if (!r.sessions.length) {
+    const inWhat = (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')
+    return '<div class="empty mt">' + (closedUi.q.trim() ? 'No closed sessions match “' + esc(closedUi.q.trim()) + '”' + esc(inWhat) + '.' : 'No closed sessions' + esc(inWhat) + ' yet.') +
+      (f.repos.length || sp || closedUi.q ? ' <button type="button" class="linkish" data-action="closed-clear">Clear</button>' : '') + '</div>'
+  }
+  return '<div class="grid mt closed-grid">' + r.sessions.map((s) => closedCard(s, r.viewer || {})).join('') + '</div>' +
+    (r.more ? '<div class="closed-more"><button type="button" class="btn" data-action="closed-more">Show more <span class="faint">· ' + (r.total - r.sessions.length) + ' older</span></button></div>' : '<div class="closed-end faint">' + r.total + ' closed session' + (r.total === 1 ? '' : 's') + '</div>')
+}
+// Resume is a button only where it can run: a Mac's own browser, with Ghostty,
+// for a session this Mac owns or one another Mac will open for it. Elsewhere
+// (a phone, a remote browser) Copy resume is the way.
+function resumeButton(s, viewer = {}) {
+  if (s.agent || !s.cwd) return ''
+  if (viewer.local === false || state.viewerLocal === false) return ''
+  const busy = closedUi.busy.has(s.id)
+  if (s.isLocal) {
+    if (!viewer.ghostty) return ''
+    return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="Open it in a new Ghostty tab: claude --resume">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume') + '</button>'
+  }
+  if (!(s.peer && s.peer.ok)) return '' // that Mac can't be reached from here: Copy resume
+  return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc('Open it in a new Ghostty tab on ' + s.machine) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume on ' + esc(s.machine)) + '</button>'
+}
+function closedCard(s, viewer) {
+  const href = '#/s/' + encodeURIComponent(s.id)
+  const branch = s.repo && s.repo.branch
+  const label = s.repoLabel || s.repoName || 'no repo'
+  return '<article class="card ended is-closed closed-card" data-id="' + esc(s.id) + '" data-href="' + esc(href) + '">' +
+    '<div class="row1"><div class="title"><a href="' + href + '">' + esc(s.title || 'Untitled session') + '</a></div><span class="pill s-closed">closed</span></div>' +
+    '<div class="meta">' + (s.space && s.space !== s.machine ? spaceChip(s) : '') +
+      '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' +
+      '<span class="chip machine' + (s.isLocal ? '' : ' remote') + '" title="' + (s.isLocal ? 'this machine' : 'another machine') + '">⌂ ' + esc(s.machine) + '</span>' + modelChip(s) +
+      '<span title="' + esc(clock(s.endedAt)) + '">ended ' + esc(ago(s.endedAt)) + '</span><span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + '</span></div>' +
+    cpBlock(s.latestCheckpoint, { showWhen: false }) +
+    '<div class="actions-row">' + resumeButton(s, viewer) +
+      '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' +
+      '<a class="btn" href="' + href + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Details') + ' →</a>' +
+    '</div></article>'
+}
+function closedRepaint() {
+  const el = document.getElementById('closedList')
+  if (!el || !closedUi.data) return
+  const f = state.boardFilter || { repos: [] }
+  el.innerHTML = closedListHtml(closedUi.data, f, state.boardSpace)
+}
+// On a phone the status counts are one row that scrolls: bring the picked one into view.
+function revealStat() {
+  const on = document.querySelector('.stats .stat.on'), row = on && on.parentElement
+  if (row && row.scrollWidth > row.clientWidth) row.scrollLeft = Math.max(0, on.offsetLeft - row.offsetLeft - (row.clientWidth - on.offsetWidth) / 2)
+}
+function closedWire() {
+  revealStat()
+  const q = document.getElementById('closedQ')
+  if (!q) return
+  q.addEventListener('input', () => {
+    closedUi.q = q.value
+    closedUi.limit = CLOSED_PAGE
+    clearTimeout(closedUi.timer)
+    closedUi.timer = setTimeout(async () => {
+      try { await closedFetch(state.boardFilter || { repos: [] }, state.boardSpace); closedRepaint() } catch (e) { toast(e.message, 5000) }
+    }, 180)
+  })
+  q.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && q.value) { ev.preventDefault(); q.value = ''; q.dispatchEvent(new Event('input')) } })
+}
+// Resume, from a closed card or a session page. -> true when it opened.
+async function resumeOpen(btn, id) {
+  if (closedUi.busy.has(id)) return false
+  closedUi.busy.add(id)
+  const idle = btn.innerHTML
+  btn.disabled = true; btn.textContent = 'Opening…'
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/resume', {}, { timeoutMs: 60000 })
+    toast(r.peer ? 'Resumed on ' + r.peer + ' in a new Ghostty tab' : 'Resumed in a new Ghostty tab')
+    return true
+  } catch (e) {
+    toast(e.message, 6000)
+    return false
+  } finally {
+    closedUi.busy.delete(id)
+    if (btn.isConnected) { btn.disabled = false; btn.innerHTML = idle }
+  }
 }
 
 // The folded row of empty sessions (v0.4.8), closed by default.
@@ -436,7 +576,7 @@ function restoreBanner() {
   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('')
+    '<span class="rs-main"><span class="rs-t">' + esc(s.title || '(untitled)') + '</span><span class="rs-m">' + esc([s.repoLabel, s.branch, s.modelLabel, s.lastAliveAt ? 'last seen ' + ago(s.lastAliveAt) : null, 'cp:' + (s.shortId || s.id.slice(0, 8))].filter(Boolean).join(' · ')) + '</span>' + (s.blocked ? '<span class="rs-m err">' + esc(s.error) + '</span>' : '') + '</span></label>').join('')
   return '<div class="banner info restore open" id="restoreBanner" role="region" aria-label="Restore sessions"><div class="rs-head"><span class="grow">' + head + '. Each opens in a new Ghostty tab, in its folder, with <code>claude --resume</code> and its name.</span>' +
     '<button type="button" class="btn x" data-action="restore-close" aria-label="Close" title="Close">✕</button></div>' +
     '<div class="rs-list">' + rows + '</div>' +
@@ -484,7 +624,13 @@ async function viewWaiting() {
       (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>'
+  html += dismissedHtml(needs.dismissed || [], { open: !!state.dismissedOpen, agoFn: ago })
   $app.innerHTML = banners() + html
+  // Open/closed survives live repaints (0.6.5).
+  const dz = $app.querySelector('details.dismissed')
+  if (dz) dz.addEventListener('toggle', () => { state.dismissedOpen = dz.open })
+  const rc = $app.querySelector('details.recent')
+  if (rc) rc.addEventListener('toggle', () => { state.recentOpen = rc.open })
 }
 
 // The nav's count, the page title and the favicon dot: visible from a background tab.
@@ -507,7 +653,7 @@ function paintNeedsCount(n) {
 
 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 }
+  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, expanded: state.needOpen, turns: state.needTurns, 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
@@ -591,10 +737,10 @@ async function viewSession(id) {
   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>'
+    '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (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('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id) +
     fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown') +
     fact('Terminal', (s.terminal ? s.terminal.label : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
   html += spacePicker(s, spv, 'session', s.id)
@@ -615,7 +761,7 @@ async function viewSession(id) {
   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>' +
+    (cp.generator && cp.generator.by ? '<span>· ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') + '</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>' : '') +
@@ -634,7 +780,7 @@ function spacePicker(s, spv, kind, 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>' }
+function fact(k, v, cls) { return '<div class="fact' + (cls ? ' ' + cls : '') + '"><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
@@ -1019,7 +1165,7 @@ function syncProviderFields() {
     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.'
+      'Saved in ' + esc(k.file || '.secret/') + ' on this Mac, never config.json.'
   }
 }
 
@@ -1102,9 +1248,12 @@ function summariesSection(c) {
     '<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>'
+    '<div class="hint"><code>/cp --short</code> or <code>/cp --long</code> overrides it once.</div>'
+}
+function lengthExampleHtml(c) {
+  const cur = (c.summary && c.summary.length) || 'informative'
+  return '<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 it on your latest session</button> <span class="faint">(nothing is saved)</span></div>'
 }
 async function tryLength() {
   const k = ((document.querySelector('input[name="f-length"]:checked') || {}).value) || 'informative'
@@ -1116,7 +1265,7 @@ async function tryLength() {
   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>' +
+    box.innerHTML = '<div class="ex-head">Your session · ' + esc(s.title || 'Untitled') + ' <span class="faint">' + esc(k) + (cp.generator && cp.generator.by ? ' · by ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') : '') + ' · not saved</span></div>' +
       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) }
 }
@@ -1153,9 +1302,11 @@ function remoteSection(r) {
       : '<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) {
+    // A trusted remote browser may sign in another phone too (0.6.6, Trust my paired devices).
+    const trusted = !!(state.cfg && state.cfg.remote && state.cfg.remote.allowAnswers)
+    if (local || trusted) {
       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>' +
+        (n && local ? '<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>' +
@@ -1191,7 +1342,7 @@ function signupBlock(r, su, local) {
 
 // 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) {
+function anywhereSection(r, adv = []) {
   if (!r) return ''
   const v = r.viewer || {}
   const local = !!v.local
@@ -1199,27 +1350,33 @@ function anywhereSection(r) {
   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>'
+    '<div class="full hint">Your board at <b>' + esc(r.host || 'yourname.leftoff.dev') + '</b> from any browser, end-to-end encrypted. <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>' +
+  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>'
+  // The name: up top until there is one, then Advanced (0.6.6).
+  const nameRow = '<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>'
+    '<div class="hint">' + (r.user ? 'Your other Macs join when you switch this on there.' : 'Claimed one on another Mac? Type it here and switch this on.') + '</div>'
+  if (r.user) adv.push(nameRow); else h += nameRow
   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>' +
+    // Pairing from a paired phone follows Trust my paired devices (0.6.6).
+    const mayPair = v.mayPair != null ? !!v.mayPair : local
+    if (mayPair) 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>'
+    else h += '<label>Pair a phone</label><div class="hint nomt" id="pairUntrusted">Turn on <a href="#/settings/security">Trust my paired devices</a> on a Mac to pair from here.</div>'
   }
+  const mayRevoke = v.mayRevoke != null ? !!v.mayRevoke : local
   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('')
+    (mayRevoke ? '<button type="button" class="btn sm danger" data-action="relay-revoke" data-device="' + esc(d.id) + '" data-name="' + esc(d.name) + '"' + (v.device === d.id ? ' data-self="1"' : '') + '>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>'
+    '<div class="hint">' + (local ? 'Revoking works at once, from any paired device.' : 'Revoking works at once, this browser included.') + '</div>'
   return h
 }
 function fmtAgo(iso) {
@@ -1249,7 +1406,7 @@ function paintRelayPair(l) {
   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="faint gap">Or type this code at ' + esc(l.link.split('#')[0]) + ':</div><div class="joinline"><div class="code-big long" aria-label="Pairing code">' + esc(l.code) + '</div><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(l.code) + '">Copy code</button></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 = () => {
@@ -1271,9 +1428,10 @@ function answeringSection(r, relay) {
   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>'
+  return '<label for="f-remote-answers">Paired devices</label><label class="check"><input id="f-remote-answers" type="checkbox"' + (allow ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Trust my paired devices</span></label>' +
+    '<div class="hint">On: your phone and other paired browsers can answer prompts and pair new devices. Off: they can look, not touch.</div>' +
+    '<div class="warnbox"><b>Think first.</b> A trusted device can approve what Claude runs here, including deleting files or pushing code.' +
+    (local ? '' : ' Change this on a Mac.') + '</div>'
 }
 
 // The sign-in box under "Show QR code" / "Get a code": the QR image, the link,
@@ -1317,11 +1475,11 @@ function digestSettings(c) {
   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 +
+    '<div class="hint">' + (dg.time ? 'Next one: ' + esc(dg.nextAt ? clock(dg.nextAt) : '—') + '. ' : '') + 'Clear it to turn 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, ' ')])] })
+    advanced('digest', '<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
@@ -1396,6 +1554,12 @@ function settingsFilter() {
   }
   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')
+  // A match under Advanced opens it; clearing the search folds it back (unless you opened it).
+  for (const d of wrap.querySelectorAll('details.set-adv')) {
+    const inside = q && [...d.querySelectorAll('.set-advbody label, .set-advbody .section, .set-advbody .sp-sub')].some((el) => el.textContent.toLowerCase().includes(q))
+    if (inside && !d.open) { d.dataset.auto = '1'; d.open = true }
+    else if (!inside && d.dataset.auto) { delete d.dataset.auto; d.open = !!settingsUi.adv[d.dataset.adv] }
+  }
   const none = wrap.querySelector('.set-nomatch')
   none.hidden = !!first
   none.textContent = first ? '' : 'Nothing in Settings matches “' + settingsUi.q.trim() + '”.'
@@ -1424,9 +1588,46 @@ function showSettingsSection(r) {
   if (!wideSettings() || wrap.getBoundingClientRect().top < 0) window.scrollTo(0, 0)
 }
 
+// Settings → General → PR cards (0.6.5): is GitHub's gh installed and signed
+// in on this Mac, and the one-line fix to copy. Nothing installs from here.
+const GH_LABEL = { missing: 'Missing', 'signed-out': 'Signed out', ready: 'Ready' }
+function ghSection(g) {
+  let h = '<label>PR cards</label>'
+  if (!g || !g.status) return h + '<div class="hint">Couldn’t check for gh on this Mac.</div>'
+  const ok = g.status === 'ready'
+  h += '<div class="ghcell"><div class="ghrow"><span class="chip ' + (ok ? 'ok' : 'warn') + '">' + esc(GH_LABEL[g.status] || g.status) + '</span>' +
+    '<span class="ghwhat">' + (ok ? 'gh is signed in' + (g.account ? ' as <b>' + esc(g.account) + '</b>' : '') + '. Cards that need you show the branch’s pull request.' : g.status === 'signed-out' ? 'gh is installed but not signed in to GitHub.' : 'GitHub’s gh isn’t installed on this Mac.') + '</span>' +
+    '<button type="button" class="linkish" data-action="gh-check">Check again</button></div>'
+  if (g.fix && g.fix.cmd) h += '<div class="joinline ghfix"><code class="cmd">' + esc(g.fix.cmd) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(g.fix.cmd) + '">Copy</button></div>'
+  h += '</div>'
+  if (!ok) h += '<div class="hint">' + (g.fix && g.fix.url ? 'Optional. Install gh from <a href="' + esc(g.fix.url) + '" target="_blank" rel="noopener">cli.github.com</a>, then run this.' : 'Optional. Run this in Terminal on this Mac.') + '</div>'
+  return h
+}
+
+// Advanced (0.6.6): each section shows what people change up top; the rest
+// folds under one closed Advanced per section. Same form, same Save; the
+// search opens a fold when something inside matches; opening one sticks.
+settingsUi.adv = settingsUi.adv || {}
+function advanced(key, html) {
+  if (!html) return ''
+  return '<details class="set-adv" data-adv="' + key + '"' + (settingsUi.adv[key] ? ' open' : '') + '><summary>Advanced</summary><div class="set-advbody">' + html + '</div></details>'
+}
+// Phone & remote: Use from anywhere up top; Tailscale under Advanced unless it's
+// the only way in (remote access on, the relay off).
+function phonePane(relay, remote, unavailable) {
+  const adv = []
+  const any = anywhereSection(relay, adv)
+  const ts = remoteSection(remote) || unavailable('Couldn’t read remote access from Leftoff.')
+  const tsOnly = !!(remote && remote.enabled) && !(relay && relay.enabled)
+  if (!any) return ts
+  if (tsOnly) return any + advanced('phone', adv.join('')) + '<div class="section">Over Tailscale</div>' + ts
+  return any + advanced('phone', adv.join('') + '<div class="section">Over Tailscale</div>' + ts)
+}
+
 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)])
+  const [c, , remote, sync, peers, st, , , relay, gh] = 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), api('GET', '/v1/gh').catch(() => null)])
   state.relay = relay
+  state.gh = gh
   syncUi.data = sync; syncUi.peers = peers; if (st) stUi.data = st
   state.cfg = c
   const sm = c.summarizer || {}
@@ -1435,16 +1636,16 @@ async function viewSettings() {
   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>' +
+    general: '<div class="section">Needs you</div>' +
+      '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a notification when a prompt or question has waited ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
+      '<div class="hint">With <code>terminal-notifier</code>, a click jumps to the session.</div>' +
       '<div class="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>',
+      '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>' +
+      advanced('general', '<label for="f-dormant">Dormant after (min)</label><input id="f-dormant" type="number" min="1" step="1" value="' + esc(c.dormantAfterMin) + '">' +
+        '<div class="hint">No activity this long, and the session 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.</div>' +
+        '<div id="ghBox" class="ghbox">' + ghSection(gh) + '</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.'),
@@ -1457,21 +1658,22 @@ async function viewSettings() {
       '<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>' +
+      summariesSection(c) +
+      advanced('models', lengthExampleHtml(c)),
+    phone: phonePane(relay, remote, unavailable),
+    security: '<div class="section" id="answering">Other devices</div>' + (answeringSection(remote, relay) ||
+        '<div class="full hint">Nothing reaches this board from elsewhere until <a href="#/settings/phone">Phone &amp; remote</a> is on.</div>') +
+      // a changed machine key needs a click here, so Other machines stays up top then
+      (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? machinesSection(peers) : '') +
+      advanced('security', (peers && (peers.peers || []).some((x) => x.trust === 'key_changed') ? '' : machinesSection(peers)) +
+        '<div class="section">Your data</div>' +
+        '<div class="full hint">Plain Markdown and JSON in your Leftoff folder; keys stay on each Mac. <a href="' + SECURITY_URL + '" target="_blank" rel="noopener">Security notes ↗</a></div>'),
+    updates: '<div class="section">About</div>' +
       '<label>Version</label><div class="aboutline"><span class="chip mono">v' + esc(h.version || '') + '</span><a href="#/whats-new">What’s new</a><a href="' + 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>',
+      '<div class="hint">' + updateLine() + ' <button type="button" class="linkish" data-action="check-updates">Check now</button></div>' +
+      advanced('updates', '<label for="f-updates">Check daily</label><label class="check"><input id="f-updates" type="checkbox"' + (!(c.updates && c.updates.check === false) ? ' checked' : '') + '><span>Look for a new version daily. Nothing installs on its own.</span></label>' +
+        '<label>Machine</label><div><span class="chip machine">⌂ ' + esc(c.machineResolved) + '</span></div>' +
+        '<label>Folder</label><div><a class="chip mono" href="file://' + esc(c.folder) + '">' + esc(c.folder) + '</a></div>'),
   }
   const r = state.route || parseRoute()
   $app.innerHTML = '<div class="settings no-sec" id="settingsWrap">' +
@@ -1498,6 +1700,14 @@ async function viewSettings() {
     document.getElementById('f-model').value = same ? (c.summarizer.model || '') : ''
     syncProviderFields()
   })
+  // Opening or closing Advanced by hand sticks across redraws (the search's own opening doesn't).
+  document.getElementById('settingsWrap').addEventListener('toggle', (ev) => {
+    const d = ev.target
+    if (!d.classList || !d.classList.contains('set-adv')) return
+    if (d.dataset.auto && d.open) return
+    delete d.dataset.auto
+    settingsUi.adv[d.dataset.adv] = d.open
+  }, true)
   const f = document.getElementById('setFilter')
   f.addEventListener('input', () => { settingsUi.q = f.value; settingsFilter() })
   f.addEventListener('keydown', (ev) => {
@@ -2449,9 +2659,16 @@ document.addEventListener('click', async (ev) => {
   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)
+  const s = state.sessions.find((x) => x.id === id) || (closedUi.data && closedUi.data.sessions.find((x) => x.id === id))
   try {
     if (action === 'copy-cmd') { await copy(btn.dataset.cmd); return }
+    if (action === 'gh-check') {
+      btn.disabled = true
+      try { state.gh = await api('GET', '/v1/gh?fresh=1') } catch { state.gh = null }
+      const box = document.getElementById('ghBox')
+      if (box) box.innerHTML = ghSection(state.gh)
+      return
+    }
     // Use from anywhere (v0.6.0)
     if (action === 'relay-toggle') {
       const on = btn.checked
@@ -2460,6 +2677,7 @@ document.addEventListener('click', async (ev) => {
       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)
+      refreshHealth().catch(() => {})
       return render()
     }
     if (action === 'relay-user') {
@@ -2480,8 +2698,11 @@ document.addEventListener('click', async (ev) => {
     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 self = btn.dataset.self === '1'
+      if (!confirm(self ? 'Revoke this browser? It stops working at once and needs pairing again.' : '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')
+      // Revoked itself (0.6.6): the same screen a revoked browser gets.
+      if ((self || r.self) && window.leftoffRelay && window.leftoffRelay.unpaired) return window.leftoffRelay.unpaired()
       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 }
@@ -2525,7 +2746,7 @@ document.addEventListener('click', async (ev) => {
     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')
+      const l = await api('POST', '/v1/remote/link', action === 'remote-link' ? { full: true } : undefined)
       if (l.needed === false) { toast('No sign-in needed (remoteRequireToken is off)'); return }
       paintSignin(l); return
     }
@@ -2684,7 +2905,19 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
+    if (action === 'quick-reply') return quickReplyClick(btn)
+    if (action === 'need-more') return needMoreClick(btn)
+    if (action === 'need-dismiss') return needDismissClick(btn)
+    if (action === 'need-restore' || action === 'need-restore-all') {
+      btn.disabled = true
+      state.dismissedOpen = true
+      try { await api('POST', '/v1/needs/restore', action === 'need-restore-all' ? { all: true } : { key: btn.dataset.need }); toast(action === 'need-restore-all' ? 'Restored' : 'Restored to Needs you') } catch (e) { toast(e.message, 5000); btn.disabled = false; return }
+      return render()
+    }
     if (action === 'go') return goClick(btn, id, s)
+    if (action === 'resume-open') return resumeOpen(btn, btn.dataset.id || id)
+    if (action === 'closed-more') { closedUi.limit += CLOSED_PAGE; btn.disabled = true; try { await closedFetch(state.boardFilter || { repos: [] }, state.boardSpace); closedRepaint() } catch (e) { toast(e.message, 5000) } return }
+    if (action === 'closed-clear') { closedUi.q = ''; closedUi.limit = CLOSED_PAGE; state.boardSpace = null; saveSpace(null); return setBoardFilter({ repos: [], status: 'closed' }) }
     if (action && action.startsWith('st-')) return stAction(action, btn)
     if (action && action.startsWith('sync-') || action === 'peer-trust') return syncAction(action, btn)
     if (action === 'resume') {
@@ -2784,6 +3017,65 @@ async function replyClick(btn) {
   } catch (e) { toast(e.message, 4200) } finally { render() }
 }
 
+// A quick reply (0.6.4): the chip's words go in the answer box and are sent
+// by its own button, exactly as if typed: same request, same checks.
+function quickReplyClick(btn) {
+  const need = btn.closest('.need')
+  if (!need) return
+  const text = btn.dataset.text || ''
+  const box = need.querySelector('.reply-text') || need.querySelector('.qother')
+  const send = need.querySelector('[data-action="reply-send"]') || need.querySelector('[data-action="ask-answer"][data-choice="answer"]')
+  if (!box || !send || send.disabled) return
+  box.value = text
+  if (box.dataset.draft) state.drafts[box.dataset.draft] = text
+  need.querySelectorAll('.quick-replies .qr').forEach((b) => { b.disabled = true; b.classList.toggle('on', b === btn) })
+  return send.dataset.action === 'reply-send' ? replyClick(send) : answerClick(send, 'ask-answer')
+}
+
+// "Show more" on a Needs-you card (0.6.4): the session's last ~20 turns,
+// fetched when opened (through the relay when that's how the board is open).
+async function needMoreClick(btn) {
+  const id = btn.dataset.id
+  const panels = () => document.querySelectorAll('.need[data-id="' + (window.CSS && CSS.escape ? CSS.escape(id) : id) + '"] .need-ctx')
+  const paint = () => panels().forEach((ctx) => {
+    const open = !!state.needOpen[id]
+    const b = ctx.querySelector('.need-more')
+    if (b) { b.textContent = open ? 'Show less' : 'Show more'; b.setAttribute('aria-expanded', String(open)) }
+    let box = ctx.querySelector('.need-turns')
+    const t = state.needTurns[id]
+    // Open, the turns replace the three lines (the last turn ends with them).
+    ctx.classList.toggle('open', open && !!t && !t.error)
+    if (!open) { if (box) box.remove(); return }
+    if (!box) { box = document.createElement('div'); box.className = 'need-turns'; ctx.appendChild(box) }
+    box.innerHTML = !t ? '<div class="need-note">Loading the last turns…</div>' : t.error ? '<div class="need-note warn">' + esc(t.error) + '</div>' : turnsHtml(t.turns, { need: needsItems(state.sessions).find((n) => n.session && n.session.id === id) })
+  })
+  if (state.needOpen[id]) { delete state.needOpen[id]; return paint() }
+  state.needOpen[id] = true
+  if (!state.needTurns[id] || state.needTurns[id].error) delete state.needTurns[id]
+  paint()
+  try {
+    const r = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/turns?limit=20')
+    state.needTurns[id] = { turns: r.turns || [], at: Date.now() }
+  } catch (e) { state.needTurns[id] = { error: 'Couldn’t load this session’s turns: ' + e.message } }
+  paint()
+}
+
+// Dismiss a need (0.6.5): gone from every card and count at once, kept on
+// the daemon (so your other devices and the relay see it too), Undo for 5 s.
+async function needDismissClick(btn) {
+  const key = btn.dataset.need
+  if (!key) return
+  const cards = [...document.querySelectorAll('.need[data-need="' + (window.CSS && CSS.escape ? CSS.escape(key) : key) + '"]')]
+  cards.forEach((c) => { c.hidden = true })
+  for (const s of state.sessions || []) if (s.needsYou && s.needsYou.key === key) s.needsYou = null
+  try { await api('POST', '/v1/needs/dismiss', { key }) } catch (e) { cards.forEach((c) => { c.hidden = false }); toast('Couldn’t dismiss it: ' + e.message, 5000); return }
+  toastUndo('Dismissed', async () => {
+    try { await api('POST', '/v1/needs/restore', { key }) } catch (e) { toast(e.message, 5000) }
+    render(); refreshHealth().catch(() => {})
+  })
+  render(); refreshHealth().catch(() => {})
+}
+
 // Go: "Switching…" at once, a note if it's slow, the result (with timings when slow) after.
 function goClick(btn, id, s) {
   return goWithFeedback({
@@ -2843,7 +3135,7 @@ document.addEventListener('submit', async (ev) => {
         ...(() => {
           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 {} }
+          if (el.checked && !confirm('Trust your paired devices? They could approve commands on this machine and pair new devices.')) { el.checked = false; return {} }
           return { remote: { allowAnswers: el.checked } }
         })(),
       })