footprint-explainable-ui 0.28.0 → 0.29.0

package/dist/index.cjs

@@ -50,13 +50,16 @@ __export(src_exports, {
   SubflowTree: () => SubflowTree,
   TimeTravelControls: () => TimeTravelControls,
   TraceViewer: () => TraceViewer,
+  TraceWalkCard: () => TraceWalkCard,
   buildEntryRangeIndex: () => buildEntryRangeIndex,
+  buildTraceWalk: () => buildTraceWalk,
   computeRevealedEntryCount: () => computeRevealedEntryCount,
   coolDark: () => coolDark,
   coolLight: () => coolLight,
   createSnapshots: () => createSnapshots,
   defaultTokens: () => defaultTokens,
   extractSubflowNarrative: () => extractSubflowNarrative,
+  formatTraceWalk: () => formatTraceWalk,
   mergeWritePatch: () => mergeWritePatch,
   rawDefaults: () => rawDefaults,
   subflowResultToSnapshots: () => subflowResultToSnapshots,
@@ -2063,6 +2066,7 @@ function TimeTravelControls({
   selectedIndex,
   onIndexChange,
   autoPlayable = true,
+  tracing = null,
   size = "default",
   unstyled = false,
   className,
@@ -2071,10 +2075,36 @@ function TimeTravelControls({
   const [playing, setPlaying] = (0, import_react10.useState)(false);
   const playRef = (0, import_react10.useRef)(null);
   const total = snapshots.length;
-  const canPrev = selectedIndex > 0;
-  const canNext = selectedIndex < total - 1;
+  const isTracing = !!tracing;
+  const stopSet = (0, import_react10.useMemo)(
+    () => tracing ? new Set(tracing.stopIndices) : null,
+    [tracing]
+  );
+  const earlierStop = (0, import_react10.useMemo)(() => {
+    if (!tracing) return null;
+    const earlier = tracing.stopIndices.filter((i) => i < selectedIndex);
+    return earlier.length > 0 ? earlier[earlier.length - 1] : null;
+  }, [tracing, selectedIndex]);
+  const laterStop = (0, import_react10.useMemo)(() => {
+    if (!tracing) return null;
+    return tracing.stopIndices.find((i) => i > selectedIndex) ?? null;
+  }, [tracing, selectedIndex]);
+  const canPrev = isTracing ? earlierStop !== null : selectedIndex > 0;
+  const canNext = isTracing ? laterStop !== null : selectedIndex < total - 1;
+  const goPrev = (0, import_react10.useCallback)(() => {
+    setPlaying(false);
+    if (isTracing) {
+      if (earlierStop !== null) onIndexChange(earlierStop);
+    } else if (selectedIndex > 0) onIndexChange(selectedIndex - 1);
+  }, [isTracing, earlierStop, selectedIndex, onIndexChange]);
+  const goNext = (0, import_react10.useCallback)(() => {
+    setPlaying(false);
+    if (isTracing) {
+      if (laterStop !== null) onIndexChange(laterStop);
+    } else if (selectedIndex < total - 1) onIndexChange(selectedIndex + 1);
+  }, [isTracing, laterStop, selectedIndex, total, onIndexChange]);
   (0, import_react10.useEffect)(() => {
-    if (!playing || !autoPlayable) return;
+    if (!playing || !autoPlayable || isTracing) return;
     if (selectedIndex >= total - 1) {
       setPlaying(false);
       return;
@@ -2090,7 +2120,7 @@ function TimeTravelControls({
     return () => {
       if (playRef.current) clearTimeout(playRef.current);
     };
-  }, [playing, selectedIndex, snapshots, total, onIndexChange, autoPlayable]);
+  }, [playing, selectedIndex, snapshots, total, onIndexChange, autoPlayable, isTracing]);
   const togglePlay = (0, import_react10.useCallback)(() => {
     if (playing) {
       setPlaying(false);
@@ -2103,20 +2133,22 @@ function TimeTravelControls({
     (e) => {
       if (e.key === "ArrowLeft" && canPrev && !playing) {
         e.preventDefault();
-        setPlaying(false);
-        onIndexChange(selectedIndex - 1);
+        goPrev();
       } else if (e.key === "ArrowRight" && canNext && !playing) {
         e.preventDefault();
-        setPlaying(false);
-        onIndexChange(selectedIndex + 1);
-      } else if (e.key === " " && autoPlayable) {
+        goNext();
+      } else if (e.key === "Escape" && isTracing) {
+        e.preventDefault();
+        tracing.onExit();
+      } else if (e.key === " " && autoPlayable && !isTracing) {
         e.preventDefault();
         togglePlay();
       }
     },
-    [canPrev, canNext, playing, selectedIndex, onIndexChange, autoPlayable, togglePlay]
+    [canPrev, canNext, playing, goPrev, goNext, autoPlayable, togglePlay, isTracing, tracing]
   );
   const fs = fontSize[size];
+  const accent = "var(--fp-accent, #6366f1)";
   if (unstyled) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
@@ -2124,52 +2156,69 @@ function TimeTravelControls({
         className,
         style,
         "data-fp": "time-travel-controls",
+        "data-tracing": isTracing || void 0,
         role: "toolbar",
-        "aria-label": "Time travel controls",
+        "aria-label": isTracing ? `Tracing ${tracing.tracedKey}` : "Time travel controls",
         tabIndex: 0,
         onKeyDown: handleKeyDown,
         children: [
+          isTracing && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { "data-fp": "tt-tracing-header", children: [
+            "Tracing ",
+            tracing.tracedKey,
+            tracing.viaKey && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              " ",
+              "\u25B8 via ",
+              tracing.viaKey,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "data-fp": "tt-show-all", onClick: tracing.onShowAll, children: "show all" })
+            ] }),
+            " \xB7 ",
+            "stop ",
+            tracing.stopOrdinal,
+            " of ",
+            tracing.totalStops,
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "data-fp": "tt-exit-tracing", onClick: tracing.onExit, "aria-label": "Exit tracing", children: "Done" })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               "data-fp": "tt-prev",
               disabled: !canPrev || playing,
-              onClick: () => {
-                setPlaying(false);
-                onIndexChange(selectedIndex - 1);
-              },
-              "aria-label": "Previous stage",
-              children: "Prev"
+              onClick: goPrev,
+              "aria-label": isTracing ? "Earlier cause" : "Previous stage",
+              children: isTracing ? "Earlier cause" : "Prev"
             }
           ),
-          autoPlayable && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "data-fp": "tt-play", onClick: togglePlay, "aria-label": playing ? "Pause" : "Play", children: playing ? "Pause" : "Play" }),
+          autoPlayable && !isTracing && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "data-fp": "tt-play", onClick: togglePlay, "aria-label": playing ? "Pause" : "Play", children: playing ? "Pause" : "Play" }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               "data-fp": "tt-next",
               disabled: !canNext || playing,
-              onClick: () => {
-                setPlaying(false);
-                onIndexChange(selectedIndex + 1);
-              },
-              "aria-label": "Next stage",
-              children: "Next"
+              onClick: goNext,
+              "aria-label": isTracing ? "Toward result" : "Next stage",
+              children: isTracing ? "Toward result" : "Next"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-fp": "tt-ticks", children: snapshots.map((snap, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "button",
-            {
-              "data-fp": "tt-tick",
-              "data-active": i === selectedIndex,
-              "data-done": i < selectedIndex,
-              onClick: () => {
-                setPlaying(false);
-                onIndexChange(i);
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-fp": "tt-ticks", children: snapshots.map((snap, i) => {
+            const isStop = !stopSet || stopSet.has(i);
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                "data-fp": "tt-tick",
+                "data-active": i === selectedIndex,
+                "data-done": i < selectedIndex,
+                "data-stop": isTracing ? isStop : void 0,
+                disabled: isTracing && !isStop,
+                onClick: () => {
+                  setPlaying(false);
+                  onIndexChange(i);
+                },
+                title: snap.stageLabel
               },
-              title: snap.stageLabel
-            },
-            i
-          )) })
+              i
+            );
+          }) })
         ]
       }
     );
@@ -2193,7 +2242,7 @@ function TimeTravelControls({
       style: {
         padding: "6px 12px",
         background: theme.bgSecondary,
-        borderBottom: `1px solid ${theme.border}`,
+        borderBottom: isTracing ? `2px solid ${accent}` : `1px solid ${theme.border}`,
         display: "flex",
         alignItems: "center",
         gap: 6,
@@ -2201,25 +2250,86 @@ function TimeTravelControls({
         ...style
       },
       "data-fp": "time-travel-controls",
+      "data-tracing": isTracing || void 0,
       role: "toolbar",
-      "aria-label": "Time travel controls",
+      "aria-label": isTracing ? `Tracing ${tracing.tracedKey}` : "Time travel controls",
       tabIndex: 0,
       onKeyDown: handleKeyDown,
       children: [
+        isTracing && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "span",
+          {
+            "data-fp": "tt-tracing-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              flexShrink: 0,
+              fontSize: fs.body
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: 700,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: "#fff",
+                    background: accent,
+                    borderRadius: 4,
+                    padding: "2px 7px"
+                  },
+                  children: "Tracing"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontFamily: "monospace", fontWeight: 600, color: accent }, children: tracing.tracedKey }),
+              tracing.viaKey && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: theme.textMuted }, children: [
+                "\u25B8 via",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontFamily: "monospace", color: theme.textSecondary }, children: tracing.viaKey }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "button",
+                  {
+                    "data-fp": "tt-show-all",
+                    onClick: tracing.onShowAll,
+                    style: {
+                      border: "none",
+                      background: "transparent",
+                      color: accent,
+                      cursor: "pointer",
+                      fontSize: fs.body,
+                      textDecoration: "underline",
+                      padding: 0
+                    },
+                    children: "show all"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: theme.textMuted }, children: [
+                "\xB7 stop ",
+                tracing.stopOrdinal,
+                " of ",
+                tracing.totalStops
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             style: btnStyle(!canPrev || playing),
             disabled: !canPrev || playing,
-            onClick: () => {
-              setPlaying(false);
-              onIndexChange(selectedIndex - 1);
-            },
-            "aria-label": "Previous stage",
-            children: "\u25C0"
+            onClick: goPrev,
+            "aria-label": isTracing ? "Earlier cause" : "Previous stage",
+            title: isTracing ? "Earlier cause" : "Previous stage",
+            "data-fp": "tt-prev",
+            children: isTracing ? "\u25C0 earlier cause" : "\u25C0"
           }
         ),
-        autoPlayable && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        autoPlayable && !isTracing && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             onClick: togglePlay,
@@ -2247,12 +2357,11 @@ function TimeTravelControls({
           {
             style: btnStyle(!canNext || playing),
             disabled: !canNext || playing,
-            onClick: () => {
-              setPlaying(false);
-              onIndexChange(selectedIndex + 1);
-            },
-            "aria-label": "Next stage",
-            children: "\u25B6"
+            onClick: goNext,
+            "aria-label": isTracing ? "Toward result" : "Next stage",
+            title: isTracing ? "Toward result" : "Next stage",
+            "data-fp": "tt-next",
+            children: isTracing ? "toward result \u25B6" : "\u25B6"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2268,6 +2377,8 @@ function TimeTravelControls({
             children: snapshots.map((snap, i) => {
               const isActive = i === selectedIndex;
               const isDone = i < selectedIndex;
+              const isStop = !stopSet || stopSet.has(i);
+              const unlandable = isTracing && !isStop;
               return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
@@ -2275,15 +2386,19 @@ function TimeTravelControls({
                     setPlaying(false);
                     onIndexChange(i);
                   },
-                  title: snap.stageLabel,
+                  disabled: unlandable,
+                  title: unlandable ? `${snap.stageLabel} (not part of this trace)` : snap.stageLabel,
+                  "data-fp": "tt-tick",
+                  "data-stop": isTracing ? isStop : void 0,
+                  "data-active": isActive || void 0,
                   style: {
                     flex: 1,
-                    height: isActive ? 14 : 8,
+                    height: isActive ? 14 : unlandable ? 4 : 8,
                     borderRadius: 3,
                     border: "none",
-                    cursor: "pointer",
-                    background: isActive ? theme.primary : isDone ? theme.success : theme.bgTertiary,
-                    opacity: isDone || isActive ? 1 : 0.4,
+                    cursor: unlandable ? "default" : "pointer",
+                    background: isTracing ? isActive ? accent : isStop ? "color-mix(in srgb, " + accent + " 55%, transparent)" : theme.bgTertiary : isActive ? theme.primary : isDone ? theme.success : theme.bgTertiary,
+                    opacity: unlandable ? 0.3 : isTracing || isDone || isActive ? 1 : 0.4,
                     transition: "all 0.15s ease"
                   }
                 },
@@ -2291,6 +2406,16 @@ function TimeTravelControls({
               );
             })
           }
+        ),
+        isTracing && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            "data-fp": "tt-exit-tracing",
+            onClick: tracing.onExit,
+            "aria-label": "Exit tracing",
+            style: { ...btnStyle(false), background: "transparent" },
+            children: "Done \u2715"
+          }
         )
       ]
     }
@@ -2298,7 +2423,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/ExplainableShell/_internal/dataTrace.ts
 function readsByStep(tree) {
@@ -2361,6 +2486,589 @@ function buildDataTrace(commitLog, executionTree, targetRuntimeStageId, maxDepth
   return { frames, readsAvailable };
 }
 
+// src/components/ExplainableShell/_internal/traceWalk.ts
+var DEFAULT_MAX_DEPTH = 10;
+var DEFAULT_MAX_FRAMES = 50;
+function buildTraceWalk(commitLog, executionTree, key, opts) {
+  const log = commitLog ?? [];
+  const cutoff = opts?.beforeCommitIdx ?? log.length;
+  const maxDepth = opts?.maxDepth ?? DEFAULT_MAX_DEPTH;
+  const maxFrames = opts?.maxFrames ?? DEFAULT_MAX_FRAMES;
+  const writerOf = (k, beforeIdx) => {
+    for (let i = Math.min(beforeIdx, log.length) - 1; i >= 0; i--) {
+      if (log[i].trace.some((t) => t.path === k)) return i;
+    }
+    return -1;
+  };
+  const anchorIdx = writerOf(key, cutoff);
+  if (anchorIdx < 0) {
+    const firstEver = log.findIndex((c) => c.trace.some((t) => t.path === key));
+    const missing = firstEver < 0 ? { reason: "never-written" } : {
+      reason: "not-yet-written",
+      firstWriteCommitIdx: firstEver,
+      firstWriterRuntimeStageId: log[firstEver].runtimeStageId,
+      firstWriterStageName: log[firstEver].stage
+    };
+    return { key, stops: [], missing, inputTermini: [], readsAvailable: true, truncated: false };
+  }
+  const slice = buildDataTrace(
+    log.slice(0, anchorIdx + 1),
+    executionTree,
+    log[anchorIdx].runtimeStageId,
+    maxDepth,
+    maxFrames + 1
+  );
+  const truncated = slice.frames.length > maxFrames;
+  const frames = truncated ? slice.frames.slice(0, maxFrames) : slice.frames;
+  const idxOf = /* @__PURE__ */ new Map();
+  for (let i = 0; i < log.length; i++) idxOf.set(log[i].runtimeStageId, i);
+  const readsOf = readKeysByStep(executionTree);
+  const inputTermini = [];
+  const terminiSeen = /* @__PURE__ */ new Set();
+  const stops = frames.map((f) => {
+    const commitIdx = idxOf.get(f.runtimeStageId) ?? -1;
+    const ingredients = (readsOf.get(f.runtimeStageId) ?? []).map((k) => {
+      const w = writerOf(k, commitIdx);
+      if (w < 0 && !terminiSeen.has(k)) {
+        terminiSeen.add(k);
+        inputTermini.push(k);
+      }
+      return {
+        key: k,
+        writerRuntimeStageId: w >= 0 ? log[w].runtimeStageId : null,
+        writerStageName: w >= 0 ? log[w].stage : null,
+        writerCommitIdx: w >= 0 ? w : null
+      };
+    });
+    return {
+      runtimeStageId: f.runtimeStageId,
+      stageId: f.stageId,
+      stageName: f.stageName,
+      commitIdx,
+      contributedKeys: [],
+      keysWritten: f.keysWritten,
+      ingredients,
+      depth: f.depth,
+      loopPass: 0
+    };
+  });
+  const stopById = new Map(stops.map((s) => [s.runtimeStageId, s]));
+  const contributed = /* @__PURE__ */ new Map();
+  contributed.set(log[anchorIdx].runtimeStageId, /* @__PURE__ */ new Set([key]));
+  for (const s of stops) {
+    for (const ing of s.ingredients) {
+      if (!ing.writerRuntimeStageId || !stopById.has(ing.writerRuntimeStageId)) continue;
+      const set = contributed.get(ing.writerRuntimeStageId) ?? /* @__PURE__ */ new Set();
+      set.add(ing.key);
+      contributed.set(ing.writerRuntimeStageId, set);
+    }
+  }
+  for (const s of stops) s.contributedKeys = [...contributed.get(s.runtimeStageId) ?? []];
+  stops.sort((a, b) => b.commitIdx - a.commitIdx);
+  const byStagePart = /* @__PURE__ */ new Map();
+  for (const s of stops) {
+    const part = s.runtimeStageId.split("#")[0];
+    const arr = byStagePart.get(part) ?? [];
+    arr.push(s);
+    byStagePart.set(part, arr);
+  }
+  for (const arr of byStagePart.values()) {
+    if (arr.length < 2) continue;
+    for (let i = 0; i < arr.length; i++) arr[i].loopPass = arr.length - i;
+  }
+  return { key, stops, missing: null, inputTermini, readsAvailable: slice.readsAvailable, truncated };
+}
+function readKeysByStep(tree) {
+  const byStep = /* @__PURE__ */ new Map();
+  const root = tree;
+  if (!root) return byStep;
+  const visited = /* @__PURE__ */ new Set();
+  const stack = [root];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (visited.has(node)) continue;
+    visited.add(node);
+    if (node.runtimeStageId && node.stageReads) {
+      const keys = Object.keys(node.stageReads);
+      if (keys.length > 0) byStep.set(node.runtimeStageId, keys);
+    }
+    if (node.next) stack.push(node.next);
+    if (node.children) for (const c of node.children) stack.push(c);
+  }
+  return byStep;
+}
+function formatTraceWalk(walk, stepNumberOf) {
+  const lines = [];
+  if (walk.missing) {
+    if (walk.missing.reason === "never-written") {
+      lines.push(
+        `\`${walk.key}\` was never written in this run \u2014 it arrived with the run's inputs.`
+      );
+    } else {
+      const at = walk.missing.firstWriterRuntimeStageId ? stepNumberOf(walk.missing.firstWriterRuntimeStageId) : null;
+      lines.push(
+        `\`${walk.key}\` has not been written yet at this moment \u2014 its first write happens later` + (walk.missing.firstWriterStageName ? `, at ${walk.missing.firstWriterStageName}${at ? ` (step ${at})` : ""}.` : ".")
+      );
+    }
+    return lines.join("\n");
+  }
+  lines.push(`Tracing \`${walk.key}\` \u2014 ${walk.stops.length} stops, newest first.`);
+  walk.stops.forEach((stop, i) => {
+    const step = stepNumberOf(stop.runtimeStageId);
+    const pass = stop.loopPass > 0 ? ` (pass ${stop.loopPass})` : "";
+    const made = stop.ingredients.length > 0 ? ` \xB7 made from: ${stop.ingredients.map(
+      (ing) => ing.writerRuntimeStageId ? `${ing.key} (\u2190 ${ing.writerStageName}${stepNumberOf(ing.writerRuntimeStageId) ? `, step ${stepNumberOf(ing.writerRuntimeStageId)}` : ""})` : `${ing.key} (run input \u2014 never written)`
+    ).join(", ")}` : walk.readsAvailable ? " \xB7 reads nothing \u2014 origin" : "";
+    lines.push(
+      `stop ${i + 1}/${walk.stops.length} \xB7 ${step ? `step ${step} \xB7 ` : ""}${stop.stageName}${pass} wrote \`${stop.contributedKeys.join("`, `")}\`${made}`
+    );
+  });
+  if (walk.inputTermini.length > 0) {
+    lines.push(`run inputs (never written): ${walk.inputTermini.join(", ")}`);
+  }
+  if (!walk.readsAvailable) {
+    lines.push("\u26A0 reads were not recorded \u2014 dependencies are unknowable, not absent.");
+  }
+  if (walk.truncated) {
+    lines.push("\u26A0 walk truncated at its frame budget \u2014 the earliest stop may not be the true origin.");
+  }
+  return lines.join("\n");
+}
+
+// src/components/DataTracePanel/TraceWalkCard.tsx
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CHIP_COLORS = ["#0d9488", "#d97706", "#7c3aed", "#e11d48"];
+var TraceWalkCard = (0, import_react11.memo)(function TraceWalkCard2({
+  walk,
+  cursorRuntimeStageId,
+  viaKey,
+  stepNumberOf,
+  previewValueOf,
+  onFollowIngredient,
+  onJumpToStop,
+  onShowAll,
+  onExit
+}) {
+  const [copied, setCopied] = (0, import_react11.useState)(false);
+  const accent = "var(--fp-accent, #6366f1)";
+  const currentIdx = (0, import_react11.useMemo)(() => {
+    if (!cursorRuntimeStageId) return 0;
+    const i = walk.stops.findIndex((s) => s.runtimeStageId === cursorRuntimeStageId);
+    return i >= 0 ? i : 0;
+  }, [walk, cursorRuntimeStageId]);
+  const current = walk.stops[currentIdx];
+  const copyStory = () => {
+    const text = formatTraceWalk(walk, stepNumberOf);
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    });
+  };
+  if (walk.missing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "trace-walk-card", "data-missing": walk.missing.reason, style: { padding: "14px", fontSize: 13, lineHeight: 1.55 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CardHeader, { label: `Why this value \u2014 \`${walk.key}\``, onExit }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { color: theme.textPrimary, marginTop: 8 }, children: walk.missing.reason === "never-written" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { style: { color: accent }, children: walk.key }),
+        " was ",
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("b", { children: "never written in this run" }),
+        " \u2014 it arrived with the run's inputs."
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { style: { color: accent }, children: walk.key }),
+        " has ",
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("b", { children: "not been written yet at this moment" }),
+        " \u2014 its first write happens later",
+        walk.missing.firstWriterStageName && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          ", at ",
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("b", { children: walk.missing.firstWriterStageName }),
+          walk.missing.firstWriterRuntimeStageId && stepNumberOf(walk.missing.firstWriterRuntimeStageId) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            " (step ",
+            stepNumberOf(walk.missing.firstWriterRuntimeStageId),
+            ")"
+          ] })
+        ] }),
+        "."
+      ] }) })
+    ] });
+  }
+  if (!current) return null;
+  const step = stepNumberOf(current.runtimeStageId);
+  const preview = previewValueOf ? previewValue(previewValueOf(current.contributedKeys[0] ?? walk.key)) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "trace-walk-card", style: { padding: "10px 14px 14px", fontSize: 13, lineHeight: 1.5 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      CardHeader,
+      {
+        label: `Why this value \u2014 stop ${currentIdx + 1} of ${walk.stops.length}`,
+        onExit
+      }
+    ),
+    viaKey && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "twc-breadcrumb", style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { style: { color: accent }, children: walk.key }),
+      " \u25B8 via ",
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { children: viaKey }),
+      onShowAll && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        " \xB7 ",
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            onClick: onShowAll,
+            style: { border: "none", background: "transparent", color: accent, cursor: "pointer", fontSize: 11, textDecoration: "underline", padding: 0 },
+            children: "show all ingredients"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "twc-stop-headline", style: { marginTop: 10, fontWeight: 600, color: theme.textPrimary }, children: [
+      step && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted, fontWeight: 500 }, children: [
+        "Step ",
+        step,
+        " \xB7 "
+      ] }),
+      current.stageName,
+      current.loopPass > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted, fontWeight: 500 }, children: [
+        " (pass ",
+        current.loopPass,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { marginTop: 2, color: theme.textSecondary }, children: [
+      "wrote",
+      " ",
+      current.contributedKeys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("code", { style: { color: accent }, children: [
+        i > 0 && ", ",
+        k
+      ] }, k)),
+      preview !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted }, children: [
+        " = ",
+        preview
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { marginTop: 10 }, children: current.ingredients.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { fontSize: 11, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.5px", fontWeight: 600 }, children: [
+        "Made from ",
+        current.ingredients.length,
+        " ingredient",
+        current.ingredients.length > 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 6 }, children: current.ingredients.map((ing, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        IngredientChip,
+        {
+          ing,
+          color: i < CHIP_COLORS.length ? CHIP_COLORS[i] : theme.textMuted,
+          step: ing.writerRuntimeStageId ? stepNumberOf(ing.writerRuntimeStageId) : null,
+          onFollow: onFollowIngredient
+        },
+        ing.key
+      )) })
+    ] }) : walk.readsAvailable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-fp": "twc-origin", style: { fontSize: 12, color: theme.textMuted, fontStyle: "italic" }, children: "reads nothing \u2014 this is an origin." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-fp": "twc-unknowable", style: { fontSize: 12, color: theme.textMuted, fontStyle: "italic" }, children: "\u26A0 reads were not recorded \u2014 ingredients are unknowable, not absent." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 11, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.5px", fontWeight: 600, marginBottom: 4 }, children: "The story, newest first" }),
+      walk.stops.map((s, i) => {
+        const isCurrent = i === currentIdx;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "button",
+          {
+            "data-fp": "twc-itinerary-row",
+            "data-current": isCurrent || void 0,
+            onClick: () => onJumpToStop?.(s.runtimeStageId),
+            style: {
+              display: "block",
+              width: "100%",
+              textAlign: "left",
+              border: "none",
+              borderLeft: isCurrent ? `3px solid ${accent}` : "3px solid transparent",
+              background: isCurrent ? "var(--fp-accent-bg, rgba(99,102,241,0.12))" : "transparent",
+              padding: "4px 8px",
+              cursor: onJumpToStop ? "pointer" : "default",
+              color: "inherit",
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted }, children: [
+                i + 1,
+                "."
+              ] }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { style: { color: accent }, children: s.contributedKeys.join(", ") }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: theme.textMuted }, children: " \u2190 " }),
+              s.stageName,
+              s.loopPass > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted }, children: [
+                " (pass ",
+                s.loopPass,
+                ")"
+              ] }),
+              stepNumberOf(s.runtimeStageId) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: theme.textMuted }, children: [
+                " \xB7 step ",
+                stepNumberOf(s.runtimeStageId)
+              ] }),
+              s.ingredients.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: "#d97706", fontWeight: 600 }, children: [
+                " \u2442 ",
+                s.ingredients.length
+              ] })
+            ]
+          },
+          s.runtimeStageId
+        );
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 4 }, children: [
+      walk.inputTermini.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "twc-run-inputs", style: { fontSize: 11, color: theme.textMuted }, children: [
+        "\u2691 run inputs (never written): ",
+        walk.inputTermini.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("code", { children: [
+          i > 0 && ", ",
+          k
+        ] }, k))
+      ] }),
+      walk.truncated && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-fp": "twc-truncated", style: { fontSize: 11, color: "#d97706" }, children: "\u26A0 walk truncated at its frame budget \u2014 the earliest stop may not be the true origin." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          "data-fp": "twc-copy-story",
+          onClick: copyStory,
+          style: {
+            alignSelf: "flex-start",
+            marginTop: 4,
+            border: `1px solid ${theme.border}`,
+            background: theme.bgTertiary,
+            color: theme.textPrimary,
+            borderRadius: 6,
+            padding: "4px 10px",
+            fontSize: 11,
+            fontWeight: 600,
+            cursor: "pointer"
+          },
+          children: copied ? "Copied \u2713" : "Copy story"
+        }
+      )
+    ] })
+  ] });
+});
+function CardHeader({ label, onExit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 11, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.5px", fontWeight: 600 }, children: label }),
+    onExit && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "button",
+      {
+        "data-fp": "twc-exit",
+        onClick: onExit,
+        "aria-label": "Exit tracing",
+        style: { border: "none", background: "transparent", color: theme.textMuted, cursor: "pointer", fontSize: 12 },
+        children: "Done \u2715"
+      }
+    )
+  ] });
+}
+function IngredientChip({
+  ing,
+  color,
+  step,
+  onFollow
+}) {
+  const terminus = !ing.writerRuntimeStageId;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "button",
+    {
+      "data-fp": "twc-ingredient",
+      "data-terminus": terminus || void 0,
+      disabled: terminus || !onFollow,
+      onClick: () => onFollow?.(ing),
+      title: terminus ? `${ing.key} was never written \u2014 it came in with the run's inputs` : `Follow ${ing.key} \u2014 re-anchor the walk on its writer`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        border: `1px solid ${terminus ? theme.border : color}`,
+        background: "transparent",
+        color: terminus ? theme.textMuted : color,
+        borderRadius: 12,
+        padding: "3px 10px",
+        fontSize: 11,
+        fontWeight: 600,
+        cursor: terminus || !onFollow ? "default" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { children: ing.key }),
+        terminus ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontWeight: 400 }, children: "\u2014 run input \u2691" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { fontWeight: 400 }, children: [
+          "\u2190 ",
+          ing.writerStageName,
+          step && ` \xB7 step ${step}`
+        ] })
+      ]
+    }
+  );
+}
+function previewValue(v2) {
+  if (v2 === void 0) return null;
+  try {
+    const s = typeof v2 === "string" ? JSON.stringify(v2) : JSON.stringify(v2);
+    if (s === void 0) return null;
+    return s.length > 60 ? `${s.slice(0, 57)}\u2026` : s;
+  } catch {
+    return null;
+  }
+}
+
+// src/components/DataTracePanel/DataTracePanel.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DataTracePanel = (0, import_react12.memo)(function DataTracePanel2({
+  frames,
+  selectedStageId,
+  onFrameClick,
+  fromStageName,
+  note
+}) {
+  const noteLine = note ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", marginBottom: 8 }, children: note }) : null;
+  if (frames.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontWeight: 600,
+            marginBottom: 6
+          },
+          children: "Backward causal chain"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
+      noteLine,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
+    note && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: "4px 12px 0", fontSize: 11, color: theme.textMuted, fontStyle: "italic" }, children: note }),
+    fromStageName && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { padding: "4px 12px 8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontWeight: 600
+          },
+          children: [
+            "Data trace from ",
+            fromStageName
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            fontStyle: "italic",
+            marginTop: 3
+          },
+          children: "Every value here was derived from the stages below."
+        }
+      )
+    ] }),
+    frames.map((frame, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      DataTraceFrame,
+      {
+        frame,
+        isFirst: i === 0,
+        isLast: i === frames.length - 1,
+        isSelected: frame.runtimeStageId === selectedStageId,
+        onClick: onFrameClick
+      },
+      frame.runtimeStageId
+    ))
+  ] });
+});
+var DataTraceFrame = (0, import_react12.memo)(function DataTraceFrame2({
+  frame,
+  isFirst,
+  isLast,
+  isSelected,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      onClick: () => onClick?.(frame.runtimeStageId),
+      style: {
+        display: "block",
+        width: "100%",
+        textAlign: "left",
+        border: "none",
+        background: isSelected ? "var(--fp-accent-bg, rgba(99,102,241,0.12))" : "transparent",
+        padding: "6px 12px 6px 16px",
+        cursor: onClick ? "pointer" : "default",
+        borderLeft: isSelected ? "3px solid var(--fp-accent, #6366f1)" : "3px solid transparent",
+        color: "inherit",
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          !isFirst && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: theme.textMuted, fontSize: 11 }, children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              style: {
+                fontWeight: isFirst ? 600 : 400,
+                color: isFirst ? "var(--fp-accent, #6366f1)" : theme.textPrimary
+              },
+              children: frame.stageName
+            }
+          ),
+          isLast && !isFirst && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                color: theme.textMuted,
+                fontStyle: "italic"
+              },
+              children: "(origin)"
+            }
+          )
+        ] }),
+        frame.keysWritten.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: theme.textMuted,
+              paddingLeft: isFirst ? 0 : 18,
+              marginTop: 2
+            },
+            children: [
+              "wrote:",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: theme.textSecondary }, children: frame.keysWritten.join(", ") })
+            ]
+          }
+        ),
+        frame.linkedBy && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: "var(--fp-accent, #6366f1)",
+              paddingLeft: 18,
+              marginTop: 1
+            },
+            children: [
+              "\u2190 via ",
+              frame.linkedBy
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
   const ranges = /* @__PURE__ */ new Map();
@@ -2682,7 +3390,7 @@ function createSnapshots(stages) {
 }
 
 // src/components/MemoryPanel/MemoryPanel.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function MemoryPanel({
   snapshots,
   selectedIndex,
@@ -2694,12 +3402,12 @@ function MemoryPanel({
   const prevMemory = selectedIndex > 0 ? snapshots[selectedIndex - 1]?.memory ?? null : null;
   const currMemory = snapshots[selectedIndex]?.memory ?? {};
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className, style, "data-fp": "memory-panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoryInspector, { snapshots, selectedIndex, unstyled: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true })
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, style, "data-fp": "memory-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MemoryInspector, { snapshots, selectedIndex, unstyled: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className,
@@ -2711,19 +3419,19 @@ function MemoryPanel({
       },
       "data-fp": "memory-panel",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoryInspector, { snapshots, selectedIndex, size }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeDiff, { previous: prevMemory, current: currMemory, hideUnchanged: true, size }) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MemoryInspector, { snapshots, selectedIndex, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScopeDiff, { previous: prevMemory, current: currMemory, hideUnchanged: true, size }) })
       ]
     }
   );
 }
 
 // src/components/NarrativePanel/NarrativePanel.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/StoryNarrative/StoryNarrative.tsx
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ENTRY_ICONS = {
   stage: { icon: "\u25B8", color: theme.primary, label: "Stage" },
   step: { icon: "\xB7", color: theme.textMuted, label: "Data operation" },
@@ -2746,7 +3454,7 @@ function StoryNarrative({
   const fs = fontSize[size];
   const pad = padding[size];
   const revealedCount = revealedEntryCount;
-  const revealed = (0, import_react11.useMemo)(() => {
+  const revealed = (0, import_react13.useMemo)(() => {
     const raw = entries.slice(0, revealedCount);
     return raw.filter((e) => {
       const sfId = e.subflowId;
@@ -2755,7 +3463,7 @@ function StoryNarrative({
       return false;
     });
   }, [entries, revealedCount]);
-  const futureCount = (0, import_react11.useMemo)(() => {
+  const futureCount = (0, import_react13.useMemo)(() => {
     let count = 0;
     for (let i = revealedCount; i < entries.length; i++) {
       const e = entries[i];
@@ -2763,11 +3471,11 @@ function StoryNarrative({
     }
     return count;
   }, [entries, revealedCount]);
-  const latestRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const latestRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     latestRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [revealed.length]);
-  const numberedEntries = (0, import_react11.useMemo)(() => {
+  const numberedEntries = (0, import_react13.useMemo)(() => {
     let counter = 0;
     const subflowSeen = /* @__PURE__ */ new Set();
     let prevType = "";
@@ -2815,13 +3523,13 @@ function StoryNarrative({
     });
   }, [revealed]);
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: outerStyle, "data-fp": "story-narrative", role: "log", children: numberedEntries.map((entry, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: outerStyle, "data-fp": "story-narrative", role: "log", children: numberedEntries.map((entry, i) => {
       if (entry.isSubflowExit) return null;
       const ht = entry.headingType;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-fp": "narrative-entry", "data-type": entry.type, children: entry.heading ? entry.text.startsWith("[") ? `${entry.heading}. ${entry.text}` : `${entry.heading}. [${ht}: ${entry.stageName ?? ""}] ${entry.text}` : entry.text }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-fp": "narrative-entry", "data-type": entry.type, children: entry.heading ? entry.text.startsWith("[") ? `${entry.heading}. ${entry.text}` : `${entry.heading}. [${ht}: ${entry.stageName ?? ""}] ${entry.text}` : entry.text }, i);
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className,
@@ -2846,7 +3554,7 @@ function StoryNarrative({
           const isSubflow = entry.isSubflow;
           const isLast = i === numberedEntries.length - 1;
           const headingType = entry.headingType;
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
               ref: isLast ? latestRef : void 0,
@@ -2859,7 +3567,7 @@ function StoryNarrative({
                 marginTop: isHeading && i > 0 ? 8 : 0
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "span",
                   {
                     style: {
@@ -2875,7 +3583,7 @@ function StoryNarrative({
                     children: meta.icon
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "span",
                   {
                     style: {
@@ -2885,15 +3593,15 @@ function StoryNarrative({
                       lineHeight: 1.6,
                       fontFamily: entry.type === "step" ? theme.fontMono : theme.fontSans
                     },
-                    children: entry.heading && headingType ? entry.text.startsWith("[") ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("strong", { children: [
+                    children: entry.heading && headingType ? entry.text.startsWith("[") ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("strong", { children: [
                         entry.heading,
                         "."
                       ] }),
                       " ",
                       entry.text
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("strong", { children: [
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("strong", { children: [
                         entry.heading,
                         ". [",
                         headingType,
@@ -2910,7 +3618,7 @@ function StoryNarrative({
             i
           );
         }),
-        futureCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
+        futureCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: {
           opacity: 0.3,
           fontSize: fs.small,
           color: theme.textMuted,
@@ -2928,7 +3636,7 @@ function StoryNarrative({
 }
 
 // src/components/NarrativePanel/NarrativePanel.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function safeJsonStringify(value) {
   const seen = /* @__PURE__ */ new WeakSet();
   const MAX_CHARS = 5e5;
@@ -2966,7 +3674,7 @@ function NarrativePanel({
 }) {
   const fs = fontSize[size];
   const pad = padding[size];
-  const narrative = (0, import_react12.useMemo)(() => {
+  const narrative = (0, import_react14.useMemo)(() => {
     const lines = [];
     for (const snap of snapshots) {
       const stageLines = (snap.narrative ?? "").split("\n").filter(Boolean);
@@ -2974,7 +3682,7 @@ function NarrativePanel({
     }
     return lines;
   }, [snapshots]);
-  const revealedCount = (0, import_react12.useMemo)(() => {
+  const revealedCount = (0, import_react14.useMemo)(() => {
     if (snapshots.length === 0 || narrative.length === 0) return narrative.length;
     const stageBoundaries = [];
     for (let i = 0; i < narrative.length; i++) {
@@ -2991,17 +3699,17 @@ function NarrativePanel({
     const endIdx = groupsToShow < stageBoundaries.length ? stageBoundaries[groupsToShow] : narrative.length;
     return Math.max(1, endIdx);
   }, [snapshots.length, selectedIndex, narrative]);
-  const rangeIndex = (0, import_react12.useMemo)(
+  const rangeIndex = (0, import_react14.useMemo)(
     () => narrativeEntries?.length ? buildEntryRangeIndex(narrativeEntries) : void 0,
     [narrativeEntries]
   );
-  const revealedEntryCount = (0, import_react12.useMemo)(
+  const revealedEntryCount = (0, import_react14.useMemo)(
     () => narrativeEntries?.length ? computeRevealedEntryCount(narrativeEntries, snapshots, selectedIndex, rangeIndex) : 0,
     [narrativeEntries, snapshots, selectedIndex, rangeIndex]
   );
   const hasStructured = narrativeEntries && narrativeEntries.length > 0;
-  const [copied, setCopied] = (0, import_react12.useState)(false);
-  const buildLLMNarrative = (0, import_react12.useCallback)(() => {
+  const [copied, setCopied] = (0, import_react14.useState)(false);
+  const buildLLMNarrative = (0, import_react14.useCallback)(() => {
     if (!narrativeEntries?.length) {
       return narrative.join("\n");
     }
@@ -3113,16 +3821,16 @@ function NarrativePanel({
     }
     return sections.join("\n");
   }, [narrativeEntries, narrative, runtimeSnapshot, spec]);
-  const handleCopy = (0, import_react12.useCallback)(async () => {
+  const handleCopy = (0, import_react14.useCallback)(async () => {
     const text = buildLLMNarrative();
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [buildLLMNarrative]);
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, "data-fp": "narrative-panel", children: hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StoryNarrative, { entries: narrativeEntries, revealedEntryCount, unstyled: true }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className, style, "data-fp": "narrative-panel", children: hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryNarrative, { entries: narrativeEntries, revealedEntryCount, unstyled: true }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className,
@@ -3134,7 +3842,7 @@ function NarrativePanel({
       },
       "data-fp": "narrative-panel",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
             style: {
@@ -3148,8 +3856,8 @@ function NarrativePanel({
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontStyle: "italic" }, children: "What happened at each stage, what data flowed, what decisions were made, and why." }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontStyle: "italic" }, children: "What happened at each stage, what data flowed, what decisions were made, and why." }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "button",
                 {
                   onClick: handleCopy,
@@ -3172,7 +3880,7 @@ function NarrativePanel({
             ]
           }
         ),
-        hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           StoryNarrative,
           {
             entries: narrativeEntries,
@@ -3180,7 +3888,7 @@ function NarrativePanel({
             size,
             style: { flex: 1 }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           NarrativeTrace,
           {
             narrative,
@@ -3195,8 +3903,8 @@ function NarrativePanel({
 }
 
 // src/components/FlowchartView/SubflowTree.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function graphToSubflowEntries(graph) {
   if (!graph?.nodes?.length) return [];
   const entries = [];
@@ -3212,25 +3920,25 @@ function graphToSubflowEntries(graph) {
   }
   return entries;
 }
-var TreeNode = (0, import_react13.memo)(function TreeNode2({
+var TreeNode = (0, import_react15.memo)(function TreeNode2({
   entry,
   depth,
   activeStage,
   doneStages,
   onNodeSelect
 }) {
-  const [expanded, setExpanded] = (0, import_react13.useState)(true);
+  const [expanded, setExpanded] = (0, import_react15.useState)(true);
   const hasChildren = entry.children && entry.children.length > 0;
   const isActive = activeStage === entry.name;
   const isDone = doneStages?.has(entry.name);
-  const handleClick = (0, import_react13.useCallback)(() => {
+  const handleClick = (0, import_react15.useCallback)(() => {
     if (hasChildren) {
       setExpanded((prev) => !prev);
     }
     onNodeSelect?.(entry.name, !!entry.isSubflow);
   }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "button",
       {
         onClick: handleClick,
@@ -3261,7 +3969,7 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
           }
         },
         children: [
-          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               style: {
@@ -3276,8 +3984,8 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
               },
               children: "\u25B6"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { width: 12, flexShrink: 0 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               style: {
@@ -3289,8 +3997,8 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "span",
               {
                 style: {
@@ -3302,11 +4010,11 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
                 },
                 children: [
                   entry.name,
-                  entry.isSubflow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                  entry.isSubflow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
                 ]
               }
             ),
-            entry.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            entry.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "span",
               {
                 style: {
@@ -3323,7 +4031,7 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: entry.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: entry.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TreeNode2,
       {
         entry: child,
@@ -3336,8 +4044,8 @@ var TreeNode = (0, import_react13.memo)(function TreeNode2({
     )) })
   ] });
 });
-var SectionLabel = (0, import_react13.memo)(function SectionLabel2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var SectionLabel = (0, import_react15.memo)(function SectionLabel2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       style: {
@@ -3352,7 +4060,7 @@ var SectionLabel = (0, import_react13.memo)(function SectionLabel2({ children })
     }
   );
 });
-var SubflowTree = (0, import_react13.memo)(function SubflowTree2({
+var SubflowTree = (0, import_react15.memo)(function SubflowTree2({
   graph,
   activeStage,
   doneStages,
@@ -3361,9 +4069,9 @@ var SubflowTree = (0, import_react13.memo)(function SubflowTree2({
   className,
   style
 }) {
-  const subflowStages = (0, import_react13.useMemo)(() => graphToSubflowEntries(graph), [graph]);
+  const subflowStages = (0, import_react15.useMemo)(() => graphToSubflowEntries(graph), [graph]);
   if (subflowStages.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className,
@@ -3381,8 +4089,8 @@ var SubflowTree = (0, import_react13.memo)(function SubflowTree2({
         ...style
       },
       children: [
-        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionLabel, { children: "Subflows" }),
-        subflowStages.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SectionLabel, { children: "Subflows" }),
+        subflowStages.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           TreeNode,
           {
             entry,
@@ -3399,14 +4107,14 @@ var SubflowTree = (0, import_react13.memo)(function SubflowTree2({
 });
 
 // src/components/FlowchartView/SubflowBreadcrumb.tsx
-var import_react14 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SubflowBreadcrumb = (0, import_react16.memo)(function SubflowBreadcrumb2({
   breadcrumbs,
   onNavigate
 }) {
   if (breadcrumbs.length <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       style: {
@@ -3423,10 +4131,10 @@ var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
       },
       children: breadcrumbs.map((crumb, i) => {
         const isLast = i === breadcrumbs.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
-          isLast ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "span",
               {
                 style: {
@@ -3436,7 +4144,7 @@ var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
                 children: crumb.label
               }
             ),
-            crumb.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            crumb.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
               "span",
               {
                 style: {
@@ -3450,7 +4158,7 @@ var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
                 ]
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               onClick: () => onNavigate(i),
@@ -3482,8 +4190,8 @@ var SubflowBreadcrumb = (0, import_react14.memo)(function SubflowBreadcrumb2({
 });
 
 // src/components/FlowchartView/TracedFlow.tsx
-var import_react25 = require("react");
-var import_react26 = require("@xyflow/react");
+var import_react27 = require("react");
+var import_react28 = require("@xyflow/react");
 
 // src/components/FlowchartView/_internal/dagreTraceLayout.ts
 var import_dagre = __toESM(require("dagre"), 1);
@@ -3824,9 +4532,9 @@ function sliceOverlay(overlay, index) {
 }
 
 // src/components/StageNode/StageNode.tsx
-var import_react15 = require("react");
-var import_react16 = require("@xyflow/react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_react18 = require("@xyflow/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var KEYFRAMES_ID = "fp-stage-node-keyframes";
 var KEYFRAMES_CSS = `
 @media (prefers-reduced-motion: no-preference) {
@@ -3852,128 +4560,128 @@ function StageIcon({ type, color }) {
     // LLM / AI call — brain/sparkle
     case "llm":
     case "ai":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "9.5", r: "1", fill: color }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "3.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "12.5", y1: "4", x2: "11.2", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "3.5", y1: "4", x2: "4.8", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "8", cy: "9.5", r: "1", fill: color }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "3.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "12.5", y1: "4", x2: "11.2", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "8", r: "3", stroke: color, strokeWidth: "1.5" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("line", { x1, y1, x2, y2, stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }, angle);
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "10", y1: "10", x2: "13.5", y2: "13.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5.5", y1: "6", x2: "8.5", y2: "6", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5.5", y1: "8", x2: "7.5", y2: "8", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "7", cy: "7", r: "4", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "10", y1: "10", x2: "13.5", y2: "13.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5.5", y1: "6", x2: "8.5", y2: "6", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: color, strokeWidth: "1.5", transform: "rotate(45 8 8)" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M5 3.5L12.5 8L5 12.5V3.5Z", fill: color, opacity: "0.8" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", fill: color, opacity: "0.8" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "5", r: "2.5", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M3.5 14C3.5 11 5.5 9 8 9S12.5 11 12.5 14", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "8", cy: "5", r: "2.5", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "5", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "11", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "11", r: "2", stroke: color, strokeWidth: "1.2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5", y1: "7", x2: "8", y2: "9", stroke: color, strokeWidth: "1", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "11", y1: "7", x2: "8", y2: "9", stroke: color, strokeWidth: "1", opacity: "0.5" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "5", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "11", cy: "5", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "8", cy: "11", r: "2", stroke: color, strokeWidth: "1.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "7", x2: "8", y2: "9", stroke: color, strokeWidth: "1", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6 8L7.5 9.5L10 6.5", stroke: color, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 8C4 5 6 11 8 8S12 5 14 8", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 11C4 8 6 14 8 11S12 8 14 11", stroke: color, strokeWidth: "1", strokeLinecap: "round", fill: "none", opacity: "0.5" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M2 8C4 5 6 11 8 8S12 5 14 8", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ellipse", { cx: "8", cy: "4.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "3", y1: "4.5", x2: "3", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "13", y1: "4.5", x2: "13", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ellipse", { cx: "8", cy: "11.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ellipse", { cx: "8", cy: "4.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "3", y1: "4.5", x2: "3", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "13", y1: "4.5", x2: "13", y2: "11.5", stroke: color, strokeWidth: "1.3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ellipse", { cx: "8", cy: "11.5", rx: "5", ry: "2", stroke: color, strokeWidth: "1.3" })
       ] });
     // System prompt — document with lines
     case "system-prompt":
     case "prompt":
     case "instructions":
     case "document":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "3.5", y: "2", width: "9", height: "12", rx: "1.5", stroke: color, strokeWidth: "1.3", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5.5", y1: "5", x2: "10.5", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5.5", y1: "7.5", x2: "10.5", y2: "7.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5.5", y1: "10", x2: "8.5", y2: "10", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "3.5", y: "2", width: "9", height: "12", rx: "1.5", stroke: color, strokeWidth: "1.3", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5.5", y1: "5", x2: "10.5", y2: "5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5.5", y1: "7.5", x2: "10.5", y2: "7.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5.5", y1: "10", x2: "8.5", y2: "10", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
       ] });
     // Messages / conversation — chat bubble
     case "messages":
     case "chat":
     case "conversation":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "2.5", y: "3", width: "11", height: "8", rx: "2", stroke: color, strokeWidth: "1.3", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M5.5 11L5.5 13.5L8.5 11", stroke: color, strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5", y1: "6", x2: "11", y2: "6", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "5", y1: "8.5", x2: "9", y2: "8.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "2.5", y: "3", width: "11", height: "8", rx: "2", stroke: color, strokeWidth: "1.3", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M5.5 11L5.5 13.5L8.5 11", stroke: color, strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "6", x2: "11", y2: "6", stroke: color, strokeWidth: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "8.5", x2: "9", y2: "8.5", stroke: color, strokeWidth: "1", strokeLinecap: "round" })
       ] });
     // Loop — circular arrow
     case "loop":
     case "retry":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 8A4 4 0 1 1 8 4", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M8 1.5L10.5 4L8 6.5", stroke: color, strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 8A4 4 0 1 1 8 4", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "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",
@@ -3986,22 +4694,22 @@ function StageIcon({ type, color }) {
     // Decision — diamond (already handled by isDecider shape)
     case "decision":
     case "router":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M8 2L14 8L8 14L2 8Z", stroke: color, strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: color })
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M8 2L14 8L8 14L2 8Z", stroke: color, strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: color })
       ] });
     default:
       return null;
   }
 }
-var StageNode = (0, import_react15.memo)(function StageNode2({
+var StageNode = (0, import_react17.memo)(function StageNode2({
   data
 }) {
   const { label, active, done, error, linked, icon, stepNumbers, dimmed, isSubflow, isLazy, isDecider, isFork, description, stageId, showStageId } = data;
   const effectiveIcon = icon || (isLazy ? "lazy" : void 0);
   const isLazyUnresolved = isLazy && !done && !active;
-  const injectedRef = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
+  const injectedRef = (0, import_react17.useRef)(false);
+  (0, import_react17.useEffect)(() => {
     if (injectedRef.current) return;
     if (typeof document !== "undefined" && !document.getElementById(KEYFRAMES_ID)) {
       const styleEl = document.createElement("style");
@@ -4022,9 +4730,9 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
   const borderColor = active ? theme.nodeCursor : isHero && done ? theme.nodeMain : done ? theme.nodeVisited : error ? theme.error : restingBorder;
   const shadow = active ? `0 0 22px color-mix(in srgb, ${theme.nodeCursor} 55%, transparent)` : isHero && done ? `0 0 12px color-mix(in srgb, ${theme.nodeMain} 30%, transparent)` : done ? `0 0 8px color-mix(in srgb, ${theme.nodeVisited} 20%, transparent)` : error ? `0 0 12px color-mix(in srgb, ${theme.error} 30%, transparent)` : restingShadow;
   const textColor = active ? "#1a1a1a" : done || error ? "#fff" : theme.textPrimary;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Handle, { type: "target", position: import_react16.Position.Top, style: { opacity: 0 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react18.Handle, { type: "target", position: import_react18.Position.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         style: {
@@ -4037,7 +4745,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
           opacity: isMuted ? 0.5 : void 0
         },
         children: [
-          stepNumbers && stepNumbers.length > 0 && isOnPath && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          stepNumbers && stepNumbers.length > 0 && isOnPath && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               style: {
@@ -4052,7 +4760,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                 const isLatest = i === stepNumbers.length - 1;
                 const badgeBg = isLatest && active ? theme.nodeCursor : theme.nodeVisited;
                 const glow = isLatest && active ? `color-mix(in srgb, ${theme.nodeCursor} 50%, transparent)` : `color-mix(in srgb, ${theme.nodeVisited} 40%, transparent)`;
-                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     style: {
@@ -4075,7 +4783,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
               })
             }
           ),
-          linked && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          linked && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               style: {
@@ -4089,7 +4797,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
               }
             }
           ),
-          active && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          active && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               style: {
@@ -4103,7 +4811,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
               }
             }
           ),
-          active && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          active && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               style: {
@@ -4123,8 +4831,8 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
               children: "NOW"
             }
           ),
-          isDecider ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "relative", width: 120, height: 72 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          isDecider ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { position: "relative", width: 120, height: 72 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "div",
               {
                 style: {
@@ -4138,7 +4846,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "div",
               {
                 style: {
@@ -4154,7 +4862,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               "div",
               {
                 style: {
@@ -4169,10 +4877,10 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                   zIndex: 1
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                    effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StageIcon, { type: effectiveIcon, color: textColor }),
-                    !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 9, color: textColor }, children: "\u25C7" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                    effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StageIcon, { type: effectiveIcon, color: textColor }),
+                    !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 9, color: textColor }, children: "\u25C7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         style: {
@@ -4185,7 +4893,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                       }
                     )
                   ] }),
-                  description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     "span",
                     {
                       style: {
@@ -4201,7 +4909,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                       children: description
                     }
                   ),
-                  showStageId && stageId && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  showStageId && stageId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     "span",
                     {
                       style: {
@@ -4223,7 +4931,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
             )
           ] }) : (
             /* Standard rectangular node */
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               "div",
               {
                 style: {
@@ -4242,10 +4950,10 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                   justifyContent: "center"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                    effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StageIcon, { type: effectiveIcon, color: textColor }),
-                    done && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
-                    active && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                    effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StageIcon, { type: effectiveIcon, color: textColor }),
+                    done && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
+                    active && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         style: {
@@ -4258,8 +4966,8 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                         }
                       }
                     ),
-                    error && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    error && !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         style: {
@@ -4271,7 +4979,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                         children: label
                       }
                     ),
-                    isSubflow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    isSubflow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         style: {
@@ -4286,7 +4994,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                           opacity: 0.7,
                           flexShrink: 0
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                           "span",
                           {
                             style: {
@@ -4300,7 +5008,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                       }
                     )
                   ] }),
-                  description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     "span",
                     {
                       style: {
@@ -4316,7 +5024,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
                       children: description
                     }
                   ),
-                  showStageId && stageId && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  showStageId && stageId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     "span",
                     {
                       style: {
@@ -4340,7 +5048,7 @@ var StageNode = (0, import_react15.memo)(function StageNode2({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Handle, { type: "source", position: import_react16.Position.Bottom, style: { opacity: 0 } })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react18.Handle, { type: "source", position: import_react18.Position.Bottom, style: { opacity: 0 } })
   ] });
 });
 
@@ -4392,18 +5100,18 @@ function aggregateMountStatus(slice, graph, currentSubflowId) {
 }
 
 // src/components/FlowchartView/_internal/useSubflowDrill.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useSubflowDrill(graph, onSubflowChange) {
-  const [currentSubflowId, setCurrentSubflowId] = (0, import_react17.useState)(null);
-  const lastGraphRef = (0, import_react17.useRef)(null);
+  const [currentSubflowId, setCurrentSubflowId] = (0, import_react19.useState)(null);
+  const lastGraphRef = (0, import_react19.useRef)(null);
   if (lastGraphRef.current !== graph) {
     lastGraphRef.current = graph;
     if (currentSubflowId !== null && !graph.nodes.some((n) => n.data?.subflowId === currentSubflowId)) {
       queueMicrotask(() => setCurrentSubflowId(null));
     }
   }
-  const lastNotifiedRef = (0, import_react17.useRef)(void 0);
-  (0, import_react17.useEffect)(() => {
+  const lastNotifiedRef = (0, import_react19.useRef)(void 0);
+  (0, import_react19.useEffect)(() => {
     if (lastNotifiedRef.current === currentSubflowId) return;
     lastNotifiedRef.current = currentSubflowId;
     if (currentSubflowId === null) {
@@ -4413,22 +5121,22 @@ function useSubflowDrill(graph, onSubflowChange) {
       if (mount) onSubflowChange?.(mount.id);
     }
   }, [currentSubflowId, graph, onSubflowChange]);
-  const drillInto = (0, import_react17.useCallback)((subflowId) => {
+  const drillInto = (0, import_react19.useCallback)((subflowId) => {
     setCurrentSubflowId(subflowId);
   }, []);
-  const drillUp = (0, import_react17.useCallback)(() => {
+  const drillUp = (0, import_react19.useCallback)(() => {
     setCurrentSubflowId(null);
   }, []);
   return { currentSubflowId, drillInto, drillUp, setCurrentSubflowId };
 }
 
 // src/components/FlowchartView/_internal/useChartAutoRefit.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
   const duration = options.duration ?? 200;
   const padding2 = options.padding ?? 0.1;
   const refitKey = options.refitKey;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const el = wrapperRef.current;
     if (!el || !rfInstance) return;
     let raf = 0;
@@ -4447,7 +5155,7 @@ function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
       cancelAnimationFrame(raf);
     };
   }, [rfInstance, wrapperRef, duration, padding2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!rfInstance) return;
     let raf2 = 0;
     const raf1 = requestAnimationFrame(() => {
@@ -4463,9 +5171,9 @@ function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
 }
 
 // src/components/FlowchartView/SubflowBreadcrumbBar.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function SubflowBreadcrumbBar({ entries, onNavigate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       style: {
@@ -4481,12 +5189,12 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
       "aria-label": "Subflow breadcrumb",
       children: entries.map((entry, i) => {
         const isLast = i === entries.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "span",
           {
             style: { display: "inline-flex", alignItems: "center", gap: 6 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4506,7 +5214,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                   children: entry.label
                 }
               ),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: theme.textMuted }, children: "\u203A" })
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { color: theme.textMuted }, children: "\u203A" })
             ]
           },
           entry.subflowId ?? "__top__"
@@ -4517,12 +5225,12 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
 }
 
 // src/components/GroupContainerNode/GroupContainerNode.tsx
-var import_react19 = require("@xyflow/react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react21 = require("@xyflow/react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function GroupContainerNode({ data }) {
   const d = data;
   const borderColor = d.error ? theme.error : d.active ? theme.primary : d.done ? theme.nodeVisited : theme.border;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       style: {
@@ -4538,7 +5246,7 @@ function GroupContainerNode({ data }) {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             style: {
@@ -4552,20 +5260,20 @@ function GroupContainerNode({ data }) {
               letterSpacing: 0.2
             },
             children: [
-              d.icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": true, children: d.icon }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: d.label })
+              d.icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, children: d.icon }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: d.label })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react19.Handle, { type: "target", position: import_react19.Position.Top, style: { opacity: 0 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react19.Handle, { type: "source", position: import_react19.Position.Bottom, style: { opacity: 0 } })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react21.Handle, { type: "target", position: import_react21.Position.Top, style: { opacity: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react21.Handle, { type: "source", position: import_react21.Position.Bottom, style: { opacity: 0 } })
       ]
     }
   );
 }
 
 // src/components/LoopBackEdge/LoopBackEdge.tsx
-var import_react20 = require("@xyflow/react");
+var import_react22 = require("@xyflow/react");
 
 // src/components/FlowchartView/_internal/loopRouting.ts
 var LOOP_LANE_GAP = 56;
@@ -4784,7 +5492,7 @@ function wrapInMainChartBox(graph, opts) {
 }
 
 // src/components/LoopBackEdge/LoopBackEdge.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var LOOP_DASH = "5 5";
 var LOOP_STROKE_OPACITY_CAP = 0.55;
 var LOOP_STROKE_WIDTH = 1.5;
@@ -4805,7 +5513,7 @@ function centerY(node) {
   return node.internals.positionAbsolute.y + (node.measured.height ?? 0) / 2;
 }
 function LoopBackEdge({ id, source, target, markerEnd, style }) {
-  const path = (0, import_react20.useStore)((s) => {
+  const path = (0, import_react22.useStore)((s) => {
     const src = s.nodeLookup.get(source);
     const tgt = s.nodeLookup.get(target);
     if (!src || !tgt) return "";
@@ -4823,8 +5531,8 @@ function LoopBackEdge({ id, source, target, markerEnd, style }) {
     );
   });
   if (!path) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react20.BaseEdge,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react22.BaseEdge,
     {
       id,
       path,
@@ -4836,8 +5544,8 @@ function LoopBackEdge({ id, source, target, markerEnd, style }) {
 }
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
-var import_react21 = require("@xyflow/react");
-var import_react22 = require("@xyflow/react");
+var import_react23 = require("@xyflow/react");
+var import_react24 = require("@xyflow/react");
 
 // src/components/FlowchartView/_internal/stepRouting.ts
 function staggeredBendY(sourceBottom, targetTop, others, minGapFromTarget = 8) {
@@ -4861,7 +5569,7 @@ function resolveStepBendY(forkBend, staggeredBend) {
 }
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SmartStepEdge({
   id,
   source,
@@ -4875,7 +5583,7 @@ function SmartStepEdge({
   markerEnd,
   style
 }) {
-  const bendY = (0, import_react21.useStore)((s) => {
+  const bendY = (0, import_react23.useStore)((s) => {
     const src = s.nodeLookup.get(source);
     const tgt = s.nodeLookup.get(target);
     if (!src || !tgt) return null;
@@ -4901,23 +5609,23 @@ function SmartStepEdge({
     const staggered = staggeredBendY(sourceBottom, targetTop, others);
     return resolveStepBendY(fan, staggered);
   });
-  const [path] = (0, import_react21.getSmoothStepPath)({
+  const [path] = (0, import_react23.getSmoothStepPath)({
     sourceX,
     sourceY,
-    sourcePosition: sourcePosition ?? import_react22.Position.Bottom,
+    sourcePosition: sourcePosition ?? import_react24.Position.Bottom,
     targetX,
     targetY,
-    targetPosition: targetPosition ?? import_react22.Position.Top,
+    targetPosition: targetPosition ?? import_react24.Position.Top,
     // Override the bend only for a staggered edge; otherwise let getSmoothStepPath
     // use its default centerY (== the built-in `smoothstep` path, byte-for-byte).
     ...bendY !== null ? { centerY: bendY } : {}
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react21.BaseEdge, { id, path, markerEnd, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react23.BaseEdge, { id, path, markerEnd, style });
 }
 
 // src/components/FlowchartView/_internal/MeasuredNodeSizes.tsx
-var import_react23 = require("react");
-var import_react24 = require("@xyflow/react");
+var import_react25 = require("react");
+var import_react26 = require("@xyflow/react");
 
 // src/components/FlowchartView/_internal/measuredFootprints.ts
 function extractMeasuredFootprints(entries) {
@@ -4946,12 +5654,12 @@ function MeasuredNodeSizes({
   onSizes,
   includeHiddenNodes = false
 }) {
-  const initialized = (0, import_react24.useNodesInitialized)({ includeHiddenNodes });
-  const sizes = (0, import_react24.useStore)(
+  const initialized = (0, import_react26.useNodesInitialized)({ includeHiddenNodes });
+  const sizes = (0, import_react26.useStore)(
     (s) => extractMeasuredFootprints(s.nodeLookup),
     sameFootprints
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!initialized || sizes.size === 0) return;
     onSizes(sizes);
   }, [initialized, sizes, onSizes]);
@@ -4959,7 +5667,7 @@ function MeasuredNodeSizes({
 }
 
 // src/components/FlowchartView/TracedFlow.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DEFAULT_COLORS = {
   default: rawDefaults.colors.textMuted,
   done: rawDefaults.colors.success,
@@ -5067,7 +5775,7 @@ function styleEdgeWithOverlay(edge, doneStageIds, activeStageId, colors) {
     type: kind === "loop" ? "loopBack" : "smartStep",
     animated: isLeadingEdge,
     style: { stroke: color, strokeWidth: traversed ? 2 : 1.5 },
-    markerEnd: { type: import_react26.MarkerType.ArrowClosed, color, width: 16, height: 16 }
+    markerEnd: { type: import_react28.MarkerType.ArrowClosed, color, width: 16, height: 16 }
   };
   if (kind === "loop") {
     styled.style = { ...styled.style, strokeDasharray: "4 3" };
@@ -5098,28 +5806,28 @@ function TracedFlow({
   style
 }) {
   const layout = layoutProp ?? dagreTraceLayout;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (layoutProp === dagreTraceLayout) {
       devWarn(
         () => "[footprint-explainable-ui] <TracedFlow layout={dagreTraceLayout}> bypasses the built-in measure-then-layout pipeline (content-exact sizing, fork/merge centering, straight spines). OMIT the `layout` prop to use it \u2014 passing the raw dagreTraceLayout silently forfeits every layout improvement eui ships."
       );
     }
   }, [layoutProp]);
-  const colors = (0, import_react25.useMemo)(
+  const colors = (0, import_react27.useMemo)(
     () => ({ ...DEFAULT_COLORS, ...colorOverrides ?? {} }),
     [colorOverrides]
   );
-  const mergedNodeTypes = (0, import_react25.useMemo)(
+  const mergedNodeTypes = (0, import_react27.useMemo)(
     () => userNodeTypes ? { ...DEFAULT_NODE_TYPES, ...userNodeTypes } : DEFAULT_NODE_TYPES,
     [userNodeTypes]
   );
-  const mergedEdgeTypes = (0, import_react25.useMemo)(
+  const mergedEdgeTypes = (0, import_react27.useMemo)(
     () => userEdgeTypes ? { ...DEFAULT_EDGE_TYPES, ...userEdgeTypes } : DEFAULT_EDGE_TYPES,
     [userEdgeTypes]
   );
   const drill = useSubflowDrill(graph, onSubflowChange);
-  const groupedSet = (0, import_react25.useMemo)(() => new Set(groupedSubflows ?? []), [groupedSubflows]);
-  const filteredGraph = (0, import_react25.useMemo)(() => {
+  const groupedSet = (0, import_react27.useMemo)(() => new Set(groupedSubflows ?? []), [groupedSubflows]);
+  const filteredGraph = (0, import_react27.useMemo)(() => {
     const base = filterGraphForDrill(graph, drill.currentSubflowId);
     if (groupedSet.size === 0) return base;
     const baseIds = new Set(base.nodes.map((n) => n.id));
@@ -5134,12 +5842,12 @@ function TracedFlow({
     );
     return { nodes: [...base.nodes, ...extraNodes], edges: [...base.edges, ...extraEdges] };
   }, [graph, drill.currentSubflowId, groupedSet]);
-  const breadcrumb = (0, import_react25.useMemo)(
+  const breadcrumb = (0, import_react27.useMemo)(
     () => buildSubflowBreadcrumb(graph, drill.currentSubflowId),
     [graph, drill.currentSubflowId]
   );
-  const [measuredSizes, setMeasuredSizes] = (0, import_react25.useState)(null);
-  const positioned = (0, import_react25.useMemo)(() => {
+  const [measuredSizes, setMeasuredSizes] = (0, import_react27.useState)(null);
+  const positioned = (0, import_react27.useMemo)(() => {
     const nodeSize = measuredSizes ? (n) => measuredSizes.get(n.id) : void 0;
     const sizeOpts = nodeSize ? { nodeSize } : {};
     const dagreBase = withForkCentering(
@@ -5163,7 +5871,7 @@ function TracedFlow({
     }
     return realBase(filteredGraph);
   }, [filteredGraph, layout, layoutProp, groupedSet, mainChartBox, measuredSizes]);
-  const slice = (0, import_react25.useMemo)(() => {
+  const slice = (0, import_react27.useMemo)(() => {
     const empty = {
       doneStageIds: /* @__PURE__ */ new Set(),
       activeStageId: null,
@@ -5175,7 +5883,7 @@ function TracedFlow({
     const idx = scrubIndex ?? Math.max(0, overlay.executionOrder.length - 1);
     return aggregateMountStatus(sliceOverlay(overlay, idx), graph, drill.currentSubflowId);
   }, [overlay, scrubIndex, graph, drill.currentSubflowId]);
-  const reactFlowNodes = (0, import_react25.useMemo)(
+  const reactFlowNodes = (0, import_react27.useMemo)(
     () => positioned.nodes.map(
       (n) => toStageNodeWithOverlay(
         n,
@@ -5188,20 +5896,20 @@ function TracedFlow({
     ),
     [positioned.nodes, slice, coActiveStageIds]
   );
-  const reactFlowEdges = (0, import_react25.useMemo)(
+  const reactFlowEdges = (0, import_react27.useMemo)(
     () => positioned.edges.map(
       (e) => styleEdgeWithOverlay(e, slice.doneStageIds, slice.activeStageId, colors)
     ),
     [positioned.edges, slice, colors]
   );
-  const [coneRevealed, setConeRevealed] = (0, import_react25.useState)(false);
-  (0, import_react25.useEffect)(() => {
+  const [coneRevealed, setConeRevealed] = (0, import_react27.useState)(false);
+  (0, import_react27.useEffect)(() => {
     if (!sliceCone) return;
     setConeRevealed(false);
     const raf = requestAnimationFrame(() => setConeRevealed(true));
     return () => cancelAnimationFrame(raf);
   }, [sliceCone]);
-  const conedNodes = (0, import_react25.useMemo)(() => {
+  const conedNodes = (0, import_react27.useMemo)(() => {
     if (!sliceCone || sliceCone.size === 0) return reactFlowNodes;
     return reactFlowNodes.map((n) => {
       const depth = sliceCone.get(n.id);
@@ -5219,14 +5927,14 @@ function TracedFlow({
       };
     });
   }, [reactFlowNodes, sliceCone, coneRevealed]);
-  const conedEdges = (0, import_react25.useMemo)(() => {
+  const conedEdges = (0, import_react27.useMemo)(() => {
     if (!sliceCone || sliceCone.size === 0) return reactFlowEdges;
     return reactFlowEdges.map((e) => {
       const inCone = sliceCone.has(e.source) && sliceCone.has(e.target);
       return inCone ? e : { ...e, style: { ...e.style, opacity: 0.12, transition: "opacity 260ms ease" } };
     });
   }, [reactFlowEdges, sliceCone]);
-  const handleNodeClick = (0, import_react25.useCallback)(
+  const handleNodeClick = (0, import_react27.useCallback)(
     (_, node) => {
       const data = node.data ?? {};
       if (data.isSubflow && data.subflowId && !groupedSet.has(data.subflowId)) {
@@ -5236,14 +5944,14 @@ function TracedFlow({
     },
     [drill, onNodeClick, groupedSet]
   );
-  const wrapperRef = (0, import_react25.useRef)(null);
-  const [rfInstance, setRfInstance] = (0, import_react25.useState)(null);
+  const wrapperRef = (0, import_react27.useRef)(null);
+  const [rfInstance, setRfInstance] = (0, import_react27.useState)(null);
   useChartAutoRefit(wrapperRef, rfInstance, {
     // Re-fit on drill AND after the measured-size re-layout settles.
     refitKey: `${drill.currentSubflowId ?? ""}:${measuredSizes ? "measured" : "estimated"}`,
     padding: 0.18
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       ref: wrapperRef,
@@ -5257,15 +5965,15 @@ function TracedFlow({
         ...style
       },
       children: [
-        breadcrumb.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        breadcrumb.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           SubflowBreadcrumbBar,
           {
             entries: breadcrumb,
             onNavigate: drill.setCurrentSubflowId
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          import_react26.ReactFlow,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          import_react28.ReactFlow,
           {
             nodes: conedNodes,
             edges: conedEdges,
@@ -5278,8 +5986,8 @@ function TracedFlow({
             minZoom: 0.1,
             proOptions: { hideAttribution: true },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MeasuredNodeSizes, { onSizes: setMeasuredSizes }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react26.Background, { variant: import_react26.BackgroundVariant.Dots, gap: 20, size: 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MeasuredNodeSizes, { onSizes: setMeasuredSizes }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.Background, { variant: import_react28.BackgroundVariant.Dots, gap: 20, size: 1 }),
               children
             ]
           }
@@ -5290,187 +5998,27 @@ function TracedFlow({
 }
 
 // src/components/InspectorPanel/InspectorPanel.tsx
-var import_react28 = require("react");
-
-// src/components/DataTracePanel/DataTracePanel.tsx
-var import_react27 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var DataTracePanel = (0, import_react27.memo)(function DataTracePanel2({
-  frames,
-  selectedStageId,
-  onFrameClick,
-  fromStageName,
-  note
-}) {
-  const noteLine = note ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", marginBottom: 8 }, children: note }) : null;
-  if (frames.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        "div",
-        {
-          style: {
-            fontSize: 11,
-            color: theme.textMuted,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            fontWeight: 600,
-            marginBottom: 6
-          },
-          children: "Backward causal chain"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
-      noteLine,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
-    note && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "4px 12px 0", fontSize: 11, color: theme.textMuted, fontStyle: "italic" }, children: note }),
-    fromStageName && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "4px 12px 8px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-        "div",
-        {
-          style: {
-            fontSize: 11,
-            color: theme.textMuted,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            fontWeight: 600
-          },
-          children: [
-            "Data trace from ",
-            fromStageName
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        "div",
-        {
-          style: {
-            fontSize: 11,
-            color: theme.textMuted,
-            fontStyle: "italic",
-            marginTop: 3
-          },
-          children: "Every value here was derived from the stages below."
-        }
-      )
-    ] }),
-    frames.map((frame, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      DataTraceFrame,
-      {
-        frame,
-        isFirst: i === 0,
-        isLast: i === frames.length - 1,
-        isSelected: frame.runtimeStageId === selectedStageId,
-        onClick: onFrameClick
-      },
-      frame.runtimeStageId
-    ))
-  ] });
-});
-var DataTraceFrame = (0, import_react27.memo)(function DataTraceFrame2({
-  frame,
-  isFirst,
-  isLast,
-  isSelected,
-  onClick
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    "button",
-    {
-      onClick: () => onClick?.(frame.runtimeStageId),
-      style: {
-        display: "block",
-        width: "100%",
-        textAlign: "left",
-        border: "none",
-        background: isSelected ? "var(--fp-accent-bg, rgba(99,102,241,0.12))" : "transparent",
-        padding: "6px 12px 6px 16px",
-        cursor: onClick ? "pointer" : "default",
-        borderLeft: isSelected ? "3px solid var(--fp-accent, #6366f1)" : "3px solid transparent",
-        color: "inherit",
-        fontSize: 13
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          !isFirst && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { color: theme.textMuted, fontSize: 11 }, children: "\u2191" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "span",
-            {
-              style: {
-                fontWeight: isFirst ? 600 : 400,
-                color: isFirst ? "var(--fp-accent, #6366f1)" : theme.textPrimary
-              },
-              children: frame.stageName
-            }
-          ),
-          isLast && !isFirst && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "span",
-            {
-              style: {
-                fontSize: 10,
-                color: theme.textMuted,
-                fontStyle: "italic"
-              },
-              children: "(origin)"
-            }
-          )
-        ] }),
-        frame.keysWritten.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-          "div",
-          {
-            style: {
-              fontSize: 11,
-              color: theme.textMuted,
-              paddingLeft: isFirst ? 0 : 18,
-              marginTop: 2
-            },
-            children: [
-              "wrote:",
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { color: theme.textSecondary }, children: frame.keysWritten.join(", ") })
-            ]
-          }
-        ),
-        frame.linkedBy && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-          "div",
-          {
-            style: {
-              fontSize: 11,
-              color: "var(--fp-accent, #6366f1)",
-              paddingLeft: 18,
-              marginTop: 1
-            },
-            children: [
-              "\u2190 via ",
-              frame.linkedBy
-            ]
-          }
-        )
-      ]
-    }
-  );
-});
-
-// src/components/InspectorPanel/InspectorPanel.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
+var import_react29 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var InspectorPanel = (0, import_react29.memo)(function InspectorPanel2({
   snapshots,
   selectedIndex,
   dataTraceFrames,
   dataTraceNote,
   selectedStageId,
   onNavigateToStage,
-  onTabChange
+  onTabChange,
+  tab: controlledTab,
+  traceContent
 }) {
-  const [tab, setTabState] = (0, import_react28.useState)("state");
+  const [internalTab, setTabState] = (0, import_react29.useState)("state");
+  const tab = controlledTab ?? internalTab;
   const setTab = (t) => {
     setTabState(t);
     onTabChange?.(t);
   };
   const currentSnapshot = snapshots[selectedIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       style: {
@@ -5480,7 +6028,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             style: {
@@ -5489,7 +6037,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 TabButton,
                 {
                   active: tab === "state",
@@ -5497,7 +6045,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
                   label: "State"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 TabButton,
                 {
                   active: tab === "trace",
@@ -5509,15 +6057,15 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
-          tab === "state" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
+          tab === "state" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             MemoryPanel,
             {
               snapshots,
               selectedIndex
             }
           ),
-          tab === "trace" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          tab === "trace" && (traceContent ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             DataTracePanel,
             {
               frames: dataTraceFrames,
@@ -5526,7 +6074,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
               onFrameClick: onNavigateToStage,
               fromStageName: currentSnapshot?.stageName
             }
-          )
+          ))
         ] })
       ]
     }
@@ -5538,7 +6086,7 @@ function TabButton({
   label,
   badge
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
       onClick,
@@ -5557,7 +6105,7 @@ function TabButton({
       },
       children: [
         label,
-        badge && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        badge && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "span",
           {
             style: {
@@ -5577,28 +6125,28 @@ function TabButton({
 }
 
 // src/components/InsightPanel/InsightPanel.tsx
-var import_react29 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var InsightPanel = (0, import_react29.memo)(function InsightPanel2({
+var import_react30 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var InsightPanel = (0, import_react30.memo)(function InsightPanel2({
   insights,
   expandedId,
   mode
 }) {
   if (insights.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { padding: 12, color: theme.textMuted, fontSize: 13 }, children: "No insights available. Attach recorders to see data." });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { padding: 12, color: theme.textMuted, fontSize: 13 }, children: "No insights available. Attach recorders to see data." });
   }
   if (mode === "grid") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InsightGrid, { insights });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InsightGrid, { insights });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InsightTabs, { insights, defaultId: expandedId });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InsightTabs, { insights, defaultId: expandedId });
 });
-var InsightTabs = (0, import_react29.memo)(function InsightTabs2({
+var InsightTabs = (0, import_react30.memo)(function InsightTabs2({
   insights,
   defaultId
 }) {
-  const [activeId, setActiveId] = (0, import_react29.useState)(defaultId ?? insights[0]?.id);
+  const [activeId, setActiveId] = (0, import_react30.useState)(defaultId ?? insights[0]?.id);
   const active = insights.find((i) => i.id === activeId) ?? insights[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       style: {
@@ -5608,7 +6156,7 @@ var InsightTabs = (0, import_react29.memo)(function InsightTabs2({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             style: {
@@ -5617,7 +6165,7 @@ var InsightTabs = (0, import_react29.memo)(function InsightTabs2({
               flexShrink: 0,
               overflowX: "auto"
             },
-            children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "button",
               {
                 onClick: () => setActiveId(insight.id),
@@ -5638,16 +6186,16 @@ var InsightTabs = (0, import_react29.memo)(function InsightTabs2({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: active?.render() })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: active?.render() })
       ]
     }
   );
 });
-var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
+var InsightGrid = (0, import_react30.memo)(function InsightGrid2({
   insights
 }) {
   const cols = insights.length <= 2 ? 1 : 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       style: {
@@ -5658,7 +6206,7 @@ var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
         gap: 1,
         background: theme.border
       },
-      children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "div",
         {
           style: {
@@ -5668,7 +6216,7 @@ var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
               "div",
               {
                 style: {
@@ -5683,7 +6231,7 @@ var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
                 },
                 children: [
                   insight.name,
-                  insight.summary && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  insight.summary && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "span",
                     {
                       style: {
@@ -5698,7 +6246,7 @@ var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: insight.render() })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: insight.render() })
           ]
         },
         insight.id
@@ -5708,17 +6256,17 @@ var InsightGrid = (0, import_react29.memo)(function InsightGrid2({
 });
 
 // src/components/CompactTimeline/CompactTimeline.tsx
-var import_react30 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
+var import_react31 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var CompactTimeline = (0, import_react31.memo)(function CompactTimeline2({
   snapshots,
   selectedIndex,
   defaultExpanded = false
 }) {
-  const [expanded, setExpanded] = (0, import_react30.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react31.useState)(defaultExpanded);
   if (snapshots.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "button",
       {
         onClick: () => setExpanded((e) => !e),
@@ -5738,13 +6286,13 @@ var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
           letterSpacing: "0.5px"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { fontSize: 10 }, children: expanded ? "\u25BC" : "\u25B8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 10 }, children: expanded ? "\u25BC" : "\u25B8" }),
           "Timeline",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { style: { fontWeight: 400, fontSize: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { style: { fontWeight: 400, fontSize: 10 }, children: [
             snapshots.length,
             " stages"
           ] }),
-          !expanded && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          !expanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "div",
             {
               style: {
@@ -5755,7 +6303,7 @@ var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
                 marginLeft: 8
               },
               children: [
-                snapshots.map((snap, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                snapshots.map((snap, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "div",
                   {
                     style: {
@@ -5770,7 +6318,7 @@ var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
                   },
                   i
                 )),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "div",
                   {
                     style: {
@@ -5788,7 +6336,7 @@ var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
         ]
       }
     ),
-    expanded && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { padding: "0 12px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { padding: "0 12px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       GanttTimeline,
       {
         snapshots,
@@ -5799,21 +6347,21 @@ var CompactTimeline = (0, import_react30.memo)(function CompactTimeline2({
 });
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var HLinePill = (0, import_react31.memo)(function HLinePill2({
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var HLinePill = (0, import_react32.memo)(function HLinePill2({
   label,
   detail,
   expanded,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "button",
       {
         onClick,
@@ -5837,31 +6385,31 @@ var HLinePill = (0, import_react31.memo)(function HLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
           label,
-          detail && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
+          detail && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
   ] });
 });
-var VLinePill = (0, import_react31.memo)(function VLinePill2({
+var VLinePill = (0, import_react32.memo)(function VLinePill2({
   label,
   expanded,
   side = "right",
   onClick
 }) {
   const arrow = side === "right" ? expanded ? "\u25B6" : "\u25C0" : expanded ? "\u25C0" : "\u25B6";
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "button",
       {
         onClick,
@@ -5886,12 +6434,12 @@ var VLinePill = (0, import_react31.memo)(function VLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
   ] });
 });
 function detectKeyedSteps(data) {
@@ -5928,9 +6476,9 @@ function KeyedRecorderView({
   snapshots,
   selectedIndex
 }) {
-  const [showAggregate, setShowAggregate] = (0, import_react31.useState)(false);
-  const detected = (0, import_react31.useMemo)(() => detectKeyedSteps(data), [data]);
-  const visibleKeys = (0, import_react31.useMemo)(() => {
+  const [showAggregate, setShowAggregate] = (0, import_react32.useState)(false);
+  const detected = (0, import_react32.useMemo)(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = (0, import_react32.useMemo)(() => {
     const keys = /* @__PURE__ */ new Set();
     for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
       const snap = snapshots[i];
@@ -5945,7 +6493,7 @@ function KeyedRecorderView({
   }, [snapshots, selectedIndex, detected?.keyType]);
   const isAtEnd = selectedIndex >= snapshots.length - 1;
   if (!detected) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
   }
   const steps = detected.steps;
   const hints = extractRenderHints(data);
@@ -5959,13 +6507,13 @@ function KeyedRecorderView({
     }
   }
   const grandTotal = hints?.grandTotal ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
+    description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
       preferredOperation === "aggregate" ? (
         /* AGGREGATE: collect silently during scrub, button at end to reveal total */
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          isAtEnd ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          isAtEnd ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               onClick: () => setShowAggregate(true),
@@ -5983,35 +6531,35 @@ function KeyedRecorderView({
               },
               children: "Aggregate \u2014 Show Grand Total"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
-            numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
+            numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
               grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
                 numFieldKey,
                 " \xB7 ",
                 allKeys.length,
                 " steps"
               ] })
             ] })
-          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
+          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
               visibleEntries.length,
               " of ",
               allKeys.length,
               " steps collected. Scrub to end to aggregate."
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : preferredOperation === "accumulate" ? (
         /* ACCUMULATE: running total grows with slider — IS the total at end, no button */
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
               numFieldKey,
               " \xB7 ",
               visibleEntries.length,
@@ -6020,27 +6568,27 @@ function KeyedRecorderView({
               " steps"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : (
         /* TRANSLATE: per-step entries prominent, no totals */
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
       ),
       visibleEntries.map((key) => {
         const entry = steps[key];
         const label = entry.stageName ?? key;
         const numVal = numFieldKey ? entry[numFieldKey] : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
-          numVal !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
+          numVal !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
         ] }, key);
       }),
-      visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
+      visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
     ] })
   ] });
 }
-var DetailsContent = (0, import_react31.memo)(function DetailsContent2({
+var DetailsContent = (0, import_react32.memo)(function DetailsContent2({
   snapshots,
   selectedIndex,
   narrativeEntries,
@@ -6052,27 +6600,27 @@ var DetailsContent = (0, import_react31.memo)(function DetailsContent2({
     {
       id: "memory",
       name: "Memory",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
     },
     {
       id: "narrative",
       name: "Narrative",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, size, style: fillHeight ? { height: "100%" } : void 0 })
     }
   ];
   const allViews = [...builtInViews, ...extraViews ?? []];
-  const [activeViewId, setActiveViewId] = (0, import_react31.useState)(allViews[0]?.id ?? "memory");
+  const [activeViewId, setActiveViewId] = (0, import_react32.useState)(allViews[0]?.id ?? "memory");
   const viewIds = allViews.map((v2) => v2.id).join(",");
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!allViews.find((v2) => v2.id === activeViewId)) {
       setActiveViewId(allViews[0]?.id ?? "memory");
     }
   }, [viewIds]);
   const activeView = allViews.find((v2) => v2.id === activeViewId) ?? allViews[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
       const active = view.id === activeViewId;
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           onClick: () => setActiveViewId(view.id),
@@ -6096,7 +6644,7 @@ var DetailsContent = (0, import_react31.memo)(function DetailsContent2({
         view.id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
   ] });
 });
 function resolveSubflowFromRuntime(parentSnapshots, subflowId, narrativeEntries) {
@@ -6113,7 +6661,7 @@ function resolveSubflowFromRuntime(parentSnapshots, subflowId, narrativeEntries)
   if (sfSnapshots.length === 0) return null;
   return { subflowId, label, spec: null, snapshots: sfSnapshots, narrative: sfNarrative };
 }
-var RightPanel = (0, import_react31.memo)(function RightPanel2({
+var RightPanel = (0, import_react32.memo)(function RightPanel2({
   mode,
   onModeChange,
   snapshots,
@@ -6127,15 +6675,17 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
   size,
   onNavigateToStage,
   dataTrace,
-  onInspectorTabChange
+  onInspectorTabChange,
+  inspectorTab,
+  traceContent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.border}`,
       flexShrink: 0,
       background: theme.bgSecondary
-    }, children: ["insights", "what"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    }, children: ["insights", "what"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "button",
       {
         onClick: () => onModeChange(m),
@@ -6157,7 +6707,7 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
       },
       m
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: mode === "insights" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: mode === "insights" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       InsightPanel,
       {
         mode: "tabs",
@@ -6166,16 +6716,16 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
           id: tab.id,
           name: insightName(tab.name),
           render: () => {
-            if (tab.id === "narrative") return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NarrativePanel, { snapshots, selectedIndex, narrativeEntries: activeNarrativeEntries, runtimeSnapshot, size, style: { height: "100%" } });
+            if (tab.id === "narrative") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NarrativePanel, { snapshots, selectedIndex, narrativeEntries: activeNarrativeEntries, runtimeSnapshot, size, style: { height: "100%" } });
             const customView = recorderViews?.find((v2) => v2.id === tab.id);
             if (customView?.render) return customView.render({ snapshots, selectedIndex });
             const autoView = autoRecorderViews.find((v2) => v2.id === tab.id);
-            if (autoView) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KeyedRecorderView, { data: autoView.data, description: autoView.description, preferredOperation: autoView.preferredOperation, snapshots, selectedIndex });
+            if (autoView) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KeyedRecorderView, { data: autoView.data, description: autoView.description, preferredOperation: autoView.preferredOperation, snapshots, selectedIndex });
             return null;
           }
         }))
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       InspectorPanel,
       {
         snapshots,
@@ -6183,6 +6733,8 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
         dataTraceFrames: dataTrace.frames,
         dataTraceNote: dataTrace.readsAvailable ? void 0 : "\u26A0 reads were not recorded (readTracking off) \u2014 dependencies are unknowable, not absent.",
         onTabChange: onInspectorTabChange,
+        tab: inspectorTab,
+        traceContent,
         selectedStageId: snapshots[selectedIndex]?.runtimeStageId,
         onNavigateToStage
       }
@@ -6223,7 +6775,7 @@ function ExplainableShell({
   className,
   style
 }) {
-  const derivedFromRuntime = (0, import_react31.useMemo)(() => {
+  const derivedFromRuntime = (0, import_react32.useMemo)(() => {
     if (!runtimeSnapshot) return null;
     try {
       const snaps = toVisualizationSnapshots(runtimeSnapshot, narrativeEntries);
@@ -6234,7 +6786,7 @@ function ExplainableShell({
   }, [runtimeSnapshot, narrativeEntries]);
   const snapshots = snapshotsProp ?? derivedFromRuntime?.snapshots ?? [];
   const resultData = resultDataProp ?? derivedFromRuntime?.resultData ?? null;
-  const tracedFlowRenderer = (0, import_react31.useMemo)(() => {
+  const tracedFlowRenderer = (0, import_react32.useMemo)(() => {
     if (!traceGraph) return void 0;
     return ({ selectedIndex, snapshots: snapshots2, onNodeClick, sliceCone: sliceCone2 }) => {
       const activeRsid = snapshots2[selectedIndex]?.runtimeStageId;
@@ -6255,7 +6807,7 @@ function ExplainableShell({
         ...traceTheme.current !== void 0 && { active: traceTheme.current },
         ...traceTheme.mode !== void 0 && { default: traceTheme.mode === "dark" ? "#94a3b8" : "#64748b" }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         TracedFlow,
         {
           graph: traceGraph,
@@ -6275,10 +6827,10 @@ function ExplainableShell({
   const leftLabel = panelLabels?.topology ?? "Topology";
   const rightLabel = panelLabels?.details ?? "Details";
   const bottomLabel = panelLabels?.timeline ?? "Timeline";
-  const shellRef = (0, import_react31.useRef)(null);
-  const [isNarrow, setIsNarrow] = (0, import_react31.useState)(false);
-  const [isMedium, setIsMedium] = (0, import_react31.useState)(false);
-  (0, import_react31.useEffect)(() => {
+  const shellRef = (0, import_react32.useRef)(null);
+  const [isNarrow, setIsNarrow] = (0, import_react32.useState)(false);
+  const [isMedium, setIsMedium] = (0, import_react32.useState)(false);
+  (0, import_react32.useEffect)(() => {
     const el = shellRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
@@ -6290,14 +6842,14 @@ function ExplainableShell({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const autoRecorderViews = (0, import_react31.useMemo)(() => {
+  const autoRecorderViews = (0, import_react32.useMemo)(() => {
     const recorders = runtimeSnapshot?.recorders;
     if (!recorders?.length) return [];
     const explicitIds = new Set((recorderViews ?? []).map((v2) => v2.id));
     return recorders.filter((r) => !explicitIds.has(r.id)).map((r) => ({ id: r.id, name: r.name, description: r.description, preferredOperation: r.preferredOperation, data: r.data }));
   }, [runtimeSnapshot, recorderViews]);
   const hasNarrative = !!narrativeEntries?.length;
-  const allTabs = (0, import_react31.useMemo)(() => {
+  const allTabs = (0, import_react32.useMemo)(() => {
     const tabs2 = [
       { id: "result", name: "Result", description: "Final output and console logs" },
       { id: "memory", name: "Memory", description: "Accumulator \u2014 progressive shared state at each stage" }
@@ -6316,39 +6868,40 @@ function ExplainableShell({
   }, [hasNarrative, recorderViews, autoRecorderViews, hideTabsProp]);
   const validTabIds = new Set(allTabs.map((t) => t.id));
   const resolvedDefault = defaultTab && validTabIds.has(defaultTab) ? defaultTab : allTabs[0]?.id ?? "result";
-  const [activeTab, setActiveTab] = (0, import_react31.useState)(resolvedDefault);
-  const [snapshotIdx, setSnapshotIdx] = (0, import_react31.useState)(0);
-  const [drillDownStack, setDrillDownStack] = (0, import_react31.useState)([]);
-  const [rightExpanded, setRightExpanded] = (0, import_react31.useState)(defaultExpanded?.details ?? true);
-  const [rightPanelMode, setRightPanelMode] = (0, import_react31.useState)("insights");
-  const [inspectorTab, setInspectorTab] = (0, import_react31.useState)("state");
-  const [leftExpanded, setLeftExpanded] = (0, import_react31.useState)(defaultExpanded?.topology ?? false);
-  const [timelineExpanded, setTimelineExpanded] = (0, import_react31.useState)(defaultExpanded?.timeline ?? false);
-  (0, import_react31.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react32.useState)(resolvedDefault);
+  const [snapshotIdx, setSnapshotIdx] = (0, import_react32.useState)(0);
+  const [drillDownStack, setDrillDownStack] = (0, import_react32.useState)([]);
+  const [rightExpanded, setRightExpanded] = (0, import_react32.useState)(defaultExpanded?.details ?? true);
+  const [rightPanelMode, setRightPanelMode] = (0, import_react32.useState)("insights");
+  const [inspectorTab, setInspectorTab] = (0, import_react32.useState)("state");
+  const [tracing, setTracing] = (0, import_react32.useState)(null);
+  const [leftExpanded, setLeftExpanded] = (0, import_react32.useState)(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = (0, import_react32.useState)(defaultExpanded?.timeline ?? false);
+  (0, import_react32.useEffect)(() => {
     if (isNarrow) {
       setLeftExpanded(false);
       setRightExpanded(false);
       setTimelineExpanded(false);
     }
   }, [isNarrow]);
-  const triggerReflow = (0, import_react31.useCallback)(() => {
+  const triggerReflow = (0, import_react32.useCallback)(() => {
     requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
     setTimeout(() => window.dispatchEvent(new Event("resize")), 320);
   }, []);
-  const toggleLeft = (0, import_react31.useCallback)((v2) => {
+  const toggleLeft = (0, import_react32.useCallback)((v2) => {
     setLeftExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleRight = (0, import_react31.useCallback)((v2) => {
+  const toggleRight = (0, import_react32.useCallback)((v2) => {
     setRightExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleTimeline = (0, import_react31.useCallback)(() => {
+  const toggleTimeline = (0, import_react32.useCallback)(() => {
     setTimelineExpanded((p) => !p);
     triggerReflow();
   }, [triggerReflow]);
   const isInSubflow = drillDownStack.length > 0;
-  const currentLevel = (0, import_react31.useMemo)(() => {
+  const currentLevel = (0, import_react32.useMemo)(() => {
     if (drillDownStack.length > 0) {
       const top = drillDownStack[drillDownStack.length - 1];
       return { spec: top.spec, snapshots: top.snapshots, narrative: top.narrative };
@@ -6357,11 +6910,32 @@ function ExplainableShell({
   }, [drillDownStack, snapshots]);
   const activeSnapshots = currentLevel.snapshots;
   const safeIdx = activeSnapshots.length > 0 ? Math.max(0, Math.min(snapshotIdx, activeSnapshots.length - 1)) : 0;
-  const shellDataTrace = (0, import_react31.useMemo)(
+  const shellDataTrace = (0, import_react32.useMemo)(
     () => runtimeSnapshot?.commitLog ? buildDataTrace(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, activeSnapshots[safeIdx]?.runtimeStageId ?? "") : { frames: [], readsAvailable: true },
     [runtimeSnapshot, activeSnapshots, safeIdx]
   );
-  const sliceCone = (0, import_react31.useMemo)(() => {
+  const traceWalk = (0, import_react32.useMemo)(() => {
+    if (!tracing || !runtimeSnapshot?.commitLog) return null;
+    const scope = tracing.via.length > 0 ? tracing.via[tracing.via.length - 1] : tracing;
+    return buildTraceWalk(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, scope.key, {
+      beforeCommitIdx: scope.beforeCommitIdx
+    });
+  }, [tracing, runtimeSnapshot]);
+  const traceStopIndices = (0, import_react32.useMemo)(() => {
+    if (!traceWalk || traceWalk.missing || isInSubflow) return [];
+    const idxByRsid = new Map(activeSnapshots.map((sn, i) => [sn.runtimeStageId, i]));
+    return traceWalk.stops.map((stop) => idxByRsid.get(stop.runtimeStageId)).filter((i) => i !== void 0).sort((a, b) => a - b);
+  }, [traceWalk, activeSnapshots, isInSubflow]);
+  const sliceCone = (0, import_react32.useMemo)(() => {
+    if (traceWalk && !traceWalk.missing && traceWalk.stops.length >= 2) {
+      const cone2 = /* @__PURE__ */ new Map();
+      for (const stop of traceWalk.stops) {
+        const stagePart = stop.runtimeStageId.split("#")[0];
+        const prev = cone2.get(stagePart);
+        if (prev === void 0 || stop.depth < prev) cone2.set(stagePart, stop.depth);
+      }
+      return cone2;
+    }
     if (rightPanelMode !== "what" || inspectorTab !== "trace") return void 0;
     if (shellDataTrace.frames.length < 2) return void 0;
     const cone = /* @__PURE__ */ new Map();
@@ -6371,49 +6945,98 @@ function ExplainableShell({
       if (prev === void 0 || f.depth < prev) cone.set(stagePart, f.depth);
     }
     return cone;
-  }, [rightPanelMode, inspectorTab, shellDataTrace]);
+  }, [traceWalk, rightPanelMode, inspectorTab, shellDataTrace]);
   const activeNarrativeEntries = isInSubflow ? currentLevel.narrative : narrativeEntries;
-  const breadcrumbs = (0, import_react31.useMemo)(() => {
+  const breadcrumbs = (0, import_react32.useMemo)(() => {
     const root = { label: title || "Flowchart", spec: null, description: void 0 };
     return [root, ...drillDownStack.map((e) => ({ label: e.label, spec: e.spec, description: void 0 }))];
   }, [title, drillDownStack]);
-  const showTreeSidebar = (0, import_react31.useMemo)(() => {
+  const showTreeSidebar = (0, import_react32.useMemo)(() => {
     if (traceGraph?.nodes?.length) {
       return traceGraph.nodes.some((n) => n.data?.isSubflow === true);
     }
     return false;
   }, [traceGraph]);
-  const rootOverlay = (0, import_react31.useMemo)(() => {
+  const rootOverlay = (0, import_react32.useMemo)(() => {
     if (isInSubflow || !snapshots.length) return { activeStage: void 0, doneStages: void 0 };
     const doneStages = new Set(snapshots.slice(0, safeIdx).map((s) => s.stageLabel));
     const activeStage = snapshots[safeIdx]?.stageLabel ?? null;
     return { activeStage, doneStages };
   }, [isInSubflow, snapshots, safeIdx]);
-  const handleTabChange = (0, import_react31.useCallback)((tab) => {
+  const handleTabChange = (0, import_react32.useCallback)((tab) => {
     setActiveTab(tab);
     setDrillDownStack([]);
   }, []);
-  const handleSnapshotChange = (0, import_react31.useCallback)((idx) => {
+  const handleSnapshotChange = (0, import_react32.useCallback)((idx) => {
     if (typeof idx === "number") setSnapshotIdx(idx);
   }, []);
-  const handleDrillDown = (0, import_react31.useCallback)(
+  const jumpToAnchor = (0, import_react32.useCallback)(
+    (walk) => {
+      const anchor = walk.stops[0];
+      if (!anchor) return;
+      const idx = activeSnapshots.findIndex((sn) => sn.runtimeStageId === anchor.runtimeStageId);
+      if (idx >= 0) setSnapshotIdx(idx);
+    },
+    [activeSnapshots]
+  );
+  const handleStartTracing = (0, import_react32.useCallback)(
+    (key) => {
+      if (!runtimeSnapshot?.commitLog || isInSubflow) return;
+      const log = runtimeSnapshot.commitLog;
+      const cursorRsid = activeSnapshots[safeIdx]?.runtimeStageId;
+      const cursorCommitIdx = log.findIndex((c) => c.runtimeStageId === cursorRsid);
+      const beforeCommitIdx = cursorCommitIdx >= 0 ? cursorCommitIdx + 1 : void 0;
+      setTracing({ key, beforeCommitIdx, via: [] });
+      setRightPanelMode("what");
+      setInspectorTab("trace");
+      jumpToAnchor(
+        buildTraceWalk(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, key, { beforeCommitIdx })
+      );
+    },
+    [runtimeSnapshot, isInSubflow, activeSnapshots, safeIdx, jumpToAnchor]
+  );
+  const handleFollowIngredient = (0, import_react32.useCallback)(
+    (ing) => {
+      if (!tracing || !runtimeSnapshot?.commitLog || ing.writerCommitIdx === null) return;
+      const scope = { key: ing.key, beforeCommitIdx: ing.writerCommitIdx + 1 };
+      setTracing({ ...tracing, via: [...tracing.via, scope] });
+      jumpToAnchor(
+        buildTraceWalk(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, scope.key, {
+          beforeCommitIdx: scope.beforeCommitIdx
+        })
+      );
+    },
+    [tracing, runtimeSnapshot, jumpToAnchor]
+  );
+  const handleShowAllIngredients = (0, import_react32.useCallback)(() => {
+    if (!tracing || !runtimeSnapshot?.commitLog) return;
+    setTracing({ ...tracing, via: [] });
+    jumpToAnchor(
+      buildTraceWalk(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, tracing.key, {
+        beforeCommitIdx: tracing.beforeCommitIdx
+      })
+    );
+  }, [tracing, runtimeSnapshot, jumpToAnchor]);
+  const handleExitTracing = (0, import_react32.useCallback)(() => setTracing(null), []);
+  const handleDrillDown = (0, import_react32.useCallback)(
     (nodeName) => {
       const entry = resolveSubflowFromRuntime(activeSnapshots, nodeName, narrativeEntries);
       if (entry) {
+        setTracing(null);
         setDrillDownStack((prev) => [...prev, { ...entry, parentSnapshotIdx: snapshotIdx }]);
         setSnapshotIdx(0);
       }
     },
     [activeSnapshots, narrativeEntries, snapshotIdx]
   );
-  const handleBreadcrumbNavigate = (0, import_react31.useCallback)((level) => {
+  const handleBreadcrumbNavigate = (0, import_react32.useCallback)((level) => {
     setDrillDownStack((prev) => {
       const popped = level === 0 ? prev[0] : prev[level];
       if (popped) setSnapshotIdx(popped.parentSnapshotIdx);
       return level === 0 ? [] : prev.slice(0, level);
     });
   }, []);
-  const handleNodeClick = (0, import_react31.useCallback)(
+  const handleNodeClick = (0, import_react32.useCallback)(
     (indexOrId) => {
       if (typeof indexOrId === "number") {
         setSnapshotIdx(indexOrId);
@@ -6429,7 +7052,7 @@ function ExplainableShell({
     },
     [activeSnapshots, narrativeEntries, handleDrillDown]
   );
-  const handleTreeNodeSelect = (0, import_react31.useCallback)(
+  const handleTreeNodeSelect = (0, import_react32.useCallback)(
     (name, isSubflow) => {
       if (isSubflow) {
         setDrillDownStack([]);
@@ -6446,33 +7069,112 @@ function ExplainableShell({
     },
     [snapshots, narrativeEntries, snapshotIdx]
   );
+  const navigateToStage = (0, import_react32.useCallback)(
+    (id) => {
+      const idx = activeSnapshots.findIndex((sn) => sn.runtimeStageId === id);
+      if (idx >= 0) setSnapshotIdx(idx);
+    },
+    [activeSnapshots]
+  );
+  const activeViaKey = tracing && tracing.via.length > 0 ? tracing.via[tracing.via.length - 1].key : null;
+  const stepNumberOf = (0, import_react32.useCallback)(
+    (rsid) => {
+      const i = activeSnapshots.findIndex((sn) => sn.runtimeStageId === rsid);
+      return i >= 0 ? i + 1 : null;
+    },
+    [activeSnapshots]
+  );
+  const tracingRail = (0, import_react32.useMemo)(() => {
+    if (!tracing || !traceWalk || traceWalk.missing || traceStopIndices.length === 0) return null;
+    const cursorRsid = activeSnapshots[safeIdx]?.runtimeStageId;
+    const walkIdx = traceWalk.stops.findIndex((st) => st.runtimeStageId === cursorRsid);
+    return {
+      tracedKey: tracing.key,
+      viaKey: activeViaKey,
+      stopIndices: traceStopIndices,
+      stopOrdinal: walkIdx >= 0 ? walkIdx + 1 : 1,
+      totalStops: traceWalk.stops.length,
+      onExit: handleExitTracing,
+      onShowAll: activeViaKey ? handleShowAllIngredients : void 0
+    };
+  }, [tracing, traceWalk, traceStopIndices, activeSnapshots, safeIdx, activeViaKey, handleExitTracing, handleShowAllIngredients]);
+  const traceTabContent = (0, import_react32.useMemo)(() => tracing && traceWalk ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    TraceWalkCard,
+    {
+      walk: traceWalk,
+      cursorRuntimeStageId: activeSnapshots[safeIdx]?.runtimeStageId ?? null,
+      viaKey: activeViaKey,
+      stepNumberOf,
+      previewValueOf: (k) => activeSnapshots[safeIdx]?.memory?.[k],
+      onFollowIngredient: handleFollowIngredient,
+      onJumpToStop: navigateToStage,
+      onShowAll: activeViaKey ? handleShowAllIngredients : void 0,
+      onExit: handleExitTracing
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    !isInSubflow && (shellDataTrace.frames[0]?.keysWritten?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { "data-fp": "trace-entry", style: { padding: "10px 14px 0", fontSize: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: theme.textMuted, marginRight: 6 }, children: "Trace a value:" }),
+      shellDataTrace.frames[0].keysWritten.map((k) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "button",
+        {
+          "data-fp": "trace-entry-chip",
+          onClick: () => handleStartTracing(k),
+          title: "Where did " + k + " come from? Walk its causes on the timeline.",
+          style: {
+            border: "1px solid var(--fp-accent, #6366f1)",
+            background: "transparent",
+            color: "var(--fp-accent, #6366f1)",
+            borderRadius: 12,
+            padding: "2px 10px",
+            margin: "0 6px 6px 0",
+            fontSize: 11,
+            fontWeight: 600,
+            fontFamily: "monospace",
+            cursor: "pointer"
+          },
+          children: k
+        },
+        k
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      DataTracePanel,
+      {
+        frames: shellDataTrace.frames,
+        note: shellDataTrace.readsAvailable ? void 0 : "\u26A0 reads were not recorded (readTracking off) \u2014 dependencies are unknowable, not absent.",
+        selectedStageId: activeSnapshots[safeIdx]?.runtimeStageId,
+        onFrameClick: navigateToStage,
+        fromStageName: activeSnapshots[safeIdx]?.stageName
+      }
+    )
+  ] }), [tracing, traceWalk, activeSnapshots, safeIdx, activeViaKey, stepNumberOf, handleFollowIngredient, navigateToStage, handleShowAllIngredients, handleExitTracing, handleStartTracing, isInSubflow, shellDataTrace]);
   const tabLabels = new Map(allTabs.map((t) => [t.id, t.name]));
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
-        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
-        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
-          isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
+        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true, tracing: tracingRail }),
+          isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
           traceGraph && effectiveRenderFlowchart?.({ spec: null, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick, showStageId, ...sliceCone && { sliceCone } }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
         ] })
       ] })
     ] });
   }
   const showTopology = !!effectiveRenderFlowchart && !!traceGraph;
-  const detailsContent = (0, import_react31.useMemo)(() => {
+  const detailsContent = (0, import_react32.useMemo)(() => {
     if (activeTab === "result") {
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
     }
     if (activeTab === "memory") {
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
     }
     if (activeTab === "narrative") {
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, size, style: { height: "100%" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, size, style: { height: "100%" } });
     }
     const customView = recorderViews?.find((v2) => v2.id === activeTab);
     if (customView?.render) {
@@ -6480,7 +7182,7 @@ function ExplainableShell({
     }
     const autoView = autoRecorderViews.find((v2) => v2.id === activeTab);
     if (autoView) {
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         KeyedRecorderView,
         {
           data: autoView.data,
@@ -6493,8 +7195,8 @@ function ExplainableShell({
     }
     return null;
   }, [activeTab, resultData, logs, hideConsole, size, activeSnapshots, safeIdx, activeNarrativeEntries, recorderViews, autoRecorderViews]);
-  const detailsPanel = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: {
+  const detailsPanel = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.border}`,
       background: theme.bgSecondary,
@@ -6502,7 +7204,7 @@ function ExplainableShell({
       overflowX: "auto"
     }, children: allTabs.map((tab) => {
       const active = tab.id === activeTab;
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           onClick: () => handleTabChange(tab.id),
@@ -6526,9 +7228,9 @@ function ExplainableShell({
         tab.id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
   ] });
-  const shellThemeVars = (0, import_react31.useMemo)(() => {
+  const shellThemeVars = (0, import_react32.useMemo)(() => {
     if (!traceTheme) return {};
     const base = traceTheme.mode ? tokensToCSSVars(traceTheme.mode === "light" ? coolLight : coolDark) : {};
     return {
@@ -6537,7 +7239,7 @@ function ExplainableShell({
       ...traceTheme.current !== void 0 && { ["--fp-node-cursor"]: traceTheme.current }
     };
   }, [traceTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref: shellRef,
@@ -6556,20 +7258,21 @@ function ExplainableShell({
       },
       "data-fp": "explainable-shell",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           TimeTravelControls,
           {
             snapshots: activeSnapshots,
             selectedIndex: safeIdx,
             onIndexChange: handleSnapshotChange,
-            size
+            size,
+            tracing: tracingRail
           }
         ),
-        isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
+        isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
           /* ── Mobile: stacked vertical ── */
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-            showTopology && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+            showTopology && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
               spec: null,
               snapshots: activeSnapshots,
               selectedIndex: safeIdx,
@@ -6577,9 +7280,9 @@ function ExplainableShell({
               showStageId,
               ...sliceCone && { sliceCone }
             }) }),
-            showTreeSidebar && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
-              leftExpanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            showTreeSidebar && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
+              leftExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 SubflowTree,
                 {
                   graph: traceGraph ?? { nodes: [], edges: [] },
@@ -6589,17 +7292,17 @@ function ExplainableShell({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-            rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
-            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+            rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
           ] })
         ) : (
           /* ── Desktop: two-column — Flowchart | Right Panel ── */
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { width: 180, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { width: 180, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   SubflowTree,
                   {
                     graph: traceGraph ?? { nodes: [], edges: [] },
@@ -6608,24 +7311,26 @@ function ExplainableShell({
                     onNodeSelect: handleTreeNodeSelect
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VLinePill, { label: "Topology", expanded: true, side: "left", onClick: () => toggleLeft(false) })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VLinePill, { label: "Topology", expanded: false, side: "left", onClick: () => toggleLeft(true) })),
-              showTopology ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VLinePill, { label: "Topology", expanded: true, side: "left", onClick: () => toggleLeft(false) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VLinePill, { label: "Topology", expanded: false, side: "left", onClick: () => toggleLeft(true) })),
+              showTopology ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
                 spec: null,
                 snapshots: activeSnapshots,
                 selectedIndex: safeIdx,
                 onNodeClick: handleNodeClick,
                 showStageId,
                 ...sliceCone && { sliceCone }
-              }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VLinePill, { label: "Details", expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-              rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { width: "42%", minWidth: 320, maxWidth: 550, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VLinePill, { label: "Details", expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+              rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: "42%", minWidth: 320, maxWidth: 550, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 RightPanel,
                 {
                   mode: rightPanelMode,
                   onModeChange: setRightPanelMode,
                   dataTrace: shellDataTrace,
                   onInspectorTabChange: setInspectorTab,
+                  inspectorTab,
+                  traceContent: traceTabContent,
                   snapshots: activeSnapshots,
                   selectedIndex: safeIdx,
                   runtimeSnapshot,
@@ -6635,14 +7340,11 @@ function ExplainableShell({
                   recorderViews,
                   autoRecorderViews,
                   size,
-                  onNavigateToStage: (id) => {
-                    const idx = activeSnapshots.findIndex((s) => s.runtimeStageId === id);
-                    if (idx >= 0) setSnapshotIdx(idx);
-                  }
+                  onNavigateToStage: navigateToStage
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               CompactTimeline,
               {
                 snapshots: activeSnapshots,
@@ -6659,8 +7361,8 @@ function ExplainableShell({
 
 // src/components/TraceViewer/TraceViewer.tsx
 var React = __toESM(require("react"), 1);
-var import_react32 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function parseTrace(input) {
   if (input == null) {
     return {
@@ -6723,11 +7425,11 @@ function TraceViewer({
   recorderViews,
   renderFlowchart
 }) {
-  const parsed = (0, import_react32.useMemo)(() => parseTrace(trace), [trace]);
+  const parsed = (0, import_react33.useMemo)(() => parseTrace(trace), [trace]);
   React.useEffect(() => {
     if (!parsed.ok && onError) onError(parsed.error);
   }, [parsed, onError]);
-  const snapshots = (0, import_react32.useMemo)(() => {
+  const snapshots = (0, import_react33.useMemo)(() => {
     if (!parsed.ok || !parsed.trace.snapshot) return [];
     try {
       return toVisualizationSnapshots(
@@ -6741,7 +7443,7 @@ function TraceViewer({
   if (!parsed.ok || snapshots.length === 0) {
     return fallback ?? null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ExplainableShell,
     {
       snapshots,
@@ -6778,13 +7480,16 @@ function TraceViewer({
   SubflowTree,
   TimeTravelControls,
   TraceViewer,
+  TraceWalkCard,
   buildEntryRangeIndex,
+  buildTraceWalk,
   computeRevealedEntryCount,
   coolDark,
   coolLight,
   createSnapshots,
   defaultTokens,
   extractSubflowNarrative,
+  formatTraceWalk,
   mergeWritePatch,
   rawDefaults,
   subflowResultToSnapshots,