create-pmos 0.15.0 → 0.16.0

package/workspace/public/pm/panel-tabs.js

@@ -0,0 +1,487 @@
+/* pm/panel-tabs.js — panel 4: the tab bar, the panes, the scratchpad and the bottom bar.
+ *
+ * A port of the prototype's third column (template lines 844–997, derivation 1962–2126). Every
+ * inline style below is the prototype's string, copied character for character; the interpolated
+ * values are wrapped in their own `<span>` because that is what the prototype's runtime emits for
+ * `{{ … }}` (verified against the reference render: `<span class="sc-interp">value</span>`), and a
+ * text node where the design has an element moves the comparator's geometry.
+ *
+ * ── What this module owns ───────────────────────────────────────────────────────────────────
+ *   the tab bar · ＋ session · split · the empty state · which pane hosts exist and where they sit
+ *   · the scratchpad · the bottom bar (scratchpad toggle, active-tab title, copy)
+ * The BODY of a tab belongs to its own module — `mountDoc` (tab-doc.js), `mountTask`
+ * (tab-task.js), `mountTerm` (tab-term.js). This file never renders a tab's contents.
+ *
+ * ── Why the pane hosts are cached ───────────────────────────────────────────────────────────
+ * A term pane hosts a live xterm attached to a real PTY. Rebuilding that element on an unrelated
+ * state change silently loses the terminal's grid — "the quiet PTY regression" the PRD names. So
+ * one host element is created per tab id, kept for as long as the tab exists, and merely
+ * re-ordered by `setChildren`. It is disposed only when the tab is actually closed.
+ *
+ * ── Scoping ────────────────────────────────────────────────────────────────────────────────
+ * Tabs are per repository (prototype lines 1963–1966): a tab whose slug belongs to a repository is
+ * visible only in that repository; a tab whose slug is not on any board (a SKILL.md, a decision
+ * page, a doc opened with `slug:null`) is visible everywhere. That is a derivation, recomputed at
+ * read time, never a stored flag — the `repo` field a tab carries is only the fallback for a slug
+ * the board no longer knows about.
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import * as FX from './fixture.js';
+import { openTab, openTerm as openTermTab, openDoc as openDocTab } from './panel-initiatives.js';
+import { mountDoc, disposeDoc, docText } from './tab-doc.js';
+import { mountTask } from './tab-task.js';
+
+/* tab-term.js is loaded LAZILY and on purpose: it is another module's file, a static import of a
+ * file that is not on disk yet takes the whole panel down with it, and an empty terminal pane is a
+ * far smaller failure than a dead panel 4. When it lands, the panel repaints itself. */
+let termMod = null;
+import('./tab-term.js')
+  .then((m) => { termMod = m; setState({}); })
+  .catch(() => { termMod = null; });
+
+/** `{{ expr }}` — one interpolated value in its own span, the way the prototype's runtime emits it. */
+const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
+
+/* ── the board, read exactly the way panels 2 and 3 read it ─────────────────────────────────── */
+
+const boardOf = () =>
+  (state.board && typeof state.board === 'object' ? state.board : (FIXTURE ? FX.ALLGROUPS : {}));
+
+function currentProduct() {
+  if (state.product) return state.product;
+  const keys = Object.keys(boardOf());
+  return keys.length ? keys[0] : 'workspace';
+}
+
+/** The selected initiative (prototype line 1397) — the slug `＋ session` starts a session on. */
+function selSlug() {
+  if (state.sel) return state.sel;
+  const product = currentProduct();
+  if (FIXTURE) return FX.defaultSlug(product);
+  for (const g of (boardOf()[product] || [])) if (g.slugs && g.slugs.length) return g.slugs[0];
+  return null;
+}
+
+/** slugProduct (lines 1963–1965) — which repository owns each initiative slug. */
+function slugProductOf() {
+  const map = {};
+  const board = boardOf();
+  Object.keys(board).forEach((prod) => {
+    (board[prod] || []).forEach((g) => (g.slugs || []).forEach((s) => { map[s] = prod; }));
+  });
+  Object.keys(state.addedInits || {}).forEach((key) => {
+    const prod = key.split('|')[0];
+    (state.addedInits[key] || []).forEach((s) => { map[s] = prod; });
+  });
+  return map;
+}
+
+/** The tabs visible in the current repository (line 1966). */
+function visibleTabs() {
+  const product = currentProduct();
+  const map = slugProductOf();
+  return (state.tabs || []).filter((t) => {
+    const sp = map[t.slug] !== undefined ? map[t.slug] : t.repo;
+    return sp === undefined || sp === product;
+  });
+}
+
+/* ── the openers ───────────────────────────────────────────────────────────────────────────────
+ * `openTab` / `openTerm` / `openDoc` have exactly ONE implementation, in panel-initiatives.js,
+ * and are re-exported here so a caller can reach them from the panel that owns tabs. Their
+ * argument order is the prototype's (`openDoc(slug, path, role)`, `openTerm(slug, sess)`), which
+ * is what every existing call site in this repo passes.
+ */
+export { openTab };
+
+/** openDoc (line 1400): focus the tab for `path`, opening it first if it is not already there. */
+export function openDoc(slug, path, role) {
+  return openDocTab(slug, path, role);
+}
+
+/**
+ * openTerm (line 1399). Two shapes:
+ *   openTerm(slug, sess) — attach a tab to a session that already exists;
+ *   openTerm(slug)       — start a NEW session on that initiative and open it (the `＋ session`
+ *                          path), defaulting to the currently selected initiative.
+ */
+export function openTerm(slug, sess) {
+  if (sess === undefined) return newSession(typeof slug === 'string' ? slug : undefined);
+  return openTermTab(slug, sess);
+}
+
+/**
+ * Open a task tab. Accepts the finished tab record panel 3 builds (`openTask(tab)`), or a task
+ * plus its initiative (`openTask(task, 'workspace-pm-spine')`), in which case the tab id is the
+ * prototype's `task:<slug>:<phase>#<index>` (line 1750).
+ */
+export function openTask(task, initiative) {
+  if (!task) return;
+  if (initiative === undefined && task.id) return openTab(task);
+  const slug = typeof initiative === 'string' ? initiative
+    : (initiative && (initiative.slug || initiative.id)) || task.slug;
+  const idx = task.index != null ? task.index : 0;
+  return openTab({
+    id: task.id || FX.taskTabId(slug, task.phase, idx),
+    kind: 'task', role: 'TASK', title: task.title, slug, repo: slugProductOf()[slug],
+    phase: task.phase, status: task.status, instruction: task.instruction, input: task.input,
+    expect: task.expect, evalNote: task.evalNote, output: task.output,
+  });
+}
+
+/** Close one tab (lines 1971–1974): the last remaining tab takes over, a dangling split is dropped. */
+export function closeTab(id) {
+  setState((s) => {
+    const rest = s.tabs.filter((t) => t.id !== id);
+    return {
+      tabs: rest,
+      active: s.active === id ? (rest.length ? rest[rest.length - 1].id : null) : s.active,
+      splitId: s.splitId === id ? null : s.splitId,
+    };
+  });
+}
+
+/* The data layer's optional session-start hook. In fixture mode nothing is ever started; in real
+ * mode the PTY is data.js's to create, and panel 4's part is only to show the tab for it. */
+let dataMod = null;
+import('./data.js').then((m) => { dataMod = m; }).catch(() => { dataMod = null; });
+
+/**
+ * `＋ session` (line 2087): file a new session against the selected initiative and open its tab.
+ * The session lands in `extraSess` — the prototype's own list of sessions started in this window —
+ * and the terminal tab is opened in the callback, i.e. after the render that added it.
+ */
+export function newSession(slug) {
+  const target = slug || selSlug();
+  if (!target) return;
+  const n = state.startN;
+  const sess = { name: 'agent ' + n, st: 'working', label: 'working', profile: state.newSessProfile };
+  setState((s) => ({
+    startN: n + 1,
+    extraSess: { ...s.extraSess, [target]: [...(s.extraSess[target] || []), sess] },
+  }), () => openTermTab(target, sess));
+  if (!FIXTURE && dataMod && typeof dataMod.startSession === 'function') {
+    try { dataMod.startSession(target, sess); } catch { /* the tab still opens */ }
+  }
+}
+
+/** `⫽ split` / `⫽ unsplit` (lines 2088–2092). */
+export function toggleSplit() {
+  setState((s) => {
+    if (s.splitId) return { splitId: null };
+    const other = s.tabs.find((t) => t.id !== s.active);
+    return { splitId: other ? other.id : null };
+  });
+}
+
+/* ── persistent chrome ─────────────────────────────────────────────────────────────────────── */
+
+const BAR_STYLE = 'display:flex;gap:2px;align-items:stretch;padding:6px 8px 0;border-bottom:1px solid oklch(1 0 0 / 10%);min-height:48px;min-width:0;overflow-x:auto';
+const CHIP_STYLE = 'flex:none;align-self:center;font-family:var(--mono);font-size:11px;color:oklch(0.85 0.01 214);padding:5px 11px;min-height:30px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap;margin-left:4px';
+const SPLIT_STYLE = 'flex:none;margin-left:auto;align-self:center;font-family:var(--mono);font-size:11px;color:oklch(0.85 0.01 214);padding:5px 12px;min-height:30px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap';
+const CHIP_HOVER = 'border-color:oklch(0.56 0.021 213.5)';
+
+const tabBar = el('div', { style: BAR_STYLE });
+
+const newSessionBtn = el('button', {
+  onClick: () => newSession(), style: CHIP_STYLE, hover: CHIP_HOVER,
+}, '＋ session');
+
+const splitLabel = iv('⫽ split');
+const splitBtn = el('button', {
+  onClick: () => toggleSplit(), style: SPLIT_STYLE, hover: CHIP_HOVER,
+}, splitLabel);
+
+const emptyState = el('div', {
+  style: 'flex:1;display:grid;place-items:center;color:oklch(0.55 0.02 213);font-size:12.5px;padding:20px;text-align:center',
+}, "nothing open — click a task's output or an artifact, or ＋ session above");
+
+const panesRow = el('div', { style: 'flex:1;display:flex;min-height:0' });
+
+/* ── the scratchpad (lines 983–991) ──────────────────────────────────────────────────────────
+ * One textarea, created once. Its text is written back as a CHILD TEXT NODE as well as a value,
+ * because that is what the prototype's runtime does and the comparator reads text nodes — but only
+ * when the two differ, so a repaint mid-sentence never moves the PM's caret.
+ */
+const scratchTa = el('textarea', {
+  placeholder: 'scratchpad — survives tab switches, dies with the page',
+  style: 'height:96px;background:oklch(0.11 0.004 228.8);color:#c4ccce;padding:10px 14px;font-family:var(--mono);font-size:12px',
+  onInput: (e) => setState({ scratchText: e.target.value }),
+});
+
+const scratchCopyLabel = iv('⧉ copy');
+const scratchCopyBtn = el('button', {
+  onClick: () => {
+    copyToClipboard(state.scratchText);
+    setState({ scratchCopied: true });
+    setTimeout(() => setState({ scratchCopied: false }), 1200);
+  },
+  style: 'font-family:var(--mono);font-size:10.5px;color:oklch(0.85 0.01 214);padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)',
+  hover: CHIP_HOVER,
+}, scratchCopyLabel);
+
+const scratchSendLabel = iv('open a terminal to send');
+const scratchSendBtn = el('button', {
+  onClick: () => sendScratchToTerminal(),
+  style: 'font-family:var(--mono);font-size:10.5px;color:' + FX.SCRATCH_SEND_COLOR.off + ';padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)',
+  hover: CHIP_HOVER,
+}, scratchSendLabel);
+
+const scratchBlock = el('div', {
+  style: 'display:flex;flex-direction:column;border-top:1px solid oklch(1 0 0 / 10%)',
+},
+  scratchTa,
+  el('div', { style: 'display:flex;gap:6px;padding:5px 12px 7px;background:oklch(0.11 0.004 228.8)' },
+    scratchCopyBtn, scratchSendBtn),
+);
+
+/* ── the bottom bar (lines 992–996) ─────────────────────────────────────────────────────────── */
+
+const scratchToggleLabel = iv('▲ scratchpad');
+const colTitleLabel = iv('scratchpad');
+const copyLabel = iv('copy');
+
+const bottomBar = el('div', {
+  style: 'display:flex;gap:10px;align-items:center;padding:5px 12px;border-top:1px solid oklch(1 0 0 / 10%);font-size:11px;color:oklch(0.6 0.02 213)',
+},
+  el('button', {
+    onClick: () => setState((s) => ({ scratchOpen: !s.scratchOpen })),
+    style: 'flex:none;color:oklch(0.72 0.014 214);font-size:11px;padding:3px 6px;white-space:nowrap',
+    hover: 'color:oklch(0.987 0.002 197.1)',
+  }, scratchToggleLabel),
+  el('span', {
+    style: 'font-family:var(--mono);color:#c4ccce;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
+  }, colTitleLabel),
+  el('button', {
+    onClick: () => copyActive(),
+    style: 'flex:none;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--brand);padding:3px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap',
+    hover: CHIP_HOVER,
+  }, copyLabel),
+);
+
+/* ── clipboard + scratchpad actions (lines 2098–2118) ───────────────────────────────────────── */
+
+function copyToClipboard(txt) {
+  try { if (navigator.clipboard) navigator.clipboard.writeText(txt); } catch { /* denied */ }
+}
+
+/** The active tab, or null when the active id belongs to another repository. */
+function activeTab() {
+  return visibleTabs().find((t) => t.id === state.active) || null;
+}
+
+/** `⇥ send to terminal` (line 2104): one echoed prompt line per non-empty scratchpad line. */
+function sendScratchToTerminal() {
+  const act = activeTab();
+  if (!act || act.kind !== 'term') return;
+  const v = (state.scratchText || '').trim();
+  if (!v) return;
+  const lines = FX.scratchLines(v);
+  setState((s) => ({ termHist: { ...s.termHist, [act.id]: [...(s.termHist[act.id] || []), ...lines] } }));
+  /* A real PTY is not a scrollback list: when a terminal module is present it gets the same text
+   * as keystrokes, so the paste lands in the shell rather than only in the transcript. */
+  if (!FIXTURE && termMod && typeof termMod.sendToTerm === 'function') {
+    try { termMod.sendToTerm(act, v + '\n'); } catch { /* the transcript still shows it */ }
+  }
+}
+
+/** `copy` (line 2111): the doc's text, or the attach command, or the scratchpad. */
+function copyActive() {
+  const act = activeTab();
+  let txt = '';
+  if (act && act.kind === 'doc') txt = state.docEdits[act.path] ?? docText(act);
+  else if (act && act.kind === 'term') txt = FX.termCopyText(act);
+  else txt = state.scratchText;
+  copyToClipboard(txt);
+  setState({ copied: true });
+  setTimeout(() => setState({ copied: false }), 1200);
+}
+
+/* ── pane hosts ────────────────────────────────────────────────────────────────────────────── */
+
+const PANE_STYLE = 'flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid oklch(1 0 0 / 10%)';
+const paneHosts = new Map();          // tab id -> the pane element, kept for the tab's whole life
+
+function paneFor(tab) {
+  let host = paneHosts.get(tab.id);
+  if (!host) { host = el('div', { style: PANE_STYLE }); paneHosts.set(tab.id, host); }
+  if (tab.kind === 'term') {
+    if (termMod && typeof termMod.mountTerm === 'function') termMod.mountTerm(host, tab);
+  } else if (tab.kind === 'task') {
+    mountTask(host, tab);
+  } else {
+    mountDoc(host, tab);
+  }
+  return host;
+}
+
+/** Drop the host of every tab that is no longer open, letting its module release what it holds. */
+function reapClosedPanes() {
+  const live = new Set((state.tabs || []).map((t) => t.id));
+  for (const [id, host] of [...paneHosts]) {
+    if (live.has(id)) continue;
+    const tab = { id };
+    if (termMod && typeof termMod.disposeTerm === 'function') { try { termMod.disposeTerm(tab); } catch { /* ignore */ } }
+    try { disposeDoc(id); } catch { /* ignore */ }
+    if (host.parentNode) host.parentNode.removeChild(host);
+    paneHosts.delete(id);
+    const slot = offSlots.get(id);
+    if (slot) { if (slot.parentNode) slot.parentNode.removeChild(slot); offSlots.delete(id); }
+  }
+}
+
+/* ── an open session whose tab is not the one on screen ───────────────────────────────────────
+ *
+ * `＋ session` starts a REAL PTY, and a term tab is the only view of it. Until this existed a pane
+ * was built ONLY for the tab being displayed, which meant: start two sessions in a row and the
+ * first one had no terminal, was never bound to a session, and therefore never spawned a shell at
+ * all — the tab bar showed two sessions running and the server had one. Opening the tab later
+ * started it then, so the failure looked like a slow start rather than a session that was never
+ * begun. The same hole swallows a session the PM starts and then switches away from.
+ *
+ * So every open term tab is mounted, and the ones not on screen live in an OFF-SCREEN SLOT: a real
+ * box, the size of the pane they would occupy, parked far outside the viewport. Not `display:none`
+ * and not detached, because both measure zero and a terminal fitted to a zero box is the 1×1
+ * terminal this module's refit rules exist to prevent — the grid a hidden session's shell is
+ * drawing into has to be the grid it will still be drawing into when the PM looks at it.
+ *
+ * Real mode only. Fixture mode opens no socket, starts no PTY and must render the prototype's DOM
+ * exactly, so nothing is parked and nothing extra exists on the page.
+ */
+const OFF_STAGE_STYLE = 'position:fixed;left:-100000px;top:0;width:0;height:0;pointer-events:none';
+const offSlots = new Map();      // tab id -> the off-screen box its host is parked in
+const lastPaneBox = { w: 720, h: 420 };
+let offStage = null;
+
+function offSlotFor(id, w, h) {
+  if (!offStage) {
+    offStage = el('div', { style: OFF_STAGE_STYLE, 'aria-hidden': 'true' });
+    document.body.appendChild(offStage);
+  }
+  let slot = offSlots.get(id);
+  if (!slot) { slot = el('div', { style: 'display:flex' }); offSlots.set(id, slot); offStage.appendChild(slot); }
+  const want = 'display:flex;width:' + w + 'px;height:' + h + 'px';
+  if (slot.getAttribute('style') !== want) slot.setAttribute('style', want);
+  return slot;
+}
+
+/**
+ * Keep every open term tab live. `shown` is the set of tab ids panel 4 is displaying — those hosts
+ * belong to the panes row and are left alone.
+ */
+function keepSessionsLive(shown) {
+  if (FIXTURE || !termMod || typeof termMod.mountTerm !== 'function') return;
+  const parked = (state.tabs || []).filter((t) => t.kind === 'term' && !shown.has(t.id));
+  if (!parked.length) return;
+  /* The slot is the size of the box panel 4 gives ONE pane. Measured from the panes row, so a
+   * parked terminal is fitted to what it will actually get; when the row has no box yet (booting,
+   * or a phone showing another panel) the last known size stands in, and an 80×24 default only for
+   * the very first one — a stale-but-plausible grid beats a zero one. */
+  const box = panesRow.getBoundingClientRect();
+  if (box.width > 1 && box.height > 1) { lastPaneBox.w = Math.round(box.width); lastPaneBox.h = Math.round(box.height); }
+  for (const t of parked) {
+    const host = paneFor(t);
+    const slot = offSlotFor(t.id, lastPaneBox.w, lastPaneBox.h);
+    if (host.parentNode !== slot) slot.appendChild(host);
+  }
+}
+
+/* ── the tab bar ───────────────────────────────────────────────────────────────────────────── */
+
+function tabNode(t, act, splitTab) {
+  const selected = (act && act.id === t.id) || (splitTab && splitTab.id === t.id);
+  const bg = selected ? FX.TAB_COLORS.activeBg : 'transparent';
+  const bc = selected ? FX.TAB_COLORS.activeBorder : FX.TAB_COLORS.idleBorder;
+  const color = act && act.id === t.id ? FX.TAB_COLORS.activeText : FX.TAB_COLORS.idleText;
+  const dotColor = FX.TAB_COLORS.dot[t.kind] || FX.TAB_COLORS.dot.doc;
+  const meta = t.kind === 'term' ? 'session' : (t.kind === 'task' ? 'task' : t.role);
+
+  return el('div', {
+    style: 'flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;background:' + bg
+      + ';border:1px solid ' + bc + ';border-bottom:0',
+  },
+    el('button', {
+      onClick: () => setState({ active: t.id }),
+      style: 'display:flex;gap:7px;align-items:center;min-height:38px',
+    },
+      el('span', { style: 'font-size:9px;color:' + dotColor }, '●'),
+      el('span', { style: 'display:flex;flex-direction:column;min-width:0;align-items:flex-start' },
+        el('span', {
+          style: 'font-family:var(--mono);font-size:11.5px;color:' + color
+            + ';max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3',
+        }, iv(t.title)),
+        el('span', {
+          style: 'font-family:var(--mono);font-size:9px;color:oklch(0.52 0.02 213);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2',
+        }, iv(t.slug), ' · ', iv(meta)),
+      ),
+    ),
+    el('button', {
+      onClick: () => closeTab(t.id),
+      style: 'color:oklch(0.6 0.02 213);font-size:12px;padding:2px 3px;align-self:flex-start;margin-top:6px',
+      hover: 'color:oklch(0.987 0.002 197.1)',
+    }, '×'),
+  );
+}
+
+/* ── render ────────────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Paint panel 4 into `host` — the persistent panel container app.js owns. The children are the
+ * prototype's, in the prototype's order: tab bar · (empty state) · panes · (scratchpad) · bottom
+ * bar. The panes row renders even when nothing is open, exactly as the design does.
+ */
+export function renderTabs(host) {
+  const visTabs = visibleTabs();
+  const act = visTabs.find((t) => t.id === state.active) || null;
+  const splitTab = state.splitId
+    ? (visTabs.find((t) => t.id === state.splitId && t.id !== (act && act.id)) || null)
+    : null;
+
+  // ── tab bar ──
+  const canSplit = visTabs.length >= 2 || !!state.splitId;
+  splitLabel.textContent = state.splitId ? '⫽ unsplit' : '⫽ split';
+  setChildren(tabBar, [
+    ...visTabs.map((t) => tabNode(t, act, splitTab)),
+    newSessionBtn,
+    canSplit ? splitBtn : null,
+  ]);
+
+  // ── panes ──
+  reapClosedPanes();
+  const panes = [act ? paneFor(act) : null, splitTab ? paneFor(splitTab) : null].filter(Boolean);
+  setChildren(panesRow, panes);
+  // …and the sessions that are open but not on screen keep running, off screen (see above).
+  keepSessionsLive(new Set([act && act.id, splitTab && splitTab.id].filter(Boolean)));
+
+  // ── scratchpad ──
+  /* `defaultValue` IS the textarea's child text node — the rendered text lives in the DOM, not only
+   * in a property, which is how the prototype's runtime leaves it. Writing it costs a typed-in box
+   * nothing; `value` is written only when it differs, so the caret stays where the PM put it. */
+  const scratchText = state.scratchText || '';
+  if (scratchTa.defaultValue !== scratchText) scratchTa.defaultValue = scratchText;
+  if (scratchTa.value !== scratchText) scratchTa.value = scratchText;
+  scratchCopyLabel.textContent = state.scratchCopied ? 'copied ✓' : '⧉ copy';
+  const canSend = !!(act && act.kind === 'term');
+  scratchSendLabel.textContent = canSend ? '⇥ send to terminal' : 'open a terminal to send';
+  scratchSendBtn.setAttribute('style',
+    'font-family:var(--mono);font-size:10.5px;color:'
+    + (canSend ? FX.SCRATCH_SEND_COLOR.on : FX.SCRATCH_SEND_COLOR.off)
+    + ';padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)');
+
+  // ── bottom bar ──
+  scratchToggleLabel.textContent = state.scratchOpen ? '▼ scratchpad' : '▲ scratchpad';
+  colTitleLabel.textContent = act ? act.title : 'scratchpad';
+  copyLabel.textContent = state.copied ? 'copied ✓' : 'copy';
+
+  setChildren(host, [
+    tabBar,
+    visTabs.length === 0 ? emptyState : null,
+    panesRow,
+    state.scratchOpen ? scratchBlock : null,
+    bottomBar,
+  ]);
+}
+
+export default renderTabs;

package/workspace/public/pm/state.js

@@ -0,0 +1,164 @@
+/* pm/state.js — the single mutable state object for the four-panel workspace.
+ *
+ * One object, one `setState`, one batched render. The keys are the prototype's keys, verbatim,
+ * because every panel module is a port of a subtree that already reads them by name — renaming a
+ * field here would make each port a translation instead of a copy.
+ *
+ * Two rules the rest of the surface depends on:
+ *   1. `setState` coalesces. Several patches inside one event handler produce exactly ONE render,
+ *      the way the prototype's React setState did. A callback runs AFTER that render.
+ *   2. Nothing here is derived. Anything computable from these fields is computed at read time by
+ *      the panel that needs it (D33) — a second copy of a derivable value is a board that lies.
+ */
+
+/* Fixture mode is decided from the URL, not from another module: the persistence bypass below is
+ * the whole reason the comparator can trust a run. Reading it here keeps state.js loadable on its
+ * own and stops a data-layer import from deciding whether the PM's layout is written to disk. */
+export const FIXTURE = (() => {
+  try { return new URLSearchParams(location.search).get('fixture') === 'proto'; }
+  catch { return false; }
+})();
+
+const STORE_KEY = 'pmos.workspace.pm.v1';
+
+/** The initial state — the prototype's `state = {…}` block, key for key. */
+function initial() {
+  return {
+    theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, settingsOpen: false,
+    product: null, newSessProfile: 'claude-work', intgSynced: {},
+    addSrc: 'github', addRepo: 'github.com/acme/atlas-mobile', addPath: '~/code/notes-cli',
+    addLog: [], addedProducts: [], extraKnow: {},
+    newType: 'init', newName: '', newSlug: '', newAnchor: null, newFlow: 'adlc-feature',
+    userGroups: {}, userKrs: {}, addedInits: {}, userInits: {}, selTask: null, collapsedPhases: {},
+    detail: { kind: 'init' },
+    tabs: [], active: null, splitId: null,
+    initLinks: {}, artLinks: {}, artSyncOpen: {}, artSyncState: {},
+    extraSess: {}, termHist: {}, startN: 1, docEdits: {}, docModes: {},
+    col0: true, col1: true, col2: true, scratchOpen: false, scratchText: '', copied: false,
+    flowsMap: null, schedList: null, agentList: null, memory: null,
+    savedDocs: {}, scratchCopied: false,
+  };
+}
+
+/* ── persistence ──────────────────────────────────────────────────────────────────────────────
+ * Only the PM's *arrangement* is persisted — never content, never tabs, never a live session.
+ * Each key carries its own validator. A stored value that fails its validator is DROPPED and the
+ * rest of the record is still applied: "layout amnesia" in the PRD's failure-mode list means a
+ * stale record from an older build throwing, or silently wiping a layout the PM is working in.
+ * An unknown key is simply not read, so an older or newer schema costs nothing.
+ */
+const isBool = (v) => typeof v === 'boolean';
+const isSlug = (v) => v === null || typeof v === 'string';
+const isFlagMap = (v) =>
+  !!v && typeof v === 'object' && !Array.isArray(v) &&
+  Object.keys(v).every((k) => typeof k === 'string' && typeof v[k] === 'boolean');
+
+const PERSIST = {
+  theme: (v) => v === 'dark' || v === 'light',
+  col0: isBool, col1: isBool, col2: isBool,
+  settingsOpen: isBool,
+  product: isSlug,
+  sel: isSlug,
+  collapsedGroups: isFlagMap,
+  collapsedPhases: isFlagMap,
+};
+
+/** The exact set of keys written to localStorage, in write order. */
+export const persistKeys = Object.keys(PERSIST);
+
+function restore(target) {
+  if (FIXTURE) return target;                       // the fixture render must be deterministic
+  let raw = null;
+  try { raw = localStorage.getItem(STORE_KEY); } catch { return target; }
+  if (!raw) return target;
+  let saved = null;
+  try { saved = JSON.parse(raw); } catch { return target; }
+  if (!saved || typeof saved !== 'object' || Array.isArray(saved)) return target;
+  for (const k of persistKeys) {
+    if (!Object.prototype.hasOwnProperty.call(saved, k)) continue;
+    let ok = false;
+    try { ok = PERSIST[k](saved[k]); } catch { ok = false; }
+    if (ok) target[k] = saved[k];
+  }
+  return target;
+}
+
+function persist() {
+  if (FIXTURE) return;
+  const out = {};
+  for (const k of persistKeys) out[k] = state[k];
+  try { localStorage.setItem(STORE_KEY, JSON.stringify(out)); } catch { /* quota / private mode */ }
+}
+
+/* ── the store ────────────────────────────────────────────────────────────────────────────── */
+
+export const state = restore(initial());
+
+/* ── the write log ─────────────────────────────────────────────────────────────────────────────
+ * How many times each field has been ASSIGNED, whatever the value it was assigned. This is not
+ * derived state and not a second copy of anything: it is a fact about the writes, and it exists
+ * because one surface genuinely needs to tell a REQUEST from a CHANGE.
+ *
+ * "Show me this tab" is `setState({active: id})`. When the tab was already the active one, the
+ * value does not move, so a reader watching values sees nothing happen — which is correct for a
+ * desktop, where the tab is already on screen, and wrong for the phone, where one panel is visible
+ * at a time and the PM may be standing on the board looking at nothing of the sort. The phone reads
+ * this counter alongside the value; nothing else needs it, and no panel had to learn that a phone
+ * exists for it to work.
+ */
+const writes = Object.create(null);
+
+/** How many times `key` has been written. Only ever increases; the value itself is meaningless. */
+export function writeCount(key) { return writes[key] || 0; }
+
+const subs = new Set();
+let queued = false;
+let callbacks = [];
+
+/** Register a render function. Returns its own unsubscribe. */
+export function subscribe(fn) {
+  subs.add(fn);
+  return () => subs.delete(fn);
+}
+
+/**
+ * Merge a patch (or the result of `fn(state)`) into the state and schedule one render.
+ * A function form returning `null` is a no-op patch — the prototype relies on that for Esc with
+ * no active tab. `cb` runs after the render that includes this patch.
+ */
+export function setState(patchOrFn, cb) {
+  const patch = typeof patchOrFn === 'function' ? patchOrFn(state) : patchOrFn;
+  if (patch) {
+    for (const k in patch) writes[k] = (writes[k] || 0) + 1;
+    Object.assign(state, patch);
+  }
+  if (typeof cb === 'function') callbacks.push(cb);
+  if (queued) return;
+  queued = true;
+  // The microtask re-checks `queued` instead of calling flush() unconditionally. Without that
+  // re-check, an explicit flush() — which a caller uses when it must READ the DOM it just caused —
+  // leaves this microtask still pending, and it fires afterwards as a SECOND render of a state
+  // nothing changed. That second render is not free: paint() rebuilds a panel's subtree, so the
+  // element the first render just focused is detached and re-appended, and the focus is silently
+  // lost. It cost the shell's ⌘K contract exactly that way — focus() ran, succeeded, and was undone
+  // one microtask later. A stale re-render also churns the container a live PTY sits in, which is
+  // the same class of quiet damage the persistent panel-4 host exists to prevent.
+  queueMicrotask(() => { if (queued) flush(); });
+}
+
+/** Render now, synchronously — for a caller that must read the DOM it just caused. */
+export function flush() {
+  queued = false;
+  persist();
+  for (const fn of [...subs]) fn(state);
+  const run = callbacks;
+  callbacks = [];
+  for (const cb of run) cb(state);
+}
+
+/** Reset to the seeded state and forget the stored arrangement. Used by the browser suite. */
+export function resetState() {
+  Object.assign(state, initial());
+  try { localStorage.removeItem(STORE_KEY); } catch { /* ignore */ }
+  setState({});
+}