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

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

package/ui/viewport-fit.js

@@ -0,0 +1,40 @@
+// Full screen on a phone, sized to the window you can see (ui/app.js fitFullViewport).
+// 2026-11-03 (Joel: "weird top padding after sending a message"): iOS pans the
+// visual viewport up when the keyboard opens over the composer, and full screen
+// follows that pan (top = visualViewport.offsetTop) so the composer stays above
+// the keyboard. After a send the keyboard closes, but iOS's last report can
+// still carry the old pan (or no report comes), and full screen stayed ~300px
+// down the screen with the board showing through above it. So the pan only
+// counts while the keyboard is really up (a text box has focus and the window
+// lost a keyboard's worth of height), and never more than the room the
+// keyboard took (a visual viewport as tall as the window can't be panned).
+
+// A focused field the on-screen keyboard is up for.
+const NO_KB_INPUT = /^(button|checkbox|color|file|hidden|image|radio|range|reset|submit)$/i
+export function isTypingTarget(el) {
+  if (!el || !el.tagName) return false
+  const tag = String(el.tagName).toUpperCase()
+  if (tag === 'TEXTAREA') return !el.readOnly && !el.disabled
+  if (tag === 'INPUT') return !NO_KB_INPUT.test(el.type || 'text') && !el.readOnly && !el.disabled
+  return !!el.isContentEditable
+}
+
+export const KEYBOARD_MIN_PX = 120 // less than this is the browser's own bars, not a keyboard
+
+// innerHeight: the layout viewport's height; vv: { height, offsetTop, scale }; typing: a text box has focus.
+// -> { h, top, kb } in CSS px (null without a visualViewport: the CSS falls back to 100dvh).
+export function fullViewportFit({ innerHeight, vv, typing = false } = {}) {
+  if (!vv || !(Number(innerHeight) > 0)) return null
+  const ih = Number(innerHeight)
+  const vh = Number(vv.height) > 0 ? Number(vv.height) : ih
+  const zoomed = Number(vv.scale) > 1.01 // pinch-zoomed: follow the visual viewport as before
+  const kb = !!typing && ih - vh > KEYBOARD_MIN_PX
+  if (!kb && !zoomed) return { h: Math.round(ih), top: 0, kb: false } // no keyboard: the whole window, from its top
+  const room = Math.max(0, ih - vh)
+  const top = Math.min(Math.max(0, Number(vv.offsetTop) || 0), room)
+  return { h: Math.round(vh), top: Math.round(top), kb }
+}
+
+// When to look again after a text box lets go (the keyboard takes ~0.3–0.5 s to
+// close, and iOS's reports during it can be stale or missing), in ms.
+export const SETTLE_AFTER_BLUR_MS = [0, 120, 350, 700, 1100]