@leftoff/cli 0.9.18-beta.6 → 0.9.18-beta.8

package/ui/app.js

@@ -2,6 +2,7 @@
 // /v1 API on the same origin (auth rides the cookie set at GET /).
 import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
 import { icon } from './icons.js'
+import { fullViewportFit, isTypingTarget, SETTLE_AFTER_BLUR_MS } from './viewport-fit.js' // 2026-11-03: no gap above full screen after the keyboard closes
 import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey, openNameSheet, openProjectSheet, refreshActionMenu } from './picker.js'
 import { sheetRepos, sheetPlan, runSheetPlan, askScopeItems } from './project-sheet.js' // 0.9.12: New project with several repos
 import { watchChipFades } from './chip-fade.js' // 0.9.12: chip rows fade only where chips run off
@@ -74,7 +75,8 @@ import { loginBannersHtml, loginSig, dismissedKeys as loginDismissed, dismissLog
 import { isDone, stillWorking, canMarkDone, DONE_CONFIRM, DONE_TIP, UNDONE_TIP, doneChipHtml } from './done.js' // 0.9.15 Done
 import { mountTerminal, escInTerminal } from './term.js' // 0.9.15 the embedded terminal
 import { termTipFor } from './term-host.js' // 0.9.15 a terminal for another Mac's session
-import { decidedListHtml, decisionScope, decisionsPageHtml, projectDecisionsHtml, decisionItemHtml, decisionsHref } from './decisions.js' // 2026-11-03 decision memory
+import { testplanPageHtml, testplanNewHtml, planMarkdown, planHtmlDoc, testplanHref } from './testplan.js' // testplan Part 3
+import { decidedListHtml, decisionsGivenHtml, reviewCountHtml, decisionScope, decisionsPageHtml, projectDecisionsHtml, decisionItemHtml, decisionsHref } from './decisions.js' // 2026-11-03 decision memory
 import { recapLineHtml, beforeClearHtml } from './recap-line.js' // 0.9.15 Claude Code's recap; before /clear
 import { Presence, cardRows, awayWords } from './away.js' // 0.9.15 a card shows more the longer you've been away
 import { backLine, backLineHtml, BACK_PREFIX, BACK_AWAY_MS } from './back-line.js' // 0.9.15 the recap above the Live composer
@@ -495,7 +497,7 @@ const offlinePill = (s) => { const w = offlineLine(s); return '<span class="pill
 const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
 
 // The sections an informative / long checkpoint adds below the three lines (v0.4.6).
-const EXTRA_TITLES = [['decisions', 'Key decisions'], ['questions', 'Open questions'], ['files', 'Files touched'], ['didntWork', 'What didn’t work'], ['recap', 'Recap'], ['nextSteps', 'Next steps']]
+const EXTRA_TITLES = [['decisions', 'Approach notes'], ['questions', 'Open questions'], ['files', 'Files touched'], ['didntWork', 'What didn’t work'], ['recap', 'Recap'], ['nextSteps', 'Next steps']]
 function hasExtras(cp) { return !!cp && EXTRA_TITLES.some(([k]) => (Array.isArray(cp[k]) ? cp[k].length : !!cp[k])) }
 function cpExtras(cp, paths = null) {
   let h = ''
@@ -1911,7 +1913,7 @@ function projectRow(list, sel, action, counts, tail = '') {
   const manage = sel && projectsUi.mayEdit && projectsUi.list.some((p) => p.id === sel) ? '<button type="button" class="btn icon-btn more proj-more" data-action="project-manage" data-project="' + esc(sel) + '" aria-label="Project actions" data-tip="Rename, edit repos, delete" aria-haspopup="menu" aria-expanded="false">' + icon('ellipsis') + '</button>' : ''
   // the ⋯ sits just past the scrolling track (whose edge fades only while chips run past it), never clipped
   return '<div class="repos projects" role="group" aria-label="Filter by project"><div class="track">' + b('', 'All projects', total, !sel) +
-    chips.map((c) => b(c.id, (c.emoji ? '<span class="pe" aria-hidden="true">' + esc(c.emoji) + '</span>' : '') + esc(c.name), c.count, sel === c.id)).join('') + '</div>' + manage + tail + '</div>'
+    chips.map((c) => b(c.id, (c.emoji ? '<span class="pe" aria-hidden="true">' + esc(c.emoji) + '</span>' : '') + esc(c.name) + reviewCountHtml(((projectsUi.list.find((p) => p.id === c.id) || {}).decisionsToReview) || 0, { esc, cls: 'pchip-rc' }), c.count, sel === c.id)).join('') + '</div>' + manage + tail + '</div>'
 }
 // 0.9.12: the board's own way in to a project with several repos: a "New
 // project" button at the end of the project row (or the repo row before there
@@ -2941,8 +2943,10 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   // 2026-10-29 a calmer panel: only the newest checkpoint (Stopped + Next, the rest behind More); older ones fold
   side += '<section class="fs-sec fs-cps" id="fsCps"><h2>Checkpoints <span class="count">' + cps.length + '</span></h2>'
   side += !cps.length && !wrRow ? '<div class="empty">No checkpoints yet.</div>' : '<div class="timeline">' + wrRow + (cps.length ? cpLatestHtml(cps[0], s.agent ? null : s.id, paths) : '') + '</div>'
+  side += decisionsGivenHtml(s, { esc, when: (iso) => clock(iso) + ' · ' + ago(iso) }) // 1b
+  decisionsUi.panelSession = s // 1k: the session whose panel is drawn (Accept / Edit there redraw it)
   if (cps.length && Array.isArray(cps[0].decided) && cps[0].decided.length) noteSessionDecisions(s)
-  if (cps.length && Array.isArray(cps[0].decided) && cps[0].decided.length) side += foldHtml({ key: 'cp-decided', title: 'Decided', count: cps[0].decided.length, open: sideFolds.open('cp-decided'), cls: 'fs-fold-in', body: decidedListHtml(cps[0].decided, { esc, log: decisionsUi.bySession[s.id] || null, repoId: s.decisionRepo || null }) }, { esc }) // 2026-11-03 decision memory
+  if (cps.length && Array.isArray(cps[0].decided) && cps[0].decided.length) side += foldHtml({ key: 'cp-decided', title: 'Decided', count: cps[0].decided.length, open: sideFolds.open('cp-decided'), cls: 'fs-fold-in', body: decidedListHtml(cps[0].decided, { esc, log: decisionsUi.bySession[s.id] || null, repoId: s.decisionRepo || null, trusted: decisionsTrusted(), editing: decisionsUi.editing, may: !s.agent }) }, { esc }) // 2026-11-03 decision memory; 1k Accept / Reject / Edit right here
   if (cps.length > 1) side += foldHtml({ key: 'cps-earlier', title: 'Earlier checkpoints', count: cps.length - 1, open: sideFolds.open('cps-earlier'), cls: 'fs-fold-in', body: '<div class="timeline">' + cpTimeline(cps.slice(1), null, null, paths) + '</div>' }, { esc })
   const doubted = s.checkpoints.filter((cp) => cp.doubt && cp.doubt !== 'empty') // 0.9.0: written with another session's branch: kept, folded away
   if (doubted.length) side += '<details class="tl-doubt"><summary>' + doubted.length + ' checkpoint' + (doubted.length === 1 ? '' : 's') + ' set aside: written with another session’s branch</summary><div class="timeline">' + cpTimeline(doubted, null) + '</div></details>'
@@ -3427,21 +3431,58 @@ function setFullClass(on) {
   applyNav()
 }
 // The window as you see it: on a phone the keyboard takes the bottom of it,
-// and the composer stays just above the keyboard.
+// and the composer stays just above the keyboard. When the keyboard closes the
+// layout goes back exactly to where it was (ui/viewport-fit.js: iOS can leave
+// its pan behind after a send, which put full screen ~300px down the screen).
+const lfKb = { scroll: null, settle: 0 } // scroll: window.scrollY as a text box took focus (iOS may scroll the page under the keyboard)
 function fitFullViewport() {
   const vv = window.visualViewport
-  const st = document.documentElement.style
-  if (!document.documentElement.classList.contains('live-full')) { st.removeProperty('--lf-h'); st.removeProperty('--lf-top'); st.removeProperty('--lf-bar'); return }
+  const html = document.documentElement, st = html.style
+  if (!html.classList.contains('live-full')) { st.removeProperty('--lf-h'); st.removeProperty('--lf-top'); st.removeProperty('--lf-bar'); html.classList.remove('lf-kb'); lfKb.scroll = null; return }
   // 0.9.14: from 700px full screen starts under the board's own tab bar (pinned to the top, the rail hidden)
   const strip = document.getElementById('tabStrip')
   const bar = strip && !strip.hidden && getComputedStyle(strip).display !== 'none' ? Math.round(strip.getBoundingClientRect().height) : 0
   st.setProperty('--lf-bar', bar + 'px')
-  if (!vv) { st.removeProperty('--lf-h'); st.removeProperty('--lf-top'); return }
-  st.setProperty('--lf-h', Math.round(vv.height) + 'px')
-  st.setProperty('--lf-top', Math.round(vv.offsetTop) + 'px')
-  document.documentElement.classList.toggle('lf-kb', window.innerHeight - vv.height > 120) // the keyboard is up: no home-indicator gap under the composer
+  const typing = isTypingTarget(document.activeElement)
+  const fit = fullViewportFit({ innerHeight: window.innerHeight, vv, typing })
+  if (!fit) { st.removeProperty('--lf-h'); st.removeProperty('--lf-top'); html.classList.remove('lf-kb'); return }
+  st.setProperty('--lf-h', fit.h + 'px')
+  st.setProperty('--lf-top', fit.top + 'px')
+  html.classList.toggle('lf-kb', fit.kb) // the keyboard is up: no home-indicator gap under the composer
+  // the keyboard's gone: the page under full screen back where it was before the text box took focus
+  if (!typing && lfKb.scroll != null && Math.abs(window.scrollY - lfKb.scroll) >= 1) window.scrollTo(window.scrollX, lfKb.scroll)
 }
 if (window.visualViewport) for (const ev of ['resize', 'scroll']) window.visualViewport.addEventListener(ev, fitFullViewport)
+for (const ev of ['resize', 'orientationchange', 'pageshow']) window.addEventListener(ev, fitFullViewport)
+document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') fitFullViewport() })
+document.addEventListener('focusin', (e) => {
+  if (!isTypingTarget(e.target) || !document.documentElement.classList.contains('live-full')) return
+  clearTimeout(lfKb.settle)
+  if (lfKb.scroll == null) lfKb.scroll = window.scrollY
+  // 2026-11-04: a third-party keyboard (Raycast, Gboard, SwiftKey) can come up late, or change the
+  // visual viewport without a resize event of its own: measure again as it opens, as on the way down
+  let i = 0
+  const step = () => {
+    if (!isTypingTarget(document.activeElement)) return
+    fitFullViewport()
+    if (++i < SETTLE_AFTER_BLUR_MS.length) lfKb.settle = setTimeout(step, SETTLE_AFTER_BLUR_MS[i] - SETTLE_AFTER_BLUR_MS[i - 1])
+  }
+  lfKb.settle = setTimeout(step, SETTLE_AFTER_BLUR_MS[0])
+})
+// A text box let go (a send closes the phone's keyboard, or a tap away): look again as the keyboard
+// goes down, whatever iOS reports or doesn't on the way.
+document.addEventListener('focusout', (e) => {
+  if (!isTypingTarget(e.target) || !document.documentElement.classList.contains('live-full')) return
+  clearTimeout(lfKb.settle)
+  let i = 0
+  const step = () => {
+    fitFullViewport()
+    if (isTypingTarget(document.activeElement)) return // another text box took focus: the keyboard stays
+    if (++i < SETTLE_AFTER_BLUR_MS.length) lfKb.settle = setTimeout(step, SETTLE_AFTER_BLUR_MS[i] - SETTLE_AFTER_BLUR_MS[i - 1])
+    else lfKb.scroll = null
+  }
+  lfKb.settle = setTimeout(step, SETTLE_AFTER_BLUR_MS[0])
+})
 function fullAfterRender(sid) {
   const box = document.querySelector('.live-box.full')
   setFullClass(!!box)
@@ -3686,11 +3727,40 @@ function composerFor(el) {
   const box = (el && el.closest && el.closest('.composer')) || document.querySelector('#app .composer[data-sid]')
   return box && !box.classList.contains('off') ? box : null
 }
+// The picker the paperclip opens lives outside the page (0.9.18). A phone's
+// photo picker covers the board for seconds; coming back is a wake-up (focus
+// after more than AWAY_MS away) that redraws the page, and iOS hands the
+// picked photo over only after that, to the <input> it opened from. A picker
+// inside the composer was gone by then (the redraw made a new one), so its
+// change event went nowhere and the photo never showed. This one is never
+// redrawn; the composer's own hidden input stays for drops and tests.
+let attPicker = null
+function attachPicker() {
+  if (attPicker && attPicker.isConnected) return attPicker
+  attPicker = document.createElement('input')
+  attPicker.type = 'file'; attPicker.multiple = true; attPicker.tabIndex = -1
+  attPicker.className = 'att-input att-picker'; attPicker.id = 'att-picker'
+  attPicker.setAttribute('aria-hidden', 'true')
+  document.body.appendChild(attPicker)
+  return attPicker
+}
+function openPicker(sid) {
+  if (!sid) return
+  const pk = attachPicker()
+  pk.dataset.sid = sid
+  pk.value = ''
+  pk.click() // still inside the tap: iOS opens a picker only from a user gesture
+}
+function takePicked(inp) {
+  const files = Array.from(inp.files || [])
+  if (!files.length) return
+  inp.value = '' // the same file can be picked again
+  try { addFiles(inp.dataset.sid, files) } catch (e) { toast('Couldn’t attach ' + (files.length === 1 ? files[0].name || 'that file' : files.length + ' files') + ': ' + (e.message || e), 6000) }
+}
 document.addEventListener('change', (ev) => {
   const inp = ev.target
   if (!inp || !inp.classList || !inp.classList.contains('att-input')) return
-  addFiles(inp.dataset.sid, inp.files)
-  inp.value = '' // the same file can be picked again
+  takePicked(inp)
 })
 document.addEventListener('paste', (ev) => {
   const t = ev.target
@@ -4447,7 +4517,8 @@ function cpHeadLine(cp) {
     (cp.generator && cp.generator.by ? '<span>· ' + esc(cpByText(cp.generator)) + cpByHintHtml(cp.generator) + '</span>' : '') + '</div>'
 }
 // 2026-11-03 decision memory: the log's word on a session's decisions (by text), once its repo's log is loaded
-const decisionsUi = { bySession: {}, scope: null, view: null, all: false, editing: null, project: null, loadedRepo: {} }
+const decisionsUi = { bySession: {}, scope: null, view: null, all: false, editing: null, project: null, loadedRepo: {}, panelSession: null }
+const panelSess = () => (state.route && state.route.name === 's' && decisionsUi.panelSession && decisionsUi.panelSession.id === state.route.arg ? decisionsUi.panelSession : null)
 // The session panel's Decided list reads the log's word on each one (once per repo per visit, quietly)
 function noteSessionDecisions(s) {
   const repo = s && s.decisionRepo
@@ -4460,9 +4531,97 @@ function noteSessionDecisions(s) {
     decisionsUi.bySession[s.id] = by
     const box = document.querySelector('[data-fold="cp-decided"] .fs-fold-b')
     const cp = (s.checkpoints || []).filter((c) => !c.doubt).sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)))[0]
-    if (box && cp && cp.decided) box.innerHTML = decidedListHtml(cp.decided, { esc, log: by, repoId: repo })
+    if (box && cp && cp.decided) box.innerHTML = decidedListHtml(cp.decided, { esc, log: by, repoId: repo, trusted: decisionsTrusted(), editing: decisionsUi.editing, may: !s.agent })
   }).catch(() => { decisionsUi.loadedRepo[repo] = false })
 }
+// ---- testplan Part 3: #/testplan/new?scope=…&prs=… (before a run) and #/testplan/<id>?machine=… (a plan)
+const tpUi = { id: null, machine: null, plan: null, timer: null, noting: null, proposing: null, nu: null }
+const tpTrusted = () => state.mayAnswer !== false && (state.viewerLocal !== false || !!(state.health && state.health.answering && state.health.answering.remoteAllowed))
+async function viewTestplan(arg, params) {
+  clearTimeout(tpUi.timer)
+  if (arg === 'new') {
+    const q = { scope: params.get('scope') || '', since: params.get('since') || '', prs: params.get('prs') || '' }
+    const key = JSON.stringify(q)
+    if (!tpUi.nu || tpUi.nu.key !== key) tpUi.nu = { key, q, preview: null, recent: null, minutes: 30, starting: false, error: null }
+    paintTestplanNew()
+    const qs = 'scope=' + encodeURIComponent(q.scope) + (q.since ? '&since=' + encodeURIComponent(q.since) : '') + (q.prs ? '&prs=' + q.prs.split(',').map((u) => encodeURIComponent(decodeURIComponent(u))).join(',') : '')
+    try { tpUi.nu.preview = await api('GET', '/v1/testplans/preview?' + qs, undefined, { timeoutMs: 30000 }) } catch (e) { tpUi.nu.error = e.message || String(e) }
+    try { tpUi.nu.recent = await api('GET', '/v1/testplans' + (q.scope ? '?scope=' + encodeURIComponent(q.scope) : ''), undefined, { timeoutMs: 8000 }) } catch {}
+    paintTestplanNew()
+    const w = tpUi.nu.preview && tpUi.nu.preview.walking
+    if (w && w.running) tpUi.timer = setTimeout(() => { if (state.route && state.route.name === 'testplan' && state.route.arg === 'new') viewTestplan('new', params) }, 2500)
+    return
+  }
+  const machine = params.get('machine') || null
+  if (tpUi.id !== arg || tpUi.machine !== machine) { tpUi.id = arg; tpUi.machine = machine; tpUi.plan = null; tpUi.noting = null; tpUi.proposing = null; paintTestplan() }
+  tpUi.plan = await api('GET', '/v1/testplans/' + encodeURIComponent(arg) + (machine ? '?machine=' + encodeURIComponent(machine) : ''), undefined, { timeoutMs: 10000 })
+  paintTestplan()
+  if (tpUi.plan && tpUi.plan.status === 'running') tpUi.timer = setTimeout(() => { if (state.route && state.route.name === 'testplan' && state.route.arg === arg) viewTestplan(arg, params) }, 1500)
+}
+function paintTestplanNew() {
+  if (!state.route || state.route.name !== 'testplan' || state.route.arg !== 'new' || !tpUi.nu) return
+  const n = tpUi.nu
+  $app.innerHTML = testplanNewHtml(n.preview, { minutes: n.minutes, trusted: tpTrusted(), starting: n.starting, recent: n.recent, here: state.health && state.health.machine }, { esc }) + (n.error ? '<div class="banner warn" role="alert"><span>' + esc(n.error) + '</span></div>' : '')
+}
+function paintTestplan() {
+  if (!state.route || state.route.name !== 'testplan' || state.route.arg === 'new') return
+  $app.innerHTML = testplanPageHtml(tpUi.plan, { trusted: tpTrusted(), noting: tpUi.noting, proposing: tpUi.proposing, here: state.health && state.health.machine }, { esc })
+}
+async function tpCheck(id, check, body) {
+  try { tpUi.plan = await api('POST', '/v1/testplans/' + encodeURIComponent(id) + '/check' + (tpUi.machine ? '?machine=' + encodeURIComponent(tpUi.machine) : ''), { check, ...body }); paintTestplan() } catch (e) { toast(e.message || String(e)) }
+}
+document.addEventListener('click', async (ev) => {
+  const b = ev.target.closest && ev.target.closest('[data-action^="tp-"]')
+  if (!b || b.tagName === 'FORM' || b.disabled) return
+  const a = b.dataset.action
+  if (a === 'tp-minutes') { if (tpUi.nu) { tpUi.nu.minutes = Number(b.dataset.m) || 30; paintTestplanNew() } return }
+  if (a === 'tp-run' || a === 'tp-walk') {
+    const n = tpUi.nu
+    if (!n) return
+    const body = { scope: n.q.scope, since: n.q.since || null, prs: n.q.prs ? n.q.prs.split(',').map((u) => decodeURIComponent(u)) : null }
+    if (a === 'tp-walk') { try { await api('POST', '/v1/testplans/walk', body); toast('Walking through them one at a time'); viewTestplan('new', state.route.params) } catch (e) { toast(e.message || String(e)) } return }
+    n.starting = true; paintTestplanNew()
+    try { const r = await api('POST', '/v1/testplans', { ...body, minutes: n.minutes }, { timeoutMs: 90000 }); location.hash = testplanHref(r.id) } catch (e) { n.starting = false; n.error = e.message || String(e); paintTestplanNew() }
+    return
+  }
+  const id = b.dataset.id, check = b.dataset.check
+  if (a === 'tp-tick') { const cur = tpUi.plan && tpUi.plan.ticks && tpUi.plan.ticks[check]; const want = b.dataset.state || null; return tpCheck(id, check, { state: cur && cur.state === want ? null : want }) }
+  if (a === 'tp-propose') { tpUi.proposing = check; paintTestplan(); const i = document.querySelector('.tp-propf .dec-in'); if (i) i.focus({ preventScroll: true }); return }
+  if (a === 'tp-propose-cancel') { tpUi.proposing = null; return paintTestplan() }
+  if (a === 'tp-copy') { const md = tpUi.plan && planMarkdown(tpUi.plan); if (md && await clipWrite(md)) toast('Copied as Markdown'); else if (md) prompt('Copy this:', md); return }
+  if (a === 'tp-download') {
+    if (!tpUi.plan) return
+    const url = URL.createObjectURL(new Blob([planHtmlDoc(tpUi.plan)], { type: 'text/html' }))
+    const x = document.createElement('a'); x.href = url; x.download = exportName('Test plan ' + ((tpUi.plan.scope && tpUi.plan.scope.label) || '')); document.body.appendChild(x); x.click(); x.remove()
+    setTimeout(() => URL.revokeObjectURL(url), 4000)
+    return
+  }
+  if (a === 'tp-delete') { if (!confirm('Delete this test plan?')) return; try { await api('DELETE', '/v1/testplans/' + encodeURIComponent(id)); location.hash = '#/prs' } catch (e) { toast(e.message || String(e)) } }
+})
+document.addEventListener('submit', async (ev) => {
+  const f = ev.target.closest && ev.target.closest('form[data-action^="tp-"]')
+  if (!f) return
+  ev.preventDefault()
+  if (f.dataset.action === 'tp-note') return tpCheck(f.dataset.id, f.dataset.check, { note: f.querySelector('[name="note"]').value })
+  if (f.dataset.action === 'tp-propose-save') {
+    try {
+      const r = await api('POST', '/v1/testplans/' + encodeURIComponent(f.dataset.id) + '/propose', { check: f.dataset.check, text: f.querySelector('[name="text"]').value })
+      tpUi.plan = r.plan; tpUi.proposing = null; paintTestplan(); toast('Proposed ' + (r.decision ? r.decision.id : '') + ': review it in the decision log')
+    } catch (e) { toast(e.message || String(e)) }
+  }
+})
+// 1k: the panel's Decided list, drawn again in place (editing one, or after the log loaded)
+function paintPanelDecided(s) {
+  const box = document.querySelector('[data-fold="cp-decided"] .fs-fold-b')
+  const cp = s && (s.checkpoints || []).filter((c) => !c.doubt).sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)))[0]
+  if (box && cp && cp.decided) box.innerHTML = decidedListHtml(cp.decided, { esc, log: decisionsUi.bySession[s.id] || null, repoId: s.decisionRepo || null, trusted: decisionsTrusted(), editing: decisionsUi.editing, may: !s.agent })
+}
+// 1k: after Accept / Reject / Edit, the panel's Decided list reads the log again
+function refreshPanelDecisions(s) {
+  if (!s || !s.decisionRepo) return
+  decisionsUi.loadedRepo[s.decisionRepo] = false
+  noteSessionDecisions(s)
+}
 // ---- the decision log page (#/decisions/<repo id> or #/decisions/project:<id>)
 async function viewDecisions(arg) {
   const raw = decodeURIComponent(arg || '')
@@ -4475,13 +4634,20 @@ async function viewDecisions(arg) {
 }
 function paintDecisions() {
   if (!decisionsUi.view || !state.route || state.route.name !== 'decisions') return
-  $app.innerHTML = decisionsPageHtml(decisionsUi.view, { all: decisionsUi.all, editing: decisionsUi.editing, may: state.mayAnswer !== false, trusted: state.viewerLocal !== false || !!(state.health && state.health.answering && state.health.answering.remoteAllowed) }, { esc })
+  $app.innerHTML = decisionsPageHtml(decisionsUi.view, { all: decisionsUi.all, editing: decisionsUi.editing, may: state.mayAnswer !== false, trusted: decisionsTrusted() }, { esc })
   if (decisionsUi.editing) { const i = $app.querySelector('.dec-edit .dec-in'); if (i) i.focus({ preventScroll: true }) }
 }
 async function decisionAction(repo, ref, action, body = {}) {
   try {
-    await api('POST', '/v1/decisions/action', { repo, ref, action, ...body })
+    const r = await api('POST', '/v1/decisions/action', { repo, ref, action, ...body })
     decisionsUi.loadedRepo = {}
+    // a walkthrough citing it shows its new word (Proposed goes once accepted)
+    const dd = r && r.decision
+    if (dd) for (const w of wtUi.data.values()) for (const x of (w && w.decisions) || []) if (x.id === dd.id) { if (dd.status === 'proposed') x.status = 'proposed'; else delete x.status; wtUi.sig = '' }
+    if (wtUi.sid) wtFill(wtSession(wtUi.sid))
+    const dv = document.querySelector('.dv-isdec:not([hidden])')
+    if (dv && decViewerCtx) openDecisionViewer(decViewerCtx.repo, decViewerCtx.id, decViewerCtx.from, decViewerCtx.ctx)
+    if (panelSess()) refreshPanelDecisions(panelSess()) // 1k
     if (state.route && state.route.name === 'decisions') await viewDecisions(decisionsUi.scope)
     else if (state.route && state.route.name === 'project') loadProjectDecisions(qaUi.token, true)
   } catch (e) { toast(e.message || String(e)) }
@@ -4492,8 +4658,8 @@ document.addEventListener('click', async (ev) => {
   const a = btn.dataset.action
   if (a === 'dec-act') return decisionAction(btn.dataset.repo, btn.dataset.id, btn.dataset.act, btn.dataset.act === 'accept' ? {} : {})
   if (a === 'dec-link') return decisionAction(btn.dataset.repo, btn.dataset.id, 'link', { supersedes: [btn.dataset.to] })
-  if (a === 'dec-edit') { decisionsUi.editing = btn.dataset.id; return paintDecisions() }
-  if (a === 'dec-cancel') { decisionsUi.editing = null; return paintDecisions() }
+  if (a === 'dec-edit') { decisionsUi.editing = btn.dataset.id; if (panelSess()) { paintPanelDecided(panelSess()); const i = document.querySelector('#decp-' + CSS.escape(btn.dataset.id) + ' .dec-in'); if (i) i.focus({ preventScroll: true }); return } return paintDecisions() }
+  if (a === 'dec-cancel') { decisionsUi.editing = null; if (panelSess()) return paintPanelDecided(panelSess()); return paintDecisions() }
   if (a === 'dec-all') { decisionsUi.all = !decisionsUi.all; return paintDecisions() }
   if (a === 'dec-copy') { const md = decisionsUi.view && decisionsUi.view.markdown; if (md && await clipWrite(md)) toast('Copied as Markdown'); else if (md) prompt('Copy this:', md); return }
   if (a === 'dec-show') {
@@ -4518,10 +4684,14 @@ document.addEventListener('click', (ev) => {
   if (!b) return
   ev.preventDefault()
   const s = wtSession(wtUi.sid)
-  openDecisionViewer(b.dataset.repo || (s && s.decisionRepo) || '', b.dataset.id, b)
+  openDecisionViewer(b.dataset.repo || (s && s.decisionRepo) || '', b.dataset.id, b, { departs: b.dataset.departs === '1', sessionId: wtUi.sid || null })
 })
-async function openDecisionViewer(repo, id, from) {
+// 1h: the board's gate for changing the decision log (POST /v1/decisions/action is trustedOnly)
+const decisionsTrusted = () => state.mayAnswer !== false && (state.viewerLocal !== false || !!(state.health && state.health.answering && state.health.answering.remoteAllowed))
+let decViewerCtx = null // 1f/1g: the viewer's last open, to redraw after Accept / Reject / a link
+async function openDecisionViewer(repo, id, from, ctx = {}) {
   if (!repo || !id) return
+  decViewerCtx = { repo, id, from, ctx }
   let v
   try { v = await api('GET', '/v1/decisions?repo=' + encodeURIComponent(repo), undefined, { timeoutMs: 8000 }) } catch (e) { toast(e.message || String(e)); return }
   const list = v.decisions || [], byId = new Map(list.map((d) => [d.id, d]))
@@ -4540,7 +4710,17 @@ async function openDecisionViewer(repo, id, from) {
     cur = d; guard = 0
     while (cur && cur.supersededBy && guard++ < 20) { const n = byId.get(cur.supersededBy); if (!n || chain.includes(n)) break; chain.push(n); cur = n }
   }
-  el.querySelector('.dv-body').innerHTML = (chain.length ? '<ol class="dec-tl dec-chainview">' + chain.map((x) => decisionItemHtml(x, { esc, byId, may: false })).join('') + '</ol>' : '<p class="faint">This decision isn’t in the repo’s log.</p>') +
+  // 1f: a proposed one (a walkthrough cites this session's own) can be accepted or rejected right here, same API and gate.
+  // 1g: from a step that departs from it, this session's own decisions offer the supersede link (once accepted).
+  const trusted = decisionsTrusted()
+  const item = (x) => decisionItemHtml(x, { esc, byId, may: x === d && x.status === 'proposed', review: x === d && x.status === 'proposed', edit: false, trusted })
+  let offer = ''
+  if (d && ctx.departs && ctx.sessionId) {
+    const own = list.filter((x) => x.sessionId === ctx.sessionId && x.id !== d.id && (x.status === 'proposed' || x.status === 'accepted') && !(x.supersedes || []).includes(d.id))
+    if (own.length) offer = '<section class="dec-offer"><h3>This step departs from ' + esc(d.id) + '</h3><p class="faint">If one of this session’s decisions changes it, link them so ' + esc(d.id) + ' reads as superseded.</p><ul class="dec-tl">' +
+      own.map((x) => decisionItemHtml(x, { esc, byId, may: x.status === 'proposed', review: x.status === 'proposed', edit: false, trusted, replaces: x.status === 'accepted' ? d.id : null })).join('') + '</ul></section>'
+  }
+  el.querySelector('.dv-body').innerHTML = (chain.length ? '<ol class="dec-tl dec-chainview">' + chain.map(item).join('') + '</ol>' : '<p class="faint">This decision isn’t in the repo’s log.</p>') + offer +
     '<p><a class="linkish dec-open" href="' + esc(decisionsHref(repo)) + '?d=' + encodeURIComponent(id) + '">Open the decision log →</a></p>'
   el.classList.remove('dv-isref'); el.classList.add('dv-isdec')
   refUi.from = from || null
@@ -4569,7 +4749,9 @@ function paintProjectDecisions() {
   const box = document.getElementById('projDecisionsBox')
   const pd = decisionsUi.project
   if (!box || !pd || pd.token !== qaUi.token) return
-  box.innerHTML = projectDecisionsHtml(pd.v, { esc, may: state.mayAnswer !== false, scopeArg: 'project:' + ((pd.v.scope && pd.v.scope.id) || pd.token) })
+  box.innerHTML = projectDecisionsHtml(pd.v, { esc, may: state.mayAnswer !== false, trusted: decisionsTrusted(), scopeArg: 'project:' + ((pd.v.scope && pd.v.scope.id) || pd.token) })
+  const slot = document.getElementById('projDecReview') // 1k: the header's quiet count
+  if (slot) slot.innerHTML = reviewCountHtml((pd.v.decisions || []).filter((d) => d.status === 'proposed').length, { esc, href: decisionsHref('project:' + ((pd.v.scope && pd.v.scope.id) || pd.token)), cls: 'proj-review' })
 }
 // 2026-10-29 The panel's newest checkpoint: Stopped + Next; Goal, Doing, the extra sections,
 // your note and the files behind More (open or closed as you last left it on this device).
@@ -4598,10 +4780,10 @@ function fact(k, v, cls, opts = {}) { return factHtml(k, v, { cls, ...opts }) }
 // PRs (0.6.9): Mine (PRs linked to your sessions, grouped) and Team (every open
 // PR in the repos your sessions are in). The daemon fetches with gh (or asks
 // the Mac that has it) and caches ~5 min; while it loads we look again shortly.
-const prsUi = { fresh: false, polls: 0, timer: null, data: {}, at: {}, open: new Set(), details: {}, quietOpen: false, doneOpen: {}, view: 'mine', filter: {}, done: {} }
+const prsUi = { fresh: false, polls: 0, timer: null, data: {}, at: {}, open: new Set(), details: {}, quietOpen: false, doneOpen: {}, view: 'mine', filter: {}, done: {}, picks: new Set() } // testplan Part 3: picks, merged PRs for a test plan
 // 0.8.5: the filters live in the hash (linkable; back/forward work); a chip
 // tap repaints from what we have and reads again only when that is old.
-function prsOpts(view, filter) { return { view, mayEdit: true, sessionAction: prSessionAction, filter, open: prsUi.open, details: prsUi.details, quietOpen: prsUi.quietOpen, doneOpen: prsUi.doneOpen, projects: projectsUi.list } }
+function prsOpts(view, filter) { return { view, mayEdit: true, sessionAction: prSessionAction, filter, open: prsUi.open, details: prsUi.details, quietOpen: prsUi.quietOpen, doneOpen: prsUi.doneOpen, projects: projectsUi.list, picks: prsUi.picks } }
 function paintPrs(d) {
   const q = document.getElementById('prs-q')
   const focused = q && document.activeElement === q, caret = focused ? q.selectionStart : null
@@ -4750,7 +4932,8 @@ function briefAction(id, sessions, viewer) {
 
 function renderMd(md, { spaces = [], sessions = null, viewer = null } = {}) {
   const body = md.replace(/^---\n[\s\S]*?\n---\n/, '')
-  const inline = (t) => esc(t).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)
+  // testplan Part 2: the Decisions part links into the log: [D-7f3a](#/decisions/…) only, nothing else becomes a link
+  const inline = (t) => esc(t).replace(/\[([^\]]{1,80})\]\((#\/decisions\/[^)\s"<>]{1,200})\)/g, '<a class="dg-dec" href="$2">$1</a>').replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>').replace(/(^|[^\w*])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')  // not inside snake_case names (clutch_hockey)
   const out = []
   let inList = false, inSec = false, inFin = false, seenH2 = false, inUnf = false
   const closeList = () => { if (inList) { out.push(inList === 'ol' ? '</ol>' : '</ul>'); inList = false } if (inFin) { out.push('</details>'); inFin = false } }
@@ -6775,6 +6958,7 @@ async function render() {
     else if (r.name === 'new') await viewNewSession()
     else if (r.name === 'project' && r.arg) await viewProject(r.arg)
     else if (r.name === 'decisions' && r.arg) await viewDecisions(location.hash.replace(/^#\/decisions\//, '').split('?')[0])
+    else if (r.name === 'testplan' && r.arg) await viewTestplan(r.arg, r.params) // testplan Part 3
     else if (r.name === 'ask' && r.arg) await viewAsk(r.arg, r.params.get('m'))
     else if (r.name === 'setup') await viewSetup()
     else if (r.name === 'tour') { location.replace('#/'); startTour({ api }); return }
@@ -8805,6 +8989,8 @@ document.addEventListener('click', async (ev) => {
     if (action === 'prs-clear') { const q = document.getElementById('prs-q'); if (q) q.value = ''; return setPrsFilter({}) }
     if (action === 'pr-expand') return togglePr(btn.dataset.url)
     if (action === 'pr-expand-retry') return togglePr(btn.dataset.url, { retry: true })
+    if (action === 'prs-pick') { const u = btn.dataset.url; if (prsUi.picks.has(u)) prsUi.picks.delete(u); else prsUi.picks.add(u); return paintPrsBody() } // testplan Part 3
+    if (action === 'prs-pick-clear') { prsUi.picks.clear(); return paintPrsBody() }
     if (action === 'prs-older') { const d = prsUi.data[prsUi.view]; if (!d) return; d.olderLoading = true; btn.disabled = true; btn.textContent = 'Loading…'; prsUi.done[prsUi.view] = (Number(d.doneShown) || 0) + 100; prsUi.at[prsUi.view] = 0; return render() } // 0.9.12
     if (action === 'prs-refresh') { btn.disabled = true; prsUi.fresh = true; return render() }
     if (action === 'pr-unlink') {
@@ -9333,7 +9519,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'lv-queued-cancel' || action === 'lv-queued-edit') return queuedClick(btn, action === 'lv-queued-edit')
     if (action === 'lv-queued-now') return sendNowClick(btn)
     if (action === 'lv-queued-more') { if (ev.target.closest('a[href]')) return; const open = !btn.classList.contains('open'); btn.classList.toggle('open', open); btn.setAttribute('aria-expanded', open ? 'true' : 'false'); return }
-    if (action === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) inp.click(); return }
+    if (action === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) openPicker(inp.dataset.sid); return }
     if (action === 'att-remove') return removeAttachment(btn.dataset.lid)
     if (action === 'att-retry') return retryAttachment(btn.dataset.lid)
     if (action === 'att-open') return openAttachment(btn)

package/ui/ask.js

@@ -238,7 +238,7 @@ export function projectHeadHtml(p, { esc, icon = () => '', switcher = false, edi
   const sc = (p && p.scope) || {}
   const repos = (sc.repoNames && sc.repoNames.length ? sc.repoNames : sc.repos) || []
   const keys = { 'p-title': (sc.emoji ? sc.emoji + ' ' : '') + scopeName(sc), 'p-sub': [sc.kind === 'project' ? (repos.length ? repos.join(', ') : null) : (sc.sub ? 'folder ' + sc.sub : null), (sc.machines || []).length ? 'on ' + sc.machines.join(', ') : null, p && p.sessionCount != null ? p.sessionCount + (p.sessionCount === 1 ? ' session' : ' sessions') : null].filter(Boolean).join(' · ') }
-  return { html: '<div class="pagehead proj-head"><div class="proj-head-main"><div class="proj-kicker">' + icon('folder') + '<span>Project</span></div>' + (switcher ? '<h1 class="proj-title"><button type="button" class="proj-switch" data-action="project-ask-menu" aria-haspopup="menu" aria-expanded="false" data-tip="Ask about another project or repo"><span data-qt="p-title"></span>' + icon('chevron-down') + '</button></h1>' : '<h1 data-qt="p-title"></h1>') + '<div class="sub" data-qt="p-sub"></div></div>' +
+  return { html: '<div class="pagehead proj-head"><div class="proj-head-main"><div class="proj-kicker">' + icon('folder') + '<span>Project</span></div>' + (switcher ? '<h1 class="proj-title"><button type="button" class="proj-switch" data-action="project-ask-menu" aria-haspopup="menu" aria-expanded="false" data-tip="Ask about another project or repo"><span data-qt="p-title"></span>' + icon('chevron-down') + '</button></h1>' : '<h1 data-qt="p-title"></h1>') + '<div class="sub" data-qt="p-sub"></div><div class="proj-review-slot" id="projDecReview"></div></div>' + // 1k: decisions to review, filled once the log loads
     // 0.9.12: Edit (the project's own menu: Rename…, Edit repos…, Delete project) where projects can change
     (edit && sc.kind === 'project' ? '<button type="button" class="btn proj-edit" data-action="project-manage" data-project="' + esc(edit) + '" aria-haspopup="menu" aria-expanded="false" data-tip="Rename, edit repos, delete">' + icon('pencil') + '<span>Edit</span></button>' : '') + '</div>', keys }
 }

package/ui/decisions.js

@@ -12,22 +12,44 @@ export const STATUS_WORD = { proposed: 'Proposed', accepted: 'Accepted', rejecte
 
 // A checkpoint's decisions, under the newest checkpoint in the session panel.
 // log: the session's decisions from its repo's log, when loaded ({ <text norm>: { id, status } }).
-export function decidedListHtml(decided, { esc = escD, log = null, repoId = null } = {}) {
+// 1k: a proposed one is reviewed right here (Accept / Reject / Edit, the log page's API and gate). trusted: false on a
+// device that may look but not change the log (the buttons show disabled, with the reason). editing: the id being edited.
+export function decidedListHtml(decided, { esc = escD, log = null, repoId = null, trusted = true, editing = null, may = true } = {}) {
   const list = Array.isArray(decided) ? decided : []
   if (!list.length) return ''
   const norm = (t) => String(t || '').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, ' ').trim()
   const rows = list.map((d) => {
     const hit = log && log[norm(d.text)]
-    const st = hit ? '<span class="dec-st dec-st-' + esc(hit.status) + '">' + STATUS_SHAPE[hit.status] + ' ' + esc(STATUS_WORD[hit.status]) + '</span>' : ''
-    return '<li class="dec-row">' + (hit ? '<span class="dec-id">' + esc(hit.id) + '</span> ' : '') + '<span class="dec-text">' + esc(d.text) + '</span>' + st +
+    const st = hit ? '<span class="dec-st dec-st-' + esc(hit.status) + '"><span aria-hidden="true">' + STATUS_SHAPE[hit.status] + '</span> ' + esc(STATUS_WORD[hit.status]) + '</span>' : ''
+    if (hit && editing === hit.id) return '<li class="dec-row" id="decp-' + esc(hit.id) + '"><span class="dec-id">' + esc(hit.id) + '</span>' + editForm({ ...hit, repo: hit.repo || repoId }, esc) + '</li>'
+    const rp = (hit && (hit.repo || repoId)) || ''
+    const btn = (act, label, cls) => '<button type="button" class="btn' + cls + '" data-action="dec-act" data-act="' + act + '" data-id="' + esc(hit.id) + '" data-repo="' + esc(rp) + '"' + offAttrs(trusted, esc) + '>' + label + '</button>'
+    const acts = hit && hit.status === 'proposed' && may ? '<div class="dec-acts dec-acts-panel">' + btn('accept', 'Accept', ' primary') + btn('reject', 'Reject', '') +
+      '<button type="button" class="btn" data-action="dec-edit" data-id="' + esc(hit.id) + '" data-repo="' + esc(rp) + '"' + offAttrs(trusted, esc) + '>Edit</button></div>' : ''
+    return '<li class="dec-row"' + (hit ? ' id="decp-' + esc(hit.id) + '"' : '') + '>' + (hit ? '<span class="dec-id">' + esc(hit.id) + '</span> ' : '') + '<span class="dec-text">' + esc(hit && hit.edited ? hit.text : d.text) + '</span>' + st +
       (d.why ? '<div class="dec-why">' + esc(d.why) + '</div>' : '') +
       (d.alternatives && d.alternatives.length ? '<div class="dec-alt">Over: ' + d.alternatives.map(esc).join(' · ') + '</div>' : '') +
-      '<div class="dec-src">' + esc(SOURCE_WORDS[d.source] || SOURCE_WORDS.agent) + '</div></li>'
+      '<div class="dec-src">' + esc(SOURCE_WORDS[d.source] || SOURCE_WORDS.agent) + '</div>' + acts + '</li>'
   }).join('')
   const link = repoId ? '<a class="linkish dec-open" href="' + esc(decisionsHref(repoId)) + '">Decision log →</a>' : ''
   return '<ul class="dec-list">' + rows + '</ul>' + link
 }
 
+// 1b: one quiet line in the session panel: the session started with its repo's decisions (shape plus
+// words), or wasn't given them because Claude Code skipped Leftoff's SessionStart (the why in the tip).
+export function decisionsGivenHtml(s, { esc = escD, when = (iso) => String(iso || '').slice(0, 16).replace('T', ' ') } = {}) {
+  if (!s) return ''
+  const g = s.decisionsGiven
+  if (g && g.n > 0) {
+    const words = g.via === 'command' ? 'Given ' + g.n + ' decision' + (g.n === 1 ? '' : 's') + ' with /cp-decisions' : 'Started with ' + g.n + ' decision' + (g.n === 1 ? '' : 's')
+    const tip = (g.via === 'command' ? 'You ran /cp-decisions' : 'Leftoff added the repo’s accepted decisions when the session started') + (g.at ? ' · ' + when(g.at) : '') + '. Only accepted decisions are given.'
+    return '<p class="dec-given" data-tip="' + esc(tip) + '"><span class="dec-given-i" aria-hidden="true">●</span> ' + esc(words) + '</p>'
+  }
+  const m = s.decisionsMissed
+  if (m && m.n > 0) return '<p class="dec-given dec-missed" data-tip="' + esc(m.tip || '') + '"><span class="dec-given-i" aria-hidden="true">◌</span> ' + esc(m.label || ('Not given its repo’s ' + m.n + ' decisions')) + ' <span class="dec-given-how">· type <code>/cp-decisions</code></span></p>'
+  return ''
+}
+
 // ------------------------------------------------------------ the decision log (timeline)
 
 // A route's scope: "#/decisions/gh:acme/web" (a repo) or "#/decisions/project:acme" (a project's repos, merged).
@@ -50,6 +72,9 @@ export function timelineRows(decisions, { all = false } = {}) {
 }
 
 function sessionBit(d, esc) {
+  // testplan Part 3: proposed from a failed check of a test plan: the plan is where it came from
+  const tp = /^testplan:(tp_[0-9a-f]{16})#(c\d+)$/.exec(String(d.checkpointId || ''))
+  if (tp) return '<a class="linkish dec-sess" href="#/testplan/' + esc(tp[1]) + '">From a test plan (check ' + esc(tp[2].slice(1)) + ')</a>'
   const s = d.session
   if (!s || !s.id) return ''
   const title = s.title || 'its session'
@@ -72,16 +97,25 @@ function editForm(d, esc) {
     '<div class="dec-acts"><button type="submit" class="btn primary">Save</button><button type="button" class="btn" data-action="dec-cancel" data-id="' + esc(d.id) + '">Cancel</button></div></form>'
 }
 
+// 1h: POST /v1/decisions/action is trustedOnly: on a paired device without Trust my paired devices the
+// buttons show, disabled, with this tip, rather than failing on a click.
+export const DEC_TRUST_TIP = 'Changing the decision log from another device is off. On a Mac, turn on Settings → Privacy & security → Trust my paired devices.'
+const offAttrs = (trusted, esc) => (trusted === false ? ' disabled aria-disabled="true" data-tip="' + esc(DEC_TRUST_TIP) + '"' : '')
+
 // One decision. may: you can change it (the board's usual gate); editing: its id is being edited.
-export function decisionItemHtml(d, { esc = escD, byId = new Map(), may = true, editing = null, multi = false, review = false } = {}) {
+// trusted (1h): false on a device that may look but not change the log. edit: false hides Edit (the viewer).
+// replaces (1g): an id this one may be confirmed to replace (a walkthrough step departs from it).
+export function decisionItemHtml(d, { esc = escD, byId = new Map(), may = true, editing = null, multi = false, review = false, trusted = true, edit = true, replaces = null } = {}) {
   const repo = multi && d.repoLabel ? '<span class="dec-repo">' + esc(d.repoLabel) + '</span>' : ''
   const head = '<div class="dec-h"><span class="dec-date">' + esc(day(d.createdAt)) + '</span><span class="dec-id">' + esc(d.id) + '</span>' + repo + statusBit(d, esc) + '</div>'
   if (editing === d.id) return '<li class="dec-item" id="dec-' + esc(d.id) + '">' + head + editForm(d, esc) + '</li>'
   const sug = (d.suggests || []).map((id) => { const o = byId.get(id); return o ? '<div class="dec-sug"><span>Changes <button type="button" class="dec-chip" data-action="dec-show" data-id="' + esc(id) + '">' + esc(id) + '</button>: ' + esc(o.text) + '</span>' +
-    (may ? '<span class="dec-acts"><button type="button" class="btn" data-action="dec-link" data-id="' + esc(d.id) + '" data-to="' + esc(id) + '" data-repo="' + esc(d.repo) + '">Confirm it replaces ' + esc(id) + '</button><button type="button" class="btn" data-action="dec-act" data-act="dismiss" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '">Not related</button></span>' : '') + '</div>' : '' }).join('')
-  const btn = (act, label, cls = '') => '<button type="button" class="btn' + cls + '" data-action="dec-act" data-act="' + act + '" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '">' + label + '</button>'
-  const acts = !may ? '' : review ? '<div class="dec-acts">' + btn('accept', 'Accept', ' primary') + btn('reject', 'Reject') + '<button type="button" class="btn" data-action="dec-edit" data-id="' + esc(d.id) + '">Edit</button></div>'
-    : '<div class="dec-acts dec-acts-quiet">' + (d.status === 'rejected' ? btn('reopen', 'Review again') : '<button type="button" class="linkish" data-action="dec-edit" data-id="' + esc(d.id) + '">Edit</button>') + '</div>'
+    (may ? '<span class="dec-acts"><button type="button" class="btn" data-action="dec-link" data-id="' + esc(d.id) + '" data-to="' + esc(id) + '" data-repo="' + esc(d.repo) + '"' + offAttrs(trusted, esc) + '>Confirm it replaces ' + esc(id) + '</button><button type="button" class="btn" data-action="dec-act" data-act="dismiss" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '"' + offAttrs(trusted, esc) + '>Not related</button></span>' : '') + '</div>' : '' }).join('')
+  const btn = (act, label, cls = '') => '<button type="button" class="btn' + cls + '" data-action="dec-act" data-act="' + act + '" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '"' + offAttrs(trusted, esc) + '>' + label + '</button>'
+  const editBtn = (cls) => edit ? '<button type="button" class="' + cls + '" data-action="dec-edit" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '"' + offAttrs(trusted, esc) + '>Edit</button>' : ''
+  const link = replaces && !(d.supersedes || []).includes(replaces) ? '<button type="button" class="btn" data-action="dec-link" data-id="' + esc(d.id) + '" data-to="' + esc(replaces) + '" data-repo="' + esc(d.repo) + '"' + offAttrs(trusted, esc) + '>Confirm it replaces ' + esc(replaces) + '</button>' : ''
+  const acts = !may && !link ? '' : !may ? '<div class="dec-acts">' + link + '</div>' : review ? '<div class="dec-acts">' + btn('accept', 'Accept', ' primary') + btn('reject', 'Reject') + editBtn('btn') + link + '</div>'
+    : '<div class="dec-acts dec-acts-quiet">' + (d.status === 'rejected' ? btn('reopen', 'Review again') : editBtn('linkish')) + link + '</div>'
   return '<li class="dec-item dec-' + esc(d.status) + '" id="dec-' + esc(d.id) + '">' + head +
     '<div class="dec-text">' + esc(d.text) + (d.edited ? ' <span class="faint" data-tip="' + esc('Edited · was: ' + ((d.original && d.original.text) || '')) + '">(edited)</span>' : '') + '</div>' +
     (d.why ? '<div class="dec-why">' + esc(d.why) + '</div>' : '') +
@@ -91,10 +125,10 @@ export function decisionItemHtml(d, { esc = escD, byId = new Map(), may = true,
 }
 
 // The storage choice (one per project). Off by default: the log stays in Leftoff's folder.
-export function storageChoiceHtml(project, { esc = escD, may = true } = {}) {
+export function storageChoiceHtml(project, { esc = escD, may = true, trusted = true } = {}) {
   if (!project) return '<p class="faint dec-local">This repo isn’t in a project, so its log stays in Leftoff only.</p>'
   const on = !!project.inRepo
-  const opt = (v, label) => '<button type="button" class="sask-opt" data-action="dec-store" data-project="' + esc(project.id) + '" data-on="' + v + '" aria-pressed="' + (on === v) + '"' + (may ? '' : ' disabled') + '>' + label + '</button>'
+  const opt = (v, label) => '<button type="button" class="sask-opt" data-action="dec-store" data-project="' + esc(project.id) + '" data-on="' + v + '" aria-pressed="' + (on === v) + '"' + (trusted === false ? offAttrs(false, esc) : may ? '' : ' disabled') + '>' + label + '</button>'
   return '<div class="dec-store"><div class="dec-store-h">Keep decision log in this repo</div>' +
     '<div class="sask-scope dec-store-opts" role="group" aria-label="Keep decision log in this repo">' + opt(false, 'Leftoff only') + opt(true, 'Also in each repo') + '</div>' +
     '<p class="faint">' + (on ? 'Accepted decisions are written to ' + esc(project.file || 'docs/DECISIONS.md') + ' in each repo of ' + esc(project.name) + ', between Leftoff’s markers, on a Mac with a checkout. Never staged or committed: you commit it or not.'
@@ -109,25 +143,44 @@ export function decisionsPageHtml(v, ui = {}, { esc = escD } = {}) {
   const { review, rows, hidden } = timelineRows(list, { all: !!ui.all })
   const sc = (v && v.scope) || {}
   const name = sc.kind === 'project' ? sc.name : sc.label
-  const opts = { esc, byId, may: ui.may !== false, editing: ui.editing || null, multi }
+  const opts = { esc, byId, may: ui.may !== false, editing: ui.editing || null, multi, trusted: ui.trusted !== false }
   let h = '<a class="back" href="' + (sc.kind === 'project' ? '#/project/' + esc(encodeURIComponent(sc.id)) : '#/') + '">← ' + (sc.kind === 'project' ? esc(name) : 'All sessions') + '</a>'
   h += '<header class="dec-head"><h1>Decisions <span class="faint">· ' + esc(name || '') + '</span></h1>' +
     (multi ? '<p class="faint">' + v.repos.map((r) => esc(r.label)).join(' · ') + '</p>' : '') + '</header>'
-  if (v && (v.project || sc.kind === 'repo')) h += '<section class="proj-sec">' + storageChoiceHtml(v.project, { esc, may: ui.may !== false && ui.trusted !== false }) + '</section>'
+  if (ui.trusted === false) h += '<p class="faint dec-trust"><span aria-hidden="true">◌</span> View only on this device. ' + esc(DEC_TRUST_TIP) + '</p>' // 1h: the reason in words too (a phone shows no tips)
+  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. 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></div>'
+    '<button type="button" class="btn" data-action="dec-copy">Copy as Markdown</button>' + testplanLinkHtml(sc, { esc, cls: 'btn' }) + '</div>'
   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>' : '<p class="faint">' + (review.length ? 'Nothing accepted yet.' : 'No decisions yet. They’re proposed here when a checkpoint sees one: a question you answered, a plan you approved, a correction.') + '</p>') + '</section>'
   return '<div class="proj dec-page">' + h + '</div>'
 }
 
+// testplan Part 3: the way in to a test plan of the scope's merged PRs (a project, or a repo's log)
+export function testplanLinkHtml(sc, { esc = escD, cls = 'btn' } = {}) {
+  if (!sc) return ''
+  const token = sc.kind === 'project' ? sc.id : sc.label || sc.id
+  if (!token) return ''
+  return '<a class="' + cls + ' tp-open" href="#/testplan/new?scope=' + esc(encodeURIComponent(token)) + '" data-tip="A short manual test plan for the PRs merged lately">Test plan</a>'
+}
+
+// 1k: a quiet count of decisions waiting to be reviewed: a shape plus a number (and the words for a screen reader and the tip), never a colored badge alone.
+export function reviewCountHtml(n, { esc = escD, href = null, cls = '' } = {}) {
+  if (!(n > 0)) return ''
+  const words = n + ' decision' + (n === 1 ? '' : 's') + ' to review'
+  const inner = '<span aria-hidden="true">◌</span> ' + n
+  return href ? '<a class="dec-rc ' + cls + '" href="' + esc(href) + '" data-tip="' + esc(words) + '" aria-label="' + esc(words) + '">' + inner + '<span class="dec-rc-w"> to review</span></a>'
+    : '<span class="dec-rc ' + cls + '" role="img" data-tip="' + esc(words) + '" aria-label="' + esc(words) + '">' + inner + '</span>'
+}
+
 // The project page's short Decisions section: counts, the storage choice, the way in.
-export function projectDecisionsHtml(v, { esc = escD, may = true, scopeArg = '' } = {}) {
+export function projectDecisionsHtml(v, { esc = escD, may = true, trusted = true, scopeArg = '' } = {}) {
   if (!v) return ''
   const list = v.decisions || []
   const cur = list.filter((d) => d.status === 'accepted').length, rev = list.filter((d) => d.status === 'proposed').length
   return '<section class="proj-sec dec-proj" id="projDecisions"><h2>Decisions <span class="count">' + cur + '</span></h2>' +
     '<p>' + (cur ? cur + ' current' : 'None accepted yet') + (rev ? ' · <strong>' + rev + ' to review</strong>' : '') + ' · <a class="linkish" href="' + esc(decisionsHref(scopeArg)) + '">Open the timeline →</a></p>' +
-    storageChoiceHtml(v.project, { esc, may }) + '</section>'
+    '<div class="dec-acts">' + testplanLinkHtml(v.scope, { esc }) + '</div>' +
+    storageChoiceHtml(v.project, { esc, may, trusted }) + (trusted === false ? '<p class="faint dec-trust"><span aria-hidden="true">◌</span> View only on this device. ' + esc(DEC_TRUST_TIP) + '</p>' : '') + '</section>'
 }