create-pmos 0.46.0 → 0.48.0

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

@@ -50,7 +50,8 @@
  */
 
 import { el, setChildren } from './dom.js';
-import { state, setState, FIXTURE } from './state.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 { addProductBody } from './panel-repos.js';
@@ -59,6 +60,10 @@ import { statusBanner, lifecycleNotes } from './status-banner.js';
 import { stepActions } from './next-step-ui.js';
 import { boardOf, records, currentProduct } from './board-read.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. */
+const cockpitLook = () => !LEGACY_LAYOUT_FLAG && !isMobile();
+
 /* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
 
 /** `{{ expr }}` — an interpolated value, wrapped the way the prototype's runtime wraps it. */
@@ -374,6 +379,22 @@ function noLadderBlock(ansBg, ansC, ansText, noLadderText) {
  * 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.
+ */
+function factsBlock(rec) {
+  const facts = (rec && rec.facts) || [];
+  if (!facts.length) return null;
+  return el('div', { 'data-facts': 'status-from-artifacts', style: 'border-top:1px solid var(--border);padding:8px 14px 8px' },
+    el('div', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-bottom:5px' }, iv('What the documents say')),
+    ...facts.map((f) => el('div', { style: 'display:grid;grid-template-columns:14px 104px 1fr;gap:6px;align-items:baseline;padding:2px 0;font-size:12px;line-height:1.45' },
+      el('span', { style: 'font-size:9px;color:' + (FX.TONE[f.tone] || FX.C.mut) }, iv('●')),
+      el('span', { style: 'color:var(--muted-foreground)' }, iv(f.label)),
+      el('span', { style: 'color:var(--foreground)' }, iv(f.text)),
+    )));
+}
+
 function phaseBlock(slug, rec) {
   const phases = FX.phasesFor(rec, slug);
   if (!phases.length) return null;
@@ -735,7 +756,7 @@ function syncSummary(sy, dest) {
 const ROLE_CHIP = { 'user stories': 'stories' };
 function roleChip(role) { return ROLE_CHIP[role] || role; }
 
-function artifactRow(slug, a) {
+function artifactRow(slug, a, noHead) {
   const key = FX.artKey(slug, a.path);
   // `hasOwnProperty`, not `||`. An unlinked artifact records `null` under its key, and a falsy check
   // would fall straight through to the server's `a.dest` and re-draw the link the PM just withdrew.
@@ -841,7 +862,7 @@ function artifactRow(slug, a) {
       }, '＋ ', iv(ls.l))),
     );
 
-    return el('div', { style: 'min-width:0' }, head, linkRow, openHere ? destForm(openHere, '') : null);
+    return el('div', { style: 'min-width:0' }, noHead ? null : head, linkRow, openHere ? destForm(openHere, '') : null);
   }
 
   // Linked: the destination pill, the sync button, the PM's own controls, and the status line —
@@ -909,7 +930,7 @@ function artifactRow(slug, a) {
     panel = realSyncPanel(slug, a, key, dest);
   }
 
-  return el('div', { style: 'min-width:0' }, head, pillRow, openHere ? destForm(openHere, dest.target) : null, panel);
+  return el('div', { style: 'min-width:0' }, noHead ? null : head, pillRow, openHere ? destForm(openHere, dest.target) : null, panel);
 }
 
 /**
@@ -1139,6 +1160,98 @@ function footer(rec) {
 
 /* ── the `dInit` branch, assembled in the prototype's order ─────────────────────────────────── */
 
+/* ── the cockpit look: the mockup's title block and phase rows (planning/design/cockpit-mockup/WsA.dc.html) ────────────────── */
+
+const CK_BADGE = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;color:var(--foreground);white-space:nowrap';
+const CK_SEP = () => el('div', { style: 'height:1px;background:var(--border)' });
+
+/** Title, summary and chips: the lane, the anchor and the flow, as pills. */
+function cockpitTitle(name, tag, pills) {
+  return [
+    el('div', { style: 'font:600 17px var(--sans);overflow-wrap:anywhere' }, iv(name)),
+    el('div', { style: 'color:var(--muted-foreground)' }, iv(tag)),
+    el('div', { style: 'display:flex;gap:6px;flex-wrap:wrap' }, pills.map((pl) => el('span', { style: CK_BADGE }, iv(pl.t)))),
+  ];
+}
+
+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. */
+function blockerCard(b) {
+  if (cockpitLook()) {
+    const said = el('span', { style: 'color:var(--destructive)' }, iv(b.label + ' blocked' + (b.evidence ? ': ' + b.evidence : '')));
+    return el('div', {
+      'data-cockpit': 'blocker',
+      style: 'border:1px solid color-mix(in oklab, var(--destructive) 50%, transparent);background:color-mix(in oklab, var(--destructive) 8%, transparent);border-radius:8px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px',
+    },
+      b.next
+        ? el('div', { style: 'display:flex;flex-direction:column;gap:4px;min-width:0' }, said,
+          el('span', { style: 'color:var(--muted-foreground);font-size:12px;line-height:1.5' }, iv('next: ' + b.next)))
+        : said,
+      el('span', { 'data-cockpit': 'grant-slot', 'aria-hidden': 'true', style: 'flex:none;width:0;height:30px' }),
+    );
+  }
+  return el('div', {
+    'data-cockpit': 'blocker',
+    style: 'border:1px solid color-mix(in oklab, var(--destructive) 50%, transparent);background:color-mix(in oklab, var(--destructive) 8%, transparent);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px',
+  },
+    el('span', { style: 'color:var(--destructive);font-size:13px' }, iv(b.label + ' blocked' + (b.evidence ? ': ' + b.evidence : ''))),
+    b.next ? el('span', { style: 'color:var(--muted-foreground);font-size:12px;line-height:1.5' }, iv('next: ' + b.next)) : null,
+  );
+}
+
 function initBody(slug) {
   const rec = slug ? records()[slug] : null;
   if (!rec) return [noneBody()];
@@ -1153,7 +1266,12 @@ function initBody(slug) {
     return out;
   }
 
-  out.push(headerBlock(slug, rec.tag || '', rec.pills || [], rec.crumb || null, lanePicker(slug, rec)));
+  const ck = cockpitLook();
+  if (ck) return cockpitInitBody(slug, rec);
+  {
+    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 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); } }
 
@@ -1170,8 +1288,9 @@ function initBody(slug) {
   const nextB = nextStepsBlock(slug, rec);
   if (nextB) out.push(nextB);
 
-  const phases = phaseBlock(slug, rec);
-  if (phases) out.push(phases);
+  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)' },
     linksRow(slug),
@@ -1182,6 +1301,70 @@ function initBody(slug) {
   return out;
 }
 
+/* ── the cockpit's initiative (Run 4: the mockup's column, section for section) ─────────────────────────────────────────────
+ * The detail host is the mockup's column: 16px padding and a 12px gap between its sections (renderDetail sets that). In order:
+ * title, summary, chips, the blocker card, a rule, the phases, then what the mockup does not draw (the anchor line, the lane picker,
+ * the status, the sessions, the next steps, the facts), a rule, the artifacts, the links and the derivation line. A section with
+ * nothing to show is not drawn, so it leaves no gap. The sections the mockup does not draw were laid out for the full width of the
+ * 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 more = [crumbBlock(rec.crumb || null), lanePicker(slug, rec)].filter(Boolean);
+  if (more.length) out.push(el('div', null, more));
+  const wide = [];
+  { const sb = statusBanner(repoOf(slug), slug, rec); if (sb) wide.push(sb); }
+  { const lc = lifecycleRow(repoOf(slug), slug); if (lc) { wide.push(lc); const ln = lifecycleNotes(rec); if (ln) wide.push(ln); } }
+  if (rec.noLadder) {
+    const ansC = FX.TONE[(rec.answer && rec.answer.tone) || 'info'] || FX.C.mut;
+    wide.push(...noLadderBlock(FX.wash(ansC), ansC, (rec.answer && rec.answer.text) || '', rec.noLadder));
+  }
+  { const sess = sessionsBlock(slug); if (sess) wide.push(sess); }
+  { const nextB = nextStepsBlock(slug, rec); if (nextB) wide.push(nextB); }
+  { const fb = factsBlock(rec); if (fb) wide.push(fb); }
+  if (wide.length) out.push(el('div', { style: FULL }, wide));
+  out.push(CK_SEP(), cockpitArtifacts(slug, rec));
+  // The links row's ＋ controls record a reference through the server; the fixture has no server and no links, so it has none.
+  const links = (rec.links || []).length || ((state.initLinks || {})[slug] || []).length || !FIXTURE ? linksRow(slug) : null;
+  if (links) out.push(el('div', { style: FULL + ';border-top:1px solid var(--border)' }, links));
+  // The derivation line says which working tree the panel was read from and when. The fixture read none, so it has no line.
+  if (!FIXTURE) out.push(el('div', { style: 'margin:auto -16px -16px' }, footer(rec)));
+  return out;
+}
+
+/** The mockup's artifacts: a label, then a row per artifact — its role, its path — with the artifact's link and sync controls
+ * under the row (`data-art-links`). The mockup shows a sync badge in the row ("⇄ in sync"); the app never claims that, because it
+ * has never compared the two documents (see SYNC_NOT_A_SYNC), so the row says what is recorded through the controls instead. */
+const CK_LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
+function cockpitArtifacts(slug, rec) {
+  const arts = rec.arts || [];
+  const rows = [];
+  for (const a of arts) {
+    rows.push(el('button', {
+      onClick: () => openDoc(slug, a.path, a.role), 'data-art-row': a.path, title: a.path,
+      style: 'display:flex;align-items:center;gap:8px;width:100%;text-align:left', hover: 'background:var(--accent)',
+    },
+      el('span', { style: CK_BADGE + ';font-family:var(--mono)' }, iv(roleChip(a.role))),
+      el('span', { 'data-art-path': '', style: 'flex-grow:1;min-width:0;color:var(--muted-foreground);font:11px var(--mono)' }, iv(shortPath(a.path))),
+    ));
+    rows.push(el('div', { 'data-art-links': a.path }, artifactRow(slug, a, true)));
+  }
+  if (!arts.length) rows.push(el('span', { style: 'font-size:11.5px;color:var(--muted-foreground);font-style:italic' }, 'none filed'));
+  const conv = conversationsBlock(slug, rec), git = gitFilesBlock(slug, rec);
+  return el('div', { 'data-cockpit': 'artifacts', style: 'display:flex;flex-direction:column;gap:6px' },
+    el('div', { style: CK_LBL }, 'Artifacts'), rows, conv, git);
+}
+
+/** A path as the mockup writes one: whole when it is short, else its first 24 characters, an ellipsis and its last 7, so the folder and
+ * the end of the name both stay readable ("planning/prd/ooh-weather…-prd.md"). The row's tooltip carries the whole path. */
+export function shortPath(p) {
+  const s0 = String(p || '');
+  return s0.length <= 32 ? s0 : s0.slice(0, 24) + '…' + s0.slice(-7);
+}
+
 /* ── `dNone` (lines 838–840) ────────────────────────────────────────────────────────────────── */
 
 function noneBody() {
@@ -1439,7 +1622,26 @@ export function renderDetail(host) {
   else if (kind === 'none') body = [noneBody()];
   else body = modeDetailBody(kind);
 
-  return setChildren(host, [stickyHeader, ...body]);
+  // 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
+  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;
+  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]);
+  }
+  return setChildren(host, bare ? body : [stickyHeader, ...body]);
 }
 
 export default renderDetail;

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

@@ -96,7 +96,7 @@ function baseGroups(product) {
 }
 
 /** GROUPS (lines 1425–1430) — user groups appended, user KRs and user initiatives folded in. */
-function groupsFor(product) {
+export function groupsFor(product) {
   const extraGroups = (state.userGroups && state.userGroups[product]) || [];
   return [...baseGroups(product), ...extraGroups].map((g) => {
     const extra = (state.addedInits && state.addedInits[product + '|' + g.gid]) || [];
@@ -117,10 +117,10 @@ function firstSlugOf(product) {
   return g0 && g0.slugs && g0.slugs.length ? g0.slugs[0] : null;
 }
 
-const selectedSlug = () => (state.sel !== null && state.sel !== undefined ? state.sel : firstSlugOf(currentProduct()));
+export const selectedSlug = () => (state.sel !== null && state.sel !== undefined ? state.sel : firstSlugOf(currentProduct()));
 
 /** sessionsOf (line 1398) — a record that failed to read has no sessions, it does not throw. */
-function sessionsOf(slug, DATA) {
+export function sessionsOf(slug, DATA) {
   const i = DATA[slug];
   if (!i || i.readError) return [];
   return [...(i.sessions || []), ...((state.extraSess && state.extraSess[slug]) || [])];
@@ -157,7 +157,7 @@ function liveSessions() {
  * why this returns the whole shape rather than just the map: a running agent PMOS cannot attribute
  * still has to be visible somewhere, and dropping it was half the defect this fixes.
  */
-function attribution() {
+export function attribution() {
   const empty = { byInitiative: {}, via: {}, unattributed: [] };
   if (FIXTURE) return empty;
   const ws = WS();
@@ -172,7 +172,7 @@ function attribution() {
  * `onBoard` is what stops a tab or a working tree belonging to ANOTHER repository putting a row on
  * this repository's board — `slugProduct()` is the same map panel 4 scopes its tabs by.
  */
-function workingSet(attr, product) {
+export function workingSet(attr, product) {
   if (FIXTURE) return [];
   const ws = WS();
   if (!ws) return [];
@@ -198,7 +198,7 @@ function workingSet(attr, product) {
  */
 const HASH = ['#', 'var(--muted-foreground)', ''];
 
-function leadOf(slug, live) {
+export function leadOf(slug, live) {
   const rows = live[slug];
   if (!rows || !rows.length) return HASH;
   const ss = SS();
@@ -397,7 +397,7 @@ function groupNode(g, product) {
  * knowledge of what the session is for into a recorded declaration, which is the only way a session
  * started before this field existed can ever join an initiative.
  */
-function orphanRows(rows) {
+export function orphanRows(rows) {
   const ss = SS();
   const ws = WS();
   const head = el('div', {
@@ -451,7 +451,7 @@ function orphanRows(rows) {
  * `state.extraSess`, the sessions this window started, which have no server row until the next poll.
  * `seen` is what stops one session arriving twice when both paths find it.
  */
-function searchHits(q, DATA, live) {
+export function searchHits(q, DATA, live) {
   const hits = [];
   if (!q) return hits;
   const seen = new Set();
@@ -483,7 +483,7 @@ function searchHits(q, DATA, live) {
   return hits.slice(0, 8);
 }
 
-function hitNode(ht) {
+export function hitNode(ht) {
   return el('button', {
     onClick: ht.on,
     style: 'display:block;width:100%;padding:6px 12px;min-height:40px',