@leftoff/cli 0.6.5 → 0.6.9

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
+}

package/ui/relay-client.js

@@ -152,9 +152,13 @@ function needsKey() {
   screen('Pair this browser again', '<p>This browser has a pass for ' + esc(RELAY_USER) + '.leftoff.dev but not the key that unlocks your board (it lives only in this browser, and it’s gone: private browsing, cleared website data, or another browser).</p>' +
     '<p>On a Mac: Settings → Phone &amp; remote → <b>Pair a phone</b>, then scan the QR code.</p><p><a class="btn primary" href="/pair.html">I have a code</a></p>')
 }
+let notPairedShown = false
 function notPaired(revoked) {
+  // once shown, a later 401 (the event stream, a poll) doesn't redraw it
+  if (notPairedShown) return
+  notPairedShown = true
   forgetDeviceKey()
-  screen('This browser isn’t paired anymore', '<p>' + (revoked ? 'It was revoked on one of your Macs.' : 'It was revoked, or its pass expired.') + ' Pair it again from a Mac: Settings → Phone &amp; remote → <b>Pair a phone</b>.</p><p><a class="btn primary" href="/pair.html">I have a code</a></p>')
+  screen('This browser isn’t paired anymore', '<p>' + (revoked === 'self' ? 'You revoked it.' : revoked ? 'It was revoked on one of your devices.' : 'It was revoked, or its pass expired.') + ' Pair it again from a Mac: Settings → Phone &amp; remote → <b>Pair a phone</b>.</p><p><a class="btn primary" href="/pair.html">I have a code</a></p>')
 }
 let asleepShown = false
 function asleep() {
@@ -175,6 +179,8 @@ export const leftoffRelay = {
   status: () => refreshStatus(),
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },
+  // This browser revoked itself (0.6.6).
+  unpaired() { notPaired('self') },
 }
 
 if (RELAY_USER) {

package/ui/repos.js

@@ -95,6 +95,8 @@ export const STATUS_FILTERS = {
   waiting: ['waiting'],
   dormant: ['dormant', 'stale'],
   ended: ['ended'],
+  // 0.6.7: every ended session, not just today's (the Board's Closed view)
+  closed: ['ended'],
 }
 
 export const STORE_KEY = 'cp.repos'

package/ui/settings-nav.js

@@ -9,10 +9,10 @@ export const SETTINGS = [
   { key: 'agents', label: 'Agents', icon: 'bot', sub: 'Work from AI assistants outside Claude Code.', words: 'tab feed agent key url host hosting add refresh remove' },
   { key: 'models', label: 'Models & summaries', icon: 'sparkles', sub: 'Who writes your checkpoints, and how long they are.', words: 'summarizer provider model ollama anthropic openai claude haiku sonnet opus api key server url length short long informative', save: true },
   { key: 'phone', label: 'Phone & remote', icon: 'smartphone', sub: 'Your board on your iPhone, from anywhere or over Tailscale.', words: 'use from anywhere relay leftoff.dev subdomain pair pairing device devices revoke tailscale remote access qr code sign in signed iphone home screen url app' },
-  { key: 'security', label: 'Privacy & security', icon: 'shield', sub: 'Who can answer prompts here, and machine keys.', words: 'answer answering permission prompts other machines go keys fingerprint trust privacy data protected encryption', save: true },
+  { key: 'security', label: 'Privacy & security', icon: 'shield', sub: 'Trust my paired devices, and machine keys.', words: 'answer answering permission prompts trust trusted paired devices phone other machines go keys fingerprint privacy data protected encryption advanced', save: true },
   { key: 'updates', label: 'Updates & about', icon: 'info', sub: 'Version, updates and this Mac.', words: 'update upgrade version check about machine folder what’s new whats new changelog', save: true },
 ]
-export const SETTINGS_ALIAS = { anywhere: 'phone', relay: 'phone', remote: 'phone', tailscale: 'phone', iphone: 'phone', machines: 'security', answering: 'security', privacy: 'security', summaries: 'models', summarizer: 'models', model: 'models', ai: 'models', syncthing: 'sync', pairing: 'sync', pair: 'sync', about: 'updates', update: 'updates', version: 'updates', checkpoints: 'general', appearance: 'general', theme: 'general', notify: 'general' }
+export const SETTINGS_ALIAS = { anywhere: 'phone', relay: 'phone', remote: 'phone', tailscale: 'phone', iphone: 'phone', machines: 'security', answering: 'security', trust: 'security', privacy: 'security', summaries: 'models', summarizer: 'models', model: 'models', ai: 'models', syncthing: 'sync', pairing: 'sync', pair: 'sync', about: 'updates', update: 'updates', version: 'updates', checkpoints: 'general', appearance: 'general', theme: 'general', notify: 'general' }
 // The section a route asks for: #/settings/<key>, or the old ?<key> form
 // (#/settings?spaces, ?sync, ?remote…); null means the list.
 export function settingsKeyFor(arg, paramKeys = []) {