@leftoff/cli 0.6.8 → 0.7.0

package/ui/handoffs.js

@@ -0,0 +1,184 @@
+// To do and Files (0.7.0). Pure HTML builders over what the daemon sends:
+// /v1/needs .todos ({ open, done }) and a session's todos / files / filesSummary.
+// app.js does the fetching and wires the clicks. renderDoc is the viewer's
+// Markdown: everything is escaped first, so raw HTML in a doc shows as text and
+// never runs; links open only for https. Unit tests: test/unit/handoffs-ui.test.mjs.
+import { mdInline } from './changelog-md.js'
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+const plural = (n, one, many) => n + ' ' + (n === 1 ? one : many || one + 's')
+const safeArtifact = (u) => (/^https:\/\/claude\.ai\/code\/artifact\/[A-Za-z0-9_-]{4,80}$/.test(String(u || '')) ? String(u) : '')
+
+// ------------------------------------------------------------------ to-dos
+
+export function todoRow(t, { agoFn = null, mayEdit = true } = {}) {
+  const codes = (t.codes || []).map((c) => '<button type="button" class="todo-code" data-action="copy-cmd" data-cmd="' + esc(c) + '" title="Copy"><code>' + esc(c.length > 60 ? c.slice(0, 57) + '…' : c) + '</code><span class="todo-cp" aria-hidden="true">Copy</span></button>').join('')
+  const meta = [t.manual ? 'you added' : null, agoFn && t.at ? agoFn(t.at) : null].filter(Boolean).join(' · ')
+  return '<li class="todo" data-todo="' + esc(t.key) + '"><label class="todo-check"><input type="checkbox" data-todo-done="' + esc(t.key) + '"' + (mayEdit ? '' : ' disabled') + ' aria-label="Done: ' + esc(t.text) + '"><span class="box" aria-hidden="true"></span></label>' +
+    '<div class="todo-main"><div class="todo-text">' + mdInline(t.text) + '</div>' + (codes ? '<div class="todo-codes">' + codes + '</div>' : '') + (meta ? '<div class="todo-meta">' + esc(meta) + '</div>' : '') + '</div></li>'
+}
+
+export function todoAddForm(sessionId = '') {
+  return '<form class="todo-add addform" data-todo-add="' + esc(sessionId || '-') + '" autocomplete="off"><input type="text" name="todo" maxlength="200" placeholder="Add a to-do" aria-label="Add a to-do" enterkeyhint="done"><button type="submit" class="btn sm">Add</button></form>'
+}
+
+// Open to-dos grouped by session (your own, with no session, last).
+export function groupTodos(open = []) {
+  const groups = new Map()
+  for (const t of open) {
+    const id = (t.session && t.session.id) || ''
+    if (!groups.has(id)) groups.set(id, { session: t.session || null, items: [] })
+    groups.get(id).items.push(t)
+  }
+  return [...groups.values()].sort((a, b) => (!a.session) - (!b.session) || String(b.items[b.items.length - 1].at || '').localeCompare(String(a.items[a.items.length - 1].at || '')))
+}
+
+export function doneTodosHtml(done = [], { open = false, agoFn = null } = {}) {
+  if (!done.length) return ''
+  return '<details class="dismissed todo-done-list"' + (open ? ' open' : '') + '><summary>Done (' + done.length + ')</summary><ul>' +
+    done.slice(0, 100).map((d) => '<li><div class="dl-main"><span class="dl-title">' + mdInline(d.text) + '</span>' + (d.session ? '<span class="dl-line">' + esc(d.session.title) + '</span>' : '') +
+      (agoFn && d.doneAt ? '<span class="dl-at">done ' + esc(agoFn(d.doneAt)) + '</span>' : '') + '</div>' +
+      '<button type="button" class="btn sm" data-action="todo-restore" data-todo="' + esc(d.key) + '">Restore</button></li>').join('') +
+    '</ul>' + (done.length > 1 ? '<button type="button" class="linkish" data-action="todo-restore-all">Restore all</button>' : '') + '</details>'
+}
+
+// The Needs view's "To do" section.
+export function todosSection(ov, { agoFn = null, mayEdit = true, doneOpen = false, repos = [] } = {}) {
+  const open = ((ov && ov.open) || []).filter((t) => !repos.length || (t.session && repos.includes(t.session.repoLabel)) || !t.session)
+  const head = '<div class="needs-head todo-head"><h2>To do <span class="count">' + open.length + '</span></h2><span class="sub">Steps sessions handed back to you, and your own</span></div>'
+  const body = open.length
+    ? groupTodos(open).map((g) => '<div class="todo-group">' + (g.session ? '<div class="todo-sess"><a href="#/s/' + encodeURIComponent(g.session.id) + '">' + esc(g.session.title) + '</a>' + (g.session.repoLabel ? '<span class="chip mono">' + esc(g.session.repoLabel) + '</span>' : '') + '</div>' : '<div class="todo-sess"><span>Your to-dos</span></div>') +
+      '<ul class="todos">' + g.items.map((t) => todoRow(t, { agoFn, mayEdit })).join('') + '</ul></div>').join('')
+    : '<div class="nocp">No to-dos. When a session says you need to do something yourself (run a command, set a secret, add DNS records), it shows up here.</div>'
+  return '<section class="todos-sec mt" aria-label="To do">' + head + (mayEdit ? todoAddForm('') : '') + body + doneTodosHtml((ov && ov.done) || [], { open: doneOpen, agoFn }) + '</section>'
+}
+
+// A session page's to-dos.
+export function sessionTodosSection(s, { agoFn = null, mayEdit = true } = {}) {
+  const list = s.todos || []
+  if (!list.length && !mayEdit) return ''
+  return '<h2>To do <span class="count">' + list.length + '</span></h2>' +
+    (list.length ? '<ul class="todos">' + list.map((t) => todoRow(t, { agoFn, mayEdit })).join('') + '</ul>' : '') + (mayEdit ? todoAddForm(s.id) : '')
+}
+
+// ------------------------------------------------------------------ chips
+
+export function filesChipLabel(fs, { compact = false } = {}) {
+  if (!fs) return ''
+  const parts = []
+  const docs = (fs.docs || 0) + (fs.plans || 0)
+  if (docs) parts.push(compact ? docs + (docs === 1 ? ' doc' : ' docs') : plural(docs, 'doc'))
+  if (fs.artifacts) parts.push(plural(fs.artifacts, 'artifact'))
+  return parts.join(' · ')
+}
+// The card's small chips: "2 to-dos" and "2 docs · 1 artifact".
+export function cardHandoffChips(s) {
+  const n = (s.todos || []).length
+  const fl = filesChipLabel(s.filesSummary)
+  if (!n && !fl) return ''
+  const href = '#/s/' + encodeURIComponent(s.id)
+  return '<div class="handoff-chips">' + (n ? '<a class="chip todochip" href="' + href + '" title="Steps handed back to you">☐ ' + esc(plural(n, 'to-do')) + '</a>' : '') +
+    (fl ? '<a class="chip fileschip" href="' + href + '" title="Docs and artifacts from this session">' + esc(fl) + '</a>' : '') + '</div>'
+}
+
+// ------------------------------------------------------------------ files
+
+const TYPE_ICON = { markdown: 'MD', image: 'IMG', pdf: 'PDF', html: 'HTML', text: 'TXT', other: 'FILE' }
+export function sessionFilesSection(s, { agoFn = null } = {}) {
+  const f = s.files
+  if (!f) return ''
+  const arts = (f.artifacts || []).filter((a) => safeArtifact(a.url))
+  const plans = f.plans || []
+  const docs = f.docs || []
+  if (!arts.length && !plans.length && !docs.length && !f.code) return ''
+  const when = (at) => (agoFn && at ? '<span class="f-at">' + esc(agoFn(at)) + '</span>' : '')
+  let h = '<h2>Files</h2><ul class="files-list">'
+  for (const a of arts) h += '<li class="f-art"><a class="f-row" href="' + esc(safeArtifact(a.url)) + '" target="_blank" rel="noopener noreferrer"><span class="f-ic art" aria-hidden="true">◆</span><span class="f-name">' + esc(a.title) + '</span><span class="f-kind">Artifact ↗</span>' + when(a.at) + '</a></li>'
+  for (const p of plans) h += '<li><button type="button" class="f-row" data-action="file-open" data-plan="' + esc(p.id) + '" data-session="' + esc(s.id) + '"><span class="f-ic" aria-hidden="true">PLAN</span><span class="f-name">' + esc(p.title) + '</span><span class="f-kind">Plan</span>' + when(p.at) + '</button></li>'
+  for (const d of docs) h += '<li><button type="button" class="f-row" data-action="file-open" data-path="' + esc(d.path) + '" data-session="' + esc(s.id) + '"><span class="f-ic" aria-hidden="true">' + (d.plan ? 'PLAN' : TYPE_ICON[d.type] || 'FILE') + '</span><span class="f-name mono">' + esc(d.name) + '</span><span class="f-kind ' + (d.kind === 'new' ? 'new' : '') + '">' + (d.plan ? 'Plan' : d.kind === 'new' ? 'new' : 'edited') + '</span>' + when(d.at) + '</button></li>'
+  h += '</ul>'
+  if (f.code) h += '<div class="f-code faint">' + esc(plural(f.code, 'code file')) + ' changed</div>'
+  return h
+}
+
+// ------------------------------------------------------------------ viewer
+
+// Markdown -> safe HTML: headings, paragraphs, lists, task boxes, quotes,
+// fenced code, tables, rules. Inline markup via mdInline (escaped; https links only).
+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 } }
+  while (i < lines.length) {
+    const ln = lines[i]
+    let m
+    if ((m = ln.match(/^\s*(```|~~~)\s*([\w+-]*)/))) {
+      flush()
+      const fence = m[1]; const body = []
+      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>')
+      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 (/^\s*([-*_])(\s*\1){2,}\s*$/.test(ln)) { flush(); out.push('<hr>'); i++; continue }
+    if (/^\s*>/.test(ln)) {
+      flush(); const q = []
+      while (i < lines.length && /^\s*>/.test(lines[i])) q.push(lines[i++].replace(/^\s*>\s?/, ''))
+      out.push('<blockquote>' + renderDoc(q.join('\n')) + '</blockquote>'); continue
+    }
+    if (/^\s*\|.*\|\s*$/.test(ln) && i + 1 < lines.length && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1])) {
+      flush()
+      const cells = (r) => r.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim())
+      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>')
+      continue
+    }
+    if (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(ln)) {
+      flush()
+      const ordered = /^\s*\d/.test(ln)
+      const items = []
+      while (i < lines.length && (/^\s*(?:[-*+]|\d{1,3}[.)])\s+/.test(lines[i]) || (/^\s{2,}\S/.test(lines[i]) && items.length))) {
+        const l = lines[i++]
+        const mm = l.match(/^(\s*)(?:[-*+]|\d{1,3}[.)])\s+(.*)$/)
+        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>' }
+      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
+    }
+    para.push(ln.trim()); i++
+  }
+  flush()
+  return out.join('\n')
+}
+
+// The viewer's body for a file from GET /v1/sessions/:id/file.
+export function docViewerBody(r) {
+  if (!r) return ''
+  if (r.missing) return '<div class="empty">File no longer exists</div>'
+  if (r.tooBig) return '<div class="empty">' + esc(r.message || 'Too big to open here.') + '</div>'
+  if (r.type === 'markdown') return '<article class="doc-md">' + renderDoc(r.text || '') + '</article>'
+  if (r.type === 'image') {
+    const src = r.base64 ? 'data:' + (/^image\/(png|jpeg|gif|webp)$/.test(r.mime) ? r.mime : 'application/octet-stream') + ';base64,' + r.base64
+      : r.mime === 'image/svg+xml' && typeof r.text === 'string' ? 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(r.text) : ''
+    return src ? '<div class="doc-img"><img alt="' + esc(r.name) + '" src="' + esc(src) + '"></div>' : '<div class="empty">Can’t show this image.</div>'
+  }
+  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>'
+}
+// 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 ''
+  const mime = r.type === 'html' ? 'text/plain' : r.mime || 'application/octet-stream'
+  if (typeof r.base64 === 'string') return 'data:' + mime + ';base64,' + r.base64
+  if (typeof r.text === 'string') return 'data:' + mime + ';charset=utf-8,' + encodeURIComponent(r.text)
+  return ''
+}

package/ui/index.html

@@ -29,6 +29,7 @@
       <a href="#/" data-route="board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><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"/></svg><span class="lbl">Board</span></a>
       <a href="#/waiting" data-route="waiting" id="needsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
       <a href="#/lists" data-route="lists" id="listsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
+      <a href="#/prs" data-route="prs" id="prsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
       <a href="#/timeline" data-route="timeline"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
       <a href="#/digest" data-route="digest"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
     </nav>

package/ui/prs.js

@@ -0,0 +1,128 @@
+// The PRs tab and PR rows (0.6.9). Pure HTML builders, no fetching: app.js
+// 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])
+const safeUrl = (u) => (/^https:\/\/github\.com\//.test(String(u || '')) ? String(u) : '')
+
+export function shortAgo(iso, now = Date.now()) {
+  const t = Date.parse(iso || '')
+  if (!t) return ''
+  const s = Math.max(0, Math.round((now - t) / 1000))
+  if (s < 60) return 'now'
+  if (s < 3600) return Math.round(s / 60) + 'm'
+  if (s < 86400) return Math.round(s / 3600) + 'h'
+  return Math.round(s / 86400) + 'd'
+}
+
+// ✓ 3/3, ✕ 1 failing, ◌ 2 running — the class says which.
+export function checksHtml(ck, { compact = false } = {}) {
+  if (!ck || !ck.total) return ''
+  const cls = ck.failed ? 'fail' : ck.pending ? 'pending' : 'pass'
+  const ic = { fail: '✕', pending: '◌', pass: '✓' }[cls]
+  const full = ck.summary || (ck.total - ck.failed - ck.pending) + '/' + ck.total + ' checks passed'
+  // On a card: ✕ 1/3 (failing of all), ◌ 1/2 (passed so far), ✓ 3/3.
+  const short = (ck.failed ? ck.failed : ck.total - ck.failed - ck.pending) + '/' + ck.total
+  return '<span class="pr-checks ' + cls + '"' + (compact ? ' title="' + esc(full) + '" aria-label="' + esc(full) + '"' : '') + '><span aria-hidden="true">' + ic + '</span> ' + esc(compact ? short : full) + '</span>'
+}
+const STATE = { open: 'Open', draft: 'Draft', merged: 'Merged', closed: 'Closed' }
+export function stateHtml(state) {
+  if (!state) return ''
+  return '<span class="pr-state ' + esc(state) + '">' + esc(STATE[state] || state) + '</span>'
+}
+const REVIEW = { approved: 'Approved', changes_requested: 'Changes requested', review_required: 'Review needed' }
+
+// A session card's PRs: one compact line each (#, title, state, checks), three at most.
+export function cardPrsHtml(prs) {
+  const list = (prs || []).filter((p) => p && p.number)
+  if (!list.length) return ''
+  const shown = list.slice(0, 3)
+  const more = list.length - shown.length
+  return '<div class="card-prs">' + shown.map((p) => {
+    const url = safeUrl(p.url)
+    const inner = '<span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + '<span class="pr-title">' + esc(p.title || p.repo || '') + '</span>' + checksHtml(p.checks, { compact: true })
+    return url ? '<a class="cpr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="' + esc((p.repo ? p.repo + ' ' : '') + '#' + p.number + ' on GitHub') + '">' + inner + '</a>' : '<span class="cpr">' + inner + '</span>'
+  }).join('') + (more > 0 ? '<a class="cpr more" href="#/prs">+' + more + ' more</a>' : '') + '</div>'
+}
+
+// The session page: its PRs with Unlink, and "Link a PR" (a text box: a URL or #number).
+export function sessionPrsSection(s, { mayEdit = true } = {}) {
+  const list = (s.prs || []).filter((p) => p && p.number)
+  let h = '<h2>Pull requests' + (list.length ? ' <span class="count">' + list.length + '</span>' : '') + '</h2>'
+  if (list.length) {
+    h += '<div class="prlist">' + list.map((p) => {
+      const url = safeUrl(p.url)
+      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>' +
+        (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' }
+
+// gh missing or signed out: the 0.6.5 status line with the fix to copy.
+export function ghLineHtml(g) {
+  if (!g || g.status === 'ready') return ''
+  const what = g.status === 'signed-out' ? 'gh is installed but not signed in to GitHub, so PRs can’t load.' : 'GitHub’s gh isn’t on this Mac, so PRs can’t load.'
+  let h = '<div class="ghcell prs-gh"><div class="ghrow"><span class="chip warn">' + (g.status === 'signed-out' ? 'Signed out' : 'Missing') + '</span><span class="ghwhat">' + what + '</span>' +
+    '<button type="button" class="linkish" data-action="prs-refresh">Check again</button></div>'
+  if (g.fix && g.fix.cmd) h += '<div class="joinline ghfix"><code class="cmd">' + esc(g.fix.cmd) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(g.fix.cmd) + '">Copy</button></div>'
+  if (g.fix && g.fix.url) h += '<div class="hint">Install gh from <a href="' + esc(g.fix.url) + '" target="_blank" rel="noopener">cli.github.com</a>, then run this.</div>'
+  return h + '</div>'
+}
+
+function sessionLinks(r, opts) {
+  const ss = r.sessions || []
+  if (!ss.length) return ''
+  return '<div class="pr-sessions">' + ss.slice(0, 4).map((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>'
+}
+
+// One PR row on the PRs tab.
+export function prRowHtml(r, { team = false, now = Date.now(), mayEdit = true, sessionAction = null, showMachine = false } = {}) {
+  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>' : '')
+  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)
+  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">' +
+    '<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>' : '') +
+    (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 } = {}) {
+  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('') +
+    '</div><button type="button" class="linkish" data-action="prs-refresh">Refresh</button></div>'
+  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>'
+    }
+  }
+  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
+}