@leftoff/cli 0.9.17-beta.9 → 0.9.18-beta.1

package/ui/ask.js

@@ -94,6 +94,7 @@ export function byLabel(t, { machine = null } = {}) {
   if (!by) return ''
   const on = machine ? ' on ' + machine : ''
   if (by.engine === 'claude') return 'Claude Code (' + (by.model || 'sonnet') + ', read-only)' + on + (by.readRepo === false ? ', from your notes only' : '')
+  if (by.engine === 'codex') return 'Codex (read-only)' + (by.unavailable ? ' (Claude unavailable: ' + by.unavailable + ')' : '') + on + (by.readRepo === false ? ', from your notes only' : '') // 0.9.17
   if (by.engine === 'summary') return 'From your notes (no repo reading), by ' + (by.model || by.provider || 'your summary model') + on
   if (by.engine === 'findings') return 'What I found (no model answered)' + on
   if (by.engine === 'empty') return ''

package/ui/back-line.js

@@ -5,6 +5,9 @@
 // × hides that one line for this tab (sessionStorage); a new recap or
 // checkpoint brings it back. Pure apart from the store the board passes.
 
+import { mdInline } from './changelog-md.js'
+// 0.9.19: the words are Claude's or the summarizer's, so `code` and **bold** render (escaped first, no links)
+const md = (x) => mdInline(x, { links: false })
 const MIN = 60000
 export const BACK_AWAY_MS = 30 * MIN
 export const BACK_PREFIX = 'lo-back-x:'
@@ -35,8 +38,8 @@ export function backLineHtml(s, line, { esc, icon = () => '', ago = () => '' })
   const when = line.at ? ago(line.at) : ''
   const label = line.kind === 'recap' ? 'Recap' : 'Where it stopped'
   const tip = (line.kind === 'recap' ? 'Claude Code’s recap' : 'The latest checkpoint') + (when ? ' · ' + when : '')
-  const body = line.kind === 'recap' ? esc(line.text)
-    : (line.goal ? '<span class="bl-goal">' + esc(line.goal) + '</span> · ' : '') + esc(line.stopped) + (line.next ? ' <span class="bl-next">Next: ' + esc(line.next) + '</span>' : '')
+  const body = line.kind === 'recap' ? md(line.text)
+    : (line.goal ? '<span class="bl-goal">' + md(line.goal) + '</span> · ' : '') + md(line.stopped) + (line.next ? ' <span class="bl-next">Next: ' + md(line.next) + '</span>' : '')
   return '<div class="back-line" role="note" data-key="' + esc(line.key) + '"><p data-tip="' + esc(tip) + '"><span class="rl-k">' + label + '</span> ' + body + '</p>' +
     '<button type="button" class="back-x" data-action="back-dismiss" data-id="' + esc(s.id) + '" data-key="' + esc(line.key) + '" aria-label="Hide this line" data-tip="Hide">' + icon('x') + '</button></div>'
 }

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/live-view.js

@@ -20,7 +20,7 @@ export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.en
 // a thread while it is live-linked and the how-to otherwise.
 //   -> 'none' | 'thread' | 'readonly' (a stopped headless one: no composer) | 'how'
 export function liveBoxKind(s) {
-  if (!s || s.agent || s.codingAgent === 'codex') return 'none'
+  if (!s || s.agent || (s.codingAgent === 'codex' && !s.headless)) return 'none' // 1.0: headless Codex has Live
   if (s.capture === 'hooks' && !s.headless) return 'none'
   if (s.liveLink && s.liveLink.on) return 'thread'
   if (s.headless) return 'thread' // 0.9.13: not running (Paused, Stopped): a message resumes it
@@ -123,7 +123,7 @@ const LIVE_TIP = 'Live link: send this session messages from the board or your p
 export function liveBadgeHtml(s, now = Date.now()) {
   if (!cardPills(s).live) return ''
   const w = liveWorking(s, now)
-  return ' <span class="pill live-pill' + (w ? ' working' : '') + '" title="' + (w ? 'Claude is working on a turn · ' : '') + LIVE_TIP + '">Live</span>'
+  return ' <span class="pill live-pill' + (w ? ' working' : '') + '" title="' + (w ? (s.codingAgent === 'codex' ? 'Codex' : 'Claude') + ' is working on a turn · ' : '') + LIVE_TIP + '">Live</span>'
 }
 
 // The board redraws a card (innerHTML) on every update, which would restart a
@@ -503,7 +503,7 @@ export function pendingClaudeHtml(you, { esc, ago, now = Date.now(), lvActs = nu
   if (st.phase === 'stopped') inner = (st.why && st.why.label ? whyHtml(st.why, { esc }) : '<div class="lv-text lv-none">' + esc(st.lost ? 'No reply recorded' : 'Stopped without a reply') + '</div>') + acts + toolsHtml(st, { esc, now })
   else if (st.phase === 'replied') inner = '<div class="lv-text lv-none">Replied in the terminal</div>' + toolsHtml(st, { esc, now }) // settled, its words not kept: never a Working bubble
   else inner = workingHtml(st, { esc, now })
-  return '<li class="lv lv-claude lv-pending' + (FINAL_PHASES.has(st.phase) ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st) + (acts ? '|a' + actsSig(lvActs) : ''))) + '"><div class="lv-who">Claude ' + timeHtml(st.last ? new Date(st.last).toISOString() : you.at, { esc, now }) + '</div>' + inner + '</li>'
+  return '<li class="lv lv-claude lv-pending' + (FINAL_PHASES.has(st.phase) ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st) + (acts ? '|a' + actsSig(lvActs) : ''))) + '"><div class="lv-who">' + esc(you.answerBy || 'Claude') + ' ' + timeHtml(st.last ? new Date(st.last).toISOString() : you.at, { esc, now }) + '</div>' + inner + '</li>'
 }
 
 // The whole thread: each message you sent, then Claude's side of that turn.

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>'
 }