@leftoff/cli 0.9.8-beta.9 → 0.9.8

package/ui/what-it-did.js

@@ -0,0 +1,149 @@
+// 0.9.8 "What it did" (docs/plans/see-what-it-did.md): a folded section on
+// the session page with the last tools the session ran (and what they
+// printed) and its folder's uncommitted changes. Nothing loads until you open
+// it, nothing polls; ↻ reads it again. Pure HTML builders (state lives in
+// app.js) so they can be checked without a browser.
+import { icon } from './icons.js'
+import { diffBlocks, splitPath } from './diff-view.js'
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's')
+
+// The UI state for one session: { open, loading, tools, diff, toolsError,
+// diffError, toolOpen: {id: true}, toolFull: {id: view}, toolLoading: {id},
+// fileOpen: {path: true}, files: {path: view | {error}}, fileLoading: {path} }
+export function widState() {
+  return { open: false, loading: false, tools: null, diff: null, toolsError: null, diffError: null, toolOpen: {}, toolFull: {}, toolLoading: {}, fileOpen: {}, files: {}, fileLoading: {} }
+}
+
+// Short, plain words for what we can't show.
+export function hiddenText(why) {
+  if (why === 'secret_file') return 'Contents hidden: a key or env file.'
+  if (why === 'binary') return 'Binary output, not shown.'
+  return 'Not shown.'
+}
+
+const STATUS = { modified: ['M', 'Modified'], added: ['A', 'Added'], deleted: ['D', 'Deleted'], untracked: ['U', 'New, not added to git yet'], typechange: ['T', 'Type changed'] }
+
+function copyBtn(kind, key, label) {
+  return '<button type="button" class="copy-float" data-action="wid-copy" data-kind="' + kind + '" data-key="' + esc(key) + '" aria-label="' + esc(label) + '" data-tip="Copy">' + icon('copy') + '</button>'
+}
+
+export function toolRowHtml(t, ui, sid) {
+  const open = !!ui.toolOpen[t.id]
+  const full = ui.toolFull[t.id] || null
+  const v = full || t
+  const bodyId = 'wid-t-' + esc(t.id)
+  let h = '<li class="wid-item' + (t.error ? ' err' : '') + '">'
+  h += '<button type="button" class="wid-row" data-action="wid-tool" data-id="' + esc(sid) + '" data-tool="' + esc(t.id) + '" aria-expanded="' + open + '" aria-controls="' + bodyId + '">'
+  h += '<span class="wid-chev" aria-hidden="true">' + icon(open ? 'chevron-down' : 'chevron-right') + '</span>'
+  h += '<span class="wid-main"><span class="wid-label">' + esc(t.label) + (t.error ? ' <span class="wid-bad">failed</span>' : '') + (t.running ? ' <span class="wid-run">running</span>' : '') + '</span>'
+  if (t.what && !String(t.label || '').includes(t.what)) h += '<span class="wid-what mono">' + esc(t.what) + '</span>'
+  h += '</span></button>'
+  if (open) {
+    h += '<div class="wid-out" id="' + bodyId + '">'
+    if (v.running) h += '<p class="wid-note">Still running; no output yet.</p>'
+    else if (v.hidden) h += '<p class="wid-note">' + esc(hiddenText(v.hidden)) + '</p>'
+    else if (v.patch) h += '<div class="wid-pre-wrap gd-wrap"><div class="gd-slot" data-gd-path="' + esc('tool:' + t.id) + '"></div>' + copyBtn('tool', t.id, 'Copy the changes') + '</div>' // an edit: what it changed, drawn as a diff
+    else if (!v.output) h += '<p class="wid-note">No output.</p>'
+    else {
+      h += '<div class="wid-pre-wrap"><pre class="wid-pre"><code>' + esc(v.output) + '</code></pre>' + copyBtn('tool', t.id, 'Copy output') + '</div>'
+      if (v.clipped && !full) h += '<button type="button" class="btn wid-more" data-action="wid-tool-more" data-id="' + esc(sid) + '" data-tool="' + esc(t.id) + '"' + (ui.toolLoading[t.id] ? ' disabled' : '') + '>' + (ui.toolLoading[t.id] ? 'Loading…' : 'Show more') + '</button>'
+      else if (v.clipped) h += '<p class="wid-note">Cut to the first and last parts (' + esc(Math.round((v.chars || 0) / 1024)) + ' KB in all).</p>'
+    }
+    if (ui.toolLoading[t.id] === 'error') h += '<p class="wid-note">Couldn’t load more just now.</p>'
+    h += '</div>'
+  }
+  return h + '</li>'
+}
+
+export function fileRowHtml(f, ui, sid) {
+  const open = !!ui.fileOpen[f.path]
+  const [letter, word] = STATUS[f.status] || ['M', 'Modified']
+  const bodyId = 'wid-f-' + esc(encodeURIComponent(f.path).replace(/%/g, '_'))
+  const bar = '<span class="gd-bar" aria-hidden="true">' + diffBlocks(f.add, f.del).map((b) => '<i class="gd-b' + b + '"></i>').join('') + '</span>'
+  const counts = f.binary ? '<span class="wid-n">binary</span>' : f.big ? '<span class="wid-n">big</span>' : '<span class="wid-add">+' + esc(f.add) + '</span> <span class="wid-del">−' + esc(f.del) + '</span>' + bar
+  let h = '<li class="wid-item' + (open ? ' open' : '') + '">'
+  h += '<button type="button" class="wid-row wid-file" data-action="wid-file" data-id="' + esc(sid) + '" data-path="' + esc(f.path) + '" aria-expanded="' + open + '" aria-controls="' + bodyId + '">'
+  h += '<span class="wid-chev" aria-hidden="true">' + icon(open ? 'chevron-down' : 'chevron-right') + '</span>'
+  h += '<span class="wid-st st-' + esc(f.status) + '" data-tip="' + esc(word) + '" aria-label="' + esc(word) + '">' + letter + '</span>'
+  const [dir, base] = splitPath(f.path)
+  h += '<span class="wid-path mono">' + (dir ? '<span class="wid-dir">' + esc(dir) + '</span>' : '') + '<b class="wid-base">' + esc(base) + '</b></span><span class="wid-counts">' + counts + '</span></button>'
+  if (open) {
+    const v = ui.files[f.path]
+    h += '<div class="wid-out" id="' + bodyId + '">'
+    if (f.hidden) h += '<p class="wid-note">Changed; contents hidden (a key or env file).</p>'
+    else if (f.binary) h += '<p class="wid-note">Binary file, not shown.</p>'
+    else if (f.big) h += '<p class="wid-note">Too big to show here.</p>'
+    else if (ui.fileLoading[f.path]) h += '<p class="wid-note">Loading…</p>'
+    else if (!v) h += ''
+    else if (v.error) h += '<p class="wid-note">' + esc(v.error) + '</p>'
+    else if (v.hidden) h += '<p class="wid-note">Changed; contents hidden (a key or env file).</p>'
+    else if (v.binary) h += '<p class="wid-note">Binary file, not shown.</p>'
+    else if (v.big) h += '<p class="wid-note">Too big to show here.</p>'
+    else if (!v.lines) h += '<p class="wid-note">No line changes (only its mode changed).</p>'
+    // the lines themselves are drawn as DOM by diff-view.js (hydrateDiffs), never as HTML
+    else h += '<div class="wid-pre-wrap gd-wrap"><div class="gd-slot" data-gd-path="' + esc(f.path) + '"></div>' + copyBtn('file', f.path, 'Copy the changes') + '</div>'
+    h += '</div>'
+  }
+  return h + '</li>'
+}
+
+function diffHtml(ui, sid) {
+  const d = ui.diff
+  let h = '<div class="wid-sub"><h3>This folder’s changes</h3>'
+  if (d && d.folder && !d.tooBig && !d.noRepo) h += '<span class="wid-meta">' + esc(d.folder) + (d.totals && d.totals.files ? ' · ' + plural(d.totals.files, 'file') + ' · <span class="wid-add">+' + esc(d.totals.add) + '</span> <span class="wid-del">−' + esc(d.totals.del) + '</span>' : '') + '</span>'
+  h += '</div>'
+  if (ui.diffError) return h + '<p class="wid-note">' + esc(ui.diffError) + '</p>'
+  if (!d) return h + '<p class="wid-note">Loading…</p>'
+  if (d.tooBig) return h + '<p class="wid-note">Too big to show here.</p>'
+  if (d.noRepo) return h + '<p class="wid-note">' + (d.noRepo === 'not_a_repo' ? 'This folder isn’t a git repository.' : d.noRepo === 'no_git' ? 'git isn’t installed on that Mac.' : 'This session’s folder isn’t there any more.') + '</p>'
+  if (!d.files || !d.files.length) return h + '<p class="wid-note">No uncommitted changes.</p>'
+  h += '<ul class="wid-list">' + d.files.map((f) => fileRowHtml(f, ui, sid)).join('') + '</ul>'
+  if (d.truncated) h += '<p class="wid-note">Showing the first ' + d.files.length + ' of ' + esc(d.totals.files) + ' files.</p>'
+  return h + '<p class="wid-foot">Uncommitted changes in the session’s folder (staged, unstaged and new files). Other sessions in this folder show the same changes.</p>'
+}
+
+function toolsHtml(ui, sid) {
+  let h = '<div class="wid-sub"><h3>Last tools</h3></div>'
+  if (ui.toolsError) return h + '<p class="wid-note">' + esc(ui.toolsError) + '</p>'
+  if (!ui.tools) return h + '<p class="wid-note">Loading…</p>'
+  if (!ui.tools.length) return h + '<p class="wid-note">No tools run yet.</p>'
+  return h + '<ul class="wid-list">' + ui.tools.map((t) => toolRowHtml(t, ui, sid)).join('') + '</ul>'
+}
+
+// The section. s: the session; ui: widState() for it.
+export function whatItDidSection(s, ui = widState()) {
+  if (!s || s.agent) return ''
+  const sid = s.id
+  let h = '<div class="wid-head">'
+  h += '<button type="button" class="wid-toggle" data-action="wid-toggle" data-id="' + esc(sid) + '" aria-expanded="' + !!ui.open + '" aria-controls="wid-body">'
+  h += '<span class="wid-chev" aria-hidden="true">' + icon(ui.open ? 'chevron-down' : 'chevron-right') + '</span><h2>What it did</h2></button>'
+  if (ui.open) h += '<button type="button" class="icon wid-refresh" data-action="wid-refresh" data-id="' + esc(sid) + '" aria-label="Refresh" data-tip="Refresh"' + (ui.loading ? ' disabled' : '') + '>' + icon('refresh-cw') + '</button>'
+  h += '</div>'
+  if (!ui.open) return h
+  return h + '<div class="wid-body" id="wid-body">' + toolsHtml(ui, sid) + diffHtml(ui, sid) + '</div>'
+}
+
+// The text a copy button copies.
+export function copyText(ui, kind, key) {
+  if (kind === 'tool') { const v = ui.toolFull[key] || (ui.tools || []).find((t) => t.id === key); return v && v.patch ? v.patch : v && v.output ? v.output : '' }
+  if (kind === 'file') { const v = ui.files[key]; return v && v.lines ? v.lines : '' }
+  return ''
+}
+
+// What a diff slot draws: a file's lines ("path") or an edit's patch ("tool:<id>").
+export function slotSource(ui, key) {
+  const k = String(key || '')
+  if (k.startsWith('tool:')) { const id = k.slice(5); const v = ui.toolFull[id] || (ui.tools || []).find((t) => t.id === id); return v && v.patch ? v : null }
+  return ui.files[k] || null
+}
+
+// A failed load in plain words (the other Mac offline says so itself).
+export function loadError(e) {
+  const m = e && e.message ? String(e.message) : ''
+  if (e && e.status === 413) return 'Too big to show here.'
+  if (e && (e.status === 503 || /offline|didn’t answer/.test(m))) return m || 'That Mac isn’t answering right now.'
+  if (e && e.status === 404) return m || 'Not found.'
+  return m ? 'Couldn’t load: ' + m : 'Couldn’t load it just now.'
+}