create-pmos 0.15.0 → 0.16.0

package/workspace/public/pm/modes.js

@@ -0,0 +1,1076 @@
+/* pm/modes.js — the seven secondary modes behind panel 1's "settings & tools" drawer.
+ *
+ * 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.
+ *
+ * ── What "mode" means here ──────────────────────────────────────────────────────────────────
+ * `state.mode` switches panels 2 AND 3 together. The drawer offers exactly seven:
+ *
+ *     this repository   agent · memory · knowledge
+ *     all repositories  focus · skills · connect · scheduled
+ *
+ * `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.
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import * as FX from './fixture.js';
+import { openDoc, openTerm } from './panel-initiatives.js';
+
+/* ── 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 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';
+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 ────────────────────────────────────────── */
+
+const boardOf = () =>
+  (state.board && typeof state.board === 'object' ? state.board : (FIXTURE ? FX.ALLGROUPS : {}));
+
+function records() {
+  const base = state.records && typeof state.records === 'object'
+    ? state.records
+    : (FIXTURE ? FX.DATA : {});
+  return { ...base, ...state.userInits };
+}
+
+function currentProduct() {
+  if (state.product) return state.product;
+  const keys = Object.keys(boardOf());
+  return keys.length ? keys[0] : 'workspace';
+}
+
+/** 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` ({first, waiting, syn}); 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 live = FIXTURE || !!state.focus;
+  const first = (F.first || []).map(fRow);
+  const waiting = (F.waiting || []).map(fRow);
+  const MEM = memoryOf();
+
+  const syn = (F.syn || []).map((f) => ({
+    ...f,
+    on: () => {
+      if (f.action === 'delegate-billing-stories') {
+        const d = FX.DELEGATE_SESSION;
+        startSession(d.slug, { ...d.sess });
+      }
+    },
+  }));
+
+  const saw = live ? FX.focusSaw(MEM).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);
+
+  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(emptyLine());
+
+  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))));
+  }
+  if (!waiting.length) out.push(emptyLine());
+
+  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(emptyLine());
+
+  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(emptyLine());
+  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 }),
+      onRun: () => save({
+        ...t,
+        log: [{
+          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)',
+        }, ...(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) ─────────────────────────────────────────── */
+
+function profBody(det) {
+  let pf = { id: '', account: '', mcp: [], noMcp: false, usedBy: [], unused: 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 };
+  }
+
+  const out = [];
+  out.push(el('div', { style: HEAD_BLOCK },
+    el('div', { style: HEAD_NAME }, iv(pf.id)),
+    el('div', { style: HEAD_SUB }, 'claude profile · ', iv(pf.account))));
+  out.push(el('div', { style: FIELD_ROW },
+    el('span', { style: fieldLabel(2) }, 'mcp'),
+    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
+ * ════════════════════════════════════════════════════════════════════════════════════════════ */
+
+const LISTS = {
+  focus: focusList,
+  scheduled: scheduledList,
+  workflow: workflowList,
+  skills: skillsList,
+  knowledge: knowledgeList,
+  agent: agentsList,
+  connect: connectList,
+  memory: memoryList,
+};
+
+const BODIES = {
+  flow: flowBody,
+  sched: schedBody,
+  skill: skillBody,
+  know: knowBody,
+  agent: agentBody,
+  mem: memBody,
+  prof: profBody,
+  intg: intgBody,
+};
+
+/** Is `mode` one this module renders? `product` belongs to panel-initiatives.js. */
+export function hasMode(mode) {
+  return Object.prototype.hasOwnProperty.call(LISTS, mode);
+}
+
+/** Is `kind` a detail body this module owns? */
+export function hasDetail(kind) {
+  return Object.prototype.hasOwnProperty.call(BODIES, kind);
+}
+
+/**
+ * Panel 3's body for a secondary detail kind — the nodes that go BELOW panel-detail.js's sticky
+ * header. An unknown kind returns null so the caller can fall back to its own empty copy.
+ */
+export function detailBody(kind, detail) {
+  const fn = BODIES[kind];
+  if (!fn) return null;
+  return fn(detail || detOf());
+}
+
+/**
+ * Panel 2's body for `mode`, appended to `hostList` below the header and the search box that
+ * panel-initiatives.js has already put there. `hostDetail`, when given, is filled with the
+ * matching detail body; it is normally null because panel 3 paints itself.
+ */
+export function renderMode(hostList, hostDetail, mode) {
+  const m = mode || state.mode || 'product';
+  const fn = LISTS[m];
+  if (hostList && fn) for (const node of fn()) if (node) hostList.appendChild(node);
+
+  if (hostDetail) {
+    const kind = (state.detail && state.detail.kind) || 'init';
+    const body = detailBody(kind, state.detail);
+    setChildren(hostDetail, body || []);
+  }
+  return hostList;
+}
+
+export default renderMode;