create-pmos 0.15.0 → 0.16.0

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

@@ -0,0 +1,648 @@
+/* pm/panel-detail.js — panel 3, the initiative detail.
+ *
+ * A PORT of the prototype's column 2 (template lines 330–448 for the `dInit` branch, derivation
+ * lines 1699–1806). Every inline `style` string below is copied from that file character for
+ * character and every literal string is the prototype's literal. The acceptance bar for this
+ * surface is a mechanical diff of text, computed style and geometry, so a re-worded label or a
+ * "tidied" padding is a defect, not an improvement.
+ *
+ * ── What this panel is ──────────────────────────────────────────────────────────────────────
+ * Panel 3 answers one question about one initiative: what is the state of the work, and what can
+ * I open? Top to bottom: the slug + tag + pills header, the TASK PHASES (collapsible, each phase's
+ * status derived from its own tasks), LINKS (external references that are deliberately NOT repo
+ * files), ARTIFACTS (repo files, each optionally linked to an external destination with a
+ * repo-is-source sync panel), and the derived footer line.
+ *
+ * ── Two structural facts the port has to honour ─────────────────────────────────────────────
+ *
+ * 1. INTERPOLATIONS ARE WRAPPED. The prototype's runtime renders every `{{ expr }}` as a
+ *    `<span>` INSIDE the styled element, while literal template text stays a bare text node. The
+ *    comparator indexes nodes by their own text and then diffs computed style and geometry, so a
+ *    value placed directly on the styled element would be measured as a different box. `iv()`
+ *    reproduces the wrapper; bare text is used exactly where the template has bare text — `＋`,
+ *    `⇄`, `·`, `→ repo`, `adopt`, `link`, `next`, the note lines and the two headings.
+ *
+ * 2. NOTHING DERIVABLE IS STORED (D33). Phases, task statuses, phase counts, the active-row
+ *    highlight, link lists and the footer line are all computed at read time, every render, from
+ *    the initiative record plus the four state maps the prototype keeps (`collapsedPhases`,
+ *    `initLinks`, `artLinks`, `artSyncOpen`/`artSyncState`). A cached phase status is a board that
+ *    lies the moment a task moves.
+ *
+ * ── Where the data comes from ───────────────────────────────────────────────────────────────
+ * Fixture mode reads `fixture.js` directly. Normal mode is the same code path with the optional
+ * overrides the data layer publishes into state — `state.records` ({slug: record}) and
+ * `state.board` ({repoId: group[]}). In normal mode the seed data is NEVER reachable: fixture rows
+ * rendering in the real app is "the beautiful shell" the PRD names as a failure mode.
+ *
+ * ── The one place the design's fiction is refused ────────────────────────────────────────────
+ * The artifact sync panel renders exactly as designed — the repo-is-source statement, the
+ * difference summary, the two approvals. In FIXTURE mode the summary is the prototype's copy
+ * verbatim. In real mode with no connector configured it says so, and the two approval buttons are
+ * inert, because a panel that reported "2 sections differ" without having read anything would be
+ * precisely the watermelon this repo has a word for (PRD, "External sync").
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import * as FX from './fixture.js';
+import { openDoc, openTab, fileNewModel } from './panel-initiatives.js';
+import { addProductBody } from './panel-repos.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));
+
+/* ── late-bound siblings ────────────────────────────────────────────────────────────────────
+ * panel-tabs.js owns tab creation and data.js owns the file-mode append. Both are imported
+ * LAZILY: a static import of a module that is not on disk yet takes this whole panel down, and a
+ * blank panel 3 is worse than a panel that opens a tab through the shared `openTab` fallback.
+ * Neither import changes what is rendered — only who records the side effect.
+ */
+const mods = { tabs: undefined, data: undefined };   // undefined = untried · null = unavailable
+
+/**
+ * Resolve a sibling module without a boot-time request. app.js already imports both at boot and
+ * publishes them on `window.pmApp.mods`, so the common path costs nothing; the dynamic import is
+ * only the fallback for a page that came up without the shell's loader. A module that is not on
+ * disk yet resolves to null and the caller degrades — it never takes this panel down.
+ */
+function sibling(key, path) {
+  if (mods[key] !== undefined) return mods[key];
+  const shell = window.pmApp && window.pmApp.mods && window.pmApp.mods[key];
+  if (shell) { mods[key] = shell; return shell; }
+  mods[key] = null;
+  import(path).then((m) => { mods[key] = m; }).catch(() => { mods[key] = null; });
+  return null;
+}
+
+/** Open a task tab: panel 4's own opener when it is reachable, the shared one otherwise. */
+function openTask(tab) {
+  const tabs = sibling('tabs', './panel-tabs.js');
+  if (tabs && typeof tabs.openTask === 'function') { tabs.openTask(tab); return; }
+  openTab(tab);
+}
+
+/**
+ * Record a link declaration in file-mode state, if the data layer offers that write. A link is a
+ * DECLARATION — `{artifact_path, kind, target}` — never an outbound call: PMOS holds no credential
+ * and makes no external request (PRD, "External sync").
+ */
+function declare(fn, payload) {
+  if (FIXTURE) return;                       // the fixture is a render, never a write
+  const data = sibling('data', './data.js');
+  const write = data && data[fn];
+  if (typeof write === 'function') { try { write(payload); } catch { /* the UI still shows it */ } }
+}
+
+/* ── the board, read the same way panel 2 reads 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';
+}
+
+function baseGroups(product) {
+  const board = boardOf();
+  if (board[product]) return board[product];
+  return FIXTURE && !state.board ? (FX.ALLGROUPS[product] || FX.ALLGROUPS.workspace) : [];
+}
+
+/** The initiative showing when nothing has been picked yet (line 1397). */
+function selectedSlug() {
+  if (state.sel !== null && state.sel !== undefined) return state.sel;
+  const g0 = baseGroups(currentProduct())[0];
+  return g0 && g0.slugs && g0.slugs.length ? g0.slugs[0] : null;
+}
+
+/** Which repository owns each slug (lines 1963–1965) — tabs are scoped by it. */
+function repoOf(slug) {
+  const boards = boardOf();
+  for (const prod of Object.keys(boards)) {
+    for (const g of boards[prod] || []) if ((g.slugs || []).includes(slug)) return prod;
+  }
+  for (const key of Object.keys(state.addedInits || {})) {
+    if ((state.addedInits[key] || []).includes(slug)) return key.split('|')[0];
+  }
+  return currentProduct();
+}
+
+/* ── connector honesty (PRD, "External sync") ───────────────────────────────────────────────
+ * Fixture mode renders the design's copy so the diff is like-for-like. Real mode asks the data
+ * layer whether a connector for this destination exists; with none, the summary says nothing was
+ * read and the two approvals are inert. `state.connectors` accepts either shape a data layer is
+ * likely to publish — a list of kinds, or a map of kind → truthy.
+ */
+function hasConnector(kind) {
+  if (FIXTURE) return true;
+  const c = state.connectors;
+  if (Array.isArray(c)) {
+    return c.some((x) => (typeof x === 'string' ? x : x && x.kind) === kind
+      && (typeof x === 'string' || x.configured !== false));
+  }
+  if (c && typeof c === 'object') return !!c[kind];
+  return false;
+}
+
+const NO_CONNECTOR = 'no connector configured — nothing was read, and nothing will be written.';
+
+/* ── the sticky detail header (lines 332–335) ───────────────────────────────────────────────
+ * Built once and re-used, so panel 3's chrome keeps its identity across renders the way panel 2's
+ * header and search box do.
+ */
+// `<span>{{ detailTitle }}</span>` — the OUTER span is the header's flex item (and is therefore
+// blockified); the interpolation's own span sits inside it and stays inline. Collapsing the two
+// would change the measured box, so the wrapper is kept and only the inner text is rewritten.
+const headerTitleText = iv('initiative');
+const headerTitle = el('span', null, headerTitleText);
+
+const stickyHeader = el('div', {
+  style: 'position:sticky;top:0;z-index:2;background:var(--sidebar);border-bottom:1px solid var(--border);padding:6px 8px 6px 14px;font-size:12px;font-weight:500;color:var(--muted-foreground);display:flex;align-items:center;gap:8px',
+},
+  headerTitle,
+  el('button', {
+    onClick: () => setState({ col2: false }),
+    style: 'margin-left:auto;color:var(--muted-foreground);padding:3px 7px;font-size:12px',
+    hover: 'color:var(--foreground)',
+  }, '⟨'),
+);
+
+/* ── 1 · HEADER — slug, tag, pills (lines 338–346) ──────────────────────────────────────────── */
+
+function headerBlock(name, tag, pills) {
+  return el('div', { style: 'padding:13px 14px 11px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(name)),
+    el('div', { style: 'font-size:12px;color:var(--muted-foreground);margin-top:2px' }, iv(tag)),
+    el('div', { style: 'display:flex;gap:5px;flex-wrap:wrap;margin-top:8px' },
+      pills.map((pl) => el('span', {
+        style: 'font-family:var(--mono);font-size:10px;padding:2px 6px;background:var(--secondary);border:1px solid var(--border);color:' + pl.c,
+      }, iv(pl.t)))),
+  );
+}
+
+/* ── 2 · READ FAILURE (lines 347–352) ────────────────────────────────────────────────────────
+ * A record that would not parse renders the panel RED and carries the parse error verbatim. It
+ * replaces the phases, links and artifacts — the panel refuses to pretend the initiative is empty,
+ * which is a different and much worse claim than "this file is broken".
+ */
+function errorBlock(readError) {
+  return el('div', {
+    style: 'margin:12px;padding:11px 13px;border:1px solid var(--destructive);background:color-mix(in oklab, var(--destructive) 12%, transparent)',
+  },
+    el('div', { style: 'font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--destructive);margin-bottom:4px;font-weight:500' }, 'read failed'),
+    el('div', { style: 'font-size:12.5px;line-height:1.55' }, iv(readError)),
+  );
+}
+
+/* ── 3 · NO RECORD — the "next" banner + the note (lines 353–356) ───────────────────────────── */
+
+function noLadderBlock(ansBg, ansC, ansText, noLadderText) {
+  return [
+    el('div', { style: 'margin:12px 12px 0;padding:9px 11px;background:' + ansBg + ';border-left:2px solid ' + ansC + ';font-size:13px;line-height:1.5' },
+      el('span', { style: 'font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:' + ansC + ';margin-right:8px;font-weight:500' }, 'next'),
+      iv(ansText)),
+    el('div', { style: 'margin:10px 12px 0;padding:9px 11px;border:1px dashed var(--input);font-size:12px;line-height:1.5;color:var(--muted-foreground)' }, iv(noLadderText)),
+  ];
+}
+
+/* ── 4 · TASK PHASES (lines 357–378, derivation 1719–1756) ──────────────────────────────────
+ * The phase set is the initiative's workflow — one phase per engine rung. Its tasks are the
+ * record's authored `tasks[<phase>]` when present, otherwise the three derived from the rung's own
+ * evidence (`synthTasks`). Nothing is invented per initiative: a rung with no evidence reads
+ * `todo`, never `done`.
+ *
+ * Phase status is derived from its tasks, in this order: any blocked → blocked; any doing → doing;
+ * all done → done; some done → doing; else todo. Collapse is per phase PER INITIATIVE (`pkey`), so
+ * folding `build` on one initiative does not fold it on the next.
+ */
+function phaseBlock(slug, rec) {
+  const phases = FX.phasesFor(rec, slug);
+  if (!phases.length) return null;
+  const collP = state.collapsedPhases || {};
+  const repo = repoOf(slug);
+
+  return el('div', { style: 'padding:2px 0 6px' }, phases.map((ph) => {
+    const pkey = slug + '|' + ph.key;
+    const open = !collP[pkey];
+    const [phDot, phColor] = FX.TDOT[ph.status];
+
+    const head = el('button', {
+      onClick: () => setState((s) => ({
+        collapsedPhases: { ...s.collapsedPhases, [pkey]: !((s.collapsedPhases || {})[pkey]) },
+      })),
+      style: 'display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px 8px',
+      hover: 'background:var(--accent)',
+    },
+      el('span', { style: 'flex:none;width:10px;font-size:9px;color:var(--muted-foreground)' }, iv(open ? '▾' : '▸')),
+      el('span', { style: 'flex:none;width:13px;text-align:center;font-size:11px;color:' + phColor }, iv(phDot)),
+      el('span', { style: 'font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--foreground)' }, iv(ph.label)),
+      el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(ph.count)),
+    );
+
+    const rows = open ? ph.tasks.map((t, ti) => {
+      const tid = FX.taskTabId(slug, ph.key, ti);
+      const active = state.active === tid;
+      const [dot, color] = FX.TDOT[t.status] || FX.TDOT.todo;
+      return el('button', {
+        onClick: () => openTask({
+          id: tid, kind: 'task', role: 'TASK', title: t.title, slug, repo, phase: ph.key,
+          status: t.status, instruction: t.instruction, input: t.input, expect: t.expect,
+          evalNote: t.evalNote, output: t.output,
+        }),
+        style: 'display:flex;align-items:center;gap:9px;width:100%;padding:6px 14px 6px 32px;min-height:34px;border-top:1px solid oklch(1 0 0 / 4%);background:'
+          + (active ? 'var(--accent)' : 'transparent')
+          + ';border-left:2px solid ' + (active ? 'var(--brand)' : 'transparent'),
+        hover: 'background:var(--accent)',
+      },
+        el('span', { style: 'flex:none;width:13px;text-align:center;font-size:11px;color:' + color }, iv(dot)),
+        el('span', { style: 'flex:1;min-width:0;font-size:12.5px;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(t.title)),
+        el('span', { style: 'flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, '↗'),
+      );
+    }) : [];
+
+    return el('div', { style: 'border-bottom:1px solid oklch(1 0 0 / 5%)' }, head, rows);
+  }));
+}
+
+/* ── 5a · LINKS (lines 380–398, derivation 1757–1766, 1797–1798) ────────────────────────────
+ * External references — NOT repo files. Sessions add them automatically; the three ＋ buttons let
+ * the PM add one by hand, and adding one opens its preview immediately so the reference is
+ * verified by looking at it rather than by trusting the row. Multiple links of a kind are allowed:
+ * the Jira numbering counts the ones already filed rather than replacing them.
+ */
+function linksRow(slug) {
+  const rec = records()[slug] || {};
+  const manual = (state.initLinks || {})[slug] || [];
+  const links = [...(rec.links || []), ...manual];
+
+  const addLink = (src) => {
+    const link = FX.makeLink(slug, src, manual);
+    setState(
+      (s) => ({ initLinks: { ...s.initLinks, [slug]: [...((s.initLinks || {})[slug] || []), link] } }),
+      () => {
+        declare('recordInitiativeLink', { slug, ...link });
+        openDoc(slug, link.path, link.kind.toUpperCase());
+      },
+    );
+  };
+
+  const rows = links.map((lk) => el('button', {
+    onClick: () => openDoc(slug, lk.path, String(lk.kind).toUpperCase()),
+    style: 'display:flex;gap:8px;align-items:center;padding:5px 6px;margin:0 -6px;min-height:34px',
+    hover: 'background:var(--accent)',
+  },
+    el('span', { style: 'flex:none;width:76px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--info)' }, iv(lk.kind)),
+    el('span', { style: 'font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(lk.label)),
+    el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(lk.st)),
+  ));
+
+  const addRow = el('div', { style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px' },
+    el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'link'),
+    FX.LINK_SRCS.map((ls) => el('button', {
+      onClick: () => addLink(ls.src),
+      style: 'display:flex;gap:5px;align-items:center;font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:28px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
+      hover: 'border-color:var(--ring)',
+    }, '＋ ', iv(ls.l))),
+  );
+
+  return el('div', { style: 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border)' },
+    el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-top:2px' }, 'links'),
+    el('div', { style: 'display:flex;flex-direction:column;gap:2px;min-width:0' },
+      rows,
+      addRow,
+      el('span', { style: 'font-size:11px;color:var(--muted-foreground);margin-top:3px;line-height:1.5' },
+        'references — not in the repo. sessions add these automatically; link one yourself when you need it.'),
+    ),
+  );
+}
+
+/* ── 5b · ARTIFACTS (lines 399–437, derivation 1779–1795) ───────────────────────────────────
+ * Repo files, each with its role and path; clicking one opens the document. An artifact may carry
+ * an external DESTINATION — recorded as a declaration, never as an outbound call — and once linked
+ * it grows the ⇄ pill, a `sync` button, and the inline sync panel behind it.
+ *
+ * The sync panel is where this surface is at its most careful. The repo is the source of truth,
+ * stated first; then the difference summary; then the two approvals, whose chosen result persists
+ * as the status line beside the pill. With no connector, the summary says nothing was read and
+ * both approvals are inert.
+ */
+function artifactRow(slug, a) {
+  const key = FX.artKey(slug, a.path);
+  const dest = (state.artLinks || {})[key] || a.dest || null;
+  const syncState = (state.artSyncState || {})[key] || null;
+  const syncOpen = !!(state.artSyncOpen || {})[key];
+
+  const head = el('button', {
+    onClick: () => openDoc(slug, a.path, a.role),
+    style: 'display:flex;gap:8px;align-items:center;width:100%;padding:4px 6px;margin:0 -6px;min-width:0;min-height:30px',
+    hover: 'background:var(--accent)',
+  },
+    el('span', { style: 'flex:none;width:52px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--info)' }, iv(a.role)),
+    el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(a.path)),
+  );
+
+  if (!dest) {
+    // Unlinked: the three destinations it could be linked to.
+    const linkRow = el('div', { style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:3px 0 0' },
+      el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'link'),
+      FX.ART_LINK_SRCS.map((ls) => el('button', {
+        onClick: () => {
+          const d = FX.linkArtDest(key, ls.kind);
+          setState((s) => ({ artLinks: { ...s.artLinks, [key]: d } }));
+          declare('recordArtifactLink', { artifact_path: a.path, slug, kind: d.kind, target: d.target });
+        },
+        style: 'font-family:var(--mono);font-size:10px;padding:3px 8px;min-height:24px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
+        hover: 'border-color:var(--ring)',
+      }, '＋ ', iv(ls.l))),
+    );
+    return el('div', { style: 'min-width:0' }, head, linkRow);
+  }
+
+  // Linked: the destination pill, the sync button, and the persisted result of the last approval.
+  const pillRow = el('div', { style: 'display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:3px 0 0 0' },
+    el('span', { style: 'font-family:var(--mono);font-size:10px;padding:1px 6px;background:var(--brand-wash);color:var(--brand)' },
+      '⇄ ', iv(dest.kind), ' · ', iv(dest.target)),
+    el('button', {
+      onClick: () => setState((s) => ({ artSyncOpen: { ...s.artSyncOpen, [key]: !s.artSyncOpen[key] } })),
+      style: 'font-family:var(--mono);font-size:10.5px;padding:3px 10px;min-height:26px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
+      hover: 'border-color:var(--ring)',
+    }, 'sync'),
+    syncState && el('span', { style: 'font-family:var(--mono);font-size:10px;color:' + syncState.color }, iv(syncState.text)),
+  );
+
+  let panel = null;
+  if (syncOpen) {
+    const live = hasConnector(dest.kind);
+    const inert = !live;
+    const decide = (make) => () => {
+      if (inert) return;
+      setState((s) => ({
+        artSyncState: { ...s.artSyncState, [key]: make(dest) },
+        artSyncOpen: { ...s.artSyncOpen, [key]: false },
+      }));
+    };
+    const off = inert ? ';opacity:.5;cursor:not-allowed' : '';
+    panel = el('div', { style: 'margin-top:6px;padding:9px 11px;border:1px solid var(--border);background:var(--background)' },
+      el('div', { style: 'font-size:12px;line-height:1.5;color:var(--muted-foreground)' },
+        iv(live ? FX.artDiffText(dest) : NO_CONNECTOR)),
+      el('div', { style: 'display:flex;gap:6px;margin-top:8px;flex-wrap:wrap' },
+        el('button', {
+          onClick: decide(FX.artSyncPushed), disabled: inert,
+          style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500' + off,
+        }, 'repo is source → push'),
+        el('button', {
+          onClick: decide(FX.artSyncPulled), disabled: inert,
+          style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)' + off,
+          hover: inert ? null : 'border-color:var(--ring)',
+        }, 'adopt ', iv(dest.kind), ' → repo'),
+      ),
+    );
+  }
+
+  return el('div', { style: 'min-width:0' }, head, pillRow, panel);
+}
+
+function artifactsRow(slug, rec) {
+  const arts = rec.arts || [];
+  return el('div', { style: 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:8px 14px' },
+    el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-top:2px' }, 'artifacts'),
+    el('div', { style: 'display:flex;flex-direction:column;gap:8px;min-width:0' },
+      arts.map((a) => artifactRow(slug, a)),
+      arts.length === 0
+        ? el('span', { style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic' }, 'none filed')
+        : null,
+    ),
+  );
+}
+
+/* ── 6 · FOOTER — the derivation line (line 447) ─────────────────────────────────────────────
+ * `margin-top:auto` pins it to the bottom of panel 3's flex column. It states what the panel above
+ * was derived FROM: the working tree, or the absence of one, or a failed read.
+ */
+/* THE FOOTER OWNS NO CLOCK. `rec.asOf` is stamped in data.js at the moment `/api/initiative`
+ * answers, and this function prints it. Calling a clock here instead — which is what the first fix
+ * for the fabricated `12:41:03` did — measures the render, and panel 3 re-renders on every session
+ * poll while its data is read once per page life: the line advanced while the reading behind it did
+ * not. In fixture mode `undefined` is passed deliberately so `branchLine` falls back to the design's
+ * own literal; a live clock inside a render the comparator diffs could never be called clean. A real
+ * record that has not been hydrated yet has no `asOf`, and `null` makes the line say so rather than
+ * borrow the design's number. */
+function footer(rec) {
+  const asOf = FIXTURE ? undefined : ((rec && rec.asOf) || null);
+  return el('div', {
+    style: 'margin-top:auto;padding:8px 14px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--muted-foreground)',
+  }, iv(FX.branchLine(rec, asOf)));
+}
+
+/* ── the `dInit` branch, assembled in the prototype's order ─────────────────────────────────── */
+
+function initBody(slug) {
+  const rec = slug ? records()[slug] : null;
+  if (!rec) return [noneBody()];
+
+  const out = [];
+
+  if (rec.readError) {
+    // Header (slug, empty tag, no pills) → the red block → the footer. Nothing else (line 1703).
+    out.push(headerBlock(slug, '', []));
+    out.push(errorBlock(rec.readError));
+    out.push(footer(rec));
+    return out;
+  }
+
+  out.push(headerBlock(slug, rec.tag || '', rec.pills || []));
+
+  if (rec.noLadder) {
+    const ansC = FX.TONE[(rec.answer && rec.answer.tone) || 'info'] || FX.C.mut;
+    out.push(...noLadderBlock(FX.wash(ansC), ansC, (rec.answer && rec.answer.text) || '', rec.noLadder));
+  }
+
+  const phases = phaseBlock(slug, rec);
+  if (phases) out.push(phases);
+
+  out.push(el('div', { style: 'border-top:1px solid var(--border)' },
+    linksRow(slug),
+    artifactsRow(slug, rec),
+  ));
+
+  out.push(footer(rec));
+  return out;
+}
+
+/* ── `dNone` (lines 838–840) ────────────────────────────────────────────────────────────────── */
+
+function noneBody() {
+  return el('div', { style: 'flex:1;display:grid;place-items:center;color:var(--muted-foreground);font-size:12.5px;padding:20px;text-align:center' },
+    'select something on the left');
+}
+
+/* ── `dNew` — the file-new form (lines 665–728) ─────────────────────────────────────────────
+ * The form's MODEL belongs to panel 2 — every field it edits and every record it files lands on
+ * that board — so it is imported from there (`fileNewModel`) rather than re-derived here. Only the
+ * rendering is this panel's, because panel 3 is the host.
+ */
+const NEW_LABEL = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)';
+const NEW_FIELD_LABEL = NEW_LABEL + ';padding-top:8px';
+const NEW_ROW = 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px';
+
+/**
+ * A form field, caret-safe. `oninput` writes straight onto the state object WITHOUT a render — a
+ * repaint between keystrokes would rebuild the input and take the caret with it — and `onchange`
+ * commits through the model's own handler so everything derived from the field catches up. This is
+ * the same contract panel 1's `field()` uses; the prototype's React `onChange` did both at once.
+ */
+function newField(key, value, commit, placeholder, css) {
+  return el('input', {
+    value, placeholder, style: css,
+    onInput: (e) => { state[key] = e.target.value; },
+    onChange: commit,
+  });
+}
+
+function anchorButton(an) {
+  return el('button', {
+    onClick: an.on,
+    style: 'display:flex;gap:8px;align-items:center;min-height:34px;padding:0 9px;background:' + an.bg + ';border:1px solid ' + an.bc,
+    hover: 'border-color:var(--ring)',
+  },
+    el('span', { style: 'font-family:var(--mono);font-size:11px;color:' + an.color }, iv(an.label)),
+    el('span', { style: 'font-size:11px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(an.sub)),
+  );
+}
+
+function fileNewBody() {
+  const nw = fileNewModel();
+  const out = [];
+
+  out.push(el('div', { style: 'padding:13px 14px 11px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'font-family:var(--mono);font-size:15px;font-weight:600' }, 'file new'),
+    el('div', { style: 'font-size:12px;color:var(--muted-foreground);margin-top:2px' }, 'objectives and KRs are structure — initiatives are work'),
+  ));
+
+  out.push(el('div', { style: 'display:flex;gap:4px;padding:10px 14px 2px' },
+    nw.typeBtns.map((tb) => el('button', {
+      onClick: tb.on,
+      style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;background:' + tb.bg + ';border:1px solid ' + tb.bc + ';color:' + tb.color,
+      hover: 'border-color:var(--ring)',
+    }, iv(tb.l))),
+  ));
+
+  if (nw.isObj) {
+    out.push(el('div', { style: NEW_ROW },
+      el('span', { style: NEW_FIELD_LABEL }, 'name'),
+      newField('newName', nw.name, nw.onName, 'what this quarter is for…', 'font-size:12.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px'),
+    ));
+    out.push(el('div', { style: 'padding:2px 14px 8px;font-size:11.5px;line-height:1.5;color:var(--muted-foreground)' },
+      'An objective is a file — ',
+      el('span', { style: 'font-family:var(--mono)' }, 'planning/objectives/<id>.md'),
+      '. KRs and initiatives anchor upward to it.'));
+  }
+
+  if (nw.isKr) {
+    out.push(el('div', { style: 'padding:10px 14px 4px;' + NEW_LABEL }, 'under objective'));
+    out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:2px 14px 4px' },
+      nw.anchors.map(anchorButton),
+      nw.noKrTargets
+        ? el('span', { style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic' }, 'every objective here already has its KR — add an objective first')
+        : null,
+    ));
+    out.push(el('div', { style: 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:6px 14px' },
+      el('span', { style: NEW_FIELD_LABEL }, 'name'),
+      newField('newName', nw.name, nw.onName, 'measurable result…', 'font-size:12.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px'),
+    ));
+  }
+
+  if (nw.isInit) {
+    out.push(el('div', { style: NEW_ROW },
+      el('span', { style: NEW_FIELD_LABEL }, 'slug'),
+      newField('newSlug', nw.slug, nw.onSlug, 'my-new-initiative', 'font-family:var(--mono);font-size:11.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px'),
+    ));
+    out.push(el('div', { style: 'padding:2px 14px 4px;' + NEW_LABEL }, 'anchor · parent_kr'));
+    out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:2px 14px 4px' },
+      nw.anchors.map(anchorButton)));
+    if (nw.showD59) {
+      out.push(el('div', { style: 'margin:4px 14px;padding:8px 11px;border:1px solid var(--destructive);background:color-mix(in oklab, var(--destructive) 10%, transparent);font-size:11.5px;line-height:1.5' },
+        'No anchor — it will be filed, then ',
+        el('span', { style: 'color:var(--destructive)' }, 'rejected at intake under D59'),
+        ', listed under unanchored, never hidden.'));
+    }
+    out.push(el('div', { style: 'padding:4px 14px 4px;' + NEW_LABEL }, 'workflow'));
+    out.push(el('div', { style: 'display:flex;gap:4px;flex-wrap:wrap;padding:2px 14px 6px' },
+      nw.flowsBtns.map((fb) => el('button', {
+        onClick: fb.on,
+        style: 'font-family:var(--mono);font-size:10.5px;padding:4px 8px;min-height:26px;background:' + fb.bg + ';border:1px solid ' + fb.bc + ';color:' + fb.color,
+        hover: 'border-color:var(--ring)',
+      }, iv(fb.l))),
+    ));
+  }
+
+  out.push(el('div', { style: 'padding:8px 14px 12px;border-bottom:1px solid var(--border)' },
+    el('button', {
+      onClick: nw.onCreate,
+      style: 'padding:5px 12px;min-height:30px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-size:12px;font-weight:500',
+    }, iv(nw.createLabel)),
+  ));
+
+  out.push(el('div', { style: 'margin-top:auto;padding:8px 14px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' },
+    'pmos new <objective | kr | initiative> — creates the file; the board derives'));
+
+  return out;
+}
+
+/* ── the secondary detail kinds ─────────────────────────────────────────────────────────────
+ * `flow · sched · skill · know · agent · mem · prof · intg` are modes.js's bodies, not this
+ * panel's. modes.js is loaded on first use; until it answers — or if it never does — the panel
+ * falls back to the prototype's own empty copy rather than rendering nothing at all.
+ */
+let modesMod;               // undefined = not tried · null = loading or unavailable · module = ready
+
+function modesModule() {
+  if (modesMod !== undefined) return modesMod;
+  modesMod = null;
+  import('./modes.js')
+    .then((m) => { modesMod = m; setState({}); })
+    .catch(() => { modesMod = null; });
+  return null;
+}
+
+function modeDetailBody(kind) {
+  const mod = modesModule();
+  const fn = mod && (mod.detailBody || mod.renderDetailBody);
+  if (typeof fn === 'function') {
+    try {
+      const nodes = fn(kind, state.detail);
+      if (Array.isArray(nodes)) return nodes;
+      if (nodes) return [nodes];
+    } catch (e) { console.error('[pm] modes.detailBody failed:', e); }
+  }
+  return [noneBody()];
+}
+
+/* ── render ────────────────────────────────────────────────────────────────────────────────── */
+
+export function renderDetail(host) {
+  const kind = (state.detail && state.detail.kind) || 'init';
+  headerTitleText.textContent = FX.detailTitle(kind);
+
+  let body;
+  if (kind === 'init') body = initBody(selectedSlug());
+  else if (kind === 'addprod') body = addProductBody();
+  else if (kind === 'new') body = fileNewBody();
+  else if (kind === 'none') body = [noneBody()];
+  else body = modeDetailBody(kind);
+
+  return setChildren(host, [stickyHeader, ...body]);
+}
+
+export default renderDetail;