create-pmos 0.5.0 → 0.6.0

package/workspace/public/app.js

@@ -0,0 +1,1710 @@
+/* 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: 'initiatives',          // 'initiatives' | 'folders'
+  filter: '',
+  active: null,                 // active session id
+  terms: new Map(),            // id -> {term, fit, el}
+  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
+};
+
+// ── 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; }
+{ const l = store.get('lens'); if (['folders', 'initiatives', 'scheduled', 'history'].includes(l)) state.lens = l; }
+// ?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') {
+    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();
+  } 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();
+    state.sessions = m.sessions; renderSessions(); renderWorkspaces();
+    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 { 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);
+  } else if (m.t === 'created') {
+    // server pushes a fresh 'sessions'; jump to the new one
+    selectSession(m.id);
+  }
+}
+
+// ── 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();
+  // 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();
+  await Promise.all([loadLibrary(), loadNeeds()]);
+}
+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; }
+}
+function flash(msg) {
+  const el = $('wsFoot'); const prev = el.textContent;
+  el.textContent = msg;
+  setTimeout(() => { el.textContent = prev; }, 4000);
+}
+
+const GLYPH = { working: '●', quiet: '◼', blocked: '◆', done: '✓', idle: '—', exited: '○' };
+// The word beside the glyph. 'quiet' means no output for a while — NOT 'waiting on you'.
+// Quiescence proves quiet, not waiting (PRD R1); the wording may not be upgraded.
+const STATE_WORD = { working: 'working', quiet: 'quiet', exited: 'exited' };
+const QUIET_AFTER_MS = 30000;            // mirrors harness-parse.QUIET_AFTER_MS
+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';
+}
+// Derived client-side too, so a row can go quiet WITHOUT a server push. The server only pushes
+// on lifecycle events; a periodic full re-render would destroy an open drill-in and the rename
+// input (the defect the pre-promotion grilling caught), so the ticker below repaints chips only.
+function shownState(s) {
+  if (s.state === 'exited') return { shown: 'exited', quietMs: null };
+  if (!s.lastOutputAt) return { shown: 'working', quietMs: null };
+  const q = Math.max(0, Date.now() - s.lastOutputAt);
+  return q >= QUIET_AFTER_MS ? { shown: 'quiet', quietMs: q } : { shown: 'working', quietMs: q };
+}
+function stateLabel(s) {
+  const { shown, quietMs } = shownState(s);
+  const w = STATE_WORD[shown] || shown;
+  return { shown, text: shown === 'quiet' ? `${w} ${shortDur(quietMs)}` : w };
+}
+function renderSessions() {
+  const mine = mySessions();
+  $('sessCount').textContent = String(mine.length);
+  const needN = state.needs.length;
+  $('needCount').textContent = needN ? `${needN} need you` : '';
+  $('sessions').innerHTML = mine.length ? mine.map((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>
+        <span class="sub">${esc(s.agent)} · ${esc(s.cwd)}</span>
+        ${saysLine(s)}
+      </button>
+      <button class="ren" data-rename="${s.id}" aria-label="Rename ${esc(s.name)}" title="rename (F2)">✎</button>
+    </div>${harnessDrawer(s)}`;
+  }).join('')
+    : `<div class="empty">None running here — <b>＋ new session</b> to run an agent in this repo.</div>`;
+  $('sessions').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); } };
+  });
+  $('sessions').querySelectorAll('[data-rename]').forEach((b) => b.onclick = () => startRename(b.dataset.rename));
+  // Restore each drill-in's openness AFTER render. renderSessions() replaces the pane's
+  // innerHTML on every server push, so a bare <details open> closes itself; openness is held
+  // in state and re-applied here — the same shape as paintRename() below.
+  $('sessions').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);
+    });
+  });
+  renderTabs();
+  updateEmptyOverlay();
+  paintRename();
+}
+// 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.
+function saysLine(s) {
+  if (s.lastWords) return `<span class="says">${esc(s.lastWords)}</span>`;
+  const why = s.missing && s.missing.lastWords;
+  return why ? `<span class="says na">${esc(why)}</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 harnessDrawer(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')}`);
+    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 `<details class="hz" data-id="${s.id}">
+    <summary>model + harness<span class="sr">${esc(s.name)}</span></summary>
+    <dl class="kv">${rows.join('')}</dl></details>`;
+}
+// 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 = $('sessions').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}`);
+    }
+    const tab = $('stabs').querySelector(`.stab-wrap[data-id="${s.id}"]`);
+    if (tab && tab.dataset.state !== st.shown) tab.dataset.state = st.shown;
+  }
+}
+try { const _q = setInterval(tickQuiet, 5000); if (_q.unref) _q.unref(); } catch {}
+
+function renderTabs() {
+  // wrap = two SIBLING buttons (select + close) — no interactive-inside-interactive nesting
+  $('stabs').innerHTML = mySessions().map((s) => `
+    <div class="stab-wrap" data-state="${stateLabel(s).shown}" data-id="${s.id}" data-active="${s.id === state.active}">
+      <button class="stab" role="tab" data-id="${s.id}" aria-selected="${s.id === state.active}"
+        aria-label="${esc(s.name)} — ${s.state}" title="double-click to rename">
+        <span class="g" aria-hidden="true">${GLYPH[s.state] || '•'}</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('');
+  $('stabs').querySelectorAll('.stab').forEach((b) => {
+    b.onclick = () => selectSession(b.dataset.id);
+    b.ondblclick = () => startRename(b.dataset.id);
+  });
+  // live tab ✕ kills the process (state flips to exited); exited tab ✕ removes it for good
+  $('stabs').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);
+    if (s) b.dataset.state = s.state;
+  });
+  updateExitedOverlay();
+}
+
+// ── 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 = $('sessions').querySelector(`.sessrow[data-id="${id}"]`);
+  const tab = $('stabs').querySelector(`.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 ──
+function ensureTerm(id) {
+  let t = state.terms.get(id);
+  if (t) return t;
+  const el = document.createElement('div');
+  el.className = 'termpane'; el.dataset.id = id;
+  $('termhost').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 };
+  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). A single observer on
+// the host catches every cause — the needs strip, the reader, a folded rail pane, the tab strip
+// wrapping, a window resize — instead of a fitOne() call sprinkled at each call site.
+let refitTimer = null;
+function refit() {
+  clearTimeout(refitTimer);
+  refitTimer = setTimeout(() => { if (state.active) fitOne(state.active); }, 30);
+}
+if (window.ResizeObserver) new ResizeObserver(refit).observe($('termhost'));
+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) {
+  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.active = id;
+  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);
+  for (const [sid, t] of state.terms) t.el.classList.toggle('on', sid === id);
+  document.querySelectorAll('.sess').forEach((b) => b.setAttribute('aria-current', String(b.dataset.id === id)));
+  document.querySelectorAll('.stab').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.id === id)));
+  document.querySelectorAll('.stab-wrap').forEach((b) => b.dataset.active = String(b.dataset.id === id));
+  fitOne(id);
+  const t = state.terms.get(id); if (t) setTimeout(() => t.term.focus(), 0);
+  updateExitedOverlay(); updateEmptyOverlay();
+}
+function clearActive() {
+  state.active = null;
+  $('termhost').querySelectorAll('.termpane').forEach((e) => e.classList.remove('on'));
+  updateExitedOverlay(); updateEmptyOverlay();
+}
+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');
+}
+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(); });
+function renderLibrary() {
+  // a third, persistent lens beside initiatives + folders: the scheduled tasks for this workspace
+  if (state.lens === 'scheduled') {
+    document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.lens === 'scheduled')));
+    renderScheduled();
+    return;
+  }
+  // a fourth: what past sessions in THIS repo actually printed. The filter box becomes the query.
+  if (state.lens === 'history') {
+    document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.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 = state.lens === 'folders' ? 'folders' : 'initiatives';
+  document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.lens === effLens)));
+  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); 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);
+  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();
+}
+
+// ── rail + pane folding (R12), all persisted ──
+function foldPane(which, open) {
+  const pane = which === 'doc' ? $('paneDoc') : $('paneLib');
+  const btn = which === 'doc' ? $('docFold') : $('libFold');
+  pane.dataset.fold = open ? 'on' : 'off';
+  btn.setAttribute('aria-expanded', String(open));
+  store.set('fold-' + which, open ? 'on' : 'off');
+  refit();
+}
+function showRail() { if ($('bodyGrid').classList.contains('rail-off')) toggleRail(true); }
+function toggleRail(on) {
+  const off = on === undefined ? !$('bodyGrid').classList.contains('rail-off') : !on;
+  $('bodyGrid').classList.toggle('rail-off', off);
+  $('railBtn').setAttribute('aria-pressed', String(off));
+  store.set('rail', off ? 'off' : 'on');
+  refit();
+}
+// restore the layout the PM last chose
+foldPane('lib', store.get('fold-lib') !== 'off');
+foldPane('doc', store.get('fold-doc') !== 'off');
+if (store.get('rail') === 'off') toggleRail(false);
+{ const s = store.get('libsplit'); if (s) document.documentElement.style.setProperty('--libsplit', s); }
+{ const w = store.get('railw'); if (w) document.documentElement.style.setProperty('--rail-w', w); }
+
+$('libFold').onclick = () => foldPane('lib', $('paneLib').dataset.fold === 'off');
+$('docFold').onclick = () => foldPane('doc', $('paneDoc').dataset.fold === 'off');
+$('railBtn').onclick = () => toggleRail();
+
+// drag the rail's left edge — the reader is where PRDs and rubrics are actually read, and a
+// fixed narrow column makes a table of weighted dimensions unreadable
+(() => {
+  const grip = $('railGrip');
+  let dragging = false;
+  const apply = (clientX) => {
+    const w = Math.min(Math.max(window.innerWidth - clientX, 280), Math.min(900, window.innerWidth - 420));
+    const v = Math.round(w) + 'px';
+    document.documentElement.style.setProperty('--rail-w', v);
+    store.set('railw', v);
+  };
+  grip.addEventListener('pointerdown', (e) => { dragging = true; grip.setPointerCapture(e.pointerId); e.preventDefault(); });
+  grip.addEventListener('pointermove', (e) => { if (dragging) apply(e.clientX); });
+  grip.addEventListener('pointerup', (e) => { dragging = false; try { grip.releasePointerCapture(e.pointerId); } catch {} refit(); });
+  grip.addEventListener('keydown', (e) => {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    e.preventDefault();
+    const cur = $('rail').getBoundingClientRect().width;
+    apply(window.innerWidth - (cur + (e.key === 'ArrowLeft' ? 24 : -24)));
+    refit();
+  });
+})();
+
+// drag the divider between the library and the document
+(() => {
+  const split = $('railSplit');
+  let dragging = false;
+  const apply = (clientY) => {
+    const r = $('rail').getBoundingClientRect();
+    const pct = Math.min(80, Math.max(15, ((clientY - r.top) / r.height) * 100));
+    const v = pct.toFixed(1) + '%';
+    document.documentElement.style.setProperty('--libsplit', v);
+    store.set('libsplit', v);
+  };
+  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) => {
+    const cur = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--libsplit')) || 46;
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      const v = Math.min(80, Math.max(15, cur + (e.key === 'ArrowUp' ? -4 : 4))).toFixed(1) + '%';
+      document.documentElement.style.setProperty('--libsplit', v); store.set('libsplit', v); refit();
+    }
+  });
+})();
+
+// ── 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 || '')); state.needs = (await r.json()).needs || []; }
+  catch { state.needs = []; }
+  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 before it starts ──
+function openNewForm() {
+  const w = state.workspaces.find((x) => x.id === state.wsId);
+  $('newForm').hidden = false;
+  $('newBtn').setAttribute('aria-expanded', 'true');
+  // 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}`;
+  const inp = $('newName');
+  setTimeout(() => { inp.focus(); inp.select(); }, 0);
+}
+function closeNewForm() {
+  $('newForm').hidden = true;
+  $('newBtn').setAttribute('aria-expanded', 'false');
+}
+$('newBtn').onclick = () => ($('newForm').hidden ? openNewForm() : closeNewForm());
+$('newCancel').onclick = closeNewForm;
+$('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();
+  send({ t: 'new', agent: state.newAgent, name: name || state.newAgent, ws: state.wsId });
+  closeNewForm();
+});
+
+// ── 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…' };
+document.querySelectorAll('.lens 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();
+});
+$('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;
+
+// ── ⌘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: '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;
+  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() {
+  document.querySelectorAll('[data-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.surface));
+  document.querySelectorAll('[data-open-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.openSurface));
+  $('docBody').querySelectorAll('.sf-art[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
+}
+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) {
+  return (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('') + (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);
+  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.'
+    : `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>`;
+}
+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 }));
+  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 === '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)
+    const first = it.init.artifacts[0];
+    state.lens = 'initiatives'; state.filter = it.init.id; $('libFind').value = it.init.id; renderLibrary();
+    if (first) openDoc(first.path);
+  } 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.key === 'F2' && state.active && !state.renaming) { e.preventDefault(); startRename(state.active); return; }
+  if (e.key === 'Escape') {
+    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();