create-pmos 0.48.0 → 0.49.0

package/workspace/public/pm/data.js

@@ -351,7 +351,7 @@ function factsFor(row) {
       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 if (!(a.changed || []).length) out.push({ tone: 'ok', label: 'Since approval', text: (row.profile === 'pm-artifacts' ? 'No brief or deliverable' : '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];
@@ -385,6 +385,25 @@ function suggestionLines(sg) {
   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 + ')' : '') + '.' }));
 }
 
+/**
+ * Why "What the documents say" has no line yet, in words, so an empty section is never mistaken for a missing one. Each
+ * check names what it waits for. Null when there is no ladder (the panel says that elsewhere) or when a line exists.
+ */
+function factsWhy(row, lines) {
+  if (!row || (lines && lines.length)) return null;
+  const why = [];
+  if (row.profile === 'pm-artifacts') {
+    why.push('Since approval starts when you accept this work: after that, a commit to its brief or deliverable shows here.');
+  } else {
+    why.push('Since approval starts when a contract is approved or the work is accepted.');
+    if (row.lane !== 'feature') why.push('Coverage is for feature-lane initiatives, and this one is ' + (row.lane || 'not in a lane') + '.');
+    else why.push('Coverage needs both a PRD and a rubric named in the record.');
+    why.push('Record says checks a status line that starts with a stage word (intake, spec, contract, build, eval or accepted).');
+  }
+  why.push('Jev suggestions appear only when "read documents for status" is on in Validate.');
+  return 'Nothing to compare yet. ' + why.join(' ');
+}
+
 /** 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');
@@ -517,6 +536,7 @@ function recordFrom(payload) {
     gitFiles: payload.files || null,
     eval: evalFor(row && row.steps),
     facts: factsFor(row).concat(suggestionLines(payload.suggestions)),
+    factsWhy: factsWhy(row, factsFor(row).concat(suggestionLines(payload.suggestions))),
     l2: l2For(row),
   };
   if (!row) {

package/workspace/public/pm/modes-live.js

@@ -508,7 +508,7 @@ export function skillDetailLive(det) {
 
 /* ── knowledge ──────────────────────────────────────────────────────────────────────────────── */
 function flatten(node, out, depth) {
-  for (const d of node.docs || []) out.push({ path: d.path, name: d.name, depth, category: d.category || null, basis: d.category_basis || null, why: d.category_why || null, kind: d.category_kind || null, disagrees: d.category_disagrees || [] });
+  for (const d of node.docs || []) out.push({ path: d.path, name: d.name, depth, category: d.category || null, basis: d.category_basis || null, why: d.category_why || null, kind: d.category_kind || null, jev: d.category_jev || null, disagrees: d.category_disagrees || [] });
   if (depth < 3) for (const sub of node.dirs || []) { out.push({ dir: sub.name || sub.path, depth }); flatten(sub, out, depth + 1); }
   return out;
 }
@@ -518,7 +518,7 @@ function flatten(node, out, depth) {
 let knCat = '';
 const catTitle = (it) => it.category ? 'category ' + it.category + (it.kind ? ' (' + it.kind + ')' : '') + (it.basis ? ' · decided by ' + it.basis : ' · no evidence') + (it.why ? ' (' + it.why + ')' : '')
   + (it.disagrees && it.disagrees.length ? ' · ' + it.disagrees.map((d) => d.basis + ' says ' + d.category).join(', ') : '') + ' · advisory' : '';
-const catChip = (it) => it.category ? el('span', { 'data-cat': it.category, 'data-cat-basis': it.basis || '', title: catTitle(it), style: 'margin-left:8px;font-size:9.5px;letter-spacing:.06em;color:var(--muted-foreground)' }, iv('· ' + it.category + (it.basis === 'jev' ? ' (jev)' : ''))) : null;
+const catChip = (it) => it.category ? el('span', { 'data-cat': it.category, 'data-cat-basis': it.basis || '', title: catTitle(it), style: 'margin-left:8px;font-size:9.5px;letter-spacing:.06em;color:var(--muted-foreground)' }, iv('· ' + it.category + (it.kind ? ' (' + it.kind + ')' : '') + (it.basis === 'jev' ? ' (jev)' : it.jev === 'unsure' ? ' (jev unsure)' : ''))) : null;
 function categoryBar(trees) {
   const counts = {};
   for (const t of trees) for (const it of flatten(t, [], 0)) if (it.path && it.category) counts[it.category] = (counts[it.category] || 0) + 1;
@@ -557,7 +557,56 @@ async function dRun() {
   dPlan = null; reload('library:' + ws);
   dSay(!out || out.ok === false ? ((out && out.error) || 'the run failed') : 'asked ' + out.sent + ' · ' + out.decided + ' categorized · ' + out.unsure + ' unsure · ' + (out.unreadable || 0) + ' unreadable · ' + out.cached + ' answered from the cache · ' + out.failed + ' failed');
 }
-function doccatBlock(ws, j) {
+/* Run 4 — what the last pass did to each undetermined file, so the PM can see which ones Jev categorized, which stayed
+ * undetermined and why, and which failed. Problems first. The record is the server's (per user, paths and outcomes only). */
+let dFilesAll = false;
+const D_ORDER = ['failed', 'not-asked', 'unreadable', 'unsure', 'withheld', 'excluded', 'categorized'];
+const D_LABEL = { failed: 'failed', 'not-asked': 'not asked', unreadable: 'unreadable', unsure: 'unsure', withheld: 'withheld', excluded: 'excluded', categorized: 'categorized' };
+const D_TONE = { failed: 'var(--destructive)', 'not-asked': 'var(--destructive)', unreadable: 'var(--destructive)', categorized: 'var(--foreground)' };
+const KEEPS = ' The file keeps the local result: undetermined.';
+function dOutcomeWords(f) {
+  const cached = f.cached ? ' Answer from the cache.' : '';
+  if (f.outcome === 'categorized') return 'Jev: ' + (f.category === 'ticket' ? 'ticket (' + (f.ticket_kind || 'other') + ')' : f.category) + '. ' + (f.sentence || '') + cached;
+  if (f.outcome === 'unsure') return 'Jev was unsure (' + (f.leading || []).join(' or ') + ').' + KEEPS + cached;
+  if (f.outcome === 'unreadable') return 'Jev’s answer could not be read.' + KEEPS + ' It is asked again only when the file changes.' + cached;
+  if (f.outcome === 'failed') return 'The request failed: ' + (f.reason || 'no reason given') + '.' + KEEPS + ' It is asked again on the next pass.';
+  if (f.outcome === 'withheld') return 'Not sent: the credential scan matched (' + (f.rules || []).join(', ') + ').';
+  if (f.outcome === 'excluded') return 'Not sent: the path is excluded.';
+  if (f.outcome === 'not-asked') return 'Not asked: ' + (f.reason || 'the pass stopped first');
+  return f.outcome;
+}
+function dLibraryLine(trees) {
+  let local = 0, jev = 0, undet = 0;
+  for (const t of trees || []) for (const it of flatten(t, [], 0)) {
+    if (!it.path || !it.category) continue;
+    if (it.category === 'undetermined') undet++; else if (it.basis === 'jev') jev++; else local++;
+  }
+  if (!local && !jev && !undet) return null;
+  return el('div', { 'data-doccat': 'library-line', style: NOTE }, iv('In this list: ' + local + ' decided by the local rules or your corrections · ' + jev + ' categorized by Jev · ' + undet + ' undetermined.'));
+}
+function dResultsBlock(ws, res) {
+  if (!res || !Array.isArray(res.files)) return [];
+  const counts = {};
+  for (const f of res.files) counts[f.outcome] = (counts[f.outcome] || 0) + 1;
+  const parts = D_ORDER.filter((k) => counts[k]).map((k) => counts[k] + ' ' + D_LABEL[k]);
+  const when = String(res.at || '').replace('T', ' ').slice(0, 16);
+  const out = [el('div', { 'data-doccat': 'results-summary', style: NOTE + ';color:var(--foreground)' },
+    iv('Last Jev pass (' + (res.kind === 'confirmed' ? 'confirmed by you' : 'automatic') + ', ' + when + '), ' + res.total + ' undetermined file(s): ' + (parts.join(' · ') || 'none') + '.'
+      + (res.total > res.files.length ? ' Only the first ' + res.files.length + ' are listed.' : '')))];
+  const rows = res.files.slice().sort((a, b) => D_ORDER.indexOf(a.outcome) - D_ORDER.indexOf(b.outcome) || a.doc.localeCompare(b.doc));
+  const shown = dFilesAll ? rows : rows.slice(0, 50);
+  for (const f of shown) {
+    out.push(el('div', { 'data-doccat-file': f.doc, 'data-outcome': f.outcome, style: 'display:flex;gap:8px;align-items:baseline;padding:2px 14px 2px 20px;font-size:11px' },
+      el('span', { 'data-doccat-outcome': f.outcome, style: 'flex:none;width:76px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:' + (D_TONE[f.outcome] || 'var(--muted-foreground)') }, iv(D_LABEL[f.outcome] || f.outcome)),
+      el('span', { style: 'flex:1 1 auto;min-width:0' },
+        el('button', { style: 'font-family:var(--mono);font-size:11px;text-decoration:underline;color:var(--foreground);text-align:left', onClick: () => openDocIn(null, f.doc) }, iv(f.doc)),
+        el('span', { 'data-doccat-why': '1', style: 'display:block;color:var(--muted-foreground)' }, iv(dOutcomeWords(f))))));
+  }
+  if (rows.length > 50) out.push(el('div', { style: 'padding:2px 14px 6px 20px' },
+    el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-doccat': 'files-all', onClick: () => { dFilesAll = !dFilesAll; setState({}); } }, dFilesAll ? 'show the first 50' : 'show all ' + rows.length)));
+  return out;
+}
+function doccatBlock(ws, j, trees) {
   if (!ws || !j) return [];
   const kids = [];
   kids.push(el('div', { 'data-doccat': 'explain', style: NOTE }, iv('Files with no local evidence are “undetermined”. Jev can be asked to categorize them from a short snippet: the title, the headings and the opening, never the whole file. Its answers are marked (jev), are advisory, and an unsure answer stays undetermined.')));
@@ -574,12 +623,14 @@ function doccatBlock(ws, j) {
     el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-doccat': 'resume', onClick: () => dResume(ws) }, 'resume')));
   const l = j.last;
   if (l && l.waiting) kids.push(el('div', { 'data-doccat': 'waiting', style: NOTE + ';color:var(--foreground)' }, iv(l.waiting + ' new or changed file(s) are waiting: more than an automatic pass sends. Ask Jev and confirm the count to send them.')));
-  else if (l) kids.push(el('div', { 'data-doccat': 'last', style: NOTE }, iv('Last Jev pass ' + String(l.at).replace('T', ' ').slice(0, 16) + ': sent ' + l.sent + ' · categorized ' + l.decided + ' · unsure ' + l.unsure + ' · unreadable ' + (l.unreadable || 0) + ' · withheld ' + (l.withheld_count || 0) + ' · excluded ' + l.excluded + ' · failed ' + l.failed + '.')));
+  else if (l && !j.results) kids.push(el('div', { 'data-doccat': 'last', style: NOTE }, iv('Last Jev pass ' + String(l.at).replace('T', ' ').slice(0, 16) + ': sent ' + l.sent + ' · categorized ' + l.decided + ' · unsure ' + l.unsure + ' · unreadable ' + (l.unreadable || 0) + ' · withheld ' + (l.withheld_count || 0) + ' · excluded ' + l.excluded + ' · failed ' + l.failed + '.')));
   if (dPlan && dPlan.ws === ws) {
     const p = dPlan.plan;
     kids.push(el('div', { 'data-doccat': 'plan-text', style: NOTE }, iv(p.requests + ' request(s), about ' + p.characters.toLocaleString() + ' characters, to ' + p.host + ' · ' + p.candidates + ' undetermined file(s) · ' + p.cached + ' already answered · ' + p.excluded + ' excluded · ' + p.withheld_count + ' withheld by the credential scan.')));
   }
   if (dNote) kids.push(el('div', { 'data-doccat': 'note', style: NOTE }, iv(dNote)));
+  const line = dLibraryLine(trees); if (line) kids.push(line);
+  kids.push(...dResultsBlock(ws, j.results));
   return kids;
 }
 /* jev-doc-categorizer Run 3 (C7) — the PM corrects a category. `fix` on a row opens a small control: a category, a ticket kind for
@@ -657,7 +708,7 @@ export function knowledgeLive() {
   const trees = (r.data && r.data.knowledge) || [];
   const kids = [el('div', { style: NOTE }, iv('This repository\'s knowledge: the OKF bundle, skills and build-skills. Open a document to read it.'))];
   const bar = categoryBar(trees); if (bar) kids.push(bar);
-  kids.push(...doccatBlock(ws, r.data && r.data.doccat));
+  kids.push(...doccatBlock(ws, r.data && r.data.doccat, trees));
   for (const t of trees) {
     kids.push(el('div', { style: LABEL }, iv(t.path || t.name || 'knowledge')));
     for (const it of flatten(t, [], 0)) {
@@ -715,6 +766,14 @@ async function vConsent(on) {
   reload('vrepo'); vPlan = null;
   vSay(out && out.ok ? 'ok' : 'bad', out && out.ok ? (on ? 'validation is on for this repository' : 'validation is off; nothing from this repository will be sent') : ((out && out.error) || 'not saved'));
 }
+/* prompt-model-routing Run 3 — the third D84 gate: route this repository's prompts with Jev. With it on (and the key and
+ * consent above), the cockpit mod in each terminal switches the model for a prompt when Jev decides its tier. */
+async function vRoute(on) {
+  const ws = vWs(); if (!ws) return vSay('bad', 'select a repository first');
+  const out = await post('/api/model/route/switch', { ws, route: on });
+  reload('vrepo');
+  vSay(out && out.ok ? 'ok' : 'bad', out && out.ok ? (on ? (out.open ? 'routing prompts with Jev is on: each prompt is checked before it runs' : 'routing prompts with Jev is on, but not active yet: ' + out.sentence) : 'routing prompts with Jev is off; no prompt is sent') : ((out && out.error) || 'not saved'));
+}
 async function vExclude(text) {
   const ws = vWs(); if (!ws) return;
   const exclude = String(text || '').split(/[\n,]/).map((x) => x.trim()).filter(Boolean);
@@ -931,6 +990,10 @@ export function validateList() {
       kids.push(el('div', { style: 'display:flex;gap:8px;align-items:center;padding:4px 14px' },
         el('span', { style: 'font-size:12px', 'data-r19': 'consent-state' }, iv(on ? 'validation is ON for this repository' : 'validation is OFF — nothing from this repository is sent')),
         el('button', { style: BTN + ';margin-left:auto', hover: 'color:var(--foreground)', 'data-r19': 'consent-toggle', onClick: () => vConsent(!on) }, on ? 'turn off' : 'turn on')));
+      const ro = !!(rp.data && rp.data.route);
+      kids.push(el('div', { style: 'display:flex;gap:8px;align-items:center;padding:4px 14px' },
+        el('span', { style: 'font-size:12px', 'data-route': 'state' }, iv(ro ? 'route prompts with Jev: ON — each prompt typed in a workspace terminal is checked, and the model switches when Jev decides' : 'route prompts with Jev: OFF — no prompt is sent')),
+        el('button', { style: BTN + ';margin-left:auto', hover: 'color:var(--foreground)', 'data-route': 'toggle', onClick: () => vRoute(!ro) }, ro ? 'turn off' : 'turn on')));
       const ta = el('textarea', { rows: 2, placeholder: 'paths never sent, one per line (e.g. private/ or notes/*.md)', 'data-r19': 'exclude-input',
         style: 'width:calc(100% - 28px);margin:4px 14px 0;font-family:var(--mono);font-size:10.5px;padding:4px 8px;border:1px solid var(--border);background:var(--background);color:var(--foreground)' }, (rp.data.exclude || []).join('\n'));
       kids.push(ta, el('div', { style: 'padding:4px 14px 6px' }, el('button', { style: BTN, hover: 'color:var(--foreground)', 'data-r19': 'exclude-save', onClick: () => vExclude(ta.value) }, 'save excluded paths')));

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

@@ -48,6 +48,8 @@ export const VIEWS = {
   // Run 3: views with no list mode — they draw only through their board module
   reports: { label: 'reports', mode: null, scoped: true, menu: 'Library', hint: 'run reports' },
   addrepo: { label: 'add repository', mode: null, scoped: false, menu: null },
+  // jev-live-notes Run 6: confirm each talking point as it arrives
+  livenotes: { label: 'live notes', mode: null, scoped: true, menu: 'Library', hint: 'confirm talking points' },
 };
 
 /** Modes that exist in the code and are deliberately not views, with the reason. `product` is the list itself. */
@@ -110,7 +112,7 @@ function modes() {
 export const BOARD_MODULES = {
   today: './view-today.js', portfolio: './view-portfolio.js', knowledge: './view-knowledge.js', memory: './view-memory.js',
   skills: './view-skills.js', scheduled: './view-scheduled.js', validate: './view-validate.js', guide: './view-guide.js',
-  reports: './view-reports.js', addrepo: './view-addrepo.js',
+  reports: './view-reports.js', addrepo: './view-addrepo.js', livenotes: './view-livenotes.js',
 };
 const boardMods = {};   // view -> undefined (not tried) · null (loading or absent) · module
 function boardOf(view) {

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

@@ -385,9 +385,11 @@ function noLadderBlock(ansBg, ansC, ansText, noLadderText) {
  */
 function factsBlock(rec) {
   const facts = (rec && rec.facts) || [];
-  if (!facts.length) return null;
+  // An initiative with a ladder always gets the section; with nothing to compare it says what each check waits for.
+  if (!facts.length && !(rec && rec.factsWhy)) 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.length ? null : el('div', { 'data-facts-empty': '', style: 'font-size:12px;line-height:1.45;color:var(--muted-foreground)' }, iv(rec.factsWhy)),
     ...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)),

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

@@ -335,7 +335,7 @@ 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', { 'data-tabs': 'bar', 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,
@@ -345,6 +345,30 @@ const tabBar = el('div', { 'data-tabs': 'bar', style: BAR_STYLE });
  * 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', {
@@ -994,8 +1018,9 @@ export function tabBranch(t, includeMain) {
   return trees.length > 1 && main ? main.branch : null;
 }
 
-function cockpitTabNode(t, act, splitTab) {
+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')
@@ -1003,14 +1028,15 @@ function cockpitTabNode(t, act, splitTab) {
   const br = tabBranch(t);
   return el('div', {
     'data-tab': t.id, 'data-tab-active': front ? '1' : '0',
-    style: 'position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;font:12px var(--mono);'
+    // 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',
+      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' },
@@ -1030,6 +1056,40 @@ function cockpitTabNode(t, act, splitTab) {
   );
 }
 
+/** 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';
@@ -1078,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();
@@ -1093,10 +1155,32 @@ export function renderTabs(host) {
   const ck = cockpitLook();
   newSessionBtn.textContent = ck ? '+ session' : '＋ session';
   emptyState.textContent = "nothing open — click a task's output or an artifact, or " + (ck ? '+' : '＋') + ' session above';
-  if (ck) {
-    tabBar.setAttribute('style', CK_BAR);
+  /* 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]) b.setAttribute('style', CK_BTN);
+    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,
@@ -1104,7 +1188,8 @@ export function renderTabs(host) {
       canSplit ? splitBtn : null,
     ].filter(Boolean);
     extras[0].style.marginLeft = 'auto';
-    setChildren(tabBar, [...visTabs.map((t) => cockpitTabNode(t, act, splitTab)), ...extras, newSessionBtn]);
+    // 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);
@@ -1119,6 +1204,23 @@ export function renderTabs(host) {
     ]);
   }
 
+  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();
   const panes = [act ? paneFor(act) : null, splitTab ? paneFor(splitTab) : null].filter(Boolean);
@@ -1159,8 +1261,8 @@ export function renderTabs(host) {
   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

@@ -130,6 +130,7 @@ function initialBase() {
     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. */
@@ -234,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