create-pmos 0.52.0 → 0.53.0

package/workspace/public/pm/modes.js

@@ -1,98 +1,37 @@
-/* pm/modes.js — the seven secondary modes behind panel 1's "settings & tools" drawer.
+/* pm/modes.js — what is left of the secondary modes after the R29 cuts (pm-os-absorb Run 3, slice 3D).
  *
- * A PORT of the prototype's non-`product` branches: the panel-2 lists (template lines 130–178 and
- * 227–320) and the panel-3 bodies (template lines 450–663, 771–835), with their derivations
- * (lines 1467–1570, 1683–1697, 1809–1961). Every inline `style` string below is copied from that
- * file character for character and every literal is the prototype's literal — the acceptance bar
- * is a mechanical diff, so a reworded label or a tidied padding is a defect, not an improvement.
+ * The settings drawer and its modes are gone: Focus, Portfolio, Memory, Knowledge, the Guide, Skills, Scheduled, Agents,
+ * Connect and the morning brief. Memory, Knowledge and the Guide are ⌘K search scopes (palette.js); Skills start from the
+ * dock's ＋ Session menu; the schedules live in Reports; "All repositories" is a choice in Repository ▾. This file keeps
+ * the two things that stay:
  *
- * ── What "mode" means here ──────────────────────────────────────────────────────────────────
- * `state.mode` switches panels 2 AND 3 together. The drawer offers exactly seven:
+ *   validate   the Validate page's list (modes-live.js validateList), reached from Settings
+ *   prof       the Claude profiles in the detail column, reached from Settings
  *
- *     this repository   agent · memory · knowledge
- *     all repositories  focus · skills · connect · scheduled
+ * ── The entry points ─────────────────────────────────────────────────────────────────────────
+ *   renderMode(hostList, hostDetail, mode)  — the body for `mode`, APPENDED to `hostList`.
+ *   detailBody(kind, detail)                — the nodes the detail column puts BELOW its header for a secondary
+ *                                             detail kind (`prof`).
  *
- * `workflow` is an eighth mode that exists in the prototype's code and is deliberately absent
- * from the drawer (a workflow is decided by the agent at runtime, not configured — PRD, panel 1).
- * Its list and its `flow` detail are ported anyway, because they are reachable programmatically
- * and a half-ported mode is a trap for whoever re-enables it.
- *
- * ── The two entry points, and who owns what ─────────────────────────────────────────────────
- *   renderMode(hostList, hostDetail, mode)  — panel 2's body for `mode`, APPENDED to `hostList`.
- *                                             panel-initiatives.js has already put its sticky
- *                                             header and its search box there and every mode
- *                                             keeps both, so this appends and never clears.
- *                                             `hostDetail` is optional and normally null: panel 3
- *                                             is painted by its own owner, which asks this module
- *                                             for a body through `detailBody`.
- *   detailBody(kind, detail)                — the nodes panel 3 puts BELOW its sticky header for
- *                                             a secondary detail kind (`flow · sched · skill ·
- *                                             know · agent · mem · prof · intg`).
- *
- * ── Where the data comes from ───────────────────────────────────────────────────────────────
- * The four editable lists — workflows, scheduled tasks, agents, memory — live on the state keys
- * the prototype used (`flowsMap`, `schedList`, `agentList`, `memory`), each `null` until edited.
- * `null` resolves to the FIXTURE seed in fixture mode and to an EMPTY list otherwise: seed rows
- * rendering in the real app is "the beautiful shell" the PRD names as a failure mode. The data
- * layer publishes real values into those same keys, plus `skills`, `know`, `profiles` and
- * `intgs`; until it does, a mode renders its section labels and one honest italic line rather
- * than a blank panel. In fixture mode every list is non-empty, so that line never renders and the
- * comparator sees the prototype's markup exactly.
- *
- * No network, no derived state cached (D33): every list, count, colour and active row below is
- * computed at read time, on every render.
+ * No network, no derived state cached (D33): every list, count and colour below is computed at read time, on every render.
  */
 
 import { el, setChildren } from './dom.js';
-import { state, setState, FIXTURE } from './state.js';
+import { state, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
-import { openDoc, openTerm } from './panel-initiatives.js';
-import { boardOf, records, currentProduct } from './board-read.js';
 import * as LIVE from './modes-live.js';   // overhaul-r4: server-backed renderers, live mode only
 
-/* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
-
 /** `{{ expr }}` — an interpolated value, wrapped the way the prototype's runtime wraps it. */
 const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
 
-/** selRow (line 1402) — an active row is washed and gets the 2px brand left border. */
-const selRow = (on) => ({
-  bg: on ? 'var(--accent)' : 'transparent',
-  bl: on ? 'var(--brand)' : 'transparent',
-});
-
-/** setDetail (line 1401) — open panel 3 on a detail kind, un-collapsing it if the PM folded it. */
-const setDetail = (d) => setState({ detail: d, col2: true });
-
 /** The detail descriptor, never undefined. */
 const detOf = () => state.detail || { kind: 'init' };
 
-const C = FX.C;
+/* ── style constants ─────────────────────────────────────────────────────────────────────── */
 
-/* ── style constants that repeat verbatim across modes ─────────────────────────────────────── */
-
-// Section label, 9px top padding (focus's five, connections' second, memory's second).
-const LABEL9 = 'padding:9px 14px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--border)';
-// Section label, 7px top padding (knowledge groups, connections' first, memory's first).
-const LABEL7 = 'padding:7px 14px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--border)';
-// The shared secondary button. Panel 3 uses it bare; panel 2's list actions add the margin.
-const SEC_BTN = 'padding:5px 12px;min-height:30px;background:var(--secondary);border:1px solid var(--border);font-size:12px';
-const ACTION_BTN = 'margin:10px 14px;' + SEC_BTN;
-const ACTION_HOVER = 'border-color:var(--ring)';
-// A list row: 8px padding (skills, knowledge, agents, connections, workflows) …
-const row8 = (r) => 'display:block;width:100%;padding:8px 14px;min-height:44px;border-bottom:1px solid oklch(1 0 0 / 5%);border-left:2px solid ' + r.bl + ';background:' + r.bg;
-// … and 7px padding (scheduled, focus queue, memory).
-const row7 = (r) => 'display:block;width:100%;padding:7px 14px;min-height:44px;border-bottom:1px solid oklch(1 0 0 / 5%);border-left:2px solid ' + r.bl + ';background:' + r.bg;
-const ROW_HOVER = 'background:var(--accent)';
-// The prototype's brand-filled button (▶ run now, ▶ delegate, ↥ promote …).
-const BRAND_BTN = 'padding:5px 12px;min-height:30px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-size:12px;font-weight:500';
-const DESTRUCTIVE_BTN = 'padding:5px 12px;min-height:30px;border:1px solid var(--destructive);color:var(--destructive);font-size:12px';
-const DESTRUCTIVE_HOVER = 'background:color-mix(in oklab, var(--destructive) 10%, transparent)';
 // The two-column field grid every secondary detail uses; `pt` is the label's top padding.
 const FIELD_ROW = 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border)';
-const FIELD_ROW10 = 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)';
 const fieldLabel = (pt) => 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-top:' + pt + 'px';
-const SECTION_LABEL = 'padding:10px 14px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
 const FOOTER = 'margin-top:auto;padding:8px 14px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--muted-foreground)';
 const HEAD_BLOCK = 'padding:13px 14px 11px;border-bottom:1px solid var(--border)';
 const HEAD_NAME = 'font-family:var(--mono);font-size:15px;font-weight:600';
@@ -100,866 +39,15 @@ const HEAD_SUB = 'font-size:12px;color:var(--muted-foreground);margin-top:2px';
 const ITALIC_EMPTY = 'font-size:11.5px;color:var(--muted-foreground);font-style:italic';
 const PILL = 'font-family:var(--mono);font-size:10px;padding:2px 6px;background:var(--secondary);border:1px solid var(--border)';
 
-/**
- * The one line a mode shows when its list is genuinely empty. It is the prototype's own copy for
- * "nothing is filed" — a read that succeeded and found nothing is not an error, and it is not a
- * spinner either. In fixture mode no list is empty, so this never renders into the diff.
- */
-const emptyLine = () => el('div', {
-  style: 'padding:5px 14px 6px;font-size:11px;color:var(--muted-foreground);font-style:italic',
-}, 'nothing filed yet — a successful read of nothing');
-
-/* ── the state-backed lists ────────────────────────────────────────────────────────────────── */
-
-const seedOr = (seed, empty) => (FIXTURE ? seed() : empty);
-
-/** flowsMap() (line 1054). */
-const flowsMap = () => state.flowsMap || seedOr(() => FX.FLOWS, {});
-/** schedList() (lines 1055–1061). */
-const schedList = () => state.schedList || seedOr(FX.defaultSched, []);
-/** agentList() (lines 1062–1067). */
-const agentList = () => state.agentList || seedOr(FX.defaultAgents, []);
-/** memory() (lines 1068–1081). */
-const memoryOf = () => state.memory || seedOr(FX.defaultMemory, { short: [], long: [] });
-/** SKILLS (lines 1491–1496). */
-const skillList = () => state.skills || seedOr(() => FX.SKILLS, []);
-/** KNOW (line 1502) — the base decisions with anything a repo ingest proposed layered on. */
-const knowMap = () => ({ ...(state.know || seedOr(() => FX.KNOW, {})), ...(state.extraKnow || {}) });
-/** PROFILES / INTG (line 1684). */
-const profileList = () => state.profiles || seedOr(() => FX.PROFILES, []);
-const intgList = () => state.intgs || seedOr(() => FX.INTG, []);
-
-/* ── the board, read the way panels 2 and 3 read it (board-read.js — one derivation) ───────── */
-
-/** The initiative a mode acts on when it starts a session (line 1397). */
-function selectedSlug() {
-  if (state.sel !== null && state.sel !== undefined) return state.sel;
-  const board = boardOf();
-  const g0 = (board[currentProduct()] || [])[0];
-  return g0 && g0.slugs && g0.slugs.length ? g0.slugs[0] : null;
-}
-
-/** allProds (line 1431), as far as this module needs it — focus's objective lines. */
-function productTuples() {
-  if (FIXTURE && !state.board) return FX.productsList(state.addedProducts || []);
-  const added = (state.addedProducts || []).map((x) => [x.id, x.sub, x.kind || 'github']);
-  return [...Object.keys(boardOf()).map((id) => [id, '', 'github']), ...added];
-}
-
-/** jump (line 1542) — pick a repository AND an initiative, without leaving the current mode. */
-const jump = (prod2, slug) => setState({ product: prod2, sel: slug, detail: { kind: 'init' }, col2: true });
-
-/** Start a session against an initiative and open its terminal tab (lines 1558–1559, 1863–1864). */
-function startSession(slug, sess) {
-  if (!slug) return;
-  setState(
-    (s) => ({ extraSess: { ...s.extraSess, [slug]: [...(s.extraSess[slug] || []), sess] } }),
-    () => openTerm(slug, sess),
-  );
-}
-
-/** profChips (lines 1685–1689) — the claude-work / claude-personal picker, used by 2 details. */
-function profChips(cur, onPick) {
-  return profileList().map((x) => ({
-    l: x.id.replace('claude-', ''),
-    on: () => onPick(x.id),
-    bg: cur === x.id ? 'var(--secondary)' : 'transparent',
-    bc: cur === x.id ? 'var(--input)' : 'var(--border)',
-    color: cur === x.id ? 'var(--foreground)' : 'var(--muted-foreground)',
-  }));
-}
-
-function profChipNode(pb) {
-  return el('button', {
-    onClick: pb.on,
-    style: 'font-family:var(--mono);font-size:10.5px;padding:4px 8px;min-height:26px;background:' + pb.bg + ';border:1px solid ' + pb.bc + ';color:' + pb.color,
-    hover: ACTION_HOVER,
-  }, iv(pb.l));
-}
-
-/* ══════════════════════════════════════════════════════════════════════════════════════════════
- *  PANEL 2 — one list per mode (template lines 130–178, 227–320)
- * ════════════════════════════════════════════════════════════════════════════════════════════ */
-
-/* ── focus (lines 130–178, derivation 1541–1570) ───────────────────────────────────────────── */
-
-function focusList() {
-  const det = detOf();
-  const selSlug = state.sel;
-  const fRow = (f) => ({
-    ...f,
-    on: () => jump(f.prod2, f.slug),
-    ...selRow(selSlug === f.slug && det.kind === 'init'),
-  });
-  /* The queue is a JUDGEMENT about what is blocked on the PM, so it is never invented here. In
-   * fixture mode it is the prototype's four ranked items; in real mode it is whatever the data
-   * layer published on `state.focus` (loadFocus's adapted `/api/console?name=focus` view —
-   * {first, waiting, syn, saw}, or {readError} for a failed read); with neither, each section
-   * renders its label and one honest empty line. */
-  const F = state.focus || (FIXTURE
-    ? { first: FX.FOCUS_FIRST, waiting: FX.FOCUS_WAITING, syn: FX.FOCUS_SYN }
-    : { first: [], waiting: [], syn: [] });
-  const first = (F.first || []).map(fRow);
-  const waiting = (F.waiting || []).map(fRow);
-  const MEM = memoryOf();
-
-  const syn = (F.syn || []).map((f) => ({
-    ...f,
-    on: () => {
-      /* The delegate spawn is the FIXTURE's own seed session. A real-mode row never carries this
-       * action (data.js renders the server's `starts` without a button — a button would claim a
-       * spawn this surface has no runner for), so the gate is stated, not assumed. */
-      if (FIXTURE && f.action === 'delegate-billing-stories') {
-        const d = FX.DELEGATE_SESSION;
-        startSession(d.slug, { ...d.sess });
-      }
-    },
-  }));
-
-  /* Upkeep is data-driven like the other sections: the fixture seed renders ONLY in fixture mode;
-   * in real mode the rows are the server's own upkeep view, adapted by data.js. Seed rows behind a
-   * published `state.focus` were "the beautiful shell" waiting to activate. */
-  const saw = (FIXTURE ? FX.focusSaw(MEM) : (F.saw || [])).map((f) => ({
-    ...f,
-    on: () => {
-      if (f.action === 'mode:memory') { setState({ mode: 'memory' }); return; }
-      if (f.action && f.action.startsWith('jump:')) {
-        const [prod2, slug] = f.action.slice(5).split('|');
-        jump(prod2, slug);
-      }
-    },
-  }));
-
-  const board = boardOf();
-  const ends = productTuples().map(([id]) => {
-    const g0 = (board[id] || [])[0];
-    return g0 ? { prod: id, obj: g0.gid + ' · ' + g0.gname } : null;
-  }).filter(Boolean);
-
-  /* A failed read renders as a failed read, and an in-flight one says so — never "a successful
-   * read of nothing" for either. Used by the four sections the focus payload feeds; the objectives
-   * section derives from the board and keeps its own empty line. */
-  const emptyOr = () => {
-    if (F.readError) {
-      return el('div', { style: 'padding:5px 14px 6px;font-size:11px;color:var(--destructive)' },
-        iv('read failed — ' + F.readError));
-    }
-    if (F.reading) {
-      return el('div', { style: 'padding:5px 14px 6px;font-size:11px;color:var(--muted-foreground);font-style:italic' },
-        'reading the focus queue…');
-    }
-    return emptyLine();
-  };
-
-  const out = [];
-  out.push(el('div', { style: 'padding:8px 14px 4px;font-size:11.5px;color:var(--muted-foreground);line-height:1.5' },
-    'This list holds only items where ',
-    el('span', { style: 'color:var(--foreground)' }, 'you'),
-    ' are the blocker. Everything else is running on an agent or waiting on another team.'));
-
-  out.push(el('div', { style: LABEL9 }, 'objectives · what this quarter is for'));
-  for (const fe of ends) {
-    out.push(el('div', { style: 'display:flex;gap:8px;align-items:baseline;padding:6px 14px;border-bottom:1px solid oklch(1 0 0 / 5%)' },
-      el('span', { style: 'flex:none;font-family:var(--mono);font-size:10.5px;color:var(--brand)' }, iv(fe.prod)),
-      el('span', { style: 'font-size:11px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(fe.obj))));
-  }
-  if (!ends.length) out.push(emptyLine());
-
-  out.push(el('div', { style: LABEL9 }, 'your queue · ranked — do #1 first'));
-  out.push(el('div', { style: 'padding:5px 14px 3px;font-size:10.5px;color:var(--muted-foreground)' },
-    'each item shows what was read before it asks you to act'));
-  for (const ff of first) {
-    out.push(el('button', { onClick: ff.on, style: row7(ff), hover: ROW_HOVER },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'flex:none;font-family:var(--mono);font-size:11px;color:var(--warning)' }, iv(ff.n)),
-        el('span', { style: 'font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(ff.slug)),
-        el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(ff.prod2))),
-      el('span', { style: 'display:block;font-size:11px;margin-top:1px' }, iv(ff.why)),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(ff.read))));
-  }
-  if (!first.length) out.push(emptyOr());
+/* ── the Claude profiles (the detail Settings opens) ─────────────────────────────────────────── */
 
-  out.push(el('div', { style: LABEL9 }, 'handoffs · waiting on other teams'));
-  for (const fw of waiting) {
-    out.push(el('button', { onClick: fw.on, style: row7(fw), hover: ROW_HOVER },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(fw.slug)),
-        el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(fw.prod2))),
-      el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground);margin-top:1px' }, iv(fw.why)),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(fw.read))));
-  }
-  /* `waitingNote` is the server's own sentence for a tracker that is NOT CONNECTED — a different
-   * fact from a successful read that found nothing, so it gets the server's words, not the calm
-   * empty line. */
-  if (!waiting.length) {
-    out.push(F.waitingNote
-      ? el('div', { style: 'padding:5px 14px 6px;font-size:11px;color:var(--muted-foreground);font-style:italic' },
-          iv(F.waitingNote))
-      : emptyOr());
-  }
-
-  out.push(el('div', { style: LABEL9 }, 'delegated · agents in parallel'));
-  for (const fy of syn) {
-    out.push(el('div', { style: 'display:flex;gap:8px;align-items:center;padding:6px 14px;border-bottom:1px solid oklch(1 0 0 / 5%)' },
-      el('span', { style: 'font-size:11.5px;color:var(--muted-foreground);flex:1;min-width:0;line-height:1.45' }, iv(fy.t)),
-      fy.hasBtn && el('button', {
-        onClick: fy.on,
-        style: 'flex:none;font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:26px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500',
-      }, iv(fy.btn))));
-  }
-  if (!syn.length) out.push(emptyOr());
-
-  out.push(el('div', { style: LABEL9 }, 'upkeep · keep the system sharp'));
-  for (const fs2 of saw) {
-    out.push(el('button', {
-      onClick: fs2.on,
-      style: 'display:block;width:100%;padding:7px 14px;min-height:40px;border-bottom:1px solid oklch(1 0 0 / 5%)',
-      hover: ROW_HOVER,
-    }, el('span', { style: 'display:block;font-size:11.5px;color:var(--muted-foreground);line-height:1.45' }, iv(fs2.t))));
-  }
-  if (!saw.length) out.push(emptyOr());
-  return out;
-}
-
-/* ── scheduled (lines 227–237, derivation 1467–1477) ───────────────────────────────────────── */
-
-function schedRows() {
-  const det = detOf();
-  return schedList().map((t) => {
-    const on = det.kind === 'sched' && det.id === t.name;
-    const last = (t.log || [])[0];
-    return {
-      name: t.name, when: t.when,
-      st: t.enabled ? (last ? last.ts + ' — ' + last.t : 'never run yet') : 'disabled',
-      c: t.enabled ? (last ? last.c : C.mut) : C.mut,
-      ...selRow(on),
-      on: () => setDetail({ kind: 'sched', id: t.name }),
-    };
-  });
-}
-
-function addSched() {
-  const list = schedList();
-  const name = 'custom task ' + (list.filter((t) => t.name.startsWith('custom task')).length + 1);
-  setState({ schedList: [...list, { name, ...FX.NEW_SCHED, log: [] }] },
-    () => setDetail({ kind: 'sched', id: name }));
-}
-
-function scheduledList() {
-  const rows = schedRows();
-  const kids = [];
-  for (const sr of rows) {
-    kids.push(el('button', { onClick: sr.on, style: row7(sr), hover: ROW_HOVER },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'font-size:12.5px' }, iv(sr.name)),
-        el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)' }, iv(sr.when))),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10.5px;color:' + sr.c }, iv(sr.st))));
-  }
-  if (!rows.length) kids.push(emptyLine());
-  kids.push(el('button', { onClick: addSched, style: ACTION_BTN, hover: ACTION_HOVER }, '＋ schedule a task'));
-  return [el('div', { style: 'padding:6px 0' }, kids)];
-}
-
-/* ── workflow (lines 239–249, derivation 1478–1489) ────────────────────────────────────────── */
-
-/** flowUse (line 1480) — which initiatives declare each workflow. */
-function flowUse() {
-  const use = {};
-  const DATA = records();
-  Object.keys(DATA).forEach((slug) => {
-    const i = DATA[slug];
-    if (i && i.flow) (use[i.flow] = use[i.flow] || []).push(slug);
-  });
-  return use;
-}
-
-function addFlow() {
-  const map = flowsMap();
-  let n = 1; while (map['custom-' + n]) n++;
-  const name = 'custom-' + n;
-  setState({ flowsMap: { ...map, [name]: [...FX.NEW_FLOW_STAGES] } },
-    () => setDetail({ kind: 'flow', id: name }));
-}
-
-function workflowList() {
-  const det = detOf();
-  const use = flowUse();
-  const map = flowsMap();
-  const out = [];
-  out.push(el('div', { style: 'padding:8px 14px 4px;font-size:11.5px;color:var(--muted-foreground);line-height:1.5' },
-    'Workflow templates — an initiative picks one; its ladder renders from it. Keep this list short: templates dictate how agents work.'));
-  const names = Object.keys(map);
-  for (const name of names) {
-    const on = det.kind === 'flow' && det.id === name;
-    const fl = {
-      name, chain: map[name].join(' → '), used: (use[name] || []).length + ' initiatives', ...selRow(on),
-    };
-    out.push(el('button', {
-      onClick: () => setDetail({ kind: 'flow', id: name }), style: row8(fl), hover: ROW_HOVER,
-    },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'font-family:var(--mono);font-size:12px;color:var(--foreground)' }, iv(fl.name)),
-        el('span', { style: 'margin-left:auto;font-size:10.5px;color:var(--muted-foreground)' }, iv(fl.used))),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--info);margin-top:2px;overflow-wrap:anywhere' }, iv(fl.chain))));
-  }
-  if (!names.length) out.push(emptyLine());
-  out.push(el('button', { onClick: addFlow, style: ACTION_BTN, hover: ACTION_HOVER }, '＋ new workflow'));
-  out.push(el('div', { style: 'padding:0 14px 10px;font-size:11px;line-height:1.5;color:var(--muted-foreground)' },
-    'Creating a template is the easy part. Applying one is the commitment — an initiative opts in by setting ',
-    el('span', { style: 'font-family:var(--mono)' }, 'flow:'),
-    ' in its record, and its ladder re-derives from the new stages.'));
-  return out;
-}
-
-/* ── skills (lines 251–258, derivation 1490–1500) ──────────────────────────────────────────── */
-
-function skillsList() {
-  const det = detOf();
-  const list = skillList();
-  const out = list.map((sk) => {
-    const r = selRow(det.kind === 'skill' && det.id === sk.name);
-    return el('button', {
-      onClick: () => setDetail({ kind: 'skill', id: sk.name }), style: row8(r), hover: ROW_HOVER,
-    },
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:12px' }, iv(sk.name)),
-      el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground)' }, iv(sk.d)));
-  });
-  if (!list.length) out.push(emptyLine());
-  return out;
-}
-
-/* ── knowledge (lines 260–273, derivation 1501–1510) ───────────────────────────────────────── */
-
-function knowledgeList() {
-  const det = detOf();
-  const KNOW = knowMap();
-  const kGroups = {};
-  Object.keys(KNOW).forEach((id) => {
-    const k = KNOW[id];
-    (kGroups[k.grp] = kGroups[k.grp] || []).push([id, k]);
-  });
-
-  const out = [];
-  out.push(el('div', { style: 'padding:8px 14px 4px;font-size:11.5px;color:var(--muted-foreground)' },
-    'Decisions, grouped by domain — related decisions link to each other.'));
-  const names = Object.keys(kGroups);
-  for (const name of names) {
-    const rows = kGroups[name].map(([id, k]) => {
-      const r = selRow(det.kind === 'know' && det.id === id);
-      const idColor = k.badge === 'superseded' ? 'var(--muted-foreground)' : 'var(--brand)';
-      return el('button', {
-        onClick: () => setDetail({ kind: 'know', id }),
-        style: 'display:block;width:100%;padding:8px 14px 8px 20px;min-height:44px;border-bottom:1px solid oklch(1 0 0 / 5%);border-left:2px solid ' + r.bl + ';background:' + r.bg,
-        hover: ROW_HOVER,
-      },
-        el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-          el('span', { style: 'font-family:var(--mono);font-size:12px;color:' + idColor }, iv(id)),
-          el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(k.badge))),
-        el('span', { style: 'display:block;font-size:11.5px;color:var(--muted-foreground)' }, iv(k.d)));
-    });
-    out.push(el('div', null, el('div', { style: LABEL7 }, iv(name)), rows));
-  }
-  if (!names.length) out.push(emptyLine());
-  return out;
-}
-
-/* ── agents (lines 275–283, derivation 1511–1527) ──────────────────────────────────────────── */
-
-function addAgent() {
-  const list = agentList();
-  let n = 1; while (list.find((a) => a.name === 'agent-' + n)) n++;
-  const name = 'agent-' + n;
-  setState({ agentList: [...list, { name, ...FX.NEW_AGENT, sessions: [] }] },
-    () => setDetail({ kind: 'agent', id: name }));
-}
-
-function agentsList() {
-  const det = detOf();
-  const list = agentList();
-  const out = list.map((a) => {
-    const r = selRow(det.kind === 'agent' && det.id === a.name);
-    const working = (a.sessions || []).filter((s) => s.st === 'working' || s.st === 'needs').length;
-    const st = a.paused ? 'paused — takes no new work'
-      : (working ? working + ' session' + (working > 1 ? 's' : '') + ' working' : 'idle');
-    const c = a.paused ? C.mut : (working ? C.suc : C.mut);
-    return el('button', {
-      onClick: () => setDetail({ kind: 'agent', id: a.name }), style: row8(r), hover: ROW_HOVER,
-    },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'flex:none;font-size:10px;color:' + c }, '●'),
-        el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv(a.name)),
-        el('span', { style: 'margin-left:auto;font-size:10.5px;color:var(--muted-foreground)' }, iv(a.role))),
-      el('span', { style: 'display:block;font-size:11px;color:var(--muted-foreground);padding-left:18px' }, iv(st)));
-  });
-  if (!list.length) out.push(emptyLine());
-  out.push(el('button', { onClick: addAgent, style: ACTION_BTN, hover: ACTION_HOVER }, '＋ register agent'));
-  return out;
-}
-
-/* ── connections (lines 285–301, derivation 1683–1697) ─────────────────────────────────────── */
-
-function connectList() {
-  const det = detOf();
-  const out = [];
-  out.push(el('div', { style: 'padding:8px 14px 4px;font-size:11.5px;color:var(--muted-foreground);line-height:1.5' },
-    'Claude profiles and MCP connections. Workspace MCP — Jira, Confluence, Slack, Google Workspace — is only reachable on claude-work.'));
-
-  out.push(el('div', { style: LABEL7 }, 'claude profiles'));
-  const profs = profileList();
-  for (const x of profs) {
-    const r = selRow(det.kind === 'prof' && det.id === x.id);
-    const mcpLine = x.mcp.length ? 'mcp: ' + x.mcp.join(' · ') : 'mcp: none';
-    const mcpColor = x.mcp.length ? C.inf : C.mut;
-    out.push(el('button', {
-      onClick: () => setDetail({ kind: 'prof', id: x.id }), style: row8(r), hover: ROW_HOVER,
-    },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv(x.id)),
-        el('span', { style: 'margin-left:auto;font-size:10.5px;color:var(--muted-foreground)' }, iv(x.account))),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:' + mcpColor }, iv(mcpLine))));
-  }
-  if (!profs.length) out.push(emptyLine());
-
-  out.push(el('div', { style: LABEL9 }, 'connections · via claude-work'));
-  const conns = intgList();
-  for (const g of conns) {
-    const r = selRow(det.kind === 'intg' && det.id === g.id);
-    const st = g.st + ' · synced ' + ((state.intgSynced && state.intgSynced[g.id]) || g.synced);
-    out.push(el('button', {
-      onClick: () => setDetail({ kind: 'intg', id: g.id }), style: row8(r), hover: ROW_HOVER,
-    },
-      el('span', { style: 'display:flex;gap:8px;align-items:baseline' },
-        el('span', { style: 'flex:none;font-size:10px;color:var(--success)' }, '●'),
-        el('span', { style: 'font-family:var(--mono);font-size:12px' }, iv(g.name)),
-        el('span', { style: 'margin-left:auto;font-size:10.5px;color:var(--muted-foreground)' }, iv(g.scope))),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground);padding-left:18px' }, iv(st))));
-  }
-  // PMOS holds no credential and makes no outbound request (PRD, "External sync"). With nothing
-  // configured the panel says exactly that instead of listing a connection that does not exist.
-  if (!conns.length) {
-    out.push(el('div', { style: 'padding:5px 14px 6px;font-size:11px;color:var(--muted-foreground);font-style:italic' },
-      'no connector configured — nothing was read, and nothing will be written'));
-  }
-  return out;
-}
-
-/* ── memory (lines 303–320, derivation 1528–1540) ──────────────────────────────────────────── */
-
-function addMem() {
-  const MEM = memoryOf();
-  let n = 1; while (MEM.long.find((m) => m.id === 'ln' + n)) n++;
-  const m = { id: 'ln' + n, ...FX.NEW_MEMORY_NOTE };
-  setState({ memory: { ...MEM, long: [...MEM.long, m] } },
-    () => setDetail({ kind: 'mem', id: m.id, scope: 'long' }));
-}
-
-function memoryList() {
-  const det = detOf();
-  const MEM = memoryOf();
-  const rowOf = (m, scope) => ({
-    ...m, pin: m.pinned ? '⚑ pinned' : '',
-    ...selRow(det.kind === 'mem' && det.id === m.id),
-    on: () => setDetail({ kind: 'mem', id: m.id, scope }),
-  });
-
-  const out = [];
-  out.push(el('div', { style: 'padding:8px 14px 4px;font-size:11.5px;color:var(--muted-foreground);line-height:1.5' },
-    'Agent memory — short-term dies with the session; long-term survives and is injected into every run.'));
-
-  out.push(el('div', { style: LABEL7 }, 'short-term · session context'));
-  const shorts = MEM.short.map((m) => rowOf(m, 'short'));
-  for (const me of shorts) {
-    out.push(el('button', { onClick: me.on, style: row7(me), hover: ROW_HOVER },
-      el('span', { style: 'display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(me.text)),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' },
-        iv(me.src), ' · ', iv(me.ts))));
-  }
-  if (!shorts.length) out.push(emptyLine());
-
-  out.push(el('div', { style: LABEL9 }, 'long-term · durable'));
-  const longs = MEM.long.map((m) => rowOf(m, 'long'));
-  for (const me of longs) {
-    out.push(el('button', { onClick: me.on, style: row7(me), hover: ROW_HOVER },
-      el('span', { style: 'display:flex;gap:6px;align-items:baseline' },
-        el('span', { style: 'font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(me.text)),
-        el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--warning)' }, iv(me.pin))),
-      el('span', { style: 'display:block;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(me.src))));
-  }
-  if (!longs.length) out.push(emptyLine());
-  out.push(el('button', { onClick: addMem, style: ACTION_BTN, hover: ACTION_HOVER }, '＋ add a long-term note'));
-  return out;
-}
-
-/* ══════════════════════════════════════════════════════════════════════════════════════════════
- *  PANEL 3 — one body per secondary detail kind (template lines 450–663, 771–835)
- * ════════════════════════════════════════════════════════════════════════════════════════════ */
-
-/* ── `dFlow` (lines 450–489, derivation 1809–1833) ─────────────────────────────────────────── */
-
-function flowBody(det) {
-  const map = flowsMap();
-  const use = flowUse();
-  let fd = { name: '', used: '', stages: [], usedBy: [], unused: false, canDelete: false, noDelete: false, onDelete: () => {}, onNewStage: () => {} };
-  if (map[det.id]) {
-    const name = det.id, stages = map[det.id], ub = use[name] || [];
-    const setStages = (st2) => setState({ flowsMap: { ...map, [name]: st2 } });
-    fd = {
-      name, used: ub.length + ' initiatives use it',
-      stages: stages.map((k, idx) => ({
-        n: String(idx + 1).padStart(2, '0'), k,
-        onUp: () => {
-          if (idx === 0) return;
-          const s2 = [...stages];
-          const tmp = s2[idx - 1]; s2[idx - 1] = s2[idx]; s2[idx] = tmp;
-          setStages(s2);
-        },
-        onDel: () => setStages(stages.filter((_, j) => j !== idx)),
-      })),
-      onNewStage: (e) => {
-        if (e.key !== 'Enter') return;
-        const v = e.target.value.trim().toLowerCase().replace(/\s+/g, '-');
-        if (!v) return;
-        e.target.value = '';
-        setStages([...stages, v]);
-      },
-      usedBy: ub.map((slug) => ({ slug, on: () => setState({ sel: slug, mode: 'product', detail: { kind: 'init' }, col2: true }) })),
-      unused: ub.length === 0,
-      canDelete: ub.length === 0, noDelete: ub.length > 0,
-      onDelete: () => {
-        const m2 = { ...map }; delete m2[det.id];
-        setState({ flowsMap: m2, detail: { kind: 'init' } });
-      },
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: HEAD_NAME }, iv(fd.name)),
-    el('div', { style: HEAD_SUB }, 'workflow template · ', iv(fd.used))));
-  out.push(el('div', { style: SECTION_LABEL }, 'stages'));
-  out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:4px 14px 6px' },
-    fd.stages.map((fs) => el('div', { style: 'display:flex;gap:9px;align-items:center;min-height:34px;padding:0 8px;background:var(--background);border:1px solid var(--border)' },
-      el('span', { style: 'flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(fs.n)),
-      el('span', { style: 'font-family:var(--mono);font-size:11.5px;letter-spacing:.06em' }, iv(fs.k)),
-      el('button', { onClick: fs.onUp, style: 'margin-left:auto;color:var(--muted-foreground);padding:3px 5px;font-size:11px', hover: 'color:var(--foreground)' }, '↑'),
-      el('button', { onClick: fs.onDel, style: 'color:var(--muted-foreground);padding:3px 5px;font-size:12px', hover: 'color:var(--destructive)' }, '×')))));
-  out.push(el('div', { style: 'display:flex;gap:6px;padding:2px 14px 10px' },
-    el('input', {
-      onKeyDown: fd.onNewStage, placeholder: 'new stage — Enter to add',
-      style: 'flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;padding:6px 9px;border:1px dashed var(--input);min-height:32px',
-    })));
-  out.push(el('div', { style: 'border-top:1px solid var(--border);display:grid;grid-template-columns:76px 1fr;gap:10px;padding:8px 14px' },
-    el('span', { style: fieldLabel(2) }, 'used by'),
-    el('div', { style: 'display:flex;flex-direction:column;gap:2px;min-width:0' },
-      fd.usedBy.map((ub) => el('button', {
-        onClick: ub.on, style: 'font-family:var(--mono);font-size:11px;color:var(--brand);padding:3px 0;min-height:26px', hover: 'color:var(--foreground)',
-      }, iv(ub.slug))),
-      fd.unused && el('span', { style: ITALIC_EMPTY }, 'no initiatives use this yet'))));
-  out.push(el('div', { style: 'padding:10px 14px;border-top:1px solid var(--border)' },
-    fd.canDelete && el('button', { onClick: fd.onDelete, style: DESTRUCTIVE_BTN, hover: DESTRUCTIVE_HOVER }, 'delete workflow'),
-    fd.noDelete && el('span', { style: ITALIC_EMPTY }, 'in use — reassign its initiatives before deleting')));
-  out.push(el('div', { style: FOOTER }, 'planning/workflows/', iv(fd.name), '.yaml · edits apply to new ladders'));
-  return out;
-}
-
-/* ── `dSched` (lines 491–537, derivation 1835–1855) ────────────────────────────────────────── */
-
-function schedBody(det) {
-  const list = schedList();
-  let sd = { name: '', when: '', runCmd: '', scope: '', enabledLabel: '', toggleLabel: '', log: [], profBtns: [], profNote: '', onWhen: () => {}, onRunCmd: () => {}, onScope: () => {}, onRun: () => {}, onToggle: () => {}, onDelete: () => {} };
-  const t = list.find((x) => x.name === det.id);
-  if (t) {
-    const save = (t2) => setState({ schedList: list.map((x) => (x.name === det.id ? t2 : x)) });
-    const prof = t.profile || 'claude-work';
-    sd = {
-      name: t.name, when: t.when, runCmd: t.runCmd || '', scope: t.scope || '',
-      enabledLabel: t.enabled ? 'enabled' : 'disabled',
-      profBtns: profChips(prof, (id) => save({ ...t, profile: id })),
-      profNote: prof === 'claude-work'
-        ? 'runs with workspace MCP — can read Jira and Confluence'
-        : 'runs without workspace MCP — local files only',
-      toggleLabel: t.enabled ? '‖ disable' : '▷ enable',
-      log: (t.log || []).length ? t.log : [{ ...FX.SCHED_NEVER_RUN }],
-      onWhen: (e) => save({ ...t, when: e.target.value }),
-      onRunCmd: (e) => save({ ...t, runCmd: e.target.value }),
-      onScope: (e) => save({ ...t, scope: e.target.value }),
-      /* The green "ok — ran … 0 failures" line is the FIXTURE's seed log. In real mode nothing
-       * executes on this press — no runner is wired to this surface — so writing it there would be
-       * a fabricated execution success (the watermelon the honesty contract forbids). The real-mode
-       * line says exactly what happened: nothing. */
-      onRun: () => save({
-        ...t,
-        log: [FIXTURE ? {
-          ts: '12:41 today',
-          t: t.runCmd ? 'ok — ran `' + t.runCmd + '` manually, 0 failures' : 'nothing ran — no command defined yet',
-          c: t.runCmd ? 'var(--success)' : 'var(--warning)',
-        } : {
-          ts: '—',
-          t: 'nothing ran — no runner is wired to this surface yet',
-          c: 'var(--warning)',
-        }, ...(t.log || [])],
-      }),
-      onToggle: () => save({ ...t, enabled: !t.enabled }),
-      onDelete: () => setState({ schedList: list.filter((x) => x.name !== det.id), detail: { kind: 'init' } }),
-    };
-  }
-
-  const INPUT = 'font-family:var(--mono);font-size:11.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px';
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: HEAD_NAME }, iv(sd.name)),
-    el('div', { style: HEAD_SUB }, 'scheduled task · ', iv(sd.enabledLabel))));
-  out.push(el('div', { style: FIELD_ROW10 },
-    el('span', { style: fieldLabel(8) }, 'cadence'),
-    el('input', { onChange: sd.onWhen, value: sd.when, style: INPUT })));
-  out.push(el('div', { style: FIELD_ROW10 },
-    el('span', { style: fieldLabel(8) }, 'runs'),
-    el('div', { style: 'min-width:0' },
-      el('input', { onChange: sd.onRunCmd, value: sd.runCmd, placeholder: 'pmos run <skill> …', style: 'width:100%;' + INPUT }),
-      el('div', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:4px' },
-        'the command this task executes on schedule — any pmos skill or shell command'))));
-  out.push(el('div', { style: FIELD_ROW10 },
-    el('span', { style: fieldLabel(8) }, 'scope'),
-    el('input', { onChange: sd.onScope, value: sd.scope, placeholder: 'all initiatives, or a slug', style: INPUT })));
-  out.push(el('div', { style: FIELD_ROW10 },
-    el('span', { style: fieldLabel(8) }, 'profile'),
-    el('div', { style: 'min-width:0' },
-      el('div', { style: 'display:flex;gap:4px' }, sd.profBtns.map(profChipNode)),
-      el('div', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:4px;line-height:1.5' }, iv(sd.profNote)))));
-  out.push(el('div', { style: 'display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border)' },
-    el('button', { onClick: sd.onRun, style: BRAND_BTN }, '▶ run now'),
-    el('button', { onClick: sd.onToggle, style: SEC_BTN, hover: ACTION_HOVER }, iv(sd.toggleLabel)),
-    el('button', { onClick: sd.onDelete, style: 'margin-left:auto;' + DESTRUCTIVE_BTN, hover: DESTRUCTIVE_HOVER }, 'delete')));
-  out.push(el('div', { style: SECTION_LABEL }, 'run log'));
-  out.push(el('div', { style: 'display:flex;flex-direction:column;padding:4px 14px 12px' },
-    sd.log.map((lg) => el('div', { style: 'display:flex;gap:9px;align-items:baseline;padding:5px 0;border-bottom:1px solid oklch(1 0 0 / 5%)' },
-      el('span', { style: 'flex:none;font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)' }, iv(lg.ts)),
-      el('span', { style: 'font-size:12px;color:' + lg.c }, iv(lg.t))))));
-  out.push(el('div', { style: FOOTER }, 'planning/scheduled/', iv(sd.name), '.yaml'));
-  return out;
-}
-
-/* ── `dSkill` (lines 539–561, derivation 1857–1868) ────────────────────────────────────────── */
-
-function skillBody(det) {
-  const selSlug = selectedSlug();
-  let kd = { name: '', d: '', reads: '', writes: '', usedIn: '', onRun: () => {}, onOpen: () => {} };
-  const sk = skillList().find((x) => x.name === det.id);
-  if (sk) {
-    kd = {
-      ...sk,
-      onRun: () => startSession(selSlug, { name: sk.name + ' run', st: 'working', label: 'working' }),
-      onOpen: () => openDoc(null, 'skills/' + sk.name + '/SKILL.md', 'SKILL'),
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: HEAD_NAME }, iv(kd.name)),
-    el('div', { style: HEAD_SUB }, 'skill · ', iv(kd.d))));
-  const wrap = 'font-family:var(--mono);font-size:11px;color:var(--muted-foreground);overflow-wrap:anywhere';
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'reads'), el('span', { style: wrap }, iv(kd.reads))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'writes'), el('span', { style: wrap }, iv(kd.writes))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'used in'),
-    el('span', { style: 'font-size:12px;color:var(--muted-foreground)' }, iv(kd.usedIn))));
-  out.push(el('div', { style: 'display:flex;gap:6px;padding:12px 14px' },
-    el('button', { onClick: kd.onRun, style: BRAND_BTN }, '▶ run in a session'),
-    el('button', { onClick: kd.onOpen, style: SEC_BTN, hover: ACTION_HOVER }, 'open definition')));
-  out.push(el('div', { style: FOOTER }, 'skills/', iv(kd.name), '/SKILL.md'));
-  return out;
-}
-
-/* ── `dKnow` (lines 563–589, derivation 1870–1882) ─────────────────────────────────────────── */
-
-function knowBody(det) {
-  const KNOW = knowMap();
-  let nd = { id: '', d: '', badge: '', badgeColor: C.mut, idColor: C.brand, body: '', rels: [], noRels: false, path: '', onOpen: () => {} };
-  if (KNOW[det.id]) {
-    const k = KNOW[det.id];
-    nd = {
-      id: det.id, d: k.d, badge: k.badge,
-      badgeColor: k.badge === 'active' ? C.suc : C.wrn,
-      idColor: k.badge === 'superseded' ? 'var(--muted-foreground)' : 'var(--brand)',
-      body: k.body, path: k.path,
-      rels: (k.rels || []).map(([kind, id2]) => ({
-        kind, id: id2, d: KNOW[id2] ? KNOW[id2].d : '',
-        on: () => setDetail({ kind: 'know', id: id2 }),
-      })),
-      noRels: (k.rels || []).length === 0,
-      onOpen: () => openDoc(null, k.path, 'DECISION'),
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: 'display:flex;gap:9px;align-items:baseline' },
-      el('span', { style: 'font-family:var(--mono);font-size:15px;font-weight:600;color:' + nd.idColor }, iv(nd.id)),
-      el('span', { style: PILL + ';color:' + nd.badgeColor }, iv(nd.badge))),
-    el('div', { style: HEAD_SUB }, iv(nd.d))));
-  out.push(el('div', { style: 'padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;line-height:1.55' }, iv(nd.body)));
-  out.push(el('div', { style: SECTION_LABEL }, 'relationships'));
-  out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:4px 14px 10px' },
-    nd.rels.map((rl) => el('button', {
-      onClick: rl.on,
-      style: 'display:flex;gap:9px;align-items:center;min-height:34px;padding:0 9px;background:var(--background);border:1px solid var(--border)',
-      hover: ACTION_HOVER,
-    },
-      el('span', { style: 'flex:none;width:86px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, iv(rl.kind)),
-      el('span', { style: 'font-family:var(--mono);font-size:11.5px;color:var(--brand)' }, iv(rl.id)),
-      el('span', { style: 'font-size:11px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(rl.d)))),
-    nd.noRels && el('span', { style: ITALIC_EMPTY }, 'stands alone — no linked decisions')));
-  out.push(el('div', { style: 'padding:2px 14px 12px' },
-    el('button', { onClick: nd.onOpen, style: SEC_BTN, hover: ACTION_HOVER }, 'open file')));
-  out.push(el('div', { style: FOOTER }, iv(nd.path)));
-  return out;
-}
-
-/* ── `dAgent` (lines 591–642, derivation 1884–1907) ────────────────────────────────────────── */
-
-function agentBody(det) {
-  const list = agentList();
-  const MEM = memoryOf();
-  const selSlug = selectedSlug();
-  let ad = { name: '', role: '', model: '', st: '', c: C.mut, sessions: [], noSess: false, memLine: '', toggleLabel: '', profBtns: [], profNote: '', onToggle: () => {}, onStart: () => {}, onMem: () => {} };
-  const a = list.find((x) => x.name === det.id);
-  if (a) {
-    const sessions = a.sessions || [];
-    const working = sessions.filter((s) => s.st === 'working' || s.st === 'needs').length;
-    const prof = a.profile || 'claude-work';
-    ad = {
-      name: a.name, role: a.role, model: a.model,
-      profBtns: profChips(prof, (id) => setState({ agentList: list.map((x) => (x.name === a.name ? { ...x, profile: id } : x)) })),
-      profNote: prof === 'claude-work'
-        ? 'claude-work — this agent reaches Jira, Confluence, Slack, Google Workspace over MCP'
-        : 'claude-personal — no workspace MCP; this agent cannot touch Jira or Confluence',
-      st: a.paused ? 'paused — takes no new work' : (working ? working + ' sessions working' : 'idle'),
-      c: a.paused ? C.mut : (working ? C.suc : C.mut),
-      sessions: sessions.map((s) => {
-        const dot = FX.SDOT[s.st] || FX.SDOT.exited;
-        return {
-          name: s.name, slug: s.slug, dot: dot[0], color: dot[1],
-          on: () => openTerm(s.slug, { name: s.name, st: s.st }),
-        };
-      }),
-      noSess: sessions.length === 0,
-      memLine: MEM.short.length + ' short-term entries · ' + MEM.long.length + ' long-term',
-      toggleLabel: a.paused ? '▷ resume' : '‖ pause',
-      onToggle: () => setState({ agentList: list.map((x) => (x.name === a.name ? { ...x, paused: !x.paused } : x)) }),
-      onStart: () => {
-        const s2 = { name: a.name + ' session', slug: selSlug, st: 'working', profile: prof };
-        setState(
-          { agentList: list.map((x) => (x.name === a.name ? { ...x, sessions: [...(x.sessions || []), s2] } : x)) },
-          () => openTerm(selSlug, { name: s2.name, st: 'working' }),
-        );
-      },
-      onMem: () => setState({ mode: 'memory' }),
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: 'display:flex;gap:9px;align-items:baseline' },
-      el('span', { style: 'flex:none;font-size:10px;color:' + ad.c }, '●'),
-      el('span', { style: HEAD_NAME }, iv(ad.name)),
-      el('span', { style: 'margin-left:auto;' + PILL + ';color:var(--muted-foreground)' }, iv(ad.role))),
-    el('div', { style: HEAD_SUB }, iv(ad.st))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'model'),
-    el('span', { style: 'font-family:var(--mono);font-size:11.5px' }, iv(ad.model))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'profile'),
-    el('div', { style: 'min-width:0' },
-      el('div', { style: 'display:flex;gap:4px' }, ad.profBtns.map(profChipNode)),
-      el('div', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:4px;line-height:1.5' }, iv(ad.profNote)))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'sessions'),
-    el('div', { style: 'display:flex;flex-direction:column;gap:2px;min-width:0' },
-      ad.sessions.map((s) => el('button', {
-        onClick: s.on, style: 'display:flex;gap:8px;align-items:center;padding:5px 6px;margin:0 -6px;min-height:34px', hover: ROW_HOVER,
-      },
-        el('span', { style: 'flex:none;font-size:10px;color:' + s.color }, iv(s.dot)),
-        el('span', { style: 'font-size:12.5px' }, iv(s.name)),
-        el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(s.slug)))),
-      ad.noSess && el('span', { style: ITALIC_EMPTY }, 'no sessions attached'))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'memory'),
-    el('div', { style: 'min-width:0' },
-      el('div', { style: 'font-size:12px;color:var(--muted-foreground)' }, iv(ad.memLine)),
-      el('button', {
-        onClick: ad.onMem,
-        style: 'margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--brand);padding:2px 0;min-height:24px',
-        hover: 'color:var(--foreground)',
-      }, 'open memory →'))));
-  out.push(el('div', { style: 'display:flex;gap:6px;padding:12px 14px' },
-    el('button', { onClick: ad.onToggle, style: SEC_BTN, hover: ACTION_HOVER }, iv(ad.toggleLabel)),
-    el('button', { onClick: ad.onStart, style: BRAND_BTN }, '▶ new session')));
-  out.push(el('div', { style: FOOTER }, 'agents/', iv(ad.name), '.yaml'));
-  return out;
-}
-
-/* ── `dMem` (lines 644–663, derivation 1909–1935) ──────────────────────────────────────────── */
-
-function memBody(det) {
-  const MEM = memoryOf();
-  let md = { scope: '', scopeColor: C.inf, src: '', text: '', note: '', canPromote: false, canPin: false, pinLabel: '', path: '', onPromote: () => {}, onPin: () => {}, onForget: () => {} };
-  const list = det.scope === 'short' ? MEM.short : MEM.long;
-  const m = list.find((x) => x.id === det.id);
-  if (m) {
-    md = {
-      scope: det.scope === 'short' ? 'short-term' : 'long-term',
-      scopeColor: det.scope === 'short' ? C.inf : C.suc,
-      src: m.src + (m.ts ? ' · ' + m.ts : ''), text: m.text,
-      note: det.scope === 'short'
-        ? 'Dies when its session exits. Promote it to keep it — the agent will see it in every future run.'
-        : 'Injected into every agent run. Pinned entries survive compaction; unpinned ones may be summarized away.',
-      canPromote: det.scope === 'short', canPin: det.scope === 'long',
-      pinLabel: m.pinned ? '⚑ unpin' : '⚑ pin',
-      path: det.scope === 'short' ? 'runtime — session context' : 'memory/long-term.jsonl',
-      onPromote: () => {
-        const nm = { id: 'p' + m.id, text: m.text, src: 'promoted just now', pinned: false };
-        setState({ memory: { short: MEM.short.filter((x) => x.id !== m.id), long: [...MEM.long, nm] } },
-          () => setDetail({ kind: 'mem', id: nm.id, scope: 'long' }));
-      },
-      onPin: () => setState({ memory: { ...MEM, long: MEM.long.map((x) => (x.id === m.id ? { ...x, pinned: !x.pinned } : x)) } }),
-      onForget: () => setState({
-        memory: det.scope === 'short'
-          ? { ...MEM, short: MEM.short.filter((x) => x.id !== m.id) }
-          : { ...MEM, long: MEM.long.filter((x) => x.id !== m.id) },
-        detail: { kind: 'init' },
-      }),
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: 'display:flex;gap:8px;align-items:baseline' },
-      el('span', { style: PILL + ';color:' + md.scopeColor }, iv(md.scope)),
-      el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(md.src)))));
-  out.push(el('div', { style: 'padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;line-height:1.55' }, iv(md.text)));
-  out.push(el('div', { style: 'padding:10px 14px;font-size:11.5px;line-height:1.55;color:var(--muted-foreground)' }, iv(md.note)));
-  out.push(el('div', { style: 'display:flex;gap:6px;padding:2px 14px 12px;flex-wrap:wrap' },
-    md.canPromote && el('button', { onClick: md.onPromote, style: BRAND_BTN }, '↥ promote to long-term'),
-    md.canPin && el('button', { onClick: md.onPin, style: SEC_BTN, hover: ACTION_HOVER }, iv(md.pinLabel)),
-    el('button', { onClick: md.onForget, style: DESTRUCTIVE_BTN, hover: DESTRUCTIVE_HOVER }, 'forget')));
-  out.push(el('div', { style: FOOTER }, iv(md.path)));
-  return out;
-}
-
-/* ── `dProf` (lines 771–800, derivation 1937–1946) ─────────────────────────────────────────── */
+/** The registered profiles: the live data layer's, else (fixture mode only) the seed's. */
+const profileList = () => state.profiles || (FIXTURE ? FX.PROFILES : []);
 
 function profBody(det) {
-  let pf = { id: '', account: '', mcp: [], noMcp: false, usedBy: [], unused: false, note: '' };
+  let pf = { id: '', account: '', mcp: [], noMcp: false, note: '' };
   const x = profileList().find((z) => z.id === det.id);
-  if (x) {
-    const usedBy = [
-      ...agentList().filter((a) => (a.profile || 'claude-work') === x.id).map((a) => ({ t: a.name, k: 'agent' })),
-      ...schedList().filter((t) => (t.profile || 'claude-work') === x.id).map((t) => ({ t: t.name, k: 'scheduled task' })),
-    ];
-    pf = { ...x, noMcp: x.mcp.length === 0, usedBy, unused: usedBy.length === 0 };
-  }
+  if (x) pf = { ...x, noMcp: x.mcp.length === 0 };
 
   const out = [];
   out.push(el('div', { style: HEAD_BLOCK },
@@ -970,116 +58,36 @@ function profBody(det) {
     el('div', { style: 'display:flex;gap:4px;flex-wrap:wrap;min-width:0' },
       pf.mcp.map((mc) => el('span', { style: PILL + ';color:var(--info)' }, iv(mc))),
       pf.noMcp && el('span', { style: ITALIC_EMPTY }, 'none — workspace MCP unavailable on this profile'))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'used by'),
-    el('div', { style: 'display:flex;flex-direction:column;gap:2px;min-width:0' },
-      pf.usedBy.map((ub) => el('span', { style: 'font-size:12px' },
-        el('span', { style: 'font-family:var(--mono)' }, iv(ub.t)),
-        ' ',
-        el('span', { style: 'color:var(--muted-foreground)' }, '· ', iv(ub.k)))),
-      pf.unused && el('span', { style: ITALIC_EMPTY }, 'nothing runs on this profile right now'))));
   out.push(el('div', { style: 'padding:10px 14px;font-size:11.5px;line-height:1.55;color:var(--muted-foreground)' }, iv(pf.note)));
   out.push(el('div', { style: FOOTER }, '~/.claude/profiles/', iv(pf.id), '.json'));
   return out;
 }
 
-/* ── `dIntg` (lines 802–835, derivation 1948–1961) ─────────────────────────────────────────── */
-
-function intgBody(det) {
-  let ig = { id: '', name: '', scope: '', st: '', synced: '', does: '', hasPreview: false, previewLabel: '', onPreview: () => {}, onSync: () => {} };
-  const x = intgList().find((z) => z.id === det.id);
-  if (x) {
-    const pv = FX.INTG_PREVIEWS[x.id];
-    ig = {
-      ...x,
-      synced: (state.intgSynced && state.intgSynced[x.id]) || x.synced,
-      hasPreview: !!pv, previewLabel: pv ? pv[1] : '',
-      onPreview: () => { if (pv) openDoc(null, pv[0], x.name.toUpperCase()); },
-      onSync: () => setState((s) => ({ intgSynced: { ...s.intgSynced, [x.id]: '12:41 today' } })),
-    };
-  }
-
-  const out = [];
-  out.push(el('div', { style: HEAD_BLOCK },
-    el('div', { style: 'display:flex;gap:9px;align-items:baseline' },
-      el('span', { style: 'flex:none;font-size:10px;color:var(--success)' }, '●'),
-      el('span', { style: HEAD_NAME }, iv(ig.name)),
-      el('span', { style: 'margin-left:auto;' + PILL + ';color:var(--success)' }, iv(ig.st))),
-    el('div', { style: HEAD_SUB }, iv(ig.scope))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'profile'),
-    el('div', { style: 'min-width:0' },
-      el('span', { style: 'font-family:var(--mono);font-size:11.5px' }, 'claude-work'),
-      el('div', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:2px;line-height:1.5' },
-        'the MCP server runs under claude-work — sessions on claude-personal cannot see it'))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'synced'),
-    el('div', { style: 'display:flex;gap:8px;align-items:center;min-width:0' },
-      el('span', { style: 'font-family:var(--mono);font-size:11.5px' }, iv(ig.synced)),
-      el('button', {
-        onClick: ig.onSync,
-        style: 'font-family:var(--mono);font-size:10.5px;padding:4px 10px;min-height:26px;background:var(--secondary);border:1px solid var(--border)',
-        hover: ACTION_HOVER,
-      }, '⟳ sync now'))));
-  out.push(el('div', { style: FIELD_ROW },
-    el('span', { style: fieldLabel(2) }, 'syncs'),
-    el('span', { style: 'font-size:12px;line-height:1.55;color:var(--muted-foreground)' }, iv(ig.does))));
-  if (ig.hasPreview) {
-    out.push(el('div', { style: 'padding:12px 14px' },
-      el('button', { onClick: ig.onPreview, style: SEC_BTN, hover: ACTION_HOVER }, iv(ig.previewLabel))));
-  }
-  out.push(el('div', { style: FOOTER }, 'mcp/', iv(ig.id), '.json · via claude-work'));
-  return out;
-}
-
-/* ══════════════════════════════════════════════════════════════════════════════════════════════
- *  the two entry points
- * ════════════════════════════════════════════════════════════════════════════════════════════ */
+/* ═════════════════════════════════════════════════════════════════════════════════════════════
+ *  the entry points
+ * ═════════════════════════════════════════════════════════════════════════════════════════════ */
 
 const LISTS = {
-  focus: focusList,
-  // overhaul-r4: in live mode these three render their server routes; the fixture keeps the prototype's
-  scheduled: () => (FIXTURE ? scheduledList() : LIVE.scheduledLive()),
-  workflow: workflowList,
-  skills: () => (FIXTURE ? skillsList() : LIVE.skillsLive()),
-  knowledge: () => (FIXTURE ? knowledgeList() : LIVE.knowledgeLive()),
-  portfolio: () => (FIXTURE ? [] : LIVE.portfolioList()),
-  guide: () => (FIXTURE ? [] : LIVE.guideList()),
+  // live mode only: the Validate page's list. The fixture has none.
   validate: () => (FIXTURE ? [] : LIVE.validateList()),
-  today: () => (FIXTURE ? [] : LIVE.todayList()),
-  agent: agentsList,
-  connect: connectList,
-  memory: () => (FIXTURE ? memoryList() : LIVE.memoryLive()),
 };
 
 const BODIES = {
-  flow: flowBody,
-  sched: schedBody,
-  skill: (det) => (FIXTURE ? skillBody(det) : LIVE.skillDetailLive(det)),
-  know: knowBody,
-  agent: agentBody,
-  mem: memBody,
   prof: profBody,
-  intg: intgBody,
 };
 
-/* WHERE EACH THING OPENS (column-layout). A list or a directory (memory, skills, knowledge, scheduled tasks, focus,
- * portfolio, the guide, the initiatives themselves) is drawn in the navigation column, under the repository list. A
- * detail (an initiative, a skill, a schedule, a memory item) is drawn in the detail column. This table is the rule;
- * a mode or a detail kind that is not in it is a failing test, so a new one has to say which column it opens in. */
+/* WHERE EACH THING OPENS. A list (the initiatives, the Validate page) is drawn in the navigation column; a detail (an
+ * initiative, a profile) is drawn in the detail column. This table is the rule; a mode or a detail kind that is not in
+ * it is a failing test, so a new one has to say which column it opens in. */
 export const MODE_PLACE = {
-  lists: { product: 'navigation', focus: 'navigation', scheduled: 'navigation', workflow: 'navigation', skills: 'navigation',
-    knowledge: 'navigation', portfolio: 'navigation', guide: 'navigation', validate: 'navigation', today: 'navigation', agent: 'navigation', connect: 'navigation', memory: 'navigation' },
-  details: { init: 'detail', flow: 'detail', sched: 'detail', skill: 'detail', know: 'detail', agent: 'detail', mem: 'detail',
-    prof: 'detail', intg: 'detail', addprod: 'detail', bind: 'detail', new: 'detail', none: 'detail' },
+  lists: { product: 'navigation', validate: 'navigation' },
+  details: { init: 'detail', prof: 'detail', addprod: 'detail', bind: 'detail', new: 'detail', none: 'detail' },
 };
-/* WHAT A ROW IN EACH LIST OPENS, as the live app does it today. An initiative (from the board, the portfolio or the focus
- * queue) opens in the detail column. A file-like row (a skill, a knowledge note, a guide page) opens in a TAB, like any
- * other document, so it can sit beside a terminal. A schedule and a memory entry are acted on inside the list itself. */
+/* WHAT A ROW IN EACH LIST OPENS. An initiative opens in the detail column; the Validate page opens in a tab, like any other
+ * document, so it can sit beside a terminal. */
 export const ROW_OPENS = {
-  product: 'detail', portfolio: 'detail', focus: 'detail',
-  skills: 'tab', knowledge: 'tab', guide: 'tab', validate: 'tab',
-  scheduled: 'list', memory: 'list', today: 'list',
+  product: 'detail',
+  validate: 'tab',
 };
 /** The column a list mode opens in: always `navigation`. `null` for a mode this table does not know. */
 export const placeOfMode = (mode) => MODE_PLACE.lists[mode] || null;