@leftoff/cli 0.8.8 → 0.9.0

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

@@ -3,6 +3,8 @@
 // so they follow light and dark; always aria-hidden next to a text label.
 // index.html carries the nav's copies inline (no script needed to draw them).
 export const ICONS = {
+  "folder": "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>",
+  "trash": "<path d=\"M3 6h18\"/> <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/> <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/> <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/> <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>",
   "clipboard": "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/> <path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/>",
   "layout-dashboard": "<rect width=\"7\" height=\"9\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"7\" height=\"5\" x=\"14\" y=\"3\" rx=\"1\"/> <rect width=\"7\" height=\"9\" x=\"14\" y=\"12\" rx=\"1\"/> <rect width=\"7\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/>",
   "coffee": "<path d=\"M10 2v2\"/> <path d=\"M14 2v2\"/> <path d=\"M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1\"/> <path d=\"M6 2v2\"/>",
@@ -32,6 +34,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/picker.js

@@ -367,12 +367,49 @@ export function actionMenuKey(anchor, e, open) {
   if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); open(); if (act && e.key === 'ArrowUp') actFocus(-1) }
 }
 
+// 0.9.0: a one-field form in the same popover / bottom sheet ("New project…",
+// "Rename project…"): a text box (16px on touch, like every input) and one
+// button. Enter submits, Escape or a tap outside cancels. onSubmit(value) may
+// return a promise; an error it throws shows under the box and keeps it open.
+export function openNameSheet(anchor, { title = '', label = 'Name', value = '', placeholder = '', submit = 'Save', onSubmit } = {}) {
+  closeActionMenu(); closeMenu()
+  const sheet = narrow()
+  const id = 'lo-act' + (++uid)
+  const menu = document.createElement('div')
+  menu.className = 'lo-menu lo-actmenu lo-namesheet' + (sheet ? ' sheet' : '')
+  menu.id = id
+  menu.setAttribute('role', 'dialog')
+  menu.setAttribute('aria-label', title || label)
+  menu.innerHTML = (title ? '<div class="lo-sheet-head"><span>' + esc(title) + '</span>' + (sheet ? '<button type="button" class="lo-sheet-done" data-act-close>Cancel</button>' : '') + '</div>' : '') +
+    '<form class="lo-nameform"><input type="text" class="lo-name" aria-label="' + esc(label) + '" placeholder="' + esc(placeholder) + '" value="' + esc(value) + '" maxlength="40" autocomplete="off" spellcheck="false">' +
+    '<button type="submit" class="btn primary lo-name-ok">' + esc(submit) + '</button></form><div class="lo-name-err" role="alert" hidden></div>'
+  let backdrop = null
+  if (sheet) { backdrop = document.createElement('div'); backdrop.className = 'lo-backdrop'; document.body.appendChild(backdrop) }
+  document.body.appendChild(menu)
+  const input = menu.querySelector('input'), errBox = menu.querySelector('.lo-name-err'), ok = menu.querySelector('.lo-name-ok')
+  act = { anchor, menu, backdrop, items: [input, ok], form: true }
+  anchor.setAttribute('aria-expanded', 'true')
+  menu.addEventListener('click', (e) => { if (e.target.closest('[data-act-close]')) closeActionMenu({ focus: true }) })
+  menu.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeActionMenu({ focus: true }) } })
+  menu.querySelector('form').addEventListener('submit', async (e) => {
+    e.preventDefault()
+    const v = input.value.trim()
+    if (!v) { input.focus(); return }
+    ok.disabled = true
+    try { await (onSubmit && onSubmit(v)); closeActionMenu() } catch (err) { errBox.textContent = (err && err.message) || String(err); errBox.hidden = false; ok.disabled = false; input.focus() }
+  })
+  placeAction()
+  input.focus()
+  try { input.setSelectionRange(input.value.length, input.value.length) } catch {}
+  return menu
+}
+
 if (typeof window !== 'undefined' && window.customElements && !customElements.get('lo-select')) {
   customElements.define('lo-select', LoSelect)
   customElements.define('lo-combo', LoCombo)
   // a click outside (or a tap on the page behind a sheet) closes; so does the page moving under a desktop menu
   document.addEventListener('pointerdown', (e) => { if (open && !open.menu.contains(e.target) && !open.host.contains(e.target)) closeMenu() }, true)
-  window.addEventListener('resize', () => { if (open) closeMenu(); if (act) closeActionMenu() })
+  window.addEventListener('resize', () => { if (open) closeMenu(); if (act && !act.form) closeActionMenu() }) // a form stays open while a phone's keyboard comes up
   document.addEventListener('scroll', (e) => { if (open && !open.menu.contains(e.target)) place(); if (act && !act.menu.contains(e.target)) placeAction() }, true)
   // a tap outside a card's ⋯ menu closes it (and goes nowhere: a tap on the backdrop, or anywhere on a desktop page, only closes)
   document.addEventListener('pointerdown', (e) => {

package/ui/prs.js

@@ -3,6 +3,7 @@
 // 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'
+import { renderDoc } from './handoffs.js'
 const safeUrl = (u) => (/^https:\/\/github\.com\//.test(String(u || '')) ? String(u) : '')
 
 export function shortAgo(iso, now = Date.now()) {
@@ -79,21 +80,26 @@ export function ghLineHtml(g) {
 }
 
 function sessionLinks(r, opts) {
-  const ss = r.sessions || []
+  // 0.9.0: never scripted runs (claude -p / codex exec, archived as such); two, then "+N more" that opens
+  const ss = (r.sessions || []).filter((s) => s && !s.nonInteractive && s.archivedReason !== 'non_interactive')
   if (!ss.length) return ''
-  return '<div class="pr-sessions">' + ss.slice(0, 4).map((s) => {
+  const one = (s) => {
     const act = opts.sessionAction ? opts.sessionAction(s) : ''
     return '<span class="pr-sess"><a href="#/s/' + encodeURIComponent(s.id) + '" class="sesslink">' + esc(s.title || 'Untitled session') + '</a>' + (s.machine && opts.showMachine ? '<span class="faint"> · ' + esc(s.machine) + '</span>' : '') + act + '</span>'
-  }).join('') + (ss.length > 4 ? '<span class="faint">+' + (ss.length - 4) + '</span>' : '') + '</div>'
+  }
+  return '<div class="pr-sessions">' + ss.slice(0, 2).map(one).join('') +
+    (ss.length > 2 ? '<details class="pr-more-sess"><summary class="linkish">+' + (ss.length - 2) + ' more</summary>' + ss.slice(2).map(one).join('') + '</details>' : '') + '</div>'
 }
 
 // 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)
@@ -120,6 +126,20 @@ export function plainBody(md) {
     .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()
 }
+// 0.9.0: a PR's description as markdown, with the file viewer's renderer and
+// styles (headings, lists, task boxes, tables, code, quotes). Safe: GitHub's
+// raw HTML is dropped to its text (renderDoc escapes everything else), an
+// image becomes a link to it (never hotlinked), links open in a new tab.
+export function prBodyMd(md) {
+  return String(md || '').replace(/\r\n?/g, '\n').replace(/<!--[\s\S]*?-->/g, '').replace(/<(script|style)\b[\s\S]*?<\/\1\s*>/gi, '')
+    .replace(/<img\b[^>]*?\bsrc=["']([^"']+)["'][^>]*>/gi, (m, u) => '[🖼 image](' + u + ')')
+    .replace(/!\[([^\]]*)\]\(([^)\s]+)[^)]*\)/g, (m, alt, u) => '[🖼 ' + (alt.trim() || 'image') + '](' + u + ')')
+    .replace(/<br\s*\/?>/gi, '\n').replace(/<\/?(p|div|details|summary|h[1-6]|li|ul|ol|table|tr)\b[^>]*>/gi, '\n')
+    .replace(/<\/?[a-z][^>]*>/gi, '').replace(/\n{3,}/g, '\n\n').trim()
+}
+export function prBodyHtml(md) {
+  return renderDoc(prBodyMd(md)).replace(/<a href="/g, '<a target="_blank" rel="noopener noreferrer" href="').replace(/(<a target="_blank" rel="noopener noreferrer" href="[^"]*") target="_blank" rel="noopener"/g, '$1')
+}
 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>'
@@ -134,7 +154,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>' : '') +
@@ -144,7 +164,7 @@ export function prDetailHtml(p, st, { now = Date.now() } = {}) {
   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>'
+    (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="doc-md pd-md">' + prBodyHtml(d.body) + '</div></details>' : '<div class="doc-md pd-md">' + prBodyHtml(d.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(' ')
@@ -154,33 +174,77 @@ 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),
+    project: p.get('project') || null, // 0.9.0
   }
 }
 export function prsHash(view, f = {}) {
   const parts = []
   if (view === 'team') parts.push('view=team')
+  if (f.project) parts.push('project=' + encodeURIComponent(f.project))
   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.project || (f.q && f.q.trim())))
 
 // Every row, flat: the daemon's `rows`, or an older daemon's groups.
 export function prRows(d) {
@@ -192,13 +256,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 +274,28 @@ 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 } = {}) {
+// 0.9.0: the project a PR is in: the one holding its GitHub repo, else the
+// project of a session it's linked to. projects: GET /v1/projects' list.
+export function prProjectOf(r, projects = []) {
+  const repo = String((r && r.pr && r.pr.repo) || '').toLowerCase()
+  const p = repo && (projects || []).find((x) => (x.repos || []).some((y) => y.github && y.github.toLowerCase() === repo))
+  if (p) return p.id
+  const s = ((r && r.sessions) || []).find((x) => x && x.repoProject)
+  return s ? s.repoProject.id : null
+}
+export const inPrProject = (r, id, projects = []) => !id || prProjectOf(r, projects) === id
+export function filterPrRows(rows, f = {}, { skip = null, me = null, projects = [] } = {}) {
   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 === 'project' || inPrProject(r, f.project, projects)) && (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) }
 }
 
@@ -237,37 +307,58 @@ 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 }
+// 0.9.0: Merged and Closed fold to one row each ("Merged · 17 ›"), opened on a
+// tap and remembered like Quiet; open when it's the bucket you picked or all there is.
+export const DONE_GROUPS = ['merged', 'closed']
+export const isOpenPr = (r) => !['merged', 'closed'].includes(String((r && r.pr && r.pr.state) || '').toLowerCase())
+function doneGroupHtml(g, { open, rowOpts }) {
+  return '<details class="prgroup done b-' + g.key + '" data-group="' + g.key + '"' + (open ? ' open' : '') + '><summary><h2>' + esc(g.label) + ' <span class="count">' + g.rows.length + '</span><span class="chev" aria-hidden="true">›</span></h2></summary>' + g.rows.map((r) => prRowHtml(r, rowOpts(r))).join('') + '</details>'
+}
+export function prsBodyHtml(d, { view = 'mine', now = Date.now(), mayEdit = true, sessionAction = null, filter = {}, open = null, details = null, quietOpen = false, doneOpen = null, projects = [] } = {}) {
+  const f = { repos: [], state: null, q: '', project: null, ...filter }
+  if (f.project && !(projects || []).some((p) => p.id === f.project)) f.project = null
   const all = prRows(d)
+  const me = d.me || null
   let h = ''
   if (all.length) {
+    // 0.9.0: projects first (when you have any), then the repos in the picked one
+    if ((projects || []).length) {
+      const pCount = filterPrRows(all, f, { skip: 'project', me, projects }).filter(isOpenPr) // 0.9.0: counts are open PRs
+      const n = new Map()
+      for (const r of pCount) { const id = prProjectOf(r, projects); if (id) n.set(id, (n.get(id) || 0) + 1) }
+      h += chipRow('Filter by project', [fchip({ on: !f.project, count: pCount.length, label: 'All projects', cls: 'all', attrs: 'data-action="prs-filter" data-k="project" data-v=""' })]
+        .concat(projects.map((p) => fchip({ on: f.project === p.id, count: n.get(p.id) || 0, label: (p.emoji ? p.emoji + ' ' : '') + p.name, cls: 'pchip', attrs: 'data-action="prs-filter" data-k="project" data-v="' + esc(p.id) + '"' }))), 'prs-projects')
+    }
     // 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 })
+    const inProj = f.project ? all.filter((r) => inPrProject(r, f.project, projects)) : all
+    const repoCount = filterPrRows(all, f, { skip: 'repos', me, projects }).filter(isOpenPr) // 0.9.0: counts are open PRs
+    let chips = prRepoChips(inProj, { 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')
+    // 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, projects })
+    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, projects })
+  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 += DONE_GROUPS.includes(g.key) ? doneGroupHtml(g, { open: !!(doneOpen && doneOpen[g.key]) || f.state === g.key || !groups.some((x) => !DONE_GROUPS.includes(x.key)), rowOpts }) : '<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>'

package/ui/repos.js

@@ -133,18 +133,38 @@ export function readFilter(params, storage) {
     try { const v = storage && storage.getItem(STORE_KEY); repos = v ? JSON.parse(v) : [] ; if (repos.length) from = 'storage' } catch { repos = [] }
     if (!Array.isArray(repos)) repos = []
   }
+  // 0.9.0: the project (its id) the same way: the hash first, else this browser's last pick
+  let project = null
+  if (p.has('project')) { project = p.get('project') || null; if (from === 'none') from = 'hash' }
+  else if (!p.has('repo')) { try { project = (storage && storage.getItem(PROJECT_KEY)) || null } catch {} ; if (project && from === 'none') from = 'storage' }
   const status = p.get('status')
-  return { repos: [...new Set(repos.map(String))], status: status && STATUS_FILTERS[status] ? status : null, from }
+  return { repos: [...new Set(repos.map(String))], status: status && STATUS_FILTERS[status] ? status : null, project, from }
 }
 
+export const PROJECT_KEY = 'cp.project'
+export function saveProject(storage, id) {
+  try { if (!storage) return; if (id) storage.setItem(PROJECT_KEY, id); else storage.removeItem(PROJECT_KEY) } catch {}
+}
+// 0.9.0: a session in a project (its repo's, by id); no project picked = every session.
+export function inProject(s, id) { return !id || !!(s && s.repoProject && s.repoProject.id === id) }
+// The project chips: every project (they are yours, so a zero still shows),
+// with the count of `sessions` in each. -> [{ id, name, emoji, count }]
+export function projectChips(projects, sessions) {
+  const n = new Map()
+  for (const s of sessions || []) if (s && s.repoProject) n.set(s.repoProject.id, (n.get(s.repoProject.id) || 0) + 1)
+  return (projects || []).map((p) => ({ id: p.id, name: p.name, emoji: p.emoji || null, count: n.get(p.id) || 0 }))
+}
+export const projectLabel = (p) => (p ? (p.emoji ? p.emoji + ' ' : '') + p.name : '')
+
 export function saveRepos(storage, repos) {
   try { if (!storage) return; if (repos && repos.length) storage.setItem(STORE_KEY, JSON.stringify(repos)); else storage.removeItem(STORE_KEY) } catch {}
 }
 
 // The board's hash for a filter: "#/", "#/?repo=clutch_hunt",
 // "#/?repo=a,b&status=active". Commas and slashes stay readable.
-export function filterHash({ repos = [], status = null } = {}) {
+export function filterHash({ repos = [], status = null, project = null } = {}) {
   const parts = []
+  if (project) parts.push('project=' + encodeURIComponent(project))
   if (repos.length) parts.push('repo=' + repos.map((r) => encodeURIComponent(r).replace(/%2F/gi, '/')).join(','))
   if (status) parts.push('status=' + encodeURIComponent(status))
   return '#/' + (parts.length ? '?' + parts.join('&') : '')
@@ -206,7 +226,7 @@ export function searchMatches(s, q, extra = []) {
   const words = String(q || '').toLowerCase().trim().split(/\s+/).filter(Boolean)
   if (!words.length) return true
   const cp = s.lastCheckpoint || null
-  const hay = [s.title, s.repoLabel, s.repoName, s.repo && s.repo.branch, s.repo && s.repo.github, s.worktree && s.worktree.name, s.worktree && s.worktree.branch, s.cwd, s.lastPreview, s.firstPrompt, s.machine,
+  const hay = [s.title, s.repoLabel, s.repoName, s.repoProject && s.repoProject.name, s.repo && s.repo.branch, s.repo && s.repo.github, s.worktree && s.worktree.name, s.worktree && s.worktree.branch, s.cwd, s.lastPreview, s.firstPrompt, s.machine,
     cp && cp.doing, cp && cp.next, cp && cp.stoppedAt, ...extra].filter(Boolean).map((h) => String(h).toLowerCase())
   const id = String(s.id || '').toLowerCase()
   const short = String(s.shortId || '').toLowerCase()