@leftoff/cli 0.8.0 → 0.8.5

package/ui/prs.js

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

package/ui/repos.js

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

package/ui/viewer.js

@@ -0,0 +1,51 @@
+// 0.8.3: who's looking at the board. The daemon says whether the request came
+// from another computer (a tailnet or LAN name, the relay); the browser tells
+// a phone or tablet from a desktop by its user agent. Plain functions, no DOM.
+
+// Phones and tablets (an iPad asking for the desktop site says "Macintosh"
+// but has a touch screen: maxTouchPoints > 1).
+export function isPhoneUa(ua, { maxTouchPoints = 0 } = {}) {
+  const u = String(ua || '')
+  if (/iPhone|iPod|Android.*Mobile|Mobile Safari|Windows Phone|BlackBerry|Opera Mini|IEMobile/i.test(u)) return true
+  if (/iPad|Android(?!.*Mobile)|Tablet|Silk/i.test(u)) return true
+  if (/Macintosh/.test(u) && maxTouchPoints > 1) return true
+  return false
+}
+
+// "Set up this Mac too": only a desktop browser on another computer, until
+// dismissed, and (0.8.4) only once this computer's own Leftoff didn't answer:
+// `here` is false after localLeftoffAnswers() said no, true when it answered,
+// null/undefined while not asked yet (no banner, so it never flashes).
+export function setupCandidate({ viewer, ua, maxTouchPoints = 0, dismissed = false } = {}) {
+  if (!viewer || !viewer.remote || !viewer.setup || dismissed) return false
+  return !isPhoneUa(ua, { maxTouchPoints })
+}
+export function wantsSetupBanner({ here, ...rest } = {}) {
+  return here === false && setupCandidate(rest)
+}
+
+// 0.8.4: does this computer already run Leftoff? Ask its daemon on the default
+// port (GET /v1/here: an empty 204, presence only). Chrome's Local Network
+// Access shows a permission prompt before a page may reach this computer's
+// own ports; a banner isn't worth a prompt, so when the permission isn't
+// already granted, don't ask (the daemon's tailnet check still applies).
+export const LOCAL_PORT = 7429
+export async function localLeftoffAnswers({ fetchImpl = (...a) => fetch(...a), permissions = (typeof navigator !== 'undefined' && navigator.permissions) || null, timeoutMs = 1500, port = LOCAL_PORT } = {}) {
+  if (await wouldPrompt(permissions)) return false
+  try {
+    const r = await fetchImpl('http://127.0.0.1:' + port + '/v1/here', { mode: 'cors', credentials: 'omit', cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) })
+    return r.status === 204 && r.headers.get('x-leftoff') === 'here'
+  } catch { return false }
+}
+// The permission names Chrome has used for it; a browser that knows neither has no such prompt.
+async function wouldPrompt(permissions) {
+  if (!permissions || typeof permissions.query !== 'function') return false
+  let known = false
+  for (const name of ['loopback-network', 'local-network-access']) {
+    let s
+    try { s = await permissions.query({ name }) } catch { continue }
+    known = true
+    if (s && s.state === 'granted') return false
+  }
+  return known
+}