create-pmos 0.7.3 → 0.9.0

package/workspace/public/app.js

@@ -28,6 +28,9 @@ const state = {
   layoutId: null,              // the one currently applied
   layoutSaveT: null,           // debounce handle for the write-back
   layoutDirty: false,          // an adjustment not yet on disk — flushed on pagehide
+  scratchKey: null,            // whose scratchpad is on screen — 'session:<id>' or 'ws:<id>'
+  scratchT: null,              // debounce handle for the pad's write-back (like layoutSaveT)
+  scratchPending: null,        // {session,ws,text} typed but not yet written — flushed on a switch
   terms: new Map(),            // id -> {term, fit, el, g}
   attached: new Set(),         // ids attached ON THIS CONNECTION (cleared on reconnect)
   needs: [],
@@ -38,6 +41,7 @@ const state = {
   fsDir: null,                 // the in-app folder browser's current directory
   ctrlArmed: false,            // mobile control bar: Ctrl is a one-shot modifier for the next key
   branch: null,                // {ok,current,branches[],detached,dirty} for the selected workspace
+  worktrees: [],               // the selected workspace's repo's working trees, with removability
   newBranchMode: false,        // new-session form: creating a branch vs picking an existing one
   sessSig: null,               // structural fingerprint of the last session push (see structSig)
 };
@@ -151,8 +155,13 @@ function handle(m) {
     // server pushes a fresh 'sessions'; jump to the new one
     selectSession(m.id);
   } else if (m.t === 'branch') {
-    // a checkout changed the repo's branch — refresh the chip if it's the workspace on screen
-    if (m.ws === state.wsId) { state.branch = m; renderBranch(); }
+    // a checkout changed the repo's branch — refresh the chip if it's the workspace on screen,
+    // and the picker too when the form is open (a stale branch list is how a PM picks wrong)
+    if (m.ws === state.wsId) { state.branch = m; renderBranch(); loadWorktrees(); if (!$('newForm').hidden) fillBranchPicker(); }
+  } else if (m.t === 'notice') {
+    // something non-fatal but worth knowing: where a worktree landed, or that a branch was
+    // ignored because the workspace has no git. Never a blocked session, never a silent one.
+    flash(m.notice, 12000);
   } else if (m.t === 'error') {
     // a rejected action (e.g. a failed branch checkout that must NOT spawn) — say so, don't swallow
     flash(m.error || 'the server rejected that action');
@@ -169,6 +178,9 @@ async function loadBranch() {
   try { const r = await fetch('/api/git/branches?ws=' + encodeURIComponent(id || '')); info = await r.json(); } catch {}
   if (id !== state.wsId) return;   // a slower fetch for a workspace we've since left must not paint
   state.branch = info; renderBranch();
+  // Refill the open form ONLY while the PM has not chosen anything yet — a refresh landing a beat
+  // after a quick selection must never silently reset it back to "stay on current".
+  if (!$('newForm').hidden && !$('newBranch').value && !state.newBranchMode) fillBranchPicker();
 }
 function renderBranch() {
   const el = $('branchChip'); if (!el) return;
@@ -176,8 +188,12 @@ function renderBranch() {
   if (!b || !b.ok) { el.hidden = true; el.textContent = ''; el.title = ''; return; }
   const label = b.detached ? 'detached HEAD' : (b.current || '');
   el.hidden = !label;
-  el.textContent = '⎇ ' + label + (b.dirty ? '*' : '');
-  el.title = b.dirty ? 'uncommitted changes in the working tree' : 'current branch (shared by every session in this repo)';
+  // `⑂` marks a workspace that IS an isolated worktree — the PM should be able to see at a glance
+  // that this window's branch is its own, not the shared one.
+  el.textContent = (b.linked ? '⑂ ' : '⎇ ') + label + (b.dirty ? '*' : '');
+  const where = b.linked ? 'this workspace has its own working tree — switching here moves only its sessions'
+    : 'shared working tree — switching here moves every session in this repo';
+  el.title = (b.dirty ? 'uncommitted changes · ' : '') + where;
   el.classList.toggle('dirty', !!b.dirty);
 }
 
@@ -196,8 +212,10 @@ async function selectWorkspace(id, opts = {}) {
   const pick = mine.find((s) => s.id === remembered) || mine.find((s) => s.state !== 'exited') || mine[0];
   if (pick) selectSession(pick.id); else clearActive();
   // the arrangement belongs to the repo (R7) — a different workspace brings its own layouts
-  if (changed) { state.branch = null; renderBranch(); loadScratchpad(); loadLayouts(); }
-  await Promise.all([loadLibrary(), loadNeeds(), loadBranch()]);
+  // the scratchpad follows the ACTIVE TAB, and selectSession/clearActive above have already
+  // settled which that is — syncActive() reloaded it, so there is nothing to do here
+  if (changed) { state.branch = null; renderBranch(); state.worktrees = []; renderWorktrees(); loadLayouts(); }
+  await Promise.all([loadLibrary(), loadNeeds(), loadBranch(), loadWorktrees()]);
 }
 function renderWorkspaces() {
   const html = state.workspaces.map((w) => {
@@ -235,16 +253,21 @@ async function addWorkspace(root) {
     return true;
   } catch { flash('could not reach the server'); return false; }
 }
-function flash(msg) {
+// `ms` is longer for messages carrying something to READ — a worktree's path is useless if it
+// vanishes before the PM can copy it out.
+function flash(msg, ms = 4000) {
   const el = $('wsFoot'); const prev = el.textContent;
   el.textContent = msg;
-  setTimeout(() => { el.textContent = prev; }, 4000);
+  setTimeout(() => { el.textContent = prev; }, ms);
 }
 
-const GLYPH = { working: '●', quiet: '◼', blocked: '◆', done: '✓', idle: '—', exited: '○' };
-// The word beside the glyph. 'quiet' means no output for a while — NOT 'waiting on you'.
-// Quiescence proves quiet, not waiting (PRD R1); the wording may not be upgraded.
-const STATE_WORD = { working: 'working', quiet: 'quiet', exited: 'exited' };
+// The glyph and the word both come from the SHARED join module (/lib/session-state.js), never
+// re-typed here. `quiet` still means no output for a while and still NEVER means "waiting on you"
+// (harness-tower R1) — the stronger words exist only where the transcript corroborates the
+// silence, which is a different cell of the table, not a relabelling of this one.
+const SS = window.PMOSSessionState;
+const GLYPH = SS.GLYPH;
+const STATE_WORD = SS.WORD;
 // The threshold the server derives `quiet` from, sent in `hello`. It used to be re-typed here as a
 // literal "mirrors harness-parse.QUIET_AFTER_MS" — two copies of one number, free to drift apart and
 // give the sidebar and the server different opinions about the same session. The literal survives
@@ -257,37 +280,42 @@ function shortDur(ms) {
   const min = Math.round(sec / 60);
   return min < 60 ? min + 'm' : Math.round(min / 60) + 'h';
 }
-// Derived client-side too, so a row can go quiet WITHOUT a server push. The server only pushes
-// on lifecycle events; a periodic full re-render would destroy an open drill-in and the rename
-// input (the defect the pre-promotion grilling caught), so the ticker below repaints chips only.
-function shownState(s) {
-  if (s.state === 'exited') return { shown: 'exited', quietMs: null };
-  if (!s.lastOutputAt) return { shown: 'working', quietMs: null };
+// The CADENCE clock, derived client-side too so a row can change WITHOUT a server push. The server
+// only pushes on lifecycle events plus the liveness heartbeat; a periodic full re-render would
+// destroy an open drill-in and the rename input (the defect the pre-promotion grilling caught), so
+// the ticker below repaints chips only. This is one of the join's two inputs — never the answer.
+function cadenceState(s) {
+  if (s.state === 'exited') return { cadence: 'exited', quietMs: null };
+  if (!s.lastOutputAt) return { cadence: 'working', quietMs: null };
   const q = Math.max(0, Date.now() - s.lastOutputAt);
-  return q >= QUIET_AFTER_MS ? { shown: 'quiet', quietMs: q } : { shown: 'working', quietMs: q };
-}
-// The open call's AGE, appended to `working` only. `working · Bash 4m` is the first honest signal
-// for HUNG the workspace has — a call open past a glance is a call that may be stuck. The honesty
-// bound is structural, not a check bolted on: age rides `shown === 'working'`, and shownState only
-// returns 'working' while lastOutputAt is recent, so a crashed/interrupted session whose dangling
-// tool_use is a permanent phantom reads `quiet`/`exited` and NEVER a live age. Age without liveness
-// is refused. `sinceTs` comes from the transcript record; we tick it client-side like the quiet clock.
-function callAge(s, shown) {
-  if (shown !== 'working') return '';
+  return q >= QUIET_AFTER_MS ? { cadence: 'quiet', quietMs: q } : { cadence: 'working', quietMs: q };
+}
+// The open call's verb + AGE. `working · Bash 4m` is the first honest signal for HUNG the workspace
+// has; the weak claim's `· Bash 6m` is the same fact once the bytes stop, and is the whole content
+// of that claim. WHICH states may carry it is the shared module's call (CARRIES_CALL_AGE), not a
+// condition re-typed here — as the words themselves are its call, never literals in this file.
+//
+// The honesty bound is structural, not a check bolted on: the age rides states that require a LIVE
+// cadence or an explicitly-suspect one, and `needs` is not among them — so a crashed session's
+// dangling tool_use (a permanent phantom) can never dress itself as a live age on the strong claim.
+// `sinceTs` comes from the transcript record; we tick it client-side like the quiet clock.
+function openCallOf(s) {
   const oc = s.hx && s.hx.openCall;
-  if (!oc || !oc.sinceTs) return '';
+  if (!oc || !oc.sinceTs) return null;
   const ms = Date.parse(oc.sinceTs);
-  if (!Number.isFinite(ms)) return '';
+  if (!Number.isFinite(ms)) return null;
   const age = Date.now() - ms;
-  if (age < 0) return '';
-  return ` · ${oc.verb} ${shortDur(age)}`;
+  if (age < 0) return null;
+  return { verb: oc.verb, ageMs: age };
 }
+// THE JOIN, client side — the same module the server uses (R6). Two inputs: the cadence clock above
+// and the transcript's answer to whose turn it is. Neither the table nor the words are duplicated
+// here; if they were, the sidebar and the server could drift into different opinions about one
+// session, which is exactly what shipping QUIET_AFTER_MS from `hello` was done to prevent.
 function stateLabel(s) {
-  const { shown, quietMs } = shownState(s);
-  const w = STATE_WORD[shown] || shown;
-  if (shown === 'quiet') return { shown, text: `${w} ${shortDur(quietMs)}` };
-  if (shown === 'working') return { shown, text: `${w}${callAge(s, shown)}` };
-  return { shown, text: w };
+  const { cadence, quietMs } = cadenceState(s);
+  const shown = SS.presented(cadence, s.hx && s.hx.turn);
+  return { shown, text: SS.label(shown, { quietMs, call: openCallOf(s), fmtDur: shortDur }) };
 }
 function renderSessions() {
   const mine = mySessions();
@@ -529,6 +557,7 @@ function syncActiveState() {
   });
   updateExitedOverlay();
   refreshScratchSend();   // the scratchpad's send button follows the active session's liveness
+  renderScratchWho();     // …and its label follows the active tab's name, including a rename
 }
 
 // ── renaming a session (R11): inline, in both surfaces, live or exited. The name chosen at
@@ -584,7 +613,7 @@ const GROUP_TABS = ['stabs', 'stabs1'];
 function groupOf(id) { const t = state.terms.get(id); return t ? t.g : 0; }
 function groupHost(g) { return $(GROUP_HOST[g] || GROUP_HOST[0]); }
 function splitOn() { return !$('group1').hidden; }
-function syncActive() { state.active = state.groups[state.focusG].activeId; }
+function syncActive() { state.active = state.groups[state.focusG].activeId; syncScratchpad(); }
 
 function ensureTerm(id, g) {
   const want = typeof g === 'number' ? g : 0;
@@ -646,7 +675,7 @@ function selectSession(id, g) {
   const s = state.sessions.find((x) => x.id === id);
   if (!s) return;
   // selecting a session from the palette may cross workspaces — follow it there
-  if (s.ws !== state.wsId) { state.wsId = s.ws; store.set('wsid', s.ws); renderWorkspaces(); renderSessions(); loadLibrary(); loadNeeds(); state.branch = null; renderBranch(); loadBranch(); loadScratchpad(); loadLayouts(); }
+  if (s.ws !== state.wsId) { state.wsId = s.ws; store.set('wsid', s.ws); renderWorkspaces(); renderSessions(); loadLibrary(); loadNeeds(); state.branch = null; renderBranch(); loadBranch(); loadLayouts(); }
   // Which group shows it: the one asked for; else the group already showing it (so a click in the
   // sidebar focuses where it lives rather than yanking it across); else the focused group.
   let want = typeof g === 'number' ? g : state.groups.findIndex((gr) => gr.activeId === id);
@@ -872,7 +901,7 @@ async function openDoc(pth, kind) {
   }
   try {
     const res = await fetch(`/api/doc?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(pth)}`);
-    if (!res.ok) { body.innerHTML = `<p class="doc-empty">Could not read <code>${esc(pth)}</code>.</p>`; markActiveDoc(pth); refit(); return; }
+    if (!res.ok) { body.innerHTML = `<p class="doc-empty">Could not read <code>${esc(pth)}</code>.</p>`; markActiveDoc(pth); edControls(); refit(); return; }
     const k = res.headers.get('X-Doc-Kind') || 'markdown';
     const text = await res.text();
     if (k === 'html') renderHtmlDoc(body, text);
@@ -883,8 +912,7 @@ async function openDoc(pth, kind) {
   body.querySelectorAll('[data-doc]').forEach((a) => a.onclick = (e) => { e.preventDefault(); openDoc(a.dataset.doc); });
   wireImgFallback(body);
   markActiveDoc(pth);
-  // Only a markdown document can be reviewed, and only a document — never a summoned surface.
-  $('docReview').hidden = !(state.docPath && /\.(md|markdown|mdown|mkd|mdx|skill)$/i.test(state.docPath));
+  edControls();
   refit();
 }
 function markActiveDoc(pth) {
@@ -931,7 +959,6 @@ function renderHtmlDoc(body, text) {
 }
 function closeDoc() {
   state.docPath = null; state.surface = null;
-  $('docReview').hidden = true;
   $('paneDoc').hidden = true;
   $('railSplit').hidden = true;
   $('docBody').innerHTML = '';
@@ -1080,6 +1107,8 @@ function flushLayouts() {
   } catch {}
 }
 window.addEventListener('pagehide', flushLayouts);
+// a pad typed into and closed within the debounce window is still the PM's text — write it
+window.addEventListener('pagehide', () => flushScratchpad());
 document.addEventListener('visibilitychange', () => { if (document.hidden) flushLayouts(); });
 
 // ── the layout menu ──
@@ -1600,7 +1629,8 @@ function openNewForm() {
   // pre-filled but editable — a default that reads better than "shell" in a list of shells
   const n = mySessions().length + 1;
   $('newName').value = `${w ? w.name : 'session'} ${n}`;
-  fillBranchPicker();               // populate from the workspace's live branch info
+  fillBranchPicker();               // paint immediately from what we already know…
+  loadBranch();                     // …then re-fetch: branches made in a terminal must show up here
   const inp = $('newName');
   setTimeout(() => { inp.focus(); inp.select(); }, 0);
 }
@@ -1608,29 +1638,148 @@ function closeNewForm() {
   $('newForm').hidden = true;
   $('newBtn').setAttribute('aria-expanded', 'false');
 }
-// Populate the branch control from state.branch. A non-repo workspace hides the whole control —
-// there is no honest branch to pick. The default is "stay on the current branch" (no checkout).
+// Populate the branch control from state.branch. A workspace with no git hides the whole control
+// and says so once, plainly — a silently missing control reads as "broken", and a PM working in a
+// tenant product repo that has no git should never be asked a branch question at all. The default
+// is always "stay on current": starting a session must never require a git decision.
 function fillBranchPicker() {
-  const wrap = $('newBranchWrap'), sel = $('newBranch');
+  const wrap = $('newBranchWrap'), sel = $('newBranch'), nogit = $('newNoGit');
   const b = state.branch;
-  if (!b || !b.ok) { wrap.hidden = true; return; }
+  if (!b || !b.ok) {
+    wrap.hidden = true;
+    // `no-git` is an ordinary folder, not a fault: one muted line, no warning colour. A real git
+    // error (unreadable HEAD, git missing) says what it was instead of pretending all is well.
+    nogit.hidden = !b || !b.code;
+    nogit.textContent = b && b.code === 'git-error'
+      ? `git could not read this folder (${b.error}) — the session starts here, with no branch applied`
+      : 'no git in this folder — nothing to branch, the session just starts here';
+    nogit.classList.toggle('warn', !!b && b.code === 'git-error');
+    return;
+  }
+  nogit.hidden = true;
   wrap.hidden = false;
   const cur = b.detached ? '' : (b.current || '');
+  // a branch checked out in another worktree cannot be checked out again — git refuses, so the
+  // picker says where it lives rather than letting the PM discover it as an error
+  const elsewhere = new Map((b.worktrees || [])
+    .filter((w) => w.branch && w.branch !== cur).map((w) => [w.branch, w.dir]));
   const opts = [`<option value="">stay on current${cur ? ' (' + esc(cur) + ')' : ''}</option>`]
-    .concat((b.branches || []).map((n) => `<option value="${esc(n)}"${n === cur ? ' disabled' : ''}>${esc(n)}${n === cur ? ' — current' : ''}</option>`))
+    .concat((b.branches || []).map((n) => {
+      const where = elsewhere.get(n);
+      const tail = n === cur ? ' — current' : (where ? ' — open in ' + shortPath(where) : '');
+      return `<option value="${esc(n)}"${n === cur ? ' disabled' : ''}>${esc(n)}${esc(tail)}</option>`;
+    }))
     .concat([`<option value="__new__">+ new branch…</option>`]);
   sel.innerHTML = opts.join('');
   sel.value = '';
+  // Isolation protects OTHER sessions — so default it on only when there are others to protect.
+  // Alone in a workspace a plain checkout disturbs nobody and leaves no folder behind, which is
+  // what stops a directory accumulating per branch. Either way the PM can flip it.
+  $('newIsolate').checked = mySessions().some((s) => s.state !== 'exited');
   setNewBranchMode(false);
 }
+// last two segments of a path — enough to recognise, short enough for a <option> or a hint line
+function shortPath(p) { const parts = String(p).split('/').filter(Boolean); return parts.slice(-2).join('/'); }
+
+// ── worktree housekeeping (R7): isolation buys "your other sessions keep running" at the price of
+// a folder per branch. That price is only fair if the folders are visible and reclaimable from
+// here — a delete is never a guess, so a tree that is busy, dirty, or holds commits nothing else
+// holds is refused with the reason spelled out, not silently greyed. ──
+async function loadWorktrees() {
+  const id = state.wsId;
+  let r = { ok: false };
+  try { r = await (await fetch('/api/git/worktrees?ws=' + encodeURIComponent(id || ''))).json(); } catch {}
+  if (id !== state.wsId) return;
+  state.worktrees = r.ok ? (r.worktrees || []) : [];
+  renderWorktrees();
+}
+function renderWorktrees() {
+  const box = $('wtBox'); if (!box) return;
+  const list = (state.worktrees || []).filter((t) => !t.main);
+  box.hidden = list.length === 0;          // a repo with one working tree has nothing to manage
+  if (!list.length) return;
+  $('wtSummary').textContent = `⑂ ${list.length} worktree${list.length === 1 ? '' : 's'}`;
+  $('wtList').innerHTML = list.map((t) => `
+    <div class="wtrow" data-dir="${esc(t.dir)}">
+      <span class="wtb" title="${esc(t.dir)}">${esc(t.branch || 'detached')}</span>
+      <button type="button" data-rm="${esc(t.dir)}"${t.removable ? '' : ' disabled'}
+        title="${esc(t.removable ? 'Remove ' + t.dir : t.reasons.join('; '))}">remove</button>
+      ${t.removable ? '' : `<span class="wtwhy">kept — ${esc(t.reasons.join('; '))}</span>`}
+    </div>`).join('');
+  $('wtList').querySelectorAll('[data-rm]').forEach((b) => { b.onclick = () => removeWorktree(b.dataset.rm); });
+}
+async function removeWorktree(dir) {
+  // The server re-checks every hazard; this confirm exists because a folder disappearing from
+  // under the PM should be something they said yes to, not a side effect of a mis-click.
+  if (!confirm(`Remove the worktree at\n${dir}\n\nThe branch itself is kept — only the folder goes.`)) return;
+  let r = { ok: false, error: 'request failed' };
+  try {
+    r = await (await fetch('/api/git/worktrees/remove', { method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ws: state.wsId, dir }) })).json();
+  } catch {}
+  flash(r.ok ? (r.pruned ? 'cleared git’s record of a folder that was already gone' : 'worktree removed — the branch is still there')
+    : (r.error || 'the worktree was not removed'), r.ok ? 6000 : 12000);
+  loadWorktrees();
+}
+
 function setNewBranchMode(on) {
   state.newBranchMode = on;
   $('newBranchName').hidden = !on;
   if (on) setTimeout(() => $('newBranchName').focus(), 0);
+  renderBranchHint();
+}
+
+// The one line that decides whether the PM trusts this control. It changes with the choice, because
+// the three choices do genuinely different things:
+//   stay             → nothing happens to git at all
+//   isolate (default)→ the branch gets its own folder; running sessions are untouched
+//   switch this repo → every session in this repo moves, and so does every other workspace on it
+function renderBranchHint() {
+  const hint = $('newBranchHint'), iso = $('newIsolate'), isoWrap = $('newIsolateWrap');
+  const b = state.branch; if (!hint || !b || !b.ok) return;
+  const sel = $('newBranch');
+  const picked = sel.value === '__new__' ? ($('newBranchName').value.trim() || 'the new branch') : sel.value;
+  const cur = b.detached ? 'a detached HEAD' : (b.current || 'the current branch');
+
+  if (!sel.value) {                       // "stay on current" — no git action, so no warning
+    isoWrap.hidden = true;
+    hint.hidden = false; hint.classList.remove('warn');
+    hint.textContent = `runs on ${cur} — nothing is checked out, nothing else moves`;
+    return;
+  }
+  isoWrap.hidden = false;
+  hint.hidden = false;
+  if (iso.checked) {
+    const dir = worktreeHint(picked);
+    hint.classList.remove('warn');
+    hint.textContent = `${picked} gets its own folder${dir ? ' at ' + dir : ''} — every running session stays on its own branch`;
+  } else {
+    // How alarming this is depends entirely on who is here. Warning about "every session" when
+    // the PM is the only one running teaches them to ignore the warning that matters.
+    const others = mySessions().filter((s) => s.state !== 'exited').length;
+    const extra = b.subdir ? ` (the repo is ${shortPath(b.repoRoot || '')}, this workspace is only ${b.subdir}/ inside it)` : '';
+    hint.classList.toggle('warn', others > 0);
+    hint.textContent = others > 0
+      ? `switches this whole repo to ${picked} — ${others} running session${others === 1 ? '' : 's'} here move${others === 1 ? 's' : ''} with it${extra}`
+      : `checks out ${picked} here — nothing else is running in this workspace, and no new folder is made${extra}`;
+  }
+}
+// Mirror of the server's worktreePath, for the hint only — the server is the authority and reports
+// the real path back in its notice. Kept in sync deliberately: a PM deciding where work lands
+// should see the answer before committing to it, not after.
+function worktreeHint(branch) {
+  const b = state.branch;
+  if (!b || !b.ok || !b.repoRoot || !branch || branch === 'the new branch') return '';
+  const parts = String(b.repoRoot).split('/').filter(Boolean);
+  const name = parts[parts.length - 1] || 'repo';
+  return `../${name}-worktrees/${branch.replace(/\//g, '-')}`;
 }
 $('newBtn').onclick = () => ($('newForm').hidden ? openNewForm() : closeNewForm());
 $('newCancel').onclick = closeNewForm;
 $('newBranch').onchange = (e) => setNewBranchMode(e.target.value === '__new__');
+$('newIsolate').onchange = renderBranchHint;
+$('newBranchName').oninput = renderBranchHint;   // the hint names the folder as the PM types it
 $('newAgents').querySelectorAll('button').forEach((b) => b.onclick = () => {
   state.newAgent = b.dataset.agent;
   $('newAgents').querySelectorAll('button').forEach((x) => x.setAttribute('aria-checked', String(x === b)));
@@ -1639,7 +1788,9 @@ $('newForm').addEventListener('submit', (e) => {
   e.preventDefault();
   const name = $('newName').value.trim();
   const msg = { t: 'new', agent: state.newAgent, name: name || state.newAgent, ws: state.wsId };
-  // branch: either create a new one, or check out an existing pick. Empty = stay put (no checkout).
+  // branch: either create a new one, or check out an existing pick. Empty = stay put (no git call
+  // at all) — and that is what a hidden control means too, so a non-git workspace can never have a
+  // stale pick from a previous repo smuggled onto it.
   const sel = $('newBranch');
   if (!$('newBranchWrap').hidden && sel) {
     if (sel.value === '__new__') {
@@ -1649,29 +1800,75 @@ $('newForm').addEventListener('submit', (e) => {
     } else if (sel.value) {
       msg.branch = sel.value;
     }
+    // isolate → the branch gets its own worktree and running sessions are left alone. Only
+    // meaningful when a branch was actually chosen.
+    if (msg.branch) msg.isolate = !!$('newIsolate').checked;
   }
   send(msg);
   closeNewForm();
 });
 
-// ── scratchpad (R4): per-workspace staging text; copy or send-to-terminal without auto-running ──
-let scratchTimer = null;
+// ── scratchpad (R4): PER-TAB staging text; copy or send-to-terminal without auto-running. The pad
+// belongs to the session it is staged against, not to the workspace: moving between tabs brings
+// each tab's own text, and typing in one never overwrites another's. ──
+// The debounce handle and the not-yet-written text live on `state` (like layoutSaveT): syncActive()
+// can run before this section of the module has evaluated, and module-level `let`s would be in
+// their temporal dead zone at that point — which blanked the whole app on first paint.
 function setScratchStatus(s) { const el = $('scratchStatus'); if (el) el.textContent = s; }
+// Which pad is on screen: the active tab's, or — when the workspace has no tab at all — the
+// workspace's own. Encoded as one key so a switch is a simple inequality.
+function scratchKey() { return state.active ? 'session:' + state.active : 'ws:' + (state.wsId || ''); }
+function renderScratchWho() {
+  const el = $('scratchWho'); if (!el) return;
+  const s = state.sessions.find((x) => x.id === state.active);
+  el.textContent = s ? s.name : '';
+  el.title = s ? `staged for “${s.name}” — each tab keeps its own scratchpad` : '';
+}
 async function loadScratchpad() {
-  const id = state.wsId;
+  const key = scratchKey();
+  state.scratchKey = key;
+  const q = state.active
+    ? 'session=' + encodeURIComponent(state.active)
+    : 'ws=' + encodeURIComponent(state.wsId || '');
   let text = '';
-  try { const r = await fetch('/api/scratchpad?ws=' + encodeURIComponent(id || '')); const j = await r.json(); if (j && j.ok) text = j.text || ''; } catch {}
-  if (id !== state.wsId) return;               // a slower fetch for a workspace we've left must not paint
+  try { const r = await fetch('/api/scratchpad?' + q); const j = await r.json(); if (j && j.ok) text = j.text || ''; } catch {}
+  if (key !== scratchKey()) return;   // a slower fetch for a tab we've since left must not paint
   $('scratchText').value = text; setScratchStatus('');
+  renderScratchWho();
+}
+// Called on every active-session change. It flushes whatever the PM had just typed into the tab
+// they are LEAVING before loading the one they are arriving at — without this, the debounce could
+// still be holding text that would land after the new tab's pad had already painted.
+function syncScratchpad() {
+  const key = scratchKey();
+  if (key === state.scratchKey) { renderScratchWho(); return; }
+  flushScratchpad();
+  loadScratchpad();
+}
+function postScratchpad(p) {
+  return fetch('/api/scratchpad', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(p.session ? { session: p.session, text: p.text } : { ws: p.ws, text: p.text }) });
+}
+function flushScratchpad() {
+  clearTimeout(state.scratchT);
+  const p = state.scratchPending;
+  state.scratchPending = null;
+  if (!p) return;
+  postScratchpad(p).catch(() => {});   // fire-and-forget: the switch must not wait on the network
 }
 function saveScratchpad() {
-  const ws = state.wsId, text = $('scratchText').value;
-  clearTimeout(scratchTimer);
-  scratchTimer = setTimeout(async () => {
+  // The target is captured NOW, with the text — a save that lands after a tab switch must still
+  // write to the tab it was typed in.
+  state.scratchPending = { session: state.active, ws: state.wsId, text: $('scratchText').value };
+  clearTimeout(state.scratchT);
+  state.scratchT = setTimeout(async () => {
+    const p = state.scratchPending;
+    state.scratchPending = null;
+    if (!p) return;
     setScratchStatus('saving…');
     try {
-      const r = await fetch('/api/scratchpad', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ws, text }) });
-      const j = await r.json();
+      const j = await (await postScratchpad(p)).json();
+      if (p.session && p.session !== state.active) return;    // a pad we've since left: saved, quietly
       setScratchStatus(j && j.ok ? 'saved' : 'save failed');   // a broken save is never a silent green
     } catch { setScratchStatus('save failed'); }
   }, 500);
@@ -1810,24 +2007,122 @@ $('themeBtn').onclick = () => {
 };
 $('closeDoc').onclick = closeDoc;
 
-// "review" on an open document. The whole point of putting it HERE is that the scope needs no
-// naming — the thing to review is the thing you are reading. The server assembles the prompt
-// (skill body + resolved paths) because a tenant repo has no workspace/ folder to point at.
-$('docReview').onclick = async () => {
+// ── the document editor (workspace-doc-editor) ────────────────────────────────────────────────
+// The reader gains an edit mode. Nothing an agent produced can reach this path: the PM opens a
+// document, changes it, and saves. Alignment happens AFTER, from the change — never before it.
+//
+// `base` is the text the editor loaded. It travels with the save so the server can refuse if the
+// file moved on disk in the meantime, rather than quietly discarding whoever changed it.
+const ed = { on: false, path: null, base: '', dirty: false };
+
+function edControls() {
+  const isMd = !!(state.docPath && /\.(md|markdown|mdown|mkd|mdx|skill)$/i.test(state.docPath));
+  $('docEdit').hidden = !isMd || ed.on;
+  $('docHistory').hidden = !isMd || ed.on;
+  $('docSave').hidden = !ed.on;
+  $('docCancel').hidden = !ed.on;
+}
+
+async function edOpen() {
   const pth = state.docPath;
   if (!pth) return;
-  const btn = $('docReview');
-  btn.disabled = true; btn.textContent = 'starting…';
+  let text = '';
+  try {
+    const r = await fetch(`/api/doc?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(pth)}`);
+    if (!r.ok) { flash('could not open this document for editing'); return; }
+    text = await r.text();
+  } catch { flash('could not reach the workspace server'); return; }
+
+  ed.on = true; ed.path = pth; ed.base = text; ed.dirty = false;
+  $('docBody').innerHTML = `<div class="ed-wrap">
+      <div class="ed-split" data-diff="off">
+        <textarea class="ed-ta" id="edTa" spellcheck="false"></textarea>
+        <div class="ed-diff" id="edDiff"></div>
+      </div>
+      <div class="ed-bar">
+        <span class="n" id="edStat">no changes yet</span>
+        <input id="edNote" placeholder="why (optional — it is what makes the log worth reading)" autocomplete="off" />
+      </div>
+    </div>`;
+  $('edTa').value = text;
+  $('edTa').oninput = edRender;
+  $('edTa').focus();
+  edControls();
+  refit();
+}
+
+// The diff is a VIEW of the edit in progress, computed from the same module the server saves
+// through — so what is shown and what is written cannot disagree. It is never stored (R4: git holds
+// the repository's content; the change log holds what changed and why).
+function edRender() {
+  const next = $('edTa').value;
+  ed.dirty = next !== ed.base;
+  const r = window.ApplyChange.changedRegion(ed.base, next);
+  const split = $('docBody').querySelector('.ed-split');
+  split.dataset.diff = ed.dirty ? 'on' : 'off';
+  $('edStat').innerHTML = ed.dirty
+    ? `<b>+${r.added}</b> <i>−${r.removed}</i> · from line ${r.at_line} · <span class="dirty">unsaved</span>`
+    : 'no changes yet';
+  if (!ed.dirty) { $('edDiff').innerHTML = ''; return; }
+  const rows = [];
+  if (r.before) r.before.split('\n').forEach((l) => rows.push(`<div class="ed-l del"><span class="g"></span><span class="t">${esc(l) || '&nbsp;'}</span></div>`));
+  if (r.after) r.after.split('\n').forEach((l) => rows.push(`<div class="ed-l add"><span class="g"></span><span class="t">${esc(l) || '&nbsp;'}</span></div>`));
+  $('edDiff').innerHTML = rows.join('') || '<div class="ed-none">whitespace only</div>';
+}
+
+function edClose(reload) {
+  ed.on = false; ed.path = null; ed.base = ''; ed.dirty = false;
+  edControls();
+  if (reload && state.docPath) openDoc(state.docPath);
+}
+
+async function edSave() {
+  if (!ed.on) return;
+  const text = $('edTa').value;
+  if (text === ed.base) { flash('nothing changed'); return; }
+  const btn = $('docSave'); btn.disabled = true;
   let out = {};
   try {
-    out = await (await fetch('/api/review/start', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ws: state.wsId, path: pth }) })).json();
+    out = await (await fetch('/api/doc/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ws: state.wsId, path: ed.path, base: ed.base, text, note: $('edNote').value }) })).json();
   } catch { out = { ok: false, error: 'could not reach the workspace server' }; }
-  btn.disabled = false; btn.textContent = 'review';
-  if (!out.ok) { flash(out.error || 'could not start the review'); return; }
-  flash('reviewing ' + pth.split('/').pop() + ' — watch the session');
-  if (out.sessionId) selectSession(out.sessionId);
+  btn.disabled = false;
+  if (!out.ok) {
+    // Refused — say so where the PM is looking, and DO NOT close: their text is still in the box.
+    const box = $('docBody').querySelector('.ed-wrap');
+    let e = box.querySelector('.ed-err');
+    if (!e) { e = document.createElement('div'); e.className = 'ed-err'; box.insertBefore(e, box.querySelector('.ed-bar')); }
+    e.textContent = out.error === 'stale'
+      ? (out.detail || 'this document changed on disk since you opened it') + ' — your text is still here; copy it before reopening.'
+      : (out.detail || out.error || 'the save was refused');
+    return;
+  }
+  flash(out.warning ? 'saved — but the change could not be logged' : `saved · +${out.change.added} −${out.change.removed}`);
+  edClose(true);
+}
+
+$('docEdit').onclick = edOpen;
+$('docCancel').onclick = () => edClose(true);          // closing IS the whole of "cancel writes nothing"
+$('docSave').onclick = edSave;
+$('docHistory').onclick = async () => {
+  const pth = state.docPath; if (!pth) return;
+  let out = {};
+  try { out = await (await fetch(`/api/doc/changes?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(pth)}`)).json(); }
+  catch { out = { ok: false, error: 'could not reach the workspace server' }; }
+  if (!out.ok) { flash(out.error || 'could not read the change log'); return; }
+  const rows = (out.changes || []).map((c) => `<div class="hist-row">
+      <div class="hist-when"><b>+${c.added}</b> <i>−${c.removed}</i> · line ${c.at_line} · ${esc((c.at || '').replace('T', ' ').replace(/\..*$/, ''))}</div>
+      ${c.note ? `<div class="hist-note">${esc(c.note)}</div>` : ''}
+    </div>`).join('');
+  $('docBody').innerHTML = `<div class="hist"><h3>Your changes to this document</h3>
+    <div class="sub">Recorded here as you saved them. The document's own history is <span class="mono">git log</span>; this is what changed and why.</div>
+    ${rows || '<div class="hist-none">You have not changed this document here yet.</div>'}</div>`;
+  refit();
 };
+document.addEventListener('keydown', (e) => {
+  if (ed.on && (e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); edSave(); }
+});
+
 
 // ── ⌘K / Ctrl-K jump palette (client-side: workspaces + sessions + initiatives + docs) ──
 // ── on-demand surfaces (Plan · Deliver · Measure · Report) ─────────────────────────────────────
@@ -1840,14 +2135,10 @@ const SURFACES = [
   { name: 'report', label: 'weekly report', phase: 'report' },
   // Read-only console surfaces (D64 Track B): file-mode state, honest-by-construction (a broken
   // read renders RED, never a green empty). Sourced from /api/console, not the deliverable contract.
+  { name: 'workflow', label: 'workflow', phase: 'plan', console: true },
   { name: 'needs', label: 'needs you', phase: 'deliver', console: true },
   { name: 'radar', label: 'radar', phase: 'measure', console: true },
   { name: 'metrics', label: 'metrics', phase: 'measure', console: true },
-  // The summoned document review (workspace-review-and-edit). Summoned like every surface here and
-  // never resident — nothing reviews the PM's documents until they ask. The only INTERACTIVE surface:
-  // each finding is disposed of by Apply / Edit / Dismiss, and each disposition writes a correction
-  // record. Whether an Apply control exists at all is decided by the finding contract, never here.
-  { name: 'review', label: 'review', phase: 'deliver', review: true },
 ];
 const SURFACE_BY_NAME = {}; SURFACES.forEach((v) => { SURFACE_BY_NAME[v.name] = v; });
 const SF_STAT = { planning: ['○', 'planning'], building: ['◐', 'building'], blocked: ['◆', 'blocked'], landed: ['▲', 'landed'] };
@@ -1856,7 +2147,7 @@ async function openSurface(name) {
   showRail();
   $('paneDoc').hidden = false; $('railSplit').hidden = false; foldPane('doc', true);
   state.surface = name; state.docPath = null;
-  $('docReview').hidden = true;
+  ed.on = false; edControls();
   document.querySelectorAll('.doc').forEach((b) => b.classList.remove('on'));
   $('crumb').innerHTML = `<bdi>surface · ${esc(name)}</bdi>`;
   $('docBody').scrollTop = 0;
@@ -1865,18 +2156,15 @@ async function openSurface(name) {
   $('docBody').innerHTML = `<div class="sf-wrap">${sfHead(name)}<div class="sf-body"><div class="sf-skel"><i></i><i></i><i></i></div></div></div>`;
   wireSurface();
   const meta = SURFACE_BY_NAME[name] || {};
-  const endpoint = meta.review
-    ? `/api/review?ws=${encodeURIComponent(state.wsId || '')}`
-    : meta.console
+  const endpoint = meta.console
       ? `/api/console?name=${encodeURIComponent(name)}&ws=${encodeURIComponent(state.wsId || '')}`
       : `/api/surface?name=${encodeURIComponent(name)}&ws=${encodeURIComponent(state.wsId || '')}`;
   try {
     const r = await fetch(endpoint);
     const payload = await r.json();
-    const body = meta.review ? reviewBody(payload) : meta.console ? consoleBody(name, payload) : surfaceBody(name, payload);
+    const body = meta.console ? consoleBody(name, payload) : surfaceBody(name, payload);
     const okFlag = payload.ok !== false;
     $('docBody').innerHTML = `<div class="sf-wrap">${sfHead(name, okFlag)}<div class="sf-body">${body}</div></div>`;
-    if (meta.review) { state.review = payload; wireReview(); }
   } catch {
     // A failed FETCH is a broken read — render RED, never a calm "nothing here" (honesty by construction).
     $('docBody').innerHTML = `<div class="sf-wrap">${sfHead(name, false)}<div class="sf-body">${csError(name, 'could not reach the workspace server to build this surface')}</div></div>`;
@@ -1900,197 +2188,8 @@ function sfHead(active, ok) {
 function wireSurface() {
   document.querySelectorAll('[data-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.surface));
   document.querySelectorAll('[data-open-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.openSurface));
-  $('docBody').querySelectorAll('.sf-art[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
+  $('docBody').querySelectorAll('.sf-art[data-doc],.wf-id[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
 }
-// ── the summoned review (workspace-review-and-edit) ───────────────────────────────────────────
-// Renders findings in the quiet register the PM validated on the prototype: no cards, no severity
-// colours, no taxonomy headers, no explanation of its own guardrails. Each finding is a title and a
-// source line; the argument and the actions appear on expansion. Detail is AVAILABLE, not ambient.
-//
-// The load-bearing line is `f.applyable`. It comes from the SERVER, which asks finding-contract.js —
-// the client never re-derives it. A withheld finding renders no Apply control at all: the missing
-// button IS the guard (R7), and a disabled-but-present button would be the failure it exists to stop.
-function reviewBody(p) {
-  if (!p || p.ok === false) {
-    return csError('review', (p && p.error) || 'the review could not be read')
-      + (p && p.errors ? `<ul class="rv-errs">${p.errors.map((e) => `<li>${esc(e)}</li>`).join('')}</ul>` : '');
-  }
-  if (p.empty) {
-    return `<div class="rv-empty"><p>No review filed yet.</p>
-      <p class="rv-dim">Run the <b>Review documents</b> skill on the documents you want read.
-      Nothing reviews them until you ask.</p></div>`;
-  }
-  const open = p.findings.filter((f) => !f.settled);
-  const lede = open.length === 0
-    ? 'Nothing here that these documents cannot already tell you about themselves.'
-    : `${open.length} thing${open.length === 1 ? '' : 's'} ${open.length === 1 ? 'this document cannot' : 'these documents cannot'} tell you about ${open.length === 1 ? 'itself' : 'themselves'}.`;
-  return `<div class="rv">
-    <div class="rv-lede">${esc(lede)}</div>
-    <div class="rv-sub">Read ${p.read.map((r) => `<span class="mono">${esc(r)}</span>`).join(', ')}.</div>
-    ${p.findings.map((f, i) => rvFinding(f, i)).join('')}
-    <div class="rv-tail">Read ${p.read.length} document${p.read.length === 1 ? '' : 's'}. <b>Nothing written.</b>${rvStats(p.stats)}</div>
-  </div>`;
-}
-// The PRD's success signal, on the face of the surface. Action rate comes straight off the correction
-// records. Quiet-rate CANNOT — it needs a corpus with a labelled clean class, which does not exist —
-// so it says "not measured" rather than rendering a flattering zero. An unmeasured number shown as a
-// number is the watermelon this whole surface exists to catch.
-function rvStats(s) {
-  if (!s || !s.dispositions) return '';
-  const pct = (v) => (v == null ? null : `${Math.round(v * 100)}%`);
-  const bits = [
-    `${s.dispositions} disposition${s.dispositions === 1 ? '' : 's'}`,
-    `${s.corrections} correction${s.corrections === 1 ? '' : 's'}`,
-    `acted on ${pct(s.action_rate)}`,
-    `quiet on clean <i>not measured</i>`,
-  ];
-  const warn = s.inferred_attributions
-    ? ` <b class="rv-bad">${s.inferred_attributions} inferred attribution${s.inferred_attributions === 1 ? '' : 's'}</b>`
-    : '';
-  return `<div class="rv-stats">${bits.join(' · ')}${warn}</div>`;
-}
-function rvFinding(f, i) {
-  const ev = (f.evidence || []).map((e) => `${e.file}:${e.line}`).join(' · ');
-  // Three states, and only one of them offers a write. `settled` is terminal for this review.
-  const acts = f.settled
-    ? `<span class="rv-only">${esc(f.settled === 'dismiss' ? 'Dismissed.' : f.settled === 'edit' ? 'Edited and applied.' : 'Applied.')}</span>`
-    : f.applyable
-      ? `<button data-rv-apply="${i}">Apply</button><button data-rv-edit="${i}">Edit</button><button class="q" data-rv-dismiss="${i}">Dismiss</button>`
-      : `<span class="rv-only">${esc(f.withheld ? 'Yours to settle.' : 'Nothing to apply.')}</span><button class="q" data-rv-dismiss="${i}">Dismiss</button>`;
-  return `<div class="rv-f${f.settled ? ' rv-done' : ''}${f.applyable ? '' : ' rv-quiet'}" data-rv="${i}">
-    <div class="rv-h">${esc(f.title)}</div>
-    <div class="rv-src">${esc(ev || f.file)}</div>
-    <div class="rv-d">
-      <p>${esc(f.argument)}</p>
-      ${f.withheld_reason ? `<p class="rv-why">${esc(f.withheld_reason)}</p>` : ''}
-      <div class="rv-acts">${acts}</div>
-    </div>
-    <div class="rv-ed" data-rv-edbox="${i}"></div>
-  </div>`;
-}
-// The edit surface: opens IN PLACE under the finding — no modal, no mode switch, no navigation.
-// Gutter change bars are the VS Code cue; the replaced lines sit struck through above the new ones.
-// Cancel needs no write path at all — it just closes, which is the whole of "Cancel writes nothing".
-// The reason taxonomy, deliberately short. A vocabulary nobody can hold in their head gets skipped,
-// and a skipped reason is a record that teaches nothing. Values match correction-record.js's REASONS;
-// the server rejects anything outside it, so this list can never drift into inventing one.
-const RV_REASONS = [
-  ['factually-wrong', 'factually wrong'], ['incomplete', 'incomplete'],
-  ['wrong-scope', 'wrong scope'], ['style', 'style'], ['other', 'other…'],
-];
-function rvEditor(f, i) {
-  const before = (f.proposal && f.proposal.before) || '';
-  const after = (f.proposal && f.proposal.after) || '';
-  const nl = (s) => (s ? s.split('\n').length : 0);
-  return `<div class="rv-edfile"><span class="mono">${esc(f.file)}</span>
-      <span class="rv-n"><b>+${nl(after)}</b> <i>−${nl(before)}</i></span></div>
-    <div class="rv-code">
-      ${before.split('\n').map((l) => `<div class="rv-l was"><span class="g"></span><span class="t">${esc(l)}</span></div>`).join('')}
-    </div>
-    <textarea class="rv-ta" data-rv-ta="${i}" spellcheck="false" rows="${Math.min(12, Math.max(3, nl(after) + 1))}">${esc(after)}</textarea>
-    <div class="rv-reason" data-rv-reason="${i}">
-      <span class="rv-only">What was wrong with it?</span>
-      ${RV_REASONS.map((r) => `<button class="rv-rz" data-rv-rz="${i}" data-val="${r[0]}">${esc(r[1])}</button>`).join('')}
-    </div>
-    <input class="rv-note" data-rv-note="${i}" hidden placeholder="in a few words…" aria-label="Why" autocomplete="off" />
-    <div class="rv-acts">
-      <button data-rv-save="${i}">Apply</button>
-      <button class="q" data-rv-cancel="${i}">Cancel</button>
-      <span class="rv-only">You are editing the change, not the file.</span>
-    </div>`;
-}
-function wireReview() {
-  const rv = state.review || {};
-  const F = (n) => (rv.findings || [])[Number(n)];
-  const box = (n) => $('docBody').querySelector(`[data-rv-edbox="${n}"]`);
-  const card = (n) => $('docBody').querySelector(`[data-rv="${n}"]`);
-
-  $('docBody').querySelectorAll('.rv-f').forEach((el) => {
-    el.addEventListener('click', (e) => {
-      if (e.target.closest('button') || e.target.closest('textarea')) return;
-      if (el.dataset.editing === '1') return;                 // never collapse an open editor by clicking it
-      el.classList.toggle('on');
-    });
-  });
-  $('docBody').querySelectorAll('[data-rv-edit]').forEach((b) => b.onclick = () => {
-    const n = b.dataset.rvEdit;
-    box(n).innerHTML = rvEditor(F(n), n);
-    card(n).dataset.editing = '1';
-    wireReview();                                             // re-wire the freshly rendered controls
-    const ta = $('docBody').querySelector(`[data-rv-ta="${n}"]`); if (ta) ta.focus();
-  });
-  $('docBody').querySelectorAll('[data-rv-cancel]').forEach((b) => b.onclick = () => {
-    const n = b.dataset.rvCancel;
-    box(n).innerHTML = ''; card(n).dataset.editing = '0';     // closing IS the whole of "writes nothing"
-  });
-  $('docBody').querySelectorAll('[data-rv-apply]').forEach((b) => b.onclick = () => rvDispose(F(b.dataset.rvApply), 'apply'));
-  $('docBody').querySelectorAll('[data-rv-dismiss]').forEach((b) => b.onclick = () => rvDispose(F(b.dataset.rvDismiss), 'dismiss'));
-  // The reason tap. Required on an edit (R8 / correction-record.js) — an edit is where the agent was
-  // wrong in a way worth knowing, and a record that cannot say HOW is the self-report this feature
-  // exists to replace. Dismiss stays one click: friction belongs on the informative action, not the
-  // common one (PRD open question 2).
-  $('docBody').querySelectorAll('[data-rv-rz]').forEach((b) => b.onclick = () => {
-    const n = b.dataset.rvRz;
-    const row = $('docBody').querySelector(`[data-rv-reason="${n}"]`);
-    row.querySelectorAll('.rv-rz').forEach((x) => x.classList.toggle('on', x === b));
-    row.dataset.picked = b.dataset.val;
-    const note = $('docBody').querySelector(`[data-rv-note="${n}"]`);
-    note.hidden = b.dataset.val !== 'other';                 // 'other' is only useful with words
-    if (b.dataset.val === 'other') note.focus();
-    const nudge = row.querySelector('.rv-nudge'); if (nudge) nudge.remove();
-  });
-  $('docBody').querySelectorAll('[data-rv-save]').forEach((b) => b.onclick = () => {
-    const n = b.dataset.rvSave;
-    const row = $('docBody').querySelector(`[data-rv-reason="${n}"]`);
-    const picked = row && row.dataset.picked;
-    if (!picked) {
-      // An inline nudge, not a modal and not a silent default. Defaulting is what produced the bug
-      // this replaces: every edit recorded "incomplete" whether or not it was.
-      if (!row.querySelector('.rv-nudge')) {
-        const s = document.createElement('span');
-        s.className = 'rv-nudge'; s.textContent = 'Pick one — the record is worth nothing without it.';
-        row.appendChild(s);
-      }
-      return;
-    }
-    const note = $('docBody').querySelector(`[data-rv-note="${n}"]`);
-    const ta = $('docBody').querySelector(`[data-rv-ta="${n}"]`);
-    rvDispose(F(n), 'edit', ta ? ta.value : '', picked, note && !note.hidden ? note.value : undefined);
-  });
-}
-async function rvDispose(f, disposition, pmText, reason, reasonNote) {
-  if (!f) return;
-  const rv = state.review || {};
-  // The client sends back the exact text it rendered; the server re-derives the diff and refuses if
-  // they differ (sprint criterion 4). That is what makes a stale or tampered client safe.
-  let renderedAfter = null;
-  if (disposition !== 'dismiss') {
-    try {
-      const r = await fetch(`/api/doc?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(f.file)}`);
-      const cur = await r.text();
-      const prop = disposition === 'edit' ? { before: f.proposal.before, after: pmText } : f.proposal;
-      renderedAfter = window.ApplyChange.applyChange(cur, prop).text;
-    } catch { /* leave null — the server refuses rather than guessing */ }
-  }
-  const body = {
-    ws: state.wsId, disposition, finding: f, rendered_after: renderedAfter,
-    pm_text: disposition === 'edit' ? pmText : undefined,
-    reason, reason_note: reasonNote,          // the PM's own word — never defaulted, never inferred
-    run_id: rv.id, initiative_id: 'workspace-review-and-edit',
-  };
-  let out = {};
-  try { out = await (await fetch('/api/review/dispose', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })).json(); }
-  catch { out = { ok: false, error: 'could not reach the workspace server' }; }
-  if (!out.ok) { rvSay(out.error || 'refused', out.detail); return; }
-  openSurface('review');                                       // re-read: the record is the source of truth
-}
-function rvSay(msg, detail) {
-  const el = document.createElement('div');
-  el.className = 'rv-say';
-  el.textContent = detail ? `${msg} — ${detail}` : msg;
-  $('docBody').querySelector('.rv') ? $('docBody').querySelector('.rv').prepend(el) : $('docBody').prepend(el);
-}
-
 function surfaceBody(name, payload) {
   if (!payload || !payload.ok) return sfCantProduce(name, payload && payload.contract);
   const s = payload.surface || {};
@@ -2178,6 +2277,7 @@ function consoleBody(name, p) {
   if (name === 'needs') return csNeeds(p.data);
   if (name === 'radar') return csRadar(p.data, p.source);
   if (name === 'metrics') return csMetrics(p.data, p.source);
+  if (name === 'workflow') return csWorkflow(p.data);
   return csError(name, 'unknown console surface');
 }
 function csError(name, why) {
@@ -2190,7 +2290,9 @@ function csError(name, why) {
 function csEmpty(name) {
   const msg = name === 'needs'
     ? 'Nothing needs your decision right now. No open Acceptance Gate, no overdue outcome check.'
-    : `No ${esc(name)} data yet — the state read succeeded and there is genuinely nothing to show.`;
+    : name === 'workflow'
+      ? 'No initiative records in this repo — the read succeeded and there is genuinely nothing in flight.'
+      : `No ${esc(name)} data yet — the state read succeeded and there is genuinely nothing to show.`;
   return `<div class="cs-empty"><span class="dot" aria-hidden="true"></span><b>Nothing awaits</b>
     <p>${msg}</p><p class="cs-empty-note">This is a real, verified empty — not a failed read.</p></div>`;
 }
@@ -2204,6 +2306,59 @@ function csNeeds(d) {
         <div class="m">${esc(n.kind)}${n.initiative_id ? ' · ' + esc(n.initiative_id) : ''}${n.derived ? ' · derived' : ''}${n.run_id ? ' · ' + esc(n.run_id) : ''}</div></div>
     </div>`).join('')}</div>`;
 }
+// The workflow ladder — the same steps, glyphs and next-actions the CLI and the Initiative Gate
+// print, from the same engine. Parity is the point: a panel that disagreed with CI would be worse
+// than no panel, because the PM would trust the one that is about to fail them.
+const WF_GLYPH = { done: '✓', current: '●', blocked: '✗', pending: '·', na: '─', unknown: '?' };
+const WF_STAGES = ['intake', 'spec', 'contract', 'build', 'eval', 'accepted'];
+function csWorkflow(d) {
+  const live = (d && d.live) || [];
+  const bad = (d && d.unreadable) || [];
+  // "Open" is named for what it is derived from — no recorded acceptance — never as "in flight".
+  // Most of these are finished work whose acceptance was never logged, and the count IS the finding.
+  const head = `<div class="cs-h"><span class="dot ${d.blocked ? 'warn' : 'ok'}" aria-hidden="true"></span>
+    <b>${d.total} without a recorded acceptance${d.blocked ? ` · ${d.blocked} blocked` : ''}</b>
+    <span class="src">derived — no status field to keep updated${d.accepted ? ` · ${d.accepted} accepted` : ''}</span></div>`;
+  // A degraded read is stated, never absorbed: without history the order rules are unknown, and an
+  // unknown that renders like a tick is exactly the false green this surface exists to prevent.
+  const degraded = d.degraded
+    ? `<div class="wf-degraded" role="alert"><b>Order checks degraded</b> — ${esc(d.degraded)}.
+        Steps that depend on commit order show <span class="mono">?</span>, not a tick.</div>` : '';
+  const unreadable = bad.length
+    ? `<div class="wf-degraded" role="alert"><b>${bad.length} record${bad.length === 1 ? '' : 's'} unreadable</b> —
+        ${bad.map((b) => esc(b.id)).join(', ')}. Shown here rather than dropped from the count.</div>` : '';
+  if (!live.length) {
+    return `<div class="cs-workflow">${head}${degraded}${unreadable}
+      <div class="cs-none">Every initiative in this repo has a recorded acceptance.</div></div>`;
+  }
+  // Never a silent cap: a truncated list that does not say so reads as "that is everything".
+  const more = d.hidden
+    ? `<div class="wf-more">+ ${d.hidden} more without a recorded acceptance, not shown —
+        <span class="mono">node scripts/workflow-state.js --all</span></div>` : '';
+  return `<div class="cs-workflow">${head}${degraded}${unreadable}
+    ${live.map((r) => {
+    const at = Math.max(0, WF_STAGES.indexOf(r.stage));
+    const rail = WF_STAGES.map((s, i) =>
+      `<span class="wf-st ${i < at ? 'past' : i === at ? 'at' : ''}">${esc(s)}</span>`).join('<i class="wf-sep" aria-hidden="true"></i>');
+    return `<div class="wf-card" data-blocked="${r.blockers.length ? '1' : '0'}">
+      <div class="wf-top">
+        <button class="wf-id" data-doc="${esc(r.record)}" title="open the initiative record">${esc(r.id)}</button>
+        <span class="wf-lane">${esc(r.lane)}</span>
+        ${r.in_change ? '<span class="wf-here">this change</span>' : ''}
+        <span class="wf-anchor" title="${esc(r.anchor || '')}">${esc((r.anchor || 'unanchored').split(/[(—]/)[0].trim())}</span>
+      </div>
+      <div class="wf-rail">${rail}</div>
+      <div class="wf-steps">${r.steps.map((s) => `
+        <div class="wf-step" data-st="${esc(s.status)}">
+          <span class="wf-g" aria-hidden="true">${WF_GLYPH[s.status] || '?'}</span>
+          <span class="wf-k">${esc(s.key)}</span>
+          <span class="wf-e">${esc(s.evidence || '')}${s.rule && s.status === 'blocked' ? ` <span class="wf-rule">${esc(s.rule)}</span>` : ''}</span>
+        </div>${s.next ? `<div class="wf-next" data-st="${esc(s.status)}">→ ${esc(s.next)}</div>` : ''}`).join('')}</div>
+      ${r.next ? `<div class="wf-do"><b>next</b> ${esc(r.next.action || '')}</div>`
+        : `<div class="wf-do ok"><b>nothing blocking</b> — the ladder is complete</div>`}
+    </div>`;
+  }).join('')}${more}</div>`;
+}
 function csRadar(d, source) {
   const g = d.eval_gate || {};
   const cal = d.calibration;