@elevasis/ui 1.15.3 → 1.17.1

package/dist/chunk-ZGK6XZVY.js

@@ -0,0 +1,1208 @@
+import { useCyberColors, GlowDot } from './chunk-7S5FS7WW.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 { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Loader, Card, ActionIcon, SegmentedControl } from '@mantine/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useMemo, useEffect, useState, useCallback, Fragment } from 'react';
+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)
+    }
+  );
+}
+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,
+    {
+      bg: "var(--color-background)",
+      onClick: handleContainerClick,
+      style: {
+        // borderBottom: '1px solid var(--color-border)',
+        // borderRadius: 'var(--mantine-radius-default)'
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: `${containerHeight}px`,
+            overflow: "hidden"
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var EmptyVisualizer = ({ message = "Select an execution to view timeline" }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      h: CONTAINER_CONSTANTS.CONTAINER_HEIGHT,
+      bg: "var(--color-background)",
+      style: {
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: message })
+    }
+  );
+};
+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))`
+      }
+    }
+  );
+}
+function GraphLegend({ title = "Legend", items, position = "bottom-right" }) {
+  const margins = {
+    marginBottom: position.includes("bottom") ? 12 : void 0,
+    marginTop: position.includes("top") ? 12 : void 0,
+    marginRight: position.includes("right") ? 60 : 12,
+    marginLeft: position.includes("left") ? 12 : void 0
+  };
+  return /* @__PURE__ */ jsx(Panel, { position, style: margins, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      p: "xs",
+      className: Graph_module_css_default.legend,
+      style: {
+        backgroundColor: "var(--glass-background)"
+      },
+      children: /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            fw: 600,
+            style: {
+              letterSpacing: "0.5px",
+              textTransform: "uppercase",
+              fontFamily: "var(--mantine-font-family-headings)"
+            },
+            children: title
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          item.type === "line" ? /* @__PURE__ */ jsx(LegendLine, { color: item.color }) : /* @__PURE__ */ jsx(LegendDot, { color: item.color }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: item.label })
+        ] }, item.label))
+      ] })
+    }
+  ) });
+}
+function GraphFitViewButton({ padding = 0.2, variant = "reactflow", duration = 300 }) {
+  const { fitView } = useReactFlow();
+  const handleFitView = () => {
+    fitView({ padding, duration });
+  };
+  if (variant === "mantine") {
+    return /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        onClick: handleFitView,
+        variant: "default",
+        size: "lg",
+        title: "Fit view",
+        style: {
+          position: "absolute",
+          bottom: 12,
+          right: 12,
+          zIndex: 5,
+          background: "var(--color-surface)",
+          border: "1px solid var(--color-border)"
+        },
+        children: /* @__PURE__ */ jsx(IconFocus2, { size: 18 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Controls, { position: "bottom-right", showZoom: false, showFitView: false, showInteractive: false, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "react-flow__controls-button react-flow__controls-fitview",
+      onClick: handleFitView,
+      title: "Fit view",
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M8 3H5C3.89 3 3 3.89 3 5V8H5V5H8V3M19 3H16V5H19V8H21V5C21 3.89 20.11 3 19 3M19 19H16V21H19C20.11 21 21 20.11 21 19V16H19V19M5 19H8V21H5C3.89 21 3 20.11 3 19V16H5V19Z" }) })
+    }
+  ) });
+}
+function GraphFitViewHandler({
+  trigger,
+  padding = 0.15,
+  duration = 300,
+  delay = 250
+}) {
+  const { fitView } = useReactFlow();
+  useEffect(() => {
+    if (trigger && trigger > 0) {
+      const timeout = setTimeout(() => {
+        fitView({ padding, duration });
+      }, delay);
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [trigger, fitView, padding, duration, delay]);
+  return null;
+}
+var colorClassMap = {
+  violet: Graph_module_css_default.nodeAgent,
+  blue: Graph_module_css_default.nodeWorkflow,
+  orange: Graph_module_css_default.nodeTrigger,
+  teal: Graph_module_css_default.nodeIntegration,
+  gray: Graph_module_css_default.nodeExternal,
+  yellow: Graph_module_css_default.nodeHuman
+};
+var BaseNode = memo(function BaseNode2({
+  children,
+  color,
+  selected = false,
+  highlighted = false,
+  width = 220,
+  className = "",
+  handleDirection = "horizontal",
+  showSourceHandle = true,
+  showTargetHandle = true
+}) {
+  const typeClass = colorClassMap[color] || Graph_module_css_default.nodeAgent;
+  const highlightClass = highlighted ? Graph_module_css_default.nodeHighlighted : "";
+  const targetPosition = handleDirection === "horizontal" ? Position.Left : Position.Top;
+  const sourcePosition = handleDirection === "horizontal" ? Position.Right : Position.Bottom;
+  return /* @__PURE__ */ jsxs("div", { className: `${Graph_module_css_default.node} ${typeClass} ${highlightClass} ${className}`, children: [
+    showTargetHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: targetPosition, style: { opacity: 0, pointerEvents: "none" } }),
+    showSourceHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: sourcePosition, style: { opacity: 0, pointerEvents: "none" } }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        className: `${Graph_module_css_default.nodeCard} ${selected ? Graph_module_css_default.nodeCardSelected : ""}`,
+        style: {
+          width,
+          border: `1px solid ${selected ? `var(--mantine-color-${color}-5)` : "var(--color-border)"}`,
+          backgroundColor: "var(--color-surface)",
+          cursor: "pointer",
+          boxShadow: selected ? `0 0 15px var(--mantine-color-${color}-5), 0 4px 12px rgba(0,0,0,0.1)` : "0 2px 8px rgba(0,0,0,0.08)"
+        },
+        children
+      }
+    )
+  ] });
+});
+var BaseEdge = memo(function BaseEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  color,
+  glowColor,
+  label,
+  selected,
+  animated = true,
+  dimmed = false,
+  edgeIndex = 0,
+  totalEdges = 1
+}) {
+  const edgeSpacing = 10;
+  const baseOffset = 15;
+  const offsetAmount = totalEdges > 1 ? (edgeIndex - (totalEdges - 1) / 2) * edgeSpacing : 0;
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY: sourceY + offsetAmount,
+    sourcePosition,
+    targetX,
+    targetY: targetY + offsetAmount,
+    targetPosition,
+    borderRadius: 8,
+    offset: baseOffset + Math.abs(offsetAmount)
+    // Stagger the turn points horizontally
+  });
+  const edgeOpacity = dimmed ? 0.25 : 1;
+  return /* @__PURE__ */ jsxs("g", { style: { opacity: edgeOpacity }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: selected ? 8 : 6,
+        strokeOpacity: 0.2,
+        style: { filter: "blur(4px)" }
+      }
+    ),
+    animated && !dimmed && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: selected ? 4 : 3,
+        strokeOpacity: 0.3,
+        strokeDasharray: "12 6",
+        className: Graph_module_css_default.edgeAnimated,
+        style: { filter: `drop-shadow(0 0 3px ${glowColor})` }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BaseEdge$1,
+      {
+        id,
+        path: edgePath,
+        style: {
+          stroke: color,
+          strokeWidth: selected ? 3 : 2,
+          filter: dimmed ? "none" : selected ? `drop-shadow(0 0 6px ${glowColor})` : `drop-shadow(0 0 2px ${glowColor})`
+        }
+      }
+    ),
+    animated && !dimmed && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "white",
+        strokeWidth: 2,
+        strokeOpacity: 0.6,
+        strokeDasharray: "4 20",
+        className: Graph_module_css_default.edgeAnimated,
+        style: { filter: "drop-shadow(0 0 2px white)" }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${Graph_module_css_default.edgeLabel} ${dimmed ? Graph_module_css_default.edgeLabelDimmed : ""}`,
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          pointerEvents: "all",
+          fontSize: 10,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          padding: "3px 8px",
+          borderRadius: 6,
+          background: `linear-gradient(135deg, ${color}, ${color}dd)`,
+          color: "var(--color-text)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+          opacity: dimmed ? 0.25 : 1
+        },
+        children: label
+      }
+    ) })
+  ] });
+});
+var UnifiedWorkflowNode = memo(function UnifiedWorkflowNode2({ data }) {
+  const selected = data.isSelected ?? false;
+  const primaryColor = data.isEntryPoint ? "teal" : data.isEndNode ? "violet" : data.isConditional ? "orange" : "blue";
+  const statusColors = data.executionStatus ? STATUS_COLORS[data.executionStatus] : void 0;
+  const showExecutionStatus = data.isExecuted && data.executionStatus;
+  return /* @__PURE__ */ jsx(
+    BaseNode,
+    {
+      color: primaryColor,
+      selected,
+      highlighted: Boolean(data.highlighted),
+      width: 220,
+      className: data.isDimmed ? "dimmed-node" : "",
+      showSourceHandle: !data.isEndNode,
+      children: /* @__PURE__ */ jsx("div", { style: { opacity: data.isDimmed ? 0.3 : 1 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, lineClamp: 1, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: data.name }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          data.isEntryPoint && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "teal", leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 10 }), children: "Entry" }),
+          data.isEndNode && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "violet", leftSection: /* @__PURE__ */ jsx(IconPlayerStop, { size: 10 }), children: "End" }),
+          data.isConditional && /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", color: "orange", leftSection: /* @__PURE__ */ jsx(IconArrowsSplit, { size: 10 }), children: [
+            data.routeCount,
+            " routes"
+          ] }),
+          !data.isEntryPoint && !data.isEndNode && !data.isConditional && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(IconSquare, { size: 10 }), children: "Step" }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", ff: "monospace", c: "dimmed", truncate: true, children: data.id })
+        ] }),
+        !data.isDimmed && data.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+        showExecutionStatus && statusColors && /* @__PURE__ */ jsx(Box, { mt: 4, children: /* @__PURE__ */ jsxs(Group, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(Box, { children: getStatusIcon({
+            status: data.executionStatus,
+            colors: { icon: statusColors.color },
+            iconSize: 16,
+            spinDuration: "1s"
+          }) }),
+          /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: statusColors.badge, children: data.executionStatus }),
+          data.duration !== void 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(data.duration) })
+        ] }) })
+      ] }) })
+    }
+  );
+});
+var UnifiedWorkflowEdge = memo(function UnifiedWorkflowEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  selected,
+  data
+}) {
+  const colors = useGraphTheme();
+  const edgeType = data?.edgeType || "linear";
+  const isDimmed = data?.isDimmed ?? false;
+  const isAnimated = data?.isAnimated ?? false;
+  let edgeColor;
+  let glowColor;
+  let label;
+  switch (edgeType) {
+    case "conditional":
+      edgeColor = colors.trigger;
+      glowColor = colors.triggerGlow;
+      label = data?.label || "route";
+      break;
+    case "default":
+      edgeColor = colors.integration;
+      glowColor = colors.integrationGlow;
+      label = data?.label || "default";
+      break;
+    case "linear":
+    default:
+      edgeColor = colors.workflow;
+      glowColor = colors.workflowGlow;
+      label = void 0;
+      break;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      color: edgeColor,
+      glowColor,
+      label,
+      selected,
+      animated: isAnimated,
+      dimmed: isDimmed
+    }
+  );
+});
+var nodeTypes = {
+  unifiedWorkflowNode: UnifiedWorkflowNode
+};
+var edgeTypes = {
+  unifiedWorkflowEdge: UnifiedWorkflowEdge
+};
+var NODE_LEGEND_ITEMS = [
+  { color: "teal", label: "Entry" },
+  { color: "blue", label: "Step" },
+  { color: "orange", label: "Conditional" },
+  { color: "violet", label: "End" }
+];
+var EDGE_LEGEND_ITEMS = [
+  { color: "blue", label: "Next", type: "line" },
+  { color: "orange", label: "Route", type: "line" },
+  { color: "teal", label: "Default", type: "line" }
+];
+function UnifiedWorkflowGraph({
+  resourceDefinition,
+  executionLogs,
+  selectedStepId,
+  onStepSelect,
+  fitViewTrigger: externalFitViewTrigger
+}) {
+  const hasExecutionData = executionLogs && executionLogs.length > 0;
+  const [mode, setMode] = useState(hasExecutionData ? "execution" : "definition");
+  useEffect(() => {
+    setMode(hasExecutionData ? "execution" : "definition");
+  }, [hasExecutionData]);
+  const isDefinitionMode = mode === "definition";
+  const executionPath = useExecutionPath(
+    isDefinitionMode ? void 0 : executionLogs,
+    isDefinitionMode ? void 0 : resourceDefinition
+  );
+  const workflowInput = useMemo(
+    () => resourceDefinition ? { entryPoint: resourceDefinition.entryPoint, steps: resourceDefinition.steps } : void 0,
+    [resourceDefinition]
+  );
+  const {
+    nodes: layoutNodes,
+    edges: layoutEdges,
+    graphHeight
+  } = useUnifiedWorkflowLayout(workflowInput, executionPath, isDefinitionMode ? null : selectedStepId, mode);
+  const {
+    nodes: highlightedNodes,
+    edges: highlightedEdges,
+    handleNodeMouseEnter,
+    handleNodeMouseLeave
+  } = useDirectedChainHighlighting(layoutNodes, layoutEdges);
+  const nodes = isDefinitionMode ? highlightedNodes : layoutNodes;
+  const edges = isDefinitionMode ? highlightedEdges : layoutEdges;
+  const [internalFitViewTrigger, setInternalFitViewTrigger] = useState(0);
+  const executedStepsCount = executionPath?.executedSteps.size ?? 0;
+  const nodesCount = nodes.length;
+  useEffect(() => {
+    if (nodesCount > 0) {
+      setInternalFitViewTrigger((prev) => prev + 1);
+    }
+  }, [nodesCount, executedStepsCount]);
+  const fitViewTrigger = (externalFitViewTrigger ?? 0) + internalFitViewTrigger;
+  const { handleNodeClick, handlePaneClick, handleContainerClick } = useNodeSelection(
+    selectedStepId || null,
+    onStepSelect || (() => {
+    })
+  );
+  if (!resourceDefinition || !resourceDefinition.steps.length) {
+    return /* @__PURE__ */ jsx(EmptyVisualizer, {});
+  }
+  return /* @__PURE__ */ jsx(
+    VisualizerContainer,
+    {
+      handleContainerClick: isDefinitionMode ? void 0 : handleContainerClick,
+      height: graphHeight,
+      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          nodeTypes,
+          edgeTypes,
+          onNodeClick: isDefinitionMode ? void 0 : handleNodeClick,
+          onPaneClick: isDefinitionMode ? void 0 : handlePaneClick,
+          onNodeMouseEnter: isDefinitionMode ? handleNodeMouseEnter : void 0,
+          onNodeMouseLeave: isDefinitionMode ? handleNodeMouseLeave : void 0,
+          fitView: true,
+          fitViewOptions: {
+            padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING
+          },
+          proOptions: { hideAttribution: true },
+          minZoom: WORKFLOW_CONSTANTS.MIN_ZOOM,
+          maxZoom: WORKFLOW_CONSTANTS.MAX_ZOOM,
+          defaultViewport: { x: 0, y: 0, zoom: 1 },
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !isDefinitionMode,
+          selectNodesOnDrag: false,
+          zoomOnScroll: true,
+          panOnDrag: true,
+          className: Graph_module_css_default.graphContainer,
+          children: [
+            /* @__PURE__ */ jsx(GraphBackground, {}),
+            /* @__PURE__ */ jsx(Panel, { position: "top-right", style: { marginTop: 12, marginRight: 12 }, children: /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                size: "xs",
+                value: mode,
+                onChange: (value) => setMode(value),
+                data: [
+                  { label: "Definition", value: "definition" },
+                  { label: "Execution", value: "execution" }
+                ],
+                styles: {
+                  root: {
+                    backgroundColor: "var(--color-surface)",
+                    border: "1px solid var(--color-border)"
+                  }
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(GraphLegend, { title: "Legend", items: NODE_LEGEND_ITEMS, position: "bottom-right" }),
+            /* @__PURE__ */ jsx(GraphLegend, { title: "Flow", items: EDGE_LEGEND_ITEMS, position: "bottom-left" }),
+            /* @__PURE__ */ jsx(GraphFitViewButton, { padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING, variant: "mantine" }),
+            /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger, padding: WORKFLOW_CONSTANTS.FIT_VIEW_PADDING })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function WorkflowExecutionTimeline({ timelineData, selectedStepId }) {
+  const { steps } = timelineData;
+  const executionStart = steps[0]?.startTime || 0;
+  const executionEnd = steps[steps.length - 1]?.endTime || executionStart;
+  return /* @__PURE__ */ jsx(TimelineContainer, { executionStart, executionEnd, children: steps.map(
+    (step) => step.startTime && step.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: step.stepName,
+        bars: [
+          {
+            startTime: step.startTime,
+            endTime: step.endTime,
+            status: step.status,
+            nodeId: step.stepId
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedStepId
+      },
+      step.stepId
+    )
+  ) });
+}
+var statusColorMap = {
+  running: "blue",
+  completed: "teal",
+  failed: "orange",
+  pending: "violet",
+  warning: "yellow"
+};
+var AgentIterationNode = memo(function AgentIterationNode2({ data, selected }) {
+  const { nodeType, label, iterationNumber, status, reasoningCount, actionCount, duration, isLive } = data;
+  const colors = getStatusColors(status);
+  const nodeColor = statusColorMap[status];
+  return /* @__PURE__ */ jsxs(BaseNode, { color: nodeColor, selected, width: AGENT_CONSTANTS.NODE_WIDTH, children: [
+    /* @__PURE__ */ jsxs(Box, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: AGENT_CONSTANTS.CIRCLE_SIZE,
+            height: AGENT_CONSTANTS.CIRCLE_SIZE,
+            borderRadius: "50%",
+            backgroundColor: "var(--color-surface)",
+            border: `2px solid ${colors.color}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: getStatusIcon({
+            status,
+            colors: { icon: colors.color },
+            iconSize: AGENT_CONSTANTS.STATUS_ICON_SIZE,
+            spinDuration: "1s"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          fw: status === "running" ? 500 : 400,
+          ta: "center",
+          mt: 4,
+          style: { maxWidth: 150, fontFamily: "var(--mantine-font-family-headings)" },
+          children: nodeType === "iteration" ? `Iteration ${iterationNumber}` : label
+        }
+      ),
+      /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: colors.badge, mt: 4, children: status.toUpperCase() }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, mt: 2, align: "center", children: [
+        nodeType === "iteration" && reasoningCount !== void 0 && reasoningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          reasoningCount,
+          " reasoning"
+        ] }),
+        nodeType === "iteration" && actionCount !== void 0 && actionCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          actionCount,
+          " ",
+          actionCount === 1 ? "action" : "actions"
+        ] }),
+        duration !== void 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDuration(duration) })
+      ] })
+    ] }),
+    isLive && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "xs",
+        variant: "filled",
+        style: {
+          position: "absolute",
+          top: 4,
+          right: 4
+        },
+        children: /* @__PURE__ */ jsx("span", { className: Graph_module_css_default.livePulse, children: "LIVE" })
+      }
+    )
+  ] });
+});
+var statusEdgeColors = {
+  running: {
+    color: "var(--mantine-color-blue-5)",
+    glow: "rgba(59, 130, 246, 0.5)"
+  },
+  completed: {
+    color: "var(--mantine-color-teal-5)",
+    glow: "rgba(20, 184, 166, 0.5)"
+  },
+  failed: {
+    color: "var(--mantine-color-orange-5)",
+    glow: "rgba(249, 115, 22, 0.5)"
+  },
+  pending: {
+    color: "var(--mantine-color-gray-5)",
+    glow: "rgba(156, 163, 175, 0.3)"
+  },
+  warning: {
+    color: "var(--mantine-color-yellow-5)",
+    glow: "rgba(234, 179, 8, 0.5)"
+  }
+};
+var AgentIterationEdge = memo(function AgentIterationEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  data,
+  selected
+}) {
+  const edgeData = data;
+  const sourceStatus = edgeData?.sourceStatus || "pending";
+  const targetStatus = edgeData?.targetStatus || "pending";
+  const edgeColors = statusEdgeColors[sourceStatus];
+  const isAnimated = shouldAnimateEdge(sourceStatus, targetStatus);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      color: edgeColors.color,
+      glowColor: edgeColors.glow,
+      animated: isAnimated,
+      selected
+    }
+  );
+});
+var nodeTypes2 = {
+  agentIteration: AgentIterationNode
+};
+var edgeTypes2 = {
+  agentIteration: AgentIterationEdge
+};
+function AgentExecutionVisualizer({
+  resourceDefinition,
+  iterationData,
+  selectedExecutionId,
+  liveExecutions,
+  selectedIterationId,
+  onIterationSelect
+}) {
+  const { nodes, edges } = useReactFlowAgent(
+    iterationData,
+    resourceDefinition,
+    selectedIterationId,
+    liveExecutions,
+    selectedExecutionId
+  );
+  const fitViewTrigger = useFitViewTrigger(iterationData, nodes);
+  const handleIterationSelect = useCallback(
+    (id) => {
+      onIterationSelect(id);
+    },
+    [onIterationSelect]
+  );
+  const { handlePaneClick, handleContainerClick } = useNodeSelection(selectedIterationId, handleIterationSelect);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.id === "initialization" || node.id === "completion") {
+        handleIterationSelect(selectedIterationId === node.id ? null : node.id);
+        return;
+      }
+      const iterationNumber = Number.parseInt(node.id.replace("iteration-", ""), 10);
+      if (!Number.isNaN(iterationNumber)) {
+        handleIterationSelect(iterationNumber === selectedIterationId ? null : iterationNumber);
+      }
+    },
+    [selectedIterationId, handleIterationSelect]
+  );
+  if (!iterationData || nodes.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyVisualizer, {});
+  }
+  return /* @__PURE__ */ jsx(VisualizerContainer, { handleContainerClick, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes: nodeTypes2,
+      edgeTypes: edgeTypes2,
+      onNodeClick: handleNodeClick,
+      onPaneClick: handlePaneClick,
+      fitView: true,
+      fitViewOptions: {
+        padding: AGENT_CONSTANTS.FIT_VIEW_PADDING
+      },
+      proOptions: { hideAttribution: true },
+      minZoom: AGENT_CONSTANTS.MIN_ZOOM,
+      maxZoom: AGENT_CONSTANTS.MAX_ZOOM,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      selectNodesOnDrag: false,
+      zoomOnScroll: false,
+      panOnDrag: false,
+      className: Graph_module_css_default.graphContainer,
+      children: [
+        /* @__PURE__ */ jsx(GraphBackground, {}),
+        /* @__PURE__ */ jsx(GraphFitViewButton, { padding: AGENT_CONSTANTS.FIT_VIEW_PADDING, variant: "mantine", duration: 300 }),
+        /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger, padding: AGENT_CONSTANTS.FIT_VIEW_PADDING })
+      ]
+    }
+  ) }) });
+}
+function AgentExecutionTimeline({ iterationData, selectedIterationId }) {
+  const { initialization, iterations, completion } = iterationData;
+  const executionStart = initialization.startTime;
+  const executionEnd = completion.endTime;
+  return /* @__PURE__ */ jsxs(TimelineContainer, { executionStart, executionEnd, children: [
+    initialization.startTime && initialization.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: `Initialization (${formatDuration(initialization.duration || 0)})`,
+        bars: [
+          {
+            startTime: initialization.startTime,
+            endTime: initialization.endTime,
+            status: initialization.status,
+            nodeId: "initialization"
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedIterationId
+      }
+    ),
+    iterations.map((iteration) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      iteration.startTime && iteration.endTime && /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          label: `Iteration ${iteration.iterationNumber} (${formatDuration(iteration.duration || 0)})`,
+          bars: [
+            {
+              startTime: iteration.startTime,
+              endTime: iteration.endTime,
+              status: iteration.status,
+              nodeId: iteration.iterationNumber
+            }
+          ],
+          executionStart,
+          executionEnd,
+          selectedNodeId: selectedIterationId
+        }
+      ),
+      iteration.subActivities.map((activity, activityIndex) => /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          label: `${activity.type} (${formatDuration(activity.duration)})`,
+          bars: [
+            {
+              startTime: activity.startTime,
+              endTime: activity.endTime,
+              status: "completed",
+              nodeId: iteration.iterationNumber
+            }
+          ],
+          executionStart,
+          executionEnd,
+          indent: 1,
+          selectedNodeId: selectedIterationId
+        },
+        `${iteration.iterationNumber}-${activity.type}-${activity.startTime}-${activityIndex}`
+      ))
+    ] }, iteration.iterationNumber)),
+    completion.startTime && completion.endTime && /* @__PURE__ */ jsx(
+      TimelineRow,
+      {
+        label: `Completion (${formatDuration(completion.duration || 0)})`,
+        bars: [
+          {
+            startTime: completion.startTime,
+            endTime: completion.endTime,
+            status: completion.status,
+            nodeId: "completion"
+          }
+        ],
+        executionStart,
+        executionEnd,
+        selectedNodeId: selectedIterationId
+      }
+    )
+  ] });
+}
+
+export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme };