footprint-explainable-ui 0.6.0 → 0.7.2

package/dist/index.cjs

@@ -24,18 +24,23 @@ __export(src_exports, {
   FootprintTheme: () => FootprintTheme,
   GanttTimeline: () => GanttTimeline,
   MemoryInspector: () => MemoryInspector,
+  MemoryPanel: () => MemoryPanel,
   NarrativeLog: () => NarrativeLog,
+  NarrativePanel: () => NarrativePanel,
   NarrativeTrace: () => NarrativeTrace,
   ResultPanel: () => ResultPanel,
   ScopeDiff: () => ScopeDiff,
   SnapshotPanel: () => SnapshotPanel,
   StageDetailPanel: () => StageDetailPanel,
+  StoryNarrative: () => StoryNarrative,
   SubflowTree: () => SubflowTree,
   TimeTravelControls: () => TimeTravelControls,
   coolDark: () => coolDark,
   coolLight: () => coolLight,
   createSnapshots: () => createSnapshots,
   defaultTokens: () => defaultTokens,
+  rawDefaults: () => rawDefaults,
+  subflowResultToSnapshots: () => subflowResultToSnapshots,
   themePresets: () => themePresets,
   toVisualizationSnapshots: () => toVisualizationSnapshots,
   tokensToCSSVars: () => tokensToCSSVars,
@@ -71,7 +76,7 @@ function tokensToCSSVars(tokens) {
   if (tokens.fontFamily?.mono) vars["--fp-font-mono"] = tokens.fontFamily.mono;
   return vars;
 }
-var defaultTokens = {
+var rawDefaults = {
   colors: {
     primary: "#6366f1",
     success: "#22c55e",
@@ -91,6 +96,26 @@ var defaultTokens = {
     mono: "'JetBrains Mono', 'Fira Code', monospace"
   }
 };
+var defaultTokens = {
+  colors: {
+    primary: `var(--fp-color-primary, ${rawDefaults.colors.primary})`,
+    success: `var(--fp-color-success, ${rawDefaults.colors.success})`,
+    error: `var(--fp-color-error, ${rawDefaults.colors.error})`,
+    warning: `var(--fp-color-warning, ${rawDefaults.colors.warning})`,
+    bgPrimary: `var(--fp-bg-primary, ${rawDefaults.colors.bgPrimary})`,
+    bgSecondary: `var(--fp-bg-secondary, ${rawDefaults.colors.bgSecondary})`,
+    bgTertiary: `var(--fp-bg-tertiary, ${rawDefaults.colors.bgTertiary})`,
+    textPrimary: `var(--fp-text-primary, ${rawDefaults.colors.textPrimary})`,
+    textSecondary: `var(--fp-text-secondary, ${rawDefaults.colors.textSecondary})`,
+    textMuted: `var(--fp-text-muted, ${rawDefaults.colors.textMuted})`,
+    border: `var(--fp-border, ${rawDefaults.colors.border})`
+  },
+  radius: `var(--fp-radius, ${rawDefaults.radius})`,
+  fontFamily: {
+    sans: `var(--fp-font-sans, ${rawDefaults.fontFamily.sans})`,
+    mono: `var(--fp-font-mono, ${rawDefaults.fontFamily.mono})`
+  }
+};
 
 // src/theme/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -258,6 +283,7 @@ function MemoryInspector({
   className,
   style
 }) {
+  const cacheRef = (0, import_react3.useRef)(null);
   const { memory, newKeys } = (0, import_react3.useMemo)(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
@@ -265,21 +291,37 @@ function MemoryInspector({
     if (!snapshots || snapshots.length === 0) {
       return { memory: {}, newKeys: /* @__PURE__ */ new Set() };
     }
-    const merged = {};
-    for (let i = 0; i <= Math.min(selectedIndex, snapshots.length - 1); i++) {
-      Object.assign(merged, snapshots[i]?.memory);
+    const safeIdx = Math.min(selectedIndex, snapshots.length - 1);
+    let merged;
+    const cache = cacheRef.current;
+    if (cache && cache.snapshots === snapshots && cache.index <= safeIdx) {
+      merged = { ...cache.accumulated };
+      for (let i = cache.index + 1; i <= safeIdx; i++) {
+        Object.assign(merged, snapshots[i]?.memory);
+      }
+    } else {
+      merged = {};
+      for (let i = 0; i <= safeIdx; i++) {
+        Object.assign(merged, snapshots[i]?.memory);
+      }
     }
+    cacheRef.current = { snapshots, index: safeIdx, accumulated: merged };
     const nk = /* @__PURE__ */ new Set();
-    if (highlightNew && selectedIndex > 0) {
-      const prev = {};
-      for (let i = 0; i < selectedIndex; i++) {
-        Object.assign(prev, snapshots[i]?.memory);
+    if (highlightNew && safeIdx > 0) {
+      let prev;
+      if (cache && cache.snapshots === snapshots && cache.index === safeIdx - 1) {
+        prev = cache.accumulated;
+      } else {
+        prev = {};
+        for (let i = 0; i < safeIdx; i++) {
+          Object.assign(prev, snapshots[i]?.memory);
+        }
       }
-      const current = snapshots[selectedIndex]?.memory ?? {};
+      const current = snapshots[safeIdx]?.memory ?? {};
       for (const k of Object.keys(current)) {
         if (!(k in prev)) nk.add(k);
       }
-    } else if (highlightNew && selectedIndex === 0 && snapshots[0]) {
+    } else if (highlightNew && safeIdx === 0 && snapshots[0]) {
       for (const k of Object.keys(snapshots[0].memory)) nk.add(k);
     }
     return { memory: merged, newKeys: nk };
@@ -288,9 +330,9 @@ function MemoryInspector({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style, "data-fp": "memory-inspector", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style, "data-fp": "memory-inspector", role: "region", "aria-label": "Memory state", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-fp": "memory-label", children: "Memory State" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { "data-fp": "memory-json", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: JSON.stringify(memory, null, 2) }) })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -303,6 +345,8 @@ function MemoryInspector({
         ...style
       },
       "data-fp": "memory-inspector",
+      role: "region",
+      "aria-label": "Memory state",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
@@ -595,19 +639,32 @@ function NarrativeTrace({
             "data-fp": "narrative-header",
             "data-collapsible": group.steps.length > 0,
             "data-collapsed": collapsedSet.has(group.headerIdx),
+            role: group.steps.length > 0 ? "button" : void 0,
+            tabIndex: group.steps.length > 0 ? 0 : void 0,
+            "aria-expanded": group.steps.length > 0 ? !collapsedSet.has(group.headerIdx) : void 0,
+            "aria-label": `Stage ${gi + 1}, ${group.steps.length} steps${gi === lastIdx ? ", current" : ""}`,
             onClick: () => {
               if (group.steps.length > 0) toggle(group.headerIdx);
               onStageClick?.(group.headerIdx);
             },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (group.steps.length > 0) toggle(group.headerIdx);
+                onStageClick?.(group.headerIdx);
+              }
+            },
             children: group.header
           }
         ),
         !collapsedSet.has(group.headerIdx) && group.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-fp": "narrative-step", children: step.text }, step.idx))
       ] }, group.headerIdx)),
-      futureGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-fp": "narrative-group", "data-future": true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-fp": "narrative-header", children: group.header }),
-        group.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-fp": "narrative-step", children: step.text }, `f-${step.idx}`))
-      ] }, `f-${group.headerIdx}`))
+      futureGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-fp": "narrative-future-hint", children: [
+        futureGroups.length,
+        " more ",
+        futureGroups.length === 1 ? "stage" : "stages",
+        " ahead..."
+      ] })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -637,10 +694,21 @@ function NarrativeTrace({
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "div",
                   {
+                    role: hasSteps ? "button" : void 0,
+                    tabIndex: hasSteps ? 0 : void 0,
+                    "aria-expanded": hasSteps ? !isCollapsed : void 0,
+                    "aria-label": `Stage ${gi + 1}, ${group.steps.length} steps${isLatest ? ", current" : ", completed"}`,
                     onClick: () => {
                       if (hasSteps) toggle(group.headerIdx);
                       onStageClick?.(group.headerIdx);
                     },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        if (hasSteps) toggle(group.headerIdx);
+                        onStageClick?.(group.headerIdx);
+                      }
+                    },
                     style: {
                       fontSize: fs.body,
                       lineHeight: 1.7,
@@ -699,36 +767,18 @@ function NarrativeTrace({
             group.headerIdx
           );
         }),
-        futureGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { opacity: 0.2 }, children: futureGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
-            {
-              style: {
-                fontSize: fs.body,
-                lineHeight: 1.7,
-                color: theme.textMuted,
-                padding: `4px ${pad - 4}px`,
-                borderLeft: `3px solid ${theme.border}`,
-                fontWeight: 600,
-                paddingLeft: pad + 12
-              },
-              children: group.header
-            }
-          ),
-          group.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
-            {
-              style: {
-                fontSize: fs.small,
-                lineHeight: 1.6,
-                color: theme.textMuted,
-                padding: `2px ${pad - 4}px 2px ${pad + 20}px`
-              },
-              children: step.text
-            },
-            `f-${step.idx}`
-          ))
-        ] }, `f-${group.headerIdx}`)) })
+        futureGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+          opacity: 0.3,
+          fontSize: fs.small,
+          color: theme.textMuted,
+          padding: `8px ${pad}px`,
+          fontStyle: "italic"
+        }, children: [
+          futureGroups.length,
+          " more ",
+          futureGroups.length === 1 ? "stage" : "stages",
+          " ahead..."
+        ] })
       ]
     }
   );
@@ -770,12 +820,15 @@ function GanttTimeline({
     }
   }, [selectedIndex, showAll]);
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, "data-fp": "gantt-timeline", role: "listbox", "aria-label": "Execution timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         "data-fp": "gantt-bar",
         "data-selected": idx === selectedIndex,
         "data-visible": idx <= selectedIndex,
+        role: "option",
+        "aria-selected": idx === selectedIndex,
+        "aria-label": `${snap.stageLabel}, ${snap.durationMs}ms`,
         onClick: () => onSelect?.(idx),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
@@ -785,7 +838,7 @@ function GanttTimeline({
           ] })
         ]
       },
-      snap.stageName
+      `${snap.stageName}-${idx}`
     )) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -841,6 +894,8 @@ function GanttTimeline({
           "div",
           {
             ref: scrollContainerRef,
+            role: "listbox",
+            "aria-label": "Execution timeline",
             style: {
               marginTop: 8,
               display: "flex",
@@ -861,6 +916,9 @@ function GanttTimeline({
                 "div",
                 {
                   ref: isSelected ? activeRowRef : void 0,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-label": `${snap.stageLabel}, ${snap.durationMs}ms`,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -876,6 +934,7 @@ function GanttTimeline({
                     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "span",
                       {
+                        title: snap.stageLabel,
                         style: {
                           width: labelWidth,
                           fontSize: fs.small,
@@ -935,7 +994,7 @@ function GanttTimeline({
                     )
                   ]
                 },
-                snap.stageName
+                `${snap.stageName}-${idx}`
               );
             })
           }
@@ -1257,9 +1316,9 @@ function fmt(v2) {
   return String(v2);
 }
 var diffColors = {
-  added: { bg: "rgba(34,197,94,0.10)", fg: "#22c55e", icon: "+" },
-  removed: { bg: "rgba(239,68,68,0.10)", fg: "#ef4444", icon: "-" },
-  changed: { bg: "rgba(245,158,11,0.10)", fg: "#f59e0b", icon: "~" },
+  added: { bg: `color-mix(in srgb, ${theme.success} 10%, transparent)`, fg: theme.success, icon: "+" },
+  removed: { bg: `color-mix(in srgb, ${theme.error} 10%, transparent)`, fg: theme.error, icon: "-" },
+  changed: { bg: `color-mix(in srgb, ${theme.warning} 10%, transparent)`, fg: theme.warning, icon: "~" },
   unchanged: { bg: "transparent", fg: "", icon: " " }
 };
 function ScopeDiff({
@@ -1996,49 +2055,80 @@ function TimeTravelControls({
       setPlaying(true);
     }
   }, [playing, selectedIndex, total, onIndexChange]);
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (e) => {
+      if (e.key === "ArrowLeft" && canPrev && !playing) {
+        e.preventDefault();
+        setPlaying(false);
+        onIndexChange(selectedIndex - 1);
+      } else if (e.key === "ArrowRight" && canNext && !playing) {
+        e.preventDefault();
+        setPlaying(false);
+        onIndexChange(selectedIndex + 1);
+      } else if (e.key === " " && autoPlayable) {
+        e.preventDefault();
+        togglePlay();
+      }
+    },
+    [canPrev, canNext, playing, selectedIndex, onIndexChange, autoPlayable, togglePlay]
+  );
   const fs = fontSize[size];
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, style, "data-fp": "time-travel-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
-        {
-          "data-fp": "tt-prev",
-          disabled: !canPrev || playing,
-          onClick: () => {
-            setPlaying(false);
-            onIndexChange(selectedIndex - 1);
-          },
-          children: "Prev"
-        }
-      ),
-      autoPlayable && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "data-fp": "tt-play", onClick: togglePlay, children: playing ? "Pause" : "Play" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
-        {
-          "data-fp": "tt-next",
-          disabled: !canNext || playing,
-          onClick: () => {
-            setPlaying(false);
-            onIndexChange(selectedIndex + 1);
-          },
-          children: "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);
-          },
-          title: snap.stageLabel
-        },
-        i
-      )) })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        className,
+        style,
+        "data-fp": "time-travel-controls",
+        role: "toolbar",
+        "aria-label": "Time travel controls",
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__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"
+            }
+          ),
+          autoPlayable && /* @__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"
+            }
+          ),
+          /* @__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);
+              },
+              title: snap.stageLabel
+            },
+            i
+          )) })
+        ]
+      }
+    );
   }
   const btnStyle = (disabled) => ({
     background: theme.bgTertiary,
@@ -2067,6 +2157,10 @@ function TimeTravelControls({
         ...style
       },
       "data-fp": "time-travel-controls",
+      role: "toolbar",
+      "aria-label": "Time travel controls",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
@@ -2077,6 +2171,7 @@ function TimeTravelControls({
               setPlaying(false);
               onIndexChange(selectedIndex - 1);
             },
+            "aria-label": "Previous stage",
             children: "\u25C0"
           }
         ),
@@ -2099,6 +2194,7 @@ function TimeTravelControls({
               flexShrink: 0
             },
             title: playing ? "Pause" : "Play",
+            "aria-label": playing ? "Pause" : "Play",
             children: playing ? "\u23F8" : "\u25B6"
           }
         ),
@@ -2111,6 +2207,7 @@ function TimeTravelControls({
               setPlaying(false);
               onIndexChange(selectedIndex + 1);
             },
+            "aria-label": "Next stage",
             children: "\u25B6"
           }
         ),
@@ -2157,125 +2254,146 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-var import_react11 = require("react");
+var import_react15 = require("react");
+
+// src/adapters/fromRuntimeSnapshot.ts
+function toVisualizationSnapshots(runtime, narrativeEntries) {
+  const stageNarrativeMap = narrativeEntries?.length ? buildStageNarrativeMap(narrativeEntries) : /* @__PURE__ */ new Map();
+  const snapshots = [];
+  flattenTree(runtime.executionTree, snapshots, runtime.sharedState, 0, runtime.subflowResults, {}, stageNarrativeMap);
+  return snapshots;
+}
+function buildStageNarrativeMap(entries) {
+  const map = /* @__PURE__ */ new Map();
+  let currentStageName;
+  for (const entry of entries) {
+    if (entry.stageName) {
+      currentStageName = entry.stageName;
+    }
+    if (currentStageName) {
+      if (!map.has(currentStageName)) {
+        map.set(currentStageName, []);
+      }
+      const indent = "  ".repeat(entry.depth);
+      map.get(currentStageName).push(`${indent}${entry.text}`);
+    }
+  }
+  return map;
+}
+function flattenTree(node, out, sharedState, accumulatedMs = 0, subflowResults, cumulativeMemory = {}, stageNarrativeMap = /* @__PURE__ */ new Map()) {
+  const durationMs = typeof node.metrics?.durationMs === "number" ? node.metrics.durationMs : 1;
+  const startMs = accumulatedMs;
+  const stageId = node.id || node.name || "unknown";
+  const displayName = node.name || node.id || "unknown";
+  const stageLines = stageNarrativeMap.get(stageId);
+  let narrative;
+  if (stageLines) {
+    narrative = stageLines.join("\n");
+  } else {
+    const parts = [`${displayName} executed.`];
+    if (node.description) parts.push(node.description);
+    if (node.stageWrites) {
+      const keys = Object.keys(node.stageWrites);
+      if (keys.length > 0) parts.push(`Wrote: ${keys.join(", ")}`);
+    }
+    narrative = parts.join("\n");
+  }
+  const memory = { ...cumulativeMemory };
+  if (node.stageWrites) {
+    for (const [key, value] of Object.entries(node.stageWrites)) {
+      if (value === void 0) {
+        delete memory[key];
+      } else {
+        memory[key] = value;
+      }
+    }
+  }
+  const sfResult = subflowResults?.[node.subflowId ?? stageId];
+  out.push({
+    stageName: displayName,
+    stageLabel: stageId,
+    memory,
+    narrative,
+    startMs,
+    durationMs,
+    status: "done",
+    ...node.description ? { description: node.description } : void 0,
+    ...node.subflowId ? { subflowId: node.subflowId } : void 0,
+    ...sfResult ? { subflowResult: sfResult } : void 0
+  });
+  let nextMs = startMs + durationMs;
+  if (node.children && node.children.length > 0) {
+    let maxChildEnd = nextMs;
+    for (const child of node.children) {
+      const childEnd = flattenTree(child, out, sharedState, nextMs, subflowResults, memory, stageNarrativeMap);
+      maxChildEnd = Math.max(maxChildEnd, childEnd);
+    }
+    nextMs = maxChildEnd;
+  }
+  if (node.next) {
+    nextMs = flattenTree(node.next, out, sharedState, nextMs, subflowResults, memory, stageNarrativeMap);
+  }
+  return nextMs;
+}
+function subflowResultToSnapshots(subflowResult, narrativeEntries) {
+  if (!subflowResult || typeof subflowResult !== "object") return [];
+  const sf = subflowResult;
+  if (!sf.treeContext?.stageContexts) return [];
+  const runtime = {
+    sharedState: sf.treeContext.globalContext ?? {},
+    executionTree: sf.treeContext.stageContexts,
+    commitLog: sf.treeContext.history ?? []
+  };
+  const snapshots = toVisualizationSnapshots(runtime, narrativeEntries);
+  const prefix = sf.subflowId ? `${sf.subflowId}/` : "";
+  if (prefix) {
+    for (const snap of snapshots) {
+      if (snap.stageName.startsWith(prefix)) {
+        snap.stageName = snap.stageName.slice(prefix.length);
+      }
+      if (snap.stageLabel.startsWith(prefix)) {
+        snap.stageLabel = snap.stageLabel.slice(prefix.length);
+      }
+    }
+  }
+  return snapshots;
+}
+function createSnapshots(stages) {
+  let accMs = 0;
+  return stages.map((s) => {
+    const duration = s.durationMs ?? 1;
+    const snap = {
+      stageName: s.name,
+      stageLabel: s.label ?? s.name,
+      memory: s.memory ?? {},
+      narrative: s.narrative ?? `${s.label ?? s.name} completed.`,
+      startMs: accMs,
+      durationMs: duration,
+      status: "done",
+      ...s.description ? { description: s.description } : void 0,
+      ...s.subflowId ? { subflowId: s.subflowId } : void 0
+    };
+    accMs += duration;
+    return snap;
+  });
+}
+
+// src/components/MemoryPanel/MemoryPanel.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function ExplainableShell({
+function MemoryPanel({
   snapshots,
-  resultData,
-  logs = [],
-  narrative = [],
-  tabs = ["result", "explainable", "ai-compatible"],
-  defaultTab,
-  hideConsole = false,
-  renderFlowchart,
+  selectedIndex,
   size = "default",
   unstyled = false,
   className,
   style
 }) {
-  const [activeTab, setActiveTab] = (0, import_react11.useState)(defaultTab ?? tabs[0]);
-  const [snapshotIdx, setSnapshotIdx] = (0, import_react11.useState)(0);
-  const fs = fontSize[size];
-  const pad = padding[size];
-  const handleSnapshotChange = (0, import_react11.useCallback)((idx) => {
-    setSnapshotIdx(Math.max(0, Math.min(idx, snapshots.length - 1)));
-  }, [snapshots.length]);
-  const revealedCount = (0, import_react11.useMemo)(() => {
-    if (snapshots.length === 0 || narrative.length === 0) return narrative.length;
-    const boundaries = [];
-    for (let i = 0; i < narrative.length; i++) {
-      const trimmed = narrative[i].trimStart();
-      if (trimmed.startsWith("Stage ") && !trimmed.match(/^Stage\s+\d+:\s*Step\s/) || trimmed.startsWith("[")) {
-        boundaries.push(i);
-      }
-    }
-    if (boundaries.length === 0) {
-      const ratio = (snapshotIdx + 1) / snapshots.length;
-      return Math.max(1, Math.ceil(narrative.length * ratio));
-    }
-    const groupsToShow = Math.max(
-      1,
-      Math.min(
-        Math.floor((snapshotIdx + 1) / snapshots.length * boundaries.length) || 1,
-        boundaries.length
-      )
-    );
-    const endIdx = groupsToShow < boundaries.length ? boundaries[groupsToShow] : narrative.length;
-    return Math.max(1, endIdx);
-  }, [snapshots.length, snapshotIdx, narrative]);
-  const prevMemory = snapshotIdx > 0 ? snapshots[snapshotIdx - 1]?.memory : null;
-  const currMemory = snapshots[snapshotIdx]?.memory ?? {};
-  const tabLabels = {
-    result: "Result",
-    explainable: "Explainable",
-    "ai-compatible": "AI-Compatible"
-  };
+  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": "explainable-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          "data-fp": "shell-tab",
-          "data-active": tab === activeTab,
-          onClick: () => setActiveTab(tab),
-          children: tabLabels[tab]
-        },
-        tab
-      )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
-        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          ResultPanel,
-          {
-            data: resultData ?? null,
-            logs,
-            hideConsole,
-            unstyled: true
-          }
-        ),
-        activeTab === "explainable" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            TimeTravelControls,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onIndexChange: handleSnapshotChange,
-              unstyled: true
-            }
-          ),
-          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoryInspector, { snapshots, selectedIndex: snapshotIdx, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            GanttTimeline,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onSelect: handleSnapshotChange,
-              unstyled: true
-            }
-          )
-        ] }),
-        activeTab === "ai-compatible" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            TimeTravelControls,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onIndexChange: handleSnapshotChange,
-              unstyled: true
-            }
-          ),
-          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            NarrativeTrace,
-            {
-              narrative,
-              revealedCount,
-              unstyled: true
-            }
-          )
-        ] })
-      ] })
+    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_runtime11.jsxs)(
@@ -2283,156 +2401,251 @@ function ExplainableShell({
     {
       className,
       style: {
-        height: "100%",
+        overflow: "auto",
         display: "flex",
         flexDirection: "column",
-        overflow: "hidden",
-        background: theme.bgPrimary,
-        color: theme.textPrimary,
-        fontFamily: theme.fontSans,
         ...style
       },
-      "data-fp": "explainable-shell",
+      "data-fp": "memory-panel",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 0,
-              borderBottom: `1px solid ${theme.border}`,
-              background: theme.bgSecondary,
-              flexShrink: 0
-            },
-            children: tabs.map((tab) => {
-              const active = tab === activeTab;
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  onClick: () => setActiveTab(tab),
-                  style: {
-                    padding: `${pad - 4}px ${pad}px`,
-                    fontSize: fs.label,
-                    fontWeight: active ? 700 : 500,
-                    textTransform: "uppercase",
-                    letterSpacing: "0.08em",
-                    color: active ? theme.primary : theme.textMuted,
-                    background: "transparent",
-                    border: "none",
-                    borderBottom: active ? `2px solid ${theme.primary}` : "2px solid transparent",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease"
-                  },
-                  children: tabLabels[tab]
-                },
-                tab
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
-          activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            ResultPanel,
-            {
-              data: resultData ?? null,
-              logs,
-              hideConsole,
-              size
-            }
-          ),
-          activeTab === "explainable" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              TimeTravelControls,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onIndexChange: handleSnapshotChange,
-                size
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              renderFlowchart && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "div",
-                {
-                  style: {
-                    width: renderFlowchart ? "40%" : "100%",
-                    minWidth: 280,
-                    overflow: "auto",
-                    display: "flex",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      MemoryInspector,
-                      {
-                        snapshots,
-                        selectedIndex: snapshotIdx,
-                        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_runtime11.jsx)("div", { style: { borderTop: `1px solid ${theme.border}`, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              GanttTimeline,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onSelect: handleSnapshotChange,
-                size
-              }
-            ) })
-          ] }),
-          activeTab === "ai-compatible" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              TimeTravelControls,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onIndexChange: handleSnapshotChange,
-                size
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              renderFlowchart && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                NarrativeTrace,
-                {
-                  narrative,
-                  revealedCount,
-                  size,
-                  style: {
-                    width: renderFlowchart ? "40%" : "100%",
-                    minWidth: 280
+        /* @__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 }) })
+      ]
+    }
+  );
+}
+
+// src/components/NarrativePanel/NarrativePanel.tsx
+var import_react12 = require("react");
+
+// src/components/StoryNarrative/StoryNarrative.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ENTRY_ICONS = {
+  stage: { icon: "\u25B8", color: theme.primary, label: "Stage" },
+  step: { icon: "\xB7", color: theme.textMuted, label: "Data operation" },
+  condition: { icon: "\u25C7", color: theme.warning, label: "Decision" },
+  fork: { icon: "\u2443", color: theme.primary, label: "Parallel" },
+  subflow: { icon: "\u21B3", color: theme.textSecondary, label: "Subflow" },
+  loop: { icon: "\u21BB", color: theme.warning, label: "Loop" },
+  break: { icon: "\u25A0", color: theme.error, label: "Break" },
+  error: { icon: "\u2717", color: theme.error, label: "Error" }
+};
+function StoryNarrative({
+  entries,
+  stageCount,
+  size = "default",
+  unstyled = false,
+  className,
+  style: outerStyle
+}) {
+  const fs = fontSize[size];
+  const pad = padding[size];
+  const revealedCount = (0, import_react11.useMemo)(() => {
+    let stagesSeen = 0;
+    for (let i = 0; i < entries.length; i++) {
+      const e = entries[i];
+      const isBoundary = e.type === "stage" || e.type === "subflow" && e.text.startsWith("Entering");
+      if (isBoundary) stagesSeen++;
+      if (stagesSeen > stageCount) return i;
+    }
+    return entries.length;
+  }, [entries, stageCount]);
+  const revealed = entries.slice(0, revealedCount);
+  const future = entries.slice(revealedCount);
+  const latestRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    latestRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [revealed.length]);
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className, style: outerStyle, "data-fp": "story-narrative", role: "log", children: revealed.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-fp": "narrative-entry", "data-type": entry.type, children: entry.text }, i)) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        flex: 1,
+        overflow: "auto",
+        padding: pad,
+        fontFamily: theme.fontSans,
+        ...outerStyle
+      },
+      "data-fp": "story-narrative",
+      role: "log",
+      "aria-label": "Execution narrative",
+      children: [
+        revealed.map((entry, i) => {
+          const meta = ENTRY_ICONS[entry.type] ?? ENTRY_ICONS.step;
+          const isStage = entry.type === "stage";
+          const isDecision = entry.type === "condition";
+          const isError = entry.type === "error";
+          const isLast = i === revealed.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              ref: isLast ? latestRef : void 0,
+              style: {
+                display: "flex",
+                gap: 8,
+                padding: isStage ? `${pad - 4}px 0` : `2px 0`,
+                marginLeft: entry.depth * 16,
+                borderBottom: isStage ? `1px solid ${theme.border}` : void 0,
+                marginTop: isStage && i > 0 ? 8 : 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: meta.color,
+                      fontWeight: 700,
+                      fontSize: isStage ? fs.body : fs.small,
+                      width: 16,
+                      textAlign: "center",
+                      flexShrink: 0
+                    },
+                    title: meta.label,
+                    "aria-label": meta.label,
+                    children: meta.icon
                   }
-                }
-              )
-            ] })
-          ] })
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: isStage ? fs.body : fs.small,
+                      fontWeight: isStage ? 600 : 400,
+                      color: isError ? theme.error : isDecision ? theme.warning : isStage ? theme.textPrimary : theme.textSecondary,
+                      lineHeight: 1.6,
+                      fontFamily: entry.type === "step" ? theme.fontMono : theme.fontSans
+                    },
+                    children: entry.text
+                  }
+                )
+              ]
+            },
+            i
+          );
+        }),
+        future.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
+          opacity: 0.3,
+          fontSize: fs.small,
+          color: theme.textMuted,
+          padding: `8px 0`,
+          fontStyle: "italic"
+        }, children: [
+          future.length,
+          " more ",
+          future.length === 1 ? "entry" : "entries",
+          " ahead..."
         ] })
       ]
     }
   );
 }
 
+// src/components/NarrativePanel/NarrativePanel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function NarrativePanel({
+  snapshots,
+  selectedIndex,
+  narrativeEntries,
+  narrative: narrativeProp,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const fs = fontSize[size];
+  const pad = padding[size];
+  const narrative = (0, import_react12.useMemo)(() => {
+    if (narrativeProp && narrativeProp.length > 0) return narrativeProp;
+    const lines = [];
+    for (const snap of snapshots) {
+      const stageLines = (snap.narrative ?? "").split("\n").filter(Boolean);
+      lines.push(...stageLines);
+    }
+    return lines;
+  }, [narrativeProp, snapshots]);
+  const revealedCount = (0, import_react12.useMemo)(() => {
+    if (snapshots.length === 0 || narrative.length === 0) return narrative.length;
+    const stageBoundaries = [];
+    for (let i = 0; i < narrative.length; i++) {
+      const trimmed = narrative[i].trimStart();
+      if (trimmed.startsWith("Stage ") && !trimmed.match(/^Stage\s+\d+:\s*Step\s/)) {
+        stageBoundaries.push(i);
+      }
+    }
+    if (stageBoundaries.length === 0) {
+      const ratio = (selectedIndex + 1) / snapshots.length;
+      return Math.max(1, Math.ceil(narrative.length * ratio));
+    }
+    const groupsToShow = Math.min(selectedIndex + 1, stageBoundaries.length);
+    const endIdx = groupsToShow < stageBoundaries.length ? stageBoundaries[groupsToShow] : narrative.length;
+    return Math.max(1, endIdx);
+  }, [snapshots.length, selectedIndex, narrative]);
+  const hasStructured = narrativeEntries && narrativeEntries.length > 0;
+  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, stageCount: selectedIndex + 1, unstyled: true }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        ...style
+      },
+      "data-fp": "narrative-panel",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            style: {
+              padding: `${pad - 4}px ${pad}px`,
+              fontSize: fs.small,
+              color: theme.textMuted,
+              fontStyle: "italic",
+              borderBottom: `1px solid ${theme.border}`,
+              flexShrink: 0
+            },
+            children: "What happened at each stage, what data flowed, what decisions were made, and why."
+          }
+        ),
+        hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          StoryNarrative,
+          {
+            entries: narrativeEntries,
+            stageCount: selectedIndex + 1,
+            size,
+            style: { flex: 1 }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          NarrativeTrace,
+          {
+            narrative,
+            revealedCount,
+            size,
+            style: { flex: 1 }
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/FlowchartView/SubflowTree.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function specToTree(node) {
+  if (!node) return [];
   const entries = [];
   const seen = /* @__PURE__ */ new Set();
   function walk(n) {
+    if (!n) return;
     const id = n.name || n.id || "";
     if (seen.has(id)) return;
     seen.add(id);
@@ -2448,7 +2661,7 @@ function specToTree(node) {
     entries.push(entry);
     if (n.children) {
       for (const child of n.children) {
-        walk(child);
+        if (child) walk(child);
       }
     }
     if (n.next) {
@@ -2458,25 +2671,25 @@ function specToTree(node) {
   walk(node);
   return entries;
 }
-var TreeNode = (0, import_react12.memo)(function TreeNode2({
+var TreeNode = (0, import_react13.memo)(function TreeNode2({
   entry,
   depth,
   activeStage,
   doneStages,
   onNodeSelect
 }) {
-  const [expanded, setExpanded] = (0, import_react12.useState)(true);
+  const [expanded, setExpanded] = (0, import_react13.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_react12.useCallback)(() => {
+  const handleClick = (0, import_react13.useCallback)(() => {
     if (hasChildren) {
       setExpanded((prev) => !prev);
     }
     onNodeSelect?.(entry.name, !!entry.isSubflow);
   }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
         onClick: handleClick,
@@ -2507,7 +2720,7 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
           }
         },
         children: [
-          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               style: {
@@ -2522,8 +2735,8 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
               },
               children: "\u25B6"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { width: 12, flexShrink: 0 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               style: {
@@ -2535,8 +2748,8 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "span",
               {
                 style: {
@@ -2548,11 +2761,11 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
                 },
                 children: [
                   entry.name,
-                  entry.isSubflow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                  entry.isSubflow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
                 ]
               }
             ),
-            entry.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            entry.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "span",
               {
                 style: {
@@ -2569,7 +2782,7 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: entry.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: entry.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TreeNode2,
       {
         entry: child,
@@ -2578,12 +2791,12 @@ var TreeNode = (0, import_react12.memo)(function TreeNode2({
         doneStages,
         onNodeSelect
       },
-      `${child.name}-${i}`
+      child.subflowId ?? `${child.name}-${i}`
     )) })
   ] });
 });
-var SectionLabel = (0, import_react12.memo)(function SectionLabel2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var SectionLabel = (0, import_react13.memo)(function SectionLabel2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       style: {
@@ -2598,7 +2811,7 @@ var SectionLabel = (0, import_react12.memo)(function SectionLabel2({ children })
     }
   );
 });
-var SubflowTree = (0, import_react12.memo)(function SubflowTree2({
+var SubflowTree = (0, import_react13.memo)(function SubflowTree2({
   spec,
   activeStage,
   doneStages,
@@ -2607,10 +2820,10 @@ var SubflowTree = (0, import_react12.memo)(function SubflowTree2({
   className,
   style
 }) {
-  const tree = (0, import_react12.useMemo)(() => specToTree(spec), [spec]);
-  const subflowStages = (0, import_react12.useMemo)(() => tree.filter((e) => e.isSubflow), [tree]);
+  const tree = (0, import_react13.useMemo)(() => specToTree(spec), [spec]);
+  const subflowStages = (0, import_react13.useMemo)(() => tree.filter((e) => e.isSubflow), [tree]);
   if (subflowStages.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className,
@@ -2628,8 +2841,8 @@ var SubflowTree = (0, import_react12.memo)(function SubflowTree2({
         ...style
       },
       children: [
-        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: "Subflows" }),
-        subflowStages.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionLabel, { children: "Subflows" }),
+        subflowStages.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TreeNode,
           {
             entry,
@@ -2638,98 +2851,602 @@ var SubflowTree = (0, import_react12.memo)(function SubflowTree2({
             doneStages,
             onNodeSelect
           },
-          `${entry.name}-${i}`
+          entry.subflowId ?? `${entry.name}-${i}`
         ))
       ]
     }
   );
 });
 
-// src/adapters/fromRuntimeSnapshot.ts
-function toVisualizationSnapshots(runtime, narrativeEntries) {
-  const stageNarrativeMap = narrativeEntries?.length ? buildStageNarrativeMap(narrativeEntries) : /* @__PURE__ */ new Map();
-  const snapshots = [];
-  flattenTree(runtime.executionTree, snapshots, runtime.sharedState, 0, runtime.subflowResults, {}, stageNarrativeMap);
-  return snapshots;
+// 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({
+  breadcrumbs,
+  onNavigate
+}) {
+  if (breadcrumbs.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "6px 12px",
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
+        fontSize: 12,
+        fontFamily: theme.fontSans,
+        flexShrink: 0,
+        overflowX: "auto"
+      },
+      children: breadcrumbs.map((crumb, i) => {
+        const isLast = i === breadcrumbs.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_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)(
+              "span",
+              {
+                style: {
+                  color: theme.primary,
+                  fontWeight: 600
+                },
+                children: crumb.label
+              }
+            ),
+            crumb.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontWeight: 400,
+                  fontSize: 11
+                },
+                children: [
+                  "\u2014 ",
+                  crumb.description
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: () => onNavigate(i),
+              style: {
+                background: "none",
+                border: "none",
+                color: theme.textSecondary,
+                cursor: "pointer",
+                padding: "2px 4px",
+                borderRadius: 4,
+                fontSize: 12,
+                fontFamily: "inherit",
+                fontWeight: 500,
+                transition: "color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.color = `${theme.primary}`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.color = `${theme.textSecondary}`;
+              },
+              children: crumb.label
+            }
+          )
+        ] }, `${crumb.label}-${i}`);
+      })
+    }
+  );
+});
+
+// src/components/ExplainableShell/ExplainableShell.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var HLinePill = (0, import_react15.memo)(function HLinePill2({
+  label,
+  detail,
+  expanded,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0,
+    padding: "0"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "button",
+      {
+        onClick,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          padding: "3px 12px",
+          margin: "4px 0",
+          fontSize: 10,
+          fontWeight: 600,
+          fontFamily: "inherit",
+          color: theme.textMuted,
+          background: theme.bgSecondary,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 10,
+          cursor: "pointer",
+          whiteSpace: "nowrap",
+          letterSpacing: "0.04em",
+          textTransform: "uppercase",
+          transition: "color 0.15s ease"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          label,
+          detail && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
+  ] });
+});
+var VLinePill = (0, import_react15.memo)(function VLinePill2({
+  label,
+  expanded,
+  side = "right",
+  onClick
+}) {
+  const arrow = side === "right" ? expanded ? "\u25B6" : "\u25C0" : expanded ? "\u25C0" : "\u25B6";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 0,
+    padding: "0"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "button",
+      {
+        onClick,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "10px 4px",
+          margin: "0 3px",
+          fontSize: 10,
+          fontWeight: 600,
+          fontFamily: "inherit",
+          color: theme.textMuted,
+          background: theme.bgSecondary,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 10,
+          cursor: "pointer",
+          whiteSpace: "nowrap",
+          letterSpacing: "0.04em",
+          textTransform: "uppercase",
+          writingMode: "vertical-lr",
+          transition: "color 0.15s ease"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
+  ] });
+});
+var RIGHT_PANEL_LABELS = {
+  memory: "Memory",
+  narrative: "Narrative"
+};
+var DetailsContent = (0, import_react15.memo)(function DetailsContent2({
+  snapshots,
+  selectedIndex,
+  narrativeEntries,
+  narrative,
+  size,
+  fillHeight
+}) {
+  const [rightPanel, setRightPanel] = (0, import_react15.useState)("memory");
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: ["memory", "narrative"].map((panel) => {
+      const active = rightPanel === panel;
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          onClick: () => setRightPanel(panel),
+          style: {
+            flex: 1,
+            padding: "6px 8px",
+            fontSize: 11,
+            fontWeight: active ? 600 : 400,
+            color: active ? theme.primary : theme.textMuted,
+            background: active ? `color-mix(in srgb, ${theme.primary} 8%, transparent)` : "transparent",
+            border: "none",
+            borderBottom: active ? `2px solid ${theme.primary}` : "2px solid transparent",
+            cursor: "pointer",
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            fontFamily: "inherit"
+          },
+          children: RIGHT_PANEL_LABELS[panel]
+        },
+        panel
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
+      rightPanel === "memory" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoryPanel, { snapshots, selectedIndex, size, style: fillHeight ? { height: "100%" } : void 0 }),
+      rightPanel === "narrative" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NarrativePanel, { snapshots, selectedIndex, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
+    ] })
+  ] });
+});
+function resolveSubflowLevel(parentSpec, parentSnapshots, subflowNodeName, narrativeEntries) {
+  const specNode = findSubflowSpecNode(parentSpec, subflowNodeName);
+  if (!specNode?.subflowStructure) return null;
+  const parentSnap = parentSnapshots.find(
+    (s) => s.stageName === subflowNodeName || s.stageLabel === subflowNodeName
+  );
+  if (!parentSnap?.subflowResult) return null;
+  const sfNarrative = narrativeEntries ? extractSubflowNarrative(narrativeEntries, subflowNodeName) : void 0;
+  const sfSnapshots = subflowResultToSnapshots(parentSnap.subflowResult, sfNarrative);
+  if (sfSnapshots.length === 0) return null;
+  return {
+    subflowId: specNode.subflowId ?? subflowNodeName,
+    label: specNode.subflowName ?? specNode.name,
+    spec: specNode.subflowStructure,
+    snapshots: sfSnapshots
+  };
 }
-function buildStageNarrativeMap(entries) {
-  const map = /* @__PURE__ */ new Map();
-  let currentStageName;
+function extractSubflowNarrative(entries, subflowName) {
+  const result = [];
+  let inside = false;
   for (const entry of entries) {
-    if (entry.stageName) {
-      currentStageName = entry.stageName;
+    if (entry.type === "subflow" && entry.text.includes(subflowName) && entry.text.startsWith("Entering")) {
+      inside = true;
+      continue;
     }
-    if (currentStageName) {
-      if (!map.has(currentStageName)) {
-        map.set(currentStageName, []);
-      }
-      const indent = "  ".repeat(entry.depth);
-      map.get(currentStageName).push(`${indent}${entry.text}`);
+    if (inside && entry.type === "subflow" && entry.text.includes(subflowName) && entry.text.startsWith("Exiting")) break;
+    if (inside) result.push(entry);
+  }
+  return result;
+}
+function findSubflowSpecNode(node, name) {
+  if ((node.name === name || node.id === name) && node.isSubflowRoot) return node;
+  if (node.children) {
+    for (const child of node.children) {
+      const f = findSubflowSpecNode(child, name);
+      if (f) return f;
     }
   }
-  return map;
+  if (node.next) return findSubflowSpecNode(node.next, name);
+  return null;
 }
-function flattenTree(node, out, sharedState, accumulatedMs = 0, subflowResults, cumulativeMemory = {}, stageNarrativeMap = /* @__PURE__ */ new Map()) {
-  const durationMs = typeof node.metrics?.durationMs === "number" ? node.metrics.durationMs : 1;
-  const startMs = accumulatedMs;
-  const stageId = node.name || node.id;
-  const stageLines = stageNarrativeMap.get(stageId);
-  const narrative = stageLines ? stageLines.join("\n") : "Narrative not part of this run.";
-  const memory = { ...cumulativeMemory };
-  if (node.stageWrites) {
-    for (const [key, value] of Object.entries(node.stageWrites)) {
-      if (value === void 0) {
-        delete memory[key];
+function hasSubflowNodes(node) {
+  if (!node) return false;
+  if (node.isSubflowRoot) return true;
+  if (node.children?.some((c) => c && hasSubflowNodes(c))) return true;
+  if (node.next && hasSubflowNodes(node.next)) return true;
+  return false;
+}
+function ExplainableShell({
+  snapshots,
+  spec,
+  title,
+  resultData,
+  logs = [],
+  narrative,
+  narrativeEntries,
+  tabs = ["result", "explainable"],
+  defaultTab,
+  hideConsole = false,
+  panelLabels,
+  defaultExpanded,
+  renderFlowchart,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const leftLabel = panelLabels?.topology ?? "Topology";
+  const rightLabel = panelLabels?.details ?? "Details";
+  const bottomLabel = panelLabels?.timeline ?? "Timeline";
+  const shellRef = (0, import_react15.useRef)(null);
+  const [isNarrow, setIsNarrow] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
+    const el = shellRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setIsNarrow(entry.contentRect.width < 640);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const [activeTab, setActiveTab] = (0, import_react15.useState)(defaultTab ?? tabs[0]);
+  const [snapshotIdx, setSnapshotIdx] = (0, import_react15.useState)(0);
+  const [drillDownStack, setDrillDownStack] = (0, import_react15.useState)([]);
+  const [rightExpanded, setRightExpanded] = (0, import_react15.useState)(defaultExpanded?.details ?? true);
+  const [leftExpanded, setLeftExpanded] = (0, import_react15.useState)(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = (0, import_react15.useState)(defaultExpanded?.timeline ?? false);
+  (0, import_react15.useEffect)(() => {
+    if (isNarrow) {
+      setLeftExpanded(false);
+      setRightExpanded(false);
+      setTimelineExpanded(false);
+    }
+  }, [isNarrow]);
+  const triggerReflow = (0, import_react15.useCallback)(() => {
+    requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
+  }, []);
+  const toggleLeft = (0, import_react15.useCallback)((v2) => {
+    setLeftExpanded(v2);
+    triggerReflow();
+  }, [triggerReflow]);
+  const toggleRight = (0, import_react15.useCallback)((v2) => {
+    setRightExpanded(v2);
+    triggerReflow();
+  }, [triggerReflow]);
+  const toggleTimeline = (0, import_react15.useCallback)(() => {
+    setTimelineExpanded((p) => !p);
+    triggerReflow();
+  }, [triggerReflow]);
+  const isInSubflow = drillDownStack.length > 0;
+  const currentLevel = (0, import_react15.useMemo)(() => {
+    if (drillDownStack.length > 0) {
+      const top = drillDownStack[drillDownStack.length - 1];
+      return { spec: top.spec, snapshots: top.snapshots };
+    }
+    return { spec: spec ?? null, snapshots };
+  }, [drillDownStack, spec, snapshots]);
+  const activeSnapshots = currentLevel.snapshots;
+  const activeSpec = currentLevel.spec;
+  const safeIdx = activeSnapshots.length > 0 ? Math.max(0, Math.min(snapshotIdx, activeSnapshots.length - 1)) : 0;
+  const activeNarrative = (0, import_react15.useMemo)(() => {
+    if (!isInSubflow) return narrative;
+    const lines = [];
+    for (const snap of activeSnapshots) {
+      const stageLines = (snap.narrative ?? "").split("\n").filter(Boolean);
+      lines.push(...stageLines);
+    }
+    return lines.length > 0 ? lines : void 0;
+  }, [isInSubflow, narrative, activeSnapshots]);
+  const activeNarrativeEntries = isInSubflow ? void 0 : narrativeEntries;
+  const breadcrumbs = (0, import_react15.useMemo)(() => {
+    const root = { label: title || "Flowchart", spec, description: spec?.description };
+    return [root, ...drillDownStack.map((e) => ({ label: e.label, spec: e.spec, description: void 0 }))];
+  }, [spec, title, drillDownStack]);
+  const showTreeSidebar = (0, import_react15.useMemo)(() => !!spec && hasSubflowNodes(spec), [spec]);
+  const rootOverlay = (0, import_react15.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_react15.useCallback)((tab) => {
+    setActiveTab(tab);
+    setDrillDownStack([]);
+    setSnapshotIdx(999);
+  }, []);
+  const handleSnapshotChange = (0, import_react15.useCallback)((idx) => {
+    if (typeof idx === "number") setSnapshotIdx(idx);
+  }, []);
+  const handleDrillDown = (0, import_react15.useCallback)(
+    (nodeName) => {
+      if (!activeSpec) return;
+      const entry = resolveSubflowLevel(activeSpec, activeSnapshots, nodeName, narrativeEntries);
+      if (entry) {
+        setDrillDownStack((prev) => [...prev, { ...entry, parentSnapshotIdx: snapshotIdx }]);
+        setSnapshotIdx(0);
+      }
+    },
+    [activeSpec, activeSnapshots, narrativeEntries, snapshotIdx]
+  );
+  const handleBreadcrumbNavigate = (0, import_react15.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_react15.useCallback)(
+    (indexOrId) => {
+      if (typeof indexOrId === "number") {
+        setSnapshotIdx(indexOrId);
+        return;
+      }
+      if (activeSpec) {
+        const sfNode = findSubflowSpecNode(activeSpec, indexOrId);
+        if (sfNode?.subflowStructure) {
+          handleDrillDown(indexOrId);
+          return;
+        }
+      }
+      const idx = activeSnapshots.findIndex((s) => s.stageLabel === indexOrId);
+      if (idx >= 0) setSnapshotIdx(idx);
+    },
+    [activeSpec, activeSnapshots, handleDrillDown]
+  );
+  const handleTreeNodeSelect = (0, import_react15.useCallback)(
+    (name, isSubflow) => {
+      if (isSubflow && spec) {
+        setDrillDownStack([]);
+        const entry = resolveSubflowLevel(spec, snapshots, name, narrativeEntries);
+        if (entry) {
+          setDrillDownStack([{ ...entry, parentSnapshotIdx: snapshotIdx }]);
+          setSnapshotIdx(0);
+        }
       } else {
-        memory[key] = value;
+        setDrillDownStack([]);
+        const idx = snapshots.findIndex((s) => s.stageLabel === name);
+        if (idx >= 0) setSnapshotIdx(idx);
       }
-    }
+    },
+    [spec, snapshots, narrativeEntries, snapshotIdx]
+  );
+  const tabLabels = {
+    result: "Result",
+    explainable: "Explainable",
+    "ai-compatible": "AI-Compatible"
+  };
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { "data-fp": "shell-tab", "data-active": tab === activeTab, onClick: () => handleTabChange(tab), children: tabLabels[tab] }, tab)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
+        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
+          isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+          activeSpec && renderFlowchart?.({ spec: activeSpec, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
+        ] })
+      ] })
+    ] });
   }
-  const sfResult = subflowResults?.[node.subflowId ?? stageId];
-  out.push({
-    stageName: stageId,
-    stageLabel: stageId,
-    memory,
-    narrative,
-    startMs,
-    durationMs,
-    status: "done",
-    ...node.description ? { description: node.description } : void 0,
-    ...node.subflowId ? { subflowId: node.subflowId } : void 0,
-    ...sfResult ? { subflowResult: sfResult } : void 0
-  });
-  let nextMs = startMs + durationMs;
-  if (node.children && node.children.length > 0) {
-    let maxChildEnd = nextMs;
-    for (const child of node.children) {
-      const childEnd = flattenTree(child, out, sharedState, nextMs, subflowResults, memory, stageNarrativeMap);
-      maxChildEnd = Math.max(maxChildEnd, childEnd);
+  const isVisualizationTab = activeTab === "explainable" || activeTab === "ai-compatible";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      ref: shellRef,
+      className,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        background: theme.bgPrimary,
+        color: theme.textPrimary,
+        fontFamily: theme.fontSans,
+        fontSize: 12,
+        ...style
+      },
+      "data-fp": "explainable-shell",
+      children: [
+        tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: {
+          display: "flex",
+          borderBottom: `1px solid ${theme.border}`,
+          background: theme.bgSecondary,
+          flexShrink: 0
+        }, children: tabs.map((tab) => {
+          const active = tab === activeTab;
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              onClick: () => handleTabChange(tab),
+              style: {
+                padding: "6px 14px",
+                fontSize: 11,
+                fontWeight: active ? 700 : 500,
+                textTransform: "uppercase",
+                letterSpacing: "0.08em",
+                color: active ? theme.primary : theme.textMuted,
+                background: "transparent",
+                border: "none",
+                borderBottom: active ? `2px solid ${theme.primary}` : "2px solid transparent",
+                cursor: "pointer",
+                fontFamily: "inherit"
+              },
+              children: tabLabels[tab]
+            },
+            tab
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: [
+          activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size }),
+          isVisualizationTab && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              TimeTravelControls,
+              {
+                snapshots: activeSnapshots,
+                selectedIndex: safeIdx,
+                onIndexChange: handleSnapshotChange,
+                size
+              }
+            ),
+            isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+            isNarrow ? (
+              /* ── Mobile: stacked vertical ── */
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: renderFlowchart && activeSpec && renderFlowchart({
+                  spec: activeSpec,
+                  snapshots: activeSnapshots,
+                  selectedIndex: safeIdx,
+                  onNodeClick: handleNodeClick
+                }) }),
+                showTreeSidebar && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
+                  leftExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    SubflowTree,
+                    {
+                      spec,
+                      activeStage: rootOverlay.activeStage,
+                      doneStages: rootOverlay.doneStages,
+                      onNodeSelect: handleTreeNodeSelect
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+                rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { maxHeight: 250, flexShrink: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  DetailsContent,
+                  {
+                    snapshots: activeSnapshots,
+                    selectedIndex: safeIdx,
+                    narrativeEntries: activeNarrativeEntries,
+                    narrative: activeNarrative,
+                    size
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+                timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+              ] })
+            ) : (
+              /* ── Desktop: side-by-side ── */
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+                  showTreeSidebar && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { width: 220, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      SubflowTree,
+                      {
+                        spec,
+                        activeStage: rootOverlay.activeStage,
+                        doneStages: rootOverlay.doneStages,
+                        onNodeSelect: handleTreeNodeSelect
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VLinePill, { label: leftLabel, expanded: true, side: "left", onClick: () => toggleLeft(false) })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VLinePill, { label: leftLabel, expanded: false, side: "left", onClick: () => toggleLeft(true) })),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: renderFlowchart && activeSpec && renderFlowchart({
+                    spec: activeSpec,
+                    snapshots: activeSnapshots,
+                    selectedIndex: safeIdx,
+                    onNodeClick: handleNodeClick
+                  }) }),
+                  rightExpanded ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { width: "38%", minWidth: 300, maxWidth: 500, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VLinePill, { label: rightLabel, expanded: true, onClick: () => toggleRight(false) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      DetailsContent,
+                      {
+                        snapshots: activeSnapshots,
+                        selectedIndex: safeIdx,
+                        narrativeEntries: activeNarrativeEntries,
+                        narrative: activeNarrative,
+                        size,
+                        fillHeight: true
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VLinePill, { label: rightLabel, expanded: false, onClick: () => toggleRight(true) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+                timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+              ] })
+            )
+          ] })
+        ] })
+      ]
     }
-    nextMs = maxChildEnd;
-  }
-  if (node.next) {
-    nextMs = flattenTree(node.next, out, sharedState, nextMs, subflowResults, memory, stageNarrativeMap);
-  }
-  return nextMs;
-}
-function createSnapshots(stages) {
-  let accMs = 0;
-  return stages.map((s) => {
-    const duration = s.durationMs ?? 1;
-    const snap = {
-      stageName: s.name,
-      stageLabel: s.label ?? s.name,
-      memory: s.memory ?? {},
-      narrative: s.narrative ?? `${s.label ?? s.name} completed.`,
-      startMs: accMs,
-      durationMs: duration,
-      status: "done",
-      ...s.description ? { description: s.description } : void 0,
-      ...s.subflowId ? { subflowId: s.subflowId } : void 0
-    };
-    accMs += duration;
-    return snap;
-  });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2737,18 +3454,23 @@ function createSnapshots(stages) {
   FootprintTheme,
   GanttTimeline,
   MemoryInspector,
+  MemoryPanel,
   NarrativeLog,
+  NarrativePanel,
   NarrativeTrace,
   ResultPanel,
   ScopeDiff,
   SnapshotPanel,
   StageDetailPanel,
+  StoryNarrative,
   SubflowTree,
   TimeTravelControls,
   coolDark,
   coolLight,
   createSnapshots,
   defaultTokens,
+  rawDefaults,
+  subflowResultToSnapshots,
   themePresets,
   toVisualizationSnapshots,
   tokensToCSSVars,