@leftoff/cli 0.8.0 → 0.8.3

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 { wantsSetupBanner } 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,59 @@ 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 || {}
+  if (wantsSetupBanner({ viewer: v, ua: navigator.userAgent, maxTouchPoints: navigator.maxTouchPoints || 0, dismissed: setupDismissed() })) {
+    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 +282,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 +436,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 +454,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 +490,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 +511,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 +521,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 +550,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 +639,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 +886,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
@@ -1582,6 +1698,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 +1853,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 +1930,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 +1959,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 +2162,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 +2173,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 +2190,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 +2205,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 +2276,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 +2568,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) {
@@ -2868,6 +2989,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 +3124,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 +3374,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]')

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))

package/ui/repos.js

@@ -21,11 +21,27 @@ export function repoKeyOf(s) {
 // Short labels: the folder name, and for folder names that collide, as many
 // parent folders as it takes to tell them apart ("colorGenie/expo" vs
 // "food_fight/expo"). keys -> Map(key -> label).
-export function labelRepos(keys) {
+// 0.8.3: `names` (Map key -> name) is what a repo is called when that's not
+// its folder (its origin remote's name); two repos with one name fall back to
+// their folders. "/" and a bare home folder are "No repo", never "/" or an
+// account name.
+export const NO_REPO_LABEL = 'No repo'
+export function isNoRepoDir(p, home = null) {
+  const s = String(p || '').replace(/\/+$/, '')
+  if (!s || s === '~' || p === '/' || /^[A-Za-z]:\\?$/.test(s)) return true
+  if (home && s === String(home).replace(/\/+$/, '')) return true
+  return /^\/(Users|home)\/[^/]+$/.test(s) || s === '/root' || s === '/var/root'
+}
+export function labelRepos(keys, { names = null } = {}) {
   const uniq = [...new Set([...keys].filter(Boolean))]
   const depth = new Map(uniq.map((k) => [k, 1]))
+  const nameOf = (k) => (names && names.get(k)) || null
+  const named = new Map()
+  for (const k of uniq) { const n = nameOf(k); if (n) named.set(n, (named.get(n) || 0) + 1) }
   const label = (k) => {
-    if (k === 'no-repo') return 'no repo'
+    if (k === 'no-repo' || isNoRepoDir(k)) return NO_REPO_LABEL
+    const n = nameOf(k)
+    if (n && named.get(n) === 1 && depth.get(k) === 1 && !uniq.some((o) => o !== k && !nameOf(o) && baseOf(o) === n)) return n
     const s = segments(k)
     return s.length ? s.slice(-Math.min(depth.get(k), s.length)).join('/') : k
   }
@@ -168,6 +184,12 @@ export function inStatus(s, status) {
 
 // Which chips show in the row and which go behind "More ▾": the top `max` by
 // recent activity, plus any selected one that would otherwise be hidden.
+// 0.8.3: chosen chips first, in the order chosen, then the rest as they were.
+export function orderSelectedFirst(chips, selected = []) {
+  if (!selected || !selected.length) return chips
+  const sel = chips.filter((c) => chipSelected(selected, c))
+  return [...sel, ...chips.filter((c) => !sel.includes(c))]
+}
 export function splitChips(chips, selected = [], max = 8) {
   if (chips.length <= max) return { shown: chips, more: [] }
   const isSel = (c) => chipSelected(selected, c)

package/ui/viewer.js

@@ -0,0 +1,19 @@
+// 0.8.3: who's looking at the board. The daemon says whether the request came
+// from another computer (a tailnet or LAN name, the relay); the browser tells
+// a phone or tablet from a desktop by its user agent. Plain functions, no DOM.
+
+// Phones and tablets (an iPad asking for the desktop site says "Macintosh"
+// but has a touch screen: maxTouchPoints > 1).
+export function isPhoneUa(ua, { maxTouchPoints = 0 } = {}) {
+  const u = String(ua || '')
+  if (/iPhone|iPod|Android.*Mobile|Mobile Safari|Windows Phone|BlackBerry|Opera Mini|IEMobile/i.test(u)) return true
+  if (/iPad|Android(?!.*Mobile)|Tablet|Silk/i.test(u)) return true
+  if (/Macintosh/.test(u) && maxTouchPoints > 1) return true
+  return false
+}
+
+// "Set up this Mac too": only a desktop browser on another computer, until dismissed.
+export function wantsSetupBanner({ viewer, ua, maxTouchPoints = 0, dismissed = false } = {}) {
+  if (!viewer || !viewer.remote || !viewer.setup || dismissed) return false
+  return !isPhoneUa(ua, { maxTouchPoints })
+}