create-pmos 0.47.0 → 0.49.0

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

@@ -27,7 +27,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 { openTab, openTerm as openTermTab, openDoc as openDocTab } from './panel-initiatives.js';
 import { mountDoc, disposeDoc, docText } from './tab-doc.js';
@@ -41,7 +42,9 @@ import { boardOf, currentProduct } from './board-read.js';
  * far smaller failure than a dead panel 4. When it lands, the panel repaints itself. */
 let termMod = null;
 let liveMod = null;
+let cockpitMod = null;
 /* Loaded lazily; a repaint is asked for only when a skill tab is already open (restored on reload) and waiting for it. */
+import('./panel-cockpit.js').then((m) => { cockpitMod = m; if ((state.tabs || []).some((t) => t.kind === 'view')) setState({}); }).catch(() => { cockpitMod = null; });
 import('./modes-live.js').then((m) => { liveMod = m; if ((state.tabs || []).some((t) => t.kind === 'skill' || t.kind === 'transcript')) setState({}); }).catch(() => { liveMod = null; });
 import('./tab-term.js')
   .then((m) => { termMod = m; setState({}); })
@@ -332,7 +335,41 @@ const CHIP_STYLE = 'flex:none;align-self:center;font-family:var(--mono);font-siz
 const SPLIT_STYLE = 'flex:none;margin-left:auto;align-self:center;font-family:var(--mono);font-size:11px;color:oklch(0.85 0.01 214);padding:5px 12px;min-height:30px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap';
 const CHIP_HOVER = 'border-color:oklch(0.56 0.021 213.5)';
 
-const tabBar = el('div', { style: BAR_STYLE });
+const tabBar = el('div', { 'data-tabs': 'bar', style: BAR_STYLE, onWheel: stripWheel });
+
+/* ── the cockpit's tab strip (workspace-cockpit-nav Run 4, planning/design/cockpit-mockup/WsA.dc.html) ─────────────────────────
+ * On a desktop the strip is the mockup's: a 44px band whose tabs sit on its floor, the tab in front a card with rounded top corners,
+ * the others plain, each a dot and a title in 12px mono, and `+ session` at the right end. A phone and `?layout=legacy` keep the
+ * prototype's strip above. What the mockup does not draw is kept (R12): a tab's second line (its initiative and session) sits under
+ * its title in the tab's own lower padding, so the title stays where the mockup puts it; a tab that is not in front keeps its close
+ * control, in its right padding; the web, options and split controls sit to the left of `+ session`. */
+const cockpitLook = () => !LEGACY_LAYOUT_FLAG && !isMobile();
+const CK_BAR = 'flex:none;display:flex;align-items:flex-end;gap:4px;padding:0 10px;height:45px;border-bottom:1px solid var(--border);min-width:0;overflow-x:auto';
+/* ── the tabs as a vertical list (the PM's request after testing 0.48.0: the strip gets crowded with many tabs open) ─────────────
+ * `state.tabsVertical` puts the open tabs in a column on the left of the panes, one row per tab with its title, its second line and
+ * its close control, and the session controls under them. The choice is stored with the layout, so it survives a reload. It is a
+ * cockpit (desktop) choice only: a phone and `?layout=legacy` keep the strip.
+ *
+ * NOTHING MOVES WHEN IT IS SWITCHED. The panes, the chooser, the scratchpad and the bottom bar live in one persistent column
+ * (`tabsMain`) that is always the second child of the host; the switch only turns the host's flex direction and restyles the bar.
+ * A live terminal is never re-parented by it. */
+const CK_VBAR = 'flex:none;width:224px;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px 6px;border-right:1px solid var(--border);min-height:0;overflow-y:auto;overflow-x:hidden';
+const tabsMain = el('div', { 'data-tabs': 'main', style: 'flex:1;min-height:0;min-width:0;display:flex;flex-direction:column' });
+const orientLabel = iv('');
+const orientBtn = el('button', {
+  onClick: () => setState({ tabsVertical: !state.tabsVertical }), 'data-tabs': 'orient',
+}, orientLabel);
+/* In the strip, a mouse wheel scrolls the tabs sideways: with many tabs open the strip is wider than the panel, and a wheel that
+ * did nothing there left only the thin scrollbar. */
+function stripWheel(e) {
+  if (state.tabsVertical || !e.deltaY || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+  const bar = e.currentTarget;
+  if (bar.scrollWidth <= bar.clientWidth) return;
+  bar.scrollLeft += e.deltaY;
+  e.preventDefault();
+}
+
+const CK_BTN = 'flex:none;margin:0 0 4px;height:30px;display:grid;place-items:center;font:500 12.5px var(--sans);line-height:normal;background:transparent;color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:0 12px;white-space:nowrap';
 
 const newSessionBtn = el('button', {
   onClick: () => newSession(), style: CHIP_STYLE, hover: CHIP_HOVER,
@@ -368,7 +405,7 @@ const emptyState = el('div', {
   style: 'flex:1;display:grid;place-items:center;color:oklch(0.55 0.02 213);font-size:12.5px;padding:20px;text-align:center',
 }, "nothing open — click a task's output or an artifact, or ＋ session above");
 
-const panesRow = el('div', { style: 'flex:1;display:flex;min-height:0;min-width:0;overflow:hidden' });
+const panesRow = el('div', { 'data-tabs': 'panes', style: 'flex:1;display:flex;min-height:0;min-width:0;overflow:hidden' });
 
 /* ── the scratchpad (lines 983–991) ──────────────────────────────────────────────────────────
  * One textarea, created once. Its text is written back as a CHILD TEXT NODE as well as a value,
@@ -395,9 +432,16 @@ const SCRATCH_PLACEHOLDER = FIXTURE
   ? 'scratchpad — survives tab switches, dies with the page'
   : 'scratchpad — one pad per session, saved on this machine';
 
+/* workspace-cockpit-nav Run 3 (PRD R10) — the drawer takes the form of the cockpit board
+ * `planning/design/cockpit-mockup/ViewFilesPad.dc.html`: a labelled header with a fold control, the pad
+ * as a bordered field, and one row of buttons with a short note. The textarea stays a DIRECT child of
+ * `scratchBlock` (the height ceiling and pm-tabs-test measure through `parentElement`), and every
+ * behaviour below — the per-session pad, the autosave, the height handle — is unchanged. */
 const scratchTa = el('textarea', {
   placeholder: SCRATCH_PLACEHOLDER,
-  style: 'height:96px;background:oklch(0.11 0.004 228.8);color:#c4ccce;padding:10px 14px;font-family:var(--mono);font-size:12px',
+  'data-scratch': 'text',
+  style: 'height:96px;flex:none;width:100%;border:1px solid var(--input);border-radius:8px;background:var(--background);'
+    + 'color:var(--foreground);padding:10px 12px;font:12.5px/1.55 var(--mono)',
   onInput: (e) => onScratchInput(e.target.value),
 });
 
@@ -457,9 +501,10 @@ const scratchGrip = el('div', {
   'aria-orientation': 'horizontal',
   'aria-label': 'resize the scratchpad — drag, or ↑ / ↓',
   title: 'drag to resize · ↑ / ↓ to nudge · double-click to reset',
-  style: 'flex:none;height:7px;cursor:ns-resize;background:oklch(0.11 0.004 228.8);'
-    + 'border-top:1px solid oklch(1 0 0 / 10%);touch-action:none',
-  hover: 'background:oklch(1 0 0 / 10%)',
+  'data-scratch': 'grip',
+  // full width across the drawer's padding, on its top edge
+  style: 'flex:none;height:7px;margin:-12px -18px 0;cursor:ns-resize;background:var(--sidebar);touch-action:none',
+  hover: 'background:var(--border)',
   onPointerdown: (e) => {
     dragFrom = { y: e.clientY, h: state.scratchH || SCRATCH_DEFAULT };
     try { e.target.setPointerCapture(e.pointerId); } catch { /* not captured — the move still works */ }
@@ -564,6 +609,13 @@ if (typeof window !== 'undefined' && !FIXTURE) {
   document.addEventListener('visibilitychange', () => { if (document.hidden) flushPad(); });
 }
 
+/* The board's two button forms, on the token system: `.btnp` (the one primary action) and `.btn`. */
+const PAD_BTN = 'flex:none;font:500 12.5px var(--sans);border-radius:8px;padding:0 12px;height:28px;'
+  + 'display:inline-grid;place-items:center;white-space:nowrap;';
+const PAD_BTN_PRIMARY = PAD_BTN + 'background:var(--foreground);color:var(--background);border:0';
+const PAD_BTN_OUTLINE = PAD_BTN + 'background:transparent;color:var(--foreground);border:1px solid var(--input)';
+const PAD_BTN_OFF = PAD_BTN + 'background:transparent;color:var(--muted-foreground);border:1px solid var(--input)';
+
 const scratchCopyLabel = iv('⧉ copy');
 const scratchCopyBtn = el('button', {
   onClick: () => {
@@ -571,24 +623,50 @@ const scratchCopyBtn = el('button', {
     setState({ scratchCopied: true });
     setTimeout(() => setState({ scratchCopied: false }), 1200);
   },
-  style: 'font-family:var(--mono);font-size:10.5px;color:oklch(0.85 0.01 214);padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)',
-  hover: CHIP_HOVER,
+  'data-scratch': 'copy',
+  style: PAD_BTN_OUTLINE,
+  hover: 'background:var(--accent)',
 }, scratchCopyLabel);
 
 const scratchSendLabel = iv('open a terminal to send');
 const scratchSendBtn = el('button', {
   onClick: () => sendScratchToTerminal(),
-  style: 'font-family:var(--mono);font-size:10.5px;color:' + FX.SCRATCH_SEND_COLOR.off + ';padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)',
-  hover: CHIP_HOVER,
+  'data-scratch': 'send',
+  style: PAD_BTN_OFF,
 }, scratchSendLabel);
 
+/* Clear — the board's second button. It empties the pad through the same path as typing, so the
+ * empty pad is saved for this session like any other edit. Disabled when there is nothing to clear. */
+const scratchClearBtn = el('button', {
+  onClick: () => { if (state.scratchText) onScratchInput(''); },
+  'data-scratch': 'clear',
+  style: PAD_BTN_OUTLINE,
+  hover: 'background:var(--accent)',
+}, 'clear');
+
+const scratchHeadLabel = el('span', {
+  'data-scratch': 'label',
+  style: 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)',
+}, 'scratchpad');
+const scratchFoldBtn = el('button', {
+  onClick: () => setState({ scratchOpen: false }),
+  'data-scratch': 'fold', 'aria-label': 'close the scratchpad', title: 'Close the scratchpad. The text is kept.',
+  style: 'flex:none;color:var(--muted-foreground);padding:0 4px', hover: 'color:var(--foreground)',
+}, '▾');
+const scratchNote = el('span', {
+  'data-scratch': 'note',
+  style: 'min-width:0;color:var(--muted-foreground);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
+});
+
 const scratchBlock = el('div', {
-  style: 'display:flex;flex-direction:column;border-top:1px solid oklch(1 0 0 / 10%)',
+  'data-scratch': 'pad',
+  style: 'display:flex;flex-direction:column;gap:8px;padding:12px 18px;border-top:1px solid var(--border);background:var(--sidebar)',
 },
   FIXTURE ? null : scratchGrip,
+  el('div', { style: 'display:flex;align-items:center;justify-content:space-between' }, scratchHeadLabel, scratchFoldBtn),
   scratchTa,
-  el('div', { style: 'display:flex;gap:6px;padding:5px 12px 7px;background:oklch(0.11 0.004 228.8)' },
-    scratchCopyBtn, scratchSendBtn),
+  el('div', { style: 'display:flex;align-items:center;gap:8px;min-width:0' },
+    scratchSendBtn, scratchCopyBtn, scratchClearBtn, scratchNote),
 );
 
 /* ── the bottom bar (lines 992–996) ─────────────────────────────────────────────────────────── */
@@ -598,6 +676,7 @@ const colTitleLabel = iv('scratchpad');
 const copyLabel = iv('copy');
 
 const bottomBar = el('div', {
+  'data-tabs': 'bottom',
   style: 'display:flex;gap:10px;align-items:center;padding:5px 12px;border-top:1px solid oklch(1 0 0 / 10%);font-size:11px;color:oklch(0.6 0.02 213)',
 },
   el('button', {
@@ -833,6 +912,8 @@ function paneFor(tab) {
     if (liveMod && typeof liveMod.mountSkillTab === 'function') liveMod.mountSkillTab(host, tab);
   } else if (tab.kind === 'transcript') {
     if (liveMod && typeof liveMod.mountTranscriptTab === 'function') liveMod.mountTranscriptTab(host, tab);
+  } else if (tab.kind === 'view') {
+    if (cockpitMod && typeof cockpitMod.mountView === 'function') cockpitMod.mountView(host, tab);
   } else if (tab.kind === 'web') {
     mountWeb(host, tab);              // overhaul-r5 — never falls through to an empty doc tab
   } else {
@@ -937,6 +1018,78 @@ export function tabBranch(t, includeMain) {
   return trees.length > 1 && main ? main.branch : null;
 }
 
+function cockpitTabNode(t, act, splitTab, vertical) {
+  const front = (act && act.id === t.id) || (splitTab && splitTab.id === t.id);
+  if (vertical) return cockpitTabRow(t, front);
+  const dotColor = FX.TAB_COLORS.dot[t.kind] || FX.TAB_COLORS.dot.doc;
+  const meta = t.kind === 'term'
+    ? ((!FIXTURE && t.sessionId) ? 'session ' + t.sessionId : 'session')
+    : (t.kind === 'task' ? 'task' : t.kind === 'view' ? 'view' : t.kind === 'web' ? 'web' : t.kind === 'skill' ? 'skill' : t.kind === 'transcript' ? 'conversation' : t.role);
+  const br = tabBranch(t);
+  return el('div', {
+    'data-tab': t.id, 'data-tab-active': front ? '1' : '0',
+    // A tab may shrink to 96px when the strip is crowded; the title is clipped with an ellipsis and the full title is its tooltip.
+    style: 'position:relative;flex:0 1 auto;min-width:96px;display:flex;align-items:center;gap:8px;padding:0 14px;font:12px var(--mono);'
+      + (front ? 'height:37px;border:1px solid var(--border);border-bottom:0;border-radius:8px 8px 0 0;background:var(--card);color:var(--foreground)'
+        : 'height:36px;color:var(--muted-foreground)'),
+  },
+    el('button', {
+      onClick: () => setState({ active: t.id }),
+      title: t.title + (t.slug ? '\n' + t.slug + ' · ' + meta : ''),
+      style: 'display:flex;gap:8px;align-items:center;align-self:stretch;color:inherit;min-width:0',
+    },
+      el('span', { 'data-tab-dot': t.kind, style: 'width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:' + dotColor + ';color:' + dotColor }),
+      el('span', { style: 'display:flex;flex-direction:column;min-width:0;align-items:flex-start' },
+        el('span', { style: 'max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(t.title)),
+        el('span', {
+          'data-tab-sub': '',
+          // under the title, inside the tab's own width (the tab is its containing block), clipped to it
+          style: 'position:absolute;left:30px;right:14px;bottom:1px;font:9px var(--mono);line-height:10px;color:oklch(0.52 0.02 213);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left',
+        }, iv(t.slug), ' · ', iv(meta), br ? el('span', { 'data-r1': 'tab-branch' }, iv(' · ⑂ ' + br)) : null),
+      ),
+    ),
+    el('button', {
+      onClick: () => closeTab(t.id), 'data-tab-close': '', 'aria-label': 'close ' + t.title, title: 'close',
+      style: 'color:var(--muted-foreground)' + (front ? '' : ';position:absolute;right:3px;top:50%;transform:translateY(-50%)'),
+      hover: 'color:var(--foreground)',
+    }, '×'),
+  );
+}
+
+/** One tab as a row of the vertical list: the dot, the title over its second line, and the close control, all inside the row. */
+function cockpitTabRow(t, front) {
+  const dotColor = FX.TAB_COLORS.dot[t.kind] || FX.TAB_COLORS.dot.doc;
+  const meta = t.kind === 'term'
+    ? ((!FIXTURE && t.sessionId) ? 'session ' + t.sessionId : 'session')
+    : (t.kind === 'task' ? 'task' : t.kind === 'view' ? 'view' : t.kind === 'web' ? 'web' : t.kind === 'skill' ? 'skill' : t.kind === 'transcript' ? 'conversation' : t.role);
+  const br = tabBranch(t);
+  return el('div', {
+    'data-tab': t.id, 'data-tab-active': front ? '1' : '0', 'data-tab-row': '',
+    style: 'flex:none;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:6px;font:12px var(--mono);border:1px solid '
+      + (front ? 'var(--border);background:var(--card);color:var(--foreground)' : 'transparent;color:var(--muted-foreground)'),
+    hover: front ? null : 'background:var(--accent)',
+  },
+    el('button', {
+      onClick: () => setState({ active: t.id }),
+      title: t.title + (t.slug ? '\n' + t.slug + ' · ' + meta : ''),
+      style: 'flex:1;min-width:0;display:flex;gap:8px;align-items:center;color:inherit;text-align:left',
+    },
+      el('span', { 'data-tab-dot': t.kind, style: 'width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:' + dotColor + ';color:' + dotColor }),
+      el('span', { style: 'flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch' },
+        el('span', { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(t.title)),
+        el('span', {
+          'data-tab-sub': '',
+          style: 'font:9.5px var(--mono);line-height:12px;color:oklch(0.52 0.02 213);overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
+        }, iv(t.slug), ' · ', iv(meta), br ? el('span', { 'data-r1': 'tab-branch' }, iv(' · ⑂ ' + br)) : null),
+      ),
+    ),
+    el('button', {
+      onClick: () => closeTab(t.id), 'data-tab-close': '', 'aria-label': 'close ' + t.title, title: 'close',
+      style: 'flex:none;color:var(--muted-foreground);padding:0 4px', hover: 'color:var(--foreground)',
+    }, '×'),
+  );
+}
+
 function tabNode(t, act, splitTab) {
   const selected = (act && act.id === t.id) || (splitTab && splitTab.id === t.id);
   const bg = selected ? FX.TAB_COLORS.activeBg : 'transparent';
@@ -949,7 +1102,7 @@ function tabNode(t, act, splitTab) {
    * fixture render keeps the design's literal — the comparator reads this text node. */
   const meta = t.kind === 'term'
     ? ((!FIXTURE && t.sessionId) ? 'session ' + t.sessionId : 'session')
-    : (t.kind === 'task' ? 'task' : t.kind === 'web' ? 'web' : t.kind === 'skill' ? 'skill' : t.kind === 'transcript' ? 'conversation' : t.role);
+    : (t.kind === 'task' ? 'task' : t.kind === 'view' ? 'view' : t.kind === 'web' ? 'web' : t.kind === 'skill' ? 'skill' : t.kind === 'transcript' ? 'conversation' : t.role);
 
   return el('div', {
     style: 'flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;background:' + bg
@@ -985,6 +1138,8 @@ function tabNode(t, act, splitTab) {
  * prototype's, in the prototype's order: tab bar · (empty state) · panes · (scratchpad) · bottom
  * bar. The panes row renders even when nothing is open, exactly as the design does.
  */
+let lastFrontId = null;
+
 export function renderTabs(host) {
   // Which pad the drawer is on is decided from the active tab, before anything is painted from it.
   syncPad();
@@ -997,14 +1152,74 @@ export function renderTabs(host) {
   // ── tab bar ──
   const canSplit = visTabs.length >= 2 || !!state.splitId;
   splitLabel.textContent = state.splitId ? '⫽ unsplit' : '⫽ split';
-  setChildren(tabBar, [
-    ...visTabs.map((t) => tabNode(t, act, splitTab)),
-    newSessionBtn,
-    FIXTURE ? null : newWebBtn,
-    !FIXTURE && state.webNotice ? el('span', { 'data-r5': 'notice', style: 'align-self:center;font-size:11px;color:var(--destructive);padding:0 6px' }, state.webNotice) : null,
-    newSessionOptsBtn,
-    canSplit ? splitBtn : null,
-  ]);
+  const ck = cockpitLook();
+  newSessionBtn.textContent = ck ? '+ session' : '＋ session';
+  emptyState.textContent = "nothing open — click a task's output or an artifact, or " + (ck ? '+' : '＋') + ' session above';
+  /* The tabs are drawn anew on every paint, so the bar is empty for a moment and its scroll would snap back to the start: a
+   * crowded strip (or a long list) scrolled by hand jumped back on the next repaint. The offset is kept across the redraw. */
+  const keepX = tabBar.scrollLeft, keepY = tabBar.scrollTop;
+  const vertical = ck && !!state.tabsVertical;
+  host.style.flexDirection = vertical ? 'row' : 'column';
+  orientLabel.textContent = vertical ? '⇆ tabs on top' : '⇅ tabs at side';
+  orientBtn.title = vertical ? 'show the tabs as a strip above the panes' : 'show the tabs as a list at the left of the panes';
+  if (vertical) {
+    tabBar.setAttribute('style', CK_VBAR);
+    const V_BTN = CK_BTN.replace('margin:0 0 4px', 'margin:0') + ';justify-content:start';
+    newSessionBtn.setAttribute('style', V_BTN + ';margin-bottom:6px');
+    for (const b of [newWebBtn, newSessionOptsBtn, splitBtn, orientBtn]) b.setAttribute('style', V_BTN);
+    setChildren(tabBar, [
+      newSessionBtn,
+      ...visTabs.map((t) => cockpitTabNode(t, act, splitTab, true)),
+      el('div', { 'data-tabs': 'vcontrols', style: 'margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:4px' },
+        FIXTURE ? null : newWebBtn,
+        !FIXTURE && state.webNotice ? el('span', { 'data-r5': 'notice', style: 'font-size:11px;color:var(--destructive);padding:0 6px' }, state.webNotice) : null,
+        newSessionOptsBtn,
+        canSplit ? splitBtn : null,
+        orientBtn),
+    ]);
+  } else if (ck) {
+    tabBar.setAttribute('style', CK_BAR + ';scrollbar-width:thin');
+    newSessionBtn.setAttribute('style', CK_BTN + ';margin-left:0');
+    for (const b of [newWebBtn, newSessionOptsBtn, splitBtn, orientBtn]) b.setAttribute('style', CK_BTN);
+    const extras = [
+      FIXTURE ? null : newWebBtn,
+      !FIXTURE && state.webNotice ? el('span', { 'data-r5': 'notice', style: 'align-self:center;font-size:11px;color:var(--destructive);padding:0 6px' }, state.webNotice) : null,
+      newSessionOptsBtn,
+      canSplit ? splitBtn : null,
+    ].filter(Boolean);
+    extras[0].style.marginLeft = 'auto';
+    // The switch sits after `+ session`, so the strip still ends the mockup's way in the fixture, which does not draw it.
+    setChildren(tabBar, [...visTabs.map((t) => cockpitTabNode(t, act, splitTab)), ...extras, newSessionBtn, FIXTURE ? null : orientBtn]);
+  } else {
+    tabBar.setAttribute('style', BAR_STYLE);
+    newSessionBtn.setAttribute('style', CHIP_STYLE);
+    newWebBtn.setAttribute('style', CHIP_STYLE); newSessionOptsBtn.setAttribute('style', CHIP_STYLE); splitBtn.setAttribute('style', SPLIT_STYLE);
+    setChildren(tabBar, [
+      ...visTabs.map((t) => tabNode(t, act, splitTab)),
+      newSessionBtn,
+      FIXTURE ? null : newWebBtn,
+      !FIXTURE && state.webNotice ? el('span', { 'data-r5': 'notice', style: 'align-self:center;font-size:11px;color:var(--destructive);padding:0 6px' }, state.webNotice) : null,
+      newSessionOptsBtn,
+      canSplit ? splitBtn : null,
+    ]);
+  }
+
+  if (tabBar.scrollLeft !== keepX) tabBar.scrollLeft = keepX;
+  if (tabBar.scrollTop !== keepY) tabBar.scrollTop = keepY;
+  // When the tab in front changes, the bar scrolls just enough to show it, so a tab opened at the far end of a crowded strip or a
+  // long list is seen. Only the bar's own offset is moved (not scrollIntoView, which would also scroll the panels around it).
+  if (ck && act && act.id !== lastFrontId) {
+    const n = [...tabBar.querySelectorAll('[data-tab]')].find((x) => x.getAttribute('data-tab') === act.id);
+    if (n) {
+      const b = tabBar.getBoundingClientRect(), r = n.getBoundingClientRect();
+      if (vertical) {
+        if (r.top < b.top) tabBar.scrollTop -= b.top - r.top;
+        else if (r.bottom > b.bottom) tabBar.scrollTop += r.bottom - b.bottom;
+      } else if (r.left < b.left) tabBar.scrollLeft -= b.left - r.left;
+      else if (r.right > b.right) tabBar.scrollLeft += r.right - b.right;
+    }
+  }
+  lastFrontId = act ? act.id : null;
 
   // ── panes ──
   reapClosedPanes();
@@ -1031,18 +1246,23 @@ export function renderTabs(host) {
   scratchCopyLabel.textContent = state.scratchCopied ? 'copied ✓' : '⧉ copy';
   const canSend = !!(act && act.kind === 'term');
   scratchSendLabel.textContent = canSend ? '⇥ send to terminal' : 'open a terminal to send';
-  scratchSendBtn.setAttribute('style',
-    'font-family:var(--mono);font-size:10.5px;color:'
-    + (canSend ? FX.SCRATCH_SEND_COLOR.on : FX.SCRATCH_SEND_COLOR.off)
-    + ';padding:4px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%)');
+  scratchSendBtn.setAttribute('style', canSend ? PAD_BTN_PRIMARY : PAD_BTN_OFF);
+  scratchClearBtn.disabled = !scratchText;
+  scratchClearBtn.style.opacity = scratchText ? '' : '0.5';
+  /* The header names whose pad this is, and the note says what keeps it and what Send does. Both are
+   * read from the same facts `padKey` uses, so they cannot claim a pad the drawer is not showing. */
+  scratchHeadLabel.textContent = FIXTURE ? 'scratchpad'
+    : (canSend ? 'scratchpad · this session' : 'scratchpad · this repository');
+  scratchNote.textContent = FIXTURE ? 'Kept until the page closes.'
+    : (canSend ? 'Kept for this session. Send also presses Enter.' : 'Kept for this repository. Open a terminal to send.');
 
   // ── bottom bar ──
   scratchToggleLabel.textContent = state.scratchOpen ? '▼ scratchpad' : '▲ scratchpad';
   colTitleLabel.textContent = act ? act.title : 'scratchpad';
   copyLabel.textContent = state.copied ? 'copied ✓' : 'copy';
 
-  setChildren(host, [
-    tabBar,
+  setChildren(host, [tabBar, tabsMain]);
+  setChildren(tabsMain, [
     // Above the panes and below the tab bar: the chooser is about the click that was just made in
     // that bar, and putting it here leaves every open pane — and every live PTY — exactly where it
     // was. Replacing the panes with it would re-parent a terminal, which is the quiet regression

package/workspace/public/pm/state.js

@@ -14,15 +14,47 @@
 /* Fixture mode is decided from the URL, not from another module: the persistence bypass below is
  * the whole reason the comparator can trust a run. Reading it here keeps state.js loadable on its
  * own and stops a data-layer import from deciding whether the PM's layout is written to disk. */
-export const FIXTURE = (() => {
-  try { return new URLSearchParams(location.search).get('fixture') === 'proto'; }
-  catch { return false; }
+/* `?fixture=proto` is the prototype's own seed data; `?fixture=cockpit` is the cockpit mockup's (planning/design/cockpit-mockup/): the
+ * same fixture paths, a different seed. Both are the offline demo and the parity script's like-for-like content. */
+const FIXTURE_KIND = (() => {
+  try { const f = new URLSearchParams(location.search).get('fixture'); return f === 'proto' || f === 'cockpit' ? f : null; }
+  catch { return null; }
 })();
+export const FIXTURE = FIXTURE_KIND !== null;
+/** `?layout=legacy` draws the three-column shell on a desktop, so the suites of the panels that shell uses keep guarding them until
+ * Run 4 moves the phone onto the cockpit. Nothing offers it. */
+export const LEGACY_LAYOUT_FLAG = (() => { try { return new URLSearchParams(location.search).get('layout') === 'legacy'; } catch { return false; } })();
+export const FIXTURE_COCKPIT = FIXTURE_KIND === 'cockpit';
+
+/** What the cockpit fixture starts with beyond its seed data: the derived statuses (so the list can group), the open tabs. */
+const COCKPIT_START = {
+  statuses: {
+    microsites: {
+      'ooh-weather-expansion': { status: 'blocked' }, 'psle-paywall-revamp': { status: 'delivered' }, 'smrt-news-feed': { status: 'building' },
+      'lightbox-ga-tagging': { status: 'accepted' }, 'login-metric-tagging': { status: 'accepted' }, 'shortlink-redirects': { status: 'accepted' },
+    },
+    // five things wait on the person, as the mockup's "Today 5" says: two here, three in pmos (the tile with the dot), none in scarlet
+    pmos: { 'cockpit-terminal-mod': { status: 'blocked' }, 'workspace-cockpit-nav': { status: 'blocked' }, 'kit-publish': { status: 'delivered' } },
+    // the mockup's third tile carries no dot: nothing in that repository is waiting on the person
+    scarlet: { 'scarlet-onboarding': { status: 'building' } },
+  },
+  product: 'microsites', sel: 'ooh-weather-expansion',
+  tabs: [
+    { id: 'term:ooh-weather-expansion:claude · merge PR 41', kind: 'term', title: 'claude · merge PR 41', slug: 'ooh-weather-expansion', repo: 'microsites', sess: 'claude · merge PR 41', state: 'working', role: 'TERM' },
+    { id: 'doc:planning/prd/ooh-weather-expansion-prd.md', kind: 'doc', title: '…-prd.md', slug: 'ooh-weather-expansion', path: 'planning/prd/ooh-weather-expansion-prd.md', role: 'DOC' },
+    { id: 'view:memory:microsites', kind: 'view', view: 'memory', title: 'tool · memory', slug: 'microsites', repo: 'microsites' },
+  ],
+  active: 'term:ooh-weather-expansion:claude · merge PR 41',
+};
 
 const STORE_KEY = 'pmos.workspace.pm.v1';
 
 /** The initial state — the prototype's `state = {…}` block, key for key. */
 function initial() {
+  const base = initialBase();
+  return FIXTURE_COCKPIT ? { ...base, ...JSON.parse(JSON.stringify(COCKPIT_START)) } : base;
+}
+function initialBase() {
   return {
     theme: 'dark', sel: null, q: '', mode: 'product', collapsedGroups: {}, groupBy: 'objective', activeOnly: false, legendOpen: false, settingsOpen: false,
     product: null, intgSynced: {},
@@ -35,6 +67,13 @@ function initial() {
     newType: 'init', newName: '', newSlug: '', newAnchor: null, newFlow: 'adlc-feature',
     userGroups: {}, userKrs: {}, addedInits: {}, userInits: {}, selTask: null, collapsedPhases: {},
     detail: { kind: 'init' },
+    // the rail's menu (workspace-cockpit-nav): open or shut, never persisted
+    menuOpen: false,
+    paletteOpen: false,         // Run 2: the ⌘K palette — never persisted
+    layoutFocus: false,         // Run 2: the Focus layout — never persisted (distinct from `focus`, the focus-mode data)
+    todayScope: 'repo',
+    filesOpen: false,           // Run 3: the Work list shows the repository's files — never persisted
+    todayDismissed: {},
     tabs: [], active: null, splitId: null,
     // overhaul-r1: reader measure per tab (R5), which repositories show their lines of work (R2.1),
     // and the last remove/rename answer, shown on the row it is about (R3.3)
@@ -91,6 +130,7 @@ function initial() {
     newSessIsolate: null, newSessError: null, newSessBusy: false,
     newSessBranches: null, preflightProfile: null, profiles: null, branchInfo: null,
     col0: true, col1: true, col2: true, scratchOpen: false, scratchText: '', copied: false,
+    tabsVertical: false,        // the cockpit's tabs as a vertical list instead of a strip — persisted, per browser
     /* The scratchpad drawer's height in px (panel-tabs.js). 96 is the prototype's literal and stays
      * the default; the PM can drag it, and the drag is clamped there rather than here — this store
      * only has to refuse a value that could not have come from the clamp. */
@@ -155,7 +195,9 @@ const TAB_FIELDS = ['id', 'kind', 'title', 'slug', 'repo', 'sess', 'sessionId',
   // a skill tab's skill id — a reload reopens the same skill
   'skillId',
   // a conversation tab's session id — a reload reopens the same transcript
-  'convId'];
+  'convId',
+  // a view tab's view key (workspace-cockpit-nav) — a reload reopens the same tool
+  'view'];
 const MAX_TABS = 40;
 
 function packTab(t) {
@@ -193,6 +235,8 @@ const PERSIST = {
   active: isSlug,
   splitId: isSlug,
   scratchOpen: isBool,
+  // the cockpit's tabs as a vertical list (true) or the horizontal strip (false, the default)
+  tabsVertical: isBool,
   /* A restored height is re-validated on the way IN, not merely on the way out: a corrupted or
    * hand-edited record must not be able to render a drawer with no textarea in it, or one taller
    * than any window it could be restored into. The upper bound here is deliberately generous (the