footprint-explainable-ui 0.18.0 → 0.19.0

package/dist/index.js

@@ -72,7 +72,14 @@ function useFootprintTheme() {
 }
 function FootprintTheme({ tokens = {}, children }) {
   const cssVars = tokensToCSSVars(tokens);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: tokens, children: /* @__PURE__ */ jsx("div", { style: cssVars, className: "fp-theme-root", children }) });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: tokens, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { ...cssVars, display: "contents" },
+      className: "fp-theme-root",
+      children
+    }
+  ) });
 }
 
 // src/theme/styles.ts
@@ -2201,7 +2208,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-import { memo as memo8, useState as useState12, useCallback as useCallback7, useMemo as useMemo12, useRef as useRef7, useEffect as useEffect8 } from "react";
+import { memo as memo8, useState as useState14, useCallback as useCallback9, useMemo as useMemo13, useRef as useRef9, useEffect as useEffect9 } from "react";
 
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
@@ -2703,7 +2710,6 @@ function NarrativePanel({
   snapshots,
   selectedIndex,
   narrativeEntries,
-  narrative: narrativeProp,
   runtimeSnapshot,
   spec,
   size = "default",
@@ -2714,14 +2720,13 @@ function NarrativePanel({
   const fs = fontSize[size];
   const pad = padding[size];
   const narrative = useMemo8(() => {
-    if (narrativeProp && narrativeProp.length > 0) return narrativeProp;
     const lines = [];
     for (const snap of snapshots) {
       const stageLines = (snap.narrative ?? "").split("\n").filter(Boolean);
       lines.push(...stageLines);
     }
     return lines;
-  }, [narrativeProp, snapshots]);
+  }, [snapshots]);
   const revealedCount = useMemo8(() => {
     if (snapshots.length === 0 || narrative.length === 0) return narrative.length;
     const stageBoundaries = [];
@@ -2945,35 +2950,19 @@ function NarrativePanel({
 // src/components/FlowchartView/SubflowTree.tsx
 import { memo, useState as useState8, useCallback as useCallback5, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function specToTree(node) {
-  if (!node) return [];
+function graphToSubflowEntries(graph) {
+  if (!graph?.nodes?.length) return [];
   const entries = [];
-  const seen = /* @__PURE__ */ new Set();
-  function walk(n) {
-    if (!n) return;
-    const id = n.name || n.id || "";
-    if (seen.has(id)) return;
-    seen.add(id);
+  for (const node of graph.nodes) {
+    if (!node.data?.isSubflow) continue;
     const entry = {
-      name: n.name,
-      description: n.description,
-      subflowId: n.subflowId,
-      isSubflow: !!n.isSubflowRoot
+      name: typeof node.data.label === "string" ? node.data.label : node.id,
+      isSubflow: true
     };
-    if (n.isSubflowRoot && n.subflowStructure) {
-      entry.children = specToTree(n.subflowStructure);
-    }
+    if (typeof node.data.description === "string") entry.description = node.data.description;
+    if (typeof node.data.subflowId === "string") entry.subflowId = node.data.subflowId;
     entries.push(entry);
-    if (n.children) {
-      for (const child of n.children) {
-        if (child) walk(child);
-      }
-    }
-    if (n.next) {
-      walk(n.next);
-    }
   }
-  walk(node);
   return entries;
 }
 var TreeNode = memo(function TreeNode2({
@@ -3117,7 +3106,7 @@ var SectionLabel = memo(function SectionLabel2({ children }) {
   );
 });
 var SubflowTree = memo(function SubflowTree2({
-  spec,
+  graph,
   activeStage,
   doneStages,
   onNodeSelect,
@@ -3125,8 +3114,7 @@ var SubflowTree = memo(function SubflowTree2({
   className,
   style
 }) {
-  const tree = useMemo9(() => specToTree(spec), [spec]);
-  const subflowStages = useMemo9(() => tree.filter((e) => e.isSubflow), [tree]);
+  const subflowStages = useMemo9(() => graphToSubflowEntries(graph), [graph]);
   if (subflowStages.length === 0) return null;
   return /* @__PURE__ */ jsxs13(
     "div",
@@ -3246,15 +3234,22 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
   );
 });
 
-// src/components/FlowchartView/TracedFlowchartView.tsx
-import { useMemo as useMemo10, useCallback as useCallback6, useEffect as useEffect7 } from "react";
+// src/components/FlowchartView/TracedFlow.tsx
+import { useCallback as useCallback8, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  BackgroundVariant as BackgroundVariant2,
+  MarkerType as MarkerType2
+} from "@xyflow/react";
+
+// src/components/FlowchartView/TraceFlow.tsx
+import { useMemo as useMemo10, useCallback as useCallback6, useSyncExternalStore } from "react";
 import {
   ReactFlow,
   Background,
   BackgroundVariant,
-  useReactFlow,
-  useNodesState,
-  useEdgesState
+  MarkerType
 } from "@xyflow/react";
 
 // src/components/StageNode/StageNode.tsx
@@ -3410,7 +3405,7 @@ function StageIcon({ type, color }) {
 var StageNode = memo3(function StageNode2({
   data
 }) {
-  const { label, active, done, error, linked, icon, stepNumbers, dimmed, isSubflow, isLazy, isDecider, isFork, description } = data;
+  const { label, active, done, error, linked, icon, stepNumbers, dimmed, isSubflow, isLazy, isDecider, isFork, description, stageId, showStageId } = data;
   const effectiveIcon = icon || (isLazy ? "lazy" : void 0);
   const isLazyUnresolved = isLazy && !done && !active;
   const injectedRef = useRef6(false);
@@ -3584,6 +3579,23 @@ var StageNode = memo3(function StageNode2({
                       },
                       children: description
                     }
+                  ),
+                  showStageId && stageId && /* @__PURE__ */ jsx16(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 8,
+                        fontFamily: "ui-monospace, monospace",
+                        color: textColor,
+                        opacity: 0.55,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        maxWidth: 100
+                      },
+                      title: `stageId: ${stageId}`,
+                      children: stageId
+                    }
                   )
                 ]
               }
@@ -3682,6 +3694,23 @@ var StageNode = memo3(function StageNode2({
                       },
                       children: description
                     }
+                  ),
+                  showStageId && stageId && /* @__PURE__ */ jsx16(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 9,
+                        fontFamily: "ui-monospace, monospace",
+                        color: textColor,
+                        opacity: 0.55,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        maxWidth: 160
+                      },
+                      title: `stageId: ${stageId}`,
+                      children: stageId
+                    }
                   )
                 ]
               }
@@ -3712,326 +3741,488 @@ var StageNode = memo3(function StageNode2({
   ] });
 });
 
-// src/components/FlowchartView/specToReactFlow.ts
-import { MarkerType } from "@xyflow/react";
-var DEFAULT_COLORS = {
-  edgeDefault: rawDefaults.colors.textMuted,
-  edgeExecuted: rawDefaults.colors.success,
-  edgeActive: rawDefaults.colors.primary,
-  edgeLoop: rawDefaults.colors.warning,
-  labelDefault: rawDefaults.colors.textSecondary,
-  labelExecuted: rawDefaults.colors.success,
-  labelLoop: rawDefaults.colors.warning,
-  pathGlow: `${rawDefaults.colors.success}4D`
-  // ~30% opacity hex
-};
+// src/components/FlowchartView/TraceFlow.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Y_STEP = 100;
 var X_SPREAD = 200;
-function nid(n) {
-  return n.id || n.name || `spec-${Math.random()}`;
-}
-function registerNode(state, node) {
-  if (node.id && node.name) {
-    state.idToName.set(node.id, node.name);
-  }
-}
-function walkLayout(node, state, x, y) {
-  if (!node) return { lastIds: [], bottomY: y };
-  registerNode(state, node);
-  const id = nid(node);
-  if (state.seen.has(id)) {
-    return { lastIds: [id], bottomY: y };
-  }
-  state.seen.add(id);
-  const isDecider = node.type === "decider" || node.type === "selector" || !!node.hasDecider || !!node.hasSelector;
-  const isFork = node.type === "fork";
-  state.nodes.push({
-    id,
-    x,
-    y,
-    label: node.name,
-    isDecider,
-    isFork,
-    description: node.description,
-    icon: node.icon,
-    subflowId: node.subflowId,
-    isSubflow: !!node.isSubflowRoot,
-    isLazy: node.isLazy
-  });
-  let lastIds = [id];
-  let bottomY = y;
-  if (node.children && node.children.length > 0) {
-    const totalWidth = (node.children.length - 1) * X_SPREAD;
-    const startX = x - totalWidth / 2;
-    const childY = y + Y_STEP;
-    const childResults = [];
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      if (!child) continue;
-      const childX = startX + i * X_SPREAD;
-      const edgeLabel = node.branchIds?.[i];
-      state.edgeCounter++;
-      state.edges.push({ id: `se${state.edgeCounter}`, source: id, target: nid(child), label: edgeLabel, isLoop: false });
-      const result = walkLayout(child, state, childX, childY);
-      childResults.push(result);
+var defaultTraceFlowLayout = (graph) => {
+  if (graph.nodes.length === 0) return { nodes: [], edges: graph.edges };
+  const branchChildrenOf = /* @__PURE__ */ new Map();
+  const nextChildrenOf = /* @__PURE__ */ new Map();
+  const hasIncomingForward = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    const kind = e.data?.kind;
+    if (kind === "loop") continue;
+    hasIncomingForward.add(e.target);
+    if (kind === "fork-branch" || kind === "decision-branch") {
+      const arr = branchChildrenOf.get(e.source) ?? [];
+      arr.push(e.target);
+      branchChildrenOf.set(e.source, arr);
+    } else {
+      const arr = nextChildrenOf.get(e.source) ?? [];
+      arr.push(e.target);
+      nextChildrenOf.set(e.source, arr);
     }
-    lastIds = childResults.flatMap((r) => r.lastIds);
-    bottomY = Math.max(...childResults.map((r) => r.bottomY));
   }
-  if (node.loopTarget) {
-    state.edgeCounter++;
-    state.edges.push({ id: `se${state.edgeCounter}`, source: id, target: node.loopTarget, label: "loop", isLoop: true });
-  }
-  if (node.next) {
-    const rawNextId = nid(node.next);
-    const resolvedNextId = state.idToName.get(rawNextId) ?? rawNextId;
-    const isLoopRef = node.loopTarget && state.seen.has(resolvedNextId);
-    if (isLoopRef) {
-      for (const lid of lastIds) {
-        state.edgeCounter++;
-        state.edges.push({ id: `se${state.edgeCounter}`, source: lid, target: resolvedNextId, label: "loop", isLoop: true });
+  const seed = graph.nodes.find((n) => !hasIncomingForward.has(n.id)) ?? graph.nodes[0];
+  const positions = /* @__PURE__ */ new Map();
+  function layoutSubtree(nodeId, x, y) {
+    if (positions.has(nodeId)) {
+      return positions.get(nodeId).y;
+    }
+    positions.set(nodeId, { x, y });
+    let deepestBranchY = y;
+    const branches = branchChildrenOf.get(nodeId) ?? [];
+    if (branches.length > 0) {
+      const childY = y + Y_STEP;
+      const totalWidth = (branches.length - 1) * X_SPREAD;
+      const startX = x - totalWidth / 2;
+      for (let i = 0; i < branches.length; i++) {
+        const childId = branches[i];
+        const childX = startX + i * X_SPREAD;
+        const subtreeBottom = layoutSubtree(childId, childX, childY);
+        if (subtreeBottom > deepestBranchY) deepestBranchY = subtreeBottom;
       }
-      return { lastIds, bottomY };
     }
-    const nextY = bottomY + Y_STEP;
-    for (const lid of lastIds) {
-      state.edgeCounter++;
-      state.edges.push({ id: `se${state.edgeCounter}`, source: lid, target: resolvedNextId, isLoop: false });
+    const nextChildren = nextChildrenOf.get(nodeId) ?? [];
+    if (nextChildren.length > 0) {
+      const nextY = branches.length > 0 ? deepestBranchY + Y_STEP : y + Y_STEP;
+      const totalWidth = (nextChildren.length - 1) * X_SPREAD;
+      const startX = x - totalWidth / 2;
+      let deepestNextY = nextY;
+      for (let i = 0; i < nextChildren.length; i++) {
+        const childId = nextChildren[i];
+        const childX = startX + i * X_SPREAD;
+        const subtreeBottom = layoutSubtree(childId, childX, nextY);
+        if (subtreeBottom > deepestNextY) deepestNextY = subtreeBottom;
+      }
+      return deepestNextY;
     }
-    return walkLayout(node.next, state, x, nextY);
+    return deepestBranchY;
   }
-  return { lastIds, bottomY };
-}
-function specToLayout(spec) {
-  const state = {
-    nodes: [],
-    edges: [],
-    edgeCounter: 0,
-    seen: /* @__PURE__ */ new Set(),
-    idToName: /* @__PURE__ */ new Map()
-  };
-  walkLayout(spec, state, 300, 0);
-  return { nodes: state.nodes, edges: state.edges, idToName: state.idToName };
-}
-function applyOverlay(layout, overlay, colors) {
-  const c = { ...DEFAULT_COLORS, ...colors };
-  const o = overlay ?? null;
-  const nodes = layout.nodes.map((ln) => {
-    const isDone = o ? o.doneStages.has(ln.id) : false;
-    const isActive = o ? o.activeStage === ln.id : false;
-    const wasExecuted = o ? o.executedStages.has(ln.id) : false;
-    const dimmed = o && !wasExecuted;
-    let stepNumbers;
-    if (o?.executionOrder) {
-      const nums = [];
-      for (let i = 0; i < o.executionOrder.length; i++) {
-        if (o.executionOrder[i] === ln.id) nums.push(i + 1);
-      }
-      if (nums.length > 0) stepNumbers = nums;
+  layoutSubtree(seed.id, 0, 0);
+  let maxY = 0;
+  for (const p of positions.values()) {
+    if (p.y > maxY) maxY = p.y;
+  }
+  let orphanY = maxY + Y_STEP;
+  for (const n of graph.nodes) {
+    if (!positions.has(n.id)) {
+      positions.set(n.id, { x: 0, y: orphanY });
+      orphanY += Y_STEP;
     }
+  }
+  return {
+    nodes: graph.nodes.map((n) => ({
+      ...n,
+      position: positions.get(n.id) ?? n.position
+    })),
+    edges: graph.edges
+  };
+};
+var DEFAULT_EDGE_COLORS = {
+  next: rawDefaults.colors.textMuted,
+  forkBranch: rawDefaults.colors.textMuted,
+  decisionBranch: rawDefaults.colors.primary,
+  loop: rawDefaults.colors.warning
+};
+
+// src/components/FlowchartView/createTraceRuntimeOverlay.ts
+function sliceOverlay(overlay, index) {
+  const order = overlay.executionOrder;
+  if (order.length === 0) {
     return {
-      id: ln.id,
-      position: { x: ln.x, y: ln.y },
-      data: {
-        label: ln.label,
-        active: isActive,
-        done: isDone,
-        error: false,
-        isDecider: ln.isDecider,
-        isFork: ln.isFork,
-        description: ln.description,
-        icon: ln.icon,
-        subflowId: ln.subflowId,
-        dimmed,
-        stepNumbers,
-        isSubflow: ln.isSubflow,
-        isLazy: ln.isLazy
-      },
-      type: "stage",
-      style: dimmed ? { opacity: 0.35 } : void 0
+      doneStageIds: /* @__PURE__ */ new Set(),
+      activeStageId: null,
+      executedStageIds: /* @__PURE__ */ new Set(),
+      executedOrderIds: [],
+      errors: overlay.errors
     };
-  });
-  const edges = [];
-  for (const le of layout.edges) {
-    const executed = o && o.executedStages.has(le.source) && o.executedStages.has(le.target);
-    const isLeadingEdge = o && le.source === o.activeStage && !o.doneStages.has(le.target);
-    if (le.isLoop) {
-      let loopExecuted = false;
-      if (o?.executionOrder) {
-        if (le.source === le.target) {
-          const count = o.executionOrder.filter((id) => id === le.source).length;
-          loopExecuted = count > 1;
-        } else {
-          const lastSourceIdx = o.executionOrder.lastIndexOf(le.source);
-          if (lastSourceIdx >= 0) {
-            loopExecuted = o.executionOrder.slice(lastSourceIdx + 1).includes(le.target);
-          }
-        }
-      }
-      edges.push({
-        id: le.id,
-        source: le.source,
-        target: le.target,
-        sourceHandle: "loop-source",
-        targetHandle: "loop-target",
-        label: le.label ?? "loop",
-        type: "smoothstep",
-        pathOptions: { offset: 60, borderRadius: 20 },
-        markerEnd: { type: MarkerType.ArrowClosed, color: loopExecuted ? c.edgeActive : c.edgeLoop, width: 16, height: 16 },
-        style: {
-          stroke: loopExecuted ? c.edgeActive : c.edgeLoop,
-          strokeWidth: loopExecuted ? 4 : 2,
-          strokeDasharray: loopExecuted ? void 0 : "6 3",
-          opacity: o && !loopExecuted ? 0.35 : 1
-        },
-        labelStyle: { fontSize: 10, fontWeight: 700, fill: loopExecuted ? c.edgeActive : c.labelLoop },
-        animated: loopExecuted,
-        zIndex: 2
-      });
-    } else if (executed) {
-      edges.push({
-        id: `${le.id}-glow`,
-        source: le.source,
-        target: le.target,
-        style: { stroke: c.pathGlow, strokeWidth: 8, opacity: 0.4 },
-        zIndex: 0,
-        selectable: false,
-        focusable: false
-      });
-      edges.push({
-        id: le.id,
-        source: le.source,
-        target: le.target,
-        label: le.label,
-        style: {
-          stroke: isLeadingEdge ? c.edgeActive : c.edgeExecuted,
-          strokeWidth: 3.5
-        },
-        labelStyle: { fontSize: 10, fontWeight: 600, fill: c.labelExecuted },
-        animated: !!isLeadingEdge,
-        zIndex: 1
-      });
-    } else {
-      edges.push({
-        id: le.id,
-        source: le.source,
-        target: le.target,
-        label: le.label,
-        style: {
-          stroke: c.edgeDefault,
-          strokeWidth: 1.5,
-          opacity: o ? 0.3 : 1
-        },
-        labelStyle: { fontSize: 10, fill: c.labelDefault }
-      });
+  }
+  const clampedIndex = Math.max(0, Math.min(index, order.length - 1));
+  const doneStageIds = /* @__PURE__ */ new Set();
+  for (let i = 0; i < clampedIndex; i++) {
+    doneStageIds.add(order[i].stageId);
+  }
+  const activeStep = order[clampedIndex];
+  const activeStageId = activeStep ? activeStep.stageId : null;
+  const executedStageIds = new Set(doneStageIds);
+  if (activeStageId) executedStageIds.add(activeStageId);
+  const executedOrderIds = order.slice(0, clampedIndex + 1).map((s) => s.stageId);
+  return {
+    doneStageIds,
+    activeStageId,
+    executedStageIds,
+    executedOrderIds,
+    errors: overlay.errors
+  };
+}
+
+// src/components/FlowchartView/_internal/subflowDrill.ts
+function filterGraphForDrill(graph, currentSubflowId) {
+  if (graph.nodes.length === 0) return graph;
+  const matchesScope = (subflowOf) => currentSubflowId === null ? subflowOf === void 0 : subflowOf === currentSubflowId;
+  const visibleIds = /* @__PURE__ */ new Set();
+  for (const n of graph.nodes) {
+    if (matchesScope(n.data?.subflowOf)) visibleIds.add(n.id);
+  }
+  if (visibleIds.size === graph.nodes.length) return graph;
+  return {
+    nodes: graph.nodes.filter((n) => visibleIds.has(n.id)),
+    edges: graph.edges.filter((e) => visibleIds.has(e.source) && visibleIds.has(e.target))
+  };
+}
+function buildSubflowBreadcrumb(graph, currentSubflowId) {
+  const out = [{ subflowId: null, label: "Chart" }];
+  if (currentSubflowId !== null) {
+    const mount = graph.nodes.find((n) => n.data?.subflowId === currentSubflowId);
+    out.push({
+      subflowId: currentSubflowId,
+      label: mount?.data?.label ?? currentSubflowId
+    });
+  }
+  return out;
+}
+
+// src/components/FlowchartView/_internal/overlayProjection.ts
+function leafId(id) {
+  const i = id.lastIndexOf("/");
+  return i >= 0 ? id.slice(i + 1) : id;
+}
+function normalizeSliceLeafIds(slice) {
+  return {
+    doneStageIds: new Set(Array.from(slice.doneStageIds).map(leafId)),
+    activeStageId: slice.activeStageId ? leafId(slice.activeStageId) : null,
+    executedStageIds: new Set(Array.from(slice.executedStageIds).map(leafId)),
+    executedOrderIds: slice.executedOrderIds.map(leafId),
+    errors: new Map(Array.from(slice.errors).map(([k, v2]) => [leafId(k), v2]))
+  };
+}
+function aggregateMountStatus(slice, graph, currentSubflowId) {
+  if (graph.nodes.length === 0) return slice;
+  const mounts = graph.nodes.filter((n) => n.data?.isSubflow && n.data?.subflowId);
+  if (mounts.length === 0) return slice;
+  const doneIds = new Set(slice.doneStageIds);
+  let activeId = slice.activeStageId;
+  for (const mount of mounts) {
+    const sfId = mount.data.subflowId;
+    const members = graph.nodes.filter((n) => n.data?.subflowOf === sfId);
+    if (members.length === 0) continue;
+    const anyActive = members.some((m) => m.id === slice.activeStageId);
+    const anyDone = members.some((m) => slice.doneStageIds.has(m.id));
+    const allDone = members.every((m) => slice.doneStageIds.has(m.id));
+    if (allDone) doneIds.add(mount.id);
+    else if ((anyActive || anyDone) && currentSubflowId === null) {
+      activeId = mount.id;
     }
   }
-  return { nodes, edges };
+  return { ...slice, doneStageIds: doneIds, activeStageId: activeId };
 }
 
-// src/components/FlowchartView/TracedFlowchartView.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var defaultNodeTypes = { stage: StageNode };
-function FitViewOnResize() {
-  const { fitView } = useReactFlow();
+// src/components/FlowchartView/_internal/useSubflowDrill.ts
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
+function useSubflowDrill(graph, onSubflowChange) {
+  const [currentSubflowId, setCurrentSubflowId] = useState9(null);
+  const lastGraphRef = useRef7(null);
+  if (lastGraphRef.current !== graph) {
+    lastGraphRef.current = graph;
+    if (currentSubflowId !== null && !graph.nodes.some((n) => n.data?.subflowId === currentSubflowId)) {
+      queueMicrotask(() => setCurrentSubflowId(null));
+    }
+  }
+  const lastNotifiedRef = useRef7(void 0);
   useEffect7(() => {
-    const handler = () => {
-      requestAnimationFrame(() => fitView({ padding: 0.3 }));
+    if (lastNotifiedRef.current === currentSubflowId) return;
+    lastNotifiedRef.current = currentSubflowId;
+    if (currentSubflowId === null) {
+      onSubflowChange?.(null);
+    } else {
+      const mount = graph.nodes.find((n) => n.data?.subflowId === currentSubflowId);
+      if (mount) onSubflowChange?.(mount.id);
+    }
+  }, [currentSubflowId, graph, onSubflowChange]);
+  const drillInto = useCallback7((subflowId) => {
+    setCurrentSubflowId(subflowId);
+  }, []);
+  const drillUp = useCallback7(() => {
+    setCurrentSubflowId(null);
+  }, []);
+  return { currentSubflowId, drillInto, drillUp, setCurrentSubflowId };
+}
+
+// src/components/FlowchartView/_internal/useChartAutoRefit.ts
+import { useEffect as useEffect8 } from "react";
+function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
+  const duration = options.duration ?? 200;
+  const padding2 = options.padding ?? 0.1;
+  useEffect8(() => {
+    const el = wrapperRef.current;
+    if (!el || !rfInstance) return;
+    let raf = 0;
+    const refit = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        rfInstance.fitView({ duration, padding: padding2 });
+      });
     };
-    window.addEventListener("resize", handler);
-    const timer = setTimeout(handler, 50);
+    const ro = new ResizeObserver(refit);
+    ro.observe(el);
+    window.addEventListener("resize", refit);
     return () => {
-      window.removeEventListener("resize", handler);
-      clearTimeout(timer);
+      ro.disconnect();
+      window.removeEventListener("resize", refit);
+      cancelAnimationFrame(raf);
     };
-  }, [fitView]);
-  return null;
+  }, [rfInstance, wrapperRef, duration, padding2]);
 }
-function TracedFlowchartView({
-  spec,
-  snapshots,
-  snapshotIndex = 0,
+
+// src/components/FlowchartView/SubflowBreadcrumbBar.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function SubflowBreadcrumbBar({ entries, onNavigate }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 12px",
+        fontSize: 11,
+        background: rawDefaults.colors.bgSecondary,
+        borderBottom: `1px solid ${rawDefaults.colors.border}`,
+        flexShrink: 0
+      },
+      "aria-label": "Subflow breadcrumb",
+      children: entries.map((entry, i) => {
+        const isLast = i === entries.length - 1;
+        return /* @__PURE__ */ jsxs16(
+          "span",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: 6 },
+            children: [
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onNavigate(entry.subflowId),
+                  disabled: isLast,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                    fontSize: 11,
+                    fontWeight: isLast ? 600 : 500,
+                    color: isLast ? rawDefaults.colors.textPrimary : rawDefaults.colors.primary,
+                    cursor: isLast ? "default" : "pointer",
+                    textDecoration: isLast ? "none" : "underline",
+                    fontFamily: "inherit"
+                  },
+                  children: entry.label
+                }
+              ),
+              !isLast && /* @__PURE__ */ jsx18("span", { style: { color: rawDefaults.colors.textMuted }, children: "\u203A" })
+            ]
+          },
+          entry.subflowId ?? "__top__"
+        );
+      })
+    }
+  );
+}
+
+// src/components/FlowchartView/TracedFlow.tsx
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var DEFAULT_COLORS = {
+  default: rawDefaults.colors.textMuted,
+  done: rawDefaults.colors.success,
+  active: rawDefaults.colors.primary,
+  error: rawDefaults.colors.error,
+  loop: rawDefaults.colors.warning
+};
+function toStageNodeWithOverlay(node, doneStageIds, activeStageId, errorMessage, executedOrderIds) {
+  const isDone = doneStageIds.has(node.id);
+  const isActive = activeStageId === node.id;
+  const wasExecuted = isDone || isActive;
+  const hasError = !!errorMessage;
+  const dimmed = !wasExecuted && executedOrderIds.length > 0;
+  let stepNumbers;
+  if (executedOrderIds.length > 0) {
+    const nums = [];
+    for (let i = 0; i < executedOrderIds.length; i++) {
+      if (executedOrderIds[i] === node.id) nums.push(i + 1);
+    }
+    if (nums.length > 0) stepNumbers = nums;
+  }
+  const stageData = {
+    label: node.data.label,
+    isDecider: node.data.isDecider,
+    isFork: node.data.isFork,
+    isSubflow: node.data.isSubflow,
+    active: isActive,
+    done: isDone,
+    error: hasError,
+    ...node.data.description !== void 0 && { description: node.data.description },
+    ...node.data.icon !== void 0 && { icon: node.data.icon },
+    ...node.data.subflowId !== void 0 && { subflowId: node.data.subflowId },
+    ...node.data.isLazy === true && { isLazy: true },
+    ...dimmed && { dimmed: true },
+    ...stepNumbers && { stepNumbers },
+    ...errorMessage && { errorMessage }
+  };
+  return {
+    ...node,
+    type: "stageNode",
+    data: stageData,
+    ...dimmed && { style: { opacity: 0.35 } }
+  };
+}
+function styleEdgeWithOverlay(edge, doneStageIds, activeStageId, colors) {
+  const kind = edge.data?.kind ?? "next";
+  const sourceExecuted = doneStageIds.has(edge.source) || activeStageId === edge.source;
+  const targetExecuted = doneStageIds.has(edge.target) || activeStageId === edge.target;
+  const traversed = sourceExecuted && targetExecuted;
+  const isLeadingEdge = activeStageId === edge.source && !doneStageIds.has(edge.target);
+  let color = colors.default;
+  if (kind === "loop") color = colors.loop;
+  else if (isLeadingEdge) color = colors.active;
+  else if (traversed) color = colors.done;
+  const styled = {
+    ...edge,
+    type: "smoothstep",
+    animated: isLeadingEdge,
+    style: { stroke: color, strokeWidth: traversed ? 2 : 1.5 },
+    markerEnd: { type: MarkerType2.ArrowClosed, color, width: 16, height: 16 }
+  };
+  if (kind === "loop") {
+    styled.style = { ...styled.style, strokeDasharray: "4 3" };
+    styled.data = {
+      ...styled.data ?? {},
+      pathOptions: { borderRadius: 14, offset: 36 }
+    };
+    styled.sourceHandle = "loop-source";
+    styled.targetHandle = "loop-target";
+  }
+  return styled;
+}
+var nodeTypes = { stageNode: StageNode };
+function TracedFlow({
+  graph,
+  overlay,
+  scrubIndex,
+  layout: layoutProp,
+  colors: colorOverrides,
   onNodeClick,
-  nodeTypes: customNodeTypes,
-  unstyled = false,
+  onSubflowChange,
   className,
   style
 }) {
-  const nodeTypes = customNodeTypes ?? defaultNodeTypes;
-  const overlay = useMemo10(() => {
-    if (!snapshots || snapshots.length === 0) return void 0;
-    const executionOrder = snapshots.slice(0, snapshotIndex + 1).map((s) => s.stageLabel);
-    const doneStages = new Set(
-      snapshots.slice(0, snapshotIndex).map((s) => s.stageLabel)
-    );
-    const activeStage = snapshots[snapshotIndex]?.stageLabel ?? null;
-    const executedStages = /* @__PURE__ */ new Set([...doneStages]);
-    if (activeStage) executedStages.add(activeStage);
-    return { doneStages, activeStage, executedStages, executionOrder };
-  }, [snapshots, snapshotIndex]);
-  const layout = useMemo10(() => {
-    if (!spec) return null;
-    return specToLayout(spec);
-  }, [spec]);
-  const flowData = useMemo10(() => {
-    if (!layout) return { nodes: [], edges: [] };
-    return applyOverlay(layout, overlay);
-  }, [layout, overlay]);
-  const [nodes, setNodes, onNodesChange] = useNodesState(flowData.nodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(flowData.edges);
-  useEffect7(() => {
-    setNodes(flowData.nodes);
-    setEdges(flowData.edges);
-  }, [flowData, setNodes, setEdges]);
-  const handleNodeClick = useCallback6(
+  const layout = layoutProp ?? defaultTraceFlowLayout;
+  const colors = useMemo11(
+    () => ({ ...DEFAULT_COLORS, ...colorOverrides ?? {} }),
+    [colorOverrides]
+  );
+  const drill = useSubflowDrill(graph, onSubflowChange);
+  const filteredGraph = useMemo11(
+    () => filterGraphForDrill(graph, drill.currentSubflowId),
+    [graph, drill.currentSubflowId]
+  );
+  const breadcrumb = useMemo11(
+    () => buildSubflowBreadcrumb(graph, drill.currentSubflowId),
+    [graph, drill.currentSubflowId]
+  );
+  const positioned = useMemo11(
+    () => layout === "passthrough" ? filteredGraph : layout(filteredGraph),
+    [filteredGraph, layout]
+  );
+  const slice = useMemo11(() => {
+    const empty = {
+      doneStageIds: /* @__PURE__ */ new Set(),
+      activeStageId: null,
+      executedStageIds: /* @__PURE__ */ new Set(),
+      executedOrderIds: [],
+      errors: /* @__PURE__ */ new Map()
+    };
+    if (!overlay) return empty;
+    const idx = scrubIndex ?? Math.max(0, overlay.executionOrder.length - 1);
+    const normalized = normalizeSliceLeafIds(sliceOverlay(overlay, idx));
+    return aggregateMountStatus(normalized, graph, drill.currentSubflowId);
+  }, [overlay, scrubIndex, graph, drill.currentSubflowId]);
+  const reactFlowNodes = useMemo11(
+    () => positioned.nodes.map(
+      (n) => toStageNodeWithOverlay(
+        n,
+        slice.doneStageIds,
+        slice.activeStageId,
+        slice.errors.get(n.id),
+        slice.executedOrderIds
+      )
+    ),
+    [positioned.nodes, slice]
+  );
+  const reactFlowEdges = useMemo11(
+    () => positioned.edges.map(
+      (e) => styleEdgeWithOverlay(e, slice.doneStageIds, slice.activeStageId, colors)
+    ),
+    [positioned.edges, slice, colors]
+  );
+  const handleNodeClick = useCallback8(
     (_, node) => {
-      if (!onNodeClick) return;
-      onNodeClick(node.id);
+      const data = node.data ?? {};
+      if (data.isSubflow && data.subflowId) {
+        drill.drillInto(data.subflowId);
+      }
+      onNodeClick?.(node.id);
     },
-    [onNodeClick]
+    [drill, onNodeClick]
   );
-  return /* @__PURE__ */ jsx17(
+  const wrapperRef = useRef8(null);
+  const [rfInstance, setRfInstance] = useState10(null);
+  useChartAutoRefit(wrapperRef, rfInstance);
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
+      ref: wrapperRef,
       className,
-      style: { width: "100%", height: "100%", ...style },
-      "data-fp": "traced-flowchart",
-      children: /* @__PURE__ */ jsxs16(
-        ReactFlow,
-        {
-          nodes,
-          edges,
-          onNodesChange,
-          onEdgesChange,
-          onNodeClick: handleNodeClick,
-          nodeTypes,
-          fitView: true,
-          fitViewOptions: { padding: 0.3 },
-          proOptions: { hideAttribution: true },
-          panOnDrag: false,
-          zoomOnScroll: false,
-          zoomOnPinch: false,
-          zoomOnDoubleClick: false,
-          preventScrolling: false,
-          nodesDraggable: false,
-          nodesConnectable: false,
-          elementsSelectable: !!onNodeClick,
-          children: [
-            /* @__PURE__ */ jsx17(FitViewOnResize, {}),
-            !unstyled && /* @__PURE__ */ jsx17(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })
-          ]
-        }
-      )
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: 300,
+        display: "flex",
+        flexDirection: "column",
+        ...style
+      },
+      children: [
+        breadcrumb.length > 1 && /* @__PURE__ */ jsx19(
+          SubflowBreadcrumbBar,
+          {
+            entries: breadcrumb,
+            onNavigate: drill.setCurrentSubflowId
+          }
+        ),
+        /* @__PURE__ */ jsx19("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx19(
+          ReactFlow2,
+          {
+            nodes: reactFlowNodes,
+            edges: reactFlowEdges,
+            nodeTypes,
+            onNodeClick: handleNodeClick,
+            onInit: setRfInstance,
+            fitView: true,
+            proOptions: { hideAttribution: true },
+            children: /* @__PURE__ */ jsx19(Background2, { variant: BackgroundVariant2.Dots, gap: 20, size: 1 })
+          }
+        ) })
+      ]
     }
   );
 }
 
 // src/components/InspectorPanel/InspectorPanel.tsx
-import { memo as memo5, useState as useState9 } from "react";
+import { memo as memo5, useState as useState11 } from "react";
 
 // src/components/DataTracePanel/DataTracePanel.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var DataTracePanel = memo4(function DataTracePanel2({
   frames,
   selectedStageId,
@@ -4039,8 +4230,8 @@ var DataTracePanel = memo4(function DataTracePanel2({
   fromStageName
 }) {
   if (frames.length === 0) {
-    return /* @__PURE__ */ jsxs17("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
-      /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs18("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
+      /* @__PURE__ */ jsx20(
         "div",
         {
           style: {
@@ -4054,13 +4245,13 @@ var DataTracePanel = memo4(function DataTracePanel2({
           children: "Backward causal chain"
         }
       ),
-      /* @__PURE__ */ jsx18("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
-      /* @__PURE__ */ jsx18("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
+      /* @__PURE__ */ jsx20("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
+      /* @__PURE__ */ jsx20("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
     ] });
   }
-  return /* @__PURE__ */ jsxs17("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
-    fromStageName && /* @__PURE__ */ jsxs17("div", { style: { padding: "4px 12px 8px" }, children: [
-      /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
+    fromStageName && /* @__PURE__ */ jsxs18("div", { style: { padding: "4px 12px 8px" }, children: [
+      /* @__PURE__ */ jsxs18(
         "div",
         {
           style: {
@@ -4076,7 +4267,7 @@ var DataTracePanel = memo4(function DataTracePanel2({
           ]
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         "div",
         {
           style: {
@@ -4089,7 +4280,7 @@ var DataTracePanel = memo4(function DataTracePanel2({
         }
       )
     ] }),
-    frames.map((frame, i) => /* @__PURE__ */ jsx18(
+    frames.map((frame, i) => /* @__PURE__ */ jsx20(
       DataTraceFrame,
       {
         frame,
@@ -4109,7 +4300,7 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
   isSelected,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       onClick: () => onClick?.(frame.runtimeStageId),
@@ -4126,9 +4317,9 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          !isFirst && /* @__PURE__ */ jsx18("span", { style: { color: theme.textMuted, fontSize: 11 }, children: "\u2191" }),
-          /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          !isFirst && /* @__PURE__ */ jsx20("span", { style: { color: theme.textMuted, fontSize: 11 }, children: "\u2191" }),
+          /* @__PURE__ */ jsx20(
             "span",
             {
               style: {
@@ -4138,7 +4329,7 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
               children: frame.stageName
             }
           ),
-          isLast && !isFirst && /* @__PURE__ */ jsx18(
+          isLast && !isFirst && /* @__PURE__ */ jsx20(
             "span",
             {
               style: {
@@ -4150,7 +4341,7 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
             }
           )
         ] }),
-        frame.keysWritten.length > 0 && /* @__PURE__ */ jsxs17(
+        frame.keysWritten.length > 0 && /* @__PURE__ */ jsxs18(
           "div",
           {
             style: {
@@ -4162,11 +4353,11 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
             children: [
               "wrote:",
               " ",
-              /* @__PURE__ */ jsx18("span", { style: { color: theme.textSecondary }, children: frame.keysWritten.join(", ") })
+              /* @__PURE__ */ jsx20("span", { style: { color: theme.textSecondary }, children: frame.keysWritten.join(", ") })
             ]
           }
         ),
-        frame.linkedBy && /* @__PURE__ */ jsxs17(
+        frame.linkedBy && /* @__PURE__ */ jsxs18(
           "div",
           {
             style: {
@@ -4187,7 +4378,7 @@ var DataTraceFrame = memo4(function DataTraceFrame2({
 });
 
 // src/components/InspectorPanel/InspectorPanel.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var InspectorPanel = memo5(function InspectorPanel2({
   snapshots,
   selectedIndex,
@@ -4195,9 +4386,9 @@ var InspectorPanel = memo5(function InspectorPanel2({
   selectedStageId,
   onNavigateToStage
 }) {
-  const [tab, setTab] = useState9("state");
+  const [tab, setTab] = useState11("state");
   const currentSnapshot = snapshots[selectedIndex];
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       style: {
@@ -4207,7 +4398,7 @@ var InspectorPanel = memo5(function InspectorPanel2({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           "div",
           {
             style: {
@@ -4216,7 +4407,7 @@ var InspectorPanel = memo5(function InspectorPanel2({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx21(
                 TabButton,
                 {
                   active: tab === "state",
@@ -4224,7 +4415,7 @@ var InspectorPanel = memo5(function InspectorPanel2({
                   label: "State"
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx21(
                 TabButton,
                 {
                   active: tab === "trace",
@@ -4236,15 +4427,15 @@ var InspectorPanel = memo5(function InspectorPanel2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs18("div", { style: { flex: 1, overflow: "auto" }, children: [
-          tab === "state" && /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs19("div", { style: { flex: 1, overflow: "auto" }, children: [
+          tab === "state" && /* @__PURE__ */ jsx21(
             MemoryPanel,
             {
               snapshots,
               selectedIndex
             }
           ),
-          tab === "trace" && /* @__PURE__ */ jsx19(
+          tab === "trace" && /* @__PURE__ */ jsx21(
             DataTracePanel,
             {
               frames: dataTraceFrames,
@@ -4264,7 +4455,7 @@ function TabButton({
   label,
   badge
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
       onClick,
@@ -4283,7 +4474,7 @@ function TabButton({
       },
       children: [
         label,
-        badge && /* @__PURE__ */ jsx19(
+        badge && /* @__PURE__ */ jsx21(
           "span",
           {
             style: {
@@ -4303,28 +4494,28 @@ function TabButton({
 }
 
 // src/components/InsightPanel/InsightPanel.tsx
-import { memo as memo6, useState as useState10 } from "react";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { memo as memo6, useState as useState12 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var InsightPanel = memo6(function InsightPanel2({
   insights,
   expandedId,
   mode
 }) {
   if (insights.length === 0) {
-    return /* @__PURE__ */ jsx20("div", { style: { padding: 12, color: theme.textMuted, fontSize: 13 }, children: "No insights available. Attach recorders to see data." });
+    return /* @__PURE__ */ jsx22("div", { style: { padding: 12, color: theme.textMuted, fontSize: 13 }, children: "No insights available. Attach recorders to see data." });
   }
   if (mode === "grid") {
-    return /* @__PURE__ */ jsx20(InsightGrid, { insights });
+    return /* @__PURE__ */ jsx22(InsightGrid, { insights });
   }
-  return /* @__PURE__ */ jsx20(InsightTabs, { insights, defaultId: expandedId });
+  return /* @__PURE__ */ jsx22(InsightTabs, { insights, defaultId: expandedId });
 });
 var InsightTabs = memo6(function InsightTabs2({
   insights,
   defaultId
 }) {
-  const [activeId, setActiveId] = useState10(defaultId ?? insights[0]?.id);
+  const [activeId, setActiveId] = useState12(defaultId ?? insights[0]?.id);
   const active = insights.find((i) => i.id === activeId) ?? insights[0];
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       style: {
@@ -4334,7 +4525,7 @@ var InsightTabs = memo6(function InsightTabs2({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             style: {
@@ -4343,7 +4534,7 @@ var InsightTabs = memo6(function InsightTabs2({
               flexShrink: 0,
               overflowX: "auto"
             },
-            children: insights.map((insight) => /* @__PURE__ */ jsx20(
+            children: insights.map((insight) => /* @__PURE__ */ jsx22(
               "button",
               {
                 onClick: () => setActiveId(insight.id),
@@ -4364,7 +4555,7 @@ var InsightTabs = memo6(function InsightTabs2({
             ))
           }
         ),
-        /* @__PURE__ */ jsx20("div", { style: { flex: 1, overflow: "auto" }, children: active?.render() })
+        /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "auto" }, children: active?.render() })
       ]
     }
   );
@@ -4373,7 +4564,7 @@ var InsightGrid = memo6(function InsightGrid2({
   insights
 }) {
   const cols = insights.length <= 2 ? 1 : 2;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       style: {
@@ -4384,7 +4575,7 @@ var InsightGrid = memo6(function InsightGrid2({
         gap: 1,
         background: theme.border
       },
-      children: insights.map((insight) => /* @__PURE__ */ jsxs19(
+      children: insights.map((insight) => /* @__PURE__ */ jsxs20(
         "div",
         {
           style: {
@@ -4394,7 +4585,7 @@ var InsightGrid = memo6(function InsightGrid2({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ jsxs19(
+            /* @__PURE__ */ jsxs20(
               "div",
               {
                 style: {
@@ -4409,7 +4600,7 @@ var InsightGrid = memo6(function InsightGrid2({
                 },
                 children: [
                   insight.name,
-                  insight.summary && /* @__PURE__ */ jsx20(
+                  insight.summary && /* @__PURE__ */ jsx22(
                     "span",
                     {
                       style: {
@@ -4424,7 +4615,7 @@ var InsightGrid = memo6(function InsightGrid2({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx20("div", { style: { flex: 1, overflow: "auto" }, children: insight.render() })
+            /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "auto" }, children: insight.render() })
           ]
         },
         insight.id
@@ -4434,17 +4625,17 @@ var InsightGrid = memo6(function InsightGrid2({
 });
 
 // src/components/CompactTimeline/CompactTimeline.tsx
-import { memo as memo7, useState as useState11 } from "react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { memo as memo7, useState as useState13 } from "react";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var CompactTimeline = memo7(function CompactTimeline2({
   snapshots,
   selectedIndex,
   defaultExpanded = false
 }) {
-  const [expanded, setExpanded] = useState11(defaultExpanded);
+  const [expanded, setExpanded] = useState13(defaultExpanded);
   if (snapshots.length === 0) return null;
-  return /* @__PURE__ */ jsxs20("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
-    /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         onClick: () => setExpanded((e) => !e),
@@ -4464,13 +4655,13 @@ var CompactTimeline = memo7(function CompactTimeline2({
           letterSpacing: "0.5px"
         },
         children: [
-          /* @__PURE__ */ jsx21("span", { style: { fontSize: 10 }, children: expanded ? "\u25BC" : "\u25B8" }),
+          /* @__PURE__ */ jsx23("span", { style: { fontSize: 10 }, children: expanded ? "\u25BC" : "\u25B8" }),
           "Timeline",
-          /* @__PURE__ */ jsxs20("span", { style: { fontWeight: 400, fontSize: 10 }, children: [
+          /* @__PURE__ */ jsxs21("span", { style: { fontWeight: 400, fontSize: 10 }, children: [
             snapshots.length,
             " stages"
           ] }),
-          !expanded && /* @__PURE__ */ jsxs20(
+          !expanded && /* @__PURE__ */ jsxs21(
             "div",
             {
               style: {
@@ -4481,7 +4672,7 @@ var CompactTimeline = memo7(function CompactTimeline2({
                 marginLeft: 8
               },
               children: [
-                snapshots.map((snap, i) => /* @__PURE__ */ jsx21(
+                snapshots.map((snap, i) => /* @__PURE__ */ jsx23(
                   "div",
                   {
                     style: {
@@ -4496,7 +4687,7 @@ var CompactTimeline = memo7(function CompactTimeline2({
                   },
                   i
                 )),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx23(
                   "div",
                   {
                     style: {
@@ -4514,7 +4705,7 @@ var CompactTimeline = memo7(function CompactTimeline2({
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx21("div", { style: { padding: "0 12px 8px" }, children: /* @__PURE__ */ jsx21(
+    expanded && /* @__PURE__ */ jsx23("div", { style: { padding: "0 12px 8px" }, children: /* @__PURE__ */ jsx23(
       GanttTimeline,
       {
         snapshots,
@@ -4525,21 +4716,21 @@ var CompactTimeline = memo7(function CompactTimeline2({
 });
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var HLinePill = memo8(function HLinePill2({
   label,
   detail,
   expanded,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs21("div", { style: {
+  return /* @__PURE__ */ jsxs22("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, height: 1, background: theme.border } }),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, height: 1, background: theme.border } }),
+    /* @__PURE__ */ jsxs22(
       "button",
       {
         onClick,
@@ -4563,13 +4754,13 @@ var HLinePill = memo8(function HLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ jsx22("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsx24("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
           label,
-          detail && /* @__PURE__ */ jsx22("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
+          detail && /* @__PURE__ */ jsx24("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
         ]
       }
     ),
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, height: 1, background: theme.border } })
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, height: 1, background: theme.border } })
   ] });
 });
 var VLinePill = memo8(function VLinePill2({
@@ -4579,15 +4770,15 @@ var VLinePill = memo8(function VLinePill2({
   onClick
 }) {
   const arrow = side === "right" ? expanded ? "\u25B6" : "\u25C0" : expanded ? "\u25C0" : "\u25B6";
-  return /* @__PURE__ */ jsxs21("div", { style: {
+  return /* @__PURE__ */ jsxs22("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, width: 1, background: theme.border } }),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, width: 1, background: theme.border } }),
+    /* @__PURE__ */ jsxs22(
       "button",
       {
         onClick,
@@ -4612,12 +4803,12 @@ var VLinePill = memo8(function VLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ jsx22("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
+          /* @__PURE__ */ jsx24("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, width: 1, background: theme.border } })
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, width: 1, background: theme.border } })
   ] });
 });
 function detectKeyedSteps(data) {
@@ -4654,9 +4845,9 @@ function KeyedRecorderView({
   snapshots,
   selectedIndex
 }) {
-  const [showAggregate, setShowAggregate] = useState12(false);
-  const detected = useMemo12(() => detectKeyedSteps(data), [data]);
-  const visibleKeys = useMemo12(() => {
+  const [showAggregate, setShowAggregate] = useState14(false);
+  const detected = useMemo13(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = useMemo13(() => {
     const keys = /* @__PURE__ */ new Set();
     for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
       const snap = snapshots[i];
@@ -4671,7 +4862,7 @@ function KeyedRecorderView({
   }, [snapshots, selectedIndex, detected?.keyType]);
   const isAtEnd = selectedIndex >= snapshots.length - 1;
   if (!detected) {
-    return /* @__PURE__ */ jsx22("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
+    return /* @__PURE__ */ jsx24("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
   }
   const steps = detected.steps;
   const hints = extractRenderHints(data);
@@ -4685,13 +4876,13 @@ function KeyedRecorderView({
     }
   }
   const grandTotal = hints?.grandTotal ?? 0;
-  return /* @__PURE__ */ jsxs21("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
-    description && /* @__PURE__ */ jsx22("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
-    /* @__PURE__ */ jsxs21("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
+  return /* @__PURE__ */ jsxs22("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
+    description && /* @__PURE__ */ jsx24("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
+    /* @__PURE__ */ jsxs22("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
       preferredOperation === "aggregate" ? (
         /* AGGREGATE: collect silently during scrub, button at end to reveal total */
-        /* @__PURE__ */ jsxs21(Fragment6, { children: [
-          isAtEnd ? /* @__PURE__ */ jsx22("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          isAtEnd ? /* @__PURE__ */ jsx24("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ jsx24(
             "button",
             {
               onClick: () => setShowAggregate(true),
@@ -4709,35 +4900,35 @@ function KeyedRecorderView({
               },
               children: "Aggregate \u2014 Show Grand Total"
             }
-          ) : /* @__PURE__ */ jsxs21("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
-            /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
-            numFieldKey && /* @__PURE__ */ jsxs21("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
+          ) : /* @__PURE__ */ jsxs22("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
+            /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
+            numFieldKey && /* @__PURE__ */ jsxs22("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
               grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1),
-              /* @__PURE__ */ jsxs21("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
+              /* @__PURE__ */ jsxs22("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
                 numFieldKey,
                 " \xB7 ",
                 allKeys.length,
                 " steps"
               ] })
             ] })
-          ] }) }) : /* @__PURE__ */ jsxs21("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
-            /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
-            /* @__PURE__ */ jsxs21("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
+          ] }) }) : /* @__PURE__ */ jsxs22("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
+            /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
+            /* @__PURE__ */ jsxs22("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
               visibleEntries.length,
               " of ",
               allKeys.length,
               " steps collected. Scrub to end to aggregate."
             ] })
           ] }),
-          /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : preferredOperation === "accumulate" ? (
         /* ACCUMULATE: running total grows with slider — IS the total at end, no button */
-        /* @__PURE__ */ jsxs21(Fragment6, { children: [
-          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ jsxs21("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
-            /* @__PURE__ */ jsx22("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
-            /* @__PURE__ */ jsxs21("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
+        /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ jsxs22("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
+            /* @__PURE__ */ jsx24("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
+            /* @__PURE__ */ jsxs22("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
               numFieldKey,
               " \xB7 ",
               visibleEntries.length,
@@ -4746,23 +4937,23 @@ function KeyedRecorderView({
               " steps"
             ] })
           ] }),
-          /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : (
         /* TRANSLATE: per-step entries prominent, no totals */
-        /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
+        /* @__PURE__ */ jsx24("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
       ),
       visibleEntries.map((key) => {
         const entry = steps[key];
         const label = entry.stageName ?? key;
         const numVal = numFieldKey ? entry[numFieldKey] : void 0;
-        return /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
-          /* @__PURE__ */ jsx22("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
-          /* @__PURE__ */ jsx22("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
-          numVal !== void 0 && /* @__PURE__ */ jsx22("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
+        return /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
+          /* @__PURE__ */ jsx24("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
+          /* @__PURE__ */ jsx24("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
+          numVal !== void 0 && /* @__PURE__ */ jsx24("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
         ] }, key);
       }),
-      visibleEntries.length === 0 && /* @__PURE__ */ jsx22("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
+      visibleEntries.length === 0 && /* @__PURE__ */ jsx24("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
     ] })
   ] });
 }
@@ -4770,7 +4961,6 @@ var DetailsContent = memo8(function DetailsContent2({
   snapshots,
   selectedIndex,
   narrativeEntries,
-  narrative,
   size,
   fillHeight,
   extraViews
@@ -4779,27 +4969,27 @@ var DetailsContent = memo8(function DetailsContent2({
     {
       id: "memory",
       name: "Memory",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ jsx22(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ jsx24(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
     },
     {
       id: "narrative",
       name: "Narrative",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ jsx22(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ jsx24(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, size, style: fillHeight ? { height: "100%" } : void 0 })
     }
   ];
   const allViews = [...builtInViews, ...extraViews ?? []];
-  const [activeViewId, setActiveViewId] = useState12(allViews[0]?.id ?? "memory");
+  const [activeViewId, setActiveViewId] = useState14(allViews[0]?.id ?? "memory");
   const viewIds = allViews.map((v2) => v2.id).join(",");
-  useEffect8(() => {
+  useEffect9(() => {
     if (!allViews.find((v2) => v2.id === activeViewId)) {
       setActiveViewId(allViews[0]?.id ?? "memory");
     }
   }, [viewIds]);
   const activeView = allViews.find((v2) => v2.id === activeViewId) ?? allViews[0];
-  return /* @__PURE__ */ jsxs21("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx22("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
+  return /* @__PURE__ */ jsxs22("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx24("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
       const active = view.id === activeViewId;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx24(
         "button",
         {
           onClick: () => setActiveViewId(view.id),
@@ -4823,7 +5013,7 @@ var DetailsContent = memo8(function DetailsContent2({
         view.id
       );
     }) }),
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
   ] });
 });
 function resolveSubflowLevel(parentSpec, parentSnapshots, subflowNodeName, narrativeEntries) {
@@ -4907,19 +5097,18 @@ var RightPanel = memo8(function RightPanel2({
   activeTab,
   allTabs,
   activeNarrativeEntries,
-  activeNarrative,
   recorderViews,
   autoRecorderViews,
   size,
   onNavigateToStage
 }) {
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-    /* @__PURE__ */ jsx22("div", { style: {
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    /* @__PURE__ */ jsx24("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.border}`,
       flexShrink: 0,
       background: theme.bgSecondary
-    }, children: ["insights", "what"].map((m) => /* @__PURE__ */ jsx22(
+    }, children: ["insights", "what"].map((m) => /* @__PURE__ */ jsx24(
       "button",
       {
         onClick: () => onModeChange(m),
@@ -4941,7 +5130,7 @@ var RightPanel = memo8(function RightPanel2({
       },
       m
     )) }),
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "hidden" }, children: mode === "insights" ? /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "hidden" }, children: mode === "insights" ? /* @__PURE__ */ jsx24(
       InsightPanel,
       {
         mode: "tabs",
@@ -4950,16 +5139,16 @@ var RightPanel = memo8(function RightPanel2({
           id: tab.id,
           name: insightName(tab.name),
           render: () => {
-            if (tab.id === "narrative") return /* @__PURE__ */ jsx22(NarrativePanel, { snapshots, selectedIndex, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, runtimeSnapshot, spec, size, style: { height: "100%" } });
+            if (tab.id === "narrative") return /* @__PURE__ */ jsx24(NarrativePanel, { snapshots, selectedIndex, narrativeEntries: activeNarrativeEntries, runtimeSnapshot, spec, size, style: { height: "100%" } });
             const customView = recorderViews?.find((v2) => v2.id === tab.id);
             if (customView?.render) return customView.render({ snapshots, selectedIndex });
             const autoView = autoRecorderViews.find((v2) => v2.id === tab.id);
-            if (autoView) return /* @__PURE__ */ jsx22(KeyedRecorderView, { data: autoView.data, description: autoView.description, preferredOperation: autoView.preferredOperation, snapshots, selectedIndex });
+            if (autoView) return /* @__PURE__ */ jsx24(KeyedRecorderView, { data: autoView.data, description: autoView.description, preferredOperation: autoView.preferredOperation, snapshots, selectedIndex });
             return null;
           }
         }))
       }
-    ) : /* @__PURE__ */ jsx22(
+    ) : /* @__PURE__ */ jsx24(
       InspectorPanel,
       {
         snapshots,
@@ -4981,17 +5170,6 @@ function insightName(name) {
   };
   return map[name] ?? name;
 }
-function defaultRenderFlowchart({ spec: s, snapshots: snaps, selectedIndex, onNodeClick }) {
-  return /* @__PURE__ */ jsx22(
-    TracedFlowchartView,
-    {
-      spec: s,
-      snapshots: snaps,
-      snapshotIndex: selectedIndex,
-      onNodeClick
-    }
-  );
-}
 function ExplainableShell({
   snapshots: snapshotsProp,
   runtimeSnapshot,
@@ -4999,7 +5177,6 @@ function ExplainableShell({
   title,
   resultData: resultDataProp,
   logs = [],
-  narrative: narrativeProp,
   narrativeEntries,
   tabs = ["result", "explainable"],
   defaultTab,
@@ -5009,36 +5186,58 @@ function ExplainableShell({
   defaultExpanded,
   recorderViews,
   renderFlowchart,
+  showStageId = false,
+  traceGraph,
+  runtimeOverlay,
   size = "default",
   unstyled = false,
   className,
   style
 }) {
-  const derivedFromRuntime = useMemo12(() => {
+  const derivedFromRuntime = useMemo13(() => {
     if (!runtimeSnapshot) return null;
     try {
       const snaps = toVisualizationSnapshots(runtimeSnapshot, narrativeEntries);
-      const narr = [];
-      for (const snap of snaps) {
-        const lines = (snap.narrative ?? "").split("\n").filter(Boolean);
-        narr.push(...lines);
-      }
-      return { snapshots: snaps, resultData: runtimeSnapshot.sharedState, narrative: narr };
+      return { snapshots: snaps, resultData: runtimeSnapshot.sharedState };
     } catch {
       return null;
     }
   }, [runtimeSnapshot, narrativeEntries]);
   const snapshots = snapshotsProp ?? derivedFromRuntime?.snapshots ?? [];
   const resultData = resultDataProp ?? derivedFromRuntime?.resultData ?? null;
-  const narrative = narrativeProp ?? derivedFromRuntime?.narrative;
-  const effectiveRenderFlowchart = renderFlowchart ?? (spec ? defaultRenderFlowchart : void 0);
+  const tracedFlowRenderer = useMemo13(() => {
+    if (!traceGraph) return void 0;
+    return ({ selectedIndex, snapshots: snapshots2, onNodeClick }) => {
+      const activeRsid = snapshots2[selectedIndex]?.runtimeStageId;
+      let overlayIdx = selectedIndex;
+      if (activeRsid && runtimeOverlay) {
+        const i = runtimeOverlay.executionOrder.findIndex(
+          (s) => s.runtimeStageId === activeRsid
+        );
+        if (i >= 0) overlayIdx = i;
+      }
+      return /* @__PURE__ */ jsx24(
+        TracedFlow,
+        {
+          graph: traceGraph,
+          overlay: runtimeOverlay ?? void 0,
+          scrubIndex: overlayIdx,
+          onNodeClick: (stageId) => onNodeClick?.(stageId),
+          onSubflowChange: (mountId) => {
+            if (mountId !== null) onNodeClick?.(mountId);
+          }
+        }
+      );
+    };
+  }, [traceGraph, runtimeOverlay]);
+  const effectiveRenderFlowchart = renderFlowchart ?? tracedFlowRenderer;
   const leftLabel = panelLabels?.topology ?? "Topology";
   const rightLabel = panelLabels?.details ?? "Details";
   const bottomLabel = panelLabels?.timeline ?? "Timeline";
-  const shellRef = useRef7(null);
-  const [isNarrow, setIsNarrow] = useState12(false);
-  const [isMedium, setIsMedium] = useState12(false);
-  useEffect8(() => {
+  const shellRef = useRef9(null);
+  const [isNarrow, setIsNarrow] = useState14(false);
+  const [isMedium, setIsMedium] = useState14(false);
+  useEffect9(() => {
     const el = shellRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
@@ -5050,14 +5249,14 @@ function ExplainableShell({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const autoRecorderViews = useMemo12(() => {
+  const autoRecorderViews = useMemo13(() => {
     const recorders = runtimeSnapshot?.recorders;
     if (!recorders?.length) return [];
     const explicitIds = new Set((recorderViews ?? []).map((v2) => v2.id));
     return recorders.filter((r) => !explicitIds.has(r.id)).map((r) => ({ id: r.id, name: r.name, description: r.description, preferredOperation: r.preferredOperation, data: r.data }));
   }, [runtimeSnapshot, recorderViews]);
-  const hasNarrative = !!(narrative?.length || narrativeEntries?.length);
-  const allTabs = useMemo12(() => {
+  const hasNarrative = !!narrativeEntries?.length;
+  const allTabs = useMemo13(() => {
     const tabs2 = [
       { id: "result", name: "Result", description: "Final output and console logs" },
       { id: "memory", name: "Memory", description: "Accumulator \u2014 progressive shared state at each stage" }
@@ -5076,38 +5275,38 @@ function ExplainableShell({
   }, [hasNarrative, recorderViews, autoRecorderViews, hideTabsProp]);
   const validTabIds = new Set(allTabs.map((t) => t.id));
   const resolvedDefault = defaultTab && validTabIds.has(defaultTab) ? defaultTab : allTabs[0]?.id ?? "result";
-  const [activeTab, setActiveTab] = useState12(resolvedDefault);
-  const [snapshotIdx, setSnapshotIdx] = useState12(0);
-  const [drillDownStack, setDrillDownStack] = useState12([]);
-  const [rightExpanded, setRightExpanded] = useState12(defaultExpanded?.details ?? true);
-  const [rightPanelMode, setRightPanelMode] = useState12("insights");
-  const [leftExpanded, setLeftExpanded] = useState12(defaultExpanded?.topology ?? false);
-  const [timelineExpanded, setTimelineExpanded] = useState12(defaultExpanded?.timeline ?? false);
-  useEffect8(() => {
+  const [activeTab, setActiveTab] = useState14(resolvedDefault);
+  const [snapshotIdx, setSnapshotIdx] = useState14(0);
+  const [drillDownStack, setDrillDownStack] = useState14([]);
+  const [rightExpanded, setRightExpanded] = useState14(defaultExpanded?.details ?? true);
+  const [rightPanelMode, setRightPanelMode] = useState14("insights");
+  const [leftExpanded, setLeftExpanded] = useState14(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = useState14(defaultExpanded?.timeline ?? false);
+  useEffect9(() => {
     if (isNarrow) {
       setLeftExpanded(false);
       setRightExpanded(false);
       setTimelineExpanded(false);
     }
   }, [isNarrow]);
-  const triggerReflow = useCallback7(() => {
+  const triggerReflow = useCallback9(() => {
     requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
     setTimeout(() => window.dispatchEvent(new Event("resize")), 320);
   }, []);
-  const toggleLeft = useCallback7((v2) => {
+  const toggleLeft = useCallback9((v2) => {
     setLeftExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleRight = useCallback7((v2) => {
+  const toggleRight = useCallback9((v2) => {
     setRightExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleTimeline = useCallback7(() => {
+  const toggleTimeline = useCallback9(() => {
     setTimelineExpanded((p) => !p);
     triggerReflow();
   }, [triggerReflow]);
   const isInSubflow = drillDownStack.length > 0;
-  const currentLevel = useMemo12(() => {
+  const currentLevel = useMemo13(() => {
     if (drillDownStack.length > 0) {
       const top = drillDownStack[drillDownStack.length - 1];
       return { spec: top.spec, snapshots: top.snapshots };
@@ -5117,35 +5316,31 @@ function ExplainableShell({
   const activeSnapshots = currentLevel.snapshots;
   const activeSpec = currentLevel.spec;
   const safeIdx = activeSnapshots.length > 0 ? Math.max(0, Math.min(snapshotIdx, activeSnapshots.length - 1)) : 0;
-  const activeNarrative = useMemo12(() => {
-    if (!isInSubflow) return narrative;
-    const lines = [];
-    for (const snap of activeSnapshots) {
-      const stageLines = (snap.narrative ?? "").split("\n").filter(Boolean);
-      lines.push(...stageLines);
-    }
-    return lines.length > 0 ? lines : void 0;
-  }, [isInSubflow, narrative, activeSnapshots]);
   const activeNarrativeEntries = isInSubflow ? void 0 : narrativeEntries;
-  const breadcrumbs = useMemo12(() => {
+  const breadcrumbs = useMemo13(() => {
     const root = { label: title || "Flowchart", spec, description: spec?.description };
     return [root, ...drillDownStack.map((e) => ({ label: e.label, spec: e.spec, description: void 0 }))];
   }, [spec, title, drillDownStack]);
-  const showTreeSidebar = useMemo12(() => !!spec && hasSubflowNodes(spec), [spec]);
-  const rootOverlay = useMemo12(() => {
+  const showTreeSidebar = useMemo13(() => {
+    if (traceGraph?.nodes?.length) {
+      return traceGraph.nodes.some((n) => n.data?.isSubflow === true);
+    }
+    return !!spec && hasSubflowNodes(spec);
+  }, [traceGraph, spec]);
+  const rootOverlay = useMemo13(() => {
     if (isInSubflow || !snapshots.length) return { activeStage: void 0, doneStages: void 0 };
     const doneStages = new Set(snapshots.slice(0, safeIdx).map((s) => s.stageLabel));
     const activeStage = snapshots[safeIdx]?.stageLabel ?? null;
     return { activeStage, doneStages };
   }, [isInSubflow, snapshots, safeIdx]);
-  const handleTabChange = useCallback7((tab) => {
+  const handleTabChange = useCallback9((tab) => {
     setActiveTab(tab);
     setDrillDownStack([]);
   }, []);
-  const handleSnapshotChange = useCallback7((idx) => {
+  const handleSnapshotChange = useCallback9((idx) => {
     if (typeof idx === "number") setSnapshotIdx(idx);
   }, []);
-  const handleDrillDown = useCallback7(
+  const handleDrillDown = useCallback9(
     (nodeName) => {
       if (!activeSpec) return;
       const entry = resolveSubflowLevel(activeSpec, activeSnapshots, nodeName, narrativeEntries);
@@ -5156,14 +5351,14 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, narrativeEntries, snapshotIdx]
   );
-  const handleBreadcrumbNavigate = useCallback7((level) => {
+  const handleBreadcrumbNavigate = useCallback9((level) => {
     setDrillDownStack((prev) => {
       const popped = level === 0 ? prev[0] : prev[level];
       if (popped) setSnapshotIdx(popped.parentSnapshotIdx);
       return level === 0 ? [] : prev.slice(0, level);
     });
   }, []);
-  const handleNodeClick = useCallback7(
+  const handleNodeClick = useCallback9(
     (indexOrId) => {
       if (typeof indexOrId === "number") {
         setSnapshotIdx(indexOrId);
@@ -5181,7 +5376,7 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, handleDrillDown]
   );
-  const handleTreeNodeSelect = useCallback7(
+  const handleTreeNodeSelect = useCallback9(
     (name, isSubflow) => {
       if (isSubflow && spec) {
         setDrillDownStack([]);
@@ -5200,31 +5395,31 @@ function ExplainableShell({
   );
   const tabLabels = new Map(allTabs.map((t) => [t.id, t.name]));
   if (unstyled) {
-    return /* @__PURE__ */ jsxs21("div", { className, style, "data-fp": "explainable-shell", children: [
-      /* @__PURE__ */ jsx22("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ jsx22("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
-      /* @__PURE__ */ jsxs21("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
-        activeTab === "result" && /* @__PURE__ */ jsx22(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
-        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ jsxs21(Fragment6, { children: [
-          /* @__PURE__ */ jsx22(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
-          isInSubflow && /* @__PURE__ */ jsx22(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
-          activeSpec && effectiveRenderFlowchart?.({ spec: activeSpec, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick }),
-          /* @__PURE__ */ jsx22(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
-          /* @__PURE__ */ jsx22(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, unstyled: true }),
-          /* @__PURE__ */ jsx22(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
+    return /* @__PURE__ */ jsxs22("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ jsx24("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ jsx24("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
+      /* @__PURE__ */ jsxs22("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ jsx24(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
+        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          /* @__PURE__ */ jsx24(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
+          isInSubflow && /* @__PURE__ */ jsx24(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+          activeSpec && effectiveRenderFlowchart?.({ spec: activeSpec, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick, showStageId }),
+          /* @__PURE__ */ jsx24(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
+          /* @__PURE__ */ jsx24(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, unstyled: true }),
+          /* @__PURE__ */ jsx24(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
         ] })
       ] })
     ] });
   }
   const showTopology = !!effectiveRenderFlowchart && !!activeSpec;
-  const detailsContent = useMemo12(() => {
+  const detailsContent = useMemo13(() => {
     if (activeTab === "result") {
-      return /* @__PURE__ */ jsx22(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
+      return /* @__PURE__ */ jsx24(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
     }
     if (activeTab === "memory") {
-      return /* @__PURE__ */ jsx22(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
+      return /* @__PURE__ */ jsx24(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
     }
     if (activeTab === "narrative") {
-      return /* @__PURE__ */ jsx22(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, size, style: { height: "100%" } });
+      return /* @__PURE__ */ jsx24(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, size, style: { height: "100%" } });
     }
     const customView = recorderViews?.find((v2) => v2.id === activeTab);
     if (customView?.render) {
@@ -5232,7 +5427,7 @@ function ExplainableShell({
     }
     const autoView = autoRecorderViews.find((v2) => v2.id === activeTab);
     if (autoView) {
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx24(
         KeyedRecorderView,
         {
           data: autoView.data,
@@ -5244,9 +5439,9 @@ function ExplainableShell({
       );
     }
     return null;
-  }, [activeTab, resultData, logs, hideConsole, size, activeSnapshots, safeIdx, activeNarrativeEntries, activeNarrative, recorderViews, autoRecorderViews]);
-  const detailsPanel = /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx22("div", { style: {
+  }, [activeTab, resultData, logs, hideConsole, size, activeSnapshots, safeIdx, activeNarrativeEntries, recorderViews, autoRecorderViews]);
+  const detailsPanel = /* @__PURE__ */ jsxs22("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx24("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.border}`,
       background: theme.bgSecondary,
@@ -5254,7 +5449,7 @@ function ExplainableShell({
       overflowX: "auto"
     }, children: allTabs.map((tab) => {
       const active = tab.id === activeTab;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx24(
         "button",
         {
           onClick: () => handleTabChange(tab.id),
@@ -5278,9 +5473,9 @@ function ExplainableShell({
         tab.id
       );
     }) }),
-    /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
+    /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
   ] });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ref: shellRef,
@@ -5298,7 +5493,7 @@ function ExplainableShell({
       },
       "data-fp": "explainable-shell",
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           TimeTravelControls,
           {
             snapshots: activeSnapshots,
@@ -5307,57 +5502,59 @@ function ExplainableShell({
             size
           }
         ),
-        isInSubflow && /* @__PURE__ */ jsx22(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
-        /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
+        isInSubflow && /* @__PURE__ */ jsx24(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+        /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
           /* ── Mobile: stacked vertical ── */
-          /* @__PURE__ */ jsxs21(Fragment6, { children: [
-            showTopology && /* @__PURE__ */ jsx22("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
+          /* @__PURE__ */ jsxs22(Fragment6, { children: [
+            showTopology && /* @__PURE__ */ jsx24("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
               spec: activeSpec,
               snapshots: activeSnapshots,
               selectedIndex: safeIdx,
-              onNodeClick: handleNodeClick
+              onNodeClick: handleNodeClick,
+              showStageId
             }) }),
-            showTreeSidebar && /* @__PURE__ */ jsxs21(Fragment6, { children: [
-              /* @__PURE__ */ jsx22(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
-              leftExpanded && /* @__PURE__ */ jsx22("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx22(
+            showTreeSidebar && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+              /* @__PURE__ */ jsx24(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
+              leftExpanded && /* @__PURE__ */ jsx24("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx24(
                 SubflowTree,
                 {
-                  spec,
+                  graph: traceGraph ?? { nodes: [], edges: [] },
                   activeStage: rootOverlay.activeStage,
                   doneStages: rootOverlay.doneStages,
                   onNodeSelect: handleTreeNodeSelect
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx22(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-            rightExpanded && /* @__PURE__ */ jsx22("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
-            /* @__PURE__ */ jsx22(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
-            timelineExpanded && /* @__PURE__ */ jsx22("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx22(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+            /* @__PURE__ */ jsx24(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+            rightExpanded && /* @__PURE__ */ jsx24("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
+            /* @__PURE__ */ jsx24(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+            timelineExpanded && /* @__PURE__ */ jsx24("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx24(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
           ] })
         ) : (
           /* ── Desktop: two-column — Flowchart | Right Panel ── */
-          /* @__PURE__ */ jsxs21(Fragment6, { children: [
-            /* @__PURE__ */ jsxs21("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ jsxs21("div", { style: { width: 180, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
-                /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsxs22(Fragment6, { children: [
+            /* @__PURE__ */ jsxs22("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ jsxs22("div", { style: { width: 180, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx24(
                   SubflowTree,
                   {
-                    spec,
+                    graph: traceGraph ?? { nodes: [], edges: [] },
                     activeStage: rootOverlay.activeStage,
                     doneStages: rootOverlay.doneStages,
                     onNodeSelect: handleTreeNodeSelect
                   }
                 ) }),
-                /* @__PURE__ */ jsx22(VLinePill, { label: "Topology", expanded: true, side: "left", onClick: () => toggleLeft(false) })
-              ] }) : /* @__PURE__ */ jsx22(VLinePill, { label: "Topology", expanded: false, side: "left", onClick: () => toggleLeft(true) })),
-              showTopology ? /* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
+                /* @__PURE__ */ jsx24(VLinePill, { label: "Topology", expanded: true, side: "left", onClick: () => toggleLeft(false) })
+              ] }) : /* @__PURE__ */ jsx24(VLinePill, { label: "Topology", expanded: false, side: "left", onClick: () => toggleLeft(true) })),
+              showTopology ? /* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
                 spec: activeSpec,
                 snapshots: activeSnapshots,
                 selectedIndex: safeIdx,
-                onNodeClick: handleNodeClick
-              }) }) : /* @__PURE__ */ jsx22("div", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsx22(VLinePill, { label: "Details", expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-              rightExpanded && /* @__PURE__ */ jsx22("div", { style: { width: "42%", minWidth: 320, maxWidth: 550, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx22(
+                onNodeClick: handleNodeClick,
+                showStageId
+              }) }) : /* @__PURE__ */ jsx24("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsx24(VLinePill, { label: "Details", expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+              rightExpanded && /* @__PURE__ */ jsx24("div", { style: { width: "42%", minWidth: 320, maxWidth: 550, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx24(
                 RightPanel,
                 {
                   mode: rightPanelMode,
@@ -5369,7 +5566,6 @@ function ExplainableShell({
                   activeTab,
                   allTabs,
                   activeNarrativeEntries,
-                  activeNarrative,
                   recorderViews,
                   autoRecorderViews,
                   size,
@@ -5380,7 +5576,7 @@ function ExplainableShell({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx24(
               CompactTimeline,
               {
                 snapshots: activeSnapshots,
@@ -5397,8 +5593,8 @@ function ExplainableShell({
 
 // src/components/TraceViewer/TraceViewer.tsx
 import * as React from "react";
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useMemo as useMemo14 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function parseTrace(input) {
   if (input == null) {
     return {
@@ -5461,11 +5657,11 @@ function TraceViewer({
   recorderViews,
   renderFlowchart
 }) {
-  const parsed = useMemo13(() => parseTrace(trace), [trace]);
+  const parsed = useMemo14(() => parseTrace(trace), [trace]);
   React.useEffect(() => {
     if (!parsed.ok && onError) onError(parsed.error);
   }, [parsed, onError]);
-  const snapshots = useMemo13(() => {
+  const snapshots = useMemo14(() => {
     if (!parsed.ok || !parsed.trace.snapshot) return [];
     try {
       return toVisualizationSnapshots(
@@ -5479,12 +5675,11 @@ function TraceViewer({
   if (!parsed.ok || snapshots.length === 0) {
     return fallback ?? null;
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     ExplainableShell,
     {
       snapshots,
       spec: parsed.trace.spec,
-      narrative: parsed.trace.narrative,
       narrativeEntries: parsed.trace.narrativeEntries,
       tabs,
       defaultTab,