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

package/ui/app.css

@@ -5396,3 +5396,99 @@ code .file-ref-off { font-size: inherit; }
 .sub .s-hooks-ring { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed currentColor; box-sizing: border-box; flex: none; }
 .fs-head .sub > .s-hooks { height: 22px; vertical-align: middle; }
 .fs-side.is-scrolled .fs-head .sub > .s-hooks { display: none; }
+/* 2026-11-03 which hooks were skipped and why: the same note, its words cut short on a narrow header (the whole in its tip) */
+.sub .s-hooks-skip { max-width: min(420px, 100%); min-width: 0; }
+.sub .s-hooks-skip .s-hooks-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+
+/* 2026-11-03 "Let me answer prompts here" (ui/hook-fix.js): the hooks-skipped note's way out. Centered; a bottom sheet on a phone. */
+.sub .s-hooks-fix { margin-left: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--btn-line); border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
+@media (pointer: fine) { .sub .s-hooks-fix { min-height: 32px; padding: 0 9px; } }
+.sub .s-hooks-fix:hover { background: var(--btn-hover); }
+.sub .s-hooks-fix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.fs-side.is-scrolled .fs-head .sub > .s-hooks-fix { display: none; }
+.sub .s-hooks-applied .s-hooks-ring { border-style: dotted; }
+.hf-back { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
+.hf-modal { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--toast-shadow); padding: 16px 18px 14px; color: var(--text2); }
+.hf-grab { display: none; }
+.hf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
+.hf-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: normal; }
+.hf-p { margin: 8px 0; font-size: 13px; line-height: 1.5; }
+.hf-quiet { color: var(--muted); font-size: 12.5px; }
+.hf-file code, .hf-p code { font-size: 12px; overflow-wrap: anywhere; }
+.hf-file { margin: 4px 0; }
+.hf-code { margin: 6px 0; padding: 10px 12px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.45; overflow: auto; white-space: pre; color: var(--text); user-select: all; }
+.hf-mark { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: 0; box-sizing: border-box; }
+.hf-mark-ok { border-radius: 50%; background: var(--green); }
+.hf-mark-admin { border-radius: 2px; border: 1.5px solid var(--yellow); transform: rotate(45deg); }
+.hf-mark-off { border-radius: 50%; border: 1.5px dashed var(--muted); }
+.hf-ign { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
+.hf-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+.hf-acts .btn, .hf-x { min-height: 44px; min-width: 44px; justify-content: center; }
+@media (pointer: fine) { .hf-acts .btn, .hf-x { min-height: 32px; min-width: 32px; } }
+.hf-modal .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 640px) {
+  .hf-back { align-items: flex-end; padding: 0; }
+  .hf-modal { width: 100%; max-height: 88dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); }
+  .hf-grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 2px auto 8px; }
+  .hf-acts { justify-content: stretch; }
+  .hf-acts .btn { flex: 1 1 auto; }
+}
+
+/* 2026-11-03 decision memory */
+.dec-list { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 10px; }
+.dec-row { font-size: 13.5px; line-height: 1.45; color: var(--text); }
+.dec-id { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text2); }
+.dec-why, .dec-alt, .dec-src { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
+.dec-src { color: var(--muted, var(--text2)); }
+.dec-st { margin-left: 6px; font-size: 12px; color: var(--text2); white-space: nowrap; }
+.dec-open { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
+
+.dec-page .dec-head h1 { margin: 4px 0 2px; }
+.dec-tl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
+.dec-item { position: relative; padding: 12px 0 12px 18px; border-left: 2px solid var(--line); margin-left: 6px; }
+.dec-item::before { content: ''; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text2); box-sizing: border-box; }
+.dec-item.dec-accepted::before { background: var(--text2); }
+.dec-item.dec-superseded, .dec-item.dec-rejected { opacity: .78; }
+.dec-item.dec-superseded::before { border-color: var(--line-strong, var(--line)); }
+.dec-item.dec-rejected .dec-text { text-decoration: line-through; text-decoration-thickness: 1px; }
+.dec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--text2); }
+.dec-date { font-variant-numeric: tabular-nums; }
+.dec-repo { padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; }
+.dec-item .dec-st { margin-left: 0; }
+.dec-item .dec-text { font-size: 15px; line-height: 1.45; margin-top: 4px; color: var(--text); overflow-wrap: anywhere; }
+.dec-meta { font-size: 12.5px; color: var(--text2); margin-top: 4px; }
+.dec-chains { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--text2); }
+.dec-chip { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; min-height: 24px; cursor: pointer; position: relative; }
+.dec-chip::after { content: ''; position: absolute; inset: -10px -4px; }
+.dec-chip:hover { border-color: var(--text2); }
+.dec-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 13px; }
+.dec-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.dec-acts .btn, .dec-acts .linkish { min-height: 44px; }
+.dec-acts-quiet { margin-top: 0; }
+.dec-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 4px; }
+.dec-ctl .sask-opt, .dec-ctl .btn, .dec-store-opts .sask-opt { min-height: 44px; }
+.dec-store-h { font-weight: 600; margin-bottom: 6px; }
+.dec-store-opts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+.dec-store p { margin: 8px 0 0; max-width: 62ch; }
+.dec-edit { display: grid; gap: 8px; margin-top: 8px; max-width: 640px; }
+.dec-edit label { display: grid; gap: 4px; font-size: 12.5px; color: var(--text2); }
+.dec-in { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); min-height: 44px; box-sizing: border-box; width: 100%; }
+@media (pointer: coarse) { .dec-in { font-size: 16px; } }
+.dec-in:focus-visible { outline: 2px solid var(--accent, var(--text2)); outline-offset: 1px; }
+.dec-flash { background: color-mix(in srgb, var(--text2) 10%, transparent); transition: background .6s; }
+@media (prefers-reduced-motion: reduce) { .dec-flash { transition: none; } }
+.dec-proj p { margin: 4px 0 10px; }
+
+.wt-decs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
+.wt-dec { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 8px; font-weight: 400; }
+@media (pointer: coarse) { .wt-dec { min-height: 44px; } }
+.wt-dec .wt-dec-id { font-weight: 600; }
+.wt-dec .wt-dec-t { font: 12.5px/1.3 var(--sans, system-ui, sans-serif); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch; }
+.wt-dec-gone { border-style: dashed; }
+.wt-dec-w { font: 12px/1 var(--sans, system-ui, sans-serif); color: var(--text2); }
+.dec-chainview { margin-top: 4px; }
+
+.dv-isdec .dv-dl { display: none !important; }
+.dec-ctl .sask-opt { border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: transparent; color: var(--text2); cursor: pointer; }
+.dec-ctl .sask-opt[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong, var(--text2)); }
+@media (min-width: 700px) { .dv-isdec .dv-sheet { max-width: 760px; height: auto; max-height: 80vh; margin-left: auto; margin-right: auto; } }

package/ui/app.js

@@ -39,6 +39,7 @@ import { createScrollKeep } from './scroll-keep.js' // 0.9.18 every scroll box k
 import { needsLine, needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml, askDocked, askDockHtml, askSlimHtml, askRows, askBottom } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
+import { hooksFixButtonHtml, openHookFix } from './hook-fix.js' // 2026-11-03 "Let me answer prompts here"
 import { crumbHtml, metaLineHtml, detailsHtml, detailsOpen, rememberDetails, branchTileHtml } from './session-head.js' // 0.9.11: the session page's smaller head
 import { projectHref, threadHref, projectPageHtml, askPageHtml, threadHtml as askThreadHtml, recentAsksHtml, fillAsk, pickupState, paletteProjectItems, scopeOfSession, askHref, sessionAskHtml, sessionAskScope, sessionAskToken, scopeHref, pickListHtml, pickFull, PICK_MAX, ARCHIVE_UNDO_MS } from './ask.js' // Ask about a project (roadmap #4)
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash, prCopyClick } from './prs.js'
@@ -73,6 +74,7 @@ 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 { 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
@@ -471,7 +473,23 @@ const statusPill = (s) => { if (ownerOffline(s)) return offlinePill(s); const st
 // 2026-11-03 Claude Code's own hook events never came for this session (only the mod's), so its turns
 // are read from the transcript: a quiet note, a dashed ring plus words, the why in the tip
 const HOOKS_QUIET_TIP = 'Claude Code’s hooks aren’t reaching Leftoff for this session, so its prompts and turn ends are read from the transcript instead (a few seconds late). Restarting Claude Code in this folder, or leftoff doctor, usually brings them back.'
-const hooksQuietHtml = (s) => (s && s.hooksQuiet && !s.endedAt ? '<span class="s-hooks" data-tip="' + esc(HOOKS_QUIET_TIP) + '"><span class="s-hooks-ring" aria-hidden="true"></span>hooks not reporting</span>' : '')
+// 2026-11-03 and when Leftoff knows which (Claude Code passed them over: a plugin seated ahead of Leftoff's
+// sends them on past it), the note says which and why; the daemon writes the words (src/hook-skips.js)
+const hooksQuietHtml = (s) => {
+  if (!s || s.endedAt) return ''
+  const k = s.hooksSkipped
+  if (k && k.label) return '<span class="s-hooks s-hooks-skip' + (k.applied ? ' s-hooks-applied' : '') + '" data-tip="' + esc(k.tip || k.label) + '"><span class="s-hooks-ring" aria-hidden="true"></span><span class="s-hooks-t">' + esc(k.label) + '</span></span>' + hooksFixButtonHtml(s, { esc }) // 2026-11-03 applied: "restart Claude Code to apply", no button
+  return s.hooksQuiet ? '<span class="s-hooks" data-tip="' + esc(HOOKS_QUIET_TIP) + '"><span class="s-hooks-ring" aria-hidden="true"></span>hooks not reporting</span>' : ''
+}
+// the note's button: the sheet with the managed-settings lines (ui/hook-fix.js)
+document.addEventListener('click', (e) => {
+  const b = e.target.closest && e.target.closest('[data-hookfix]')
+  if (!b) return
+  e.preventDefault()
+  const sid = b.dataset.hookfix
+  const s = (state.session && state.session.id === sid ? state.session : null) || (state.sessions || []).find((x) => x.id === sid) || { id: sid }
+  openHookFix({ session: s, from: b, api, esc, toast, thisMachine: state.health && state.health.machine })
+})
 const offlinePill = (s) => { const w = offlineLine(s); return '<span class="pill s-offline" data-tip="' + esc(offlineTip(s, w, { was: offlineWas(s) })) + '">' + esc(w) + '</span>' }
 
 const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
@@ -2923,6 +2941,8 @@ 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>'
+  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 > 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>'
@@ -4426,6 +4446,131 @@ function cpHeadLine(cp) {
   return '<div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><span class="trig">' + esc(cp.trigger) + '</span><span>' + esc(ago(cp.createdAt)) + '</span>' +
     (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: {} }
+// 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
+  if (!repo || decisionsUi.loadedRepo[repo]) return
+  decisionsUi.loadedRepo[repo] = true
+  api('GET', '/v1/decisions?repo=' + encodeURIComponent(repo), undefined, { timeoutMs: 8000 }).then((v) => {
+    const norm = (t) => String(t || '').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, ' ').trim()
+    const by = {}
+    for (const d of v.decisions || []) if (d.sessionId === s.id) { by[norm(d.text)] = d; if (d.original) by[norm(d.original.text)] = d }
+    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 })
+  }).catch(() => { decisionsUi.loadedRepo[repo] = false })
+}
+// ---- the decision log page (#/decisions/<repo id> or #/decisions/project:<id>)
+async function viewDecisions(arg) {
+  const raw = decodeURIComponent(arg || '')
+  if (decisionsUi.scope !== raw) { decisionsUi.scope = raw; decisionsUi.view = null; decisionsUi.editing = null }
+  decisionsUi.view = await api('GET', '/v1/decisions?' + decisionScope(raw).api)
+  const want = state.route && state.route.params && state.route.params.get('d')
+  if (want && (decisionsUi.view.decisions || []).some((d) => d.id === want && (d.status === 'superseded' || d.status === 'rejected'))) decisionsUi.all = true
+  paintDecisions()
+  if (want) { const el = document.getElementById('dec-' + want); if (el) { el.scrollIntoView({ block: 'center' }); el.classList.add('dec-flash'); setTimeout(() => el.classList.remove('dec-flash'), 1600) } }
+}
+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 })
+  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 })
+    decisionsUi.loadedRepo = {}
+    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)) }
+}
+document.addEventListener('click', async (ev) => {
+  const btn = ev.target.closest && ev.target.closest('[data-action^="dec-"]')
+  if (!btn || btn.tagName === 'FORM') return
+  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-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') {
+    const el = document.getElementById('dec-' + btn.dataset.id)
+    if (el) { el.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }); el.classList.add('dec-flash'); setTimeout(() => el.classList.remove('dec-flash'), 1600); return }
+    if (btn.dataset.repo) { location.hash = '#/decisions/' + btn.dataset.repo + '?d=' + encodeURIComponent(btn.dataset.id) }
+    return
+  }
+  if (a === 'dec-store') {
+    const on = btn.dataset.on === 'true'
+    try {
+      await api('POST', '/v1/projects/' + encodeURIComponent(btn.dataset.project) + '/decision-log', { inRepo: on })
+      toast(on ? 'Accepted decisions now go into each repo’s docs/DECISIONS.md' : 'The decision log stays in Leftoff; repo files are left as they are')
+      if (state.route && state.route.name === 'decisions') await viewDecisions(decisionsUi.scope)
+      else loadProjectDecisions(qaUi.token, true)
+    } catch (e) { toast(e.message || String(e)) }
+  }
+})
+// A walkthrough step's decision chip: the decision and its chain, in the viewer (centered; a bottom sheet on a phone)
+document.addEventListener('click', (ev) => {
+  const b = ev.target.closest && ev.target.closest('[data-action="wt-dec"]')
+  if (!b) return
+  ev.preventDefault()
+  const s = wtSession(wtUi.sid)
+  openDecisionViewer(b.dataset.repo || (s && s.decisionRepo) || '', b.dataset.id, b)
+})
+async function openDecisionViewer(repo, id, from) {
+  if (!repo || !id) return
+  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]))
+  const d = byId.get(id)
+  const el = docViewerEl()
+  el.querySelector('.dv-title').textContent = 'Decision ' + id
+  el.querySelector('.dv-dl').hidden = true
+  el.querySelector('.dv-ref').innerHTML = ''; el.querySelector('.dv-ptitle').textContent = ''
+  el.querySelector('.dv-sub').textContent = d ? (d.repoLabel || '') : 'Not in the log any more'
+  // the chain: what it replaced (oldest first), the decision, what replaced it
+  const chain = []
+  if (d) {
+    const back = []; let cur = d, guard = 0
+    while (cur && cur.supersedes && cur.supersedes.length && guard++ < 20) { const o = byId.get(cur.supersedes[0]); if (!o || back.includes(o)) break; back.unshift(o); cur = o }
+    chain.push(...back, d)
+    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>') +
+    '<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
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  const x = el.querySelector('.dv-x'); if (x) x.focus({ preventScroll: true })
+}
+document.addEventListener('submit', (ev) => {
+  const f = ev.target.closest && ev.target.closest('form[data-action="dec-save"]')
+  if (!f) return
+  ev.preventDefault()
+  const text = f.querySelector('[name="text"]').value, why = f.querySelector('[name="why"]').value
+  decisionsUi.editing = null
+  decisionAction(f.dataset.repo, f.dataset.id, 'edit', { text, why })
+})
+// The project page's Decisions section
+async function loadProjectDecisions(token, force = false) {
+  if (!token) return
+  try {
+    const v = await api('GET', '/v1/decisions?project=' + encodeURIComponent(token), undefined, { timeoutMs: 8000 })
+    decisionsUi.project = { token, v }
+    paintProjectDecisions()
+  } catch { decisionsUi.project = null }
+}
+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) })
+}
 // 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).
 function cpLatestHtml(cp, wtSid, paths) {
@@ -6629,6 +6774,7 @@ async function render() {
     else if (r.name === 'search') await viewSearch(r.q || '')
     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 === '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 }
@@ -6663,6 +6809,7 @@ async function viewProject(token) {
   const [page] = await Promise.all([api('GET', '/v1/project-page?scope=' + encodeURIComponent(token)), loadProjects()]) // 0.9.12: the projects, for the title's scope menu
   qaUi.page = page
   paintProject()
+  if (page && page.scope && page.scope.kind === 'project') loadProjectDecisions(token)
   if (fresh) window.scrollTo(0, 0)
   const r = state.route || {}
   if (sAskUi.carry && sAskUi.carry.token === token) { // 0.9.11: "Whole project" from a session's Ask carries the question here
@@ -6682,6 +6829,11 @@ function paintProject() {
   const kf = fa && fa.id === 'askIn' ? { a: fa.selectionStart, b: fa.selectionEnd } : null
   $app.innerHTML = out.html
   fillAsk($app, out.keys)
+  if (p.scope && p.scope.kind === 'project') { // 2026-11-03 decision memory: the project's log and where it's kept
+    const at = document.getElementById('projAsks')
+    if (at && !document.getElementById('projDecisionsBox')) { const box = document.createElement('div'); box.id = 'projDecisionsBox'; at.after(box) }
+    paintProjectDecisions()
+  }
   const ta = document.getElementById('askIn')
   if (ta) { ta.value = state.drafts['ask:' + ((p.scope || {}).key || '')] || ''; fitComposer(ta); if (kf && !ta.disabled) { ta.focus({ preventScroll: true }); try { ta.setSelectionRange(kf.a, kf.b) } catch {} } }
 }
@@ -9521,7 +9673,7 @@ function docViewerEl() {
   document.body.appendChild(el)
   return el
 }
-function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.querySelector('.dv-body').innerHTML = ''; const back = el.classList.contains('dv-isref') ? refUi.from : null; el.classList.remove('dv-isref'); refUi.sid = null; refUi.from = null; refUi.r = null; if (back && back.isConnected) back.focus({ preventScroll: true }) } docUi.r = null; document.documentElement.classList.remove('dv-open') }
+function closeDoc() { closeActionMenu(); endDocPrint(); const el = document.getElementById('docViewer'); if (el) { el.hidden = true; el.classList.remove('dv-isdec'); el.querySelector('.dv-body').innerHTML = ''; const back = el.classList.contains('dv-isref') ? refUi.from : null; el.classList.remove('dv-isref'); refUi.sid = null; refUi.from = null; refUi.r = null; if (back && back.isConnected) back.focus({ preventScroll: true }) } docUi.r = null; document.documentElement.classList.remove('dv-open') }
 document.addEventListener('keydown', (ev) => { if (ev.key === 'Escape' && !escInTerminal(ev) && document.getElementById('docViewer') && !document.getElementById('docViewer').hidden) closeDoc() })
 async function openDoc(sessionId, { path, plan } = {}) {
   if (!sessionId || (!path && !plan)) return

package/ui/ask.js

@@ -19,7 +19,7 @@ import { glyphState, glyphHtml } from './sglyph.js' // 0.9.14: the status glyph,
 export const projectHref = (token) => '#/project/' + encodeURIComponent(String(token || ''))
 export const threadHref = (id, machine = null) => '#/ask/' + encodeURIComponent(String(id || '')) + (machine ? '?m=' + encodeURIComponent(machine) : '')
 
-const TAG = /\[((?:s|cp)\d{1,3}|c:[0-9a-f]{7}|d:\d{4}-\d{2}-\d{2})\]/g
+const TAG = /\[((?:s|cp)\d{1,3}|c:[0-9a-f]{7}|d:\d{4}-\d{2}-\d{2}|dec:D-[0-9a-f]{4,12})\]/g
 
 // Where a citation chip goes: a session, a checkpoint on its session page,
 // a digest day; a commit has no page here (its sha is copied).
@@ -28,15 +28,17 @@ export function chipHref(c) {
   if (c.kind === 'session' && c.sessionId) return '#/s/' + encodeURIComponent(c.sessionId)
   if (c.kind === 'checkpoint' && c.sessionId) return '#/s/' + encodeURIComponent(c.sessionId) + (c.cpId ? '?cp=' + encodeURIComponent(c.cpId) : '')
   if (c.kind === 'digest' && c.date) return '#/digest/' + encodeURIComponent(c.date)
+  if (c.kind === 'decision' && c.repo && c.id) return '#/decisions/' + String(c.repo).replace(/[^\w:./@-]/g, encodeURIComponent) + '?d=' + encodeURIComponent(c.id) // 2026-11-03
   return null
 }
 export function chipText(c) {
   if (!c) return ''
   if (c.kind === 'commit') return (c.short || String(c.sha || '').slice(0, 7)) + (c.label ? ' ' + c.label : '')
   if (c.kind === 'digest') return 'Digest ' + (c.date || '')
+  if (c.kind === 'decision') return (c.id || 'Decision') + (c.label ? ' ' + c.label : '')
   return c.label || (c.kind === 'checkpoint' ? 'Checkpoint' : 'Session')
 }
-const KIND_ICON = { session: 'history', checkpoint: 'check', commit: 'copy', digest: 'newspaper' }
+const KIND_ICON = { session: 'history', checkpoint: 'check', commit: 'copy', digest: 'newspaper', decision: 'route' }
 
 // One chip. Its words are filled in as text (data-qt).
 export function chipHtml(c, key, { esc, icon = () => '', n = null } = {}) {

package/ui/decisions.js

@@ -0,0 +1,133 @@
+// Decision memory (2026-11-03): pure builders for the board. A checkpoint's
+// Decided list (the session panel), a repo's or a project's decision log (the
+// timeline), and the decision chips a walkthrough step cites. app.js wires
+// them; unit-tested in test/unit/decisions-ui-1103.test.mjs.
+
+const escD = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+const day = (iso) => String(iso || '').slice(0, 10)
+export const SOURCE_WORDS = { asked: 'You answered', plan: 'Plan approved', correction: 'Your correction', agent: 'Agent chose' }
+// Status as a shape and a word, never color alone.
+export const STATUS_SHAPE = { proposed: '◌', accepted: '●', rejected: '✕', superseded: '↻' }
+export const STATUS_WORD = { proposed: 'Proposed', accepted: 'Accepted', rejected: 'Rejected', superseded: 'Superseded' }
+
+// 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 } = {}) {
+  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 +
+      (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>'
+  }).join('')
+  const link = repoId ? '<a class="linkish dec-open" href="' + esc(decisionsHref(repoId)) + '">Decision log →</a>' : ''
+  return '<ul class="dec-list">' + rows + '</ul>' + link
+}
+
+// ------------------------------------------------------------ the decision log (timeline)
+
+// A route's scope: "#/decisions/gh:acme/web" (a repo) or "#/decisions/project:acme" (a project's repos, merged).
+export function decisionScope(arg) {
+  const a = String(arg || '')
+  if (a.startsWith('project:')) return { project: a.slice(8), repo: null, api: 'project=' + encodeURIComponent(a.slice(8)) }
+  return { project: null, repo: a, api: 'repo=' + encodeURIComponent(a) }
+}
+export const decisionsHref = (scope) => '#/decisions/' + encodeURIComponent(scope).replace(/%3A/gi, ':').replace(/%2F/gi, '/')
+
+// What the timeline shows: current decisions (accepted), oldest first, unless you asked for all of them
+// (superseded and rejected too). Proposed ones are always above, to review.
+export function timelineRows(decisions, { all = false } = {}) {
+  const list = Array.isArray(decisions) ? decisions : []
+  return {
+    review: list.filter((d) => d.status === 'proposed'),
+    rows: list.filter((d) => d.status === 'accepted' || (all && (d.status === 'superseded' || d.status === 'rejected'))),
+    hidden: list.filter((d) => d.status === 'superseded' || d.status === 'rejected').length,
+  }
+}
+
+function sessionBit(d, esc) {
+  const s = d.session
+  if (!s || !s.id) return ''
+  const title = s.title || 'its session'
+  return '<a class="linkish dec-sess" href="#/s/' + esc(encodeURIComponent(s.id)) + '">From ' + esc(title) + '</a>' +
+    (s.pr && s.pr.url && /^https:\/\//.test(s.pr.url) ? ' · <a class="linkish dec-pr" href="' + esc(s.pr.url) + '" target="_blank" rel="noopener">PR' + (s.pr.number ? ' #' + esc(s.pr.number) : '') + '</a>' : '')
+}
+function chainBit(d, byId, esc) {
+  const out = []
+  for (const id of d.supersedes || []) { const o = byId.get(id); out.push('<span class="dec-chain">Replaces <button type="button" class="dec-chip" data-action="dec-show" data-id="' + esc(id) + '">' + esc(id) + '</button>' + (o ? ' (' + esc(day(o.createdAt)) + ')' : '') + '</span>') }
+  if (d.supersededBy) out.push('<span class="dec-chain">Superseded by <button type="button" class="dec-chip" data-action="dec-show" data-id="' + esc(d.supersededBy) + '">' + esc(d.supersededBy) + '</button> on ' + esc(day(d.supersededAt)) + '</span>')
+  return out.length ? '<div class="dec-chains">' + out.join('') + '</div>' : ''
+}
+function statusBit(d, esc) {
+  return '<span class="dec-st dec-st-' + esc(d.status) + '"><span aria-hidden="true">' + STATUS_SHAPE[d.status] + '</span> ' + esc(STATUS_WORD[d.status]) + '</span>'
+}
+function editForm(d, esc) {
+  return '<form class="dec-edit" data-action="dec-save" data-id="' + esc(d.id) + '" data-repo="' + esc(d.repo) + '">' +
+    '<label>Decision<input class="dec-in" name="text" maxlength="240" value="' + esc(d.text) + '" autocomplete="off"></label>' +
+    '<label>Why<input class="dec-in" name="why" maxlength="240" value="' + esc(d.why || '') + '" autocomplete="off"></label>' +
+    '<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>'
+}
+
+// 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 } = {}) {
+  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>'
+  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>' : '') +
+    (d.alternatives && d.alternatives.length ? '<div class="dec-alt">Over: ' + d.alternatives.map(esc).join(' · ') + '</div>' : '') +
+    chainBit(d, byId, esc) + sug +
+    '<div class="dec-meta"><span class="dec-src">' + esc(SOURCE_WORDS[d.source] || SOURCE_WORDS.agent) + '</span>' + (sessionBit(d, esc) ? ' · ' + sessionBit(d, esc) : '') + '</div>' + acts + '</li>'
+}
+
+// The storage choice (one per project). Off by default: the log stays in Leftoff's folder.
+export function storageChoiceHtml(project, { esc = escD, may = 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>'
+  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.'
+      : 'The log stays in Leftoff’s folder, shared by your Macs. Turn this on to also write accepted decisions into each repo’s ' + esc(project.file || 'docs/DECISIONS.md') + '.') + '</p></div>'
+}
+
+// The whole page. v: GET /v1/decisions. ui: { all, editing, may }
+export function decisionsPageHtml(v, ui = {}, { esc = escD } = {}) {
+  const list = (v && v.decisions) || []
+  const byId = new Map(list.map((d) => [d.id, d]))
+  const multi = ((v && v.repos) || []).length > 1
+  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 }
+  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 (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>'
+  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>'
+}
+
+// The project page's short Decisions section: counts, the storage choice, the way in.
+export function projectDecisionsHtml(v, { esc = escD, may = 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>'
+}

package/ui/hook-fix.js

@@ -0,0 +1,109 @@
+// 2026-11-03 "Let me answer prompts here": the hooks-skipped note's way out.
+// Claude Code's Security default runs ahead of the plugins you install (Team or
+// Enterprise, managed settings, a managed MCP file) and sends Stop and
+// permission prompts on past Leftoff. Claude Code ignores appendPlugins in
+// your own ~/.claude/settings.json while it's seated (2.1.317), so the sheet
+// shows the managed-settings lines and where they go, with Copy; Leftoff
+// writes none of it. The one change it can make: take Leftoff's own entry
+// back out of your settings when Claude Code ignores it there (an explicit
+// Remove, this Mac's own browser or a trusted paired device, never on a
+// managed Mac). Another Mac's session: run leftoff doctor --fix there.
+// Centered on a desktop, a bottom sheet on a phone.
+
+export function hooksFixButtonHtml(s, { esc }) {
+  const k = s && s.hooksSkipped
+  if (!k || !k.label || k.applied || s.endedAt) return ''
+  return '<button type="button" class="s-hooks-fix" data-hookfix="' + esc(s.id) + '" data-tip="Why Leftoff can’t answer this session’s prompts from the board, and the settings line that lets it">Let me answer prompts here</button>'
+}
+
+let open = null
+
+export function closeHookFix() {
+  if (!open) return
+  const { back, from, onKey, sid } = open
+  open = null
+  document.removeEventListener('keydown', onKey, true)
+  back.remove()
+  document.documentElement.classList.remove('hf-open')
+  // the header may have been redrawn while the sheet was up: its button for this session now
+  const to = from && from.isConnected ? from : sid ? document.querySelector('[data-hookfix="' + CSS.escape(sid) + '"]') : null
+  if (to) try { to.focus({ preventScroll: true }) } catch {}
+}
+
+const copyText = async (t) => { try { await navigator.clipboard.writeText(t); return true } catch { return false } }
+
+// st: GET /v1/hook-order. -> the sheet's body
+export function hookFixBodyHtml(st, { esc, session = null, thisMachine = null } = {}) {
+  if (session && session.isLocal === false) {
+    const mac = session.machine || 'that Mac'
+    return '<p class="hf-p">This session runs on <b>' + esc(mac) + '</b>, and the settings that decide the plugin order are that Mac’s. Run this there; it says what to add, and why:</p>' +
+      '<div class="hf-code-row"><pre class="hf-code hf-cmd">leftoff doctor --fix</pre></div>' +
+      '<div class="hf-acts"><button type="button" class="btn hf-copy" data-copy="leftoff doctor --fix">Copy</button><button type="button" class="btn primary hf-close">Close</button></div>'
+  }
+  if (!st || st.error) return '<p class="hf-p">Couldn’t read this Mac’s Claude Code settings' + (st && st.error ? ' (' + esc(st.error) + ')' : '') + '. <code>leftoff doctor --fix</code> in a terminal says the same.</p><div class="hf-acts"><button type="button" class="btn primary hf-close">Close</button></div>'
+  let h = ''
+  if (!st.seated) {
+    h += '<p class="hf-p"><span class="hf-mark hf-mark-ok" aria-hidden="true"></span>Nothing here puts a plugin ahead of Leftoff’s hooks' + (thisMachine ? ' on ' + esc(thisMachine) : '') + ' right now. A session that started before a change may still show the note; restart Claude Code there.</p>'
+  } else if (st.placed) {
+    h += '<p class="hf-p"><span class="hf-mark hf-mark-ok" aria-hidden="true"></span><b>Managed settings already seat Leftoff</b> right after Claude Code’s Security default. Restart Claude Code sessions that started before that, and their prompts come here.</p>'
+  } else {
+    h += '<p class="hf-p">' + esc(st.words) + '</p>'
+    h += '<p class="hf-p hf-who"><span class="hf-mark hf-mark-admin" aria-hidden="true"></span>' + (st.managed ? 'Ask whoever manages Claude Code here to ' : 'An admin (on your own Mac, that’s you, with sudo) can ') + (st.snippet.merge ? 'merge this into' : 'put this in') + ':</p>'
+    h += '<div class="hf-file"><code>' + esc(st.snippet.file) + '</code></div>'
+    h += '<pre class="hf-code">' + esc(st.snippet.json) + '</pre>'
+    h += '<p class="hf-p hf-quiet">' + esc(st.snippet.note) + '. Then restart Claude Code. Leftoff never writes managed settings.</p>'
+  }
+  if (st.ignoredEntry) {
+    h += '<div class="hf-ign"><p class="hf-p"><span class="hf-mark hf-mark-off" aria-hidden="true"></span>Your <code>' + esc(st.ignoredEntry.file) + '</code> lists Leftoff in ' + esc(st.ignoredEntry.keys.join(' and ')) + ', which Claude Code ignores here. Removing it changes nothing in Claude Code.</p>' +
+      (st.canUnfix ? '<p class="hf-p hf-quiet">Remove takes out only Leftoff’s entry and keeps a backup in ~/.config/checkpoints/backups.</p>' : '<p class="hf-p hf-quiet">This Mac has managed settings, so Leftoff changes nothing in ~/.claude; delete the entry by hand if you like.</p>') + '</div>'
+  }
+  h += '<div class="hf-acts">' +
+    (st.ignoredEntry && st.canUnfix ? '<button type="button" class="btn hf-unfix">Remove the ignored entry</button>' : '') +
+    (st.seated && !st.placed ? '<button type="button" class="btn hf-copy" data-copy="' + esc(st.snippet.json) + '">Copy</button>' : '') +
+    '<button type="button" class="btn primary hf-close">' + (st.seated && !st.placed ? 'Done' : 'Close') + '</button></div>'
+  return h
+}
+
+export async function openHookFix({ session, from = null, api, esc, toast = () => {}, thisMachine = null } = {}) {
+  closeHookFix()
+  const back = document.createElement('div')
+  back.className = 'hf-back'
+  back.innerHTML = '<div class="hf-modal" role="dialog" aria-modal="true" aria-labelledby="hfTitle"><div class="hf-grab" aria-hidden="true"></div>' +
+    '<div class="hf-head"><h2 id="hfTitle">Let Leftoff answer prompts here</h2><button type="button" class="btn x hf-x" aria-label="Close">✕</button></div>' +
+    '<div class="hf-body"><p class="hf-p hf-quiet">Reading this Mac’s Claude Code settings…</p></div></div>'
+  document.body.appendChild(back)
+  document.documentElement.classList.add('hf-open')
+  const onKey = (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeHookFix(); return }
+    if (e.key === 'Tab') { // keep focus inside
+      const f = [...back.querySelectorAll('button:not([disabled])')]
+      if (!f.length) return
+      const i = f.indexOf(document.activeElement)
+      if (e.shiftKey && i <= 0) { e.preventDefault(); f[f.length - 1].focus() } else if (!e.shiftKey && i === f.length - 1) { e.preventDefault(); f[0].focus() }
+    }
+  }
+  open = { back, from, onKey, sid: session && session.id }
+  document.addEventListener('keydown', onKey, true)
+  const body = back.querySelector('.hf-body')
+  const paint = (st) => {
+    body.innerHTML = hookFixBodyHtml(st, { esc, session, thisMachine })
+    const first = back.querySelector('.hf-copy, .hf-close')
+    if (first) try { first.focus({ preventScroll: true }) } catch {}
+  }
+  back.addEventListener('click', async (e) => {
+    if (e.target === back || e.target.closest('.hf-x, .hf-close')) { closeHookFix(); return }
+    const c = e.target.closest('.hf-copy')
+    if (c) { const ok = await copyText(c.dataset.copy || ''); c.textContent = ok ? 'Copied' : 'Select and copy'; setTimeout(() => { if (c.isConnected) c.textContent = 'Copy' }, 1800); return }
+    const u = e.target.closest('.hf-unfix')
+    if (u) {
+      u.disabled = true; u.textContent = 'Removing…'
+      try {
+        const r = await api('POST', '/v1/hook-order/unfix', { yes: true })
+        paint(r.state)
+        toast(r.wrote ? 'Removed Leftoff’s entry from ' + r.file + (r.backup ? ' (backup kept)' : '') + '. Restart open Claude Code sessions.' : 'Nothing to remove.', 5000)
+      } catch (err) { u.disabled = false; u.textContent = 'Remove the ignored entry'; toast((err && err.message) || 'Couldn’t change it.', 5000) }
+    }
+  })
+  if (session && session.isLocal === false) { paint(null); return }
+  try { paint(await api('GET', '/v1/hook-order?fresh=1')) } catch (err) { paint({ error: (err && err.message) || 'no answer' }) }
+}