footprint-explainable-ui 0.3.2 → 0.4.0

package/dist/flowchart.cjs

@@ -24,6 +24,7 @@ __export(flowchart_exports, {
   StageNode: () => StageNode,
   SubflowBreadcrumb: () => SubflowBreadcrumb,
   TimeTravelDebugger: () => TimeTravelDebugger,
+  TracedFlowchartView: () => TracedFlowchartView,
   specToReactFlow: () => specToReactFlow,
   useSubflowNavigation: () => useSubflowNavigation
 });
@@ -398,75 +399,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_react8 = require("react");
+var import_react9 = require("@xyflow/react");
 
 // src/components/FlowchartView/specToReactFlow.ts
 var DEFAULT_COLORS = {
@@ -648,14 +583,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 +605,14 @@ 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
     };
     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;
@@ -691,7 +627,7 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
     },
     [subflowMap]
   );
-  const navigateTo = (0, import_react7.useCallback)(
+  const navigateTo = (0, import_react6.useCallback)(
     (level) => {
       if (level === 0) {
         setStack([]);
@@ -712,12 +648,169 @@ function useSubflowNavigation(rootSpec, overlay, colors) {
   };
 }
 
+// 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.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/TracedFlowchartView.tsx
+var import_jsx_runtime5 = require("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 = (0, import_react8.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_react8.useMemo)(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay);
+  }, [currentSpec, overlay]);
+  const handleNodeClick = (0, import_react8.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_react8.useCallback)(
+    (level) => {
+      subflowNav.navigateTo(level);
+      onSubflowChange?.(level > 0, null);
+    },
+    [subflowNav, onSubflowChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className,
+      style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", ...style },
+      "data-fp": "traced-flowchart",
+      children: [
+        subflowNav.isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          SubflowBreadcrumb,
+          {
+            breadcrumbs: subflowNav.breadcrumbs,
+            onNavigate: handleBreadcrumbNavigate
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react9.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_runtime5.jsx)(import_react9.Background, { variant: import_react9.BackgroundVariant.Dots, gap: 16, size: 1 })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/MemoryInspector/MemoryInspector.tsx
-var import_react8 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MemoryInspector({
   data,
   snapshots,
@@ -729,7 +822,7 @@ function MemoryInspector({
   className,
   style
 }) {
-  const { memory, newKeys } = (0, import_react8.useMemo)(() => {
+  const { memory, newKeys } = (0, import_react10.useMemo)(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
     }
@@ -759,12 +852,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_runtime6.jsxs)("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className,
@@ -775,7 +868,7 @@ function MemoryInspector({
       },
       "data-fp": "memory-inspector",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -788,7 +881,7 @@ function MemoryInspector({
             children: "Memory State"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             style: {
@@ -802,8 +895,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_runtime6.jsx)("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   style: {
@@ -817,7 +910,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_runtime6.jsxs)(
                   "div",
                   {
                     style: {
@@ -829,14 +922,14 @@ function MemoryInspector({
                       paddingRight: 4
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: theme.primary }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         "span",
                         {
                           style: {
@@ -852,13 +945,13 @@ function MemoryInspector({
                           ]
                         }
                       ),
-                      !isLast && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: "," })
+                      !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: theme.textMuted }, children: "," })
                     ]
                   },
                   key
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.textMuted }, children: "}" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: theme.textMuted }, children: "}" })
             ]
           }
         )
@@ -873,8 +966,8 @@ function formatValue(value) {
 }
 
 // src/components/NarrativeLog/NarrativeLog.tsx
-var import_react9 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function NarrativeLog({
   snapshots,
   selectedIndex,
@@ -884,7 +977,7 @@ function NarrativeLog({
   className,
   style
 }) {
-  const entries = (0, import_react9.useMemo)(() => {
+  const entries = (0, import_react11.useMemo)(() => {
     if (narrative) {
       return [{ label: "Output", text: narrative, isCurrent: true }];
     }
@@ -898,19 +991,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_runtime7.jsx)("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: entry.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: entry.text })
     ] }, i)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
           "span",
           {
             style: {
@@ -923,7 +1016,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_runtime7.jsx)("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -933,7 +1026,7 @@ function NarrativeLog({
               borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "div",
                 {
                   style: {
@@ -945,7 +1038,7 @@ function NarrativeLog({
                     paddingTop: 5
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "div",
                       {
                         style: {
@@ -957,7 +1050,7 @@ function NarrativeLog({
                         }
                       }
                     ),
-                    i < entries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    i < entries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "div",
                       {
                         style: {
@@ -971,8 +1064,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_runtime7.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "span",
                   {
                     style: {
@@ -983,7 +1076,7 @@ function NarrativeLog({
                     children: entry.label
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     style: {
@@ -1006,8 +1099,8 @@ function NarrativeLog({
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-var import_react10 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function GanttTimeline({
   snapshots,
   selectedIndex = 0,
@@ -1015,9 +1108,13 @@ function GanttTimeline({
   size = "default",
   unstyled = false,
   className,
-  style
+  style,
+  maxVisibleRows = 5
 }) {
-  const totalWallTime = (0, import_react10.useMemo)(
+  const [expanded, setExpanded] = (0, import_react12.useState)(false);
+  const activeRowRef = (0, import_react12.useRef)(null);
+  const scrollContainerRef = (0, import_react12.useRef)(null);
+  const totalWallTime = (0, import_react12.useMemo)(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
   );
@@ -1025,8 +1122,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_react12.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_runtime8.jsx)("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         "data-fp": "gantt-bar",
@@ -1034,8 +1142,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_runtime8.jsx)("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-fp": "gantt-duration", children: [
             snap.durationMs,
             "ms"
           ] })
@@ -1044,43 +1152,79 @@ function GanttTimeline({
       snap.stageName
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.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_runtime8.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_runtime8.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_runtime8.jsxs)(
                 "div",
                 {
+                  ref: isSelected ? activeRowRef : void 0,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -1088,10 +1232,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_runtime8.jsx)(
                       "span",
                       {
                         style: {
@@ -1108,7 +1254,7 @@ function GanttTimeline({
                         children: snap.stageLabel
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "div",
                       {
                         style: {
@@ -1118,7 +1264,7 @@ function GanttTimeline({
                           background: theme.bgTertiary,
                           borderRadius: 3
                         },
-                        children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "div",
                           {
                             style: {
@@ -1135,7 +1281,7 @@ function GanttTimeline({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "span",
                       {
                         style: {
@@ -1158,7 +1304,7 @@ function GanttTimeline({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             style: {
@@ -1172,12 +1318,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_runtime8.jsx)("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
                 (totalWallTime / 2).toFixed(1),
                 "ms"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
                 totalWallTime.toFixed(1),
                 "ms"
               ] })
@@ -1190,7 +1336,7 @@ function GanttTimeline({
 }
 
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TimeTravelDebugger({
   snapshots,
   nodes,
@@ -1203,11 +1349,11 @@ function TimeTravelDebugger({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react11.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react13.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_runtime9.jsx)(
       "div",
       {
         className,
@@ -1223,9 +1369,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_runtime9.jsxs)("div", { className, style, "data-fp": "time-travel-debugger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           type: "range",
@@ -1235,7 +1381,7 @@ function TimeTravelDebugger({
           onChange: (e) => setSelectedIndex(parseInt(e.target.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         FlowchartView,
         {
           nodes,
@@ -1246,7 +1392,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         MemoryInspector,
         {
           snapshots,
@@ -1254,7 +1400,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         NarrativeLog,
         {
           snapshots,
@@ -1262,7 +1408,7 @@ function TimeTravelDebugger({
           unstyled: true
         }
       ),
-      showGantt && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      showGantt && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         GanttTimeline,
         {
           snapshots,
@@ -1273,7 +1419,7 @@ function TimeTravelDebugger({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
@@ -1288,7 +1434,7 @@ function TimeTravelDebugger({
       },
       "data-fp": "time-travel-debugger",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -1298,7 +1444,7 @@ function TimeTravelDebugger({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -1308,7 +1454,7 @@ function TimeTravelDebugger({
                     marginBottom: 8
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -1319,7 +1465,7 @@ function TimeTravelDebugger({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -1332,8 +1478,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_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   ScrubButton,
                   {
                     label: "\\u25C0",
@@ -1341,7 +1487,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "input",
                   {
                     type: "range",
@@ -1357,7 +1503,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   ScrubButton,
                   {
                     label: "\\u25B6",
@@ -1365,7 +1511,7 @@ function TimeTravelDebugger({
                     onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "span",
                   {
                     style: {
@@ -1385,7 +1531,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -1395,7 +1541,7 @@ function TimeTravelDebugger({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   style: {
@@ -1404,7 +1550,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_runtime9.jsx)(
                     FlowchartView,
                     {
                       nodes,
@@ -1417,8 +1563,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_runtime9.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   MemoryInspector,
                   {
                     snapshots,
@@ -1426,7 +1572,7 @@ function TimeTravelDebugger({
                     size
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "div",
                   {
                     style: {
@@ -1436,7 +1582,7 @@ function TimeTravelDebugger({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   NarrativeLog,
                   {
                     snapshots,
@@ -1448,7 +1594,7 @@ function TimeTravelDebugger({
             ]
           }
         ),
-        showGantt && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showGantt && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -1456,7 +1602,7 @@ function TimeTravelDebugger({
               background: theme.bgSecondary,
               flexShrink: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               GanttTimeline,
               {
                 snapshots,
@@ -1476,7 +1622,7 @@ function ScrubButton({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       onClick,
@@ -1506,6 +1652,7 @@ function ScrubButton({
   StageNode,
   SubflowBreadcrumb,
   TimeTravelDebugger,
+  TracedFlowchartView,
   specToReactFlow,
   useSubflowNavigation
 });