footprint-explainable-ui 0.3.2 → 0.5.0

package/dist/flowchart.js

@@ -77,7 +77,7 @@ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var StageNode = 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;
@@ -166,10 +166,11 @@ var StageNode = 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,
@@ -177,59 +178,77 @@ var StageNode = memo(function StageNode2({
                 justifyContent: "center"
               },
               children: [
-                done && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
-                active && /* @__PURE__ */ jsx2(
-                  "span",
-                  {
-                    style: {
-                      width: 8,
-                      height: 8,
-                      borderRadius: "50%",
-                      background: "#fff",
-                      animation: "fp-blink 1s ease-in-out infinite",
-                      flexShrink: 0
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  done && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
+                  active && /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        background: "#fff",
+                        animation: "fp-blink 1s ease-in-out infinite",
+                        flexShrink: 0
+                      }
                     }
-                  }
-                ),
-                error && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
-                /* @__PURE__ */ jsx2(
+                  ),
+                  error && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: textColor,
+                        whiteSpace: "nowrap"
+                      },
+                      children: label
+                    }
+                  ),
+                  isSubflow && /* @__PURE__ */ jsx2(
+                    "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__ */ jsx2(
+                        "span",
+                        {
+                          style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: 2,
+                            border: `1px solid ${textColor}`
+                          }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                description && /* @__PURE__ */ jsx2(
                   "span",
                   {
                     style: {
-                      fontSize: 13,
-                      fontWeight: 500,
+                      fontSize: 10,
+                      fontWeight: 400,
                       color: textColor,
-                      whiteSpace: "nowrap"
-                    },
-                    children: label
-                  }
-                ),
-                isSubflow && /* @__PURE__ */ jsx2(
-                  "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__ */ jsx2(
-                      "span",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          borderRadius: 2,
-                          border: `1px solid ${textColor}`
-                        }
-                      }
-                    )
+                    children: description
                   }
                 )
               ]
@@ -373,75 +392,13 @@ function FlowchartView({
   );
 }
 
-// src/components/FlowchartView/SubflowBreadcrumb.tsx
-import { memo as memo2 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
-  breadcrumbs,
-  onNavigate
-}) {
-  if (breadcrumbs.length <= 1) return null;
-  return /* @__PURE__ */ jsx4(
-    "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__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          i > 0 && /* @__PURE__ */ jsx4("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
-          isLast ? /* @__PURE__ */ jsx4(
-            "span",
-            {
-              style: {
-                color: theme.primary,
-                fontWeight: 600
-              },
-              children: crumb.label
-            }
-          ) : /* @__PURE__ */ jsx4(
-            "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
-import { useState, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+// src/components/FlowchartView/TracedFlowchartView.tsx
+import { useState as useState3, useMemo as useMemo4, useCallback as useCallback4 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  BackgroundVariant as BackgroundVariant2
+} from "@xyflow/react";
 
 // src/components/FlowchartView/specToReactFlow.ts
 var DEFAULT_COLORS = {
@@ -569,6 +526,7 @@ function walk(node, state, x, y) {
       isDecider,
       isFork,
       description: node.description,
+      subflowId: node.subflowId,
       dimmed,
       stepNumbers,
       isSubflow: !!node.isSubflowRoot
@@ -623,6 +581,7 @@ function specToReactFlow(spec, overlay, colors) {
 }
 
 // src/components/FlowchartView/useSubflowNavigation.ts
+import { useState, useCallback as useCallback2, useMemo as useMemo2 } from "react";
 function useSubflowNavigation(rootSpec, overlay, colors) {
   const [stack, setStack] = useState([]);
   const currentSpec = stack.length > 0 ? stack[stack.length - 1].spec : rootSpec;
@@ -646,8 +605,9 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
   }, [currentSpec]);
   const breadcrumbs = useMemo2(() => {
     const root = {
-      label: rootSpec?.name || "Pipeline",
-      spec: rootSpec
+      label: rootSpec?.name || "Flowchart",
+      spec: rootSpec,
+      description: rootSpec?.description
     };
     return [root, ...stack];
   }, [rootSpec, stack]);
@@ -659,7 +619,8 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
         ...prev,
         {
           label: subflowNode.subflowName || subflowNode.name,
-          spec: subflowNode.subflowStructure
+          spec: subflowNode.subflowStructure,
+          description: subflowNode.description
         }
       ]);
       return true;
@@ -683,16 +644,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/FlowchartView/SubflowBreadcrumb.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
+  breadcrumbs,
+  onNavigate
+}) {
+  if (breadcrumbs.length <= 1) return null;
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ jsx4("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                style: {
+                  color: theme.primary,
+                  fontWeight: 600
+                },
+                children: crumb.label
+              }
+            ),
+            crumb.description && /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontWeight: 400,
+                  fontSize: 11
+                },
+                children: [
+                  "\u2014 ",
+                  crumb.description
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx4(
+            "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/FlowchartView/SubflowTree.tsx
+import { memo as memo3, useState as useState2, useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "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 = memo3(function TreeNode2({
+  entry,
+  depth,
+  activeStage,
+  doneStages,
+  onNodeSelect
+}) {
+  const [expanded, setExpanded] = useState2(true);
+  const hasChildren = entry.children && entry.children.length > 0;
+  const isActive = activeStage === entry.name;
+  const isDone = doneStages?.has(entry.name);
+  const handleClick = useCallback3(() => {
+    if (hasChildren) {
+      setExpanded((prev) => !prev);
+    }
+    onNodeSelect?.(entry.name, !!entry.isSubflow);
+  }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(
+      "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__ */ jsx5(
+            "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__ */ jsx5("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                flexShrink: 0,
+                background: isActive ? theme.primary : isDone ? theme.success : theme.border
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs3("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs3(
+              "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__ */ jsx5("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                ]
+              }
+            ),
+            entry.description && /* @__PURE__ */ jsx5(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontSize: 10,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: entry.description
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    hasChildren && expanded && /* @__PURE__ */ jsx5("div", { children: entry.children.map((child, i) => /* @__PURE__ */ jsx5(
+      TreeNode2,
+      {
+        entry: child,
+        depth: depth + 1,
+        activeStage,
+        doneStages,
+        onNodeSelect
+      },
+      `${child.name}-${i}`
+    )) })
+  ] });
+});
+var SectionLabel = memo3(function SectionLabel2({ children }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        padding: "4px 12px 8px",
+        fontSize: 10,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        color: theme.textMuted
+      },
+      children
+    }
+  );
+});
+var SubflowTree = memo3(function SubflowTree2({
+  spec,
+  activeStage,
+  doneStages,
+  onNodeSelect,
+  unstyled = false,
+  className,
+  style
+}) {
+  const tree = useMemo3(() => specToTree(spec), [spec]);
+  const mainStages = useMemo3(() => tree.filter((e) => !e.isSubflow), [tree]);
+  const subflowStages = useMemo3(() => tree.filter((e) => e.isSubflow), [tree]);
+  const renderEntries = (entries) => entries.map((entry, i) => /* @__PURE__ */ jsx5(
+    TreeNode,
+    {
+      entry,
+      depth: 0,
+      activeStage,
+      doneStages,
+      onNodeSelect
+    },
+    `${entry.name}-${i}`
+  ));
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx5(SectionLabel, { children: "Flowchart" }),
+        renderEntries(mainStages),
+        subflowStages.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          !unstyled && /* @__PURE__ */ jsx5("div", { style: { height: 1, background: theme.border, margin: "8px 12px" } }),
+          !unstyled && /* @__PURE__ */ jsx5(SectionLabel, { children: "Subflows" }),
+          renderEntries(subflowStages)
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/FlowchartView/TracedFlowchartView.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "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] = useState3(showTree);
+  const subflowNav = useSubflowNavigation(spec);
+  const currentSpec = subflowNav.breadcrumbs.length > 0 ? subflowNav.breadcrumbs[subflowNav.breadcrumbs.length - 1].spec : null;
+  const overlay = useMemo4(() => {
+    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 } = useMemo4(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay);
+  }, [currentSpec, overlay]);
+  const handleNodeClick = useCallback4(
+    (_, 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 = useCallback4(
+    (level) => {
+      subflowNav.navigateTo(level);
+      onSubflowChange?.(level > 0, null);
+    },
+    [subflowNav, onSubflowChange]
+  );
+  const handleTreeNodeSelect = useCallback4(
+    (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__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: { width: "100%", height: "100%", display: "flex", flexDirection: "row", ...style },
+      "data-fp": "traced-flowchart",
+      children: [
+        showTree && treeVisible && /* @__PURE__ */ jsx6(
+          SubflowTree,
+          {
+            spec,
+            activeStage: overlay?.activeStage,
+            doneStages: overlay?.doneStages,
+            onNodeSelect: handleTreeNodeSelect,
+            unstyled,
+            style: { width: treeWidth, flexShrink: 0, height: "100%" }
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%" }, children: [
+          (subflowNav.isInSubflow || showTree && !treeVisible) && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [
+            showTree && !treeVisible && /* @__PURE__ */ jsx6(
+              "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__ */ jsx6("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx6(
+              SubflowBreadcrumb,
+              {
+                breadcrumbs: subflowNav.breadcrumbs,
+                onNavigate: handleBreadcrumbNavigate
+              }
+            ) })
+          ] }),
+          showTree && treeVisible && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx6(
+              "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__ */ jsx6("div", { style: { flex: 1 }, children: subflowNav.isInSubflow && /* @__PURE__ */ jsx6(
+              SubflowBreadcrumb,
+              {
+                breadcrumbs: subflowNav.breadcrumbs,
+                onNavigate: handleBreadcrumbNavigate
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx6("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx6(
+            ReactFlow2,
+            {
+              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__ */ jsx6(Background2, { variant: BackgroundVariant2.Dots, gap: 16, size: 1 })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-import { useState as useState2 } from "react";
+import { useState as useState5 } from "react";
 
 // src/components/MemoryInspector/MemoryInspector.tsx
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function MemoryInspector({
   data,
   snapshots,
@@ -704,7 +1135,7 @@ function MemoryInspector({
   className,
   style
 }) {
-  const { memory, newKeys } = useMemo3(() => {
+  const { memory, newKeys } = useMemo5(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
     }
@@ -734,12 +1165,12 @@ function MemoryInspector({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ jsxs3("div", { className, style, "data-fp": "memory-inspector", children: [
-      /* @__PURE__ */ jsx5("div", { "data-fp": "memory-label", children: "Memory State" }),
-      /* @__PURE__ */ jsx5("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+    return /* @__PURE__ */ jsxs5("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ jsx7("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ jsx7("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
     ] });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className,
@@ -750,7 +1181,7 @@ function MemoryInspector({
       },
       "data-fp": "memory-inspector",
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             style: {
@@ -763,7 +1194,7 @@ function MemoryInspector({
             children: "Memory State"
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             style: {
@@ -777,8 +1208,8 @@ function MemoryInspector({
               lineHeight: 1.8
             },
             children: [
-              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "{" }),
-              entries.length === 0 && /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ jsx7(
                 "div",
                 {
                   style: {
@@ -792,7 +1223,7 @@ function MemoryInspector({
               entries.map(([key, value], i) => {
                 const isNew = newKeys.has(key);
                 const isLast = i === entries.length - 1;
-                return /* @__PURE__ */ jsxs3(
+                return /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     style: {
@@ -804,14 +1235,14 @@ function MemoryInspector({
                       paddingRight: 4
                     },
                     children: [
-                      /* @__PURE__ */ jsxs3("span", { style: { color: theme.primary }, children: [
+                      /* @__PURE__ */ jsxs5("span", { style: { color: theme.primary }, children: [
                         '"',
                         key,
                         '"'
                       ] }),
-                      /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: ": " }),
-                      /* @__PURE__ */ jsx5("span", { style: { color: theme.success }, children: formatValue(value) }),
-                      showTypes && /* @__PURE__ */ jsxs3(
+                      /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ jsx7("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ jsxs5(
                         "span",
                         {
                           style: {
@@ -827,13 +1258,13 @@ function MemoryInspector({
                           ]
                         }
                       ),
-                      !isLast && /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "," })
+                      !isLast && /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted }, children: "," })
                     ]
                   },
                   key
                 );
               }),
-              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "}" })
+              /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted }, children: "}" })
             ]
           }
         )
@@ -848,8 +1279,8 @@ function formatValue(value) {
 }
 
 // src/components/NarrativeLog/NarrativeLog.tsx
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function NarrativeLog({
   snapshots,
   selectedIndex,
@@ -859,7 +1290,7 @@ function NarrativeLog({
   className,
   style
 }) {
-  const entries = useMemo4(() => {
+  const entries = useMemo6(() => {
     if (narrative) {
       return [{ label: "Output", text: narrative, isCurrent: true }];
     }
@@ -873,19 +1304,19 @@ function NarrativeLog({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ jsx6("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ jsxs4("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
-      /* @__PURE__ */ jsx6("strong", { children: entry.label }),
-      /* @__PURE__ */ jsx6("p", { children: entry.text })
+    return /* @__PURE__ */ jsx8("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ jsxs6("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ jsx8("strong", { children: entry.label }),
+      /* @__PURE__ */ jsx8("p", { children: entry.text })
     ] }, i)) });
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "narrative-log",
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx8(
           "span",
           {
             style: {
@@ -898,7 +1329,7 @@ function NarrativeLog({
             children: "Execution Log"
           }
         ),
-        /* @__PURE__ */ jsx6("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx8("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs6(
           "div",
           {
             style: {
@@ -908,7 +1339,7 @@ function NarrativeLog({
               borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
             },
             children: [
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs6(
                 "div",
                 {
                   style: {
@@ -920,7 +1351,7 @@ function NarrativeLog({
                     paddingTop: 5
                   },
                   children: [
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx8(
                       "div",
                       {
                         style: {
@@ -932,7 +1363,7 @@ function NarrativeLog({
                         }
                       }
                     ),
-                    i < entries.length - 1 && /* @__PURE__ */ jsx6(
+                    i < entries.length - 1 && /* @__PURE__ */ jsx8(
                       "div",
                       {
                         style: {
@@ -946,8 +1377,8 @@ function NarrativeLog({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx8(
                   "span",
                   {
                     style: {
@@ -958,7 +1389,7 @@ function NarrativeLog({
                     children: entry.label
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx8(
                   "div",
                   {
                     style: {
@@ -981,8 +1412,8 @@ function NarrativeLog({
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-import { useMemo as useMemo5 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState4, useMemo as useMemo7, useRef, useEffect } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function GanttTimeline({
   snapshots,
   selectedIndex = 0,
@@ -990,9 +1421,13 @@ function GanttTimeline({
   size = "default",
   unstyled = false,
   className,
-  style
+  style,
+  maxVisibleRows = 5
 }) {
-  const totalWallTime = useMemo5(
+  const [expanded, setExpanded] = useState4(false);
+  const activeRowRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const totalWallTime = useMemo7(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
   );
@@ -1000,8 +1435,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;
+  useEffect(() => {
+    if (!showAll && activeRowRef.current && scrollContainerRef.current) {
+      activeRowRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [selectedIndex, showAll]);
   if (unstyled) {
-    return /* @__PURE__ */ jsx7("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx9("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs7(
       "div",
       {
         "data-fp": "gantt-bar",
@@ -1009,8 +1455,8 @@ function GanttTimeline({
         "data-visible": idx <= selectedIndex,
         onClick: () => onSelect?.(idx),
         children: [
-          /* @__PURE__ */ jsx7("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
-          /* @__PURE__ */ jsxs5("span", { "data-fp": "gantt-duration", children: [
+          /* @__PURE__ */ jsx9("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ jsxs7("span", { "data-fp": "gantt-duration", children: [
             snap.durationMs,
             "ms"
           ] })
@@ -1019,43 +1465,79 @@ function GanttTimeline({
       snap.stageName
     )) });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "gantt-timeline",
       children: [
-        /* @__PURE__ */ jsx7(
-          "span",
+        /* @__PURE__ */ jsxs7(
+          "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__ */ jsx9(
+                "span",
+                {
+                  style: {
+                    fontSize: fs.label,
+                    fontWeight: 600,
+                    color: theme.textMuted,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em"
+                  },
+                  children: size === "compact" ? "Timeline" : "Execution Timeline"
+                }
+              ),
+              collapsible && /* @__PURE__ */ jsx9(
+                "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__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "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__ */ jsxs5(
+              return /* @__PURE__ */ jsxs7(
                 "div",
                 {
+                  ref: isSelected ? activeRowRef : void 0,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -1063,10 +1545,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__ */ jsx7(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         style: {
@@ -1083,7 +1567,7 @@ function GanttTimeline({
                         children: snap.stageLabel
                       }
                     ),
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx9(
                       "div",
                       {
                         style: {
@@ -1093,7 +1577,7 @@ function GanttTimeline({
                           background: theme.bgTertiary,
                           borderRadius: 3
                         },
-                        children: isVisible && /* @__PURE__ */ jsx7(
+                        children: isVisible && /* @__PURE__ */ jsx9(
                           "div",
                           {
                             style: {
@@ -1110,7 +1594,7 @@ function GanttTimeline({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs5(
+                    /* @__PURE__ */ jsxs7(
                       "span",
                       {
                         style: {
@@ -1133,7 +1617,7 @@ function GanttTimeline({
             })
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1147,12 +1631,12 @@ function GanttTimeline({
               fontFamily: theme.fontMono
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { children: "0ms" }),
-              size !== "compact" && /* @__PURE__ */ jsxs5("span", { children: [
+              /* @__PURE__ */ jsx9("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ jsxs7("span", { children: [
                 (totalWallTime / 2).toFixed(1),
                 "ms"
               ] }),
-              /* @__PURE__ */ jsxs5("span", { children: [
+              /* @__PURE__ */ jsxs7("span", { children: [
                 totalWallTime.toFixed(1),
                 "ms"
               ] })
@@ -1165,7 +1649,7 @@ function GanttTimeline({
 }
 
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function TimeTravelDebugger({
   snapshots,
   nodes,
@@ -1178,11 +1662,11 @@ function TimeTravelDebugger({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const [selectedIndex, setSelectedIndex] = useState5(0);
   const fs = fontSize[size];
   const pad = padding[size];
   if (snapshots.length === 0) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx10(
       "div",
       {
         className,
@@ -1198,9 +1682,9 @@ function TimeTravelDebugger({
   }
   const isHorizontal = layout === "horizontal";
   if (unstyled) {
-    return /* @__PURE__ */ jsxs6("div", { className, style, "data-fp": "time-travel-debugger", children: [
-      /* @__PURE__ */ jsx8("h3", { children: title }),
-      /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs8("div", { className, style, "data-fp": "time-travel-debugger", children: [
+      /* @__PURE__ */ jsx10("h3", { children: title }),
+      /* @__PURE__ */ jsx10(
         "input",
         {
           type: "range",
@@ -1210,7 +1694,7 @@ function TimeTravelDebugger({
           onChange: (e) => setSelectedIndex(parseInt(e.target.value))
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         FlowchartView,
         {
           nodes,
@@ -1221,7 +1705,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         MemoryInspector,
         {
           snapshots,
@@ -1229,7 +1713,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         NarrativeLog,
         {
           snapshots,
@@ -1237,7 +1721,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      showGantt && /* @__PURE__ */ jsx8(
+      showGantt && /* @__PURE__ */ jsx10(
         GanttTimeline,
         {
           snapshots,
@@ -1248,7 +1732,7 @@ function TimeTravelDebugger({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className,
@@ -1263,7 +1747,7 @@ function TimeTravelDebugger({
       },
       "data-fp": "time-travel-debugger",
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -1273,7 +1757,7 @@ function TimeTravelDebugger({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   style: {
@@ -1283,7 +1767,7 @@ function TimeTravelDebugger({
                     marginBottom: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "span",
                       {
                         style: {
@@ -1294,7 +1778,7 @@ function TimeTravelDebugger({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "span",
                       {
                         style: {
@@ -1307,8 +1791,8 @@ function TimeTravelDebugger({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx10(
                   ScrubButton,
                   {
                     label: "\\u25C0",
@@ -1316,7 +1800,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   "input",
                   {
                     type: "range",
@@ -1332,7 +1816,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   ScrubButton,
                   {
                     label: "\\u25B6",
@@ -1340,7 +1824,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
                   }
                 ),
-                /* @__PURE__ */ jsxs6(
+                /* @__PURE__ */ jsxs8(
                   "span",
                   {
                     style: {
@@ -1360,7 +1844,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -1370,7 +1854,7 @@ function TimeTravelDebugger({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   style: {
@@ -1379,7 +1863,7 @@ function TimeTravelDebugger({
                     borderRight: isHorizontal ? `1px solid ${theme.border}` : "none",
                     borderBottom: !isHorizontal ? `1px solid ${theme.border}` : "none"
                   },
-                  children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx10(
                     FlowchartView,
                     {
                       nodes,
@@ -1392,8 +1876,8 @@ function TimeTravelDebugger({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { style: { flex: 1, overflow: "auto" }, children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs8("div", { style: { flex: 1, overflow: "auto" }, children: [
+                /* @__PURE__ */ jsx10(
                   MemoryInspector,
                   {
                     snapshots,
@@ -1401,7 +1885,7 @@ function TimeTravelDebugger({
                     size
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   "div",
                   {
                     style: {
@@ -1411,7 +1895,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   NarrativeLog,
                   {
                     snapshots,
@@ -1423,7 +1907,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        showGantt && /* @__PURE__ */ jsx8(
+        showGantt && /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1431,7 +1915,7 @@ function TimeTravelDebugger({
               background: theme.bgSecondary,
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx10(
               GanttTimeline,
               {
                 snapshots,
@@ -1451,7 +1935,7 @@ function ScrubButton({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       onClick,
@@ -1479,7 +1963,9 @@ export {
   FlowchartView,
   StageNode,
   SubflowBreadcrumb,
+  SubflowTree,
   TimeTravelDebugger,
+  TracedFlowchartView,
   specToReactFlow,
   useSubflowNavigation
 };