@leftoff/cli 0.8.0 → 0.8.5

package/ui/app.js

@@ -4,11 +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 { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches } from './repos.js'
+import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches, orderSelectedFirst } 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'
-import { cardPrsHtml, sessionPrsSection, prsPageHtml } from './prs.js'
+import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
+import { wantsSetupBanner, setupCandidate, localLeftoffAnswers } from './viewer.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref } from './handoffs.js'
 const $app = document.getElementById('app')
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
@@ -158,7 +159,7 @@ 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>' + wtChips(s) +
-    (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)
+    (multi() || !s.isLocal ? (() => { const sn = s.isLocal ? '' : staleNote(s.machine); return '<span class="chip machine' + (s.isLocal ? '' : ' remote') + (sn ? ' stale' : '') + '" title="' + (s.isLocal ? 'this machine' : sn ? 'showing data as of ' + esc(sn.replace(/^as of /, '')) + ': ' + esc(s.machine) + ' hasn’t synced since' : 'synced from another machine') + '">⌂ ' + esc(s.machine) + (sn ? ' · ' + esc(sn) : '') + '</span>' })() : '') + modelChip(s)
 }
 
 // 0.6.8: a session that ran through Ollama (or another server) says so on its card.
@@ -187,6 +188,7 @@ function banners() {
       (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>'
   }
+  out += syncBanners(h)
   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) : '') + ': ' +
@@ -195,6 +197,65 @@ function banners() {
   return out
 }
 
+
+// 0.8.3: a low disk on this Mac (before Syncthing stops), sync that has
+// actually stopped somewhere (a Needs-style notice), and "Set up this Mac too"
+// for a desktop browser on another computer.
+function syncBanners(h) {
+  let out = ''
+  const sy = h.sync || {}
+  const d = sy.disk
+  const stopped = (sy.items || []).filter((i) => i.level === 'red' && /stopped|full/i.test(i.text))
+  if (stopped.length) {
+    const mine = d && d.level === 'red'
+    out += '<div class="banner needs-style sync-stopped" role="alert"><div class="grow">' + stopped.map((i) => '<div><b>' + esc(i.text) + '</b>' + (i.fix ? '<div class="fixline">fix: ' + esc(i.fix) + '</div>' : '') + '</div>').join('') + '</div>' + (mine && d.fix && d.fix.cmd ? '<button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(d.fix.cmd) + '">Copy</button>' : '') + '</div>'
+  }
+  if (d && d.level === 'warn') {
+    out += '<div class="banner warn lowdisk" role="status"><div class="grow"><b>' + esc(d.text) + '</b><div class="fixline">fix: ' + esc(d.fix.text) + '</div></div>' + (d.fix.cmd ? '<button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(d.fix.cmd) + '" title="' + esc(d.fix.cmd) + '">Copy</button>' : '') + '</div>'
+  }
+  const v = h.viewer || {}
+  const who = { viewer: v, ua: navigator.userAgent, maxTouchPoints: navigator.maxTouchPoints || 0, dismissed: setupDismissed() }
+  // Ask this computer's own Leftoff once; the banner waits for the answer.
+  if (setupCandidate(who) && state.localHere === undefined) {
+    state.localHere = null
+    localLeftoffAnswers().then((here) => { state.localHere = here; if (!here) render() })
+  }
+  if (wantsSetupBanner({ ...who, here: state.localHere })) {
+    const su = v.setup
+    out += '<div class="banner info setup-mac" role="status"><div class="grow">This board is running on <b>' + esc(su.machine || 'another Mac') + '</b>. To track sessions on this computer too, run:<div class="joinline"><code class="cmd">' + esc(su.command) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(su.command) + '">Copy</button></div></div>' +
+      '<button type="button" class="btn x" data-action="dismiss-setup" aria-label="Dismiss" title="Dismiss">✕</button></div>'
+  }
+  return out
+}
+const SETUP_KEY = 'lo.setupDismissed'
+function setupDismissed() { try { return window.localStorage.getItem(SETUP_KEY) === '1' } catch { return false } }
+
+// The board's sync chip: quiet when all's well, amber or red when Syncthing
+// reports an error, a disk runs low, or another Mac has been away 15+ min.
+function syncChip() {
+  const sy = (state.health && state.health.sync) || null
+  if (!sy || sy.level === 'ok' || !(sy.items || []).length) return ''
+  return '<button type="button" class="chip syncchip ' + esc(sy.level) + '" data-action="sync-details" aria-expanded="' + !!state.syncOpen + '" title="Sync status · tap for details">' + '<span class="sdot" aria-hidden="true"></span>' + esc(sy.label) + '</button>'
+}
+function syncDetails() {
+  const sy = (state.health && state.health.sync) || null
+  if (!state.syncOpen || !sy || !(sy.items || []).length) return ''
+  return '<div class="syncdetails" role="region" aria-label="Sync details">' + sy.items.map((i) => '<div class="syncitem ' + esc(i.level) + '"><div><b>' + esc(i.text) + '</b></div>' + (i.fix ? '<div class="fixline">fix: ' + esc(i.fix) + '</div>' : '') + (i.cmd ? '<div class="joinline"><code class="cmd">' + esc(i.cmd) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(i.cmd) + '">Copy</button></div>' : '') + '</div>').join('') +
+    '<div class="hint">More in <a href="#/settings/sync">Settings → Sync</a> or <code>leftoff doctor</code>.</div></div>'
+}
+// Another Mac whose data is stale: "showing data as of N min ago".
+function staleLine(sessions) {
+  const st = state.health && state.health.sync && state.health.sync.stale
+  if (!st) return ''
+  const ms = [...new Set(sessions.filter((x) => !x.isLocal && x.machine in st).map((x) => x.machine))]
+  return ms.length ? '<div class="stale-line faint">' + ms.map((m) => esc(m) + ': showing data as of ' + esc(st[m] ? ago(st[m]) : 'its last sync')).join(' · ') + '</div>' : ''
+}
+function staleNote(machine) {
+  const st = state.health && state.health.sync && state.health.sync.stale
+  if (!st || !machine || !(machine in st)) return ''
+  return st[machine] ? 'as of ' + ago(st[machine]) : 'not synced yet'
+}
+
 function updateLine() {
   const h = state.health || {}
   const u = h.update || {}
@@ -227,6 +288,16 @@ async function viewWhatsNew() {
   }
 }
 
+// A doc from the installed package (0.8.1): #/docs/security, read through
+// GET /v1/docs/<name> (also from a phone, through the relay) and shown with the
+// viewer's escaped Markdown.
+async function viewDocPage(name) {
+  const d = await api('GET', '/v1/docs/' + encodeURIComponent(name))
+  $app.innerHTML = '<div class="pagehead"><div><h1>' + esc(d.title || name) + '</h1><div class="sub"><a href="#/settings/' + (/^agent-feed/.test(name) ? 'agents' : 'security') + '">← Settings</a></div></div></div>' +
+    '<div class="doc-page">' + docViewerBody(d) + '</div>'
+  window.scrollTo(0, 0)
+}
+
 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>' : '') +
@@ -371,8 +442,11 @@ 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 })
+  // 0.8.3: a chosen repo always shows, first in the row, removable (✕), even
+  // with nothing in this view: a filter is never active out of sight.
+  chips = orderSelectedFirst(chips, selected)
   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 chip = (c) => { const on = chipSelected(selected, c); return '<button type="button" class="rchip' + (on ? ' on' : '') + (c.count ? '' : ' zero') + '" data-action="repo" data-repo="' + esc(c.label) + '" data-key="' + esc(c.key) + '" title="' + esc((c.missing ? emptyNote + ' · ' : '') + (on ? 'tap to remove this filter · ' : '') + c.key + ' · shift- or ⌘-click to pick several') + '" aria-pressed="' + on + '"' + (on ? ' aria-label="' + esc('Remove filter ' + c.label) + '"' : '') + '><span class="rl">' + esc(c.label) + '</span><span class="rc">' + c.count + '</span>' + (on ? '<span class="rx" aria-hidden="true">✕</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) {
@@ -386,8 +460,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, closedCount, todoCount } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
-  state.sessions = sessions
+  const { sessions: all, viewer, closedCount, todoCount, parked = [] } = await api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : ''))
+  // 0.8.2: parked sessions have their own section (any age), not a status group
+  const sessions = all.filter((s) => !s.parked)
+  state.sessions = all.concat(parked.filter((p) => !all.some((s) => s.id === p.id)))
   state.viewerLocal = viewer ? viewer.local !== false : true
   state.ghostty = viewer ? viewer.ghostty === true : false
   state.mayAnswer = viewer ? viewer.mayAnswer !== false : true
@@ -420,11 +496,12 @@ async function viewBoard() {
   const inRepos = applyFilter(inSpace, { repos: f.repos })
   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>' +
+  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>' + syncChip() + '</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 += syncDetails() + staleLine(sessions)
   html += restoreBanner()
   // Needs you (v0.4.4): every session waiting on you, whatever the filters, longest wait first.
   const needs = needsItems(sessions)
@@ -440,7 +517,7 @@ async function viewBoard() {
     return closedWire()
   }
   html += repoRow(inSpace, f)
-  if (!shown.length && !empties.length) {
+  if (!shown.length && !empties.length && !parked.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 : '')
@@ -450,6 +527,7 @@ async function viewBoard() {
     html += '<div class="grid mt">' + list.map(card).join('') + '</div>'
   }
   html += emptyFold(applyFilter(sp ? empties.filter((s) => s.space === sp) : empties, { repos: f.repos }))
+  if (!filter) html += parkedSection(applyFilter(sp ? parked.filter((s) => s.space === sp) : parked, { repos: f.repos }), viewer || {})
   // 0.6.9: the Closed view was only a small stat tile; a quiet way in under the grid too.
   if (closedCount > 0) html += '<div class="closed-link"><button type="button" class="linkish" data-action="filter" data-filter="closed">Closed (' + esc(closedCount) + ') →</button></div>'
   $app.innerHTML = banners() + html
@@ -478,7 +556,7 @@ async function closedFetch(f, sp) {
 }
 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') +
+  return chipBar(r.repos.map((c) => ({ ...c, count: c.total })), f.repos, r.allTotal != null ? r.allTotal : 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>' +
       '<button type="button" class="chip docs-filter" data-action="closed-docs" aria-pressed="' + closedUi.docs + '" title="Only sessions that made docs, plans or artifacts">' + (closedUi.docs ? '✓ ' : '') + 'Docs &amp; artifacts</button></div>' +
     '<div id="closedList">' + closedListHtml(r, f, sp) + '</div>'
@@ -567,6 +645,49 @@ async function resumeOpen(btn, id) {
   }
 }
 
+// Parked (0.8.2): sessions you left meaning to come back to (/cp-park, or Park
+// on a session's page). Its own small section under the board, any age, not
+// counted in Needs you. Resume is the main button once it's closed; while
+// it's still open, Go. "Done with it" sends it to Closed.
+function parkedSection(list, viewer) {
+  if (!list.length) return ''
+  return '<section class="parked-sec mt" aria-label="Parked"><h2 class="parked-h">Parked <span class="count">' + list.length + '</span></h2>' +
+    '<div class="grid">' + list.map((s) => parkedCard(s, viewer)).join('') + '</div></section>'
+}
+function parkedCard(s, viewer) {
+  const href = '#/s/' + encodeURIComponent(s.id)
+  const branch = s.repo && s.repo.branch
+  const label = s.repoLabel || s.repoName || 'no repo'
+  const p = s.parked || {}
+  const open = s.status !== 'ended' && s.live !== 'closed'
+  const cp = s.latestCheckpoint
+  const note = p.note || (cp && cp.next) || ''
+  const main = open ? goButton(s) : resumeButton(s, viewer)
+  return '<article class="card is-parked parked-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-parked">parked</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>' + wtChips(s) +
+      (s.isLocal ? '' : '<span class="chip machine remote" title="another machine">⌂ ' + esc(s.machine) + '</span>') + modelChip(s) +
+      '<span title="' + esc(clock(p.at)) + '">parked ' + esc(ago(p.at)) + '</span>' + (open ? '<span>·</span><span>still open</span>' : '') + '</div>' +
+    (note ? '<div class="park-note"><span class="k">' + (p.note ? 'Note' : 'Next') + '</span> ' + esc(note) + '</div>' : '') +
+    '<div class="actions-row">' + main +
+      (open ? '' : '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>') +
+      '<button type="button" class="linkish park-done" data-action="unpark" data-id="' + esc(s.id) + '" title="No longer parked' + (open ? '' : '; it goes to Closed') + '">Done with it</button>' +
+    '</div></article>'
+}
+// The session page's Park row (0.8.2): any open session, Codex too, with an
+// optional note that becomes the checkpoint's Next line. Parked: the note and Done.
+function parkRow(s) {
+  if (s.agent) return ''
+  if (s.parked) return '<section class="park-row is-on" id="park"><div class="park-on"><span class="pill s-parked">parked</span> <span class="faint">' + esc(ago(s.parked.at)) + '</span>' + (s.parked.note ? ' <span class="park-note-inline">' + esc(s.parked.note) + '</span>' : '') + '</div>' +
+    '<button type="button" class="btn sm" data-action="unpark" data-id="' + esc(s.id) + '">Done with it</button></section>'
+  if (s.status === 'ended' || s.live === 'closed' || s.empty) return ''
+  return '<section class="park-row" id="park"><form class="park-form" data-park="' + esc(s.id) + '" autocomplete="off">' +
+    '<input type="text" name="note" maxlength="300" placeholder="Note for later (optional)" aria-label="Park note" enterkeyhint="done">' +
+    '<button type="submit" class="btn sm">Park</button></form>' +
+    '<div class="faint park-hint">Checkpoints it, and keeps it under Parked when it closes.' + (s.codingAgent === 'codex' ? '' : ' In the session: /cp-park [note]') + '</div></section>'
+}
+
 // The folded row of empty sessions (v0.4.8), closed by default.
 function emptyFold(list) {
   if (!list.length) return ''
@@ -771,6 +892,7 @@ async function viewSession(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.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || '')) + '</div>'
+  html += parkRow(s)
   html += spacePicker(s, spv, 'session', s.id)
   html += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent }) + '</section>'
   // 0.7.0: steps handed back to you, and the docs, plans and artifacts it made
@@ -817,30 +939,75 @@ function fact(k, v, cls) { return '<div class="fact' + (cls ? ' ' + cls : '') +
 // PRs (0.6.9): Mine (PRs linked to your sessions, grouped) and Team (every open
 // PR in the repos your sessions are in). The daemon fetches with gh (or asks
 // the Mac that has it) and caches ~5 min; while it loads we look again shortly.
-const prsUi = { fresh: false, polls: 0, timer: null, data: {} }
+const prsUi = { fresh: false, polls: 0, timer: null, data: {}, at: {}, open: new Set(), details: {}, quietOpen: false, view: 'mine', filter: {} }
+// 0.8.5: the filters live in the hash (linkable; back/forward work); a chip
+// tap repaints from what we have and reads again only when that is old.
+function prsOpts(view, filter) { return { view, mayEdit: true, sessionAction: prSessionAction, filter, open: prsUi.open, details: prsUi.details, quietOpen: prsUi.quietOpen } }
+function paintPrs(d) {
+  const q = document.getElementById('prs-q')
+  const focused = q && document.activeElement === q, caret = focused ? q.selectionStart : null
+  $app.innerHTML = banners() + prsPageHtml(d, prsOpts(prsUi.view, prsUi.filter))
+  if (focused) { const n = document.getElementById('prs-q'); if (n) { n.focus(); try { n.setSelectionRange(caret, caret) } catch {} } }
+}
+// Just the chips and the list (typing in the search box keeps its focus).
+function paintPrsBody() {
+  const el = document.getElementById('prs-body'), d = prsUi.data[prsUi.view]
+  if (el && d) el.innerHTML = prsBodyHtml(d, prsOpts(prsUi.view, prsUi.filter))
+}
 async function viewPrs() {
   const params = (state.route && state.route.params) || new URLSearchParams()
   let view = params.get('view')
   if (!view) { try { view = localStorage.getItem('leftoff.prsView') } catch {} }
   view = view === 'team' ? 'team' : 'mine'
-  const opts = { view, mayEdit: true, sessionAction: prSessionAction }
-  if (!prsUi.data[view]) $app.innerHTML = banners() + prsPageHtml(null, opts)
+  prsUi.view = view
+  prsUi.filter = readPrFilter(params)
+  const cached = prsUi.data[view]
+  paintPrs(cached || null)
   const fresh = prsUi.fresh; prsUi.fresh = false
+  if (cached && !fresh && !cached.loading && !cached.error && Date.now() - (prsUi.at[view] || 0) < 15000) return
   let d
   try { d = await api('GET', '/v1/prs?view=' + view + (fresh ? '&fresh=1' : ''), undefined, { timeoutMs: 30000 }) }
   catch (e) { if (e.code === 'login_required') throw e; d = { error: 'Couldn’t load PRs: ' + e.message } }
   if (!(state.route && state.route.name === 'prs')) return
-  if (d && d.groups) {
+  if (d && (d.rows || d.groups)) {
     // Go / Resume on a row look the session up like a card does.
-    for (const g of d.groups) for (const r of g.rows || []) for (const x of r.sessions || []) if (!state.sessions.some((y) => y.id === x.id)) state.sessions.push(x)
+    for (const r of prRows(d)) for (const x of r.sessions || []) if (!state.sessions.some((y) => y.id === x.id)) state.sessions.push(x)
     d.multiMachine = new Set(state.sessions.map((x) => x.machine).filter(Boolean)).size > 1
   }
   prsUi.data[view] = d
-  $app.innerHTML = banners() + prsPageHtml(d, opts)
+  prsUi.at[view] = Date.now()
+  if (prsUi.view === view) paintPrs(d)
   clearTimeout(prsUi.timer)
-  if (d && d.loading && prsUi.polls < 6) { prsUi.polls++; prsUi.timer = setTimeout(() => { if (state.route && state.route.name === 'prs') render() }, 2500) }
+  if (d && d.loading && prsUi.polls < 6) { prsUi.polls++; prsUi.timer = setTimeout(() => { if (state.route && state.route.name === 'prs') { prsUi.at[view] = 0; render() } }, 2500) }
   else if (!(d && d.loading)) prsUi.polls = 0
 }
+// Tap a PR: it opens in place; its details load once (cached ~5 min by the
+// daemon that has gh, a little here too).
+async function togglePr(url, { retry = false } = {}) {
+  if (!url) return
+  const was = prsUi.open.has(url)
+  if (was && !retry) prsUi.open.delete(url); else prsUi.open.add(url)
+  const repaint = () => {
+    const d = prsUi.data[prsUi.view]
+    const r = prRows(d).find((x) => x.pr.url === url)
+    const el = [...document.querySelectorAll('article.prrow[data-pr]')].find((a) => a.dataset.pr === url)
+    if (el && r) el.outerHTML = prRowHtml(r, { ...prsOpts(prsUi.view, prsUi.filter), team: prsUi.view === 'team', now: Date.now(), showMachine: !!d.multiMachine, open: prsUi.open.has(url), detail: prsUi.details[url] })
+  }
+  const have = prsUi.details[url]
+  if (!prsUi.open.has(url) || (have && !retry && (have.loading || (have.ok && Date.now() - have.at < 60000)))) return repaint()
+  prsUi.details[url] = { loading: true }
+  repaint()
+  let res
+  try { res = await api('GET', '/v1/prs/detail?url=' + encodeURIComponent(url) + (retry ? '&fresh=1' : ''), undefined, { timeoutMs: 30000 }) }
+  catch (e) { if (e.code === 'login_required') throw e; res = { ok: false, code: 'failed' } }
+  prsUi.details[url] = { ...res, at: Date.now() }
+  if (state.route && state.route.name === 'prs') repaint()
+}
+function setPrsFilter(f) {
+  const h = prsHash(prsUi.view, f)
+  if (location.hash !== h) location.hash = h
+}
+
 function prSessionAction(s) {
   if (s.live === 'closed' || s.status === 'ended') {
     const b = resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty })
@@ -1582,6 +1749,8 @@ function settingsDots() {
     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 sy = state.health && state.health.sync
+  if (sy && sy.level !== 'ok' && (sy.items || []).length) add('sync', 'warn', sy.items[0].text) // 0.8.3: low disk, a stop, a quiet Mac
   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
@@ -1735,9 +1904,9 @@ async function viewSettings() {
       (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>'),
+        '<div class="full hint">Plain Markdown and JSON in your Leftoff folder; keys stay on each Mac. <a href="' + SECURITY_URL + '">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>Version</label><div class="aboutline"><span class="chip mono">v' + esc(h.version || '') + '</span><a href="#/whats-new">What’s new</a><a href="' + NPM_URL + '" target="_blank" rel="noopener">npm ↗</a></div>' +
       '<div class="hint">' + updateLine() + ' <button type="button" class="linkish" data-action="check-updates">Check now</button></div>' +
       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>' +
@@ -1812,8 +1981,10 @@ function syncSection(d, st) {
 
 // ------------------------------------------------------------ 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'
+// 0.8.1: the repo is private, so About links to the public npm page and the
+// docs open in the board, served from the installed package (src/docs.js).
+const NPM_URL = 'https://www.npmjs.com/package/@leftoff/cli'
+const AGENT_HOSTING_URL = '#/docs/agent-feed-hosting'
 const agentUi = { data: null, err: null, busy: false }
 function agentStatusLine(a) {
   const st = a.status || {}
@@ -1839,7 +2010,7 @@ function agentsSectionHtml() {
   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>'
+    ' <a class="agent-howto" href="' + AGENT_HOSTING_URL + '">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>' +
@@ -2042,7 +2213,7 @@ async function syncAction(action, btn) {
 // 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 SECURITY_URL = '#/docs/security'
 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.'],
@@ -2053,7 +2224,7 @@ const PROTECT = {
 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>'
+    '<a href="' + SECURITY_URL + '">The full security notes</a></details>'
 }
 
 const stUi = { data: null, panel: null, pair: null, joinCode: '', path: '', timer: null, busy: false, error: null, showLog: false }
@@ -2070,7 +2241,7 @@ function stSection(d) {
 
 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>'
+  if (!d.running) return '<span class="chip warn">installed · not running</span>' + (d.fixes && d.fixes.notRunning ? '<span class="fixline">fix: ' + esc(d.fixes.notRunning) + '</span>' : '')
   const f = d.folder
   let h = '<span class="chip ok">' + icon('check') + 'running' + (d.version ? ' · ' + esc(d.version) : '') + '</span>'
   if (f) {
@@ -2085,7 +2256,7 @@ 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>'
+    (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>') + (!p.connected && !p.notSharing && d.fixes && d.fixes.peers && d.fixes.peers[p.name] ? '<div class="fixline">fix: ' + esc(d.fixes.peers[p.name]) + '</div>' : '') + '</div>').join('') + '</div>'
 }
 
 // A Mac that knocked during a pairing without the proof (never auto-accepted).
@@ -2156,7 +2327,7 @@ function stBoxHtml(d) {
   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>'
+  ;((d.folder && d.folder.errors) || []).forEach((e, i) => { const fx = d.fixes && d.fixes.errors && d.fixes.errors[i]; h += '<div class="warnbox">' + esc((e.path ? e.path + ': ' : '') + e.error) + (fx ? '<div class="fixline">fix: ' + esc(fx) + '</div>' : '') + '</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)
@@ -2448,6 +2619,7 @@ async function render() {
     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 === 'docs' && r.arg) await viewDocPage(r.arg)
     else if (r.name === 'search') await viewSearch(r.q || '')
     else await viewBoard()
   } catch (e) {
@@ -2719,6 +2891,25 @@ document.addEventListener('click', (ev) => {
   location.hash = c.dataset.href
 })
 
+// 0.8.5: a tap anywhere on a PR row (not a link or button) opens it in place.
+document.addEventListener('click', (ev) => {
+  const row = ev.target.closest('article.prrow[data-pr]')
+  if (!row || ev.defaultPrevented || ev.target.closest('a, button, input, textarea, label, summary, details.pd-body, [data-action]')) return
+  if (String(window.getSelection && window.getSelection()).trim()) return
+  togglePr(row.dataset.pr)
+})
+document.addEventListener('toggle', (ev) => { if (ev.target && ev.target.matches && ev.target.matches('details.prgroup.quiet')) prsUi.quietOpen = ev.target.open }, true)
+let prsQTimer = null
+document.addEventListener('input', (ev) => {
+  if (ev.target.id !== 'prs-q') return
+  prsUi.filter = { ...prsUi.filter, q: ev.target.value }
+  paintPrsBody()
+  // The link follows without a history entry per keystroke.
+  clearTimeout(prsQTimer)
+  prsQTimer = setTimeout(() => { const h = prsHash(prsUi.view, prsUi.filter); if (location.hash !== h) history.replaceState(null, '', h) }, 250)
+})
+document.addEventListener('keydown', (ev) => { if (ev.target.id === 'prs-q' && ev.key === 'Escape' && ev.target.value) { ev.preventDefault(); ev.target.value = ''; ev.target.dispatchEvent(new Event('input', { bubbles: true })) } })
+
 document.addEventListener('click', async (ev) => {
   const btn = ev.target.closest('[data-action]')
   if (!btn) return
@@ -2732,7 +2923,17 @@ document.addEventListener('click', async (ev) => {
   try {
     if (action === 'copy-cmd') { await copy(btn.dataset.cmd); return }
     // PRs (0.6.9)
-    if (action === 'prs-view') { const v = btn.dataset.view === 'team' ? 'team' : 'mine'; try { localStorage.setItem('leftoff.prsView', v) } catch {} location.hash = v === 'team' ? '#/prs?view=team' : '#/prs'; return }
+    if (action === 'prs-view') { const v = btn.dataset.view === 'team' ? 'team' : 'mine'; try { localStorage.setItem('leftoff.prsView', v) } catch {} location.hash = prsHash(v, prsUi.filter); return }
+    // 0.8.5: filters (in the hash), expand a PR in place, the Quiet group
+    if (action === 'prs-filter') {
+      const f = { ...prsUi.filter }, k = btn.dataset.k, v = btn.dataset.v || ''
+      if (k === 'repo') f.repos = v ? toggleRepo(f.repos || [], { key: btn.dataset.key || v, label: v }, ev.shiftKey || ev.metaKey || ev.ctrlKey) : []
+      else if (k === 'state' || k === 'checks') f[k] = f[k] === v ? null : v
+      return setPrsFilter(f)
+    }
+    if (action === 'prs-clear') { const q = document.getElementById('prs-q'); if (q) q.value = ''; return setPrsFilter({}) }
+    if (action === 'pr-expand') return togglePr(btn.dataset.url)
+    if (action === 'pr-expand-retry') return togglePr(btn.dataset.url, { retry: true })
     if (action === 'prs-refresh') { btn.disabled = true; prsUi.fresh = true; return render() }
     if (action === 'pr-unlink') {
       btn.disabled = true
@@ -2868,6 +3069,8 @@ document.addEventListener('click', async (ev) => {
       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-setup') { try { window.localStorage.setItem(SETUP_KEY, '1') } catch {} return render() }
+    if (action === 'sync-details') { state.syncOpen = !state.syncOpen; 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') {
@@ -3001,7 +3204,12 @@ document.addEventListener('click', async (ev) => {
       return render()
     }
     if (action === 'go') return goClick(btn, id, s)
-    if (action === 'resume-open') return resumeOpen(btn, btn.dataset.id || id)
+    if (action === 'resume-open') { const ok = await resumeOpen(btn, btn.dataset.id || id); if (ok && btn.closest('.parked-card')) await render(); return ok }
+    if (action === 'unpark') {
+      btn.disabled = true
+      try { const r = await api('POST', '/v1/sessions/' + encodeURIComponent(btn.dataset.id || id) + '/park', { done: true }); toast(r.session && r.session.status === 'ended' ? 'Done with it · moved to Closed' : 'No longer parked') } catch (e) { toast(e.message, 5000); btn.disabled = false; return }
+      return render()
+    }
     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 }
     // 0.7.0: only sessions with docs, plans or artifacts
     if (action === 'closed-docs') { closedUi.docs = !closedUi.docs; closedUi.limit = CLOSED_PAGE; btn.setAttribute('aria-pressed', String(closedUi.docs)); btn.textContent = (closedUi.docs ? '✓ ' : '') + 'Docs & artifacts'; try { await closedFetch(state.boardFilter || { repos: [] }, state.boardSpace); closedRepaint() } catch (e) { toast(e.message, 5000) } return }
@@ -3246,6 +3454,14 @@ document.addEventListener('submit', async (ev) => {
     try { await api('POST', '/v1/todos', { text, sessionId: sid }); input.value = ''; input.blur(); toast('Added to your to-dos'); await render() } catch (e) { toast(e.message, 5000) } finally { if (b) b.disabled = false }
     return
   }
+  if (ev.target.dataset && ev.target.dataset.park) {
+    ev.preventDefault()
+    const input = ev.target.querySelector('input[name=note]')
+    const note = input.value.trim()
+    const b = ev.target.querySelector('button'); if (b) { b.disabled = true; b.textContent = 'Parking…' }
+    try { const r = await api('POST', '/v1/sessions/' + encodeURIComponent(ev.target.dataset.park) + '/park', { note: note || null }, { timeoutMs: 90000 }); input.blur(); toast('Parked' + (r.checkpoint ? ' · Next: ' + r.checkpoint.next : ''), 6000); await render() } catch (e) { toast(e.message, 5000) } finally { if (b && b.isConnected) { b.disabled = false; b.textContent = 'Park' } }
+    return
+  }
   if (ev.target.dataset && ev.target.dataset.prLink) {
     ev.preventDefault()
     const input = ev.target.querySelector('input[name=ref]')
@@ -3320,6 +3536,7 @@ let stream = null
 function connect() {
   if (stream) { try { stream.close() } catch {} }
   const es = stream = new EventSource('/v1/stream')
+  es.addEventListener('prs.updated', () => { prsUi.at = {} }) // 0.8.5: the PR page reads again on its next paint
   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', 'prs.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 = {} })

package/ui/changelog-md.js

@@ -5,11 +5,14 @@
 //
 // Links: CHANGELOG.md ships inside the npm package and the repo is private,
 // so only an absolute https link becomes a real link (new tab). A relative
-// link (docs/relay.md, README.md#…) or any other scheme shows as its text.
+// link (docs/relay.md, README.md#…) or any other scheme shows as its text,
+// except a #/docs/<name> link to a doc the board itself serves (0.8.1).
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
 
 const httpsUrl = (u) => /^https:\/\/[^\s"'<>]+$/i.test(String(u || '').trim())
 const anchor = (href, inner) => '<a href="' + esc(href) + '" target="_blank" rel="noopener">' + inner + '</a>'
+// 0.8.1: a link to one of the docs the board serves (#/docs/security) opens in the board.
+const docLink = (u) => /^#\/docs\/[a-z-]+$/.test(String(u || '').trim())
 
 // One line of inline markdown -> HTML. Everything that isn't markup is escaped.
 export function mdInline(s, { links = true } = {}) {
@@ -23,7 +26,7 @@ export function mdInline(s, { links = true } = {}) {
   // [text](url "title"): a real link only for https; otherwise just the text.
   t = t.replace(/\[([^\]]+)\]\(\s*<?([^)\s>]*)>?(?:\s+"[^"]*")?\s*\)/g, (_, text, url) => {
     const inner = back(marks(text))
-    return hold(links && httpsUrl(url) ? anchor(url, inner) : inner)
+    return hold(links && httpsUrl(url) ? anchor(url, inner) : links && docLink(url) ? '<a href="' + esc(url.trim()) + '">' + inner + '</a>' : inner)
   })
   t = marks(t)
   if (links) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + anchor(url.replace(/&amp;/g, '&'), url))