footprint-explainable-ui 0.14.11 → 0.16.0

package/dist/index.cjs

@@ -20,9 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CompactTimeline: () => CompactTimeline,
+  DataTracePanel: () => DataTracePanel,
   ExplainableShell: () => ExplainableShell,
   FootprintTheme: () => FootprintTheme,
   GanttTimeline: () => GanttTimeline,
+  InsightPanel: () => InsightPanel,
+  InspectorPanel: () => InspectorPanel,
   MemoryInspector: () => MemoryInspector,
   MemoryPanel: () => MemoryPanel,
   NarrativeLog: () => NarrativeLog,
@@ -2257,7 +2261,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-var import_react20 = require("react");
+var import_react24 = require("react");
 
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
@@ -3997,22 +4001,520 @@ function TracedFlowchartView({
   );
 }
 
-// src/components/ExplainableShell/ExplainableShell.tsx
+// src/components/InspectorPanel/InspectorPanel.tsx
+var import_react21 = require("react");
+
+// src/components/DataTracePanel/DataTracePanel.tsx
+var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var HLinePill = (0, import_react20.memo)(function HLinePill2({
+var DataTracePanel = (0, import_react20.memo)(function DataTracePanel2({
+  frames,
+  selectedStageId,
+  onFrameClick,
+  fromStageName
+}) {
+  if (frames.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontWeight: 600,
+            marginBottom: 6
+          },
+          children: "Backward causal chain"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
+    fromStageName && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "4px 12px 8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            fontWeight: 600
+          },
+          children: [
+            "Data trace from ",
+            fromStageName
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: theme.textMuted,
+            fontStyle: "italic",
+            marginTop: 3
+          },
+          children: "Every value here was derived from the stages below."
+        }
+      )
+    ] }),
+    frames.map((frame, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      DataTraceFrame,
+      {
+        frame,
+        isFirst: i === 0,
+        isLast: i === frames.length - 1,
+        isSelected: frame.runtimeStageId === selectedStageId,
+        onClick: onFrameClick
+      },
+      frame.runtimeStageId
+    ))
+  ] });
+});
+var DataTraceFrame = (0, import_react20.memo)(function DataTraceFrame2({
+  frame,
+  isFirst,
+  isLast,
+  isSelected,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "button",
+    {
+      onClick: () => onClick?.(frame.runtimeStageId),
+      style: {
+        display: "block",
+        width: "100%",
+        textAlign: "left",
+        border: "none",
+        background: isSelected ? "var(--fp-accent-bg, rgba(99,102,241,0.12))" : "transparent",
+        padding: "6px 12px 6px 16px",
+        cursor: onClick ? "pointer" : "default",
+        borderLeft: isSelected ? "3px solid var(--fp-accent, #6366f1)" : "3px solid transparent",
+        color: "inherit",
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          !isFirst && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.textMuted, fontSize: 11 }, children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "span",
+            {
+              style: {
+                fontWeight: isFirst ? 600 : 400,
+                color: isFirst ? "var(--fp-accent, #6366f1)" : theme.textPrimary
+              },
+              children: frame.stageName
+            }
+          ),
+          isLast && !isFirst && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                color: theme.textMuted,
+                fontStyle: "italic"
+              },
+              children: "(origin)"
+            }
+          )
+        ] }),
+        frame.keysWritten.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: theme.textMuted,
+              paddingLeft: isFirst ? 0 : 18,
+              marginTop: 2
+            },
+            children: [
+              "wrote:",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.textSecondary }, children: frame.keysWritten.join(", ") })
+            ]
+          }
+        ),
+        frame.linkedBy && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: "var(--fp-accent, #6366f1)",
+              paddingLeft: 18,
+              marginTop: 1
+            },
+            children: [
+              "\u2190 via ",
+              frame.linkedBy
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/InspectorPanel/InspectorPanel.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var InspectorPanel = (0, import_react21.memo)(function InspectorPanel2({
+  snapshots,
+  selectedIndex,
+  dataTraceFrames,
+  selectedStageId,
+  onNavigateToStage
+}) {
+  const [tab, setTab] = (0, import_react21.useState)("state");
+  const currentSnapshot = snapshots[selectedIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: `1px solid ${theme.border}`,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                TabButton,
+                {
+                  active: tab === "state",
+                  onClick: () => setTab("state"),
+                  label: "State"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                TabButton,
+                {
+                  active: tab === "trace",
+                  onClick: () => setTab("trace"),
+                  label: "Data Trace",
+                  badge: dataTraceFrames.length > 0 ? String(dataTraceFrames.length) : void 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
+          tab === "state" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            MemoryPanel,
+            {
+              snapshots,
+              selectedIndex
+            }
+          ),
+          tab === "trace" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            DataTracePanel,
+            {
+              frames: dataTraceFrames,
+              selectedStageId,
+              onFrameClick: onNavigateToStage,
+              fromStageName: currentSnapshot?.stageName
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+function TabButton({
+  active,
+  onClick,
+  label,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "button",
+    {
+      onClick,
+      style: {
+        padding: "8px 14px",
+        border: "none",
+        borderBottom: active ? "2px solid var(--fp-accent, #6366f1)" : "2px solid transparent",
+        background: "transparent",
+        color: active ? "var(--fp-accent, #6366f1)" : theme.textMuted,
+        fontWeight: active ? 600 : 400,
+        fontSize: 12,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      },
+      children: [
+        label,
+        badge && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: 10,
+              background: active ? "var(--fp-accent, #6366f1)" : theme.textMuted,
+              color: "#fff",
+              borderRadius: 8,
+              padding: "1px 5px",
+              fontWeight: 600
+            },
+            children: badge
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/InsightPanel/InsightPanel.tsx
+var import_react22 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var InsightPanel = (0, import_react22.memo)(function InsightPanel2({
+  insights,
+  expandedId,
+  mode
+}) {
+  if (insights.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: 12, color: theme.textMuted, fontSize: 13 }, children: "No insights available. Attach recorders to see data." });
+  }
+  if (mode === "grid") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InsightGrid, { insights });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InsightTabs, { insights, defaultId: expandedId });
+});
+var InsightTabs = (0, import_react22.memo)(function InsightTabs2({
+  insights,
+  defaultId
+}) {
+  const [activeId, setActiveId] = (0, import_react22.useState)(defaultId ?? insights[0]?.id);
+  const active = insights.find((i) => i.id === activeId) ?? insights[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: `1px solid ${theme.border}`,
+              flexShrink: 0,
+              overflowX: "auto"
+            },
+            children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                onClick: () => setActiveId(insight.id),
+                style: {
+                  padding: "8px 12px",
+                  border: "none",
+                  borderBottom: activeId === insight.id ? "2px solid var(--fp-accent, #6366f1)" : "2px solid transparent",
+                  background: "transparent",
+                  color: activeId === insight.id ? "var(--fp-accent, #6366f1)" : theme.textMuted,
+                  fontWeight: activeId === insight.id ? 600 : 400,
+                  fontSize: 12,
+                  cursor: "pointer",
+                  whiteSpace: "nowrap"
+                },
+                children: insight.name
+              },
+              insight.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: active?.render() })
+      ]
+    }
+  );
+});
+var InsightGrid = (0, import_react22.memo)(function InsightGrid2({
+  insights
+}) {
+  const cols = insights.length <= 2 ? 1 : 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        height: "100%",
+        overflow: "auto",
+        gap: 1,
+        background: theme.border
+      },
+      children: insights.map((insight) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          style: {
+            background: "var(--fp-bg, #1a1b26)",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "div",
+              {
+                style: {
+                  padding: "6px 10px",
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: theme.textMuted,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px",
+                  borderBottom: `1px solid ${theme.border}`,
+                  flexShrink: 0
+                },
+                children: [
+                  insight.name,
+                  insight.summary && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "span",
+                    {
+                      style: {
+                        marginLeft: 8,
+                        fontWeight: 400,
+                        fontSize: 10,
+                        color: theme.textMuted
+                      },
+                      children: insight.summary
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: insight.render() })
+          ]
+        },
+        insight.id
+      ))
+    }
+  );
+});
+
+// src/components/CompactTimeline/CompactTimeline.tsx
+var import_react23 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var CompactTimeline = (0, import_react23.memo)(function CompactTimeline2({
+  snapshots,
+  selectedIndex,
+  defaultExpanded = false
+}) {
+  const [expanded, setExpanded] = (0, import_react23.useState)(defaultExpanded);
+  if (snapshots.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        onClick: () => setExpanded((e) => !e),
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "6px 12px",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: 11,
+          color: theme.textMuted,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 10 }, children: expanded ? "\u25BC" : "\u25B8" }),
+          "Timeline",
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontWeight: 400, fontSize: 10 }, children: [
+            snapshots.length,
+            " stages"
+          ] }),
+          !expanded && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            "div",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                marginLeft: 8
+              },
+              children: [
+                snapshots.map((snap, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: i === selectedIndex ? 8 : 5,
+                      height: i === selectedIndex ? 8 : 5,
+                      borderRadius: "50%",
+                      background: i < selectedIndex ? "var(--fp-success, #22c55e)" : i === selectedIndex ? "var(--fp-accent, #6366f1)" : theme.textMuted + "40",
+                      transition: "all 0.15s",
+                      flexShrink: 0
+                    },
+                    title: snap.stageName
+                  },
+                  i
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      height: 1,
+                      background: theme.textMuted + "30",
+                      marginLeft: -2,
+                      marginRight: 4
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: "0 12px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      GanttTimeline,
+      {
+        snapshots,
+        selectedIndex
+      }
+    ) })
+  ] });
+});
+
+// src/components/ExplainableShell/ExplainableShell.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var HLinePill = (0, import_react24.memo)(function HLinePill2({
   label,
   detail,
   expanded,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "button",
       {
         onClick,
@@ -4036,31 +4538,31 @@ var HLinePill = (0, import_react20.memo)(function HLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 7 }, children: expanded ? "\u25BC" : "\u25B6" }),
           label,
-          detail && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
+          detail && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontWeight: 400, opacity: 0.5, fontSize: 9 }, children: detail })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, height: 1, background: theme.border } })
   ] });
 });
-var VLinePill = (0, import_react20.memo)(function VLinePill2({
+var VLinePill = (0, import_react24.memo)(function VLinePill2({
   label,
   expanded,
   side = "right",
   onClick
 }) {
   const arrow = side === "right" ? expanded ? "\u25B6" : "\u25C0" : expanded ? "\u25C0" : "\u25B6";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: 0,
     padding: "0"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "button",
       {
         onClick,
@@ -4085,12 +4587,12 @@ var VLinePill = (0, import_react20.memo)(function VLinePill2({
           transition: "color 0.15s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 7, writingMode: "horizontal-tb" }, children: arrow }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
   ] });
 });
 function detectKeyedSteps(data) {
@@ -4127,9 +4629,9 @@ function KeyedRecorderView({
   snapshots,
   selectedIndex
 }) {
-  const [showAggregate, setShowAggregate] = (0, import_react20.useState)(false);
-  const detected = (0, import_react20.useMemo)(() => detectKeyedSteps(data), [data]);
-  const visibleKeys = (0, import_react20.useMemo)(() => {
+  const [showAggregate, setShowAggregate] = (0, import_react24.useState)(false);
+  const detected = (0, import_react24.useMemo)(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = (0, import_react24.useMemo)(() => {
     const keys = /* @__PURE__ */ new Set();
     for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
       const snap = snapshots[i];
@@ -4144,7 +4646,7 @@ function KeyedRecorderView({
   }, [snapshots, selectedIndex, detected?.keyType]);
   const isAtEnd = selectedIndex >= snapshots.length - 1;
   if (!detected) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
   }
   const steps = detected.steps;
   const hints = extractRenderHints(data);
@@ -4158,13 +4660,13 @@ function KeyedRecorderView({
     }
   }
   const grandTotal = hints?.grandTotal ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
+    description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
       preferredOperation === "aggregate" ? (
         /* AGGREGATE: collect silently during scrub, button at end to reveal total */
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          isAtEnd ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          isAtEnd ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { marginBottom: 16 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               onClick: () => setShowAggregate(true),
@@ -4182,35 +4684,35 @@ function KeyedRecorderView({
               },
               children: "Aggregate \u2014 Show Grand Total"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
-            numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "14px 16px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 8, border: `1px solid ${theme.success}44` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Aggregate \u2014 grand total" }),
+            numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { fontSize: 26, fontWeight: 700, color: theme.success }, children: [
               grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { style: { fontSize: 11, color: theme.textMuted, fontWeight: 400, marginLeft: 8 }, children: [
                 numFieldKey,
                 " \xB7 ",
                 allKeys.length,
                 " steps"
               ] })
             ] })
-          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
+          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.textMuted} 6%, transparent)`, borderRadius: 6, marginBottom: 16, border: `1px dashed ${theme.border}` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: "Collecting data..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { fontSize: 11, color: theme.textMuted, marginTop: 4 }, children: [
               visibleEntries.length,
               " of ",
               allKeys.length,
               " steps collected. Scrub to end to aggregate."
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : preferredOperation === "accumulate" ? (
         /* ACCUMULATE: running total grows with slider — IS the total at end, no button */
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, marginBottom: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontWeight: 700, fontSize: 18, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
               numFieldKey,
               " \xB7 ",
               visibleEntries.length,
@@ -4219,27 +4721,27 @@ function KeyedRecorderView({
               " steps"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Per-step detail" })
         ] })
       ) : (
         /* TRANSLATE: per-step entries prominent, no totals */
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" })
       ),
       visibleEntries.map((key) => {
         const entry = steps[key];
         const label = entry.stageName ?? key;
         const numVal = numFieldKey ? entry[numFieldKey] : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
-          numVal !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
+          numVal !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
         ] }, key);
       }),
-      visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
+      visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." })
     ] })
   ] });
 }
-var DetailsContent = (0, import_react20.memo)(function DetailsContent2({
+var DetailsContent = (0, import_react24.memo)(function DetailsContent2({
   snapshots,
   selectedIndex,
   narrativeEntries,
@@ -4252,27 +4754,27 @@ var DetailsContent = (0, import_react20.memo)(function DetailsContent2({
     {
       id: "memory",
       name: "Memory",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
     },
     {
       id: "narrative",
       name: "Narrative",
-      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
     }
   ];
   const allViews = [...builtInViews, ...extraViews ?? []];
-  const [activeViewId, setActiveViewId] = (0, import_react20.useState)(allViews[0]?.id ?? "memory");
+  const [activeViewId, setActiveViewId] = (0, import_react24.useState)(allViews[0]?.id ?? "memory");
   const viewIds = allViews.map((v2) => v2.id).join(",");
-  (0, import_react20.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!allViews.find((v2) => v2.id === activeViewId)) {
       setActiveViewId(allViews[0]?.id ?? "memory");
     }
   }, [viewIds]);
   const activeView = allViews.find((v2) => v2.id === activeViewId) ?? allViews[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
       const active = view.id === activeViewId;
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           onClick: () => setActiveViewId(view.id),
@@ -4296,7 +4798,7 @@ var DetailsContent = (0, import_react20.memo)(function DetailsContent2({
         view.id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
   ] });
 });
 function resolveSubflowLevel(parentSpec, parentSnapshots, subflowNodeName, narrativeEntries) {
@@ -4336,8 +4838,125 @@ function hasSubflowNodes(node) {
   if (node.next && hasSubflowNodes(node.next)) return true;
   return false;
 }
+function buildDataTrace(commitLog, targetRuntimeStageId, maxDepth = 10) {
+  const log = commitLog;
+  if (!log?.length) return [];
+  const idxMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < log.length; i++) idxMap.set(log[i].runtimeStageId, i);
+  const startIdx = idxMap.get(targetRuntimeStageId);
+  if (startIdx === void 0) return [];
+  const startCommit = log[startIdx];
+  const frames = [];
+  const visited = /* @__PURE__ */ new Set();
+  let current = startCommit;
+  let currentIdx = startIdx;
+  let depth = 0;
+  while (current && depth <= maxDepth) {
+    if (visited.has(current.runtimeStageId)) break;
+    visited.add(current.runtimeStageId);
+    frames.push({
+      runtimeStageId: current.runtimeStageId,
+      stageId: current.stageId,
+      stageName: current.stage,
+      keysWritten: current.trace.map((t) => t.path),
+      linkedBy: depth === 0 ? "" : current.trace[0]?.path ?? "",
+      depth
+    });
+    if (currentIdx > 0) {
+      currentIdx--;
+      current = log[currentIdx];
+      depth++;
+    } else {
+      break;
+    }
+  }
+  return frames;
+}
+var RightPanel = (0, import_react24.memo)(function RightPanel2({
+  mode,
+  onModeChange,
+  snapshots,
+  selectedIndex,
+  runtimeSnapshot,
+  activeTab,
+  allTabs,
+  activeNarrativeEntries,
+  activeNarrative,
+  recorderViews,
+  autoRecorderViews,
+  size,
+  onNavigateToStage
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: {
+      display: "flex",
+      borderBottom: `1px solid ${theme.border}`,
+      flexShrink: 0,
+      background: theme.bgSecondary
+    }, children: ["insights", "what"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        onClick: () => onModeChange(m),
+        style: {
+          flex: 1,
+          padding: "7px 12px",
+          fontSize: 11,
+          fontWeight: mode === m ? 700 : 500,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em",
+          color: mode === m ? theme.primary : theme.textMuted,
+          background: "transparent",
+          border: "none",
+          borderBottom: mode === m ? `2px solid ${theme.primary}` : "2px solid transparent",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        },
+        children: m === "insights" ? "Insights" : "Inspector"
+      },
+      m
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: mode === "insights" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      InsightPanel,
+      {
+        mode: "tabs",
+        expandedId: activeTab,
+        insights: allTabs.filter((t) => t.id !== "result" && t.id !== "memory").map((tab) => ({
+          id: tab.id,
+          name: insightName(tab.name),
+          render: () => {
+            if (tab.id === "narrative") return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NarrativePanel, { snapshots, selectedIndex, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, size, style: { height: "100%" } });
+            const customView = recorderViews?.find((v2) => v2.id === tab.id);
+            if (customView?.render) return customView.render({ snapshots, selectedIndex });
+            const autoView = autoRecorderViews.find((v2) => v2.id === tab.id);
+            if (autoView) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(KeyedRecorderView, { data: autoView.data, description: autoView.description, preferredOperation: autoView.preferredOperation, snapshots, selectedIndex });
+            return null;
+          }
+        }))
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      InspectorPanel,
+      {
+        snapshots,
+        selectedIndex,
+        dataTraceFrames: runtimeSnapshot?.commitLog ? buildDataTrace(runtimeSnapshot.commitLog, snapshots[selectedIndex]?.runtimeStageId ?? "") : [],
+        selectedStageId: snapshots[selectedIndex]?.runtimeStageId,
+        onNavigateToStage
+      }
+    ) })
+  ] });
+});
+function insightName(name) {
+  const map = {
+    "Narrative": "Story",
+    "Memory": "State",
+    "Metrics": "Performance",
+    "Quality": "Quality",
+    "Cost": "Cost"
+  };
+  return map[name] ?? name;
+}
 function defaultRenderFlowchart({ spec: s, snapshots: snaps, selectedIndex, onNodeClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     TracedFlowchartView,
     {
       spec: s,
@@ -4369,7 +4988,7 @@ function ExplainableShell({
   className,
   style
 }) {
-  const derivedFromRuntime = (0, import_react20.useMemo)(() => {
+  const derivedFromRuntime = (0, import_react24.useMemo)(() => {
     if (!runtimeSnapshot) return null;
     try {
       const snaps = toVisualizationSnapshots(runtimeSnapshot, narrativeEntries);
@@ -4390,26 +5009,29 @@ function ExplainableShell({
   const leftLabel = panelLabels?.topology ?? "Topology";
   const rightLabel = panelLabels?.details ?? "Details";
   const bottomLabel = panelLabels?.timeline ?? "Timeline";
-  const shellRef = (0, import_react20.useRef)(null);
-  const [isNarrow, setIsNarrow] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const shellRef = (0, import_react24.useRef)(null);
+  const [isNarrow, setIsNarrow] = (0, import_react24.useState)(false);
+  const [isMedium, setIsMedium] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     const el = shellRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
-      setIsNarrow(entry.contentRect.width < 640);
+      const w = entry.contentRect.width;
+      setIsNarrow(w < 640);
+      setIsMedium(w >= 640 && w < 960);
       window.dispatchEvent(new Event("resize"));
     });
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const autoRecorderViews = (0, import_react20.useMemo)(() => {
+  const autoRecorderViews = (0, import_react24.useMemo)(() => {
     const recorders = runtimeSnapshot?.recorders;
     if (!recorders?.length) return [];
     const explicitIds = new Set((recorderViews ?? []).map((v2) => v2.id));
     return recorders.filter((r) => !explicitIds.has(r.id)).map((r) => ({ id: r.id, name: r.name, description: r.description, preferredOperation: r.preferredOperation, data: r.data }));
   }, [runtimeSnapshot, recorderViews]);
   const hasNarrative = !!(narrative?.length || narrativeEntries?.length);
-  const allTabs = (0, import_react20.useMemo)(() => {
+  const allTabs = (0, import_react24.useMemo)(() => {
     const tabs2 = [
       { id: "result", name: "Result", description: "Final output and console logs" },
       { id: "memory", name: "Memory", description: "Accumulator \u2014 progressive shared state at each stage" }
@@ -4428,37 +5050,38 @@ function ExplainableShell({
   }, [hasNarrative, recorderViews, autoRecorderViews, hideTabsProp]);
   const validTabIds = new Set(allTabs.map((t) => t.id));
   const resolvedDefault = defaultTab && validTabIds.has(defaultTab) ? defaultTab : allTabs[0]?.id ?? "result";
-  const [activeTab, setActiveTab] = (0, import_react20.useState)(resolvedDefault);
-  const [snapshotIdx, setSnapshotIdx] = (0, import_react20.useState)(0);
-  const [drillDownStack, setDrillDownStack] = (0, import_react20.useState)([]);
-  const [rightExpanded, setRightExpanded] = (0, import_react20.useState)(defaultExpanded?.details ?? true);
-  const [leftExpanded, setLeftExpanded] = (0, import_react20.useState)(defaultExpanded?.topology ?? false);
-  const [timelineExpanded, setTimelineExpanded] = (0, import_react20.useState)(defaultExpanded?.timeline ?? false);
-  (0, import_react20.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react24.useState)(resolvedDefault);
+  const [snapshotIdx, setSnapshotIdx] = (0, import_react24.useState)(0);
+  const [drillDownStack, setDrillDownStack] = (0, import_react24.useState)([]);
+  const [rightExpanded, setRightExpanded] = (0, import_react24.useState)(defaultExpanded?.details ?? true);
+  const [rightPanelMode, setRightPanelMode] = (0, import_react24.useState)("insights");
+  const [leftExpanded, setLeftExpanded] = (0, import_react24.useState)(defaultExpanded?.topology ?? false);
+  const [timelineExpanded, setTimelineExpanded] = (0, import_react24.useState)(defaultExpanded?.timeline ?? false);
+  (0, import_react24.useEffect)(() => {
     if (isNarrow) {
       setLeftExpanded(false);
       setRightExpanded(false);
       setTimelineExpanded(false);
     }
   }, [isNarrow]);
-  const triggerReflow = (0, import_react20.useCallback)(() => {
+  const triggerReflow = (0, import_react24.useCallback)(() => {
     requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
     setTimeout(() => window.dispatchEvent(new Event("resize")), 320);
   }, []);
-  const toggleLeft = (0, import_react20.useCallback)((v2) => {
+  const toggleLeft = (0, import_react24.useCallback)((v2) => {
     setLeftExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleRight = (0, import_react20.useCallback)((v2) => {
+  const toggleRight = (0, import_react24.useCallback)((v2) => {
     setRightExpanded(v2);
     triggerReflow();
   }, [triggerReflow]);
-  const toggleTimeline = (0, import_react20.useCallback)(() => {
+  const toggleTimeline = (0, import_react24.useCallback)(() => {
     setTimelineExpanded((p) => !p);
     triggerReflow();
   }, [triggerReflow]);
   const isInSubflow = drillDownStack.length > 0;
-  const currentLevel = (0, import_react20.useMemo)(() => {
+  const currentLevel = (0, import_react24.useMemo)(() => {
     if (drillDownStack.length > 0) {
       const top = drillDownStack[drillDownStack.length - 1];
       return { spec: top.spec, snapshots: top.snapshots };
@@ -4468,7 +5091,7 @@ function ExplainableShell({
   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_react20.useMemo)(() => {
+  const activeNarrative = (0, import_react24.useMemo)(() => {
     if (!isInSubflow) return narrative;
     const lines = [];
     for (const snap of activeSnapshots) {
@@ -4478,25 +5101,25 @@ function ExplainableShell({
     return lines.length > 0 ? lines : void 0;
   }, [isInSubflow, narrative, activeSnapshots]);
   const activeNarrativeEntries = isInSubflow ? void 0 : narrativeEntries;
-  const breadcrumbs = (0, import_react20.useMemo)(() => {
+  const breadcrumbs = (0, import_react24.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_react20.useMemo)(() => !!spec && hasSubflowNodes(spec), [spec]);
-  const rootOverlay = (0, import_react20.useMemo)(() => {
+  const showTreeSidebar = (0, import_react24.useMemo)(() => !!spec && hasSubflowNodes(spec), [spec]);
+  const rootOverlay = (0, import_react24.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_react20.useCallback)((tab) => {
+  const handleTabChange = (0, import_react24.useCallback)((tab) => {
     setActiveTab(tab);
     setDrillDownStack([]);
   }, []);
-  const handleSnapshotChange = (0, import_react20.useCallback)((idx) => {
+  const handleSnapshotChange = (0, import_react24.useCallback)((idx) => {
     if (typeof idx === "number") setSnapshotIdx(idx);
   }, []);
-  const handleDrillDown = (0, import_react20.useCallback)(
+  const handleDrillDown = (0, import_react24.useCallback)(
     (nodeName) => {
       if (!activeSpec) return;
       const entry = resolveSubflowLevel(activeSpec, activeSnapshots, nodeName, narrativeEntries);
@@ -4507,14 +5130,14 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, narrativeEntries, snapshotIdx]
   );
-  const handleBreadcrumbNavigate = (0, import_react20.useCallback)((level) => {
+  const handleBreadcrumbNavigate = (0, import_react24.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_react20.useCallback)(
+  const handleNodeClick = (0, import_react24.useCallback)(
     (indexOrId) => {
       if (typeof indexOrId === "number") {
         setSnapshotIdx(indexOrId);
@@ -4532,7 +5155,7 @@ function ExplainableShell({
     },
     [activeSpec, activeSnapshots, handleDrillDown]
   );
-  const handleTreeNodeSelect = (0, import_react20.useCallback)(
+  const handleTreeNodeSelect = (0, import_react24.useCallback)(
     (name, isSubflow) => {
       if (isSubflow && spec) {
         setDrillDownStack([]);
@@ -4551,31 +5174,31 @@ function ExplainableShell({
   );
   const tabLabels = new Map(allTabs.map((t) => [t.id, t.name]));
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
-        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
-        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
-          isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
+        (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TimeTravelControls, { snapshots: activeSnapshots, selectedIndex: safeIdx, onIndexChange: handleSnapshotChange, unstyled: true }),
+          isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
           activeSpec && effectiveRenderFlowchart?.({ spec: activeSpec, snapshots: activeSnapshots, selectedIndex: safeIdx, onNodeClick: handleNodeClick }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, unstyled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, unstyled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, unstyled: true })
         ] })
       ] })
     ] });
   }
   const showTopology = !!effectiveRenderFlowchart && !!activeSpec;
-  const detailsContent = (0, import_react20.useMemo)(() => {
+  const detailsContent = (0, import_react24.useMemo)(() => {
     if (activeTab === "result") {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, size });
     }
     if (activeTab === "memory") {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MemoryPanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, size, style: { height: "100%" } });
     }
     if (activeTab === "narrative") {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, size, style: { height: "100%" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NarrativePanel, { snapshots: activeSnapshots, selectedIndex: safeIdx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, size, style: { height: "100%" } });
     }
     const customView = recorderViews?.find((v2) => v2.id === activeTab);
     if (customView?.render) {
@@ -4583,7 +5206,7 @@ function ExplainableShell({
     }
     const autoView = autoRecorderViews.find((v2) => v2.id === activeTab);
     if (autoView) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         KeyedRecorderView,
         {
           data: autoView.data,
@@ -4596,8 +5219,8 @@ function ExplainableShell({
     }
     return null;
   }, [activeTab, resultData, logs, hideConsole, size, activeSnapshots, safeIdx, activeNarrativeEntries, activeNarrative, recorderViews, autoRecorderViews]);
-  const detailsPanel = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: {
+  const detailsPanel = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: {
       display: "flex",
       borderBottom: `1px solid ${theme.border}`,
       background: theme.bgSecondary,
@@ -4605,7 +5228,7 @@ function ExplainableShell({
       overflowX: "auto"
     }, children: allTabs.map((tab) => {
       const active = tab.id === activeTab;
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           onClick: () => handleTabChange(tab.id),
@@ -4629,9 +5252,9 @@ function ExplainableShell({
         tab.id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: shellRef,
@@ -4649,7 +5272,7 @@ function ExplainableShell({
       },
       "data-fp": "explainable-shell",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           TimeTravelControls,
           {
             snapshots: activeSnapshots,
@@ -4658,19 +5281,19 @@ function ExplainableShell({
             size
           }
         ),
-        isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
+        isInSubflow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SubflowBreadcrumb, { breadcrumbs, onNavigate: handleBreadcrumbNavigate }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: isNarrow ? (
           /* ── Mobile: stacked vertical ── */
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-            showTopology && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            showTopology && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { height: 350, flexShrink: 0, overflow: "hidden" }, children: effectiveRenderFlowchart({
               spec: activeSpec,
               snapshots: activeSnapshots,
               selectedIndex: safeIdx,
               onNodeClick: handleNodeClick
             }) }),
-            showTreeSidebar && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
-              leftExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            showTreeSidebar && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HLinePill, { label: leftLabel, expanded: leftExpanded, onClick: () => toggleLeft(!leftExpanded) }),
+              leftExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { maxHeight: 180, overflow: "auto", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 SubflowTree,
                 {
                   spec,
@@ -4680,17 +5303,17 @@ function ExplainableShell({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-            rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
-            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+            rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { maxHeight: 350, flexShrink: 0, overflow: "hidden" }, children: detailsPanel }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
+            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
           ] })
-        ) : showTopology ? (
-          /* ── Desktop with topology: side-by-side ── */
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { width: 220, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ) : (
+          /* ── Desktop: two-column — Flowchart | Right Panel ── */
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              showTreeSidebar && (leftExpanded ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { width: 180, flexShrink: 0, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   SubflowTree,
                   {
                     spec,
@@ -4699,28 +5322,45 @@ function ExplainableShell({
                     onNodeSelect: handleTreeNodeSelect
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: leftLabel, expanded: true, side: "left", onClick: () => toggleLeft(false) })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: leftLabel, expanded: false, side: "left", onClick: () => toggleLeft(true) })),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VLinePill, { label: "Topology", expanded: true, side: "left", onClick: () => toggleLeft(false) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VLinePill, { label: "Topology", expanded: false, side: "left", onClick: () => toggleLeft(true) })),
+              showTopology ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "hidden", minWidth: 0 }, children: effectiveRenderFlowchart({
                 spec: activeSpec,
                 snapshots: activeSnapshots,
                 selectedIndex: safeIdx,
                 onNodeClick: handleNodeClick
-              }) }),
-              rightExpanded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { width: "38%", minWidth: 300, maxWidth: 500, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: rightLabel, expanded: true, onClick: () => toggleRight(false) }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: detailsPanel })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: rightLabel, expanded: false, onClick: () => toggleRight(true) })
+              }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VLinePill, { label: "Details", expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
+              rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { width: "42%", minWidth: 320, maxWidth: 550, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                RightPanel,
+                {
+                  mode: rightPanelMode,
+                  onModeChange: setRightPanelMode,
+                  snapshots: activeSnapshots,
+                  selectedIndex: safeIdx,
+                  runtimeSnapshot,
+                  activeTab,
+                  allTabs,
+                  activeNarrativeEntries,
+                  activeNarrative,
+                  recorderViews,
+                  autoRecorderViews,
+                  size,
+                  onNavigateToStage: (id) => {
+                    const idx = activeSnapshots.findIndex((s) => s.runtimeStageId === id);
+                    if (idx >= 0) setSnapshotIdx(idx);
+                  }
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
-            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
-          ] })
-        ) : (
-          /* ── Desktop without topology: details panel takes full width ── */
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: detailsPanel }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
-            timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              CompactTimeline,
+              {
+                snapshots: activeSnapshots,
+                selectedIndex: safeIdx,
+                defaultExpanded: timelineExpanded
+              }
+            )
           ] })
         ) })
       ]
@@ -4729,9 +5369,13 @@ function ExplainableShell({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CompactTimeline,
+  DataTracePanel,
   ExplainableShell,
   FootprintTheme,
   GanttTimeline,
+  InsightPanel,
+  InspectorPanel,
   MemoryInspector,
   MemoryPanel,
   NarrativeLog,