@leftoff/cli 0.9.18-beta.1 → 0.9.18-beta.11

package/ui/session-catchup.js

@@ -29,17 +29,33 @@ export function sessionCatchupHtml(ui, { esc, icon = () => '', sid = '' } = {})
     : '<ul class="scu-body scu-list">' + body.map((_, i) => '<li data-scu="b-' + i + '"></li>').join('') + '</ul>'
   return '<div class="scu" role="region" aria-label="Catch me up">' + head('<span class="scu-when" data-scu="when"></span>') +
     (goal ? '<p class="scu-goal" data-scu="goal"></p>' : '') +
-    text + (next != null ? '<p class="scu-next" data-scu="next"></p>' : '') +
+    text + (next != null ? '<p class="scu-next" data-scu="next"></p>' : '') + recapDecisionsHtml(ui.data, { esc }) +
     '<div class="msg-foot"><p class="scu-by" data-scu="by"></p>' + copyButtonHtml(recapSource(ui.data), { deferred: true }) + '</div></div>'
 }
 
+// testplan Part 2: what the session decided since you looked, each with its word in the log (shape plus word).
+const DEC_SHAPE = { proposed: '◌', accepted: '●', rejected: '✕', superseded: '↻', unlogged: '·' }
+const DEC_WORD = { proposed: 'Proposed', accepted: 'Accepted', rejected: 'Rejected', superseded: 'Superseded', unlogged: 'Not in the log' }
+export function recapDecisionsHtml(d, { esc }) {
+  const list = (d && Array.isArray(d.decisions) ? d.decisions : []).filter((x) => x && x.text)
+  if (!list.length) return ''
+  const sinceWord = d && d.recap && d.recap.since ? 'Decided since you looked' : 'Decided in this session'
+  return '<div class="scu-decs"><h3 class="scu-dec-h">' + esc(sinceWord) + '</h3><ul class="scu-dec-l">' + list.map((x) =>
+    '<li><span class="dec-st dec-st-' + esc(x.status) + '"><span aria-hidden="true">' + (DEC_SHAPE[x.status] || '·') + '</span> ' + esc(DEC_WORD[x.status] || x.status) + '</span> ' +
+    (x.id ? '<span class="dec-id">' + esc(x.id) + '</span> ' : '') + '<span class="dec-text">' + esc(x.text) + '</span>' + (x.supersededBy ? ' <span class="faint">→ ' + esc(x.supersededBy) + '</span>' : '') + '</li>').join('') + '</ul></div>'
+}
+export function recapDecisionsText(d) {
+  const list = (d && Array.isArray(d.decisions) ? d.decisions : []).filter((x) => x && x.text)
+  return list.length ? 'Decided:\n' + list.map((x) => '- ' + (x.id ? x.id + ' ' : '') + x.text + ' (' + (DEC_WORD[x.status] || x.status).toLowerCase() + ')').join('\n') : ''
+}
+
 // 0.9.11: what Copy takes from a recap, as markdown: the goal, the lines as a
 // list (or a sentence or two, as shown), and the Next line.
 export function recapSource(d) {
   const { body, next } = recapParts(d)
   const goal = recapGoal(d)
   const text = body.length <= 2 ? body.join(' ') : body.map((b) => '- ' + b).join('\n')
-  return [goal, text, next].filter((x) => x && String(x).trim()).join('\n\n')
+  return [goal, text, next, recapDecisionsText(d)].filter((x) => x && String(x).trim()).join('\n\n')
 }
 
 // The recap's lines: what happened, and the one "Next: …" / "Up to you…" /

package/ui/session-title.js

@@ -0,0 +1,88 @@
+// 2026-11-05 session titles: one helper for the name a session goes by
+// everywhere (session header, full screen's bar, cards, tabs, pickers).
+// Line one says what the session is doing; where it runs (folder@branch) is a
+// muted second line, never glued to the front of the name. Pure and
+// deterministic (no model call): a prompt used as a name is tidied the way a
+// person would write it as a title.
+
+export const TITLE_MAX = 60
+
+// "cube_cloud@me/some-branch · Please check…": where it runs, glued to the front
+// of a name by whatever named it. The folder and branch have a line of their own.
+const WHERE_GLUED = /^\s*[\w.~-]+@[\w./~+-]+\s*(?:·|•|\||—|–|:|-)\s+/
+// Words in front of a request that a title doesn't need.
+const FILLER = /^(?:(?:please|pls|plz|hey|hi|hello|yo|ok(?:ay)?|so|alright|now)\b[\s,!.:;-]*|(?:can|could|would|will) (?:you|u)(?: please| pls)?\s+|(?:i(?:'d| would) like you to|i (?:want|need) you to)\s+)/i
+// A title doesn't end on a word that leads into the next one.
+const DANGLING = /[\s,;:–—-]+(?:and|or|but|nor|the|a|an|to|of|for|with|without|in|on|at|from|by|into|onto|about|then|so|that|this|these|those|is|are|was|be|as|if|when|while|because|my|your|our|its|&|\+)$/i
+const URL_RE = /\bhttps?:\/\/[^\s<>()]+/gi
+const LONG_PATH = /(^|\s)(?:~|\.{1,2})?(?:\/[\w.@+-]+){3,}\/?/g
+
+const repoOf = (s) => (s && (s.repoLabel || s.repoName || (s.repo && s.repo.name))) || ''
+const branchOf = (s) => (s && (s.branch || (s.repo && s.repo.branch))) || ''
+
+// Where a session runs, as one short line: "folder@branch" (the folder alone
+// when the branch says the same or there is none). '' when unknown.
+export function whereLine(s, repo = repoOf(s)) {
+  const b = branchOf(s)
+  if (!repo) return b || ''
+  return b && b !== repo ? repo + '@' + b : repo
+}
+
+// A pasted link, as the few words it stands for: a GitHub pull request or issue
+// is "PR 408" / "issue 12", anything else its host.
+function urlWords(u) {
+  const m = u.match(/^https?:\/\/(?:www\.)?github\.com\/[^/\s]+\/[^/\s]+\/(pull|issues)\/(\d+)/i)
+  if (m) return (m[1].toLowerCase() === 'pull' ? 'PR ' : 'issue ') + m[2]
+  try { return new URL(u).host.replace(/^www\./, '') } catch { return '' }
+}
+
+// Cut at a word boundary: never mid-word, never on a dangling "and"/"the"/"to".
+// Text with no spaces to cut at (CJK, one long token) is cut by character.
+export function cutTitle(text, max = TITLE_MAX) {
+  let t = String(text == null ? '' : text).replace(/\s+/g, ' ').trim()
+  let cut = false
+  if (t.length > max) {
+    const room = t.slice(0, max)
+    const sp = room.lastIndexOf(' ')
+    t = /\s/.test(t[max]) ? room : sp > 0 ? room.slice(0, sp) : t.slice(0, max - 1)
+    cut = true
+  }
+  for (let i = 0; i < 4; i++) {
+    const before = t
+    t = t.replace(DANGLING, '').replace(/[\s,;:(\[{–—-]+$/, '')
+    if (t === before) break
+    cut = true
+  }
+  if (!t) return ''
+  return cut ? t.replace(/[.…]+$/, '') + '…' : t
+}
+
+// A first prompt as a title: its first real line, no greeting or "please",
+// links as what they point at, a capital first letter, cut cleanly.
+//   "Please checkout the PR 408 and then…" -> "Check out the PR 408…"
+export function promptTitleText(text, max = TITLE_MAX) {
+  let t = String(text == null ? '' : text).split('\n').map((l) => l.trim()).find(Boolean) || ''
+  t = t.replace(URL_RE, (u) => ' ' + urlWords(u) + ' ').replace(LONG_PATH, (m, pre) => pre + m.trim().split('/').filter(Boolean).pop())
+  t = t.replace(/\s+/g, ' ').trim()
+  for (let i = 0; i < 4; i++) { const n = t.replace(FILLER, ''); if (n === t || !n.trim()) break; t = n.trim() }
+  t = t.replace(/^checkout\s+(?=the\b|pr\b|#|branch\b)/i, 'Check out ')
+  t = t.replace(/^[\s,.:;!?–—-]+/, '')
+  t = cutTitle(t, max)
+  return t && !/^\S+\.\S/.test(t) ? t.charAt(0).toUpperCase() + t.slice(1) : t // a bare host stays as written
+}
+
+// A stored name, tidied for showing: where it runs comes off the front (it has
+// its own line). A name that came from a prompt (or carried a where prefix,
+// which only automatic names do) is tidied like a prompt; a name you or Claude
+// gave it is kept as written, only cut at a word if it is very long.
+export function displayTitle(title, { source = null, max = TITLE_MAX } = {}) {
+  let t = String(title == null ? '' : title).replace(/\s+/g, ' ').trim()
+  const glued = WHERE_GLUED.test(t) && t.replace(WHERE_GLUED, '').trim()
+  if (glued) t = glued
+  if (glued || source === 'prompt' || source === 'fallback') return promptTitleText(t, max) || t
+  return t.length > 2 * max ? cutTitle(t, 2 * max) : t
+}
+
+// Is this stored name only an automatic stand-in (where it runs + the first
+// prompt's words)? Then a generated name may replace it, as for a prompt name.
+export function isPlaceholderTitle(title) { return WHERE_GLUED.test(String(title || '')) }

package/ui/sglyph.js

@@ -109,14 +109,14 @@ export const countsAsWaiting = (s, offline = false) => !!s && !(offline && s.isL
 //   hidden  inside a control that already names the state: aria-hidden, no role
 //   closed  a closed session's quiet ring is fainter
 //   arrive  the page-clock time the new-reply dot appeared (it pulses once from then)
-export function glyphHtml(state, { esc = escDefault, tip = '', quiet = false, hidden = false, closed = false, arrive = null, cls = '' } = {}) {
+export function glyphHtml(state, { esc = escDefault, tip = '', quiet = false, hidden = false, closed = false, arrive = null, cls = '', noTip = false } = {}) {
   if (!GLYPHS.includes(state)) state = 'quiet'
   if (state === 'quiet' && !quiet) return ''
   const label = GLYPH_LABEL[state]
   const inner = state === 'waiting' ? '<span class="sg-in" aria-hidden="true">!</span>' : state === 'offline' ? '<span class="sg-in" aria-hidden="true"></span><span class="sg-slash" aria-hidden="true"></span>' : '<span class="sg-in" aria-hidden="true"></span>'
   const c = 'sg sg-' + state + (state === 'quiet' && closed ? ' sg-closed' : '') + (state === 'unseen' && arrive != null ? ' sg-arrive' : '') + (cls ? ' ' + cls : '')
   const a11y = hidden ? ' aria-hidden="true"' : ' role="img" aria-label="' + esc(tip || label) + '"'
-  return '<span class="' + c + '" data-sg="' + state + '"' + a11y + ' data-tip="' + esc(tip || label) + '"' + (state === 'unseen' && arrive != null ? ' data-arrive="' + Math.round(Number(arrive) || 0) + '"' : '') + '>' + inner + '</span>'
+  return '<span class="' + c + '" data-sg="' + state + '"' + a11y + (noTip ? '' : ' data-tip="' + esc(tip || label) + '"') + (state === 'unseen' && arrive != null ? ' data-arrive="' + Math.round(Number(arrive) || 0) + '"' : '') + '>' + inner + '</span>'
 }
 
 // The words for a glyph in a control's own label (", waiting on you").

package/ui/slash-commands.js

@@ -0,0 +1,89 @@
+// Claude Code slash commands the board can send into a session (Live box).
+// Shared by the daemon (src/live-link.js: what it lets through) and the board
+// (ui/slash.js: the "/" suggestions and the /model and /effort pickers).
+//
+// Checked against Claude Code's own command table (2.1.300, the `claude -p`
+// build on npm; /model and /effort run again on 2.1.319): each of these has a non-interactive form (supportsNonInteractive),
+// so in a session Leftoff runs (`claude -p`, stream-json) "/effort high" written
+// as a user message runs as the command, locally, and its output comes back as
+// the turn's result and as a local_command line in the transcript. In a terminal
+// session the mod runs it with $.command.run, the way it already runs /rename,
+// except a command whose terminal form saves your default (saves, below).
+// Bare /model and /effort open a picker in the terminal, so the board asks for
+// the choice itself. /status and the bare pickers need Claude Code's terminal UI
+// and are left out; anything not listed here is refused.
+
+export const SLASH_MAX = 500
+
+// arg: 'required' | 'optional' | 'none'. choices: what the board's picker offers
+// (Claude Code's own list); strict: only those. tui: false when the terminal's
+// form opens a panel (so the mod path refuses it rather than leave a panel open).
+// saves: the terminal's form also writes it into ~/.claude/settings.json as your
+// default for new sessions (checked on 2.1.319: "Set model to Haiku 5.5 and saved
+// as your default for new sessions"; `claude -p` says "for this session only").
+// Leftoff never writes ~/.claude, so these go only to sessions Leftoff runs.
+export const SLASH_COMMANDS = [
+  { name: 'model', arg: 'required', hint: '<model>', what: 'Switch the model',
+    choices: ['default', 'opus', 'sonnet', 'haiku', 'fable', 'best', 'opus[1m]', 'sonnet[1m]', 'opusplan'], saves: true },
+  { name: 'effort', arg: 'required', hint: '<level>', what: 'Set how hard Claude thinks',
+    choices: ['low', 'medium', 'high', 'xhigh', 'max', 'auto'], strict: true, saves: true },
+  { name: 'compact', arg: 'optional', hint: '[instructions]', what: 'Summarize the conversation to free up context' },
+  { name: 'clear', arg: 'none', hint: '', what: 'Start over with empty context (the old one stays resumable)' },
+  { name: 'context', arg: 'none', hint: '', what: 'Show how full the context is' },
+  { name: 'usage', aliases: ['cost'], arg: 'none', hint: '', what: 'Show session cost and plan usage', tui: false },
+]
+
+const BY_NAME = new Map()
+for (const c of SLASH_COMMANDS) { BY_NAME.set(c.name, c); for (const a of c.aliases || []) BY_NAME.set(a, c) }
+
+export function slashCommand(name) { return BY_NAME.get(String(name || '').toLowerCase()) || null }
+export function isSlashText(text) { return /^\s*\//.test(String(text == null ? '' : text)) }
+export function slashNames() { return SLASH_COMMANDS.map((c) => '/' + c.name) }
+export function allowedText() { return slashNames().join(', ') }
+
+const MODEL_RE = /^[A-Za-z0-9][A-Za-z0-9._:\-[\]]{0,79}$/
+// eslint-disable-next-line no-control-regex
+const CONTROL_RE = /[\u0000-\u001f\u007f\u2028\u2029]/
+
+function bad(message) { const e = new Error(message); e.status = 400; e.code = 'bad_command'; throw e }
+
+// "/effort high" -> { name: 'effort', args: 'high', line: '/effort high', cmd }.
+// One command on one line; leading and trailing spaces are fine; the name is
+// the command's own (an alias becomes it: /cost -> /usage). Throws (400,
+// bad_command) with a message that says what is allowed.
+export function parseSlash(text) {
+  const raw = String(text == null ? '' : text)
+  const t = raw.replace(/^[ \t]+|[ \t]+$/g, '')
+  if (!t.startsWith('/')) bad('a command starts with “/”')
+  if (/[\r\n]/.test(t.trim())) bad('one command a message, on one line')
+  const s = t.trim()
+  if (CONTROL_RE.test(s)) bad('the command has a control character in it')
+  if (s.length > SLASH_MAX) bad('the command is over ' + SLASH_MAX + ' characters')
+  const m = /^\/([A-Za-z][\w-]*)(?:[ \t]+([\s\S]*))?$/.exec(s)
+  if (!m) bad('the board can send ' + allowedText())
+  const c = slashCommand(m[1])
+  if (!c) bad('/' + m[1] + ' can’t be sent from the board. It can send ' + allowedText())
+  const args = (m[2] || '').replace(/[ \t]+/g, ' ').trim()
+  if (c.arg === 'none' && args) bad('/' + c.name + ' takes nothing after it')
+  if (c.arg === 'required' && !args) bad('/' + c.name + ' needs a choice: ' + c.choices.join(', '))
+  if (args.startsWith('/')) bad('one command a message')
+  if (c.name === 'model' && !MODEL_RE.test(args)) bad('/model needs one model name, like ' + c.choices.slice(1, 4).join(', '))
+  if (c.strict && !c.choices.includes(args.toLowerCase())) bad('/' + c.name + ' takes one of ' + c.choices.join(', '))
+  const a = c.strict ? args.toLowerCase() : args
+  return { name: c.name, args: a, line: '/' + c.name + (a ? ' ' + a : ''), cmd: c }
+}
+
+// The "/" suggestions for what's typed so far ("/ef" -> [effort]).
+export function slashMatches(text) {
+  const m = /^\s*\/([\w-]*)$/.exec(String(text == null ? '' : text))
+  if (!m) return []
+  const q = m[1].toLowerCase()
+  return SLASH_COMMANDS.filter((c) => c.name.startsWith(q) || (c.aliases || []).some((a) => a.startsWith(q)))
+}
+
+// A bare "/model" or "/effort" (nothing after it): the board shows its picker.
+export function needsPicker(text) {
+  const m = /^\s*\/([\w-]+)\s*$/.exec(String(text == null ? '' : text))
+  const c = m && slashCommand(m[1])
+  return c && c.arg === 'required' && c.choices ? c : null
+}

package/ui/slash.js

@@ -0,0 +1,82 @@
+// The Live composer's "/" menu (slash commands from the board). Pure functions
+// here, shared with the unit tests; app.js wires them to the page. What can be
+// sent, and the words for it, is ui/slash-commands.js (the daemon checks it too).
+//
+// Typing "/" lists the commands ("/ef" narrows to /effort); picking one fills
+// it in. A command that takes a choice (/model, /effort) then lists its
+// choices ("/effort h" narrows to high). Picking never sends: Enter sends once
+// the menu has nothing more to offer (an exact command or choice closes it).
+// In a terminal session /model and /effort show, disabled, with why: Claude
+// Code's terminal saves them as your default for new sessions.
+
+import { slashCommand, slashMatches } from './slash-commands.js'
+
+const escS = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
+export const SAVES_WHY = 'In a terminal session this also changes your default for new sessions, so the board doesn’t send it. Type it in the terminal.'
+
+// Where commands go for this session: 'headless' (Leftoff runs it: every
+// command, for this session only), 'terminal' (the mod runs it: not /model or
+// /effort), or null (Codex, or nothing to run it: no menu).
+export function slashTarget(s) {
+  if (!s || s.codingAgent === 'codex' || s.capture === 'codex' || s.endedAt) return null
+  if (s.headless) return 'headless'
+  if (s.capture === 'mod') return 'terminal'
+  return null
+}
+
+// text -> null (no menu) or { kind: 'commands' | 'choices', cmd?, items: [{ value, label, hint, what, off }] }.
+// value: the composer's text after a pick. off: why it can't be picked here (null when it can).
+export function slashMenu(text, { target = 'headless' } = {}) {
+  if (!target) return null
+  const t = String(text == null ? '' : text)
+  const offFor = (c) => (target === 'terminal' && c.saves ? SAVES_WHY : null)
+  const m = /^\s*\/([\w-]*)$/.exec(t)
+  if (m) {
+    const list = slashMatches(t)
+    if (!list.length) return null
+    // an exact command that takes nothing: the menu has nothing to add, Enter sends it
+    const exact = slashCommand(m[1])
+    if (exact && exact.arg === 'none' && list.length === 1 && (exact.name === m[1].toLowerCase() || (exact.aliases || []).includes(m[1].toLowerCase()))) return null
+    return { kind: 'commands', items: list.map((c) => ({ value: '/' + c.name + (c.arg === 'none' ? '' : ' '), label: '/' + c.name, hint: c.hint || '', what: c.what, off: offFor(c) })) }
+  }
+  const a = /^\s*\/([\w-]+)[ \t]+(\S*)$/.exec(t)
+  const c = a && slashCommand(a[1])
+  if (!c || !c.choices) return null
+  if (offFor(c)) return { kind: 'choices', cmd: c.name, items: [{ value: t, label: '/' + c.name, hint: '', what: c.what, off: offFor(c) }] }
+  const q = a[2].toLowerCase()
+  const items = c.choices.filter((x) => x.toLowerCase().startsWith(q))
+  if (!items.length || (items.length === 1 && items[0].toLowerCase() === q)) return null // nothing to pick, or already picked
+  return { kind: 'choices', cmd: c.name, items: items.map((x) => ({ value: '/' + c.name + ' ' + x, label: x, hint: '', what: '', off: null })) }
+}
+
+// The highlighted item after a key: ArrowDown / ArrowUp wrap, skipping disabled ones. -> index or -1
+export function slashMove(menu, active, key) {
+  const items = (menu && menu.items) || []
+  const ok = items.map((x, i) => (x.off ? -1 : i)).filter((i) => i >= 0)
+  if (!ok.length) return -1
+  const at = ok.indexOf(active)
+  if (key === 'ArrowDown') return ok[at < 0 ? 0 : (at + 1) % ok.length]
+  if (key === 'ArrowUp') return ok[at < 0 ? ok.length - 1 : (at - 1 + ok.length) % ok.length]
+  return at < 0 ? ok[0] : active
+}
+
+// What a key does with the menu open: 'move' | 'pick' | 'close' | null (the composer's own).
+export function slashKey(ev) {
+  if (!ev || ev.isComposing || ev.keyCode === 229) return null
+  if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') return ev.altKey || ev.metaKey || ev.ctrlKey ? null : 'move'
+  if ((ev.key === 'Enter' && !ev.shiftKey && !ev.metaKey && !ev.ctrlKey && !ev.altKey) || (ev.key === 'Tab' && !ev.shiftKey)) return 'pick'
+  if (ev.key === 'Escape') return 'close'
+  return null
+}
+
+// The listbox, above the composer. id: the listbox's id (the textarea's aria-controls);
+// each option's id is id + '-' + index (aria-activedescendant).
+export function slashMenuHtml(menu, { active = -1, id = 'slashMenu', esc = escS } = {}) {
+  if (!menu || !menu.items.length) return ''
+  const head = menu.kind === 'choices' ? '<div class="slash-h" aria-hidden="true">' + esc('/' + menu.cmd) + '</div>' : ''
+  return '<div class="slash-menu" role="listbox" id="' + esc(id) + '" aria-label="' + esc(menu.kind === 'choices' ? 'Choices for /' + menu.cmd : 'Commands') + '">' + head +
+    menu.items.map((x, i) => '<div class="slash-opt' + (x.off ? ' off' : '') + '" role="option" id="' + esc(id + '-' + i) + '" data-i="' + i + '" data-value="' + esc(x.value) + '" aria-selected="' + (i === active ? 'true' : 'false') + '"' + (x.off ? ' aria-disabled="true" data-tip="' + esc(x.off) + '"' : '') + '>' +
+      '<span class="slash-l">' + esc(x.label) + (x.hint ? ' <span class="slash-hint">' + esc(x.hint) + '</span>' : '') + '</span>' +
+      (x.what ? '<span class="slash-w">' + esc(x.off ? 'Not in a terminal session' : x.what) + '</span>' : '') + '</div>').join('') + '</div>'
+}

package/ui/summary-examples.js

@@ -40,7 +40,7 @@ export const SUMMARY_EXAMPLES = {
 }
 export const LENGTH_CHOICES = [
   { key: 'short', label: 'Short', approx: '~300 tokens', blurb: 'Doing, Stopped at, Next. Three lines.' },
-  { key: 'informative', label: 'Informative', approx: '~700 tokens', blurb: 'Adds key decisions, open questions, files touched and why, and what didn’t work.', recommended: true },
+  { key: 'informative', label: 'Informative', approx: '~700 tokens', blurb: 'Adds approach notes, open questions, files touched and why, and what didn’t work.', recommended: true },
   { key: 'long', label: 'Long', approx: '~1500 tokens', blurb: 'Adds a narrative recap and the next 3 steps.' },
 ]
 
@@ -56,7 +56,7 @@ export function formatCheckpointText(cp, { indent = '' } = {}) {
     line(title + ':')
     items.forEach((x, i) => line((title === 'Next steps' ? '  ' + (i + 1) + '. ' : '  - ') + fmt(x)))
   }
-  list('Key decisions', cp.decisions)
+  list('Approach notes', cp.decisions)
   list('Open questions', cp.questions)
   list('Files touched', cp.files, (f) => (f.path || '') + (f.path && f.why ? ' — ' : '') + (f.why || ''))
   list('What didn’t work', cp.didntWork)

package/ui/tabs.js

@@ -222,6 +222,13 @@ export function stateMark(v, esc) {
 // 0.9.17 the walkthrough's Look-closely count: a small eye and a number, as quiet as the
 // status word (not a badge), only when there's something; the words in the tip.
 const EYE = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>'
+// 0.9.18 the strip: a closable tab's shape sits in the ×'s place (the × shows on hover or focus),
+// so a busy strip keeps room for titles; the word is in the tab's tip and its label. A pinned tab
+// (no ×) and a touch screen (no hover) keep the shape beside the title. Shapes differ per state.
+export function slotMark(v, esc) {
+  const st = stateOf(v)
+  return st !== 'quiet' ? glyphHtml(st, { esc, hidden: true, noTip: true, cls: 'tab-sg tab-xsg' }) : ''
+}
 export function lookMark(v, esc) {
   const n = Number(v && v.look) || 0
   if (n <= 0) return ''
@@ -240,12 +247,12 @@ export function stripHtml(views, activeId, onBoard, esc) {
   const tabs = views.map((v) => {
     const on = v.id === activeId
     return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + (v.pinned ? ' pinned' : '') + '" data-tab-id="' + esc(v.id) + '">' +
-      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' data-tip="' + esc(v.title + (v.pinned ? ' · pinned' : '') + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc((v.pinned ? 'Pinned: ' : '') + label(v)) + '" aria-keyshortcuts="Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" draggable="false">' +
-      (v.pinned ? PIN_GLYPH : '') + '<span class="tab-t">' + esc(v.title) + '</span>' + stateMark(v, esc) + lookMark(v, esc) + '</a>' +
+      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' data-tip="' + esc(v.title + (SHORT[stateOf(v)] ? ' · ' + SHORT[stateOf(v)] : '') + (v.pinned ? ' · pinned' : '') + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc((v.pinned ? 'Pinned: ' : '') + label(v)) + '" aria-keyshortcuts="Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" draggable="false">' +
+      (v.pinned ? PIN_GLYPH : '') + '<span class="tab-t">' + esc(v.title) + '</span>' + '<span class="tab-st' + (v.pinned ? '' : ' tab-st-touch') + '">' + slotMark(v, esc) + '</span>' + lookMark(v, esc) + '</a>' +
       (v.preview
         ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" data-tip="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '">' + PIN + '</button>'
         : '') +
-      (v.pinned ? '' : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" data-tip="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') + // a pinned tab stays: Unpin is on its right-click
+      (v.pinned ? '' : '<button type="button" class="tab-x' + (slotMark(v, esc) ? ' has-st' : '') + '" data-tab-close="' + esc(v.id) + '" data-tip="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + slotMark(v, esc) + X + '</button>') + // a pinned tab stays: Unpin is on its right-click
       '</div>'
   }).join('')
   // 0.9.16: + New session right after the open tabs

package/ui/term.js

@@ -171,7 +171,7 @@ async function loadLib() {
 }
 
 export function mountTerminal({ api, icon = () => '', toast = () => {}, context = () => null, openMenu = null, relayApi = () => (typeof window !== 'undefined' && window.leftoffRelay) || null } = {}) {
-  const st = { max: ls.get(MAX_KEY) === '1', open: false, info: null, tabs: [], active: ls.get(ACTIVE_KEY), views: new Map(), ghostty: undefined, ctrl: false, loading: false, listTimer: 0, sid: null }
+  const st = { max: ls.get(MAX_KEY) === '1', open: false, info: null, tabs: [], active: ls.get(ACTIVE_KEY), views: new Map(), ghostty: undefined, ghosttyPeek: undefined, ctrl: false, loading: false, listTimer: 0, sid: null }
   // 0.9.15 each session's own terminal tab (term-sess.js); st.sid: the session in view, if any
   let sess = null
   try { sess = createTermSessStore({ storage: window.localStorage }) } catch { sess = createTermSessStore({ storage: null }) }
@@ -694,6 +694,14 @@ export function mountTerminal({ api, icon = () => '', toast = () => {}, context
     try { st.ghostty = await api('GET', '/v1/term/theme/ghostty') } catch { st.ghostty = null }
     return st.ghostty
   }
+  // 1.0: the ⋯ menu only asks whether there is a Ghostty to match; Ghostty's own
+  // files (its app data on a Mac) are read when you pick it, not when the menu opens
+  async function peekGhostty() {
+    if (st.ghostty !== undefined) return st.ghostty
+    if (st.ghosttyPeek !== undefined) return st.ghosttyPeek
+    try { st.ghosttyPeek = await api('GET', '/v1/term/theme/ghostty?peek=1') } catch { st.ghosttyPeek = null }
+    return st.ghosttyPeek
+  }
   applyLook()
   if ((ls.get(THEME_KEY) || '') === 'ghostty') loadGhostty().then(applyLook)
   new MutationObserver(() => applyLook()).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
@@ -701,7 +709,7 @@ export function mountTerminal({ api, icon = () => '', toast = () => {}, context
 
   // ---------- menu
   async function menuItems() {
-    const g = await loadGhostty()
+    const g = await peekGhostty()
     const cur = ls.get(THEME_KEY) || 'auto'
     const ctx = context() || null
     const items = []
@@ -713,7 +721,7 @@ export function mountTerminal({ api, icon = () => '', toast = () => {}, context
     items.push({ label: 'Run claude here', sub: ctx && ctx.sessionId ? 'in ' + (ctx.folder || 'this session’s folder') : 'in ~', icon: icon('terminal'), cls: 'one-line', attrs: { 'data-term-act': 'claude', 'data-tip': 'Runs claude in ' + where } })
     if (ctx && ctx.sessionId && ctx.resumable) items.push({ label: 'Resume this session', sub: ctx.resumeCmd || 'claude --resume', icon: icon('play'), cls: 'one-line', attrs: { 'data-term-act': 'resume', 'data-tip': (ctx.resumeCmd || 'claude --resume') + ' in ' + where } })
     items.push({ sep: true })
-    const choices = THEME_CHOICES.filter((k) => k !== 'ghostty' || (g && g.found && (g.theme || g.light || g.dark)))
+    const choices = THEME_CHOICES.filter((k) => k !== 'ghostty' || (g && g.found && (g.theme || g.light || g.dark || g.deferred)))
     items.push({ label: 'Theme', sub: themeLabel(cur, g), icon: icon('palette'), cls: 'one-line', whole: true, more: { title: 'Theme', items: choices.map((k) => ({ label: themeLabel(k, g), on: k === cur, cls: 'one-line', after: k === cur ? '<span class="lo-act-cur">current</span>' : '', attrs: { 'data-term-theme': k } })) } })
     return items
   }

package/ui/testplan.js

@@ -0,0 +1,162 @@
+// Test plan from merged PRs (testplan Part 3, docs/test-plan.md): the board's page, its Markdown
+// checklist and its downloadable .html (the walkthrough export's look). Pure builders; app.js wires
+// them; unit-tested in test/unit/testplan-*.test.mjs. Words are escaped first; links only to https,
+// the board's own #/ routes, and nothing else.
+import { EXPORT_CSS } from './semdiff.js'
+
+const escT = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+export const BUDGETS = [15, 30, 60]
+export const RISK_SHAPE = { high: '▲', medium: '◆', low: '▽' }
+export const RISK_WORD = { high: 'High risk', medium: 'Medium risk', low: 'Low risk' }
+export const TP_TRUST_TIP = 'Writing a test plan from another device is off. On a Mac, turn on Settings → Privacy & security → Trust my paired devices.'
+const off = (trusted, esc) => (trusted === false ? ' disabled aria-disabled="true" data-tip="' + esc(TP_TRUST_TIP) + '"' : '')
+const httpsUrl = (u) => (/^https:\/\/[^\s"'<>]+$/.test(String(u || '')) ? String(u) : null)
+const day = (iso) => String(iso || '').slice(0, 10)
+
+export const testplanHref = (id, machine = null) => '#/testplan/' + encodeURIComponent(id) + (machine ? '?machine=' + encodeURIComponent(machine) : '')
+export function testplanNewHref({ scope = '', prs = null, since = null } = {}) {
+  const q = []
+  if (scope) q.push('scope=' + encodeURIComponent(scope))
+  if (prs && prs.length) q.push('prs=' + prs.map(encodeURIComponent).join(','))
+  if (since) q.push('since=' + encodeURIComponent(since))
+  return '#/testplan/new' + (q.length ? '?' + q.join('&') : '')
+}
+
+export function progressLine(plan) {
+  const cs = (plan && plan.plan && plan.plan.checks) || []
+  const t = (plan && plan.ticks) || {}
+  return cs.filter((c) => t[c.id] && t[c.id].state).length + ' of ' + cs.length + ' checked'
+}
+
+// A citation as a small chip: a PR opens on GitHub, a decision in its log; a step or checkpoint is its words.
+export function citeChipHtml(tag, tags, { esc = escT } = {}) {
+  const x = (tags && tags[tag]) || null
+  const [kind] = String(tag).split(':')
+  const label = kind === 'pr' ? '#' + tag.slice(3) : kind === 'dec' ? tag.slice(4) : kind === 'st' ? 'step' : 'checkpoint'
+  const tip = x && x.label ? x.label : tag
+  if (kind === 'pr' && x && httpsUrl(x.url)) return '<a class="tp-cite" href="' + esc(x.url) + '" target="_blank" rel="noopener noreferrer" data-tip="' + esc(tip) + '">' + esc(label) + '</a>'
+  if (kind === 'dec' && x && x.repo) return '<a class="tp-cite" href="#/decisions/' + esc(x.repo) + '?d=' + esc(encodeURIComponent(tag.slice(4))) + '" data-tip="' + esc(tip) + '">' + esc(label) + '</a>'
+  return '<span class="tp-cite" data-tip="' + esc(tip) + '">' + esc(label + (x && x.label ? ': ' + x.label : '')) + '</span>'
+}
+
+const riskHtml = (r, esc) => '<span class="tp-risk tp-risk-' + esc(r) + '"><span aria-hidden="true">' + (RISK_SHAPE[r] || '◆') + '</span> ' + esc(RISK_WORD[r] || r) + '</span>'
+
+// One check. ticks[c.id]: { state: 'done' | 'failed' | null, note }. proposed: decision id made from it.
+export function checkHtml(c, plan, { esc = escT, trusted = true, noting = null, proposing = null } = {}) {
+  const t = (plan.ticks || {})[c.id] || {}
+  const st = t.state || null
+  const tags = (plan.plan && plan.plan.tags) || {}
+  const prop = plan.proposed && plan.proposed[c.id]
+  const prRepo = (((plan.prs || []).find((x) => (c.prs || []).includes(x.number)) || (plan.prs || [])[0] || {}).decisionRepo) || ''
+  const tick = (v, word, shape) => '<button type="button" class="btn tp-tick tp-tick-' + v + '" data-action="tp-tick" data-id="' + esc(plan.id) + '" data-check="' + esc(c.id) + '" data-state="' + v + '" aria-pressed="' + (st === v) + '"><span aria-hidden="true">' + shape + '</span> ' + word + '</button>'
+  const note = st === 'failed' || noting === c.id
+    ? '<form class="tp-note" data-action="tp-note" data-id="' + esc(plan.id) + '" data-check="' + esc(c.id) + '"><label class="tp-note-l">What went wrong<input class="dec-in tp-note-in" name="note" maxlength="280" autocomplete="off" value="' + esc(t.note || '') + '" placeholder="One line, for the export"></label><div class="dec-acts"><button type="submit" class="btn">Save note</button>' +
+      (prop ? '<a class="linkish tp-prop" href="#/decisions/' + esc(prRepo) + '?d=' + esc(encodeURIComponent(prop)) + '"><span aria-hidden="true">◌</span> Proposed ' + esc(prop) + ' →</a>'
+        : '<button type="button" class="btn" data-action="tp-propose" data-id="' + esc(plan.id) + '" data-check="' + esc(c.id) + '"' + off(trusted, esc) + '>Propose a decision</button>') + '</div></form>' +
+      (proposing === c.id && !prop ? '<form class="tp-propf dec-edit" data-action="tp-propose-save" data-id="' + esc(plan.id) + '" data-check="' + esc(c.id) + '"><label>The decision (proposed to the repo’s log; you accept it there or not)<input class="dec-in" name="text" maxlength="240" autocomplete="off" value="' + esc(t.note ? 'Correct: ' + t.note : '') + '"></label><div class="dec-acts"><button type="submit" class="btn primary">Propose</button><button type="button" class="btn" data-action="tp-propose-cancel">Cancel</button></div></form>' : '')
+    : ''
+  return '<li class="tp-check' + (st ? ' tp-' + st : '') + '" id="tp-' + esc(c.id) + '">' +
+    '<div class="tp-ch"><span class="tp-n">' + esc(c.id.slice(1)) + '</span><h3 class="tp-title">' + esc(c.title) + '</h3>' + riskHtml(c.risk, esc) + '<span class="tp-min">' + esc(c.minutes) + ' min</span></div>' +
+    (c.where ? '<p class="tp-where"><span class="tp-k">Where</span> ' + esc(c.where) + '</p>' : '') +
+    (c.steps && c.steps.length ? '<ol class="tp-steps">' + c.steps.map((x) => '<li>' + esc(x) + '</li>').join('') + '</ol>' : '') +
+    (c.expect ? '<p class="tp-expect"><span class="tp-k">You should see</span> ' + esc(c.expect) + '</p>' : '') +
+    '<p class="tp-why"><span class="tp-k">Why</span> ' + esc(c.why) + '</p>' +
+    '<div class="tp-cites" aria-label="Where this comes from">' + c.cites.map((tg) => citeChipHtml(tg, tags, { esc })).join('') + '</div>' +
+    '<div class="tp-acts">' + tick('done', 'Checked', '✓') + tick('failed', 'Failed', '✕') + (st ? '<button type="button" class="linkish tp-clear" data-action="tp-tick" data-id="' + esc(plan.id) + '" data-check="' + esc(c.id) + '" data-state="">Clear</button>' : '') + '</div>' + note + '</li>'
+}
+
+// The plan's page. ui: { trusted, noting, machine (another Mac's plan), here }
+export function testplanPageHtml(plan, ui = {}, { esc = escT } = {}) {
+  if (!plan) return '<div class="proj tp-page"><p class="faint">Loading the test plan…</p></div>'
+  const sc = plan.scope || {}
+  const back = sc.kind === 'project' ? '<a class="back" href="#/project/' + esc(encodeURIComponent(sc.id || sc.token || '')) + '">← ' + esc(sc.label || 'Project') + '</a>' : '<a class="back" href="#/prs">← Pull requests</a>'
+  const sub = [plan.window && plan.window.label, plan.minutes + '-minute budget', (plan.prs || []).length + ' merged PR' + ((plan.prs || []).length === 1 ? '' : 's'), plan.machine && ui.here && plan.machine !== ui.here ? 'on ' + plan.machine : null].filter(Boolean).join(' · ')
+  let h = back + '<header class="tp-head"><h1>Test plan <span class="faint">· ' + esc(sc.label || '') + '</span></h1><p class="sub">' + esc(sub) + '</p></header>'
+  if (plan.status === 'running') return '<div class="proj tp-page">' + h + '<div class="tp-wait" role="status" aria-live="polite"><span class="tp-spin" aria-hidden="true"></span> Writing the test plan from ' + esc((plan.prs || []).length) + ' PRs… this takes up to a couple of minutes.</div></div>'
+  if (plan.status === 'error') return '<div class="proj tp-page">' + h + '<div class="banner warn" role="alert"><span>Couldn’t write it: ' + esc(plan.error || 'unknown error') + '</span></div></div>'
+  const p = plan.plan || { checks: [], notCovered: [], coverage: {} }
+  const by = plan.by || {}
+  const byWords = by.engine === 'claude' ? 'Written by Claude Code (read-only)' : by.engine === 'summary' ? 'Written by your summary model (' + (by.model || by.provider || '') + ')' : by.engine === 'rules' ? 'Made from Leftoff’s notes without a model' : by.engine === 'empty' ? '' : ''
+  h += '<div class="tp-bar"><span class="tp-prog" role="status"><span aria-hidden="true">☐</span> ' + esc(progressLine(plan)) + '</span><span class="tp-cov">' + esc(p.coverage && p.coverage.line || '') + '</span>' +
+    '<span class="tp-exp"><button type="button" class="btn" data-action="tp-copy" data-id="' + esc(plan.id) + '">Copy as Markdown</button><button type="button" class="btn" data-action="tp-download" data-id="' + esc(plan.id) + '">Download .html</button></span></div>'
+  if (byWords) h += '<p class="faint tp-by">' + esc(byWords) + (by.why && by.engine !== 'claude' ? ' · ' + esc(by.why) : '') + '</p>'
+  if (!p.checks.length) h += '<p class="faint">' + esc((p.coverage && p.coverage.line) || 'Nothing to check.') + '</p>'
+  else h += '<ol class="tp-list">' + p.checks.map((c) => checkHtml(c, plan, { esc, trusted: ui.trusted, noting: ui.noting, proposing: ui.proposing })).join('') + '</ol>'
+  if (p.notCovered && p.notCovered.length) h += '<section class="proj-sec tp-nc"><h2>Not covered <span class="count">' + p.notCovered.length + '</span></h2><ul class="tp-ncl">' + p.notCovered.map((n) => '<li><span class="tp-nc-w">' + esc(n.what) + '</span> <span class="faint">· ' + esc(n.why) + '</span>' + ((n.cites || []).length ? ' <span class="tp-cites">' + n.cites.map((tg) => citeChipHtml(tg, p.tags || {}, { esc })).join('') + '</span>' : '') + '</li>').join('') + '</ul></section>'
+  const nw = (plan.prs || []).filter((x) => x.noWalkthrough)
+  h += '<section class="proj-sec tp-prs"><h2>Merged PRs <span class="count">' + (plan.prs || []).length + '</span></h2><ul class="tp-prl">' + (plan.prs || []).map((x) => '<li>' + (httpsUrl(x.url) ? '<a href="' + esc(x.url) + '" target="_blank" rel="noopener noreferrer">#' + esc(x.number) + '</a>' : '#' + esc(x.number)) + ' ' + esc(x.title) + (x.noWalkthrough ? ' <span class="tp-nowt"><span aria-hidden="true">◌</span> no walkthrough</span>' : '') + '</li>').join('') + '</ul>' +
+    (nw.length ? '<p class="faint">' + nw.length + ' had no walkthrough, so only their files, checkpoints and decisions were read.</p>' : '') + '</section>'
+  if (p.notes && p.notes.length) h += '<details class="tp-notes"><summary>What was checked in the answer (' + p.notes.length + ')</summary><ul>' + p.notes.map((n) => '<li>' + esc(n) + '</li>').join('') + '</ul></details>'
+  h += '<p class="tp-del"><button type="button" class="linkish" data-action="tp-delete" data-id="' + esc(plan.id) + '">Delete this test plan</button></p>'
+  return '<div class="proj tp-page">' + h + '</div>'
+}
+
+// Before a run: the PRs in the window, the budget (15 / 30 / 60, a choice in the request, not a setting),
+// "Walk through the N without one first", and the plans made before.
+export function testplanNewHtml(pv, ui = {}, { esc = escT } = {}) {
+  const sc = (pv && pv.scope) || {}
+  const back = sc.kind === 'project' ? '<a class="back" href="#/project/' + esc(encodeURIComponent(sc.id || sc.token || '')) + '">← ' + esc(sc.label || 'Project') + '</a>' : '<a class="back" href="#/prs">← Pull requests</a>'
+  let h = back + '<header class="tp-head"><h1>Test plan <span class="faint">· ' + esc(sc.label || '') + '</span></h1><p class="sub">A short manual script for the PRs merged ' + esc(pv && pv.window ? pv.window.label.toLowerCase() : 'lately') + ': what to click, what you should see, why it’s on the list.</p></header>'
+  if (!pv) return '<div class="proj tp-page">' + h + '<p class="faint">Reading the merged PRs…</p></div>'
+  const prs = pv.prs || []
+  const mins = BUDGETS.includes(ui.minutes) ? ui.minutes : 30
+  h += '<div class="tp-budget" role="group" aria-label="Time budget">' + BUDGETS.map((m) => '<button type="button" class="sask-opt" data-action="tp-minutes" data-m="' + m + '" aria-pressed="' + (m === mins) + '">' + m + ' min</button>').join('') + '</div>'
+  if ((pv.notes || []).length) h += pv.notes.map((n) => '<p class="faint">' + esc(n) + '</p>').join('')
+  if (!prs.length) h += '<p class="faint">No merged PRs ' + esc(pv.window ? pv.window.label.toLowerCase() : '') + '. They show here once the PRs page has read them.</p>'
+  else {
+    h += '<ul class="tp-prl">' + prs.map((x) => '<li>' + (httpsUrl(x.url) ? '<a href="' + esc(x.url) + '" target="_blank" rel="noopener noreferrer">#' + esc(x.number) + '</a>' : '#' + esc(x.number)) + ' ' + esc(x.title) + ' <span class="faint">· ' + esc(day(x.mergedAt)) + '</span>' + (x.walkthrough ? ' <span class="tp-wt"><span aria-hidden="true">●</span> walkthrough</span>' : ' <span class="tp-nowt"><span aria-hidden="true">◌</span> no walkthrough</span>') + '</li>').join('') + '</ul>'
+    const w = pv.walking
+    const n = pv.withoutWalkthrough || 0
+    h += '<div class="dec-acts tp-go">' + (n ? '<button type="button" class="btn" data-action="tp-walk"' + off(ui.trusted, esc) + (w && w.running ? ' disabled' : '') + '>' + (w && w.running ? 'Walking through ' + (w.done + 1) + ' of ' + w.total + '…' : 'Walk through the ' + n + ' without one first') + '</button>' : '') +
+      '<button type="button" class="btn primary" data-action="tp-run"' + off(ui.trusted, esc) + (ui.starting ? ' disabled' : '') + '>' + (ui.starting ? 'Starting…' : 'Make the test plan') + '</button></div>'
+    if (ui.trusted === false) h += '<p class="faint dec-trust"><span aria-hidden="true">◌</span> ' + esc(TP_TRUST_TIP) + '</p>'
+  }
+  const recent = (ui.recent && ui.recent.items) || []
+  if (recent.length) h += '<section class="proj-sec"><h2>Earlier test plans</h2><ul class="tp-recent">' + recent.map((r) => '<li><a href="' + esc(testplanHref(r.id, r.machine && r.machine !== ui.here ? r.machine : null)) + '">' + esc((r.scope && r.scope.label) || 'Test plan') + ' · ' + esc(day(r.createdAt)) + '</a> <span class="faint">· ' + esc(r.ticked + ' of ' + r.checks + ' checked') + (r.machine && r.machine !== ui.here ? ' · on ' + esc(r.machine) : '') + '</span></li>').join('') + '</ul></section>'
+  return '<div class="proj tp-page">' + h + '</div>'
+}
+
+// ------------------------------------------------------------ export
+
+const mdEsc = (s) => String(s == null ? '' : s).replace(/\s+/g, ' ').trim()
+// A checklist with checkboxes: ticked ones [x]; a failed one says so, with its note.
+export function planMarkdown(plan) {
+  const p = (plan && plan.plan) || { checks: [], notCovered: [] }
+  const t = plan.ticks || {}
+  const L = ['# Test plan: ' + mdEsc((plan.scope && plan.scope.label) || ''), '', mdEsc([plan.window && plan.window.label, plan.minutes + '-minute budget', (plan.prs || []).length + ' merged PRs', progressLine(plan)].filter(Boolean).join(' · ')), '']
+  if (p.coverage && p.coverage.line) L.push(mdEsc(p.coverage.line), '')
+  for (const c of p.checks) {
+    const st = t[c.id] && t[c.id].state
+    L.push('- [' + (st ? 'x' : ' ') + '] **' + mdEsc(c.title) + '** (' + (RISK_WORD[c.risk] || c.risk) + ', ' + c.minutes + ' min)' + (st === 'failed' ? ' ✕ failed' + (t[c.id].note ? ': ' + mdEsc(t[c.id].note) : '') : ''))
+    if (c.where) L.push('  - Where: ' + mdEsc(c.where))
+    c.steps.forEach((x, i) => L.push('  ' + (i + 1) + '. ' + mdEsc(x)))
+    if (c.expect) L.push('  - You should see: ' + mdEsc(c.expect))
+    L.push('  - Why: ' + mdEsc(c.why) + (c.cites.length ? ' (' + c.cites.map((x) => '`' + x + '`').join(' ') + ')' : ''))
+  }
+  if (p.notCovered && p.notCovered.length) { L.push('', '## Not covered', ''); for (const n of p.notCovered) L.push('- ' + mdEsc(n.what) + ': ' + mdEsc(n.why)) }
+  L.push('', '## Merged PRs', '')
+  for (const x of plan.prs || []) L.push('- #' + x.number + ' ' + mdEsc(x.title) + (x.noWalkthrough ? ' (no walkthrough)' : ''))
+  return L.join('\n') + '\n'
+}
+
+// ONE self-contained file in the walkthrough export's look: inline CSS, no scripts, no links out
+// (a link is its words and its address).
+export function planHtmlDoc(plan) {
+  const e = escT
+  const p = (plan && plan.plan) || { checks: [], notCovered: [] }
+  const t = plan.ticks || {}
+  let b = '<main><h1>Test plan: ' + e((plan.scope && plan.scope.label) || '') + '</h1><p class="f">' + e([plan.window && plan.window.label, plan.minutes + '-minute budget', (plan.prs || []).length + ' merged PRs', progressLine(plan)].filter(Boolean).join(' · ')) + '</p>'
+  if (p.coverage && p.coverage.line) b += '<p class="sum">' + e(p.coverage.line) + '</p>'
+  for (const c of p.checks) {
+    const st = t[c.id] && t[c.id].state
+    b += '<h2>' + (st === 'done' ? '☑' : st === 'failed' ? '☒' : '☐') + ' ' + e(c.title) + '<span class="tag' + (c.risk === 'high' ? ' core' : '') + '">' + (RISK_SHAPE[c.risk] || '') + ' ' + e(RISK_WORD[c.risk] || c.risk) + '</span><span class="tag">' + e(c.minutes) + ' min</span></h2>'
+    if (st === 'failed') b += '<div class="co"><b>Failed</b> ' + e((t[c.id] && t[c.id].note) || '') + '</div>'
+    if (c.where) b += '<p class="f">Where: ' + e(c.where) + '</p>'
+    if (c.steps.length) b += '<ol>' + c.steps.map((x) => '<li>' + e(x) + '</li>').join('') + '</ol>'
+    if (c.expect) b += '<p>You should see: ' + e(c.expect) + '</p>'
+    b += '<p class="f">Why: ' + e(c.why) + (c.cites.length ? ' · ' + c.cites.map((x) => '<code>' + e(x) + '</code>').join(' ') : '') + '</p>'
+  }
+  if (p.notCovered && p.notCovered.length) b += '<h2>Not covered</h2><ul>' + p.notCovered.map((n) => '<li>' + e(n.what) + ' <span class="f">(' + e(n.why) + ')</span></li>').join('') + '</ul>'
+  b += '<h2>Merged PRs</h2><ul>' + (plan.prs || []).map((x) => '<li>#' + e(x.number) + ' ' + e(x.title) + (x.url ? ' <span class="u f">' + e(x.url) + '</span>' : '') + (x.noWalkthrough ? ' <span class="f">(no walkthrough)</span>' : '') + '</li>').join('') + '</ul></main>'
+  return '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src \'none\'; style-src \'unsafe-inline\'"><title>' + e('Test plan: ' + ((plan.scope && plan.scope.label) || '')) + '</title><style>' + EXPORT_CSS + '</style></head><body>' + b + '</body></html>\n'
+}