create-pmos 0.52.0 → 0.53.1

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

@@ -9,8 +9,8 @@
  * ── What this module owns ───────────────────────────────────────────────────────────────────
  *   the tab bar · ＋ session · split · the empty state · which pane hosts exist and where they sit
  *   · the scratchpad · the bottom bar (scratchpad toggle, active-tab title, copy)
- * The BODY of a tab belongs to its own module — `mountDoc` (tab-doc.js), `mountTask`
- * (tab-task.js), `mountTerm` (tab-term.js). This file never renders a tab's contents.
+ * The BODY of a tab belongs to its own module — `mountDoc` (tab-doc.js), `mountTerm` (tab-term.js). This file never
+ * renders a tab's contents.
  *
  * ── Why the pane hosts are cached ───────────────────────────────────────────────────────────
  * A term pane hosts a live xterm attached to a real PTY. Rebuilding that element on an unrelated
@@ -32,10 +32,13 @@ 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';
-import { mountTask } from './tab-task.js';
 import { mountWeb, promptWeb } from './tab-web.js';
 import { newSessionBlock, openNewSession } from './panel-newsess.js';
 import { boardOf, currentProduct } from './board-read.js';
+import { field, button, toast, ensureComponentsCss } from './primitives.js';
+import { COPY as PAL } from './palette-copy.js';
+import { askChoice } from './dialogs.js';
+import { icon, ensureSprite } from './icons.js';
 
 /* tab-term.js is loaded LAZILY and on purpose: it is another module's file, a static import of a
  * file that is not on disk yet takes the whole panel down with it, and an empty terminal pane is a
@@ -49,8 +52,20 @@ import('./modes-live.js').then((m) => { liveMod = m; if ((state.tabs || []).some
 import('./tab-term.js')
   .then((m) => { termMod = m; setState({}); })
   .catch(() => { termMod = null; });
+/* pm-os-absorb Run 1 — panel-breakdown.js is loaded LAZILY for the same reason, and for one more: it is a 14-module graph
+ * (primitives, icons, bd-*, item-sheet, handoff-box, keep-card, undo-hold), and a static import makes THIS module's
+ * evaluation wait for all of it. Those fetches queue behind the server's synchronous boot reads (/api/initiative,
+ * /api/library), so panel 4 — and with it tab-term.js and the terminal socket — came up after loadRepos instead of
+ * beside it, and a reload's socket opened ~1.5 s late. A Breakdown tab restored on reload repaints when it lands. */
+let breakdownMod = null;
+import('./panel-breakdown.js')
+  .then((m) => { breakdownMod = m; if ((state.tabs || []).some((t) => t.kind === 'breakdown')) setState({}); })
+  .catch(() => { breakdownMod = null; });
 
 /** `{{ expr }}` — one interpolated value in its own span, the way the prototype's runtime emits it. */
+/* A dock control's face: a lucide icon from the vendored sprite, then its word (C6: no Unicode glyph controls). */
+const iconLabel = (name, text) => (text ? [icon(name), el('span', null, text)] : [icon(name)]);
+const closeIcon = () => { ensureSprite(); return icon('x'); };
 const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v));
 
 /* ── the board, read exactly the way panels 2 and 3 read it (board-read.js) ─────────────────── */
@@ -116,25 +131,6 @@ export function openTerm(slug, sess) {
   return openTermTab(slug, sess);
 }
 
-/**
- * Open a task tab. Accepts the finished tab record panel 3 builds (`openTask(tab)`), or a task
- * plus its initiative (`openTask(task, 'workspace-pm-spine')`), in which case the tab id is the
- * prototype's `task:<slug>:<phase>#<index>` (line 1750).
- */
-export function openTask(task, initiative) {
-  if (!task) return;
-  if (initiative === undefined && task.id) return openTab(task);
-  const slug = typeof initiative === 'string' ? initiative
-    : (initiative && (initiative.slug || initiative.id)) || task.slug;
-  const idx = task.index != null ? task.index : 0;
-  return openTab({
-    id: task.id || FX.taskTabId(slug, task.phase, idx),
-    kind: 'task', role: 'TASK', title: task.title, slug, repo: slugProductOf()[slug],
-    phase: task.phase, status: task.status, instruction: task.instruction, input: task.input,
-    expect: task.expect, evalNote: task.evalNote, output: task.output,
-  });
-}
-
 /** Close one tab (lines 1971–1974): the last remaining tab takes over, a dangling split is dropped. */
 export function closeTab(id) {
   setState((s) => {
@@ -330,13 +326,13 @@ export function toggleSplit() {
 
 /* ── persistent chrome ─────────────────────────────────────────────────────────────────────── */
 
-const BAR_STYLE = 'display:flex;gap:2px;align-items:stretch;padding:6px 8px 0;border-bottom:1px solid oklch(1 0 0 / 10%);min-height:48px;min-width:0;overflow-x:auto';
-const CHIP_STYLE = 'flex:none;align-self:center;font-family:var(--mono);font-size:11px;color:oklch(0.85 0.01 214);padding:5px 11px;min-height:30px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap;margin-left:4px';
-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 BAR_STYLE = 'display:flex;gap:2px;align-items:stretch;padding:6px 8px 0;border-bottom:1px solid var(--border);min-height:48px;min-width:0;overflow-x:auto';
+const CHIP_STYLE = 'flex:none;align-self:center;font:11px var(--mono);color:var(--muted-foreground);padding:5px 11px;min-height:30px;background:var(--secondary);border:1px solid var(--border);white-space:nowrap;margin-left:4px';
+const SPLIT_STYLE = 'flex:none;margin-left:auto;align-self:center;font:11px var(--mono);color:var(--muted-foreground);padding:5px 12px;min-height:30px;background:var(--secondary);border:1px solid var(--border);white-space:nowrap';
+const CHIP_HOVER = 'border-color:var(--ring)';
 
-/* `data-term-chrome`: the strip and the bottom bar sit on --term-bg, which is dark in BOTH themes (D41), so they take the dark
- * theme's tokens in light mode too (tokens.css). Without it the light theme's dark text was drawn on the dark band, unreadable. */
+/* The strip and the bottom bar are chrome: they follow the theme (PRD R27). Only the terminal itself stays dark (D41): its pane
+ * paints --term-bg. `data-term-chrome` stays as a hook for the suites. */
 const tabBar = el('div', { 'data-tabs': 'bar', 'data-term-chrome': '', style: BAR_STYLE, onWheel: stripWheel });
 
 /* ── the cockpit's tab strip (workspace-cockpit-nav Run 4, planning/design/cockpit-mockup/WsA.dc.html) ─────────────────────────
@@ -358,9 +354,10 @@ const CK_BAR = 'flex:none;display:flex;align-items:flex-end;gap:4px;padding:0 10
 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 orientIcon = el('span', null);
 const orientBtn = el('button', {
   onClick: () => setState({ tabsVertical: !state.tabsVertical }), 'data-tabs': 'orient',
-}, orientLabel);
+}, orientIcon, 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) {
@@ -375,13 +372,14 @@ const CK_BTN = 'flex:none;margin:0 0 4px;height:30px;display:grid;place-items:ce
 
 const newSessionBtn = el('button', {
   onClick: () => newSession(), style: CHIP_STYLE, hover: CHIP_HOVER,
-}, '＋ session');
+  'aria-label': 'new session',
+}, ...iconLabel('plus', 'session'));
 
 /* overhaul-r5 (D69) — open a web page in a tab, by typing its address. Live mode only. */
 const newWebBtn = el('button', {
   onClick: () => promptWeb(), style: CHIP_STYLE, hover: CHIP_HOVER,
-  title: 'open a web page in a tab (http/https; it loads only when you open it)', 'data-r5': 'new-web',
-}, '🌐 web');
+  title: 'open a web page in a tab (http/https; it loads only when you open it)', 'data-r5': 'new-web', 'aria-label': 'open a web page',
+}, ...iconLabel('globe', 'web'));
 
 /* `⋯ options` — the demoted composer, restored (workspace-session-preflight).
  *
@@ -395,17 +393,17 @@ const newWebBtn = el('button', {
 const newSessionOptsBtn = el('button', {
   onClick: () => openNewSession(selSlug()),
   style: CHIP_STYLE, hover: CHIP_HOVER,
-  title: 'choose the branch, the agent and the profile before the session starts',
-}, '⋯ options');
+  title: 'choose the branch, the agent and the profile before the session starts', 'aria-label': 'session options',
+}, ...iconLabel('ellipsis', 'options'));
 
-const splitLabel = iv('⫽ split');
+const splitLabel = iv('split');
 const splitBtn = el('button', {
   onClick: () => toggleSplit(), style: SPLIT_STYLE, hover: CHIP_HOVER,
-}, splitLabel);
+}, icon('columns-2'), splitLabel);
 
 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");
+}, "Nothing is open. Open an artifact, or press + session to start a session.");
 
 const panesRow = el('div', { 'data-tabs': 'panes', style: 'flex:1;display:flex;min-height:0;min-width:0;overflow:hidden' });
 
@@ -422,7 +420,7 @@ const panesRow = el('div', { 'data-tabs': 'panes', style: 'flex:1;display:flex;m
  * The store is `state.scratchPads`, keyed by:
  *   `sess:<server session id>` — a terminal tab bound to a live PTY. The id is the SERVER's, so two
  *                                sessions both called `agent 1` in two repositories are two pads.
- *   `ws:<workspace id>`        — everything else (a doc, a task, nothing open): the repository pad.
+ *   `ws:<workspace id>`        — everything else (a doc, nothing open): the repository pad.
  * That is exactly the key space `/api/scratchpad` already stores under — the endpoint has been
  * per-session all along, and it is the client half that went missing. `state.scratchText` remains
  * the text ON SCREEN, so the copy button, `⇥ send to terminal` and the fixture render are unchanged.
@@ -529,6 +527,7 @@ const scratchGrip = el('div', {
 /* ── pad identity, loading and autosave ─────────────────────────────────────────────────────── */
 
 const padLoading = new Set();      // keys with a read in flight — one read per key, ever
+const padTyped = new Set();   // pads typed into since this page loaded: a late server read never overwrites them
 let padTimer = null;
 let padPending = null;             // {key, text} not yet written
 
@@ -571,7 +570,7 @@ function onScratchInput(text) {
     scratchText: text,
     scratchPads: key ? { ...s.scratchPads, [key]: text } : s.scratchPads,
   }));
-  if (key) schedulePadSave(key, text);
+  if (key) { padTyped.add(key); schedulePadSave(key, text); }
 }
 
 /**
@@ -592,6 +591,8 @@ function syncPad() {
   padLoading.add(key);
   const landed = (text) => {
     padLoading.delete(key);
+    // text typed while the read was in flight is newer than what the read returns: it stays (and is the save in flight)
+    if (padTyped.has(key)) return;
     setState((s) => ({
       scratchPads: { ...s.scratchPads, [key]: text },
       // …and onto the screen only if this is still the pad on screen. A PM who switched tabs while
@@ -671,31 +672,96 @@ const scratchBlock = el('div', {
     scratchSendBtn, scratchCopyBtn, scratchClearBtn, scratchNote),
 );
 
+/**
+ * Paint the scratchpad drawer and the bottom bar's scratchpad toggle for the active tab `act`.
+ * renderTabs calls it on one line, so the scratchpad (3C) and the tab strip (3A) are separate hunks.
+ */
+function renderScratch(act) {
+  /* `defaultValue` IS the textarea's child text node — the rendered text lives in the DOM, not only
+   * in a property, which is how the prototype's runtime leaves it. Writing it costs a typed-in box
+   * nothing; `value` is written only when it differs, so the caret stays where the PM put it. */
+  const scratchText = state.scratchText || '';
+  if (scratchTa.defaultValue !== scratchText) scratchTa.defaultValue = scratchText;
+  if (scratchTa.value !== scratchText) scratchTa.value = scratchText;
+  /* The drawer's height, real mode only. The style ATTRIBUTE keeps the prototype's string; only the
+   * resolved `height` property is written, so the fixture render — which never reaches here — stays
+   * byte-identical to the design. Written on every paint rather than only on resize, because the
+   * restored value has to land on the first one. */
+  if (!FIXTURE) {
+    const h = clampScratchH(state.scratchH || SCRATCH_DEFAULT) + 'px';
+    if (scratchTa.style.height !== h) scratchTa.style.height = h;
+  }
+  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', 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.');
+  scratchToggleLabel.textContent = state.scratchOpen ? '▼ scratchpad' : '▲ scratchpad';
+  if (!FIXTURE) paintBottom(act);
+}
+
 /* ── the bottom bar (lines 992–996) ─────────────────────────────────────────────────────────── */
 
 const scratchToggleLabel = iv('▲ scratchpad');
 const colTitleLabel = iv('scratchpad');
 const copyLabel = iv('copy');
 
-const bottomBar = el('div', {
-  'data-tabs': 'bottom', 'data-term-chrome': '',
-  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', {
-    onClick: () => setState((s) => ({ scratchOpen: !s.scratchOpen })),
-    style: 'flex:none;color:oklch(0.72 0.014 214);font-size:11px;padding:3px 6px;white-space:nowrap',
-    hover: 'color:oklch(0.987 0.002 197.1)',
-  }, scratchToggleLabel),
-  el('span', {
-    style: 'font-family:var(--mono);color:#c4ccce;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
-  }, colTitleLabel),
-  el('button', {
-    onClick: () => copyActive(),
-    style: 'flex:none;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--brand);padding:3px 10px;min-height:26px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);white-space:nowrap',
-    hover: CHIP_HOVER,
-  }, copyLabel),
+const bottomBar = el('div', { 'data-tabs': 'bottom', 'data-term-chrome': '', class: 'lg-dock-bottom' },
+  button({ label: scratchToggleLabel, variant: 'ghost', size: 'sm', onClick: () => setState((s) => ({ scratchOpen: !s.scratchOpen })) }),
+  el('span', { class: 'lg-dock-bottom__title' }, colTitleLabel),
+  button({ label: copyLabel, variant: 'outline', size: 'sm', onClick: () => copyActive() }),
 );
 
+/* pm-os-absorb Run 3 (R11) took the scratchpad toggle out of the bar, and with it the only way to the pad on a desktop.
+ * 0.53.1 puts it back: paintBottom lays the bar out as the scratchpad toggle, the session's name and `copy`, or, on a
+ * phone, the terminal's compose line (the same per-session pad). Fixture mode keeps the prototype's bar. */
+const [bottomToggle, bottomTitle, bottomCopy] = bottomBar.children;
+bottomToggle.setAttribute('data-scratch', 'toggle');
+
+/* The compose line: one message field and Send on the SAME per-session pad as the drawer (padKey), so the text is kept
+ * on this machine and never crosses sessions. On a desktop ⌘K "Ask <session>" types to a session (pm/palette.js). */
+const composeInput = field({ label: PAL.compose.label, kind: 'textarea', hideLabel: true, placeholder: PAL.compose.placeholder,
+  attrs: { class: 'pl-compose__input', 'data-compose': 'input', rows: 1, enterkeyhint: 'send' } });
+const composeSend = button({ label: PAL.compose.send, variant: 'primary', onClick: () => sendCompose(),
+  attrs: { 'data-compose': 'send', 'aria-label': PAL.compose.sendLabel } });
+const composeLine = el('div', { class: 'pl-compose', 'data-compose': 'line' }, el('div', { class: 'pl-compose__field' }, composeInput), composeSend);
+// Send follows the field as it is typed, not only on the next render of the bar
+composeInput.control.addEventListener('input', () => { composeSend.disabled = !composeInput.control.value.trim(); onScratchInput(composeInput.control.value); });
+/* The keyboard's Send key is Enter (enterkeyhint 'send'), so it sends. Shift+Enter, and Enter while a composition is open, stay a newline. */
+composeInput.control.addEventListener('keydown', (e) => {
+  if (e.key !== 'Enter' || e.shiftKey || e.isComposing) return;
+  e.preventDefault();
+  sendCompose();
+});
+
+/** Send the line to the session and clear it, only when the session took the text: otherwise the message stays and the PM is told. */
+function sendCompose() {
+  const act = activeTab();
+  if (!act || act.kind !== 'term' || !(state.scratchText || '').trim()) return;
+  if (!sendScratchToTerminal({ strict: true })) { toast({ text: PAL.compose.failed(String(act.title || act.id)), tone: 'error' }); return; }
+  onScratchInput('');
+}
+
+/** The bar in real mode: the scratchpad toggle, the title and copy; a phone's terminal gets the compose line instead. */
+function paintBottom(act) {
+  const compose = isMobile() && !!act && act.kind === 'term';
+  bottomTitle.textContent = act ? act.title : '';
+  if (compose) {
+    ensureComponentsCss();
+    const text = state.scratchText || '';
+    if (composeInput.control.value !== text) composeInput.control.value = text;
+    composeSend.disabled = !text.trim();
+  }
+  setChildren(bottomBar, compose ? [composeLine] : (act ? [bottomToggle, bottomTitle, bottomCopy] : [bottomToggle, bottomTitle]));
+}
+
 /* ── clipboard + scratchpad actions (lines 2098–2118) ───────────────────────────────────────── */
 
 function copyToClipboard(txt) {
@@ -707,19 +773,23 @@ function activeTab() {
   return visibleTabs().find((t) => t.id === state.active) || null;
 }
 
-/** `⇥ send to terminal` (line 2104): one echoed prompt line per non-empty scratchpad line. */
-function sendScratchToTerminal() {
+/** `⇥ send to terminal` (line 2104): one echoed prompt line per non-empty scratchpad line. Answers whether a real session took the text.
+ * `strict` (the compose line) sends first and echoes nothing when the session did not take it. */
+function sendScratchToTerminal({ strict = false } = {}) {
   const act = activeTab();
-  if (!act || act.kind !== 'term') return;
+  if (!act || act.kind !== 'term') return false;
   const v = (state.scratchText || '').trim();
-  if (!v) return;
+  if (!v) return false;
   const lines = FX.scratchLines(v);
-  setState((s) => ({ termHist: { ...s.termHist, [act.id]: [...(s.termHist[act.id] || []), ...lines] } }));
   /* A real PTY is not a scrollback list: when a terminal module is present it gets the same text
    * as keystrokes, so the paste lands in the shell rather than only in the transcript. */
+  let sent = false;
   if (!FIXTURE && termMod && typeof termMod.sendToTerm === 'function') {
-    try { termMod.sendToTerm(act, v + '\n'); } catch { /* the transcript still shows it */ }
+    try { sent = termMod.sendToTerm(act, v + '\n') === true; } catch { /* the transcript still shows it */ }
   }
+  if (strict && !sent) return false;
+  setState((s) => ({ termHist: { ...s.termHist, [act.id]: [...(s.termHist[act.id] || []), ...lines] } }));
+  return sent;
 }
 
 /** `copy` (line 2111): the doc's text, or the attach command, or the scratchpad. */
@@ -809,7 +879,7 @@ function peerRow(prompt, p) {
       (p.agent === 'claude' && p.shown !== 'exited') ? el('button', {
         'data-r12': 'switch-model', title: 'types /model into this pane; effort is not changed',
         onClick: async () => {
-          const t = typeof window !== 'undefined' && window.prompt ? window.prompt('Switch “' + p.name + '” to which tier? fast, balanced or deep', 'balanced') : null;
+          const t = await askChoice({ title: 'Switch “' + p.name + '” model', label: 'Tier', value: 'balanced', confirmLabel: 'Switch', options: [{ value: 'fast', label: 'fast' }, { value: 'balanced', label: 'balanced' }, { value: 'deep', label: 'deep' }] });
           if (!t || !t.trim()) return;
           const out = await fetch('/api/session/model', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: p.id, tier: t.trim() }) })
             .then((r) => r.json()).catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
@@ -883,7 +953,7 @@ function startPromptBlock() {
       el('button', {
         onClick: () => newSession(prompt.slug, { force: true }),
         style: CH_BTN, hover: CHIP_HOVER,
-      }, '＋ start another session here anyway'),
+      }, ...iconLabel('plus', 'start another session here anyway')),
       el('button', { onClick: () => dismissStartPrompt(), style: CH_BTN, hover: CHIP_HOVER }, 'cancel'),
     ),
     // The limit, where the PM meets the feature — never only in a comment. PMOS hosts the terminal;
@@ -900,16 +970,21 @@ function startPromptBlock() {
  * `flex:1;overflow-y:auto` — and a flex item's automatic minimum is its content, so without this
  * the pane grows to fit a long document instead of letting the document scroll inside it, and the
  * growth escapes upward until the whole page scrolls. See the chain documented in pm/app.js. */
-const PANE_STYLE = 'flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid oklch(1 0 0 / 10%)';
+const PANE_STYLE = 'flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border)';
 const paneHosts = new Map();          // tab id -> the pane element, kept for the tab's whole life
 
 function paneFor(tab) {
   let host = paneHosts.get(tab.id);
   if (!host) { host = el('div', { style: PANE_STYLE }); paneHosts.set(tab.id, host); }
+  if (tab.kind === 'dest') {
+    // pm-os-absorb Runs 2–5: a destination as a tab until Run 3's frame. The registry arrives after boot (app.js
+    // imports it lazily and renders again), so until then the host stays empty.
+    const reg = window.pmApp && window.pmApp.registry;
+    if (reg && typeof reg.mountDestTab === 'function') reg.mountDestTab(host, tab);
+    return host;
+  }
   if (tab.kind === 'term') {
     if (termMod && typeof termMod.mountTerm === 'function') termMod.mountTerm(host, tab);
-  } else if (tab.kind === 'task') {
-    mountTask(host, tab);
   } else if (tab.kind === 'skill') {
     if (liveMod && typeof liveMod.mountSkillTab === 'function') liveMod.mountSkillTab(host, tab);
   } else if (tab.kind === 'transcript') {
@@ -918,6 +993,9 @@ function paneFor(tab) {
     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 if (tab.kind === 'breakdown') {
+    // pm-os-absorb Run 1 — an initiative's items (Tree, Board, item sheet); an empty pane until the module lands
+    if (breakdownMod && typeof breakdownMod.mountBreakdown === 'function') breakdownMod.mountBreakdown(host, tab);
   } else {
     mountDoc(host, tab);
   }
@@ -932,6 +1010,7 @@ function reapClosedPanes() {
     const tab = { id };
     if (termMod && typeof termMod.disposeTerm === 'function') { try { termMod.disposeTerm(tab); } catch { /* ignore */ } }
     try { disposeDoc(id); } catch { /* ignore */ }
+    try { if (window.pmApp && window.pmApp.registry) window.pmApp.registry.disposeDestTab(id); } catch { /* ignore */ }
     if (host.parentNode) host.parentNode.removeChild(host);
     paneHosts.delete(id);
     const slot = offSlots.get(id);
@@ -997,6 +1076,37 @@ function keepSessionsLive(shown) {
 
 /* ── the tab bar ───────────────────────────────────────────────────────────────────────────── */
 
+/* pm-os-absorb Run 3 (slice 3A): in the frame this panel is the agent dock. Its strip then carries the dock's own
+ * "＋ Session" menu (new session, session with options, and the skills to start from) in place of the one-click chip, and a
+ * control that folds the dock to its rail. dock.js is loaded lazily, like the other siblings here, so panel 4 never waits
+ * for it; until it lands the strip shows the chip it always had. Outside the frame (fixture mode, ?layout=legacy) nothing
+ * here changes. */
+let dockMod = null;
+const inFrame = () => !!(window.pmApp && window.pmApp.frame && window.pmApp.frame.on);
+import('./dock.js').then((m) => { dockMod = m; if (inFrame()) setState({}); }).catch(() => { dockMod = null; });
+let dockParts = null;
+function frameDock() {
+  if (!dockMod || !inFrame()) return null;
+  const repo = currentProduct();
+  const ws = repo && dataMod && typeof dataMod.wsOf === 'function' ? dataMod.wsOf(repo) : null;
+  if (!dockParts || dockParts.ws !== ws) {
+    dockParts = {
+      ws,
+      session: dockMod.sessionMenuButton({
+        ws,
+        newSession: () => newSession(),
+        withOptions: (d) => { openNewSession(selSlug(), { agent: d.cli }); setState({ newSessTier: d.tier }); },
+        openSkill: (sk) => openTab({ id: 'skill:' + sk.id, kind: 'skill', title: sk.label || sk.skill || sk.id, skillId: sk.id, repo: state.product || null, slug: null, role: 'SKILL' }),
+      }),
+      fold: dockParts ? dockParts.fold : dockMod.foldButton({ fold: () => window.pmApp.frame.foldDock() }),
+      focus: dockParts ? dockParts.focus : dockMod.focusButton({ toggle: () => window.pmApp.frame.toggleFocus() }),
+    };
+  }
+  if (isMobile()) return { session: dockParts.session, fold: null, focus: null };
+  dockMod.paintFocus(dockParts.focus, !!window.pmApp.frame.dockMax);
+  return { session: dockParts.session, fold: dockParts.fold, focus: dockParts.focus };
+}
+
 /**
  * overhaul-r1 R2.2/R2.3 — the line of work a tab is on, or null when it is the main tree (which
  * shows nothing extra). A doc tab carries its tree from the search hit that opened it; a terminal
@@ -1026,7 +1136,7 @@ function cockpitTabNode(t, act, splitTab, vertical) {
   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);
+    : (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',
@@ -1054,7 +1164,7 @@ function cockpitTabNode(t, act, splitTab, vertical) {
       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)',
-    }, '×'),
+    }, closeIcon()),
   );
 }
 
@@ -1063,7 +1173,7 @@ 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);
+    : (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': '',
@@ -1088,7 +1198,7 @@ function cockpitTabRow(t, front) {
     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)',
-    }, '×'),
+    }, closeIcon()),
   );
 }
 
@@ -1104,7 +1214,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 === 'view' ? 'view' : t.kind === 'web' ? 'web' : t.kind === 'skill' ? 'skill' : t.kind === 'transcript' ? 'conversation' : t.role);
+    : (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
@@ -1126,10 +1236,10 @@ function tabNode(t, act, splitTab) {
       ),
     ),
     el('button', {
-      onClick: () => closeTab(t.id),
+      onClick: () => closeTab(t.id), 'aria-label': 'close ' + t.title, title: 'close',
       style: 'color:oklch(0.6 0.02 213);font-size:12px;padding:2px 3px;align-self:flex-start;margin-top:6px',
       hover: 'color:oklch(0.987 0.002 197.1)',
-    }, '×'),
+    }, closeIcon()),
   );
 }
 
@@ -1153,16 +1263,19 @@ export function renderTabs(host) {
 
   // ── tab bar ──
   const canSplit = visTabs.length >= 2 || !!state.splitId;
-  splitLabel.textContent = state.splitId ? '⫽ unsplit' : '⫽ split';
+  splitLabel.textContent = state.splitId ? 'unsplit' : 'split';
   const ck = cockpitLook();
-  newSessionBtn.textContent = ck ? '+ session' : '＋ session';
-  emptyState.textContent = "nothing open — click a task's output or an artifact, or " + (ck ? '+' : '＋') + ' session above';
+  ensureSprite();   // the dock controls draw lucide icons (C6); the sprite loads once
+  emptyState.textContent = 'Nothing is open. Open an artifact, or press + session to start a session.';
   /* 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;
+  const fr = frameDock();   // the dock's own controls, in the frame only
   host.style.flexDirection = vertical ? 'row' : 'column';
-  orientLabel.textContent = vertical ? '⇆ tabs on top' : '⇅ tabs at side';
+  orientLabel.textContent = vertical ? 'tabs on top' : 'tabs at side';
+  const oi = vertical ? 'arrow-left-right' : 'arrow-up-down';
+  if (!orientIcon.firstChild || orientIcon.firstChild.getAttribute('data-icon') !== oi) orientIcon.replaceChildren(icon(oi));
   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);
@@ -1170,14 +1283,16 @@ export function renderTabs(host) {
     newSessionBtn.setAttribute('style', V_BTN + ';margin-bottom:6px');
     for (const b of [newWebBtn, newSessionOptsBtn, splitBtn, orientBtn]) b.setAttribute('style', V_BTN);
     setChildren(tabBar, [
-      newSessionBtn,
+      fr ? fr.session : 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),
+        orientBtn,
+        fr ? fr.focus : null,
+        fr ? fr.fold : null),
     ]);
   } else if (ck) {
     tabBar.setAttribute('style', CK_BAR + ';scrollbar-width:thin');
@@ -1191,14 +1306,14 @@ export function renderTabs(host) {
     ].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]);
+    setChildren(tabBar, [...visTabs.map((t) => cockpitTabNode(t, act, splitTab)), ...extras, fr ? fr.session : newSessionBtn, FIXTURE ? null : orientBtn, fr ? fr.focus : null, fr ? fr.fold : null]);
   } 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,
+      fr ? fr.session : 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,
@@ -1230,36 +1345,10 @@ export function renderTabs(host) {
   // …and the sessions that are open but not on screen keep running, off screen (see above).
   keepSessionsLive(new Set([act && act.id, splitTab && splitTab.id].filter(Boolean)));
 
-  // ── scratchpad ──
-  /* `defaultValue` IS the textarea's child text node — the rendered text lives in the DOM, not only
-   * in a property, which is how the prototype's runtime leaves it. Writing it costs a typed-in box
-   * nothing; `value` is written only when it differs, so the caret stays where the PM put it. */
-  const scratchText = state.scratchText || '';
-  if (scratchTa.defaultValue !== scratchText) scratchTa.defaultValue = scratchText;
-  if (scratchTa.value !== scratchText) scratchTa.value = scratchText;
-  /* The drawer's height, real mode only. The style ATTRIBUTE keeps the prototype's string; only the
-   * resolved `height` property is written, so the fixture render — which never reaches here — stays
-   * byte-identical to the design. Written on every paint rather than only on resize, because the
-   * restored value has to land on the first one. */
-  if (!FIXTURE) {
-    const h = clampScratchH(state.scratchH || SCRATCH_DEFAULT) + 'px';
-    if (scratchTa.style.height !== h) scratchTa.style.height = h;
-  }
-  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', 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.');
+  // ── scratchpad (renderScratch owns the drawer and the toggle label; 3C) ──
+  renderScratch(act);
 
   // ── bottom bar ──
-  scratchToggleLabel.textContent = state.scratchOpen ? '▼ scratchpad' : '▲ scratchpad';
   colTitleLabel.textContent = act ? act.title : 'scratchpad';
   copyLabel.textContent = state.copied ? 'copied ✓' : 'copy';
 
@@ -1276,7 +1365,7 @@ export function renderTabs(host) {
     newSessionBlock(),
     visTabs.length === 0 && !state.startPrompt && !state.newSess ? emptyState : null,
     panesRow,
-    state.scratchOpen ? scratchBlock : null,
+    state.scratchOpen && (FIXTURE || !isMobile()) ? scratchBlock : null,
     bottomBar,
   ]);
 }

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

@@ -17,6 +17,7 @@ import { el } from './dom.js';
 import { state, setState, subscribe } from './state.js';
 import { boardOf } from './board-read.js';
 import { openNewSession } from './panel-newsess.js';
+import { askConfirm } from './dialogs.js';
 
 const ip = (v) => el('span', null, v);
 const MONO = 'font-family:var(--mono);font-size:10.5px';
@@ -76,8 +77,10 @@ async function endSession(name, s) {
 }
 
 async function removeTree(name, t) {
-  const ok = typeof window === 'undefined' || !window.confirm ? true
-    : window.confirm('Remove the folder for “' + t.branch + '”?\n\n' + t.dir + '\n\nThis only removes the folder (git worktree remove). The branch is kept and nothing is merged into main — merge through a pull request. A folder with unsaved work, or a running session, is refused: end the session first.');
+  const ok = await askConfirm({
+    title: 'Remove the folder for “' + t.branch + '”?', confirmLabel: 'Remove folder', danger: true,
+    body: t.dir + '\n\nThis only removes the folder (git worktree remove). The branch is kept and nothing is merged into main — merge through a pull request. A folder with unsaved work, or a running session, is refused: end the session first.',
+  });
   if (!ok) return;
   const out = dataMod ? await dataMod.removeWorktree(t.ws, t.dir) : null;
   if (!out || out.ok === false) { note(name, (out && out.error) || 'the folder could not be removed', 'bad'); return; }