@leftoff/cli 0.8.7 → 0.8.9

package/ui/app.js

@@ -11,7 +11,7 @@ import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix } from './viewer.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref } from './handoffs.js'
+import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName } 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: {} }
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
@@ -996,7 +996,11 @@ async function viewSession(id) {
   const branch = s.repo && s.repo.branch
   const spv = await api('GET', '/v1/spaces').catch(() => null)
   let html = '<a class="back" href="#/">← All sessions</a>'
-  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled session') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + wtChips(s) + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
+  // 0.8.9: rename in place: tap the title or the pencil (this Mac's sessions; like /cp-name, your name wins over automatic ones)
+  const canRename = s.isLocal !== false && !s.agent && !/^agent:/.test(String(s.id || ''))
+  html += '<div class="pagehead"><div>' + (canRename
+    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + esc(s.title || 'Untitled session') + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
+    : '<h1>' + esc(s.title || 'Untitled session') + '</h1>') + '<div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + wtChips(s) + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
     '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (s.isLocal ? '<button type="button" class="btn primary" data-action="checkpoint" data-id="' + esc(s.id) + '">Checkpoint now</button>' : '') + '</div></div>'
   html += '<div class="facts">' +
     fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
@@ -1102,7 +1106,7 @@ async function togglePr(url, { retry = false } = {}) {
     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] })
+    if (el && r) el.outerHTML = prRowHtml(r, { ...prsOpts(prsUi.view, prsUi.filter), team: prsUi.view === 'team', now: Date.now(), showMachine: !!d.multiMachine, me: d.me || null, 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()
@@ -1199,7 +1203,7 @@ function renderMd(md, { spaces = [] } = {}) {
     }
     if (/^\s{2,}\S/.test(line) && inList) {
       // "Stopped at: … Next: …" is two lines, each with its label.
-      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
+      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you|Merged|Commits): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
       if (sm) out.push('<span class="sub"><span class="k">' + sm[1] + '</span> ' + inline(sm[2]) + '</span>' + (sm[3] ? '<span class="sub"><span class="k">' + sm[3] + '</span> ' + inline(sm[4]) + '</span>' : ''))
       else out.push('<span class="sub">' + inline(t) + '</span>')
       continue
@@ -3022,6 +3026,8 @@ document.addEventListener('input', (ev) => {
 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 })) } })
 
 window.addEventListener('hashchange', () => closeActionMenu())
+// 0.8.9: a session page's title is a button too (Enter or Space renames it)
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
 document.addEventListener('keydown', (ev) => {
   const b = ev.target && ev.target.closest && ev.target.closest('[data-action="card-more"]')
@@ -3045,7 +3051,7 @@ document.addEventListener('click', async (ev) => {
     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
+      else if (k === 'state') f.state = f.state === v ? null : v
       return setPrsFilter(f)
     }
     if (action === 'prs-clear') { const q = document.getElementById('prs-q'); if (q) q.value = ''; return setPrsFilter({}) }
@@ -3327,6 +3333,8 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'file-open') return openDoc(btn.dataset.session, { path: btn.dataset.path, plan: btn.dataset.plan })
     if (action === 'doc-close') return closeDoc()
+    if (action === 'doc-dl') { ev.preventDefault(); return openDocMenu(btn) }
+    if (action === 'doc-copy' || action === 'doc-download' || action === 'doc-pdf') return docAction(action.slice(4))
     if (action === 'need-restore' || action === 'need-restore-all') {
       btn.disabled = true
       state.dismissedOpen = true
@@ -3339,7 +3347,7 @@ document.addEventListener('click', async (ev) => {
     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 }
+      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') + (r.worktreeUnlocked ? ' · its worktree is unlocked (still there)' : '')) } 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 }
@@ -3370,8 +3378,8 @@ document.addEventListener('click', async (ev) => {
     } else if (action === 'rename') {
       const box = btn.closest('.title')
       if (!box || box.querySelector('input')) return
-      const current = s ? s.title || '' : ''
-      box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title">'
+      const current = s ? s.title || '' : btn.dataset.title || ''
+      box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title" maxlength="120" enterkeyhint="done">'
       const input = box.querySelector('input')
       input.focus(); input.select()
       let finished = false
@@ -3379,12 +3387,14 @@ document.addEventListener('click', async (ev) => {
         if (finished) return
         finished = true
         if (save && input.value.trim() && input.value.trim() !== current) {
-          await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { title: input.value.trim() })
-          toast('Renamed. With the mod, the session and its tab title follow within a minute')
+          try {
+            await api('PATCH', '/v1/sessions/' + encodeURIComponent(id), { title: input.value.trim() })
+            toast('Renamed. With the mod, the session and its tab title follow within a minute')
+          } catch (e) { toast(e.message, 5000) }
         }
         render()
       }
-      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') done(true); if (e.key === 'Escape') done(false) })
+      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); done(true) } if (e.key === 'Escape') { e.stopPropagation(); done(false) } })
       input.addEventListener('blur', () => done(true))
     }
   } catch (e) { toast(e.message); btn.disabled = false }
@@ -3507,6 +3517,7 @@ async function todoDoneChange(cb) {
 // The in-app viewer (0.7.0): a doc or plan a session wrote, read from the Mac
 // that owns it (through another Mac or the relay from a phone). Markdown is
 // rendered from escaped text; HTML files show as source; anything else downloads.
+const docUi = { r: null, name: '', printing: null }
 function docViewerEl() {
   let el = document.getElementById('docViewer')
   if (el) return el
@@ -3517,12 +3528,15 @@ function docViewerEl() {
   el.setAttribute('role', 'dialog')
   el.setAttribute('aria-modal', 'true')
   el.setAttribute('aria-labelledby', 'docViewerTitle')
-  el.innerHTML = '<div class="dv-sheet"><div class="dv-head"><div class="dv-title" id="docViewerTitle"></div><a class="btn sm dv-dl" hidden>Download</a><button type="button" class="dv-x" data-action="doc-close" aria-label="Close">×</button></div><div class="dv-sub faint"></div><div class="dv-body"></div></div>'
+  // 0.8.9: Download is a small menu (Copy / Download as Markdown / Download as PDF…), our own, not a native one
+  el.innerHTML = '<div class="dv-sheet"><div class="dv-head"><div class="dv-title" id="docViewerTitle"></div>' +
+    '<button type="button" class="btn sm dv-dl" data-action="doc-dl" aria-haspopup="menu" aria-expanded="false" hidden>' + icon('download') + '<span class="dl-word">Download</span><span class="chev" aria-hidden="true">▾</span></button>' +
+    '<button type="button" class="dv-x" data-action="doc-close" aria-label="Close">×</button></div><div class="dv-sub faint"></div><div class="dv-ptitle" aria-hidden="true"></div><div class="dv-body"></div></div>'
   el.addEventListener('click', (ev) => { if (ev.target === el) closeDoc() })
   document.body.appendChild(el)
   return el
 }
-function closeDoc() { const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.querySelector('.dv-body').innerHTML = '' } document.documentElement.classList.remove('dv-open') }
+function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.querySelector('.dv-body').innerHTML = '' } docUi.r = null; document.documentElement.classList.remove('dv-open') }
 document.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && document.getElementById('docViewer') && !document.getElementById('docViewer').hidden) closeDoc() })
 async function openDoc(sessionId, { path, plan } = {}) {
   if (!sessionId || (!path && !plan)) return
@@ -3531,7 +3545,8 @@ async function openDoc(sessionId, { path, plan } = {}) {
   el.querySelector('.dv-title').textContent = name
   el.querySelector('.dv-sub').textContent = ''
   el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
-  const dl = el.querySelector('.dv-dl'); dl.hidden = true; dl.removeAttribute('href')
+  const dl = el.querySelector('.dv-dl'); dl.hidden = true
+  docUi.r = null; docUi.name = name
   el.hidden = false
   document.documentElement.classList.add('dv-open')
   const qs = new URLSearchParams(plan ? { plan } : { path })
@@ -3541,12 +3556,88 @@ async function openDoc(sessionId, { path, plan } = {}) {
     el.querySelector('.dv-title').textContent = r.name || name
     el.querySelector('.dv-sub').textContent = [r.plan ? 'Plan' : r.kind === 'new' ? 'New' : r.kind === 'edited' ? 'Edited' : '', r.size ? (r.size < 1024 ? r.size + ' B' : Math.round(r.size / 1024) + ' KB') : '', r.peer ? 'from ' + r.peer : ''].filter(Boolean).join(' · ')
     el.querySelector('.dv-body').innerHTML = docViewerBody(r)
-    const href = docDownloadHref(r)
-    if (href) { dl.href = href; dl.download = String(r.name || name).split('/').pop() + (r.plan ? '.md' : ''); dl.hidden = false }
+    el.querySelector('.dv-ptitle').textContent = docFileName(r, name)
+    docUi.r = r; docUi.name = name
+    const items = docMenuItems(r)
+    if (items.length) {
+      dl.hidden = false
+      const menu = items.length > 1
+      dl.setAttribute('aria-haspopup', menu ? 'menu' : 'false')
+      dl.querySelector('.chev').hidden = !menu
+      dl.title = menu ? 'Copy or download' : 'Download ' + docFileName(r, name)
+      dl.setAttribute('aria-label', menu ? 'Copy or download' : 'Download')
+    }
   } catch (e) {
     el.querySelector('.dv-body').innerHTML = '<div class="empty">' + esc(e.message) + '</div>'
   }
 }
+function openDocMenu(btn) {
+  const r = docUi.r
+  const items = docMenuItems(r)
+  if (!items.length) return
+  if (items.length === 1) return docAction(items[0].key)
+  const ic = { copy: 'copy', download: 'download', pdf: 'file-text' }
+  openActionMenu(btn, items.map((it) => ({ label: it.label, icon: icon(ic[it.key] || 'download'), attrs: { 'data-action': 'doc-' + it.key, title: it.title } })), { title: docFileName(r, docUi.name) })
+}
+async function copyRaw(text) {
+  if (await clipWrite(text)) return true
+  const ta = document.createElement('textarea')
+  ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;font-size:16px'
+  document.body.appendChild(ta); ta.select()
+  let ok = false
+  try { ok = document.execCommand('copy') } catch {}
+  ta.remove()
+  return ok
+}
+async function docAction(key) {
+  const r = docUi.r
+  if (!r) return
+  const btn = document.querySelector('#docViewer .dv-dl')
+  if (key === 'copy') {
+    const ok = await copyRaw(String(r.text || ''))
+    if (!ok) { toast('Couldn’t copy here. Download it instead.', 4000); return }
+    toast('Copied ' + docFileName(r, docUi.name))
+    if (btn) {
+      const word = btn.querySelector('.dl-word')
+      btn.classList.add('copied'); if (word) word.textContent = 'Copied'
+      clearTimeout(docUi.copiedTimer)
+      docUi.copiedTimer = setTimeout(() => { btn.classList.remove('copied'); if (word) word.textContent = 'Download' }, 1500)
+    }
+    return
+  }
+  if (key === 'download') {
+    const a = document.createElement('a')
+    a.href = docDownloadHref(r); a.download = docFileName(r, docUi.name); a.rel = 'noopener'
+    document.body.appendChild(a); a.click(); a.remove()
+    return
+  }
+  if (key === 'pdf') return printDoc()
+}
+// Download as PDF: the browser's print dialog over just this file (print
+// styles in app.css), in the light theme, titled with the file's name, so
+// "Save as PDF" makes a clean PDF. No PDF library.
+function printDoc() {
+  const r = docUi.r
+  if (!r || r.type !== 'markdown') return
+  endDocPrint()
+  const root = document.documentElement
+  docUi.printing = { title: document.title, theme: root.getAttribute('data-theme') }
+  root.setAttribute('data-theme', 'light')
+  root.classList.add('dv-printing')
+  document.title = docFileName(r, docUi.name).replace(/\.(md|markdown)$/i, '')
+  window.addEventListener('afterprint', endDocPrint, { once: true })
+  toast('Choose “Save as PDF” in the print dialog', 5000)
+  setTimeout(() => { try { window.print() } catch { endDocPrint() } }, 60)
+}
+function endDocPrint() {
+  const p = docUi.printing
+  if (!p) return
+  docUi.printing = null
+  const root = document.documentElement
+  root.classList.remove('dv-printing')
+  if (p.theme) root.setAttribute('data-theme', p.theme); else root.removeAttribute('data-theme')
+  document.title = p.title
+}
 
 // Dismiss a need (0.6.5): gone from every card and count at once, kept on
 // the daemon (so your other devices and the relay see it too), Undo for 5 s.

package/ui/changelog-md.js

@@ -15,11 +15,13 @@ const anchor = (href, inner) => '<a href="' + esc(href) + '" target="_blank" rel
 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 } = {}) {
+export function mdInline(s, { links = true, em = false } = {}) {
   const held = []
   const hold = (html) => '\u0000' + (held.push(html) - 1) + '\u0000'
   const back = (t) => t.replace(/\u0000(\d+)\u0000/g, (_, i) => held[Number(i)])
-  const marks = (t) => esc(t).replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
+  // 0.8.9 (em: the file viewer): *italic*, _italic_ (not inside snake_case) and ~~struck~~ too
+  const emph = (t) => !em ? t : t.replace(/~~([^~\s][^~]*?)~~/g, '<del>$1</del>').replace(/(^|[^\w*])\*([^*\s][^*]*?)\*(?![\w*])/g, '$1<em>$2</em>').replace(/(^|[^\w])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')
+  const marks = (t) => emph(esc(t).replace(/\*\*(.+?)\*\*/g, '<b>$1</b>'))
   let t = String(s == null ? '' : s)
   // `code` first, so nothing inside it is read as markup.
   t = t.replace(/`([^`]+)`/g, (_, c) => hold('<code>' + esc(c) + '</code>'))
@@ -28,6 +30,8 @@ export function mdInline(s, { links = true } = {}) {
     const inner = back(marks(text))
     return hold(links && httpsUrl(url) ? anchor(url, inner) : links && docLink(url) ? '<a href="' + esc(url.trim()) + '">' + inner + '</a>' : inner)
   })
+  // with em on, bare links are held first so an _ or * in a URL stays a URL
+  if (links && em) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + hold(anchor(url, esc(url))))
   t = marks(t)
   if (links) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + anchor(url.replace(/&amp;/g, '&'), url))
   return back(t)

package/ui/handoffs.js

@@ -103,14 +103,52 @@ export function sessionFilesSection(s, { agoFn = null } = {}) {
 
 // ------------------------------------------------------------------ viewer
 
+// 0.8.9: a light tint for code blocks, not a real highlighter: comments,
+// strings, numbers and common keywords get a class (.tk-c/.tk-s/.tk-n/.tk-k),
+// everything escaped. Plain text, diffs and unknown languages: diff lines
+// tinted, nothing else.
+const KEYWORDS = new Set(('if else for while do switch case break continue return function const let var class new this import export from default async await try catch finally throw typeof instanceof in of yield ' +
+  'def lambda elif pass with as is not and or None True False self raise except global nonlocal ' +
+  'fn pub mut impl struct enum trait match use mod crate where loop ' +
+  'func package type interface go defer chan select range map ' +
+  'true false null undefined nil void public private protected static final extends implements ' +
+  'echo then fi esac done local export readonly ' +
+  'SELECT FROM WHERE JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER LIMIT INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE INDEX AND OR NOT AS WITH').split(' '))
+const PROSE_LANGS = new Set(['', 'text', 'txt', 'plain', 'plaintext', 'markdown', 'md', 'output', 'console', 'log'])
+export function tintCode(code, lang = '') {
+  const src = String(code == null ? '' : code)
+  lang = String(lang || '').toLowerCase()
+  if (lang === 'diff' || lang === 'patch') return src.split('\n').map((l) => /^\+(?!\+\+)/.test(l) ? '<span class="tk-add">' + esc(l) + '</span>' : /^-(?!--)/.test(l) ? '<span class="tk-del">' + esc(l) + '</span>' : /^@@/.test(l) ? '<span class="tk-k">' + esc(l) + '</span>' : esc(l)).join('\n')
+  if (PROSE_LANGS.has(lang)) return esc(src)
+  const hash = /^(sh|bash|zsh|shell|py|python|rb|ruby|yaml|yml|toml|ini|conf|dockerfile|make|makefile|r|perl|pl|elixir|ex)$/.test(lang)
+  const dash = /^(sql|lua|haskell|hs)$/.test(lang)
+  const re = new RegExp([
+    hash ? '(#[^\\n]*)' : dash ? '(--[^\\n]*)' : '(\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/)',
+    '("(?:[^"\\\\\\n]|\\\\.)*"|\'(?:[^\'\\\\\\n]|\\\\.)*\'|`(?:[^`\\\\]|\\\\.)*`)',
+    '\\b(\\d+(?:\\.\\d+)?)\\b',
+    '\\b([A-Za-z_][A-Za-z0-9_]*)\\b',
+  ].join('|'), 'g')
+  let out = '', last = 0, m
+  while ((m = re.exec(src))) {
+    out += esc(src.slice(last, m.index))
+    if (m[1] != null) out += '<span class="tk-c">' + esc(m[1]) + '</span>'
+    else if (m[2] != null) out += '<span class="tk-s">' + esc(m[2]) + '</span>'
+    else if (m[3] != null) out += '<span class="tk-n">' + esc(m[3]) + '</span>'
+    else out += KEYWORDS.has(m[4]) ? '<span class="tk-k">' + esc(m[4]) + '</span>' : esc(m[4])
+    last = re.lastIndex
+  }
+  return out + esc(src.slice(last))
+}
+
 // Markdown -> safe HTML: headings, paragraphs, lists, task boxes, quotes,
 // fenced code, tables, rules. Inline markup via mdInline (escaped; https links only).
+const mdi = (t) => mdInline(t, { em: true })
 export function renderDoc(md) {
   const lines = String(md == null ? '' : md).replace(/\r\n?/g, '\n').replace(/^---\n[\s\S]*?\n---\n/, '').split('\n')
   const out = []
   let i = 0
   const para = []
-  const flush = () => { if (para.length) { out.push('<p>' + para.map((x) => mdInline(x)).join('<br>') + '</p>'); para.length = 0 } }
+  const flush = () => { if (para.length) { out.push('<p>' + para.map((x) => mdi(x)).join('<br>') + '</p>'); para.length = 0 } }
   while (i < lines.length) {
     const ln = lines[i]
     let m
@@ -120,11 +158,12 @@ export function renderDoc(md) {
       i++
       while (i < lines.length && !lines[i].trim().startsWith(fence)) body.push(lines[i++])
       i++
-      out.push('<pre class="doc-code"><code>' + esc(body.join('\n')) + '</code></pre>')
+      const lang = (m[2] || '').toLowerCase()
+      out.push('<pre class="doc-code"' + (lang ? ' data-lang="' + esc(lang) + '"' : '') + '><code>' + tintCode(body.join('\n'), lang) + '</code></pre>')
       continue
     }
     if (!ln.trim()) { flush(); i++; continue }
-    if ((m = ln.match(/^(#{1,6})\s+(.*)$/))) { flush(); const n = Math.min(6, m[1].length + 1); out.push('<h' + n + '>' + mdInline(m[2].replace(/\s+#+\s*$/, '')) + '</h' + n + '>'); i++; continue }
+    if ((m = ln.match(/^(#{1,6})\s+(.*)$/))) { flush(); const n = Math.min(6, m[1].length + 1); out.push('<h' + n + '>' + mdi(m[2].replace(/\s+#+\s*$/, '')) + '</h' + n + '>'); i++; continue }
     if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(ln)) { flush(); out.push('<hr>'); i++; continue }
     if (/^\s*>/.test(ln)) {
       flush(); const q = []
@@ -137,7 +176,7 @@ export function renderDoc(md) {
       const head = cells(ln); i += 2
       const rows = []
       while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i])) rows.push(cells(lines[i++]))
-      out.push('<div class="doc-table"><table><thead><tr>' + head.map((c) => '<th>' + mdInline(c) + '</th>').join('') + '</tr></thead><tbody>' + rows.map((r) => '<tr>' + r.map((c) => '<td>' + mdInline(c) + '</td>').join('') + '</tr>').join('') + '</tbody></table></div>')
+      out.push('<div class="doc-table"><table><thead><tr>' + head.map((c) => '<th>' + mdi(c) + '</th>').join('') + '</tr></thead><tbody>' + rows.map((r) => '<tr>' + r.map((c) => '<td>' + mdi(c) + '</td>').join('') + '</tr>').join('') + '</tbody></table></div>')
       continue
     }
     if (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(ln)) {
@@ -150,7 +189,7 @@ export function renderDoc(md) {
         if (mm) items.push({ depth: Math.floor(mm[1].replace(/\t/g, '  ').length / 2), text: mm[2] })
         else items[items.length - 1].text += ' ' + l.trim()
       }
-      const li = (t) => { const tm = t.match(/^\[([ xX])\]\s+(.*)$/); return tm ? '<li class="task"><span class="tbox' + (tm[1] !== ' ' ? ' on' : '') + '" aria-hidden="true"></span>' + mdInline(tm[2]) + '</li>' : '<li>' + mdInline(t) + '</li>' }
+      const li = (t) => { const tm = t.match(/^\[([ xX])\]\s+(.*)$/); return tm ? '<li class="task"><span class="tbox' + (tm[1] !== ' ' ? ' on' : '') + '" aria-hidden="true"></span>' + mdi(tm[2]) + '</li>' : '<li>' + mdi(t) + '</li>' }
       out.push('<' + (ordered ? 'ol' : 'ul') + '>' + items.map((it) => (it.depth ? li(it.text).replace('<li', '<li class="sub"') : li(it.text))).join('') + '</' + (ordered ? 'ol' : 'ul') + '>')
       continue
     }
@@ -174,6 +213,24 @@ export function docViewerBody(r) {
   if (r.type === 'text' || r.type === 'html') return '<pre class="doc-pre">' + esc(r.text || '') + '</pre>'
   return '<div class="empty">No preview for this kind of file.</div>'
 }
+// 0.8.9: what the viewer's Download menu offers for a file: Copy (the raw text),
+// the file itself, and for markdown a PDF (the browser's print dialog, "Save as
+// PDF"). Images and other binaries keep a plain Download (no menu).
+export const PDF_HINT = 'Opens the print dialog: choose “Save as PDF”'
+export function docMenuItems(r) {
+  if (!r || r.missing || r.tooBig || !docDownloadHref(r)) return []
+  const text = typeof r.text === 'string' && !r.base64 && r.type !== 'image'
+  const items = []
+  if (text) items.push({ key: 'copy', label: r.type === 'markdown' ? 'Copy' : 'Copy text', title: 'Copy the file’s text' })
+  items.push({ key: 'download', label: r.type === 'markdown' ? 'Download as Markdown' : 'Download', title: 'Save ' + docFileName(r) })
+  if (r.type === 'markdown') items.push({ key: 'pdf', label: 'Download as PDF…', title: PDF_HINT })
+  return items
+}
+// The name a download is saved as (a plan has no extension of its own).
+export function docFileName(r, fallback = 'file') {
+  const n = String((r && r.name) || fallback).split('/').pop() || fallback
+  return r && r.plan && !/\.md$/i.test(n) ? n + '.md' : n
+}
 // A download for anything (an HTML file is offered as a file, never rendered live).
 export function docDownloadHref(r) {
   if (!r || r.missing || r.tooBig) return ''

package/ui/icons.js

@@ -32,6 +32,8 @@ export const ICONS = {
   "chevron-left": "<path d=\"m15 18-6-6 6-6\"/>",
   "mail": "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/> <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>",
   "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/> <path d=\"m21 21-4.3-4.3\"/>",
+  "file-text": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/> <path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/> <path d=\"M10 9H8\"/> <path d=\"M16 13H8\"/> <path d=\"M16 17H8\"/>",
+  "pencil": "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/> <path d=\"m15 5 4 4\"/>",
   "copy": "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/> <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
   "ellipsis": "<circle cx=\"12\" cy=\"12\" r=\"1\"/> <circle cx=\"19\" cy=\"12\" r=\"1\"/> <circle cx=\"5\" cy=\"12\" r=\"1\"/>",
   "pin": "<path d=\"M12 17v5\"/> <path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/>",

package/ui/prs.js

@@ -89,11 +89,13 @@ function sessionLinks(r, opts) {
 
 // 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 } = {}) {
+export function prRowHtml(r, { team = false, now = Date.now(), mayEdit = true, sessionAction = null, showMachine = false, open = false, detail = null, me = null } = {}) {
   const p = r.pr || {}
   const url = safeUrl(p.url)
+  // 0.8.9: what the checks and review chips don't already say (a conflict, your review)
+  const bwhy = r.bucketWhy !== undefined ? r.bucketWhy : prBucket(p, me).why
   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] && (p.state === 'open' || p.state === 'draft') ? '<span class="pr-review ' + esc(p.review) + '">' + REVIEW[p.review] + '</span>' : '')
+    (bwhy === 'Merge conflict' || bwhy === 'Your review' ? '<span class="pr-att">' + esc(bwhy) + '</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.repo, p.author ? '@' + p.author : '', p.branch || '', when].filter(Boolean)
@@ -134,7 +136,7 @@ export function prDetailHtml(p, st, { now = Date.now() } = {}) {
       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 rv = REVIEW[d.review] || (d.review === 'none' && d.state === 'open' ? 'No review required' : 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>' : '') +
@@ -154,20 +156,63 @@ export function prDetailHtml(p, st, { now = Date.now() } = {}) {
   return h + '</div>'
 }
 
+// ---------------------------------------------------------------- 0.8.9: buckets
+
+// What an open PR is waiting on, in one of four buckets (idea: "merge ready /
+// needs fix / waiting on others"), from the fields gh already gives us:
+//   review   Your review: you're a requested reviewer and it isn't yours
+//   fix      Needs fix: a check failing, changes requested, or a merge conflict
+//   ready    Merge ready: not a draft, approved or no review required, every
+//            check passed (or none), and GitHub says it merges cleanly
+//   waiting  Waiting on others: everything else (review pending, checks
+//            running, a draft, or anything we can't tell yet)
+// Anything unknown (no mergeable from an older daemon, GitHub still working
+// it out, no check list) lands in waiting, never in ready. Merged and closed
+// PRs keep their state. -> { bucket, why }
+export const PR_BUCKETS = [['review', 'Your review'], ['fix', 'Needs fix'], ['ready', 'Merge ready'], ['waiting', 'Waiting on others'], ['merged', 'Merged'], ['closed', 'Closed']]
+const sameUser = (a, b) => !!a && !!b && String(a).toLowerCase() === String(b).toLowerCase()
+export function prBucket(pr, me = null) {
+  if (!pr || typeof pr !== 'object') return { bucket: 'waiting', why: null }
+  if (pr.state === 'merged') return { bucket: 'merged', why: null }
+  if (pr.state === 'closed') return { bucket: 'closed', why: null }
+  const ck = pr.checks && typeof pr.checks === 'object' ? pr.checks : null
+  if (me && !sameUser(pr.author, me) && (pr.reviewRequested || []).some((x) => sameUser(x, me))) return { bucket: 'review', why: 'Your review' }
+  if (ck && ck.failed > 0) return { bucket: 'fix', why: 'Checks failing' }
+  if (pr.review === 'changes_requested') return { bucket: 'fix', why: 'Changes requested' }
+  if (pr.mergeable === 'conflicting') return { bucket: 'fix', why: 'Merge conflict' }
+  if (pr.state === 'draft') return { bucket: 'waiting', why: 'Draft' }
+  if (pr.state !== 'open') return { bucket: 'waiting', why: null }
+  if (!ck || ck.unknown || !Number.isFinite(ck.total)) return { bucket: 'waiting', why: null }
+  if (ck.pending > 0) return { bucket: 'waiting', why: 'Checks running' }
+  if (pr.review === 'review_required') return { bucket: 'waiting', why: 'Review pending' }
+  if (pr.review !== 'approved' && pr.review !== 'none') return { bucket: 'waiting', why: null }
+  if (pr.mergeable !== 'mergeable') return { bucket: 'waiting', why: null }
+  return { bucket: 'ready', why: null }
+}
+// A row's bucket: what the daemon worked out, else (an older daemon) worked out here.
+export function bucketOf(r, me = null) {
+  if (r && PR_BUCKETS.some(([k]) => k === r.bucket)) return r.bucket
+  return prBucket(r && r.pr, me).bucket
+}
+
 // ---------------------------------------------------------------- 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']]
+// The page's filter, from the hash (#/prs?view=team&repo=web&state=ready&q=search).
+// 0.8.9: `state` is a bucket (PR_BUCKETS). Links from 0.8.5 still open:
+// state=attention or checks=failing -> Needs fix, state=draft -> Waiting on
+// others, state=open and checks=passing -> no filter.
+export const PR_STATES = PR_BUCKETS
 export const QUIET_DAYS = 14
+const LEGACY_STATE = { attention: 'fix', draft: 'waiting' }
 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')
+  let state = p.get('state')
+  state = PR_BUCKETS.some(([k]) => k === state) ? state : LEGACY_STATE[state] || null
+  if (!state && p.get('checks') === 'failing') state = 'fix'
   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,
+    state,
     q: String(p.get('q') || '').slice(0, 200),
   }
 }
@@ -176,11 +221,10 @@ export function prsHash(view, f = {}) {
   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())))
+export const prFilterActive = (f) => !!(f && ((f.repos && f.repos.length) || f.state || (f.q && f.q.trim())))
 
 // Every row, flat: the daemon's `rows`, or an older daemon's groups.
 export function prRows(d) {
@@ -192,13 +236,8 @@ export function prRows(d) {
 }
 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 prStateOf(r, me = null) { return bucketOf(r, me) }
+export function inPrState(r, state, me = null) { return !state || bucketOf(r, me) === state }
 export function inPrSearch(r, q) {
   const words = String(q || '').toLowerCase().split(/\s+/).filter(Boolean)
   if (!words.length) return true
@@ -215,17 +254,18 @@ export function inPrRepos(r, repos, labels = null) {
   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 } = {}) {
+export function filterPrRows(rows, f = {}, { skip = null, me = 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))
+  return rows.filter((r) => (skip === 'repos' || inPrRepos(r, f.repos, labels)) && (skip === 'state' || inPrState(r, f.state, me)) && 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, []]))
+// Groups (0.8.9: the buckets), newest first in each; anything with no
+// activity for 14+ days in Quiet.
+export function groupPrRows(rows, { now = Date.now(), me = null } = {}) {
+  const g = Object.fromEntries(PR_BUCKETS.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) }
+  for (const r of rows) { if (isQuiet(r, now)) quiet.push(r); else g[bucketOf(r, me)].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)
+  const out = PR_BUCKETS.map(([key, label]) => ({ key, label, rows: g[key].sort(by) })).filter((x) => x.rows.length)
   return { groups: out, quiet: quiet.sort(by) }
 }
 
@@ -238,12 +278,13 @@ function fchip({ on, count, label, attrs, cls = '' }) {
 
 // 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 f = { repos: [], state: null, q: '', ...filter }
   const all = prRows(d)
+  const me = d.me || null
   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' })
+    const repoCount = filterPrRows(all, f, { skip: 'repos', me })
     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)
@@ -251,23 +292,26 @@ export function prsBodyHtml(d, { view = 'mine', now = Date.now(), mayEdit = true
       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')
+    // 0.8.9: one row of buckets. The four open ones always show (dimmed at 0,
+    // after the rest), Merged and Closed only when there are some; a chosen
+    // one comes first.
+    const stCount = filterPrRows(all, f, { skip: 'state', me })
+    const bs = PR_BUCKETS.map(([k, l]) => ({ v: k, l, n: stCount.filter((r) => bucketOf(r, me) === k).length, on: f.state === k }))
+    const shown = bs.filter((x) => !x.on && (x.n || ['review', 'fix', 'ready', 'waiting'].includes(x.v)) && !(x.v === 'review' && !x.n && !me))
+    // the ones with PRs lead, so on a phone the empty ones are what scrolls off
+    const ordered = [...bs.filter((x) => x.on), ...shown.filter((x) => x.n), ...shown.filter((x) => !x.n)]
+    h += chipRow('Filter by what each PR is waiting on', ordered.map((x) => fchip({ on: x.on, count: x.n, label: x.l, cls: 'b-' + x.v, attrs: 'data-action="prs-filter" data-k="state" data-v="' + x.v + '"' })), 'prs-states prs-buckets')
   }
-  const rows = filterPrRows(all, f)
-  const { groups, quiet } = groupPrRows(rows, { now })
+  const rows = filterPrRows(all, f, { me })
+  const { groups, quiet } = groupPrRows(rows, { now, me })
   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 })
+  const rowOpts = (r) => ({ team: view === 'team', now, mayEdit, sessionAction, showMachine, me, 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>'
+    for (const g of groups) h += '<section class="prgroup b-' + g.key + (g.key === 'fix' || g.key === 'review' ? ' 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>'