footprint-explainable-ui 0.3.0

package/dist/index.js

@@ -0,0 +1,1901 @@
+// src/theme/ThemeProvider.tsx
+import { createContext, useContext } from "react";
+
+// src/theme/tokens.ts
+function tokensToCSSVars(tokens) {
+  const vars = {};
+  if (tokens.colors) {
+    const c = tokens.colors;
+    if (c.primary) vars["--fp-color-primary"] = c.primary;
+    if (c.success) vars["--fp-color-success"] = c.success;
+    if (c.error) vars["--fp-color-error"] = c.error;
+    if (c.warning) vars["--fp-color-warning"] = c.warning;
+    if (c.bgPrimary) vars["--fp-bg-primary"] = c.bgPrimary;
+    if (c.bgSecondary) vars["--fp-bg-secondary"] = c.bgSecondary;
+    if (c.bgTertiary) vars["--fp-bg-tertiary"] = c.bgTertiary;
+    if (c.textPrimary) vars["--fp-text-primary"] = c.textPrimary;
+    if (c.textSecondary) vars["--fp-text-secondary"] = c.textSecondary;
+    if (c.textMuted) vars["--fp-text-muted"] = c.textMuted;
+    if (c.border) vars["--fp-border"] = c.border;
+  }
+  if (tokens.radius) vars["--fp-radius"] = tokens.radius;
+  if (tokens.fontFamily?.sans) vars["--fp-font-sans"] = tokens.fontFamily.sans;
+  if (tokens.fontFamily?.mono) vars["--fp-font-mono"] = tokens.fontFamily.mono;
+  return vars;
+}
+var defaultTokens = {
+  colors: {
+    primary: "#6366f1",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    bgPrimary: "#0f172a",
+    bgSecondary: "#1e293b",
+    bgTertiary: "#334155",
+    textPrimary: "#f8fafc",
+    textSecondary: "#94a3b8",
+    textMuted: "#64748b",
+    border: "#334155"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext({});
+function useFootprintTheme() {
+  return useContext(ThemeContext);
+}
+function FootprintTheme({ tokens = {}, children }) {
+  const cssVars = tokensToCSSVars(tokens);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: tokens, children: /* @__PURE__ */ jsx("div", { style: cssVars, className: "fp-theme-root", children }) });
+}
+
+// src/theme/styles.ts
+function v(varName, fallback) {
+  return `var(${varName}, ${fallback})`;
+}
+var theme = {
+  primary: v("--fp-color-primary", "#6366f1"),
+  success: v("--fp-color-success", "#22c55e"),
+  error: v("--fp-color-error", "#ef4444"),
+  warning: v("--fp-color-warning", "#f59e0b"),
+  bgPrimary: v("--fp-bg-primary", "#0f172a"),
+  bgSecondary: v("--fp-bg-secondary", "#1e293b"),
+  bgTertiary: v("--fp-bg-tertiary", "#334155"),
+  textPrimary: v("--fp-text-primary", "#f8fafc"),
+  textSecondary: v("--fp-text-secondary", "#94a3b8"),
+  textMuted: v("--fp-text-muted", "#64748b"),
+  border: v("--fp-border", "#334155"),
+  radius: v("--fp-radius", "8px"),
+  fontSans: v("--fp-font-sans", "Inter, system-ui, -apple-system, sans-serif"),
+  fontMono: v("--fp-font-mono", "'JetBrains Mono', 'Fira Code', monospace")
+};
+var fontSize = {
+  compact: { label: 10, body: 11, small: 9 },
+  default: { label: 11, body: 12, small: 10 },
+  detailed: { label: 12, body: 13, small: 11 }
+};
+var padding = {
+  compact: 8,
+  default: 12,
+  detailed: 16
+};
+
+// src/theme/presets.ts
+var coolDark = {
+  colors: {
+    primary: "#6366f1",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    bgPrimary: "#0f172a",
+    bgSecondary: "#1e293b",
+    bgTertiary: "#334155",
+    textPrimary: "#f8fafc",
+    textSecondary: "#94a3b8",
+    textMuted: "#64748b",
+    border: "#334155"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
+var warmDark = {
+  colors: {
+    primary: "#7c6cf0",
+    success: "#3dd68c",
+    error: "#f06292",
+    warning: "#ffb74d",
+    bgPrimary: "#1e1a2e",
+    bgSecondary: "#2a2540",
+    bgTertiary: "#3a3455",
+    textPrimary: "#f0e6d6",
+    textSecondary: "#a89eb4",
+    textMuted: "#6e6480",
+    border: "#3a3455"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
+var warmLight = {
+  colors: {
+    primary: "#7c6cf0",
+    success: "#22a860",
+    error: "#d94452",
+    warning: "#e09030",
+    bgPrimary: "#faf5ef",
+    bgSecondary: "#f0e6d6",
+    bgTertiary: "#e4d5c3",
+    textPrimary: "#2e2938",
+    textSecondary: "#5c5468",
+    textMuted: "#8a7e96",
+    border: "#d6c8b4"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
+var themePresets = {
+  coolDark,
+  warmDark,
+  warmLight
+};
+
+// src/components/MemoryInspector/MemoryInspector.tsx
+import { useMemo } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MemoryInspector({
+  data,
+  snapshots,
+  selectedIndex = 0,
+  showTypes = false,
+  highlightNew = true,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const { memory, newKeys } = useMemo(() => {
+    if (data) {
+      return { memory: data, newKeys: /* @__PURE__ */ new Set() };
+    }
+    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 nk = /* @__PURE__ */ new Set();
+    if (highlightNew && selectedIndex > 0) {
+      const prev = {};
+      for (let i = 0; i < selectedIndex; i++) {
+        Object.assign(prev, snapshots[i]?.memory);
+      }
+      const current = snapshots[selectedIndex]?.memory ?? {};
+      for (const k of Object.keys(current)) {
+        if (!(k in prev)) nk.add(k);
+      }
+    } else if (highlightNew && selectedIndex === 0 && snapshots[0]) {
+      for (const k of Object.keys(snapshots[0].memory)) nk.add(k);
+    }
+    return { memory: merged, newKeys: nk };
+  }, [data, snapshots, selectedIndex, highlightNew]);
+  const entries = Object.entries(memory);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ jsx2("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ jsx2("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        padding: pad,
+        fontFamily: theme.fontSans,
+        ...style
+      },
+      "data-fp": "memory-inspector",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: "Memory State"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              background: theme.bgSecondary,
+              border: `1px solid ${theme.border}`,
+              borderRadius: theme.radius,
+              padding: `${pad}px ${pad + 4}px`,
+              fontFamily: theme.fontMono,
+              fontSize: fs.body,
+              lineHeight: 1.8
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    paddingLeft: 16,
+                    color: theme.textMuted,
+                    fontStyle: "italic"
+                  },
+                  children: "// empty"
+                }
+              ),
+              entries.map(([key, value], i) => {
+                const isNew = newKeys.has(key);
+                const isLast = i === entries.length - 1;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      paddingLeft: 16,
+                      background: isNew ? `color-mix(in srgb, ${theme.success} 10%, transparent)` : "transparent",
+                      borderRadius: 4,
+                      marginLeft: -4,
+                      marginRight: -4,
+                      paddingRight: 4
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { style: { color: theme.primary }, children: [
+                        '"',
+                        key,
+                        '"'
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ jsx2("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            color: theme.textMuted,
+                            fontSize: fs.small,
+                            marginLeft: 8,
+                            opacity: 0.6
+                          },
+                          children: [
+                            "(",
+                            typeof value,
+                            ")"
+                          ]
+                        }
+                      ),
+                      !isLast && /* @__PURE__ */ jsx2("span", { style: { color: theme.textMuted }, children: "," })
+                    ]
+                  },
+                  key
+                );
+              }),
+              /* @__PURE__ */ jsx2("span", { style: { color: theme.textMuted }, children: "}" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function formatValue(value) {
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object" && value !== null) return JSON.stringify(value);
+  return String(value);
+}
+
+// src/components/NarrativeLog/NarrativeLog.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function NarrativeLog({
+  snapshots,
+  selectedIndex,
+  narrative,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const entries = useMemo2(() => {
+    if (narrative) {
+      return [{ label: "Output", text: narrative, isCurrent: true }];
+    }
+    const idx = selectedIndex ?? snapshots.length - 1;
+    return snapshots.slice(0, idx + 1).map((s, i) => ({
+      label: s.stageLabel,
+      text: s.narrative,
+      isCurrent: i === idx
+    }));
+  }, [snapshots, selectedIndex, narrative]);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsx3("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ jsxs2("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ jsx3("strong", { children: entry.label }),
+      /* @__PURE__ */ jsx3("p", { children: entry.text })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: { padding: pad, fontFamily: theme.fontSans, ...style },
+      "data-fp": "narrative-log",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: "Execution Log"
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 10,
+              padding: `${pad}px 0`,
+              borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: 12,
+                    flexShrink: 0,
+                    paddingTop: 5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          background: entry.isCurrent ? theme.primary : theme.success,
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    i < entries.length - 1 && /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        style: {
+                          width: 1,
+                          flex: 1,
+                          background: theme.border,
+                          marginTop: 4
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      fontSize: fs.label,
+                      fontWeight: 600,
+                      color: entry.isCurrent ? theme.primary : theme.textMuted
+                    },
+                    children: entry.label
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      fontSize: fs.body,
+                      lineHeight: 1.5,
+                      color: entry.isCurrent ? theme.textPrimary : theme.textSecondary,
+                      marginTop: 2
+                    },
+                    children: entry.text
+                  }
+                )
+              ] })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/NarrativeTrace/NarrativeTrace.tsx
+import { useState, useCallback, useMemo as useMemo3, useEffect, useRef } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function parseGroups(lines) {
+  const groups = [];
+  let current = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trimStart();
+    const isStep = trimmed.startsWith("Step ") || /^\s/.test(line);
+    if (!isStep || !current) {
+      current = { header: line, headerIdx: i, steps: [] };
+      groups.push(current);
+    } else {
+      current.steps.push({ text: trimmed, idx: i });
+    }
+  }
+  return groups;
+}
+function NarrativeTrace({
+  narrative,
+  revealedCount,
+  defaultCollapsed = false,
+  onStageClick,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const revealed = revealedCount != null ? narrative.slice(0, revealedCount) : narrative;
+  const future = revealedCount != null ? narrative.slice(revealedCount) : [];
+  const revealedGroups = useMemo3(() => parseGroups(revealed), [revealed]);
+  const futureGroups = useMemo3(() => parseGroups(future), [future]);
+  const [collapsedSet, setCollapsedSet] = useState(() => {
+    if (!defaultCollapsed) return /* @__PURE__ */ new Set();
+    return new Set(parseGroups(narrative).map((g) => g.headerIdx));
+  });
+  const latestRef = useRef(null);
+  useEffect(() => {
+    latestRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [revealedGroups.length]);
+  const toggle = useCallback((idx) => {
+    setCollapsedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  }, []);
+  const lastIdx = revealedGroups.length - 1;
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs3("div", { className, style, "data-fp": "narrative-trace", children: [
+      revealedGroups.map((group, gi) => /* @__PURE__ */ jsxs3("div", { "data-fp": "narrative-group", "data-latest": gi === lastIdx, children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-fp": "narrative-header",
+            "data-collapsible": group.steps.length > 0,
+            "data-collapsed": collapsedSet.has(group.headerIdx),
+            onClick: () => {
+              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}`))
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: {
+        flex: 1,
+        overflow: "auto",
+        padding: pad,
+        fontFamily: theme.fontMono,
+        ...style
+      },
+      "data-fp": "narrative-trace",
+      children: [
+        revealedGroups.map((group, gi) => {
+          const isLatest = gi === lastIdx;
+          const isCollapsed = collapsedSet.has(group.headerIdx);
+          const hasSteps = group.steps.length > 0;
+          return /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              ref: isLatest ? latestRef : void 0,
+              style: { marginBottom: 2 },
+              "data-fp": "narrative-group",
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    onClick: () => {
+                      if (hasSteps) toggle(group.headerIdx);
+                      onStageClick?.(group.headerIdx);
+                    },
+                    style: {
+                      fontSize: fs.body,
+                      lineHeight: 1.7,
+                      color: isLatest ? theme.textPrimary : theme.textSecondary,
+                      padding: `4px ${pad - 4}px`,
+                      borderRadius: 4,
+                      background: isLatest ? theme.bgTertiary : "transparent",
+                      borderLeft: isLatest ? `3px solid ${theme.primary}` : `3px solid ${theme.success}`,
+                      cursor: hasSteps ? "pointer" : "default",
+                      fontWeight: 600,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      userSelect: "none",
+                      transition: "all 0.15s ease"
+                    },
+                    children: [
+                      hasSteps && /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          style: {
+                            fontSize: fs.small - 1,
+                            color: theme.textMuted,
+                            transition: "transform 0.15s ease",
+                            transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
+                            display: "inline-block",
+                            width: 10,
+                            flexShrink: 0
+                          },
+                          children: "\u25BC"
+                        }
+                      ),
+                      !hasSteps && /* @__PURE__ */ jsx4("span", { style: { width: 10, flexShrink: 0 } }),
+                      /* @__PURE__ */ jsx4("span", { children: group.header })
+                    ]
+                  }
+                ),
+                !isCollapsed && group.steps.map((step) => /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      fontSize: fs.small,
+                      lineHeight: 1.6,
+                      color: isLatest ? theme.textSecondary : theme.textMuted,
+                      padding: `2px ${pad - 4}px 2px ${pad + 20}px`,
+                      opacity: isLatest ? 0.9 : 0.7,
+                      transition: "all 0.15s ease"
+                    },
+                    "data-fp": "narrative-step",
+                    children: step.text
+                  },
+                  step.idx
+                ))
+              ]
+            },
+            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}`)) })
+      ]
+    }
+  );
+}
+
+// src/components/GanttTimeline/GanttTimeline.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function GanttTimeline({
+  snapshots,
+  selectedIndex = 0,
+  onSelect,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const totalWallTime = useMemo4(
+    () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
+    [snapshots]
+  );
+  const fs = fontSize[size];
+  const pad = padding[size];
+  const labelWidth = size === "compact" ? 50 : size === "detailed" ? 100 : 80;
+  const msWidth = size === "compact" ? 28 : 36;
+  if (unstyled) {
+    return /* @__PURE__ */ jsx5("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-fp": "gantt-bar",
+        "data-selected": idx === selectedIndex,
+        "data-visible": idx <= selectedIndex,
+        onClick: () => onSelect?.(idx),
+        children: [
+          /* @__PURE__ */ jsx5("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ jsxs4("span", { "data-fp": "gantt-duration", children: [
+            snap.durationMs,
+            "ms"
+          ] })
+        ]
+      },
+      snap.stageName
+    )) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: { padding: pad, fontFamily: theme.fontSans, ...style },
+      "data-fp": "gantt-timeline",
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: size === "compact" ? "Timeline" : "Execution Timeline"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: snapshots.map((snap, idx) => {
+              const leftPct = snap.startMs / totalWallTime * 100;
+              const widthPct = Math.max(snap.durationMs / totalWallTime * 100, 1);
+              const isSelected = idx === selectedIndex;
+              const isVisible = idx <= selectedIndex;
+              return /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  onClick: () => onSelect?.(idx),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: size === "compact" ? 4 : 8,
+                    cursor: onSelect ? "pointer" : "default",
+                    opacity: isVisible ? 1 : 0.3,
+                    transition: "opacity 0.3s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "span",
+                      {
+                        style: {
+                          width: labelWidth,
+                          fontSize: fs.small,
+                          color: isSelected ? theme.primary : theme.textMuted,
+                          fontWeight: isSelected ? 600 : 400,
+                          textAlign: "right",
+                          flexShrink: 0,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: snap.stageLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: size === "compact" ? 6 : 8,
+                          position: "relative",
+                          background: theme.bgTertiary,
+                          borderRadius: 3
+                        },
+                        children: isVisible && /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              left: `${leftPct}%`,
+                              top: 0,
+                              width: `${widthPct}%`,
+                              height: "100%",
+                              borderRadius: 3,
+                              background: isSelected ? theme.primary : theme.success,
+                              transition: "width 0.3s ease"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.small,
+                          color: theme.textMuted,
+                          fontFamily: theme.fontMono,
+                          width: msWidth,
+                          flexShrink: 0
+                        },
+                        children: [
+                          snap.durationMs,
+                          "ms"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                snap.stageName
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              marginTop: 4,
+              marginLeft: labelWidth + (size === "compact" ? 4 : 8),
+              marginRight: msWidth + (size === "compact" ? 4 : 8),
+              display: "flex",
+              justifyContent: "space-between",
+              fontSize: fs.small - 1,
+              color: theme.textMuted,
+              fontFamily: theme.fontMono
+            },
+            children: [
+              /* @__PURE__ */ jsx5("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ jsxs4("span", { children: [
+                (totalWallTime / 2).toFixed(1),
+                "ms"
+              ] }),
+              /* @__PURE__ */ jsxs4("span", { children: [
+                totalWallTime.toFixed(1),
+                "ms"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/SnapshotPanel/SnapshotPanel.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function SnapshotPanel({
+  snapshots,
+  showGantt = true,
+  showScrubber = true,
+  title = "Pipeline Inspector",
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (snapshots.length === 0) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className,
+        style: {
+          padding: pad * 2,
+          textAlign: "center",
+          color: unstyled ? void 0 : theme.textMuted,
+          fontSize: fs.body,
+          ...style
+        },
+        "data-fp": "snapshot-panel",
+        children: "No snapshots to display"
+      }
+    );
+  }
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs5("div", { className, style, "data-fp": "snapshot-panel", children: [
+      /* @__PURE__ */ jsx6("h3", { children: title }),
+      showScrubber && /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: snapshots.length - 1,
+          value: selectedIndex,
+          onChange: (e) => setSelectedIndex(parseInt(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MemoryInspector,
+        {
+          snapshots,
+          selectedIndex,
+          unstyled: true
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        NarrativeLog,
+        {
+          snapshots,
+          selectedIndex,
+          unstyled: true
+        }
+      ),
+      showGantt && /* @__PURE__ */ jsx6(
+        GanttTimeline,
+        {
+          snapshots,
+          selectedIndex,
+          onSelect: setSelectedIndex,
+          unstyled: true
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: theme.bgPrimary,
+        fontFamily: theme.fontSans,
+        overflow: "hidden",
+        ...style
+      },
+      "data-fp": "snapshot-panel",
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              padding: `${pad}px ${pad + 4}px`,
+              borderBottom: `1px solid ${theme.border}`,
+              background: theme.bgSecondary,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: showScrubber ? 8 : 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.body + 2,
+                          fontWeight: 600,
+                          color: theme.textPrimary
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.small,
+                          color: theme.textMuted,
+                          fontFamily: theme.fontMono
+                        },
+                        children: [
+                          selectedIndex + 1,
+                          "/",
+                          snapshots.length
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              showScrubber && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx6(
+                  ScrubButton,
+                  {
+                    label: "\\u25C0",
+                    disabled: selectedIndex === 0,
+                    onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: snapshots.length - 1,
+                    value: selectedIndex,
+                    onChange: (e) => setSelectedIndex(parseInt(e.target.value)),
+                    style: {
+                      flex: 1,
+                      height: 4,
+                      accentColor: theme.primary,
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  ScrubButton,
+                  {
+                    label: "\\u25B6",
+                    disabled: selectedIndex === snapshots.length - 1,
+                    onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { style: { flex: 1, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx6(
+            MemoryInspector,
+            {
+              snapshots,
+              selectedIndex,
+              size
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                height: 1,
+                background: theme.border,
+                margin: `0 ${pad}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            NarrativeLog,
+            {
+              snapshots,
+              selectedIndex,
+              size
+            }
+          )
+        ] }),
+        showGantt && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              borderTop: `1px solid ${theme.border}`,
+              background: theme.bgSecondary,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx6(
+              GanttTimeline,
+              {
+                snapshots,
+                selectedIndex,
+                onSelect: setSelectedIndex,
+                size
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ScrubButton({
+  label,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      onClick,
+      disabled,
+      style: {
+        background: theme.bgTertiary,
+        border: `1px solid ${theme.border}`,
+        color: disabled ? theme.textMuted : theme.textPrimary,
+        borderRadius: 6,
+        width: 28,
+        height: 28,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        fontSize: 12,
+        flexShrink: 0
+      },
+      children: label
+    }
+  );
+}
+
+// src/components/ScopeDiff/ScopeDiff.tsx
+import { useMemo as useMemo5 } from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function computeDiff(prev, curr) {
+  const entries = [];
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev ?? {}), ...Object.keys(curr)]);
+  for (const key of allKeys) {
+    const inPrev = prev != null && key in prev;
+    const inCurr = key in curr;
+    const oldVal = prev?.[key];
+    const newVal = curr[key];
+    if (!inPrev && inCurr) {
+      entries.push({ key, type: "added", newValue: newVal });
+    } else if (inPrev && !inCurr) {
+      entries.push({ key, type: "removed", oldValue: oldVal });
+    } else if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+      entries.push({ key, type: "changed", oldValue: oldVal, newValue: newVal });
+    } else {
+      entries.push({ key, type: "unchanged", newValue: newVal });
+    }
+  }
+  const order = { added: 0, changed: 1, removed: 2, unchanged: 3 };
+  entries.sort((a, b) => order[a.type] - order[b.type]);
+  return entries;
+}
+function fmt(v2) {
+  if (typeof v2 === "string") return `"${v2}"`;
+  if (typeof v2 === "object" && v2 !== null) return JSON.stringify(v2, null, 2);
+  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: "~" },
+  unchanged: { bg: "transparent", fg: "", icon: " " }
+};
+function ScopeDiff({
+  previous,
+  current,
+  hideUnchanged = false,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const entries = useMemo5(() => computeDiff(previous, current), [previous, current]);
+  const visible = hideUnchanged ? entries.filter((e) => e.type !== "unchanged") : entries;
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsx7("div", { className, style, "data-fp": "scope-diff", children: visible.map((e) => /* @__PURE__ */ jsxs6("div", { "data-fp": "diff-entry", "data-type": e.type, children: [
+      /* @__PURE__ */ jsx7("span", { "data-fp": "diff-key", children: e.key }),
+      e.type === "changed" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx7("span", { "data-fp": "diff-old", children: fmt(e.oldValue) }),
+        /* @__PURE__ */ jsx7("span", { "data-fp": "diff-new", children: fmt(e.newValue) })
+      ] }),
+      (e.type === "added" || e.type === "unchanged") && /* @__PURE__ */ jsx7("span", { "data-fp": "diff-value", children: fmt(e.newValue) }),
+      e.type === "removed" && /* @__PURE__ */ jsx7("span", { "data-fp": "diff-value", children: fmt(e.oldValue) })
+    ] }, e.key)) });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className,
+      style: { padding: pad, fontFamily: theme.fontMono, ...style },
+      "data-fp": "scope-diff",
+      children: [
+        visible.length === 0 && /* @__PURE__ */ jsx7("div", { style: { fontSize: fs.body, color: theme.textMuted, fontStyle: "italic" }, children: "No changes" }),
+        visible.map((entry) => {
+          const dc = diffColors[entry.type];
+          return /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 8,
+                padding: `4px ${pad - 4}px`,
+                marginBottom: 2,
+                borderRadius: 4,
+                background: dc.bg,
+                fontSize: fs.body,
+                lineHeight: 1.5
+              },
+              "data-fp": "diff-entry",
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      width: 16,
+                      flexShrink: 0,
+                      fontWeight: 700,
+                      color: dc.fg || theme.textMuted,
+                      textAlign: "center"
+                    },
+                    children: dc.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx7("span", { style: { color: theme.primary, fontWeight: 600, flexShrink: 0 }, children: entry.key }),
+                /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted }, children: "=" }),
+                entry.type === "changed" ? /* @__PURE__ */ jsxs6("span", { children: [
+                  /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      style: {
+                        color: theme.error,
+                        textDecoration: "line-through",
+                        opacity: 0.7
+                      },
+                      children: fmt(entry.oldValue)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7("span", { style: { color: theme.textMuted, margin: "0 4px" }, children: "\u2192" }),
+                  /* @__PURE__ */ jsx7("span", { style: { color: theme.success }, children: fmt(entry.newValue) })
+                ] }) : /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      color: entry.type === "added" ? theme.success : entry.type === "removed" ? theme.error : theme.textPrimary
+                    },
+                    children: fmt(entry.type === "removed" ? entry.oldValue : entry.newValue)
+                  }
+                )
+              ]
+            },
+            entry.key
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/components/ResultPanel/ResultPanel.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ResultPanel({
+  data,
+  logs = [],
+  hideConsole = false,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs7("div", { className, style, "data-fp": "result-panel", children: [
+      /* @__PURE__ */ jsx8("div", { "data-fp": "result-data", children: /* @__PURE__ */ jsx8("pre", { children: data ? JSON.stringify(data, null, 2) : "No data" }) }),
+      !hideConsole && /* @__PURE__ */ jsx8("div", { "data-fp": "result-console", children: logs.map((line, i) => /* @__PURE__ */ jsx8("div", { "data-fp": "console-line", "data-error": line.startsWith("ERROR"), children: line }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...style
+      },
+      "data-fp": "result-panel",
+      children: [
+        data && /* @__PURE__ */ jsxs7("div", { style: { flex: 1, overflow: "auto", padding: pad }, children: [
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              style: {
+                fontSize: fs.label,
+                fontWeight: 600,
+                color: theme.textMuted,
+                textTransform: "uppercase",
+                letterSpacing: "0.08em",
+                marginBottom: 8
+              },
+              children: size === "compact" ? "Result" : "Business Result (Scope)"
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "pre",
+            {
+              style: {
+                fontSize: fs.body,
+                fontFamily: theme.fontMono,
+                color: theme.textPrimary,
+                background: theme.bgSecondary,
+                padding: pad,
+                borderRadius: theme.radius,
+                overflow: "auto",
+                margin: 0
+              },
+              children: JSON.stringify(data, null, 2)
+            }
+          )
+        ] }),
+        !hideConsole && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              borderTop: `1px solid ${theme.border}`,
+              padding: pad,
+              overflow: "auto",
+              maxHeight: "40%",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    fontSize: fs.label,
+                    fontWeight: 600,
+                    color: theme.textMuted,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em",
+                    marginBottom: 8
+                  },
+                  children: "Console"
+                }
+              ),
+              logs.length === 0 && /* @__PURE__ */ jsx8("div", { style: { fontSize: fs.body, color: theme.textMuted, fontStyle: "italic" }, children: "No console output" }),
+              logs.map((line, i) => /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    fontSize: fs.body,
+                    fontFamily: theme.fontMono,
+                    color: line.startsWith("ERROR") ? theme.error : theme.textPrimary,
+                    padding: "2px 0",
+                    borderBottom: `1px solid ${theme.bgSecondary}`,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word"
+                  },
+                  children: line
+                },
+                i
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TimeTravelControls/TimeTravelControls.tsx
+import { useState as useState3, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function TimeTravelControls({
+  snapshots,
+  selectedIndex,
+  onIndexChange,
+  autoPlayable = true,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const [playing, setPlaying] = useState3(false);
+  const playRef = useRef2(null);
+  const total = snapshots.length;
+  const canPrev = selectedIndex > 0;
+  const canNext = selectedIndex < total - 1;
+  useEffect2(() => {
+    if (!playing || !autoPlayable) return;
+    if (selectedIndex >= total - 1) {
+      setPlaying(false);
+      return;
+    }
+    const stageDur = snapshots[selectedIndex]?.durationMs ?? 1;
+    const totalDur = snapshots.reduce((s, snap) => s + snap.durationMs, 0) || 1;
+    const fraction = stageDur / totalDur;
+    const baseMs = 3e3;
+    const delay = Math.max(200, Math.min(fraction * baseMs, 2e3));
+    playRef.current = setTimeout(() => {
+      onIndexChange(selectedIndex + 1);
+    }, delay);
+    return () => {
+      if (playRef.current) clearTimeout(playRef.current);
+    };
+  }, [playing, selectedIndex, snapshots, total, onIndexChange, autoPlayable]);
+  const togglePlay = useCallback2(() => {
+    if (playing) {
+      setPlaying(false);
+    } else {
+      if (selectedIndex >= total - 1) onIndexChange(0);
+      setPlaying(true);
+    }
+  }, [playing, selectedIndex, total, onIndexChange]);
+  const fs = fontSize[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs8("div", { className, style, "data-fp": "time-travel-controls", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          "data-fp": "tt-prev",
+          disabled: !canPrev || playing,
+          onClick: () => {
+            setPlaying(false);
+            onIndexChange(selectedIndex - 1);
+          },
+          children: "Prev"
+        }
+      ),
+      autoPlayable && /* @__PURE__ */ jsx9("button", { "data-fp": "tt-play", onClick: togglePlay, children: playing ? "Pause" : "Play" }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          "data-fp": "tt-next",
+          disabled: !canNext || playing,
+          onClick: () => {
+            setPlaying(false);
+            onIndexChange(selectedIndex + 1);
+          },
+          children: "Next"
+        }
+      ),
+      /* @__PURE__ */ jsx9("div", { "data-fp": "tt-ticks", children: snapshots.map((snap, i) => /* @__PURE__ */ jsx9(
+        "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,
+    border: `1px solid ${theme.border}`,
+    color: disabled ? theme.textMuted : theme.textPrimary,
+    borderRadius: "6px",
+    padding: "4px 12px",
+    fontSize: fs.body,
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    flexShrink: 0
+  });
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className,
+      style: {
+        padding: "6px 12px",
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        flexShrink: 0,
+        ...style
+      },
+      "data-fp": "time-travel-controls",
+      children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            style: btnStyle(!canPrev || playing),
+            disabled: !canPrev || playing,
+            onClick: () => {
+              setPlaying(false);
+              onIndexChange(selectedIndex - 1);
+            },
+            children: "\u25C0"
+          }
+        ),
+        autoPlayable && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: togglePlay,
+            style: {
+              background: playing ? theme.primary : theme.bgTertiary,
+              border: `1px solid ${theme.border}`,
+              color: playing ? "white" : theme.textPrimary,
+              borderRadius: "6px",
+              width: 28,
+              height: 28,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              fontSize: 14,
+              flexShrink: 0
+            },
+            title: playing ? "Pause" : "Play",
+            children: playing ? "\u23F8" : "\u25B6"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            style: btnStyle(!canNext || playing),
+            disabled: !canNext || playing,
+            onClick: () => {
+              setPlaying(false);
+              onIndexChange(selectedIndex + 1);
+            },
+            children: "\u25B6"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              padding: "0 4px"
+            },
+            children: snapshots.map((snap, i) => {
+              const isActive = i === selectedIndex;
+              const isDone = i < selectedIndex;
+              return /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  onClick: () => {
+                    setPlaying(false);
+                    onIndexChange(i);
+                  },
+                  title: snap.stageLabel,
+                  style: {
+                    flex: 1,
+                    height: isActive ? 14 : 8,
+                    borderRadius: 3,
+                    border: "none",
+                    cursor: "pointer",
+                    background: isActive ? theme.primary : isDone ? theme.success : theme.bgTertiary,
+                    opacity: isDone || isActive ? 1 : 0.4,
+                    transition: "all 0.15s ease"
+                  }
+                },
+                i
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ExplainableShell/ExplainableShell.tsx
+import { useState as useState4, useCallback as useCallback3, useMemo as useMemo6 } from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function ExplainableShell({
+  snapshots,
+  resultData,
+  logs = [],
+  narrative = [],
+  tabs = ["result", "explainable", "ai-compatible"],
+  defaultTab,
+  hideConsole = false,
+  renderFlowchart,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const [activeTab, setActiveTab] = useState4(defaultTab ?? tabs[0]);
+  const [snapshotIdx, setSnapshotIdx] = useState4(0);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  const handleSnapshotChange = useCallback3((idx) => {
+    setSnapshotIdx(Math.max(0, Math.min(idx, snapshots.length - 1)));
+  }, [snapshots.length]);
+  const revealedCount = useMemo6(() => {
+    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"
+  };
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs9("div", { className, style, "data-fp": "explainable-shell", children: [
+      /* @__PURE__ */ jsx10("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          "data-fp": "shell-tab",
+          "data-active": tab === activeTab,
+          onClick: () => setActiveTab(tab),
+          children: tabLabels[tab]
+        },
+        tab
+      )) }),
+      /* @__PURE__ */ jsxs9("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
+        activeTab === "result" && /* @__PURE__ */ jsx10(
+          ResultPanel,
+          {
+            data: resultData ?? null,
+            logs,
+            hideConsole,
+            unstyled: true
+          }
+        ),
+        activeTab === "explainable" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx10(
+            TimeTravelControls,
+            {
+              snapshots,
+              selectedIndex: snapshotIdx,
+              onIndexChange: handleSnapshotChange,
+              unstyled: true
+            }
+          ),
+          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
+          /* @__PURE__ */ jsx10(MemoryInspector, { snapshots, selectedIndex: snapshotIdx, unstyled: true }),
+          /* @__PURE__ */ jsx10(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true }),
+          /* @__PURE__ */ jsx10(
+            GanttTimeline,
+            {
+              snapshots,
+              selectedIndex: snapshotIdx,
+              onSelect: handleSnapshotChange,
+              unstyled: true
+            }
+          )
+        ] }),
+        activeTab === "ai-compatible" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx10(
+            TimeTravelControls,
+            {
+              snapshots,
+              selectedIndex: snapshotIdx,
+              onIndexChange: handleSnapshotChange,
+              unstyled: true
+            }
+          ),
+          renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }),
+          /* @__PURE__ */ jsx10(
+            NarrativeTrace,
+            {
+              narrative,
+              revealedCount,
+              unstyled: true
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        background: theme.bgPrimary,
+        color: theme.textPrimary,
+        fontFamily: theme.fontSans,
+        ...style
+      },
+      "data-fp": "explainable-shell",
+      children: [
+        /* @__PURE__ */ jsx10(
+          "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__ */ jsx10(
+                "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__ */ jsxs9("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
+          activeTab === "result" && /* @__PURE__ */ jsx10(
+            ResultPanel,
+            {
+              data: resultData ?? null,
+              logs,
+              hideConsole,
+              size
+            }
+          ),
+          activeTab === "explainable" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsx10(
+              TimeTravelControls,
+              {
+                snapshots,
+                selectedIndex: snapshotIdx,
+                onIndexChange: handleSnapshotChange,
+                size
+              }
+            ),
+            /* @__PURE__ */ jsxs9("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              renderFlowchart && /* @__PURE__ */ jsx10("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    width: renderFlowchart ? "40%" : "100%",
+                    minWidth: 280,
+                    overflow: "auto",
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      MemoryInspector,
+                      {
+                        snapshots,
+                        selectedIndex: snapshotIdx,
+                        size
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx10(
+                      ScopeDiff,
+                      {
+                        previous: prevMemory,
+                        current: currMemory,
+                        hideUnchanged: true,
+                        size
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx10("div", { style: { borderTop: `1px solid ${theme.border}`, flexShrink: 0 }, children: /* @__PURE__ */ jsx10(
+              GanttTimeline,
+              {
+                snapshots,
+                selectedIndex: snapshotIdx,
+                onSelect: handleSnapshotChange,
+                size
+              }
+            ) })
+          ] }),
+          activeTab === "ai-compatible" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsx10(
+              TimeTravelControls,
+              {
+                snapshots,
+                selectedIndex: snapshotIdx,
+                onIndexChange: handleSnapshotChange,
+                size
+              }
+            ),
+            /* @__PURE__ */ jsxs9("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              renderFlowchart && /* @__PURE__ */ jsx10("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) }),
+              /* @__PURE__ */ jsx10(
+                NarrativeTrace,
+                {
+                  narrative,
+                  revealedCount,
+                  size,
+                  style: {
+                    width: renderFlowchart ? "40%" : "100%",
+                    minWidth: 280
+                  }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/adapters/fromRuntimeSnapshot.ts
+function toVisualizationSnapshots(runtime) {
+  const snapshots = [];
+  flattenTree(runtime.executionTree, snapshots, runtime.sharedState);
+  return snapshots;
+}
+function flattenTree(node, out, sharedState, accumulatedMs = 0) {
+  const durationMs = typeof node.metrics?.durationMs === "number" ? node.metrics.durationMs : 1;
+  const startMs = accumulatedMs;
+  const narrative = buildNarrative(node);
+  const memory = {};
+  if (node.logs) {
+    Object.assign(memory, node.logs);
+  }
+  out.push({
+    stageName: node.id,
+    stageLabel: node.name || node.id,
+    memory,
+    narrative,
+    startMs,
+    durationMs,
+    status: "done"
+  });
+  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);
+      maxChildEnd = Math.max(maxChildEnd, childEnd);
+    }
+    nextMs = maxChildEnd;
+  }
+  if (node.next) {
+    nextMs = flattenTree(node.next, out, sharedState, nextMs);
+  }
+  return nextMs;
+}
+function buildNarrative(node) {
+  const parts = [];
+  if (node.name) {
+    parts.push(`Stage "${node.name}" executed.`);
+  }
+  if (node.logs && Object.keys(node.logs).length > 0) {
+    const keys = Object.keys(node.logs);
+    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 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"
+    };
+    accMs += duration;
+    return snap;
+  });
+}
+export {
+  ExplainableShell,
+  FootprintTheme,
+  GanttTimeline,
+  MemoryInspector,
+  NarrativeLog,
+  NarrativeTrace,
+  ResultPanel,
+  ScopeDiff,
+  SnapshotPanel,
+  TimeTravelControls,
+  coolDark,
+  createSnapshots,
+  defaultTokens,
+  themePresets,
+  toVisualizationSnapshots,
+  tokensToCSSVars,
+  useFootprintTheme,
+  warmDark,
+  warmLight
+};
+//# sourceMappingURL=index.js.map