@elevasis/ui 1.3.7 → 1.5.0

package/dist/components/index.js

@@ -1 +1,3351 @@
+export { ElevasisLoader, NavigationButton } from '../chunk-R56VC63S.js';
+import '../chunk-TYV5NJV2.js';
+import { useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask } from '../chunk-G4TAF3T6.js';
+import '../chunk-JGJSZ3UE.js';
+import '../chunk-LHQTTUL2.js';
+import { Graph_default, Graph_exports, useDirectedChainHighlighting, useNodeSelection, useFitViewTrigger, useGraphHighlighting, calculateGraphHeight, GRAPH_CONSTANTS } from '../chunk-MS45MNFM.js';
+export { Graph_exports as graphStyles } from '../chunk-MS45MNFM.js';
+import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, ResourceStatusColors, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from '../chunk-YJFTZUJJ.js';
+export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-YJFTZUJJ.js';
+import '../chunk-TIRMFDM4.js';
+import { getResourceIcon } from '../chunk-LFYO3MDC.js';
+import { getErrorInfo, getErrorTitle, formatErrorMessage } from '../chunk-4VGWQ5AN.js';
+import '../chunk-2JBWPFHF.js';
+import '../chunk-FWZJH3TL.js';
+import '../chunk-NEK6JKPW.js';
+import '../chunk-L2CM2CUA.js';
+import '../chunk-KA7LO7U5.js';
+import '../chunk-DD3CCMCZ.js';
+import { useAuthContext } from '../chunk-7PLEQFHO.js';
+import { useRouterContext } from '../chunk-Q7DJKLEN.js';
+import '../chunk-MLKGABMK.js';
+import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Center, Title, Button, Loader, Collapse, ScrollArea, Card, Skeleton, Select, Alert, Code, ThemeIcon, Grid, Modal, Space, TextInput, Table, Textarea, Radio, Checkbox, NumberInput, Tooltip, UnstyledButton, Divider, Popover, Indicator, ActionIcon, SegmentedControl, Menu, Accordion, SimpleGrid } from '@mantine/core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconInfoCircle, IconChevronRight, IconSelector, IconTrash, IconCircle, IconCircleFilled, IconBell, IconFocus2, IconRobot, IconGitBranch, IconDotsVertical, IconExternalLink, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconFileOff, IconCircleX, IconCircleCheck } from '@tabler/icons-react';
+import { memo, useMemo, useState, cloneElement, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import Markdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { AreaChart } from '@mantine/charts';
+import { useDisclosure } from '@mantine/hooks';
+import { formatDistanceToNow } from 'date-fns';
+import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls, ReactFlowProvider, ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useForm } from '@mantine/form';
+import dagre from '@dagrejs/dagre';
+import { notifications } from '@mantine/notifications';
 
+function EmptyState({ icon: Icon, title, description, action, py = "xl" }) {
+  return /* @__PURE__ */ jsx(Center, { py, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(Icon, { size: 48, style: { opacity: 0.5 } }),
+    /* @__PURE__ */ jsx(Title, { order: 4, children: title }),
+    description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", children: description }),
+    action && /* @__PURE__ */ jsx(Button, { variant: "light", onClick: action.onClick, leftSection: action.icon, mt: "sm", children: action.label })
+  ] }) });
+}
+function TabCountBadge({ count, isLoading }) {
+  return /* @__PURE__ */ jsx(Box, { miw: 20, h: 20, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: isLoading ? /* @__PURE__ */ jsx(Loader, { size: 12 }) : /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", circle: count < 10, children: count }) });
+}
+function TrendIndicator({ current, previous, inverse }) {
+  const change = previous === 0 ? 0 : (current - previous) / previous * 100;
+  const isPositive = inverse ? change < 0 : change > 0;
+  const isFlat = Math.abs(change) < 0.1;
+  const color = isFlat ? "gray" : isPositive ? "green" : "red";
+  const Icon = isFlat ? IconMinus : change > 0 ? IconTrendingUp : IconTrendingDown;
+  return /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Icon, { size: 12 }),
+    /* @__PURE__ */ jsx(Badge, { size: "sm", color, variant: "light", children: isFlat ? "No change" : `${isPositive ? "+" : ""}${Math.abs(change).toFixed(1)}%` })
+  ] });
+}
+function CollapsibleSection({
+  title,
+  count,
+  countLabel,
+  children,
+  emptyMessage,
+  defaultExpanded = true,
+  maxHeight = 300
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isEmpty = count === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "8px",
+        padding: "8px",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--standard-box-shadow)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            gap: "xs",
+            mb: expanded ? "xs" : 0,
+            justify: "space-between",
+            align: "center",
+            style: { cursor: "pointer" },
+            onClick: () => setExpanded(!expanded),
+            children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", style: { flex: 1 }, children: [
+                typeof title === "string" ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    fw: 600,
+                    size: "sm",
+                    c: "var(--color-text)",
+                    style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+                    children: title
+                  }
+                ) : title,
+                count !== void 0 && countLabel && /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+                  count,
+                  " ",
+                  count === 1 ? countLabel.replace(/s$/, "") : countLabel
+                ] })
+              ] }),
+              expanded ? /* @__PURE__ */ jsx(IconChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 16 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: expanded, children: isEmpty && emptyMessage ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: emptyMessage }) : /* @__PURE__ */ jsx(ScrollArea, { h: maxHeight, type: "scroll", offsetScrollbars: true, children }) })
+      ]
+    }
+  );
+}
+var PageTitleCaption = ({ title, caption, rightSection }) => {
+  const renderCaption = () => {
+    if (!caption) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: caption }) });
+  };
+  const titleContent = /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
+    /* @__PURE__ */ jsx(Space, { h: "4" }),
+    renderCaption()
+  ] });
+  if (!rightSection) {
+    return titleContent;
+  }
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "end", children: [
+    titleContent,
+    rightSection
+  ] });
+};
+function StatsCardSkeleton({ chartHeight = 120, withChart = true, statCount = 3 }) {
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "xl", children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
+      statCount >= 2 && /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
+    ] }),
+    withChart && /* @__PURE__ */ jsx(Skeleton, { height: chartHeight })
+  ] });
+}
+function ListSkeleton({ rows = 3, rowHeight = 50 }) {
+  return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: rowHeight }, i)) });
+}
+function DetailCardSkeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "lg", children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 60 }, i)) })
+  ] });
+}
+function CustomSelector({
+  value,
+  onChange,
+  data,
+  leftSection,
+  placeholder,
+  w,
+  withCheckIcon = false,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      value,
+      onChange,
+      data,
+      leftSection,
+      placeholder,
+      w,
+      size: "xs",
+      variant: "unstyled",
+      withCheckIcon,
+      disabled,
+      styles: {
+        wrapper: {
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--mantine-radius-default)",
+          backgroundColor: "var(--color-surface)",
+          transition: "border-color 150ms ease, background-color 150ms ease",
+          "&:hover": {
+            borderColor: "var(--color-border-hover, var(--mantine-color-dark-3))"
+          }
+        },
+        input: {
+          fontSize: "var(--mantine-font-size-xs)",
+          fontWeight: 500,
+          height: "30px",
+          minHeight: "30px",
+          paddingLeft: leftSection ? "30px" : void 0,
+          borderRadius: "var(--mantine-radius-default)",
+          cursor: "pointer"
+        },
+        section: {
+          color: "var(--color-text-subtle)"
+        },
+        dropdown: {
+          border: "1px solid var(--color-border)",
+          backgroundColor: "var(--color-surface)",
+          boxShadow: "var(--card-shadow)"
+        },
+        option: {
+          fontSize: "var(--mantine-font-size-xs)"
+        }
+      }
+    }
+  );
+}
+function APIErrorAlert({
+  error,
+  title,
+  showRequestId = true,
+  icon = /* @__PURE__ */ jsx(IconAlertCircle, {}),
+  color = "red"
+}) {
+  const { message, code, requestId, retryAfter } = getErrorInfo(error);
+  const alertTitle = title || getErrorTitle(code);
+  return /* @__PURE__ */ jsxs(Alert, { icon, title: alertTitle, color, variant: "light", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: message }),
+    retryAfter && /* @__PURE__ */ jsxs(Text, { size: "sm", mt: "xs", children: [
+      "Please wait ",
+      retryAfter,
+      " seconds before retrying."
+    ] }),
+    showRequestId && requestId && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+      "Request ID: ",
+      /* @__PURE__ */ jsx(Code, { children: requestId })
+    ] })
+  ] });
+}
+
+// src/components/display/StatCard.module.css
+var StatCard_default = {};
+function StatCard(props) {
+  if (props.variant === "hero") {
+    return /* @__PURE__ */ jsx(HeroStatCard, { ...props });
+  }
+  const { label, value, icon: IconComponent, color } = props;
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color, children: /* @__PURE__ */ jsx(IconComponent, { size: 18 }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: label }),
+      /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: value })
+    ] })
+  ] }) });
+}
+function HeroStatCard({
+  icon: IconComponent,
+  value,
+  label,
+  valueColor,
+  isLoading,
+  size = "sm",
+  children
+}) {
+  const sm = size === "sm";
+  const iconSize = sm ? 36 : 46;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Skeleton, { circle: true, height: iconSize }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(Skeleton, { height: sm ? 24 : 32, width: 60 }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 12, width: 80 })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx("div", { className: sm ? StatCard_default.iconRingSm : StatCard_default.iconRing, children: /* @__PURE__ */ jsx(IconComponent, { size: sm ? 18 : 22 }) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: children ? 1 : void 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: sm ? StatCard_default.heroValueSm : StatCard_default.heroValue,
+          style: valueColor ? { color: valueColor } : void 0,
+          children: value
+        }
+      ),
+      children ? /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("span", { className: sm ? StatCard_default.heroLabelSm : StatCard_default.heroLabel, children: label }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children })
+      ] }) : /* @__PURE__ */ jsx("span", { className: sm ? StatCard_default.heroLabelSm : StatCard_default.heroLabel, children: label })
+    ] })
+  ] }) });
+}
+function StatCardSkeleton() {
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) });
+}
+var customCodeTheme = Object.fromEntries(
+  Object.entries(oneDark).map(([key, value]) => [
+    key,
+    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
+  ])
+);
+var defaultComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 3, c: "var(--color-primary)", mb: "xs", mt: "md", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 4, c: "var(--color-primary)", mb: "xs", mt: "sm", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem", fontSize: "var(--mantine-font-size-sm)" }, children }),
+  code: ({ className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    const codeString = String(children).replace(/\n$/, "");
+    if (match) {
+      return /* @__PURE__ */ jsx(
+        Prism,
+        {
+          style: customCodeTheme,
+          language: match[1],
+          PreTag: "div",
+          customStyle: {
+            margin: "0.5rem 0",
+            borderRadius: "var(--mantine-radius-default)",
+            fontSize: "0.8rem"
+          },
+          children: codeString
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Code, { ...props, children });
+  },
+  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, { pl: "sm", my: "xs", style: { borderLeft: "2px solid var(--color-border)" }, children }),
+  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fw: 700, children }),
+  em: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fs: "italic", children })
+};
+function StyledMarkdown({ children, components, className, style }) {
+  const mergedComponents = components ? { ...defaultComponents, ...components } : defaultComponents;
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Markdown, { components: mergedComponents, children }) });
+}
+var jsonTheme = Object.fromEntries(
+  Object.entries(oneDark).map(([key, value]) => [
+    key,
+    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
+  ])
+);
+function JsonViewer({ data, maxHeight, fontSize = "0.8rem" }) {
+  const jsonString = typeof data === "string" ? data : JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsx(
+    Prism,
+    {
+      language: "json",
+      style: jsonTheme,
+      customStyle: {
+        margin: 0,
+        fontSize,
+        maxHeight,
+        overflow: maxHeight ? "auto" : void 0,
+        overflowX: "auto"
+      },
+      children: jsonString
+    }
+  );
+}
+var subtleMarkdownComponents = {
+  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children })
+};
+var subtleMarkdownWrapperStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+function ContextViewer({ data }) {
+  return /* @__PURE__ */ jsx(ContextNode, { data, depth: 0 });
+}
+function ContextNode({ data, depth }) {
+  if (data === null || data === void 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No context provided" });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, style: subtleMarkdownWrapperStyle, children: data });
+  }
+  if (typeof data === "number" || typeof data === "boolean") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
+  }
+  if (Array.isArray(data)) {
+    return /* @__PURE__ */ jsx(ArrayView, { items: data, depth });
+  }
+  if (typeof data === "object") {
+    return /* @__PURE__ */ jsx(ObjectView, { data, depth });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
+}
+function formatLabel(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function hasMarkdown(value) {
+  return /(\*\*.+\*\*|^#{1,6}\s|^\s*[-*]\s|\[.+\]\(.+\)|^\|.+\|$|^>\s|```)/.test(value);
+}
+function NestedSection({ title, children }) {
+  const [expanded, setExpanded] = useState(true);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: 4, style: { cursor: "pointer", userSelect: "none" }, onClick: () => setExpanded((v) => !v), children: [
+      /* @__PURE__ */ jsx(
+        IconChevronRight,
+        {
+          size: 14,
+          color: "var(--color-primary)",
+          style: {
+            transition: "transform 150ms ease",
+            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title })
+    ] }),
+    expanded && /* @__PURE__ */ jsx(Box, { pl: "sm", style: { borderLeft: "2px solid var(--color-border)" }, children })
+  ] });
+}
+function PrimitiveValue({ value }) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "\u2014" });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value ? "Yes" : "No" });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value.toLocaleString() });
+  }
+  const str = String(value);
+  if (hasMarkdown(str)) {
+    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, children: str });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children: str });
+}
+function ArrayView({ items, depth }) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty list" });
+  }
+  const allPrimitive = items.every((item) => typeof item !== "object" || item === null);
+  if (allPrimitive) {
+    return /* @__PURE__ */ jsx(Stack, { gap: 2, children: items.map((item, i) => /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-start", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { userSelect: "none" }, children: "\u2022" }),
+      /* @__PURE__ */ jsx(PrimitiveValue, { value: item })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: items.map((item, i) => /* @__PURE__ */ jsx(Paper, { p: "sm", style: { border: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsx(ContextNode, { data: item, depth: depth + 1 }) }, i)) });
+}
+function ObjectView({ data, depth }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty" });
+  }
+  const simpleEntries = [];
+  const complexEntries = [];
+  for (const [key, value] of entries) {
+    if (value === null || value === void 0 || typeof value === "boolean" || typeof value === "number") {
+      simpleEntries.push([key, value]);
+    } else if (typeof value === "string") {
+      if (hasMarkdown(value) || value.length > 120) {
+        complexEntries.push([key, value]);
+      } else {
+        simpleEntries.push([key, value]);
+      }
+    } else {
+      complexEntries.push([key, value]);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+    simpleEntries.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: 6, children: simpleEntries.map(([key, value]) => /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          style: { minWidth: 140, flexShrink: 0, fontFamily: "var(--mantine-font-family-headings)" },
+          children: formatLabel(key)
+        }
+      ),
+      /* @__PURE__ */ jsx(PrimitiveValue, { value })
+    ] }, key)) }),
+    complexEntries.map(([key, value]) => /* @__PURE__ */ jsx(NestedSection, { title: formatLabel(key), children: /* @__PURE__ */ jsx(ContextNode, { data: value, depth: depth + 1 }) }, key))
+  ] });
+}
+var TIME_RANGE_OPTIONS = [
+  { value: "1h", label: "Last 1 hour" },
+  { value: "24h", label: "Last 24 hours" },
+  { value: "7d", label: "Last 7 days" },
+  { value: "30d", label: "Last 30 days" }
+];
+function TimeRangeSelector({ value, onChange, width = 180 }) {
+  return /* @__PURE__ */ jsx(
+    CustomSelector,
+    {
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      data: TIME_RANGE_OPTIONS,
+      leftSection: /* @__PURE__ */ jsx(IconClock, { size: 16, color: "var(--color-text-subtle)" }),
+      w: width,
+      withCheckIcon: true
+    }
+  );
+}
+function PageNotFound() {
+  const { currentPath, navigate } = useRouterContext();
+  const { user, isLoading } = useAuthContext();
+  const isAuthPage = currentPath === "/login" || currentPath === "/auth-redirect";
+  const shouldShowSidebar = user && !isLoading && !isAuthPage;
+  const height = shouldShowSidebar ? "100%" : "100vh";
+  return /* @__PURE__ */ jsx(Center, { h: height, bg: "var(--color-background)", children: /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", children: [
+    /* @__PURE__ */ jsx(IconInfoCircle, { size: 60, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Title, { order: 1, children: "Page Not Found" }),
+    /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "lg", children: "The page you are looking for does not exist." }),
+    /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { size: "md", onClick: () => navigate("/"), children: "Go Home" }) })
+  ] }) });
+}
+function ResourceCard({
+  resource,
+  onClick,
+  layout = "stack",
+  rightSection,
+  topSection,
+  lastRunLabel,
+  style,
+  ...rest
+}) {
+  const Icon = getResourceIcon(resource.type);
+  if (!Icon) {
+    return /* @__PURE__ */ jsx(Card, { shadow: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+      "Invalid resource type: ",
+      resource.type
+    ] }) });
+  }
+  const cardStyle = {
+    cursor: "pointer",
+    ...layout === "grid" || layout === "card" ? { transition: "box-shadow var(--duration-fast) var(--easing)" } : {},
+    ...style
+  };
+  const iconSize = layout === "grid" ? 28 : 20;
+  const details = /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(Icon, { size: iconSize, color: "var(--color-primary)" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            fw: 600,
+            size: "sm",
+            style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+            ...layout === "stack" ? { lineClamp: 1 } : { truncate: true },
+            children: resource.name
+          }
+        ),
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: layout === "grid" ? "xs" : "sm", children: resource.type })
+      ] }),
+      resource.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ...layout === "stack" ? { lineClamp: 1 } : { truncate: true }, children: resource.description }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "xs", children: [
+          "v",
+          resource.version
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "outline", size: layout === "grid" ? "xs" : "sm", children: resource.status.toUpperCase() })
+      ] }),
+      lastRunLabel && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lastRunLabel }),
+      /* @__PURE__ */ jsx(Text, { size: layout === "grid" ? "sm" : "xs", c: "dimmed", ff: "monospace", children: resource.resourceId })
+    ] })
+  ] });
+  if (layout === "card") {
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        withBorder: true,
+        padding: 0,
+        style: cardStyle,
+        onClick: () => onClick(resource),
+        "data-resource-id": rest["data-resource-id"],
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 8, p: "sm", pb: "xs", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(Icon, { size: 20, color: "var(--color-primary)", style: { flexShrink: 0 } }),
+              /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, truncate: true, children: resource.name })
+            ] }),
+            /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+              resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+                "v",
+                resource.version
+              ] }),
+              /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "light", size: "sm", children: resource.status.toUpperCase() })
+            ] })
+          ] }),
+          resource.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, children: resource.description }),
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", children: [
+            rightSection || /* @__PURE__ */ jsx("span", {}),
+            lastRunLabel && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: lastRunLabel })
+          ] }),
+          topSection
+        ] })
+      }
+    );
+  }
+  if (layout === "row") {
+    const [hovered, setHovered] = useState(false);
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        padding: 0,
+        style: {
+          cursor: "pointer",
+          border: "1px solid var(--color-border)",
+          transition: "background 150ms ease",
+          background: hovered ? "var(--active-background)" : "var(--glass-background)",
+          ...style
+        },
+        onClick: () => onClick(resource),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        "data-resource-id": rest["data-resource-id"],
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "18px 200px 120px 1fr 180px 140px 14px",
+              alignItems: "center",
+              gap: "var(--mantine-spacing-sm)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 18, color: "var(--color-primary)" }),
+              /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", truncate: true, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: resource.name }),
+              /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+                resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+                  "v",
+                  resource.version
+                ] }),
+                /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "light", size: "sm", children: resource.status.toUpperCase() })
+              ] }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, style: { minWidth: 0 }, children: resource.description || "" }),
+              /* @__PURE__ */ jsx("div", { style: { whiteSpace: "nowrap" }, children: rightSection }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap", textAlign: "right" }, children: lastRunLabel || "" }),
+              /* @__PURE__ */ jsx(
+                IconChevronRight,
+                {
+                  size: 14,
+                  style: {
+                    opacity: hovered ? 0.7 : 0,
+                    transition: "opacity 150ms ease"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        withBorder: true,
+        padding: "sm",
+        style: cardStyle,
+        onClick: () => onClick(resource),
+        "data-resource-id": rest["data-resource-id"],
+        children: /* @__PURE__ */ jsxs(Grid, { gutter: "sm", align: "center", children: [
+          /* @__PURE__ */ jsx(Grid.Col, { span: 8, children: details }),
+          rightSection && /* @__PURE__ */ jsx(Grid.Col, { span: 4, children: /* @__PURE__ */ jsx(Group, { justify: "flex-end", gap: "md", wrap: "nowrap", children: rightSection }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      shadow: "sm",
+      withBorder: true,
+      style: cardStyle,
+      onClick: () => onClick(resource),
+      "data-resource-id": rest["data-resource-id"],
+      children: /* @__PURE__ */ jsx(Stack, { children: details })
+    }
+  );
+}
+
+// src/components/display/ResourceCardAdapters.ts
+function catalogItemToResourceDefinition(item) {
+  return {
+    resourceId: item.resourceId,
+    name: item.resourceName,
+    description: item.description || "",
+    version: item.version,
+    type: item.resourceType,
+    status: item.status
+  };
+}
+function CardHeader({ icon, title, subtitle, rightSection }) {
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "md", children: [
+    subtitle ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        icon,
+        /* @__PURE__ */ jsx(Title, { order: 3, children: title })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: 2, children: subtitle })
+    ] }) : /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      icon,
+      /* @__PURE__ */ jsx(Title, { order: 3, children: title })
+    ] }),
+    rightSection
+  ] });
+}
+var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
+  const canClose = loading === true ? false : true;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      opened,
+      onClose,
+      padding: "xs",
+      withCloseButton: false,
+      closeOnClickOutside: canClose,
+      closeOnEscape: canClose,
+      centered: true,
+      style,
+      size,
+      children
+    }
+  );
+};
+var ConfirmationModal = ({
+  opened,
+  onClose,
+  loading,
+  icon,
+  confirmationHandler,
+  style,
+  title,
+  text,
+  buttonText,
+  buttonColor,
+  centerText
+}) => {
+  const styledIcon = cloneElement(icon, {
+    size: 55,
+    strokeWidth: 1.5
+  });
+  return /* @__PURE__ */ jsxs(CustomModal, { opened, onClose, loading, style, children: [
+    /* @__PURE__ */ jsx(Center, { children: styledIcon }),
+    /* @__PURE__ */ jsx(Space, { h: 16 }),
+    /* @__PURE__ */ jsx(Center, { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Text, { size: "lg", c: "var(--color-text)", children: title }) }),
+    /* @__PURE__ */ jsx(Space, { h: 16 }),
+    text && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", style: { textAlign: centerText ? "center" : "left" }, children: text }),
+      /* @__PURE__ */ jsx(Space, { h: 16 })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { color: buttonColor || "blue", fullWidth: true, onClick: confirmationHandler, loading, children: buttonText || "Confirm" })
+  ] });
+};
+var ConfirmationInputModal = ({
+  opened,
+  onClose,
+  loading,
+  icon,
+  confirmationHandler,
+  style,
+  title,
+  text,
+  buttonText,
+  buttonColor,
+  inputValue,
+  onInputChange,
+  expectedValue,
+  placeholder
+}) => {
+  const styledIcon = cloneElement(icon, {
+    size: 55,
+    strokeWidth: 1.5
+  });
+  return /* @__PURE__ */ jsxs(CustomModal, { opened, onClose, loading, style, children: [
+    /* @__PURE__ */ jsx(Center, { children: styledIcon }),
+    /* @__PURE__ */ jsx(Space, { h: 16 }),
+    /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Title, { order: 3, children: title }) }),
+    /* @__PURE__ */ jsx(Space, { h: 16 }),
+    text && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", children: text }),
+      /* @__PURE__ */ jsx(Space, { h: 8 })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        placeholder: placeholder || "Enter confirmation text",
+        value: inputValue,
+        onChange: (event) => onInputChange(event.currentTarget.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(Space, { h: 16 }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: buttonColor || "blue",
+        fullWidth: true,
+        onClick: confirmationHandler,
+        loading,
+        disabled: inputValue !== expectedValue,
+        children: buttonText || "Confirm"
+      }
+    )
+  ] });
+};
+function SortableHeader({ column, children, sort, onToggle, style, w }) {
+  const isActive = sort.column === column;
+  return /* @__PURE__ */ jsx(Table.Th, { style: { ...style, cursor: "pointer", userSelect: "none" }, w, onClick: () => onToggle(column), children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+    children,
+    isActive ? sort.direction === "asc" ? /* @__PURE__ */ jsx(IconChevronUp, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconSelector, { size: 14, style: { opacity: 0.3 } })
+  ] }) });
+}
+function FilterBar({ children, actions }) {
+  return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "wrap", justify: "space-between", children: [
+    /* @__PURE__ */ jsx(Group, { gap: "md", wrap: "wrap", children }),
+    /* @__PURE__ */ jsx(Group, { gap: "md", children: actions })
+  ] }) });
+}
+function TableSelectionToolbar({ selectedCount, onDelete, isDeleting }) {
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 600, c: "blue", children: [
+      selectedCount,
+      " selected"
+    ] }),
+    onDelete && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        color: "red",
+        variant: "light",
+        leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
+        loading: isDeleting,
+        onClick: onDelete,
+        children: "Delete"
+      }
+    )
+  ] });
+}
+function FormFieldRenderer({ field, form, richTextRenderer }) {
+  const commonProps = {
+    label: field.label,
+    description: field.description,
+    placeholder: field.placeholder,
+    required: field.required,
+    ...form.getInputProps(field.name)
+  };
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(TextInput, { ...commonProps });
+    case "textarea":
+      return /* @__PURE__ */ jsx(Textarea, { ...commonProps, minRows: 3, autosize: true });
+    case "number":
+      return /* @__PURE__ */ jsx(NumberInput, { ...commonProps, min: field.min, max: field.max });
+    case "select":
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          ...commonProps,
+          data: field.options?.map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })) || []
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx(Checkbox, { ...commonProps, ...form.getInputProps(field.name, { type: "checkbox" }) });
+    case "radio":
+      return /* @__PURE__ */ jsx(Radio.Group, { ...commonProps, children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: field.options?.map((opt) => /* @__PURE__ */ jsx(Radio, { value: String(opt.value), label: opt.label }, opt.value)) }) });
+    case "richtext": {
+      const inputProps = form.getInputProps(field.name);
+      if (richTextRenderer) {
+        return richTextRenderer({
+          content: inputProps.value || "",
+          onChange: (content) => form.setFieldValue(field.name, content),
+          placeholder: field.placeholder
+        });
+      }
+      return /* @__PURE__ */ jsx(Textarea, { ...commonProps, minRows: 5, autosize: true });
+    }
+    default:
+      return /* @__PURE__ */ jsx(TextInput, { ...commonProps });
+  }
+}
+function formatStartTime(timestamp) {
+  return new Date(timestamp).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function getStatusConfig(status) {
+  switch (status) {
+    case "running":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircle, { size: 14, color: "var(--color-primary)" }),
+        label: "Running",
+        color: "blue"
+      };
+    case "completed":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircleCheck, { size: 14, color: "var(--color-success)" }),
+        label: "Completed",
+        color: "green"
+      };
+    case "failed":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircleX, { size: 14, color: "var(--color-error)" }),
+        label: "Failed",
+        color: "red"
+      };
+    case "warning":
+      return {
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 14, color: "var(--color-warning)" }),
+        label: "Warning",
+        color: "yellow"
+      };
+    case "pending":
+    default:
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircle, { size: 14, color: "var(--mantine-color-gray-6)" }),
+        label: "Pending",
+        color: "gray"
+      };
+  }
+}
+function LoadingState() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+}
+function EmptyState2() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconFileOff, { size: 48, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, c: "dimmed", children: "No executions found" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Executions will appear here when workflows or agents are run" })
+  ] }) });
+}
+function ExecutionLogsTable({ executions, isLoading, onRowClick }) {
+  const handleRowClick = (execution) => {
+    onRowClick?.({
+      resourceType: execution.resourceType,
+      resourceId: execution.resourceId,
+      executionId: execution.id
+    });
+  };
+  return /* @__PURE__ */ jsxs(Table, { highlightOnHover: true, children: [
+    /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+      /* @__PURE__ */ jsx(Table.Th, { children: "Resource" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Started" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Duration" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Env" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Version" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Table.Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(LoadingState, {}) }) }) : executions.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(EmptyState2, {}) }) }) : executions.map((execution) => {
+      const statusConfig = getStatusConfig(execution.status);
+      return /* @__PURE__ */ jsxs(
+        Table.Tr,
+        {
+          style: { cursor: onRowClick ? "pointer" : void 0 },
+          onClick: () => handleRowClick(execution),
+          children: [
+            /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 200 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", lineClamp: 1, title: execution.resourceName, children: execution.resourceName }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: statusConfig.color, variant: "light", size: "sm", leftSection: statusConfig.icon, children: statusConfig.label }) }),
+            /* @__PURE__ */ jsx(Table.Td, { style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatStartTime(execution.startTime) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: execution.status === "running" ? "dimmed" : void 0, children: formatDuration(execution.duration) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "center", children: /* @__PURE__ */ jsx(Badge, { color: execution.resourceStatus === "prod" ? "green" : "gray", variant: "light", size: "sm", children: execution.resourceStatus.toUpperCase() }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "center", children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                label: `Resource: ${execution.resourceVersion ?? "-"}
+API: ${execution.apiVersion ?? "-"}
+SDK: ${execution.sdkVersion ?? "-"}`,
+                multiline: true,
+                position: "left",
+                children: /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "dimmed", style: { cursor: "help" }, children: execution.resourceVersion ?? "-" })
+              }
+            ) })
+          ]
+        },
+        execution.id
+      );
+    }) })
+  ] });
+}
+function getHealthColor(successRate, hasExecutions = true) {
+  if (!hasExecutions) return "var(--mantine-color-gray-6)";
+  if (successRate >= 95) return "var(--color-success)";
+  if (successRate >= 80) return "var(--color-warning)";
+  return "var(--color-error)";
+}
+function ResourceHealthChart({
+  healthData,
+  hasExecutions = true,
+  width = 300,
+  height = 60
+}) {
+  if (!healthData || healthData.trendData.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { w: width, h: height, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No activity" }) });
+  }
+  const chartData = healthData.trendData.map((d) => ({
+    time: d.time,
+    rate: d.rate
+  }));
+  const chartColor = getHealthColor(healthData.summary.successRate, hasExecutions);
+  return /* @__PURE__ */ jsx(Box, { w: width, h: height, children: /* @__PURE__ */ jsx(
+    AreaChart,
+    {
+      h: height,
+      data: chartData,
+      dataKey: "time",
+      series: [{ name: "rate", color: chartColor }],
+      curveType: "monotone",
+      withDots: false,
+      withTooltip: false,
+      withXAxis: false,
+      withYAxis: false,
+      fillOpacity: 0.2,
+      gridAxis: "none"
+    }
+  ) });
+}
+var categoryColors = {
+  info: "blue",
+  queue: "cyan",
+  alert: "yellow",
+  error: "red",
+  system: "gray"
+};
+function NotificationItem({ notification, onClose, onNavigate }) {
+  const markAsRead = useMarkAsRead();
+  const handleClick = async () => {
+    if (!notification.read) {
+      await markAsRead.mutateAsync(notification.id);
+    }
+    if (notification.actionUrl) {
+      onNavigate?.(notification.actionUrl);
+    }
+    onClose?.();
+  };
+  const categoryColor = categoryColors[notification.category] || "gray";
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick: handleClick,
+      style: {
+        width: "100%",
+        padding: "12px",
+        backgroundColor: "transparent",
+        transition: "background-color var(--duration-fast) var(--easing)"
+      },
+      styles: {
+        root: {
+          "&:hover": {
+            backgroundColor: "var(--color-surface-hover)"
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(Box, { mt: 4, children: notification.read ? /* @__PURE__ */ jsx(IconCircle, { size: 12, color: "var(--mantine-color-gray-5)" }) : /* @__PURE__ */ jsx(IconCircleFilled, { size: 12, color: `var(--mantine-color-${categoryColor}-6)` }) }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: notification.read ? 400 : 600, children: notification.title }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: notification.message }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true }) })
+        ] })
+      ] })
+    }
+  );
+}
+function NotificationList({ notifications: notifications2, isLoading, onClose, onNavigate }) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) });
+  }
+  if (notifications2.length === 0) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No notifications" }) });
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: 0, children: notifications2.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose, onNavigate }, notification.id)) });
+}
+function NotificationPanel({ notifications: notifications2, isLoading, onClose, onNavigate }) {
+  const markAllAsRead = useMarkAllAsRead();
+  const hasUnread = notifications2.some((n) => !n.read);
+  const handleMarkAllAsRead = async () => {
+    await markAllAsRead.mutateAsync();
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", p: "md", pb: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Notifications" }),
+      hasUnread && /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "xs", onClick: handleMarkAllAsRead, loading: markAllAsRead.isPending, children: "Mark all as read" })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(ScrollArea, { h: 400, type: "auto", children: /* @__PURE__ */ jsx(
+      NotificationList,
+      {
+        notifications: notifications2,
+        isLoading,
+        onClose,
+        onNavigate
+      }
+    ) })
+  ] });
+}
+function NotificationBell({ unreadCount, onNavigate }) {
+  const [opened, { toggle, close }] = useDisclosure(false);
+  const { data: apiCount = 0 } = useNotificationCount();
+  const { data, isLoading } = useNotifications({ limit: 20 });
+  const notifications2 = data?.notifications ?? [];
+  const count = unreadCount ?? apiCount;
+  return /* @__PURE__ */ jsxs(Popover, { opened, onChange: toggle, position: "bottom-end", width: 400, children: [
+    /* @__PURE__ */ jsx(Tooltip, { label: "Notifications", disabled: opened, children: /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Indicator, { label: count > 99 ? "99+" : count, disabled: count === 0, size: 16, offset: 4, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "lg", onClick: toggle, children: /* @__PURE__ */ jsx(IconBell, { size: 20, color: "var(--color-text-subtle)" }) }) }) }) }),
+    /* @__PURE__ */ jsx(Popover.Dropdown, { p: 0, children: /* @__PURE__ */ jsx(
+      NotificationPanel,
+      {
+        notifications: notifications2,
+        isLoading,
+        onClose: close,
+        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
+}) {
+  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("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "var(--color-success)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
+        ] }),
+        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "var(--color-error)" } }),
+          /* @__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)",
+        borderRadius: "var(--mantine-radius-default)",
+        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: "var(--color-background)",
+    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: void 0,
+      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: void 0,
+  blue: void 0,
+  orange: void 0,
+  teal: void 0,
+  gray: void 0,
+  yellow: void 0
+};
+var BaseNode = memo(function BaseNode2({
+  children,
+  color,
+  selected = false,
+  highlighted = false,
+  width = 220,
+  className = "",
+  handleDirection = "horizontal",
+  showSourceHandle = true,
+  showTargetHandle = true
+}) {
+  const typeClass = colorClassMap[color] || void 0;
+  const highlightClass = highlighted ? void 0 : "";
+  const targetPosition = handleDirection === "horizontal" ? Position.Left : Position.Top;
+  const sourcePosition = handleDirection === "horizontal" ? Position.Right : Position.Bottom;
+  return /* @__PURE__ */ jsxs("div", { className: `${ void 0} ${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: `${ void 0} ${selected ? void 0 : ""}`,
+        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_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_default.edgeAnimated,
+        style: { filter: "drop-shadow(0 0 2px white)" }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${Graph_default.edgeLabel} ${dimmed ? Graph_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_exports.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_exports.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, node2) => {
+      if (node2.id === "initialization" || node2.id === "completion") {
+        handleIterationSelect(selectedIterationId === node2.id ? null : node2.id);
+        return;
+      }
+      const iterationNumber = Number.parseInt(node2.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_exports.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,
+  IconRefresh,
+  IconAlertTriangle: IconAlertTriangle,
+  IconEdit,
+  IconEye,
+  IconRocket,
+  IconMessageCircle,
+  IconArrowUp,
+  IconClock: IconClock,
+  IconFileText,
+  IconSend,
+  IconMail
+};
+function getIcon(iconName) {
+  if (!iconName) return null;
+  const icon = iconMap[iconName];
+  if (!icon && process.env.NODE_ENV !== "production") {
+    console.warn(`[iconMap] Unknown icon "${iconName}". Allowed: ${Object.keys(iconMap).join(", ")}`);
+  }
+  return icon || null;
+}
+function resolveDefaultValue(context, path) {
+  if (!context || typeof context !== "object") return void 0;
+  return path.split(".").reduce((obj, key) => {
+    if (obj && typeof obj === "object" && key in obj) {
+      return obj[key];
+    }
+    return void 0;
+  }, context);
+}
+function ActionModal({
+  action,
+  task,
+  opened,
+  onClose,
+  onSubmit,
+  richTextRenderer,
+  error,
+  isPending
+}) {
+  const getInitialValuesFromContext = () => {
+    if (!action.form?.fields) return {};
+    return action.form.fields.reduce(
+      (acc, field) => {
+        if (field.defaultValueFromContext && task?.context) {
+          const value = resolveDefaultValue(task.context, field.defaultValueFromContext);
+          if (value !== void 0) {
+            acc[field.name] = value;
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  };
+  const form = useForm({
+    initialValues: {
+      ...getInitialValuesFromContext(),
+      ...action.payloadTemplate || {},
+      notes: ""
+    }
+  });
+  const handleSubmit = form.onSubmit((values) => {
+    const { notes, ...payload } = values;
+    onSubmit(payload, notes || void 0);
+  });
+  const Icon = getIcon(action.icon);
+  const errorMessage = error ? (() => {
+    const { message, fields, requestId } = getErrorInfo(error);
+    return formatErrorMessage(message, requestId, fields);
+  })() : null;
+  if (!action.form) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose, size: "xl", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Title, { order: 3, children: action.form.title || action.label }),
+    action.form.description && /* @__PURE__ */ jsx(Text, { c: "dimmed", children: action.form.description }),
+    action.form.fields.map((field) => /* @__PURE__ */ jsx(FormFieldRenderer, { field, form, richTextRenderer }, field.name)),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Notes (optional)",
+        placeholder: "Add any notes or reasoning...",
+        ...form.getInputProps("notes")
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx(Alert, { color: "red", variant: "light", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Submission failed", children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-line" }, children: errorMessage }) }),
+    /* @__PURE__ */ jsxs(Group, { mt: "md", justify: "space-between", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          color: action.color || "blue",
+          leftSection: Icon ? /* @__PURE__ */ jsx(Icon, { size: 16 }) : null,
+          loading: isPending,
+          children: action.label
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function TaskCard({ task, onViewExecution, richTextRenderer }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { mutate: submitAction, isPending } = useSubmitAction();
+  const { mutate: deleteTask, isPending: isDeleting } = useDeleteTask();
+  const [actionModalOpened, setActionModalOpened] = useState(false);
+  const [selectedAction, setSelectedAction] = useState(null);
+  const [confirmAction, setConfirmAction] = useState(null);
+  const [deleteConfirmOpened, setDeleteConfirmOpened] = useState(false);
+  const handleActionClick = (action) => {
+    if (action.requiresConfirmation) {
+      setConfirmAction(action);
+    } else if (action.form) {
+      setSelectedAction(action);
+      setActionModalOpened(true);
+    } else {
+      submitAction({
+        taskId: task.id,
+        actionId: action.id
+      });
+    }
+  };
+  const handleConfirm = () => {
+    if (!confirmAction) return;
+    if (confirmAction.form) {
+      setSelectedAction(confirmAction);
+      setActionModalOpened(true);
+    } else {
+      submitAction({
+        taskId: task.id,
+        actionId: confirmAction.id
+      });
+    }
+    setConfirmAction(null);
+  };
+  const getPriorityColor = (priority) => {
+    if (priority >= 8) return "red";
+    if (priority >= 5) return "yellow";
+    return "gray";
+  };
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "pending":
+        return "blue";
+      case "processing":
+        return "blue";
+      case "completed":
+        return "green";
+      case "failed":
+        return "red";
+      case "expired":
+        return "orange";
+      default:
+        return "gray";
+    }
+  };
+  const handleRetry = () => {
+    if (task.selectedAction) {
+      submitAction({
+        taskId: task.id,
+        actionId: task.selectedAction,
+        payload: task.actionPayload
+      });
+    }
+  };
+  const formatDate = (date) => {
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    return `${diffDays}d ago`;
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      withBorder: true,
+      style: { transition: "box-shadow var(--duration-fast) var(--easing)" },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.boxShadow = "var(--standard-box-shadow)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.boxShadow = "";
+      },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "sm", style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color: task.originResourceType === "agent" ? "blue" : "grape", children: task.originResourceType === "agent" ? /* @__PURE__ */ jsx(IconRobot, { size: 20 }) : /* @__PURE__ */ jsx(IconGitBranch, { size: 20 }) }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: 4, children: [
+                /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: task.description || "Task approval required" }),
+                /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", color: getPriorityColor(task.priority), radius: "sm", children: [
+                  "P",
+                  task.priority
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                  task.originResourceType === "agent" ? "Agent" : "Workflow",
+                  ": ",
+                  task.originResourceId
+                ] }),
+                /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "\u2022" }),
+                /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                  /* @__PURE__ */ jsx(IconClock, { size: 12 }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDate(task.createdAt) })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                size: "sm",
+                variant: "light",
+                color: getStatusColor(task.status),
+                radius: "sm",
+                leftSection: task.status === "processing" ? /* @__PURE__ */ jsx(Loader, { size: 6 }) : void 0,
+                children: task.status.charAt(0).toUpperCase() + task.status.slice(1)
+              }
+            ),
+            task.status === "failed" && /* @__PURE__ */ jsx(Button, { variant: "light", color: "red", size: "xs", loading: isPending, onClick: handleRetry, children: "Retry" }),
+            /* @__PURE__ */ jsxs(Menu, { shadow: "md", position: "bottom-end", offset: 8, children: [
+              /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 }) }) }),
+              /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(
+                Menu.Item,
+                {
+                  leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 14 }),
+                  disabled: task.status === "processing",
+                  onClick: () => setDeleteConfirmOpened(true),
+                  children: "Delete"
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Accordion, { value: isExpanded ? "details" : null, onChange: (value) => setIsExpanded(!!value), children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "details", children: [
+          /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "View Context" }) }),
+          /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx(ContextViewer, { data: task.context }) })
+        ] }) }),
+        task.status === "pending" && /* @__PURE__ */ jsx(Group, { gap: "xs", children: task.actions.map((action) => {
+          const Icon = getIcon(action.icon);
+          const variant = "light";
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              color: action.color || (action.type === "danger" ? "red" : "blue"),
+              leftSection: Icon ? /* @__PURE__ */ jsx(Icon, { size: 16 }) : null,
+              loading: isPending,
+              onClick: () => handleActionClick(action),
+              title: action.description,
+              size: "xs",
+              radius: "xs",
+              children: action.label
+            },
+            action.id
+          );
+        }) }),
+        task.selectedAction && /* @__PURE__ */ jsx(Accordion, { children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "submitted", children: [
+          /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "light", color: "green", radius: "xl", children: /* @__PURE__ */ jsx(IconCheck, { size: 12 }) }),
+            /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+              "Submitted: ",
+              task.actions.find((a) => a.id === task.selectedAction)?.label || task.selectedAction
+            ] }),
+            task.targetExecutionId && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "cyan", leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 10 }), children: "Executed" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+            task.actionPayload !== void 0 && task.actionPayload !== null && /* @__PURE__ */ jsx(JsonViewer, { data: task.actionPayload, maxHeight: 200 }),
+            task.completedAt && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              "Completed ",
+              formatDate(task.completedAt),
+              task.completedBy ? ` by ${task.completedBy}` : ""
+            ] }),
+            task.targetExecutionId && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "light",
+                size: "xs",
+                leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+                onClick: () => {
+                  onViewExecution?.({
+                    resourceType: task.originResourceType,
+                    resourceId: task.originResourceId,
+                    executionId: task.targetExecutionId
+                  });
+                },
+                children: "View Execution"
+              }
+            )
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CustomModal, { opened: !!confirmAction, onClose: () => setConfirmAction(null), size: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(Text, { fw: 600, children: "Confirm Action" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: confirmAction?.confirmationMessage || `Are you sure you want to ${confirmAction?.label.toLowerCase()}?` }),
+          /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "default", onClick: () => setConfirmAction(null), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, children: confirmAction?.label })
+          ] })
+        ] }) }),
+        selectedAction && /* @__PURE__ */ jsx(
+          ActionModal,
+          {
+            action: selectedAction,
+            task,
+            opened: actionModalOpened,
+            onClose: () => setActionModalOpened(false),
+            onSubmit: (payload, notes) => {
+              submitAction({
+                taskId: task.id,
+                actionId: selectedAction.id,
+                payload,
+                notes
+              });
+              setActionModalOpened(false);
+            },
+            richTextRenderer
+          }
+        ),
+        /* @__PURE__ */ jsx(CustomModal, { opened: deleteConfirmOpened, onClose: () => setDeleteConfirmOpened(false), size: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(Text, { fw: 600, children: "Delete Task" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: "Are you sure you want to delete this task? This action cannot be undone." }),
+          /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "default", onClick: () => setDeleteConfirmOpened(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "red",
+                loading: isDeleting,
+                onClick: () => {
+                  deleteTask(task.id);
+                  setDeleteConfirmOpened(false);
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+function ContentSections({ context, sections, titles }) {
+  const sectionKeys = sections || Object.keys(context).filter((key) => key !== "contentDisplay" && typeof context[key] === "string");
+  const formatTitle = (key) => key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return /* @__PURE__ */ jsx(Stack, { gap: "lg", children: sectionKeys.map((key) => {
+    const content = context[key];
+    if (typeof content !== "string") return null;
+    const title = titles?.[key] || formatTitle(key);
+    return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Title, { order: 4, children: title }),
+      /* @__PURE__ */ jsx(StyledMarkdown, { children: content })
+    ] }, key);
+  }) });
+}
+function CollapsibleJsonSection({ title, data, defaultExpanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "var(--mantine-radius-default)",
+        backgroundColor: isHovered ? "var(--color-surface-hover, rgba(0,0,0,0.02))" : "transparent",
+        transition: "background-color var(--duration-fast) var(--easing)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            gap: 4,
+            onClick: () => setIsExpanded(!isExpanded),
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            style: {
+              cursor: "pointer",
+              padding: "0.375rem 0.5rem",
+              userSelect: "none"
+            },
+            wrap: "nowrap",
+            children: [
+              /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "transparent",
+                  size: "xs",
+                  style: {
+                    transition: "transform var(--duration-fast) var(--easing)",
+                    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+                }
+              ),
+              title
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(JsonViewer, { data }) })
+      ]
+    }
+  );
+}
+function ContractDisplay({ contract, defaultExpanded = false }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Contract" }),
+    /* @__PURE__ */ jsx(
+      CollapsibleJsonSection,
+      {
+        title: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Input Schema" }),
+        data: contract.inputSchema,
+        defaultExpanded
+      }
+    ),
+    contract.outputSchema != null && /* @__PURE__ */ jsx(
+      CollapsibleJsonSection,
+      {
+        title: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Output Schema" }),
+        data: contract.outputSchema,
+        defaultExpanded
+      }
+    )
+  ] });
+}
+function ConfigCard({ icon, title, badge, items, color = "blue" }) {
+  const visibleItems = items.filter((item) => item.value !== void 0 && item.value !== null);
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { padding: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "light", color, radius: "sm", children: icon }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, children: title }),
+      badge && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color, children: badge })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: 4, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { minWidth: "fit-content" }, children: item.label }),
+      typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(Text, { size: "xs", ff: item.mono ? "monospace" : void 0, truncate: true, style: { flex: 1 }, children: item.value }) : item.value
+    ] }, index)) })
+  ] }) });
+}
+function ToolsListDisplay({ tools, compact = false, maxVisible = 0 }) {
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      !compact && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, mb: "xs", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Tools" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No tools configured" })
+    ] });
+  }
+  const normalizedTools = tools.map((tool) => typeof tool === "string" ? { name: tool } : tool);
+  const visibleTools = maxVisible > 0 ? normalizedTools.slice(0, maxVisible) : normalizedTools;
+  const hiddenCount = maxVisible > 0 ? Math.max(0, normalizedTools.length - maxVisible) : 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !compact && /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Tools" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "xs", children: tools.length })
+    ] }),
+    /* @__PURE__ */ jsx(SimpleGrid, { cols: 2, spacing: "xs", children: visibleTools.map((tool, index) => /* @__PURE__ */ jsxs(Card, { withBorder: true, p: "sm", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", mb: tool.description ? "xs" : 0, children: [
+        /* @__PURE__ */ jsx(IconTool, { size: 16, style: { color: "var(--color-text-subtle)", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", fw: 500, children: tool.name })
+      ] }),
+      tool.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: tool.description })
+    ] }, `${tool.name}-${index}`)) }),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", fs: "italic", mt: "xs", children: [
+      "+",
+      hiddenCount,
+      " more tools"
+    ] })
+  ] });
+}
+var NODE_WIDTH = 200;
+var NODE_HEIGHT = 100;
+var RANK_SEP = 80;
+var NODE_SEP = 30;
+function useNewKnowledgeMapLayout(knowledgeMap, agentName) {
+  return useMemo(() => {
+    if (!knowledgeMap || knowledgeMap.nodes.length === 0) {
+      return { nodes: [], edges: [] };
+    }
+    const agentNodeId = "__agent__";
+    const edges = knowledgeMap.nodes.map((node2) => ({
+      id: `edge-${agentNodeId}-${node2.id}`,
+      source: agentNodeId,
+      target: node2.id,
+      type: "knowledgeMap",
+      data: {}
+    }));
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({
+      rankdir: "TB",
+      ranksep: RANK_SEP,
+      nodesep: NODE_SEP,
+      marginx: 40,
+      marginy: 40
+    });
+    dagreGraph.setNode(agentNodeId, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    knowledgeMap.nodes.forEach((node2) => {
+      dagreGraph.setNode(node2.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    });
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+    dagre.layout(dagreGraph);
+    const agentDagreNode = dagreGraph.node(agentNodeId);
+    const agentNode = {
+      id: agentNodeId,
+      type: "knowledgeMap",
+      position: {
+        x: agentDagreNode.x - NODE_WIDTH / 2,
+        y: agentDagreNode.y - NODE_HEIGHT / 2
+      },
+      data: {
+        id: agentNodeId,
+        name: agentName,
+        description: "Agent with lazy-loading knowledge",
+        loaded: true,
+        hasPrompt: false,
+        isAgentNode: true
+      }
+    };
+    const knowledgeNodes = knowledgeMap.nodes.map((node2) => {
+      const dagreNode = dagreGraph.node(node2.id);
+      return {
+        id: node2.id,
+        type: "knowledgeMap",
+        position: {
+          x: dagreNode.x - NODE_WIDTH / 2,
+          y: dagreNode.y - NODE_HEIGHT / 2
+        },
+        data: {
+          id: node2.id,
+          name: node2.id,
+          description: node2.description,
+          loaded: node2.loaded,
+          hasPrompt: node2.hasPrompt,
+          isAgentNode: false
+        }
+      };
+    });
+    return { nodes: [agentNode, ...knowledgeNodes], edges };
+  }, [knowledgeMap, agentName]);
+}
+var NewKnowledgeMapNode = memo(function NewKnowledgeMapNode2({ data, selected }) {
+  const nodeColor = data.isAgentNode ? "violet" : data.loaded ? "teal" : "blue";
+  return /* @__PURE__ */ jsx(BaseNode, { color: nodeColor, selected, width: 200, handleDirection: "vertical", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      data.isAgentNode ? /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0 } }) : data.loaded ? /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0 } }) : /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0, opacity: 0.4 } }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, truncate: true, style: { flex: 1, fontFamily: "var(--mantine-font-family-headings)" }, children: data.name })
+    ] }),
+    data.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+    /* @__PURE__ */ jsx(Group, { gap: 4, children: data.isAgentNode ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: "Root" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          size: "xs",
+          variant: "light",
+          color: data.loaded ? "teal" : "gray",
+          leftSection: /* @__PURE__ */ jsx(IconBrain, { size: 10 }),
+          children: data.loaded ? "Loaded" : "Available"
+        }
+      ),
+      data.hasPrompt && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "orange", leftSection: /* @__PURE__ */ jsx(IconFileText, { size: 10 }), children: "Prompt" })
+    ] }) })
+  ] }) });
+});
+var NewKnowledgeMapEdge = memo(function NewKnowledgeMapEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected,
+  data
+}) {
+  const colors = useGraphTheme();
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      color: colors.primary,
+      glowColor: colors.primaryGlow,
+      animated: false,
+      selected,
+      dimmed: data?.dimmed
+    }
+  );
+});
+var nodeTypes3 = {
+  knowledgeMap: NewKnowledgeMapNode
+};
+var edgeTypes3 = {
+  knowledgeMap: NewKnowledgeMapEdge
+};
+function NewKnowledgeMapGraphInner({ knowledgeMap, agentName, compact, fitViewTrigger }) {
+  const { nodes: layoutNodes, edges: layoutEdges } = useNewKnowledgeMapLayout(knowledgeMap, agentName);
+  const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } = useGraphHighlighting(layoutNodes, layoutEdges);
+  if (!knowledgeMap || knowledgeMap.nodes.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      !compact && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, mb: "xs", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Knowledge Map" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No knowledge nodes configured" })
+    ] });
+  }
+  const containerHeight = calculateGraphHeight({
+    itemCount: knowledgeMap.nodeCount,
+    minHeight: 250,
+    maxHeight: 450,
+    heightPerItem: 60
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !compact && /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Knowledge Map" }),
+      /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "xs", children: [
+        knowledgeMap.nodeCount,
+        " ",
+        knowledgeMap.nodeCount === 1 ? "node" : "nodes"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: Graph_default.graphContainer,
+        style: {
+          width: "100%",
+          height: containerHeight,
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--mantine-radius-md)",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: nodeTypes3,
+            edgeTypes: edgeTypes3,
+            onNodeMouseEnter: handleNodeMouseEnter,
+            onNodeMouseLeave: handleNodeMouseLeave,
+            fitView: true,
+            fitViewOptions: { padding: 0.15 },
+            proOptions: { hideAttribution: true },
+            minZoom: GRAPH_CONSTANTS.MIN_ZOOM,
+            maxZoom: GRAPH_CONSTANTS.MAX_ZOOM,
+            nodesDraggable: false,
+            nodesConnectable: false,
+            elementsSelectable: true,
+            selectNodesOnDrag: false,
+            panOnDrag: true,
+            zoomOnScroll: true,
+            zoomOnPinch: true,
+            panOnScroll: false,
+            children: [
+              /* @__PURE__ */ jsx(GraphBackground, {}),
+              /* @__PURE__ */ jsx(GraphFitViewButton, { padding: 0.15, variant: "mantine", duration: 300 }),
+              /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function NewKnowledgeMapGraph(props) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(NewKnowledgeMapGraphInner, { ...props }) });
+}
+function DefinitionSectionHeader({ expanded, onToggle, icon, title, count }) {
+  return /* @__PURE__ */ jsxs(Group, { gap: 4, onClick: onToggle, style: { cursor: "pointer", userSelect: "none" }, wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "transparent",
+        size: "xs",
+        style: {
+          transition: "transform var(--duration-fast) var(--easing)",
+          transform: expanded ? "rotate(90deg)" : "rotate(0deg)"
+        },
+        children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+      }
+    ),
+    icon,
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title }),
+    count && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+      "(",
+      count,
+      ")"
+    ] })
+  ] });
+}
+function AgentDefinitionDisplay({ agent, defaultExpanded = false }) {
+  const [systemPromptExpanded, setSystemPromptExpanded] = useState(defaultExpanded);
+  const [configExpanded, setConfigExpanded] = useState(defaultExpanded);
+  const [knowledgeMapExpanded, setKnowledgeMapExpanded] = useState(defaultExpanded);
+  const [knowledgeMapFitTrigger, setKnowledgeMapFitTrigger] = useState(0);
+  const [toolsExpanded, setToolsExpanded] = useState(defaultExpanded);
+  const [memoryPrefsExpanded, setMemoryPrefsExpanded] = useState(defaultExpanded);
+  const hasConstraints = agent.config.constraints && Object.keys(agent.config.constraints).length > 0;
+  const hasMemoryPreferences = !!agent.config.memoryPreferences;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: configExpanded,
+          onToggle: () => setConfigExpanded(!configExpanded),
+          icon: /* @__PURE__ */ jsx(IconSettings, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "Configuration"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Collapse, { in: configExpanded, children: [
+        /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, spacing: "sm", mt: "xs", pl: "xl", children: [
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconCpu, { size: 14 }),
+              title: "Model",
+              badge: agent.modelConfig.provider,
+              items: [
+                {
+                  label: "Model",
+                  value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: agent.modelConfig.model })
+                },
+                { label: "Temperature", value: agent.modelConfig.temperature, mono: true },
+                { label: "Max Tokens", value: agent.modelConfig.maxOutputTokens?.toLocaleString(), mono: true },
+                { label: "Top P", value: agent.modelConfig.topP, mono: true },
+                {
+                  label: "Reasoning",
+                  value: agent.modelConfig.modelOptions && "reasoning_effort" in agent.modelConfig.modelOptions ? String(agent.modelConfig.modelOptions.reasoning_effort) : void 0,
+                  mono: true
+                },
+                {
+                  label: "Verbosity",
+                  value: agent.modelConfig.modelOptions && "verbosity" in agent.modelConfig.modelOptions ? String(agent.modelConfig.modelOptions.verbosity) : void 0,
+                  mono: true
+                }
+              ]
+            }
+          ),
+          hasConstraints && /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconClockHour4, { size: 14 }),
+              title: "Constraints",
+              color: "orange",
+              items: [
+                { label: "Max Iterations", value: agent.config.constraints?.maxIterations, mono: true },
+                {
+                  label: "Timeout",
+                  value: agent.config.constraints?.timeout ? `${(agent.config.constraints.timeout / 1e3).toFixed(0)}s` : void 0,
+                  mono: true
+                },
+                { label: "Max Memory Keys", value: agent.config.constraints?.maxSessionMemoryKeys, mono: true },
+                {
+                  label: "Max Memory Tokens",
+                  value: agent.config.constraints?.maxMemoryTokens?.toLocaleString(),
+                  mono: true
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconVersions, { size: 14 }),
+              title: "Version",
+              color: "grape",
+              items: [
+                {
+                  label: "Version",
+                  value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: agent.config.version })
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 14 }),
+              title: "Execution Interface",
+              color: "teal",
+              items: [
+                {
+                  label: "Has Interface",
+                  value: agent.interface ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "green", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "gray", children: "No" })
+                }
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "var(--mantine-spacing-xl)", marginTop: "var(--mantine-spacing-sm)" }, children: /* @__PURE__ */ jsx(ContractDisplay, { contract: agent.contract, defaultExpanded }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: systemPromptExpanded,
+          onToggle: () => setSystemPromptExpanded(!systemPromptExpanded),
+          icon: /* @__PURE__ */ jsx(IconBrain, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "System Prompt"
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { in: systemPromptExpanded, children: /* @__PURE__ */ jsx(Paper, { p: "sm", mt: "xs", children: /* @__PURE__ */ jsx(StyledMarkdown, { children: agent.config.systemPrompt }) }) })
+    ] }),
+    agent.knowledgeMap && agent.knowledgeMap.nodeCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          DefinitionSectionHeader,
+          {
+            expanded: knowledgeMapExpanded,
+            onToggle: () => {
+              const willExpand = !knowledgeMapExpanded;
+              setKnowledgeMapExpanded(willExpand);
+              if (willExpand) {
+                setKnowledgeMapFitTrigger((prev) => prev + 1);
+              }
+            },
+            icon: /* @__PURE__ */ jsx(IconNetwork, { size: 16, color: "var(--color-text-subtle)" }),
+            title: "Knowledge Map",
+            count: `${agent.knowledgeMap.nodeCount} ${agent.knowledgeMap.nodeCount === 1 ? "node" : "nodes"}`
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: knowledgeMapExpanded, children: /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--mantine-spacing-xs)" }, children: /* @__PURE__ */ jsx(
+          NewKnowledgeMapGraph,
+          {
+            knowledgeMap: agent.knowledgeMap,
+            agentName: agent.config.name,
+            compact: true,
+            fitViewTrigger: knowledgeMapFitTrigger
+          }
+        ) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: toolsExpanded,
+          onToggle: () => setToolsExpanded(!toolsExpanded),
+          icon: /* @__PURE__ */ jsx(IconTool, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "Tools",
+          count: String(agent.tools.length)
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { in: toolsExpanded, children: /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--mantine-spacing-xs)" }, children: /* @__PURE__ */ jsx(ToolsListDisplay, { tools: agent.tools, compact: true }) }) })
+    ] }),
+    hasMemoryPreferences && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          DefinitionSectionHeader,
+          {
+            expanded: memoryPrefsExpanded,
+            onToggle: () => setMemoryPrefsExpanded(!memoryPrefsExpanded),
+            title: "Memory Preferences"
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: memoryPrefsExpanded, children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            p: "sm",
+            mt: "xs",
+            style: {
+              backgroundColor: "var(--color-background)",
+              border: "1px solid var(--color-border)"
+            },
+            children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, children: agent.config.memoryPreferences })
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function WorkflowDefinitionDisplay({ workflow, defaultExpanded = false }) {
+  const [configExpanded, setConfigExpanded] = useState(defaultExpanded);
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      Group,
+      {
+        gap: 4,
+        onClick: () => setConfigExpanded(!configExpanded),
+        style: { cursor: "pointer", userSelect: "none" },
+        wrap: "nowrap",
+        children: [
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "transparent",
+              size: "xs",
+              style: {
+                transition: "transform var(--duration-fast) var(--easing)",
+                transform: configExpanded ? "rotate(90deg)" : "rotate(0deg)"
+              },
+              children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsx(IconSettings, { size: 16, color: "var(--color-text-subtle)" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Configuration" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Collapse, { in: configExpanded, children: [
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, spacing: "sm", mt: "xs", pl: "xl", children: [
+        /* @__PURE__ */ jsx(
+          ConfigCard,
+          {
+            icon: /* @__PURE__ */ jsx(IconVersions, { size: 14 }),
+            title: "Version",
+            color: "grape",
+            items: [
+              {
+                label: "Version",
+                value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: workflow.config.version })
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfigCard,
+          {
+            icon: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 14 }),
+            title: "Execution Interface",
+            color: "teal",
+            items: [
+              {
+                label: "Has Interface",
+                value: workflow.interface ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "green", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "gray", children: "No" })
+              }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { paddingLeft: "var(--mantine-spacing-xl)", marginTop: "var(--mantine-spacing-sm)" }, children: /* @__PURE__ */ jsx(ContractDisplay, { contract: workflow.contract, defaultExpanded }) })
+    ] })
+  ] }) });
+}
+function isAgentDefinition(structure) {
+  return structure.config.type === "agent" && "modelConfig" in structure;
+}
+function isWorkflowDefinition(structure) {
+  return structure.config.type === "workflow" && "steps" in structure;
+}
+function ResourceDefinitionSection({
+  resourceDefinition,
+  defaultExpanded = false
+}) {
+  const isAgent = isAgentDefinition(resourceDefinition);
+  const isWorkflow = isWorkflowDefinition(resourceDefinition);
+  if (isAgent) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconBrain, { size: 20 }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Agent Definition" })
+      ] }),
+      /* @__PURE__ */ jsx(Space, { h: 0 }),
+      /* @__PURE__ */ jsx(AgentDefinitionDisplay, { agent: resourceDefinition, defaultExpanded })
+    ] }) });
+  }
+  if (isWorkflow) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconSitemap, { size: 20 }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Workflow Definition" })
+      ] }),
+      /* @__PURE__ */ jsx(Space, { h: 0 }),
+      /* @__PURE__ */ jsx(WorkflowDefinitionDisplay, { workflow: resourceDefinition, defaultExpanded })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Unknown resource type" }) });
+}
+var showInfoNotification = (message) => {
+  notifications.show({
+    title: "Info",
+    message,
+    autoClose: 5e3,
+    color: "blue",
+    position: "top-right"
+  });
+};
+var showSuccessNotification = (message) => {
+  notifications.show({
+    title: "Action Successful",
+    message,
+    autoClose: 5e3,
+    color: "green",
+    position: "top-right"
+  });
+};
+var showErrorNotification = (error) => {
+  if (error instanceof Error) {
+    error = error.message;
+  }
+  notifications.show({
+    title: "Action Failed",
+    message: error,
+    autoClose: 5e3,
+    color: "red",
+    position: "top-right"
+  });
+};
+var showWarningNotification = (message) => {
+  notifications.show({
+    title: "Warning",
+    message,
+    autoClose: 5e3,
+    color: "orange",
+    position: "top-right"
+  });
+};
+var showApiErrorNotification = (error) => {
+  const { message, code, requestId, fields, retryAfter } = getErrorInfo(error);
+  notifications.show({
+    title: getErrorTitle(code),
+    message: formatErrorMessage(message, requestId, fields, retryAfter),
+    autoClose: retryAfter ? retryAfter * 1e3 : 5e3,
+    color: "red",
+    position: "top-right"
+  });
+};
+
+export { APIErrorAlert, ActionModal, AgentDefinitionDisplay, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CardHeader, CollapsibleJsonSection, CollapsibleSection, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContextViewer, ContractDisplay, CustomModal, CustomSelector, DetailCardSkeleton, EmptyState, EmptyVisualizer, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, JsonViewer, ListSkeleton, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, PageNotFound, PageTitleCaption, ResourceCard, ResourceDefinitionSection, ResourceHealthChart, SortableHeader, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TableSelectionToolbar, TaskCard, TimeRangeSelector, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, TrendIndicator, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowDefinitionDisplay, WorkflowExecutionTimeline, catalogItemToResourceDefinition, getGraphBackgroundStyles, getHealthColor, getIcon, iconMap, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };