@leftoff/cli 0.9.17-beta.9 → 0.9.17

package/ui/app.js

@@ -54,7 +54,9 @@ import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember
 import { fsSideHtml, createSideStore, railHtml, createWidthStore, clampSideWidth, sideMax, SIDE_W_STEP, SIDE_W_DEFAULT, WIDE_MIN } from './fs-side.js'
 import { fileReach, gateFileRefs } from './file-reach.js' // 2026-10-29 a path links only when its file can be read
 import { createFoldStore, foldHtml, relPath, rootsOf, filesTouchedHtml, dropJunkCps, statusStripHtml, answeredHtml, whereWords } from './side-fold.js' // 2026-10-29 a calmer session panel
-import { walkthroughHtml, hydrateWalkthrough, fmToggle, eyeCountHtml, reviewedSet, stepAfter, visibleSteps, stepPos, toMarkdown, toHtmlDoc, exportName } from './semdiff.js' // 0.9.17 Walk me through it
+import { walkthroughHtml, hydrateWalkthrough, fmToggle, eyeCountHtml, reviewedSet, stepAfter, visibleSteps, stepPos, toMarkdown, toHtmlDoc, exportName, revNextState, revNextLabel, REVNEXT_TIP, REVFINISH_TIP, sfState, sfSet, patchFor, readingOrder, SPLIT_MIN, RAIL_MIN as WT_SIDE_MIN, RAIL_MAX as WT_SIDE_MAX, RAIL_DEFAULT as WT_SIDE_DEFAULT } from './semdiff.js' // 0.9.17 Walk me through it
+import { rowsOf, pickLine, dragTo, describePicks, refsPrompt } from './walk-lines.js' // 2026-10-30 line refs for Ask
+import { spotsFor, nextSpotIndex, spotCountWords } from './walk-spots.js' // 2026-10-30 Next spot
 import { walkButtonHtml, sizeLineHtml, popContent, initPops } from './walk-pop.js' // 0.9.18 Walk me through it's size line and popover
 import { lastReply, ghostShows } from './ghost.js'
 import { digestHeadline, todayHidden, hideToday, todayCardHtml } from './today.js' // 0.9.16 the board's Today card // 0.9.16 the suggested next message // 0.9.16 the session panel beside full screen
@@ -66,7 +68,7 @@ import { copyButtonHtml, copyClick } from './copy-msg.js' // 0.9.11: Copy on Cla
 import { codeCopyClick } from './code-copy.js' // 0.9.15: Copy on code blocks
 import { refBody, refErrorBody, refBarHtml, sizeLabel as refSize } from './file-view.js' // 0.9.15: open a file from a message
 import { refAgainst } from './file-links.js'
-import { hydrateDiffs, renderDiff } from './diff-view.js' // 0.9.8: a file's changes drawn like GitHub's
+import { hydrateDiffs, renderDiff, renderSplit } from './diff-view.js' // 0.9.8: a file's changes drawn like GitHub's
 import { loginBannersHtml, loginSig, dismissedKeys as loginDismissed, dismissLogin, offerDismissed as loginOfferOff, dismissOffer as loginDismissOffer } from './login-banner.js' // 0.9.14 Claude login expiry
 import { isDone, stillWorking, canMarkDone, DONE_CONFIRM, DONE_TIP, UNDONE_TIP, doneChipHtml } from './done.js' // 0.9.15 Done
 import { mountTerminal, escInTerminal } from './term.js' // 0.9.15 the embedded terminal
@@ -250,6 +252,7 @@ document.addEventListener('keydown', (e) => {
   if (!isNavKey(e, { typing, term, mac: navMac }) || !navRailQ.matches) return
   if (document.querySelector('.lo-menu, .cmdk:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden])')) return
   if ([...document.querySelectorAll('[role="dialog"][aria-modal="true"]')].some((d) => d.id !== 'navDrawer' && !d.closest('[hidden]') && d.getClientRects().length)) return
+  if (e.key === '[' && wtListUp()) return // 2026-10-30 in a walkthrough with a file list, [ folds that list (the walkthrough's own keys)
   e.preventDefault()
   toggleNav()
 }, true)
@@ -284,7 +287,7 @@ const $app = document.getElementById('app')
 const scrollKeep = createScrollKeep()
 scrollKeep.start()
 // 0.9.17 Walk me through it: which session shows it, and its view (this page only; the open one survives a reload)
-const wtUi = { sid: null, scope: new Map(), view: 'story', filter: 'all', data: new Map(), loading: new Set(), error: new Map(), cur: new Map(), code: new Set(), groups: new Set(), pending: [], ask: '', node: null, sig: '', restored: false, fellBack: new Set() }
+const wtUi = { sid: null, scope: new Map(), view: 'story', filter: 'all', data: new Map(), loading: new Set(), error: new Map(), cur: new Map(), code: new Set(), groups: new Set(), pending: [], ask: '', node: null, sig: '', restored: false, fellBack: new Set(), picks: [], picksFp: '', spot: new Map(), checking: new Set() } // 2026-10-30 picks: lines picked for Ask (ui/walk-lines.js); spot: fp -> where Next spot is
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
 if (typeof MutationObserver === 'function') new MutationObserver(() => lockPulses(document)).observe(document.body, { childList: true, subtree: true })
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
@@ -1120,8 +1123,26 @@ async function wtOpen(sid, scope = null) {
   if (!isFullLive(sid)) { location.hash = fullHref(sid); return }
   if (phoneNow() && fsSheetUi.open === sid) fsSheetUi.open = null
   repaintSession(sid)
+  const had = wtUi.data.get(wtKey(sid))
+  if (had && had.status === 'ok' && !wtUi.loading.has(wtKey(sid))) wtCheck(sid) // 2026-10-30 back to one it has: shown at once, checked quietly
   wtLoad(sid)
 }
+// 2026-10-30 (asked: "is it stored in a way that we can nav away and nav back to it?") coming back to a
+// walkthrough this page already has shows it at once (no model run, no spinner) and asks the daemon,
+// quietly, whether the change moved on since (peek: it never writes one); if it did, the stale bar shows
+async function wtCheck(sid) {
+  const k = wtKey(sid)
+  if (wtUi.checking.has(k)) return
+  wtUi.checking.add(k)
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/walkthrough', { scope: wtUi.scope.get(sid) || 'session', stale: true, peek: true }, { timeoutMs: 60000 })
+    const had = wtUi.data.get(k)
+    if (r && r.status === 'ok' && had && !wtUi.loading.has(k) && (r.fingerprint !== had.fingerprint || JSON.stringify(r.stale || null) !== JSON.stringify(had.stale || null))) {
+      wtUi.data.set(k, r)
+      if (wtUi.sid === sid) { wtUi.sig = ''; wtFill(wtSession(sid)) }
+    }
+  } catch {} finally { wtUi.checking.delete(k) }
+}
 function wtClose() {
   const sid = wtUi.sid
   document.documentElement.classList.remove('wt-open')
@@ -1147,30 +1168,47 @@ async function wtSizeFetch(sid) {
   try { data = await api('GET', '/v1/sessions/' + encodeURIComponent(sid) + '/change-size' + (sc === 'checkpoint' || sc === 'session' ? '?scope=' + sc : '')) } catch { data = e.data || null } // an older Mac: no line
   wtSize.set(sid, { at: Date.now(), data, pending: false })
   for (const slot of document.querySelectorAll('.fs-wt-size[data-id="' + CSS.escape(sid) + '"]')) {
-    slot.innerHTML = sizeLineHtml(data, { esc, icon })
+    slot.innerHTML = sizeLineHtml(data, { esc, icon, reviewed: wtRevCount(wtSession(sid), data) })
     const b = slot.closest('.fs-wt'); if (b) b.classList.toggle('none', !!(data && data.files === 0))
   }
   if (loPop) loPop.refresh('wt', sid)
 }
+// 2026-10-30 the sidebar's "3 of 7 reviewed": your marks on the walkthrough change-size names (pending ones too)
+function wtRevCount(s, size) {
+  const fp = size && size.walk && size.walk.fp
+  if (!s || !fp) return 0
+  const rev = reviewedSet(s, fp)
+  for (const x of wtUi.pending) if (x.fp === fp) { if (x.on) rev.add(x.step); else rev.delete(x.step) }
+  return rev.size
+}
+function wtSizeRepaint(sid) {
+  const data = (wtSize.get(sid) || {}).data
+  for (const slot of document.querySelectorAll('.fs-wt-size[data-id="' + CSS.escape(sid) + '"]')) slot.innerHTML = sizeLineHtml(data, { esc, icon, reviewed: wtRevCount(wtSession(sid), data) })
+}
 let loPop = null
 // 0.9.17: nothing new since the last checkpoint → the whole session, with a quiet note ("No changes" only when that's empty too)
 function wtFallBack(sid) { wtUi.scope.set(sid, 'session'); wtUi.fellBack.add(sid); wtRemember() }
-async function wtLoad(sid, { fresh = false } = {}) {
+// 2026-10-30 stale: true: with nothing written for this exact diff, the daemon hands back the newest
+// walkthrough it kept for this session and scope, marked stale, instead of a model run (Update: update)
+async function wtLoad(sid, { fresh = false, update = false } = {}) {
   const k = wtKey(sid)
   const had = wtUi.data.get(k)
-  if (!fresh && had && had.status === 'empty' && wtUi.scope.get(sid) === 'checkpoint') { wtFallBack(sid); return wtLoad(sid) }
-  if (wtUi.loading.has(k) || (wtUi.data.has(k) && !fresh)) return wtFill(wtSession(sid))
+  if (!fresh && !update && had && had.status === 'empty' && wtUi.scope.get(sid) === 'checkpoint') { wtFallBack(sid); return wtLoad(sid) }
+  if (wtUi.loading.has(k) || (wtUi.data.has(k) && !fresh && !update)) return wtFill(wtSession(sid))
   wtUi.loading.add(k); wtUi.error.delete(k)
   wtFill(wtSession(sid))
   try {
-    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/walkthrough', { scope: wtUi.scope.get(sid) || 'session', ...(fresh ? { fresh: true } : {}) }, { timeoutMs: 480000 }) // the session's agent: up to ~3 min a read
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/walkthrough', { scope: wtUi.scope.get(sid) || 'session', ...(fresh ? { fresh: true } : {}), ...(fresh || update ? {} : { stale: true }) }, { timeoutMs: 480000 }) // the session's agent: up to ~3 min a read
     wtUi.data.set(k, r)
     if (r && r.status === 'ok') { const st = (r.steps || [])[0]; if (st && !wtUi.cur.has(k)) wtUi.cur.set(k, st.id) }
+    // 2026-10-30 a new walkthrough comes with its marks (the ones carried over from the one before)
+    if (r && r.status === 'ok' && Array.isArray(r.reviewedSteps) && r.fingerprint) for (const x of [wtSession(sid), state.sessions.find((y) => y.id === sid)]) if (x) x.reviewed = { ...(x.reviewed || {}), [r.fingerprint]: r.reviewedSteps }
     if (r && r.status === 'no_range' && wtUi.scope.get(sid) === 'checkpoint') { wtUi.scope.set(sid, 'session'); wtUi.loading.delete(k); return wtLoad(sid) }
     if (r && r.status === 'empty' && wtUi.scope.get(sid) === 'checkpoint') { wtFallBack(sid); wtUi.loading.delete(k); return wtLoad(sid) }
   } catch (e) { wtUi.error.set(k, (e && e.message) || 'Couldn’t read the change.') }
   wtUi.loading.delete(k)
   if (wtUi.sid === sid) { wtUi.sig = ''; wtFill(wtSession(sid)) }
+  const z = wtSize.get(sid); if (z && !z.pending) { z.at = 0; wtSizeFetch(sid) } // 2026-10-30 the sidebar's reviewed count follows the walkthrough just read
 }
 // The node for the page's #wtMount: built when what it shows changed, else moved back in.
 function wtFill(s) {
@@ -1181,8 +1219,8 @@ function wtFill(s) {
   const fp = data && data.fingerprint
   const rev = reviewedSet(s, fp)
   for (const x of wtUi.pending) if (x.fp === fp) { if (x.on) rev.add(x.step); else rev.delete(x.step) }
-  const ui = { scope: wtUi.scope.get(s.id) || 'session', view: wtUi.view, filter: wtUi.filter, open: wtUi.code, groups: wtUi.groups, cur: wtUi.cur.get(k) || null, loading: wtUi.loading.has(k), error: wtUi.error.get(k) || null, ask: wtUi.ask, fellBack: wtUi.fellBack.has(s.id), deck: wtDeckOn(), slide: wtSlideGet(fp, wtUi.filter) }
-  const sig = k + '|' + (data ? (data.fingerprint || data.status) + (data.cached ? 'c' : '') : '-') + '|' + JSON.stringify([ui.view, ui.filter, ui.loading, ui.error, ui.fellBack, ui.deck, [...wtUi.code], (data && data.scopes || []).map((x) => x.key + x.available).join()])
+  const ui = { scope: wtUi.scope.get(s.id) || 'session', view: wtUi.view, filter: wtUi.filter, open: wtUi.code, groups: wtUi.groups, cur: wtUi.cur.get(k) || null, loading: wtUi.loading.has(k), error: wtUi.error.get(k) || null, ask: wtUi.ask, fellBack: wtUi.fellBack.has(s.id), deck: wtDeckOn(), slide: wtSlideGet(fp, wtUi.filter), sf: fp ? sfState(fp) : {}, split: wtSplitOn(), rail: wtRailOn(), spot: fp && wtUi.spot.has(fp) ? wtUi.spot.get(fp) : -1 }
+  const sig = k + '|' + (data ? (data.fingerprint || data.status) + (data.cached ? 'c' : '') : '-') + '|' + JSON.stringify([ui.view, ui.filter, ui.loading, ui.error, ui.fellBack, ui.deck, [...wtUi.code], (data && data.scopes || []).map((x) => x.key + x.available).join(), ui.split, data && data.stale ? data.stale.fingerprint + ':' + data.stale.count : ''])
   let node = wtUi.node
   if (!node || wtUi.sig !== sig) {
     // (the old node may be out of the page already, reading 0: what was recorded as you scrolled wins)
@@ -1196,9 +1234,10 @@ function wtFill(s) {
     node.innerHTML = walkthroughHtml({ s, data, ui, reviewed: rev, esc, icon, when })
     wtUi.node = node; wtUi.sig = sig
     mount.replaceChildren(node)
-    hydrateWalkthrough(node, data, { renderDiff, esc, icon })
+    wtHydrate(node, data)
     wtStuck(document.querySelector('.wt-scroll')) // 0.9.18
     wtDeckPaint(node, { first: true }) // 0.9.18 the slideshow: its progress, its dots in view
+    wtSideWidth(node) // 2026-10-30 the file list's width, as you left it
     const sc = node.querySelector('#wtScroll'); if (sc && keep) sc.scrollTop = keep
     const sd = node.querySelector('.wt-side'); if (sd && keepSide) sd.scrollTop = keepSide
   } else {
@@ -1211,6 +1250,7 @@ function wtFill(s) {
     }
     wtMarks(s)
   }
+  wtPicksPaint() // 2026-10-30 picked lines, their chips, the floating Ask
   if (!data && !ui.loading && !ui.error) setTimeout(() => wtLoad(s.id), 0) // opened by a reload: read it now
 }
 // 0.9.18 where each scroll box in the walkthrough was (the slide or long page, the file list, the
@@ -1252,11 +1292,11 @@ function wtMarks(s) {
   for (const g of node.querySelectorAll('.wt-ag[data-step] .wt-ag-ok')) g.hidden = !rev.has(g.closest('.wt-ag').dataset.step)
   const p = node.querySelector('#wtProg'); if (p) p.textContent = (data.steps || []).filter((x) => rev.has(x.id)).length + ' of ' + (data.steps || []).length + ' reviewed'
 }
-async function wtReviewed(sid, step) {
+async function wtReviewed(sid, step, { force = null, advance = true } = {}) {
   const s = wtSession(sid)
   const data = wtUi.data.get(wtKey(sid))
   if (!s || !data || !data.fingerprint) return
-  const on = !reviewedSet(s, data.fingerprint).has(step) || wtUi.pending.some((x) => x.fp === data.fingerprint && x.step === step && !x.on)
+  const on = force != null ? force : !reviewedSet(s, data.fingerprint).has(step) || wtUi.pending.some((x) => x.fp === data.fingerprint && x.step === step && !x.on)
   const x = { fp: data.fingerprint, step, on }
   wtUi.pending = wtUi.pending.filter((p) => !(p.fp === x.fp && p.step === step)).concat([x])
   wtMarks(s)
@@ -1268,7 +1308,20 @@ async function wtReviewed(sid, step) {
   } catch (e) { toast(e.message, 4200) }
   wtUi.pending = wtUi.pending.filter((p) => p !== x)
   wtMarks(s)
-  if (on) { const nx = stepAfter(data.steps || [], step, 1, wtUi.filter); if (nx && nx !== step) wtGo(sid, nx) }
+  wtSizeRepaint(sid) // 2026-10-30 the sidebar's reviewed count
+  if (on && advance) { const nx = stepAfter(data.steps || [], step, 1, wtUi.filter); if (nx && nx !== step) wtGo(sid, nx) }
+}
+// 0.9.19 (Joel): "Mark reviewed & next" in the slides' bar: marks the step on screen (never
+// un-marks it) and moves on; on the last step it finishes on the overview.
+function wtRevNext() {
+  const node = wtUi.node, deck = node && node.querySelector('#wtDeck'); if (!deck) return
+  const slides = [...deck.children], cur = wtDeckCur()
+  const st = revNextState(slides.map((x) => ({ step: x.dataset.step || null })), cur)
+  if (!st.show) return void wtSlideGo(cur + 1)
+  const step = slides[cur].dataset.step, sid = wtUi.sid, s = wtSession(sid), data = wtUi.data.get(wtKey(sid))
+  const done = s && data && (reviewedSet(s, data.fingerprint).has(step) || wtUi.pending.some((x) => x.fp === data.fingerprint && x.step === step && x.on)) && !wtUi.pending.some((x) => data && x.fp === data.fingerprint && x.step === step && !x.on)
+  if (!done) wtReviewed(sid, step, { force: true, advance: false })
+  wtSlideGo(st.to)
 }
 function wtGo(sid, step, { group = null } = {}) {
   const node = wtUi.node; if (!node) return
@@ -1315,6 +1368,8 @@ function wtSlideGo(i) {
   if (nav) {
     nav.querySelector('.wt-dprev').disabled = i === 0
     nav.querySelector('.wt-dnext').disabled = i === n - 1
+    const rv = nav.querySelector('#wtDrev'), rs = revNextState(slides.map((x) => ({ step: x.dataset.step || null })), i)
+    if (rv) { rv.hidden = !rs.show; const [l, sh] = revNextLabel(rs.last); rv.setAttribute('aria-label', l); rv.dataset.tip = rs.last ? REVFINISH_TIP : REVNEXT_TIP; const a1 = rv.querySelector('.wt-dl-l'), a2 = rv.querySelector('.wt-dl-s'); if (a1) a1.textContent = l; if (a2) a2.textContent = sh }
     const now = nav.querySelector('#wtDnow'); if (now) now.textContent = (slides[i].getAttribute('aria-label') || '').replace(/^Step \d+ of \d+: /, '')
     const c = nav.querySelector('#wtDcount'); if (c) c.textContent = (i + 1) + ' / ' + n
     ;[...nav.querySelectorAll('.wt-dot')].forEach((d, j) => { d.classList.toggle('cur', j === i); if (j === i) d.setAttribute('aria-current', 'step'); else d.removeAttribute('aria-current') })
@@ -1322,7 +1377,7 @@ function wtSlideGo(i) {
   if (sc) sc.scrollTop = wtSlideScroll.has(fp + '|' + i) ? wtSlideScroll.get(fp + '|' + i) : Math.min(sc.scrollTop, deck.offsetTop)
   wtSlideSet(fp, wtUi.filter, i)
   wtDeckPaint(node)
-  hydrateWalkthrough(node, data, { renderDiff, esc, icon })
+  wtHydrate(node, data)
   wtStuck(sc)
   return true
 }
@@ -1338,12 +1393,22 @@ function wtStep(dir) {
 // "Ask about this change…": the question (with the step's file:line) into the session's own chat box, not sent.
 function wtAsk(sid, text) {
   text = String(text || '').trim()
-  if (!text) return
   const data = wtUi.data.get(wtKey(sid))
+  // 2026-10-30 lines you picked: each ref and its exact lines go in with the question (ui/walk-lines.js)
+  const picks = wtPicksNow(data)
+  if (picks.length) {
+    const msg = refsPrompt(describePicks(picks, (p) => { const x = patchFor(data, p.k); return x && { rows: rowsOf(x.patch), label: x.label, stepTitle: x.stepTitle } }), text)
+    wtUi.picks = []
+    return wtAskPut(sid, msg)
+  }
+  if (!text) return
   const st = data && data.status === 'ok' ? (data.steps || []).find((x) => x.id === wtUi.cur.get(wtKey(sid))) : null
   const co = st && st.callouts[0]
   const where = st ? (co ? co.file + ':' + co.line : st.files[0] + (st.snippets[0] ? ':' + ((/^@@ -\d+(?:,\d+)? \+(\d+)/.exec(st.snippets[0].patch) || [])[1] || '') : '')).replace(/:$/, '') : ''
   const msg = (where ? 'About `' + where + '`' + (st ? ' (' + st.title + ')' : '') + ': ' : '') + text
+  wtAskPut(sid, msg)
+}
+function wtAskPut(sid, msg) {
   const k = 'live:' + sid
   const typed = ((state.drafts && state.drafts[k]) || '').trim()
   state.drafts[k] = typed ? typed + '\n\n' + msg : msg
@@ -1361,6 +1426,233 @@ function wtExport(kind) {
   const a = document.createElement('a'); a.href = url; a.download = exportName(title); document.body.appendChild(a); a.click(); a.remove()
   setTimeout(() => URL.revokeObjectURL(url), 4000)
 }
+// ---------------------------------------------------------------- 2026-10-30 walkthrough round 3
+// Line refs for Ask (asked: "reference line(s) in a file or multiple files for the ask"): a line
+// number picks it; shift-click or a drag across numbers, a range; Cmd/Ctrl-click adds another (any
+// file, any step). On a phone: tap to pick, tap another line of the same snippet to stretch it.
+// The picks show as chips over the ask box (× takes one off, the chip goes to its lines) and a
+// floating "Ask about these lines" sits by the newest one.
+function wtPicksNow(data) {
+  const fp = data && data.fingerprint
+  if (!fp || wtUi.picksFp !== fp) { wtUi.picks = []; wtUi.picksFp = fp || '' }
+  return wtUi.picks
+}
+function wtGutHit(target) {
+  const g = target && target.closest && target.closest('.wt-gd .gd-gut')
+  if (!g || g.classList.contains('gd-span') || !wtUi.node || !wtUi.node.contains(g)) return null
+  const row = g.closest('[data-ri]'), gd = g.closest('.wt-gd')
+  if (!row || !gd || !g.textContent) return null // an empty number: the other side of a split row
+  const data = wtUi.data.get(wtKey(wtUi.sid))
+  const x = patchFor(data, gd.dataset.wtk)
+  if (!x) return null
+  return { k: gd.dataset.wtk, file: x.file, step: x.step, ri: Number(row.dataset.ri), gd }
+}
+let wtDrag = null, wtPtr = 'mouse'
+document.addEventListener('pointerdown', (ev) => {
+  wtPtr = ev.pointerType || 'mouse'
+  if (wtPtr !== 'mouse' || ev.button !== 0) return
+  const at = wtGutHit(ev.target)
+  if (!at) return
+  ev.preventDefault() // no text selection while picking
+  const data = wtUi.data.get(wtKey(wtUi.sid))
+  const before = wtPicksNow(data)
+  wtUi.picks = pickLine(before, at, { shift: ev.shiftKey, add: ev.metaKey || ev.ctrlKey })
+  const i = wtUi.picks.findIndex((p) => p.k === at.k && at.ri >= p.a && at.ri <= p.b)
+  wtDrag = !ev.shiftKey && i >= 0 && wtUi.picks.length >= before.length ? { i, k: at.k } : null
+  wtPicksPaint({ focusAsk: false })
+})
+document.addEventListener('pointermove', (ev) => {
+  if (!wtDrag || !(ev.buttons & 1)) return
+  const el = document.elementFromPoint(ev.clientX, ev.clientY)
+  const row = el && el.closest && el.closest('.wt-gd[data-wtk] [data-ri]')
+  if (!row || row.closest('.wt-gd').dataset.wtk !== wtDrag.k) return
+  const next = dragTo(wtUi.picks, wtDrag.i, Number(row.dataset.ri))
+  const p = next[wtDrag.i], q = wtUi.picks[wtDrag.i]
+  if (p && q && (p.a !== q.a || p.b !== q.b)) { wtUi.picks = next; wtPicksPaint() }
+})
+document.addEventListener('pointerup', () => { wtDrag = null })
+document.addEventListener('click', (ev) => {
+  if (wtPtr === 'mouse') return
+  const at = wtGutHit(ev.target)
+  if (!at) return
+  ev.preventDefault()
+  wtUi.picks = pickLine(wtPicksNow(wtUi.data.get(wtKey(wtUi.sid))), at, { touch: true })
+  wtPicksPaint()
+}, true)
+// the picked rows marked (both drawings), the chips, the floating button
+function wtPicksPaint() {
+  const node = wtUi.node
+  if (!node) return
+  const data = wtUi.data.get(wtKey(wtUi.sid))
+  const picks = wtPicksNow(data)
+  for (const r of node.querySelectorAll('.wt-sel')) r.classList.remove('wt-sel', 'wt-sel-a', 'wt-sel-b')
+  for (const gd of node.querySelectorAll('.wt-gd[data-wtk]')) {
+    const mine = picks.filter((p) => p.k === gd.dataset.wtk)
+    if (!mine.length) continue
+    for (const r of gd.querySelectorAll('[data-ri]')) {
+      const ri = Number(r.dataset.ri)
+      const p = mine.find((x) => ri >= x.a && ri <= x.b)
+      if (!p || r.classList.contains('gd-hunk') || r.classList.contains('gd-note')) continue
+      r.classList.add('wt-sel')
+      if (ri === p.a) r.classList.add('wt-sel-a')
+      if (ri === p.b) r.classList.add('wt-sel-b')
+    }
+  }
+  const tray = node.querySelector('#wtRefs')
+  if (tray) {
+    const refs = describePicks(picks, (p) => { const x = patchFor(data, p.k); return x && { rows: rowsOf(x.patch), label: x.label } })
+    tray.innerHTML = refs.map((r, i) => '<span class="wt-ref" role="listitem"><button type="button" class="wt-ref-go mono" data-action="wt-ref-go" data-i="' + i + '" data-tip="Show these lines">' + esc(r.label) + '</button><button type="button" class="wt-ref-x" data-action="wt-ref-x" data-i="' + i + '" aria-label="' + esc('Remove ' + r.label) + '" data-tip="Remove">' + icon('x') + '</button></span>').join('') +
+      (refs.length > 1 ? '<button type="button" class="linkish wt-ref-clr" data-action="wt-ref-x" data-i="all">Clear</button>' : '')
+    tray.hidden = !refs.length
+    const inp = node.querySelector('#wtAsk')
+    if (inp) inp.placeholder = refs.length ? (refs.length === 1 ? 'Ask about these lines…' : 'Ask about these ' + refs.length + ' places…') : 'Ask about this change…'
+  }
+  wtAskLPlace()
+}
+// the floating "Ask about these lines": under the newest pick's last row, when that row is on screen
+function wtAskLPlace() {
+  const node = wtUi.node, b = node && node.querySelector('#wtAskL')
+  if (!b) return
+  // the newest pick that's on this slide or page
+  let gd = null, row = null
+  for (let i = wtUi.picks.length - 1; i >= 0 && !row; i--) {
+    const p = wtUi.picks[i]
+    gd = node.querySelector('.wt-gd[data-wtk="' + CSS.escape(p.k) + '"]')
+    row = gd && [...gd.querySelectorAll('[data-ri="' + p.b + '"]')].find((x) => x.getClientRects().length)
+  }
+  const sc = node.querySelector('#wtScroll')
+  const r = row && row.getBoundingClientRect(), box = sc && sc.getBoundingClientRect(), g = gd && gd.getBoundingClientRect()
+  if (!r || !box || r.bottom < box.top || r.top > box.bottom - 40) { b.hidden = true; return }
+  b.hidden = false
+  const w = b.offsetWidth || 200
+  b.style.top = Math.round(Math.min(box.bottom - 48, r.bottom + 4)) + 'px'
+  b.style.left = Math.round(Math.max(box.left + 8, Math.min(g.right - w - 8, window.innerWidth - w - 8))) + 'px'
+}
+document.addEventListener('scroll', (e) => { if (wtUi.node && wtUi.picks.length && e.target && e.target.nodeType === 1 && wtUi.node.contains(e.target)) requestAnimationFrame(wtAskLPlace) }, { capture: true, passive: true })
+window.addEventListener('resize', () => { if (wtUi.node && wtUi.picks.length) requestAnimationFrame(wtAskLPlace) })
+// a drawn patch's key and a row -> on screen: the step's slide or section, its code and its file open, scrolled to
+function wtReveal(key, ri, { flash = false } = {}) {
+  const sid = wtUi.sid, data = sid && wtUi.data.get(wtKey(sid))
+  if (!data || !wtUi.node) return null
+  const k = String(key)
+  if (k.startsWith('s:')) {
+    const step = k.split(':')[1]
+    const st = (data.steps || []).find((x) => x.id === step)
+    if (wtUi.view !== 'story') { wtUi.view = 'story'; wtRemember(); wtFill(wtSession(sid)) }
+    if (st && st.tag !== 'Core' && !wtUi.code.has(step) && wtDeckCur() < 0) { wtUi.code.add(step); wtFill(wtSession(sid)) }
+    wtGo(sid, step)
+    const slot = wtUi.node.querySelector('[data-snip="' + CSS.escape(k.slice(2)) + '"]')
+    const d = slot && slot.closest('details.wt-sf')
+    if (d && !d.open) { d.open = true; sfSet(data.fingerprint, [d.dataset.sfk], true); wtHydrate(wtUi.node, data) }
+  } else if (k.startsWith('f:')) {
+    if (wtUi.view !== 'files') { wtUi.view = 'files'; wtRemember(); wtFill(wtSession(sid)) }
+    const i = (data.files || []).findIndex((f) => f.path === k.slice(2))
+    const d = wtUi.node.querySelector('details.wt-file[data-file-i="' + i + '"]')
+    if (d && !d.open) { d.open = true; wtHydrate(wtUi.node, data) }
+  }
+  wtPicksPaint()
+  const gd = wtUi.node.querySelector('.wt-gd[data-wtk="' + CSS.escape(k) + '"]')
+  const row = gd && gd.querySelector('[data-ri="' + ri + '"]')
+  if (row) row.scrollIntoView({ block: 'center', behavior: reducedMotion() ? 'auto' : 'smooth' })
+  return row
+}
+// Next spot (asked: "some sort of jump to next spot to really look at button"): the button and n
+// (Shift+N back) walk ui/walk-spots.js's spots across steps; the reason shows as a tag at the line
+function wtSpots(data) { return data && data.status === 'ok' ? spotsFor(data, readingOrder(data.steps, data)) : [] }
+function wtSpotGo(dir = 1) {
+  const sid = wtUi.sid, data = sid && wtUi.data.get(wtKey(sid))
+  if (!data || data.status !== 'ok' || !wtUi.node) return
+  const spots = wtSpots(data)
+  if (!spots.length) return
+  const cur = wtUi.spot.has(data.fingerprint) ? wtUi.spot.get(data.fingerprint) : -1
+  const i = nextSpotIndex(spots.length, cur, dir)
+  wtUi.spot.set(data.fingerprint, i)
+  const sp = spots[i]
+  const st = (data.steps || []).find((x) => x.id === sp.step)
+  const sn = st && st.snippets[sp.snip]
+  const rows = sn ? rowsOf(sn.patch) : []
+  const ri = rows.findIndex((r) => (r.k === 'add' || r.k === 'del' || r.k === 'ctx') && (sp.side === 'old' ? r.o : r.n) === sp.line)
+  for (const x of wtUi.node.querySelectorAll('.wt-spot-on')) x.classList.remove('wt-spot-on')
+  for (const x of wtUi.node.querySelectorAll('.wt-spot-tag')) x.remove()
+  const row = wtReveal('s:' + sp.step + ':' + sp.snip, ri)
+  // in the split drawing a removed line is the left half, an added one the right
+  const gd = row && row.closest('.wt-gd')
+  const cands = gd ? [...gd.querySelectorAll('[data-ri="' + ri + '"]')] : []
+  const at = cands.find((x) => x.classList.contains(sp.side === 'new' ? 'gd-hr' : 'gd-hl')) || cands[0] || null
+  if (at) {
+    at.classList.add('wt-spot-on')
+    const tag = document.createElement('span')
+    tag.className = 'wt-spot-tag'
+    tag.setAttribute('role', 'note')
+    tag.innerHTML = icon('crosshair') + '<span></span>'
+    tag.lastChild.textContent = sp.why || 'Worth a look'
+    at.appendChild(tag)
+  }
+  const n = wtUi.node.querySelector('#wtSpotN'); if (n) n.textContent = spotCountWords(spots.length, i)
+  const b = wtUi.node.querySelector('.wt-spot'); if (b) b.setAttribute('aria-label', 'Next spot to look at, ' + spotCountWords(spots.length, i))
+}
+// Unified / Split (asked: "Should we offer a side by side diff view too?"): kept per device; split
+// only on a screen 1000px or wider, else unified (the toggle is hidden there)
+const wtWide = window.matchMedia ? window.matchMedia('(min-width: ' + SPLIT_MIN + 'px)') : null
+function wtSplitPref() { try { return localStorage.getItem('lo-wt-split') === '1' } catch { return false } }
+function wtSplitOn() { return wtSplitPref() && !!(wtWide && wtWide.matches) }
+if (wtWide && wtWide.addEventListener) wtWide.addEventListener('change', () => { if (wtUi.sid && wtSplitPref()) { wtUi.sig = ''; wtFill(wtSession(wtUi.sid)) } })
+function wtHydrate(node, data) { return hydrateWalkthrough(node, data, { renderDiff, renderSplit, split: wtSplitOn(), esc, icon }) }
+// the file list folds to a rail ([ or its button) and its edge drags; both kept per device
+function wtRailOn() { try { return localStorage.getItem('lo-wt-rail') === '1' } catch { return false } }
+function wtListUp() {
+  const p = wtUi.sid && wtUi.node && wtUi.node.isConnected && wtUi.node.querySelector('#wt2p')
+  if (!p || !p.getClientRects().length) return null
+  const shown = (el) => el && getComputedStyle(el).display !== 'none'
+  return shown(p.querySelector(':scope > .wt-side')) || shown(p.querySelector(':scope > .wt-rail')) ? p : null
+}
+function wtRail() {
+  const p = wtListUp()
+  if (!p) return
+  const on = !p.classList.contains('rail')
+  p.classList.toggle('rail', on)
+  try { if (on) localStorage.setItem('lo-wt-rail', '1'); else localStorage.removeItem('lo-wt-rail') } catch {}
+  const b = p.querySelector(on ? '.wt-rail .wt-railt' : '.wt-side .wt-railt')
+  if (b && document.activeElement && document.activeElement.closest && document.activeElement.closest('.wt-railt')) b.focus({ preventScroll: true })
+}
+const clampW = (w) => Math.max(WT_SIDE_MIN, Math.min(WT_SIDE_MAX, Math.round(w)))
+function wtSideW() { try { const w = Number(localStorage.getItem('lo-wt-side-w')); return w ? clampW(w) : WT_SIDE_DEFAULT } catch { return WT_SIDE_DEFAULT } }
+function wtSideWidth(node, w = wtSideW()) {
+  const p = node && node.querySelector('#wt2p')
+  if (p) p.style.setProperty('--wt-side-w', w + 'px')
+  const rz = p && p.querySelector('.wt-rz')
+  if (rz) { rz.setAttribute('aria-valuemin', WT_SIDE_MIN); rz.setAttribute('aria-valuemax', WT_SIDE_MAX); rz.setAttribute('aria-valuenow', w) }
+}
+let wtRz = null
+document.addEventListener('pointerdown', (ev) => {
+  const rz = ev.target && ev.target.closest && ev.target.closest('#wt2p > .wt-rz')
+  if (!rz || ev.button !== 0) return
+  ev.preventDefault()
+  const side = rz.parentNode.querySelector('.wt-side')
+  wtRz = { left: side.getBoundingClientRect().left, id: ev.pointerId, rz }
+  try { rz.setPointerCapture(ev.pointerId) } catch {}
+  rz.classList.add('on')
+})
+document.addEventListener('pointermove', (ev) => {
+  if (!wtRz) return
+  wtSideWidth(wtUi.node, clampW(ev.clientX - wtRz.left))
+})
+document.addEventListener('pointerup', () => {
+  if (!wtRz) return
+  const p = wtUi.node && wtUi.node.querySelector('#wt2p')
+  const w = p ? parseInt(p.style.getPropertyValue('--wt-side-w'), 10) : 0
+  if (w) try { localStorage.setItem('lo-wt-side-w', String(w)) } catch {}
+  wtRz.rz.classList.remove('on')
+  wtRz = null
+})
+document.addEventListener('keydown', (ev) => {
+  const rz = ev.target && ev.target.closest && ev.target.closest('#wt2p > .wt-rz')
+  if (!rz || (ev.key !== 'ArrowLeft' && ev.key !== 'ArrowRight')) return
+  ev.preventDefault()
+  const w = clampW(wtSideW() + (ev.key === 'ArrowRight' ? 16 : -16))
+  try { localStorage.setItem('lo-wt-side-w', String(w)) } catch {}
+  wtSideWidth(wtUi.node, w)
+})
 document.addEventListener('submit', (ev) => {
   const f = ev.target && ev.target.closest && ev.target.closest('form.wt-ask')
   if (!f) return
@@ -1378,7 +1670,8 @@ document.addEventListener('toggle', (ev) => {
   const d = ev.target
   if (!d || !d.matches || !wtUi.node || !wtUi.node.contains(d)) return
   if (d.matches('details.wt-grp')) { if (d.open) wtUi.groups.add(d.dataset.group); else wtUi.groups.delete(d.dataset.group) }
-  if (d.open) hydrateWalkthrough(wtUi.node, wtUi.data.get(wtKey(wtUi.sid)), { renderDiff, esc, icon })
+  if (d.matches('details.wt-sf')) { const data = wtUi.data.get(wtKey(wtUi.sid)); if (data && data.fingerprint) sfSet(data.fingerprint, [d.dataset.sfk], d.open) } // 2026-10-30 a step's file, folded or open, kept per walkthrough
+  if (d.open) wtHydrate(wtUi.node, wtUi.data.get(wtKey(wtUi.sid)))
 }, true)
 // j / k between steps (not while typing)
 document.addEventListener('keydown', (ev) => {
@@ -1386,12 +1679,16 @@ document.addEventListener('keydown', (ev) => {
   const t = ev.target
   if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return
   if (!document.getElementById('wtMount')) return
+  // 2026-10-30 n / Shift+N: the next (previous) spot worth a real look; [ folds the file list
+  if (ev.key === 'n' || ev.key === 'N') { ev.preventDefault(); return void wtSpotGo(ev.key === 'N' ? -1 : 1) }
+  if (ev.key === '[') { ev.preventDefault(); return void wtRail() }
   // 0.9.18 the slideshow: ← / → and j / k move, ↑ / ↓ scroll the slide, Home / End jump, Space pages
   // (a focused button keeps its own Space and arrows; nothing is taken from a text box)
   if (wtDeckCur() >= 0 && (!t || t === document.body || (wtUi.node && wtUi.node.contains(t)))) {
     const sc = wtUi.node.querySelector('#wtScroll'), onCtl = t && t.closest && t.closest('button, a, summary, [role="radio"]')
     const go = (i) => { ev.preventDefault(); wtSlideGo(i) }
     const k = ev.key, cur = wtDeckCur()
+    if ((k === 'ArrowRight' && ev.shiftKey) || (k === 'Enter' && !onCtl)) { ev.preventDefault(); return void wtRevNext() } // 0.9.19 mark reviewed & next
     if (k === 'ArrowRight' || k === 'j') return go(cur + 1)
     if (k === 'ArrowLeft' || k === 'k') return go(cur - 1)
     if (k === 'Home' && !onCtl) return go(0)
@@ -2568,7 +2865,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   // else "Catch me up" with "Away 7h" as a small line under it (app.css, the fsside container); never clipped
   const cuBtn = cu ? cu.replace('class="btn scu-btn"', 'class="btn ' + (away ? 'primary ' : '') + 'scu-btn fs-cu" data-pop="cu"' + (away ? ' data-away="1"' : '')).replace('Catch me up</button>', '<span class="fs-cu-l">' + (away ? '<span class="fs-away">' + esc(shortAway(awayWords(awayShownMs(s, awayMs)))) + '<span class="fs-away-dot"> · </span></span>' : '') + '<span class="fs-cu-v">Catch me up</span></span></button>') : ''
   const wtOn = wtUi.sid === s.id
-  const wtBtn = s.agent ? '' : walkButtonHtml(s, { esc, icon, on: wtOn, size: wtSizeOf(s.id) }) // 0.9.17; 0.9.18: a diff glyph, the size under it, a popover (ui/walk-pop.js)
+  const wtBtn = s.agent ? '' : walkButtonHtml(s, { esc, icon, on: wtOn, size: wtSizeOf(s.id), reviewed: wtRevCount(s, wtSizeOf(s.id)) }) // 0.9.17; 0.9.18: a diff glyph, the size under it, a popover (ui/walk-pop.js)
   // 0.9.17: Catch me up and Walk me through it side by side; Checkpoint now under them
   const acts = '<div class="fs-acts' + (wtBtn ? ' fs-acts-cu' : '') + '">' + cuBtn + (wtBtn || (mine ? checkpointSplit(s, { quiet: away }) : '')) + '</div>' + (wtBtn && mine ? '<div class="fs-acts fs-acts-cp">' + checkpointSplit(s, { quiet: true }) + '</div>' : '')
   const acts2 = '<div class="fs-acts2">' + (s.archived && mine ? unarchiveButtonHtml(s) : '') + goButton(s, { page: true }) + askButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '</div>'
@@ -8180,6 +8477,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'wt-code') { const st = btn.dataset.step; if (wtUi.code.has(st)) wtUi.code.delete(st); else wtUi.code.add(st); return wtFill(wtSession(wtUi.sid)) }
     if (action === 'wt-slide') { ev.preventDefault(); return void wtSlideGo(Number(btn.dataset.slide) || 0) } // 0.9.18
     if (action === 'wt-dstep') return void wtSlideGo(wtDeckCur() + (Number(btn.dataset.dir) || 1))
+    if (action === 'wt-revnext') return void wtRevNext()
     if (action === 'wt-deck') { try { if (wtDeckOn()) localStorage.setItem('lo-wt-all', '1'); else localStorage.removeItem('lo-wt-all') } catch {} wtUi.sig = ''; return void wtFill(wtSession(wtUi.sid)) }
     if (action === 'wt-fm-dir') { // 0.9.18 a folder in the file map folds; kept per walkthrough
       const k = btn.parentElement && btn.parentElement.querySelector(':scope > .wt-fm-dk')
@@ -8205,6 +8503,22 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'wt-go') { ev.preventDefault(); return wtGo(wtUi.sid, btn.dataset.step || null, { group: btn.dataset.group || null }) }
     if (action === 'wt-step') return wtStep(Number(btn.dataset.dir) || 1)
+    // 2026-10-30 walkthrough round 3
+    if (action === 'wt-dmode') { try { if (btn.dataset.mode === 'split') localStorage.setItem('lo-wt-split', '1'); else localStorage.removeItem('lo-wt-split') } catch {} wtUi.sig = ''; return void wtFill(wtSession(wtUi.sid)) }
+    if (action === 'wt-rail') return void wtRail()
+    if (action === 'wt-spot') return void wtSpotGo(1)
+    if (action === 'wt-update') { btn.disabled = true; return wtLoad(btn.dataset.id || wtUi.sid, { update: true }) }
+    if (action === 'wt-sf-all') {
+      const art = btn.closest('.wt-st'); const data = wtUi.data.get(wtKey(wtUi.sid)); if (!art || !data) return
+      const open = btn.dataset.open === '1', ds = [...art.querySelectorAll('details.wt-sf')]
+      for (const d of ds) d.open = open
+      sfSet(data.fingerprint, ds.map((d) => d.dataset.sfk), open)
+      if (open) wtHydrate(wtUi.node, data)
+      return
+    }
+    if (action === 'wt-ref-x') { if (btn.dataset.i === 'all') wtUi.picks = []; else wtUi.picks = wtUi.picks.filter((_, i) => i !== Number(btn.dataset.i)); return void wtPicksPaint() }
+    if (action === 'wt-ref-go') { const p = wtUi.picks[Number(btn.dataset.i)]; if (p) wtReveal(p.k, p.a); return }
+    if (action === 'wt-ask-lines') { const inp = document.getElementById('wtAsk'); if (inp) { inp.focus({ preventScroll: true }); inp.scrollIntoView({ block: 'nearest' }) } return }
     if (action === 'wt-export-html') return wtExport('html')
     if (action === 'wt-export-md') return wtExport('md')
     // 0.9.9: an info card on the session page (Directory, Worktree, Session id…): the whole value, a check for a moment

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