create-pmos 0.52.0 → 0.53.0

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

@@ -8,9 +8,8 @@
  *
  * ── 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
+ * I open? Top to bottom: the slug + tag + pills header, 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 ─────────────────────────────────────────────
@@ -22,11 +21,10 @@
  *    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.
+ * 2. NOTHING DERIVABLE IS STORED (D33). Link lists and the footer line are all computed at read time,
+ *    every render, from the initiative record plus the state maps the prototype keeps (`initLinks`,
+ *    `artLinks`, `artSyncOpen`/`artSyncState`). The work itself (items, their state) is the Breakdown's;
+ *    the phases with synthetic rung tasks are cut (R29), and so is the Task tab that opened them.
  *
  * ── Where the data comes from ───────────────────────────────────────────────────────────────
  * Fixture mode reads `fixture.js` directly. Normal mode is the same code path with the optional
@@ -53,12 +51,15 @@ import { el, setChildren } from './dom.js';
 import { state, setState, FIXTURE, LEGACY_LAYOUT_FLAG } from './state.js';
 import { isMobile } from './mobile.js';
 import * as FX from './fixture.js';
-import { openDoc, openTab, openTerm, fileNewModel } from './panel-initiatives.js';
+import { openDoc, openTerm, fileNewModel } from './panel-initiatives.js';
 import { addProductBody } from './panel-repos.js';
 import { lifecycleRow } from './lifecycle.js';
 import { statusBanner, lifecycleNotes } from './status-banner.js';
 import { stepActions } from './next-step-ui.js';
 import { boardOf, records, currentProduct } from './board-read.js';
+import { breakdownEntry } from './panel-breakdown.js';
+import { askConfirm } from './dialogs.js';
+import { button } from './primitives.js';
 
 /** The cockpit's own look of this panel (workspace-cockpit-nav): the mockup's header, chips and phase rows. A phone and `?layout=legacy`
  * keep the prototype's look, which the older suites and the phone still read. */
@@ -92,13 +93,6 @@ function sibling(key, path) {
   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
@@ -310,8 +304,10 @@ function lanePicker(slug, rec) {
       onChange: async (e) => {
         const next = e.target.value;
         if (next === rec.lane) return;
-        const ok = typeof window === 'undefined' || !window.confirm ? true
-          : window.confirm('Change “' + slug + '” from the ' + rec.lane + ' lane to the ' + next + ' lane?\n\nThe lane decides which steps the workflow ladder requires (spec, rubric, explainer, …). Only the lane: line of the record changes; the steps are re-derived and some may show as missing.');
+        const ok = await askConfirm({
+          title: 'Change “' + slug + '” to the ' + next + ' lane?', confirmLabel: 'Change lane',
+          body: 'Change “' + slug + '” from the ' + rec.lane + ' lane to the ' + next + ' lane?\n\nThe lane decides which steps the workflow ladder requires (spec, rubric, explainer, …). Only the lane: line of the record changes; the steps are re-derived and some may show as missing.',
+        });
         if (!ok) { e.target.value = rec.lane; return; }
         const data = sibling('data', './data.js');
         const out = data && data.setInitiativeLane ? await data.setInitiativeLane(slug, next) : null;
@@ -369,16 +365,6 @@ function noLadderBlock(ansBg, ansC, ansText, 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.
- */
 /**
  * What the documents say, beside the ladder and never in it (status-from-artifacts, Run 1). One plain
  * line each, with its basis. A flag colours its own dot only; no phase, count or total reads it.
@@ -397,55 +383,6 @@ function factsBlock(rec) {
     )));
 }
 
-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.
  *
@@ -633,10 +570,7 @@ function linksRow(slug) {
         style: 'width:100%;font-family:var(--mono);font-size:11.5px;padding:6px 8px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
       }),
       el('div', { style: 'display:flex;gap:6px;margin-top:8px;flex-wrap:wrap' },
-        el('button', {
-          onClick: () => submitTyped(openSrc, read()),
-          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',
-        }, 'record this reference'),
+        button({ label: 'record this reference', variant: 'primary', size: 'sm', onClick: () => submitTyped(openSrc, read()) }),
         resolver && el('button', {
           onClick: () => askSessionToResolve(slug, openSrc, resolver, read()),
           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)',
@@ -829,10 +763,7 @@ function artifactRow(slug, a, noHead) {
       style: 'width:100%;font-family:var(--mono);font-size:11px;padding:5px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
     }),
     el('div', { style: 'display:flex;gap:6px;margin-top:7px;flex-wrap:wrap' },
-      el('button', {
-        onClick: () => submit(kind),
-        style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500',
-      }, 'record'),
+      button({ label: 'record', variant: 'primary', size: 'sm', onClick: () => submit(kind) }),
       el('button', {
         onClick: () => setState((s) => ({ artLinkForm: { ...s.artLinkForm, [key]: null } })),
         style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:transparent;border:1px solid var(--border);color:var(--muted-foreground)',
@@ -917,10 +848,7 @@ function artifactRow(slug, a, noHead) {
       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'),
+        button({ label: 'repo is source → push', variant: 'primary', size: 'sm', disabled: inert, onClick: decide(FX.artSyncPushed) }),
         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,
@@ -972,14 +900,7 @@ function realSyncPanel(slug, a, key, dest) {
       })));
   };
 
-  const btn = (label, primary, onClick) => el('button', {
-    onClick,
-    style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;'
-      + (primary
-        ? 'background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500'
-        : 'background:var(--secondary);border:1px solid var(--border);color:var(--foreground)'),
-    hover: primary ? null : 'border-color:var(--ring)',
-  }, label);
+  const btn = (label, primary, onClick) => button({ label, variant: primary ? 'primary' : 'outline', size: 'sm', onClick });
 
   return 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)' },
@@ -1177,58 +1098,6 @@ function cockpitTitle(name, tag, pills) {
   ];
 }
 
-const CK_PH_DOT = { done: 'var(--success)', blocked: 'var(--destructive)', doing: 'var(--info)', todo: 'var(--muted-foreground)' };
-
-/** The phases as the mockup draws them: a row per phase with its count, its tasks beneath while it is open. */
-function phaseBlockCockpit(slug, rec) {
-  const phases = FX.phasesFor(rec, slug);
-  if (!phases.length) return null;
-  const collP = state.collapsedPhases || {};
-  const repo = repoOf(slug);
-  /* Run 4 (the mockup): only the phase the initiative is at opens by itself — the same pointer the breadcrumb uses (the first
-   * blocked step, else the current one). Every other phase shows its row and its count, and opens on a click. A phase the PM has
-   * opened or folded keeps that choice (`collapsedPhases` holds true or false for it). */
-  const stepAt = Array.isArray(rec.steps) ? FX.targetStepIndex(rec.steps) : -1;
-  const atKey = stepAt >= 0 && rec.steps[stepAt] ? rec.steps[stepAt].k : null;
-  const anyTaskTab = (state.tabs || []).some((t) => t.id === state.active && t.kind === 'task' && t.slug === slug);
-  return el('div', { 'data-cockpit': 'phases', style: 'display:flex;flex-direction:column;gap:2px' }, phases.map((ph) => {
-    const pkey = slug + '|' + ph.key;
-    const open = Object.prototype.hasOwnProperty.call(collP, pkey) ? !collP[pkey] : ph.key === atKey;
-    // the task the initiative is at: the first blocked (else in-progress) task of that phase, marked while no task tab is in front
-    const atTask = ph.key === atKey && !anyTaskTab ? ph.tasks.findIndex((t) => t.status === 'blocked') : -1;
-    const atIdx = atTask >= 0 ? atTask : (ph.key === atKey && !anyTaskTab ? ph.tasks.findIndex((t) => t.status === 'doing') : -1);
-    const head = el('button', {
-      onClick: () => setState((s) => ({ collapsedPhases: { ...s.collapsedPhases, [pkey]: open } })),
-      style: 'display:flex;align-items:center;gap:8px;min-height:32px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;width:100%',
-    },
-      el('span', null, open ? '▾' : '▸'),
-      el('span', { style: 'width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:' + (CK_PH_DOT[ph.status] || CK_PH_DOT.todo) }),
-      ph.label.charAt(0).toUpperCase() + ph.label.slice(1),
-      el('span', { style: 'margin-left:auto;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 || ti === atIdx;
-      const [glyph, 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,
-        }),
-        'aria-current': ti === atIdx ? 'step' : null,
-        style: 'display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px 0 24px;border-radius:8px;font:400 13px var(--sans);text-align:left;width:100%;background:' + (active ? 'var(--accent)' : 'transparent'),
-        hover: 'background:var(--accent)',
-      },
-        el('span', { style: 'color:' + color }, glyph),
-        el('span', { style: 'flex-grow:1' }, iv(t.title)),
-        el('span', { style: 'color:var(--muted-foreground)' }, '↗'),
-      );
-    }) : [];
-    return [head, rows];
-  }));
-}
-
 /** The blocker card (workspace-cockpit-nav): drawn only when a rung of the ladder is blocking, in the engine's own words. The cockpit
  * draws it as the mockup's row: the words on the left, and on the right the slot of the Grant button, which stays empty until the
  * grants ledger behind it exists (PRD Q3) — the slot keeps the card's height, so nothing moves when the button arrives. */
@@ -1275,6 +1144,7 @@ function initBody(slug) {
     out.push(headerBlock(slug, rec.tag || '', rec.pills || [], rec.crumb || null, lanePicker(slug, rec)));
     if (rec.blocker) out.push(el('div', { style: 'margin:12px 14px 0' }, blockerCard(rec.blocker)));
   }
+  { const bd = breakdownEntry(slug, rec, repoOf(slug)); if (bd) out.push(bd); }
   { const sb = statusBanner(repoOf(slug), slug, rec); if (sb) out.push(sb); }
   { const lc = lifecycleRow(repoOf(slug), slug); if (lc) { out.push(lc); const ln = lifecycleNotes(rec); if (ln) out.push(ln); } }
 
@@ -1291,8 +1161,6 @@ function initBody(slug) {
   const nextB = nextStepsBlock(slug, rec);
   if (nextB) out.push(nextB);
 
-  if (!ck) { const phases = phaseBlock(slug, rec); if (phases) out.push(phases); }
-
   { const fb = factsBlock(rec); if (fb) out.push(fb); }
 
   out.push(el('div', { style: 'border-top:1px solid var(--border)' },
@@ -1312,10 +1180,9 @@ function initBody(slug) {
  * column, so they keep it (`FULL`). */
 const FULL = 'margin:0 -16px';
 function cockpitInitBody(slug, rec) {
-  const ph = phaseBlockCockpit(slug, rec);
   const out = [...cockpitTitle(slug, rec.tag || '', rec.pills || [])];
   if (rec.blocker) out.push(blockerCard(rec.blocker));
-  if (ph) out.push(CK_SEP(), ph);
+  { const bd = breakdownEntry(slug, rec, repoOf(slug)); if (bd) out.push(bd); }
   const more = [crumbBlock(rec.crumb || null), lanePicker(slug, rec)].filter(Boolean);
   if (more.length) out.push(el('div', null, more));
   const wide = [];
@@ -1567,10 +1434,7 @@ function fileNewBody() {
   }
 
   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)),
+    button({ label: nw.createLabel, variant: 'primary', onClick: nw.onCreate }),
   ));
 
   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)' },
@@ -1625,25 +1489,14 @@ export function renderDetail(host) {
   else if (kind === 'none') body = [noneBody()];
   else body = modeDetailBody(kind);
 
-  // the cockpit draws an initiative without the panel's own title bar (the top bar's breadcrumb names it); its fold control returns with Focus
+  // the cockpit draws an initiative without the panel's own title bar (the top bar's breadcrumb names it)
   const bare = cockpitLook() && kind === 'init';
-  /* The cockpit's column (outside Focus) is the mockup's: the page's own background, and for an initiative 16px of padding and a 12px
-   * gap between sections. The legacy shell, a phone and Focus keep the panel's sidebar fill and draw their own padding. */
-  const ckCol = cockpitLook() && !state.layoutFocus;
+  /* The cockpit's column is the mockup's: the page's own background, and for an initiative 16px of padding and a 12px
+   * gap between sections. The legacy shell and a phone keep the panel's sidebar fill and draw their own padding. */
+  const ckCol = cockpitLook();
   host.style.background = ckCol ? 'transparent' : 'var(--sidebar)';
   host.style.padding = ckCol && bare ? '16px' : '';
   host.style.gap = ckCol && bare ? '12px' : '';
-  if (bare && state.layoutFocus) {
-    // Focus (Run 2): the detail is a 360px slice with a sticky bar that names what is asked of the PM and leads back to the lists
-    const slug = selectedSlug();
-    const rows = (state.statuses && state.statuses[state.product]) || {};
-    const key = window.PMOSStatusGroups ? window.PMOSStatusGroups.keyOf(rows[slug]) : 'unknown';
-    const ask = key === 'needs-you' ? 'Needs you' : key === 'awaiting-acceptance' ? 'Awaiting your acceptance' : 'Nothing is asked of you';
-    const bar = el('div', { 'data-focus': 'bar', style: 'position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--sidebar)' },
-      el('span', { style: 'font:500 12px var(--sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, ask),
-      el('button', { 'data-focus': 'navigate', onClick: () => setState({ layoutFocus: false }), style: 'margin-left:auto;font:500 11px var(--sans);border:1px solid var(--border);border-radius:6px;padding:2px 8px', hover: 'background:var(--accent)' }, 'Navigate'));
-    return setChildren(host, [bar, ...body]);
-  }
   /* The cockpit's initiative has no title bar, so its fold control floats at the column's top right. The column folds to the 36px
    * strip app.js draws ("initiative ⟩"), which opens it again. Nothing in the column moves (design-parity names the control). */
   host.style.position = bare ? 'relative' : '';

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

@@ -866,27 +866,9 @@ export function renderInitiatives(host) {
     chip('objective', !byStatus, () => setState({ groupBy: 'objective' }), 'by-objective'),
     chip('status', byStatus, () => setState({ groupBy: 'status' }), 'by-status'),
     byStatus ? chip('active only', !!state.activeOnly, () => setState({ activeOnly: !state.activeOnly }), 'active-only') : null,
-    SG ? chip('what do these mean?', !!state.legendOpen, () => setState({ legendOpen: !state.legendOpen }), 'legend-toggle') : null,
     byStatus && statusErr ? el('span', { 'data-r16': 'status-error', style: 'flex-basis:100%;font-size:10.5px;color:var(--destructive)' }, 'status could not be read — ' + statusErr + ' (every initiative is under Unknown)') : null);
 
-  /* THE LEGEND (status-clarity R1). One row per group, read from the same table that files the rows, so what this
-   * says and where a row lands cannot disagree: what it means, the fact it is read from, who acts, what moves it,
-   * and what the PM can do by hand. */
-  const OWNER_WORD = { pm: 'you', agent: 'the agent', system: 'nobody (derived)' };
-  const legend = !FIXTURE && SG && state.legendOpen ? el('div', { 'data-r18': 'legend',
-    style: 'display:flex;flex-direction:column;gap:8px;margin:0 12px 8px;padding:8px 10px;border:1px solid var(--border);background:var(--secondary)' },
-    el('div', { style: 'font-size:11px;color:var(--muted-foreground);line-height:1.5' },
-      'A status is never typed. It is worked out again each time from the ledgers and git. You can only hold, close, cancel or reopen an initiative by hand.'),
-    SG.GROUPS.map((g) => el('div', { 'data-r18': 'legend-row', 'data-key': g.key, style: 'display:flex;flex-direction:column;gap:2px;padding-top:6px;border-top:1px solid var(--border)' },
-      el('div', { style: 'display:flex;gap:7px;align-items:baseline' },
-        el('span', { style: 'font-size:12px;font-weight:600;color:' + (STATUS_TONE[g.key] || 'var(--foreground)') }, g.label),
-        el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'acts: ' + (OWNER_WORD[g.owner] || g.owner))),
-      el('div', { style: 'font-size:11.5px;line-height:1.5;color:var(--foreground)' }, g.meaning),
-      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'read from: ' + g.source),
-      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'moves: ' + g.moves),
-      el('div', { style: 'font-size:10.5px;line-height:1.5;color:var(--muted-foreground)' }, 'you can: ' + g.pmCan)))) : null;
-
-  const kids = [header, searchBox, groupBar, legend];
+  const kids = [header, searchBox, groupBar];
   /* THE WORKING SET, pinned above the Objectives.
    *
    * It is `groupNode` — the same element, the same collapse key, the same forced-open-on-search

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

@@ -28,9 +28,11 @@ import { syncButton } from './lifecycle.js';
 import { treesBlock, branchForm, openBranchForm, treeNoteFor } from './panel-trees.js';
 import { state, setState, FIXTURE } from './state.js';
 import {
-  productsList, repoRow, firstSlugOf, MODE_META, SETTINGS_GROUPS, ADDABLE_PRODUCTS,
+  productsList, repoRow, firstSlugOf, ADDABLE_PRODUCTS,
   INGESTED_KNOW, INGEST_LOG_GITHUB, INGEST_LOG_LOCAL, INGEST_ALREADY,
 } from './fixture.js';
+import { askConfirm, askFields } from './dialogs.js';
+import { toast } from './primitives.js';
 
 /** An interpolated value, in the inline span the prototype's runtime puts it in. */
 const ip = (v) => el('span', null, v);
@@ -161,69 +163,6 @@ export function selectRepo(id) {
   }).catch(() => { /* an unreadable repository still selects; panel 3 reports the read */ });
 }
 
-/* ── settings & tools ────────────────────────────────────────────────────────────────────────
- * EXACTLY two groups, and no `workflow` entry. The prototype's `modeMeta` still carries `workflow`
- * because the mode exists in code, but it is deliberately absent from the drawer: a workflow is
- * decided by the agent at runtime, not configured by hand (PRD, panel-1 scope). The filter below is
- * belt and braces — it makes the absence a property of THIS module, so it cannot regress by someone
- * adding an id to the seed list.
- */
-/* overhaul-r1 R6.1 — in LIVE mode, a mode with no server behind it is not offered. `agents`,
- * `memory` and `connections` start empty and every edit is a client-only setState that no server
- * receives (modes.js `seedOr`), so they looked broken because they were. They come back in a later
- * release wired or replaced. Fixture mode keeps them: it is the prototype's recorded state, and the
- * design comparison reads it. Exported so the live-mode test can assert the list, not a screenshot. */
-export const UNBACKED_MODES = ['agent', 'connect'];   // mode ids (labels: agents · connections). `memory` left this list in R9 (D72): the repository's ledger backs it.
-/* overhaul-r4 — the PORTFOLIO mode joins "all repositories" in live mode only (the fixture drawer is the
- * prototype's, and the design comparison reads it). Its meta lives here, not in fixture.js, for the
- * same reason. */
-const META = Object.assign({}, MODE_META, { portfolio: ['▦', 'portfolio'], guide: ['?', 'guide'], validate: ['◉', 'validate'], today: ['☀', 'today'] });
-const LIVE_EXTRA = { 'all repositories': ['today', 'portfolio', 'guide', 'validate'] };
-const DRAWER_GROUPS = SETTINGS_GROUPS.map((g) => ({
-  label: g.label,
-  items: (FIXTURE ? [] : LIVE_EXTRA[g.label] || []).concat(
-    g.items.filter((id) => id !== 'workflow' && MODE_META[id] && (FIXTURE || !UNBACKED_MODES.includes(id)))),
-})).filter((g) => g.items.length);
-
-function drawerButton(id) {
-  const [glyph, label] = META[id];
-  const on = state.mode === id;
-  return el('button', {
-    onClick: () => setState({ mode: id, settingsOpen: false, col1: true }),
-    style: 'display:flex;align-items:center;gap:9px;width:100%;padding:7px 14px;min-height:38px;border-left:2px solid '
-      + (on ? 'var(--brand)' : 'transparent') + ';background:' + (on ? 'var(--accent)' : 'transparent')
-      + ';color:' + (on ? 'var(--foreground)' : 'var(--muted-foreground)'),
-    hover: 'background:var(--accent)',
-  },
-    el('span', { style: 'flex:none;width:16px;text-align:center;font-size:13px;line-height:1' }, ip(glyph)),
-    el('span', { style: 'font-size:12px' }, ip(label)),
-  );
-}
-
-function drawer() {
-  const kids = [];
-  if (state.settingsOpen) {
-    const groups = [];
-    for (const g of DRAWER_GROUPS) {
-      groups.push(el('div', {
-        style: 'padding:8px 14px 3px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)',
-      }, ip(g.label)));
-      for (const id of g.items) groups.push(drawerButton(id));
-    }
-    kids.push(el('div', { style: 'max-height:44vh;overflow-y:auto;border-bottom:1px solid var(--border)' }, groups));
-  }
-  kids.push(el('button', {
-    onClick: () => setState((s) => ({ settingsOpen: !s.settingsOpen })),
-    style: 'display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;min-height:44px;color:var(--muted-foreground)',
-    hover: 'color:var(--foreground);background:var(--accent)',
-  },
-    el('span', { style: 'flex:none;width:14px;text-align:center;font-size:14px' }, '⚙'),
-    el('span', { style: 'font-size:12px' }, 'settings & tools'),
-    el('span', { style: 'margin-left:auto;font-size:10px' }, ip(state.settingsOpen ? '▾' : '▸')),
-  ));
-  return el('div', { style: 'border-top:1px solid var(--border);flex:none' }, kids);
-}
-
 /* ── the rows ────────────────────────────────────────────────────────────────────────────────── */
 
 function repoButton(tuple, product) {
@@ -259,17 +198,29 @@ export function treesOf(name) {
   return dataMod && typeof dataMod.productTrees === 'function' ? dataMod.productTrees(name) : [];
 }
 
+/* A refusal is told twice: the legacy list draws repoNotice, and the frame's Settings page, which draws no notice, gets the toast. */
+function refused(name, text) {
+  setState({ repoNotice: { name, tone: 'bad', text } });
+  toast({ text, tone: 'error' });
+}
+
 export async function renameRepo(name) {
-  const win = typeof window !== 'undefined' && window.prompt ? window : null;
-  const label = win ? win.prompt('Rename “' + name + '” to:', name) : null;
-  if (label === null || !String(label).trim()) return;
-  // the collapsed rail shows an abbreviation; empty keeps (or restores) the one derived from the name
+  // the legacy rail shows an abbreviation; empty keeps (or restores) the one derived from the name
   const cur = dataMod.repoInitials ? dataMod.repoInitials(name) : null;
-  const ini = win.prompt('Abbreviation on the collapsed rail (up to 3 letters or digits; empty = derived from the name):', cur || '');
-  if (ini === null) return;
+  const answer = await askFields({
+    title: 'Rename “' + name + '”', confirmLabel: 'Rename',
+    fields: [
+      { key: 'label', label: 'Name', value: name },
+      { key: 'ini', label: 'Short name for the legacy rail: up to 3 letters or digits. Leave it empty to use the first letters of the name.', value: cur || '' },
+    ],
+  });
+  if (!answer) return;
+  const label = answer.label;
+  const ini = answer.ini;
+  if (!String(label).trim()) return;
   if (String(label).trim() === name && String(ini).trim() === (cur || '')) return;
   const out = await dataMod.renameRepository(name, String(label).trim(), String(ini).trim());
-  if (!out || out.ok === false) { setState({ repoNotice: { name, tone: 'bad', text: (out && out.error) || 'rename refused' } }); return; }
+  if (!out || out.ok === false) { refused(name, (out && out.error) || 'The rename was refused.'); return; }
   await connectData();
   setState({ product: String(label).trim(), repoNotice: null });
 }
@@ -312,19 +263,21 @@ async function switchProfile(name) {
     ? 'Switch “' + name + '” to document work?\n\nLanes offered: ' + lanesText(name, 'pm-artifacts') + '.\nThe ladder becomes route, anchor, brief, draft, review, approved, handed off — no contract, build, eval or explainer.'
     : 'Switch “' + name + '” to code work?\n\nLanes offered: ' + lanesText(name, 'product-code') + '.\nThe ladder returns to spec, contract, build, eval, explainer, acceptance.';
   const tail = '\n\nAn initiative whose lane is not in the new set is treated as the strictest lane (' + (toDocs ? 'a governed prd' : 'feature') + '). No initiative record is edited.\n\nThis ' + (toDocs ? 'writes' : 'removes') + ' the file .pmos-profile in the repository. It is a change for you to commit.';
-  const ok = typeof window === 'undefined' || !window.confirm ? true : window.confirm(msg + tail);
+  const ok = await askConfirm({ title: toDocs ? 'Switch “' + name + '” to document work?' : 'Switch “' + name + '” to code work?', body: msg + tail, confirmLabel: 'Switch' });
   if (!ok) return;
   const out = await dataMod.setRepoProfile(name, toDocs ? 'pm-artifacts' : 'product-code');
   if (!out || out.ok === false) { setState({ repoNotice: { name, tone: 'bad', text: (out && out.error) || 'the profile was not changed' } }); return; }
   setState({ repoNotice: { name, tone: null, text: 'now ' + (toDocs ? 'document work (pm-artifacts)' : 'code work (product-code)') + ' — .pmos-profile ' + (toDocs ? 'written' : 'removed') + '; commit it' } });
 }
 
-async function removeRepo(name) {
-  const ok = typeof window === 'undefined' || !window.confirm ? true
-    : window.confirm('Remove “' + name + '” from PMOS?\n\nThis forgets the repository and its worktree rows. No folder is deleted.');
+export async function removeRepo(name) {
+  const ok = await askConfirm({
+    title: 'Remove “' + name + '” from PMOS?', confirmLabel: 'Remove', danger: true,
+    body: 'This forgets the repository and its worktree rows. No folder is deleted.',
+  });
   if (!ok) return;
   const out = await dataMod.removeRepository(name);
-  if (!out || out.ok === false) { setState({ repoNotice: { name, tone: 'bad', text: (out && out.error) || 'remove refused' } }); return; }
+  if (!out || out.ok === false) { refused(name, (out && out.error) || 'The removal was refused.'); return; }
   realRepos = (realRepos || []).filter((t) => t[0] !== name);
   setState({ repoNotice: null });
 }
@@ -502,7 +455,7 @@ export function renderRepos(host) {
     ),
   );
 
-  setChildren(host, [header, scroll, drawer()]);
+  setChildren(host, [header, scroll]);
   return host;
 }
 
@@ -521,7 +474,7 @@ export function renderRepos(host) {
 const inputStyle = 'font-family:var(--mono);font-size:11.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px';
 const labelStyle = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-top:8px';
 const rowStyle = 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px';
-const goStyle = 'padding:5px 12px;min-height:30px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-size:12px;font-weight:500';
+const goStyle = 'padding:5px 12px;min-height:30px;background:var(--primary);color:var(--primary-foreground);font:500 12px var(--sans)';
 
 /**
  * A form field. `oninput` writes the value straight onto the state object WITHOUT a render — a
@@ -786,6 +739,3 @@ export function renderAddProduct(host) {
   return host;
 }
 
-/* Exposed for the browser suite: the drawer's exact shape is an acceptance criterion (two groups,
- * no `workflow`), and an assertion should be able to read it without scraping the DOM. */
-export const settingsGroups = () => DRAWER_GROUPS.map((g) => ({ label: g.label, items: [...g.items] }));