@leftoff/cli 0.9.18-beta.3 → 0.9.18-beta.5

package/ui/semdiff.js

@@ -142,9 +142,11 @@ export function snipsByFile(st) {
   return out
 }
 // the files of a walkthrough that start folded: generated or lockfiles, and anything in Safe to skip
+// (2026-11-03 not "Tests updated to match": a test a step names, like the one that pins the bug,
+// is part of that step's story even when the rest of its lines landed in that group)
 export function skipFiles(data) {
   const out = new Set()
-  for (const g of (data && data.groups) || []) for (const f of g.files || []) out.add(f.path)
+  for (const g of (data && data.groups) || []) if (g.kind !== 'tests') for (const f of g.files || []) out.add(f.path)
   for (const f of (data && data.files) || []) if (f.generated) out.add(f.path)
   return out
 }
@@ -163,10 +165,58 @@ export function sfSet(fp, keys, open) {
     if (all.length > 30) for (const k of all.filter((x) => x !== SF_KEY + fp).slice(0, all.length - 30)) localStorage.removeItem(k)
   } catch {}
 }
-export function sfOpen(state, step, file, skip) { const k = step + '|' + file; return k in (state || {}) ? !!state[k] : fileFoldsDefault(file, skip) }
+// def: the default when nothing was chosen (null: by the file's kind)
+export function sfOpen(state, step, file, skip, def = null) { const k = step + '|' + file; return k in (state || {}) ? !!state[k] : def != null ? !!def : fileFoldsDefault(file, skip) }
+// 2026-11-03 ("Where's my diff?": steps 1 and 2 both named one new test file; step 1's row came up
+// empty and its diff showed in step 2 only). Two steps naming exactly the same lines had one id,
+// so the one drawn diff moved to the later step. Walkthroughs kept before the fix still carry the
+// shared id: the later ones get their count appended, as src/semdiff.js uniqueStepIds does. In place.
+export function uniqueStepIds(steps) {
+  const seen = new Set()
+  for (const st of steps || []) {
+    if (!st || typeof st.id !== 'string' || !st.id) continue
+    if (!seen.has(st.id)) { seen.add(st.id); continue }
+    let k = 2
+    while (seen.has(st.id + k.toString(16))) k++
+    st.id = st.id + k.toString(16)
+    seen.add(st.id)
+  }
+  return steps
+}
+// The same lines shown again by a later step: "<step id>:<snippet i>" -> { id, n } of the first
+// step (in reading order) that shows them. That first step shows them open; a later one folds
+// that file with "Also in step N", which goes there.
+export function sharedSnips(data) {
+  const first = new Map(), out = new Map()
+  for (const st of readingOrder((data && data.steps) || [], data)) {
+    ;(st.snippets || []).forEach((sn, i) => {
+      const k = sn.hunk + '\0' + sn.patch + '\0' + JSON.stringify(sn.focus || null)
+      const f = first.get(k)
+      if (!f) first.set(k, { id: st.id, n: st.n })
+      else if (f.id !== st.id) out.set(st.id + ':' + i, f)
+    })
+  }
+  return out
+}
+// "Lines 12–30", "Lines 3–5, 9" (old side: "Old lines …"), or '' with no focus
+export function focusWords(focus) {
+  if (!Array.isArray(focus) || !focus.length) return ''
+  const r = (f) => (f.from === f.to ? String(f.from) : f.from + '–' + f.to)
+  const nw = focus.filter((f) => f.side !== 'old'), od = focus.filter((f) => f.side === 'old')
+  const parts = []
+  if (nw.length) parts.push((nw.length === 1 && nw[0].from === nw[0].to ? 'Line ' : 'Lines ') + nw.map(r).join(', '))
+  if (od.length) parts.push((parts.length ? 'old ' : 'Old ') + (od.length === 1 && od[0].from === od[0].to ? 'line ' : 'lines ') + od.map(r).join(', '))
+  return parts.join(', ')
+}
+// a file of a step whose every snippet an earlier step shows: that step, else null
+export function alsoIn(st, g, shared) {
+  if (!shared || !shared.size || !g.snips.length) return null
+  const fs = g.snips.map(([, i]) => shared.get(st.id + ':' + i))
+  return fs.every((f) => f && f.id === fs[0].id) ? fs[0] : null
+}
 export const CHANGED_TIP = 'Its files changed since this walkthrough was written'
 
-function stepHtml(st, { esc, icon, done, cur, open, sid, sf = {}, skip = null, stat = null }) {
+function stepHtml(st, { esc, icon, done, cur, open, sid, sf = {}, skip = null, stat = null, shared = null, foldShared = true }) {
   const core = st.tag === 'Core'
   // 2026-10-29 several repos: the step's repo leads ("cube_cloud · src/x.ts"); one repo: the file names
   const rp = st.repo ? [st.repo] : []
@@ -178,15 +228,17 @@ function stepHtml(st, { esc, icon, done, cur, open, sid, sf = {}, skip = null, s
     '<button type="button" class="wt-rev' + (done ? ' on' : '') + '" data-action="wt-reviewed" data-id="' + esc(sid) + '" data-step="' + esc(st.id) + '" aria-pressed="' + (done ? 'true' : 'false') + '" data-tip="' + (done ? 'Reviewed · tap to undo' : 'Mark reviewed') + '">' + icon('check') + '<span>' + (done ? 'Reviewed' : 'Mark reviewed') + '</span></button></header>'
   const why = st.why ? '<div class="wt-why wt-md">' + walkBlock(st.why) + '</div>' : ''
   const byFile = snipsByFile(st)
-  const fileHead = (g, isOpen) => '<summary class="wt-sf-h" aria-label="' + esc((st.repo ? repoSplit(g.file, rp).filter(Boolean).join(' · ') : g.file) + ', ' + g.add + ' added, ' + g.del + ' removed') + '">' + icon('chevron-right', 'ic wt-g-chev') +
+  const fileHead = (g, isOpen, also) => '<summary class="wt-sf-h" aria-label="' + esc((st.repo ? repoSplit(g.file, rp).filter(Boolean).join(' · ') : g.file) + ', ' + g.add + ' added, ' + g.del + ' removed' + (also ? ', also in step ' + also.n : '')) + '">' + icon('chevron-right', 'ic wt-g-chev') +
     (stat && stat.get(g.file) ? statusHtml(stat.get(g.file), { esc, icon }) : '') +
     '<span class="mono wt-sf-p">' + esc(st.repo ? repoSplit(g.file, rp).filter(Boolean).join(' · ') : g.file) + '</span>' +
+    (also ? '<a class="wt-also" href="#wt-' + esc(also.id) + '" data-action="wt-go" data-step="' + esc(also.id) + '" data-file="' + esc(g.file) + '" data-tip="The same lines, open in step ' + also.n + '">' + icon('arrow-up') + 'Also in step ' + also.n + '</a>' : '') +
     '<span class="wt-file-n"><span class="wt-add">+' + n0(g.add) + '</span> <span class="wt-del">−' + n0(g.del) + '</span></span></summary>'
   const snips = (byFile.length > 1 ? '<div class="wt-sfa" role="group" aria-label="Files in this step"><button type="button" class="linkish wt-sfa-b" data-action="wt-sf-all" data-step="' + esc(st.id) + '" data-open="0">' + icon('chevrons-down-up') + 'Collapse all</button><button type="button" class="linkish wt-sfa-b" data-action="wt-sf-all" data-step="' + esc(st.id) + '" data-open="1">' + icon('chevrons-up-down') + 'Expand all</button></div>' : '') +
     byFile.map((g) => {
-      const isOpen = sfOpen(sf, st.id, g.file, skip)
-      return '<details class="wt-sf" data-sfk="' + esc(st.id + '|' + g.file) + '" data-step="' + esc(st.id) + '"' + (isOpen ? ' open' : '') + '>' + fileHead(g, isOpen) +
-        g.snips.map(([sn, i]) => '<div class="wt-snip">' + (sn.partial ? '<div class="wt-snip-h"><span class="faint">Part of the change</span></div>' : '') + '<div class="wt-snip-d" data-snip="' + esc(st.id) + ':' + i + '"></div></div>').join('') + '</details>'
+      const also = alsoIn(st, g, shared)
+      const isOpen = sfOpen(sf, st.id, g.file, skip, also && foldShared ? false : null)
+      return '<details class="wt-sf' + (also ? ' wt-sf-also' : '') + '" data-sfk="' + esc(st.id + '|' + g.file) + '" data-step="' + esc(st.id) + '"' + (isOpen ? ' open' : '') + '>' + fileHead(g, isOpen, also) +
+        g.snips.map(([sn, i]) => '<div class="wt-snip">' + (sn.partial ? '<div class="wt-snip-h"><span class="faint">Part of the change</span></div>' : focusWords(sn.focus) ? '<div class="wt-snip-h"><span class="faint wt-focus-w"><i class="wt-focus-g" aria-hidden="true"></i>' + esc(focusWords(sn.focus)) + ' for this step</span></div>' : '') + '<div class="wt-snip-d" data-snip="' + esc(st.id) + ':' + i + '"></div></div>').join('') + '</details>'
     }).join('')
   const show = core || open
   const lines = st.snippets.reduce((a, s) => a + s.changed, 0)
@@ -424,7 +476,8 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
     const vis = new Set(visibleSteps(steps, ui.filter).map((x) => x.id))
     const core = steps.filter((x) => x.tag === 'Core' && vis.has(x.id)), sup = steps.filter((x) => x.tag !== 'Core' && vis.has(x.id))
     const bd = data.stats.breakdown || {}
-    const one = (st) => stepHtml(st, { esc, icon, done: reviewed.has(st.id), cur: ui.cur === st.id, open: ui.open && ui.open.has(st.id), sid, sf: ui.sf || {}, skip: skipFiles(data), stat: statusMap(data) })
+    const shared = sharedSnips(data), skip = skipFiles(data), stat = statusMap(data)
+    const one = (st) => stepHtml(st, { esc, icon, done: reviewed.has(st.id), cur: ui.cur === st.id, open: ui.open && ui.open.has(st.id), sid, sf: ui.sf || {}, skip, stat, shared })
     const repos = walkRepos(data)
     // 2026-10-29 several repos: one section per repo (its header with counts), its steps in reading order
     if (repos.length) {
@@ -481,6 +534,7 @@ export function deckSlides(data, ui = {}) {
 function deckHtml(data, ui, { esc, icon, reviewed, sid }) {
   const { slides, cur } = deckSlides(data, ui)
   const steps = data.steps || []
+  const shared = sharedSnips(data)
   const total = slides.length
   const sec = (i, inner, label, extra = '') => '<section class="wt-slide' + (i === cur ? ' on' : '') + '" data-slide="' + i + '"' + extra + ' role="group" aria-roledescription="slide" aria-label="' + esc(label) + '"' + (i === cur ? '' : ' hidden') + '>' + inner + '</section>'
   let h = '<div class="wt-deck" id="wtDeck" data-cur="' + cur + '" data-n="' + total + '" tabindex="-1" aria-roledescription="slideshow" aria-label="Walkthrough slides">'
@@ -511,7 +565,7 @@ function deckHtml(data, ui, { esc, icon, reviewed, sid }) {
   slides.forEach((s, i) => {
     if (s.kind === 'step') {
       const x = s.step
-      h += sec(i, stepHtml(x, { esc, icon, done: reviewed.has(x.id), cur: false, open: true, sid, sf: ui.sf || {}, skip: skipFiles(data), stat: statusMap(data) }), 'Step ' + x.n + ' of ' + steps.length + ': ' + mdPlain(x.title), ' data-step="' + esc(x.id) + '"')
+      h += sec(i, stepHtml(x, { esc, icon, done: reviewed.has(x.id), cur: false, open: true, sid, sf: ui.sf || {}, skip: skipFiles(data), stat: statusMap(data), shared, foldShared: false /* a slide shows one step: the earlier one isn't on screen */ }), 'Step ' + x.n + ' of ' + steps.length + ': ' + mdPlain(x.title), ' data-step="' + esc(x.id) + '"')
     } else if (s.kind === 'skip') {
       const groups = data.groups || []
       const n = groups.reduce((a, g) => a + g.files.length + (g.kind === 'repeated' ? 1 : 0), 0), l = groups.reduce((a, g) => a + g.lines, 0)
@@ -649,7 +703,7 @@ export function hydrateWalkthrough(root, data, { renderDiff, renderSplit = null,
   if (!cache) { cache = new Map(); drawnFor.set(data, cache) }
   const doc = root.ownerDocument
   const sp = !!(split && renderSplit)
-  const draw = (key, patch, label, callouts) => {
+  const draw = (key, patch, label, callouts, focus = null) => {
     const ck = (sp ? 'S|' : 'U|') + key
     let node = cache.get(ck)
     if (!node) {
@@ -661,6 +715,15 @@ export function hydrateWalkthrough(root, data, { renderDiff, renderSplit = null,
       node.classList.add('wt-gd')
       node.dataset.wtk = key
       for (const g of node.querySelectorAll('.gd-gap')) g.remove()
+      // 2026-11-03 the lines this step's refs name, when it shows a hunk whole (a new file two steps share)
+      for (const f of Array.isArray(focus) ? focus : []) {
+        const sel = f.side === 'old' ? '.gd-o' : '.gd-n'
+        for (const el of node.querySelectorAll(sp ? '.gd-half' : '.gd-row')) {
+          const x = el.querySelector(sel), v = x && x.textContent !== '' ? Number(x.textContent) : NaN
+          if (v >= f.from && v <= f.to) el.classList.add('wt-focus')
+        }
+      }
+      if (Array.isArray(focus) && focus.length) node.classList.add('wt-gd-focus')
       for (const c of callouts || []) {
         const sel = c.side === 'old' ? '.gd-o' : '.gd-n'
         let row = null
@@ -692,8 +755,10 @@ export function hydrateWalkthrough(root, data, { renderDiff, renderSplit = null,
     const [sid, i] = slot.getAttribute('data-snip').split(':')
     const st = (data.steps || []).find((x) => x.id === sid)
     const sn = st && st.snippets[+i]
-    if (!sn) continue
-    slot.appendChild(draw('s:' + sid + ':' + i, sn.patch, 'Changes in ' + sn.file, st.callouts.filter((c) => c.hunk === sn.hunk))); k++
+    if (!sn) { slot.innerHTML = '<p class="faint wt-snip-none">No lines to show here.</p>'; continue } // never an empty row
+    const node = draw('s:' + sid + ':' + i, sn.patch, 'Changes in ' + sn.file, st.callouts.filter((c) => c.hunk === sn.hunk), sn.focus)
+    if (node.isConnected && root.contains(node) && !slot.contains(node)) { slot.appendChild(node.cloneNode(true)); k++; continue } // shown in another slot on this page: a copy, never moved out of it
+    slot.appendChild(node); k++
   }
   for (const slot of root.querySelectorAll('[data-group-ex]')) {
     if (slot.firstChild) continue