@elevasis/ui 1.20.1 → 1.22.0

package/dist/{chunk-C7AD6N23.js → chunk-DLI3F5IV.js}

@@ -1,397 +1,118 @@
-import { useCyberColors } from './chunk-ERVB3QJQ.js';
-import { GlowDot } from './chunk-AWMZCYKH.js';
+import { useCyberColors } from './chunk-N5SDJP44.js';
+import { GlowDot } from './chunk-IAZT3VO6.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, useFitViewTrigger } from './chunk-F6RBK7NJ.js';
 import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from './chunk-XA34RETF.js';
-import { glassBase } from './chunk-OFAXUZPZ.js';
-import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Loader, Card, ActionIcon, SegmentedControl } from '@mantine/core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { glassBase } from './chunk-AJPFSMEH.js';
 import { memo, useMemo, useEffect, useState, useCallback, Fragment } from 'react';
+import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Card, ActionIcon, Loader, SegmentedControl } from '@mantine/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls, ReactFlowProvider, ReactFlow } from '@xyflow/react';
 import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconFocus2 } from '@tabler/icons-react';
 import '@xyflow/react/dist/style.css';
 
-function ExecutionStatusBadge({
-  status,
-  size = "sm",
-  variant = "light",
-  showLoader = true
-}) {
-  const statusColors = STATUS_COLORS[status];
-  const isRunning = status === "running" && showLoader;
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      color: statusColors.badge,
-      size,
-      variant,
-      leftSection: isRunning ? /* @__PURE__ */ jsx(Loader, { size: 10, color: statusColors.badge }) : void 0,
-      children: status.charAt(0).toUpperCase() + status.slice(1)
-    }
-  );
+var DOMAIN_COLORS = {
+  primary: "var(--color-primary)",
+  agent: "#8b5cf6",
+  workflow: "#3b82f6",
+  trigger: "#f97316",
+  integration: "#14b8a6",
+  approval: "#f59e0b"
+};
+function fill(color, isDark) {
+  return isDark ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 60%, white)`;
 }
-function getRateColor(rate) {
-  if (rate >= 95) return "var(--color-success)";
-  if (rate >= 80) return "var(--color-warning)";
-  return "var(--color-error)";
+function glow(color) {
+  return `color-mix(in srgb, ${color} 40%, transparent)`;
 }
-function getMantineRateColor(rate) {
-  if (rate >= 95) return "green";
-  if (rate >= 80) return "yellow";
-  return "red";
+function useGraphTheme() {
+  const isDark = useComputedColorScheme("dark") === "dark";
+  return useMemo(
+    () => ({
+      primary: fill(DOMAIN_COLORS.primary, isDark),
+      primaryGlow: glow(DOMAIN_COLORS.primary),
+      agent: fill(DOMAIN_COLORS.agent, isDark),
+      workflow: fill(DOMAIN_COLORS.workflow, isDark),
+      trigger: fill(DOMAIN_COLORS.trigger, isDark),
+      integration: fill(DOMAIN_COLORS.integration, isDark),
+      approval: fill(DOMAIN_COLORS.approval, isDark),
+      agentGlow: glow(DOMAIN_COLORS.agent),
+      workflowGlow: glow(DOMAIN_COLORS.workflow),
+      triggerGlow: glow(DOMAIN_COLORS.trigger),
+      integrationGlow: glow(DOMAIN_COLORS.integration),
+      approvalGlow: glow(DOMAIN_COLORS.approval),
+      edgeTriggers: fill(DOMAIN_COLORS.workflow, isDark),
+      edgeUses: fill(DOMAIN_COLORS.integration, isDark),
+      edgeApproval: fill(DOMAIN_COLORS.approval, isDark),
+      edgeTriggersGlow: glow(DOMAIN_COLORS.workflow),
+      edgeUsesGlow: glow(DOMAIN_COLORS.integration),
+      edgeApprovalGlow: glow(DOMAIN_COLORS.approval)
+    }),
+    [isDark]
+  );
 }
-function ExecutionStats({
-  totalExecutions,
-  successCount,
-  failureCount,
-  warningCount,
-  successRate,
-  align = "flex-end",
-  compact = false
-}) {
-  const cyberColors = useCyberColors();
-  if (totalExecutions === 0 && !compact) {
-    return null;
-  }
-  if (compact && totalExecutions === 0) {
-    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsx(Text, { size: "md", fw: 700, ff: "monospace", c: "dimmed", style: { minWidth: 42 }, children: "\u2014" }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: "No recent executions" })
-    ] });
-  }
-  if (compact) {
-    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", children: [
-        /* @__PURE__ */ jsxs(Text, { size: "md", fw: 700, ff: "monospace", style: { color: getRateColor(successRate), minWidth: 42 }, children: [
-          successRate,
-          "%"
-        ] }),
-        /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.green }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
-        ] }),
-        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.red }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "red", children: failureCount })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: [
-        totalExecutions,
-        " ",
-        totalExecutions === 1 ? "run" : "runs"
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Stack, { gap: 2, align, style: { whiteSpace: "nowrap" }, children: [
-    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "blue", children: [
-      totalExecutions,
-      " ",
-      totalExecutions === 1 ? "execution" : "executions"
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "green", children: [
-      successCount,
-      " success"
-    ] }),
-    warningCount != null && warningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "yellow", children: [
-      warningCount,
-      " warning"
-    ] }),
-    failureCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "red", children: [
-      failureCount,
-      " failed"
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: getMantineRateColor(successRate), children: [
-      successRate,
-      "% Success Rate"
-    ] })
-  ] });
+function getGraphBackgroundStyles(isDark) {
+  const pct = isDark ? 5 : 3;
+  const glowPct = isDark ? 8 : 5;
+  const mix = (percent) => `color-mix(in srgb, var(--color-primary) ${percent}%, transparent)`;
+  return {
+    backgroundImage: `
+      linear-gradient(${mix(pct)} 1px, transparent 1px),
+      linear-gradient(90deg, ${mix(pct)} 1px, transparent 1px),
+      radial-gradient(ellipse at 50% 50%, ${mix(glowPct)} 0%, transparent 70%)
+    `,
+    backgroundColor: "color-mix(in srgb, var(--color-background) 50%, var(--glass-background))",
+    backdropFilter: "var(--glass-blur)",
+    backgroundSize: "40px 40px, 40px 40px, 100% 100%"
+  };
 }
-function TimelineAxis({ totalDuration }) {
-  const markers = [
-    { position: 0, time: 0 },
-    { position: 25, time: totalDuration * 0.25 },
-    { position: 50, time: totalDuration * 0.5 },
-    { position: 75, time: totalDuration * 0.75 },
-    { position: 100, time: totalDuration }
-  ];
+function useGraphBackgroundStyles() {
+  const isDark = useComputedColorScheme("dark") === "dark";
+  return useMemo(() => getGraphBackgroundStyles(isDark), [isDark]);
+}
+function GraphContainer({ children, height = 600 }) {
+  const backgroundStyles = useGraphBackgroundStyles();
   return /* @__PURE__ */ jsx(
     Box,
     {
       style: {
+        width: "100%",
+        height,
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-md)",
+        overflow: "hidden",
         position: "relative",
-        height: 20
+        ...backgroundStyles
       },
-      children: markers.map((marker, idx) => /* @__PURE__ */ jsx(
-        Box,
-        {
-          style: {
-            position: "absolute",
-            left: `${marker.position}%`,
-            transform: marker.position === 100 ? "translateX(-100%)" : marker.position === 0 ? "none" : "translateX(-50%)",
-            top: 4
-          },
-          children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(marker.time) })
-        },
-        idx
-      ))
+      children
     }
   );
 }
-function TimelineContainer({ executionStart, executionEnd, children }) {
-  const totalDuration = executionEnd - executionStart;
-  return /* @__PURE__ */ jsxs(
+function GraphBackground() {
+  return null;
+}
+function LegendDot({ color }) {
+  return /* @__PURE__ */ jsx(
     Box,
     {
       style: {
-        borderBottom: "1px solid var(--color-border)",
-        backgroundColor: "var(--color-background)",
-        padding: "var(--mantine-spacing-xs)"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            style: {
-              position: "relative"
-            },
-            children: /* @__PURE__ */ jsx(Box, { style: { position: "relative", zIndex: 1 }, children })
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { style: { paddingLeft: TIMELINE_CONSTANTS.LABEL_WIDTH + 12, paddingRight: 16 }, children: /* @__PURE__ */ jsx(TimelineAxis, { totalDuration }) })
-      ]
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        backgroundColor: `var(--mantine-color-${color}-5)`
+      }
     }
   );
 }
-function TimelineBar({
-  startTime,
-  endTime,
-  executionStart,
-  executionEnd,
-  status,
-  label,
-  onClick,
-  isSelected = false,
-  hasSelection = false
-}) {
-  const colors = getStatusColors(status);
-  const { left, width } = calculateBarPosition(startTime, endTime, executionStart, executionEnd);
-  const opacity = hasSelection && !isSelected ? 0.5 : 1;
+function LegendLine({ color }) {
   return /* @__PURE__ */ jsx(
     Box,
     {
       style: {
-        position: "absolute",
-        left: `${left}%`,
-        width: `${width}%`,
-        top: 4,
-        height: TIMELINE_CONSTANTS.BAR_HEIGHT / 2,
-        backgroundColor: colors.color,
-        opacity,
-        borderRadius: 4,
-        cursor: onClick ? "pointer" : "default",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden"
-      },
-      onClick,
-      children: label && /* @__PURE__ */ jsx(Text, { size: "xs", c: "white", style: { whiteSpace: "nowrap" }, children: label })
-    }
-  );
-}
-function TimelineRow({
-  label,
-  bars,
-  executionStart,
-  executionEnd,
-  indent = 0,
-  selectedNodeId
-}) {
-  const labelMatch = label.match(/^(.+?)\s*\((.+?)\)$/);
-  const labelName = labelMatch ? labelMatch[1] : label;
-  const labelDuration = labelMatch ? labelMatch[2] : null;
-  const statusColor = bars.length > 0 ? getStatusColors(bars[0].status).color : "var(--color-text-dimmed)";
-  const hasSelection = selectedNodeId !== null && selectedNodeId !== void 0;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      style: {
-        display: "flex",
-        gap: 0,
-        height: TIMELINE_CONSTANTS.BAR_HEIGHT
-        // paddingLeft: indent * TIMELINE_CONSTANTS.INDENT_SIZE
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            style: {
-              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
-              width: TIMELINE_CONSTANTS.LABEL_WIDTH,
-              flexShrink: 0,
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              paddingRight: 12,
-              paddingLeft: 8 + indent * TIMELINE_CONSTANTS.INDENT_SIZE,
-              // Indent only the label, not the timeline bars
-              overflow: "hidden"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  style: {
-                    width: 6,
-                    height: 6,
-                    borderRadius: "50%",
-                    backgroundColor: statusColor,
-                    flexShrink: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { size: "sm", truncate: true, style: { flexShrink: 1, minWidth: 0 }, children: labelName }),
-              labelDuration && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", ff: "monospace", style: { flexShrink: 0 }, children: [
-                "(",
-                labelDuration,
-                ")"
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            style: {
-              position: "relative",
-              flex: 1,
-              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
-              marginLeft: 12,
-              marginRight: 16
-              // Right margin to match grid padding
-            },
-            children: bars.map((bar, idx) => {
-              const isSelected = bar.nodeId !== void 0 && bar.nodeId === selectedNodeId;
-              return /* @__PURE__ */ jsx(
-                TimelineBar,
-                {
-                  ...bar,
-                  executionStart,
-                  executionEnd,
-                  isSelected,
-                  hasSelection
-                },
-                idx
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
-}
-var DOMAIN_COLORS = {
-  primary: "var(--color-primary)",
-  agent: "#8b5cf6",
-  workflow: "#3b82f6",
-  trigger: "#f97316",
-  integration: "#14b8a6",
-  approval: "#f59e0b"
-};
-function fill(color, isDark) {
-  return isDark ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 60%, white)`;
-}
-function glow(color) {
-  return `color-mix(in srgb, ${color} 40%, transparent)`;
-}
-function useGraphTheme() {
-  const isDark = useComputedColorScheme("dark") === "dark";
-  return useMemo(
-    () => ({
-      primary: fill(DOMAIN_COLORS.primary, isDark),
-      primaryGlow: glow(DOMAIN_COLORS.primary),
-      agent: fill(DOMAIN_COLORS.agent, isDark),
-      workflow: fill(DOMAIN_COLORS.workflow, isDark),
-      trigger: fill(DOMAIN_COLORS.trigger, isDark),
-      integration: fill(DOMAIN_COLORS.integration, isDark),
-      approval: fill(DOMAIN_COLORS.approval, isDark),
-      agentGlow: glow(DOMAIN_COLORS.agent),
-      workflowGlow: glow(DOMAIN_COLORS.workflow),
-      triggerGlow: glow(DOMAIN_COLORS.trigger),
-      integrationGlow: glow(DOMAIN_COLORS.integration),
-      approvalGlow: glow(DOMAIN_COLORS.approval),
-      edgeTriggers: fill(DOMAIN_COLORS.workflow, isDark),
-      edgeUses: fill(DOMAIN_COLORS.integration, isDark),
-      edgeApproval: fill(DOMAIN_COLORS.approval, isDark),
-      edgeTriggersGlow: glow(DOMAIN_COLORS.workflow),
-      edgeUsesGlow: glow(DOMAIN_COLORS.integration),
-      edgeApprovalGlow: glow(DOMAIN_COLORS.approval)
-    }),
-    [isDark]
-  );
-}
-function getGraphBackgroundStyles(isDark) {
-  const pct = isDark ? 5 : 3;
-  const glowPct = isDark ? 8 : 5;
-  const mix = (percent) => `color-mix(in srgb, var(--color-primary) ${percent}%, transparent)`;
-  return {
-    backgroundImage: `
-      linear-gradient(${mix(pct)} 1px, transparent 1px),
-      linear-gradient(90deg, ${mix(pct)} 1px, transparent 1px),
-      radial-gradient(ellipse at 50% 50%, ${mix(glowPct)} 0%, transparent 70%)
-    `,
-    backgroundColor: "color-mix(in srgb, var(--color-background) 50%, var(--glass-background))",
-    backdropFilter: "var(--glass-blur)",
-    backgroundSize: "40px 40px, 40px 40px, 100% 100%"
-  };
-}
-function useGraphBackgroundStyles() {
-  const isDark = useComputedColorScheme("dark") === "dark";
-  return useMemo(() => getGraphBackgroundStyles(isDark), [isDark]);
-}
-function GraphContainer({ children, height = 600 }) {
-  const backgroundStyles = useGraphBackgroundStyles();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      style: {
-        width: "100%",
-        height,
-        border: "1px solid var(--color-border)",
-        borderRadius: "var(--mantine-radius-md)",
-        overflow: "hidden",
-        position: "relative",
-        ...backgroundStyles
-      },
-      children
-    }
-  );
-}
-function GraphBackground() {
-  return null;
-}
-function LegendDot({ color }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      style: {
-        width: 10,
-        height: 10,
-        borderRadius: "50%",
-        backgroundColor: `var(--mantine-color-${color}-5)`
-      }
-    }
-  );
-}
-function LegendLine({ color }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      style: {
-        width: 20,
-        height: 3,
-        borderRadius: 2,
-        background: `linear-gradient(90deg, var(--mantine-color-${color}-5), var(--mantine-color-${color}-6))`
-      }
+        width: 20,
+        height: 3,
+        borderRadius: 2,
+        background: `linear-gradient(90deg, var(--mantine-color-${color}-5), var(--mantine-color-${color}-6))`
+      }
     }
   );
 }
@@ -635,6 +356,285 @@ var BaseEdge = memo(function BaseEdge2({
     ) })
   ] });
 });
+function ExecutionStatusBadge({
+  status,
+  size = "sm",
+  variant = "light",
+  showLoader = true
+}) {
+  const statusColors = STATUS_COLORS[status];
+  const isRunning = status === "running" && showLoader;
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      color: statusColors.badge,
+      size,
+      variant,
+      leftSection: isRunning ? /* @__PURE__ */ jsx(Loader, { size: 10, color: statusColors.badge }) : void 0,
+      children: status.charAt(0).toUpperCase() + status.slice(1)
+    }
+  );
+}
+function getRateColor(rate) {
+  if (rate >= 95) return "var(--color-success)";
+  if (rate >= 80) return "var(--color-warning)";
+  return "var(--color-error)";
+}
+function getMantineRateColor(rate) {
+  if (rate >= 95) return "green";
+  if (rate >= 80) return "yellow";
+  return "red";
+}
+function ExecutionStats({
+  totalExecutions,
+  successCount,
+  failureCount,
+  warningCount,
+  successRate,
+  align = "flex-end",
+  compact = false
+}) {
+  const cyberColors = useCyberColors();
+  if (totalExecutions === 0 && !compact) {
+    return null;
+  }
+  if (compact && totalExecutions === 0) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "md", fw: 700, ff: "monospace", c: "dimmed", style: { minWidth: 42 }, children: "\u2014" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: "No recent executions" })
+    ] });
+  }
+  if (compact) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Text, { size: "md", fw: 700, ff: "monospace", style: { color: getRateColor(successRate), minWidth: 42 }, children: [
+          successRate,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.green }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
+        ] }),
+        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.red }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "red", children: failureCount })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: [
+        totalExecutions,
+        " ",
+        totalExecutions === 1 ? "run" : "runs"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, align, style: { whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "blue", children: [
+      totalExecutions,
+      " ",
+      totalExecutions === 1 ? "execution" : "executions"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "green", children: [
+      successCount,
+      " success"
+    ] }),
+    warningCount != null && warningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "yellow", children: [
+      warningCount,
+      " warning"
+    ] }),
+    failureCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "red", children: [
+      failureCount,
+      " failed"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: getMantineRateColor(successRate), children: [
+      successRate,
+      "% Success Rate"
+    ] })
+  ] });
+}
+function TimelineAxis({ totalDuration }) {
+  const markers = [
+    { position: 0, time: 0 },
+    { position: 25, time: totalDuration * 0.25 },
+    { position: 50, time: totalDuration * 0.5 },
+    { position: 75, time: totalDuration * 0.75 },
+    { position: 100, time: totalDuration }
+  ];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "relative",
+        height: 20
+      },
+      children: markers.map((marker, idx) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            position: "absolute",
+            left: `${marker.position}%`,
+            transform: marker.position === 100 ? "translateX(-100%)" : marker.position === 0 ? "none" : "translateX(-50%)",
+            top: 4
+          },
+          children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(marker.time) })
+        },
+        idx
+      ))
+    }
+  );
+}
+function TimelineContainer({ executionStart, executionEnd, children }) {
+  const totalDuration = executionEnd - executionStart;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        borderBottom: "1px solid var(--color-border)",
+        backgroundColor: "var(--color-background)",
+        padding: "var(--mantine-spacing-xs)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(Box, { style: { position: "relative", zIndex: 1 }, children })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { style: { paddingLeft: TIMELINE_CONSTANTS.LABEL_WIDTH + 12, paddingRight: 16 }, children: /* @__PURE__ */ jsx(TimelineAxis, { totalDuration }) })
+      ]
+    }
+  );
+}
+function TimelineBar({
+  startTime,
+  endTime,
+  executionStart,
+  executionEnd,
+  status,
+  label,
+  onClick,
+  isSelected = false,
+  hasSelection = false
+}) {
+  const colors = getStatusColors(status);
+  const { left, width } = calculateBarPosition(startTime, endTime, executionStart, executionEnd);
+  const opacity = hasSelection && !isSelected ? 0.5 : 1;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "absolute",
+        left: `${left}%`,
+        width: `${width}%`,
+        top: 4,
+        height: TIMELINE_CONSTANTS.BAR_HEIGHT / 2,
+        backgroundColor: colors.color,
+        opacity,
+        borderRadius: 4,
+        cursor: onClick ? "pointer" : "default",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      onClick,
+      children: label && /* @__PURE__ */ jsx(Text, { size: "xs", c: "white", style: { whiteSpace: "nowrap" }, children: label })
+    }
+  );
+}
+function TimelineRow({
+  label,
+  bars,
+  executionStart,
+  executionEnd,
+  indent = 0,
+  selectedNodeId
+}) {
+  const labelMatch = label.match(/^(.+?)\s*\((.+?)\)$/);
+  const labelName = labelMatch ? labelMatch[1] : label;
+  const labelDuration = labelMatch ? labelMatch[2] : null;
+  const statusColor = bars.length > 0 ? getStatusColors(bars[0].status).color : "var(--color-text-dimmed)";
+  const hasSelection = selectedNodeId !== null && selectedNodeId !== void 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        display: "flex",
+        gap: 0,
+        height: TIMELINE_CONSTANTS.BAR_HEIGHT
+        // paddingLeft: indent * TIMELINE_CONSTANTS.INDENT_SIZE
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
+              width: TIMELINE_CONSTANTS.LABEL_WIDTH,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              paddingRight: 12,
+              paddingLeft: 8 + indent * TIMELINE_CONSTANTS.INDENT_SIZE,
+              // Indent only the label, not the timeline bars
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: statusColor,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { size: "sm", truncate: true, style: { flexShrink: 1, minWidth: 0 }, children: labelName }),
+              labelDuration && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", ff: "monospace", style: { flexShrink: 0 }, children: [
+                "(",
+                labelDuration,
+                ")"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              height: TIMELINE_CONSTANTS.BAR_HEIGHT,
+              marginLeft: 12,
+              marginRight: 16
+              // Right margin to match grid padding
+            },
+            children: bars.map((bar, idx) => {
+              const isSelected = bar.nodeId !== void 0 && bar.nodeId === selectedNodeId;
+              return /* @__PURE__ */ jsx(
+                TimelineBar,
+                {
+                  ...bar,
+                  executionStart,
+                  executionEnd,
+                  isSelected,
+                  hasSelection
+                },
+                idx
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 var VisualizerContainer = ({ children, handleContainerClick, height }) => {
   const containerHeight = height ?? CONTAINER_CONSTANTS.CONTAINER_HEIGHT;
   return /* @__PURE__ */ jsx(Box, { onClick: handleContainerClick, children: /* @__PURE__ */ jsx(