@leftoff/cli 0.8.9 → 0.9.1

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,12 +80,15 @@ 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
@@ -122,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>'
@@ -146,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(' ')
@@ -214,17 +232,19 @@ export function readPrFilter(params) {
     repos: [...new Set(p.getAll('repo').flatMap(splitList))],
     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.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.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) {
@@ -254,9 +274,19 @@ 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, me = 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, me)) && 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 (0.8.9: the buckets), newest first in each; anything with no
 // activity for 14+ days in Quiet.
@@ -277,15 +307,32 @@ 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, 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', me })
-    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) {
@@ -295,14 +342,14 @@ export function prsBodyHtml(d, { view = 'mine', now = Date.now(), mayEdit = true
     // 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 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, { me })
+  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, me, open: !!(open && open.has(r.pr.url)), detail: details ? details[r.pr.url] : null })
@@ -311,7 +358,7 @@ export function prsBodyHtml(d, { view = 'mine', now = Date.now(), mayEdit = true
   } 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 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>'
+    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()