@leftoff/cli 0.6.3 → 0.6.5

package/ui/needs.js

@@ -7,6 +7,8 @@
 // the terminal can answer: Go), reply (the turn ended on a question: a reply box
 // when the mod can type it in). Nothing is ever answered without a click.
 
+import { mdInline } from './changelog-md.js'
+
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
 
@@ -35,6 +37,12 @@ export function needsLine(n) {
   return n.question || ''
 }
 
+// Dismiss (0.6.5): hides this one need on every board; a new question shows again.
+export function dismissButton(n) {
+  if (!n || !n.key) return ''
+  return '<button type="button" class="need-dismiss" data-action="need-dismiss" data-need="' + esc(n.key) + '" aria-label="Dismiss" title="Dismiss: hide this one (a new question shows again)">✕</button>'
+}
+
 const KIND_LABEL = { permission: 'Needs your OK', question: 'Question', terminal: 'Waiting in the terminal', reply: 'Asked you', agent: 'Waiting on you' }
 
 export function cardBadge(n) {
@@ -59,12 +67,13 @@ export function needPanel(n, opts = {}) {
   const dis = !may || busy ? ' disabled' : ''
   if (n.kind === 'agent') return agentNeedPanel(n, s)
   const go = opts.goButton ? opts.goButton(s) : ''
-  let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '">'
+  let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
   h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
     (opts.compact ? '' : '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' + (s.repoLabel ? '<span class="chip mono">' + esc(s.repoLabel) + '</span>' : '')) +
     (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" title="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
     '<span class="need-kind">' + esc(KIND_LABEL[n.kind] || '') + '</span>' +
-    (n.waitSec != null ? '<span class="need-wait" title="since ' + esc(n.since || '') + '">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>'
+    (n.waitSec != null ? '<span class="need-wait" title="since ' + esc(n.since || '') + '">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
+  h += needContextHtml(n, opts) + prCardHtml(n.pr)
   if (n.kind === 'permission' && n.ask) {
     const d = n.ask.describe || {}
     h += '<div class="need-what"><span class="verb">' + esc(d.verb || n.ask.tool) + '</span><code>' + esc(d.detail || '') + '</code></div>'
@@ -88,6 +97,7 @@ export function needPanel(n, opts = {}) {
       h += '<input type="text" class="qother" maxlength="500" placeholder="' + (q.options.length ? 'Or type your own answer' : 'Your answer') + '" value="' + esc(drafts['q:' + askId + ':' + qi] || '') + '" data-draft="q:' + esc(askId) + ':' + qi + '" data-submit="answer" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>'
       h += '</div>'
     })
+    h += quickRepliesHtml(n, dis)
     h += '<div class="need-actions">' + (oneTap ? '' : '') + '<button type="button" class="btn primary" data-action="ask-answer" data-choice="answer" data-submit-for="answer"' + dis + '>' + (oneTap ? 'Send typed answer' : 'Send answers') + kbdHint(opts) + '</button>' +
       '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' title="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
   } else if (n.kind === 'terminal') {
@@ -98,7 +108,7 @@ export function needPanel(n, opts = {}) {
     if (n.replyPending) h += '<div class="need-note ok">Reply sent ' + esc(opts.agoFn ? opts.agoFn(n.replyPending.at) : '') + ': “' + esc(n.replyPending.text) + '”. Claude reads it as its next prompt.</div>'
     if (n.canReply) {
       h += '<div class="reply-row"><textarea class="reply-text" rows="2" maxlength="4000" placeholder="Reply to Claude…" data-draft="reply:' + esc(s.id) + '" data-submit="reply" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>' + esc(drafts['reply:' + s.id] || '') + '</textarea>' +
-        '<button type="button" class="btn primary" data-action="reply-send" data-submit-for="reply"' + dis + '>Send' + kbdHint(opts) + '</button></div><div class="need-actions">' + go + '</div>'
+        '<button type="button" class="btn primary" data-action="reply-send" data-submit-for="reply"' + dis + '>Send' + kbdHint(opts) + '</button></div>' + quickRepliesHtml(n, dis) + '<div class="need-actions">' + go + '</div>'
     } else {
       h += '<div class="need-note">' + esc(n.why ? 'No reply box: ' + n.why + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
     }
@@ -165,16 +175,27 @@ export function agentNeedPanel(n, s = n.session || {}) {
   if (a.reply == null && n.reply) a.reply = n.reply
   if (a.replyHint == null && n.replyHint) a.replyHint = n.replyHint
   const btn = agentReplyButton(a)
-  let h = '<article class="need k-agent" data-id="' + esc(s.id) + '" data-key="' + esc('agent:' + s.id) + '">' +
+  let h = '<article class="need k-agent" data-id="' + esc(s.id) + '" data-key="' + esc('agent:' + s.id) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>' +
     '<div class="need-head">' + agentChipHtml(a) +
     '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled') + '</a>' +
-    '<span class="need-kind">' + esc(KIND_LABEL.agent) + '</span>' + (n.waitSec != null ? '<span class="need-wait">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>' +
+    '<span class="need-kind">' + esc(KIND_LABEL.agent) + '</span>' + (n.waitSec != null ? '<span class="need-wait">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>' +
     '<ul class="agent-needs">' + (n.items || []).map((x) => '<li class="plain">' + esc(x.text) + '</li>').join('') + '</ul>' +
     (btn ? '<div class="need-actions">' + btn + '</div>' : '') +
     '<div class="need-note">' + esc(agentReplyNote(a)) + '</div>'
   return h + '</article>'
 }
 
+// "Dismissed (n)" at the bottom of the Needs tab (0.6.5): what you hid that is
+// still waiting, each with Restore. list: [{ key, title, line, kind, at }]
+export function dismissedHtml(list = [], { open = false, agoFn = null } = {}) {
+  if (!list.length) return ''
+  return '<details class="dismissed"' + (open ? ' open' : '') + '><summary>Dismissed (' + list.length + ')</summary><ul>' +
+    list.map((d) => '<li><div class="dl-main"><span class="dl-title">' + esc(d.title || 'Untitled') + '</span><span class="dl-line">' + esc(String(d.line || '').slice(0, 200)) + '</span>' +
+      (agoFn && d.at ? '<span class="dl-at">dismissed ' + esc(agoFn(d.at)) + '</span>' : '') + '</div>' +
+      '<button type="button" class="btn sm" data-action="need-restore" data-need="' + esc(d.key) + '">Restore</button></li>').join('') +
+    '</ul>' + (list.length > 1 ? '<button type="button" class="linkish" data-action="need-restore-all">Restore all</button>' : '') + '</details>'
+}
+
 export function needsStrip(items, opts = {}) {
   if (!items.length) return ''
   const blocking = items.filter((i) => i.blocking).length
@@ -195,3 +216,214 @@ export function questionAnswer(questions = [], picks = {}, typed = {}) {
   })
   return { answers, allowOther: other }
 }
+
+// ---------------------------------------------------------------- context (0.6.4)
+// What Claude was doing when it asked: its last lines before the question,
+// the branch and how long ago, "Show more" for the last ~20 turns (loaded
+// from GET /v1/sessions/:id/turns, so it works through the relay too), the
+// branch's open PR, and tap-to-send quick replies.
+
+export function agoLabel(sec) {
+  if (sec == null || !isFinite(sec)) return ''
+  if (sec < 60) return 'just now'
+  if (sec < 3600) return Math.round(sec / 60) + 'm ago'
+  if (sec < 86400) return Math.round(sec / 3600) + 'h ago'
+  return Math.round(sec / 86400) + 'd ago'
+}
+
+// Claude's markdown, safely: everything is escaped first (mdInline), fenced
+// code becomes a block that scrolls sideways, "- " / "1. " lines become lists.
+export function mdBlocks(text) {
+  const out = []
+  let para = [], list = null, code = null
+  const flushPara = () => { if (para.length) { out.push('<p>' + para.map((l) => mdInline(l)).join('<br>') + '</p>'); para = [] } }
+  const flushList = () => { if (list) { out.push('<' + list.tag + '>' + list.items.map((t) => '<li>' + mdInline(t) + '</li>').join('') + '</' + list.tag + '>'); list = null } }
+  for (const raw of String(text == null ? '' : text).replace(/\r\n?/g, '\n').split('\n')) {
+    if (code) {
+      if (/^\s*(```|~~~)\s*$/.test(raw)) { out.push('<pre class="tcode"><code>' + esc(code.join('\n')) + '</code></pre>'); code = null } else code.push(raw)
+      continue
+    }
+    if (/^\s*(```|~~~)/.test(raw)) { flushPara(); flushList(); code = []; continue }
+    const li = raw.match(/^\s*(?:([-*+•])|(\d{1,3})[.)])\s+(.*)$/)
+    if (li) {
+      flushPara()
+      const tag = li[1] ? 'ul' : 'ol'
+      if (list && list.tag !== tag) flushList()
+      if (!list) list = { tag, items: [] }
+      list.items.push(li[3])
+      continue
+    }
+    if (!raw.trim()) { flushPara(); flushList(); continue }
+    flushList()
+    const hd = raw.match(/^\s*#{1,6}\s+(.*)$/)
+    if (hd) { flushPara(); out.push('<p class="th">' + mdInline(hd[1]) + '</p>'); continue }
+    para.push(raw.trim())
+  }
+  if (code) out.push('<pre class="tcode"><code>' + esc(code.join('\n')) + '</code></pre>')
+  flushPara(); flushList()
+  return out.join('')
+}
+
+// The turns "Show more" lists. turns: [{ role, text, chips: [{ label, error, n }] }]
+// The question the card already shows in its own block (0.6.5): the reply
+// kind's trailing question, or AskUserQuestion's first question.
+export function askedText(n) {
+  if (!n) return ''
+  if (n.kind === 'reply') return n.question || ''
+  if (n.kind === 'question' && n.ask) return ((n.ask.questions || [])[0] || {}).question || ''
+  return ''
+}
+
+// Loose form for matching: no markup, one space, lower case, no leading "…"
+// (a long question is kept by its end).
+const flatQ = (s) => String(s == null ? '' : s).replace(/[*_`#>]+/g, '').replace(/\s+/g, ' ').trim().toLowerCase().replace(/^…\s*/, '')
+
+// The text with the question cut off its end, or null when it doesn't end with it.
+function cutQuestion(text, question) {
+  const q = flatQ(question)
+  if (q.length < 4) return null
+  const t = String(text || '')
+  const map = [] // each char of the flat copy -> its index in t
+  let flat = ''
+  for (let i = 0; i < t.length; i++) {
+    const c = t[i]
+    if (/[*_`#>]/.test(c)) continue
+    if (/\s/.test(c)) { if (!flat || flat.endsWith(' ')) continue; flat += ' '; map.push(i); continue }
+    flat += c.toLowerCase(); map.push(i)
+  }
+  flat = flat.trimEnd()
+  if (!flat.endsWith(q.slice(-Math.min(q.length, 40)))) return null
+  let at = flat.lastIndexOf(q)
+  if (at < 0) at = flat.lastIndexOf(q.slice(0, 40))
+  if (at < 0 || at + q.length < flat.length - 2 || /^\s*…/.test(String(question))) {
+    // Only the end matched (the question was clipped): drop the last paragraph.
+    const paras = t.trimEnd().split(/\n\s*\n/)
+    paras.pop()
+    return tidyEnd(paras.join('\n\n'))
+  }
+  return tidyEnd(t.slice(0, map[at]))
+}
+// Markup the cut left open ("**" before a bold question, a "> "), not a code fence.
+const tidyEnd = (s) => s.replace(/(?:\s|[*_#>]|(?<!`)`(?!`))+$/, '')
+
+// "Show more" turns without the question the card shows below them (0.6.5):
+// when the last assistant turn ends with that question (or is the
+// AskUserQuestion call), it's cut from the turn and the turn carries a small
+// "↓ asked below" marker instead. A turn left empty is just the marker.
+export function withoutAsked(turns = [], n = null) {
+  const list = turns.slice()
+  const last = list[list.length - 1]
+  if (!n || !last || last.role !== 'assistant') return list
+  const t = { ...last, chips: (last.chips || []).slice() }
+  let asked = false
+  if (n.kind === 'question') {
+    const c = t.chips[t.chips.length - 1]
+    if (c && c.label === 'Asked you') {
+      if (c.n > 1) t.chips[t.chips.length - 1] = { ...c, n: c.n - 1 }
+      else t.chips.pop()
+      asked = true
+    }
+  }
+  const q = askedText(n)
+  if (q && t.text && !t.chips.length) {
+    const cut = cutQuestion(t.text, q)
+    if (cut != null) { t.text = cut; asked = true }
+  }
+  if (!asked) return list
+  t.asked = true
+  list[list.length - 1] = t
+  return list
+}
+
+// opts.need: the Needs item these turns belong to (its question isn't repeated).
+export function turnsHtml(turns = [], opts = {}) {
+  if (!turns.length) return '<div class="need-note">Nothing in this session’s transcript yet.</div>'
+  return '<ol class="turns">' + withoutAsked(turns, opts.need).map((t) => {
+    const body = (t.text ? '<div class="turn-text">' + mdBlocks(t.text) + '</div>' : '') +
+      ((t.chips || []).length ? '<div class="tchips">' + t.chips.map((c) => '<span class="tchip' + (c.error ? ' err' : '') + '">' + esc(c.label) + (c.n > 1 ? ' <b>×' + c.n + '</b>' : '') + '</span>').join('') + '</div>' : '')
+    const mark = t.asked ? '<div class="turn-asked">↓ asked below</div>' : ''
+    if (t.asked && !body) return '<li class="turn claude asked-only">' + mark + '</li>'
+    return '<li class="turn ' + (t.role === 'user' ? 'you' : 'claude') + '"><div class="turn-who">' + (t.role === 'user' ? 'You' : 'Claude') + '</div>' + body + mark + '</li>'
+  }).join('') + '</ol>'
+}
+
+// opts.expanded: { [sessionId]: true }, opts.turns: { [sessionId]: { turns } | { error } }
+export function needContextHtml(n, opts = {}) {
+  const c = n.context
+  const s = n.session || {}
+  if (!c || n.kind === 'agent') return ''
+  const lines = (c.lines || []).filter(Boolean)
+  const where = [opts.compact && s.repoLabel ? s.repoLabel : '', c.branch ? '⎇ ' + c.branch : ''].filter(Boolean)
+  const when = n.waitSec != null ? (n.kind === 'reply' ? 'asked ' : '') + agoLabel(n.waitSec) : ''
+  const canMore = !!c.transcript || !!n.peer
+  if (!lines.length && !where.length && !canMore) return ''
+  const open = !!(opts.expanded && opts.expanded[s.id])
+  const loaded = opts.turns && opts.turns[s.id]
+  let h = '<div class="need-ctx' + (open && loaded && !loaded.error ? ' open' : '') + '">'
+  if (lines.length) h += '<div class="ctx-lines">' + lines.map((l) => '<p>' + mdInline(String(l).replace(/^\s*(?:[-*+]|\d{1,3}[.)])\s+/, (m) => /\d/.test(m) ? m.trim() + ' ' : '• ')) + '</p>').join('') + '</div>'
+  h += '<div class="ctx-meta">' + (where.length ? '<span class="mono">' + esc(where.join(' · ')) + '</span>' : '') + (where.length && when ? '<span aria-hidden="true"> · </span>' : '') + (when ? '<span>' + esc(when) + '</span>' : '') +
+    (canMore ? '<button type="button" class="linkbtn need-more" data-action="need-more" data-id="' + esc(s.id) + '" aria-expanded="' + open + '">' + (open ? 'Show less' : 'Show more') + '</button>' : '') + '</div>'
+  if (open) h += '<div class="need-turns">' + (!loaded ? '<div class="need-note">Loading the last turns…</div>' : loaded.error ? '<div class="need-note warn">' + esc(loaded.error) + '</div>' : turnsHtml(loaded.turns, { need: n })) + '</div>'
+  return h + '</div>'
+}
+
+// The branch's open pull request (from gh on the machine running the session).
+export function prCardHtml(pr) {
+  if (!pr || !pr.number) return ''
+  const url = httpsOnly(pr.url)
+  const ck = pr.checks || {}
+  const cls = ck.failed ? 'fail' : ck.pending ? 'pending' : ck.total ? 'pass' : 'none'
+  const icon = { fail: '✕', pending: '◌', pass: '✓', none: '' }[cls]
+  const inner = '<span class="pr-top"><span class="pr-num">#' + esc(pr.number) + '</span><span class="pr-state ' + esc(pr.state || 'open') + '">' + (pr.state === 'draft' ? 'Draft' : 'Open') + '</span>' +
+    (ck.summary ? '<span class="pr-checks ' + cls + '">' + (icon ? '<span aria-hidden="true">' + icon + '</span> ' : '') + esc(ck.summary) + '</span>' : '') + '</span>' +
+    '<span class="pr-title">' + esc(pr.title || '') + '</span>'
+  return url ? '<a class="need-pr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="Open the pull request on GitHub">' + inner + '<span class="pr-go" aria-hidden="true">↗</span></a>'
+    : '<div class="need-pr">' + inner + '</div>'
+}
+
+export const GENERIC_REPLIES = ['Yes, go ahead', 'No', 'Show me the diff first']
+const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1)
+
+// "Should I also add Google sign-in, or keep it email-only?" -> the two choices.
+export function orChoices(question) {
+  const q = String(question || '').replace(/\s+/g, ' ').trim()
+  const last = (q.match(/[^.!?]*\?\s*$/) || [''])[0].trim()
+  const m = last.match(/^(?:so\s+|and\s+)?(?:should|shall|do you want me to|want me to|would you like me to|would you rather I|can|could)\s+(?:i|we)?\s*(?:also\s+|just\s+|first\s+)?(.+?),?\s+or\s+(?:should\s+(?:i|we)\s+|do you want me to\s+|would you rather\s+)?(.+?)\s*\?$/i)
+  if (!m) return []
+  const a = m[1].trim(), b = m[2].trim().replace(/^(?:i|we)\s+/i, '')
+  if (!a || !b || /^(not|no|something else|neither|anything else)\b/i.test(b) || a.length > 60 || b.length > 60) return []
+  return [cap(a), cap(b)]
+}
+
+// 3–4 tap-to-send replies: a question's own options when it has them
+// (AskUserQuestion choices, numbered options, "X, or Y?"), else generic ones.
+export function quickReplies(n) {
+  if (!n) return []
+  if (n.kind === 'question' && n.ask) {
+    const qs = n.ask.questions || []
+    if (qs.length !== 1) return []
+    const q = qs[0]
+    if (q.options && q.options.length) return q.multiSelect ? [] : q.options.map((o) => o.label).slice(0, 4)
+    return orChoices(q.question).length ? [...orChoices(q.question), GENERIC_REPLIES[2]] : GENERIC_REPLIES
+  }
+  if (n.kind !== 'reply') return []
+  const listed = (n.context && n.context.options) || []
+  if (listed.length >= 2) return listed.slice(0, 4)
+  const alt = orChoices(n.question)
+  if (alt.length) return [...alt, GENERIC_REPLIES[2]]
+  if (/\(\s*y\s*\/\s*n\s*\)|\byes or no\b/i.test(String(n.question || ''))) return ['Yes', 'No']
+  return GENERIC_REPLIES
+}
+
+// Under the answer box. A question whose options are already one-tap buttons
+// gets none (they'd be the same buttons twice); nothing to type into, none.
+export function quickRepliesHtml(n, dis = '') {
+  if (n.kind === 'reply' && !n.canReply) return ''
+  if (n.kind === 'question' && n.ask) {
+    const qs = n.ask.questions || []
+    if (qs.length !== 1 || (qs[0].options || []).length) return ''
+  }
+  const list = quickReplies(n)
+  if (!list.length) return ''
+  return '<div class="quick-replies" role="group" aria-label="Quick replies">' + list.map((t) => '<button type="button" class="qr" data-action="quick-reply" data-text="' + esc(t) + '"' + dis + '>' + esc(t) + '</button>').join('') + '</div>'
+}

package/ui/repos.js

@@ -151,8 +151,15 @@ export function toggleRepo(selected, chip, multi = false) {
 
 // Status AND repo. `repos` are tokens (labels); an empty list means all repos.
 export function applyFilter(sessions, { repos = [], status = null } = {}) {
-  const statuses = status ? STATUS_FILTERS[status] : null
-  return sessions.filter((s) => (!statuses || statuses.includes(s.status)) && (!repos.length || repos.some((r) => repoMatches(s, r))))
+  return sessions.filter((s) => (!status || inStatus(s, status)) && (!repos.length || repos.some((r) => repoMatches(s, r))))
+}
+// A session in a status filter. "Needs you" also counts anything with a Needs
+// item (an agent feed asking you something, a turn that ended on a question),
+// so the tile agrees with the strip and the tab's count (0.6.5).
+export function inStatus(s, status) {
+  const statuses = STATUS_FILTERS[status]
+  if (!statuses) return true
+  return statuses.includes(s.status) || (status === 'needs' && !!s.needsYou && !s.archived)
 }
 
 // Which chips show in the row and which go behind "More ▾": the top `max` by

package/ui/settings-nav.js

@@ -2,7 +2,7 @@
 // box also matches, and the old names a link may still use. Pure data, so the
 // unit tests read it too (test/unit/settings-nav.test.mjs).
 export const SETTINGS = [
-  { key: 'general', label: 'General', icon: 'sliders-horizontal', sub: 'Checkpoints, notifications and theme.', words: 'dormant gap checkpoint notify notification needs you macos theme appearance light dark system', save: true },
+  { key: 'general', label: 'General', icon: 'sliders-horizontal', sub: 'Checkpoints, notifications and theme.', words: 'dormant gap checkpoint notify notification needs you macos theme appearance light dark system pr cards pull request github gh', save: true },
   { key: 'digest', label: 'Digest', icon: 'newspaper', sub: 'When the daily digest is written.', words: 'time days weekdays every day quiet skip empty time zone schedule morning automatic', save: true },
   { key: 'spaces', label: 'Spaces', icon: 'layers', sub: 'Work, Personal or your own names, per Mac and per repo.', words: 'work personal repo override mac default standup agent feed' },
   { key: 'sync', label: 'Sync', icon: 'folder-sync', sub: 'One folder, every Mac.', words: 'syncthing pair pairing join code icloud dropbox folder move backup other macs install accept' },