@leftoff/cli 0.8.3 → 0.8.5

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/register.js

@@ -27,7 +27,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.8.3' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.8.5' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -1427,6 +1427,44 @@ a.cpr:hover { border-color: var(--line-strong); }
 .prlink input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
 .prs-gh { margin-top: 6px; }
 .prs-foot { font-size: 12px; margin-top: 6px; }
+/* 0.8.5: PR filters (search, repo chips, state/check chips), the why, Quiet, details on tap */
+.prs-search { margin: 0 0 4px; }
+.prs-q { width: 100%; max-width: 480px; font-size: 16px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
+.prs-chips { margin-top: 8px; }
+.prs-chips .rchip.ck .rl::before { content: '◇ '; color: var(--faint); }
+.pr-why { color: var(--muted); }
+.prrow { cursor: pointer; }
+.prrow.open { border-color: var(--line-strong); }
+.prrow a, .prrow button, .prrow .pr-detail { cursor: auto; }
+.prrow a, .prrow button { cursor: pointer; }
+.prgroup.quiet > summary { list-style: none; cursor: pointer; }
+.prgroup.quiet > summary::-webkit-details-marker { display: none; }
+.prgroup.quiet > summary h2 { color: var(--muted); }
+.prgroup.quiet > summary h2::before { content: '▸ '; }
+.prgroup.quiet[open] > summary h2::before { content: '▾ '; }
+.prgroup.quiet .qhint { font-weight: 400; font-size: 12px; }
+.pr-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 13px; cursor: auto; }
+.pr-detail.loading, .pr-detail.none { color: var(--muted); }
+.pd-h { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
+.pd-stats { text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 500; color: var(--muted); }
+.pd-add { color: var(--green); }
+.pd-del { color: var(--red); }
+.pd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.pd-checks li { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
+.pd-checks li a { color: var(--text); overflow-wrap: anywhere; }
+.pd-checks li.failed .pd-ic { color: var(--red); }
+.pd-checks li.pending .pd-ic { color: var(--yellow); }
+.pd-st { margin-left: auto; font-size: 12px; color: var(--muted); flex: none; }
+.pd-pass { color: var(--green); font-size: 12.5px; margin-top: 2px; }
+.pd-review { display: flex; flex-wrap: wrap; gap: 4px 10px; }
+.pd-text, .pd-clip { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text2); }
+.pd-body > summary { list-style: none; cursor: pointer; }
+.pd-body > summary::-webkit-details-marker { display: none; }
+.pd-body[open] > summary { display: none; }
+.pd-more { margin-left: 6px; }
+.pd-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.pd-who { font-size: 12px; font-weight: 600; }
+.pd-cbody { color: var(--text2); overflow-wrap: anywhere; }
 @media (max-width: 639.98px) {
   .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
   .prrow { flex-direction: column; gap: 8px; }

package/ui/app.js

@@ -8,8 +8,8 @@ import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, to
 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 { 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: {} }
@@ -214,7 +214,13 @@ function syncBanners(h) {
     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 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>'
@@ -933,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 })
@@ -2840,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
@@ -2853,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
@@ -3456,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/prs.js

@@ -2,6 +2,7 @@
 // loads /v1/prs and /v1/sessions/:id and paints with these. Sessions and PRs
 // are many-to-many; a row shows every session it is linked to.
 const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+import { repoChips, labelRepos, repoMatches, chipSelected, orderSelectedFirst } from './repos.js'
 const safeUrl = (u) => (/^https:\/\/github\.com\//.test(String(u || '')) ? String(u) : '')
 
 export function shortAgo(iso, now = Date.now()) {
@@ -54,14 +55,17 @@ export function sessionPrsSection(s, { mayEdit = true } = {}) {
       return '<div class="prrow slim"><div class="pr-main">' +
         '<div class="pr-line1"><span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + checksHtml(p.checks) + '</div>' +
         '<div class="pr-title">' + (url ? '<a href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">' + esc(p.title || 'Pull request #' + p.number) + ' ↗</a>' : esc(p.title || '')) + '</div>' +
-        '<div class="pr-meta">' + esc(p.repo || '') + (p.via ? ' · ' + esc(VIA[p.via] || p.via) : '') + '</div></div>' +
+        '<div class="pr-meta">' + esc(p.repo || '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + '</div></div>' +
         (mayEdit ? '<button type="button" class="btn sm" data-action="pr-unlink" data-id="' + esc(s.id) + '" data-url="' + esc(p.url) + '">Unlink</button>' : '') + '</div>'
     }).join('') + '</div>'
   } else h += '<div class="nocp">No pull requests linked yet. They link on their own from gh pr create, PR links in the chat, or the branch.</div>'
   if (mayEdit) h += '<form class="prlink" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false"><button type="submit" class="btn">Link</button></form>'
   return h
 }
-const VIA = { created: 'opened here', mentioned: 'mentioned', branch: 'this branch', manual: 'linked by hand' }
+// 0.8.5: why a PR is linked, in words (the daemon sends created / you / branch / manual).
+export const WHY = { created: 'created here', you: 'you mentioned it', branch: 'same branch', mentioned: 'same branch', manual: 'linked by you' }
+const WHY_ORDER = ['manual', 'created', 'you', 'branch', 'mentioned']
+export function whyText(r) { const v = r && (r.why || (Array.isArray(r.via) ? WHY_ORDER.find((k) => r.via.includes(k)) : r.via)); return v ? WHY[v] || '' : '' }
 
 // gh missing or signed out: the 0.6.5 status line with the fix to copy.
 export function ghLineHtml(g) {
@@ -83,27 +87,196 @@ function sessionLinks(r, opts) {
   }).join('') + (ss.length > 4 ? '<span class="faint">+' + (ss.length - 4) + '</span>' : '') + '</div>'
 }
 
-// One PR row on the PRs tab.
-export function prRowHtml(r, { team = false, now = Date.now(), mayEdit = true, sessionAction = null, showMachine = false } = {}) {
+// One PR row on the PRs tab. 0.8.5: tap the row to expand it in place
+// (`open`, with `detail` as /v1/prs/detail answered: { loading } | { ok, detail } | { ok: false, code }).
+export function prRowHtml(r, { team = false, now = Date.now(), mayEdit = true, sessionAction = null, showMachine = false, open = false, detail = null } = {}) {
   const p = r.pr || {}
   const url = safeUrl(p.url)
   const line1 = '<span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + checksHtml(p.checks) +
-    (r.attention && r.attention !== 'Checks failing' ? '<span class="pr-att">' + esc(r.attention) + '</span>' : p.review && REVIEW[p.review] ? '<span class="pr-review ' + esc(p.review) + '">' + REVIEW[p.review] + '</span>' : '')
+    (r.attention && r.attention !== 'Checks failing' ? '<span class="pr-att">' + esc(r.attention) + '</span>' : p.review && REVIEW[p.review] && (p.state === 'open' || p.state === 'draft') ? '<span class="pr-review ' + esc(p.review) + '">' + REVIEW[p.review] + '</span>' : '')
+  const when = p.state === 'merged' && p.mergedAt ? 'merged ' + shortAgo(p.mergedAt, now) + ' ago' : p.updatedAt ? 'updated ' + shortAgo(p.updatedAt, now) + ' ago' : ''
   const meta = team
-    ? [p.author ? '@' + p.author : '', p.createdAt ? 'opened ' + shortAgo(p.createdAt, now) + ' ago' : '', p.branch || ''].filter(Boolean)
-    : [p.repo, p.branch, p.state === 'merged' && p.mergedAt ? 'merged ' + shortAgo(p.mergedAt, now) + ' ago' : p.updatedAt ? 'updated ' + shortAgo(p.updatedAt, now) + ' ago' : ''].filter(Boolean)
+    ? [p.repo, p.author ? '@' + p.author : '', p.branch || '', when].filter(Boolean)
+    : [p.repo, p.branch, when].filter(Boolean)
+  const why = whyText(r)
   const unlinkTo = !team && mayEdit && (r.sessions || []).length === 1 ? r.sessions[0] : null
-  return '<article class="prrow" data-pr="' + esc(p.url) + '"><div class="pr-main">' +
+  return '<article class="prrow' + (open ? ' open' : '') + '" data-pr="' + esc(p.url) + '"><div class="pr-main">' +
     '<div class="pr-line1">' + line1 + '</div>' +
     '<div class="pr-title">' + (url ? '<a href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">' + esc(p.title || '') + '</a>' : esc(p.title || '')) + '</div>' +
-    '<div class="pr-meta">' + meta.map(esc).join(' · ') + '</div>' +
-    sessionLinks(r, { sessionAction, showMachine }) + '</div>' +
-    '<div class="pr-actions">' + (url ? '<a class="btn sm" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">GitHub ↗</a>' : '') +
+    '<div class="pr-meta">' + meta.map(esc).join(' · ') + (why ? ' · <span class="pr-why">' + esc(why) + '</span>' : '') + '</div>' +
+    sessionLinks(r, { sessionAction, showMachine }) + (open ? prDetailHtml(p, detail, { now }) : '') + '</div>' +
+    '<div class="pr-actions">' + '<button type="button" class="btn sm pr-toggle" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + open + '">' + (open ? 'Less ▴' : 'Details ▾') + '</button>' +
+    (url ? '<a class="btn sm" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">GitHub ↗</a>' : '') +
     (unlinkTo ? '<button type="button" class="btn sm" data-action="pr-unlink" data-id="' + esc(unlinkTo.id) + '" data-url="' + esc(p.url) + '" title="Unlink from this session">Unlink</button>' : '') + '</div></article>'
 }
 
-// The whole tab: Mine / Team switch, the gh line, groups.
-export function prsPageHtml(d, { view = 'mine', now = Date.now(), mayEdit = true, sessionAction = null } = {}) {
+// ---------------------------------------------------------------- 0.8.5: details on tap
+
+const REVIEW_STATE = { approved: 'approved', changes_requested: 'requested changes', commented: 'commented' }
+const anyUrl = (u) => (/^https:\/\/[^\s"'<>]+$/.test(String(u || '')) ? String(u) : '')
+// Markdown-lite: paragraphs and list lines as plain text, links and code marks dropped to their words.
+export function plainBody(md) {
+  return String(md || '').replace(/<!--[\s\S]*?-->/g, '').replace(/!\[[^\]]*\]\([^)]*\)/g, '').replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/<\/?[a-z][^>]*>/gi, '').replace(/^#{1,6}\s+/gm, '').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/`([^`]+)`/g, '$1')
+    .replace(/^[ \t]*[-*][ \t]+\[x\][ \t]+/gim, '☑ ').replace(/^[ \t]*[-*][ \t]+\[ \][ \t]+/gm, '☐ ').replace(/^[ \t]*[-*][ \t]+/gm, '• ').replace(/\n{3,}/g, '\n\n').trim()
+}
+export function prDetailHtml(p, st, { now = Date.now() } = {}) {
+  if (!st || st.loading) return '<div class="pr-detail loading" aria-busy="true">Loading details…</div>'
+  if (!st.ok) return '<div class="pr-detail none">' + (st.code === 'no_gh' ? 'Details need gh on a Mac (none of yours has it signed in).' : 'Couldn’t load the details right now. <button type="button" class="linkish" data-action="pr-expand-retry" data-url="' + esc(p.url) + '">Try again</button>') + '</div>'
+  const d = st.detail || {}
+  let h = '<div class="pr-detail">'
+  const bad = (d.checkList || []).filter((c) => c.state !== 'passed')
+  const passed = (d.checkList || []).length - bad.length
+  if ((d.checkList || []).length) {
+    h += '<div class="pd-sec"><div class="pd-h">Checks</div>' + (bad.length ? '<ul class="pd-checks">' + bad.map((c) => {
+      const u = anyUrl(c.url)
+      const name = esc(c.name) + (c.workflow ? '<span class="faint"> · ' + esc(c.workflow) + '</span>' : '')
+      return '<li class="' + esc(c.state) + '"><span class="pd-ic" aria-hidden="true">' + (c.state === 'failed' ? '✕' : '◌') + '</span>' + (u ? '<a href="' + esc(u) + '" target="_blank" rel="noopener noreferrer">' + name + ' ↗</a>' : name) + '<span class="pd-st">' + (c.state === 'failed' ? 'failed' : 'running') + '</span></li>'
+    }).join('') + '</ul>' : '') + (passed ? '<div class="pd-pass">✓ ' + passed + (bad.length ? ' passed' : passed === 1 ? ' check passed' : ' checks passed') + '</div>' : '') + '</div>'
+  }
+  const rv = REVIEW[d.review] || (d.state === 'open' ? 'No review yet' : '')
+  const who = (d.reviews || []).map((r) => esc('@' + r.author) + ' ' + esc(REVIEW_STATE[r.state] || r.state))
+  if (rv || who.length || (d.reviewRequested || []).length) {
+    h += '<div class="pd-sec"><div class="pd-h">Review</div><div class="pd-review">' + (rv ? '<span class="pr-review ' + esc(d.review || '') + '">' + esc(rv) + '</span>' : '') +
+      (who.length ? '<span>' + who.join(', ') + '</span>' : '') +
+      ((d.reviewRequested || []).length ? '<span class="faint">waiting on ' + d.reviewRequested.map((x) => esc('@' + x)).join(', ') + '</span>' : '') + '</div></div>'
+  }
+  const stats = [d.changedFiles != null ? d.changedFiles + ' file' + (d.changedFiles === 1 ? '' : 's') : '', d.additions != null ? '<span class="pd-add">+' + d.additions + '</span>' : '', d.deletions != null ? '<span class="pd-del">−' + d.deletions + '</span>' : ''].filter(Boolean)
+  const body = plainBody(d.body)
+  h += '<div class="pd-sec"><div class="pd-h">Description' + (stats.length ? ' <span class="pd-stats">' + stats.join(' ') + '</span>' : '') + '</div>' +
+    (body ? (body.length > 280 || body.split('\n').length > 5 ? '<details class="pd-body"><summary><span class="pd-clip">' + esc(body.split('\n').slice(0, 4).join('\n').slice(0, 280)) + '…</span><span class="linkish pd-more">more</span></summary><div class="pd-text">' + esc(body) + '</div></details>' : '<div class="pd-text">' + esc(body) + '</div>') : '<div class="faint">No description.</div>') + '</div>'
+  if ((d.comments || []).length) {
+    h += '<div class="pd-sec"><div class="pd-h">Latest comments' + (d.commentCount > d.comments.length ? ' <span class="faint">' + d.comments.length + ' of ' + d.commentCount + '</span>' : '') + '</div><ul class="pd-comments">' + d.comments.map((c) => {
+      const first = String(c.body || '').split('\n').filter((x) => x.trim()).slice(0, 2).join(' ')
+      return '<li><div class="pd-who">' + esc(c.author ? '@' + c.author : 'someone') + (c.at ? '<span class="faint"> · ' + esc(shortAgo(c.at, now)) + (shortAgo(c.at, now) === 'now' ? '' : ' ago') + '</span>' : '') + '</div><div class="pd-cbody">' + esc(plainBody(first).slice(0, 220)) + '</div></li>'
+    }).join('') + '</ul></div>'
+  }
+  return h + '</div>'
+}
+
+// ---------------------------------------------------------------- 0.8.5: filters
+
+// The page's filter, from the hash (#/prs?view=team&repo=web&state=open&checks=failing&q=search).
+export const PR_STATES = [['attention', 'Needs attention'], ['open', 'Open'], ['draft', 'Draft'], ['merged', 'Merged'], ['closed', 'Closed']]
+export const PR_CHECKS = [['failing', 'Checks failing'], ['passing', 'Checks passing']]
+export const QUIET_DAYS = 14
+const splitList = (v) => String(v || '').split(',').map((x) => x.trim()).filter(Boolean)
+export function readPrFilter(params) {
+  const p = typeof params === 'string' ? new URLSearchParams(params.replace(/^.*\?/, '')) : (params || new URLSearchParams())
+  const state = p.get('state'), checks = p.get('checks')
+  return {
+    repos: [...new Set(p.getAll('repo').flatMap(splitList))],
+    state: PR_STATES.some(([k]) => k === state) ? state : null,
+    checks: PR_CHECKS.some(([k]) => k === checks) ? checks : null,
+    q: String(p.get('q') || '').slice(0, 200),
+  }
+}
+export function prsHash(view, f = {}) {
+  const parts = []
+  if (view === 'team') parts.push('view=team')
+  if (f.repos && f.repos.length) parts.push('repo=' + f.repos.map((r) => encodeURIComponent(r).replace(/%2F/gi, '/')).join(','))
+  if (f.state) parts.push('state=' + f.state)
+  if (f.checks) parts.push('checks=' + f.checks)
+  if (f.q && f.q.trim()) parts.push('q=' + encodeURIComponent(f.q.trim()))
+  return '#/prs' + (parts.length ? '?' + parts.join('&') : '')
+}
+export const prFilterActive = (f) => !!(f && ((f.repos && f.repos.length) || f.state || f.checks || (f.q && f.q.trim())))
+
+// Every row, flat: the daemon's `rows`, or an older daemon's groups.
+export function prRows(d) {
+  if (!d) return []
+  if (Array.isArray(d.rows)) return d.rows
+  const seen = new Set(), out = []
+  for (const g of d.groups || []) for (const r of g.rows || []) if (r && r.pr && !seen.has(r.pr.url)) { seen.add(r.pr.url); out.push(r) }
+  return out.sort((a, b) => String(b.pr.updatedAt || '').localeCompare(String(a.pr.updatedAt || '')))
+}
+const lastAt = (pr) => Math.max(Date.parse(pr.updatedAt || '') || 0, Date.parse(pr.mergedAt || '') || 0)
+export const isQuiet = (r, now = Date.now()) => { const t = lastAt(r.pr || {}); return !!t && now - t >= QUIET_DAYS * 864e5 }
+export function prStateOf(r) { return r.attention && (r.pr.state === 'open' || r.pr.state === 'draft') ? 'attention' : r.pr.state }
+export function inPrState(r, state) { return !state || (state === 'attention' ? !!r.attention && (r.pr.state === 'open' || r.pr.state === 'draft') : r.pr.state === state) }
+export function inPrChecks(r, checks) {
+  const c = r.pr.checks || {}
+  if (!checks) return true
+  return checks === 'failing' ? c.failed > 0 : c.total > 0 && !c.failed && !c.pending
+}
+export function inPrSearch(r, q) {
+  const words = String(q || '').toLowerCase().split(/\s+/).filter(Boolean)
+  if (!words.length) return true
+  const p = r.pr
+  const hay = [p.title, p.branch, p.repo, p.author ? '@' + p.author : '', '#' + p.number, String(p.number)].filter(Boolean).join(' ').toLowerCase()
+  return words.every((w) => hay.includes(w) || (w.startsWith('#') && String(p.number) === w.slice(1)))
+}
+// The repo chip a PR belongs to: its GitHub "owner/name", labelled by name.
+export function prRepoChips(rows, { countIn = null } = {}) {
+  return repoChips(rows.map((r) => ({ repoKey: r.pr.repo || 'no-repo', lastActivityAt: r.pr.updatedAt })), { countIn: countIn && countIn.map((r) => ({ repoKey: r.pr.repo || 'no-repo' })) })
+}
+export function inPrRepos(r, repos, labels = null) {
+  if (!repos || !repos.length) return true
+  const key = r.pr.repo || 'no-repo'
+  return repos.some((t) => repoMatches({ repoKey: key, repoLabel: labels ? labels.get(key) : null }, t))
+}
+export function filterPrRows(rows, f = {}, { skip = null } = {}) {
+  const labels = labelRepos(rows.map((r) => r.pr.repo || 'no-repo'))
+  return rows.filter((r) => (skip === 'repos' || inPrRepos(r, f.repos, labels)) && (skip === 'state' || inPrState(r, f.state)) && (skip === 'checks' || inPrChecks(r, f.checks)) && inPrSearch(r, f.q))
+}
+// Groups, newest first in each; anything with no activity for 14+ days in Quiet.
+export function groupPrRows(rows, { now = Date.now() } = {}) {
+  const g = Object.fromEntries(PR_STATES.map(([k]) => [k, []]))
+  const quiet = []
+  for (const r of rows) { if (isQuiet(r, now)) quiet.push(r); else (g[prStateOf(r)] || (g[prStateOf(r)] = [])).push(r) }
+  const by = (a, b) => lastAt(b.pr) - lastAt(a.pr)
+  const out = PR_STATES.map(([key, label]) => ({ key, label, rows: g[key].sort(by) })).filter((x) => x.rows.length)
+  return { groups: out, quiet: quiet.sort(by) }
+}
+
+function chipRow(label, chips, cls) {
+  return '<div class="repos prs-chips ' + cls + '" role="group" aria-label="' + esc(label) + '"><div class="track">' + chips.join('') + '</div></div>'
+}
+function fchip({ on, count, label, attrs, cls = '' }) {
+  return '<button type="button" class="rchip' + (cls ? ' ' + cls : '') + (on ? ' on' : '') + (count ? '' : ' zero') + '" ' + attrs + ' aria-pressed="' + on + '"' + (on && cls !== 'all' ? ' aria-label="' + esc('Remove filter ' + label) + '"' : '') + '><span class="rl">' + esc(label) + '</span><span class="rc">' + count + '</span>' + (on && cls !== 'all' ? '<span class="rx" aria-hidden="true">✕</span>' : '') + '</button>'
+}
+
+// The chip rows and the grouped list (repainted as you type in the search box).
+export function prsBodyHtml(d, { view = 'mine', now = Date.now(), mayEdit = true, sessionAction = null, filter = {}, open = null, details = null, quietOpen = false } = {}) {
+  const f = { repos: [], state: null, checks: null, q: '', ...filter }
+  const all = prRows(d)
+  let h = ''
+  if (all.length) {
+    // Repos: All, then by latest activity; a chosen one always shows, first and removable.
+    const repoCount = filterPrRows(all, f, { skip: 'repos' })
+    let chips = prRepoChips(all, { countIn: repoCount })
+    for (const tok of f.repos) if (!chips.some((c) => chipSelected([tok], c))) chips.push({ key: tok, label: tok, count: 0, total: 0, last: 0 })
+    chips = orderSelectedFirst(chips, f.repos)
+    if (chips.length > 1 || f.repos.length) {
+      h += chipRow('Filter by repo', [fchip({ on: !f.repos.length, count: repoCount.length, label: 'All', cls: 'all', attrs: 'data-action="prs-filter" data-k="repo" data-v=""' })]
+        .concat(chips.map((c) => fchip({ on: chipSelected(f.repos, c), count: c.count, label: c.label, attrs: 'data-action="prs-filter" data-k="repo" data-v="' + esc(c.label) + '" data-key="' + esc(c.key) + '" title="' + esc(c.key + ' · shift- or ⌘-click to pick several') + '"' }))), 'prs-repos')
+    }
+    const stCount = filterPrRows(all, f, { skip: 'state' }), ckCount = filterPrRows(all, f, { skip: 'checks' })
+    const sts = PR_STATES.map(([k, l]) => ({ k: 'state', v: k, l, n: stCount.filter((r) => inPrState(r, k)).length, on: f.state === k }))
+    const cks = PR_CHECKS.map(([k, l]) => ({ k: 'checks', v: k, l, n: ckCount.filter((r) => inPrChecks(r, k)).length, on: f.checks === k }))
+    const both = [...sts, ...cks]
+    const ordered = [...both.filter((x) => x.on), ...both.filter((x) => !x.on && (x.n || x.k === 'state'))]
+    h += chipRow('Filter by state and checks', ordered.map((x) => fchip({ on: x.on, count: x.n, label: x.l, cls: x.k === 'checks' ? 'ck' : '', attrs: 'data-action="prs-filter" data-k="' + x.k + '" data-v="' + x.v + '"' })), 'prs-states')
+  }
+  const rows = filterPrRows(all, f)
+  const { groups, quiet } = groupPrRows(rows, { now })
+  const showMachine = !!d.multiMachine
+  const rowOpts = (r) => ({ team: view === 'team', now, mayEdit, sessionAction, showMachine, open: !!(open && open.has(r.pr.url)), detail: details ? details[r.pr.url] : null })
+  if (!all.length) {
+    h += '<div class="empty">' + (d.loading ? 'Loading pull requests…' : view === 'team' ? (d.repos && d.repos.length ? 'No open PRs in ' + esc(d.repos.join(', ')) + '.' : 'None of your sessions are in a GitHub repo yet.') : 'No PRs linked to your sessions yet. They link on their own when a session runs gh pr create, works on a branch with an open PR, or you paste a PR’s link in it.') + '</div>'
+  } else if (!rows.length) {
+    h += '<div class="empty">No PRs match. <button type="button" class="linkish" data-action="prs-clear">Clear filters</button></div>'
+  } else {
+    for (const g of groups) h += '<section class="prgroup' + (g.key === 'attention' ? ' attention' : '') + '" data-group="' + g.key + '"><h2>' + esc(g.label) + ' <span class="count">' + g.rows.length + '</span></h2>' + g.rows.map((r) => prRowHtml(r, rowOpts(r))).join('') + '</section>'
+    if (quiet.length) h += '<details class="prgroup quiet" data-group="quiet"' + (quietOpen || !groups.length ? ' open' : '') + '><summary><h2>Quiet <span class="count">' + quiet.length + '</span> <span class="faint qhint">no activity for ' + QUIET_DAYS + '+ days</span></h2></summary>' + quiet.map((r) => prRowHtml(r, rowOpts(r))).join('') + '</details>'
+  }
+  if (view === 'team' && (d.failed || []).length) h += '<div class="hint">Couldn’t load ' + esc(d.failed.join(', ')) + ' right now.</div>'
+  return h
+}
+
+// The whole tab: Mine / Team switch, the search box, the filters, the list.
+export function prsPageHtml(d, opts = {}) {
+  const { view = 'mine', now = Date.now(), filter = {} } = opts
   let h = '<div class="pagehead"><div><h1>Pull requests</h1><div class="sub">' + (view === 'team' ? 'Every open PR in the repos you work in.' : 'PRs linked to your sessions.') + '</div></div></div>'
   h += '<div class="filters prs-filters"><div class="seg" role="group" aria-label="Whose PRs">' +
     [['mine', 'Mine'], ['team', 'Team']].map(([k, l]) => '<button type="button" data-action="prs-view" data-view="' + k + '" aria-pressed="' + (view === k) + '">' + l + '</button>').join('') +
@@ -111,17 +284,8 @@ export function prsPageHtml(d, { view = 'mine', now = Date.now(), mayEdit = true
   if (!d) return h + '<div class="empty">Loading pull requests…</div>'
   if (d.error) return h + '<div class="banner warn"><span>' + esc(d.error) + '</span></div>'
   if (d.gh && d.gh.status !== 'ready') return h + ghLineHtml(d.gh)
-  const groups = (d.groups || []).filter((g) => g.rows.length || (view === 'team' && g.failed))
-  const showMachine = !!d.multiMachine
-  if (!groups.length) {
-    h += '<div class="empty">' + (d.loading ? 'Loading pull requests…' : view === 'team' ? (d.repos && d.repos.length ? 'No open PRs in ' + esc(d.repos.join(', ')) + '.' : 'None of your sessions are in a GitHub repo yet.') : 'No PRs linked to your sessions yet. They link on their own when a session runs gh pr create, mentions a PR, or works on a branch with an open PR.') + '</div>'
-  } else {
-    for (const g of groups) {
-      h += '<section class="prgroup' + (g.key === 'attention' ? ' attention' : '') + '"><h2>' + esc(g.label) + ' <span class="count">' + g.rows.length + '</span></h2>'
-      if (g.failed && !g.rows.length) h += '<div class="hint">Couldn’t load this repo’s PRs right now.</div>'
-      h += g.rows.map((r) => prRowHtml(r, { team: view === 'team', now, mayEdit, sessionAction, showMachine })).join('') + '</section>'
-    }
-  }
+  if (prRows(d).length || prFilterActive(filter)) h += '<div class="prs-search"><input type="search" id="prs-q" class="prs-q" placeholder="Search title, branch, #number, repo" aria-label="Search pull requests" autocapitalize="off" autocomplete="off" spellcheck="false" value="' + esc(filter.q || '') + '"></div>'
+  h += '<div id="prs-body">' + prsBodyHtml(d, opts) + '</div>'
   const foot = [d.servedBy && d.machine && d.servedBy !== d.machine ? 'From ' + d.servedBy + '’s gh' : '', d.loading ? 'Updating…' : d.updatedAt ? 'Updated ' + shortAgo(d.updatedAt, now) + (shortAgo(d.updatedAt, now) === 'now' ? '' : ' ago') : ''].filter(Boolean)
   if (foot.length) h += '<div class="prs-foot faint">' + esc(foot.join(' · ')) + '</div>'
   return h

package/ui/viewer.js

@@ -12,8 +12,40 @@ export function isPhoneUa(ua, { maxTouchPoints = 0 } = {}) {
   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 } = {}) {
+// "Set up this Mac too": only a desktop browser on another computer, until
+// dismissed, and (0.8.4) only once this computer's own Leftoff didn't answer:
+// `here` is false after localLeftoffAnswers() said no, true when it answered,
+// null/undefined while not asked yet (no banner, so it never flashes).
+export function setupCandidate({ viewer, ua, maxTouchPoints = 0, dismissed = false } = {}) {
   if (!viewer || !viewer.remote || !viewer.setup || dismissed) return false
   return !isPhoneUa(ua, { maxTouchPoints })
 }
+export function wantsSetupBanner({ here, ...rest } = {}) {
+  return here === false && setupCandidate(rest)
+}
+
+// 0.8.4: does this computer already run Leftoff? Ask its daemon on the default
+// port (GET /v1/here: an empty 204, presence only). Chrome's Local Network
+// Access shows a permission prompt before a page may reach this computer's
+// own ports; a banner isn't worth a prompt, so when the permission isn't
+// already granted, don't ask (the daemon's tailnet check still applies).
+export const LOCAL_PORT = 7429
+export async function localLeftoffAnswers({ fetchImpl = (...a) => fetch(...a), permissions = (typeof navigator !== 'undefined' && navigator.permissions) || null, timeoutMs = 1500, port = LOCAL_PORT } = {}) {
+  if (await wouldPrompt(permissions)) return false
+  try {
+    const r = await fetchImpl('http://127.0.0.1:' + port + '/v1/here', { mode: 'cors', credentials: 'omit', cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) })
+    return r.status === 204 && r.headers.get('x-leftoff') === 'here'
+  } catch { return false }
+}
+// The permission names Chrome has used for it; a browser that knows neither has no such prompt.
+async function wouldPrompt(permissions) {
+  if (!permissions || typeof permissions.query !== 'function') return false
+  let known = false
+  for (const name of ['loopback-network', 'local-network-access']) {
+    let s
+    try { s = await permissions.query({ name }) } catch { continue }
+    known = true
+    if (s && s.state === 'granted') return false
+  }
+  return known
+}