create-pmos 0.52.0 → 0.53.0

package/workspace/public/pm/initiative-list.js

@@ -0,0 +1,218 @@
+/* pm/initiative-list.js — the List: initiatives by objective, then by KR or health budget (pm-os-absorb Run 2, slice 2D;
+ * PRD R17, W2 and W5).
+ *
+ * A group header names the objective and its period (from the OKR file). Under it each KR or health budget has a header
+ * that shows a value ONLY when one was measured ("KR 2.1 · 41% on 2 Oct → 55%"): a header with no measurement has no value
+ * element at all. Nothing is computed here; the value is the server's measured line, with its source.
+ *
+ * A row is the title, one meta line ("Build · waiting on you · 7 of 12 · due 14 Nov"), the health reason and, when the PM
+ * owes something, the attention dot. Within a group rows follow the horizon (Now, Next, Later), then the rank the server
+ * gives, then the next due date.
+ *
+ * Bulk acts, by selecting (the Select button, or `x` on a row): Move to Next, Move to Later, Change lifecycle. Move to Now
+ * and the anchor change are never bulk. Changing the lifecycle of several initiatives mints one lifecycle-bulk grant on the
+ * server, and the control is disabled BEFORE a press while /api/pm-modules does not list that scope.
+ *
+ *   mountList(host, env) → { dispose(), reload() }
+ *   env = { repo, ws, openInitiative(repo, slug), grants: () => string[] }
+ */
+
+import { el } from './dom.js';
+import { row, iconButton, button, badge, needsDot, menu, empty, toast } from './primitives.js';
+import { watchSig } from './sig-watch.js';
+import { COPY, shortDate } from './initiatives-copy.js';
+import { getList, sigKey, place, placed, leaveNow, setLifecycleBulk } from './initiatives-api.js';
+import { healthSignal, say, confirmSheet, checkBySheet, onContextMenu } from './initiatives-ui.js';
+
+const ORDER = { now: 0, next: 1, later: 2 };
+const MAX_BULK = 20;
+const STATES = ['on-hold', 'closed', 'cancelled', 'active'];
+
+export function mountList(host, env) {
+  const root = el('div', { class: 'in-list-view', 'data-in-view': 'list' });
+  host.replaceChildren(root);
+  let data = null;
+  let error = null;
+  let selecting = false;
+  const picked = new Set();
+  let disposed = false;
+  let stop = null;
+  let latest = null;
+
+  const allRows = () => ((data && data.groups) || []).flatMap((g) => g.anchors.flatMap((a) => a.rows));
+  const rowOf = (id) => allRows().find((r) => r.id === id) || null;
+
+  /* ── writes ───────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  async function moveMany(idList, horizon) {
+    // Chained, so the selection keeps its order at the top of the horizon: the first at the top, each next after it.
+    const events = idList.map((id, i) => placed(id, horizon, i ? idList[i - 1] : null, leaveNow(rowOf(id), horizon)));
+    const out = await place(env.ws, events);
+    if (say(out, COPY.moveDone(idList.length, COPY.horizons[horizon]))) { picked.clear(); selecting = false; }
+    await reload();
+  }
+  const orderedPicks = () => allRows().filter((r) => picked.has(r.id)).map((r) => r.id);
+
+  /* The state is chosen inside the confirm sheet (it opens on On hold), so the path is Select, Change lifecycle, Confirm: three presses (R17). */
+  function bulkLifecycle() {
+    const idList = orderedPicks();
+    if (!idList.length) return;
+    confirmSheet({
+      title: COPY.bulkLifecycleTitle(idList.length), body: COPY.lifecycleBody(null, idList.length), reason: true, confirmLabel: COPY.confirm,
+      choice: { label: COPY.lifecycleChoose, items: STATES.map((id) => ({ id, label: COPY.lifecycleState[id] })), value: STATES[0] },
+      onConfirm: async (reason, state) => {
+        const out = await setLifecycleBulk(env.ws, idList, state, reason);
+        if (out && out.ok) { toast({ text: COPY.lifecycleDone(COPY.lifecycleState[state], idList.length), timeout: 4000 }); picked.clear(); selecting = false; reload(); }
+        return out;
+      },
+    });
+  }
+
+  function rowMenu(anchor, id) {
+    const r = rowOf(id); if (!r) return;
+    const items = [{ label: COPY.menu.open, onSelect: () => env.openInitiative(env.repo, id) }, { sep: true }];
+    for (const h of ['now', 'next', 'later']) if (r.horizon !== h || r.dormant) items.push({ label: COPY.menu['move' + h[0].toUpperCase() + h.slice(1)], onSelect: async () => { say(await place(env.ws, [placed(id, h, null, leaveNow(r, h))]), COPY.moved[h](r.title)); reload(); } });
+    if (r.horizon === 'now') items.push({ sep: true }, {
+      label: COPY.menu.setCheckBy,
+      onSelect: () => checkBySheet({
+        title: COPY.menu.setCheckBy, value: r.check_by,
+        onSave: async (date) => {
+          const out = await place(env.ws, [placed(id, r.horizon, null, { check_by: date })]);
+          if (out && out.ok) { toast({ text: COPY.moved.checkBy(r.title, date ? shortDate(date) : ''), timeout: 4000 }); reload(); }
+          return out;
+        },
+      }),
+    });
+    menu({ anchor, items, ariaLabel: COPY.aria.more(r.title) });
+  }
+
+  function toggle(id) {
+    if (picked.has(id)) picked.delete(id);
+    else if (picked.size >= MAX_BULK) { toast({ text: COPY.bulkMax, timeout: 4000 }); return; }
+    else picked.add(id);
+    render();
+  }
+
+  /* ── drawing ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function rowEl(r) {
+    const waiting = r.display && r.display.waitingOn === 'pm' ? COPY.waitingYou : r.display && r.display.waitingOn === 'agent' ? COPY.waitingAgent : null;
+    const meta = [r.display && r.display.word, waiting, r.progress && r.progress.label, r.next_due ? COPY.due(shortDate(r.next_due)) : null];
+    const hs = healthSignal(r.health);
+    const trail = [];
+    if (r.display && r.display.waitingOn === 'pm') trail.push(el('span', { class: 'in-attn', title: COPY.attention }, needsDot()));
+    trail.push(badge({ text: COPY.horizons[r.horizon] || r.horizon, tone: 'outline', attrs: { 'data-in-horizon': r.horizon } }));
+    trail.push(iconButton({
+      icon: 'ellipsis', size: 'sm', ariaLabel: COPY.aria.more(r.title), expanded: false,
+      onClick: (e) => { e.stopPropagation(); rowMenu(e.currentTarget, r.id); },
+      attrs: { class: 'in-more', 'aria-haspopup': 'menu', 'data-in-more': r.id },
+    }));
+    const lead = [];
+    if (selecting) {
+      const on = picked.has(r.id);
+      lead.push(iconButton({
+        icon: on ? 'square-check-big' : 'square', size: 'sm', ariaLabel: COPY.aria.select(r.title),
+        onClick: (e) => { e.stopPropagation(); toggle(r.id); }, attrs: { 'aria-pressed': on ? 'true' : 'false', 'data-in-select': r.id },
+      }));
+    }
+    return row({
+      title: r.title, meta, signals: hs ? [hs] : [], lead, trail,
+      onOpen: () => env.openInitiative(env.repo, r.id), openLabel: COPY.aria.open(r.title),
+      attrs: { class: 'in-row', 'data-in-row': r.id, 'data-horizon': r.horizon, 'data-selected': picked.has(r.id) ? 'true' : null },
+      openAttrs: { 'data-in-open': r.id },
+    });
+  }
+
+  const rank = (a, b) => (ORDER[a.horizon] - ORDER[b.horizon]) || ((a.rank || 0) - (b.rank || 0)) || String(a.next_due || '~').localeCompare(String(b.next_due || '~'));
+
+  function anchorEl(a) {
+    const head = [el('span', { class: 'in-anchor__id' }, a.anchor)];
+    if (a.title) head.push(el('span', { class: 'in-anchor__title' }, a.title));
+    if (a.measurement) head.push(el('span', { class: 'in-anchor__value', 'data-in-measured': '', title: a.measurement.source || null }, COPY.measured(a.measurement)));
+    return el('section', { class: 'in-anchor', 'data-in-anchor': a.anchor, 'aria-label': a.anchor },
+      el('div', { class: 'in-anchor__head' }, head),
+      el('div', { class: 'in-rows', role: 'list' }, [...a.rows].sort(rank).map(rowEl)));
+  }
+
+  function groupEl(g) {
+    const first = g.anchors[0];
+    const name = g.objective ? g.objective.title : (first && first.kind === 'health' ? COPY.healthBudgets : COPY.noObjective);
+    const head = [el('span', { class: 'in-group__name' }, name)];
+    if (g.objective && g.objective.period) head.push(el('span', { class: 'in-group__period' }, g.objective.period));
+    return el('section', { class: 'in-group', 'data-in-group': g.objective ? g.objective.id : '' },
+      el('h3', { class: 'in-group__head' }, head), g.anchors.map(anchorEl));
+  }
+
+  function bulkBar() {
+    const n = picked.size;
+    const can = env.grants().includes('lifecycle-bulk');
+    const kids = [el('span', { class: 'in-bulk__count', 'data-in-selected': '' }, COPY.selectedN(n))];
+    kids.push(button({ label: COPY.bulkNext, variant: 'outline', size: 'sm', disabled: !n, onClick: () => moveMany(orderedPicks(), 'next'), attrs: { 'data-in-bulk': 'next' } }));
+    kids.push(button({ label: COPY.bulkLater, variant: 'outline', size: 'sm', disabled: !n, onClick: () => moveMany(orderedPicks(), 'later'), attrs: { 'data-in-bulk': 'later' } }));
+    kids.push(button({
+      label: COPY.bulkLifecycle, variant: 'outline', size: 'sm', disabled: !n || !can,
+      onClick: () => bulkLifecycle(), attrs: { 'data-in-bulk': 'lifecycle', title: can ? null : COPY.bulkLifecycleLater },
+    }));
+    kids.push(button({ label: COPY.done, variant: 'ghost', size: 'sm', onClick: () => { selecting = false; picked.clear(); render(); }, attrs: { 'data-in-bulk': 'done' } }));
+    const bar = el('div', { class: 'in-bulk', 'data-in-bulkbar': '' }, kids);
+    if (!can) bar.appendChild(el('p', { class: 'in-note in-note--inline', 'data-in-bulk-later': '' }, COPY.bulkLifecycleLater));
+    return bar;
+  }
+
+  function render() {
+    if (disposed) return;
+    const active = document.activeElement && document.activeElement.getAttribute ? (document.activeElement.getAttribute('data-in-open') || document.activeElement.getAttribute('data-in-select')) : null;
+    if (!data) {
+      root.replaceChildren(error ? el('p', { class: 'in-note in-note--error', role: 'alert' }, COPY.readFailed(error)) : empty({ text: COPY.reading }));
+      return;
+    }
+    const kids = [];
+    if (!allRows().length) kids.push(empty({ text: COPY.emptyAll }));
+    else {
+      kids.push(el('p', { class: 'in-note in-hint', 'data-in-hint': '' }, COPY.menuHintRow));
+      kids.push(el('div', { class: 'in-toolbar' }, selecting ? bulkBar() : button({ label: COPY.select, variant: 'ghost', size: 'sm', onClick: () => { selecting = true; render(); }, attrs: { 'data-in-select-mode': '' } })));
+      kids.push(...data.groups.map(groupEl));
+    }
+    root.replaceChildren(...kids);
+    if (active) { const t = root.querySelector('[data-in-open="' + CSS.escape(active) + '"], [data-in-select="' + CSS.escape(active) + '"]'); if (t) t.focus({ preventScroll: true }); }
+  }
+
+  /* The row menu is the phone's path (the ⋯ button shows where a touch screen is). On a desk it opens from the context menu:
+   * a right click, or the menu key on a focused row. */
+  onContextMenu(root, (t) => {
+    const node = t && t.closest ? t.closest('[data-in-row]') : null;
+    const open = node && node.querySelector('[data-in-open]');
+    return open ? { anchor: open, id: node.getAttribute('data-in-row') } : null;
+  }, rowMenu);
+
+  /* `x` on a row selects it (and starts selecting), the keyboard path of the bulk acts. */
+  root.addEventListener('keydown', (e) => {
+    if (e.key !== 'x' || e.altKey || e.ctrlKey || e.metaKey) return;
+    const open = e.target && e.target.closest ? e.target.closest('[data-in-open]') : null;
+    if (!open) return;
+    e.preventDefault(); e.stopPropagation();
+    selecting = true;
+    toggle(open.getAttribute('data-in-open'));
+  });
+
+  /* ── reading ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function adopt(answer) { if (disposed) return; data = answer; error = null; render(); }
+  let reads = 0;   // only the newest read is drawn: an older answer that comes back late is dropped
+  async function reload() {
+    const mine = ++reads;
+    const a = await getList(env.ws);
+    if (disposed || mine !== reads) return;
+    if (a && a.ok) adopt(a);
+    else if (!data) { error = (a && a.error) || 'the server did not answer'; render(); }
+  }
+
+  render();
+  reload().then(() => {
+    if (disposed) return;
+    stop = watchSig(async () => { const a = await getList(env.ws); if (a && a.ok) { latest = a; return sigKey(a); } return null; },
+      () => { if (latest) adopt(latest); }, { everyMs: 10000 });
+  });
+
+  return { reload, dispose() { disposed = true; if (stop) stop(); } };
+}

package/workspace/public/pm/initiative-sheet.js

@@ -0,0 +1,261 @@
+/* pm/initiative-sheet.js — the initiative sheet (pm-os-absorb Run 2, slice 2D; PRD R13, R14, R16, X7).
+ *
+ * About 70% of the width on a desktop and the whole screen on a phone. Top to bottom:
+ *   line 1  the title, the horizon, the health reason (only when not on track), and a meta line: lane · anchor · id
+ *   line 2  the stage stepper, then "Waiting on you: approval [Open gate ▸]" or "Waiting on agent: build [Hand to agent ▸]"
+ *   tabs    Breakdown (the Run 1 pane, embedded: Tree · Board, and Timeline once Run 4 registers it), Files, History
+ *   ⋯       horizon, check-by, lifecycle and the anchor (both PM-only: the server's guard answers), Copy CLI, Export breakdown
+ * Nothing on this sheet says "plan". Everything it shows is read from GET /api/initiatives/<id>; every write goes through
+ * initiatives-api.js. The Breakdown tab mounts with a tab id of the form `initiative:<slug>`, so it never meets a panel-4
+ * tab, and the sheet releases it (unmountBreakdown) when it closes or the tab changes.
+ *
+ * If the sheet cannot be read (a server without the Initiatives routes), the legacy detail pane opens instead, so an
+ * "open" from Today or the Breakdown never goes nowhere.
+ */
+
+import { el } from './dom.js';
+import { sheet, button, iconButton, tabs, row, badge, menu, toast, empty, field, ensureComponentsCss } from './primitives.js';
+import { icon, ensureSprite } from './icons.js';
+import { mountBreakdown, unmountBreakdown } from './panel-breakdown.js';
+import { openDoc } from './panel-initiatives.js';
+import { openNewSession } from './panel-newsess.js';
+import { wsOf, readDoc, saveDoc } from './data.js';
+import { state, setState } from './state.js';
+import { dayOf } from './breakdown-copy.js';
+import { COPY, shortDate } from './initiatives-copy.js';
+import { getSheet, getExport, place, placed, leaveNow, setLifecycle } from './initiatives-api.js';
+import { healthSignal, say, confirmSheet, checkBySheet, horizonLabel } from './initiatives-ui.js';
+
+/** The pre-Run-2 detail pane: the fallback, and the home of the legacy gate buttons that "Open gate" reaches. */
+export function legacyOpen(repo, slug) {
+  const repos = typeof window !== 'undefined' && window.pmApp && window.pmApp.mods ? window.pmApp.mods.repos : null;
+  if (repos && typeof repos.selectRepo === 'function' && repo) repos.selectRepo(repo);
+  setState({ sel: slug, detail: { kind: 'init' }, col2: true });
+}
+
+export const changed = () => { try { window.dispatchEvent(new CustomEvent('pmos:initiatives-changed')); } catch { /* no window */ } };
+
+const who = (by) => {
+  const s = String(by || '');
+  if (s.startsWith('pm:')) return 'You';
+  const m = /^agent:(sess-\d+)/.exec(s);
+  return m ? 'Agent · ' + m[1] : s.startsWith('agent:') ? 'Agent' : s;
+};
+
+/** The shape of an anchor: a KR id ("KR 2.1") or health:<id>. The same shape lib/measurements.js reads. */
+const ANCHOR_RE = /^(?:health:[a-z0-9][a-z0-9-]{0,59}|[A-Za-z0-9][A-Za-z0-9 .:_-]{0,79})$/;
+
+/** The record with its frontmatter `parent_kr` line set to `next`, or null when the frontmatter has no such line. The body is never touched, and a function replacement keeps `$&` and `$'` in `next` literal. */
+function withAnchor(text, next) {
+  const fm = /^---\r?\n[\s\S]*?\r?\n---/.exec(text);
+  if (!fm || !/^parent_kr:.*$/m.test(fm[0])) return null;
+  return fm[0].replace(/^parent_kr:.*$/m, () => 'parent_kr: ' + next) + text.slice(fm[0].length);
+}
+
+let current = null;
+
+/** Open the sheet of one initiative. `repo` is the repository's name (as the registry's openInitiative gets it). */
+export function openSheet(repo, slug) {
+  const ws = wsOf(repo) || state.wsId;
+  if (!ws || !slug) { legacyOpen(repo, slug); return null; }
+  if (current && current.open) current.close();
+  ensureComponentsCss();
+  ensureSprite();
+  let data = null;
+  let tab = 'breakdown';
+  let closed = false;
+  const tabId = 'initiative:' + slug;
+  const crumb = el('div', { class: 'in-sheet__crumb' });
+  const stepperHost = el('div', { class: 'in-sheet__stepper-host' });
+  const waitingHost = el('div', { class: 'in-sheet__waiting-host' });
+  const tabsHost = el('div', { class: 'in-sheet__tabs' });
+  const panel = el('div', { class: 'in-sheet__panel', 'data-in-panel': '' });
+  const s = sheet({
+    mode: 'auto', title: slug, sub: '', body: [crumb, stepperHost, waitingHost, tabsHost, panel],
+    attrs: { class: 'in-sheet', 'data-in-sheet': 'initiative', 'data-in-id': slug },
+    onClose: () => { closed = true; unmountBreakdown(panel); if (current === s) current = null; },
+  });
+  current = s;
+
+  const reload = async () => {
+    const out = await getSheet(ws, slug);
+    if (closed) return;
+    if (!out || !out.ok || !out.initiative) {
+      s.close();
+      legacyOpen(repo, slug);
+      return;
+    }
+    data = out;
+    draw();
+  };
+  const after = (out, okText) => { if (say(out, okText)) { changed(); reload(); } };
+
+  /* ── the ⋯ menu ───────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function openMore(anchor) {
+    const I = data.initiative;
+    const items = [];
+    for (const h of ['now', 'next', 'later']) if (I.horizon !== h) items.push({ label: COPY.menu['move' + h[0].toUpperCase() + h.slice(1)], onSelect: async () => after(await place(ws, [placed(slug, h, null, leaveNow(I, h))]), COPY.moved[h](I.title)) });
+    if (I.horizon === 'now') items.push({
+      label: COPY.menu.setCheckBy,
+      onSelect: () => checkBySheet({
+        title: COPY.sheet.checkByTitle, value: I.check_by,
+        onSave: async (date) => {
+          const out = await place(ws, [placed(slug, I.horizon, null, { check_by: date })]);
+          if (out && out.ok) { toast({ text: COPY.moved.checkBy(I.title, date ? shortDate(date) : ''), timeout: 4000 }); changed(); reload(); }
+          return out;
+        },
+      }),
+    });
+    items.push({ sep: true });
+    const stopped = ['On hold', 'Closed', 'Cancelled'].includes(I.display && I.display.word);
+    const states = stopped ? [['active', 'lifecycleReopen']] : [['on-hold', 'lifecycleHold'], ['closed', 'lifecycleClose'], ['cancelled', 'lifecycleCancel']];
+    for (const [st, key] of states) items.push({ label: COPY[key], onSelect: () => lifecycle(st) });
+    items.push({ label: COPY.sheet.changeAnchor, onSelect: () => anchorSheet() });
+    items.push({ sep: true });
+    items.push({ label: COPY.sheet.copyCli, onSelect: () => copyCli() });
+    items.push({ label: COPY.sheet.exportBreakdown, onSelect: () => exportBreakdown() });
+    menu({ anchor, items, ariaLabel: COPY.sheet.menuMore(I.title) });
+  }
+
+  function lifecycle(st) {
+    const state = COPY.lifecycleState[st];
+    confirmSheet({
+      title: COPY.lifecycleTitle(state, 1), body: COPY.lifecycleBody(state, 1), reason: true,
+      onConfirm: async (reason) => {
+        const out = await setLifecycle(ws, slug, st, reason);
+        if (out && out.ok) { toast({ text: COPY.lifecycleDone(state, 1), timeout: 4000 }); changed(); reload(); }
+        return out;
+      },
+    });
+  }
+
+  function anchorSheet() {
+    const I = data.initiative;
+    const f = field({ label: COPY.sheet.anchorLabel, kind: 'text', value: I.anchor || '', placeholder: COPY.sheet.anchorHint, attrs: { 'data-in-anchor-input': '' } });
+    const err = el('p', { class: 'in-error', role: 'alert', 'data-in-error': '' });
+    err.hidden = true;
+    const rec = (data.files || []).find((x) => x.kind === 'record');
+    const file = rec ? rec.path : 'planning/initiatives/' + slug + '.md';
+    const fail = (why) => { err.textContent = COPY.refused(why); err.hidden = false; };
+    const sh = sheet({
+      mode: 'auto', title: COPY.sheet.anchorTitle, body: [el('p', { class: 'in-note' }, COPY.sheet.anchorBody), f, err], attrs: { 'data-in-sheet': 'anchor' },
+      actions: [
+        button({ label: COPY.cancel, variant: 'outline', onClick: () => sh.close() }),
+        button({
+          label: COPY.sheet.save, variant: 'primary', attrs: { 'data-in-save': '' },
+          onClick: async () => {
+            const next = f.control.value.trim();
+            if (!next) { fail(COPY.newForm.noAnchor); return; }
+            if (!ANCHOR_RE.test(next)) { fail(COPY.sheet.anchorShape); return; }
+            let text;
+            try { text = await readDoc(file, ws); } catch { fail(COPY.sheet.anchorNoRecord); return; }
+            const edited = withAnchor(text, next);
+            if (edited === null) { fail(COPY.sheet.anchorNoRecord); return; }
+            const out = await saveDoc({ ws, path: file, base: text, text: edited });
+            if (out && out.ok !== false && !out.error) { sh.close(); toast({ text: COPY.sheet.anchorSaved(next), timeout: 4000 }); changed(); reload(); } else fail((out && out.error) || 'The server did not answer.');
+          },
+        }),
+      ],
+    });
+  }
+
+  async function copyCli() {
+    const cmd = (data.cli && (data.cli.now || data.cli.export)) || 'pmos initiative now ' + slug;
+    try { await navigator.clipboard.writeText(cmd); toast({ text: COPY.sheet.copied(cmd), timeout: 4000 }); }
+    catch { toast({ text: COPY.sheet.copyFailed, tone: 'error', timeout: 6000 }); }
+  }
+
+  async function exportBreakdown() {
+    const out = await getExport(ws, slug);
+    const text = out && (out.markdown || out.text || out.export);
+    if (!out || !out.ok || typeof text !== 'string') { toast({ text: COPY.sheet.exportFailed((out && out.error) || 'no text came back'), tone: 'error', timeout: 6000 }); return; }
+    try { await navigator.clipboard.writeText(text); toast({ text: COPY.sheet.exported, timeout: 4000 }); }
+    catch { toast({ text: COPY.sheet.copyFailed, tone: 'error', timeout: 6000 }); }
+  }
+
+  /* ── drawing ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+  function drawStepper() {
+    const steps = data.stepper || [];
+    stepperHost.replaceChildren(el('ol', { class: 'in-stepper', 'aria-label': COPY.sheet.stages, 'data-in-stepper': '' }, steps.map((st) => el('li', {
+      class: 'in-stepper__step', 'data-state': st.state, 'data-step': st.id, 'aria-current': st.state === 'current' ? 'step' : null,
+    }, st.state === 'done' ? icon('check') : null, el('span', null, st.label)))));
+  }
+
+  function drawWaiting() {
+    const w = data.waiting || {};
+    const I = data.initiative;
+    const kids = [];
+    if (w.on === 'pm' || w.on === 'agent') {
+      kids.push(el('span', { class: 'in-waiting__text', 'data-in-waiting': w.on }, w.on === 'pm' ? COPY.sheet.waitingYou(w.act) : COPY.sheet.waitingAgent(w.act)));
+      const gate = w.action && w.action.kind === 'gate';
+      const label = gate ? COPY.sheet.openGate : COPY.sheet.handToAgent;
+      kids.push(button({
+        label, variant: 'primary', iconEnd: 'chevron-right', attrs: { 'data-in-action': gate ? 'gate' : 'hand' },
+        onClick: () => { s.close(); if (gate) legacyOpen(repo, slug); else openNewSession(slug, {}); },
+      }));
+    } else {
+      kids.push(el('span', { class: 'in-waiting__text', 'data-in-waiting': 'none' }, (I.display && I.display.word && ['Accepted', 'Handed off', 'On hold', 'Closed', 'Cancelled'].includes(I.display.word)) ? I.display.word : COPY.sheet.nothingOwed));
+    }
+    waitingHost.replaceChildren(el('div', { class: 'in-waiting' }, kids));
+  }
+
+  function drawCrumb() {
+    const I = data.initiative;
+    const hs = healthSignal(I.health);
+    const more = iconButton({
+      icon: 'ellipsis', ariaLabel: COPY.sheet.menuMore(I.title), expanded: false, onClick: (e) => openMore(e.currentTarget),
+      attrs: { 'aria-haspopup': 'menu', 'data-in-sheet-more': '' },
+    });
+    s.setHead(I.title, [I.lane, I.anchor, I.id].filter(Boolean).join(' · '));
+    crumb.replaceChildren(
+      badge({ text: horizonLabel(I.horizon), tone: 'outline', attrs: { 'data-in-horizon': I.horizon } }),
+      hs || el('span', { class: 'in-sheet__spacer' }),
+      more,
+    );
+  }
+
+  function drawTabs() {
+    tabsHost.replaceChildren(tabs({
+      variant: 'segmented', full: true, ariaLabel: COPY.sheet.tabs, value: tab,
+      items: [{ id: 'breakdown', label: COPY.sheet.breakdown }, { id: 'files', label: COPY.sheet.files }, { id: 'history', label: COPY.sheet.history }],
+      onChange: (id) => {
+        if (id === tab) return;
+        if (tab === 'breakdown') unmountBreakdown(panel);
+        tab = id;
+        drawTabs(); drawPanel();
+        const t = tabsHost.querySelector('[data-tab="' + id + '"]');
+        if (t) t.focus({ preventScroll: true });
+      },
+    }));
+  }
+
+  function drawPanel() {
+    if (!data) return;
+    if (tab === 'breakdown') { mountBreakdown(panel, { id: tabId, ws, slug }, { embedded: true }); return; }
+    if (tab === 'files') {
+      const files = data.files || [];
+      panel.replaceChildren(files.length ? el('div', { class: 'in-sheet__rows', role: 'list' }, files.map((f) => row({
+        title: f.label, meta: [f.path], openLabel: COPY.aria.open(f.label),
+        onOpen: () => { s.close(); openDoc(slug, f.path, f.label); },
+        attrs: { 'data-in-file': f.kind }, openAttrs: { 'data-in-file-open': f.kind },
+      }))) : empty({ text: COPY.sheet.noFiles }));
+      return;
+    }
+    const hist = data.history || [];
+    panel.replaceChildren(hist.length ? el('div', { class: 'in-sheet__rows', role: 'list' }, hist.map((h) => row({
+      title: h.text, meta: [dayOf(h.at), who(h.by)], attrs: { 'data-in-history': '' },
+    }))) : empty({ text: COPY.sheet.noHistory }));
+  }
+
+  function draw() {
+    drawCrumb(); drawStepper(); drawWaiting();
+    if (!tabsHost.firstChild) drawTabs();
+    drawPanel();
+  }
+
+  panel.replaceChildren(empty({ text: COPY.sheet.reading }));
+  reload();
+  return s;
+}

package/workspace/public/pm/initiatives-api.js

@@ -0,0 +1,59 @@
+/* pm/initiatives-api.js — how the Initiatives destination reads and writes (pm-os-absorb Run 2, slice 2D).
+ *
+ * Every call goes through pmGet and pmPost (http.js), so every press carries the per-launch nonce and the page sends no
+ * `by`, `via` or `at`: the server's writer sets them from the call path. The routes are 2C's (lib/routes-initiatives.js);
+ * the shapes of their answers are the goldens in fixtures/initiatives-api/. A call never throws: it answers
+ * `{ ok: false, error }` and the caller shows the error.
+ *
+ *   GET  /api/initiatives?ws=&view=roadmap|list      the Roadmap and the List
+ *   GET  /api/initiatives/<id>?ws=                   the sheet
+ *   GET  /api/initiatives/<id>/export?ws=            the breakdown as text
+ *   POST /api/placements       { ws, events: [placed…] }       every move, reorder and check-by
+ *   POST /api/initiatives      { ws, title, lane, anchor, intent?, from? }   the New-initiative form and a triage card (one body, no events)
+ *
+ * Every GET of /api/initiatives answers 202 { ok: false, pending: true } until the repository's first derivation lands (2C,
+ * about 260 ms a record); a read waits and asks again, so a caller sees the answer or a real error, never the 202.
+ *   POST /api/lifecycle        { ws, initiative_id, state, reason }   one initiative (the guarded route of 2A)
+ *                              { ws, ids: [≤20], state, reason }      several: one lifecycle-bulk grant (2A, 2B)
+ */
+
+import { pmGet, pmPost } from './http.js';
+
+const enc = encodeURIComponent;
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+/** A GET that waits out the first derivation: asks again every 1.2 s while the answer is `pending`, 40 times at most. */
+async function read(path) {
+  let a = await pmGet(path);
+  for (let k = 0; k < 40 && a && a.pending; k++) { await sleep(1200); a = await pmGet(path); }
+  return a && a.pending ? { ok: false, error: 'the workspace is still reading the repository' } : a;
+}
+export const getRoadmap = (ws) => read('/api/initiatives?ws=' + enc(ws) + '&view=roadmap');
+export const getList = (ws) => read('/api/initiatives?ws=' + enc(ws) + '&view=list');
+export const getSheet = (ws, id) => read('/api/initiatives/' + enc(id) + '?ws=' + enc(ws));
+export const getExport = (ws, id) => read('/api/initiatives/' + enc(id) + '/export?ws=' + enc(ws));
+
+/** The signature of an answer as one string, for sig-watch.js: the three ledgers it folds. */
+export const sigKey = (answer) => (answer && answer.sig ? JSON.stringify(answer.sig) : null);
+
+/** One placed line: horizon, `after` (null = top of the horizon), and a check-by only when the caller says so. */
+export const placed = (initiative, horizon, after, extra) => ({ ev: 'placed', initiative, horizon, after: after || null, ...(extra || {}) });
+export const place = (ws, events) => pmPost('/api/placements', { ws, events });
+/** The extra of a placed line that leaves Now: a check-by belongs to Now (C8), so a card that moves to Next or Later clears its date. Null when there is nothing to clear. */
+export const leaveNow = (row, horizon) => (row && row.check_by && horizon !== 'now' ? { check_by: null } : null);
+
+/** Keep (adopt) or drop an agent's proposal. The proposal is named by the eid of its line, in `proposal` (`eid` is a writer field); adopting is a PM-only act. */
+export const adopt = (ws, proposal) => pmPost('/api/placements', { ws, events: [{ ev: 'adopted', proposal }] });
+export const drop = (ws, proposal) => pmPost('/api/placements', { ws, events: [{ ev: 'dropped', proposal }] });
+
+/** A new initiative: from the form, or from a triaged capture (`from` is the capture's id). It lands in Later. */
+export const createInitiative = (ws, fields) => pmPost('/api/initiatives', { ws, ...fields });
+
+export const setLifecycle = (ws, id, state, reason) => pmPost('/api/lifecycle', { ws, initiative_id: id, state, reason: reason || '' });
+export const setLifecycleBulk = (ws, ids, state, reason) => pmPost('/api/lifecycle', { ws, ids, state, reason: reason || '' });
+
+/** The grant scopes a press can mint now (GET /api/pm-modules answers them as `grantScopes`); [] when unknown. */
+export async function grantScopes() {
+  const j = await pmGet('/api/pm-modules?want=dest-initiatives.js');
+  return Array.isArray(j && j.grantScopes) ? j.grantScopes : [];
+}