create-pmos 0.14.0 → 0.16.0

package/workspace/public/app.js

@@ -1,3450 +0,0 @@
-/* PMOS Terminal Workspace — GUI client.
- * Attaches to the persistent session server over WebSocket; renders each session's REAL
- * PTY in an xterm.js terminal (the agent harness runs untouched inside). Sessions survive
- * detach — closing/reloading this client never kills a run.
- *
- * One server hosts MANY workspaces (repo roots). Everything on screen — sessions, tabs,
- * library, needs-you — is scoped to the selected workspace; switching never disturbs a
- * session running in another one.
- *
- * Layout (round 2): the left column IS the workspace — repos over running agents, equal
- * halves. The terminal is the middle. The right rail carries the library over the document
- * reader; either pane folds away and the whole rail hides. */
-'use strict';
-const $ = (id) => document.getElementById(id);
-const FitAddon = (window.FitAddon && window.FitAddon.FitAddon) || null;
-const WebLinks = (window.WebLinksAddon && window.WebLinksAddon.WebLinksAddon) || null;
-
-const state = {
-  ws: null, sessions: [], workspaces: [], home: null, openHarness: new Set(),
-  wsId: null,                   // selected workspace
-  lib: null,                    // library payload for the selected workspace
-  lens: 'dossier',              // the current sub-view: dossier | folders | scheduled | history
-  detail: { kind: 'repo', id: null, wsId: null },   // R7 — what the rail is showing, from the selection
-  libByWs: {},                 // ws id -> library payload, so a dossier can be read for a tree that
-                               // is NOT selected (R9: opening a dossier is a read, never a checkout)
-  filter: '',
-  active: null,                 // active session id — always groups[focusG].activeId
-  groups: [{ activeId: null }, { activeId: null }],  // terminal groups (R6); [1] exists when split
-  focusG: 0,                   // which group the keyboard, ⌘J send and rename act on
-  layouts: [],                 // this workspace's arrangements (R1) — stock four + custom
-  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: [],
-  newAgent: 'shell',
-  renaming: null,              // session id being renamed inline
-  renameVal: '',               // survives a re-render mid-edit
-  docPath: null,               // the document open in the reader
-  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)
-  boards: {},                  // repo_key -> cached workflow board (lib/board-cache envelope)
-  boardWanted: new Set(),      // repo_keys a fetch is already in flight for
-  boardTries: {},              // repo_key -> re-polls spent waiting for a pending board
-  boardsStopped: false,        // set on unload — nothing may keep polling a page that is going away
-  needsByWs: {},               // ws id -> {count,error} — what a COLLAPSED tree row shows (R12)
-  openTrees: new Set(),        // trees the PM opened explicitly — beats the derived default (R6)
-  closedTrees: new Set(),      // …and the ones they closed explicitly
-};
-
-// ── workspace state survives reloads (R7): theme + selected workspace + focused session,
-// and now the rail/pane layout the PM chose (R12). ──
-const store = {
-  get: (k) => { try { return localStorage.getItem('pmos-ws:' + k); } catch { return null; } },
-  set: (k, v) => { try { localStorage.setItem('pmos-ws:' + k, v); } catch {} },
-};
-{ const t = store.get('theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; }
-// R13 — the lens key stays where it was (global localStorage, not per-workspace) rather than being
-// moved silently; only its vocabulary changes. `initiatives` is retired and maps to the dossier,
-// which is the same intent expressed against the new structure.
-{ const l = store.get('lens');
-  if (['folders', 'scheduled', 'history', 'dossier'].includes(l)) state.lens = l;
-  else if (l === 'initiatives') state.lens = 'dossier'; }
-// ?ws=<id> is how `pmos` in another repo lands you in THAT repo, not the last one you opened.
-const urlWs = new URLSearchParams(location.search).get('ws');
-
-// ── xterm theme, single-sourced from the CSS token layer (no duplicated hex). The
-// terminal ground is dark by design (--term-* tokens hold the same value in both themes). ──
-function xtheme() {
-  const cs = getComputedStyle(document.documentElement);
-  const v = (n, f) => (cs.getPropertyValue(n).trim() || f);
-  return {
-    background: v('--xt-bg', '#07090c'), foreground: v('--xt-fg', '#b9c2ce'),
-    cursor: v('--xt-cursor', '#48d597'), cursorAccent: v('--xt-bg', '#07090c'),
-    selectionBackground: v('--xt-sel', 'rgba(79,147,247,.3)'),
-    black: v('--xt-black', '#0a0c10'), red: v('--xt-red', '#f2655f'), green: v('--xt-green', '#48d597'),
-    yellow: v('--xt-yellow', '#f1c052'), blue: v('--xt-blue', '#4f93f7'), magenta: v('--xt-magenta', '#b39cf7'),
-    cyan: v('--xt-cyan', '#6fd6c4'), white: v('--xt-white', '#cdd6e2'),
-    brightBlack: v('--xt-brblack', '#5d6675'), brightRed: v('--xt-red', '#f2655f'), brightGreen: v('--xt-brgreen', '#7fd9a8'),
-    brightYellow: v('--xt-yellow', '#f1c052'), brightBlue: v('--xt-accent-text', '#9cc2fb'),
-    brightMagenta: v('--xt-magenta', '#b39cf7'), brightCyan: v('--xt-cyan', '#6fd6c4'), brightWhite: v('--xt-brwhite', '#eef1f5'),
-  };
-}
-
-// ── WebSocket attach lifecycle (auto-reconnect). ──
-function connect() {
-  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-  const ws = new WebSocket(`${proto}://${location.host}`);
-  state.ws = ws;
-  ws.onopen = () => setConn('live');
-  ws.onclose = () => { setConn('off'); state.attached.clear(); setTimeout(connect, 1200); };  // survive server blips
-  ws.onmessage = (ev) => handle(JSON.parse(ev.data));
-}
-function send(obj) { if (state.ws && state.ws.readyState === 1) state.ws.send(JSON.stringify(obj)); }
-function setConn(s) {
-  const el = $('conn');
-  el.className = 'conn ' + s;
-  el.textContent = s === 'live' ? 'LIVE · local' : 'reconnecting…';
-  $('wsFoot').textContent = s === 'live' ? 'local · persistent server · sessions running' : 'server unreachable — retrying';
-}
-
-// sessions belonging to the selected workspace — the whole UI reads through this
-function mySessions() { return state.sessions.filter((s) => s.ws === state.wsId); }
-
-function handle(m) {
-  if (m.t === 'hello') {
-    if (Number.isFinite(m.quietAfterMs) && m.quietAfterMs > 0) QUIET_AFTER_MS = m.quietAfterMs;
-    state.workspaces = m.workspaces; state.home = m.home; state.sessions = m.sessions;
-    // pick: the URL (a fresh `pmos` in this repo) → the last one used → home
-    const remembered = store.get('wsid');
-    const pick = [urlWs, remembered, m.home].find((id) => id && m.workspaces.some((w) => w.id === id))
-      || (m.workspaces[0] && m.workspaces[0].id);
-    selectWorkspace(pick, { restoreSession: true });
-  } else if (m.t === 'workspaces') {
-    state.workspaces = m.workspaces;
-    if (!state.workspaces.some((w) => w.id === state.wsId)) selectWorkspace(state.home, { restoreSession: true });
-    else { renderWorkspaces(); renderTree(); loadBoards(); }
-  } else if (m.t === 'focus') {
-    // `pmos` was run in another repo while this tab was open — go there, which is the whole
-    // point: the browser refocusing this tab must not strand the PM on the previous repo.
-    if (m.ws && m.ws !== state.wsId) selectWorkspace(m.ws, { restoreSession: true });
-  } else if (m.t === 'sessions') {
-    // a removed session's terminal must not leak — drop its pane + term instance
-    const ids = new Set(m.sessions.map((s) => s.id));
-    for (const [id, t] of [...state.terms]) {
-      if (!ids.has(id)) { try { t.term.dispose(); } catch {} t.el.remove(); state.terms.delete(id); state.attached.delete(id); }
-    }
-    if (state.renaming && !ids.has(state.renaming)) cancelRename();
-    // The liveness heartbeat pushes this message every couple of seconds, so it can no longer cost
-    // a full innerHTML rebuild of the session pane: that would drop text selection, reset scroll
-    // and flicker the sidebar twice a second. Split it — a STRUCTURAL change (a session appeared,
-    // vanished, was renamed, or exited) rebuilds; a mere liveness/harness update repaints the
-    // volatile bits in place. The openness of a drill-in and an in-flight rename already survived
-    // a rebuild; this keeps everything else intact too.
-    const sig = structSig(m.sessions);
-    const structural = sig !== state.sessSig;
-    state.sessSig = sig;
-    state.sessions = m.sessions;
-    if (structural) { renderSessions(); renderWorkspaces(); } else { paintVolatile(); }
-    if (state.active && !ids.has(state.active)) {
-      const mine = mySessions();
-      const nx = mine.find((s) => s.state !== 'exited') || mine[mine.length - 1];
-      if (nx) selectSession(nx.id); else clearActive();
-    } else if (structural) { syncActiveState(); }
-  } else if (m.t === 'attached') {
-    const t = ensureTerm(m.id);
-    t.term.reset();
-    if (m.buf) t.term.write(m.buf);        // replay scrollback on (re)attach
-    fitOne(m.id);
-  } else if (m.t === 'data') {
-    const t = state.terms.get(m.id); if (t) t.term.write(m.data);
-    // Bytes arriving IS the liveness signal, and it is the same fact the server stamps into
-    // lastOutputAt — so an attached session's dot flips to `working` on the byte rather than on
-    // the next heartbeat. It is a nudge, not a second source of truth: the very next heartbeat
-    // overwrites it with the server's stamp, and it only ever moves the clock FORWARD, so it can
-    // make a row read `working` a beat early but can never keep a dead row looking alive. Only
-    // attached sessions get `data` at all — which is exactly why the heartbeat is the mechanism
-    // and this is the garnish.
-    const live = state.sessions.find((x) => x.id === m.id);
-    if (live && live.state !== 'exited') { live.lastOutputAt = Date.now(); tickQuiet(); }
-  } else if (m.t === 'created') {
-    // 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,
-    // 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');
-  }
-}
-
-// ── branch awareness (R2): the active workspace's current git branch, always visible. Fetched on
-// demand (never on every broadcast) — on workspace switch, on opening the new-session form, and
-// after a checkout the server announces. A non-repo/unreadable workspace shows NO chip, never a
-// stale or guessed branch. ──
-async function loadBranch() {
-  const id = state.wsId;
-  let info = { ok: false };
-  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;
-  const b = state.branch;
-  if (!b || !b.ok) { el.hidden = true; el.textContent = ''; el.title = ''; return; }
-  const label = b.detached ? 'detached HEAD' : (b.current || '');
-  el.hidden = !label;
-  // `⑂` 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);
-}
-
-// ── workspaces ──
-async function selectWorkspace(id, opts = {}) {
-  if (!id) return;
-  const changed = id !== state.wsId;
-  state.wsId = id;
-  store.set('wsid', id);
-  if (changed) closeDoc();
-  renderWorkspaces();
-  renderSessions();
-  renderNewTarget();      // R5 — "here" moved; the composer must say so even if it is already open
-  loadBoards();
-  // focus a session in THIS workspace: the remembered one if it belongs here, else its first live one
-  const mine = mySessions();
-  const remembered = opts.restoreSession ? store.get('active') : null;
-  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
-  // 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(); }
-  // R7 — the rail follows the selection. A tree on an initiative branch opens its dossier; anything
-  // else falls back to repo detail rather than showing a dossier for an initiative that is not there.
-  {
-    const w = state.workspaces.find((x) => x.id === id);
-    const init = w ? initiativeOf(w) : null;
-    if (init && init.id) { state.detail = { kind: 'initiative', id: init.id, wsId: id }; if (state.lens === 'dossier') ensureLib(id); }
-    else { state.detail = { kind: 'repo', id: w ? w.repo_key : null, wsId: id }; if (state.lens === 'dossier') state.lens = 'folders'; }
-  }
-  await Promise.all([loadLibrary(), loadNeeds(), loadBranch(), loadWorktrees()]);
-}
-/* ── The tree (R1·R2·R3·R4·R5·R6) ────────────────────────────────────────────────────────────────
- *
- * One structure where there were two panes: REPOSITORY → its working trees → their sessions.
- *
- * A row is a working TREE, labelled by the INITIATIVE on its branch. Those are the same level, not
- * two: git allows exactly one working tree per branch, and every session in a tree shares that
- * branch (lib/git-info.js), so nesting them separately would produce a middle row with exactly one
- * child forever. The DIRECTORY name stays on the row permanently — the shared-tree checkout path
- * moves every session in a repo, which relabels a row under its running sessions, and without a
- * stable identity that reads as a row vanishing and another appearing (R2).
- *
- * Everything a row asserts about workflow is DERIVED and dated. `board` arrives from the cache
- * (lib/board-cache.js), never computed here, and a stage is never drawn without the branch it came
- * from (R5) — on this repo the ladder is scoped to merge-base(origin/main,HEAD)..HEAD, so a shipped
- * initiative reads `spec` on every branch that did not build it.
- */
-const TREE_GLYPH = { working: '●', quiet: '◼', blocked: '✗', idle: '—', exited: '○', none: '·' };
-
-/* THE THREE-VALUED RULE (R2, and the veto of this initiative's rubric).
- *
- * Every derived cell in this tree is one of three things, and they get three renderings:
- *
- *   value          — the fact, rendered plainly
- *   verified absent— the read SUCCEEDED and found nothing. Quiet, specific, never red. This is the
- *                    common case for anything that is not a PMOS repo, and it is the one the first
- *                    version had no rendering for at all.
- *   unreadable     — the read FAILED. Red, and it keeps the word.
- *
- * The first version had two renderings for three facts, so one was always mislabelled: a plain
- * folder reported `branch unreadable`, which is an alarm about a completely ordinary directory, on
- * the same surface that uses red for a corrupt state queue and a blocked initiative. A surface that
- * cries wolf on the normal case teaches the PM to ignore red where red is real.
- *
- * `absent()` and `broken()` are the only two ways to say it, so a fourth site cannot invent a
- * fifth vocabulary. */
-const absent = (txt, title) => `<span class="gone"${title ? ` title="${esc(title)}"` : ''}>${esc(txt)}</span>`;
-const broken = (txt, title) => `<span class="bl" role="alert"${title ? ` title="${esc(title)}"` : ''}>${esc(txt)}</span>`;
-
-// The initiative a branch names, and the record behind it — four cases now, all of them stated. A
-// branch with no record is NOT an initiative with a missing file; it is a branch, and the row says
-// so rather than inventing an id (R2). A workspace with no branch is either an ordinary folder that
-// is not a repository (quiet) or a git read that failed (a fault) — never the same word for both.
-// A ROW ALWAYS HAS AN IDENTITY. The first version used this label for both the row's name and its
-// condition, so a plain folder rendered as a row literally titled `branch unreadable` — a row with
-// no name at all, which is unfindable in a tree of them. The name is what the row IS; the condition
-// is what is true of it, and it belongs on the second line with the other derived facts.
-function initiativeOf(w) {
-  const br = w.branch;
-  if (!br) {
-    if (!w.branch_error) return { kind: 'detached', label: w.name, id: null };
-    // 'no-git' is not a failure to report a branch; it is a folder that HAS no branch. The message
-    // is branchInfo's own ("not a git repository") — this renderer does not compose its own prose.
-    if (w.branch_code === 'no-git') return { kind: 'nogit', label: w.name, id: null };
-    return { kind: 'branchbroken', label: w.name, id: null, condition: w.branch_error };
-  }
-  const m = /^initiative\/(.+)$/.exec(br);
-  if (!m) return { kind: 'branch', label: br, id: null };
-  const id = m[1];
-  const row = boardRow(w, id);
-  if (!row) return { kind: 'norecord', label: id, id };
-  return { kind: 'initiative', label: id, id, row };
-}
-// The board for a repository, by group key — one cached read serves every tree under it.
-function boardFor(w) { return state.boards[w.repo_key] || null; }
-function boardRow(w, id) {
-  const b = boardFor(w);
-  if (!b || !b.data || !Array.isArray(b.data.live)) return null;
-  return b.data.live.find((r) => r.id === id) || null;
-}
-// A tree has something to say when it is working, has gone quiet past the threshold, is blocked, or
-// something needs the PM. Rows without a signal collapse to a count (R6). The PM's own toggle always
-// wins — `state.openTrees` holds it, and it is re-applied after every render for the same reason
-// `state.openHarness` is: this pane is rebuilt by innerHTML on every push.
-// R7 — EXPANSION MUST BE EARNED. Signals divide in two, and the first version conflated them:
-//   * a signal about the TREE (a needs count, a blocker) belongs ON the row and is already rendered
-//     there — opening the container shows the PM nothing they cannot already see;
-//   * a signal about a SESSION is only visible once the container is open, so it earns the open.
-// Conflating them is why a repository with one queued need and no sessions expanded to reveal a
-// lone "＋ session here" button. A row that opens onto nothing teaches you to distrust its glyphs.
-function treeHasSignal(w) {
-  const mine = state.sessions.filter((s) => s.ws === w.id);
-  if (!mine.length) return false;                 // nothing to reveal, so nothing to open for
-  return mine.some((s) => {
-    const shown = stateLabel(s).shown;
-    return shown === 'working' || shown === 'blocked' || shown === 'exited';
-  });
-}
-function treeOpen(w) {
-  if (state.openTrees.has(w.id)) return true;
-  if (state.closedTrees.has(w.id)) return false;
-  return w.id === state.wsId || treeHasSignal(w);
-}
-// The worst thing true of a collapsed tree, so the glyph never reads calmer than the tree is.
-function treeGlyph(w) {
-  const mine = state.sessions.filter((s) => s.ws === w.id);
-  const n = state.needsByWs[w.id];
-  const init = initiativeOf(w);
-  if ((n && n.error) || (init.row && init.row.blockers && init.row.blockers.length)) return 'blocked';
-  if (mine.some((s) => stateLabel(s).shown === 'blocked')) return 'blocked';
-  if (mine.some((s) => stateLabel(s).shown === 'working')) return 'working';
-  if (mine.some((s) => stateLabel(s).shown === 'quiet')) return 'quiet';
-  if (mine.length) return 'exited';
-  return 'idle';
-}
-function renderTree() {
-  const host = $('tree');
-  if (!host) return;
-  // group by repository (R3): `pmos` and `pmos ⑂ initiative/foo` are a parent and its child, not
-  // two peers. The key comes from the server — `git worktree list` names the main worktree first.
-  const groups = new Map();
-  for (const w of state.workspaces) {
-    const key = w.repo_key || w.root;
-    if (!groups.has(key)) groups.set(key, { key, name: w.repo_name || w.name, trees: [] });
-    groups.get(key).trees.push(w);
-  }
-  const totalNeeds = Object.values(state.needsByWs).reduce((a, v) => a + (v && v.count ? v.count : 0), 0);
-  const badRead = Object.values(state.needsByWs).some((v) => v && v.error);
-  const nc = $('needCount');
-  if (nc) {
-    nc.textContent = badRead ? 'needs unreadable' : (totalNeeds ? `${totalNeeds} need you` : '');
-    nc.dataset.bad = badRead ? '1' : '0';
-  }
-
-  const html = [...groups.values()].map((g) => {
-    const trees = g.trees.map((w) => treeRow(w, g)).join('');
-    return `<div class="repo-group" data-repo="${esc(g.key)}">
-      <button class="repo-head" data-repo-pick="${esc(g.key)}" title="${esc(g.key)}">
-        <span class="cue" aria-hidden="true">▾</span><span class="nm">${esc(g.name)}</span>
-        <small>${g.trees.length} tree${g.trees.length === 1 ? '' : 's'}</small>
-      </button>${trees}</div>`;
-  }).join('');
-  host.innerHTML = html || `<div class="empty">No repositories — run <b>pmos</b> inside one.</div>`;
-  host.querySelectorAll('[data-pick]').forEach((b) => b.onclick = () => selectWorkspace(b.dataset.pick));
-  // R6 — select the tree AND open the composer against it. Deliberately NOT awaited: selectWorkspace
-  // ends on four network reads (library · needs · branch · worktrees), and making the composer wait
-  // on them puts a variable delay between a click and any visible response — the failure mode the
-  // board cache was built to remove elsewhere. `state.wsId` is assigned synchronously at the top of
-  // selectWorkspace, so the form opens naming the RIGHT tree immediately; loadBranch() refills the
-  // branch picker when it lands, which is the same path the ＋ button already relies on.
-  host.querySelectorAll('[data-start]').forEach((b) => b.onclick = (e) => {
-    e.stopPropagation();
-    const p = selectWorkspace(b.dataset.start);
-    openNewForm();
-    p.then(() => { if (!$('newForm').hidden) renderNewTarget(); });
-  });
-  host.querySelectorAll('[data-repo-pick]').forEach((b) => b.onclick = () => openRepoDetail(b.dataset.repoPick));
-  host.querySelectorAll('[data-forget]').forEach((b) => b.onclick = (e) => { e.stopPropagation(); forgetWorkspace(b.dataset.forget); });
-  host.querySelectorAll('[data-toggle]').forEach((b) => b.onclick = (e) => {
-    e.stopPropagation();
-    const id = b.dataset.toggle;
-    // an explicit choice is remembered against the derived default, either way
-    if (treeOpen(state.workspaces.find((x) => x.id === id) || { id })) { state.openTrees.delete(id); state.closedTrees.add(id); }
-    else { state.closedTrees.delete(id); state.openTrees.add(id); }
-    renderTree();
-  });
-  host.querySelectorAll('.sess').forEach((b) => {
-    b.onclick = () => selectSession(b.dataset.id);
-    b.ondblclick = () => startRename(b.dataset.id);
-    b.onkeydown = (e) => { if (e.key === 'F2') { e.preventDefault(); startRename(b.dataset.id); } };
-  });
-  host.querySelectorAll('[data-rename]').forEach((b) => b.onclick = (e) => { e.stopPropagation(); startRename(b.dataset.rename); });
-  host.querySelectorAll('details.hz').forEach((d) => {
-    d.open = state.openHarness.has(d.dataset.id);
-    d.addEventListener('toggle', () => {
-      if (d.open) state.openHarness.add(d.dataset.id); else state.openHarness.delete(d.dataset.id);
-    });
-  });
-  paintRename();
-}
-function treeRow(w, g) {
-  const cur = w.id === state.wsId;
-  const open = treeOpen(w);
-  const init = initiativeOf(w);
-  const mine = state.sessions.filter((s) => s.ws === w.id);
-  const live = mine.filter((s) => s.state !== 'exited').length;
-  const n = state.needsByWs[w.id];
-  const gl = treeGlyph(w);
-  const board = boardFor(w);
-
-  // R5 — a stage is never shown without the branch it was derived from, and never without saying
-  // how old the derivation is. A board still deriving says so instead of showing nothing.
-  let wf = '';
-  if (init.row) {
-    const r = init.row;
-    const blocked = r.blockers && r.blockers.length;
-    const nextTxt = blocked ? `✗ ${r.blockers.length} blocked`
-      : (r.next && r.next.step ? `→ ${esc(r.next.step)}` : '');
-    wf = `<span class="wf"><span class="lane">${esc(r.lane || '')}</span>
-      <span class="stg">${esc(r.stage || '')}</span>
-      <span class="${blocked ? 'bl' : 'nx'}">${nextTxt}</span></span>`;
-  } else if (board && board.pending) {
-    wf = `<span class="wf"><span class="drv">deriving the ladder…</span></span>`;
-  } else if (board && board.ok === false) {
-    // The one case that stays RED. The engine's own message says which fault it is — an install
-    // that carries no engine reads differently from one whose engine threw — so it is carried
-    // through as the tooltip rather than compressed into two words (incident
-    // kit-workflow-engine-missing: "ladder unreadable" was every adopter's entire experience of
-    // this surface, and it named neither the cause nor anything the PM could act on).
-    wf = `<span class="wf">${broken('ladder unreadable', board.error || '')}</span>`;
-  } else if (board && board.ok === true && board.empty === true) {
-    // VERIFIED ABSENT, and the sentence is about the REPOSITORY, not the branch: the engine read
-    // this repo successfully and it has no initiative records. Pointing the workspace at an
-    // ordinary repo is a supported thing to do, so this is the calm common case, not a defect.
-    wf = `<span class="wf">${absent('no initiatives yet', 'this repository has no planning/initiatives/ records — the workspace read it successfully')}</span>`;
-  } else if (init.kind === 'norecord') {
-    // An initiative BRANCH whose record is missing — genuinely a gap in the repo, but not a failed
-    // read, so it stays quiet and says precisely which of the two it is.
-    wf = `<span class="wf">${absent('no record for this branch', `the branch names initiative "${init.id}" but planning/initiatives/${init.id}.md is not there`)}</span>`;
-  } else if (init.kind === 'branch') {
-    wf = `<span class="wf">${absent('not an initiative branch', `"${w.branch}" does not match initiative/<id>, so no ladder is derived for it`)}</span>`;
-  } else if (init.kind === 'nogit') {
-    wf = `<span class="wf">${absent('not a git repository', 'an ordinary folder — sessions run here, but nothing git-derived applies to it')}</span>`;
-  } else if (init.kind === 'branchbroken') {
-    // The other half of the split: git IS here and the read FAILED. This one keeps the alarm.
-    wf = `<span class="wf">${broken('branch unreadable', init.condition || '')}</span>`;
-  } else if (init.kind === 'detached') {
-    wf = `<span class="wf">${absent('detached HEAD', 'no branch is checked out, so no initiative is derived from one')}</span>`;
-  }
-  // the attribution line: which branch this ladder came from, and as of when
-  const stamp = board && board.as_of ? new Date(board.as_of).toLocaleTimeString() : null;
-  const attrib = init.row
-    ? `<span class="attrib">derived on <b>${esc(w.branch || '?')}</b>${stamp ? ` · as of ${esc(stamp)}` : ''}${board && board.stale ? ' · refreshing' : ''}</span>`
-    : '';
-
-  // R6 — the verb is performed. This used to call selectWorkspace() and stop, and its own tooltip
-  // admitted it ("select this tree, THEN start a session"). `data-start` selects the tree AND opens
-  // the composer against it, focused.
-  const sessHtml = open ? mine.map((s) => sessionRow(s)).join('')
-    + `<button class="tree-new" data-start="${esc(w.id)}" title="start a session in ${esc(w.name)}">＋ session here</button>`
-    : '';
-  const collapsed = !open && mine.length
-    ? `<span class="rollup">${mine.length} session${mine.length === 1 ? '' : 's'}${live ? '' : ' · all exited'}</span>` : '';
-
-  return `<div class="treerow" data-id="${esc(w.id)}" data-open="${open}" data-st="${gl}">
-    <div class="tr-head">
-      <button class="tr-toggle" data-toggle="${esc(w.id)}" aria-expanded="${open}"
-        aria-label="${open ? 'Collapse' : 'Expand'} ${esc(init.label)}"><span class="cue" aria-hidden="true">${open ? '▾' : '▸'}</span></button>
-      <button class="tr" data-pick="${esc(w.id)}" aria-current="${cur}" title="${esc(w.root)}">
-        <span class="r1"><span class="g" aria-hidden="true">${TREE_GLYPH[gl] || '·'}</span>
-          <span class="nm">${esc(init.label)}</span>
-          ${w.home ? `<span class="tag" title="the folder pmos was launched in — it is always hosted and cannot be removed">home</span>` : ''}
-          <span class="dir">${esc(w.name === g.name ? 'main tree' : w.name)}</span></span>
-        <span class="r2">${wf}${n && n.count ? `<span class="needs-n">${n.count} need you</span>` : ''}${n && n.error ? broken('needs unreadable', n.error) : ''}${collapsed}</span>
-        ${attrib}
-      </button>
-      ${w.home ? '' : `<button class="forget" data-forget="${esc(w.id)}" aria-label="Stop hosting ${esc(w.name)}" title="${live ? 'end its sessions first' : 'stop hosting this repo (the repo is untouched)'}">✕</button>`}
-    </div>
-    <div class="tr-sessions">${sessHtml}</div>
-  </div>`;
-}
-// One session, with everything the old pane carried — nothing about a row's CONTENT changes here,
-// only where it sits (R1). Glyph, state word, quiet duration, open-call age, opening focus, the
-// agent's last words, the harness drill-in and rename all come through unchanged.
-function sessionRow(s) {
-  const st = stateLabel(s);
-  return `<div class="sessrow" data-id="${s.id}">
-    <button class="sess" data-id="${s.id}" data-state="${st.shown}" aria-current="${s.id === state.active}"
-      aria-label="${esc(s.name)} — ${esc(st.text)}">
-      <span class="r1"><span class="st" aria-hidden="true">${GLYPH[st.shown] || '•'}</span>
-        <span class="nm">${esc(s.name)}${s.origin && s.origin.startsWith('schedule:') ? '<span class="schtag">scheduled</span>' : ''}</span>
-        <span class="chip">${esc(st.text)}</span></span>
-      ${subLine(s)}
-      ${saysLine(s)}
-    </button>
-    <button class="ren" data-rename="${s.id}" aria-label="Rename ${esc(s.name)}" title="rename (F2)">✎</button>
-  </div>${harnessDrawer(s)}`;
-}
-
-/* The board arrives from the server's cache, one read per REPOSITORY (not per tree, not per row).
- * A cold read answers `pending` in milliseconds and the derivation runs in a child process — it
- * costs ~30s on this repo and is fully synchronous, so it must never sit on a request path. While
- * it is pending the rows say "deriving the ladder…" rather than showing nothing: a blank stage is
- * indistinguishable from "this tree has no initiative", and those are different facts. */
-window.addEventListener('pagehide', () => { state.boardsStopped = true; });
-async function loadBoards() {
-  if (state.boardsStopped) return;
-  const wanted = new Map();
-  for (const w of state.workspaces) if (w.repo_key && !wanted.has(w.repo_key)) wanted.set(w.repo_key, w.id);
-  for (const [key, wsId] of wanted) {
-    if (state.boardWanted.has(key)) continue;
-    state.boardWanted.add(key);
-    (async () => {
-      try {
-        const r = await fetch('/api/console?name=workflow&ws=' + encodeURIComponent(wsId));
-        const payload = await r.json();
-        state.boards[key] = payload;
-        renderTree();
-        // pending is not failed — come back for it, rather than leaving a row saying "deriving"
-        // forever if the child never lands
-        if (payload && payload.pending && !state.boardsStopped) {
-          const tries = (state.boardTries[key] || 0) + 1;
-          state.boardTries[key] = tries;
-          // bounded: a derivation that never lands leaves the row saying so, rather than a request
-          // every 3s forever — which in the browser suite showed up as failed requests after teardown
-          if (tries <= 40) setTimeout(() => { state.boardWanted.delete(key); loadBoards(); }, 3000);
-          else state.boardWanted.delete(key);
-        }
-        else state.boardWanted.delete(key);
-      } catch {
-        state.boards[key] = { ok: false, error: 'could not reach the workspace server for the ladder' };
-        state.boardWanted.delete(key);
-        renderTree();
-      }
-    })();
-  }
-}
-
-function renderWorkspaces() {
-  const html = state.workspaces.map((w) => {
-    const n = state.sessions.filter((s) => s.ws === w.id && s.state !== 'exited').length;
-    const cur = w.id === state.wsId;
-    return `<div class="wsrow" data-id="${esc(w.id)}">
-      <button class="ws" data-pick="${esc(w.id)}" aria-current="${cur}" title="${esc(w.root)}">
-        <span class="cue" aria-hidden="true">${cur ? '▾' : '▸'}</span>
-        <span class="nm">${esc(w.name)}</span>
-        ${w.home ? '<span class="tag">home</span>' : ''}
-        <small>${n ? `${n} live` : ''}</small>
-      </button>
-      ${w.home ? '' : `<button class="forget" data-forget="${esc(w.id)}" aria-label="Stop hosting ${esc(w.name)}" title="${n ? 'end its sessions first' : 'stop hosting this repo (the repo is untouched)'}">✕</button>`}
-    </div>`;
-  }).join('');
-  $('workspaces').innerHTML = html || `<div class="empty">No workspaces — run <b>pmos</b> inside a repo.</div>`;
-  $('workspaces').querySelectorAll('[data-pick]').forEach((b) => b.onclick = () => selectWorkspace(b.dataset.pick));
-  $('workspaces').querySelectorAll('[data-forget]').forEach((b) => b.onclick = () => forgetWorkspace(b.dataset.forget));
-}
-async function forgetWorkspace(id) {
-  const w = state.workspaces.find((x) => x.id === id);
-  const live = state.sessions.filter((s) => s.ws === id);
-  if (live.length) { flash(`“${w ? w.name : 'that workspace'}” still has ${live.length} session(s) — close them first.`); return; }
-  try { await fetch('/api/workspaces/forget', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }) }); } catch {}
-}
-async function addWorkspace(root) {
-  if (!root || !root.trim()) return false;
-  try {
-    const r = await fetch('/api/workspaces', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ root: root.trim(), focus: false }) });
-    const j = await r.json();
-    if (!j.ok) { flash(j.error || 'could not add that path'); return false; }
-    selectWorkspace(j.workspace.id);
-    closeAddWs();
-    return true;
-  } catch { flash('could not reach the server'); return false; }
-}
-// `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; }, ms);
-}
-
-// 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
-// only as the value to assume before hello lands.
-let QUIET_AFTER_MS = 30000;
-function shortDur(ms) {
-  if (ms == null) return '';
-  const sec = Math.round(ms / 1000);
-  if (sec < 60) return sec + 's';
-  const min = Math.round(sec / 60);
-  return min < 60 ? min + 'm' : Math.round(min / 60) + 'h';
-}
-// 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 ? { 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 null;
-  const ms = Date.parse(oc.sinceTs);
-  if (!Number.isFinite(ms)) return null;
-  const age = Date.now() - ms;
-  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 { 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() {
-  // The rows themselves live in the tree now (R1). This stays as the single entry point every
-  // session push already calls, so the tree, the tab strips and the overlay all repaint together.
-  renderTree();
-  renderTabs();
-  updateEmptyOverlay();
-  paintRename();
-}
-// The sub-line: the run's OWN focus, not `agent · cwd` (which was identical on every row in a
-// workspace — zero information). The CLI's `ai-title` is FROZEN at the first prompt (it carries no
-// timestamp and never updates), so it is labelled "opening focus" and never framed as what the run
-// is doing now. When there is no resolvable title — a shell/codex/untitled/unresolved session — it
-// falls back to the shipped `agent · cwd`, so the line is never blank and never a guessed title.
-// When a title IS shown, `agent · cwd` moves into the harness drawer (see harnessDrawer), not lost.
-// Split inner-from-wrapper so the heartbeat's in-place painter can compare and assign innerHTML.
-// Comparing outerHTML against a source string never matches (the browser re-serialises), so it
-// would rewrite the node on every beat — and a node rewritten twice a second is a node the PM
-// cannot select text in.
-function subInner(s) {
-  const title = s.hx && s.hx.title;
-  if (title) return `<span class="lead">opening focus</span> ${esc(title)}`;
-  return `${esc(s.agent)} · ${esc(s.cwd)}`;
-}
-function subLine(s) { return `<span class="sub">${subInner(s)}</span>`; }
-// The agent's own last words, verbatim — never a paraphrase (a summary would be another model
-// call per session, and a drifting paraphrase was a leg-A defect). When the parser cannot read,
-// it says so: an unreadable signal must never render as an empty line.
-// {cls, html} rather than a finished span, for the same in-place-repaint reason as subInner — and
-// here the CLASS also changes (`says` for real words, `says na` for a stated reason), so the
-// painter has to be able to set the two independently.
-function saysParts(s) {
-  if (s.lastWords) return { cls: 'says', html: esc(s.lastWords) };
-  const why = s.missing && s.missing.lastWords;
-  return why ? { cls: 'says na', html: esc(why) } : null;
-}
-function saysLine(s) {
-  const p = saysParts(s);
-  return p ? `<span class="${p.cls}">${p.html}</span>` : '';
-}
-// The harness readout: a drill-in, not a rail. The leg-A grilling established the harness is
-// near-static within a run, so this is read once to understand a session — not watched.
-// Unavailable facts are drawn as unavailable, never as a plausible constant.
-function fmtTokens(n) {
-  if (n == null) return '—';
-  if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
-  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
-  if (n >= 1e3) return Math.round(n / 1e3) + 'k';
-  return String(n);
-}
-// The harness readout. Everything here comes from the CLI's own structured transcript, because
-// the CLI does not PRINT its model, effort, tokens or skill set to the terminal — parsing
-// scrollback for them returned four empty rows, which is what sent this back for a second pass.
-// Rows that genuinely cannot be known are still drawn as unavailable, never as a plausible value.
-function harnessRows(s) {
-  const hx = s.hx || { missing: {} };
-  const m = hx.missing || {};
-  const rows = [];
-  const na = (why) => `<dd class="na">${esc(why)}</dd>`;
-
-  if (m.all) {
-    // one honest line beats six apologies
-    rows.push(`<dt>harness</dt>${na(m.all)}`);
-  } else {
-    rows.push(hx.model
-      ? `<dt>model</dt><dd><b>${esc(hx.model)}</b>${hx.effort ? ' · effort ' + esc(hx.effort) : ''}` +
-        `${hx.turns ? ` <span class="src">${hx.turns} turns</span>` : ''}</dd>`
-      : `<dt>model</dt>${na(m.model || 'not available')}`);
-    rows.push(hx.tokens
-      ? `<dt>tokens</dt><dd><b>${fmtTokens(hx.tokens.output)}</b> out · ${fmtTokens(hx.tokens.input)} in` +
-        ` <span class="src">${fmtTokens(hx.tokens.cacheRead)} cached — no % (the window size is not in the record)</span></dd>`
-      : `<dt>tokens</dt>${na(m.tokens || 'not available')}`);
-    rows.push(hx.tools
-      ? `<dt>tools</dt><dd>${Object.entries(hx.tools.counts).sort((a, b) => b[1] - a[1]).slice(0, 6)
-          .map(([n, c]) => `${esc(n)} ×${c}`).join(' · ')} <span class="src">${hx.tools.total} calls</span></dd>`
-      : `<dt>tools</dt>${na(m.tools || 'not available')}`);
-    rows.push(hx.skills
-      ? `<dt>skills</dt><dd><b>${hx.skills.count} available</b>` +
-        `${hx.skills.names.length ? ` <span class="src">${esc(hx.skills.names.slice(0, 5).join(', '))}…</span>` : ''}` +
-        ` <span class="src">available, not “in use” — the CLI records no such event</span></dd>`
-      : `<dt>skills</dt>${na(m.skills || 'not available')}`);
-    // agent · cwd moved here from the row's sub-line (which now carries the run's title). Useful
-    // once, when reading a session — not worth a per-row line where it repeated on every session.
-    rows.push(`<dt>where</dt><dd>${esc(s.agent)} <span class="src">${esc(s.cwd)}</span></dd>`);
-    rows.push('<dt>instructions</dt><dd>CLAUDE.md · AGENTS.md <span class="src">identical in every session here</span></dd>');
-    // The one row that stays unavailable, and it is architectural rather than a parsing limit:
-    // Quality gate state is GitHub CI, Review gate state is hosted Supabase, and the workspace
-    // is deliberately backend-free. No parser reaches it.
-    rows.push(`<dt>gates</dt>${na('not visible from the workspace — gate state is hosted')}`);
-    if (hx.cliVersion) rows.push(`<dt>cli</dt><dd><span class="src">${esc(hx.cliVersion)} — undocumented layout; a CLI upgrade may blank these rows</span></dd>`);
-  }
-  return rows.join('');
-}
-// The rows are split out of the drawer so the heartbeat can repaint the <dl> ALONE. Replacing the
-// whole <details> would slam it shut on every push — the drill-in has to survive its own updates.
-function harnessDrawer(s) {
-  return `<details class="hz" data-id="${s.id}">
-    <summary>model + harness<span class="sr">${esc(s.name)}</span></summary>
-    <dl class="kv">${harnessRows(s)}</dl></details>`;
-}
-// What a session push must REBUILD the DOM for, as opposed to repaint in place. Everything here is
-// baked into renderSessions'/renderTabs' markup and has no in-place painter: the row's identity,
-// its workspace, its name, its raw lifecycle state (which drives the close button's wording and the
-// per-workspace live count), and the `scheduled` tag. Liveness and harness are deliberately ABSENT
-// — they change on every heartbeat and are what paintVolatile exists to carry.
-function structSig(list) {
-  // delimited with the ASCII unit/record separators, so a name ending where a state begins cannot
-  // fingerprint identically to a different split of the same characters
-  return list.map((s) => [s.id, s.ws, s.name, s.state, s.origin || ''].join('')).join('');
-}
-// The in-place repaint for a heartbeat push: everything on a row that changes while the run is
-// running. Never innerHTML on the pane itself — an open drill-in, an in-flight rename, the sidebar's
-// scroll position and any text the PM has selected all survive this.
-function paintVolatile() {
-  tickQuiet();                       // chip, glyph, data-state, accessible name (both surfaces)
-  for (const s of mySessions()) {
-    const row = document.querySelector(`#tree .sessrow[data-id="${s.id}"]`);
-    if (!row) continue;
-    // the sub-line ("opening focus …" or the agent · cwd fallback) and the agent's last words —
-    // both come from the server and both were frozen at the last lifecycle event. Assign only on a
-    // real difference: an unconditional rewrite twice a second would drop the PM's text selection.
-    const sub = row.querySelector('.sub');
-    if (sub) { const next = subInner(s); if (sub.innerHTML !== next) sub.innerHTML = next; }
-    const says = row.querySelector('.says'), nextSays = saysParts(s);
-    if (nextSays && says) {
-      if (says.className !== nextSays.cls) says.className = nextSays.cls;
-      if (says.innerHTML !== nextSays.html) says.innerHTML = nextSays.html;
-    } else if (nextSays) {
-      row.querySelector('.sess').insertAdjacentHTML('beforeend', `<span class="${nextSays.cls}">${nextSays.html}</span>`);
-    } else if (says) { says.remove(); }
-    // the drill-in's rows — model, tokens, tools, skills. Only the <dl> is replaced, so the
-    // <details> element itself (and therefore its open/closed state) is untouched.
-    const dl = document.querySelector(`#tree details.hz[data-id="${s.id}"] .kv`);
-    if (dl) { const next = harnessRows(s); if (dl.innerHTML !== next) dl.innerHTML = next; }
-  }
-}
-// A row must be able to go quiet with NO server push. Repaint the chip, glyph, data-state and
-// accessible name only — never innerHTML — so an open drill-in and an in-flight rename survive.
-function tickQuiet() {
-  for (const s of mySessions()) {
-    const btn = document.querySelector(`.sess[data-id="${s.id}"]`);
-    if (!btn) continue;
-    const st = stateLabel(s);
-    if (btn.dataset.state !== st.shown) {
-      btn.dataset.state = st.shown;
-      const g = btn.querySelector('.st'); if (g) g.textContent = GLYPH[st.shown] || '•';
-    }
-    const chip = btn.querySelector('.chip');
-    if (chip && chip.textContent !== st.text) {
-      chip.textContent = st.text;
-      btn.setAttribute('aria-label', `${s.name} — ${st.text}`);
-    }
-    // both groups list every session, so the tick has to reach every strip that shows this one
-    document.querySelectorAll(`.stabs .stab-wrap[data-id="${s.id}"]`).forEach((tab) => {
-      if (tab.dataset.state === st.shown) return;
-      tab.dataset.state = st.shown;
-      // the tab's glyph is derived too, so it has to move with the colour — otherwise the fix in
-      // renderTabs would hold only until the first tick that flipped the state without a re-render.
-      const g = tab.querySelector('.g'); if (g) g.textContent = GLYPH[st.shown] || '•';
-      const btnTab = tab.querySelector('.stab'); if (btnTab) btnTab.setAttribute('aria-label', `${s.name} — ${st.text}`);
-    });
-  }
-}
-try { const _q = setInterval(tickQuiet, 5000); if (_q.unref) _q.unref(); } catch {}
-
-function renderTabs() {
-  // Both groups list EVERY session (R6): clicking a tab shows that session in THAT group, which
-  // is how the PM chooses what goes where without a drag.
-  renderTabStrip(0);
-  if (splitOn()) renderTabStrip(1);
-  paintGroups();
-}
-function renderTabStrip(gi) {
-  const host = $(GROUP_TABS[gi]);
-  if (!host) return;
-  const act = state.groups[gi].activeId;
-  // wrap = two SIBLING buttons (select + close) — no interactive-inside-interactive nesting
-  host.innerHTML = mySessions().map((s) => {
-    // the glyph and the accessible name read the DERIVED state, like the wrapper's data-state
-    // beside them. Reading the raw `s.state` here drew a `working` ● in the `quiet` colour — the
-    // shape said one thing and the colour said another, on the surface most looked at.
-    const st = stateLabel(s);
-    return `
-    <div class="stab-wrap" data-state="${st.shown}" data-id="${s.id}" data-active="${s.id === act}">
-      <button class="stab" role="tab" data-id="${s.id}" aria-selected="${s.id === act}"
-        aria-label="${esc(s.name)} — ${esc(st.text)}" title="double-click to rename">
-        <span class="g" aria-hidden="true">${GLYPH[st.shown] || '•'}</span>${esc(s.name)}</button>
-      <button class="x" data-close="${s.id}"
-        aria-label="${s.state === 'exited' ? 'remove' : 'close'} ${esc(s.name)}">✕</button>
-    </div>`;
-  }).join('');
-  host.querySelectorAll('.stab').forEach((b) => {
-    b.onclick = () => selectSession(b.dataset.id, gi);
-    b.ondblclick = () => startRename(b.dataset.id);
-  });
-  // live tab ✕ kills the process (state flips to exited); exited tab ✕ removes it for good
-  host.querySelectorAll('.x').forEach((b) => b.onclick = () => send({ t: 'kill', id: b.dataset.close }));
-}
-function syncActiveState() {
-  document.querySelectorAll('.sess,.stab-wrap').forEach((b) => {
-    const s = state.sessions.find((x) => x.id === b.dataset.id);
-    // the DERIVED state (working|quiet|exited), never the raw one. Writing `s.state` here put
-    // `working` back over a row that renderSessions/tickQuiet had correctly painted `quiet`, so
-    // the dot's colour depended on which of the two ran last — a coin-flip at the old push rate,
-    // and a visible 2s/5s flicker once the liveness heartbeat started pushing on a cadence.
-    if (s) b.dataset.state = stateLabel(s).shown;
-  });
-  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
-// creation is a guess; the PM learns what the run actually is minutes later. Server pushes
-// rebuild these lists, so the edit is held in state and re-painted after every render. ──
-function startRename(id) {
-  const s = state.sessions.find((x) => x.id === id);
-  if (!s) return;
-  state.renaming = id;
-  state.renameVal = s.name;
-  paintRename();
-}
-function cancelRename() { state.renaming = null; state.renameVal = ''; }
-function commitRename() {
-  const id = state.renaming, val = state.renameVal;
-  cancelRename();
-  const s = state.sessions.find((x) => x.id === id);
-  if (id && val.trim() && s && val.trim() !== s.name) send({ t: 'rename', id, name: val.trim() });
-  renderSessions();
-}
-function paintRename() {
-  const id = state.renaming;
-  if (!id) return;
-  const row = document.querySelector(`#tree .sessrow[data-id="${id}"]`);
-  // rename in place wherever the PM double-clicked: the sidebar row, or either group's tab
-  const tab = $(GROUP_TABS[state.focusG]).querySelector(`.stab-wrap[data-id="${id}"]`)
-    || document.querySelector(`.stabs .stab-wrap[data-id="${id}"]`);
-  const host = row || tab;
-  if (!host) return;
-  const input = document.createElement('input');
-  input.className = 'renbox';
-  input.value = state.renameVal;
-  input.setAttribute('aria-label', 'Rename session');
-  input.maxLength = 60;
-  input.oninput = () => { state.renameVal = input.value; };
-  input.onkeydown = (e) => {
-    e.stopPropagation();
-    if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
-    else if (e.key === 'Escape') { e.preventDefault(); cancelRename(); renderSessions(); }
-  };
-  input.onblur = () => { if (state.renaming === id) commitRename(); };
-  host.innerHTML = '';
-  host.appendChild(input);
-  input.focus(); input.select();
-}
-
-// ── terminals ──
-// Sessions live in GROUPS (R6). One group is the shipped behaviour; a split layout shows a second
-// beside it. A session is visible in at most one group at a time — its pane MOVES between hosts
-// rather than being duplicated, so there is never a second xterm bound to the same PTY.
-const GROUP_HOST = ['termhost', 'termhost1'];
-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; syncScratchpad(); }
-
-function ensureTerm(id, g) {
-  const want = typeof g === 'number' ? g : 0;
-  let t = state.terms.get(id);
-  if (t) {
-    if (t.g !== want) { t.g = want; groupHost(want).appendChild(t.el); fitOne(id); }
-    return t;
-  }
-  const el = document.createElement('div');
-  el.className = 'termpane'; el.dataset.id = id;
-  groupHost(want).appendChild(el);
-  const term = new window.Terminal({
-    fontFamily: '"IBM Plex Mono", ui-monospace, monospace', fontSize: 13, theme: xtheme(),
-    cursorBlink: true, scrollback: 5000, allowProposedApi: true,
-  });
-  let fit = null;
-  if (FitAddon) { fit = new FitAddon(); term.loadAddon(fit); }
-  if (WebLinks) term.loadAddon(new WebLinks());
-  term.open(el);
-  // ⌘K must open the palette even while the terminal holds focus — intercept before xterm
-  // sends it to the PTY (return false = don't pass the key through).
-  term.attachCustomKeyEventHandler((e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-      if (e.type === 'keydown') { e.preventDefault(); togglePalette(); }
-      return false;
-    }
-    return true;
-  });
-  term.onData((d) => send({ t: 'input', id, data: applyCtrl(d) }));
-  term.onResize(({ cols, rows }) => send({ t: 'resize', id, cols, rows }));
-  t = { term, fit, el, g: want };
-  state.terms.set(id, t);
-  return t;
-}
-function fitOne(id) {
-  const t = state.terms.get(id); if (!t || !t.fit) return;
-  requestAnimationFrame(() => { try { t.fit.fit(); } catch {} });
-}
-// Anything that changes the terminal's box must re-fit it, or xterm keeps rendering more rows
-// than fit and the BOTTOM OF THE TERMINAL disappears under the clip (R9). Observers on the hosts
-// catch every cause — the needs strip, the reader, a folded pane, the tab strip wrapping, a window
-// resize, a layout change, a split — instead of a fitOne() call sprinkled at each call site.
-// EVERY group's visible session is re-fitted: fitting only the focused one leaves the other
-// group rendering rows for the width it had before the split.
-let refitTimer = null;
-function refit() {
-  clearTimeout(refitTimer);
-  refitTimer = setTimeout(() => {
-    for (const g of state.groups) if (g.activeId) fitOne(g.activeId);
-  }, 30);
-}
-if (window.ResizeObserver) { const ro = new ResizeObserver(refit); ro.observe($('termhost')); ro.observe($('termhost1')); }
-window.addEventListener('resize', refit);
-document.addEventListener('visibilitychange', () => { if (!document.hidden) refit(); });
-// first paint measures the fallback font; the real metrics arrive with the webfont
-if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => { for (const [id] of state.terms) fitOne(id); });
-
-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(); 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);
-  if (want < 0) want = state.focusG;
-  if (want === 1 && !splitOn()) want = 0;
-  // the same session must never render in both groups — the other one gives it up
-  const other = want === 0 ? 1 : 0;
-  if (state.groups[other].activeId === id) state.groups[other].activeId = null;
-  state.groups[want].activeId = id;
-  state.focusG = want;
-  syncActive();
-  store.set('active', id);   // survives reloads (R7)
-  // attach once per connection — re-selecting an attached session must not reset + re-replay
-  if (!state.attached.has(id)) { state.attached.add(id); send({ t: 'attach', id }); }
-  ensureTerm(id, want);
-  paintGroups();
-  fitOne(id);
-  const t = state.terms.get(id); if (t) setTimeout(() => t.term.focus(), 0);
-  updateExitedOverlay(); updateEmptyOverlay();
-}
-// One place decides what is visible where: each group shows exactly its own activeId, every other
-// pane is hidden, and the sidebar/tab selection marks follow.
-function paintGroups() {
-  for (const [sid, t] of state.terms) {
-    const gr = state.groups[t.g];
-    t.el.classList.toggle('on', !!gr && gr.activeId === sid);
-  }
-  const shown = new Set(state.groups.map((gr) => gr.activeId).filter(Boolean));
-  document.querySelectorAll('.sess').forEach((b) => b.setAttribute('aria-current', String(shown.has(b.dataset.id))));
-  GROUP_TABS.forEach((tid, gi) => {
-    const host = $(tid); if (!host) return;
-    const act = state.groups[gi].activeId;
-    host.querySelectorAll('.stab').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.id === act)));
-    host.querySelectorAll('.stab-wrap').forEach((b) => b.dataset.active = String(b.dataset.id === act));
-  });
-  $('group0').dataset.focus = String(state.focusG === 0);
-  $('group1').dataset.focus = String(state.focusG === 1);
-  $('noSess1').classList.toggle('on', splitOn() && !state.groups[1].activeId);
-}
-function clearActive() {
-  state.groups.forEach((g) => { g.activeId = null; });
-  syncActive();
-  document.querySelectorAll('.termpane').forEach((e) => e.classList.remove('on'));
-  paintGroups();
-  updateExitedOverlay(); updateEmptyOverlay();
-}
-
-// ── split / un-split (R6) ──
-function applySplit(on) {
-  const was = splitOn();
-  $('group1').hidden = !on;
-  $('groups').dataset.split = on ? 'on' : 'off';
-  if (on && !state.groups[1].activeId) {
-    // fill the second group with the next session that is not already on screen; if there is
-    // none, the empty-group card offers `＋ new session` rather than a black rectangle
-    const taken = new Set([state.groups[0].activeId]);
-    const next = mySessions().find((s) => !taken.has(s.id));
-    if (next) {
-      state.groups[1].activeId = next.id;
-      if (!state.attached.has(next.id)) { state.attached.add(next.id); send({ t: 'attach', id: next.id }); }
-      ensureTerm(next.id, 1);
-    }
-  }
-  if (!on && state.groups[1].activeId) {
-    // un-split does NOT close the session — it goes back to being a tab in the primary group
-    const id = state.groups[1].activeId;
-    state.groups[1].activeId = null;
-    const t = state.terms.get(id);
-    if (t) { t.g = 0; groupHost(0).appendChild(t.el); }
-    if (state.focusG === 1) state.focusG = 0;
-  }
-  if (was !== on) renderTabs();
-  syncActive();
-  paintGroups();
-}
-function updateExitedOverlay() {
-  const s = state.sessions.find((x) => x.id === state.active);
-  const ov = $('exited');
-  if (s && s.state === 'exited') {
-    ov.classList.add('on');
-    // show WHY it exited (exit code / spawn error), not just "has exited"
-    $('exitedMsg').innerHTML = `<b>${esc(s.name)}</b> has exited.` +
-      (s.note ? `<span class="reason">${esc(s.note)}</span>` : '');
-    $('respawnBtn').onclick = () => send({ t: 'respawn', id: s.id });
-    $('removeBtn').onclick = () => send({ t: 'remove', id: s.id });
-  } else ov.classList.remove('on');
-  refreshScratchSend();   // send-to-terminal follows whether the active session is live
-}
-function updateEmptyOverlay() {
-  // a workspace with no sessions must say so — not show another workspace's terminal
-  const w = state.workspaces.find((x) => x.id === state.wsId);
-  const on = !state.active && mySessions().length === 0;
-  $('noSessWs').textContent = w ? w.name : 'this workspace';
-  $('noSess').classList.toggle('on', on);
-}
-
-// ── library ──
-// Two lenses over the same file set: the initiative lens (how the PM thinks — one unit of
-// work, all its artifacts) and the folder lens (how the repo is laid out). Every document
-// reachable in one is reachable in the other.
-let lastLibLoad = 0;
-async function loadLibrary() {
-  lastLibLoad = Date.now();
-  try {
-    const r = await fetch('/api/library?ws=' + encodeURIComponent(state.wsId || ''));
-    state.lib = await r.json();
-  } catch { state.lib = null; }
-  renderLibrary();
-}
-// The library is a filesystem SNAPSHOT — a folder or file added after it loaded won't appear on
-// its own (the reported defect). Re-scan on an explicit ↻, and automatically when the PM returns
-// to the tab (throttled), so switching to an editor, adding a folder, and switching back shows it.
-function refreshLibrary() { loadLibrary(); }
-function maybeAutoRefreshLibrary() { if (state.wsId && Date.now() - lastLibLoad > 4000) loadLibrary(); }
-window.addEventListener('focus', maybeAutoRefreshLibrary);
-document.addEventListener('visibilitychange', () => { if (!document.hidden) maybeAutoRefreshLibrary(); });
-
-/* ── The rail's detail (R7·R8·R9) ────────────────────────────────────────────────────────────────
- *
- * The four standing lenses are replaced by ONE context-driven detail: a repository group gives repo
- * detail (the complete folder map, its schedules, its history — the three views that were never
- * initiative-scoped), a tree row gives that initiative's DOSSIER.
- *
- * The dossier is the promoted leg-A specimen (prototype/workspace-initiative-nav, Option B r2). Its
- * one non-obvious rule: THE LANE OWNS THE DENOMINATOR. A chore owes an intent, not a PRD; a
- * discovery spike owes a brief and nothing else. Measuring every initiative against one universal
- * slate — r1 of the specimen did exactly that — makes a complete discovery read as nine failures.
- * `n/a` here is never inferred: it comes from the engine's own step status.
- */
-const DOSSIER_GROUPS = [
-  { key: 'strategy', label: 'strategy', roles: ['record', 'brief', 'research', 'scoping', 'intake', 'OKR'] },
-  { key: 'spec',     label: 'spec',     roles: ['PRD', 'rubric', 'user stories', 'explainer'] },
-  { key: 'design',   label: 'design',   roles: ['design brief', 'design', 'copy brief', 'copy', 'specimen', 'grilling'] },
-  { key: 'build',    label: 'build',    roles: ['reconcile', 'harness', 'fixture'] },
-  { key: 'learning', label: 'learning', roles: ['eval', 'findings', 'dogfood', 'rejected'] },
-];
-// Which ladder steps speak for which group, so a group can say "n/a for this lane" in the engine's
-// own words instead of a guess of our own.
-const GROUP_STEPS = {
-  strategy: ['route', 'anchor'],
-  spec: ['understand', 'spec', 'prototype'],
-  design: ['prototype'],
-  build: ['priors', 'contract', 'build', 'quality'],
-  learning: ['review', 'explain', 'accept'],
-};
-
-function detailWs() {
-  const id = state.detail.wsId || state.wsId;
-  return state.workspaces.find((w) => w.id === id) || null;
-}
-// The library for whichever tree the detail is about — NOT necessarily the selected one. Fetched on
-// demand and cached, because a dossier must be openable for a tree the PM is not standing in.
-async function ensureLib(wsId) {
-  if (!wsId) return null;
-  if (wsId === state.wsId && state.lib) { state.libByWs[wsId] = state.lib; return state.lib; }
-  if (state.libByWs[wsId]) return state.libByWs[wsId];
-  try {
-    const r = await fetch('/api/library?ws=' + encodeURIComponent(wsId));
-    const j = await r.json();
-    state.libByWs[wsId] = j;
-    return j;
-  } catch { return null; }
-}
-/* Open an initiative's dossier. THIS IS A READ: it never switches working tree, never changes
- * state.wsId, and never touches the branch. Only clicking a tree row does that (R9). */
-async function openInitiative(id, wsId) {
-  state.detail = { kind: 'initiative', id, wsId: wsId || state.wsId };
-  state.lens = 'dossier';
-  showRail();
-  renderLibrary();
-  await ensureLib(state.detail.wsId);
-  renderLibrary();
-}
-function openRepoDetail(repoKey) {
-  state.detail = { kind: 'repo', id: repoKey, wsId: state.wsId };
-  if (state.lens === 'dossier') state.lens = 'folders';
-  renderLibrary();
-}
-// The sub-views available for what is currently selected. `dossier` only exists when an initiative
-// is in view — a dead tab that cannot be filled is worse than an absent one.
-function renderLensTabs() {
-  const host = $('lensTabs');
-  if (!host) return;
-  const views = state.detail.kind === 'initiative'
-    ? [['dossier', 'dossier'], ['folders', 'folders'], ['scheduled', 'scheduled'], ['history', 'history']]
-    : [['folders', 'folders'], ['scheduled', 'scheduled'], ['history', 'history']];
-  host.innerHTML = views.map(([k, label]) =>
-    `<button role="tab" data-lens="${k}" aria-selected="${state.lens === k}">${esc(label)}</button>`).join('');
-  host.querySelectorAll('button').forEach((b) => b.onclick = () => {
-    state.lens = b.dataset.lens; store.set('lens', state.lens);
-    $('libFind').placeholder = FIND_PLACEHOLDER[state.lens] || 'filter the library…';
-    renderLibrary();
-  });
-}
-// R9 — name the repository these documents come from. getWs() silently falls back to the home
-// workspace on an id it cannot resolve, so a rail that does not say what it is reading can show
-// another repository's files with no visual difference at all.
-function renderReading() {
-  const el = $('libWho');
-  if (!el) return;
-  const w = detailWs();
-  if (!w) { el.textContent = ''; return; }
-  const away = w.id !== state.wsId;
-  el.textContent = w.name + (away ? ' · not the selected tree' : '');
-  el.dataset.away = away ? '1' : '0';
-  el.title = w.root;
-}
-
-function dossierRow(a) {
-  return `<button class="dz-art" data-doc="${esc(a.path)}">
-    <span class="role">${esc(a.role || 'doc')}</span>
-    <span class="pth">${esc(a.path)}</span></button>`;
-}
-function renderDossier() {
-  const host = $('library');
-  const id = state.detail.id;
-  const w = detailWs();
-  const board = w ? boardFor(w) : null;
-  const row = board && board.data && Array.isArray(board.data.live)
-    ? board.data.live.find((r) => r.id === id) : null;
-  const lib = (w && state.libByWs[w.id]) || (w && w.id === state.wsId ? state.lib : null);
-  const group = lib && Array.isArray(lib.initiatives) ? lib.initiatives.find((g) => g.id === id) : null;
-
-  if (board && board.ok === false) {
-    host.innerHTML = csError('the initiative ladder', board.error || 'the board could not be derived');
-    return;
-  }
-  const head = `<div class="dz-head">
-    <div class="dz-id">${esc(id)}</div>
-    ${group && group.title ? `<div class="dz-t">${esc(group.title)}</div>` : ''}
-    <div class="dz-meta">
-      ${row ? `<span class="pill lane">${esc(row.lane || '')}</span>` : ''}
-      ${row ? `<span class="pill">${row.stage === 'accepted' ? 'accepted' : 'stage ' + esc(row.stage || '')}</span>` : ''}
-      ${row && row.anchor ? `<span class="pill">${esc(String(row.anchor).split(/[(—]/)[0].trim())}</span>` : ''}
-      ${row && row.legacy ? '<span class="pill">legacy</span>' : ''}
-    </div>
-    ${row ? dossierAttrib(w, board) : ''}
-  </div>`;
-
-  if (board && board.pending) {
-    host.innerHTML = head + `<div class="dz-wait">Deriving this initiative's ladder…
-      <span class="sub">the derivation shells git once per initiative and runs in a child process,
-      so the workspace stays responsive while it does.</span></div>` + dossierArtifacts(group, null);
-    wireDossier();
-    return;
-  }
-  if (!row) {
-    host.innerHTML = head + `<div class="dz-none">No ladder for <b>${esc(id)}</b> in this repository's board —
-      it has no initiative record, or the record is not readable. The artifacts below are what the
-      library can see; nothing about its position in the loop is being claimed.</div>`
-      + dossierArtifacts(group, null);
-    wireDossier();
-    return;
-  }
-  host.innerHTML = head + dossierNext(row) + dossierArtifacts(group, row);
-  wireDossier();
-}
-// R5 in the rail: the same attribution the tree rows carry. A stage without its branch is a claim
-// the data does not support.
-function dossierAttrib(w, board) {
-  const stamp = board && board.as_of ? new Date(board.as_of).toLocaleTimeString() : null;
-  return `<div class="dz-attrib">derived on <b>${esc((w && w.branch) || '?')}</b>${stamp ? ` · as of ${esc(stamp)}` : ''}${board && board.stale ? ' · refreshing' : ''}
-    <span class="sub">build and quality are scoped to this branch's commits, not to all of history</span></div>`;
-}
-// Accepted and owing render TOGETHER — an initiative can be accepted with steps still open, and a
-// green badge alone would be the watermelon.
-function dossierNext(row) {
-  const open = (row.steps || []).filter((s) => s.status === 'pending' || s.status === 'blocked');
-  const accepted = row.stage === 'accepted';
-  if (accepted && open.length) {
-    return `<div class="dz-next owed"><b>still owed · ${open.length} step${open.length === 1 ? '' : 's'}</b>
-      Accepted, and these never closed: ${open.map((s) => esc(s.key)).join(' · ')}.</div>`;
-  }
-  if (row.next && row.next.action) {
-    return `<div class="dz-next"><b>next · ${esc(row.next.step || '')}</b>${esc(row.next.action)}</div>`;
-  }
-  return `<div class="dz-next done"><b>nothing owed</b>Every step this lane asks for is closed.</div>`;
-}
-function dossierArtifacts(group, row) {
-  const arts = (group && group.artifacts) || [];
-  const used = new Set();
-  const stepBy = {};
-  for (const st of (row && row.steps) || []) stepBy[st.key] = st;
-
-  const sections = DOSSIER_GROUPS.map((g) => {
-    const mine = arts.filter((a) => g.roles.includes(a.role));
-    mine.forEach((a) => used.add(a.path));
-    // the lane's own verdict on this group, in the engine's words — never our inference
-    const naStep = (GROUP_STEPS[g.key] || []).map((k) => stepBy[k]).filter(Boolean);
-    const allNa = naStep.length && naStep.every((st) => st.status === 'na');
-    if (!mine.length && allNa) {
-      return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">n/a</span></h5>
-        <div class="dz-na">${esc(naStep[0].evidence || 'not required in this lane')}</div></div>`;
-    }
-    if (!mine.length) {
-      return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">nothing yet</span></h5>
-        <div class="dz-na">No ${esc(g.label)} artifact is filed for this initiative.</div></div>`;
-    }
-    return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">${mine.length}</span></h5>
-      ${mine.map(dossierRow).join('')}</div>`;
-  }).join('');
-
-  const rest = arts.filter((a) => !used.has(a.path));
-  const other = rest.length
-    ? `<div class="dz-sec"><h5>other <span class="c">${rest.length}</span></h5>${rest.map(dossierRow).join('')}</div>`
-    : '';
-  const none = !arts.length
-    ? `<div class="dz-na">The library sees no artifacts for this initiative yet. This is a verified
-       empty — the read succeeded.</div>` : '';
-  return `<div class="dz-arts">${sections}${other}${none}</div>`;
-}
-function wireDossier() {
-  $('library').querySelectorAll('[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
-}
-
-function renderLibrary() {
-  renderLensTabs();
-  renderReading();
-  if (state.lens === 'dossier' && state.detail.kind === 'initiative') { renderDossier(); return; }
-  if (state.lens === 'dossier') { state.lens = 'folders'; }
-  // a third, persistent lens beside initiatives + folders: the scheduled tasks for this workspace
-  if (state.lens === 'scheduled') {
-    renderScheduled();
-    return;
-  }
-  // a fourth: what past sessions in THIS repo actually printed. The filter box becomes the query.
-  if (state.lens === 'history') {
-    renderHistory();
-    return;
-  }
-  const lib = state.lib;
-  const host = $('library');
-  // BOTH lenses are always available: initiatives (the PMOS projection — works whenever the repo
-  // has PRDs, even in a nested bundle) and folders (the complete repo map). A repo with no
-  // initiatives shows an empty-but-honest initiative view — the toggle is never dead, never hidden.
-  const effLens = 'folders';
-  if (!lib) { host.innerHTML = `<div class="empty">Library unavailable.</div>`; return; }
-  const f = state.filter.trim().toLowerCase();
-  const hit = (s) => !f || String(s).toLowerCase().includes(f);
-
-  if (effLens === 'folders') {
-    const roots = (lib.roots || []).map((r) => treeNode(r, true, f)).join('');
-    host.innerHTML = roots || `<div class="empty">${f ? 'No document matches that filter.' : 'No documents found in this repo.'}</div>`;
-    wireDocs(host);
-    return;
-  }
-
-  // initiative lens
-  const inits = (lib.initiatives || []).filter((g) =>
-    hit(g.id) || hit(g.title || '') || g.artifacts.some((a) => hit(a.name)));
-  const initHtml = inits.map((g) => {
-    const arts = g.artifacts.filter((a) => !f || hit(g.id) || hit(g.title || '') || hit(a.name));
-    return `<details class="init"${f ? ' open' : ''}>
-      <summary><span class="iid">${esc(g.id)}</span><span class="n">${arts.length}</span>
-        ${g.title ? `<span class="ititle">${esc(g.title)}</span>` : ''}</summary>
-      ${arts.map((a) => `<button class="doc art" data-path="${esc(a.path)}" title="${esc(a.path)}">
-        <span class="role" data-role="${esc(a.role)}">${esc(a.role)}</span>
-        <span class="dn">${esc(a.name)}</span></button>`).join('')}
-    </details>`;
-  }).join('');
-
-  const section = (title, body, open) => body
-    ? `<details class="tree"${open ? ' open' : ''}><summary>${esc(title)}</summary>${body}</details>` : '';
-  const ungrouped = (lib.ungrouped || []).filter((a) => hit(a.path));
-  const gov = (lib.governance || []).filter((d) => hit(d.name));
-
-  host.innerHTML = [
-    initHtml ? `<div class="grp">initiatives</div>${initHtml}` : '',
-    // never silently dropped (R5) — planning docs that declare no initiative are named here
-    section(`other planning docs (${ungrouped.length})`,
-      ungrouped.map((a) => `<button class="doc" data-path="${esc(a.path)}" title="${esc(a.path)}">${esc(a.path.replace(/^planning\//, ''))}</button>`).join('')),
-    section('knowledge — okf · skills',
-      (lib.knowledge || []).map((r) => treeNode(r, false, f)).join('')),
-    section('governance',
-      gov.map((d) => `<button class="doc" data-path="${esc(d.path)}">${esc(d.name)}</button>`).join(''), true),
-  ].filter(Boolean).join('')
-    || `<div class="empty">${f ? 'No initiative or document matches that filter.' : 'No planning documents in this repo.'}</div>`;
-  wireDocs(host);
-}
-function treeNode(node, open, f) {
-  const dirs = (node.dirs || []).map((d) => treeNode(d, false, f)).join('');
-  // Every file is SHOWN so the map stays complete (R8). What the reader can PREVIEW — markdown
-  // (incl. .skill), text/config source, HTML, images — opens; a truly non-previewable file (a
-  // binary) stays inert with the editor affordance. `kind` is the server's single classifier.
-  const docs = (node.docs || []).filter((d) => !f || d.path.toLowerCase().includes(f))
-    .map((d) => {
-      const k = d.kind || (d.md === false ? 'inert' : 'markdown');
-      return k === 'inert'
-        ? `<span class="file" title="${esc(d.path)} — open in your editor (no in-app preview for this file type)">${esc(d.name)}</span>`
-        : `<button class="doc" data-path="${esc(d.path)}" data-kind="${esc(k)}" title="${esc(d.path)}">${esc(d.name)}</button>`;
-    }).join('');
-  if (node.path === '' && node.name === '(root)') return docs;   // loose root files, no folder
-  if (f && !dirs && !docs) return '';                            // filtered-out branch
-  return `<details class="tree"${open || f ? ' open' : ''}><summary>${esc(node.name)}/</summary>${dirs}${docs}</details>`;
-}
-function wireDocs(scope) {
-  scope.querySelectorAll('.doc').forEach((b) => {
-    b.onclick = () => openDoc(b.dataset.path, b.dataset.kind);
-    b.classList.toggle('on', b.dataset.path === state.docPath);
-  });
-}
-
-// ── the document reader — bottom of the right rail, under the library ──
-// Renders by KIND: markdown (incl. .skill) through the parser, text/config as escaped source,
-// HTML as source with an opt-in sandboxed render, images straight from the guarded /api/asset.
-// `kind` comes from the tree button; it is only REQUIRED for images (which never hit /api/doc) —
-// for everything else the server's X-Doc-Kind header is authoritative, so a link with no kind works.
-async function openDoc(pth, kind) {
-  if (!pth) return;
-  state.docPath = pth;
-  showRail();
-  $('paneDoc').hidden = false;
-  $('railSplit').hidden = false;
-  foldPane('doc', true);
-  $('crumb').innerHTML = `<bdi>${esc(pth)}</bdi>`;
-  $('docBody').scrollTop = 0;
-  const body = $('docBody');
-  // Images bypass /api/doc entirely — served as bytes from the guarded, MIME-allowlisted endpoint.
-  if (kind === 'image') {
-    const url = `/api/asset?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(pth)}`;
-    body.innerHTML = `<div class="img-view"><img class="doc-img" src="${url}" alt="${esc(pth)}" /></div>`;
-    wireImgFallback(body); markActiveDoc(pth); refit(); return;
-  }
-  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); edControls(); refit(); return; }
-    const k = res.headers.get('X-Doc-Kind') || 'markdown';
-    const text = await res.text();
-    if (k === 'html') renderHtmlDoc(body, text);
-    else if (k === 'text') body.innerHTML = `<pre class="doc-src">${esc(text)}</pre>`;
-    else body.innerHTML = renderMd(text, pth);
-  } catch { body.innerHTML = `<p class="doc-empty">Read failed.</p>`; }
-  // a relative .md link inside a document opens that document here (still server-guarded)
-  body.querySelectorAll('[data-doc]').forEach((a) => a.onclick = (e) => { e.preventDefault(); openDoc(a.dataset.doc); });
-  wireImgFallback(body);
-  markActiveDoc(pth);
-  edControls();
-  refit();
-}
-function markActiveDoc(pth) {
-  document.querySelectorAll('.doc').forEach((b) => b.classList.toggle('on', b.dataset.path === pth));
-}
-// a repo-relative image that 404s (missing/renamed) degrades to its alt text, never a broken icon
-function wireImgFallback(scope) {
-  scope.querySelectorAll('img.doc-img').forEach((img) => {
-    img.onerror = () => { const em = document.createElement('em'); em.textContent = img.getAttribute('alt') || 'image'; img.replaceWith(em); };
-  });
-}
-// HTML preview (R5): escaped SOURCE by default; an opt-in RENDER in a fully sandboxed iframe —
-// scripts + same-origin denied (empty sandbox) AND a restrictive CSP that blocks all network, so a
-// poisoned explainer can neither script nor beacon out (holds R4 even for rendered HTML). Never auto.
-function renderHtmlDoc(body, text) {
-  body.innerHTML =
-    `<div class="html-view">`
-    + `<div class="html-bar" role="tablist">`
-    + `<button class="html-tab on" data-mode="src" role="tab" aria-selected="true">source</button>`
-    + `<button class="html-tab" data-mode="render" role="tab" aria-selected="false">render <span class="sbx">sandboxed</span></button>`
-    + `</div>`
-    + `<pre class="doc-src html-pane" data-pane="src"></pre>`
-    + `<div class="html-pane" data-pane="render" hidden></div>`
-    + `</div>`;
-  body.querySelector('[data-pane="src"]').textContent = text;   // textContent, never innerHTML — no live markup
-  const srcPane = body.querySelector('[data-pane="src"]');
-  const rndPane = body.querySelector('[data-pane="render"]');
-  const tabs = body.querySelectorAll('.html-tab');
-  const activate = (mode) => {
-    tabs.forEach((t) => { const on = t.dataset.mode === mode; t.classList.toggle('on', on); t.setAttribute('aria-selected', String(on)); });
-    if (mode === 'render' && !rndPane.firstChild) {
-      const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:">`;
-      const ifr = document.createElement('iframe');
-      ifr.className = 'html-frame';
-      ifr.setAttribute('sandbox', '');                 // no allow-scripts, no allow-same-origin
-      ifr.setAttribute('referrerpolicy', 'no-referrer');
-      ifr.srcdoc = csp + text;
-      rndPane.appendChild(ifr);
-    }
-    srcPane.hidden = mode !== 'src';
-    rndPane.hidden = mode !== 'render';
-  };
-  tabs.forEach((t) => t.onclick = () => activate(t.dataset.mode));
-}
-function closeDoc() {
-  state.docPath = null; state.surface = null;
-  $('paneDoc').hidden = true;
-  $('railSplit').hidden = true;
-  $('docBody').innerHTML = '';
-  $('crumb').textContent = '';
-  document.querySelectorAll('.doc').forEach((b) => b.classList.remove('on'));
-  refit();
-}
-
-// ══ THE LAYOUT SYSTEM (workspace-layout-system) ═════════════════════════════════════════════
-// A layout is a named state tuple; the grid template is computed from it by lib/layout.js. The
-// PM picks one in one act, then adjusts it freely — and the adjustment is kept against THAT
-// layout automatically. There is no dirty state, no save and no discard (R4), which is why
-// `restore` on a stock layout is not a nicety: it is the only way back.
-const LAY = window.PMOSLayout;
-const NARROW = window.matchMedia('(max-width:1100px)');
-const PHONE = window.matchMedia('(max-width:760px)');
-
-// Start from the stock four so the control is populated and `review` — today's arrangement — is
-// on screen before the server's copy arrives. loadLayouts() replaces this per workspace.
-state.layouts = LAY.stockLayouts();
-state.layoutId = LAY.DEFAULT_ID;
-
-function curLayout() {
-  return state.layouts.find((l) => l.id === state.layoutId) || state.layouts[0] || LAY.stockLayout(LAY.DEFAULT_ID);
-}
-
-// Write the arrangement into the DOM. Custom properties, never direct grid declarations — a
-// direct one would outrank the ≤760px media query and take the phone's switcher with it (R9).
-function applyLayout() {
-  const l = curLayout();
-  const body = $('bodyGrid');
-  // Below 1100px the reader floats over the terminal instead of squeezing it, so its track comes
-  // OUT of the template; below that again the phone's own system owns the whole thing.
-  const float = NARROW.matches && !PHONE.matches && (l.reader === 'left' || l.reader === 'right');
-  const eff = float ? Object.assign({}, l, { reader: 'off' }) : l;
-  const g = LAY.gridFor(eff);
-  body.style.setProperty('--lay-cols', g.columns);
-  body.style.setProperty('--lay-rows', g.rows);
-  body.style.setProperty('--lay-areas', g.areas);
-  body.dataset.side = l.side;
-  body.dataset.reader = float ? l.reader : l.reader;   // the pane still exists; it just floats
-  body.dataset.float = float ? 'on' : 'off';
-  if (float) body.style.setProperty('--lay-areas', g.areas);
-
-  // folds
-  paintFold('paneWs', 'wsFold', l.folds.ws);
-  // `sess` retired with the pane it folded (R1/R13); a stored value is ignored, not migrated.
-  paintFold('paneLib', 'libFold', l.folds.lib);
-  paintFold('paneDoc', 'docFold', l.folds.doc);
-
-  // split is a desktop arrangement; below 1100px two groups are two unusable terminals (R9)
-  applySplit(l.split === 'on' && !NARROW.matches);
-
-  // The library/document divider is part of the ARRANGEMENT (R8), driven from the tuple. It used
-  // to be "a client preference like the theme" in a global localStorage key — which R8 and rubric
-  // dimension 1 both contradict: they require it carried per workspace and the old key not re-read
-  // on later loads. `libsplit` is now read exactly once, by migrateLegacy.
-  document.documentElement.style.setProperty('--libsplit', l.libSplit + '%');
-
-  $('layName').textContent = l.name;
-  renderLayoutMenu();
-  refit();
-}
-function paintFold(paneId, btnId, open) {
-  const pane = $(paneId), btn = $(btnId);
-  if (!pane) return;
-  pane.dataset.fold = open ? 'on' : 'off';
-  if (btn) btn.setAttribute('aria-expanded', String(open));
-}
-
-// Mutate the current layout and keep it. Every adjustment path funnels through here, so there is
-// exactly one place that decides what "kept" means — and exactly one write-back to debounce.
-function tweak(patch) {
-  const l = curLayout();
-  Object.assign(l, patch);
-  l.lastUsedAt = Date.now();
-  applyLayout();
-  saveLayouts();
-}
-function selectLayout(id) {
-  if (!state.layouts.some((l) => l.id === id)) return;
-  state.layoutId = id;
-  const l = curLayout();
-  l.lastUsedAt = Date.now();
-  applyLayout();
-  saveLayouts();
-}
-// R4's escape hatch. Auto-keep is destructive: without this a flattened `focus` is gone for good.
-function restoreLayout(id) {
-  const fresh = LAY.stockLayout(id);
-  if (!fresh) return;
-  const i = state.layouts.findIndex((l) => l.id === id);
-  if (i < 0) return;
-  fresh.lastUsedAt = Date.now();
-  state.layouts[i] = fresh;
-  applyLayout();
-  saveLayouts();
-}
-
-// ── persistence: per workspace, server-side (R7) ──
-async function loadLayouts() {
-  let doc = null;
-  try {
-    const r = await fetch('/api/layouts?ws=' + encodeURIComponent(state.wsId || ''));
-    doc = await r.json();
-  } catch { doc = null; }
-  // A read failure must never author a write. loadAction() is the one place that decides, and it
-  // only says 'migrate' when the SERVER affirmatively reports nothing stored — never because the
-  // answer was unreadable. Anything unusable is 'keep': show the boot defaults, persist nothing,
-  // and leave whatever is on disk exactly as it is until a load succeeds.
-  const act = LAY.loadAction(doc);
-  if (act === 'keep') return;
-  if (act === 'migrate') {
-    // R8 — a workspace with nothing stored inherits whatever the PM had already tuned by hand
-    // in the pre-feature client, so the upgrade never costs them their rail width.
-    const legacy = {};
-    for (const k of ['rail', 'railw', 'libsplit', 'fold-lib', 'fold-doc']) legacy[k] = store.get(k);
-    const migrated = LAY.migrateLegacy(legacy);
-    state.layouts = migrated.layouts;
-    state.layoutId = migrated.currentId;
-    applyLayout();
-    saveLayouts();          // write it once so the migration is not re-run every load
-    return;
-  }
-  const clean = LAY.sanitize(doc);
-  state.layouts = clean.layouts;
-  state.layoutId = clean.currentId;
-  applyLayout();
-}
-function layoutBody() {
-  return JSON.stringify({ ws: state.wsId, layouts: state.layouts, currentId: state.layoutId });
-}
-function saveLayouts() {
-  state.layoutDirty = true;
-  clearTimeout(state.layoutSaveT);
-  state.layoutSaveT = setTimeout(async () => {
-    if (!state.wsId) return;
-    const body = layoutBody();
-    try {
-      await fetch('/api/layouts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body });
-      state.layoutDirty = false;
-    } catch {}   // a failed write costs the arrangement, never the session — stay quiet
-  }, 200);
-}
-// A debounce alone loses the write when the PM picks a layout and immediately closes the tab —
-// measured, not theorised: the browser suite caught exactly that. sendBeacon is the one send that
-// survives teardown, so the last thing they chose is the thing that comes back.
-function flushLayouts() {
-  if (!state.layoutDirty || !state.wsId) return;
-  clearTimeout(state.layoutSaveT);
-  state.layoutDirty = false;
-  try {
-    const blob = new Blob([layoutBody()], { type: 'application/json' });
-    if (!navigator.sendBeacon || !navigator.sendBeacon('/api/layouts', blob)) {
-      fetch('/api/layouts', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: layoutBody(), keepalive: true });
-    }
-  } 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 ──
-function layoutWire(l) {
-  // a wireframe of the arrangement: the name alone does not say what you get
-  const cells = [];
-  if (l.side === 'left') cells.push(1);
-  if (l.reader === 'left') cells.push(3);
-  cells.push(l.split === 'on' ? 5 : 4);
-  if (l.reader === 'right') cells.push(3);
-  if (l.side === 'right') cells.push(1);
-  const rows = l.reader === 'bottom' ? '<i style="flex:1"></i>' : '';
-  return `<span class="lay-mini" aria-hidden="true">${cells.map((w) => `<span style="flex:${w}"></span>`).join('')}${rows}</span>`;
-}
-function renderLayoutMenu() {
-  const list = $('layList');
-  if (!list) return;
-  list.innerHTML = state.layouts.map((l) => {
-    const on = l.id === state.layoutId;
-    const stock = LAY.isStock(l.id);
-    return `<div class="lay-line" data-id="${esc(l.id)}" style="display:flex;gap:2px;align-items:center">
-      <button class="lay-row" data-pick="${esc(l.id)}" aria-current="${on}"
-        aria-label="${esc(l.name)} layout">${layoutWire(l)}<span class="nm">${esc(l.name)}</span>
-        ${l.key ? `<span class="kbd">⌃${l.key}</span>` : ''}</button>
-      ${stock
-        ? `<button class="lay-act" data-restore="${esc(l.id)}" title="Restore ${esc(l.name)} to its default arrangement" aria-label="Restore ${esc(l.name)}">↺</button>`
-        : `<button class="lay-act" data-rename="${esc(l.id)}" title="Rename" aria-label="Rename ${esc(l.name)}">✎</button>
-           <button class="lay-act del" data-del="${esc(l.id)}" title="Delete" aria-label="Delete ${esc(l.name)}">✕</button>`}
-    </div>`;
-  }).join('') + (NARROW.matches
-    ? '<p class="lay-narrow">This window is too narrow for two terminal groups — split is off until it is wider.</p>'
-    : '');
-  list.querySelectorAll('[data-pick]').forEach((b) => b.onclick = () => { selectLayout(b.dataset.pick); closeLayMenu(); });
-  list.querySelectorAll('[data-restore]').forEach((b) => b.onclick = () => restoreLayout(b.dataset.restore));
-  list.querySelectorAll('[data-del]').forEach((b) => b.onclick = () => {
-    state.layouts = state.layouts.filter((l) => l.id !== b.dataset.del);
-    if (state.layoutId === b.dataset.del) state.layoutId = LAY.DEFAULT_ID;
-    applyLayout(); saveLayouts();
-  });
-  list.querySelectorAll('[data-rename]').forEach((b) => b.onclick = () => {
-    const l = state.layouts.find((x) => x.id === b.dataset.rename);
-    if (!l) return;
-    openLayNew(l.name, l.id);
-  });
-  renderLayoutPositions();
-  const w = state.workspaces.find((x) => x.id === state.wsId);
-  if ($('layScope')) $('layScope').textContent = w ? w.name : 'this repo';
-}
-
-/* R12 — keyboard parity with the drag. Every value `side` and `reader` can hold is a real button
-   here, so no position is pointer-only. This is what makes the "no dead ends" property true rather
-   than merely argued: from ANY arrangement, including side:off + reader:off, the header control is
-   in the bar (never inside the grid it rearranges), and these buttons bring a pane back. */
-const POS_GROUPS = [
-  { key: 'side', label: 'sidebar', values: [['left', '◧'], ['right', '◨'], ['off', '∅']] },
-  { key: 'reader', label: 'reader', values: [['left', '◧'], ['right', '◨'], ['bottom', '⬓'], ['off', '∅']] },
-];
-function renderLayoutPositions() {
-  const host = $('layPos');
-  if (!host) return;
-  const l = curLayout();
-  host.innerHTML = POS_GROUPS.map((g) => `
-    <div class="pos-row" role="group" aria-label="${g.label} position">
-      <span class="pos-lbl">${g.label}</span>
-      ${g.values.map(([v, glyph]) => `<button class="pos-btn" data-pos="${g.key}" data-val="${v}"
-        aria-pressed="${l[g.key] === v}" title="${g.label} ${v}"
-        aria-label="${g.label} ${v}"><i aria-hidden="true">${glyph}</i><span>${v}</span></button>`).join('')}
-    </div>`).join('');
-  host.querySelectorAll('[data-pos]').forEach((b) => b.onclick = () => {
-    tweak({ [b.dataset.pos]: b.dataset.val });   // menu stays open: adjusting is not choosing
-  });
-}
-function openLayMenu() { $('layMenu').hidden = false; $('layBtn').setAttribute('aria-expanded', 'true'); renderLayoutMenu(); }
-function closeLayMenu() { $('layMenu').hidden = true; $('layBtn').setAttribute('aria-expanded', 'false'); closeLayNew(); }
-function openLayNew(value, renameId) {
-  $('layNewForm').hidden = false;
-  $('layNewForm').dataset.rename = renameId || '';
-  $('layNewName').value = value || '';
-  $('layNewName').focus(); $('layNewName').select();
-}
-function closeLayNew() { $('layNewForm').hidden = true; $('layNewForm').dataset.rename = ''; $('layNewName').value = ''; }
-$('layBtn').onclick = () => ($('layMenu').hidden ? openLayMenu() : closeLayMenu());
-$('layNewBtn').onclick = () => openLayNew(newLayoutName());
-$('layNewCancel').onclick = () => closeLayNew();
-$('layNewForm').onsubmit = (e) => {
-  e.preventDefault();
-  const name = $('layNewName').value.trim().slice(0, 40);
-  if (!name) return;
-  const renameId = $('layNewForm').dataset.rename;
-  if (renameId) {
-    const l = state.layouts.find((x) => x.id === renameId);
-    if (l && !LAY.isStock(l.id)) l.name = name;
-  } else {
-    const l = Object.assign({}, curLayout(), { id: 'c' + Date.now().toString(36), name, key: null, lastUsedAt: Date.now() });
-    l.folds = Object.assign({}, curLayout().folds);
-    state.layouts.push(l);
-    state.layoutId = l.id;
-  }
-  closeLayNew(); applyLayout(); saveLayouts();
-};
-function newLayoutName() {
-  const base = curLayout().name + ' (mine)';
-  let n = base, i = 2;
-  while (state.layouts.some((l) => l.name === n)) n = base + ' ' + (i++);
-  return n;
-}
-
-// ── folds: both columns, same behaviour (R11) ──
-function foldPane(which, open) {
-  const map = { doc: 'paneDoc', lib: 'paneLib', ws: 'paneWs' };
-  if (!map[which]) return;
-  const l = curLayout();
-  const folds = Object.assign({}, l.folds);
-  folds[which] = open;
-  tweak({ folds });
-}
-function showRail() { if (curLayout().reader === 'off') tweak({ reader: 'right' }); }
-
-$('libFold').onclick = () => foldPane('lib', $('paneLib').dataset.fold === 'off');
-$('docFold').onclick = () => foldPane('doc', $('paneDoc').dataset.fold === 'off');
-$('wsFold').onclick = () => foldPane('ws', $('paneWs').dataset.fold === 'off');
-
-// ── the edges: drag a column's outer edge to resize it. Keeps to the layout, like everything
-// else — a width the PM chose is part of the arrangement, not a separate preference. ──
-function wireEdge(el) {
-  if (!el) return;
-  const which = el.dataset.edge;
-  let dragging = false;
-  const applyPx = (px) => {
-    const l = curLayout();
-    if (which === 'side') tweak({ sideW: Math.round(Math.min(Math.max(px, LAY.SIDE_MIN), LAY.SIDE_MAX)) });
-    else tweak({ readW: Math.round(Math.min(Math.max(px, LAY.READ_MIN), Math.min(LAY.READ_MAX, window.innerWidth - 360))) });
-    void l;
-  };
-  const fromPointer = (clientX) => {
-    const l = curLayout();
-    const r = $('bodyGrid').getBoundingClientRect();
-    if (which === 'side') return l.side === 'right' ? r.right - clientX : clientX - r.left;
-    return l.reader === 'left' ? clientX - r.left : r.right - clientX;
-  };
-  el.addEventListener('pointerdown', (e) => { dragging = true; el.classList.add('on'); el.setPointerCapture(e.pointerId); e.preventDefault(); });
-  el.addEventListener('pointermove', (e) => { if (dragging) applyPx(fromPointer(e.clientX)); });
-  el.addEventListener('pointerup', (e) => { dragging = false; el.classList.remove('on'); try { el.releasePointerCapture(e.pointerId); } catch {} refit(); });
-  el.addEventListener('keydown', (e) => {
-    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
-    e.preventDefault();
-    const l = curLayout();
-    const cur = which === 'side' ? l.sideW : l.readW;
-    const grow = which === 'side' ? (l.side === 'right' ? e.key === 'ArrowLeft' : e.key === 'ArrowRight')
-      : (l.reader === 'left' ? e.key === 'ArrowRight' : e.key === 'ArrowLeft');
-    applyPx(cur + (grow ? 24 : -24));
-    refit();
-  });
-}
-wireEdge($('railGrip'));
-wireEdge($('sideEdge'));
-
-// ── the grips: drag a pane to a new home. An ACCELERATOR — every position a drop zone offers is
-// also reachable from the layout menu, so a pointer is never required to arrange the window. ──
-(() => {
-  const body = $('bodyGrid');
-  let drag = null, ghost = null;
-  const zones = () => [...document.querySelectorAll('.dz')];
-  function allowed(pane, z) { return !(pane === 'side' && z === 'bottom'); }  // the sidebar has no bottom home
-  function hit(e) {
-    let found = null;
-    zones().forEach((d) => {
-      const r = d.getBoundingClientRect();
-      const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
-      const ok = inside && allowed(drag, d.dataset.z);
-      d.classList.toggle('hot', ok);
-      if (ok) found = d.dataset.z;
-    });
-    return found;
-  }
-  function move(e) {
-    if (!drag) return;
-    if (ghost) { ghost.style.left = (e.clientX + 12) + 'px'; ghost.style.top = (e.clientY + 12) + 'px'; }
-    hit(e);
-  }
-  function end(e) {
-    if (!drag) return;
-    const z = hit(e);
-    if (z) tweak(drag === 'side' ? { side: z === 'bottom' ? curLayout().side : z } : { reader: z });
-    body.classList.remove('dragging');
-    zones().forEach((d) => { d.classList.remove('hot'); d.classList.remove('no'); });
-    if (ghost) { ghost.remove(); ghost = null; }
-    drag = null;
-  }
-  document.querySelectorAll('.cap .grip').forEach((g) => {
-    g.addEventListener('pointerdown', (e) => {
-      if (PHONE.matches) return;                 // the switcher owns layout on touch
-      e.preventDefault();
-      drag = g.dataset.pane;
-      body.classList.add('dragging');
-      zones().forEach((d) => d.classList.toggle('no', !allowed(drag, d.dataset.z)));
-      ghost = document.createElement('div');
-      ghost.className = 'laghost';
-      ghost.textContent = drag === 'side' ? 'workspaces · running agents' : 'library · document';
-      document.body.appendChild(ghost);
-      move(e);
-      try { g.setPointerCapture(e.pointerId); } catch {}
-    });
-    g.addEventListener('pointermove', move);
-    g.addEventListener('pointerup', end);
-    // keyboard: the grip opens the layout menu and lands focus on the position controls, which can
-    // reach every value the drag can (R12). It previously focused #layBtn — a menu whose only
-    // contents were layout rows, so Enter here could not actually move anything.
-    g.addEventListener('keydown', (e) => {
-      if (e.key !== 'Enter' && e.key !== ' ') return;
-      e.preventDefault();
-      openLayMenu();
-      const first = $('layPos') && $('layPos').querySelector(`[data-pos="${g.dataset.pane === 'side' ? 'side' : 'reader'}"]`);
-      (first || $('layBtn')).focus();
-    });
-  });
-})();
-
-// re-apply when the window crosses a breakpoint: the float rule and the split rule are both
-// width-dependent, and a template computed for the other side of the line clips the terminal
-[NARROW, PHONE].forEach((mq) => {
-  const on = () => { applyLayout(); };
-  if (mq.addEventListener) mq.addEventListener('change', on); else if (mq.addListener) mq.addListener(on);
-});
-
-// the empty second group's own controls — a split with nothing in it offers the next step
-$('newHere1').onclick = () => { state.focusG = 1; openNewForm(); };
-$('unsplitBtn').onclick = () => tweak({ split: 'off' });
-// clicking anywhere in a group focuses it, so ⌘J's send and F2's rename act on what you last touched
-[0, 1].forEach((gi) => $(GROUP_HOST[gi]).addEventListener('pointerdown', () => {
-  if (state.focusG === gi) return;
-  state.focusG = gi; syncActive(); paintGroups();
-}));
-// a click outside the layout menu closes it — it is a popover, not a mode
-document.addEventListener('pointerdown', (e) => {
-  if ($('layMenu').hidden) return;
-  if ($('layMenu').contains(e.target) || $('layBtn').contains(e.target)) return;
-  closeLayMenu();
-}, true);
-
-applyLayout();     // paint the default arrangement before the server's layouts arrive
-
-// drag the divider between the library and the document. It is part of the arrangement (R8), so
-// it is kept against the current layout like every other adjustment — not in a global client key.
-(() => {
-  const split = $('railSplit');
-  let dragging = false;
-  const apply = (clientY) => {
-    const r = $('rail').getBoundingClientRect();
-    const pct = Math.min(LAY.LIB_MAX, Math.max(LAY.LIB_MIN, ((clientY - r.top) / r.height) * 100));
-    tweak({ libSplit: Math.round(pct * 10) / 10 });
-  };
-  split.addEventListener('pointerdown', (e) => { dragging = true; split.setPointerCapture(e.pointerId); e.preventDefault(); });
-  split.addEventListener('pointermove', (e) => { if (dragging) apply(e.clientY); });
-  split.addEventListener('pointerup', (e) => { dragging = false; try { split.releasePointerCapture(e.pointerId); } catch {} refit(); });
-  split.addEventListener('keydown', (e) => {
-    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
-    e.preventDefault();
-    const cur = curLayout().libSplit;
-    tweak({ libSplit: Math.round(Math.min(LAY.LIB_MAX, Math.max(LAY.LIB_MIN, cur + (e.key === 'ArrowUp' ? -4 : 4))) * 10) / 10 });
-  });
-})();
-
-// ── needs-you + gates (the PMOS workflow: Review/Acceptance in file mode, never automatic) ──
-async function loadNeeds() {
-  try {
-    const r = await fetch('/api/needs?ws=' + encodeURIComponent(state.wsId || ''));
-    const j = await r.json();
-    state.needs = j.needs || [];
-    // R12 — what a COLLAPSED tree row shows. R10 — the count comes from the strict reader, so a
-    // corrupt queue arrives as {count:null,error}, never as a calm zero.
-    state.needsByWs = j.by_ws || {};
-  } catch { state.needs = []; state.needsByWs = {}; }
-  renderNeeds(); renderSessions();
-}
-function renderNeeds() {
-  const n = state.needs[0];
-  const box = $('needs');
-  if (!n) { box.style.display = 'none'; refit(); return; }
-  if (n.kind === 'report') {
-    // a scheduled run finished — reach the PM here, openable in the reader (R5)
-    box.className = 'needs report'; box.style.display = 'block';
-    box.innerHTML = `<span class="k">report ready</span><div class="q">${esc(n.question)}</div>
-      <div class="row">${n.deliverable ? `<button class="gbtn primary" data-deliv="${esc(n.deliverable)}">▸ open report</button>` : ''}
-        <button class="gbtn" data-gate="seen">dismiss</button></div>`;
-    box.querySelector('[data-deliv]')?.addEventListener('click', (e) => openDeliverable(e.currentTarget.dataset.deliv));
-    box.querySelectorAll('[data-gate]').forEach((b) => b.onclick = () => gate(n, b.dataset.gate));
-    refit(); return;
-  }
-  if (n.kind === 'outcome') {
-    // A D57 outcome check past its horizon. There is deliberately NO button here that would
-    // close it: disposal is validated|refuted|inconclusive with evidence, recorded by the PM
-    // through record_outcome_check — auto-disposal is prohibited, and a button that looked
-    // like disposal but only wrote an acceptance would be exactly the fake green D57 forbids.
-    box.className = 'needs accept'; box.style.display = 'block';
-    box.innerHTML = `<span class="k">outcome check due</span><div class="q">${esc(n.question)}</div>
-      <div class="row"><span class="wpath">dispose it with record_outcome_check
-        (validated | refuted | inconclusive, with evidence) — it stays here until you do</span></div>`;
-    refit(); return;
-  }
-  const accept = n.kind === 'accept';
-  box.className = 'needs' + (accept ? ' accept' : '');
-  box.style.display = 'block';
-  box.innerHTML = `
-    <span class="k">${accept ? 'needs your acceptance' : 'needs you'}</span>
-    <div class="q">${esc(n.question)}</div>
-    <div class="row"><span>${accept ? 'evidence' : 'blocked on'} →</span>
-      ${n.doc ? `<button class="dlink" data-doc="${esc(n.doc)}">${esc(n.doc)}</button>` : ''}
-      <button class="gbtn primary" data-gate="${accept ? 'accept' : 'approve'}">✓ ${accept ? 'accept' : 'approve'}</button>
-      <button class="gbtn" data-gate="return">↩ return with note</button>
-      <span class="wpath">${accept
-        ? 'accept → records the Acceptance into this repo’s own acceptances.jsonl — your verdict, never automatic'
-        : 'approve/return → records a correction into this repo’s own acceptances.jsonl — attributable to you'}</span>
-    </div>`;
-  box.querySelector('[data-doc]')?.addEventListener('click', (e) => openDoc(e.target.dataset.doc));
-  box.querySelectorAll('[data-gate]').forEach((b) => b.onclick = () => gate(n, b.dataset.gate));
-  refit();
-}
-async function gate(n, action) {
-  let note = '';
-  if (action === 'return') { note = prompt('Return with a note (what needs correcting):') || ''; if (note === '') return; }
-  try {
-    await fetch('/api/gate', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action, run_id: n.run_id, initiative_id: n.initiative_id, note, ws: state.wsId }) });
-  } catch {}
-  loadNeeds();   // needs.json is updated server-side; re-pull
-}
-
-// ── markdown: a real block parser (no deps). ──────────────────────────────────────────
-// Escaping happens at the LEAF — every piece of file text passes through esc() before it is
-// put into HTML, and nothing else ever does. That keeps the old renderer's one good property
-// while fixing what it could not do: soft-wrapped paragraphs, ordered/nested/task lists,
-// tables (rubrics ARE tables), quotes, rules, and the identity block PMOS artifacts open with.
-function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
-
-const RE_ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
-const RE_HR = /^\s{0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
-
-function renderMd(src, docPath) {
-  const lines = String(src == null ? '' : src).replace(/\r\n?/g, '\n').split('\n');
-  const ctx = { dir: (docPath || '').split('/').slice(0, -1) };
-  let out = '', i = 0, blocks = 0, lastHead = '';
-
-  // YAML frontmatter → identity card
-  if (lines[0] !== undefined && lines[0].trim() === '---') {
-    let j = 1;
-    while (j < lines.length && lines[j].trim() !== '---') j++;
-    if (j < lines.length) { out += metaCard(lines.slice(1, j)); i = j + 1; blocks++; }
-  }
-
-  while (i < lines.length) {
-    const ln = lines[i];
-    if (!ln.trim()) { i++; continue; }
-
-    // fenced code
-    const fence = ln.match(/^\s{0,3}(`{3,}|~{3,})\s*([^\s`]*)/);
-    if (fence) {
-      const close = new RegExp('^\\s{0,3}' + fence[1][0] + '{' + fence[1].length + ',}\\s*$');
-      const body = [];
-      i++;
-      while (i < lines.length && !close.test(lines[i])) body.push(lines[i++]);
-      i++;                                    // consume the closing fence (or hit EOF)
-      out += `<pre>${fence[2] ? `<span class="lang">${esc(fence[2])}</span>` : ''}` +
-        `<code>${esc(body.join('\n'))}</code></pre>`;
-      blocks++; continue;
-    }
-
-    const h = ln.match(/^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/);
-    if (h) {
-      const n = h[1].length;
-      out += `<h${n} id="${slug(h[2])}">${inline(h[2], ctx)}</h${n}>`;
-      lastHead = h[2].trim(); i++; blocks++; continue;
-    }
-
-    if (RE_HR.test(ln)) { out += '<hr />'; i++; blocks++; continue; }
-
-    if (/^\s{0,3}>/.test(ln)) {
-      const body = [];
-      while (i < lines.length && (/^\s{0,3}>/.test(lines[i]) || (body.length && lines[i].trim()))) {
-        body.push(lines[i].replace(/^\s{0,3}>\s?/, '')); i++;
-      }
-      out += `<blockquote>${renderMd(body.join('\n'), docPath)}</blockquote>`;
-      blocks++; continue;
-    }
-
-    // GFM table: a header row followed by a delimiter row
-    if (ln.includes('|') && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(lines[i + 1] || '') && (lines[i + 1] || '').includes('-')) {
-      const head = cells(ln);
-      const align = cells(lines[i + 1]).map((c) => (/^:.*:$/.test(c) ? 'center' : /:$/.test(c) ? 'right' : /^:/.test(c) ? 'left' : ''));
-      i += 2;
-      const rows = [];
-      while (i < lines.length && lines[i].includes('|') && lines[i].trim()) rows.push(cells(lines[i++]));
-      const th = head.map((c, n) => `<th${align[n] ? ` style="text-align:${align[n]}"` : ''}>${inline(c, ctx)}</th>`).join('');
-      const tb = rows.map((r) => `<tr>${head.map((_, n) =>
-        `<td${align[n] ? ` style="text-align:${align[n]}"` : ''}>${inline(r[n] || '', ctx)}</td>`).join('')}</tr>`).join('');
-      out += `<div class="tablewrap"><table><thead><tr>${th}</tr></thead><tbody>${tb}</tbody></table></div>`;
-      blocks++; continue;
-    }
-
-    if (RE_ITEM.test(ln)) {
-      const { items, next } = listBlock(lines, i);
-      i = next;
-      // PMOS artifacts open with an identity block written as `- key: value` bullets, not YAML —
-      // either straight after the H1 or under an `## Identity` heading. That is metadata: show
-      // it as a card, not as a bullet list.
-      const meta = (blocks <= 1 || /^identity$/i.test(lastHead)) && isMetaList(items);
-      out += meta ? metaCard(items.map((it) => it.lines.join(' '))) : renderLists(items, 0, ctx).html;
-      lastHead = ''; blocks++; continue;
-    }
-
-    // paragraph — consecutive lines are ONE paragraph (this is the soft-wrap fix)
-    const para = [];
-    while (i < lines.length && lines[i].trim() && !RE_ITEM.test(lines[i]) && !RE_HR.test(lines[i]) &&
-      !/^\s{0,3}>/.test(lines[i]) && !/^\s{0,3}(#{1,6})\s/.test(lines[i]) && !/^\s{0,3}(`{3,}|~{3,})/.test(lines[i])) {
-      para.push(lines[i].trim()); i++;
-    }
-    if (para.length) { out += `<p>${inline(para.join(' '), ctx)}</p>`; blocks++; }
-    else i++;   // nothing consumed — never spin
-  }
-  return out;
-}
-function cells(row) {
-  return String(row).trim().replace(/^\|/, '').replace(/\|$/, '').split(/(?<!\\)\|/).map((c) => c.trim());
-}
-function slug(s) { return String(s).toLowerCase().replace(/[^\w]+/g, '-').replace(/^-|-$/g, '').slice(0, 60); }
-
-// collect one list block (items + their wrapped continuation lines), preserving indent
-function listBlock(lines, start) {
-  const items = [];
-  let i = start;
-  while (i < lines.length) {
-    const ln = lines[i];
-    const m = ln.match(RE_ITEM);
-    if (m) {
-      items.push({ indent: m[1].replace(/\t/g, '    ').length, ordered: /\d/.test(m[2]), lines: [m[3]] });
-      i++; continue;
-    }
-    if (!ln.trim()) {
-      const nx = lines[i + 1] || '';
-      if (RE_ITEM.test(nx) || /^\s{2,}\S/.test(nx)) { i++; continue; }   // loose list
-      break;
-    }
-    if (items.length && /^\s+\S/.test(ln)) { items[items.length - 1].lines.push(ln.trim()); i++; continue; }
-    break;
-  }
-  return { items, next: i };
-}
-// A run of items at one indent is one list; a change of marker type (bullet ↔ number, or the
-// first `- [ ]`) starts a sibling list, the way every markdown renderer does it.
-function renderLists(items, start, ctx) {
-  const base = items[start].indent;
-  let html = '', i = start;
-  while (i < items.length && items[i].indent >= base) {
-    const r = renderList(items, i, ctx);
-    html += r.html;
-    if (r.next === i) break;                 // never spin
-    i = r.next;
-  }
-  return { html, next: i };
-}
-function renderList(items, start, ctx) {
-  const base = items[start].indent;
-  const ordered = items[start].ordered;
-  const task = /^\[[ xX]\]\s/.test(items[start].lines[0]);
-  const lis = [];
-  let i = start;
-  while (i < items.length && items[i].indent >= base) {
-    if (items[i].indent === base &&
-      (items[i].ordered !== ordered || /^\[[ xX]\]\s/.test(items[i].lines[0]) !== task)) break;
-    if (items[i].indent > base) {
-      const sub = renderLists(items, i, ctx);
-      if (lis.length) lis[lis.length - 1] = lis[lis.length - 1].replace(/<\/li>$/, sub.html + '</li>');
-      else lis.push(`<li>${sub.html}</li>`);
-      i = sub.next; continue;
-    }
-    let body = items[i].lines.join(' ');
-    const t = body.match(/^\[([ xX])\]\s+(.*)$/);
-    if (t) lis.push(`<li><span class="box${t[1] === ' ' ? '' : ' done'}" aria-hidden="true">${t[1] === ' ' ? '☐' : '☑'}</span><span>${inline(t[2], ctx)}</span></li>`);
-    else lis.push(`<li>${inline(body, ctx)}</li>`);
-    i++;
-  }
-  const tag = ordered ? 'ol' : 'ul';
-  return { html: `<${tag}${task ? ' class="task"' : ''}>${lis.join('')}</${tag}>`, next: i };
-}
-// the identity block: `key: value` lines, all at the same level, at least three of them
-function isMetaList(items) {
-  return items.length >= 3 && items.every((it) => it.indent === items[0].indent &&
-    /^[A-Za-z][\w .-]{0,30}:\s*\S/.test(it.lines.join(' ')));
-}
-function metaCard(rawLines) {
-  const rows = [];
-  for (const raw of rawLines) {
-    const m = String(raw).trim().match(/^-?\s*([A-Za-z][\w .-]{0,30}):\s*(.*)$/);
-    if (!m) continue;
-    rows.push(`<dt>${esc(m[1])}</dt><dd>${inline(m[2].replace(/^["']|["']$/g, ''), { dir: [] })}</dd>`);
-  }
-  return rows.length ? `<dl class="fm">${rows.join('')}</dl>` : '';
-}
-// Code spans are lifted out behind a sentinel first, so the emphasis rules never chew
-// through a path like `a_b_c`. SENT is a control char no document text can contain.
-const SENT = '\u0001';
-function inline(s, ctx) {
-  const codes = [];
-  let t = esc(s).replace(/`([^`]+)`/g, (m, c) => { codes.push(c); return SENT + (codes.length - 1) + SENT; });
-  t = t.replace(/!\[([^\]]*)\]\(([^)\s]*)[^)]*\)/g, (m, alt, src) => mdImage(alt, src, ctx));
-  t = t.replace(/\[([^\]]+)\]\(([^)\s]+)[^)]*\)/g, (m, txt, url) => mdLink(txt, url, ctx));
-  t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-  t = t.replace(/(^|[^\w*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
-  t = t.replace(/(^|[^\w_])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
-  t = t.replace(/~~([^~]+)~~/g, '<del>$1</del>');
-  return t.replace(/\u0001(\d+)\u0001/g, (m, n) => `<code>${codes[n]}</code>`);
-}
-function mdLink(txt, url, ctx) {
-  const u = String(url).trim();
-  if (/^(https?:)?\/\//i.test(u) || /^mailto:/i.test(u)) return `<a href="${u}" target="_blank" rel="noopener">${txt}</a>`;
-  if (/\.md(#[^)]*)?$/i.test(u)) return `<a href="#" data-doc="${esc(resolveDocPath(ctx, u))}">${txt}</a>`;
-  return txt;                       // a relative non-document target is not clickable here
-}
-// A markdown image. Repo-relative → inline via the guarded /api/asset (R3). Remote / data: / any
-// scheme → NEVER fetched; stays alt-text (R4, the no-beacon invariant). alt/src arrive already
-// HTML-escaped from inline(), so they are safe to interpolate as-is.
-function mdImage(alt, src, ctx) {
-  const label = alt || 'image';
-  const repoRel = window.PreviewKind ? window.PreviewKind.isRepoRelativeSrc(src) : false;
-  if (!repoRel) return `<em>${label}</em>`;
-  const rel = resolveDocPath(ctx, src);
-  if (!rel) return `<em>${label}</em>`;
-  const url = `/api/asset?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(rel)}`;
-  return `<img class="doc-img" src="${url}" alt="${label}" loading="lazy" />`;
-}
-// bundle-relative (`/planning/…`, the OKF convention) or relative to the open document
-function resolveDocPath(ctx, u) {
-  const clean = String(u).split('#')[0];
-  const stack = clean.startsWith('/') ? [] : [...((ctx && ctx.dir) || [])];
-  for (const p of clean.split('/')) {
-    if (!p || p === '.') continue;
-    if (p === '..') stack.pop(); else stack.push(p);
-  }
-  return stack.join('/');
-}
-
-// ── new session: name it, pick its branch, before it starts ──
-/* R5 — "HERE" MUST HAVE A VISIBLE REFERENT.
- *
- * The composer acts on `state.wsId` and always did. That was legible when it lived underneath a
- * single selected workspace pane; once the sidebar became one tree showing every repository at
- * once, "run an agent here" named nothing on screen. This does not change WHAT it acts on (that
- * would be a behaviour change — PRD assumption A3); it makes the target sayable before the click.
- *
- * Called from three places, because the target changes without the form being reopened: on open, on
- * every workspace selection, and on every workspace push (a rename or a checkout moves the branch). */
-function newTargetText() {
-  const w = state.workspaces.find((x) => x.id === state.wsId);
-  if (!w) return { text: 'no tree selected — choose one below first', none: true };
-  const init = initiativeOf(w);
-  const where = init.kind === 'nogit' ? 'a plain folder' : (w.branch ? `on ${w.branch}` : 'no branch checked out');
-  return { text: `in ${w.name} · ${where}`, none: false };
-}
-function renderNewTarget() {
-  const el = $('newWhere');
-  if (!el) return;
-  const t = newTargetText();
-  el.textContent = t.text;
-  el.dataset.none = t.none ? '1' : '0';
-}
-function openNewForm() {
-  const w = state.workspaces.find((x) => x.id === state.wsId);
-  $('newForm').hidden = false;
-  $('newBtn').setAttribute('aria-expanded', 'true');
-  renderNewTarget();
-  // 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();               // 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);
-}
-function closeNewForm() {
-  $('newForm').hidden = true;
-  $('newBtn').setAttribute('aria-expanded', 'false');
-}
-// 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'), nogit = $('newNoGit');
-  const b = state.branch;
-  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) => {
-      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)));
-});
-$('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 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__') {
-      const nb = $('newBranchName').value.trim();
-      if (!nb) { flash('type a name for the new branch, or pick "stay on current"'); return; }
-      msg.branch = nb; msg.createBranch = true;
-    } 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-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 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?' + 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() {
-  // 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 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);
-}
-// Open/close the drawer. It lives in the flex column below the terminal, so toggling it resizes
-// termhost — the existing ResizeObserver refits the terminal; nothing is ever covered.
-function openScratch(on) {
-  const el = $('scratch');
-  const open = on == null ? el.dataset.open !== 'true' : !!on;
-  el.dataset.open = String(open);
-  $('scratchToggle').setAttribute('aria-expanded', String(open));
-  $('scratchBtn').setAttribute('aria-pressed', String(open));
-  store.set('scratch-open', open ? '1' : '0');
-  if (open) setTimeout(() => $('scratchText').focus(), 0);
-}
-// send-to-terminal writes the text into the active session's PTY WITHOUT a trailing newline — the
-// PM reviews and presses enter. Disabled when there is no live session to receive it.
-function activeLiveSession() {
-  const s = state.sessions.find((x) => x.id === state.active);
-  return s && s.state !== 'exited' ? s : null;
-}
-function refreshScratchSend() {
-  const btn = $('scratchSend'); if (!btn) return;
-  const live = !!activeLiveSession();
-  btn.disabled = !live;
-  btn.title = live ? 'Paste into the active terminal (does not press enter)' : 'no live session to send to';
-}
-$('scratchToggle').onclick = () => openScratch();
-$('scratchBtn').onclick = () => openScratch();
-$('scratchText').addEventListener('input', saveScratchpad);
-$('scratchCopy').onclick = async () => {
-  const text = $('scratchText').value;
-  try { await navigator.clipboard.writeText(text); setScratchStatus('copied'); }
-  catch { $('scratchText').select(); setScratchStatus('press ⌘C to copy'); }
-};
-$('scratchSend').onclick = () => {
-  const s = activeLiveSession();
-  if (!s) { flash('no live session to send to — start or select one'); return; }
-  const text = $('scratchText').value;
-  if (!text) return;
-  send({ t: 'input', id: s.id, data: text });   // no trailing newline: nothing auto-runs
-  setScratchStatus('sent → terminal');
-};
-{ const open = store.get('scratch-open') === '1'; if (open) openScratch(true); }
-
-// ── add a workspace: pick a folder (the GUI twin of running `pmos` in that repo) ──
-function closeAddWs() {
-  $('addWsForm').hidden = true; $('addWsBtn').setAttribute('aria-expanded', 'false'); $('addWsPath').value = '';
-}
-$('addWsBtn').onclick = () => {
-  const f = $('addWsForm');
-  f.hidden = !f.hidden;
-  $('addWsBtn').setAttribute('aria-expanded', String(!f.hidden));
-};
-$('addWsCancel').onclick = closeAddWs;
-$('addWsForm').addEventListener('submit', (e) => { e.preventDefault(); addWorkspace($('addWsPath').value); });
-// The browser's own directory picker cannot yield an absolute path, so the LOCAL server opens
-// the machine's native chooser. Where there is none (a headless Linux box), the in-app browser
-// stands in — the PM is never left with only a text field (R10).
-$('pickFolderBtn').onclick = async () => {
-  const btn = $('pickFolderBtn'), label = btn.textContent;
-  btn.disabled = true; btn.textContent = 'choosing…';
-  let j = null, status = 0;
-  try {
-    const r = await fetch('/api/pick-folder', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ start: currentRoot() }) });
-    status = r.status;
-    j = await r.json();
-  } catch {}
-  btn.disabled = false; btn.textContent = label;
-  if (j && j.ok && j.root) { addWorkspace(j.root); return; }
-  if (j && j.cancelled) return;
-  if (j && j.busy) { flash('a folder chooser is already open'); return; }
-  // 404 = an OLDER server without these routes is still running — the browser reload alone
-  // didn't pick up the new code. Say so, instead of falling into a folder browser that 404s too.
-  if (status === 404) { flash('restart the server to enable the folder picker: pmos stop && pmos'); return; }
-  openFsPicker(currentRoot());          // no native chooser on this system, or the call failed
-};
-function currentRoot() {
-  const w = state.workspaces.find((x) => x.id === state.wsId);
-  return w ? w.root : '';
-}
-
-// ── in-app folder browser (the fallback chooser) ──
-async function openFsPicker(start) {
-  $('fsPicker').style.display = 'grid';
-  await loadFs(start);
-}
-function closeFsPicker() { $('fsPicker').style.display = 'none'; }
-async function loadFs(dir) {
-  let j = null, status = 0;
-  try { const r = await fetch('/api/fs/list?path=' + encodeURIComponent(dir || '')); status = r.status; j = await r.json(); } catch {}
-  if (!j || !j.ok) {
-    $('fsList').innerHTML = status === 404
-      ? `<div class="empty">This folder browser needs the newer server. Restart it: <b>pmos stop &amp;&amp; pmos</b>.</div>`
-      : `<div class="empty">Could not read <b>${esc(dir || 'that folder')}</b>.</div>`;
-    return;
-  }
-  state.fsDir = j.path;
-  // the crumb truncates from the LEFT (rtl) — <bdi> keeps the path's own characters in order,
-  // so an absolute path does not come back with its leading slash on the wrong end
-  $('fsCrumb').innerHTML = `<bdi>${esc(j.path)}</bdi>`;
-  $('fsUp').disabled = !j.parent;
-  $('fsList').innerHTML = j.entries.length
-    ? j.entries.map((e) => `<button class="pitem" data-dir="${esc(e.path)}">
-        <span class="g" aria-hidden="true">▸</span><span>${esc(e.name)}</span>
-        ${e.isRepo ? '<span class="badge">git</span>' : ''}</button>`).join('')
-    : `<div class="empty">${j.denied ? 'Not readable.' : 'No sub-folders here — “use this folder” to add it.'}</div>`;
-  $('fsList').querySelectorAll('[data-dir]').forEach((b) => b.onclick = () => loadFs(b.dataset.dir));
-}
-$('fsUp').onclick = () => { const p = state.fsDir && state.fsDir.replace(/[/\\][^/\\]+$/, ''); loadFs(p || '/'); };
-$('fsUse').onclick = async () => { if (await addWorkspace(state.fsDir)) closeFsPicker(); };
-$('fsClose').onclick = closeFsPicker;
-$('fsPicker').addEventListener('click', (e) => { if (e.target === $('fsPicker')) closeFsPicker(); });
-
-// ── library lens + filter ──
-const FIND_PLACEHOLDER = { history: 'search past sessions…', scheduled: 'filter the library…' };
-$('libFind').addEventListener('input', (e) => { state.filter = e.target.value; renderLibrary(); });
-$('libRefresh').onclick = () => {
-  const b = $('libRefresh'); b.classList.add('spin');
-  refreshLibrary(); setTimeout(() => b.classList.remove('spin'), 500);
-};
-
-// ── chrome ──
-$('themeBtn').onclick = () => {
-  const r = document.documentElement;
-  const next = r.dataset.theme === 'dark' ? 'light' : 'dark';
-  r.dataset.theme = next;
-  store.set('theme', next);   // survives reloads (R7)
-  for (const [id, t] of state.terms) { try { t.term.options.theme = xtheme(); } catch {} fitOne(id); }
-};
-$('closeDoc').onclick = closeDoc;
-
-// ── 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;
-  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>';
-}
-
-async function edClose(reload) {
-  ed.on = false; ed.path = null; ed.base = ''; ed.dirty = false;
-  edControls();
-  // awaited: the reload replaces docBody, so anything that renders into it afterwards (the
-  // alignment offer) must not race the replacement.
-  if (reload && state.docPath) await 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/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;
-  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}`);
-  const saved = ed.path;
-  await edClose(true);
-  alOffer(saved);                                          // R7: offered, never blocking — the save is already done
-}
-
-
-// ── alignment (workspace-doc-editor R5–R7) ────────────────────────────────────────────────────
-// Strictly downstream of a save. Nothing here runs until the PM has changed something, and what it
-// looks at is scoped by that change — not the repository. It is offered, never blocking: the save
-// completed before any of this, and ignoring it costs nothing.
-async function alOffer(pth) {
-  if (!pth) return;
-  let out = {};
-  try { out = await (await fetch(`/api/align/candidates?ws=${encodeURIComponent(state.wsId || '')}&path=${encodeURIComponent(pth)}`)).json(); }
-  catch { return; }
-  if (!out.ok || out.empty || !out.candidates || !out.candidates.length) return;
-  state.alCand = out;
-  const n = out.candidates.length;
-  const bar = document.createElement('div');
-  bar.className = 'al-offer';
-  bar.innerHTML = `<span>${n} other document${n === 1 ? '' : 's'} may now be out of step with that change.</span>
-    <button data-al-see>see them</button><button class="q" data-al-no>not now</button>`;
-  const body = $('docBody');
-  body.prepend(bar);
-  bar.querySelector('[data-al-no]').onclick = () => bar.remove();
-  bar.querySelector('[data-al-see]').onclick = () => alShow();
-}
-
-// The candidate list, each with the concrete reason it qualified. The PM chooses which to hand to
-// an agent — so even the drafting step is something they asked for, not something that happened.
-function alShow() {
-  const c = state.alCand; if (!c) return;
-  $('docBody').innerHTML = `<div class="al">
-    <div class="al-lede">Your change to <span class="mono">${esc(c.change.file)}</span> may leave these out of step.</div>
-    <div class="al-sub">Each one has a concrete tie to what you changed — a link, a shared initiative, or text it quotes. Considered ${c.considered} documents.</div>
-    ${c.candidates.map((x, i) => `<label class="al-c">
-        <input type="checkbox" data-al-pick="${i}" checked />
-        <span><span class="al-p mono">${esc(x.path)}</span>
-        <span class="al-why">${x.reasons.map((r) => esc(r)).join(' · ')}</span></span>
-      </label>`).join('')}
-    <div class="al-acts">
-      <button data-al-go>Draft the edits</button>
-      <button class="q" data-al-close>Close</button>
-      <span class="al-note">An agent reads only the documents you tick, and only against this change.</span>
-    </div></div>`;
-  $('docBody').querySelector('[data-al-close]').onclick = () => openDoc(c.change.file);
-  $('docBody').querySelector('[data-al-go]').onclick = async () => {
-    const targets = [...$('docBody').querySelectorAll('[data-al-pick]')]
-      .filter((b) => b.checked).map((b) => c.candidates[Number(b.dataset.alPick)].path);
-    if (!targets.length) { flash('nothing ticked'); return; }
-    let out = {};
-    try {
-      out = await (await fetch('/api/align/start', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ws: state.wsId, path: c.change.file, change: c.change, targets }) })).json();
-    } catch { out = { ok: false, error: 'could not reach the workspace server' }; }
-    if (!out.ok) { flash(out.error || 'could not start'); return; }
-    flash(`drafting against ${targets.length} document${targets.length === 1 ? '' : 's'} — watch the session, then open drafts`);
-    if (out.sessionId) selectSession(out.sessionId);
-  };
-}
-
-// The drafts an agent produced, each an applyable diff. Apply uses the same anchored guard as every
-// other write here: the anchor must appear exactly once or the write is refused.
-async function alDrafts() {
-  let out = {};
-  try { out = await (await fetch(`/api/align/drafts?ws=${encodeURIComponent(state.wsId || '')}`)).json(); }
-  catch { out = { ok: false, error: 'could not reach the workspace server' }; }
-  showRail(); $('paneDoc').hidden = false; foldPane('doc', true);
-  $('crumb').innerHTML = '<bdi>alignment drafts</bdi>';
-  if (!out.ok) { $('docBody').innerHTML = `<div class="al"><div class="al-lede">${esc(out.error || 'could not read the drafts')}</div></div>`; return; }
-  if (out.empty || !out.drafts.length) {
-    $('docBody').innerHTML = `<div class="al"><div class="al-lede">No drafts yet.</div>
-      <div class="al-sub">Edit a document, then ask for the alignment when it offers.</div></div>`;
-    return;
-  }
-  state.alDrafts = out;
-  $('docBody').innerHTML = `<div class="al">
-    <div class="al-lede">${out.drafts.length} edit${out.drafts.length === 1 ? '' : 's'} to bring other documents back in line.</div>
-    <div class="al-sub">Drafted against your change to <span class="mono">${esc(out.source || '')}</span>. Nothing is written until you apply it.</div>
-    ${out.drafts.map((d, i) => `<div class="al-d" data-al-d="${i}">
-      <div class="al-p mono">${esc(d.file)}</div>
-      <div class="al-why">${esc(d.why || '')}</div>
-      <div class="al-code">
-        ${String(d.before || '').split('\n').map((l) => `<div class="ed-l del"><span class="g"></span><span class="t">${esc(l) || '&nbsp;'}</span></div>`).join('')}
-        ${String(d.after || '').split('\n').map((l) => `<div class="ed-l add"><span class="g"></span><span class="t">${esc(l) || '&nbsp;'}</span></div>`).join('')}
-      </div>
-      <div class="al-acts"><button data-al-apply="${i}">Apply</button>
-        <button class="q" data-al-skip="${i}">Skip</button></div>
-    </div>`).join('')}</div>`;
-  $('docBody').querySelectorAll('[data-al-skip]').forEach((b) => b.onclick = () => {
-    $('docBody').querySelector(`[data-al-d="${b.dataset.alSkip}"]`).classList.add('done');
-  });
-  $('docBody').querySelectorAll('[data-al-apply]').forEach((b) => b.onclick = async () => {
-    const d = state.alDrafts.drafts[Number(b.dataset.alApply)];
-    b.disabled = true;
-    let r = {};
-    try {
-      r = await (await fetch('/api/align/apply', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ws: state.wsId, file: d.file, before: d.before, after: d.after, why: d.why, source: state.alDrafts.source }) })).json();
-    } catch { r = { ok: false, error: 'could not reach the workspace server' }; }
-    b.disabled = false;
-    const card = $('docBody').querySelector(`[data-al-d="${b.dataset.alApply}"]`);
-    if (!r.ok) {
-      let e = card.querySelector('.al-err');
-      if (!e) { e = document.createElement('div'); e.className = 'al-err'; card.appendChild(e); }
-      e.textContent = r.error === 'stale' ? 'that text is no longer in the file — the draft is out of date'
-        : r.error === 'ambiguous' ? (r.detail || 'that text appears more than once — refusing to guess')
-        : (r.detail || r.error || 'refused');
-      return;
-    }
-    card.classList.add('done');
-    flash('aligned ' + d.file.split('/').pop());
-  });
-  refit();
-}
-
-$('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) ─────────────────────────────────────
-// Summoned from ⌘K, rendered in the reader, derived through the server's local state adapter and
-// validated by the deliverable contract. Never resident: closing the reader (✕/Esc) dismisses it.
-const SURFACES = [
-  { name: 'initiatives', label: 'initiatives', phase: 'plan' },
-  { name: 'roadmap', label: 'roadmap', phase: 'plan' },
-  { name: 'okr', label: 'okr + levers', phase: 'measure' },
-  { 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 },
-];
-const SURFACE_BY_NAME = {}; SURFACES.forEach((v) => { SURFACE_BY_NAME[v.name] = v; });
-const SF_STAT = { planning: ['○', 'planning'], building: ['◐', 'building'], blocked: ['◆', 'blocked'], landed: ['▲', 'landed'] };
-
-async function openSurface(name) {
-  showRail();
-  $('paneDoc').hidden = false; $('railSplit').hidden = false; foldPane('doc', true);
-  state.surface = name; state.docPath = null;
-  ed.on = false; edControls();
-  document.querySelectorAll('.doc').forEach((b) => b.classList.remove('on'));
-  $('crumb').innerHTML = `<bdi>surface · ${esc(name)}</bdi>`;
-  $('docBody').scrollTop = 0;
-  // The skeleton IS the loading state — visually distinct from a calm empty and a red error, so a
-  // slow read never looks like "nothing awaits" (D64 B2).
-  $('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.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.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>`;
-  } 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>`;
-  }
-  wireSurface();
-  refit();
-}
-function sfHead(active, ok) {
-  const meta = SURFACE_BY_NAME[active] || {};
-  let chip = '';
-  if (ok !== false) {
-    chip = meta.console
-      ? `<span class="sf-chip src" title="derived live from local file-mode state (D64)">file-mode</span>`
-      : `<span class="sf-chip" title="the deliverable contract passed before this rendered">contract&nbsp;✓</span>`;
-  }
-  return `<div class="sf-head">
-    <span class="sf-views" role="tablist" aria-label="Surface">${SURFACES.map((v) =>
-      `<button role="tab" data-surface="${v.name}" data-phase="${v.phase}" aria-selected="${v.name === active}" class="${v.name === active ? 'on' : ''}">${esc(v.label)}</button>`).join('')}</span>
-    ${chip}</div>`;
-}
-function wireSurface() {
-  // the workflow surface's initiative ids open the DOSSIER (R9, route 2) — a read, not a checkout
-  document.querySelectorAll('#docBody .wf-id[data-init]').forEach((b) => b.onclick = (e) => {
-    e.preventDefault(); openInitiative(b.dataset.init, state.wsId);
-  });
-  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],.wf-id[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
-}
-function surfaceBody(name, payload) {
-  if (!payload || !payload.ok) return sfCantProduce(name, payload && payload.contract);
-  const s = payload.surface || {};
-  if (name === 'initiatives') return sfInitiatives(s);
-  if (name === 'roadmap') return sfRoadmap(s);
-  if (name === 'okr') return sfOkr(s);
-  if (name === 'report') return sfReport(s);
-  return '';
-}
-function sfCantProduce(name, contract) {
-  const miss = ((contract && contract.missing) || []).join(', ') || 'the required data';
-  return `<div class="sf-fail"><div class="mk" aria-hidden="true">◇</div>
-    <h3>Can’t produce the ${esc(name)} surface here</h3>
-    <p>This workspace has no state to build it from — so there’s nothing to show, and the surface won’t invent one.</p>
-    <p class="miss">contract: missing ${esc(miss)}</p>
-    <p class="hint">Open a repo with a <code>planning/</code> tree, or start work with <code>create_initiative</code>.</p></div>`;
-}
-function sfInitiatives(s) {
-  const needs = (s.needs && s.needs.length)
-    ? `<div class="sf-needs"><div class="nh"><span class="dot" aria-hidden="true"></span><b>${s.needs.length} need${s.needs.length > 1 ? '' : 's'} you</b><span class="sub">acted on here, not buried</span></div>
-       ${s.needs.map((n) => `<div class="need"><span class="ph" aria-hidden="true"></span><div class="txt"><div class="t">${esc(n.t)}</div><div class="m">${esc(n.kind)}${n.initiative_id ? ' · ' + esc(n.initiative_id) : ''}</div></div>
-         <button class="go" data-open-surface="report">▸ report</button></div>`).join('')}</div>`
-    : `<div class="sf-needs calm"><div class="nh"><span class="dot" aria-hidden="true"></span><b>Nothing needs you</b><span class="sub">${s.pulse.total} initiatives</span></div>
-       <div class="calm-body">No blocked work, no pending acceptance. The list is here when you want it — the workspace won’t nag.</div></div>`;
-  const p = s.pulse || { total: 0 };
-  const dist = [['plan', 'planning', p.planning], ['deliver', 'building', p.building], ['deliver', 'blocked', p.blocked], ['report', 'landed', p.landed]];
-  const pulse = `<div class="sf-pulse"><span class="n"><b>${p.total}</b> initiatives</span>
-    <span class="sf-dist" aria-hidden="true">${dist.map(([ph, k, c]) => c ? `<i data-phase="${ph}" style="width:${c / (p.total || 1) * 100}%"></i>` : '').join('')}</span>
-    <span class="sf-legend">${['planning', 'building', 'blocked', 'landed'].map((k) => `<span>${SF_STAT[k][0]} ${k} ${p[k] || 0}</span>`).join('')}</span></div>`;
-  const order = [['needs you', (i) => i.status === 'blocked'], ['in flight', (i) => i.status === 'building'],
-    ['planned', (i) => i.status === 'planning'], ['landed', (i) => i.status === 'landed']];
-  const list = order.map(([lab, f]) => {
-    const items = (s.initiatives || []).filter(f); if (!items.length) return '';
-    return `<div class="sf-grp">${lab} · ${items.length}</div><div class="sf-list">${items.map(sfRow).join('')}</div>`;
-  }).join('');
-  return needs + pulse + list;
-}
-function sfRow(i) {
-  const [gl, glab] = SF_STAT[i.status] || ['•', i.status];
-  const metrics = i.tracked
-    ? `<span class="m"><span class="k">RICE</span><b>${i.rice}</b></span><span class="m"><span class="k">effort</span>${i.effort}pt</span>
-       <span class="m"><span class="k">progress</span><span class="sf-prog"><i style="width:${i.progress || 0}%"></i></span></span>`
-    : `<span class="m"><span class="k">RICE</span><span class="untr">— not tracked</span></span>
-       <span class="m"><span class="k">progress</span><span class="untr">— not tracked</span></span>`;
-  return `<details class="sf-row" data-phase="${i.phase}"${i.status === 'blocked' ? ' open' : ''}>
-    <summary>
-      <span class="sf-spine" aria-hidden="true"></span>
-      <span class="sf-stat"><span class="g">${gl} ${glab}</span></span>
-      <span class="sf-id">${esc(i.id)}${i.title ? `<span class="ti">${esc(i.title)}</span>` : ''}</span>
-      <span class="sf-metrics">${metrics}</span>
-      <span class="sf-chev" aria-hidden="true">▸</span>
-    </summary>
-    <div class="sf-detail">
-      ${i.kr ? `<div><h4>Anchor</h4><p>${esc(i.kr)}</p></div>` : ''}
-      <div><h4>Status</h4><p>${esc(i.statusText || i.status)}${i.stage ? ` · stage ${esc(i.stage)}` : ''}${i.accepted ? ' · accepted' : ''}</p></div>
-      <div><h4>Artifacts</h4><div class="sf-arts">${(i.artifacts || []).map((a) =>
-        `<button class="sf-art" data-doc="${esc(a.path)}"><span class="role">${esc(a.role)}</span>${esc(a.name)}</button>`).join('') || '<span class="untr">none on disk</span>'}</div></div>
-    </div></details>`;
-}
-function sfRoadmap(s) {
-  return (s.groups || []).map((g) => `<div class="sf-rc"><h4>${esc(g.label)} · ${g.items.length}</h4>
-    ${g.items.map((i) => `<div class="sf-rcrow" data-phase="${i.phase}"><span class="sf-spine" aria-hidden="true"></span><span class="nm">${esc(i.id)}</span><span class="st">${(SF_STAT[i.status] || ['•'])[0]} ${esc(i.status)}</span></div>`).join('')}
-  </div>`).join('') + (s.note ? `<div class="sf-note">${esc(s.note)}</div>` : '');
-}
-function sfOkr(s) {
-  // A FAILED read renders RED and nothing else — never a list that silently omits what could not be
-  // parsed. Reusing .cs-error deliberately: the workspace has exactly one way to say "broken read",
-  // and a second visual vocabulary for the same meaning is how one of them ends up looking calm.
-  if (s.unreadable) return csError('okr', s.unreadable);
-
-  const h = s.anchor_health;
-  // Unresolvable ANCHORS are the defect this surface exists to expose: an anchor naming a KR no
-  // document declares sat unseen for two days precisely because nothing rendered it. It is RED, and
-  // it is placed ABOVE the objectives so it cannot be scrolled past.
-  const bad = (h && h.unresolvable) || [];
-  const anchorBand = bad.length
-    ? `<div class="cs-error" role="alert">
-        <div class="cs-err-head"><span class="mk" aria-hidden="true">▲</span>
-          <b>${bad.length} anchor${bad.length > 1 ? 's' : ''} name${bad.length > 1 ? '' : 's'} something these documents don’t declare</b></div>
-        ${bad.map((u) => `<p class="cs-err-why"><b>${esc(u.initiative)}</b> — <code>${esc(u.raw)}</code><br>${esc(u.reason)}</p>`).join('')}
-        <p class="cs-err-note">An anchor that resolves to nothing is not an anchor. Either write one the
-          OKR documents declare, or add the KR — adding a KR is the PM’s act, never an agent’s.</p></div>`
-    : (h ? `<div class="sf-pulse"><span class="n"><b>${h.checked}</b> anchors resolve</span>
-        <span class="sf-legend"><span>every non-empty parent_kr names an objective or KR written in these documents${h.empty ? ` · ${h.empty} unanchored` : ''}</span></span></div>` : '');
-
-  const body = (s.objectives || []).map((o) => `<div class="sf-kr"><div class="obj">${esc(o.id)} · ${esc(o.name)}</div>
-    ${(o.krs || []).map((k) => `<div class="krrow"><div class="krh"><span class="lab">${esc(k.id)}</span><span>${esc(k.name)}</span></div>
-      <div class="lev"><span class="untr">current · target · levers — not tracked</span></div></div>`).join('') || '<span class="untr">no KRs parsed</span>'}
-  </div>`).join('');
-  return anchorBand + body + (s.note ? `<div class="sf-note">${esc(s.note)}</div>` : '');
-}
-function sfReport(s) {
-  return `<div class="sf-rep"><p class="lead">${esc(s.cadence)} report · derived on demand</p>
-    ${(s.sections || []).map((sec) => `<h3>${esc(sec.heading)}</h3><ul>${((sec.items && sec.items.length) ? sec.items : ['—']).map((x) => `<li>${esc(x)}</li>`).join('')}</ul>`).join('')}</div>`;
-}
-
-// ── console surfaces (D64 Track B): needs-you · radar · metrics over file-mode state ────────────
-// HONESTY BY CONSTRUCTION: three visually distinct outcomes —
-//   error → a RED banner (broken/missing/corrupt read, or a fetch failure)
-//   empty → a CALM state (successfully read, genuinely nothing)
-//   data  → the surface.
-// A broken read must NEVER render the calm empty. csError is the only thing a failed read may show.
-function consoleBody(name, p) {
-  if (!p || p.ok === false) return csError(name, (p && p.error) || 'the file-mode read failed');
-  if (p.empty) return csEmpty(name);
-  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) {
-  return `<div class="cs-error" role="alert">
-    <div class="cs-err-head"><span class="mk" aria-hidden="true">▲</span><b>Can’t read the ${esc(name)} surface</b></div>
-    <p class="cs-err-why">${esc(why)}</p>
-    <p class="cs-err-note">This is a broken read, not an all-clear. The workspace refuses to show a green
-      empty state over a failed read — fix the file-mode state, then reopen.</p></div>`;
-}
-function csEmpty(name) {
-  const msg = name === 'needs'
-    ? 'Nothing needs your decision right now. No open Acceptance Gate, no overdue outcome check.'
-    : 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>`;
-}
-function csNeeds(d) {
-  const items = (d && d.items) || [];
-  return `<div class="cs-needs"><div class="cs-h"><span class="dot" aria-hidden="true"></span>
-    <b>${items.length} need${items.length === 1 ? '' : 's'} you</b><span class="src">file-mode · Acceptance Gate is non-delegable (D12)</span></div>
-    ${items.map((n) => `<div class="cs-need" data-kind="${esc(n.kind)}">
-      <span class="ph" aria-hidden="true"></span>
-      <div class="txt"><div class="t">${esc(n.question)}</div>
-        <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-init="${esc(r.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;
-  const wms = d.watermelons || [];
-  const flags = d.flags || 0;
-  const ragCls = (r) => 'rag-' + (String(r || 'grey').toLowerCase());
-  const gate = `<div class="cs-card"><h4>Review Gate</h4>
-    <div class="cs-big">${g.pass_rate == null ? '—' : Math.round(g.pass_rate * 100) + '%'}<span class="u">pass</span></div>
-    <div class="cs-sub">${g.passing || 0}/${g.total || 0} evals pass · rule verdict ILIKE 'pass%' OR score ≥ 0.85</div></div>`;
-  const calCard = cal ? `<div class="cs-card ${cal.meets_d40 ? '' : 'warnedge'}"><h4>Calibration (D40)</h4>
-    <div class="cs-big">${cal.kappa == null ? '—' : (+cal.kappa).toFixed(2)}<span class="u">κ</span></div>
-    <div class="cs-sub">n=${cal.n == null ? '—' : cal.n} · TNR ${cal.tnr == null ? 'n/a (leniency blind spot)' : Math.round(cal.tnr * 100) + '%'} · ${esc(cal.status || '')}${cal.meets_d40 ? '' : ' · below κ≥0.60'}</div>
-    ${cal.caveat ? `<div class="cs-caveat">${esc(cal.caveat)}</div>` : ''}</div>` : '';
-  const watermelon = `<div class="cs-wm"><div class="cs-h"><span class="dot ${flags ? 'warn' : 'ok'}" aria-hidden="true"></span>
-      <b>${flags} watermelon flag${flags === 1 ? '' : 's'}</b><span class="src">green-on-metrics / red-on-strategy · anti-drift</span></div>
-    ${wms.map((w) => `<div class="cs-wmrow"><span class="rag ${ragCls(w.rag)}" title="${esc(w.rag || '')}"></span>
-      <span class="nm">${esc(w.id)}${w.title ? `<span class="ti">${esc(w.title)}</span>` : ''}</span>
-      <span class="st">${esc(w.verdict || '—')}${w.score != null ? ' · ' + w.score : ''}${w.corrections != null ? ' · ' + w.corrections + ' corr' : ''}</span></div>`).join('') || '<div class="cs-none">no initiatives on the radar</div>'}</div>`;
-  return `<div class="cs-radar"><div class="cs-src">source: ${esc(source || 'file-mode')}</div>
-    <div class="cs-cards">${gate}${calCard}</div>${watermelon}</div>`;
-}
-function csMetrics(d, source) {
-  const pct = (x) => x == null ? '—' : Math.round(x * 100) + '%';
-  const ns = d.avg_corrections_per_run == null ? '—' : (+d.avg_corrections_per_run).toFixed(2);
-  const per = (d.per_initiative || []).slice(0, 12);
-  return `<div class="cs-metrics"><div class="cs-src">source: ${esc(source || 'file-mode')}</div>
-    <div class="cs-cards">
-      <div class="cs-card"><h4>North star</h4><div class="cs-big">${ns}<span class="u">corr/run</span></div>
-        <div class="cs-sub">human corrections per run · lower is better (D10)</div></div>
-      <div class="cs-card"><h4>Throughput</h4><div class="cs-big">${d.total_runs == null ? '—' : d.total_runs}<span class="u">runs</span></div>
-        <div class="cs-sub">${d.runs_needing_correction == null ? '—' : d.runs_needing_correction} needed a correction · ${pct(d.share_runs_corrected)} share</div></div>
-    </div>
-    ${per.length ? `<div class="cs-per"><div class="cs-h"><b>per initiative</b><span class="src">avg corrections/run</span></div>
-      ${per.map((r) => `<div class="cs-perrow"><span class="nm">${esc(r.initiative_id)}</span>
-        <span class="bar" aria-hidden="true"><i style="width:${Math.min(100, (Number(r.avg_corrections_per_run) || 0) / 7 * 100)}%"></i></span>
-        <span class="v">${Number(r.avg_corrections_per_run || 0).toFixed(1)}</span></div>`).join('')}</div>` : ''}</div>`;
-}
-
-// ── the history lens (fourth): episodic recall over this workspace's own past sessions. ─────
-// The scrollback the server already mirrors to disk IS the record of what earlier runs tried, so
-// searching it is how the PM — or an agent in a pane, hitting /api/search itself — avoids
-// re-earning a correction someone already paid for. Secrets are scrubbed server-side, never here.
-let histSeq = 0;
-async function renderHistory() {
-  const host = $('library');
-  const q = (state.filter || '').trim();
-  if (q.length < 2) {
-    host.innerHTML = `<div class="hi-hint">Search what past sessions in this repo printed —
-      type at least 2 characters in the box above.<br><br>
-      <span class="mono">GET /api/search?q=…&amp;ws=…</span> answers the same question for an
-      agent running in a pane.</div>`;
-    return;
-  }
-  const seq = ++histSeq;
-  try {
-    const r = await fetch(`/api/search?q=${encodeURIComponent(q)}&ws=${encodeURIComponent(state.wsId || '')}`);
-    const j = await r.json();
-    if (seq !== histSeq) return;                       // a later keystroke already won the race
-    const hits = j.hits || [];
-    if (!hits.length) { host.innerHTML = `<div class="hi-hint">No session in this repo printed “${esc(q)}”.</div>`; return; }
-    host.innerHTML = `<div class="hi-list">${hits.map((h) => `
-      <div class="hi-row">
-        <div class="hi-head"><b>${esc(h.session || h.session_id)}</b>
-          <span class="hi-meta">${esc(h.agent || '')}${h.at ? ' · ' + esc(h.at.slice(0, 10)) : ''}</span></div>
-        ${h.before ? `<div class="hi-ctx">${esc(h.before)}</div>` : ''}
-        <div class="hi-hit">${esc(h.line)}</div>
-        ${h.after ? `<div class="hi-ctx">${esc(h.after)}</div>` : ''}
-      </div>`).join('')}</div>` +
-      // never a silent cap — say when the list was cut
-      (j.truncated ? `<div class="hi-hint">showing the first ${hits.length} matches — narrow the query for the rest</div>` : '');
-  } catch {
-    if (seq === histSeq) host.innerHTML = `<div class="hi-hint">Could not reach the server.</div>`;
-  }
-}
-
-// ── the scheduled lens (third library lens; a persistent pane beside initiatives + folders) ──────
-let SCHED_TASKS = null;
-const SC_STAT = { armed: ['◐', 'armed'], running: ['●', 'running'], failed: ['◆', 'failed'], off: ['—', 'off'] };
-function schHealth(s) { return !s.enabled ? 'off' : s.lastStatus === 'fail' ? 'failed' : 'armed'; }
-function relTime(iso) {
-  if (!iso) return '—';
-  const d = new Date(iso) - Date.now();
-  if (d < 0) return 'now';
-  const h = d / 3.6e6; if (h < 1) return `in ${Math.max(1, Math.round(d / 6e4))}m`;
-  if (h < 24) return `in ${Math.round(h)}h`;
-  return `in ${Math.round(h / 24)}d`;
-}
-function humanCad(s) {
-  const t = s.time || '09:00';
-  return { daily: `every day ${t}`, weekly: `every ${s.day} ${t}`, 'bi-weekly': `every other ${s.day} ${t}`, monthly: `monthly d${s.dayOfMonth} ${t}` }[s.cadence] || s.cadence;
-}
-async function renderScheduled() {
-  const host = $('library');
-  if (!host.querySelector('.sc-list')) host.innerHTML = `<div class="sc-load mono">loading schedules…</div>`;
-  try {
-    if (!SCHED_TASKS) { const tr = await fetch('/api/tasks'); SCHED_TASKS = (await tr.json()).tasks || []; }
-    const r = await fetch('/api/schedules?ws=' + encodeURIComponent(state.wsId || ''));
-    host.innerHTML = scheduledHtml(((await r.json()).schedules) || []);
-    wireScheduled();
-  } catch { host.innerHTML = `<div class="empty">Scheduler unavailable.</div>`; }
-}
-function scheduledHtml(list) {
-  const armed = list.filter((s) => s.enabled);
-  const failed = list.find((s) => s.lastStatus === 'fail' && s.enabled);
-  const soon = armed.map((s) => s.next).filter(Boolean).sort()[0];
-  const btns = `<button class="sc-new ghost" data-scnewskill title="Author a new skill">＋ skill</button><button class="sc-new" data-scnew>＋ new</button>`;
-  const summary = failed
-    ? `<div class="sc-sum warn"><span class="dot"></span><div class="t"><b>${esc(failed.name)}</b> failed its last run</div><span class="sc-acts">${btns}</span></div>`
-    : `<div class="sc-sum"><span class="dot"></span><div class="t"><b>${armed.length} armed</b>${soon ? ` · next ${esc(relTime(soon))}` : ''}</div><span class="sc-acts">${btns}</span></div>`;
-  const rows = list.length ? list.map(scRow).join('') : `<div class="sc-empty"><div class="mk">◷</div><p>No schedules yet. Set a cadence and pmos runs the skill itself — output filed to needs-you.</p><button class="sc-new" data-scnew>＋ new schedule</button></div>`;
-  return `<div class="sc-wrap">${summary}<div class="sc-list">${rows}</div>
-    <div class="sc-note">Every task is a <b>skill</b> — a named, repeatable job with a consistent-output contract. <b>＋ skill</b> authors one; each run is <b>contract-checked</b>, the same shape every time. Local; fires while the server runs.</div></div>`;
-}
-function scRow(s) {
-  const health = schHealth(s); const [gl, glab] = SC_STAT[health];
-  const run = health === 'failed' ? `<span class="fail">failed ✗</span>`
-    : !s.enabled ? `<span class="off">disabled</span>`
-    : `<span class="next">${esc(relTime(s.next))}</span>`;
-  return `<div class="sc-row" data-health="${health}" data-id="${esc(s.id)}">
-    <div class="sc-main">
-      <span class="sc-rail"></span>
-      <span class="sc-tog" role="switch" aria-checked="${!!s.enabled}" tabindex="0" data-tog="${esc(s.id)}" aria-label="Enable ${esc(s.name)}"><span class="knob"></span></span>
-      <div class="sc-id"><div class="nm"><span class="g" aria-hidden="true">${gl}</span><span class="name">${esc(s.name)}</span><span class="skill">${esc(s.skill)}</span></div>
-        <div class="cad">${esc(humanCad(s))} · ${esc(glab)}${s.lastRun ? ` · last ${esc(relTime2(s.lastRun))}` : ''}</div></div>
-      <div class="sc-run">${run}</div>
-    </div>
-    <div class="sc-more"><button class="rn" data-run="${esc(s.id)}">▸ run now</button><button data-del="${esc(s.id)}">delete</button></div>
-  </div>`;
-}
-function relTime2(iso) { const d = Date.now() - new Date(iso); const h = d / 3.6e6; return h < 1 ? 'just now' : h < 24 ? `${Math.round(h)}h ago` : `${Math.round(h / 24)}d ago`; }
-function scForm() {
-  const wsName = (state.workspaces.find((w) => w.id === state.wsId) || {}).name || 'this repo';
-  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-  return `<form class="sc-form" id="scForm">
-    <div><label for="scfN">name</label><input id="scfN" placeholder="e.g. Friday status report" /></div>
-    <div><label>cadence</label><div class="sc-seg" id="scfC">${['daily', 'weekly', 'bi-weekly', 'monthly'].map((c) => `<button type="button" data-c="${c}" aria-pressed="${c === 'weekly'}">${c}</button>`).join('')}</div></div>
-    <div class="sc-f2"><div><label for="scfD">day</label><select id="scfD">${days.map((d) => `<option${d === 'Fri' ? ' selected' : ''}>${d}</option>`).join('')}</select></div>
-      <div><label for="scfT">time</label><input id="scfT" type="time" value="09:00" /></div></div>
-    <div><label for="scfK">task — skill-backed</label><select id="scfK">${SCHED_TASKS.map((t) => `<option value="${esc(t.id)}">${esc(t.label)} · skill ${esc(t.skill)} · contract ✓</option>`).join('')}</select></div>
-    <div class="sc-hint">runs in <b>${esc(wsName)}</b> · output is contract-checked for a consistent shape</div>
-    <div class="sc-frow"><button type="submit" class="save">save schedule</button><button type="button" class="cancel" id="scfX">cancel</button></div></form>`;
-}
-let scCadence = 'weekly';
-function wireScheduled() {
-  const host = $('library');
-  host.querySelectorAll('[data-scnew]').forEach((b) => b.onclick = () => { scCadence = 'weekly'; host.querySelector('.sc-list').insertAdjacentHTML('beforebegin', scForm()); wireScForm(); });
-  host.querySelectorAll('[data-scnewskill]').forEach((b) => b.onclick = () => { if ($('skForm')) return; host.querySelector('.sc-list').insertAdjacentHTML('beforebegin', skForm()); wireSkForm(); });
-  host.querySelectorAll('[data-tog]').forEach((b) => b.onclick = () => scToggle(b.dataset.tog, b.getAttribute('aria-checked') !== 'true'));
-  host.querySelectorAll('[data-run]').forEach((b) => b.onclick = () => scRun(b.dataset.run));
-  host.querySelectorAll('[data-del]').forEach((b) => b.onclick = () => scDelete(b.dataset.del));
-}
-// The New Skill flow: a GUI replaces editing server code. One concept — no "kind". name + "what it
-// should do" + the output shape (the section keys = the consistency contract). Create scaffolds a
-// well-formed .skill file; AI-draft additionally spawns a LOCAL claude session to sharpen it in place.
-function skForm() {
-  return `<form class="sc-form sk-form" id="skForm">
-    <div class="sk-head">＋ new skill<span class="sk-sub">a named, repeatable task — one concept, no “kind” to pick</span></div>
-    <div><label for="skfN">name</label><input id="skfN" placeholder="e.g. release-notes" autocomplete="off" spellcheck="false" /></div>
-    <div><label for="skfD">what it should do</label><textarea id="skfD" rows="3" placeholder="Draft release notes from the merged PRs since the last report…"></textarea></div>
-    <div><label for="skfO">output shape — one section per line (the consistency contract)</label><textarea id="skfO" rows="3" placeholder="Highlights&#10;Fixes&#10;Known issues"></textarea></div>
-    <div class="sc-hint">saved as a <b>skill file</b> · runs as a local claude session · appears in the schedule picker</div>
-    <div class="sc-frow"><button type="submit" class="save">create skill</button><button type="button" class="sc-ai" id="skfAI" title="Spawn a local claude session to draft this skill">✦ AI-draft</button><button type="button" class="cancel" id="skfX">cancel</button></div></form>`;
-}
-function skBody() {
-  return { name: ($('skfN').value || '').trim(), description: ($('skfD').value || '').trim(),
-    output: ($('skfO').value || '').split('\n').map((x) => x.trim()).filter(Boolean), ws: state.wsId };
-}
-function wireSkForm() {
-  const f = $('skForm'); if (!f) return;
-  $('skfX').onclick = () => renderScheduled();
-  $('skfAI').onclick = async () => {
-    const body = skBody();
-    if (!body.name) { flash('name the skill first'); $('skfN').focus(); return; }
-    flash('spawning a claude session to draft it…');
-    try {
-      const r = await fetch('/api/skills/draft', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      const j = await r.json();
-      if (!j.ok) { flash(j.error || 'could not draft'); return; }
-      SCHED_TASKS = null;
-      if (j.started && j.sessionId) { flash('claude is drafting the skill'); selectSession(j.sessionId); }
-      else { flash(j.reason || 'skill scaffolded (claude not available to draft)'); renderScheduled(); }
-    } catch { flash('could not reach the server'); }
-  };
-  f.onsubmit = async (e) => {
-    e.preventDefault();
-    const body = skBody();
-    if (!body.name) { flash('name the skill first'); $('skfN').focus(); return; }
-    try {
-      const r = await fetch('/api/skills', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      const j = await r.json();
-      if (!j.ok) { flash(j.error || 'could not create'); return; }
-      SCHED_TASKS = null; flash('skill created');
-    } catch { flash('could not reach the server'); return; }
-    renderScheduled();
-  };
-  $('skfN').focus();
-}
-function wireScForm() {
-  const f = $('scForm'); if (!f) return;
-  f.querySelectorAll('[data-c]').forEach((b) => b.onclick = () => { scCadence = b.dataset.c; f.querySelectorAll('[data-c]').forEach((x) => x.setAttribute('aria-pressed', String(x === b))); });
-  $('scfX').onclick = () => renderScheduled();
-  f.onsubmit = async (e) => {
-    e.preventDefault();
-    const body = { name: $('scfN').value, cadence: scCadence, day: $('scfD').value, time: $('scfT').value, task: $('scfK').value, skill: $('scfK').value, ws: state.wsId };
-    try { const r = await fetch('/api/schedules', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      const j = await r.json(); if (!j.ok) { flash(j.error || 'could not save'); return; } } catch { flash('could not reach the server'); return; }
-    renderScheduled();
-  };
-  $('scfN').focus();
-}
-async function scPost(path, body) { try { await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); } catch {} }
-async function scToggle(id, enabled) { await scPost('/api/schedules/update', { id, enabled }); renderScheduled(); }
-async function scDelete(id) { await scPost('/api/schedules/delete', { id }); renderScheduled(); }
-async function scRun(id) { flash('running…'); await scPost('/api/schedules/run', { id }); renderScheduled(); loadNeeds(); }
-async function openDeliverable(id) {
-  if (!id) return;
-  state.docPath = null; state.surface = null;
-  showRail(); $('paneDoc').hidden = false; $('railSplit').hidden = false; foldPane('doc', true);
-  $('crumb').innerHTML = `<bdi>report · ${esc(id)}</bdi>`; $('docBody').scrollTop = 0;
-  try { const r = await fetch('/api/deliverable?ws=' + encodeURIComponent(state.wsId || '') + '&id=' + encodeURIComponent(id));
-    $('docBody').innerHTML = r.ok ? renderMd(await r.text(), '') : `<p class="doc-empty">Report not found.</p>`;
-  } catch { $('docBody').innerHTML = `<p class="doc-empty">Read failed.</p>`; }
-  refit();
-}
-
-let palItems = [], palSel = 0;
-function flattenDocs(node, acc) {
-  (node.docs || []).forEach((d) => { if (d.md !== false) acc.push({ kind: 'doc', label: d.path, path: d.path }); });
-  (node.dirs || []).forEach((d) => flattenDocs(d, acc));
-  return acc;
-}
-function openPalette() {
-  const lib = state.lib || {};
-  const docs = (lib.roots || []).reduce((a, r) => flattenDocs(r, a), []);
-  const inits = (lib.initiatives || []).map((g) => ({ kind: 'initiative', label: g.id, init: g }));
-  // every session, including other workspaces' — selecting one follows it to its workspace
-  const sess = state.sessions.map((s) => {
-    const w = state.workspaces.find((x) => x.id === s.ws);
-    return { kind: 'session', label: s.ws === state.wsId ? s.name : `${w ? w.name : '?'} / ${s.name}`, id: s.id, state: s.state };
-  });
-  const wss = state.workspaces.filter((w) => w.id !== state.wsId).map((w) => ({ kind: 'workspace', label: w.name, wsid: w.id }));
-  // summon a P/D/M/R surface on demand — listed first so "initiatives"/"roadmap"/"okr"/"report" are reachable
-  const views = SURFACES.map((v) => ({ kind: 'view', label: v.label, view: v.name }));
-  views.push({ kind: 'align', label: 'alignment drafts' });   // downstream of a save, never resident
-  palItems = [...views, ...wss, ...sess, ...inits, ...docs];
-  $('palette').style.display = 'grid';
-  const inp = $('palInput'); inp.value = ''; renderPalette('');
-  setTimeout(() => inp.focus(), 0);
-}
-function closePalette() { $('palette').style.display = 'none'; if (state.active) { const t = state.terms.get(state.active); if (t) t.term.focus(); } }
-function togglePalette() { $('palette').style.display === 'grid' ? closePalette() : openPalette(); }
-function renderPalette(q) {
-  const f = q.toLowerCase();
-  const items = palItems.filter((i) => i.label.toLowerCase().includes(f)).slice(0, 40);
-  palSel = 0;
-  const g = (i) => i.kind === 'view' ? '▤' : i.kind === 'session' ? (GLYPH[i.state] || '•') : i.kind === 'workspace' ? '▣' : i.kind === 'initiative' ? '◈' : '◦';
-  $('palList').innerHTML = items.map((i, n) => `
-    <button class="pitem ${n === 0 ? 'sel' : ''}" data-n="${n}" role="option">
-      <span class="g" aria-hidden="true">${g(i)}</span>
-      <span>${esc(i.label)}</span><span class="kind">${i.kind}</span></button>`).join('')
-    || `<div class="empty">No match.</div>`;
-  $('palList')._items = items;
-  $('palList').querySelectorAll('.pitem').forEach((b) => b.onclick = () => choosePalette(Number(b.dataset.n)));
-}
-function choosePalette(n) {
-  const items = $('palList')._items || [];
-  const it = items[n]; if (!it) return;
-  closePalette();
-  if (it.kind === 'view') openSurface(it.view);
-  else if (it.kind === 'align') alDrafts();
-  else if (it.kind === 'session') selectSession(it.id);
-  else if (it.kind === 'workspace') selectWorkspace(it.wsid);
-  else if (it.kind === 'initiative') {
-    // jump to the initiative's primary artifact (PRD first — its own ordering guarantees it)
-    openInitiative(it.init.id, state.wsId);
-  } else openDoc(it.path);
-}
-$('palInput')?.addEventListener('input', (e) => renderPalette(e.target.value));
-$('palInput')?.addEventListener('keydown', (e) => {
-  const items = $('palList').querySelectorAll('.pitem'); if (!items.length) { if (e.key === 'Escape') closePalette(); return; }
-  if (e.key === 'ArrowDown') { e.preventDefault(); palSel = Math.min(palSel + 1, items.length - 1); }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); palSel = Math.max(palSel - 1, 0); }
-  else if (e.key === 'Enter') { e.preventDefault(); choosePalette(palSel); return; }
-  else if (e.key === 'Escape') { closePalette(); return; }
-  else return;
-  items.forEach((b, i) => b.classList.toggle('sel', i === palSel));
-  items[palSel].scrollIntoView({ block: 'nearest' });
-});
-$('palette').addEventListener('click', (e) => { if (e.target === $('palette')) closePalette(); });
-
-// CAPTURE phase on document: fires BEFORE the focused xterm textarea's own keydown, so ⌘K
-// works even while a terminal holds focus (xterm otherwise swallows the key). The xterm
-// custom handler above is belt-and-suspenders so the K never reaches the PTY.
-document.addEventListener('keydown', (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-    e.preventDefault(); e.stopPropagation(); togglePalette(); return;
-  }
-  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
-    e.preventDefault(); e.stopPropagation(); openScratch(); return;
-  }
-  if (e.key === 'F2' && state.active && !state.renaming) { e.preventDefault(); startRename(state.active); return; }
-  // ⌃1–⌃4 — the named layouts, in one act. Ctrl only (⌘1-4 are the browser's tab switches).
-  if (e.ctrlKey && !e.metaKey && !e.altKey && /^[1-9]$/.test(e.key)) {
-    const l = state.layouts.find((x) => x.key === Number(e.key));
-    if (l) { e.preventDefault(); e.stopPropagation(); selectLayout(l.id); return; }
-  }
-  if (e.key === 'Escape') {
-    if (!$('layMenu').hidden) { e.stopPropagation(); closeLayMenu(); }
-    else if ($('palette').style.display === 'grid') { e.stopPropagation(); closePalette(); }
-    else if ($('fsPicker').style.display === 'grid') { e.stopPropagation(); closeFsPicker(); }
-    else if (state.renaming) { e.stopPropagation(); cancelRename(); renderSessions(); }
-    else if (!$('newForm').hidden) closeNewForm();
-    else if (!$('addWsForm').hidden) closeAddWs();
-    else if (!$('paneDoc').hidden) closeDoc();
-  }
-}, true);
-
-// ── mobile (≤760px): single-column pane switcher + a terminal control-key accessory bar ──────
-// Phones can't span three columns and lack Esc/Tab/Ctrl/arrows, so the workspace collapses to one
-// pane at a time (terminal is the priority pane) with a bottom switcher, and the control bar sends
-// the missing key sequences straight to the active session's PTY. Desktop is untouched (CSS-gated).
-
-// Ctrl one-shot: when the mobile Ctrl key is armed, the NEXT byte from the terminal (a soft-keyboard
-// character) is converted to its control code (Ctrl-C = 0x03, …), then Ctrl disarms. Desktop typing
-// never arms it, so this is a no-op everywhere except after a Ctrl tap.
-function setCtrlArmed(on) {
-  state.ctrlArmed = on;
-  const b = $('ctrlKey'); if (b) b.setAttribute('aria-pressed', String(on));
-}
-function applyCtrl(d) {
-  if (!state.ctrlArmed) return d;
-  setCtrlArmed(false);
-  if (d.length === 1) {
-    const c = d.charCodeAt(0);
-    if (c >= 97 && c <= 122) return String.fromCharCode(c - 96);   // a–z → 0x01–0x1a
-    if (c >= 65 && c <= 90) return String.fromCharCode(c - 64);    // A–Z → 0x01–0x1a
-    if (c >= 91 && c <= 95) return String.fromCharCode(c - 64);    // [ \ ] ^ _ → 0x1b–0x1f
-    if (c === 32) return '\x00';                                    // Ctrl-Space → NUL
-  }
-  return d;
-}
-
-(function mobile() {
-  const grid = $('bodyGrid');
-  const menu = $('mobMenu');
-  const MQ = window.matchMedia('(max-width:760px)');
-
-  // send a raw sequence to the active PTY, then keep focus in the terminal (raises the soft keyboard)
-  function key(seq) {
-    if (!state.active) return;
-    send({ t: 'input', id: state.active, data: seq });
-    const t = state.terms.get(state.active); if (t) t.term.focus();
-  }
-  const SEQ = { esc: '\x1b', tab: '\t', up: '\x1b[A', down: '\x1b[B', left: '\x1b[D', right: '\x1b[C' };
-  document.querySelectorAll('#ctrlBar [data-seq]').forEach((b) => b.onclick = () => key(SEQ[b.dataset.seq]));
-  $('ctrlKey').onclick = () => {
-    setCtrlArmed(!state.ctrlArmed);
-    if (state.active) { const t = state.terms.get(state.active); if (t) t.term.focus(); }
-  };
-  $('mobPalette').onclick = () => togglePalette();
-
-  // the switcher: one column at a time, terminal is the default (priority) pane, choice persisted
-  function setView(v) {
-    grid.dataset.mview = v;
-    menu.dataset.view = v;
-    document.querySelectorAll('.mobtabs [data-mview]').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.mview === v)));
-    store.set('mview', v);
-    if (v === 'terminal') {
-      refit();
-      if (state.active) { const t = state.terms.get(state.active); if (t) setTimeout(() => t.term.focus(), 0); }
-    }
-  }
-  const remembered = store.get('mview');
-  setView(['sessions', 'terminal', 'library'].includes(remembered) ? remembered : 'terminal');
-  document.querySelectorAll('.mobtabs [data-mview]').forEach((b) => b.onclick = () => setView(b.dataset.mview));
-
-  // FitAddon must re-fit when the soft keyboard shows/hides (visualViewport) and on rotation, or
-  // xterm renders more rows than fit and the bottom is clipped (the R9 failure, on a phone).
-  if (window.visualViewport) {
-    window.visualViewport.addEventListener('resize', refit);
-    window.visualViewport.addEventListener('scroll', refit);
-  }
-  window.addEventListener('orientationchange', () => setTimeout(refit, 250));
-  // crossing the breakpoint (rotate a tablet, resize a window) must re-fit the terminal
-  const onMQ = () => refit();
-  if (MQ.addEventListener) MQ.addEventListener('change', onMQ); else if (MQ.addListener) MQ.addListener(onMQ);
-})();
-
-connect();