footprint-explainable-ui 0.3.2 → 0.4.0

package/dist/flowchart.js

@@ -373,75 +373,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 { useMemo as useMemo3, useCallback as useCallback3 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  BackgroundVariant as BackgroundVariant2
+} from "@xyflow/react";
 
 // src/components/FlowchartView/specToReactFlow.ts
 var DEFAULT_COLORS = {
@@ -623,6 +561,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;
@@ -687,12 +626,169 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
   };
 }
 
+// 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/TracedFlowchartView.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var nodeTypes2 = { stage: StageNode };
+function TracedFlowchartView({
+  spec,
+  snapshots,
+  snapshotIndex = 0,
+  onNodeClick,
+  onSubflowChange,
+  unstyled = false,
+  className,
+  style
+}) {
+  const subflowNav = useSubflowNavigation(spec);
+  const currentSpec = subflowNav.breadcrumbs.length > 0 ? subflowNav.breadcrumbs[subflowNav.breadcrumbs.length - 1].spec : null;
+  const overlay = useMemo3(() => {
+    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 } = useMemo3(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay);
+  }, [currentSpec, overlay]);
+  const handleNodeClick = useCallback3(
+    (_, 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 = useCallback3(
+    (level) => {
+      subflowNav.navigateTo(level);
+      onSubflowChange?.(level > 0, null);
+    },
+    [subflowNav, onSubflowChange]
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", ...style },
+      "data-fp": "traced-flowchart",
+      children: [
+        subflowNav.isInSubflow && /* @__PURE__ */ jsx5(
+          SubflowBreadcrumb,
+          {
+            breadcrumbs: subflowNav.breadcrumbs,
+            onNavigate: handleBreadcrumbNavigate
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx5(
+          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__ */ jsx5(Background2, { variant: BackgroundVariant2.Dots, gap: 16, size: 1 })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } 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 useMemo4 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function MemoryInspector({
   data,
   snapshots,
@@ -704,7 +800,7 @@ function MemoryInspector({
   className,
   style
 }) {
-  const { memory, newKeys } = useMemo3(() => {
+  const { memory, newKeys } = useMemo4(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
     }
@@ -734,12 +830,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__ */ jsxs4("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ jsx6("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ jsx6("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
     ] });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className,
@@ -750,7 +846,7 @@ function MemoryInspector({
       },
       "data-fp": "memory-inspector",
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "span",
           {
             style: {
@@ -763,7 +859,7 @@ function MemoryInspector({
             children: "Memory State"
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             style: {
@@ -777,8 +873,8 @@ function MemoryInspector({
               lineHeight: 1.8
             },
             children: [
-              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "{" }),
-              entries.length === 0 && /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -792,7 +888,7 @@ function MemoryInspector({
               entries.map(([key, value], i) => {
                 const isNew = newKeys.has(key);
                 const isLast = i === entries.length - 1;
-                return /* @__PURE__ */ jsxs3(
+                return /* @__PURE__ */ jsxs4(
                   "div",
                   {
                     style: {
@@ -804,14 +900,14 @@ function MemoryInspector({
                       paddingRight: 4
                     },
                     children: [
-                      /* @__PURE__ */ jsxs3("span", { style: { color: theme.primary }, children: [
+                      /* @__PURE__ */ jsxs4("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__ */ jsx6("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ jsx6("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ jsxs4(
                         "span",
                         {
                           style: {
@@ -827,13 +923,13 @@ function MemoryInspector({
                           ]
                         }
                       ),
-                      !isLast && /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "," })
+                      !isLast && /* @__PURE__ */ jsx6("span", { style: { color: theme.textMuted }, children: "," })
                     ]
                   },
                   key
                 );
               }),
-              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "}" })
+              /* @__PURE__ */ jsx6("span", { style: { color: theme.textMuted }, children: "}" })
             ]
           }
         )
@@ -848,8 +944,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 useMemo5 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function NarrativeLog({
   snapshots,
   selectedIndex,
@@ -859,7 +955,7 @@ function NarrativeLog({
   className,
   style
 }) {
-  const entries = useMemo4(() => {
+  const entries = useMemo5(() => {
     if (narrative) {
       return [{ label: "Output", text: narrative, isCurrent: true }];
     }
@@ -873,19 +969,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__ */ jsx7("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ jsxs5("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ jsx7("strong", { children: entry.label }),
+      /* @__PURE__ */ jsx7("p", { children: entry.text })
     ] }, i)) });
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "narrative-log",
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             style: {
@@ -898,7 +994,7 @@ function NarrativeLog({
             children: "Execution Log"
           }
         ),
-        /* @__PURE__ */ jsx6("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx7("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs5(
           "div",
           {
             style: {
@@ -908,7 +1004,7 @@ function NarrativeLog({
               borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
             },
             children: [
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs5(
                 "div",
                 {
                   style: {
@@ -920,7 +1016,7 @@ function NarrativeLog({
                     paddingTop: 5
                   },
                   children: [
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "div",
                       {
                         style: {
@@ -932,7 +1028,7 @@ function NarrativeLog({
                         }
                       }
                     ),
-                    i < entries.length - 1 && /* @__PURE__ */ jsx6(
+                    i < entries.length - 1 && /* @__PURE__ */ jsx7(
                       "div",
                       {
                         style: {
@@ -946,8 +1042,8 @@ function NarrativeLog({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx7(
                   "span",
                   {
                     style: {
@@ -958,7 +1054,7 @@ function NarrativeLog({
                     children: entry.label
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -981,8 +1077,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 useState2, useMemo as useMemo6, useRef, useEffect } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function GanttTimeline({
   snapshots,
   selectedIndex = 0,
@@ -990,9 +1086,13 @@ function GanttTimeline({
   size = "default",
   unstyled = false,
   className,
-  style
+  style,
+  maxVisibleRows = 5
 }) {
-  const totalWallTime = useMemo5(
+  const [expanded, setExpanded] = useState2(false);
+  const activeRowRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const totalWallTime = useMemo6(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
   );
@@ -1000,8 +1100,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__ */ jsx8("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs6(
       "div",
       {
         "data-fp": "gantt-bar",
@@ -1009,8 +1120,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__ */ jsx8("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ jsxs6("span", { "data-fp": "gantt-duration", children: [
             snap.durationMs,
             "ms"
           ] })
@@ -1019,43 +1130,79 @@ function GanttTimeline({
       snap.stageName
     )) });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className,
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "gantt-timeline",
       children: [
-        /* @__PURE__ */ jsx7(
-          "span",
+        /* @__PURE__ */ jsxs6(
+          "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__ */ jsx8(
+                "span",
+                {
+                  style: {
+                    fontSize: fs.label,
+                    fontWeight: 600,
+                    color: theme.textMuted,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em"
+                  },
+                  children: size === "compact" ? "Timeline" : "Execution Timeline"
+                }
+              ),
+              collapsible && /* @__PURE__ */ jsx8(
+                "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__ */ jsx8(
           "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__ */ jsxs6(
                 "div",
                 {
+                  ref: isSelected ? activeRowRef : void 0,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -1063,10 +1210,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__ */ jsx8(
                       "span",
                       {
                         style: {
@@ -1083,7 +1232,7 @@ function GanttTimeline({
                         children: snap.stageLabel
                       }
                     ),
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       "div",
                       {
                         style: {
@@ -1093,7 +1242,7 @@ function GanttTimeline({
                           background: theme.bgTertiary,
                           borderRadius: 3
                         },
-                        children: isVisible && /* @__PURE__ */ jsx7(
+                        children: isVisible && /* @__PURE__ */ jsx8(
                           "div",
                           {
                             style: {
@@ -1110,7 +1259,7 @@ function GanttTimeline({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs5(
+                    /* @__PURE__ */ jsxs6(
                       "span",
                       {
                         style: {
@@ -1133,7 +1282,7 @@ function GanttTimeline({
             })
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             style: {
@@ -1147,12 +1296,12 @@ function GanttTimeline({
               fontFamily: theme.fontMono
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { children: "0ms" }),
-              size !== "compact" && /* @__PURE__ */ jsxs5("span", { children: [
+              /* @__PURE__ */ jsx8("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ jsxs6("span", { children: [
                 (totalWallTime / 2).toFixed(1),
                 "ms"
               ] }),
-              /* @__PURE__ */ jsxs5("span", { children: [
+              /* @__PURE__ */ jsxs6("span", { children: [
                 totalWallTime.toFixed(1),
                 "ms"
               ] })
@@ -1165,7 +1314,7 @@ function GanttTimeline({
 }
 
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function TimeTravelDebugger({
   snapshots,
   nodes,
@@ -1178,11 +1327,11 @@ function TimeTravelDebugger({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
   const fs = fontSize[size];
   const pad = padding[size];
   if (snapshots.length === 0) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         className,
@@ -1198,9 +1347,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__ */ jsxs7("div", { className, style, "data-fp": "time-travel-debugger", children: [
+      /* @__PURE__ */ jsx9("h3", { children: title }),
+      /* @__PURE__ */ jsx9(
         "input",
         {
           type: "range",
@@ -1210,7 +1359,7 @@ function TimeTravelDebugger({
           onChange: (e) => setSelectedIndex(parseInt(e.target.value))
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         FlowchartView,
         {
           nodes,
@@ -1221,7 +1370,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         MemoryInspector,
         {
           snapshots,
@@ -1229,7 +1378,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         NarrativeLog,
         {
           snapshots,
@@ -1237,7 +1386,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      showGantt && /* @__PURE__ */ jsx8(
+      showGantt && /* @__PURE__ */ jsx9(
         GanttTimeline,
         {
           snapshots,
@@ -1248,7 +1397,7 @@ function TimeTravelDebugger({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className,
@@ -1263,7 +1412,7 @@ function TimeTravelDebugger({
       },
       "data-fp": "time-travel-debugger",
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1273,7 +1422,7 @@ function TimeTravelDebugger({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   style: {
@@ -1283,7 +1432,7 @@ function TimeTravelDebugger({
                     marginBottom: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         style: {
@@ -1294,7 +1443,7 @@ function TimeTravelDebugger({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         style: {
@@ -1307,8 +1456,8 @@ function TimeTravelDebugger({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx9(
                   ScrubButton,
                   {
                     label: "\\u25C0",
@@ -1316,7 +1465,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "input",
                   {
                     type: "range",
@@ -1332,7 +1481,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   ScrubButton,
                   {
                     label: "\\u25B6",
@@ -1340,7 +1489,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
                   }
                 ),
-                /* @__PURE__ */ jsxs6(
+                /* @__PURE__ */ jsxs7(
                   "span",
                   {
                     style: {
@@ -1360,7 +1509,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1370,7 +1519,7 @@ function TimeTravelDebugger({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   style: {
@@ -1379,7 +1528,7 @@ function TimeTravelDebugger({
                     borderRight: isHorizontal ? `1px solid ${theme.border}` : "none",
                     borderBottom: !isHorizontal ? `1px solid ${theme.border}` : "none"
                   },
-                  children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx9(
                     FlowchartView,
                     {
                       nodes,
@@ -1392,8 +1541,8 @@ function TimeTravelDebugger({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { style: { flex: 1, overflow: "auto" }, children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs7("div", { style: { flex: 1, overflow: "auto" }, children: [
+                /* @__PURE__ */ jsx9(
                   MemoryInspector,
                   {
                     snapshots,
@@ -1401,7 +1550,7 @@ function TimeTravelDebugger({
                     size
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "div",
                   {
                     style: {
@@ -1411,7 +1560,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   NarrativeLog,
                   {
                     snapshots,
@@ -1423,7 +1572,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        showGantt && /* @__PURE__ */ jsx8(
+        showGantt && /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -1431,7 +1580,7 @@ function TimeTravelDebugger({
               background: theme.bgSecondary,
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               GanttTimeline,
               {
                 snapshots,
@@ -1451,7 +1600,7 @@ function ScrubButton({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       onClick,
@@ -1480,6 +1629,7 @@ export {
   StageNode,
   SubflowBreadcrumb,
   TimeTravelDebugger,
+  TracedFlowchartView,
   specToReactFlow,
   useSubflowNavigation
 };