footprint-explainable-ui 0.3.2 → 0.5.0

package/dist/flowchart.cjs

@@ -23,7 +23,9 @@ __export(flowchart_exports, {
   FlowchartView: () => FlowchartView,
   StageNode: () => StageNode,
   SubflowBreadcrumb: () => SubflowBreadcrumb,
+  SubflowTree: () => SubflowTree,
   TimeTravelDebugger: () => TimeTravelDebugger,
+  TracedFlowchartView: () => TracedFlowchartView,
   specToReactFlow: () => specToReactFlow,
   useSubflowNavigation: () => useSubflowNavigation
 });
@@ -102,7 +104,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var StageNode = (0, import_react2.memo)(function StageNode2({
   data
 }) {
-  const { label, active, done, error, linked, stepNumbers, dimmed, isSubflow } = data;
+  const { label, active, done, error, linked, stepNumbers, dimmed, isSubflow, description } = data;
   const isOnPath = active || done;
   const bg = active ? theme.primary : done ? theme.success : error ? theme.error : theme.bgSecondary;
   const borderColor = active ? theme.primary : done ? theme.success : error ? theme.error : theme.border;
@@ -191,10 +193,11 @@ var StageNode = (0, import_react2.memo)(function StageNode2({
                 background: bg,
                 border: `2px solid ${borderColor}`,
                 borderRadius: theme.radius,
-                padding: "10px 20px",
+                padding: description ? "8px 16px" : "10px 20px",
                 display: "flex",
+                flexDirection: "column",
                 alignItems: "center",
-                gap: 6,
+                gap: description ? 2 : 0,
                 boxShadow: shadow,
                 transition: "all 0.3s ease",
                 fontFamily: theme.fontSans,
@@ -202,59 +205,77 @@ var StageNode = (0, import_react2.memo)(function StageNode2({
                 justifyContent: "center"
               },
               children: [
-                done && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
-                active && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "span",
-                  {
-                    style: {
-                      width: 8,
-                      height: 8,
-                      borderRadius: "50%",
-                      background: "#fff",
-                      animation: "fp-blink 1s ease-in-out infinite",
-                      flexShrink: 0
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  done && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
+                  active && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "span",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        background: "#fff",
+                        animation: "fp-blink 1s ease-in-out infinite",
+                        flexShrink: 0
+                      }
                     }
-                  }
-                ),
-                error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  ),
+                  error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: textColor,
+                        whiteSpace: "nowrap"
+                      },
+                      children: label
+                    }
+                  ),
+                  isSubflow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: 16,
+                        height: 16,
+                        borderRadius: 3,
+                        border: `1.5px solid ${textColor}`,
+                        position: "relative",
+                        opacity: 0.7,
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: 2,
+                            border: `1px solid ${textColor}`
+                          }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "span",
                   {
                     style: {
-                      fontSize: 13,
-                      fontWeight: 500,
+                      fontSize: 10,
+                      fontWeight: 400,
                       color: textColor,
-                      whiteSpace: "nowrap"
-                    },
-                    children: label
-                  }
-                ),
-                isSubflow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "span",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: 16,
-                      height: 16,
-                      borderRadius: 3,
-                      border: `1.5px solid ${textColor}`,
-                      position: "relative",
                       opacity: 0.7,
-                      flexShrink: 0
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: 160
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "span",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          borderRadius: 2,
-                          border: `1px solid ${textColor}`
-                        }
-                      }
-                    )
+                    children: description
                   }
                 )
               ]
@@ -398,75 +419,9 @@ function FlowchartView({
   );
 }
 
-// src/components/FlowchartView/SubflowBreadcrumb.tsx
-var import_react6 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var SubflowBreadcrumb = (0, import_react6.memo)(function SubflowBreadcrumb2({
-  breadcrumbs,
-  onNavigate
-}) {
-  if (breadcrumbs.length <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-        padding: "6px 12px",
-        background: theme.bgSecondary,
-        borderBottom: `1px solid ${theme.border}`,
-        fontSize: 12,
-        fontFamily: theme.fontSans,
-        flexShrink: 0,
-        overflowX: "auto"
-      },
-      children: breadcrumbs.map((crumb, i) => {
-        const isLast = i === breadcrumbs.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
-          isLast ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "span",
-            {
-              style: {
-                color: theme.primary,
-                fontWeight: 600
-              },
-              children: crumb.label
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              onClick: () => onNavigate(i),
-              style: {
-                background: "none",
-                border: "none",
-                color: theme.textSecondary,
-                cursor: "pointer",
-                padding: "2px 4px",
-                borderRadius: 4,
-                fontSize: 12,
-                fontFamily: "inherit",
-                fontWeight: 500,
-                transition: "color 0.15s"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.color = `${theme.primary}`;
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.color = `${theme.textSecondary}`;
-              },
-              children: crumb.label
-            }
-          )
-        ] }, i);
-      })
-    }
-  );
-});
-
-// src/components/FlowchartView/useSubflowNavigation.ts
-var import_react7 = require("react");
+// src/components/FlowchartView/TracedFlowchartView.tsx
+var import_react9 = require("react");
+var import_react10 = require("@xyflow/react");
 
 // src/components/FlowchartView/specToReactFlow.ts
 var DEFAULT_COLORS = {
@@ -594,6 +549,7 @@ function walk(node, state, x, y) {
       isDecider,
       isFork,
       description: node.description,
+      subflowId: node.subflowId,
       dimmed,
       stepNumbers,
       isSubflow: !!node.isSubflowRoot
@@ -648,14 +604,15 @@ function specToReactFlow(spec, overlay, colors) {
 }
 
 // src/components/FlowchartView/useSubflowNavigation.ts
+var import_react6 = require("react");
 function useSubflowNavigation(rootSpec, overlay, colors) {
-  const [stack, setStack] = (0, import_react7.useState)([]);
+  const [stack, setStack] = (0, import_react6.useState)([]);
   const currentSpec = stack.length > 0 ? stack[stack.length - 1].spec : rootSpec;
-  const { nodes, edges } = (0, import_react7.useMemo)(() => {
+  const { nodes, edges } = (0, import_react6.useMemo)(() => {
     if (!currentSpec) return { nodes: [], edges: [] };
     return specToReactFlow(currentSpec, overlay, colors);
   }, [currentSpec, overlay, colors]);
-  const subflowMap = (0, import_react7.useMemo)(() => {
+  const subflowMap = (0, import_react6.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     if (!currentSpec) return map;
     function collectSubflows(node) {
@@ -669,14 +626,15 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
     collectSubflows(currentSpec);
     return map;
   }, [currentSpec]);
-  const breadcrumbs = (0, import_react7.useMemo)(() => {
+  const breadcrumbs = (0, import_react6.useMemo)(() => {
     const root = {
-      label: rootSpec?.name || "Pipeline",
-      spec: rootSpec
+      label: rootSpec?.name || "Flowchart",
+      spec: rootSpec,
+      description: rootSpec?.description
     };
     return [root, ...stack];
   }, [rootSpec, stack]);
-  const handleNodeClick = (0, import_react7.useCallback)(
+  const handleNodeClick = (0, import_react6.useCallback)(
     (nodeId) => {
       const subflowNode = subflowMap.get(nodeId);
       if (!subflowNode?.subflowStructure) return false;
@@ -684,14 +642,15 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
         ...prev,
         {
           label: subflowNode.subflowName || subflowNode.name,
-          spec: subflowNode.subflowStructure
+          spec: subflowNode.subflowStructure,
+          description: subflowNode.description
         }
       ]);
       return true;
     },
     [subflowMap]
   );
-  const navigateTo = (0, import_react7.useCallback)(
+  const navigateTo = (0, import_react6.useCallback)(
     (level) => {
       if (level === 0) {
         setStack([]);
@@ -708,16 +667,486 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
     handleNodeClick,
     navigateTo,
     isInSubflow: stack.length > 0,
-    currentSubflowNodeName: stack.length > 0 ? stack[0].label : null
+    currentSubflowNodeName: stack.length > 0 ? stack[stack.length - 1].label : null
   };
 }
 
-// src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-var import_react11 = require("react");
+// src/components/FlowchartView/SubflowBreadcrumb.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SubflowBreadcrumb = (0, import_react7.memo)(function SubflowBreadcrumb2({
+  breadcrumbs,
+  onNavigate
+}) {
+  if (breadcrumbs.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "6px 12px",
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
+        fontSize: 12,
+        fontFamily: theme.fontSans,
+        flexShrink: 0,
+        overflowX: "auto"
+      },
+      children: breadcrumbs.map((crumb, i) => {
+        const isLast = i === breadcrumbs.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                style: {
+                  color: theme.primary,
+                  fontWeight: 600
+                },
+                children: crumb.label
+              }
+            ),
+            crumb.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontWeight: 400,
+                  fontSize: 11
+                },
+                children: [
+                  "\u2014 ",
+                  crumb.description
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: () => onNavigate(i),
+              style: {
+                background: "none",
+                border: "none",
+                color: theme.textSecondary,
+                cursor: "pointer",
+                padding: "2px 4px",
+                borderRadius: 4,
+                fontSize: 12,
+                fontFamily: "inherit",
+                fontWeight: 500,
+                transition: "color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.color = `${theme.primary}`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.color = `${theme.textSecondary}`;
+              },
+              children: crumb.label
+            }
+          )
+        ] }, `${crumb.label}-${i}`);
+      })
+    }
+  );
+});
 
-// src/components/MemoryInspector/MemoryInspector.tsx
+// src/components/FlowchartView/SubflowTree.tsx
 var import_react8 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function specToTree(node) {
+  const entries = [];
+  const seen = /* @__PURE__ */ new Set();
+  function walk2(n) {
+    const id = n.name || n.id || "";
+    if (seen.has(id)) return;
+    seen.add(id);
+    const entry = {
+      name: n.name,
+      description: n.description,
+      subflowId: n.subflowId,
+      isSubflow: !!n.isSubflowRoot
+    };
+    if (n.isSubflowRoot && n.subflowStructure) {
+      entry.children = specToTree(n.subflowStructure);
+    }
+    entries.push(entry);
+    if (n.children) {
+      for (const child of n.children) {
+        walk2(child);
+      }
+    }
+    if (n.next) {
+      walk2(n.next);
+    }
+  }
+  walk2(node);
+  return entries;
+}
+var TreeNode = (0, import_react8.memo)(function TreeNode2({
+  entry,
+  depth,
+  activeStage,
+  doneStages,
+  onNodeSelect
+}) {
+  const [expanded, setExpanded] = (0, import_react8.useState)(true);
+  const hasChildren = entry.children && entry.children.length > 0;
+  const isActive = activeStage === entry.name;
+  const isDone = doneStages?.has(entry.name);
+  const handleClick = (0, import_react8.useCallback)(() => {
+    if (hasChildren) {
+      setExpanded((prev) => !prev);
+    }
+    onNodeSelect?.(entry.name, !!entry.isSubflow);
+  }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        onClick: handleClick,
+        "data-fp": "subflow-tree-node",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          border: "none",
+          background: isActive ? `color-mix(in srgb, ${theme.primary} 15%, transparent)` : "transparent",
+          cursor: "pointer",
+          padding: `4px 8px 4px ${8 + depth * 16}px`,
+          fontFamily: theme.fontSans,
+          fontSize: 12,
+          textAlign: "left",
+          borderRadius: 4,
+          transition: "background 0.15s"
+        },
+        onMouseEnter: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = `color-mix(in srgb, ${theme.textMuted} 10%, transparent)`;
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = "transparent";
+          }
+        },
+        children: [
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                color: theme.textMuted,
+                width: 12,
+                textAlign: "center",
+                flexShrink: 0,
+                transition: "transform 0.15s",
+                transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+                display: "inline-block"
+              },
+              children: "\u25B6"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                flexShrink: 0,
+                background: isActive ? theme.primary : isDone ? theme.success : theme.border
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "span",
+              {
+                style: {
+                  color: isActive ? theme.primary : isDone ? theme.textPrimary : theme.textSecondary,
+                  fontWeight: isActive ? 600 : entry.isSubflow ? 500 : 400,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: [
+                  entry.name,
+                  entry.isSubflow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                ]
+              }
+            ),
+            entry.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontSize: 10,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: entry.description
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: entry.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TreeNode2,
+      {
+        entry: child,
+        depth: depth + 1,
+        activeStage,
+        doneStages,
+        onNodeSelect
+      },
+      `${child.name}-${i}`
+    )) })
+  ] });
+});
+var SectionLabel = (0, import_react8.memo)(function SectionLabel2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        padding: "4px 12px 8px",
+        fontSize: 10,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        color: theme.textMuted
+      },
+      children
+    }
+  );
+});
+var SubflowTree = (0, import_react8.memo)(function SubflowTree2({
+  spec,
+  activeStage,
+  doneStages,
+  onNodeSelect,
+  unstyled = false,
+  className,
+  style
+}) {
+  const tree = (0, import_react8.useMemo)(() => specToTree(spec), [spec]);
+  const mainStages = (0, import_react8.useMemo)(() => tree.filter((e) => !e.isSubflow), [tree]);
+  const subflowStages = (0, import_react8.useMemo)(() => tree.filter((e) => e.isSubflow), [tree]);
+  const renderEntries = (entries) => entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    TreeNode,
+    {
+      entry,
+      depth: 0,
+      activeStage,
+      doneStages,
+      onNodeSelect
+    },
+    `${entry.name}-${i}`
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className,
+      "data-fp": "subflow-tree",
+      style: {
+        ...unstyled ? {} : {
+          fontFamily: theme.fontSans,
+          fontSize: 12,
+          background: theme.bgPrimary,
+          borderRight: `1px solid ${theme.border}`,
+          overflowY: "auto",
+          overflowX: "hidden",
+          padding: "8px 0"
+        },
+        ...style
+      },
+      children: [
+        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionLabel, { children: "Flowchart" }),
+        renderEntries(mainStages),
+        subflowStages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          !unstyled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 1, background: theme.border, margin: "8px 12px" } }),
+          !unstyled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionLabel, { children: "Subflows" }),
+          renderEntries(subflowStages)
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/FlowchartView/TracedFlowchartView.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var nodeTypes2 = { stage: StageNode };
+function TracedFlowchartView({
+  spec,
+  snapshots,
+  snapshotIndex = 0,
+  onNodeClick,
+  onSubflowChange,
+  showTree = false,
+  treeWidth = 200,
+  unstyled = false,
+  className,
+  style
+}) {
+  const [treeVisible, setTreeVisible] = (0, import_react9.useState)(showTree);
+  const subflowNav = useSubflowNavigation(spec);
+  const currentSpec = subflowNav.breadcrumbs.length > 0 ? subflowNav.breadcrumbs[subflowNav.breadcrumbs.length - 1].spec : null;
+  const overlay = (0, import_react9.useMemo)(() => {
+    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 { nodes, edges } = (0, import_react9.useMemo)(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay);
+  }, [currentSpec, overlay]);
+  const handleNodeClick = (0, import_react9.useCallback)(
+    (_, node) => {
+      if (subflowNav.handleNodeClick(node.id)) {
+        onSubflowChange?.(true, node.id);
+        return;
+      }
+      if (onNodeClick && snapshots) {
+        const idx = snapshots.findIndex((s) => s.stageLabel === node.id);
+        if (idx >= 0) onNodeClick(idx);
+      } else if (onNodeClick) {
+        onNodeClick(node.id);
+      }
+    },
+    [subflowNav, onNodeClick, onSubflowChange, snapshots]
+  );
+  const handleBreadcrumbNavigate = (0, import_react9.useCallback)(
+    (level) => {
+      subflowNav.navigateTo(level);
+      onSubflowChange?.(level > 0, null);
+    },
+    [subflowNav, onSubflowChange]
+  );
+  const handleTreeNodeSelect = (0, import_react9.useCallback)(
+    (name, isSubflow) => {
+      if (isSubflow) {
+        if (subflowNav.handleNodeClick(name)) {
+          onSubflowChange?.(true, name);
+        }
+      } else if (onNodeClick && snapshots) {
+        const idx = snapshots.findIndex((s) => s.stageLabel === name);
+        if (idx >= 0) onNodeClick(idx);
+      }
+    },
+    [subflowNav, onNodeClick, onSubflowChange, snapshots]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className,
+      style: { width: "100%", height: "100%", display: "flex", flexDirection: "row", ...style },
+      "data-fp": "traced-flowchart",
+      children: [
+        showTree && treeVisible && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          SubflowTree,
+          {
+            spec,
+            activeStage: overlay?.activeStage,
+            doneStages: overlay?.doneStages,
+            onNodeSelect: handleTreeNodeSelect,
+            unstyled,
+            style: { width: treeWidth, flexShrink: 0, height: "100%" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%" }, children: [
+          (subflowNav.isInSubflow || showTree && !treeVisible) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [
+            showTree && !treeVisible && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                onClick: () => setTreeVisible(true),
+                "data-fp": "tree-toggle",
+                style: unstyled ? {} : {
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: "6px 8px",
+                  fontSize: 10,
+                  flexShrink: 0
+                },
+                children: "\u25B6"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              SubflowBreadcrumb,
+              {
+                breadcrumbs: subflowNav.breadcrumbs,
+                onNavigate: handleBreadcrumbNavigate
+              }
+            ) })
+          ] }),
+          showTree && treeVisible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                onClick: () => setTreeVisible(false),
+                "data-fp": "tree-toggle",
+                style: unstyled ? {} : {
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: "6px 8px",
+                  fontSize: 10,
+                  flexShrink: 0
+                },
+                children: "\u25C0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: subflowNav.isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              SubflowBreadcrumb,
+              {
+                breadcrumbs: subflowNav.breadcrumbs,
+                onNavigate: handleBreadcrumbNavigate
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_react10.ReactFlow,
+            {
+              nodes,
+              edges,
+              onNodeClick: handleNodeClick,
+              nodeTypes: nodeTypes2,
+              fitView: true,
+              panOnDrag: false,
+              zoomOnScroll: false,
+              zoomOnPinch: false,
+              zoomOnDoubleClick: false,
+              preventScrolling: false,
+              nodesDraggable: false,
+              nodesConnectable: false,
+              elementsSelectable: !!onNodeClick,
+              children: !unstyled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Background, { variant: import_react10.BackgroundVariant.Dots, gap: 16, size: 1 })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
+var import_react14 = require("react");
+
+// src/components/MemoryInspector/MemoryInspector.tsx
+var import_react11 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MemoryInspector({
   data,
   snapshots,
@@ -729,7 +1158,7 @@ function MemoryInspector({
   className,
   style
 }) {
-  const { memory, newKeys } = (0, import_react8.useMemo)(() => {
+  const { memory, newKeys } = (0, import_react11.useMemo)(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
     }
@@ -759,12 +1188,12 @@ function MemoryInspector({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style, "data-fp": "memory-inspector", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-fp": "memory-label", children: "Memory State" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className,
@@ -775,7 +1204,7 @@ function MemoryInspector({
       },
       "data-fp": "memory-inspector",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             style: {
@@ -788,7 +1217,7 @@ function MemoryInspector({
             children: "Memory State"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -802,8 +1231,8 @@ function MemoryInspector({
               lineHeight: 1.8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: "{" }),
-              entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   style: {
@@ -817,7 +1246,7 @@ function MemoryInspector({
               entries.map(([key, value], i) => {
                 const isNew = newKeys.has(key);
                 const isLast = i === entries.length - 1;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "div",
                   {
                     style: {
@@ -829,14 +1258,14 @@ function MemoryInspector({
                       paddingRight: 4
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: theme.primary }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { color: theme.primary }, children: [
                         '"',
                         key,
                         '"'
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: ": " }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.success }, children: formatValue(value) }),
-                      showTypes && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                         "span",
                         {
                           style: {
@@ -852,13 +1281,13 @@ function MemoryInspector({
                           ]
                         }
                       ),
-                      !isLast && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: "," })
+                      !isLast && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.textMuted }, children: "," })
                     ]
                   },
                   key
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: "}" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: theme.textMuted }, children: "}" })
             ]
           }
         )
@@ -873,8 +1302,8 @@ function formatValue(value) {
 }
 
 // src/components/NarrativeLog/NarrativeLog.tsx
-var import_react9 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function NarrativeLog({
   snapshots,
   selectedIndex,
@@ -884,7 +1313,7 @@ function NarrativeLog({
   className,
   style
 }) {
-  const entries = (0, import_react9.useMemo)(() => {
+  const entries = (0, import_react12.useMemo)(() => {
     if (narrative) {
       return [{ label: "Output", text: narrative, isCurrent: true }];
     }
@@ -898,19 +1327,19 @@ function NarrativeLog({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: entry.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: entry.text })
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: entry.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: entry.text })
     ] }, i)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "narrative-log",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             style: {
@@ -923,7 +1352,7 @@ function NarrativeLog({
             children: "Execution Log"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             style: {
@@ -933,7 +1362,7 @@ function NarrativeLog({
               borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   style: {
@@ -945,7 +1374,7 @@ function NarrativeLog({
                     paddingTop: 5
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "div",
                       {
                         style: {
@@ -957,7 +1386,7 @@ function NarrativeLog({
                         }
                       }
                     ),
-                    i < entries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    i < entries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "div",
                       {
                         style: {
@@ -971,8 +1400,8 @@ function NarrativeLog({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "span",
                   {
                     style: {
@@ -983,7 +1412,7 @@ function NarrativeLog({
                     children: entry.label
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     style: {
@@ -1006,8 +1435,8 @@ function NarrativeLog({
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-var import_react10 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function GanttTimeline({
   snapshots,
   selectedIndex = 0,
@@ -1015,9 +1444,13 @@ function GanttTimeline({
   size = "default",
   unstyled = false,
   className,
-  style
+  style,
+  maxVisibleRows = 5
 }) {
-  const totalWallTime = (0, import_react10.useMemo)(
+  const [expanded, setExpanded] = (0, import_react13.useState)(false);
+  const activeRowRef = (0, import_react13.useRef)(null);
+  const scrollContainerRef = (0, import_react13.useRef)(null);
+  const totalWallTime = (0, import_react13.useMemo)(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
   );
@@ -1025,8 +1458,19 @@ function GanttTimeline({
   const pad = padding[size];
   const labelWidth = size === "compact" ? 50 : size === "detailed" ? 100 : 80;
   const msWidth = size === "compact" ? 28 : 36;
+  const rowHeight = size === "compact" ? 18 : 22;
+  const collapsible = maxVisibleRows > 0 && snapshots.length > maxVisibleRows;
+  const showAll = expanded || !collapsible;
+  (0, import_react13.useEffect)(() => {
+    if (!showAll && activeRowRef.current && scrollContainerRef.current) {
+      activeRowRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [selectedIndex, showAll]);
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         "data-fp": "gantt-bar",
@@ -1034,8 +1478,8 @@ function GanttTimeline({
         "data-visible": idx <= selectedIndex,
         onClick: () => onSelect?.(idx),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-fp": "gantt-duration", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { "data-fp": "gantt-duration", children: [
             snap.durationMs,
             "ms"
           ] })
@@ -1044,43 +1488,79 @@ function GanttTimeline({
       snap.stageName
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "gantt-timeline",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "span",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
           {
             style: {
-              fontSize: fs.label,
-              fontWeight: 600,
-              color: theme.textMuted,
-              textTransform: "uppercase",
-              letterSpacing: "0.08em"
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
             },
-            children: size === "compact" ? "Timeline" : "Execution Timeline"
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: fs.label,
+                    fontWeight: 600,
+                    color: theme.textMuted,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em"
+                  },
+                  children: size === "compact" ? "Timeline" : "Execution Timeline"
+                }
+              ),
+              collapsible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "button",
+                {
+                  onClick: () => setExpanded((e) => !e),
+                  style: {
+                    background: "none",
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 4,
+                    color: theme.textSecondary,
+                    fontSize: fs.small,
+                    padding: "2px 8px",
+                    cursor: "pointer",
+                    fontFamily: theme.fontSans
+                  },
+                  children: expanded ? "Collapse" : `${snapshots.length - maxVisibleRows} more...`
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
+            ref: scrollContainerRef,
             style: {
               marginTop: 8,
               display: "flex",
               flexDirection: "column",
-              gap: 4
+              gap: 4,
+              ...showAll ? {} : {
+                maxHeight: maxVisibleRows * (rowHeight + 4),
+                overflowY: "auto",
+                scrollbarWidth: "thin"
+              }
             },
             children: snapshots.map((snap, idx) => {
               const leftPct = snap.startMs / totalWallTime * 100;
               const widthPct = Math.max(snap.durationMs / totalWallTime * 100, 1);
               const isSelected = idx === selectedIndex;
               const isVisible = idx <= selectedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
+                  ref: isSelected ? activeRowRef : void 0,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -1088,10 +1568,12 @@ function GanttTimeline({
                     gap: size === "compact" ? 4 : 8,
                     cursor: onSelect ? "pointer" : "default",
                     opacity: isVisible ? 1 : 0.3,
-                    transition: "opacity 0.3s ease"
+                    transition: "opacity 0.3s ease",
+                    height: rowHeight,
+                    flexShrink: 0
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -1108,7 +1590,7 @@ function GanttTimeline({
                         children: snap.stageLabel
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "div",
                       {
                         style: {
@@ -1118,7 +1600,7 @@ function GanttTimeline({
                           background: theme.bgTertiary,
                           borderRadius: 3
                         },
-                        children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                           "div",
                           {
                             style: {
@@ -1135,7 +1617,7 @@ function GanttTimeline({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "span",
                       {
                         style: {
@@ -1158,7 +1640,7 @@ function GanttTimeline({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -1172,12 +1654,12 @@ function GanttTimeline({
               fontFamily: theme.fontMono
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "0ms" }),
-              size !== "compact" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
                 (totalWallTime / 2).toFixed(1),
                 "ms"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
                 totalWallTime.toFixed(1),
                 "ms"
               ] })
@@ -1190,7 +1672,7 @@ function GanttTimeline({
 }
 
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TimeTravelDebugger({
   snapshots,
   nodes,
@@ -1203,11 +1685,11 @@ function TimeTravelDebugger({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react11.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react14.useState)(0);
   const fs = fontSize[size];
   const pad = padding[size];
   if (snapshots.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className,
@@ -1223,9 +1705,9 @@ function TimeTravelDebugger({
   }
   const isHorizontal = layout === "horizontal";
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, style, "data-fp": "time-travel-debugger", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, style, "data-fp": "time-travel-debugger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "input",
         {
           type: "range",
@@ -1235,7 +1717,7 @@ function TimeTravelDebugger({
           onChange: (e) => setSelectedIndex(parseInt(e.target.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         FlowchartView,
         {
           nodes,
@@ -1246,7 +1728,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         MemoryInspector,
         {
           snapshots,
@@ -1254,7 +1736,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         NarrativeLog,
         {
           snapshots,
@@ -1262,7 +1744,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      showGantt && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      showGantt && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         GanttTimeline,
         {
           snapshots,
@@ -1273,7 +1755,7 @@ function TimeTravelDebugger({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className,
@@ -1288,7 +1770,7 @@ function TimeTravelDebugger({
       },
       "data-fp": "time-travel-debugger",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -1298,7 +1780,7 @@ function TimeTravelDebugger({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "div",
                 {
                   style: {
@@ -1308,7 +1790,7 @@ function TimeTravelDebugger({
                     marginBottom: 8
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
                       {
                         style: {
@@ -1319,7 +1801,7 @@ function TimeTravelDebugger({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
                       {
                         style: {
@@ -1332,8 +1814,8 @@ function TimeTravelDebugger({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   ScrubButton,
                   {
                     label: "\\u25C0",
@@ -1341,7 +1823,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -1357,7 +1839,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   ScrubButton,
                   {
                     label: "\\u25B6",
@@ -1365,7 +1847,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "span",
                   {
                     style: {
@@ -1385,7 +1867,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -1395,7 +1877,7 @@ function TimeTravelDebugger({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   style: {
@@ -1404,7 +1886,7 @@ function TimeTravelDebugger({
                     borderRight: isHorizontal ? `1px solid ${theme.border}` : "none",
                     borderBottom: !isHorizontal ? `1px solid ${theme.border}` : "none"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     FlowchartView,
                     {
                       nodes,
@@ -1417,8 +1899,8 @@ function TimeTravelDebugger({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   MemoryInspector,
                   {
                     snapshots,
@@ -1426,7 +1908,7 @@ function TimeTravelDebugger({
                     size
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
                     style: {
@@ -1436,7 +1918,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   NarrativeLog,
                   {
                     snapshots,
@@ -1448,7 +1930,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        showGantt && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showGantt && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
@@ -1456,7 +1938,7 @@ function TimeTravelDebugger({
               background: theme.bgSecondary,
               flexShrink: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               GanttTimeline,
               {
                 snapshots,
@@ -1476,7 +1958,7 @@ function ScrubButton({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       onClick,
@@ -1505,7 +1987,9 @@ function ScrubButton({
   FlowchartView,
   StageNode,
   SubflowBreadcrumb,
+  SubflowTree,
   TimeTravelDebugger,
+  TracedFlowchartView,
   specToReactFlow,
   useSubflowNavigation
 });