footprint-explainable-ui 0.5.0 → 0.7.2

package/dist/index.js

@@ -23,7 +23,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",
@@ -43,6 +43,26 @@ var defaultTokens = {
     mono: "'JetBrains Mono', 'Fira Code', monospace"
   }
 };
+var defaultTokens = {
+  colors: {
+    primary: `var(--fp-color-primary, ${rawDefaults.colors.primary})`,
+    success: `var(--fp-color-success, ${rawDefaults.colors.success})`,
+    error: `var(--fp-color-error, ${rawDefaults.colors.error})`,
+    warning: `var(--fp-color-warning, ${rawDefaults.colors.warning})`,
+    bgPrimary: `var(--fp-bg-primary, ${rawDefaults.colors.bgPrimary})`,
+    bgSecondary: `var(--fp-bg-secondary, ${rawDefaults.colors.bgSecondary})`,
+    bgTertiary: `var(--fp-bg-tertiary, ${rawDefaults.colors.bgTertiary})`,
+    textPrimary: `var(--fp-text-primary, ${rawDefaults.colors.textPrimary})`,
+    textSecondary: `var(--fp-text-secondary, ${rawDefaults.colors.textSecondary})`,
+    textMuted: `var(--fp-text-muted, ${rawDefaults.colors.textMuted})`,
+    border: `var(--fp-border, ${rawDefaults.colors.border})`
+  },
+  radius: `var(--fp-radius, ${rawDefaults.radius})`,
+  fontFamily: {
+    sans: `var(--fp-font-sans, ${rawDefaults.fontFamily.sans})`,
+    mono: `var(--fp-font-mono, ${rawDefaults.fontFamily.mono})`
+  }
+};
 
 // src/theme/ThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -147,14 +167,57 @@ var warmLight = {
     mono: "'JetBrains Mono', 'Fira Code', monospace"
   }
 };
+var coolLight = {
+  colors: {
+    primary: "#6366f1",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    bgPrimary: "#ffffff",
+    bgSecondary: "#f9fafb",
+    bgTertiary: "#e5e7eb",
+    textPrimary: "#18181b",
+    textSecondary: "#52525b",
+    textMuted: "#a1a1aa",
+    border: "#e5e7eb"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
 var themePresets = {
   coolDark,
+  coolLight,
   warmDark,
   warmLight
 };
 
+// src/theme/useDarkModeTokens.ts
+import { useState, useEffect } from "react";
+function useDarkModeTokens(options) {
+  const lightTokens = options?.light ?? coolLight;
+  const darkTokens = options?.dark ?? coolDark;
+  const [isDark, setIsDark] = useState(
+    () => document.documentElement.classList.contains(options?.selector ?? "dark")
+  );
+  useEffect(() => {
+    const cls = options?.selector ?? "dark";
+    const obs = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains(cls));
+    });
+    obs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => obs.disconnect();
+  }, [options?.selector]);
+  return isDark ? darkTokens : lightTokens;
+}
+
 // src/components/MemoryInspector/MemoryInspector.tsx
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function MemoryInspector({
   data,
@@ -167,6 +230,7 @@ function MemoryInspector({
   className,
   style
 }) {
+  const cacheRef = useRef(null);
   const { memory, newKeys } = useMemo(() => {
     if (data) {
       return { memory: data, newKeys: /* @__PURE__ */ new Set() };
@@ -174,21 +238,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 };
@@ -197,9 +277,9 @@ function MemoryInspector({
   const fs = fontSize[size];
   const pad = padding[size];
   if (unstyled) {
-    return /* @__PURE__ */ jsxs("div", { className, style, "data-fp": "memory-inspector", children: [
+    return /* @__PURE__ */ jsxs("div", { className, style, "data-fp": "memory-inspector", role: "region", "aria-label": "Memory state", children: [
       /* @__PURE__ */ jsx2("div", { "data-fp": "memory-label", children: "Memory State" }),
-      /* @__PURE__ */ jsx2("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+      /* @__PURE__ */ jsx2("pre", { "data-fp": "memory-json", children: /* @__PURE__ */ jsx2("code", { children: JSON.stringify(memory, null, 2) }) })
     ] });
   }
   return /* @__PURE__ */ jsxs(
@@ -212,6 +292,8 @@ function MemoryInspector({
         ...style
       },
       "data-fp": "memory-inspector",
+      role: "region",
+      "aria-label": "Memory state",
       children: [
         /* @__PURE__ */ jsx2(
           "span",
@@ -444,7 +526,7 @@ function NarrativeLog({
 }
 
 // src/components/NarrativeTrace/NarrativeTrace.tsx
-import { useState, useCallback, useMemo as useMemo3, useEffect, useRef } from "react";
+import { useState as useState2, useCallback, useMemo as useMemo3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function parseGroups(lines) {
   const groups = [];
@@ -476,12 +558,12 @@ function NarrativeTrace({
   const future = revealedCount != null ? narrative.slice(revealedCount) : [];
   const revealedGroups = useMemo3(() => parseGroups(revealed), [revealed]);
   const futureGroups = useMemo3(() => parseGroups(future), [future]);
-  const [collapsedSet, setCollapsedSet] = useState(() => {
+  const [collapsedSet, setCollapsedSet] = useState2(() => {
     if (!defaultCollapsed) return /* @__PURE__ */ new Set();
     return new Set(parseGroups(narrative).map((g) => g.headerIdx));
   });
-  const latestRef = useRef(null);
-  useEffect(() => {
+  const latestRef = useRef2(null);
+  useEffect2(() => {
     latestRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [revealedGroups.length]);
   const toggle = useCallback((idx) => {
@@ -504,19 +586,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__ */ jsx4("div", { "data-fp": "narrative-step", children: step.text }, step.idx))
       ] }, group.headerIdx)),
-      futureGroups.map((group) => /* @__PURE__ */ jsxs3("div", { "data-fp": "narrative-group", "data-future": true, children: [
-        /* @__PURE__ */ jsx4("div", { "data-fp": "narrative-header", children: group.header }),
-        group.steps.map((step) => /* @__PURE__ */ jsx4("div", { "data-fp": "narrative-step", children: step.text }, `f-${step.idx}`))
-      ] }, `f-${group.headerIdx}`))
+      futureGroups.length > 0 && /* @__PURE__ */ jsxs3("div", { "data-fp": "narrative-future-hint", children: [
+        futureGroups.length,
+        " more ",
+        futureGroups.length === 1 ? "stage" : "stages",
+        " ahead..."
+      ] })
     ] });
   }
   return /* @__PURE__ */ jsxs3(
@@ -546,10 +641,21 @@ function NarrativeTrace({
                 /* @__PURE__ */ jsxs3(
                   "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,
@@ -608,43 +714,25 @@ function NarrativeTrace({
             group.headerIdx
           );
         }),
-        futureGroups.length > 0 && /* @__PURE__ */ jsx4("div", { style: { opacity: 0.2 }, children: futureGroups.map((group) => /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 2 }, children: [
-          /* @__PURE__ */ jsx4(
-            "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__ */ jsx4(
-            "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__ */ jsxs3("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..."
+        ] })
       ]
     }
   );
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-import { useState as useState2, useMemo as useMemo4, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useMemo as useMemo4, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function GanttTimeline({
   snapshots,
@@ -656,9 +744,9 @@ function GanttTimeline({
   style,
   maxVisibleRows = 5
 }) {
-  const [expanded, setExpanded] = useState2(false);
-  const activeRowRef = useRef2(null);
-  const scrollContainerRef = useRef2(null);
+  const [expanded, setExpanded] = useState3(false);
+  const activeRowRef = useRef3(null);
+  const scrollContainerRef = useRef3(null);
   const totalWallTime = useMemo4(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
@@ -670,7 +758,7 @@ function GanttTimeline({
   const rowHeight = size === "compact" ? 18 : 22;
   const collapsible = maxVisibleRows > 0 && snapshots.length > maxVisibleRows;
   const showAll = expanded || !collapsible;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!showAll && activeRowRef.current && scrollContainerRef.current) {
       activeRowRef.current.scrollIntoView({
         block: "nearest",
@@ -679,12 +767,15 @@ function GanttTimeline({
     }
   }, [selectedIndex, showAll]);
   if (unstyled) {
-    return /* @__PURE__ */ jsx5("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsx5("div", { className, style, "data-fp": "gantt-timeline", role: "listbox", "aria-label": "Execution timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs4(
       "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__ */ jsx5("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
@@ -694,7 +785,7 @@ function GanttTimeline({
           ] })
         ]
       },
-      snap.stageName
+      `${snap.stageName}-${idx}`
     )) });
   }
   return /* @__PURE__ */ jsxs4(
@@ -750,6 +841,8 @@ function GanttTimeline({
           "div",
           {
             ref: scrollContainerRef,
+            role: "listbox",
+            "aria-label": "Execution timeline",
             style: {
               marginTop: 8,
               display: "flex",
@@ -770,6 +863,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",
@@ -785,6 +881,7 @@ function GanttTimeline({
                     /* @__PURE__ */ jsx5(
                       "span",
                       {
+                        title: snap.stageLabel,
                         style: {
                           width: labelWidth,
                           fontSize: fs.small,
@@ -844,7 +941,7 @@ function GanttTimeline({
                     )
                   ]
                 },
-                snap.stageName
+                `${snap.stageName}-${idx}`
               );
             })
           }
@@ -881,7 +978,7 @@ function GanttTimeline({
 }
 
 // src/components/SnapshotPanel/SnapshotPanel.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function SnapshotPanel({
   snapshots,
@@ -893,7 +990,7 @@ function SnapshotPanel({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const [selectedIndex, setSelectedIndex] = useState4(0);
   const fs = fontSize[size];
   const pad = padding[size];
   if (snapshots.length === 0) {
@@ -1166,9 +1263,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({
@@ -1384,7 +1481,7 @@ function ResultPanel({
 }
 
 // src/components/StageDetailPanel/StageDetailPanel.tsx
-import { useState as useState4, useMemo as useMemo6, useCallback as useCallback2 } from "react";
+import { useState as useState5, useMemo as useMemo6, useCallback as useCallback2 } from "react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function computeChanges(prev, curr) {
   const changes = [];
@@ -1816,7 +1913,7 @@ function StageDetailPanel({
   className,
   style
 }) {
-  const [internalMode, setInternalMode] = useState4(controlledMode ?? "simple");
+  const [internalMode, setInternalMode] = useState5(controlledMode ?? "simple");
   const activeMode = controlledMode ?? internalMode;
   const handleToggle = useCallback2(() => {
     const next = activeMode === "simple" ? "dev" : "simple";
@@ -1862,7 +1959,7 @@ function StageDetailPanel({
 }
 
 // src/components/TimeTravelControls/TimeTravelControls.tsx
-import { useState as useState5, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useState as useState6, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback3 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function TimeTravelControls({
   snapshots,
@@ -1874,12 +1971,12 @@ function TimeTravelControls({
   className,
   style
 }) {
-  const [playing, setPlaying] = useState5(false);
-  const playRef = useRef3(null);
+  const [playing, setPlaying] = useState6(false);
+  const playRef = useRef4(null);
   const total = snapshots.length;
   const canPrev = selectedIndex > 0;
   const canNext = selectedIndex < total - 1;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!playing || !autoPlayable) return;
     if (selectedIndex >= total - 1) {
       setPlaying(false);
@@ -1905,49 +2002,80 @@ function TimeTravelControls({
       setPlaying(true);
     }
   }, [playing, selectedIndex, total, onIndexChange]);
+  const handleKeyDown = useCallback3(
+    (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__ */ jsxs9("div", { className, style, "data-fp": "time-travel-controls", children: [
-      /* @__PURE__ */ jsx10(
-        "button",
-        {
-          "data-fp": "tt-prev",
-          disabled: !canPrev || playing,
-          onClick: () => {
-            setPlaying(false);
-            onIndexChange(selectedIndex - 1);
-          },
-          children: "Prev"
-        }
-      ),
-      autoPlayable && /* @__PURE__ */ jsx10("button", { "data-fp": "tt-play", onClick: togglePlay, children: playing ? "Pause" : "Play" }),
-      /* @__PURE__ */ jsx10(
-        "button",
-        {
-          "data-fp": "tt-next",
-          disabled: !canNext || playing,
-          onClick: () => {
-            setPlaying(false);
-            onIndexChange(selectedIndex + 1);
-          },
-          children: "Next"
-        }
-      ),
-      /* @__PURE__ */ jsx10("div", { "data-fp": "tt-ticks", children: snapshots.map((snap, i) => /* @__PURE__ */ jsx10(
-        "button",
-        {
-          "data-fp": "tt-tick",
-          "data-active": i === selectedIndex,
-          "data-done": i < selectedIndex,
-          onClick: () => {
-            setPlaying(false);
-            onIndexChange(i);
-          },
-          title: snap.stageLabel
-        },
-        i
-      )) })
-    ] });
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className,
+        style,
+        "data-fp": "time-travel-controls",
+        role: "toolbar",
+        "aria-label": "Time travel controls",
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              "data-fp": "tt-prev",
+              disabled: !canPrev || playing,
+              onClick: () => {
+                setPlaying(false);
+                onIndexChange(selectedIndex - 1);
+              },
+              "aria-label": "Previous stage",
+              children: "Prev"
+            }
+          ),
+          autoPlayable && /* @__PURE__ */ jsx10("button", { "data-fp": "tt-play", onClick: togglePlay, "aria-label": playing ? "Pause" : "Play", children: playing ? "Pause" : "Play" }),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              "data-fp": "tt-next",
+              disabled: !canNext || playing,
+              onClick: () => {
+                setPlaying(false);
+                onIndexChange(selectedIndex + 1);
+              },
+              "aria-label": "Next stage",
+              children: "Next"
+            }
+          ),
+          /* @__PURE__ */ jsx10("div", { "data-fp": "tt-ticks", children: snapshots.map((snap, i) => /* @__PURE__ */ jsx10(
+            "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,
@@ -1976,6 +2104,10 @@ function TimeTravelControls({
         ...style
       },
       "data-fp": "time-travel-controls",
+      role: "toolbar",
+      "aria-label": "Time travel controls",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
       children: [
         /* @__PURE__ */ jsx10(
           "button",
@@ -1986,6 +2118,7 @@ function TimeTravelControls({
               setPlaying(false);
               onIndexChange(selectedIndex - 1);
             },
+            "aria-label": "Previous stage",
             children: "\u25C0"
           }
         ),
@@ -2008,6 +2141,7 @@ function TimeTravelControls({
               flexShrink: 0
             },
             title: playing ? "Pause" : "Play",
+            "aria-label": playing ? "Pause" : "Play",
             children: playing ? "\u23F8" : "\u25B6"
           }
         ),
@@ -2020,6 +2154,7 @@ function TimeTravelControls({
               setPlaying(false);
               onIndexChange(selectedIndex + 1);
             },
+            "aria-label": "Next stage",
             children: "\u25B6"
           }
         ),
@@ -2066,125 +2201,146 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-import { useState as useState6, useCallback as useCallback4, useMemo as useMemo7 } from "react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function ExplainableShell({
+import { memo as memo3, useState as useState8, useCallback as useCallback5, useMemo as useMemo10, useRef as useRef6, useEffect as useEffect6 } from "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
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+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] = useState6(defaultTab ?? tabs[0]);
-  const [snapshotIdx, setSnapshotIdx] = useState6(0);
-  const fs = fontSize[size];
-  const pad = padding[size];
-  const handleSnapshotChange = useCallback4((idx) => {
-    setSnapshotIdx(Math.max(0, Math.min(idx, snapshots.length - 1)));
-  }, [snapshots.length]);
-  const revealedCount = useMemo7(() => {
-    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__ */ jsxs10("div", { className, style, "data-fp": "explainable-shell", children: [
-      /* @__PURE__ */ jsx11("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx11(
-        "button",
-        {
-          "data-fp": "shell-tab",
-          "data-active": tab === activeTab,
-          onClick: () => setActiveTab(tab),
-          children: tabLabels[tab]
-        },
-        tab
-      )) }),
-      /* @__PURE__ */ jsxs10("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
-        activeTab === "result" && /* @__PURE__ */ jsx11(
-          ResultPanel,
-          {
-            data: resultData ?? null,
-            logs,
-            hideConsole,
-            unstyled: true
-          }
-        ),
-        activeTab === "explainable" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-          /* @__PURE__ */ jsx11(
-            TimeTravelControls,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onIndexChange: handleSnapshotChange,
-              unstyled: true
-            }
-          ),
-          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
-          /* @__PURE__ */ jsx11(MemoryInspector, { snapshots, selectedIndex: snapshotIdx, unstyled: true }),
-          /* @__PURE__ */ jsx11(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true }),
-          /* @__PURE__ */ jsx11(
-            GanttTimeline,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onSelect: handleSnapshotChange,
-              unstyled: true
-            }
-          )
-        ] }),
-        activeTab === "ai-compatible" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-          /* @__PURE__ */ jsx11(
-            TimeTravelControls,
-            {
-              snapshots,
-              selectedIndex: snapshotIdx,
-              onIndexChange: handleSnapshotChange,
-              unstyled: true
-            }
-          ),
-          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
-          /* @__PURE__ */ jsx11(
-            NarrativeTrace,
-            {
-              narrative,
-              revealedCount,
-              unstyled: true
-            }
-          )
-        ] })
-      ] })
+    return /* @__PURE__ */ jsxs10("div", { className, style, "data-fp": "memory-panel", children: [
+      /* @__PURE__ */ jsx11(MemoryInspector, { snapshots, selectedIndex, unstyled: true }),
+      /* @__PURE__ */ jsx11(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true })
     ] });
   }
   return /* @__PURE__ */ jsxs10(
@@ -2192,156 +2348,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__ */ jsx11(
-          "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__ */ jsx11(
-                "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__ */ jsxs10("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
-          activeTab === "result" && /* @__PURE__ */ jsx11(
-            ResultPanel,
-            {
-              data: resultData ?? null,
-              logs,
-              hideConsole,
-              size
-            }
-          ),
-          activeTab === "explainable" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-            /* @__PURE__ */ jsx11(
-              TimeTravelControls,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onIndexChange: handleSnapshotChange,
-                size
-              }
-            ),
-            /* @__PURE__ */ jsxs10("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              renderFlowchart && /* @__PURE__ */ jsx11("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
-              /* @__PURE__ */ jsxs10(
-                "div",
-                {
-                  style: {
-                    width: renderFlowchart ? "40%" : "100%",
-                    minWidth: 280,
-                    overflow: "auto",
-                    display: "flex",
-                    flexDirection: "column"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx11(
-                      MemoryInspector,
-                      {
-                        snapshots,
-                        selectedIndex: snapshotIdx,
-                        size
-                      }
-                    ),
-                    /* @__PURE__ */ jsx11("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx11(
-                      ScopeDiff,
-                      {
-                        previous: prevMemory,
-                        current: currMemory,
-                        hideUnchanged: true,
-                        size
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx11("div", { style: { borderTop: `1px solid ${theme.border}`, flexShrink: 0 }, children: /* @__PURE__ */ jsx11(
-              GanttTimeline,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onSelect: handleSnapshotChange,
-                size
-              }
-            ) })
-          ] }),
-          activeTab === "ai-compatible" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-            /* @__PURE__ */ jsx11(
-              TimeTravelControls,
-              {
-                snapshots,
-                selectedIndex: snapshotIdx,
-                onIndexChange: handleSnapshotChange,
-                size
-              }
-            ),
-            /* @__PURE__ */ jsxs10("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              renderFlowchart && /* @__PURE__ */ jsx11("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
-              /* @__PURE__ */ jsx11(
-                NarrativeTrace,
-                {
-                  narrative,
-                  revealedCount,
-                  size,
-                  style: {
-                    width: renderFlowchart ? "40%" : "100%",
-                    minWidth: 280
+        /* @__PURE__ */ jsx11(MemoryInspector, { snapshots, selectedIndex, size }),
+        /* @__PURE__ */ jsx11("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx11(ScopeDiff, { previous: prevMemory, current: currMemory, hideUnchanged: true, size }) })
+      ]
+    }
+  );
+}
+
+// src/components/NarrativePanel/NarrativePanel.tsx
+import { useMemo as useMemo8 } from "react";
+
+// src/components/StoryNarrative/StoryNarrative.tsx
+import { useMemo as useMemo7, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "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 = useMemo7(() => {
+    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 = useRef5(null);
+  useEffect5(() => {
+    latestRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [revealed.length]);
+  if (unstyled) {
+    return /* @__PURE__ */ jsx12("div", { className, style: outerStyle, "data-fp": "story-narrative", role: "log", children: revealed.map((entry, i) => /* @__PURE__ */ jsx12("div", { "data-fp": "narrative-entry", "data-type": entry.type, children: entry.text }, i)) });
+  }
+  return /* @__PURE__ */ jsxs11(
+    "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__ */ jsxs11(
+            "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__ */ jsx12(
+                  "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__ */ jsx12(
+                  "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__ */ jsxs11("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
+import { jsx as jsx13, jsxs as jsxs12 } from "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 = useMemo8(() => {
+    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 = useMemo8(() => {
+    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__ */ jsx13("div", { className, style, "data-fp": "narrative-panel", children: hasStructured ? /* @__PURE__ */ jsx13(StoryNarrative, { entries: narrativeEntries, stageCount: selectedIndex + 1, unstyled: true }) : /* @__PURE__ */ jsx13(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
+  }
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className,
+      style: {
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        ...style
+      },
+      "data-fp": "narrative-panel",
+      children: [
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsx13(
+          StoryNarrative,
+          {
+            entries: narrativeEntries,
+            stageCount: selectedIndex + 1,
+            size,
+            style: { flex: 1 }
+          }
+        ) : /* @__PURE__ */ jsx13(
+          NarrativeTrace,
+          {
+            narrative,
+            revealedCount,
+            size,
+            style: { flex: 1 }
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/FlowchartView/SubflowTree.tsx
-import { memo, useState as useState7, useCallback as useCallback5, useMemo as useMemo8 } from "react";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { memo, useState as useState7, useCallback as useCallback4, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs13 } from "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);
@@ -2357,7 +2608,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) {
@@ -2378,14 +2629,14 @@ var TreeNode = memo(function TreeNode2({
   const hasChildren = entry.children && entry.children.length > 0;
   const isActive = activeStage === entry.name;
   const isDone = doneStages?.has(entry.name);
-  const handleClick = useCallback5(() => {
+  const handleClick = useCallback4(() => {
     if (hasChildren) {
       setExpanded((prev) => !prev);
     }
     onNodeSelect?.(entry.name, !!entry.isSubflow);
   }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+    /* @__PURE__ */ jsxs13(
       "button",
       {
         onClick: handleClick,
@@ -2416,7 +2667,7 @@ var TreeNode = memo(function TreeNode2({
           }
         },
         children: [
-          hasChildren ? /* @__PURE__ */ jsx12(
+          hasChildren ? /* @__PURE__ */ jsx14(
             "span",
             {
               style: {
@@ -2431,8 +2682,8 @@ var TreeNode = memo(function TreeNode2({
               },
               children: "\u25B6"
             }
-          ) : /* @__PURE__ */ jsx12("span", { style: { width: 12, flexShrink: 0 } }),
-          /* @__PURE__ */ jsx12(
+          ) : /* @__PURE__ */ jsx14("span", { style: { width: 12, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx14(
             "span",
             {
               style: {
@@ -2444,8 +2695,8 @@ var TreeNode = memo(function TreeNode2({
               }
             }
           ),
-          /* @__PURE__ */ jsxs11("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs13("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs13(
               "span",
               {
                 style: {
@@ -2457,11 +2708,11 @@ var TreeNode = memo(function TreeNode2({
                 },
                 children: [
                   entry.name,
-                  entry.isSubflow && /* @__PURE__ */ jsx12("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
+                  entry.isSubflow && /* @__PURE__ */ jsx14("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" })
                 ]
               }
             ),
-            entry.description && /* @__PURE__ */ jsx12(
+            entry.description && /* @__PURE__ */ jsx14(
               "span",
               {
                 style: {
@@ -2478,7 +2729,7 @@ var TreeNode = memo(function TreeNode2({
         ]
       }
     ),
-    hasChildren && expanded && /* @__PURE__ */ jsx12("div", { children: entry.children.map((child, i) => /* @__PURE__ */ jsx12(
+    hasChildren && expanded && /* @__PURE__ */ jsx14("div", { children: entry.children.map((child, i) => /* @__PURE__ */ jsx14(
       TreeNode2,
       {
         entry: child,
@@ -2487,12 +2738,12 @@ var TreeNode = memo(function TreeNode2({
         doneStages,
         onNodeSelect
       },
-      `${child.name}-${i}`
+      child.subflowId ?? `${child.name}-${i}`
     )) })
   ] });
 });
 var SectionLabel = memo(function SectionLabel2({ children }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -2516,21 +2767,10 @@ var SubflowTree = memo(function SubflowTree2({
   className,
   style
 }) {
-  const tree = useMemo8(() => specToTree(spec), [spec]);
-  const mainStages = useMemo8(() => tree.filter((e) => !e.isSubflow), [tree]);
-  const subflowStages = useMemo8(() => tree.filter((e) => e.isSubflow), [tree]);
-  const renderEntries = (entries) => entries.map((entry, i) => /* @__PURE__ */ jsx12(
-    TreeNode,
-    {
-      entry,
-      depth: 0,
-      activeStage,
-      doneStages,
-      onNodeSelect
-    },
-    `${entry.name}-${i}`
-  ));
-  return /* @__PURE__ */ jsxs11(
+  const tree = useMemo9(() => specToTree(spec), [spec]);
+  const subflowStages = useMemo9(() => tree.filter((e) => e.isSubflow), [tree]);
+  if (subflowStages.length === 0) return null;
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className,
@@ -2548,123 +2788,639 @@ var SubflowTree = memo(function SubflowTree2({
         ...style
       },
       children: [
-        !unstyled && /* @__PURE__ */ jsx12(SectionLabel, { children: "Flowchart" }),
-        renderEntries(mainStages),
-        subflowStages.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-          !unstyled && /* @__PURE__ */ jsx12("div", { style: { height: 1, background: theme.border, margin: "8px 12px" } }),
-          !unstyled && /* @__PURE__ */ jsx12(SectionLabel, { children: "Subflows" }),
-          renderEntries(subflowStages)
-        ] })
+        !unstyled && /* @__PURE__ */ jsx14(SectionLabel, { children: "Subflows" }),
+        subflowStages.map((entry, i) => /* @__PURE__ */ jsx14(
+          TreeNode,
+          {
+            entry,
+            depth: 0,
+            activeStage,
+            doneStages,
+            onNodeSelect
+          },
+          entry.subflowId ?? `${entry.name}-${i}`
+        ))
       ]
     }
   );
 });
 
-// src/adapters/fromRuntimeSnapshot.ts
-function toVisualizationSnapshots(runtime) {
-  const snapshots = [];
-  flattenTree(runtime.executionTree, snapshots, runtime.sharedState, 0, runtime.subflowResults, {});
-  return snapshots;
-}
-function flattenTree(node, out, sharedState, accumulatedMs = 0, subflowResults, cumulativeMemory = {}) {
-  const durationMs = typeof node.metrics?.durationMs === "number" ? node.metrics.durationMs : 1;
-  const startMs = accumulatedMs;
-  const narrative = buildNarrative(node);
-  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;
+// src/components/FlowchartView/SubflowBreadcrumb.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
+  breadcrumbs,
+  onNavigate
+}) {
+  if (breadcrumbs.length <= 1) return null;
+  return /* @__PURE__ */ jsx15(
+    "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__ */ jsxs14("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ jsx15("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ jsxs14("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx15(
+              "span",
+              {
+                style: {
+                  color: theme.primary,
+                  fontWeight: 600
+                },
+                children: crumb.label
+              }
+            ),
+            crumb.description && /* @__PURE__ */ jsxs14(
+              "span",
+              {
+                style: {
+                  color: theme.textMuted,
+                  fontWeight: 400,
+                  fontSize: 11
+                },
+                children: [
+                  "\u2014 ",
+                  crumb.description
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx15(
+            "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
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var HLinePill = memo3(function HLinePill2({
+  label,
+  detail,
+  expanded,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs15("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0,
+    padding: "0"
+  }, children: [
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, height: 1, background: theme.border } }),
+    /* @__PURE__ */ jsxs15(
+      "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__ */ jsx16("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          label,
+          detail && /* @__PURE__ */ jsx16("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, height: 1, background: theme.border } })
+  ] });
+});
+var VLinePill = memo3(function VLinePill2({
+  label,
+  expanded,
+  side = "right",
+  onClick
+}) {
+  const arrow = side === "right" ? expanded ? "\u25B6" : "\u25C0" : expanded ? "\u25C0" : "\u25B6";
+  return /* @__PURE__ */ jsxs15("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 0,
+    padding: "0"
+  }, children: [
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, width: 1, background: theme.border } }),
+    /* @__PURE__ */ jsxs15(
+      "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__ */ jsx16("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
+          label
+        ]
       }
+    ),
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, width: 1, background: theme.border } })
+  ] });
+});
+var RIGHT_PANEL_LABELS = {
+  memory: "Memory",
+  narrative: "Narrative"
+};
+var DetailsContent = memo3(function DetailsContent2({
+  snapshots,
+  selectedIndex,
+  narrativeEntries,
+  narrative,
+  size,
+  fillHeight
+}) {
+  const [rightPanel, setRightPanel] = useState8("memory");
+  return /* @__PURE__ */ jsxs15("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx16("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: ["memory", "narrative"].map((panel) => {
+      const active = rightPanel === panel;
+      return /* @__PURE__ */ jsx16(
+        "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__ */ jsxs15("div", { style: { flex: 1, overflow: "auto" }, children: [
+      rightPanel === "memory" && /* @__PURE__ */ jsx16(MemoryPanel, { snapshots, selectedIndex, size, style: fillHeight ? { height: "100%" } : void 0 }),
+      rightPanel === "narrative" && /* @__PURE__ */ jsx16(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 extractSubflowNarrative(entries, subflowName) {
+  const result = [];
+  let inside = false;
+  for (const entry of entries) {
+    if (entry.type === "subflow" && entry.text.includes(subflowName) && entry.text.startsWith("Entering")) {
+      inside = true;
+      continue;
     }
+    if (inside && entry.type === "subflow" && entry.text.includes(subflowName) && entry.text.startsWith("Exiting")) break;
+    if (inside) result.push(entry);
   }
-  const stageId = node.name || node.id;
-  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;
+  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 childEnd = flattenTree(child, out, sharedState, nextMs, subflowResults, memory);
-      maxChildEnd = Math.max(maxChildEnd, childEnd);
+      const f = findSubflowSpecNode(child, name);
+      if (f) return f;
     }
-    nextMs = maxChildEnd;
   }
-  if (node.next) {
-    nextMs = flattenTree(node.next, out, sharedState, nextMs, subflowResults, memory);
-  }
-  return nextMs;
+  if (node.next) return findSubflowSpecNode(node.next, name);
+  return null;
 }
-function buildNarrative(node) {
-  const parts = [];
-  if (node.name) {
-    parts.push(`Stage "${node.name}" executed.`);
-  }
-  if (node.stageWrites && Object.keys(node.stageWrites).length > 0) {
-    const keys = Object.keys(node.stageWrites);
-    parts.push(`Wrote ${keys.length} key(s): ${keys.join(", ")}.`);
-  }
-  if (node.errors && Object.keys(node.errors).length > 0) {
-    parts.push(`Errors: ${JSON.stringify(node.errors)}`);
-  }
-  if (node.isFork) {
-    parts.push(
-      `Forked into ${node.children?.length ?? 0} parallel branch(es).`
-    );
-  }
-  return parts.join(" ") || `Stage ${node.id} completed.`;
+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 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;
-  });
+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 = useRef6(null);
+  const [isNarrow, setIsNarrow] = useState8(false);
+  useEffect6(() => {
+    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] = useState8(defaultTab ?? tabs[0]);
+  const [snapshotIdx, setSnapshotIdx] = useState8(0);
+  const [drillDownStack, setDrillDownStack] = useState8([]);
+  const [rightExpanded, setRightExpanded] = useState8(defaultExpanded?.details ?? true);
+  const [leftExpanded, setLeftExpanded] = useState8(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = useState8(defaultExpanded?.timeline ?? false);
+  useEffect6(() => {
+    if (isNarrow) {
+      setLeftExpanded(false);
+      setRightExpanded(false);
+      setTimelineExpanded(false);
+    }
+  }, [isNarrow]);
+  const triggerReflow = useCallback5(() => {
+    requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
+  }, []);
+  const toggleLeft = useCallback5((v2) => {
+    setLeftExpanded(v2);
+    triggerReflow();
+  }, [triggerReflow]);
+  const toggleRight = useCallback5((v2) => {
+    setRightExpanded(v2);
+    triggerReflow();
+  }, [triggerReflow]);
+  const toggleTimeline = useCallback5(() => {
+    setTimelineExpanded((p) => !p);
+    triggerReflow();
+  }, [triggerReflow]);
+  const isInSubflow = drillDownStack.length > 0;
+  const currentLevel = useMemo10(() => {
+    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 = useMemo10(() => {
+    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 = useMemo10(() => {
+    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 = useMemo10(() => !!spec && hasSubflowNodes(spec), [spec]);
+  const rootOverlay = useMemo10(() => {
+    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 = useCallback5((tab) => {
+    setActiveTab(tab);
+    setDrillDownStack([]);
+    setSnapshotIdx(999);
+  }, []);
+  const handleSnapshotChange = useCallback5((idx) => {
+    if (typeof idx === "number") setSnapshotIdx(idx);
+  }, []);
+  const handleDrillDown = useCallback5(
+    (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 = useCallback5((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 = useCallback5(
+    (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 = useCallback5(
+    (name, isSubflow) => {
+      if (isSubflow && spec) {
+        setDrillDownStack([]);
+        const entry = resolveSubflowLevel(spec, snapshots, name, narrativeEntries);
+        if (entry) {
+          setDrillDownStack([{ ...entry, parentSnapshotIdx: snapshotIdx }]);
+          setSnapshotIdx(0);
+        }
+      } else {
+        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__ */ jsxs15("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ jsx16("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx16("button", { "data-fp": "shell-tab", "data-active": tab === activeTab, onClick: () => handleTabChange(tab), children: tabLabels[tab] }, tab)) }),
+      /* @__PURE__ */ jsxs15("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ jsx16(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
+        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+          /* @__PURE__ */ jsx16(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
+          isInSubflow && /* @__PURE__ */ jsx16(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+          activeSpec && renderFlowchart?.({ spec: activeSpec, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick }),
+          /* @__PURE__ */ jsx16(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
+          /* @__PURE__ */ jsx16(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, unstyled: true }),
+          /* @__PURE__ */ jsx16(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
+        ] })
+      ] })
+    ] });
+  }
+  const isVisualizationTab = activeTab === "explainable" || activeTab === "ai-compatible";
+  return /* @__PURE__ */ jsxs15(
+    "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__ */ jsx16("div", { style: {
+          display: "flex",
+          borderBottom: `1px solid ${theme.border}`,
+          background: theme.bgSecondary,
+          flexShrink: 0
+        }, children: tabs.map((tab) => {
+          const active = tab === activeTab;
+          return /* @__PURE__ */ jsx16(
+            "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__ */ jsxs15("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: [
+          activeTab === "result" && /* @__PURE__ */ jsx16(ResultPanel, { data: resultData ?? null, logs, hideConsole, size }),
+          isVisualizationTab && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+            /* @__PURE__ */ jsx16(
+              TimeTravelControls,
+              {
+                snapshots: activeSnapshots,
+                selectedIndex: safeIdx,
+                onIndexChange: handleSnapshotChange,
+                size
+              }
+            ),
+            isInSubflow && /* @__PURE__ */ jsx16(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+            isNarrow ? (
+              /* ── Mobile: stacked vertical ── */
+              /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsx16("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: renderFlowchart && activeSpec && renderFlowchart({
+                  spec: activeSpec,
+                  snapshots: activeSnapshots,
+                  selectedIndex: safeIdx,
+                  onNodeClick: handleNodeClick
+                }) }),
+                showTreeSidebar && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                  /* @__PURE__ */ jsx16(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
+                  leftExpanded && /* @__PURE__ */ jsx16("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ jsx16(
+                    SubflowTree,
+                    {
+                      spec,
+                      activeStage: rootOverlay.activeStage,
+                      doneStages: rootOverlay.doneStages,
+                      onNodeSelect: handleTreeNodeSelect
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx16(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+                rightExpanded && /* @__PURE__ */ jsx16("div", { style: { maxHeight: 250, flexShrink: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx16(
+                  DetailsContent,
+                  {
+                    snapshots: activeSnapshots,
+                    selectedIndex: safeIdx,
+                    narrativeEntries: activeNarrativeEntries,
+                    narrative: activeNarrative,
+                    size
+                  }
+                ) }),
+                /* @__PURE__ */ jsx16(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+                timelineExpanded && /* @__PURE__ */ jsx16("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx16(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+              ] })
+            ) : (
+              /* ── Desktop: side-by-side ── */
+              /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsxs15("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+                  showTreeSidebar && (leftExpanded ? /* @__PURE__ */ jsxs15("div", { style: { width: 220, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                    /* @__PURE__ */ jsx16("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx16(
+                      SubflowTree,
+                      {
+                        spec,
+                        activeStage: rootOverlay.activeStage,
+                        doneStages: rootOverlay.doneStages,
+                        onNodeSelect: handleTreeNodeSelect
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx16(VLinePill, { label: leftLabel, expanded: true, side: "left", onClick: () => toggleLeft(false) })
+                  ] }) : /* @__PURE__ */ jsx16(VLinePill, { label: leftLabel, expanded: false, side: "left", onClick: () => toggleLeft(true) })),
+                  /* @__PURE__ */ jsx16("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: renderFlowchart && activeSpec && renderFlowchart({
+                    spec: activeSpec,
+                    snapshots: activeSnapshots,
+                    selectedIndex: safeIdx,
+                    onNodeClick: handleNodeClick
+                  }) }),
+                  rightExpanded ? /* @__PURE__ */ jsxs15("div", { style: { width: "38%", minWidth: 300, maxWidth: 500, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                    /* @__PURE__ */ jsx16(VLinePill, { label: rightLabel, expanded: true, onClick: () => toggleRight(false) }),
+                    /* @__PURE__ */ jsx16(
+                      DetailsContent,
+                      {
+                        snapshots: activeSnapshots,
+                        selectedIndex: safeIdx,
+                        narrativeEntries: activeNarrativeEntries,
+                        narrative: activeNarrative,
+                        size,
+                        fillHeight: true
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx16(VLinePill, { label: rightLabel, expanded: false, onClick: () => toggleRight(true) })
+                ] }),
+                /* @__PURE__ */ jsx16(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+                timelineExpanded && /* @__PURE__ */ jsx16("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx16(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+              ] })
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 export {
   ExplainableShell,
   FootprintTheme,
   GanttTimeline,
   MemoryInspector,
+  MemoryPanel,
   NarrativeLog,
+  NarrativePanel,
   NarrativeTrace,
   ResultPanel,
   ScopeDiff,
   SnapshotPanel,
   StageDetailPanel,
+  StoryNarrative,
   SubflowTree,
   TimeTravelControls,
   coolDark,
+  coolLight,
   createSnapshots,
   defaultTokens,
+  rawDefaults,
+  subflowResultToSnapshots,
   themePresets,
   toVisualizationSnapshots,
   tokensToCSSVars,
+  useDarkModeTokens,
   useFootprintTheme,
   warmDark,
   warmLight