@elevasis/ui 1.15.3 → 1.17.1

package/dist/components/index.js

@@ -1,26 +1,29 @@
-import { useCyberColors, EmptyState, CyberLegendItem, CyberAreaChart, APIErrorAlert, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, GlowDot, ContextViewer, JsonViewer, StyledMarkdown, PageTitleCaption, StatCard, CyberDonut, CollapsibleSection, ListSkeleton } from '../chunk-4NHYV42S.js';
-export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-4NHYV42S.js';
-import { SubshellLoader, SubshellContainer, SubshellSidebar, SubshellRightSideContainer, SubshellContentContainer, PageContainer, AppShellLoader, SubshellSidebarSection, CollapsibleSidebarGroup, SidebarListItem } from '../chunk-E6Q6A5TU.js';
+import { SubshellContainer, SubshellSidebar, SubshellRightSideContainer, SubshellContentContainer, PageContainer, AppShellLoader, SubshellSidebarSection, CollapsibleSidebarGroup, SidebarListItem } from '../chunk-QCEUL5QG.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from '../chunk-ZGK6XZVY.js';
+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 } from '../chunk-ZGK6XZVY.js';
+import { SubshellLoader } from '../chunk-ADSSLKKP.js';
+import { useCyberColors, EmptyState, CyberLegendItem, CyberAreaChart, APIErrorAlert, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, ContextViewer, JsonViewer, StyledMarkdown, PageTitleCaption, StatCard, CyberDonut, CollapsibleSection, ListSkeleton } from '../chunk-7S5FS7WW.js';
+export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-7S5FS7WW.js';
 export { NavigationButton } from '../chunk-KBLGVZBD.js';
 import { useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, useDeleteCredential, useCreateCredential, useCredentials, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, showApiErrorNotification, showSuccessNotification, CredentialSchemas, showErrorNotification } from '../chunk-XGVD76EL.js';
 export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-XGVD76EL.js';
 import { useCommandViewLayout, useResourcesHealth, useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask, useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useDeploymentDocs, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useCommandQueueTotals } from '../chunk-TRVSTJTK.js';
 import { getTimeRangeDates, formatBucketTime } from '../chunk-LXHZYSMQ.js';
 import '../chunk-NJJ3NQ7B.js';
-import '../chunk-LHQTTUL2.js';
-import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS, useFitViewTrigger, useGraphHighlighting, calculateGraphHeight } from '../chunk-F6RBK7NJ.js';
+import '../chunk-MHW43EOH.js';
+import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS, useGraphHighlighting, calculateGraphHeight } from '../chunk-F6RBK7NJ.js';
 export { Graph_module_css_default as graphStyles } from '../chunk-F6RBK7NJ.js';
-import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent, getResourceStatusColor } from '../chunk-XA34RETF.js';
+import { formatDuration, getResourceStatusColor } from '../chunk-XA34RETF.js';
 export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-XA34RETF.js';
 import { ResourceStatusColors, toWorkflowLogMessages } from '../chunk-ELJIFLCB.js';
 import '../chunk-L4XXM55J.js';
 import '../chunk-SLVC5OJ2.js';
 import '../chunk-RNP5R5I3.js';
-import '../chunk-WY2BCL5F.js';
+import '../chunk-F25DUOWI.js';
+import '../chunk-NUULWBAD.js';
 export { ElevasisLoader } from '../chunk-SZHARWKU.js';
-import '../chunk-XY7VKOKI.js';
-import '../chunk-6YIE72M2.js';
-import '../chunk-FEZ2TGSH.js';
+import '../chunk-UEYUPTAD.js';
+import '../chunk-7ATCF6UL.js';
 import '../chunk-53GNREDV.js';
 import { useAppearance } from '../chunk-QJ2KCHKX.js';
 import '../chunk-U2522LSW.js';
@@ -34,17 +37,17 @@ import { useOrganization } from '../chunk-DD3CCMCZ.js';
 import '../chunk-BRJ3QZ4E.js';
 import { useRouterContext } from '../chunk-Q7DJKLEN.js';
 import { z } from 'zod';
-import { Paper, Stack, Text, Group, Badge, Box, ThemeIcon, useComputedColorScheme, Card, ActionIcon, Modal, Center, Space, Button, Title, TextInput, Table, Textarea, Radio, Checkbox, Select, NumberInput, Tooltip, Loader, SegmentedControl, NumberFormatter, Alert, Switch, Pagination, UnstyledButton, Divider, ScrollArea, Popover, Indicator, Menu, Accordion, Collapse, SimpleGrid, CopyButton, Code, useMantineTheme, Timeline, RangeSlider, Progress, PasswordInput, Anchor } from '@mantine/core';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { memo, forwardRef, useMemo, useImperativeHandle, cloneElement, useState, useEffect, useCallback, Fragment as Fragment$1, useRef } from 'react';
-import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconBrain, IconFileText, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconFocus2, IconMail, IconSend, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconChartBar, IconThumbDown, IconThumbUp, IconSearch, IconFilterOff, IconArrowUpRight, IconDownload, IconInfoCircle, IconBug, IconChecks, IconCircle, IconCircleFilled, IconBell, IconRobot, IconGitBranch, IconDotsVertical, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconCopy, IconReload, IconArrowLeft, IconBook2, IconFileOff, IconList, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconPlus, IconCalendar, IconKey, IconPlayerPause, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconFilter, IconCategory, IconPencil, IconExclamationMark, IconShieldLock, IconPower, IconTag, IconBuilding, IconUserX, IconUserCheck, IconArrowDown, IconUser, IconArchive, IconFolderOpen, IconFolder } from '@tabler/icons-react';
+import { Stack, Group, Text, Badge, ThemeIcon, Box, Modal, Center, Space, Button, Title, TextInput, Table, Paper, Textarea, Radio, Checkbox, Select, NumberInput, Tooltip, Card, Loader, ActionIcon, SegmentedControl, NumberFormatter, Alert, Switch, Pagination, UnstyledButton, Divider, ScrollArea, Popover, Indicator, Menu, Accordion, Collapse, SimpleGrid, CopyButton, Code, useMantineTheme, Timeline, RangeSlider, Progress, PasswordInput, Anchor } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo, useImperativeHandle, cloneElement, useState, useRef, useCallback, useEffect } from 'react';
+import { IconBrain, IconFileText, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconMail, IconSend, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconChartBar, IconThumbDown, IconThumbUp, IconSearch, IconFilterOff, IconArrowUpRight, IconDownload, IconInfoCircle, IconBug, IconChecks, IconCircle, IconCircleFilled, IconBell, IconRobot, IconGitBranch, IconDotsVertical, IconPlayerPlay, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconArrowLeft, IconBook2, IconFileOff, IconList, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconPlus, IconCalendar, IconKey, IconPlayerPause, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconFilter, IconCategory, IconPencil, IconExclamationMark, IconShieldLock, IconPower, IconTag, IconBuilding, IconUserX, IconUserCheck, IconArrowDown, IconUser, IconArchive, IconFolderOpen, IconFolder } from '@tabler/icons-react';
 import { AreaChart } from '@mantine/charts';
 import { formatDistanceToNow } from 'date-fns';
 import { useDisclosure, useClipboard } from '@mantine/hooks';
-import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, useReactFlow, ReactFlow, ReactFlowProvider, Panel, Controls } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
 import { useForm } from '@mantine/form';
+import { useReactFlow, ReactFlow, ReactFlowProvider } from '@xyflow/react';
 import dagre from '@dagrejs/dagre';
+import '@xyflow/react/dist/style.css';
 import { notifications } from '@mantine/notifications';
 import { useNavigate } from '@tanstack/react-router';
 
@@ -1734,1202 +1737,6 @@ function NotificationBell({ unreadCount, onNavigate }) {
     ) })
   ] });
 }
-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$1, { 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
-      }
-    )
-  ] });
-}
 var iconMap = {
   IconCheck,
   IconX,
@@ -3530,10 +2337,10 @@ var NewKnowledgeMapEdge = memo(function NewKnowledgeMapEdge2({
     }
   );
 });
-var nodeTypes3 = {
+var nodeTypes = {
   knowledgeMap: NewKnowledgeMapNode
 };
-var edgeTypes3 = {
+var edgeTypes = {
   knowledgeMap: NewKnowledgeMapEdge
 };
 function NewKnowledgeMapGraphInner({ knowledgeMap, agentName, compact, fitViewTrigger }) {
@@ -3576,8 +2383,8 @@ function NewKnowledgeMapGraphInner({ knowledgeMap, agentName, compact, fitViewTr
           {
             nodes,
             edges,
-            nodeTypes: nodeTypes3,
-            edgeTypes: edgeTypes3,
+            nodeTypes,
+            edgeTypes,
             onNodeMouseEnter: handleNodeMouseEnter,
             onNodeMouseLeave: handleNodeMouseLeave,
             fitView: true,
@@ -7308,10 +6115,10 @@ var CommandViewEdge = memo(function CommandViewEdge2({
     }
   );
 });
-var nodeTypes4 = {
+var nodeTypes2 = {
   commandView: CommandViewNode
 };
-var edgeTypes4 = {
+var edgeTypes2 = {
   commandView: CommandViewEdge
 };
 var CommandViewGraphInner = forwardRef(function CommandViewGraphInner2({ graph, height, selectedNodeId, onNodeSelect }, ref) {
@@ -7350,8 +6157,8 @@ var CommandViewGraphInner = forwardRef(function CommandViewGraphInner2({ graph,
         {
           nodes: nodesWithSelection,
           edges,
-          nodeTypes: nodeTypes4,
-          edgeTypes: edgeTypes4,
+          nodeTypes: nodeTypes2,
+          edgeTypes: edgeTypes2,
           onNodeMouseEnter: handleNodeMouseEnter,
           onNodeMouseLeave: handleNodeMouseLeave,
           onNodeClick: onNodeSelect ? handleNodeClick : void 0,
@@ -8999,4 +7806,4 @@ function WebhookUrlDisplayModal({ opened, endpoint, webhookUrl, onClose }) {
   ] }) });
 }
 
-export { AbsoluteScheduleForm, ActionModal, ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, AgentDefinitionDisplay, AgentExecutionLogs, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, BaseEdge, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, BaseNode, BusinessImpactCard, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewEdge, CommandViewGraph, CommandViewNode, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContextUsageBadge, ContractDisplay, CostBreakdownCard, CostByModelTable, CostMetricsCard, CrashErrorFallback, CreateApiKeyModal, CreateCredentialModal, CreateScheduleModal, CredentialList, CredentialSettings, CustomModal, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, DocTreeNav, EditApiKeyModal, EmptyVisualizer, ErrorAnalysisCard, ErrorBreakdownTable, ErrorReportCard, ExecutionBreakdownTable, ExecutionErrorSection, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, KnowledgeBasePage, LogEntry, LogGroup, MembershipFeaturePanel, MembershipStatusBadge, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, OAuthConnectModal, OrganizationMembershipsList, RecurringScheduleForm, RelativeScheduleForm, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceHealthChart, ResourceHealthPanel, ResourceNotFoundState, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, SessionMemory, SortableHeader, TableSelectionToolbar, TaskCard, TaskScheduler, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WebhookUrlDisplayModal, WorkflowDefinitionDisplay, WorkflowExecutionLogs, WorkflowExecutionTimeline, buildErrorReport, getExecutionStatusConfig, getGraphBackgroundStyles, getHealthColor, getIcon, getLogLevelConfig, iconMap, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };
+export { AbsoluteScheduleForm, ActionModal, ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, AgentDefinitionDisplay, AgentExecutionLogs, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, BusinessImpactCard, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewEdge, CommandViewGraph, CommandViewNode, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContextUsageBadge, ContractDisplay, CostBreakdownCard, CostByModelTable, CostMetricsCard, CrashErrorFallback, CreateApiKeyModal, CreateCredentialModal, CreateScheduleModal, CredentialList, CredentialSettings, CustomModal, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, DocTreeNav, EditApiKeyModal, ErrorAnalysisCard, ErrorBreakdownTable, ErrorReportCard, ExecutionBreakdownTable, ExecutionErrorSection, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, FilterBar, FormFieldRenderer, KnowledgeBasePage, LogEntry, LogGroup, MembershipFeaturePanel, MembershipStatusBadge, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, OAuthConnectModal, OrganizationMembershipsList, RecurringScheduleForm, RelativeScheduleForm, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceHealthChart, ResourceHealthPanel, ResourceNotFoundState, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, SessionMemory, SortableHeader, TableSelectionToolbar, TaskCard, TaskScheduler, ToolsListDisplay, WebhookUrlDisplayModal, WorkflowDefinitionDisplay, WorkflowExecutionLogs, buildErrorReport, getExecutionStatusConfig, getHealthColor, getIcon, getLogLevelConfig, iconMap, useNewKnowledgeMapLayout };