create-pmos 0.47.0 → 0.48.0

package/workspace/lib/typesafe-settings.js

@@ -97,16 +97,24 @@ function getRepo(stateDir, root) {
     // jev-claim-checks (D80): also ask Jev about changed claim pairs after each check. Default OFF, separate from
     // `consent` and `watch`; a request needs all of key, consent, watch and this.
     jev: !!(r && r.jev === true),
+    // jev-doc-categorizer (D82): ask Jev to categorize documents the local rules leave undetermined. Default OFF, separate
+    // from every other switch; a request needs key, consent and this.
+    categorize: !!(r && r.categorize === true),
+    // status-from-artifacts Run 2 (D83): also send the documents tied to an initiative for two status questions
+    // (is it a stub; does a tied note contradict a requirement). Default OFF, and only read when `jev` is on too.
+    status_read: !!(r && r.status_read === true),
+    // prompt-model-routing: classify prompts with Jev to choose a model tier. Default OFF; a request needs key, consent and this.
+    route: !!(r && r.route === true),
   };
 }
 
-function setRepo(stateDir, root, { consent, exclude, watch, jev }) {
+function setRepo(stateDir, root, { consent, exclude, watch, jev, categorize, route, status_read: statusRead }) {
   const cur = read(stateDir);
   const prev = getRepo(stateDir, root);
   const ex = Array.isArray(exclude)
     ? exclude.map((x) => String(x).trim().replace(/^\/+/, '')).filter((x) => x && !x.includes('..') && x.length <= 200).slice(0, MAX_EXCLUDES)
     : prev.exclude;
-  const repos = { ...cur.repos, [root]: { consent: typeof consent === 'boolean' ? consent : prev.consent, exclude: ex, watch: typeof watch === 'boolean' ? watch : prev.watch, jev: typeof jev === 'boolean' ? jev : prev.jev } };
+  const repos = { ...cur.repos, [root]: { consent: typeof consent === 'boolean' ? consent : prev.consent, exclude: ex, watch: typeof watch === 'boolean' ? watch : prev.watch, jev: typeof jev === 'boolean' ? jev : prev.jev, categorize: typeof categorize === 'boolean' ? categorize : prev.categorize, route: typeof route === 'boolean' ? route : prev.route, status_read: typeof statusRead === 'boolean' ? statusRead : prev.status_read } };
   return write(stateDir, { key: cur.key, repos });
 }
 

package/workspace/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package/workspace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "private": true,
   "description": "PMOS Terminal Workspace — local companion hosting real PTYs beside the library and gates (D62)",
   "license": "MIT",
@@ -10,12 +10,13 @@
   "scripts": {
     "start": "node server.js",
     "test": "node test.js && npm run test:modules",
-    "test:modules": "node proactive.test.js && node focus.test.js && node handoff.test.js && node repo-scan.test.js && node profiles.test.js && node external-linking.test.js && node story-artifacts.test.js && node no-network.test.js && node typesafe-validation.test.js && node claims.test.js && node jev-claims.test.js && node repo-watch.test.js && node fixture-parity.test.mjs && node markdown.test.mjs && node start-policy.test.js && node state-isolation.test.js && node sync.test.js && node schedule-cli.test.js && node initiative-surface.test.js && node guide.test.js && node next-step-actions.test.js && node kg.test.js && node proactive-prepare.test.js && node learn.test.js && node session-flag.test.js",
+    "test:modules": "node proactive.test.js && node focus.test.js && node handoff.test.js && node repo-scan.test.js && node profiles.test.js && node external-linking.test.js && node story-artifacts.test.js && node no-network.test.js && node typesafe-validation.test.js && node claims.test.js && node status-facts-panel.test.js && node jev-claims.test.js && node jev-categorize.test.js && node jev-status.test.js && node jev-route.test.js && node repo-watch.test.js && node fixture-parity.test.mjs && node markdown.test.mjs && node start-policy.test.js && node state-isolation.test.js && node sync.test.js && node schedule-cli.test.js && node initiative-surface.test.js && node guide.test.js && node next-step-actions.test.js && node kg.test.js && node doc-category.test.js && node doc-category-corrections.test.js && node proactive-prepare.test.js && node learn.test.js && node session-flag.test.js && node live-notes.test.js",
     "test:ui": "node ui-test.js",
-    "test:parity": "node design-parity.js --states",
+    "test:parity": "node design-parity.js --board=WsA",
+    "test:parity:four-panel": "node design-parity.js --states",
     "test:all": "npm test && npm run test:panels && npm run test:ui && npm run test:parity && npm run test:offline",
     "doctor": "node doctor.js",
-    "test:panels": "node pm-shell-test.js && node pm-repos-test.js && node pm-initiatives-test.js && node pm-detail-test.js && node pm-tabs-test.js && node pm-term-test.js && node pm-modes-test.js && node pm-r1-test.js && node pm-r2-test.js && node pm-r3-test.js && node pm-r4-test.js && node pm-r5-test.js && node pm-r6-test.js && node pm-r7-test.js && node pm-r8-test.js && node pm-r9-test.js && node pm-r10-test.js && node pm-r11-test.js && node pm-r12-test.js && node pm-r13-test.js && node pm-r14-test.js && node pm-r15-test.js && node pm-r16-test.js && node pm-r17-test.js && node pm-r16-test.js && node pm-r18-test.js && node pm-r19-test.js && node pm-r20-test.js && node pm-r21-test.js && node pm-r22-test.js && node pm-r23-test.js && node pm-r24-test.js && node pm-r25-test.js && node pm-r26-test.js",
+    "test:panels": "node pm-shell-test.js && node pm-repos-test.js && node pm-initiatives-test.js && node pm-detail-test.js && node pm-tabs-test.js && node pm-term-test.js && node pm-modes-test.js && node pm-r1-test.js && node pm-r2-test.js && node pm-r3-test.js && node pm-r4-test.js && node pm-r5-test.js && node pm-r6-test.js && node pm-r7-test.js && node pm-r8-test.js && node pm-r9-test.js && node pm-r10-test.js && node pm-r11-test.js && node pm-r12-test.js && node pm-r13-test.js && node pm-r14-test.js && node pm-r15-test.js && node pm-r16-test.js && node pm-r17-test.js && node pm-r16-test.js && node pm-r18-test.js && node pm-r19-test.js && node pm-r20-test.js && node pm-r21-test.js && node pm-r22-test.js && node pm-r23-test.js && node pm-r24-test.js && node pm-r25-test.js && node pm-r26-test.js && node pm-doc-category-test.js && node pm-r27-test.js && node pm-r28-test.js && node pm-r29-today-test.js && node pm-r29-portfolio-test.js && node pm-r29-knowledge-test.js && node pm-r29-memory-test.js && node pm-r29-skills-scheduled-test.js && node pm-r29-validate-guide-test.js && node pm-r29-reports-addrepo-test.js && node pm-r29-filespad-test.js && node pm-r29-newsession-alignment-test.js",
     "test:offline": "node offline-tarball.test.js"
   },
   "engines": {

package/workspace/public/pm/app.js

@@ -22,12 +22,17 @@
  */
 
 import { el, clear, setChildren } from './dom.js';
-import { state, setState, subscribe, flush, FIXTURE } from './state.js';
+import { state, setState, subscribe, flush, FIXTURE, LEGACY_LAYOUT_FLAG } from './state.js';
 /* The phone surface (≤760px). It owns its own chrome and decides which single panel is visible;
  * the shell's only part in it is to keep all four hosts mounted below the breakpoint and to hand
  * the module a repaint. See pm/mobile.js. */
 import { isMobile, mountMobile, applyMobile } from './mobile.js';
 
+/* The LEGACY layout is the three-column shell of column-layout: repositories with the list under them, the detail, the tabs, and
+ * a list that a mode (skills, memory …) replaces. A phone still draws it until Run 4 of workspace-cockpit-nav, and `?layout=legacy`
+ * draws it on a desktop so the suites of the panels it uses keep guarding them. It is not a setting: nothing offers it. */
+const legacyLayout = () => LEGACY_LAYOUT_FLAG || isMobile();
+
 /* ── derived labels (the prototype's two title maps, lines 1409 / 1699) ─────────────────────── */
 
 const MODE_TITLE = {
@@ -35,30 +40,38 @@ const MODE_TITLE = {
   knowledge: 'knowledge', agent: 'agents', memory: 'memory', connect: 'connections', focus: 'focus',
   portfolio: 'portfolio', guide: 'guide', validate: 'validate', today: 'today',
 };
+const modeTitle = () => MODE_TITLE[state.mode] || 'initiatives';
 const DETAIL_TITLE = {
   init: 'initiative', flow: 'workflow', sched: 'scheduled task', skill: 'skill', know: 'decision',
   agent: 'agent', mem: 'memory', prof: 'claude profile', intg: 'connection',
   addprod: 'add product', new: 'file new',
 };
 
-const modeTitle = () => MODE_TITLE[state.mode] || 'initiatives';
 const detailTitle = () => DETAIL_TITLE[(state.detail && state.detail.kind) || ''] || 'detail';
 
 /* Panels 1 and 2 are resizable: a drag handle on each right edge. The width is clamped, remembered
  * (state.js PERSIST) and reset by a double-click. Before this the columns were a fixed 210px / 280px and a
  * long repository or branch name was simply cut off. */
-const W0 = { min: 220, max: 560, def: 280 };
+const W_LEGACY = { min: 220, max: 560, def: 280 };
+/* The cockpit's list is 288px by default (the mockup's) and is resized and clamped the same way. */
+const W_COCKPIT = { min: 220, max: 560, def: 288 };
+const W0 = { get min() { return W_LEGACY.min; }, get max() { return W_LEGACY.max; }, get def() { return legacyLayout() ? W_LEGACY.def : W_COCKPIT.def; } };
 const clampW = (v, r) => (typeof v === 'number' && Number.isFinite(v) ? Math.min(r.max, Math.max(r.min, Math.round(v))) : r.def);
 const col0w = () => clampW(state.col0W, W0);
 
-/* THREE columns (column-layout): navigation, detail, tabs. Navigation is the repository list with the list of the
+/* workspace-cockpit-nav: on a desktop the body is FOUR columns — the 64px repository rail (a 65px track: the mockup draws the rail
+ * 64px wide with its 1px border outside that width, so the list starts at x=65), the list (288px), the detail (about
+ * 470px) and the tabs (the rest) — and the hosts keep the order they had. The rail is always drawn; `col1` folds the list to a 36px
+ * strip and `col2` folds the detail. The three-column shell below is what a PHONE still draws until Run 4.
+ *
+ * THREE columns (column-layout): navigation, detail, tabs. Navigation is the repository list with the list of the
  * current mode UNDER it (initiatives, or memory, skills, knowledge …). The detail opens in the second column, the
  * tabs fill the rest. The DOM still holds four hosts in the same order — repos, list, detail, tabs — and the grid
  * puts the list host under the repositories host (see placeHosts). Folded away, the navigation column is a 36px
  * rail; the list alone folds to a one-line bar under the repositories. */
-const gridCols = () =>
-  (state.col0 ? col0w() + 'px' : '36px') + ' ' +
-  (state.col2 ? 'minmax(420px,560px)' : '36px') + ' minmax(0,1fr)';
+const gridCols = (legacy, focus) => focus ? 'minmax(0,1fr) 360px' : legacy
+  ? (state.col0 ? col0w() + 'px' : '36px') + ' ' + (state.col2 ? 'minmax(420px,560px)' : '36px') + ' minmax(0,1fr)'
+  : '65px ' + (state.col1 ? col0w() + 'px' : '36px') + ' ' + (state.col2 ? 'minmax(420px,470px)' : '36px') + ' minmax(0,1fr)';
 
 /** The right-hand 7px of a column is its drag handle. It is a hit-test on the host, not an extra element:
  * the body grid is exactly four tracks and the panels repaint their own children. `key` is the state
@@ -142,43 +155,58 @@ function runningCount() {
  */
 const root = el('div', {
   'data-pm-theme': state.theme,
-  style: 'display:grid;grid-template-rows:44px minmax(0,1fr) 26px;height:100vh;overflow:hidden;background:var(--background);color:var(--foreground);font-family:var(--sans);font-size:13px;line-height:1.5',
+  style: 'display:grid;grid-template-rows:48px minmax(0,1fr) 28px;height:100vh;overflow:hidden;background:var(--background);color:var(--foreground);font-family:var(--sans);font-size:13px;line-height:1.5',
 });
 
+/* The legacy layout has no rail to hang the menu from, so its theme control stays where it was: in the top bar. */
 const themeBtn = el('button', {
   onClick: () => setState((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' })),
-  style: 'margin-left:auto;font-size:12px;color:oklch(0.85 0.01 214);padding:5px 12px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);min-height:30px',
-  hover: 'border-color:oklch(0.56 0.021 213.5)',
+  style: 'font-size:12px;color:var(--foreground);padding:5px 12px;border:1px solid var(--input);min-height:30px',
+  hover: 'border-color:var(--muted-foreground)',
 }, 'theme · dark');
+const crumb = el('span', { 'data-top': 'crumb', style: 'display:flex;align-items:center;gap:8px;color:var(--muted-foreground);min-width:0;overflow:hidden;white-space:nowrap' });
+const jump = el('button', {
+  onClick: () => { if (legacyLayout()) focusSearch(); else setState({ paletteOpen: true, menuOpen: false }); },
+  'data-top': 'jump', 'aria-label': 'jump to anything',
+  style: 'margin-left:auto;display:flex;align-items:center;gap:8px;box-sizing:content-box;border:1px solid var(--input);border-radius:8px;height:32px;padding:0 12px;min-width:300px;color:var(--muted-foreground);font:13px var(--sans);line-height:1.45',
+  hover: 'background:var(--accent)',
+  html: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>Jump to anything<span style="margin-left:auto;font:11px var(--mono)">⌘K</span>',
+});
+const liveBadge = el('span', { style: 'font:500 11px var(--sans);border:1px solid transparent;border-radius:999px;padding:0 8px;line-height:18px;white-space:nowrap;background:color-mix(in oklab, var(--success) 16%, transparent);color:var(--success)' }, '● live · local');
 
 const topBar = el('div', {
-  style: 'display:flex;align-items:center;gap:12px;padding:0 12px;background:oklch(0.1 0.004 228.8);color:oklch(0.987 0.002 197.1);border-bottom:1px solid oklch(1 0 0 / 10%)',
+  'data-shell': 'top',
+  // its fill is set per layout in render(): none on the cockpit (as on the mockup), --background on the legacy shell
+  style: 'display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--border);color:var(--foreground);min-width:0;line-height:1.45',
 },
-  el('span', { style: 'display:grid;place-items:center;width:24px;height:24px;background:oklch(0.488 0.243 264.376);font-size:14px;line-height:1' }, '◎'),
-  el('span', { style: 'font-weight:600;letter-spacing:.02em' }, 'PMOS'),
-  el('span', { style: 'color:oklch(0.723 0.014 214.4);font-size:12px' }, 'PM Operating System · workspace'),
-  el('span', { style: 'display:flex;gap:6px;align-items:baseline;font-family:var(--mono);font-size:11px;color:oklch(0.76 0.17 152)' },
-    el('span', { style: 'font-size:9px' }, '●'), 'LIVE · local'),
-  themeBtn,
+  el('span', { style: 'font-weight:600;font-size:15px' }, 'PMOS'),
+  crumb,
+  jump,
+  liveBadge,
 );
 
-const statusLeft = el('span', null, 'local · persistent server · 0 sessions running');
+const statusLeft = el('span', null, 'local · 0 sessions running');
 const statusBar = el('div', {
-  style: 'display:flex;align-items:center;padding:0 12px;background:oklch(0.1 0.004 228.8);color:oklch(0.6 0.02 213);font-size:11px;border-top:1px solid oklch(1 0 0 / 10%)',
+  'data-shell': 'status',
+  style: 'display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:var(--muted-foreground);font:11px var(--mono);border-top:1px solid var(--border)',
 },
   statusLeft,
-  el('span', { style: 'margin-left:auto' }, 'sessions survive detach · ⌘K search · Esc closes tab'),
+  el('span', null, '⌘K jump · Esc closes tab'),
 );
+/* The rail's menu is drawn into this host, a sibling of the body so it can float over all four columns. */
+const menuHost = el('div', { 'data-shell': 'menu', style: 'display:contents' });
+const paletteHost = el('div', { id: 'pm-palette', 'data-shell': 'palette', style: 'display:contents' });
 
 /* The body grid's own geometry, in one place so the initial build and every repaint below cannot
  * disagree. The implicit ROW is stated explicitly as `minmax(0,1fr)` for the same reason the root's
  * middle track is: an auto row is floored at its items' min-content height, and one tall panel
  * would push the grid taller than the box it was given. */
-// Two rows on a desktop (repositories, then the list under them), one on a phone, where the hosts are shown one at a time.
-const BODY_GRID_STYLE = (phone) =>
-  'display:grid;grid-template-columns:' + gridCols() + ';grid-template-rows:' + (phone ? 'minmax(0,1fr)' : 'auto minmax(0,1fr)') + ';min-height:0;overflow:hidden';
+// A cockpit desktop is one row of four columns; the legacy layout is two rows (repositories, then the list under them) on a desktop
+// and one on a phone, where the hosts are shown one at a time.
+const BODY_GRID_STYLE = (legacy, phone, focus) =>
+  'display:grid;grid-template-columns:' + gridCols(legacy, focus) + ';grid-template-rows:' + (legacy && !phone ? 'auto minmax(0,1fr)' : 'minmax(0,1fr)') + ';min-height:0;overflow:hidden';
 
-const bodyGrid = el('div', { style: BODY_GRID_STYLE(false) });
+const bodyGrid = el('div', { 'data-shell': 'body', style: BODY_GRID_STYLE(false, false) });
 
 /** The collapsed 36px strip: a full-height button with a rotated vertical-rl label. */
 function makeRail(flag) {
@@ -191,9 +219,10 @@ function makeRail(flag) {
   return { btn, label };
 }
 
-const rail0 = makeRail('col0');
-const rail2 = makeRail('col2');
-/* The list under the repositories, folded: one line, not a column. */
+const rail0 = makeRail('col0');          // the phone's folded navigation strip (legacy layout)
+const rail1 = makeRail('col1');          // a desktop's folded list
+const rail2 = makeRail('col2');          // a folded detail
+/* The list under the repositories, folded: one line, not a column (legacy layout). */
 const listBar = el('button', {
   onClick: () => setState((s) => ({ col1: !s.col1 })),
   title: 'show the list',
@@ -202,8 +231,7 @@ const listBar = el('button', {
 });
 rail0.label.textContent = 'repositories ⟩';
 /* overhaul-r1 R4: in live mode the collapsed repositories rail also carries one glyph per repository
- * (panel-repos.js#railGlyphs), so a repository is selectable without expanding the panel. The
- * toggle keeps its label and stays the rest of the strip. */
+ * (panel-repos.js#railGlyphs). Only the phone's legacy layout folds the navigation column now; a desktop's rail never folds. */
 const rail0Host = el('div', {
   role: 'button', tabindex: '0', title: 'show the repositories panel',
   onClick: () => setState((s) => ({ col0: !s.col0 })),
@@ -213,27 +241,29 @@ const rail0Host = el('div', {
 });
 
 /* `min-height:0` on all four: a grid item's automatic minimum is its content, so a panel taller
- * than the viewport would otherwise stretch the row it sits in rather than scroll inside it. The
- * two that already carry `overflow-y:auto` get it for free under the spec — stated anyway, because
- * "this one is safe because of a rule elsewhere in the same line" is how the next edit breaks it. */
-const hostRepos = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto' });
-const hostInits = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);border-top:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0' });
-makeEdgeDrag(hostRepos, 'col0W', W0, col0w);
+ * than the viewport would otherwise stretch the row it sits in rather than scroll inside it. */
+const HOST_STYLE = {
+  repos: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto',
+  inits: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0',
+  initsDesk: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px;padding:12px;box-sizing:border-box;overflow:hidden;min-width:0;min-height:0',
+};
+const hostRepos = el('div', { id: 'pm-rail', style: HOST_STYLE.repos });
+const hostInits = el('div', { id: 'pm-list', style: HOST_STYLE.initsDesk });
 makeEdgeDrag(hostInits, 'col0W', W0, col0w);
-const hostDetail = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0;display:flex;flex-direction:column' });
-const hostTabs = el('div', { style: 'background:var(--term-bg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden' });
+const hostDetail = el('div', { id: 'pm-detail', style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0;display:flex;flex-direction:column' });
+const hostTabs = el('div', { id: 'pm-tabs', style: 'background:var(--term-bg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden' });
 
-setChildren(root, [topBar, bodyGrid, statusBar]);
+setChildren(root, [topBar, bodyGrid, statusBar, menuHost, paletteHost]);
 
 /* ── panel modules, loaded at boot and tolerated when absent ────────────────────────────────── */
 
-const mods = { repos: null, inits: null, detail: null, tabs: null, data: null, fixture: null };
+const mods = { repos: null, inits: null, detail: null, tabs: null, data: null, fixture: null, cockpit: null };
 
 async function loadModules() {
   const want = [
     ['repos', './panel-repos.js'], ['inits', './panel-initiatives.js'],
     ['detail', './panel-detail.js'], ['tabs', './panel-tabs.js'],
-    ['data', './data.js'], ['fixture', './fixture.js'],
+    ['data', './data.js'], ['fixture', './fixture.js'], ['cockpit', './panel-cockpit.js'],
   ];
   await Promise.all(want.map(async ([key, path]) => {
     try { mods[key] = await import(path); } catch { mods[key] = null; }
@@ -249,10 +279,7 @@ function paint(mod, name, host) {
 
 /* ── render ────────────────────────────────────────────────────────────────────────────────── */
 
-/* The rail is still ONE control that re-opens the panel, its first child is still the rotated
- * label, and its text is still exactly `repositories ⟩` — the glyphs draw their initials from a data
- * attribute (tokens.css) and name themselves through aria-label, and CSS `order` lifts them above
- * the label. A glyph click stops at the glyph: it selects, it does not expand. */
+/* The phone's folded navigation strip (legacy layout): one control that re-opens the panel, its first child the rotated label. */
 function railRepos() {
   const glyphs = mods.repos && typeof mods.repos.railGlyphs === 'function' ? mods.repos.railGlyphs() : [];
   if (!glyphs.length) {
@@ -265,15 +292,15 @@ function railRepos() {
   return rail0Host;
 }
 
-/* Where each host sits in the grid. Desktop: column 1 holds the repositories (row 1) and the list under them (row 2); the
- * detail and the tabs span both rows. The repositories block is capped so a long list of repositories cannot push the
- * list off the screen; it scrolls inside its cap. A folded column is a rail spanning both rows. On a phone the placement
- * is cleared and mobile.css decides which single host is shown. */
-function placeHosts(phone, kids) {
+/* Where each host sits in the LEGACY grid. Column 1 holds the repositories (row 1) and the list under them (row 2); the detail and the
+ * tabs span both rows. The repositories block is capped so a long list of repositories cannot push the list off the screen. A folded
+ * column is a rail spanning both rows. On a phone the placement is cleared and mobile.css decides which single host is shown. On a
+ * cockpit desktop every host has its own column and nothing is placed. */
+function placeHosts(legacy, phone, kids) {
   const cell = (el0, col, row) => { if (el0) { el0.style.gridColumn = col; el0.style.gridRow = row; } };
   const clear0 = (el0) => { el0.style.gridColumn = ''; el0.style.gridRow = ''; el0.style.maxHeight = ''; };
-  for (const h of [hostRepos, hostInits, hostDetail, hostTabs, listBar, rail0.btn, rail0Host, rail2.btn]) clear0(h);
-  if (phone) return;
+  for (const h of [hostRepos, hostInits, hostDetail, hostTabs, listBar, rail0.btn, rail0Host, rail1.btn, rail2.btn]) clear0(h);
+  if (!legacy || phone) return;
   if (state.col0) {
     cell(hostRepos, '1', '1');
     hostRepos.style.maxHeight = 'calc((100vh - 70px) * .42)';
@@ -286,44 +313,76 @@ function placeHosts(phone, kids) {
   cell(hostTabs, '3', '1 / 3');
 }
 
+let lastLegacy = null;
 function render() {
   root.setAttribute('data-pm-theme', state.theme);
-  themeBtn.textContent = state.theme === 'dark' ? 'theme · dark' : 'theme · light';
+  const phone = isMobile();
+  const legacy = legacyLayout();
+  // the mockup's body line-height is 1.45; the legacy shell's panels are drawn for 1.5
+  root.style.lineHeight = legacy ? '1.5' : '1.45';
+  // the cockpit's bars are the mockup's 48px and 28px with their 1px rule outside that height (as its rail is 64px plus its rule);
+  // the legacy shell keeps 48px and 28px rule included. A phone's stylesheet replaces the rows altogether.
+  root.style.gridTemplateRows = legacy ? '48px minmax(0,1fr) 28px' : '49px minmax(0,1fr) 29px';
+  // the cockpit's bars have no fill of their own (the root's --background shows through, as on the mockup); the legacy shell's do
+  topBar.style.background = legacy ? 'var(--background)' : '';
+  statusBar.style.background = legacy ? 'var(--background)' : '';
+  // A cockpit desktop never shows a list mode in the list: it opens as a view tab (panel-cockpit.js)
+  if (!legacy && mods.cockpit && typeof mods.cockpit.absorbMode === 'function' && mods.cockpit.absorbMode()) return;
+
   // overhaul-r1 R2.3: the active tab's line of work, when it is not the main tree
   const actTab = (state.tabs || []).find((t) => t.id === state.active);
   const br = actTab && mods.tabs && typeof mods.tabs.tabBranch === 'function' ? mods.tabs.tabBranch(actTab, true) : null;
-  statusLeft.textContent = 'local · persistent server · ' + runningCount() + ' sessions running' + (br ? ' · ⎇ ' + br : '');
+  statusLeft.textContent = 'local · ' + runningCount() + ' sessions running' + (br ? ' · ⎇ ' + br : '');
+  const parts = mods.cockpit && typeof mods.cockpit.breadcrumb === 'function' ? mods.cockpit.breadcrumb() : [];
+  setChildren(crumb, parts);
+  themeBtn.textContent = state.theme === 'dark' ? 'theme · dark' : 'theme · light';
+  if (legacy && themeBtn.parentNode !== topBar) topBar.appendChild(themeBtn);
+  if (!legacy && themeBtn.parentNode === topBar) topBar.removeChild(themeBtn);
 
-  // Panel 1's rail is a constant; panels 2 and 3 name whatever is behind them, so a PM who folded
-  // a panel away can still see what they folded.
+  // Folded strips name whatever is behind them, so a PM who folded a panel away can still see what they folded.
   listBar.textContent = '▸ ' + modeTitle();
+  rail1.label.textContent = 'initiatives ⟩';
   rail2.label.textContent = detailTitle() + ' ⟩';
 
-  const phone = isMobile();
-  bodyGrid.setAttribute('style', BODY_GRID_STYLE(phone));
-
-  // On a phone there are no rails to collapse into and no second column to fold away: the four
-  // hosts all stay mounted, one is DISPLAYED (pm/mobile.css picks it from `data-mpanel`), and the
-  // PM's desktop arrangement — col0/col1/col2 — is left exactly as they set it. Mounting all four
-  // is also what keeps a live terminal alive: a host dropped from this list would be removed from
-  // the document, and panel 4's xterm does not survive that.
-  const listShown = phone || (state.col0 && state.col1);
-  const listHost = phone || state.col1 ? hostInits : listBar;
-  const kids = phone ? [hostRepos, hostInits, hostDetail, hostTabs] : [
-    state.col0 ? hostRepos : railRepos(),
-    // with the navigation column folded away the list goes with it
-    state.col0 ? listHost : null,
-    state.col2 ? hostDetail : rail2.btn,
-    hostTabs,
-  ].filter(Boolean);
+  if (lastLegacy !== legacy) {
+    lastLegacy = legacy;
+    hostInits.setAttribute('style', legacy ? HOST_STYLE.inits + ';border-top:1px solid var(--border)' : HOST_STYLE.initsDesk);
+    // the cockpit's rail is the mockup's centred column; the legacy repositories panel draws its own rows edge to edge
+    hostRepos.style.alignItems = legacy ? '' : 'center';
+    hostRepos.style.gap = legacy ? '' : '10px';
+    hostRepos.style.padding = legacy ? '' : '12px 0';
+  }
+  const focus = !legacy && !phone && !!state.layoutFocus;
+  bodyGrid.setAttribute('style', BODY_GRID_STYLE(legacy, phone, focus));
+
+  // On a phone there are no rails to collapse into and no second column to fold away: the four hosts all stay mounted, one is
+  // DISPLAYED (pm/mobile.css picks it from `data-mpanel`), and the PM's desktop arrangement is left exactly as they set it. Mounting
+  // all four keeps a live terminal alive: a host dropped from this list would be removed from the document.
+  let kids;
+  if (phone) kids = [hostRepos, hostInits, hostDetail, hostTabs];
+  else if (legacy) {
+    const listHost = state.col1 ? hostInits : listBar;
+    kids = [state.col0 ? hostRepos : railRepos(), state.col0 ? listHost : null, state.col2 ? hostDetail : rail2.btn, hostTabs].filter(Boolean);
+  } else if (focus) kids = [hostDetail, hostTabs];   // Focus: the tabs and a 360px detail; hostTabs is never moved, only the others come and go
+  else kids = [hostRepos, state.col1 ? hostInits : rail1.btn, state.col2 ? hostDetail : rail2.btn, hostTabs];
   setChildren(bodyGrid, kids);
-  placeHosts(phone, kids);
-
-  if (phone || state.col0) paint(mods.repos, 'renderRepos', hostRepos);
-  if (listShown) paint(mods.inits, 'renderInitiatives', hostInits);
-  if (phone || state.col2) paint(mods.detail, 'renderDetail', hostDetail);
+  placeHosts(legacy, phone, kids);
+  if (focus) { hostTabs.style.gridColumn = '1'; hostTabs.style.gridRow = '1'; hostDetail.style.gridColumn = '2'; hostDetail.style.gridRow = '1'; }
+
+  if (legacy) {
+    if (phone || state.col0) paint(mods.repos, 'renderRepos', hostRepos);
+    if (phone || (state.col0 && state.col1)) paint(mods.inits, 'renderInitiatives', hostInits);
+    if (phone || state.col2) paint(mods.detail, 'renderDetail', hostDetail);
+  } else if (focus) {
+    paint(mods.detail, 'renderDetail', hostDetail);
+  } else {
+    paint(mods.cockpit, 'renderRail', hostRepos);
+    if (state.col1) paint(mods.cockpit, 'renderWorkList', hostInits);
+    if (state.col2) paint(mods.detail, 'renderDetail', hostDetail);
+  }
   paint(mods.tabs, 'renderTabs', hostTabs);
-
+  paint(mods.cockpit, 'renderMenu', menuHost);
+  paint(mods.cockpit, 'renderPalette', paletteHost);
   applyMobile();
 }
 
@@ -338,9 +397,19 @@ function focusSearch() {
 function onKeyDown(e) {
   if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
     e.preventDefault();
-    setState({ col1: true }, focusSearch);
+    // the cockpit's ⌘K is the palette; the legacy layout (and a phone) keep focusing the list's filter
+    if (legacyLayout()) setState({ col1: true, menuOpen: false }, focusSearch);
+    else setState({ paletteOpen: !state.paletteOpen, menuOpen: false });
+    return;
+  }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && !legacyLayout()) {
+    e.preventDefault();
+    if (mods.cockpit && typeof mods.cockpit.toggleFocus === 'function') mods.cockpit.toggleFocus();
     return;
   }
+  if (e.key === 'Escape' && state.paletteOpen) { setState({ paletteOpen: false }); return; }
+  if (e.key === 'Escape' && state.menuOpen) { setState({ menuOpen: false }); return; }
+  if (e.key === 'Escape' && state.layoutFocus) { setState({ layoutFocus: false }); return; }
   if (e.key === 'Escape' && !/INPUT|TEXTAREA/.test(e.target && e.target.tagName)) {
     // Verbatim from the prototype: Esc closes the ACTIVE tab, the last remaining tab takes over,
     // and a split pointing at the closed tab is dropped rather than left dangling.

package/workspace/public/pm/data.js

@@ -336,6 +336,55 @@ function answerFor(row) {
   };
 }
 
+/**
+ * The status-from-artifacts lines, derived by the engine (scripts/status-facts.js) and only worded
+ * here. Each is a flag beside the ladder with its basis. None is a step: nothing here changes a
+ * phase, a dot or a count, and a check that could not run says so instead of staying silent.
+ */
+function factsFor(row) {
+  if (!row) return [];
+  const out = [];
+  const sa = row.since_approval;
+  if (sa) {
+    if (sa.status === 'unknown') out.push({ tone: 'info', label: 'Since approval', text: 'Cannot tell. ' + (sa.reason || '') });
+    else {
+      for (const a of sa.approvals || []) {
+        const what = a.kind === 'contract' ? 'the contract was approved' : 'you accepted it';
+        if (a.status === 'unknown') out.push({ tone: 'info', label: 'Since approval', text: 'Cannot tell for ' + what + '. ' + (a.reason || '') });
+        else if (!(a.changed || []).length) out.push({ tone: 'ok', label: 'Since approval', text: 'No spec file changed after ' + what + '.' });
+        else {
+          const files = [...new Set(a.changed.map((x) => x.file.split('/').pop()))].join(', ');
+          const last = a.changed[a.changed.length - 1];
+          out.push({ tone: 'warn', label: 'Since approval', text: files + ' changed after ' + what + ' (' + a.changed_total + ' commit' + (a.changed_total === 1 ? '' : 's') + ', latest ' + last.sha + (last.date ? ' on ' + last.date : '') + ').' });
+        }
+      }
+    }
+  }
+  const cv = row.coverage;
+  if (cv) {
+    if (cv.status === 'unknown') out.push({ tone: 'info', label: 'Coverage', text: 'Cannot tell. ' + (cv.reason || '') });
+    else if (!cv.uncited.length && !cv.orphan_citations.length) out.push({ tone: 'ok', label: 'Coverage', text: 'The rubric cites all ' + cv.requirements + ' requirement ids.' });
+    else {
+      const bits = [];
+      if (cv.uncited.length) bits.push(cv.uncited.join(', ') + ' not cited in the rubric');
+      if (cv.orphan_citations.length) bits.push(cv.orphan_citations.join(', ') + ' cited but not in the PRD');
+      out.push({ tone: 'warn', label: 'Coverage', text: bits.join('; ') + '. A citation is not a grade.' });
+    }
+  }
+  if (row.record_says) out.push({ tone: 'warn', label: 'Record says', text: 'The status line ' + row.record_says.reason + '. The ladder is not changed.' });
+  return out;
+}
+
+/**
+ * D83 — what Jev suggests about the documents tied to this initiative. A suggestion, in words, with the model that
+ * gave it. It is never a step: it is listed after the facts and nothing reads it to colour a phase.
+ */
+function suggestionLines(sg) {
+  if (!sg) return [];
+  if (sg.ok === false) return [{ tone: 'info', label: 'Documents suggest', text: 'Cannot tell. ' + (sg.reason || '') }];
+  return (sg.items || []).map((x) => ({ tone: 'info', label: 'Documents suggest', text: (x.sentence || (x.doc + ': ' + x.kind)) + ' A suggestion, not a check' + (x.model ? ' (' + x.model + ')' : '') + '.' }));
+}
+
 /** The Review-Gate line, read off the `review` rung — no verdict is not a pass. */
 function evalFor(ladderSteps) {
   const r = (ladderSteps || []).find((s) => s.key === 'review');
@@ -405,6 +454,12 @@ function artsFor(payload) {
   });
 }
 
+/** The rung that blocks the initiative, as the card draws it: the engine's label, evidence and next step. Null when none blocks. */
+function blockerOf(row) {
+  const s = row && Array.isArray(row.steps) ? row.steps.find((x) => x && x.blocking === true && x.status === 'blocked') : null;
+  return s ? { key: s.key, label: s.label || s.key, evidence: s.evidence || '', next: s.next || '' } : null;
+}
+
 /** The full record panel 3 renders, from one `/api/initiative` payload. */
 function recordFrom(payload) {
   if (!payload || payload.ok === false) {
@@ -454,11 +509,14 @@ function recordFrom(payload) {
     arts: artsFor(payload),
     // R4/R5/R6 — what remains to acceptance, the conversations that belong to it, and the files git says
     // were changed for it. Each arrives already derived by the server; this layer only carries them.
+    // workspace-cockpit-nav R2: the first rung the ladder says is blocking, or null. Nothing is invented — the words are the engine's.
+    blocker: blockerOf(row),
     nextSteps: payload.next_steps || null,
     lcHistory: payload.lifecycle_history || [],
     convs: Array.isArray(payload.conversations) ? payload.conversations : [],
     gitFiles: payload.files || null,
     eval: evalFor(row && row.steps),
+    facts: factsFor(row).concat(suggestionLines(payload.suggestions)),
     l2: l2For(row),
   };
   if (!row) {

package/workspace/public/pm/fixture.js

@@ -46,7 +46,7 @@ export const TAB_COLORS = {
   activeText: '#f9fbfb',
   idleText: 'oklch(0.6 0.02 213)',
   // dot colour by tab kind; anything that is not term/task (i.e. doc) is blue.
-  dot: { term: '#47cf79', task: '#b98cff', doc: '#2b7fff' }
+  dot: { term: '#47cf79', task: '#b98cff', doc: '#2b7fff', view: '#f2b24a' }
 };
 export const TERM_COLORS = { prompt: '#47cf79', dim: '#6f7d81', text: '#c4ccce' };
 export const SCRATCH_SEND_COLOR = { on: 'oklch(0.85 0.01 214)', off: 'oklch(0.55 0.02 213)' };
@@ -575,7 +575,7 @@ export const allRecords = (userInits = {}) => ({ ...DATA, ...userInits });
 export const recordFor = (slug, userInits = {}) => allRecords(userInits)[slug];
 
 /** The default selection (line 1397). */
-export const defaultSlug = product => (product === 'atlas-crm' ? 'crm-import-wizard' : 'workspace-pm-spine');
+export const defaultSlug = product => (COCKPIT_SEED ? (SEED_DEFAULTS[product] || null) : product === 'atlas-crm' ? 'crm-import-wizard' : 'workspace-pm-spine');
 
 /** sessionsOf (line 1398) — authored sessions plus any started this session. */
 export function sessionsOf(slug, { userInits = {}, extraSess = {} } = {}) {
@@ -1000,3 +1000,41 @@ export const FIXTURE = {
 };
 
 export default FIXTURE;
+
+
+/* ───────────── the cockpit mockup's seed (`?fixture=cockpit`) ─────────────
+ * planning/design/cockpit-mockup/WsA.dc.html draws three repositories and one initiative in detail. The seed is applied by
+ * mutating the exports above in place, once, so every reader (panels, parity script) sees one set of data. It is the
+ * mockup's fake data and nothing else; no value here is read from a repository. */
+const COCKPIT_SEED = (() => { try { return new URLSearchParams(location.search).get('fixture') === 'cockpit'; } catch { return false; } })();
+const SEED_DEFAULTS = { microsites: 'ooh-weather-expansion', pmos: 'cockpit-terminal-mod', 'scarlet': 'scarlet-onboarding' };
+if (COCKPIT_SEED) {
+  const task = (title, status, k) => ({ title, status, instruction: 'Run ' + title + '.', input: 'planning/ + prior phase outputs', expect: 'A reviewable ' + k + ' artifact exists.', evalNote: 'graded against the ' + k + ' rubric', output: status === 'done' ? 'planning/' + k + '/' + k + '.md' : '—' });
+  PRODUCTS.splice(0, PRODUCTS.length, ['microsites', '6', 'github'], ['pmos', '3', 'local'], ['scarlet', '1', 'github']);
+  for (const k of Object.keys(ALLGROUPS)) delete ALLGROUPS[k];
+  ALLGROUPS.microsites = [{ gid: 'O2', idc: C.fg, gname: 'Microsites ship on time', gct: '6', hasKr: true, krid: 'KR1', krname: 'q3-2026', krct: '6',
+    slugs: ['ooh-weather-expansion', 'psle-paywall-revamp', 'smrt-news-feed', 'lightbox-ga-tagging', 'login-metric-tagging', 'shortlink-redirects'] }];
+  ALLGROUPS.pmos = [{ gid: 'health:tech', idc: C.inf, gname: 'health budget', gct: '3', hasKr: false, slugs: ['cockpit-terminal-mod', 'workspace-cockpit-nav', 'kit-publish'] }];
+  ALLGROUPS['scarlet'] = [{ gid: 'O1', idc: C.fg, gname: 'Onboarding', gct: '1', hasKr: false, slugs: ['scarlet-onboarding'] }];
+  for (const k of Object.keys(DATA)) delete DATA[k];
+  const mk = (tag, stage, steps, extra) => ({ tag, stage, flow: 'adlc-feature', pills: [{ t: 'feature', c: C.pur }, { t: 'q3-2026 · O2 · KR1', c: C.mut }], branch: null,
+    answer: { tone: 'info', text: tag }, steps, sessions: [], arts: [], eval: null, l2: [stage, '', C.mut], ...(extra || {}) });
+  const oneStep = (k, s) => [{ k, s, t: '' }];
+  DATA['ooh-weather-expansion'] = mk('OOH weather microsite: add regional forecast units', 'eval', [
+    { k: 'spec', s: 'done', t: '' }, { k: 'build', s: 'done', t: '' }, { k: 'eval', s: 'blocked', t: '' }, { k: 'accepted', s: 'pending', t: '' }], {
+    pills: [{ t: 'feature', c: C.mut }, { t: 'q3-2026 · O2 · KR1', c: C.mut }, { t: '⇄ Jira OOH-212', c: C.mut }],
+    blocker: { label: 'Merge', evidence: 'needs a grant for PR 41', next: '' },
+    tasks: {
+      spec: [task('Write the PRD', 'done', 'spec'), task('Write the rubric', 'done', 'spec')],
+      build: [task('Build the forecast units', 'done', 'build'), task('Wire the regional feed', 'done', 'build'), task('Add the tests', 'done', 'build')],
+      eval: [task('Run independent review', 'blocked', 'eval'), task('Record outcome check', 'todo', 'eval')],
+      accepted: [task('Accept the run', 'todo', 'accepted')],
+    },
+    sessions: [{ name: 'claude · merge PR 41', st: 'working', label: 'working' }, { name: 'review run', st: 'working', label: 'working' }],
+    arts: [{ role: 'PRD', path: 'planning/prd/ooh-weather-expansion-prd.md', dest: null }] });
+  DATA['psle-paywall-revamp'] = mk('PSLE paywall revamp', 'accepted', oneStep('accepted', 'pending'));
+  DATA['smrt-news-feed'] = mk('SMRT news feed', 'build', oneStep('build', 'current'));
+  for (const id of ['lightbox-ga-tagging', 'login-metric-tagging', 'shortlink-redirects']) DATA[id] = mk(id, 'accepted', oneStep('accepted', 'done'));
+  for (const id of ['cockpit-terminal-mod', 'workspace-cockpit-nav', 'scarlet-onboarding']) DATA[id] = mk(id, 'spec', oneStep('spec', 'blocked'));
+  DATA['kit-publish'] = mk('kit-publish', 'accepted', oneStep('accepted', 'pending'));
+}