@bastani/atomic 0.9.19-alpha.7 → 0.9.19-alpha.9

package/dist/builtin/workflows/src/extension/index.bundle.mjs

@@ -69012,9 +69012,9 @@ function renderDetailHintRows(detail, width, theme) {
 }
 function formatTime(ms) {
   const d = new Date(ms);
-  const hh = String(d.getUTCHours()).padStart(2, "0");
-  const mm = String(d.getUTCMinutes()).padStart(2, "0");
-  const ss = String(d.getUTCSeconds()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
   return `${hh}:${mm}:${ss}`;
 }
 
@@ -72599,7 +72599,7 @@ class GraphCanvas {
 
 // dist/builtin/workflows/src/tui/layout.ts
 var NODE_W = 24;
-var NODE_H = 6;
+var NODE_H = 5;
 function computeLayout(stages, opts = {}) {
   const colGap = opts.colGap ?? 4;
   const rowGap = opts.rowGap ?? 3;
@@ -72682,17 +72682,255 @@ function computeLayout(stages, opts = {}) {
       rowIndex.set(ids[i], i);
     }
   }
+  const heights = new Map(stages.map((stage) => [stage.id, opts.nodeHeight?.(stage) ?? NODE_H]));
+  const verticalOffsets = new Map;
+  const horizontalOffsets = new Map;
+  let depthY = 0;
+  for (const depth of [...colGroups.keys()].sort((a, b) => a - b)) {
+    const ids = colGroups.get(depth);
+    verticalOffsets.set(depth, depthY);
+    let siblingY = 0;
+    let tallest = 0;
+    for (const id of ids) {
+      const height = heights.get(id);
+      horizontalOffsets.set(id, siblingY);
+      siblingY += height + rowGap;
+      tallest = Math.max(tallest, height);
+    }
+    depthY += tallest + rowGap;
+  }
   const nodes = [];
   for (const s of stages) {
     const col = colMap.get(s.id) ?? 0;
     const row = rowIndex.get(s.id) ?? 0;
     const x = orientation === "vertical" ? row * (NODE_W + colGap) + (centreShift.get(col) ?? 0) : col * (NODE_W + colGap);
-    const y = orientation === "vertical" ? col * (NODE_H + rowGap) : row * (NODE_H + rowGap);
-    nodes.push({ stage: s, col, row, x, y });
+    const y = orientation === "vertical" ? verticalOffsets.get(col) : horizontalOffsets.get(s.id);
+    nodes.push({ stage: s, col, row, x, y, ...opts.nodeHeight ? { height: heights.get(s.id) } : {} });
   }
   return nodes;
 }
 
+// dist/builtin/workflows/src/tui/node-card.ts
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+function pulseT(phase) {
+  return (Math.sin(phase * Math.PI * 2 - Math.PI / 2) + 1) / 2;
+}
+function queuedBadgeCount(count) {
+  if (typeof count !== "number" || !Number.isFinite(count))
+    return 0;
+  return Math.max(0, Math.trunc(count));
+}
+function queuedBadgeText(count) {
+  return `✉ ${count} queued`;
+}
+function pickBorder(status, focused, phase, theme) {
+  switch (status) {
+    case "running":
+      if (focused)
+        return theme.warning;
+      return lerpColor(theme.borderDim, theme.warning, pulseT(phase));
+    case "paused":
+      return theme.warning;
+    case "awaiting_input":
+      if (focused)
+        return theme.info;
+      return lerpColor(theme.borderDim, theme.info, pulseT(phase));
+    case "completed":
+      return theme.success;
+    case "failed":
+      return theme.error;
+    case "blocked":
+      return theme.dim;
+    case "skipped":
+      return theme.dim;
+    default:
+      return focused ? theme.borderActive : theme.borderDim;
+  }
+}
+function durationColor(status, theme) {
+  switch (status) {
+    case "running":
+      return theme.warning;
+    case "paused":
+      return theme.warning;
+    case "awaiting_input":
+      return theme.info;
+    case "completed":
+      return theme.success;
+    case "failed":
+      return theme.error;
+    default:
+      return theme.dim;
+  }
+}
+function blockedBadgeText(stage, stages, width) {
+  const base = "↑ blocked";
+  const blockedBy = stage.blockedByStageId;
+  if (!blockedBy)
+    return base;
+  const upstream = stages?.find((s) => s.id === blockedBy)?.name ?? blockedBy;
+  const withUpstream = `${base} by ${upstream}`;
+  if (visibleWidth(withUpstream) <= width)
+    return withUpstream;
+  return base;
+}
+function durationText(stage) {
+  const elapsed = elapsedStageMs(stage);
+  return elapsed === undefined ? "—" : fmtDuration(elapsed);
+}
+function metaText(stage) {
+  return stage.topologyState === "unavailable" ? "topology unavailable" : "";
+}
+function modelText(stage, innerWidth) {
+  const model = stage.model;
+  if (model === undefined || model === "")
+    return "";
+  const slash = model.lastIndexOf("/");
+  const short = slash >= 0 ? model.slice(slash + 1) : model;
+  const level = stage.thinkingLevel;
+  const showLevel = level !== undefined && level !== "" && level !== "off";
+  const suffix = showLevel ? ` · ${level}` : "";
+  const full = `${short}${suffix}`;
+  if (visibleWidth(full) <= innerWidth)
+    return full;
+  const modelSuffix = short.endsWith("-fast") ? "-fast" : "";
+  const name = modelSuffix ? short.slice(0, -modelSuffix.length) : short;
+  const room = Math.max(1, innerWidth - visibleWidth(modelSuffix + suffix));
+  return `${truncateToWidth2(name, room, "…")}${modelSuffix}${suffix}`;
+}
+function workflowChildRunRows(stage, width) {
+  const child = stage.workflowChild ?? stage.workflowChildRun;
+  if (child === undefined)
+    return [];
+  return wrapIdentifierLines(child.runId, Math.max(1, width), "run ", "").map((row) => `${row.prefix}${row.chunk}`);
+}
+function workflowChildMetaText(stage) {
+  const completed = stage.workflowChild;
+  if (completed !== undefined) {
+    const outputCount = completed.outputCount ?? Object.keys(completed.outputs).length;
+    return outputCount === 1 ? "1 out" : `${outputCount} outs`;
+  }
+  if (stage.workflowChildRun !== undefined)
+    return "live";
+  return;
+}
+function joinCompactStatusMeta(status, meta, width) {
+  const candidates = [`${status} · ${meta}`, `${status} ·${meta}`, `${status}· ${meta}`, `${status}·${meta}`];
+  return candidates.find((candidate) => visibleWidth(candidate) <= width) ?? status;
+}
+function nodeCardHeight(stage, opts = {}) {
+  const queuedRows = queuedBadgeCount(opts.queuedMessageCount) > 0 ? 1 : 0;
+  const modelRows = stage.model !== undefined && stage.model !== "" ? 1 : 0;
+  let bodyRows;
+  if (stage.status === "awaiting_input") {
+    bodyRows = 2 + modelRows + queuedRows;
+  } else if (stage.workflowChild !== undefined || stage.workflowChildRun !== undefined) {
+    const innerWidth = Math.max(2, (opts.width ?? NODE_W) - 2);
+    bodyRows = workflowChildRunRows(stage, innerWidth).length + 1 + queuedRows;
+  } else {
+    bodyRows = 2 + modelRows + (metaText(stage) ? 1 : 0) + queuedRows;
+  }
+  return Math.max(NODE_H, bodyRows + 2);
+}
+function statusLabel(status) {
+  switch (status) {
+    case "awaiting_input":
+      return "awaiting input";
+    case "completed":
+      return "complete";
+    default:
+      return status.replace(/_/g, " ");
+  }
+}
+function truncate(s, maxWidth) {
+  if (maxWidth <= 0)
+    return "";
+  if (visibleWidth(s) <= maxWidth)
+    return s;
+  return truncateToWidth2(s, maxWidth, "…");
+}
+function centreColored(content, width, fg, bg, opts = {}) {
+  const safe = truncate(content, width);
+  const safeWidth = visibleWidth(safe);
+  const pad = Math.max(0, width - safeWidth);
+  const left = Math.max(0, Math.floor(pad / 2));
+  const right = Math.max(0, pad - left);
+  const bold = opts.bold ? BOLD : "";
+  return `${bg}${" ".repeat(left)}` + `${hexToAnsi(fg)}${bold}${safe}${RESET}` + `${bg}${" ".repeat(right)}`;
+}
+function buildTitleSlot(name, innerWidth, focused, theme, cardBg, compact = false) {
+  const maxName = Math.max(2, compact ? innerWidth - 1 : innerWidth - 4);
+  const safeName = stripTerminalSequences(truncate(name, maxName));
+  if (focused) {
+    const tabText = compact ? safeName : ` ${safeName} `;
+    const styled = `${paint(tabText, theme.surface, {
+      bg: theme.accent,
+      bold: true
+    })}${cardBg}`;
+    return { slot: styled, visibleWidth: visibleWidth(tabText) };
+  }
+  const titleRaw = compact ? safeName : ` ${safeName} `;
+  const styled = `${BOLD}${titleRaw}${RESET}${cardBg}`;
+  return { slot: styled, visibleWidth: visibleWidth(titleRaw) };
+}
+function renderNodeCard(stage, opts) {
+  const width = opts.width ?? NODE_W;
+  const height = opts.height ?? nodeCardHeight(stage, opts);
+  const focused = opts.focused ?? false;
+  const phase = opts.pulsePhase ?? 0;
+  const theme = opts.theme;
+  const borderHex = pickBorder(stage.status, focused, phase, theme);
+  const bc = hexToAnsi(borderHex);
+  const bg = DEFAULT_BG;
+  const innerWidth = Math.max(2, width - 2);
+  const child = stage.workflowChild ?? stage.workflowChildRun;
+  const { slot: titleSlot, visibleWidth: titleVisibleWidth } = buildTitleSlot(child === undefined ? stage.name : `↳ ${child.workflow}`, innerWidth, focused, theme, bg, child !== undefined);
+  const titleStart = Math.max(1, Math.floor((innerWidth - titleVisibleWidth) / 2));
+  const titleEnd = titleStart + titleVisibleWidth;
+  const topMiddle = `${bc}${"─".repeat(titleStart)}` + `${titleSlot}${bc}` + `${"─".repeat(Math.max(0, innerWidth - titleEnd))}`;
+  const top = `${bg}${bc}╭${topMiddle}╮${RESET}`;
+  const bottom = `${bg}${bc}╰${"─".repeat(innerWidth)}╯${RESET}`;
+  const bodyText = stage.nodeKind === "tool" ? "durable tool" : stage.status === "blocked" ? blockedBadgeText(stage, opts.stages, innerWidth) : durationText(stage);
+  const bodyHex = durationColor(stage.status, theme);
+  const statusText = `${statusIcon(stage.status)} ${stage.toolStatus ?? statusLabel(stage.status)}`;
+  const queuedCount = queuedBadgeCount(opts.queuedMessageCount);
+  const statusLine = `${bg}${bc}│${RESET}` + centreColored(statusText, innerWidth, bodyHex, bg, {
+    bold: stage.status === "running" || stage.status === "awaiting_input"
+  }) + `${bg}${bc}│${RESET}`;
+  const durLine = `${bg}${bc}│${RESET}` + centreColored(bodyText, innerWidth, bodyHex, bg, {
+    bold: stage.status === "blocked"
+  }) + `${bg}${bc}│${RESET}`;
+  const contentRows = Math.max(0, height - 2);
+  const metaLine = `${bg}${bc}│${RESET}${centreColored(metaText(stage), innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`;
+  const model = modelText(stage, innerWidth);
+  const modelLine = `${bg}${bc}│${RESET}${centreColored(model, innerWidth, theme.textMuted, bg)}${bg}${bc}│${RESET}`;
+  const childRunLines = workflowChildRunRows(stage, innerWidth).map((row) => `${bg}${bc}│${RESET}${centreColored(row, innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`);
+  const childMeta = workflowChildMetaText(stage);
+  const childSummary = childMeta === undefined ? undefined : joinCompactStatusMeta(statusText, childMeta, innerWidth);
+  const childSummaryLine = childSummary === undefined ? undefined : `${bg}${bc}│${RESET}` + centreColored(childSummary, innerWidth, bodyHex, bg, {
+    bold: stage.status === "running" || stage.status === "awaiting_input"
+  }) + `${bg}${bc}│${RESET}`;
+  const queuedLines = queuedCount > 0 ? [
+    `${bg}${bc}│${RESET}` + centreColored(queuedBadgeText(queuedCount), innerWidth, theme.info, bg, { bold: true }) + `${bg}${bc}│${RESET}`
+  ] : [];
+  const modelLines = model === "" ? [] : [modelLine];
+  const interior = stage.status === "awaiting_input" ? [
+    ...modelLines,
+    statusLine,
+    ...model === "" && queuedCount === 0 ? [
+      `${bg}${bc}│${RESET}` + centreColored("waiting for response", innerWidth, theme.info, bg) + `${bg}${bc}│${RESET}`
+    ] : [],
+    ...queuedLines,
+    `${bg}${bc}│${RESET}` + centreColored("↵ enter to respond", innerWidth, theme.dim, bg) + `${bg}${bc}│${RESET}`
+  ] : childSummaryLine === undefined ? [durLine, ...modelLines, statusLine, ...metaText(stage) ? [metaLine] : [], ...queuedLines] : [...childRunLines, childSummaryLine, ...queuedLines];
+  while (interior.length < contentRows) {
+    interior.push(`${bg}${bc}│${RESET}${bg}${" ".repeat(innerWidth)}${bg}${bc}│${RESET}`);
+  }
+  if (interior.length > contentRows)
+    interior.length = contentRows;
+  return [top, ...interior, bottom];
+}
+
 // dist/builtin/workflows/src/tui/prompt-card-select.ts
 import { SelectList, truncateToWidth as truncateToWidth3 } from "@earendil-works/pi-tui";
 function createPromptSelectList(state, theme, maxVisible = 5) {
@@ -73558,9 +73796,25 @@ class GraphViewState {
   _needsAnimationTick() {
     return this.promptState !== null || this.hasAnimatingStages;
   }
+  _nodeHeight(stage) {
+    const baseHeight = nodeCardHeight(stage);
+    if (!this.getStageQueuedMessageCount || nodeCardHeight(stage, { queuedMessageCount: 1 }) === baseHeight) {
+      return baseHeight;
+    }
+    return nodeCardHeight(stage, { queuedMessageCount: this._stageQueuedMessageCount(stage) });
+  }
+  _refreshQueuedNodeHeights() {
+    if (!this.getStageQueuedMessageCount)
+      return;
+    if (!this.cachedLayout.some((node) => (node.height ?? NODE_H) !== this._nodeHeight(node.stage)))
+      return;
+    this.lastBuiltSnapshotVersion = null;
+    this._rebuildLayout();
+  }
   _rebuildLayout() {
     const version = this.currentSnapshot?.version ?? null;
     if (version !== null && version === this.lastBuiltSnapshotVersion) {
+      this._refreshQueuedNodeHeights();
       return;
     }
     const run = this._getCurrentRun();
@@ -73587,6 +73841,8 @@ class GraphViewState {
       const next = graphStages[index];
       if (!next || node.stage.id !== next.id || node.stage.nodeKind !== next.nodeKind)
         return false;
+      if ((node.height ?? NODE_H) !== this._nodeHeight(next))
+        return false;
       if (node.stage.parentIds.length !== next.parentIds.length)
         return false;
       return node.stage.parentIds.every((parentId, parentIndex) => parentId === next.parentIds[parentIndex]);
@@ -73602,7 +73858,10 @@ class GraphViewState {
       this.lastBuiltSnapshotVersion = version;
       return;
     }
-    const nextLayout = computeLayout(graphStages, { orientation: "vertical" });
+    const nextLayout = computeLayout(graphStages, {
+      orientation: "vertical",
+      nodeHeight: (stage) => this._nodeHeight(stage)
+    });
     this.cachedLayout = nextLayout;
     this.cachedDisplayStages = nextLayout.map((node) => node.stage);
     this.cachedRenderGeometry = this._buildRenderGeometry(nextLayout);
@@ -73621,13 +73880,15 @@ class GraphViewState {
     for (let index = 0;index < layout.length; index++) {
       const node = layout[index];
       canvasWidth = Math.max(canvasWidth, node.x + NODE_W);
-      totalRows = Math.max(totalRows, node.y + NODE_H);
+      const bottom = node.y + (node.height ?? NODE_H);
+      totalRows = Math.max(totalRows, bottom);
       nodeByStageId.set(node.stage.id, node);
       const band = bandsByTop.get(node.y);
-      if (band)
+      if (band) {
         band.nodeIndices.push(index);
-      else
-        bandsByTop.set(node.y, { top: node.y, bottom: node.y + NODE_H, nodeIndices: [index] });
+        band.bottom = Math.max(band.bottom, bottom);
+      } else
+        bandsByTop.set(node.y, { top: node.y, bottom, nodeIndices: [index] });
     }
     const edges = [];
     for (const node of layout) {
@@ -73640,9 +73901,10 @@ class GraphViewState {
         edges.push({
           parentX: parent.x,
           parentY: parent.y,
+          parentHeight: parent.height ?? NODE_H,
           childX: node.x,
           childY: node.y,
-          top: parent.y + NODE_H,
+          top: parent.y + (parent.height ?? NODE_H),
           bottom: node.y,
           left: Math.min(parentCol, childCol),
           right: Math.max(parentCol, childCol) + 1
@@ -73978,10 +74240,10 @@ class GraphViewRenderHelpers extends GraphViewState {
     }
     this._clampGraphHorizontalScroll(totalCols, viewportCols);
   }
-  _plotEdge(canvas, px, py, cx, cy, color) {
+  _plotEdge(canvas, px, py, cx, cy, color, parentHeight = NODE_H) {
     const parentCol = px + Math.floor(NODE_W / 2);
     const childCol = cx + Math.floor(NODE_W / 2);
-    const parentExitRow = py + NODE_H;
+    const parentExitRow = py + parentHeight;
     const childEntryRow = cy - 1;
     if (childEntryRow < parentExitRow)
       return;
@@ -74040,214 +74302,6 @@ class GraphViewRenderHelpers extends GraphViewState {
   }
 }
 
-// dist/builtin/workflows/src/tui/node-card.ts
-import { stripTerminalSequences } from "@earendil-works/pi-tui";
-function pulseT(phase) {
-  return (Math.sin(phase * Math.PI * 2 - Math.PI / 2) + 1) / 2;
-}
-function queuedBadgeCount(count) {
-  if (typeof count !== "number" || !Number.isFinite(count))
-    return 0;
-  return Math.max(0, Math.trunc(count));
-}
-function queuedBadgeText(count) {
-  return `✉ ${count} queued`;
-}
-function pickBorder(status, focused, phase, theme) {
-  switch (status) {
-    case "running":
-      if (focused)
-        return theme.warning;
-      return lerpColor(theme.borderDim, theme.warning, pulseT(phase));
-    case "paused":
-      return theme.warning;
-    case "awaiting_input":
-      if (focused)
-        return theme.info;
-      return lerpColor(theme.borderDim, theme.info, pulseT(phase));
-    case "completed":
-      return theme.success;
-    case "failed":
-      return theme.error;
-    case "blocked":
-      return theme.dim;
-    case "skipped":
-      return theme.dim;
-    default:
-      return focused ? theme.borderActive : theme.borderDim;
-  }
-}
-function durationColor(status, theme) {
-  switch (status) {
-    case "running":
-      return theme.warning;
-    case "paused":
-      return theme.warning;
-    case "awaiting_input":
-      return theme.info;
-    case "completed":
-      return theme.success;
-    case "failed":
-      return theme.error;
-    default:
-      return theme.dim;
-  }
-}
-function blockedBadgeText(stage, stages, width) {
-  const base = "↑ blocked";
-  const blockedBy = stage.blockedByStageId;
-  if (!blockedBy)
-    return base;
-  const upstream = stages?.find((s) => s.id === blockedBy)?.name ?? blockedBy;
-  const withUpstream = `${base} by ${upstream}`;
-  if (visibleWidth(withUpstream) <= width)
-    return withUpstream;
-  return base;
-}
-function durationText(stage) {
-  const elapsed = elapsedStageMs(stage);
-  return elapsed === undefined ? "—" : fmtDuration(elapsed);
-}
-function metaText(stage) {
-  if (stage.topologyState === "unavailable")
-    return "topology unavailable";
-  const deps = stage.parentIds.length;
-  const dependencyText = deps === 0 ? "root" : deps === 1 ? "1 dep" : `${deps} deps`;
-  return dependencyText;
-}
-function modelText(stage, innerWidth) {
-  const model = stage.model;
-  if (model === undefined || model === "")
-    return "—";
-  const slash = model.lastIndexOf("/");
-  const short = slash >= 0 ? model.slice(slash + 1) : model;
-  const level = stage.thinkingLevel;
-  const showLevel = level !== undefined && level !== "" && level !== "off";
-  const suffix = showLevel ? ` · ${level}` : "";
-  const full = `${short}${suffix}`;
-  if (visibleWidth(full) <= innerWidth)
-    return full;
-  const modelSuffix = short.endsWith("-fast") ? "-fast" : "";
-  const name = modelSuffix ? short.slice(0, -modelSuffix.length) : short;
-  const room = Math.max(1, innerWidth - visibleWidth(modelSuffix + suffix));
-  return `${truncateToWidth2(name, room, "…")}${modelSuffix}${suffix}`;
-}
-function workflowChildRunRows(stage, width) {
-  const child = stage.workflowChild ?? stage.workflowChildRun;
-  if (child === undefined)
-    return [];
-  return wrapIdentifierLines(child.runId, Math.max(1, width), "run ", "").map((row) => `${row.prefix}${row.chunk}`);
-}
-function workflowChildMetaText(stage) {
-  const completed = stage.workflowChild;
-  if (completed !== undefined) {
-    const outputCount = completed.outputCount ?? Object.keys(completed.outputs).length;
-    return outputCount === 1 ? "1 out" : `${outputCount} outs`;
-  }
-  if (stage.workflowChildRun !== undefined)
-    return "live";
-  return;
-}
-function joinCompactStatusMeta(status, meta, width) {
-  const candidates = [`${status} · ${meta}`, `${status} ·${meta}`, `${status}· ${meta}`, `${status}·${meta}`];
-  return candidates.find((candidate) => visibleWidth(candidate) <= width) ?? meta;
-}
-function statusLabel(status) {
-  switch (status) {
-    case "awaiting_input":
-      return "awaiting input";
-    case "completed":
-      return "complete";
-    default:
-      return status.replace(/_/g, " ");
-  }
-}
-function truncate(s, maxWidth) {
-  if (maxWidth <= 0)
-    return "";
-  if (visibleWidth(s) <= maxWidth)
-    return s;
-  return truncateToWidth2(s, maxWidth, "…");
-}
-function centreColored(content, width, fg, bg, opts = {}) {
-  const safe = truncate(content, width);
-  const safeWidth = visibleWidth(safe);
-  const pad = Math.max(0, width - safeWidth);
-  const left = Math.max(0, Math.floor(pad / 2));
-  const right = Math.max(0, pad - left);
-  const bold = opts.bold ? BOLD : "";
-  return `${bg}${" ".repeat(left)}` + `${hexToAnsi(fg)}${bold}${safe}${RESET}` + `${bg}${" ".repeat(right)}`;
-}
-function buildTitleSlot(name, innerWidth, focused, theme, cardBg, compact = false) {
-  const maxName = Math.max(2, compact ? innerWidth - 1 : innerWidth - 4);
-  const safeName = stripTerminalSequences(truncate(name, maxName));
-  if (focused) {
-    const tabText = compact ? safeName : ` ${safeName} `;
-    const styled = `${paint(tabText, theme.surface, {
-      bg: theme.accent,
-      bold: true
-    })}${cardBg}`;
-    return { slot: styled, visibleWidth: visibleWidth(tabText) };
-  }
-  const titleRaw = compact ? safeName : ` ${safeName} `;
-  const styled = `${BOLD}${titleRaw}${RESET}${cardBg}`;
-  return { slot: styled, visibleWidth: visibleWidth(titleRaw) };
-}
-function renderNodeCard(stage, opts) {
-  const width = opts.width ?? NODE_W;
-  const height = opts.height ?? NODE_H;
-  const focused = opts.focused ?? false;
-  const phase = opts.pulsePhase ?? 0;
-  const theme = opts.theme;
-  const borderHex = pickBorder(stage.status, focused, phase, theme);
-  const bc = hexToAnsi(borderHex);
-  const bg = DEFAULT_BG;
-  const innerWidth = Math.max(2, width - 2);
-  const child = stage.workflowChild ?? stage.workflowChildRun;
-  const { slot: titleSlot, visibleWidth: titleVisibleWidth } = buildTitleSlot(child === undefined ? stage.name : `↳ ${child.workflow}`, innerWidth, focused, theme, bg, child !== undefined);
-  const titleStart = Math.max(1, Math.floor((innerWidth - titleVisibleWidth) / 2));
-  const titleEnd = titleStart + titleVisibleWidth;
-  const topMiddle = `${bc}${"─".repeat(titleStart)}` + `${titleSlot}${bc}` + `${"─".repeat(Math.max(0, innerWidth - titleEnd))}`;
-  const top = `${bg}${bc}╭${topMiddle}╮${RESET}`;
-  const bottom = `${bg}${bc}╰${"─".repeat(innerWidth)}╯${RESET}`;
-  const bodyText = stage.nodeKind === "tool" ? "durable tool" : stage.status === "blocked" ? blockedBadgeText(stage, opts.stages, innerWidth) : durationText(stage);
-  const bodyHex = durationColor(stage.status, theme);
-  const statusText = `${statusIcon(stage.status)} ${stage.toolStatus ?? statusLabel(stage.status)}`;
-  const statusLine = `${bg}${bc}│${RESET}` + centreColored(statusText, innerWidth, bodyHex, bg, {
-    bold: stage.status === "running" || stage.status === "awaiting_input"
-  }) + `${bg}${bc}│${RESET}`;
-  const durLine = `${bg}${bc}│${RESET}` + centreColored(bodyText, innerWidth, bodyHex, bg, {
-    bold: stage.status === "blocked"
-  }) + `${bg}${bc}│${RESET}`;
-  const contentRows = Math.max(0, height - 2);
-  const metaLine = `${bg}${bc}│${RESET}${centreColored(metaText(stage), innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`;
-  const modelLine = `${bg}${bc}│${RESET}${centreColored(modelText(stage, innerWidth), innerWidth, theme.textMuted, bg)}${bg}${bc}│${RESET}`;
-  const childRunLines = workflowChildRunRows(stage, innerWidth).map((row) => `${bg}${bc}│${RESET}${centreColored(row, innerWidth, theme.dim, bg)}${bg}${bc}│${RESET}`);
-  const queuedCount = queuedBadgeCount(opts.queuedMessageCount);
-  const childMeta = workflowChildMetaText(stage);
-  const childSummary = childMeta === undefined ? undefined : joinCompactStatusMeta(statusText, queuedCount > 0 ? queuedBadgeText(queuedCount) : childMeta, innerWidth);
-  const childSummaryLine = childSummary === undefined ? undefined : `${bg}${bc}│${RESET}` + centreColored(childSummary, innerWidth, bodyHex, bg, {
-    bold: stage.status === "running" || stage.status === "awaiting_input"
-  }) + `${bg}${bc}│${RESET}`;
-  const interior = stage.status === "awaiting_input" ? [
-    statusLine,
-    `${bg}${bc}│${RESET}` + centreColored("waiting for response", innerWidth, theme.info, bg) + `${bg}${bc}│${RESET}`,
-    `${bg}${bc}│${RESET}` + centreColored("↵ enter to respond", innerWidth, theme.dim, bg) + `${bg}${bc}│${RESET}`,
-    modelLine
-  ] : childSummaryLine === undefined ? [durLine, statusLine, modelLine, metaLine] : [...childRunLines, childSummaryLine];
-  const preferredBadgeRow = stage.status === "awaiting_input" ? 1 : childSummaryLine === undefined ? interior.length - 1 : -1;
-  while (interior.length < contentRows) {
-    interior.push(`${bg}${bc}│${RESET}${bg}${" ".repeat(innerWidth)}${bg}${bc}│${RESET}`);
-  }
-  if (interior.length > contentRows)
-    interior.length = contentRows;
-  if (queuedCount > 0 && interior.length > 0 && preferredBadgeRow >= 0) {
-    const badgeRow = preferredBadgeRow < interior.length ? preferredBadgeRow : interior.length - 1;
-    interior[badgeRow] = `${bg}${bc}│${RESET}` + centreColored(queuedBadgeText(queuedCount), innerWidth, theme.info, bg, { bold: true }) + `${bg}${bc}│${RESET}`;
-  }
-  return [top, ...interior, bottom];
-}
-
 // dist/builtin/workflows/src/tui/graph-view-graph-render.ts
 class GraphViewGraphRenderer extends GraphViewRenderHelpers {
   _renderGraph(width, viewportTop, viewportRows, renderRun) {
@@ -74292,7 +74346,7 @@ class GraphViewGraphRenderer extends GraphViewRenderHelpers {
       if (edge.bottom <= safeTop || edge.top >= viewportBottom || edge.right <= viewportLeft || edge.left >= viewportRight) {
         continue;
       }
-      this._plotEdge(edgeCanvas, edge.parentX, edge.parentY, edge.childX, edge.childY, edgeColor);
+      this._plotEdge(edgeCanvas, edge.parentX, edge.parentY, edge.childX, edge.childY, edgeColor, edge.parentHeight);
     }
     const edgeLines = edgeCanvas.toLines();
     const placements = new Map;
@@ -74306,7 +74360,7 @@ class GraphViewGraphRenderer extends GraphViewRenderHelpers {
           continue;
         const cardLines = renderNodeCard(node.stage, {
           width: NODE_W,
-          height: NODE_H,
+          height: node.height ?? NODE_H,
           focused: ni === this.focusedIndex,
           pulsePhase,
           theme: this.graphTheme,
@@ -74363,7 +74417,7 @@ class GraphViewGraphRenderer extends GraphViewRenderHelpers {
       for (const index of band.nodeIndices) {
         const node = this.cachedLayout[index];
         const top = graphStartRow + node.y - viewportTop;
-        const bottom = top + NODE_H;
+        const bottom = top + (node.height ?? NODE_H);
         const left = viewport.leftMargin + node.x - this.graphScrollColOffset;
         const right = left + NODE_W;
         const clippedTop = Math.max(visibleTop, top);
@@ -75071,6 +75125,7 @@ class GraphViewRenderer extends GraphViewGraphRenderer {
   render(width) {
     if (this.mode === "widget")
       return this._renderWidget(width);
+    this._refreshQueuedNodeHeights();
     return this._renderOverlay(width);
   }
   dispose() {
@@ -75183,8 +75238,8 @@ class GraphViewRenderer extends GraphViewGraphRenderer {
         let next = scrollView.scrollTop;
         if (node.y < next)
           next = node.y;
-        else if (node.y + NODE_H > next + viewportRows)
-          next = node.y + NODE_H - viewportRows;
+        else if (node.y + (node.height ?? NODE_H) > next + viewportRows)
+          next = node.y + (node.height ?? NODE_H) - viewportRows;
         scrollView.scrollTo(next);
         const graphInner = Math.max(1, width - 4);
         const leftMargin = Math.max(2, this.cachedRenderGeometry.canvasWidth <= graphInner ? Math.floor((graphInner - this.cachedRenderGeometry.canvasWidth) / 2) : 2);
@@ -79038,7 +79093,9 @@ function plainCollapsed(counts, activeTools) {
   const tools = activeTools > 0 ? ` · ${activeTools} tool${activeTools === 1 ? "" : "s"}` : "";
   return ` ▾  ${total} background · ${counts.active} ●${paused}${quit}${blocked}${tools}`;
 }
-function buildThemedWidgetLines(snap, piTheme, width = 120, now = Date.now()) {
+function buildThemedWidgetLines(snap, piTheme, width = 120, now = Date.now(), layout) {
+  if (layout)
+    layout.runs = [];
   const display = selectDisplayRuns(snap, now);
   if (display.length === 0)
     return [];
@@ -79057,7 +79114,7 @@ function buildThemedWidgetLines(snap, piTheme, width = 120, now = Date.now()) {
   const activeTools = display.filter(isActive).reduce((total, run) => total + activeToolNodes(run).length, 0);
   if (width < COLLAPSED_BREAKPOINT_COLS) {
     return [
-      themed ? themedCollapsed(visibleCounts, activeTools, graphTheme) : plainCollapsed(visibleCounts, activeTools)
+      truncateToWidth2(themed ? themedCollapsed(visibleCounts, activeTools, graphTheme) : plainCollapsed(visibleCounts, activeTools), width, "…")
     ];
   }
   const total = display.length;
@@ -79071,6 +79128,11 @@ function buildThemedWidgetLines(snap, piTheme, width = 120, now = Date.now()) {
     const run = display[i];
     const runLines = themed ? themedRunLines(run, now, graphTheme, snap.runs, width, expandGraph) : plainRunLines(run, now, snap.runs, width, expandGraph);
     body.push(...runLines);
+    layout?.runs.push({
+      id: run.id,
+      start: body.length - runLines.length + 1,
+      end: body.length + (i === display.length - 1 ? 2 : 1)
+    });
     if (i < display.length - 1)
       body.push("");
   }
@@ -79083,7 +79145,95 @@ function buildThemedWidgetLines(snap, piTheme, width = 120, now = Date.now()) {
   });
 }
 
+// dist/builtin/workflows/src/tui/widget-viewport.ts
+import { ScrollableComponentViewport } from "@bastani/atomic";
+var WORKFLOW_WIDGET_MAX_ROWS = 10;
+
+class WorkflowWidgetViewport {
+  content;
+  terminalRows;
+  requestRender;
+  getRunRows;
+  viewport = new ScrollableComponentViewport;
+  lines = [];
+  scrollable = false;
+  runRows = [];
+  constructor(content, terminalRows, requestRender, getRunRows) {
+    this.content = content;
+    this.terminalRows = terminalRows;
+    this.requestRender = requestRender;
+    this.getRunRows = getRunRows;
+    this.viewport.setComponents([{ render: () => this.lines, invalidate() {} }]);
+    this.viewport.scrollTo(0);
+  }
+  scroll(direction) {
+    if (!this.scrollable)
+      return;
+    this.viewport.scrollBy(direction);
+    this.requestRender();
+  }
+  render(width) {
+    const cap = Math.max(1, Math.min(WORKFLOW_WIDGET_MAX_ROWS, Math.floor(this.terminalRows() / 3)));
+    const nextLines = this.content.render(width);
+    const nextRunRows = this.getRunRows?.() ?? [];
+    if (this.getRunRows && nextLines.length === 1 && nextRunRows.length === 0) {
+      this.scrollable = false;
+      return nextLines;
+    }
+    const previousLineCount = this.lines.length;
+    const offset = this.viewport.getMaxScroll() - this.viewport.getScrollFromBottom();
+    const anchoredOffset = this.getRunRows ? this.resolveAnchor(offset, nextRunRows) : undefined;
+    this.lines = nextLines;
+    this.runRows = nextRunRows;
+    if (anchoredOffset !== undefined) {
+      this.viewport.scrollTo(anchoredOffset);
+    } else if (previousLineCount <= 1 || this.lines.length < previousLineCount && this.lines.length <= cap) {
+      this.viewport.scrollTo(0);
+    }
+    this.scrollable = this.lines.length > 1;
+    this.viewport.setVisibleRows(1);
+    this.viewport.render(width);
+    if (!this.scrollable)
+      return this.lines;
+    const first = this.viewport.getMaxScroll() - this.viewport.getScrollFromBottom() + 1;
+    const visible = this.lines.slice(first - 1, first - 1 + Math.max(1, cap - 1));
+    if (cap === 1)
+      return visible;
+    const hint = ` ${first}–${first + visible.length - 1}/${this.lines.length} · Alt+PgUp/PgDn scroll workflows`;
+    return [...visible, truncateToWidth2(hint, width, "…")];
+  }
+  resolveAnchor(offset, next) {
+    if (offset === 0 || next.length === 0)
+      return 0;
+    const index = this.runRows.findIndex((run) => offset >= run.start - 1 && offset < run.end);
+    const anchor = this.runRows[index];
+    if (!anchor)
+      return 0;
+    const byId = new Map(next.map((run) => [run.id, run]));
+    const retained = byId.get(anchor.id);
+    if (retained)
+      return Math.min(retained.end - 1, retained.start + offset - anchor.start);
+    const neighbours = [...this.runRows.slice(index + 1), ...this.runRows.slice(0, index).reverse()];
+    for (const neighbour of neighbours) {
+      const survivor = byId.get(neighbour.id);
+      if (survivor)
+        return survivor.start;
+    }
+    return 0;
+  }
+  invalidate() {
+    this.content.invalidate?.();
+  }
+  dispose() {
+    this.content.dispose?.();
+  }
+}
+
 // dist/builtin/workflows/src/tui/store-widget-installer.ts
+var widgetViewports = new WeakMap;
+function scrollStoreWidget(storeInstance, direction) {
+  widgetViewports.get(storeInstance)?.scroll(direction);
+}
 var defaultTimerApi = {
   setTimeout: (handler, delayMs) => setTimeout(handler, delayMs),
   clearTimeout: (handle) => clearTimeout(handle)
@@ -79114,9 +79264,19 @@ function installStoreWidget(pi, storeInstance, timers = defaultTimerApi) {
   const setWidget = ui.setWidget;
   const requestRender = ui.requestRender;
   const onWidgetRelease = ui.onWidgetRelease;
+  const layout = { runs: [] };
   const controller = installReactiveWidget({
     ui: {
-      setWidget: (key, factory, opts) => setWidget.call(ui, key, factory, opts),
+      setWidget: (key, factory, opts) => {
+        if (!factory)
+          widgetViewports.delete(storeInstance);
+        setWidget.call(ui, key, factory ? (tui, theme) => {
+          const host = tui;
+          const viewport = new WorkflowWidgetViewport(factory(tui, theme), () => host?.terminal?.rows ?? 30, () => requestRender ? requestRender.call(ui) : host?.requestRender?.(), () => layout.runs);
+          widgetViewports.set(storeInstance, viewport);
+          return viewport;
+        } : undefined, opts);
+      },
       ...requestRender ? { requestRender: () => requestRender.call(ui) } : {},
       ...onWidgetRelease ? { onWidgetRelease: (key, listener) => onWidgetRelease.call(ui, key, listener) } : {}
     },
@@ -79126,7 +79286,7 @@ function installStoreWidget(pi, storeInstance, timers = defaultTimerApi) {
     getSnapshot: () => liveWidgetSnapshot(storeInstance),
     subscribe: (listener) => subscribeStoreInvalidation(storeInstance, listener),
     getPreviewLines: (snap, now) => buildThemedWidgetLines(snap, undefined, 120, now),
-    render: (snap, { theme, width, now }) => buildThemedWidgetLines(snap, theme, width, now),
+    render: (snap, { theme, width, now }) => buildThemedWidgetLines(snap, theme, width, now, layout),
     getNextRefreshDelayMs: (snap, now) => nextWidgetRefreshDelayMs(snap, now),
     requestRenderOnStateNoop: false,
     isStaleError: isStaleExtensionContextError4,
@@ -79134,7 +79294,10 @@ function installStoreWidget(pi, storeInstance, timers = defaultTimerApi) {
       reportWidgetFailure(ui, `Workflow progress widget could not mount: ${error.message}`);
     }
   });
-  return () => controller.dispose();
+  return () => {
+    widgetViewports.delete(storeInstance);
+    controller.dispose();
+  };
 }
 function installToolExecutionHooks(pi, storeInstance) {
   const eventBusOn = pi.events?.on;
@@ -117680,6 +117843,14 @@ function registerWorkflowShortcut(pi, overlay) {
     description: "Open workflow orchestrator pane",
     handler: openPane
   });
+  pi.registerShortcut("alt+pageUp", {
+    description: "Scroll background workflows up",
+    handler: () => scrollStoreWidget(store, -1)
+  });
+  pi.registerShortcut("alt+pageDown", {
+    description: "Scroll background workflows down",
+    handler: () => scrollStoreWidget(store, 1)
+  });
 }
 function registerIntercomControl(pi, intercomControlRef) {
   intercomControlRef.current = subscribeIntercomControl(pi, buildIntercomCallbacks({