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

package/ui/cp-fold.js

@@ -20,3 +20,23 @@ export function cpFoldSummary(cp, { decided = false } = {}) {
   const t = names.join(', ')
   return t.charAt(0).toUpperCase() + t.slice(1)
 }
+
+// 2026-11-06: a checkpoint's "Got done" facts (cp.work: commits, PRs, pushes, the last test run, from the
+// commands' own output) as short lines for its card: [{ kind, text }], at most max, then "+N more".
+// kind is a class name (merged, opened, commit, push, pass, fail); the words say the same, shape and text.
+export function workItems(cp, { max = 5 } = {}) {
+  const w = cp && Array.isArray(cp.work) ? cp.work : []
+  const out = []
+  for (const f of w) {
+    if (!f || typeof f !== 'object') continue
+    if (f.kind === 'pr' && f.number) out.push({ kind: f.state === 'merged' ? 'merged' : 'opened', text: (f.state === 'merged' ? 'Merged' : f.state === 'auto' ? 'Set to merge' : 'Opened') + ' PR #' + f.number + (f.title ? ': ' + String(f.title) : '') + (f.state === 'opened' ? ' (not merged yet)' : '') })
+    else if (f.kind === 'commit' && f.subject) out.push({ kind: 'commit', text: 'Committed ' + (f.sha ? '`' + String(f.sha).slice(0, 7) + '` ' : '') + String(f.subject) })
+    else if (f.kind === 'push' && f.branch) out.push({ kind: 'push', text: 'Pushed ' + String(f.branch) })
+    else if (f.kind === 'tests') out.push({ kind: f.ok ? 'pass' : 'fail', text: (f.ok ? 'Tests passed' : 'Tests failing') + (f.passed != null ? ': ' + (f.ok ? f.passed + ' passed' : f.failed + ' failed, ' + f.passed + ' passed') : '') + (f.cmd ? ' (`' + String(f.cmd).replace(/`/g, '') + '`)' : '') })
+  }
+  // the PRs and tests matter most; commits fill what's left
+  const top = out.filter((x) => x.kind !== 'commit' && x.kind !== 'push'), rest = out.filter((x) => x.kind === 'commit' || x.kind === 'push')
+  const all = [...top, ...rest]
+  if (all.length <= max) return all
+  return [...all.slice(0, max - 1), { kind: 'more', text: '+' + (all.length - max + 1) + ' more' }]
+}

package/ui/decisions.js

@@ -207,7 +207,8 @@ export function decisionsPageHtml(v, ui = {}, { esc = escD } = {}) {
   if (v && (v.project || sc.kind === 'repo')) h += '<section class="proj-sec">' + storageChoiceHtml(v.project, { esc, may: ui.may !== false, trusted: ui.trusted !== false }) + '</section>'
   if (review.length) h += '<section class="proj-sec dec-review"><h2>To review <span class="count">' + review.length + '</span></h2><p class="faint">Proposed from checkpoints. Questions you answered and plans you approved are accepted on their own. Only accepted decisions reach new sessions, Ask and walkthroughs.</p><ul class="dec-tl">' + review.map((d) => decisionItemHtml(d, { ...opts, review: true })).join('') + '</ul></section>'
   const ctl = '<div class="dec-ctl"><button type="button" class="sask-opt" data-action="dec-all" aria-pressed="' + !!ui.all + '">' + (ui.all ? 'Showing superseded and rejected' : 'Include superseded and rejected' + (hidden ? ' (' + hidden + ')' : '')) + '</button>' +
-    '<button type="button" class="btn" data-action="dec-copy">Copy as Markdown</button>' + testplanLinkHtml(sc, { esc, cls: 'btn' }) + '</div>'
+    '<button type="button" class="btn" data-action="dec-copy">Copy as Markdown</button>' +
+    '<button type="button" class="btn save-html" data-action="dec-save-html" data-tip="Save as HTML · one file with nothing linked out: opens offline, on a phone, and prints">Save as HTML</button>' + testplanLinkHtml(sc, { esc, cls: 'btn' }) + '</div>' // 2026-11-06
   h += '<section class="proj-sec dec-timeline"><h2>Timeline <span class="count">' + rows.length + '</span></h2>' + ctl +
     (rows.length ? '<ol class="dec-tl">' + rows.map((d) => decisionItemHtml(d, opts)).join('') + '</ol>' : list.length ? '<p class="faint">Nothing accepted yet.</p>' : decisionsEmptyHtml({ esc })) + '</section>'
   return '<div class="proj dec-page">' + h + '</div>'

package/ui/digest-versions.js

@@ -0,0 +1,57 @@
+// The digest's version note (2026-11-06, src/history.js): a quiet "v3 · changed since 9:00 AM" under the
+// title when a day's digest was made more than once, and a list to open an older version
+// (#/digest/<date>?v=N). "Since" is the version this device last opened, kept in localStorage; with none
+// (or the newest), it just says how many versions there are. An older version says so in words, with a
+// way back. Pure functions plus one paint; the board's renderer is not touched.
+
+export const SEEN_KEY = 'lo.digestSeen'
+const hm = (iso) => { const t = new Date(iso); return Number.isNaN(t.getTime()) ? '' : t.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) }
+
+// { date: version } this device opened
+export function readSeen(storage) { try { const o = JSON.parse(storage.getItem(SEEN_KEY) || '{}'); return o && typeof o === 'object' ? o : {} } catch { return {} } }
+export function markSeen(storage, date, version) {
+  try {
+    const o = readSeen(storage)
+    if ((o[date] || 0) >= version) return
+    o[date] = version
+    const keep = Object.keys(o).sort().slice(-30) // a month of days is plenty
+    storage.setItem(SEEN_KEY, JSON.stringify(Object.fromEntries(keep.map((k) => [k, o[k]]))))
+  } catch {}
+}
+
+// d: the GET /v1/digests/<date> answer; seen: the version this device last opened (or null)
+// -> { label, older, latest, items: [{ version, label, href, current, shown }] } | null (one version: nothing to show)
+export function versionNote(d, date, seen = null) {
+  const vs = d && d.versions
+  if (!vs || !Array.isArray(vs.versions) || vs.count < 2) return null
+  const shown = d.version || vs.latest
+  const latest = vs.versions.find((v) => v.version === vs.latest) || vs.versions[vs.versions.length - 1]
+  const since = seen && seen < vs.latest ? vs.versions.find((v) => v.version === seen) : null
+  const label = shown !== vs.latest ? 'v' + shown + ' of ' + vs.count : since ? 'v' + vs.latest + ' · changed since ' + hm(since.generatedAt) : 'v' + vs.latest + ' · ' + vs.count + ' versions'
+  const items = vs.versions.slice().reverse().map((v) => ({ version: v.version, label: 'v' + v.version + ' · ' + hm(v.generatedAt) + (v.version === vs.latest ? ' (latest)' : ''), href: '#/digest/' + date + (v.version === vs.latest ? '' : '?v=' + v.version), current: v.version === vs.latest, shown: v.version === shown }))
+  return { label, older: shown !== vs.latest, shown, latest: vs.latest, latestAt: latest.generatedAt, shownAt: (vs.versions.find((v) => v.version === shown) || {}).generatedAt, items }
+}
+
+export function versionNoteHtml(n, { esc, date }) {
+  if (!n) return null
+  // a div, not a ul: the digest's repo filter shows and hides every ul in the article
+  const menu = '<div class="dv-list" id="dvList" role="list" hidden>' + n.items.map((i) => '<a role="listitem" href="' + esc(i.href) + '"' + (i.shown ? ' aria-current="page"' : '') + '>' + (i.shown ? '● ' : '○ ') + esc(i.label) + '</a>').join('') + '</div>'
+  const btn = '<button type="button" class="dv-btn" aria-expanded="false" aria-controls="dvList" data-tip="Earlier versions of this digest">' + esc(n.label) + ' ▾</button>'
+  const old = n.older ? '<div class="banner dv-old" role="status"><span class="grow"><b>◷ An earlier version</b>: v' + n.shown + ', made ' + esc(hm(n.shownAt)) + '. The latest is v' + n.latest + ' (' + esc(hm(n.latestAt)) + ').</span><a class="btn" href="#/digest/' + esc(date) + '">Back to latest</a></div>' : ''
+  return { old, note: '<span class="dv">' + btn + menu + '</span>' }
+}
+
+// After the digest is on the page: the note on its own line under the meta line, the banner above the article.
+export function paintDigestVersion(root, d, date, { esc, storage }) {
+  const seen = storage ? readSeen(storage)[date] || null : null
+  const n = versionNote(d, date, seen)
+  if (storage && d && d.version && d.versions && d.version === d.versions.latest) markSeen(storage, date, d.version)
+  if (!n) return null
+  const html = versionNoteHtml(n, { esc, date })
+  const meta = root.querySelector('article.md .digest-meta')
+  if (meta) meta.insertAdjacentHTML('afterend', '<div class="dv-line">' + html.note + '</div>')
+  if (html.old) { const art = root.querySelector('article.md'); if (art) art.insertAdjacentHTML('beforebegin', html.old) }
+  const btn = root.querySelector('.dv-btn'), list = root.querySelector('#dvList')
+  if (btn && list) btn.addEventListener('click', () => { const open = btn.getAttribute('aria-expanded') !== 'true'; btn.setAttribute('aria-expanded', String(open)); list.hidden = !open })
+  return n
+}

package/ui/html-preview.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<!-- The HTML file viewer's sandbox (ui/html-preview.js). Served with its own CSP
+     (sandbox allow-scripts, inline only unless ?remote=1). It takes one page from
+     the board by postMessage and becomes that page. -->
+<script>
+addEventListener('message', function (e) {
+  if (e.source !== parent || !e.data || e.data.t !== 'lo-hp-html') return
+  document.open(); document.write(String(e.data.html)); document.close()
+})
+parent.postMessage({ t: 'lo-hp-ready' }, '*')
+</script>

package/ui/html-preview.js

@@ -0,0 +1,107 @@
+// 2026-11-06 An HTML file in the viewer renders as a page (Preview · Code).
+// The page never runs in the board: it runs in ui/html-preview.html, a shell
+// served with its own CSP (previewCsp) whose `sandbox` gives it an opaque
+// origin, so it can't read the board's storage or cookies, and its calls to
+// the daemon carry Origin: null (refused). The board hands it the file by
+// postMessage. Remote resources (fonts, CDN scripts, images) are blocked until
+// you press Allow, for that view only; the bar lists what the file asks for.
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+
+export const PREVIEW_PAGE = '/html-preview.html'
+export const VIEW_KEY = 'lo-html-view-v1'
+
+// The shell's CSP. Inline only by default; `remote` adds http(s) sources.
+// Never 'self': the board's own files stay out of the preview. Copied in
+// relay/src/user.js (a unit test keeps them the same).
+export function previewCsp(remote = false) {
+  const r = remote ? ' https: http:' : ''
+  return "default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval'" + r + "; style-src 'unsafe-inline'" + r +
+    '; img-src data: blob:' + r + '; font-src data:' + r + '; media-src data: blob:' + r + '; connect-src ' + (remote ? 'https: http:' : "'none'") +
+    "; frame-src 'none'; worker-src 'none'; form-action 'none'; base-uri 'none'; frame-ancestors 'self'; sandbox allow-scripts"
+}
+
+// An HTML file, from either reader: the session's files (type html) or a path
+// in a message (type code, lang html).
+export function isHtmlDoc(r) {
+  if (!r || r.missing || r.tooBig || r.binary || typeof r.text !== 'string') return false
+  return r.type === 'html' || (r.type === 'code' && (r.lang === 'html' || /^text\/html\b/.test(r.mime || '')))
+}
+
+// Remote resources the file loads by itself (not links you'd click): src,
+// srcset, poster, <link href> (not a resource hint), <object data>, CSS url()
+// and @import. Scripts can fetch more once allowed; the bar says so.
+const HINT_RELS = /\b(preconnect|dns-prefetch|prerender)\b/i
+const LINK_TAGS = /^(a|area|base|form)$/i
+function remoteUrl(u) {
+  const s = String(u || '').trim().replace(/^['"]|['"]$/g, '')
+  if (/^https?:\/\//i.test(s)) return s
+  if (/^\/\/[^/]/.test(s)) return 'https:' + s
+  return ''
+}
+function cssUrls(css, add) {
+  for (const m of String(css).matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi)) add(m[2], 'style')
+  for (const m of String(css).matchAll(/@import\s+(['"])([^'"]+)\1/gi)) add(m[2], 'style')
+}
+export function remoteRefs(html) {
+  const seen = new Map()
+  const add = (u, kind) => { const url = remoteUrl(u); if (url && !seen.has(url)) { let host = ''; try { host = new URL(url).host } catch { return } seen.set(url, { url, host, kind }) } }
+  const src = String(html || '').replace(/<!--[\s\S]*?-->/g, '')
+  for (const m of src.matchAll(/<([a-z][\w-]*)\b([^>]*)>/gi)) {
+    const tag = m[1].toLowerCase(), attrs = m[2]
+    const attr = (n) => { const a = attrs.match(new RegExp('(?:^|\\s)' + n + '\\s*=\\s*(?:"([^"]*)"|\'([^\']*)\'|([^\\s>]+))', 'i')); return a ? (a[1] ?? a[2] ?? a[3]) : null }
+    if (LINK_TAGS.test(tag)) continue
+    const kind = tag === 'script' ? 'script' : tag === 'link' ? (/stylesheet/i.test(attr('rel') || '') ? 'style' : 'link') : tag === 'img' || tag === 'picture' || tag === 'source' ? 'image' : tag
+    if (attr('src')) add(attr('src'), kind)
+    if (attr('poster')) add(attr('poster'), 'image')
+    if (tag === 'object' && attr('data')) add(attr('data'), 'object')
+    if (tag === 'link' && attr('href') && !HINT_RELS.test(attr('rel') || '')) add(attr('href'), kind)
+    for (const part of String(attr('srcset') || '').split(',')) add(part.trim().split(/\s+/)[0], 'image')
+    if (attr('style')) cssUrls(attr('style'), add)
+  }
+  for (const m of src.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)) cssUrls(m[1], add)
+  return [...seen.values()]
+}
+
+// The hosts, in first-seen order: "fonts.googleapis.com, fonts.gstatic.com".
+export function refHosts(refs) { return [...new Set((refs || []).map((x) => x.host))] }
+
+// What the shell writes: the file, plus a first script that keeps a link click
+// inside the preview from leaving it (it says where the link goes instead),
+// passes Esc on, answers the board's ping, and says when the page is leaving.
+// The preview's own CSP can't stop a page sending its frame somewhere (a script
+// setting location); the board's CSP does (frame-src 'self' covers a child's
+// navigations, so another site is refused before any request). Behind that, the
+// board stops a preview that leaves for anywhere it can go (ping unanswered after
+// a load, or pagehide) and says so. A meta refresh, which
+// leaves with no script, is taken out; while blocked, so are resource hints (a
+// preconnect isn't covered by CSP).
+const GUARD = '<script>(function(){var P=parent,D=document;D.addEventListener("click",function(e){var a=e.target&&e.target.closest&&e.target.closest("a[href],area[href]");if(!a)return;var h=a.getAttribute("href")||"";if(h.charAt(0)==="#")return;e.preventDefault();P.postMessage({t:"lo-hp-link",href:h},"*")},true);D.addEventListener("keydown",function(e){if(e.key==="Escape")P.postMessage({t:"lo-hp-esc"},"*")});addEventListener("message",function(e){if(e.source===P&&e.data&&e.data.t==="lo-hp-ping")P.postMessage({t:"lo-hp-pong",n:e.data.n},"*")});addEventListener("pagehide",function(){P.postMessage({t:"lo-hp-left"},"*")})})()</script>'
+const attrOf = (t, n) => (t.match(new RegExp('\\b' + n + '\\s*=\\s*(?:"([^"]*)"|\'([^\']*)\'|([^\\s>]+))', 'i')) || []).slice(1).join(' ')
+export function previewDoc(html, { remote = false } = {}) {
+  let s = String(html || '')
+  s = s.replace(/<meta\b[^>]*>/gi, (t) => (/^\s*refresh\s*$/i.test(attrOf(t, 'http-equiv')) ? '' : t))
+  if (!remote) s = s.replace(/<link\b[^>]*>/gi, (t) => (HINT_RELS.test(attrOf(t, 'rel')) ? '' : t))
+  const dt = s.match(/^\s*(?:<!--[\s\S]*?-->\s*)*<!doctype[^>]*>/i)
+  return dt ? dt[0] + GUARD + s.slice(dt[0].length) : GUARD + s
+}
+
+// The bar above the file: Preview · Code, and in Preview what's blocked.
+export function previewBarHtml({ mode = 'preview', refs = [], remote = false, open = false, icon = () => '' } = {}) {
+  const seg = (m, label, tip) => '<button type="button" data-action="hp-mode" data-mode="' + m + '" aria-pressed="' + (mode === m) + '" data-tip="' + esc(tip) + '">' + esc(label) + '</button>'
+  let h = '<div class="wt-seg wt-seg-sm hp-seg" role="group" aria-label="Show the file as">' + seg('preview', 'Preview', 'The page, rendered in a sandbox') + seg('code', 'Code', 'The file’s source') + '</div>'
+  if (mode === 'preview' && refs.length) {
+    const hosts = refHosts(refs)
+    const n = refs.length
+    const words = remote ? 'Loading ' + n + ' remote ' + (n === 1 ? 'resource' : 'resources') : n + ' remote ' + (n === 1 ? 'resource' : 'resources') + ' blocked'
+    h += '<div class="hp-remote' + (remote ? ' on' : '') + '">' + icon(remote ? 'globe' : 'shield', 'ic hp-ric') +
+      '<span class="hp-rw"><b>' + esc(words) + '</b><span class="hp-hosts"> from ' + esc(hosts.slice(0, 2).join(', ') + (hosts.length > 2 ? ' and ' + (hosts.length - 2) + ' more' : '')) + '</span></span>' +
+      '<button type="button" class="btn sm hp-show" data-action="hp-show" aria-expanded="' + !!open + '" aria-controls="hpList">' + (open ? 'Hide' : 'Show') + '</button>' +
+      (remote ? '<button type="button" class="btn sm" data-action="hp-block" data-tip="Reload the preview with remote resources blocked">Block</button>'
+        : '<button type="button" class="btn sm" data-action="hp-allow" data-tip="Load these, and anything they load, for this view only">Allow</button>') + '</div>'
+    if (open) {
+      h += '<ul class="hp-list" id="hpList">' + refs.map((x) => '<li><span class="hp-kind">' + esc(x.kind) + '</span><code>' + esc(x.url) + '</code></li>').join('') + '</ul>' +
+        '<p class="hp-note faint">' + (remote ? '' : 'Allowing also lets the page’s scripts load anything else they ask for. ') + 'Links in the page don’t open from the preview.</p>'
+    }
+  }
+  return h
+}

package/ui/icons.js

@@ -57,6 +57,7 @@ export const ICONS = {
   "layers": "<path d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\"/> <path d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\"/> <path d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\"/>",
   "bot": "<path d=\"M12 8V4H8\"/> <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/> <path d=\"M2 14h2\"/> <path d=\"M20 14h2\"/> <path d=\"M15 13v2\"/> <path d=\"M9 13v2\"/>",
   "smartphone": "<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"/> <path d=\"M12 18h.01\"/>",
+  "globe": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"/> <path d=\"M2 12h20\"/>",
   "shield": "<path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"/>",
   "info": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M12 16v-4\"/> <path d=\"M12 8h.01\"/>",
   "chevron-right": "<path d=\"m9 18 6-6-6-6\"/>",

package/ui/mcp-setup.js

@@ -0,0 +1,26 @@
+// `leftoff mcp` setup (2026-11-06): the commands you run yourself to let Claude Code or Codex search
+// Leftoff's digests, decisions and checkpoints. Leftoff never writes ~/.claude or ~/.codex; the board
+// shows these with a Copy button, `leftoff doctor` says whether it looks added. Shared by the board and the CLI.
+export const MCP_CLAUDE_LINE = 'claude mcp add --scope user leftoff -- leftoff mcp'
+export const MCP_CODEX_LINE = 'codex mcp add leftoff -- leftoff mcp'
+export const MCP_CODEX_TOML = '[mcp_servers.leftoff]\ncommand = "leftoff"\nargs = ["mcp"]'
+
+const row = (cmd, label, esc, icon) => '<div class="mcp-row"><code class="mono">' + esc(cmd) + '</code>' +
+  '<button type="button" class="copy-float" data-action="copy-cmd" data-cmd="' + esc(cmd) + '" aria-label="' + esc(label) + '" data-tip="Copy">' + icon('copy') + '</button></div>'
+
+// One registration's state, by shape and words: ✓ added, ○ not added, ? couldn't tell.
+export function mcpStateHtml(r, esc) {
+  if (!r) return ''
+  const one = (who, x) => !x ? '' : x.registered ? '<span class="mcp-state ok">✓ Added to ' + who + (x.scope ? ' (' + esc(x.scope) + ')' : '') + '</span>' : x.error ? '<span class="mcp-state unk">? ' + esc(who) + ': ' + esc(x.error) + '</span>' : '<span class="mcp-state no">○ Not added to ' + who + ' yet</span>'
+  return '<div class="mcp-states">' + one('Claude Code', r.claude) + one('Codex', r.codex) + '</div>'
+}
+
+// The Settings → Digest part: "Let Claude search your notes".
+export function mcpSetupHtml(reg, { esc, icon }) {
+  return '<div class="section" id="mcp">Let Claude search your notes</div>' +
+    '<div class="full hint">Claude Code can search your digests, decisions and checkpoints (“what did we decide about the relay?”) through <code>leftoff mcp</code>. It only reads, on this machine; nothing leaves it. Run this once in a terminal:</div>' +
+    '<div class="full mcp-box">' + row(MCP_CLAUDE_LINE, 'Copy the Claude Code command', esc, icon) +
+    '<details class="mcp-codex"><summary>Using Codex? Show its command</summary>' + row(MCP_CODEX_LINE, 'Copy the Codex command', esc, icon) +
+    '<div class="hint">Or add to <code>~/.codex/config.toml</code> yourself:</div><pre class="mono">' + esc(MCP_CODEX_TOML) + '</pre></details>' +
+    '<div id="mcpState">' + mcpStateHtml(reg, esc) + '</div></div>'
+}

package/ui/render-digest.js

@@ -0,0 +1,98 @@
+// The digest's markdown as HTML: one renderer for the board (ui/app.js) and for
+// `leftoff export digest --html` (ui/render-export.js, through node), so both say
+// the same thing. 2026-11-06 moved here from ui/app.js's renderMd, unchanged for the
+// board: its Go / Resume buttons, session links and Copy for standup come in as hooks
+// (action, href, standup); an exported file passes none of them and gets plain words.
+// No DOM, no imports: runs in a browser and in node alike.
+
+export const escR = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+export const boardHref = (id) => '#/s/' + encodeURIComponent(id)
+
+// 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.
+export const MD_SID = /\s*<!-- s:(\S+?) -->\s*$/
+
+export function digestBodyHtml(md, { spaces = [], esc = escR, href = boardHref, action = null, standup = null, decLinks = true } = {}) {
+  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, decLinks ? '<a class="dg-dec" href="$2">$1</a>' : '<span class="dg-dec">$1</span>').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, inDone = 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 } }
+  // a session's link: the board's #/s/<id>; an exported file has none (href returns null)
+  const link = (id, html, cls = '') => { const u = id && href ? href(id) : null; return u ? '<a' + (cls ? ' class="' + cls + '"' : '') + ' href="' + esc(u) + '">' + html + '</a>' : (cls ? '<span class="' + cls + '">' + html + '</span>' : html) }
+  const act = (id) => (id && action ? action(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 (h === 'What you got done') out.push('<section class="done-sec"><h2>' + inline(h) + '</h2>') // 2026-11-06
+    else if (spaces.includes(h)) {
+      out.push('<section class="space-sec" data-space="' + esc(h) + '"><div class="space-head"><h2>' + esc(h) + '</h2>' +
+        (standup ? standup(h) : '') + '</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 ? link(id, inline(st[2])) : 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 && action ? '<div class="sh-act">' + act(id) + '</div>' : '') + '</li>')
+      continue
+    }
+    // 2026-11-06: What you got done: "- Merged PR #53: …", "- Still open: **Title**, next: …" (its session linked)
+    const dn = inDone && /^- /.test(line) && line.match(/^- (Merged|Opened|Set to merge when checks pass|Also committed|Committed|Tests passed|Tests failing|Decided|Waiting on you|Still open|\+\d+ more decisions)\b(.*)$/)
+    if (dn) {
+      openList('ul', 'done')
+      const kind = { 'Merged': 'merged', 'Opened': 'opened', 'Set to merge when checks pass': 'opened', 'Also committed': 'commit', 'Committed': 'commit', 'Tests passed': 'pass', 'Tests failing': 'fail', 'Decided': 'decided', 'Waiting on you': 'you', 'Still open': 'open' }[dn[1]] || 'decided'
+      const so = id && dn[2].match(/^: \*\*(.+?)\*\*(.*)$/)
+      const rest = so ? ': ' + link(id, inline(so[1])) + inline(so[2]) : inline(dn[2])
+      out.push('<li class="dn dn-' + kind + '"' + (id ? ' data-sid="' + esc(id) + '"' : '') + '><b>' + esc(dn[1]) + '</b>' + rest + '</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">' + link(id, inline(bi[1]), 'bi-title') + '<span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span></div>' + (action ? '<div class="sh-act">' + act(id) + '</div>' : '')); continue }
+      if (bi) { out.push('<li class="bi"' + attrs + '><div class="bi-head">' + link(id, inline(bi[1]), 'bi-title') + '<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)) inDone = line.slice(3).trim() === 'What you got done'
+    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' || h === 'What you got done') 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')
+}

package/ui/render-export.js

@@ -0,0 +1,128 @@
+// One self-contained .html file for a digest, a decision log or a walkthrough
+// (2026-11-06, phase 2b). The board's "Save as HTML" and `leftoff export … --html`
+// both call these, so the file is the same from either. The file carries its CSS
+// inline and nothing else: no scripts, fonts, images or links out (a Content
+// Security Policy says so too), light and dark from the reader's own setting,
+// readable on a phone, and it prints. No DOM and no node-only imports: runs in a
+// browser and in node.
+import { digestBodyHtml, escR as esc } from './render-digest.js'
+import { EXPORT_CSS, toHtmlDoc, exportName as wtExportName } from './semdiff.js'
+import { STATUS_SHAPE, STATUS_WORD, SOURCE_WORDS, timelineRows } from './decisions.js'
+
+export const EXPORT_CSP = "default-src 'none'; style-src 'unsafe-inline'"
+
+// A time as words, the same on the board and the CLI (en-US, the reader's own zone unless one is given)
+export function exportWhen(iso, { timeZone } = {}) {
+  const t = Date.parse(iso || '')
+  if (!Number.isFinite(t)) return ''
+  return new Date(t).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', ...(timeZone ? { timeZone } : {}) })
+}
+
+// A file name for the download / the CLI's default: "leftoff-digest-2026-11-06.html"
+export function exportFileName(kind, label = '') {
+  const slug = String(label || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 48)
+  if (kind === 'walkthrough') return wtExportName(label)
+  return 'leftoff-' + kind + (slug ? '-' + slug : '') + '.html'
+}
+
+// The page around a body: the same head for every export.
+export function exportDoc({ title, css = '', body }) {
+  return '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">' +
+    '<meta name="color-scheme" content="light dark"><meta http-equiv="Content-Security-Policy" content="' + esc(EXPORT_CSP) + '">' +
+    '<title>' + esc(title) + '</title><style>' + EXPORT_CSS + PAGE_CSS + css + '</style></head><body><main>' + body + '</main></body></html>\n'
+}
+
+// Shared by the digest and the decision log: phone width, print, reduced motion (nothing moves anyway)
+const PAGE_CSS = 'html{-webkit-text-size-adjust:100%;text-size-adjust:100%}main{padding:24px 16px 48px}h3{font-size:15px;margin:18px 0 4px}p{margin:0 0 10px;overflow-wrap:anywhere}li{overflow-wrap:anywhere}' +
+  '.foot{margin-top:40px;padding-top:10px;border-top:1px solid #d1d9e0;color:#59636e;font-size:12px}' +
+  '@media (min-width:600px){main{padding:32px 24px 64px}}' +
+  '@media print{body{background:#fff;color:#000;font-size:12pt}main{max-width:none;padding:0}section,li{break-inside:avoid}a{color:inherit;text-decoration:none}.foot{color:#555}}' +
+  '@media (prefers-color-scheme:dark){.foot{border-color:#3d444d;color:#9198a1}}'
+
+// ---------------------------------------------------------------- the digest
+
+const DIGEST_CSS = '.lede{font-size:16px;margin:0 0 10px}.meta{color:#59636e;font-size:13px;margin:0 0 18px}' +
+  'section{margin:22px 0 0}section.done-sec{margin:16px 0 4px;padding:10px 14px 6px;border:1px solid #d1d9e0;border-radius:10px;background:#f6f8fa}' +
+  'section.done-sec h2{margin:2px 0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#59636e}section.done-sec h3{margin:12px 0 4px;font-size:14px}' +
+  'ul.done{list-style:none;margin:0;padding:0}li.dn{position:relative;padding:3px 0 3px 22px;line-height:1.45}li.dn b{font-weight:600}' +
+  'li.dn::before{position:absolute;left:2px;top:3px;width:16px;text-align:center;font-weight:700;color:#59636e}' +
+  "li.dn-merged::before{content:'✓'}li.dn-opened::before{content:'○'}li.dn-commit::before{content:'•'}li.dn-pass::before{content:'✓'}li.dn-fail::before{content:'✗'}li.dn-decided::before{content:'◆';font-size:11px}li.dn-you::before{content:'!'}li.dn-open::before{content:'→'}li.dn-more::before{content:'+'}" +
+  'ol.start{padding-left:22px}ol.start li{margin:6px 0}.sh-main{display:flex;flex-direction:column;gap:2px}.sh-step{font-weight:600}.sh-sess{color:#59636e;font-size:14px}.sh-repo,.where,.bi-tag{color:#59636e;font-size:13px}' +
+  'ul{padding-left:20px}ul li{margin:6px 0}.bi-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}.bi-title{font-weight:600}.bi-say{display:block}.sub{display:block;color:#59636e;font-size:14px}.sub .k{font-weight:600;margin-right:4px}' +
+  '.space-head h2{margin:0}details.fin summary{min-height:44px;display:flex;align-items:center}' +
+  '@media print{details.fin>*{display:block}section.done-sec{background:none}}' +
+  '@media (prefers-color-scheme:dark){section.done-sec{background:#161b22;border-color:#3d444d}.meta,.sh-sess,.sh-repo,.where,.bi-tag,.sub,section.done-sec h2,li.dn::before{color:#9198a1}}'
+
+const frontmatter = (md) => {
+  const m = String(md || '').match(/^---\n([\s\S]*?)\n---\n/)
+  const out = {}
+  if (m) for (const l of m[1].split('\n')) { const kv = l.match(/^([a-z_]+):\s*(.*)$/); if (kv) out[kv[1]] = kv[2].trim() }
+  return out
+}
+const listOf = (v) => (/^\[.*\]$/.test(v || '') ? v.slice(1, -1).split(',').map((x) => x.trim()).filter(Boolean) : [])
+
+// md: the digest file as it is on disk (front matter and all). The session
+// buttons, links into the board and Copy for standup are the board's; the file
+// has the words only.
+export function digestExportHtml(md, { date = null, timeZone } = {}) {
+  const fm = frontmatter(md)
+  const day = date || fm.date || ''
+  const made = exportWhen(fm.generated_at, { timeZone })
+  const meta = '<p class="meta">' + esc(['Daily digest', day, made ? 'made ' + made : ''].filter(Boolean).join(' · ')) + '</p>'
+  let body = digestBodyHtml(String(md || ''), { spaces: listOf(fm.spaces), href: null, action: null, standup: null, decLinks: false })
+    .replace(/<details class="fin">/g, '<details class="fin" open>') // a file is read whole (and printed): Finished starts open
+  body = /<h1>[\s\S]*?<\/h1>/.test(body) ? body.replace(/(<h1>[\s\S]*?<\/h1>)/, (h) => h + meta) : '<h1>Daily digest</h1>' + meta + body
+  return exportDoc({ title: 'Digest · ' + day, css: DIGEST_CSS, body: body + foot() })
+}
+
+// ---------------------------------------------------------------- the decision log
+
+const DEC_CSS = '.dl{list-style:none;margin:0;padding:0}.dl>li{padding:12px 0;border-top:1px solid #d1d9e0}.dl>li:first-child{border-top:0}' +
+  '.dh{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px;color:#59636e}.dh .id{font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.st{color:#1f2328;font-weight:600}' +
+  '.dt{font-size:15px;margin:4px 0 2px}.dw,.da,.dc,.dm{font-size:14px;color:#59636e;margin:2px 0}.count{color:#59636e;font-weight:400}' +
+  '.dl>li.superseded .dt,.dl>li.rejected .dt{text-decoration:line-through;text-decoration-thickness:1px}' +
+  '@media (prefers-color-scheme:dark){.dl>li{border-color:#3d444d}.dh,.dw,.da,.dc,.dm,.count{color:#9198a1}.st{color:#e6edf3}}'
+
+const dday = (iso) => String(iso || '').slice(0, 10)
+function decisionItem(d, byId) {
+  const st = STATUS_SHAPE[d.status] ? '<span class="st"><span aria-hidden="true">' + STATUS_SHAPE[d.status] + '</span> ' + esc(STATUS_WORD[d.status]) + '</span>' : ''
+  const chain = []
+  for (const id of d.supersedes || []) { const o = byId.get(id); chain.push('Replaces ' + esc(id) + (o ? ' (' + esc(dday(o.createdAt)) + ': ' + esc(o.text) + ')' : '')) }
+  if (d.supersededBy) chain.push('Superseded by ' + esc(d.supersededBy) + (d.supersededAt ? ' on ' + esc(dday(d.supersededAt)) : ''))
+  const tp = /^testplan:(tp_[0-9a-f]{16})#c(\d+)$/.exec(String(d.checkpointId || ''))
+  const from = tp ? 'From a test plan (check ' + esc(tp[2]) + ')' : d.session && d.session.title ? 'From ' + esc(d.session.title) + (d.session.pr && d.session.pr.number ? ' · PR #' + esc(d.session.pr.number) : '') : ''
+  const meta = [esc(SOURCE_WORDS[d.source] || SOURCE_WORDS.agent), from].filter(Boolean).join(' · ')
+  return '<li class="' + esc(d.status) + '"><div class="dh"><span>' + esc(dday(d.createdAt)) + '</span><span class="id">' + esc(d.id) + '</span>' + (d.repoLabel && d.multi ? '<span>' + esc(d.repoLabel) + '</span>' : '') + st + '</div>' +
+    '<div class="dt">' + esc(d.text) + (d.edited ? ' <span class="dm">(edited)</span>' : '') + '</div>' +
+    (d.why ? '<div class="dw">' + esc(d.why) + '</div>' : '') +
+    (d.alternatives && d.alternatives.length ? '<div class="da">Over: ' + d.alternatives.map(esc).join(' · ') + '</div>' : '') +
+    (chain.length ? '<div class="dc">' + chain.join(' · ') + '</div>' : '') +
+    '<div class="dm">' + meta + '</div></li>'
+}
+
+// v: GET /v1/decisions (engine.decisionsView). all: superseded and rejected too.
+export function decisionsExportHtml(v, { all = false } = {}) {
+  const list = (v && v.decisions) || []
+  const byId = new Map(list.map((d) => [d.id, d]))
+  const multi = ((v && v.repos) || []).length > 1
+  const sc = (v && v.scope) || {}
+  const name = (sc.kind === 'project' ? sc.name : sc.label) || sc.id || ''
+  const { review, rows } = timelineRows(list, { all })
+  const item = (d) => decisionItem({ ...d, multi }, byId)
+  let b = '<h1>Decisions' + (name ? ' · ' + esc(name) : '') + '</h1>'
+  b += '<p class="meta f">' + esc([multi ? v.repos.map((r) => r.label).join(' · ') : '', all ? 'Accepted, superseded and rejected' : 'Accepted decisions'].filter(Boolean).join(' · ')) + '</p>'
+  if (review.length) b += '<section><h2>To review <span class="count">' + review.length + '</span></h2><ol class="dl">' + review.map(item).join('') + '</ol></section>'
+  b += '<section><h2>' + (all ? 'Timeline' : 'Decided') + ' <span class="count">' + rows.length + '</span></h2>' + (rows.length ? '<ol class="dl">' + rows.map(item).join('') + '</ol>' : '<p class="f">Nothing accepted yet.</p>') + '</section>'
+  return exportDoc({ title: 'Decisions' + (name ? ' · ' + name : ''), css: DEC_CSS, body: b + foot() })
+}
+
+// ---------------------------------------------------------------- a walkthrough
+
+// data: the walkthrough (POST /v1/sessions/<id>/walkthrough); s: its session ({ title, repoLabel, repoName, repo: { branch } })
+export function walkthroughExportHtml(data, s = {}, { timeZone } = {}) {
+  const title = (s && s.title) || 'Session'
+  const repo = [s.repoLabel || s.repoName || '', s.repo && s.repo.branch].filter(Boolean).join(' · ')
+  return toHtmlDoc(data, { title, repo, when: data && data.generatedAt ? exportWhen(data.generatedAt, { timeZone }) : '' })
+}
+
+const foot = () => '<p class="foot">Saved from Leftoff. One file: it opens offline and asks nothing of the network.</p>'