@leftoff/cli 0.6.9 → 0.7.1

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/repos.js

@@ -77,7 +77,9 @@ export function repoMatches(s, token, { loose = false } = {}) {
   if (cands.includes(tok)) return true
   // "parent/base" given for a key that is ".../parent/base"
   if (tok.includes('/') && String(key).toLowerCase().endsWith('/' + tok)) return true
-  return loose && cands.some((c) => c.includes(tok))
+  if (loose && cands.some((c) => c.includes(tok))) return true
+  // 0.7.1: the other repos it belongs to (started in, edited in) find it too
+  return Array.isArray(s.alsoRepos) && s.alsoRepos.some((r) => r && r.key && repoMatches({ repoKey: r.key, repoLabel: r.label }, token, { loose }))
 }
 
 // The CLI's --repo: exact matches win; with none, a substring.