footprint-explainable-ui 0.5.0 → 0.7.2

package/dist/flowchart.js

@@ -9,14 +9,14 @@ import {
 } from "@xyflow/react";
 
 // src/components/StageNode/StageNode.tsx
-import { memo } from "react";
+import { memo, useEffect as useEffect2, useRef } from "react";
 import { Handle, Position } from "@xyflow/react";
 
 // src/theme/ThemeProvider.tsx
 import { createContext, useContext } from "react";
 
 // src/theme/tokens.ts
-var defaultTokens = {
+var rawDefaults = {
   colors: {
     primary: "#6366f1",
     success: "#22c55e",
@@ -36,6 +36,26 @@ var defaultTokens = {
     mono: "'JetBrains Mono', 'Fira Code', monospace"
   }
 };
+var defaultTokens = {
+  colors: {
+    primary: `var(--fp-color-primary, ${rawDefaults.colors.primary})`,
+    success: `var(--fp-color-success, ${rawDefaults.colors.success})`,
+    error: `var(--fp-color-error, ${rawDefaults.colors.error})`,
+    warning: `var(--fp-color-warning, ${rawDefaults.colors.warning})`,
+    bgPrimary: `var(--fp-bg-primary, ${rawDefaults.colors.bgPrimary})`,
+    bgSecondary: `var(--fp-bg-secondary, ${rawDefaults.colors.bgSecondary})`,
+    bgTertiary: `var(--fp-bg-tertiary, ${rawDefaults.colors.bgTertiary})`,
+    textPrimary: `var(--fp-text-primary, ${rawDefaults.colors.textPrimary})`,
+    textSecondary: `var(--fp-text-secondary, ${rawDefaults.colors.textSecondary})`,
+    textMuted: `var(--fp-text-muted, ${rawDefaults.colors.textMuted})`,
+    border: `var(--fp-border, ${rawDefaults.colors.border})`
+  },
+  radius: `var(--fp-radius, ${rawDefaults.radius})`,
+  fontFamily: {
+    sans: `var(--fp-font-sans, ${rawDefaults.fontFamily.sans})`,
+    mono: `var(--fp-font-mono, ${rawDefaults.fontFamily.mono})`
+  }
+};
 
 // src/theme/ThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -72,12 +92,174 @@ var padding = {
   detailed: 16
 };
 
+// src/theme/useDarkModeTokens.ts
+import { useState, useEffect } from "react";
+
 // src/components/StageNode/StageNode.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var KEYFRAMES_ID = "fp-stage-node-keyframes";
+var KEYFRAMES_CSS = `
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes fp-pulse {
+    0%, 100% { opacity: 0.4; transform: scale(1); }
+    50% { opacity: 0.15; transform: scale(1.06); }
+  }
+  @keyframes fp-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes fp-pulse { 0%, 100% { opacity: 0.3; } }
+  @keyframes fp-blink { 0%, 100% { opacity: 1; } }
+}
+`;
+var ICON_SIZE = 16;
+function StageIcon({ type, color }) {
+  const s = ICON_SIZE;
+  const props = { width: s, height: s, viewBox: `0 0 ${s} ${s}`, fill: "none", style: { flexShrink: 0 } };
+  switch (type) {
+    // LLM / AI call — brain/sparkle
+    case "llm":
+    case "ai":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx2("path", { d: "M5.5 8C5.5 6.5 6.5 5 8 5S10.5 6.5 10.5 8", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "9.5", r: "1", fill: color }),
+        /* @__PURE__ */ jsx2("line", { x1: "8", y1: "2", x2: "8", y2: "3.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("line", { x1: "12.5", y1: "4", x2: "11.2", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("line", { x1: "3.5", y1: "4", x2: "4.8", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      ] });
+    // Tool / function call — gear
+    case "tool":
+    case "function":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "3", stroke: color, strokeWidth: "1.5" }),
+        [0, 45, 90, 135, 180, 225, 270, 315].map((angle) => {
+          const rad = angle * Math.PI / 180;
+          const x1 = 8 + Math.cos(rad) * 4.5;
+          const y1 = 8 + Math.sin(rad) * 4.5;
+          const x2 = 8 + Math.cos(rad) * 6;
+          const y2 = 8 + Math.sin(rad) * 6;
+          return /* @__PURE__ */ jsx2("line", { x1, y1, x2, y2, stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }, angle);
+        })
+      ] });
+    // RAG / retrieval — magnifying glass + doc
+    case "rag":
+    case "search":
+    case "retrieval":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx2("line", { x1: "10", y1: "10", x2: "13.5", y2: "13.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("line", { x1: "5.5", y1: "6", x2: "8.5", y2: "6", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("line", { x1: "5.5", y1: "8", x2: "7.5", y2: "8", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      ] });
+    // Parse / process — diamond with arrows
+    case "parse":
+    case "process":
+    case "transform":
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: color, strokeWidth: "1.5", transform: "rotate(45 8 8)" }) });
+    // Start / seed — play triangle
+    case "start":
+    case "seed":
+    case "init":
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M5 3.5L12.5 8L5 12.5V3.5Z", fill: color, opacity: "0.8" }) });
+    // End / finalize — stop square
+    case "end":
+    case "finalize":
+    case "output":
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", fill: color, opacity: "0.8" }) });
+    // Agent — person silhouette
+    case "agent":
+    case "orchestrator":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "5", r: "2.5", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 14C3.5 11 5.5 9 8 9S12.5 11 12.5 14", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })
+      ] });
+    // Swarm — multi-agent
+    case "swarm":
+    case "multi-agent":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "11", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ jsx2("line", { x1: "5", y1: "7", x2: "8", y2: "9", stroke: color, strokeWidth: "1", opacity: "0.5" }),
+        /* @__PURE__ */ jsx2("line", { x1: "11", y1: "7", x2: "8", y2: "9", stroke: color, strokeWidth: "1", opacity: "0.5" })
+      ] });
+    // Guard / guardrail — shield
+    case "guard":
+    case "guardrail":
+    case "validate":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("path", { d: "M8 2L3 5V9C3 11.5 5 13.5 8 14.5C11 13.5 13 11.5 13 9V5L8 2Z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx2("path", { d: "M6 8L7.5 9.5L10 6.5", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] });
+    // Stream — wave
+    case "stream":
+    case "streaming":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("path", { d: "M2 8C4 5 6 11 8 8S12 5 14 8", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx2("path", { d: "M2 11C4 8 6 14 8 11S12 8 14 11", stroke: color, strokeWidth: "1", strokeLinecap: "round", fill: "none", opacity: "0.5" })
+      ] });
+    // Memory / state — database cylinder
+    case "memory":
+    case "state":
+    case "db":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("ellipse", { cx: "8", cy: "4.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsx2("line", { x1: "3", y1: "4.5", x2: "3", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsx2("line", { x1: "13", y1: "4.5", x2: "13", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsx2("ellipse", { cx: "8", cy: "11.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" })
+      ] });
+    // Loop — circular arrow
+    case "loop":
+    case "retry":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("path", { d: "M12 8A4 4 0 1 1 8 4", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx2("path", { d: "M8 1.5L10.5 4L8 6.5", stroke: color, strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
+      ] });
+    // Lazy / service — cloud (deferred resolution, loaded on demand)
+    case "lazy":
+    case "service":
+    case "cloud":
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M4.5 12C2.8 12 1.5 10.7 1.5 9C1.5 7.5 2.5 6.3 3.8 6C4 4 5.8 2.5 8 2.5C9.8 2.5 11.3 3.5 11.9 5C13.9 5.2 15.5 6.8 15.5 8.8C15.5 10.8 13.9 12.5 11.8 12.5H4.5",
+          stroke: color,
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          fill: "none"
+        }
+      ) });
+    // Decision — diamond (already handled by isDecider shape)
+    case "decision":
+    case "router":
+      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("path", { d: "M8 2L14 8L8 14L2 8Z", stroke: color, strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "1.5", fill: color })
+      ] });
+    default:
+      return null;
+  }
+}
 var StageNode = memo(function StageNode2({
   data
 }) {
-  const { label, active, done, error, linked, stepNumbers, dimmed, isSubflow, description } = data;
+  const { label, active, done, error, linked, icon, stepNumbers, dimmed, isSubflow, isLazy, isDecider, isFork, description } = data;
+  const effectiveIcon = icon || (isLazy ? "lazy" : void 0);
+  const isLazyUnresolved = isLazy && !done && !active;
+  const injectedRef = useRef(false);
+  useEffect2(() => {
+    if (injectedRef.current) return;
+    if (typeof document !== "undefined" && !document.getElementById(KEYFRAMES_ID)) {
+      const styleEl = document.createElement("style");
+      styleEl.id = KEYFRAMES_ID;
+      styleEl.textContent = KEYFRAMES_CSS;
+      document.head.appendChild(styleEl);
+    }
+    injectedRef.current = true;
+  }, []);
   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;
@@ -139,7 +321,8 @@ var StageNode = memo(function StageNode2({
               style: {
                 position: "absolute",
                 inset: -6,
-                borderRadius: `calc(${theme.radius} + 4px)`,
+                borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
+                transform: isDecider ? "rotate(45deg)" : void 0,
                 border: `2px solid ${theme.primary}`,
                 opacity: 0.4,
                 animation: "fp-pulse 2s ease-in-out infinite"
@@ -152,107 +335,175 @@ var StageNode = memo(function StageNode2({
               style: {
                 position: "absolute",
                 inset: -6,
-                borderRadius: `calc(${theme.radius} + 4px)`,
+                borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
+                transform: isDecider ? "rotate(45deg)" : void 0,
                 border: `2px solid ${theme.primary}`,
                 opacity: 0.3,
                 animation: "fp-pulse 1.5s ease-out infinite"
               }
             }
           ),
-          /* @__PURE__ */ jsxs(
+          isDecider ? /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
                 background: bg,
-                border: `2px solid ${borderColor}`,
-                borderRadius: theme.radius,
-                padding: description ? "8px 16px" : "10px 20px",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: description ? 2 : 0,
+                border: `2px ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
+                borderRadius: 4,
+                transform: "rotate(45deg)",
+                padding: 20,
                 boxShadow: shadow,
                 transition: "all 0.3s ease",
-                fontFamily: theme.fontSans,
-                minWidth: 100,
+                display: "flex",
+                alignItems: "center",
                 justifyContent: "center"
               },
-              children: [
-                /* @__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
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    transform: "rotate(-45deg)",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 2,
+                    fontFamily: theme.fontSans
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [
+                      icon && /* @__PURE__ */ jsx2(StageIcon, { type: icon, color: textColor }),
+                      !icon && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u25C7" }),
+                      /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 12,
+                            fontWeight: 600,
+                            color: textColor,
+                            whiteSpace: "nowrap"
+                          },
+                          children: label
+                        }
+                      )
+                    ] }),
+                    description && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 9,
+                          fontWeight: 400,
+                          color: textColor,
+                          opacity: 0.7,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          maxWidth: 130
+                        },
+                        children: description
                       }
-                    }
-                  ),
-                  error && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
-                  /* @__PURE__ */ jsx2(
+                    )
+                  ]
+                }
+              )
+            }
+          ) : (
+            /* Standard rectangular node */
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  background: bg,
+                  border: `2px ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
+                  borderRadius: theme.radius,
+                  padding: description ? "8px 16px" : "10px 20px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: description ? 2 : 0,
+                  boxShadow: shadow,
+                  transition: "all 0.3s ease",
+                  fontFamily: theme.fontSans,
+                  minWidth: 100,
+                  justifyContent: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                    effectiveIcon && /* @__PURE__ */ jsx2(StageIcon, { type: effectiveIcon, color: textColor }),
+                    done && !effectiveIcon && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
+                    active && !effectiveIcon && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          background: "#fff",
+                          animation: "fp-blink 1s ease-in-out infinite",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    error && !effectiveIcon && /* @__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
                     }
                   )
-                ] }),
-                description && /* @__PURE__ */ jsx2(
-                  "span",
-                  {
-                    style: {
-                      fontSize: 10,
-                      fontWeight: 400,
-                      color: textColor,
-                      opacity: 0.7,
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      maxWidth: 160
-                    },
-                    children: description
-                  }
-                )
-              ]
-            }
+                ]
+              }
+            )
           )
         ]
       }
@@ -393,23 +644,24 @@ function FlowchartView({
 }
 
 // src/components/FlowchartView/TracedFlowchartView.tsx
-import { useState as useState3, useMemo as useMemo4, useCallback as useCallback4 } from "react";
+import { useMemo as useMemo2, useCallback as useCallback2, useEffect as useEffect3 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
-  BackgroundVariant as BackgroundVariant2
+  BackgroundVariant as BackgroundVariant2,
+  useReactFlow
 } from "@xyflow/react";
 
 // src/components/FlowchartView/specToReactFlow.ts
 var DEFAULT_COLORS = {
-  edgeDefault: defaultTokens.colors.textMuted,
-  edgeExecuted: defaultTokens.colors.success,
-  edgeActive: defaultTokens.colors.primary,
-  edgeLoop: defaultTokens.colors.warning,
-  labelDefault: defaultTokens.colors.textSecondary,
-  labelExecuted: defaultTokens.colors.success,
-  labelLoop: defaultTokens.colors.warning,
-  pathGlow: `${defaultTokens.colors.success}4D`
+  edgeDefault: rawDefaults.colors.textMuted,
+  edgeExecuted: rawDefaults.colors.success,
+  edgeActive: rawDefaults.colors.primary,
+  edgeLoop: rawDefaults.colors.warning,
+  labelDefault: rawDefaults.colors.textSecondary,
+  labelExecuted: rawDefaults.colors.success,
+  labelLoop: rawDefaults.colors.warning,
+  pathGlow: `${rawDefaults.colors.success}4D`
   // ~30% opacity hex
 };
 var Y_STEP = 100;
@@ -417,122 +669,33 @@ var X_SPREAD = 200;
 function nid(n) {
   return n.name || n.id || `spec-${Math.random()}`;
 }
-function addEdge(state, source, target, label, isLoop) {
-  state.edgeCounter++;
-  const o = state.overlay;
-  const c = state.colors;
-  const executed = o && o.executedStages.has(source) && o.executedStages.has(target);
-  const isLeadingEdge = o && source === o.activeStage && !o.doneStages.has(target);
-  if (isLoop) {
-    let loopExecuted = false;
-    if (o?.executionOrder) {
-      const lastSourceIdx = o.executionOrder.lastIndexOf(source);
-      if (lastSourceIdx >= 0) {
-        loopExecuted = o.executionOrder.slice(lastSourceIdx + 1).includes(target);
-      }
-    }
-    state.edges.push({
-      id: `se${state.edgeCounter}`,
-      source,
-      target,
-      sourceHandle: "loop-source",
-      targetHandle: "loop-target",
-      label: label ?? "loop",
-      type: "smoothstep",
-      pathOptions: { offset: 40, borderRadius: 16 },
-      style: {
-        stroke: c.edgeLoop,
-        strokeWidth: loopExecuted ? 3 : 2,
-        strokeDasharray: "6 3",
-        opacity: o && !loopExecuted ? 0.35 : 1
-      },
-      labelStyle: { fontSize: 10, fontWeight: 700, fill: c.labelLoop },
-      animated: loopExecuted,
-      zIndex: 2
-    });
-    return;
-  }
-  if (executed) {
-    state.edges.push({
-      id: `se${state.edgeCounter}-glow`,
-      source,
-      target,
-      style: {
-        stroke: c.pathGlow,
-        strokeWidth: 8,
-        opacity: 0.4
-      },
-      zIndex: 0,
-      selectable: false,
-      focusable: false
-    });
-    state.edges.push({
-      id: `se${state.edgeCounter}`,
-      source,
-      target,
-      label,
-      style: {
-        stroke: isLeadingEdge ? c.edgeActive : c.edgeExecuted,
-        strokeWidth: 3.5
-      },
-      labelStyle: { fontSize: 10, fontWeight: 600, fill: c.labelExecuted },
-      animated: !!isLeadingEdge,
-      zIndex: 1
-    });
-  } else {
-    state.edges.push({
-      id: `se${state.edgeCounter}`,
-      source,
-      target,
-      label,
-      style: {
-        stroke: c.edgeDefault,
-        strokeWidth: 1.5,
-        opacity: o ? 0.3 : 1
-      },
-      labelStyle: { fontSize: 10, fill: c.labelDefault }
-    });
+function registerNode(state, node) {
+  if (node.id && node.name) {
+    state.idToName.set(node.id, node.name);
   }
 }
-function walk(node, state, x, y) {
+function walkLayout(node, state, x, y) {
+  if (!node) return { lastIds: [], bottomY: y };
+  registerNode(state, node);
   const id = nid(node);
   if (state.seen.has(id)) {
     return { lastIds: [id], bottomY: y };
   }
   state.seen.add(id);
-  const isDecider = node.type === "decider" || node.hasDecider;
+  const isDecider = node.type === "decider" || !!node.hasDecider;
   const isFork = node.type === "fork";
-  const o = state.overlay;
-  const isDone = o ? o.doneStages.has(id) : false;
-  const isActive = o ? o.activeStage === id : false;
-  const wasExecuted = o ? o.executedStages.has(id) : false;
-  const dimmed = o && !wasExecuted;
-  let stepNumbers;
-  if (o?.executionOrder) {
-    const nums = [];
-    for (let i = 0; i < o.executionOrder.length; i++) {
-      if (o.executionOrder[i] === id) nums.push(i + 1);
-    }
-    if (nums.length > 0) stepNumbers = nums;
-  }
   state.nodes.push({
     id,
-    position: { x, y },
-    data: {
-      label: node.name,
-      active: isActive,
-      done: isDone,
-      error: false,
-      isDecider,
-      isFork,
-      description: node.description,
-      subflowId: node.subflowId,
-      dimmed,
-      stepNumbers,
-      isSubflow: !!node.isSubflowRoot
-    },
-    type: "stage",
-    style: dimmed ? { opacity: 0.35 } : void 0
+    x,
+    y,
+    label: node.name,
+    isDecider,
+    isFork,
+    description: node.description,
+    icon: node.icon,
+    subflowId: node.subflowId,
+    isSubflow: !!node.isSubflowRoot,
+    isLazy: node.isLazy
   });
   let lastIds = [id];
   let bottomY = y;
@@ -543,120 +706,257 @@ function walk(node, state, x, y) {
     const childResults = [];
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i];
+      if (!child) continue;
       const childX = startX + i * X_SPREAD;
       const edgeLabel = node.branchIds?.[i];
-      addEdge(state, id, nid(child), edgeLabel);
-      const result = walk(child, state, childX, childY);
+      state.edgeCounter++;
+      state.edges.push({ id: `se${state.edgeCounter}`, source: id, target: nid(child), label: edgeLabel, isLoop: false });
+      const result = walkLayout(child, state, childX, childY);
       childResults.push(result);
     }
     lastIds = childResults.flatMap((r) => r.lastIds);
     bottomY = Math.max(...childResults.map((r) => r.bottomY));
   }
   if (node.loopTarget) {
-    addEdge(state, id, node.loopTarget, "loop", true);
+    const resolvedTarget = state.idToName.get(node.loopTarget) ?? node.loopTarget;
+    state.edgeCounter++;
+    state.edges.push({ id: `se${state.edgeCounter}`, source: id, target: resolvedTarget, label: "loop", isLoop: true });
   }
   if (node.next) {
+    const rawNextId = nid(node.next);
+    const resolvedNextId = state.idToName.get(rawNextId) ?? rawNextId;
+    const isLoopRef = node.loopTarget && state.seen.has(resolvedNextId);
+    if (isLoopRef) {
+      return { lastIds, bottomY };
+    }
     const nextY = bottomY + Y_STEP;
-    const nextId = nid(node.next);
     for (const lid of lastIds) {
-      if (node.loopTarget && lid === id && node.loopTarget === nextId) continue;
-      addEdge(state, lid, nextId);
+      state.edgeCounter++;
+      state.edges.push({ id: `se${state.edgeCounter}`, source: lid, target: resolvedNextId, isLoop: false });
     }
-    const result = walk(node.next, state, x, nextY);
-    return result;
+    return walkLayout(node.next, state, x, nextY);
   }
   return { lastIds, bottomY };
 }
-function specToReactFlow(spec, overlay, colors) {
+function specToLayout(spec) {
   const state = {
     nodes: [],
     edges: [],
     edgeCounter: 0,
     seen: /* @__PURE__ */ new Set(),
-    overlay: overlay ?? null,
-    colors: { ...DEFAULT_COLORS, ...colors }
+    idToName: /* @__PURE__ */ new Map()
   };
-  walk(spec, state, 300, 0);
-  return { nodes: state.nodes, edges: state.edges };
+  walkLayout(spec, state, 300, 0);
+  return { nodes: state.nodes, edges: state.edges, idToName: state.idToName };
 }
-
-// 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;
-  const { nodes, edges } = useMemo2(() => {
-    if (!currentSpec) return { nodes: [], edges: [] };
-    return specToReactFlow(currentSpec, overlay, colors);
-  }, [currentSpec, overlay, colors]);
-  const subflowMap = useMemo2(() => {
-    const map = /* @__PURE__ */ new Map();
-    if (!currentSpec) return map;
-    function collectSubflows(node) {
-      if (node.isSubflowRoot && node.subflowStructure) {
-        const id = node.name || node.id || "";
-        map.set(id, node);
+function applyOverlay(layout, overlay, colors) {
+  const c = { ...DEFAULT_COLORS, ...colors };
+  const o = overlay ?? null;
+  const nodes = layout.nodes.map((ln) => {
+    const isDone = o ? o.doneStages.has(ln.id) : false;
+    const isActive = o ? o.activeStage === ln.id : false;
+    const wasExecuted = o ? o.executedStages.has(ln.id) : false;
+    const dimmed = o && !wasExecuted;
+    let stepNumbers;
+    if (o?.executionOrder) {
+      const nums = [];
+      for (let i = 0; i < o.executionOrder.length; i++) {
+        if (o.executionOrder[i] === ln.id) nums.push(i + 1);
       }
-      if (node.children) node.children.forEach(collectSubflows);
-      if (node.next) collectSubflows(node.next);
+      if (nums.length > 0) stepNumbers = nums;
     }
-    collectSubflows(currentSpec);
-    return map;
-  }, [currentSpec]);
-  const breadcrumbs = useMemo2(() => {
-    const root = {
-      label: rootSpec?.name || "Flowchart",
-      spec: rootSpec,
-      description: rootSpec?.description
+    return {
+      id: ln.id,
+      position: { x: ln.x, y: ln.y },
+      data: {
+        label: ln.label,
+        active: isActive,
+        done: isDone,
+        error: false,
+        isDecider: ln.isDecider,
+        isFork: ln.isFork,
+        description: ln.description,
+        icon: ln.icon,
+        subflowId: ln.subflowId,
+        dimmed,
+        stepNumbers,
+        isSubflow: ln.isSubflow,
+        isLazy: ln.isLazy
+      },
+      type: "stage",
+      style: dimmed ? { opacity: 0.35 } : void 0
     };
-    return [root, ...stack];
-  }, [rootSpec, stack]);
-  const handleNodeClick = useCallback2(
-    (nodeId) => {
-      const subflowNode = subflowMap.get(nodeId);
-      if (!subflowNode?.subflowStructure) return false;
-      setStack((prev) => [
-        ...prev,
-        {
-          label: subflowNode.subflowName || subflowNode.name,
-          spec: subflowNode.subflowStructure,
-          description: subflowNode.description
+  });
+  const edges = [];
+  for (const le of layout.edges) {
+    const executed = o && o.executedStages.has(le.source) && o.executedStages.has(le.target);
+    const isLeadingEdge = o && le.source === o.activeStage && !o.doneStages.has(le.target);
+    if (le.isLoop) {
+      let loopExecuted = false;
+      if (o?.executionOrder) {
+        const lastSourceIdx = o.executionOrder.lastIndexOf(le.source);
+        if (lastSourceIdx >= 0) {
+          loopExecuted = o.executionOrder.slice(lastSourceIdx + 1).includes(le.target);
         }
-      ]);
-      return true;
-    },
-    [subflowMap]
-  );
-  const navigateTo = useCallback2(
-    (level) => {
-      if (level === 0) {
-        setStack([]);
-      } else {
-        setStack((prev) => prev.slice(0, level));
       }
+      edges.push({
+        id: le.id,
+        source: le.source,
+        target: le.target,
+        sourceHandle: "loop-source",
+        targetHandle: "loop-target",
+        label: le.label ?? "loop",
+        type: "smoothstep",
+        pathOptions: { offset: 40, borderRadius: 16 },
+        style: {
+          stroke: c.edgeLoop,
+          strokeWidth: loopExecuted ? 3 : 2,
+          strokeDasharray: "6 3",
+          opacity: o && !loopExecuted ? 0.35 : 1
+        },
+        labelStyle: { fontSize: 10, fontWeight: 700, fill: c.labelLoop },
+        animated: loopExecuted,
+        zIndex: 2
+      });
+    } else if (executed) {
+      edges.push({
+        id: `${le.id}-glow`,
+        source: le.source,
+        target: le.target,
+        style: { stroke: c.pathGlow, strokeWidth: 8, opacity: 0.4 },
+        zIndex: 0,
+        selectable: false,
+        focusable: false
+      });
+      edges.push({
+        id: le.id,
+        source: le.source,
+        target: le.target,
+        label: le.label,
+        style: {
+          stroke: isLeadingEdge ? c.edgeActive : c.edgeExecuted,
+          strokeWidth: 3.5
+        },
+        labelStyle: { fontSize: 10, fontWeight: 600, fill: c.labelExecuted },
+        animated: !!isLeadingEdge,
+        zIndex: 1
+      });
+    } else {
+      edges.push({
+        id: le.id,
+        source: le.source,
+        target: le.target,
+        label: le.label,
+        style: {
+          stroke: c.edgeDefault,
+          strokeWidth: 1.5,
+          opacity: o ? 0.3 : 1
+        },
+        labelStyle: { fontSize: 10, fill: c.labelDefault }
+      });
+    }
+  }
+  return { nodes, edges };
+}
+function specToReactFlow(spec, overlay, colors) {
+  const layout = specToLayout(spec);
+  return applyOverlay(layout, overlay, colors);
+}
+
+// src/components/FlowchartView/TracedFlowchartView.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultNodeTypes = { stage: StageNode };
+function FitViewOnResize() {
+  const { fitView } = useReactFlow();
+  useEffect3(() => {
+    const handler = () => {
+      requestAnimationFrame(() => fitView({ padding: 0.3 }));
+    };
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, [fitView]);
+  return null;
+}
+function TracedFlowchartView({
+  spec,
+  snapshots,
+  snapshotIndex = 0,
+  onNodeClick,
+  nodeTypes: customNodeTypes,
+  unstyled = false,
+  className,
+  style
+}) {
+  const nodeTypes2 = customNodeTypes ?? defaultNodeTypes;
+  const overlay = useMemo2(() => {
+    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 layout = useMemo2(() => {
+    if (!spec) return null;
+    return specToLayout(spec);
+  }, [spec]);
+  const { nodes, edges } = useMemo2(() => {
+    if (!layout) return { nodes: [], edges: [] };
+    return applyOverlay(layout, overlay);
+  }, [layout, overlay]);
+  const handleNodeClick = useCallback2(
+    (_, node) => {
+      if (!onNodeClick) return;
+      onNodeClick(node.id);
     },
-    []
+    [onNodeClick]
+  );
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className,
+      style: { width: "100%", height: "100%", ...style },
+      "data-fp": "traced-flowchart",
+      children: /* @__PURE__ */ jsxs2(
+        ReactFlow2,
+        {
+          nodes,
+          edges,
+          onNodeClick: handleNodeClick,
+          nodeTypes: nodeTypes2,
+          fitView: true,
+          fitViewOptions: { padding: 0.3 },
+          proOptions: { hideAttribution: true },
+          panOnDrag: false,
+          zoomOnScroll: false,
+          zoomOnPinch: false,
+          zoomOnDoubleClick: false,
+          preventScrolling: false,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !!onNodeClick,
+          children: [
+            /* @__PURE__ */ jsx4(FitViewOnResize, {}),
+            !unstyled && /* @__PURE__ */ jsx4(Background2, { variant: BackgroundVariant2.Dots, gap: 16, size: 1 })
+          ]
+        }
+      )
+    }
   );
-  return {
-    breadcrumbs,
-    nodes,
-    edges,
-    handleNodeClick,
-    navigateTo,
-    isInSubflow: stack.length > 0,
-    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";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
   breadcrumbs,
   onNavigate
 }) {
   if (breadcrumbs.length <= 1) return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       style: {
@@ -673,10 +973,10 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
       },
       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(
+        return /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx5(
               "span",
               {
                 style: {
@@ -686,7 +986,7 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
                 children: crumb.label
               }
             ),
-            crumb.description && /* @__PURE__ */ jsxs2(
+            crumb.description && /* @__PURE__ */ jsxs3(
               "span",
               {
                 style: {
@@ -700,7 +1000,7 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
                 ]
               }
             )
-          ] }) : /* @__PURE__ */ jsx4(
+          ] }) : /* @__PURE__ */ jsx5(
             "button",
             {
               onClick: () => onNavigate(i),
@@ -731,13 +1031,83 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
   );
 });
 
+// src/components/FlowchartView/useSubflowNavigation.ts
+import { useState as useState2, useCallback as useCallback3, useMemo as useMemo3 } from "react";
+function useSubflowNavigation(rootSpec, overlay, colors) {
+  const [stack, setStack] = useState2([]);
+  const currentSpec = stack.length > 0 ? stack[stack.length - 1].spec : rootSpec;
+  const { nodes, edges } = useMemo3(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay, colors);
+  }, [currentSpec, overlay, colors]);
+  const subflowMap = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!currentSpec) return map;
+    function collectSubflows(node) {
+      if (node.isSubflowRoot && node.subflowStructure) {
+        const id = node.name || node.id || "";
+        map.set(id, node);
+      }
+      if (node.children) node.children.forEach(collectSubflows);
+      if (node.next) collectSubflows(node.next);
+    }
+    collectSubflows(currentSpec);
+    return map;
+  }, [currentSpec]);
+  const breadcrumbs = useMemo3(() => {
+    const root = {
+      label: rootSpec?.name || "Flowchart",
+      spec: rootSpec,
+      description: rootSpec?.description
+    };
+    return [root, ...stack];
+  }, [rootSpec, stack]);
+  const handleNodeClick = useCallback3(
+    (nodeId) => {
+      const subflowNode = subflowMap.get(nodeId);
+      if (!subflowNode?.subflowStructure) return false;
+      setStack((prev) => [
+        ...prev,
+        {
+          label: subflowNode.subflowName || subflowNode.name,
+          spec: subflowNode.subflowStructure,
+          description: subflowNode.description
+        }
+      ]);
+      return true;
+    },
+    [subflowMap]
+  );
+  const navigateTo = useCallback3(
+    (level) => {
+      if (level === 0) {
+        setStack([]);
+      } else {
+        setStack((prev) => prev.slice(0, level));
+      }
+    },
+    []
+  );
+  return {
+    breadcrumbs,
+    nodes,
+    edges,
+    handleNodeClick,
+    navigateTo,
+    isInSubflow: stack.length > 0,
+    currentSubflowNodeName: stack.length > 0 ? stack[stack.length - 1].label : null
+  };
+}
+
 // 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";
+import { memo as memo3, useState as useState3, useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function specToTree(node) {
+  if (!node) return [];
   const entries = [];
   const seen = /* @__PURE__ */ new Set();
-  function walk2(n) {
+  function walk(n) {
+    if (!n) return;
     const id = n.name || n.id || "";
     if (seen.has(id)) return;
     seen.add(id);
@@ -753,14 +1123,14 @@ function specToTree(node) {
     entries.push(entry);
     if (n.children) {
       for (const child of n.children) {
-        walk2(child);
+        if (child) walk(child);
       }
     }
     if (n.next) {
-      walk2(n.next);
+      walk(n.next);
     }
   }
-  walk2(node);
+  walk(node);
   return entries;
 }
 var TreeNode = memo3(function TreeNode2({
@@ -770,18 +1140,18 @@ var TreeNode = memo3(function TreeNode2({
   doneStages,
   onNodeSelect
 }) {
-  const [expanded, setExpanded] = useState2(true);
+  const [expanded, setExpanded] = useState3(true);
   const hasChildren = entry.children && entry.children.length > 0;
   const isActive = activeStage === entry.name;
   const isDone = doneStages?.has(entry.name);
-  const handleClick = useCallback3(() => {
+  const handleClick = useCallback4(() => {
     if (hasChildren) {
       setExpanded((prev) => !prev);
     }
     onNodeSelect?.(entry.name, !!entry.isSubflow);
   }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         onClick: handleClick,
@@ -812,7 +1182,7 @@ var TreeNode = memo3(function TreeNode2({
           }
         },
         children: [
-          hasChildren ? /* @__PURE__ */ jsx5(
+          hasChildren ? /* @__PURE__ */ jsx6(
             "span",
             {
               style: {
@@ -827,8 +1197,8 @@ var TreeNode = memo3(function TreeNode2({
               },
               children: "\u25B6"
             }
-          ) : /* @__PURE__ */ jsx5("span", { style: { width: 12, flexShrink: 0 } }),
-          /* @__PURE__ */ jsx5(
+          ) : /* @__PURE__ */ jsx6("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx6(
             "span",
             {
               style: {
@@ -840,8 +1210,8 @@ var TreeNode = memo3(function TreeNode2({
               }
             }
           ),
-          /* @__PURE__ */ jsxs3("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs4(
               "span",
               {
                 style: {
@@ -853,11 +1223,11 @@ var TreeNode = memo3(function TreeNode2({
                 },
                 children: [
                   entry.name,
-                  entry.isSubflow && /* @__PURE__ */ jsx5("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                  entry.isSubflow && /* @__PURE__ */ jsx6("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
                 ]
               }
             ),
-            entry.description && /* @__PURE__ */ jsx5(
+            entry.description && /* @__PURE__ */ jsx6(
               "span",
               {
                 style: {
@@ -874,7 +1244,7 @@ var TreeNode = memo3(function TreeNode2({
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ jsx5("div", { children: entry.children.map((child, i) => /* @__PURE__ */ jsx5(
+    hasChildren && expanded && /* @__PURE__ */ jsx6("div", { children: entry.children.map((child, i) => /* @__PURE__ */ jsx6(
       TreeNode2,
       {
         entry: child,
@@ -883,12 +1253,12 @@ var TreeNode = memo3(function TreeNode2({
         doneStages,
         onNodeSelect
       },
-      `${child.name}-${i}`
+      child.subflowId ?? `${child.name}-${i}`
     )) })
   ] });
 });
 var SectionLabel = memo3(function SectionLabel2({ children }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       style: {
@@ -912,21 +1282,10 @@ var SubflowTree = memo3(function SubflowTree2({
   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(
+  const tree = useMemo4(() => specToTree(spec), [spec]);
+  const subflowStages = useMemo4(() => tree.filter((e) => e.isSubflow), [tree]);
+  if (subflowStages.length === 0) return null;
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className,
@@ -944,185 +1303,28 @@ var SubflowTree = memo3(function SubflowTree2({
         ...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,
+        !unstyled && /* @__PURE__ */ jsx6(SectionLabel, { children: "Subflows" }),
+        subflowStages.map((entry, i) => /* @__PURE__ */ jsx6(
+          TreeNode,
           {
-            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 })
-            }
-          ) })
-        ] })
+            entry,
+            depth: 0,
+            activeStage,
+            doneStages,
+            onNodeSelect
+          },
+          entry.subflowId ?? `${entry.name}-${i}`
+        ))
       ]
     }
   );
-}
+});
 
 // src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
 import { useState as useState5 } from "react";
 
 // src/components/MemoryInspector/MemoryInspector.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo5, useRef as useRef2 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function MemoryInspector({
   data,
@@ -1135,6 +1337,7 @@ function MemoryInspector({
   className,
   style
 }) {
+  const cacheRef = useRef2(null);
   const { memory, newKeys } = useMemo5(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
@@ -1142,21 +1345,37 @@ function MemoryInspector({
     if (!snapshots || snapshots.length === 0) {
       return { memory: {}, newKeys: /* @__PURE__ */ new Set() };
     }
-    const merged = {};
-    for (let i = 0; i <= Math.min(selectedIndex, snapshots.length - 1); i++) {
-      Object.assign(merged, snapshots[i]?.memory);
+    const safeIdx = Math.min(selectedIndex, snapshots.length - 1);
+    let merged;
+    const cache = cacheRef.current;
+    if (cache && cache.snapshots === snapshots && cache.index <= safeIdx) {
+      merged = { ...cache.accumulated };
+      for (let i = cache.index + 1; i <= safeIdx; i++) {
+        Object.assign(merged, snapshots[i]?.memory);
+      }
+    } else {
+      merged = {};
+      for (let i = 0; i <= safeIdx; i++) {
+        Object.assign(merged, snapshots[i]?.memory);
+      }
     }
+    cacheRef.current = { snapshots, index: safeIdx, accumulated: merged };
     const nk = /* @__PURE__ */ new Set();
-    if (highlightNew && selectedIndex > 0) {
-      const prev = {};
-      for (let i = 0; i < selectedIndex; i++) {
-        Object.assign(prev, snapshots[i]?.memory);
+    if (highlightNew && safeIdx > 0) {
+      let prev;
+      if (cache && cache.snapshots === snapshots && cache.index === safeIdx - 1) {
+        prev = cache.accumulated;
+      } else {
+        prev = {};
+        for (let i = 0; i < safeIdx; i++) {
+          Object.assign(prev, snapshots[i]?.memory);
+        }
       }
-      const current = snapshots[selectedIndex]?.memory ?? {};
+      const current = snapshots[safeIdx]?.memory ?? {};
       for (const k of Object.keys(current)) {
         if (!(k in prev)) nk.add(k);
       }
-    } else if (highlightNew && selectedIndex === 0 && snapshots[0]) {
+    } else if (highlightNew && safeIdx === 0 && snapshots[0]) {
       for (const k of Object.keys(snapshots[0].memory)) nk.add(k);
     }
     return { memory: merged, newKeys: nk };
@@ -1165,9 +1384,9 @@ function MemoryInspector({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ jsxs5("div", { className, style, "data-fp": "memory-inspector", children: [
+    return /* @__PURE__ */ jsxs5("div", { className, style, "data-fp": "memory-inspector", role: "region", "aria-label": "Memory state", children: [
       /* @__PURE__ */ jsx7("div", { "data-fp": "memory-label", children: "Memory State" }),
-      /* @__PURE__ */ jsx7("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+      /* @__PURE__ */ jsx7("pre", { "data-fp": "memory-json", children: /* @__PURE__ */ jsx7("code", { children: JSON.stringify(memory, null, 2) }) })
     ] });
   }
   return /* @__PURE__ */ jsxs5(
@@ -1180,6 +1399,8 @@ function MemoryInspector({
         ...style
       },
       "data-fp": "memory-inspector",
+      role: "region",
+      "aria-label": "Memory state",
       children: [
         /* @__PURE__ */ jsx7(
           "span",
@@ -1412,7 +1633,7 @@ function NarrativeLog({
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-import { useState as useState4, useMemo as useMemo7, useRef, useEffect } from "react";
+import { useState as useState4, useMemo as useMemo7, useRef as useRef3, useEffect as useEffect4 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function GanttTimeline({
   snapshots,
@@ -1425,8 +1646,8 @@ function GanttTimeline({
   maxVisibleRows = 5
 }) {
   const [expanded, setExpanded] = useState4(false);
-  const activeRowRef = useRef(null);
-  const scrollContainerRef = useRef(null);
+  const activeRowRef = useRef3(null);
+  const scrollContainerRef = useRef3(null);
   const totalWallTime = useMemo7(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
@@ -1438,7 +1659,7 @@ function GanttTimeline({
   const rowHeight = size === "compact" ? 18 : 22;
   const collapsible = maxVisibleRows > 0 && snapshots.length > maxVisibleRows;
   const showAll = expanded || !collapsible;
-  useEffect(() => {
+  useEffect4(() => {
     if (!showAll && activeRowRef.current && scrollContainerRef.current) {
       activeRowRef.current.scrollIntoView({
         block: "nearest",
@@ -1447,12 +1668,15 @@ function GanttTimeline({
     }
   }, [selectedIndex, showAll]);
   if (unstyled) {
-    return /* @__PURE__ */ jsx9("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx9("div", { className, style, "data-fp": "gantt-timeline", role: "listbox", "aria-label": "Execution timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs7(
       "div",
       {
         "data-fp": "gantt-bar",
         "data-selected": idx === selectedIndex,
         "data-visible": idx <= selectedIndex,
+        role: "option",
+        "aria-selected": idx === selectedIndex,
+        "aria-label": `${snap.stageLabel}, ${snap.durationMs}ms`,
         onClick: () => onSelect?.(idx),
         children: [
           /* @__PURE__ */ jsx9("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
@@ -1462,7 +1686,7 @@ function GanttTimeline({
           ] })
         ]
       },
-      snap.stageName
+      `${snap.stageName}-${idx}`
     )) });
   }
   return /* @__PURE__ */ jsxs7(
@@ -1518,6 +1742,8 @@ function GanttTimeline({
           "div",
           {
             ref: scrollContainerRef,
+            role: "listbox",
+            "aria-label": "Execution timeline",
             style: {
               marginTop: 8,
               display: "flex",
@@ -1538,6 +1764,9 @@ function GanttTimeline({
                 "div",
                 {
                   ref: isSelected ? activeRowRef : void 0,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-label": `${snap.stageLabel}, ${snap.durationMs}ms`,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -1553,6 +1782,7 @@ function GanttTimeline({
                     /* @__PURE__ */ jsx9(
                       "span",
                       {
+                        title: snap.stageLabel,
                         style: {
                           width: labelWidth,
                           fontSize: fs.small,
@@ -1612,7 +1842,7 @@ function GanttTimeline({
                     )
                   ]
                 },
-                snap.stageName
+                `${snap.stageName}-${idx}`
               );
             })
           }
@@ -1966,6 +2196,8 @@ export {
   SubflowTree,
   TimeTravelDebugger,
   TracedFlowchartView,
+  applyOverlay,
+  specToLayout,
   specToReactFlow,
   useSubflowNavigation
 };