footprint-explainable-ui 0.25.0 → 0.25.2

package/dist/index.cjs

@@ -2280,7 +2280,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
@@ -3403,8 +3403,8 @@ var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
 });
 
 // src/components/FlowchartView/TracedFlow.tsx
-var import_react23 = require("react");
-var import_react24 = require("@xyflow/react");
+var import_react25 = require("react");
+var import_react26 = require("@xyflow/react");
 
 // src/components/FlowchartView/_internal/dagreTraceLayout.ts
 var import_dagre = __toESM(require("dagre"), 1);
@@ -3516,6 +3516,163 @@ function dagreTraceLayout(graph, options = {}) {
   });
   return { nodes: positioned, edges: graph.edges };
 }
+function createDagreTraceLayout(options = {}) {
+  return (graph) => dagreTraceLayout(graph, options);
+}
+
+// src/components/FlowchartView/_internal/devWarn.ts
+function isDevModeEnv() {
+  const proc = globalThis.process;
+  return proc?.env?.NODE_ENV !== "production";
+}
+function devWarn(messageFn, ...extras) {
+  if (!isDevModeEnv()) return;
+  console.warn(messageFn(), ...extras);
+}
+
+// src/components/FlowchartView/_internal/snapLinearSuccessors.ts
+function snapLinearSuccessors(graph, options = {}) {
+  if (graph.nodes.length === 0) return graph;
+  const fallbackW = options.nodeWidth ?? DEFAULT_NODE_W;
+  const fallbackH = options.nodeHeight ?? DEFAULT_NODE_H;
+  const byId = /* @__PURE__ */ new Map();
+  const width = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) {
+    byId.set(n.id, n);
+    width.set(n.id, sizeOf(n, fallbackW, fallbackH, options.nodeSize).width);
+  }
+  const preds = /* @__PURE__ */ new Map();
+  const outDegree = /* @__PURE__ */ new Map();
+  const seenEdge = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    if (e.data?.kind === "loop") continue;
+    if (!byId.has(e.source) || !byId.has(e.target)) continue;
+    const key = `${e.source}\0${e.target}`;
+    if (seenEdge.has(key)) continue;
+    seenEdge.add(key);
+    const list = preds.get(e.target);
+    if (list) list.push(e.source);
+    else preds.set(e.target, [e.source]);
+    outDegree.set(e.source, (outDegree.get(e.source) ?? 0) + 1);
+  }
+  const workingX = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) workingX.set(n.id, n.position.x);
+  const centerX = (id) => workingX.get(id) + width.get(id) / 2;
+  const order = [...graph.nodes].sort(
+    (a, b) => a.position.y - b.position.y || a.position.x - b.position.x || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
+  );
+  for (const n of order) {
+    const p = preds.get(n.id);
+    if (!p || p.length !== 1) continue;
+    const pid = p[0];
+    if ((outDegree.get(pid) ?? 0) !== 1) continue;
+    const P = byId.get(pid);
+    if ((n.parentId ?? void 0) !== (P.parentId ?? void 0)) continue;
+    workingX.set(n.id, centerX(pid) - width.get(n.id) / 2);
+  }
+  const nodes = graph.nodes.map((n) => {
+    const nx = workingX.get(n.id);
+    return nx === n.position.x ? n : { ...n, position: { x: nx, y: n.position.y } };
+  });
+  return { nodes, edges: graph.edges };
+}
+function createSnappedDagreLayout(base, options = {}) {
+  return (graph) => snapLinearSuccessors(base(graph), options);
+}
+
+// src/components/FlowchartView/_internal/centerForkParents.ts
+function centerForkParents(graph, options = {}) {
+  if (graph.nodes.length === 0) return graph;
+  const fallbackW = options.nodeWidth ?? DEFAULT_NODE_W;
+  const fallbackH = options.nodeHeight ?? DEFAULT_NODE_H;
+  const byId = /* @__PURE__ */ new Map();
+  const width = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) {
+    byId.set(n.id, n);
+    width.set(n.id, sizeOf(n, fallbackW, fallbackH, options.nodeSize).width);
+  }
+  const childrenOf = /* @__PURE__ */ new Map();
+  const predsOf = /* @__PURE__ */ new Map();
+  const outDegree = /* @__PURE__ */ new Map();
+  const inDegree = /* @__PURE__ */ new Map();
+  const seen = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    if (e.data?.kind === "loop") continue;
+    if (!byId.has(e.source) || !byId.has(e.target)) continue;
+    const key = `${e.source} ${e.target}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const cl = childrenOf.get(e.source);
+    if (cl) cl.push(e.target);
+    else childrenOf.set(e.source, [e.target]);
+    const pl = predsOf.get(e.target);
+    if (pl) pl.push(e.source);
+    else predsOf.set(e.target, [e.source]);
+    outDegree.set(e.source, (outDegree.get(e.source) ?? 0) + 1);
+    inDegree.set(e.target, (inDegree.get(e.target) ?? 0) + 1);
+  }
+  const workingX = /* @__PURE__ */ new Map();
+  for (const n of graph.nodes) workingX.set(n.id, n.position.x);
+  const centerX = (id) => workingX.get(id) + width.get(id) / 2;
+  const nodeSep = options.nodeSep ?? 60;
+  const clampX = (id, desiredX) => {
+    const w = width.get(id);
+    const x0 = workingX.get(id);
+    const self = byId.get(id);
+    let minX = -Infinity;
+    let maxX = Infinity;
+    for (const m of graph.nodes) {
+      if (m.id === id || m.parentId !== self.parentId) continue;
+      if (Math.abs(m.position.y - self.position.y) > 1) continue;
+      const mLeft = workingX.get(m.id);
+      const mRight = mLeft + width.get(m.id);
+      if (mRight <= x0) minX = Math.max(minX, mRight + nodeSep);
+      else if (mLeft >= x0 + w) maxX = Math.min(maxX, mLeft - nodeSep - w);
+    }
+    return minX <= maxX ? Math.max(minX, Math.min(maxX, desiredX)) : x0;
+  };
+  const order = [...graph.nodes].sort(
+    (a, b) => b.position.y - a.position.y || a.position.x - b.position.x || a.id.localeCompare(b.id)
+  );
+  for (const n of order) {
+    const outD = outDegree.get(n.id) ?? 0;
+    const inD = inDegree.get(n.id) ?? 0;
+    const isFork = outD >= 2 && inD <= 1;
+    const isMerge = inD >= 2 && outD <= 1;
+    if (!isFork && !isMerge) continue;
+    const kin = ((isFork ? childrenOf.get(n.id) : predsOf.get(n.id)) ?? []).filter(
+      (k) => byId.get(k)?.parentId === n.parentId
+      // same compound only
+    );
+    if (kin.length < 2) continue;
+    const centers = kin.map(centerX);
+    const wN = width.get(n.id);
+    const span = (Math.min(...centers) + Math.max(...centers)) / 2;
+    workingX.set(n.id, clampX(n.id, span - wN / 2));
+    const stepOf = isFork ? predsOf : childrenOf;
+    let curId = n.id;
+    const walked = /* @__PURE__ */ new Set([curId]);
+    for (; ; ) {
+      const nexts = stepOf.get(curId);
+      if (!nexts || nexts.length !== 1) break;
+      const m = nexts[0];
+      if (walked.has(m)) break;
+      if ((outDegree.get(m) ?? 0) > 1) break;
+      if ((inDegree.get(m) ?? 0) > 1) break;
+      if (byId.get(m)?.parentId !== byId.get(curId)?.parentId) break;
+      workingX.set(m, clampX(m, centerX(curId) - width.get(m) / 2));
+      walked.add(m);
+      curId = m;
+    }
+  }
+  const nodes = graph.nodes.map(
+    (n) => workingX.get(n.id) === n.position.x ? n : { ...n, position: { x: workingX.get(n.id), y: n.position.y } }
+  );
+  return { nodes, edges: graph.edges };
+}
+function withForkCentering(base, options = {}) {
+  return (graph) => centerForkParents(base(graph), options);
+}
 
 // src/components/FlowchartView/createTraceRuntimeOverlay.ts
 function sliceOverlay(overlay, index) {
@@ -3955,7 +4112,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                   background: bg,
                   border: `${isHero ? "2.5px" : isMuted ? "1px" : "2px"} ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
                   borderRadius: theme.radius,
-                  padding: description ? `${Math.round(8 * sizeScale)}px ${Math.round(16 * sizeScale)}px` : `${Math.round(10 * sizeScale)}px ${Math.round(20 * sizeScale)}px`,
+                  padding: description ? `${Math.round(6 * sizeScale)}px ${Math.round(12 * sizeScale)}px` : `${Math.round(7 * sizeScale)}px ${Math.round(14 * sizeScale)}px`,
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
@@ -4576,6 +4733,14 @@ function staggeredBendY(sourceBottom, targetTop, others, minGapFromTarget = 8) {
   if (lowestSkippedBottom === -Infinity) return null;
   return Math.min((lowestSkippedBottom + targetTop) / 2, targetTop - minGapFromTarget);
 }
+function forkFanBendY(sourceBottom, childTops, minGapFromTarget = 8) {
+  if (childTops.length < 2) return null;
+  const nearestTop = Math.min(...childTops);
+  return Math.min((sourceBottom + nearestTop) / 2, nearestTop - minGapFromTarget);
+}
+function resolveStepBendY(forkBend, staggeredBend) {
+  return staggeredBend ?? forkBend;
+}
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -4598,6 +4763,16 @@ function SmartStepEdge({
     if (!src || !tgt) return null;
     const sourceBottom = src.internals.positionAbsolute.y + (src.measured.height ?? 0);
     const targetTop = tgt.internals.positionAbsolute.y;
+    const childTops = [];
+    for (const e of s.edges) {
+      if (e.source !== source) continue;
+      if (e.data?.kind === "loop") continue;
+      const c = s.nodeLookup.get(e.target);
+      if (c && c.type !== GROUP_CONTAINER_NODE_TYPE) {
+        childTops.push(c.internals.positionAbsolute.y);
+      }
+    }
+    const fan = forkFanBendY(sourceBottom, childTops);
     const others = [];
     for (const n of s.nodeLookup.values()) {
       if (n.id === source || n.id === target) continue;
@@ -4605,7 +4780,8 @@ function SmartStepEdge({
       const top = n.internals.positionAbsolute.y;
       others.push({ top, bottom: top + (n.measured.height ?? 0) });
     }
-    return staggeredBendY(sourceBottom, targetTop, others);
+    const staggered = staggeredBendY(sourceBottom, targetTop, others);
+    return resolveStepBendY(fan, staggered);
   });
   const [path] = (0, import_react21.getSmoothStepPath)({
     sourceX,
@@ -4621,6 +4797,49 @@ function SmartStepEdge({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react21.BaseEdge, { id, path, markerEnd, style });
 }
 
+// src/components/FlowchartView/_internal/MeasuredNodeSizes.tsx
+var import_react23 = require("react");
+var import_react24 = require("@xyflow/react");
+
+// src/components/FlowchartView/_internal/measuredFootprints.ts
+function extractMeasuredFootprints(entries) {
+  const sizes = /* @__PURE__ */ new Map();
+  for (const [id, node] of entries) {
+    const width = node.measured?.width;
+    const height = node.measured?.height;
+    if (typeof width === "number" && typeof height === "number" && width > 0 && height > 0) {
+      sizes.set(id, { width: Math.round(width), height: Math.round(height) });
+    }
+  }
+  return sizes;
+}
+function sameFootprints(a, b) {
+  if (a === b) return true;
+  if (a.size !== b.size) return false;
+  for (const [id, s] of a) {
+    const t = b.get(id);
+    if (!t || t.width !== s.width || t.height !== s.height) return false;
+  }
+  return true;
+}
+
+// src/components/FlowchartView/_internal/MeasuredNodeSizes.tsx
+function MeasuredNodeSizes({
+  onSizes,
+  includeHiddenNodes = false
+}) {
+  const initialized = (0, import_react24.useNodesInitialized)({ includeHiddenNodes });
+  const sizes = (0, import_react24.useStore)(
+    (s) => extractMeasuredFootprints(s.nodeLookup),
+    sameFootprints
+  );
+  (0, import_react23.useEffect)(() => {
+    if (!initialized || sizes.size === 0) return;
+    onSizes(sizes);
+  }, [initialized, sizes, onSizes]);
+  return null;
+}
+
 // src/components/FlowchartView/TracedFlow.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var DEFAULT_COLORS = {
@@ -4730,7 +4949,7 @@ function styleEdgeWithOverlay(edge, doneStageIds, activeStageId, colors) {
     type: kind === "loop" ? "loopBack" : "smartStep",
     animated: isLeadingEdge,
     style: { stroke: color, strokeWidth: traversed ? 2 : 1.5 },
-    markerEnd: { type: import_react24.MarkerType.ArrowClosed, color, width: 16, height: 16 }
+    markerEnd: { type: import_react26.MarkerType.ArrowClosed, color, width: 16, height: 16 }
   };
   if (kind === "loop") {
     styled.style = { ...styled.style, strokeDasharray: "4 3" };
@@ -4760,21 +4979,28 @@ function TracedFlow({
   style
 }) {
   const layout = layoutProp ?? dagreTraceLayout;
-  const colors = (0, import_react23.useMemo)(
+  (0, import_react25.useEffect)(() => {
+    if (layoutProp === dagreTraceLayout) {
+      devWarn(
+        () => "[footprint-explainable-ui] <TracedFlow layout={dagreTraceLayout}> bypasses the built-in measure-then-layout pipeline (content-exact sizing, fork/merge centering, straight spines). OMIT the `layout` prop to use it \u2014 passing the raw dagreTraceLayout silently forfeits every layout improvement eui ships."
+      );
+    }
+  }, [layoutProp]);
+  const colors = (0, import_react25.useMemo)(
     () => ({ ...DEFAULT_COLORS, ...colorOverrides ?? {} }),
     [colorOverrides]
   );
-  const mergedNodeTypes = (0, import_react23.useMemo)(
+  const mergedNodeTypes = (0, import_react25.useMemo)(
     () => userNodeTypes ? { ...DEFAULT_NODE_TYPES, ...userNodeTypes } : DEFAULT_NODE_TYPES,
     [userNodeTypes]
   );
-  const mergedEdgeTypes = (0, import_react23.useMemo)(
+  const mergedEdgeTypes = (0, import_react25.useMemo)(
     () => userEdgeTypes ? { ...DEFAULT_EDGE_TYPES, ...userEdgeTypes } : DEFAULT_EDGE_TYPES,
     [userEdgeTypes]
   );
   const drill = useSubflowDrill(graph, onSubflowChange);
-  const groupedSet = (0, import_react23.useMemo)(() => new Set(groupedSubflows ?? []), [groupedSubflows]);
-  const filteredGraph = (0, import_react23.useMemo)(() => {
+  const groupedSet = (0, import_react25.useMemo)(() => new Set(groupedSubflows ?? []), [groupedSubflows]);
+  const filteredGraph = (0, import_react25.useMemo)(() => {
     const base = filterGraphForDrill(graph, drill.currentSubflowId);
     if (groupedSet.size === 0) return base;
     const baseIds = new Set(base.nodes.map((n) => n.id));
@@ -4789,12 +5015,23 @@ function TracedFlow({
     );
     return { nodes: [...base.nodes, ...extraNodes], edges: [...base.edges, ...extraEdges] };
   }, [graph, drill.currentSubflowId, groupedSet]);
-  const breadcrumb = (0, import_react23.useMemo)(
+  const breadcrumb = (0, import_react25.useMemo)(
     () => buildSubflowBreadcrumb(graph, drill.currentSubflowId),
     [graph, drill.currentSubflowId]
   );
-  const positioned = (0, import_react23.useMemo)(() => {
-    const realBase = layout === "passthrough" ? (g) => g : layout;
+  const [measuredSizes, setMeasuredSizes] = (0, import_react25.useState)(null);
+  const positioned = (0, import_react25.useMemo)(() => {
+    const nodeSize = measuredSizes ? (n) => measuredSizes.get(n.id) : void 0;
+    const sizeOpts = nodeSize ? { nodeSize } : {};
+    const dagreBase = withForkCentering(
+      createSnappedDagreLayout(
+        createDagreTraceLayout({ ...sizeOpts, rankSep: 52, nodeSep: 36 }),
+        sizeOpts
+      ),
+      { ...sizeOpts, nodeSep: 36 }
+      // same nodeSep → clamp preserves dagre's reserved gap
+    );
+    const realBase = layout === "passthrough" ? (g) => g : layoutProp === void 0 ? dagreBase : layout;
     if (groupedSet.size > 0) {
       const grouped = applyGroupLayout(filteredGraph, {
         groupedSubflowIds: [...groupedSet],
@@ -4805,9 +5042,9 @@ function TracedFlow({
     if (mainChartBox) {
       return wrapInMainChartBox(filteredGraph, { baseLayout: realBase, ...mainChartBox });
     }
-    return layout === "passthrough" ? filteredGraph : layout(filteredGraph);
-  }, [filteredGraph, layout, groupedSet, mainChartBox]);
-  const slice = (0, import_react23.useMemo)(() => {
+    return realBase(filteredGraph);
+  }, [filteredGraph, layout, layoutProp, groupedSet, mainChartBox, measuredSizes]);
+  const slice = (0, import_react25.useMemo)(() => {
     const empty = {
       doneStageIds: /* @__PURE__ */ new Set(),
       activeStageId: null,
@@ -4819,7 +5056,7 @@ function TracedFlow({
     const idx = scrubIndex ?? Math.max(0, overlay.executionOrder.length - 1);
     return aggregateMountStatus(sliceOverlay(overlay, idx), graph, drill.currentSubflowId);
   }, [overlay, scrubIndex, graph, drill.currentSubflowId]);
-  const reactFlowNodes = (0, import_react23.useMemo)(
+  const reactFlowNodes = (0, import_react25.useMemo)(
     () => positioned.nodes.map(
       (n) => toStageNodeWithOverlay(
         n,
@@ -4832,13 +5069,13 @@ function TracedFlow({
     ),
     [positioned.nodes, slice, coActiveStageIds]
   );
-  const reactFlowEdges = (0, import_react23.useMemo)(
+  const reactFlowEdges = (0, import_react25.useMemo)(
     () => positioned.edges.map(
       (e) => styleEdgeWithOverlay(e, slice.doneStageIds, slice.activeStageId, colors)
     ),
     [positioned.edges, slice, colors]
   );
-  const handleNodeClick = (0, import_react23.useCallback)(
+  const handleNodeClick = (0, import_react25.useCallback)(
     (_, node) => {
       const data = node.data ?? {};
       if (data.isSubflow && data.subflowId && !groupedSet.has(data.subflowId)) {
@@ -4848,9 +5085,13 @@ function TracedFlow({
     },
     [drill, onNodeClick, groupedSet]
   );
-  const wrapperRef = (0, import_react23.useRef)(null);
-  const [rfInstance, setRfInstance] = (0, import_react23.useState)(null);
-  useChartAutoRefit(wrapperRef, rfInstance, { refitKey: drill.currentSubflowId });
+  const wrapperRef = (0, import_react25.useRef)(null);
+  const [rfInstance, setRfInstance] = (0, import_react25.useState)(null);
+  useChartAutoRefit(wrapperRef, rfInstance, {
+    // Re-fit on drill AND after the measured-size re-layout settles.
+    refitKey: `${drill.currentSubflowId ?? ""}:${measuredSizes ? "measured" : "estimated"}`,
+    padding: 0.18
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
@@ -4873,7 +5114,7 @@ function TracedFlow({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          import_react24.ReactFlow,
+          import_react26.ReactFlow,
           {
             nodes: reactFlowNodes,
             edges: reactFlowEdges,
@@ -4882,9 +5123,12 @@ function TracedFlow({
             onNodeClick: handleNodeClick,
             onInit: setRfInstance,
             fitView: true,
+            fitViewOptions: { padding: 0.18 },
+            minZoom: 0.1,
             proOptions: { hideAttribution: true },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.Background, { variant: import_react24.BackgroundVariant.Dots, gap: 20, size: 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MeasuredNodeSizes, { onSizes: setMeasuredSizes }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react26.Background, { variant: import_react26.BackgroundVariant.Dots, gap: 20, size: 1 }),
               children
             ]
           }
@@ -4895,12 +5139,12 @@ function TracedFlow({
 }
 
 // src/components/InspectorPanel/InspectorPanel.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/DataTracePanel/DataTracePanel.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var DataTracePanel = (0, import_react25.memo)(function DataTracePanel2({
+var DataTracePanel = (0, import_react27.memo)(function DataTracePanel2({
   frames,
   selectedStageId,
   onFrameClick,
@@ -4970,7 +5214,7 @@ var DataTracePanel = (0, import_react25.memo)(function DataTracePanel2({
     ))
   ] });
 });
-var DataTraceFrame = (0, import_react25.memo)(function DataTraceFrame2({
+var DataTraceFrame = (0, import_react27.memo)(function DataTraceFrame2({
   frame,
   isFirst,
   isLast,
@@ -5056,14 +5300,14 @@ var DataTraceFrame = (0, import_react25.memo)(function DataTraceFrame2({
 
 // src/components/InspectorPanel/InspectorPanel.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var InspectorPanel = (0, import_react26.memo)(function InspectorPanel2({
+var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
   snapshots,
   selectedIndex,
   dataTraceFrames,
   selectedStageId,
   onNavigateToStage
 }) {
-  const [tab, setTab] = (0, import_react26.useState)("state");
+  const [tab, setTab] = (0, import_react28.useState)("state");
   const currentSnapshot = snapshots[selectedIndex];
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
@@ -5171,9 +5415,9 @@ function TabButton({
 }
 
 // src/components/InsightPanel/InsightPanel.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var InsightPanel = (0, import_react27.memo)(function InsightPanel2({
+var InsightPanel = (0, import_react29.memo)(function InsightPanel2({
   insights,
   expandedId,
   mode
@@ -5186,11 +5430,11 @@ var InsightPanel = (0, import_react27.memo)(function InsightPanel2({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InsightTabs, { insights, defaultId: expandedId });
 });
-var InsightTabs = (0, import_react27.memo)(function InsightTabs2({
+var InsightTabs = (0, import_react29.memo)(function InsightTabs2({
   insights,
   defaultId
 }) {
-  const [activeId, setActiveId] = (0, import_react27.useState)(defaultId ?? insights[0]?.id);
+  const [activeId, setActiveId] = (0, import_react29.useState)(defaultId ?? insights[0]?.id);
   const active = insights.find((i) => i.id === activeId) ?? insights[0];
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
@@ -5237,7 +5481,7 @@ var InsightTabs = (0, import_react27.memo)(function InsightTabs2({
     }
   );
 });
-var InsightGrid = (0, import_react27.memo)(function InsightGrid2({
+var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
   insights
 }) {
   const cols = insights.length <= 2 ? 1 : 2;
@@ -5302,14 +5546,14 @@ var InsightGrid = (0, import_react27.memo)(function InsightGrid2({
 });
 
 // src/components/CompactTimeline/CompactTimeline.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var CompactTimeline = (0, import_react28.memo)(function CompactTimeline2({
+var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
   snapshots,
   selectedIndex,
   defaultExpanded = false
 }) {
-  const [expanded, setExpanded] = (0, import_react28.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react30.useState)(defaultExpanded);
   if (snapshots.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
@@ -5394,7 +5638,7 @@ var CompactTimeline = (0, import_react28.memo)(function CompactTimeline2({
 
 // src/components/ExplainableShell/ExplainableShell.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var HLinePill = (0, import_react29.memo)(function HLinePill2({
+var HLinePill = (0, import_react31.memo)(function HLinePill2({
   label,
   detail,
   expanded,
@@ -5440,7 +5684,7 @@ var HLinePill = (0, import_react29.memo)(function HLinePill2({
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
   ] });
 });
-var VLinePill = (0, import_react29.memo)(function VLinePill2({
+var VLinePill = (0, import_react31.memo)(function VLinePill2({
   label,
   expanded,
   side = "right",
@@ -5522,9 +5766,9 @@ function KeyedRecorderView({
   snapshots,
   selectedIndex
 }) {
-  const [showAggregate, setShowAggregate] = (0, import_react29.useState)(false);
-  const detected = (0, import_react29.useMemo)(() => detectKeyedSteps(data), [data]);
-  const visibleKeys = (0, import_react29.useMemo)(() => {
+  const [showAggregate, setShowAggregate] = (0, import_react31.useState)(false);
+  const detected = (0, import_react31.useMemo)(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = (0, import_react31.useMemo)(() => {
     const keys = /* @__PURE__ */ new Set();
     for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
       const snap = snapshots[i];
@@ -5634,7 +5878,7 @@ function KeyedRecorderView({
     ] })
   ] });
 }
-var DetailsContent = (0, import_react29.memo)(function DetailsContent2({
+var DetailsContent = (0, import_react31.memo)(function DetailsContent2({
   snapshots,
   selectedIndex,
   narrativeEntries,
@@ -5655,9 +5899,9 @@ var DetailsContent = (0, import_react29.memo)(function DetailsContent2({
     }
   ];
   const allViews = [...builtInViews, ...extraViews ?? []];
-  const [activeViewId, setActiveViewId] = (0, import_react29.useState)(allViews[0]?.id ?? "memory");
+  const [activeViewId, setActiveViewId] = (0, import_react31.useState)(allViews[0]?.id ?? "memory");
   const viewIds = allViews.map((v2) => v2.id).join(",");
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!allViews.find((v2) => v2.id === activeViewId)) {
       setActiveViewId(allViews[0]?.id ?? "memory");
     }
@@ -5764,7 +6008,7 @@ function buildDataTrace(commitLog, targetRuntimeStageId, maxDepth = 10) {
   }
   return frames;
 }
-var RightPanel = (0, import_react29.memo)(function RightPanel2({
+var RightPanel = (0, import_react31.memo)(function RightPanel2({
   mode,
   onModeChange,
   snapshots,
@@ -5871,7 +6115,7 @@ function ExplainableShell({
   className,
   style
 }) {
-  const derivedFromRuntime = (0, import_react29.useMemo)(() => {
+  const derivedFromRuntime = (0, import_react31.useMemo)(() => {
     if (!runtimeSnapshot) return null;
     try {
       const snaps = toVisualizationSnapshots(runtimeSnapshot, narrativeEntries);
@@ -5882,7 +6126,7 @@ function ExplainableShell({
   }, [runtimeSnapshot, narrativeEntries]);
   const snapshots = snapshotsProp ?? derivedFromRuntime?.snapshots ?? [];
   const resultData = resultDataProp ?? derivedFromRuntime?.resultData ?? null;
-  const tracedFlowRenderer = (0, import_react29.useMemo)(() => {
+  const tracedFlowRenderer = (0, import_react31.useMemo)(() => {
     if (!traceGraph) return void 0;
     return ({ selectedIndex, snapshots: snapshots2, onNodeClick }) => {
       const activeRsid = snapshots2[selectedIndex]?.runtimeStageId;
@@ -5911,10 +6155,10 @@ function ExplainableShell({
   const leftLabel = panelLabels?.topology ?? "Topology";
   const rightLabel = panelLabels?.details ?? "Details";
   const bottomLabel = panelLabels?.timeline ?? "Timeline";
-  const shellRef = (0, import_react29.useRef)(null);
-  const [isNarrow, setIsNarrow] = (0, import_react29.useState)(false);
-  const [isMedium, setIsMedium] = (0, import_react29.useState)(false);
-  (0, import_react29.useEffect)(() => {
+  const shellRef = (0, import_react31.useRef)(null);
+  const [isNarrow, setIsNarrow] = (0, import_react31.useState)(false);
+  const [isMedium, setIsMedium] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     const el = shellRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
@@ -5926,14 +6170,14 @@ function ExplainableShell({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const autoRecorderViews = (0, import_react29.useMemo)(() => {
+  const autoRecorderViews = (0, import_react31.useMemo)(() => {
     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 = !!narrativeEntries?.length;
-  const allTabs = (0, import_react29.useMemo)(() => {
+  const allTabs = (0, import_react31.useMemo)(() => {
     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" }
@@ -5952,38 +6196,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] = (0, import_react29.useState)(resolvedDefault);
-  const [snapshotIdx, setSnapshotIdx] = (0, import_react29.useState)(0);
-  const [drillDownStack, setDrillDownStack] = (0, import_react29.useState)([]);
-  const [rightExpanded, setRightExpanded] = (0, import_react29.useState)(defaultExpanded?.details ?? true);
-  const [rightPanelMode, setRightPanelMode] = (0, import_react29.useState)("insights");
-  const [leftExpanded, setLeftExpanded] = (0, import_react29.useState)(defaultExpanded?.topology ?? false);
-  const [timelineExpanded, setTimelineExpanded] = (0, import_react29.useState)(defaultExpanded?.timeline ?? false);
-  (0, import_react29.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react31.useState)(resolvedDefault);
+  const [snapshotIdx, setSnapshotIdx] = (0, import_react31.useState)(0);
+  const [drillDownStack, setDrillDownStack] = (0, import_react31.useState)([]);
+  const [rightExpanded, setRightExpanded] = (0, import_react31.useState)(defaultExpanded?.details ?? true);
+  const [rightPanelMode, setRightPanelMode] = (0, import_react31.useState)("insights");
+  const [leftExpanded, setLeftExpanded] = (0, import_react31.useState)(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = (0, import_react31.useState)(defaultExpanded?.timeline ?? false);
+  (0, import_react31.useEffect)(() => {
     if (isNarrow) {
       setLeftExpanded(false);
       setRightExpanded(false);
       setTimelineExpanded(false);
     }
   }, [isNarrow]);
-  const triggerReflow = (0, import_react29.useCallback)(() => {
+  const triggerReflow = (0, import_react31.useCallback)(() => {
     requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
     setTimeout(() => window.dispatchEvent(new Event("resize")), 320);
   }, []);
-  const toggleLeft = (0, import_react29.useCallback)((v2) => {
+  const toggleLeft = (0, import_react31.useCallback)((v2) => {
     setLeftExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleRight = (0, import_react29.useCallback)((v2) => {
+  const toggleRight = (0, import_react31.useCallback)((v2) => {
     setRightExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleTimeline = (0, import_react29.useCallback)(() => {
+  const toggleTimeline = (0, import_react31.useCallback)(() => {
     setTimelineExpanded((p) => !p);
     triggerReflow();
   }, [triggerReflow]);
   const isInSubflow = drillDownStack.length > 0;
-  const currentLevel = (0, import_react29.useMemo)(() => {
+  const currentLevel = (0, import_react31.useMemo)(() => {
     if (drillDownStack.length > 0) {
       const top = drillDownStack[drillDownStack.length - 1];
       return { spec: top.spec, snapshots: top.snapshots };
@@ -5994,30 +6238,30 @@ function ExplainableShell({
   const activeSpec = currentLevel.spec;
   const safeIdx = activeSnapshots.length > 0 ? Math.max(0, Math.min(snapshotIdx, activeSnapshots.length - 1)) : 0;
   const activeNarrativeEntries = isInSubflow ? void 0 : narrativeEntries;
-  const breadcrumbs = (0, import_react29.useMemo)(() => {
+  const breadcrumbs = (0, import_react31.useMemo)(() => {
     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 = (0, import_react29.useMemo)(() => {
+  const showTreeSidebar = (0, import_react31.useMemo)(() => {
     if (traceGraph?.nodes?.length) {
       return traceGraph.nodes.some((n) => n.data?.isSubflow === true);
     }
     return !!spec && hasSubflowNodes(spec);
   }, [traceGraph, spec]);
-  const rootOverlay = (0, import_react29.useMemo)(() => {
+  const rootOverlay = (0, import_react31.useMemo)(() => {
     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 = (0, import_react29.useCallback)((tab) => {
+  const handleTabChange = (0, import_react31.useCallback)((tab) => {
     setActiveTab(tab);
     setDrillDownStack([]);
   }, []);
-  const handleSnapshotChange = (0, import_react29.useCallback)((idx) => {
+  const handleSnapshotChange = (0, import_react31.useCallback)((idx) => {
     if (typeof idx === "number") setSnapshotIdx(idx);
   }, []);
-  const handleDrillDown = (0, import_react29.useCallback)(
+  const handleDrillDown = (0, import_react31.useCallback)(
     (nodeName) => {
       if (!activeSpec) return;
       const entry = resolveSubflowLevel(activeSpec, activeSnapshots, nodeName, narrativeEntries);
@@ -6028,14 +6272,14 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, narrativeEntries, snapshotIdx]
   );
-  const handleBreadcrumbNavigate = (0, import_react29.useCallback)((level) => {
+  const handleBreadcrumbNavigate = (0, import_react31.useCallback)((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 = (0, import_react29.useCallback)(
+  const handleNodeClick = (0, import_react31.useCallback)(
     (indexOrId) => {
       if (typeof indexOrId === "number") {
         setSnapshotIdx(indexOrId);
@@ -6053,7 +6297,7 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, handleDrillDown]
   );
-  const handleTreeNodeSelect = (0, import_react29.useCallback)(
+  const handleTreeNodeSelect = (0, import_react31.useCallback)(
     (name, isSubflow) => {
       if (isSubflow && spec) {
         setDrillDownStack([]);
@@ -6088,7 +6332,7 @@ function ExplainableShell({
     ] });
   }
   const showTopology = !!effectiveRenderFlowchart && !!activeSpec;
-  const detailsContent = (0, import_react29.useMemo)(() => {
+  const detailsContent = (0, import_react31.useMemo)(() => {
     if (activeTab === "result") {
       return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
     }
@@ -6270,7 +6514,7 @@ function ExplainableShell({
 
 // src/components/TraceViewer/TraceViewer.tsx
 var React = __toESM(require("react"), 1);
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function parseTrace(input) {
   if (input == null) {
@@ -6334,11 +6578,11 @@ function TraceViewer({
   recorderViews,
   renderFlowchart
 }) {
-  const parsed = (0, import_react30.useMemo)(() => parseTrace(trace), [trace]);
+  const parsed = (0, import_react32.useMemo)(() => parseTrace(trace), [trace]);
   React.useEffect(() => {
     if (!parsed.ok && onError) onError(parsed.error);
   }, [parsed, onError]);
-  const snapshots = (0, import_react30.useMemo)(() => {
+  const snapshots = (0, import_react32.useMemo)(() => {
     if (!parsed.ok || !parsed.trace.snapshot) return [];
     try {
       return toVisualizationSnapshots(