@leftoff/cli 0.9.17-beta.8 → 0.9.17-beta.9

package/ui/side-fold.js

@@ -0,0 +1,124 @@
+// 2026-10-29 A calmer session panel (Joel: "very noisy and SUPER SCROLLY").
+// The top stays open (the head, Catch me up / Walk, the newest checkpoint's
+// Stopped + Next, PRs, To do); everything else is a one-line header with a
+// count ("Files · 12"), closed until you open it. Open/closed is kept per
+// device (localStorage lo-side-fold-v1), not per session. Pure builders,
+// unit-tested (test/unit/calmside-1029.test.mjs); app.js wires them.
+
+export const FOLD_KEY = 'lo-side-fold-v1'
+
+const escD = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
+// { key: true | false } in one key; anything unreadable is "nothing chosen yet"
+export function createFoldStore(storage) {
+  const read = () => { try { const o = JSON.parse((storage && storage.getItem(FOLD_KEY)) || '{}'); return o && typeof o === 'object' && !Array.isArray(o) ? o : {} } catch { return {} } }
+  return {
+    open(key, dflt = false) { const v = read()[key]; return typeof v === 'boolean' ? v : !!dflt },
+    set(key, open) {
+      if (!key || !/^[\w.-]{1,40}$/.test(key)) return
+      const o = read(); o[key] = !!open
+      try { storage && storage.setItem(FOLD_KEY, JSON.stringify(o)) } catch {}
+    },
+  }
+}
+
+// A section as one line: "Files · 12", a chevron; its body under it when open.
+// body: the section's own markup (it keeps its id, so its painter still works).
+export function foldHtml({ key, title, count = null, body = '', open = false, cls = '' }, { esc = escD } = {}) {
+  if (!body) return ''
+  const n = count == null || count === '' ? '' : '<span class="fs-fold-n"> · ' + esc(String(count)) + '</span>'
+  return '<details class="fs-fold' + (cls ? ' ' + cls : '') + '" data-fold="' + esc(key) + '"' + (open ? ' open' : '') + '>' +
+    '<summary class="fs-fold-h"><span class="fs-fold-t">' + esc(title) + n + '</span><svg class="fs-fold-c" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>' +
+    '<div class="fs-fold-b">' + body + '</div></details>'
+}
+
+// ------------------------------------------------------------ checkpoints
+
+// A path as the reader knows it: relative to the session's repo / worktree root,
+// else ~/ for the home folder. /Users/<u>/…/worktrees/<name>/src/a.js -> src/a.js
+export function relPath(p, { roots = [], home = '' } = {}) {
+  let s = String(p == null ? '' : p).trim()
+  if (!s) return ''
+  const rs = roots.filter((r) => typeof r === 'string' && r.length > 1).map((r) => r.replace(/\/+$/, '')).sort((a, b) => b.length - a.length)
+  for (const r of rs) if (s === r) return '.'; else if (s.startsWith(r + '/')) return s.slice(r.length + 1)
+  // a worktree folder of a tool (…/worktrees/<name>/rest): the rest
+  const wt = /^(?:\/Users\/[^/]+|\/home\/[^/]+|~)\/(?:[^/]+\/)*?(?:\.?worktrees|\.claude\/worktrees)\/[^/]+\/(.+)$/.exec(s)
+  if (wt) return wt[1]
+  const h = String(home || '').replace(/\/+$/, '')
+  if (h && s.startsWith(h + '/')) return '~/' + s.slice(h.length + 1)
+  const mh = /^\/(?:Users|home)\/[^/]+\/(.+)$/.exec(s)
+  if (mh) return '~/' + mh[1]
+  return s
+}
+// The roots a session's paths are relative to (worktree first, then repo, then its folder)
+export function rootsOf(s) {
+  const r = (s && s.repo) || {}
+  return [s && s.worktree && s.worktree.path, r.worktree, r.root, s && s.cwd].filter((x) => typeof x === 'string' && x.startsWith('/'))
+}
+
+// Files touched as chips: the first five, then "+N more" that opens the rest.
+export const FILES_SHOWN = 5
+export function filesTouchedHtml(files, { roots = [], home = '' } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(files) ? files : []).map((f) => String(f || '')).filter(Boolean)
+  if (!list.length) return ''
+  const chip = (f) => '<span class="chip mono" data-tip="' + esc(f) + '">' + esc(relPath(f, { roots, home })) + '</span>'
+  const first = list.slice(0, FILES_SHOWN), rest = list.slice(FILES_SHOWN)
+  return '<div class="files">' + first.map(chip).join('') +
+    (rest.length ? '<details class="files-more"><summary class="linkish">+' + rest.length + ' more</summary>' + rest.map(chip).join('') + '</details>' : '') + '</div>'
+}
+
+// Text a checkpoint was written from that wasn't a prompt: Claude Code's
+// wrappers (<task-notification>, <system-reminder>, a slash command's output…),
+// the same list the mod skips (mod/hooks/core.js NOT_A_PROMPT).
+const WRAPPER = /^\s*(?:Working on:\s*[“"]\s*)?(?:<(?:local-command-stdout|local-command-stderr|command-name|command-message|command-args|local-command-caveat|system-reminder|bash-input|bash-stdout|bash-stderr|user-prompt-submit-hook|task-notification|user-memory-input)\b|\[Request interrupted by user|Caveat: The messages below were generated)/
+export function isWrapperCp(cp) {
+  if (!cp) return false
+  return WRAPPER.test(String(cp.doing || '')) || (!String(cp.doing || '').trim() && WRAPPER.test(String(cp.stoppedAt || '')))
+}
+// Junk: a wrapper checkpoint written within a few minutes of another one (the
+// same moment twice). A lone one stays: it's all there is.
+export const JUNK_NEAR_MS = 5 * 60e3
+export function dropJunkCps(list) {
+  const all = Array.isArray(list) ? list : []
+  const t = (cp) => Date.parse((cp && cp.createdAt) || '')
+  return all.filter((cp) => !(isWrapperCp(cp) && all.some((o) => o !== cp && !isWrapperCp(o) && Math.abs(t(o) - t(cp)) <= JUNK_NEAR_MS)))
+}
+
+// ------------------------------------------------------------ status history
+
+// One small shape per change, the word and time in its tip (shape + word, never color alone).
+export const STATUS_SHAPE = { needs_input: '▲', active: '●', background: '◐', waiting: '◆', dormant: '○', stale: '◌', ended: '■' }
+export function statusStripHtml(changes, { label = {}, clock = (x) => x } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(changes) ? changes : []).slice(-24)
+  if (!list.length) return ''
+  return '<div class="sstrip" role="list" aria-label="Status history">' + list.map((c) => {
+    const w = label[c.status] || c.status || ''
+    const tip = w + ' · ' + clock(c.at)
+    return '<span class="ss s-' + esc(c.status) + '" role="listitem" tabindex="0" data-tip="' + esc(tip) + '" aria-label="' + esc(tip) + '">' + esc(STATUS_SHAPE[c.status] || '·') + '</span>'
+  }).join('') + '</div>'
+}
+
+// ------------------------------------------------------------ answered from the board
+
+// Where an answer came from, in the words of what actually happened. Older
+// answers said "over Tailscale" for anything from another device, the relay
+// included (src/answers.js whereFrom before 2026-10-29); they read right now.
+export function whereWords(w) {
+  let s = String(w || '').trim()
+  if (!s) return ''
+  const old = /^over Tailscale(?: as (.+?))?(?: \(through the relay\))?(?: \(relay\))?(?: · (.+))?$/.exec(s)
+  if (old && /\(through the relay\)|\(relay\)/.test(s)) return 'from ' + (old[1] || 'a paired device') + ' · via relay' + (old[2] ? ' · ' + old[2] : '')
+  return s
+}
+export const ANSWERED_SHOWN = 3
+// The newest three, "Show all N" for the rest (a <details>, so it stays put through redraws)
+export function answeredHtml(answers, { clock = (x) => x } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(answers) ? answers : []).slice().reverse()
+  if (!list.length) return ''
+  const row = (a) => '<li><span class="t">' + esc(clock(a.at)) + '</span><b>' + esc(a.summary) + '</b>' + (a.what ? ' · <span class="mono">' + esc(String(a.what).slice(0, 160)) + '</span>' : '') +
+    '<span class="where">' + esc(whereWords(a.where)) + (a.delivered === false ? ' · not picked up' : '') + '</span></li>'
+  const first = list.slice(0, ANSWERED_SHOWN), rest = list.slice(ANSWERED_SHOWN)
+  return '<ul class="answered">' + first.map(row).join('') + '</ul>' +
+    (rest.length ? '<details class="answered-more"><summary class="linkish">Show all ' + list.length + '</summary><ul class="answered">' + rest.map(row).join('') + '</ul></details>' : '') +
+    '<div class="hint">Also in answers.md in this session’s folder.</div>'
+}