@leftoff/cli 0.9.17-beta.9 → 0.9.17

package/ui/diff-view.js

@@ -238,19 +238,80 @@ export function renderDiff(doc, text, { label = '', numbers = true } = {}) {
       const mk = el('span', 'gd-m', MARK[r.k])
       mk.setAttribute('aria-label', r.k === 'add' ? 'added' : r.k === 'del' ? 'removed' : 'unchanged')
       row.appendChild(mk)
+      row.appendChild(lineCell(doc, el, r))
+    }
+    root.appendChild(row)
+  }
+  return root
+}
+// a line's text, the changed words marked (textContent only)
+function lineCell(doc, el, r) {
+  const c = el('span', 'gd-c')
+  if (r.w && r.w.length) {
+    let at = 0
+    for (const [s, e] of r.w) {
+      if (s > at) c.appendChild(doc.createTextNode(r.t.slice(at, s)))
+      c.appendChild(el(r.k === 'add' ? 'ins' : 'del', 'gd-x', r.t.slice(s, e)))
+      at = e
+    }
+    if (at < r.t.length) c.appendChild(doc.createTextNode(r.t.slice(at)))
+  } else if (r.t) c.textContent = r.t
+  else c.textContent = '\u200b' // keeps an empty line's height
+  return c
+}
+
+// 2026-10-30 (walkthrough round 3) the same patch side by side: old on the left,
+// new on the right, a run of removed lines beside the added lines that replaced
+// it (paired in order), unchanged lines on both sides, the @@ bars across. -> the
+// split rows: [{ k: 'line', l: rowIndex | null, r: rowIndex | null } | { k: 'span', i }],
+// indexes into parsePatch's rows (so a picked line means the same in both views).
+export function splitRows(rows) {
+  const out = []
+  let dels = [], adds = []
+  const flush = () => { const n = Math.max(dels.length, adds.length); for (let i = 0; i < n; i++) out.push({ k: 'line', l: i < dels.length ? dels[i] : null, r: i < adds.length ? adds[i] : null }); dels = []; adds = [] }
+  rows.forEach((r, i) => {
+    if (r.k === 'del') { if (adds.length) flush(); dels.push(i) } else if (r.k === 'add') adds.push(i)
+    else { flush(); out.push(r.k === 'ctx' ? { k: 'line', l: i, r: i } : { k: 'span', i }) }
+  })
+  flush()
+  return out
+}
+export function renderSplit(doc, text, { label = '' } = {}) {
+  const { rows, maxLine } = parsePatch(text)
+  const el = (tag, cls, txt) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (txt != null && txt !== '') e.textContent = txt; return e }
+  const root = el('div', 'gd gd-split gd-w' + Math.min(6, Math.max(2, String(maxLine || 1).length)))
+  if (label) root.setAttribute('aria-label', label)
+  const half = (i, side) => {
+    if (i == null) { const h = el('div', 'gd-half gd-h' + side + ' gd-empty'); h.setAttribute('aria-hidden', 'true'); return h }
+    const r = rows[i]
+    const k = r.k === 'ctx' ? 'ctx' : r.k
+    const h = el('div', 'gd-half gd-h' + side + ' gd-' + k)
+    h.dataset.ri = String(i)
+    const num = side === 'l' ? r.o : r.n
+    h.appendChild(el('span', 'gd-gut ' + (side === 'l' ? 'gd-o' : 'gd-n'), num == null ? '' : String(num)))
+    const mk = el('span', 'gd-m', MARK[k])
+    mk.setAttribute('aria-label', k === 'add' ? 'added' : k === 'del' ? 'removed' : 'unchanged')
+    h.appendChild(mk)
+    h.appendChild(lineCell(doc, el, r))
+    return h
+  }
+  for (const s of splitRows(rows)) {
+    if (s.k === 'span') {
+      const r = rows[s.i]
+      const row = el('div', 'gd-row gd-' + r.k)
+      row.dataset.ri = String(s.i)
+      row.appendChild(el('span', 'gd-gut gd-span', r.k === 'gap' ? '⋯' : ''))
       const c = el('span', 'gd-c')
-      if (r.w && r.w.length) {
-        let at = 0
-        for (const [s, e] of r.w) {
-          if (s > at) c.appendChild(doc.createTextNode(r.t.slice(at, s)))
-          c.appendChild(el(r.k === 'add' ? 'ins' : 'del', 'gd-x', r.t.slice(s, e)))
-          at = e
-        }
-        if (at < r.t.length) c.appendChild(doc.createTextNode(r.t.slice(at)))
-      } else if (r.t) c.textContent = r.t
-      else c.textContent = '\u200b' // keeps an empty line's height
+      if (r.k === 'gap') c.textContent = r.n + ' unchanged line' + (r.n === 1 ? '' : 's')
+      else if (r.k === 'hunk') { c.appendChild(el('span', 'gd-range', r.range)); if (r.ctx) { c.appendChild(doc.createTextNode(' ')); c.appendChild(el('span', 'gd-ctx', r.ctx)) } }
+      else c.textContent = r.t
       row.appendChild(c)
+      root.appendChild(row)
+      continue
     }
+    const row = el('div', 'gd-srow')
+    row.appendChild(half(s.l, 'l'))
+    row.appendChild(half(s.r, 'r'))
     root.appendChild(row)
   }
   return root

package/ui/icons.js

@@ -3,6 +3,10 @@
 // so they follow light and dark; always aria-hidden next to a text label.
 // index.html carries the nav's copies inline (no script needed to draw them).
 export const ICONS = {
+  "crosshair": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M22 12h-4M6 12H2M12 6V2M12 22v-4\"/>",
+  "columns-2": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M12 3v18\"/>",
+  "chevrons-down-up": "<path d=\"m7 20 5-5 5 5\"/> <path d=\"m7 4 5 5 5-5\"/>",
+  "chevrons-up-down": "<path d=\"m7 15 5 5 5-5\"/> <path d=\"m7 9 5-5 5 5\"/>",
   "panel-left-close": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m16 15-3-3 3-3\"/>",
   "panel-left-open": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m14 9 3 3-3 3\"/>",
   "menu": "<path d=\"M4 5h16\"/> <path d=\"M4 12h16\"/> <path d=\"M4 19h16\"/>",

package/ui/recap-line.js

@@ -3,18 +3,21 @@
 // says where the session is (the daemon drops it once you prompt again).
 // Before /clear: what this tab was doing before a /clear, with a link to it.
 // Pure: the board passes its own esc / ago / clock, so this runs under node too.
+// 0.9.19: the words are Claude's, so `code` and **bold** render (escaped first, no links).
+import { mdInline } from './changelog-md.js'
+const md = (t) => mdInline(t, { links: false })
 
 export function recapLineHtml(s, { esc, ago = () => '', clock = () => '' }) {
   const r = s && s.recap
   if (!r || !r.text) return ''
   const tip = 'Claude Code’s recap' + (r.at ? ' · ' + ago(r.at) + (clock(r.at) ? ' (' + clock(r.at) + ')' : '') : '')
-  return '<p class="recap-line" data-tip="' + esc(tip) + '"><span class="rl-k">Recap</span> ' + esc(r.text) + '</p>'
+  return '<p class="recap-line" data-tip="' + esc(tip) + '"><span class="rl-k">Recap</span> ' + md(r.text) + '</p>'
 }
 
 export function beforeClearHtml(s, { esc }) {
   const b = s && s.beforeClear
   if (!b || !b.goal) return ''
   const href = b.sessionId ? '#/s/' + encodeURIComponent(b.sessionId) : null
-  const words = esc(b.goal) + (b.stoppedAt ? ' <span class="bc-stop">· stopped at: ' + esc(b.stoppedAt) + '</span>' : '')
+  const words = md(b.goal) + (b.stoppedAt ? ' <span class="bc-stop">· stopped at: ' + md(b.stoppedAt) + '</span>' : '')
   return '<p class="before-clear"><span class="rl-k">Before /clear</span> ' + (href ? '<a href="' + esc(href) + '" data-tip="The session before /clear">' + words + '</a>' : words) + '</p>'
 }