@leftoff/cli 0.9.18-beta.13 → 0.9.18-beta.14

package/ui/app.js

@@ -1,6 +1,8 @@
 // Leftoff web UI: plain JS, no build step, no CDN. Talks to the daemon's
 // /v1 API on the same origin (auth rides the cookie set at GET /).
 import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
+import { mcpSetupHtml, mcpStateHtml } from './mcp-setup.js'
+import { paintDigestVersion } from './digest-versions.js'
 import { icon } from './icons.js'
 import { fullViewportFit, isTypingTarget, outOfView, sheetAside, keyboardAccessoryPx, SHEET_BACK_AFTER_BLUR_MS, SETTLE_AFTER_BLUR_MS, SETTLE_WHILE_TYPING_MS, FOLLOW_FRAMES_MS } from './viewport-fit.js' // 2026-11-03: no gap above full screen after the keyboard closes; 2026-11-04: nor a hidden composer after switching keyboards
 import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey, openNameSheet, openProjectSheet, refreshActionMenu } from './picker.js'
@@ -58,15 +60,16 @@ import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember
 import { fsSideHtml, createSideStore, railHtml, createWidthStore, clampSideWidth, sideMax, SIDE_W_STEP, SIDE_W_DEFAULT, WIDE_MIN, sheetDragStart, sheetDragOffset, sheetDragFlips } 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, revNextState, revNextLabel, REVNEXT_TIP, REVFINISH_TIP, sfState, sfSet, patchFor, readingOrder, uniqueStepIds, SPLIT_MIN, RAIL_MIN as WT_SIDE_MIN, RAIL_MAX as WT_SIDE_MAX, RAIL_DEFAULT as WT_SIDE_DEFAULT, fileScopeStore, scopeAskLine, isPrKey, prScopeTip } from './semdiff.js' // 0.9.17 Walk me through it
+import { walkthroughHtml, hydrateWalkthrough, fmToggle, eyeCountHtml, reviewedSet, stepAfter, visibleSteps, stepPos, toMarkdown, toHtmlDoc, exportName, revNextState, revNextLabel, revNextTip, sfState, sfSet, patchFor, readingOrder, uniqueStepIds, SPLIT_MIN, RAIL_MIN as WT_SIDE_MIN, RAIL_MAX as WT_SIDE_MAX, RAIL_DEFAULT as WT_SIDE_DEFAULT, fileScopeStore, scopeAskLine, isPrKey, prScopeTip } 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 { spotsFor, spotFrom, spotTip, 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 { slashTarget, slashMenu, slashMove, slashKey, slashMenuHtml } from './slash.js' // slash commands from the board
 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
 import { machinesListHtml, pendingCardsHtml, machineDialogHtml, stateOf as machineStateOf } from './machine-life.js' // 0.9.16 rename, re-pair, retire, merge
 import { reorderable, reordering } from './reorder.js' // 0.9.16 drag tabs to reorder // 0.9.8 tabs for sessions
+import { isHtmlDoc, remoteRefs, previewDoc, previewBarHtml, PREVIEW_PAGE, VIEW_KEY as HP_VIEW_KEY } from './html-preview.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 import { widState, whatItDidSection, copyText as widCopyText, loadError as widError, hiddenText as widHidden, slotSource as widSlot } from './what-it-did.js' // 0.9.8 What it did
 import { copyButtonHtml, copyClick } from './copy-msg.js' // 0.9.11: Copy on Claude's messages
@@ -79,7 +82,9 @@ import { isDone, stillWorking, canMarkDone, DONE_CONFIRM, DONE_TIP, UNDONE_TIP,
 import { mountTerminal, escInTerminal } from './term.js' // 0.9.15 the embedded terminal
 import { termTipFor } from './term-host.js' // 0.9.15 a terminal for another Mac's session
 import { testplanPageHtml, testplanNewHtml, planMarkdown, planHtmlDoc, testplanHref } from './testplan.js' // testplan Part 3
-import { cpFoldSummary } from './cp-fold.js' // 2026-11-05 the fold names what's inside
+import { cpFoldSummary, workItems } from './cp-fold.js' // 2026-11-05 the fold names what's inside
+import { digestBodyHtml } from './render-digest.js' // 2026-11-06 the digest renderer, shared with leftoff export
+import { digestExportHtml, decisionsExportHtml, walkthroughExportHtml, exportFileName } from './render-export.js' // 2026-11-06 Save as HTML (the same file leftoff export writes)
 import { decidedListHtml, sessionDecisions, sessionDecisionsCount, logBySession, decisionsGivenHtml, reviewCountHtml, decisionScope, decisionsPageHtml, projectDecisionsHtml, decisionItemHtml, decisionsHref } from './decisions.js' // 2026-11-03 decision memory
 import { recapLineHtml, beforeClearHtml } from './recap-line.js' // 0.9.15 Claude Code's recap; before /clear
 import { Presence, cardRows, awayWords } from './away.js' // 0.9.15 a card shows more the longer you've been away
@@ -540,11 +545,15 @@ function cpBlock(cp, { showWhen = true, more = false, open = false, md = false,
   }
   // 0.9.15: what the session is for and how far along, above its latest step
   const goal = rows && !rows.goal ? '' : String(cp.goal || '').trim(), prog = String(cp.progress || '').trim()
-  if (part === 'tail') return '<dl class="cp cp-tail' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '"><dt>Stopped</dt>' + dd(cp.stoppedAt) + (String(cp.next || '').trim() ? '<dt>Next</dt>' + dd(cp.next, 'next' + (you ? ' you' : '')) : '') + '</dl>'
+  // 2026-11-06: what the session's commands show got done (commits, PRs, tests), above where it stopped
+  const wl = workItems(cp)
+  const doneRow = wl.length ? '<dt>Got done</dt><dd class="cp-done"><ul>' + wl.map((x) => '<li class="dn dn-' + x.kind + '">' + fmtCode(x.text) + '</li>').join('') + '</ul></dd>' : ''
+  if (part === 'tail') return '<dl class="cp cp-tail' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '">' + doneRow + '<dt>Stopped</dt>' + dd(cp.stoppedAt) + (String(cp.next || '').trim() ? '<dt>Next</dt>' + dd(cp.next, 'next' + (you ? ' you' : '')) : '') + '</dl>'
   if (part === 'head') return (goal || String(cp.doing || '').trim() ? '<dl class="cp cp-head">' + (goal ? '<dt>Goal</dt><dd class="goal">' + fmtCode(goal) + (prog ? '<span class="cp-prog"> · ' + fmtCode(prog) + '</span>' : '') + '</dd>' : '') + (String(cp.doing || '').trim() ? '<dt>Doing</dt>' + dd(cp.doing) : '') + '</dl>' : '') + (n ? '<div class="cpx">' + cpExtras(cp, paths) + '</div>' : '')
   return '<dl class="cp' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '">' +
     (goal ? '<dt>Goal</dt><dd class="goal">' + fmtCode(goal) + (prog ? '<span class="cp-prog"> · ' + fmtCode(prog) + '</span>' : '') + '</dd>' : '') +
     (rows && !rows.doing ? '' : '<dt>Doing</dt>' + dd(cp.doing)) +
+    (rows ? '' : doneRow) +
     '<dt>Stopped</dt>' + dd(cp.stoppedAt) +
     (String(cp.next || '').trim() ? '<dt>Next</dt>' + dd(cp.next, 'next' + (you ? ' you' : '')) : '') +
     (showWhen ? '<div class="when">' + esc(cp.trigger) + ' checkpoint · ' + esc(ago(cp.createdAt)) + (cp.generator && cp.generator.by ? ' · ' + (cp.generator.by === 'heuristic' ? '' : 'by ') + esc(cpByText(cp.generator)) + cpByHintHtml(cp.generator) : '') + '</div>' : '') +
@@ -1349,11 +1358,30 @@ function wtRestoreView(node) {
   wtStuck(node.querySelector('.wt-scroll'))
 }
 // The reviewed marks and the count, in place (no redraw).
+// the steps reviewed, as saved plus the marks still on their way
+function wtRevNow(s, data) {
+  const rev = reviewedSet(s, data.fingerprint)
+  for (const x of wtUi.pending) if (x.fp === data.fingerprint) { if (x.on) rev.add(x.step); else rev.delete(x.step) }
+  return rev
+}
+// the slides as revNextState reads them: each step's id and number
+function wtDeckSteps(slides, data) {
+  const by = new Map((data.steps || []).map((x) => [x.id, x]))
+  return slides.map((x) => { const st = x.dataset.step && by.get(x.dataset.step); return { step: st ? { id: st.id, n: st.n } : null } })
+}
+// Mark reviewed & next / & step N / & finish, for the slide on screen and what's reviewed now
+function wtRevBtn(node, data, rev) {
+  const deck = node.querySelector('#wtDeck'), rv = node.querySelector('#wtDrev'); if (!deck || !rv) return
+  const slides = [...deck.children], rs = revNextState(wtDeckSteps(slides, data), Number(deck.dataset.cur) || 0, rev)
+  rv.hidden = !rs.show
+  const [l, sh] = revNextLabel(rs.last, rs.back)
+  rv.setAttribute('aria-label', l); rv.dataset.tip = revNextTip(rs)
+  const a1 = rv.querySelector('.wt-dl-l'), a2 = rv.querySelector('.wt-dl-s'); if (a1) a1.textContent = l; if (a2) a2.textContent = sh
+}
 function wtMarks(s) {
   const node = wtUi.node; if (!node || !s) return
   const data = wtUi.data.get(wtKey(s.id)); if (!data || data.status !== 'ok') return
-  const rev = reviewedSet(s, data.fingerprint)
-  for (const x of wtUi.pending) if (x.fp === data.fingerprint) { if (x.on) rev.add(x.step); else rev.delete(x.step) }
+  const rev = wtRevNow(s, data)
   for (const a of node.querySelectorAll('article.wt-st')) {
     const on = rev.has(a.dataset.step)
     a.classList.toggle('done', on)
@@ -1363,6 +1391,8 @@ function wtMarks(s) {
   for (const d of node.querySelectorAll('.wt-dot[data-step]')) { const on = rev.has(d.dataset.step); if (d.classList.contains('done') !== on) { d.classList.toggle('done', on); d.setAttribute('aria-label', d.getAttribute('aria-label').replace(/, reviewed$/, '') + (on ? ', reviewed' : '')) } } // 0.9.18 a ✓ on its dot
   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'
+  const all = node.querySelector('#wtAllDone'); if (all) all.hidden = !((data.steps || []).length && data.steps.every((x) => rev.has(x.id)))
+  wtRevBtn(node, data, rev)
 }
 async function wtReviewed(sid, step, { force = null, advance = true } = {}) {
   const s = wtSession(sid)
@@ -1388,11 +1418,13 @@ async function wtReviewed(sid, step, { force = null, advance = true } = {}) {
 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)
+  const sid = wtUi.sid, s = wtSession(sid), data = wtUi.data.get(wtKey(sid))
+  if (!s || !data) return
+  const rev = wtRevNow(s, data)
+  const st = revNextState(wtDeckSteps(slides, data), cur, rev)
   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 })
+  const step = slides[cur].dataset.step
+  if (!rev.has(step)) wtReviewed(sid, step, { force: true, advance: false })
   wtSlideGo(st.to)
 }
 function wtGo(sid, step, { group = null, file = null } = {}) {
@@ -1443,8 +1475,7 @@ 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 s = wtSession(wtUi.sid); if (s && data.fingerprint) wtRevBtn(node, data, wtRevNow(s, data))
     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') })
@@ -1507,11 +1538,26 @@ function wtExport(kind) {
   if (!s || !data || data.status !== 'ok') return
   const title = s.title || 'Session'
   if (kind === 'md') return copy(toMarkdown(data, { title })).then((ok) => toast(ok ? 'Copied as Markdown · paste it into the PR' : 'Couldn’t copy', 3000))
-  const html = toHtmlDoc(data, { title, repo: [s.repoLabel || s.repoName || '', s.repo && s.repo.branch].filter(Boolean).join(' · '), when: data.generatedAt ? clock(data.generatedAt) : '' })
+  return saveHtmlFile(walkthroughExportHtml(data, { ...s, title }), exportName(title)) // 2026-11-06 the same file as leftoff export walkthrough
+}
+// 2026-11-06 Save as HTML (digest, decision log, walkthrough): one self-contained file. On a phone the
+// share sheet (Save to Files, AirDrop, Mail …) where it takes files; else a download. Nothing is uploaded.
+async function saveHtmlFile(html, name) {
+  const coarse = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches)
+  if (coarse && typeof File === 'function' && navigator.canShare && navigator.share) {
+    try {
+      const f = new File([html], name, { type: 'text/html' })
+      if (navigator.canShare({ files: [f] })) { await navigator.share({ files: [f], title: name.replace(/\.html$/, '') }); return true }
+    } catch (e) { if (e && e.name === 'AbortError') return false } // closed the sheet: nothing else
+  }
   const url = URL.createObjectURL(new Blob([html], { type: 'text/html' }))
-  const a = document.createElement('a'); a.href = url; a.download = exportName(title); document.body.appendChild(a); a.click(); a.remove()
+  const x = document.createElement('a'); x.href = url; x.download = name; document.body.appendChild(x); x.click(); x.remove()
   setTimeout(() => URL.revokeObjectURL(url), 4000)
+  toast('Saved ' + name + ' · one file, opens offline', 3000)
+  return true
 }
+const SAVE_HTML_TIP = 'Save as HTML · one file with nothing linked out: opens offline, on a phone, and prints'
+const saveHtmlBtn = (action, cls = '') => '<button type="button" class="btn save-html' + (cls ? ' ' + cls : '') + '" data-action="' + action + '" data-tip="' + esc(SAVE_HTML_TIP) + '" aria-label="Save as HTML">' + icon('download') + '<span class="save-html-l">Save as HTML</span></button>'
 // ---------------------------------------------------------------- 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
@@ -1645,37 +1691,71 @@ function wtReveal(key, ri, { flash = false } = {}) {
 // 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)) : [] }
+// 2026-11-06 from where you're reading (ui/walk-spots.js spotFrom): the slide on screen, or on the
+// long page the step you're at; -1 the overview, Infinity Safe to skip
+function wtSpotAt(data) {
+  const order = readingOrder(data.steps, data).map((x) => x.id)
+  const rank = (id) => order.indexOf(id)
+  const deck = wtUi.node && wtUi.node.querySelector('#wtDeck')
+  let at = -1
+  if (deck) { const sl = deck.children[Number(deck.dataset.cur) || 0]; at = !sl || sl.dataset.slide === '0' ? -1 : sl.dataset.step ? rank(sl.dataset.step) : Infinity }
+  else { const c = wtUi.cur.get(wtKey(wtUi.sid)); at = c ? rank(c) : -1 }
+  return { rank, at }
+}
 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)
+  const { rank, at } = wtSpotAt(data)
+  const i = spotFrom(spots, rank, at, cur, dir)
   wtUi.spot.set(data.fingerprint, i)
   const sp = spots[i]
+  const row = wtReveal('s:' + sp.step + ':' + sp.snip, wtSpotRi(data, sp))
+  wtSpotPaint()
+  if (!row) return
+  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))
+}
+// a spot -> its row's index in its snippet's drawn diff
+function wtSpotRi(data, sp) {
   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))
+  return rows.findIndex((r) => (r.k === 'add' || r.k === 'del' || r.k === 'ctx') && (sp.side === 'old' ? r.o : r.n) === sp.line)
+}
+// 2026-11-06 (Joel: "it's the only time you see the special chip, that should probably be visible
+// all the time"): every spot's chip sits at its line whenever its diff is drawn, the one Next spot
+// is on marked; each chip explains itself in a tip (hover, focus, or a tap on a phone: ui/tips.js)
+function wtSpotPaint() {
+  const node = wtUi.node, sid = wtUi.sid, data = sid && wtUi.data.get(wtKey(sid))
+  if (!node || !data || data.status !== 'ok' || wtUi.view !== 'story') return
+  const spots = wtSpots(data)
+  const cur = wtUi.spot.has(data.fingerprint) ? wtUi.spot.get(data.fingerprint) : -1
+  spots.forEach((sp, i) => {
+    const gd = node.querySelector('.wt-gd[data-wtk="' + CSS.escape('s:' + sp.step + ':' + sp.snip) + '"]')
+    if (!gd) return
+    const ri = wtSpotRi(data, sp)
+    const cands = [...gd.querySelectorAll('[data-ri="' + ri + '"]')]
+    // in the split drawing a removed line is the left half, an added one the right
+    const at = cands.find((x) => x.classList.contains(sp.side === 'new' ? 'gd-hr' : 'gd-hl')) || cands[0]
+    if (!at) return
+    let tag = at.querySelector(':scope > .wt-spot-tag')
+    if (!tag) {
+      const id = 'wt-spot-tip-' + i
+      tag = document.createElement('span')
+      tag.className = 'wt-spot-tag'
+      tag.innerHTML = '<button type="button" class="tip-btn wt-spot-chip" aria-expanded="false" aria-controls="' + id + '" aria-describedby="' + id + '">' + icon('crosshair') + '<span></span></button><span class="tip" role="tooltip" id="' + id + '" hidden></span>'
+      tag.querySelector('.wt-spot-chip span').textContent = sp.why || 'Worth a look'
+      tag.querySelector('.wt-spot-chip').setAttribute('aria-label', 'Spot ' + (i + 1) + ' of ' + spots.length + ': ' + (sp.why || 'worth a look') + '. Why it is a spot')
+      tag.querySelector('.tip').textContent = spotTip(sp)
+      at.appendChild(tag)
+    }
+    const on = i === cur
+    at.classList.toggle('wt-spot-on', on)
+    tag.classList.toggle('cur', on)
+  })
 }
 // 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)
@@ -1683,7 +1763,7 @@ const wtWide = window.matchMedia ? window.matchMedia('(min-width: ' + SPLIT_MIN
 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 }) }
+function wtHydrate(node, data) { const r = hydrateWalkthrough(node, data, { renderDiff, renderSplit, split: wtSplitOn(), esc, icon }); if (node === wtUi.node) wtSpotPaint(); return r }
 // 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() {
@@ -4995,6 +5075,7 @@ document.addEventListener('click', async (ev) => {
   if (a === 'dec-edit') { decisionsUi.editing = btn.dataset.id; if (panelSess()) { paintPanelDecided(panelSess()); const i = document.querySelector('#decp-' + CSS.escape(btn.dataset.id) + ' .dec-in'); if (i) i.focus({ preventScroll: true }); return } return paintDecisions() }
   if (a === 'dec-cancel') { decisionsUi.editing = null; if (panelSess()) return paintPanelDecided(panelSess()); return paintDecisions() }
   if (a === 'dec-all') { decisionsUi.all = !decisionsUi.all; return paintDecisions() }
+  if (a === 'dec-save-html') { const v = decisionsUi.view; if (v) saveHtmlFile(decisionsExportHtml(v, { all: !!decisionsUi.all }), exportFileName('decisions', (v.scope && (v.scope.name || v.scope.label)) || '')); return } // 2026-11-06
   if (a === 'dec-copy') { const md = decisionsUi.view && decisionsUi.view.markdown; if (md && await clipWrite(md)) toast('Copied as Markdown'); else if (md) prompt('Copy this:', md); return }
   if (a === 'dec-show') {
     const el = document.getElementById('dec-' + btn.dataset.id)
@@ -5255,9 +5336,6 @@ async function viewTimeline() {
   $app.innerHTML = html
 }
 
-// 0.9.8: a digest line may end in "<!-- s:<id> -->", its session: the title
-// links there and Start here gets that session's Go / Resume.
-const MD_SID = /\s*<!-- s:(\S+?) -->\s*$/
 function briefAction(id, sessions, viewer) {
   const open = '<a class="btn sh-open" href="#/s/' + encodeURIComponent(id) + '" aria-label="Open the session">Open</a>'
   const s = sessions && sessions.get(id)
@@ -5269,75 +5347,10 @@ function briefAction(id, sessions, viewer) {
   return b || open
 }
 
+// 2026-11-06 the digest's renderer lives in ui/render-digest.js (the CLI's HTML export uses it too)
 function renderMd(md, { spaces = [], sessions = null, viewer = null } = {}) {
-  const body = md.replace(/^---\n[\s\S]*?\n---\n/, '')
-  // testplan Part 2: the Decisions part links into the log: [D-7f3a](#/decisions/…) only, nothing else becomes a link
-  const inline = (t) => esc(t).replace(/\[([^\]]{1,80})\]\((#\/decisions\/[^)\s"<>]{1,200})\)/g, '<a class="dg-dec" href="$2">$1</a>').replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>').replace(/(^|[^\w*])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')  // not inside snake_case names (clutch_hockey)
-  const out = []
-  let inList = false, inSec = false, inFin = false, seenH2 = false, inUnf = false
-  const closeList = () => { if (inList) { out.push(inList === 'ol' ? '</ol>' : '</ul>'); inList = false } if (inFin) { out.push('</details>'); inFin = false } }
-  const openList = (kind, cls) => { if (inList !== kind) { if (inList) out.push(inList === 'ol' ? '</ol>' : '</ul>'); out.push('<' + kind + (cls ? ' class="' + cls + '"' : '') + '>'); inList = kind } }
-  const href = (id) => '#/s/' + encodeURIComponent(id)
-  // v0.5.8: each "## <space>" opens a section with its own Copy for standup;
-  // other "## " headings (Lists, Top of mind) are whole-folder sections.
-  // 0.9.8: "## Start here" is the brief's own section, never hidden by a space.
-  const openSec = (h) => {
-    if (inSec) out.push('</section>')
-    inSec = true
-    if (h === 'Start here') out.push('<section class="start-sec"><h2>' + inline(h) + '</h2>')
-    else if (spaces.includes(h)) {
-      out.push('<section class="space-sec" data-space="' + esc(h) + '"><div class="space-head"><h2>' + esc(h) + '</h2>' +
-        '<button type="button" class="btn standup-btn' + (h === 'Work' ? ' primary' : '') + '" data-action="standup-copy" data-space="' + esc(h) + '">' + icon('clipboard') + 'Copy for standup</button></div>')
-    } else out.push('<section class="other-sec"><h2>' + inline(h) + '</h2>')
-  }
-  for (const raw of body.split('\n')) {
-    const mid = raw.match(MD_SID)
-    const id = mid ? mid[1] : null
-    const line = mid ? raw.slice(0, mid.index) : raw
-    // 0.9.8: Start here: "1. <step> — **Title** (repo)"
-    const st = /^\d+\. /.test(line) && line.match(/^\d+\. (.*?) — \*\*(.+?)\*\*(?: \(([^)]*)\))?$/)
-    if (st) {
-      openList('ol', 'start')
-      const t = id ? '<a href="' + href(id) + '">' + inline(st[2]) + '</a>' : inline(st[2])
-      out.push('<li' + (id ? ' data-sid="' + esc(id) + '"' : '') + '><div class="sh-main"><span class="sh-step">' + inline(st[1]) + '</span><span class="sh-sess">' + t + (st[3] ? ' <span class="sh-repo">' + esc(st[3]) + '</span>' : '') + '</span></div>' +
-        (id ? '<div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>' : '') + '</li>')
-      continue
-    }
-    if (/^- /.test(line)) {
-      openList('ul')
-      // Digest items read "- **Title** (repo · branch) — state": tag the repo so the view can filter.
-      const m = line.match(/^- \*\*.*?\*\* \(([^)·]+?)(?: · [^)]*)?\) — /)
-      const attrs = (m ? ' data-repo="' + esc(m[1].trim()) + '"' : '') + (id ? ' data-sid="' + esc(id) + '"' : '')
-      // 0.9.8: "- **Title** (repo · state) — You were …; left off …." with its
-      // session: the title links to it, the sentence under it, the tags quiet.
-      const bi = id && line.match(/^- \*\*(.+?)\*\* \(([^)]*)\) — (.*)$/)
-      // 0.9.8: an Unfinished one is closed, so it has its Resume beside it
-      if (bi && inUnf) { out.push('<li class="bi unf"' + attrs + '><div class="bi-body"><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span></div><div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>'); continue }
-      if (bi) { out.push('<li class="bi"' + attrs + '><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span>'); continue }
-      // v0.5.7: the "(repo · branch · machine)" part is set small so the title leads on a phone.
-      const li = inline(line.slice(2)).replace(/^(<strong>.*?<\/strong>) (\([^)]*\))( — )/, '$1 <span class="where">$2</span>$3')
-      out.push('<li' + attrs + '>' + li); continue
-    }
-    if (/^\s{2,}\S/.test(line) && inList) {
-      // "Stopped at: … Next: …" is two lines, each with its label.
-      const t = line.trim(), sm = t.match(/^(Stopped at|Next|Last reply|Doing|Latest|Needs you|Merged|Commits): ([\s\S]*?)(?: (Next): ([\s\S]*))?$/)
-      if (sm) out.push('<span class="sub"><span class="k">' + sm[1] + '</span> ' + inline(sm[2]) + '</span>' + (sm[3] ? '<span class="sub"><span class="k">' + sm[3] + '</span> ' + inline(sm[4]) + '</span>' : ''))
-      else out.push('<span class="sub">' + inline(t) + '</span>')
-      continue
-    }
-    closeList()
-    if (/^#{1,3} /.test(line)) inUnf = /^### Unfinished \(\d+\)\s*$/.test(line)
-    if (/^# /.test(line)) out.push('<h1>' + inline(line.slice(2)) + '</h1>')
-    else if (/^## /.test(line)) { seenH2 = true; const h = line.slice(3).trim(); if (spaces.length || h === 'Start here') openSec(h); else { if (inSec) { out.push('</section>'); inSec = false } out.push('<h2>' + inline(h) + '</h2>') } }
-    // 0.9.8: Finished folds away (older digests' "Finished or closed" too)
-    else if (/^### Finished(?: or closed)? \(\d+\)\s*$/.test(line)) { out.push('<details class="fin"><summary>' + inline(line.slice(4).replace(/ or closed/, '')) + '</summary>'); inFin = true }
-    else if (/^### /.test(line)) out.push('<h3>' + inline(line.slice(4)) + '</h3>')
-    // 0.9.8: the Yesterday / Today opener, above the first section
-    else if (line.trim()) out.push(seenH2 ? '<p>' + inline(line) + '</p>' : '<p class="lede">' + inline(line).replace(/^(Yesterday|Today):/, '<b>$1:</b>') + '</p>')
-  }
-  closeList()
-  if (inSec) out.push('</section>')
-  return out.join('\n')
+  return digestBodyHtml(md, { spaces, esc, action: (id) => briefAction(id, sessions, viewer),
+    standup: (h) => '<button type="button" class="btn standup-btn' + (h === 'Work' ? ' primary' : '') + '" data-action="standup-copy" data-space="' + esc(h) + '">' + icon('clipboard') + 'Copy for standup</button>' })
 }
 
 // "2026-10-10" → "Sat Oct 10" for the phone's past-digests strip (v0.5.7).
@@ -5446,6 +5459,7 @@ function repaintCalendar() {
 // repo chips, which only count the picked space.
 const digestUi = { standups: {}, date: null, open: null }
 async function viewDigest(date, machine) {
+  digestUi.md = null
   const [{ digests }, spv] = await Promise.all([api('GET', '/v1/digests'), api('GET', '/v1/spaces').catch(() => null)])
   const byDay = new Map()
   for (const d of digests) { if (!byDay.has(d.date)) byDay.set(d.date, []); byDay.get(d.date).push(d) }
@@ -5474,9 +5488,12 @@ async function viewDigest(date, machine) {
   if (pick) {
     try {
       // 0.9.8: the sessions too, for Start here's Go / Resume
-      const [d, sv] = await Promise.all([api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : '')), api('GET', '/v1/sessions?limit=500&archived=1').catch(() => null)])
+      const ver = ((state.route && state.route.params) || new URLSearchParams()).get('v') // 2026-11-06: an earlier version (ui/digest-versions.js)
+      const [d, sv] = await Promise.all([api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : ver ? '?version=' + encodeURIComponent(ver) : '')), api('GET', '/v1/sessions?limit=500&archived=1').catch(() => null)])
+      digestUi.shown = d
       if (sv) { state.sessions = sv.sessions || []; if (sv.viewer) { state.viewerLocal = sv.viewer.local !== false; state.ghostty = sv.viewer.ghostty === true } }
       const fm = d.meta || {}
+      digestUi.md = d.markdown; digestUi.mdDate = pick // 2026-11-06 for Save as HTML
       const madeAt = fm.generated_at
       spaces = Array.isArray(fm.spaces) ? fm.spaces.map(String) : []
       const whose = d.shared ? (d.by ? ' by ' + esc(d.by) : '') : ''
@@ -5484,12 +5501,13 @@ async function viewDigest(date, machine) {
       const others = (d.others || []).filter((x) => x.machine || x.shared)
       const also = others.length ? '<div class="digest-also">Also for this day: ' + others.map((x) => '<a href="#/digest/' + x.date + (x.shared ? '' : '?machine=' + encodeURIComponent(x.machine)) + '">' + esc(x.shared ? 'the shared digest' : x.machine + '’s') + '</a>').join(' · ') + '</div>' : ''
       const unnamed = spv && spaces.some((x) => (spv.machines || []).some((m) => !m.set && m.machine === x)) ? '<div class="digest-hint">Spaces are named after your Macs until you pick one for each: <a href="#/settings/spaces">Settings → Spaces</a> (Work, Personal or your own).</div>' : ''
-      html += '<article class="md"><div class="digest-meta">' + legacy + (madeAt ? 'Made ' + esc(clock(madeAt)) + whose + ' · ' : '') + nextLine + '</div>' + also + unnamed +
+      html += '<article class="md"><div class="digest-meta">' + legacy + (madeAt ? 'Made ' + esc(clock(madeAt)) + whose + ' · ' : '') + nextLine + '</div>' + '<div class="digest-save">' + saveHtmlBtn('digest-save-html') + '</div>' + also + unnamed +
         '<div id="digestSpaces"></div><div class="repos digest-repos" id="digestRepos"></div>' + renderMd(d.markdown, { spaces, sessions: sv ? new Map((sv.sessions || []).map((x) => [x.id, x])) : null, viewer: sv && sv.viewer }) + '</article>'
     } catch (e) { html += '<div class="empty">' + esc(e.message) + '</div>' }
   } else if (noSessionsYet) html += digestFirstHtml({ cfg: state.cfg, health: state.health, esc }) // 0.9.13: nothing to write about yet
   else html += '<div class="empty"><p><strong>No digest yet.</strong></p><p>' + nextLine + '</p><p><button type="button" class="btn primary" data-action="gen-digest">Generate now</button> makes one from your sessions so far.</p></div>'
   $app.innerHTML = html + '</div>'
+  if (pick && digestUi.shown) { try { paintDigestVersion($app, digestUi.shown, pick, { esc, storage: window.localStorage }) } catch {} digestUi.shown = null }
   // 0.9.8: the brief comes first; the space tabs and repo chips sit under it, over the sessions they filter
   const art = $app.querySelector('article.md')
   const after = art && (art.querySelector(':scope > section.start-sec') || [...art.querySelectorAll(':scope > p.lede')].pop())
@@ -5515,7 +5533,7 @@ function paintDigestFilter() {
   const spaces = state.digestSpaces || []
   const sp = state.digestSpace
   const secs = [...document.querySelectorAll('.md section')]
-  for (const sec of secs) sec.hidden = !sec.classList.contains('start-sec') && !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
+  for (const sec of secs) sec.hidden = !sec.classList.contains('start-sec') && !sec.classList.contains('done-sec') && !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
   const tabsBox = document.getElementById('digestSpaces')
   if (tabsBox) {
     const counts = new Map(spaces.map((x) => [x, document.querySelectorAll('.md section[data-space="' + CSS.escape(x) + '"] li[data-repo]').length]))
@@ -6399,7 +6417,7 @@ async function viewSettings() {
         '<label for="f-gap">Min gap (min)</label><input id="f-gap" type="number" min="0" step="1" value="' + esc(c.minGapMin) + '">' +
         '<div class="hint">No automatic checkpoint closer than this to the last.</div>' +
         '<div id="ghBox" class="ghbox">' + ghSection(gh) + '</div>'),
-    digest: digestSettings(c),
+    digest: digestSettings(c) + mcpSetupHtml(null, { esc, icon }), // 2026-11-06: leftoff mcp setup (ui/mcp-setup.js)
     spaces: '<div class="full-box" id="spacesBox">' + spacesSectionHtml() + '</div>',
     sync: syncSection(sync, stUi.data, peers) || unavailable('Couldn’t read the sync status from Leftoff.'),
     agents: '<div class="full-box" id="agentsBox">' + agentsSectionHtml() + '</div>',
@@ -6446,6 +6464,7 @@ async function viewSettings() {
       SETTINGS.map((x) => '<section class="set-pane" data-sec="' + x.key + '" aria-label="' + esc(x.label) + '" hidden>' + panes[x.key] + '</section>').join('') +
       '<div class="full set-save" id="setSave"><span class="faint" id="setSaveNote">Saves every section to config.json in your Leftoff folder.</span><button class="btn primary" type="submit" disabled aria-disabled="true">' + icon('check') + 'Save</button></div></form></div></div>'
   showSettingsSection(r)
+  api('GET', '/v1/mcp').then((reg) => { const box = document.getElementById('mcpState'); if (box) box.innerHTML = mcpStateHtml(reg, esc) }).catch(() => {})
   approvedUi.info = starts; approvedUi.err = ''
   fillApproved($app, starts) // approved folders: paths as text
   const ap = document.getElementById('f-start-approve')
@@ -8539,7 +8558,7 @@ document.addEventListener('keydown', (e) => { const b = e.target.closest && e.ta
       tip.classList.add('on')
     }, delay)
   }
-  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip], .ghost-all[data-tip], .sug-chip [data-tip], .lf-needs .needs-fold[data-tip], .sstrip .ss[data-tip], .file-ref-off[data-tip], .pr-compact .pr-title-btn[data-tip], .files .chip[data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
+  const tipped = (e) => e.target.closest && e.target.closest('.save-html[data-tip], #tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip], .ghost-all[data-tip], .sug-chip [data-tip], .lf-needs .needs-fold[data-tip], .sstrip .ss[data-tip], .file-ref-off[data-tip], .pr-compact .pr-title-btn[data-tip], .files .chip[data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
   document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
   document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
   document.addEventListener('focusin', (e) => { if (wtRefocusing) return; const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
@@ -9249,6 +9268,7 @@ document.addEventListener('click', async (ev) => {
     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 === 'digest-save-html') { if (digestUi.md) saveHtmlFile(digestExportHtml(digestUi.md, { date: digestUi.mdDate }), exportFileName('digest', digestUi.mdDate || '')); return } // 2026-11-06
     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
     if (action === 'copy-fact') {
@@ -9262,8 +9282,9 @@ document.addEventListener('click', async (ev) => {
     if (action === 'copy-cmd') {
       const ok = await copy(btn.dataset.cmd)
       if (ok && btn.classList.contains('copy-float')) { // 0.9.8: the floating copy shows a check for a moment, no tooltip
+        if (!btn._label) btn._label = btn.getAttribute('aria-label') || 'Copy' // 2026-11-06: each button keeps its own label (Live resume, the MCP setup lines)
         clearTimeout(btn._copied); btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.setAttribute('aria-label', 'Copied'); btn.dataset.tip = 'Copied'
-        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy Live resume'); btn.dataset.tip = 'Copy' }, 1500)
+        btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', btn._label); btn.dataset.tip = 'Copy' }, 1500)
       }
       return
     }
@@ -9883,6 +9904,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'file-open') return openDoc(btn.dataset.session, { path: btn.dataset.path, plan: btn.dataset.plan })
     if (action === 'lv-tool-open') return openToolOutput(id, btn.dataset.tool, btn.dataset.label) // 0.9.8: a Live tool chip opens its output
     if (action === 'doc-close') return closeDoc()
+    if (action === 'hp-mode' || action === 'hp-show' || action === 'hp-allow' || action === 'hp-block' || action === 'hp-reload') return hpAction(action, btn)
     if (action === 'doc-dl') { ev.preventDefault(); return openDocMenu(btn) }
     if (action === 'doc-copy' || action === 'doc-download' || action === 'doc-pdf') return docAction(action.slice(4))
     if (action === 'need-restore' || action === 'need-restore-all') {
@@ -10181,7 +10203,7 @@ async function todoDoneChange(cb) {
 
 // The in-app viewer (0.7.0): a doc or plan a session wrote, read from the Mac
 // that owns it (through another Mac or the relay from a phone). Markdown is
-// rendered from escaped text; HTML files show as source; anything else downloads.
+// rendered from escaped text; HTML files open on Preview (sandboxed) or Code; anything else downloads.
 const docUi = { r: null, name: '', printing: null }
 function docViewerEl() {
   let el = document.getElementById('docViewer')
@@ -10201,7 +10223,88 @@ function docViewerEl() {
   document.body.appendChild(el)
   return el
 }
-function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.classList.remove('dv-isdec'); el.querySelector('.dv-body').innerHTML = ''; const back = el.classList.contains('dv-isref') ? refUi.from : null; el.classList.remove('dv-isref'); refUi.sid = null; refUi.from = null; refUi.r = null; if (back && back.isConnected) back.focus({ preventScroll: true }) } docUi.r = null; document.documentElement.classList.remove('dv-open') }
+function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.classList.remove('dv-isdec'); el.querySelector('.dv-body').innerHTML = ''; el.querySelector('.dv-body').classList.remove('dv-hpv'); hpUi.r = null; const back = el.classList.contains('dv-isref') ? refUi.from : null; el.classList.remove('dv-isref'); refUi.sid = null; refUi.from = null; refUi.r = null; if (back && back.isConnected) back.focus({ preventScroll: true }) } docUi.r = null; document.documentElement.classList.remove('dv-open') }
+function docBodyLoading(el) { const b = el.querySelector('.dv-body'); b.classList.remove('dv-hpv'); hpUi.r = null; b.innerHTML = '<div class="empty">Opening…</div>' }
+// 2026-11-06 An HTML file: Preview (ui/html-preview.js, a sandboxed frame; remote
+// resources blocked until Allow, for this view only) or Code, remembered per device.
+const hpUi = { r: null, code: '', mode: 'preview', remote: false, open: false, refs: [] }
+function hpViewPref() { try { return localStorage.getItem(HP_VIEW_KEY) === 'code' ? 'code' : 'preview' } catch { return 'preview' } }
+function mountHtmlPreview(body, r, code, { line = null } = {}) {
+  if (!isHtmlDoc(r)) return false
+  Object.assign(hpUi, { r, code, mode: line ? 'code' : hpViewPref(), remote: false, open: false, refs: remoteRefs(r.text) })
+  body.innerHTML = '<div class="hp-bar"></div><div class="hp-main"></div>'
+  paintHpBar(body); paintHpMain(body)
+  return true
+}
+function paintHpBar(body) { const bar = body.querySelector('.hp-bar'); if (bar) bar.innerHTML = previewBarHtml({ ...hpUi, icon }) }
+function paintHpMain(body) {
+  const main = body.querySelector('.hp-main')
+  if (!main || !hpUi.r) return
+  const pv = hpUi.mode === 'preview'
+  body.classList.toggle('dv-hpv', pv)
+  if (!pv) { main.innerHTML = hpUi.code; return }
+  main.textContent = ''
+  const f = document.createElement('iframe')
+  f.className = 'hp-frame'
+  f.setAttribute('sandbox', 'allow-scripts')
+  f.setAttribute('referrerpolicy', 'no-referrer')
+  f.setAttribute('aria-label', 'Preview of ' + (hpUi.r.name || 'the page'))
+  f._hpDoc = previewDoc(hpUi.r.text, { remote: hpUi.remote })
+  f._hpPing = 0
+  // once the page is in, every load is checked: only the page we wrote answers the ping
+  // (ui/html-preview.js GUARD), so silence means it went somewhere else
+  f.addEventListener('load', () => {
+    if (f._hpDoc != null || !f.isConnected || !f.contentWindow) return
+    const n = ++f._hpPing
+    f.contentWindow.postMessage({ t: 'lo-hp-ping', n }, '*')
+    clearTimeout(f._hpWait)
+    f._hpWait = setTimeout(() => { if (f._hpPong !== n) hpStopped(f) }, 1000)
+  })
+  f.src = PREVIEW_PAGE + (hpUi.remote ? '?remote=1' : '')
+  main.appendChild(f)
+}
+// The page sent itself somewhere (CSP can't stop that): the frame goes, and the bar says so.
+function hpStopped(f) {
+  if (!f || !f.isConnected) return
+  clearTimeout(f._hpWait)
+  const main = f.closest('.hp-main')
+  f.remove()
+  if (main) main.innerHTML = '<div class="empty fv-state hp-stopped"><b>Preview stopped</b><span>The page tried to open another address, so it was closed. Code shows what it does.</span><button type="button" class="btn sm" data-action="hp-reload">Load it again</button></div>'
+}
+function hpAction(action, btn) {
+  const body = document.querySelector('#docViewer .dv-body')
+  if (!body || !hpUi.r) return
+  if (action === 'hp-mode') {
+    const m = btn.dataset.mode === 'code' ? 'code' : 'preview'
+    if (m === hpUi.mode) return
+    hpUi.mode = m
+    try { localStorage.setItem(HP_VIEW_KEY, m) } catch {}
+    paintHpBar(body); paintHpMain(body); body.scrollTop = 0
+  } else if (action === 'hp-show') { hpUi.open = !hpUi.open; paintHpBar(body) }
+  else if (action === 'hp-reload') paintHpMain(body)
+  else if (action === 'hp-allow' || action === 'hp-block') { hpUi.remote = action === 'hp-allow'; paintHpBar(body); paintHpMain(body) }
+  const again = body.querySelector('[data-action="' + action + '"]') || body.querySelector('[data-action="' + (action === 'hp-allow' ? 'hp-block' : action === 'hp-block' ? 'hp-allow' : action) + '"]')
+  if (again && action !== 'hp-mode') again.focus({ preventScroll: true })
+}
+// The sandbox asks for its page once (a frame that navigated away gets nothing), says where a
+// clicked link goes (it doesn't open), and passes Esc on, since keys in the frame stay there.
+window.addEventListener('message', (ev) => {
+  const d = ev.data
+  if (!d || typeof d !== 'object' || typeof d.t !== 'string' || !d.t.startsWith('lo-hp-')) return
+  const f = [...document.querySelectorAll('#docViewer .hp-frame')].find((x) => x.contentWindow === ev.source)
+  if (!f) return
+  if (d.t === 'lo-hp-ready' && f._hpDoc != null) {
+    const html = f._hpDoc; f._hpDoc = null
+    ev.source.postMessage({ t: 'lo-hp-html', html }, '*')
+    const n = ++f._hpPing // the write itself may not fire a load: check once now too
+    ev.source.postMessage({ t: 'lo-hp-ping', n }, '*')
+    f._hpWait = setTimeout(() => { if (f._hpPong !== n) hpStopped(f) }, 1500)
+  }
+  else if (d.t === 'lo-hp-pong') { if (d.n === f._hpPing) { f._hpPong = d.n; clearTimeout(f._hpWait) } }
+  else if (d.t === 'lo-hp-left') hpStopped(f)
+  else if (d.t === 'lo-hp-link' && typeof d.href === 'string') toast('Links don’t open from a preview: ' + d.href.slice(0, 160), 5000)
+  else if (d.t === 'lo-hp-esc') closeDoc()
+})
 document.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && !escInTerminal(ev) && document.getElementById('docViewer') && !document.getElementById('docViewer').hidden) closeDoc() })
 async function openDoc(sessionId, { path, plan } = {}) {
   if (!sessionId || (!path && !plan)) return
@@ -10210,7 +10313,7 @@ async function openDoc(sessionId, { path, plan } = {}) {
   const name = plan ? 'Plan' : String(path).split('/').pop()
   el.querySelector('.dv-title').textContent = name
   el.querySelector('.dv-sub').textContent = ''
-  el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
+  docBodyLoading(el)
   const dl = el.querySelector('.dv-dl'); dl.hidden = true
   docUi.r = null; docUi.name = name
   el.hidden = false
@@ -10222,6 +10325,7 @@ async function openDoc(sessionId, { path, plan } = {}) {
     el.querySelector('.dv-title').textContent = r.name || name
     el.querySelector('.dv-sub').textContent = [r.plan ? 'Plan' : r.kind === 'new' ? 'New' : r.kind === 'edited' ? 'Edited' : '', r.size ? (r.size < 1024 ? r.size + ' B' : Math.round(r.size / 1024) + ' KB') : '', r.peer ? 'from ' + r.peer : ''].filter(Boolean).join(' · ')
     el.querySelector('.dv-body').innerHTML = docViewerBody(r)
+    mountHtmlPreview(el.querySelector('.dv-body'), r, docViewerBody(r))
     el.querySelector('.dv-ptitle').textContent = docFileName(r, name)
     docUi.r = r; docUi.name = name
     const items = docMenuItems(r)
@@ -10246,7 +10350,7 @@ async function openToolOutput(sessionId, toolId, label) {
   const name = label || 'Tool output'
   el.querySelector('.dv-title').textContent = name
   el.querySelector('.dv-sub').textContent = ''
-  el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
+  docBodyLoading(el)
   const dl = el.querySelector('.dv-dl'); dl.hidden = true
   docUi.r = null; docUi.name = name
   el.hidden = false
@@ -10327,7 +10431,7 @@ async function loadRefFile() {
   el.querySelector('.dv-title').textContent = name
   el.querySelector('.dv-sub').textContent = ''
   el.querySelector('.dv-ref').innerHTML = refBarHtml({ path: refUi.path, mac: false, icon })
-  el.querySelector('.dv-body').innerHTML = '<div class="empty">Opening…</div>'
+  docBodyLoading(el)
   const dl = el.querySelector('.dv-dl'); dl.hidden = true
   docUi.r = null; docUi.name = name; refUi.r = null
   const wasHidden = el.hidden
@@ -10343,7 +10447,9 @@ async function loadRefFile() {
     el.querySelector('.dv-ref').innerHTML = refBarHtml({ path: r.path || refUi.path, mac, icon })
     el.querySelector('.dv-sub').textContent = [r.size ? refSize(r.size) : '', r.lang ? r.lang.toUpperCase() : '', r.peer ? 'on ' + r.peer : '', refUi.line && (r.type === 'code' || r.type === 'text') ? 'line ' + refUi.line : ''].filter(Boolean).join(' · ')
     const body = el.querySelector('.dv-body')
-    body.innerHTML = refBody(r, { line: refUi.line })
+    const code = refBody(r, { line: refUi.line })
+    body.innerHTML = code
+    mountHtmlPreview(body, r, code, { line: refUi.line })
     el.querySelector('.dv-ptitle').textContent = r.name || name
     if (r.type === 'pdf' && r.base64) {
       const b64 = r.base64