@elevasis/ui 1.19.0 → 1.20.0

package/dist/chunk-U4CHEPIL.js

@@ -0,0 +1,2622 @@
+import { SubshellSidebarSection } from './chunk-JFRG2JJE.js';
+import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from './chunk-GH7ZO4VD.js';
+import { useCyberColors, CyberDonut } from './chunk-ERVB3QJQ.js';
+import { ContextViewer, JsonViewer, StyledMarkdown, CardHeader } from './chunk-AWMZCYKH.js';
+import { showApiErrorNotification, showSuccessNotification } from './chunk-XOTN3X3Z.js';
+import { useCommandViewLayout, useSubmitAction, useDeleteTask, useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals } from './chunk-AQ5MQDSS.js';
+import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS, useGraphHighlighting, calculateGraphHeight } from './chunk-F6RBK7NJ.js';
+import { getResourceStatusColor } from './chunk-XA34RETF.js';
+import { toWorkflowLogMessages } from './chunk-ELJIFLCB.js';
+import { useAppearance } from './chunk-QJ2KCHKX.js';
+import { getResourceIcon, getResourceColor, getErrorInfo, formatErrorMessage } from './chunk-IOKL7BKE.js';
+import { useOrganization } from './chunk-DD3CCMCZ.js';
+import { Stack, Group, Text, Badge, ThemeIcon, Box, TextInput, Textarea, Radio, Checkbox, Select, NumberInput, Title, Alert, Button, Card, Loader, Menu, ActionIcon, Accordion, Collapse, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, useMantineTheme, UnstyledButton, RangeSlider, ScrollArea } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { IconBrain, IconFileText, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconMail, IconSend, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconRobot, IconGitBranch, IconDotsVertical, IconTrash, IconPlayerPlay, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTerminal2, IconBug, IconChevronDown, IconFilter, IconCategory, IconArchive, IconDownload } from '@tabler/icons-react';
+import { useForm } from '@mantine/form';
+import { memo, forwardRef, useMemo, useImperativeHandle, useState, useRef, useCallback, useEffect } from 'react';
+import dagre from '@dagrejs/dagre';
+import { useReactFlow, ReactFlow, ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+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 });
+  }
+}
+var iconMap = {
+  IconCheck,
+  IconX,
+  IconRefresh,
+  IconAlertTriangle,
+  IconEdit,
+  IconEye,
+  IconRocket,
+  IconMessageCircle,
+  IconArrowUp,
+  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 getPriorityColor2 = (priority) => {
+    if (priority >= 8) return "red";
+    if (priority >= 5) return "yellow";
+    return "gray";
+  };
+  const getStatusColor2 = (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: getPriorityColor2(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: getStatusColor2(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((node) => ({
+      id: `edge-${agentNodeId}-${node.id}`,
+      source: agentNodeId,
+      target: node.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((node) => {
+      dagreGraph.setNode(node.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((node) => {
+      const dagreNode = dagreGraph.node(node.id);
+      return {
+        id: node.id,
+        type: "knowledgeMap",
+        position: {
+          x: dagreNode.x - NODE_WIDTH / 2,
+          y: dagreNode.y - NODE_HEIGHT / 2
+        },
+        data: {
+          id: node.id,
+          name: node.id,
+          description: node.description,
+          loaded: node.loaded,
+          hasPrompt: node.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 nodeTypes = {
+  knowledgeMap: NewKnowledgeMapNode
+};
+var edgeTypes = {
+  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_module_css_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,
+            edgeTypes,
+            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__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconBrain, { size: 18 }), title: "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__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconSitemap, { size: 18 }), title: "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" }) });
+}
+
+// src/components/operations/executions/logConstants.ts
+var LOG_LEVEL_CONFIG = {
+  debug: {
+    label: "DEBUG",
+    color: "gray",
+    textColor: "var(--color-text-subtle)",
+    icon: "\u{1F50D}"
+  },
+  info: {
+    label: "INFO",
+    color: "blue",
+    textColor: "var(--color-text-dimmed)",
+    icon: "\u2139\uFE0F"
+  },
+  warn: {
+    label: "WARN",
+    color: "yellow",
+    textColor: "var(--color-warning)",
+    icon: "\u26A0\uFE0F"
+  },
+  error: {
+    label: "ERROR",
+    color: "red",
+    textColor: "var(--color-error)",
+    icon: "\u274C"
+  }
+};
+var EXECUTION_STATUS_CONFIG = {
+  pending: {
+    label: "Pending",
+    color: "gray",
+    textColor: "var(--color-text-dimmed)"
+  },
+  running: {
+    label: "Running",
+    color: "blue",
+    textColor: "var(--color-primary)"
+  },
+  completed: {
+    label: "Completed",
+    color: "green",
+    textColor: "var(--color-success)"
+  },
+  failed: {
+    label: "Failed",
+    color: "red",
+    textColor: "var(--color-error)"
+  },
+  warning: {
+    label: "Warning",
+    color: "yellow",
+    textColor: "var(--color-warning)"
+  }
+};
+function getLogLevelConfig(level) {
+  const normalizedLevel = level.toLowerCase();
+  return LOG_LEVEL_CONFIG[normalizedLevel] || LOG_LEVEL_CONFIG.info;
+}
+function getExecutionStatusConfig(status) {
+  const normalizedStatus = status.toLowerCase();
+  return EXECUTION_STATUS_CONFIG[normalizedStatus] || EXECUTION_STATUS_CONFIG.pending;
+}
+function BaseExecutionLogsHeader({
+  execution,
+  resourceId,
+  onDeleteClick,
+  onRetryClick,
+  onCancelClick,
+  renderMetrics
+}) {
+  const { currentMembership } = useOrganization();
+  const organizationName = currentMembership?.organization?.name;
+  const resourceTag = organizationName ? `${organizationName}/${resourceId}` : resourceId;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconTerminal2, { size: 18 }),
+        title: "Execution Logs",
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Badge, { color: getExecutionStatusConfig(execution.status).color, size: "sm", children: getExecutionStatusConfig(execution.status).label.toUpperCase() }),
+          /* @__PURE__ */ jsx(Badge, { color: getResourceStatusColor(execution.resourceStatus), size: "sm", variant: "outline", children: execution.resourceStatus.toUpperCase() }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-subtle)", ff: "monospace", children: execution.id }),
+          /* @__PURE__ */ jsx(CopyButton, { value: `${resourceTag} ${execution.id}`, children: ({ copied, copy }) => /* @__PURE__ */ jsx(ActionIcon, { onClick: copy, variant: "subtle", color: copied ? "green" : "var(--color-text-subtle)", children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconCopy, { size: 16 }) }) }),
+          onCancelClick && /* @__PURE__ */ jsx(ActionIcon, { onClick: onCancelClick, variant: "subtle", color: "orange", children: /* @__PURE__ */ jsx(IconPlayerStop, { size: 16 }) }),
+          onRetryClick && /* @__PURE__ */ jsx(ActionIcon, { onClick: onRetryClick, variant: "subtle", children: /* @__PURE__ */ jsx(IconReload, { size: 16 }) }),
+          /* @__PURE__ */ jsx(ActionIcon, { onClick: onDeleteClick, variant: "subtle", color: "var(--color-error)", children: /* @__PURE__ */ jsx(IconTrash, { size: 16 }) })
+        ] })
+      }
+    ),
+    renderMetrics ? renderMetrics(execution) : /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+        /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "Started:" }),
+        " ",
+        new Date(execution.startTime).toLocaleString()
+      ] }),
+      execution.endTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "Ended:" }),
+          " ",
+          new Date(execution.endTime).toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "Duration:" }),
+          " ",
+          ((execution.endTime - execution.startTime) / 1e3).toFixed(2),
+          "s"
+        ] })
+      ] }),
+      execution.apiVersion && /* @__PURE__ */ jsxs(Text, { size: "sm", component: "span", children: [
+        /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "API:" }),
+        " ",
+        /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+          "v",
+          execution.apiVersion
+        ] })
+      ] }),
+      execution.resourceVersion && /* @__PURE__ */ jsxs(Text, { size: "sm", component: "span", children: [
+        /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "Resource:" }),
+        " ",
+        /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+          "v",
+          execution.resourceVersion
+        ] })
+      ] }),
+      execution.sdkVersion && /* @__PURE__ */ jsxs(Text, { size: "sm", component: "span", children: [
+        /* @__PURE__ */ jsx(Text, { span: true, fw: 500, children: "SDK:" }),
+        " ",
+        /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+          "v",
+          execution.sdkVersion
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function BaseExecutionLogsStates({ executionId, isLoading, execution }) {
+  const { loader } = useAppearance();
+  if (!executionId) {
+    return /* @__PURE__ */ jsx(Center, { h: "100%", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Select an execution to view details" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { h: "100%", children: loader });
+  }
+  if (!execution) {
+    return /* @__PURE__ */ jsx(Center, { h: "100%", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Execution not found" }) });
+  }
+  return null;
+}
+function ExecutionErrorSection({ executionId, fallbackError }) {
+  const { data: errors, isLoading, isError } = useErrorDetail(executionId);
+  const [showStack, setShowStack] = useState(false);
+  const [showErrorContext, setShowErrorContext] = useState(false);
+  const primaryError = errors?.[0];
+  if (isLoading || isError || !primaryError) {
+    return /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        withBorder: true,
+        p: "sm",
+        bg: "color-mix(in srgb, var(--color-error) 10%, transparent)",
+        style: { borderColor: "var(--color-error)" },
+        children: [
+          /* @__PURE__ */ jsx(Text, { fw: 500, c: "var(--color-error)", mb: "xs", children: "Error" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-error)", ff: "monospace", style: { whiteSpace: "pre-wrap" }, children: fallbackError })
+        ]
+      }
+    );
+  }
+  const severityColor = primaryError.severity === "critical" ? "red" : primaryError.severity === "warning" ? "orange" : "blue";
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      withBorder: true,
+      p: "sm",
+      bg: "color-mix(in srgb, var(--color-error) 10%, transparent)",
+      style: { borderColor: "var(--color-error)" },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fw: 600,
+                size: "sm",
+                c: "var(--color-error)",
+                style: { fontFamily: "var(--mantine-font-family-headings)" },
+                children: primaryError.errorType
+              }
+            ),
+            /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: primaryError.category })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { color: severityColor, variant: "light", size: "sm", children: primaryError.severity })
+        ] }),
+        /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconBug, { size: 16 }), children: primaryError.message }),
+        errors && errors.length > 1 && /* @__PURE__ */ jsxs(Alert, { color: "yellow", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), children: [
+          "This execution has ",
+          errors.length,
+          " errors (including retries). Showing most recent."
+        ] }),
+        primaryError.stackTrace && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              justify: "space-between",
+              mb: "xs",
+              onClick: () => setShowStack(!showStack),
+              style: { cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Stack Trace" }),
+                /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                  /* @__PURE__ */ jsx(CopyButton, { value: primaryError.stackTrace, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy stack trace", children: /* @__PURE__ */ jsx(
+                    ActionIcon,
+                    {
+                      variant: "subtle",
+                      size: "sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        copy();
+                      },
+                      children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(
+                    IconChevronDown,
+                    {
+                      size: 14,
+                      style: {
+                        transform: showStack ? "rotate(180deg)" : "rotate(0)",
+                        transition: "transform var(--duration-fast)"
+                      }
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Collapse, { in: showStack, children: /* @__PURE__ */ jsx(Code, { block: true, style: { maxHeight: 300, overflow: "auto", fontSize: "12px", lineHeight: "1.5" }, children: primaryError.stackTrace }) })
+        ] }),
+        primaryError.errorContext && Object.keys(primaryError.errorContext).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              justify: "space-between",
+              mb: "xs",
+              onClick: () => setShowErrorContext(!showErrorContext),
+              style: { cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Error Context" }),
+                /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                  /* @__PURE__ */ jsx(CopyButton, { value: JSON.stringify(primaryError.errorContext, null, 2), children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy error context", children: /* @__PURE__ */ jsx(
+                    ActionIcon,
+                    {
+                      variant: "subtle",
+                      size: "sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        copy();
+                      },
+                      children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(
+                    IconChevronDown,
+                    {
+                      size: 14,
+                      style: {
+                        transform: showErrorContext ? "rotate(180deg)" : "rotate(0)",
+                        transition: "transform var(--duration-fast)"
+                      }
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Collapse, { in: showErrorContext, children: /* @__PURE__ */ jsx(JsonViewer, { data: primaryError.errorContext, maxHeight: 200, fontSize: "12px" }) })
+        ] })
+      ] })
+    }
+  );
+}
+function ArchivedLogsNotice({ logCount, isLoading, error, onLoad }) {
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", radius: "md", bg: "color-mix(in srgb, var(--color-primary) 5%, transparent)", children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(IconArchive, { size: 18, style: { color: "var(--color-text-dimmed)" } }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+        "Logs archived (",
+        logCount.toLocaleString(),
+        " entries)"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-error)", children: error }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "light",
+        size: "xs",
+        leftSection: isLoading ? /* @__PURE__ */ jsx(Loader, { size: 14 }) : /* @__PURE__ */ jsx(IconDownload, { size: 14 }),
+        onClick: onLoad,
+        disabled: isLoading,
+        w: "fit-content",
+        children: isLoading ? "Loading archived logs..." : "Load archived logs"
+      }
+    )
+  ] }) });
+}
+function BaseExecutionLogs({
+  resourceId,
+  resourceType,
+  executionId,
+  execution: externalExecution,
+  onExecutionDeleted,
+  renderLogsSection,
+  renderMetrics,
+  hideInput = false,
+  hideResult = false,
+  hideError = false
+}) {
+  const { data: fetchedExecution, isLoading } = useExecution(resourceId, executionId || "");
+  const baseExecution = externalExecution ?? fetchedExecution;
+  const archivedLogs = useArchivedLogs(baseExecution?.isArchived ? executionId : void 0);
+  const typedExecution = useMemo(() => {
+    if (!baseExecution) return void 0;
+    if (archivedLogs.logs) {
+      return { ...baseExecution, executionLogs: archivedLogs.logs, isArchived: false };
+    }
+    return baseExecution;
+  }, [baseExecution, archivedLogs.logs]);
+  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+  const [retryModalOpened, setRetryModalOpened] = useState(false);
+  const [cancelModalOpened, setCancelModalOpened] = useState(false);
+  const [retryError, setRetryError] = useState(null);
+  const deleteExecutionMutation = useDeleteExecution();
+  const retryExecutionMutation = useRetryExecution();
+  const cancelExecutionMutation = useCancelExecution();
+  const handleDelete = async () => {
+    if (!executionId) return;
+    try {
+      await deleteExecutionMutation.mutateAsync({
+        resourceId,
+        executionId
+      });
+      setDeleteModalOpened(false);
+      onExecutionDeleted?.();
+    } catch (error) {
+      console.error("Failed to delete execution:", error);
+      showApiErrorNotification(error);
+    }
+  };
+  const handleCancel = async () => {
+    if (!executionId) return;
+    try {
+      await cancelExecutionMutation.mutateAsync({
+        resourceId,
+        executionId
+      });
+      setCancelModalOpened(false);
+    } catch (error) {
+      console.error("Failed to cancel execution:", error);
+      showApiErrorNotification(error);
+    }
+  };
+  const handleRetry = async () => {
+    if (!typedExecution || !resourceType) return;
+    setRetryError(null);
+    try {
+      await retryExecutionMutation.mutateAsync({
+        resourceId,
+        resourceType,
+        input: typedExecution.input
+      });
+      setRetryModalOpened(false);
+      showSuccessNotification("Resource re-executed with the same inputs.");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to re-execute resource";
+      setRetryError(message);
+    }
+  };
+  if (!executionId || isLoading || !typedExecution) {
+    return /* @__PURE__ */ jsx(BaseExecutionLogsStates, { executionId, isLoading, execution: typedExecution });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { h: "100%", children: [
+    /* @__PURE__ */ jsx(
+      BaseExecutionLogsHeader,
+      {
+        execution: typedExecution,
+        resourceId,
+        onDeleteClick: () => setDeleteModalOpened(true),
+        onCancelClick: typedExecution.status === "running" ? () => setCancelModalOpened(true) : void 0,
+        onRetryClick: resourceType ? () => {
+          setRetryError(null);
+          setRetryModalOpened(true);
+        } : void 0,
+        renderMetrics
+      }
+    ),
+    !hideInput && typedExecution.input != null && /* @__PURE__ */ jsx(Paper, { withBorder: true, bg: "none", children: /* @__PURE__ */ jsx(CollapsibleJsonSection, { title: /* @__PURE__ */ jsx(Text, { fw: 500, children: "Input" }), data: typedExecution.input }) }),
+    typedExecution.isArchived && /* @__PURE__ */ jsx(
+      ArchivedLogsNotice,
+      {
+        logCount: typedExecution.archivedLogCount ?? 0,
+        isLoading: archivedLogs.isLoading,
+        error: archivedLogs.error,
+        onLoad: archivedLogs.fetch
+      }
+    ),
+    !typedExecution.isArchived && renderLogsSection && /* @__PURE__ */ jsx(Paper, { withBorder: true, bg: "none", p: "sm", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: renderLogsSection(typedExecution) }),
+    !hideResult && typedExecution.result != null && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(
+      CollapsibleJsonSection,
+      {
+        title: /* @__PURE__ */ jsx(Text, { fw: 500, c: "var(--color-success)", children: "Result" }),
+        data: typedExecution.result
+      }
+    ) }),
+    !hideError && typedExecution.error && /* @__PURE__ */ jsx(ExecutionErrorSection, { executionId: typedExecution.id, fallbackError: typedExecution.error }),
+    /* @__PURE__ */ jsx(
+      ConfirmationModal,
+      {
+        opened: deleteModalOpened,
+        onClose: () => setDeleteModalOpened(false),
+        icon: /* @__PURE__ */ jsx(IconTrash, { color: "red" }),
+        title: "Delete Execution Log",
+        text: "Are you sure you want to delete this execution log? This action cannot be undone.",
+        buttonText: "Delete",
+        buttonColor: "red",
+        confirmationHandler: handleDelete,
+        loading: deleteExecutionMutation.isPending
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmationModal,
+      {
+        opened: cancelModalOpened,
+        onClose: () => setCancelModalOpened(false),
+        icon: /* @__PURE__ */ jsx(IconPlayerStop, {}),
+        title: "Stop Execution",
+        text: "Are you sure you want to stop this running execution? This action cannot be undone.",
+        buttonText: "Stop",
+        buttonColor: "orange",
+        confirmationHandler: handleCancel,
+        loading: cancelExecutionMutation.isPending
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CustomModal,
+      {
+        opened: retryModalOpened,
+        onClose: () => setRetryModalOpened(false),
+        size: "sm",
+        loading: retryExecutionMutation.isPending,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(IconReload, { size: 24, color: "var(--color-primary)" }),
+            /* @__PURE__ */ jsx(Title, { order: 4, children: "Re-execute Resource" })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+            "This will re-execute",
+            " ",
+            /* @__PURE__ */ jsx(Text, { span: true, fw: 600, children: resourceId }),
+            " ",
+            "with the exact same inputs from this execution."
+          ] }),
+          typedExecution?.input != null && /* @__PURE__ */ jsx(Paper, { withBorder: true, bg: "none", style: { maxHeight: 150, overflow: "auto" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", ff: "monospace", style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(typedExecution.input, null, 2) }) }),
+          retryError && /* @__PURE__ */ jsx(
+            Paper,
+            {
+              withBorder: true,
+              p: "xs",
+              bg: "color-mix(in srgb, var(--color-error) 10%, transparent)",
+              style: { borderColor: "var(--color-error)" },
+              children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-error)", children: retryError })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "light",
+                onClick: () => setRetryModalOpened(false),
+                disabled: retryExecutionMutation.isPending,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { onClick: handleRetry, loading: retryExecutionMutation.isPending, children: "Re-execute" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function LogEntry({ log, index }) {
+  const hasContext = log.context && Object.keys(log.context).length > 0;
+  const logConfig = getLogLevelConfig(log.level);
+  const logTitle = /* @__PURE__ */ jsxs(Group, { gap: "xs", style: { flex: 1 }, wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        variant: "light",
+        color: logConfig.color,
+        style: { minWidth: "60px", fontFamily: "var(--mantine-font-family-monospace)" },
+        children: logConfig.label
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { span: true, c: "dimmed", size: "xs", style: { fontFamily: "var(--mantine-font-family-monospace)" }, children: new Date(log.timestamp).toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3
+    }) }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", span: true, style: { fontFamily: "var(--mantine-font-family-monospace)" }, children: log.message })
+  ] });
+  if (!hasContext) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "0.375rem 0.5rem",
+          borderRadius: "var(--mantine-radius-default)"
+        },
+        children: logTitle
+      },
+      index
+    );
+  }
+  return /* @__PURE__ */ jsx(CollapsibleJsonSection, { title: logTitle, data: log.context }, index);
+}
+function LogGroup({ title, logs, statusBadge }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "8px",
+        padding: "12px",
+        border: "1px solid var(--color-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", c: "var(--color-text)", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: title }),
+          statusBadge && /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: statusBadge.color, children: statusBadge.label }),
+          /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+            logs.length,
+            " ",
+            logs.length === 1 ? "log" : "logs"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { gap: 4, children: logs.map((log, logIndex) => /* @__PURE__ */ jsx(LogEntry, { log, index: logIndex }, logIndex)) })
+      ]
+    }
+  );
+}
+function AgentExecutionLogs({
+  resourceId,
+  executionId,
+  execution: externalExecution,
+  selectedIterationId,
+  iterationData,
+  onExecutionDeleted
+}) {
+  const isIterationSelected = selectedIterationId !== null;
+  const logGroups = useMemo(() => {
+    if (!iterationData) {
+      return [];
+    }
+    if (selectedIterationId !== null) {
+      if (selectedIterationId === "initialization") {
+        return [
+          {
+            title: "Initialization",
+            groupKey: "initialization",
+            logs: [],
+            // Will be filled in renderLogsSection
+            status: iterationData.initialization.status
+          }
+        ];
+      }
+      if (selectedIterationId === "completion") {
+        return [
+          {
+            title: "Completion",
+            groupKey: "completion",
+            logs: [],
+            // Will be filled in renderLogsSection
+            status: iterationData.completion.status
+          }
+        ];
+      }
+      const selectedIteration = iterationData.iterations.find((iter) => iter.iterationNumber === selectedIterationId);
+      if (!selectedIteration) {
+        return [];
+      }
+      return [
+        {
+          title: `Iteration ${selectedIteration.iterationNumber}`,
+          groupKey: selectedIteration.iterationNumber,
+          logs: [],
+          // Will be filled in renderLogsSection
+          status: selectedIteration.status
+        }
+      ];
+    }
+    const groups = [];
+    groups.push({
+      title: "Initialization",
+      groupKey: "initialization",
+      logs: [],
+      status: iterationData.initialization.status
+    });
+    for (const iteration of iterationData.iterations) {
+      groups.push({
+        title: `Iteration ${iteration.iterationNumber}`,
+        groupKey: iteration.iterationNumber,
+        logs: [],
+        status: iteration.status
+      });
+    }
+    groups.push({
+      title: "Completion",
+      groupKey: "completion",
+      logs: [],
+      status: iterationData.completion.status
+    });
+    return groups;
+  }, [selectedIterationId, iterationData]);
+  const getSelectedNodeTitle = () => {
+    if (selectedIterationId === null) return null;
+    if (selectedIterationId === "initialization") return "Initialization";
+    if (selectedIterationId === "completion") return "Completion";
+    return `Iteration ${selectedIterationId}`;
+  };
+  const selectedNodeTitle = getSelectedNodeTitle();
+  const getIterationStatusBadge = (_groupKey, status) => {
+    if (status) {
+      const statusConfig = getExecutionStatusConfig(status);
+      return {
+        label: statusConfig.label,
+        color: statusConfig.color
+      };
+    }
+    return null;
+  };
+  const renderLogsSection = (execution) => {
+    if (!execution.executionLogs || execution.executionLogs.length === 0) {
+      return /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", mt: "md", children: "No logs available" });
+    }
+    const logsByGroup = /* @__PURE__ */ new Map();
+    for (const log of execution.executionLogs) {
+      const context = log.context;
+      let groupKey;
+      if (context?.type === "agent" && "lifecycle" in context) {
+        const lifecycle = context.lifecycle;
+        if (lifecycle === "initialization") {
+          groupKey = "initialization";
+        } else if (lifecycle === "iteration" && "iteration" in context) {
+          groupKey = context.iteration;
+        } else if (lifecycle === "completion") {
+          groupKey = "completion";
+        } else {
+          groupKey = "completion";
+        }
+      } else {
+        groupKey = "completion";
+      }
+      if (!logsByGroup.has(groupKey)) {
+        logsByGroup.set(groupKey, []);
+      }
+      logsByGroup.get(groupKey).push(log);
+    }
+    const populatedGroups = logGroups.map((group) => ({
+      ...group,
+      logs: logsByGroup.get(group.groupKey) || []
+    })).filter((group) => group.logs.length > 0);
+    const totalLogsCount = populatedGroups.reduce((total, group) => total + group.logs.length, 0);
+    return /* @__PURE__ */ jsxs(Stack, { gap: "xs", style: { flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fw: 500, children: selectedNodeTitle ? `Logs for ${selectedNodeTitle} (${totalLogsCount})` : `Logs (${totalLogsCount})` }),
+        iterationData && /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Iterations: ",
+            iterationData.iterations.filter((i) => i.status === "completed").length,
+            "/",
+            iterationData.totalIterations
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Events: ",
+            iterationData.iterations.reduce((sum, iter) => sum + iter.iterationEvents.length, 0)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { style: { flex: 1 }, scrollbarSize: 8, children: /* @__PURE__ */ jsxs(Stack, { children: [
+        populatedGroups.map((group) => {
+          const statusBadge = getIterationStatusBadge(group.groupKey, group.status);
+          return /* @__PURE__ */ jsx(
+            LogGroup,
+            {
+              title: group.title,
+              logs: group.logs,
+              statusBadge: statusBadge || void 0
+            },
+            group.groupKey
+          );
+        }),
+        populatedGroups.length === 0 && /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", mt: "md", children: selectedNodeTitle ? `No logs for ${selectedNodeTitle}` : "No logs available" })
+      ] }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    BaseExecutionLogs,
+    {
+      resourceId,
+      resourceType: "agent",
+      executionId,
+      execution: externalExecution,
+      onExecutionDeleted,
+      renderLogsSection,
+      hideInput: isIterationSelected,
+      hideResult: isIterationSelected,
+      hideError: isIterationSelected
+    }
+  );
+}
+function WorkflowExecutionLogs({
+  resourceId,
+  executionId,
+  execution: externalExecution,
+  selectedStepId,
+  timelineData,
+  onExecutionDeleted
+}) {
+  const { data: fetchedExecution } = useExecution(resourceId, executionId || "");
+  const typedExecution = externalExecution ?? fetchedExecution;
+  const isStepSelected = !!selectedStepId;
+  const logGroups = useMemo(() => {
+    if (selectedStepId && timelineData) {
+      const selectedStep2 = timelineData.steps.find((s) => s.stepId === selectedStepId);
+      return selectedStep2 ? [{ stepName: selectedStep2.stepName, stepId: selectedStep2.stepId, logs: selectedStep2.logs }] : [];
+    }
+    if (!timelineData || !typedExecution) {
+      return [];
+    }
+    const groups = [];
+    for (const step of timelineData.steps) {
+      if (step.logs.length > 0) {
+        groups.push({
+          stepName: step.stepName,
+          stepId: step.stepId,
+          logs: step.logs
+        });
+      }
+    }
+    const stepLogTimestamps = new Set(timelineData.steps.flatMap((s) => s.logs.map((l) => l.timestamp)));
+    const generalExecutionLogs = typedExecution.executionLogs.filter((log) => !stepLogTimestamps.has(log.timestamp));
+    const generalWorkflowLogs = toWorkflowLogMessages(generalExecutionLogs);
+    if (generalWorkflowLogs.length > 0) {
+      groups.unshift({
+        stepName: "General",
+        stepId: "general",
+        logs: generalWorkflowLogs
+      });
+    }
+    return groups;
+  }, [selectedStepId, timelineData, typedExecution]);
+  const selectedStep = selectedStepId && timelineData ? timelineData.steps.find((s) => s.stepId === selectedStepId) : null;
+  const totalLogsCount = logGroups.reduce((total, group) => total + group.logs.length, 0);
+  const scrollViewportRef = useRef(null);
+  const isNearBottomRef = useRef(true);
+  const handleScroll = useCallback(() => {
+    const viewport = scrollViewportRef.current;
+    if (!viewport) return;
+    isNearBottomRef.current = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 50;
+  }, []);
+  useEffect(() => {
+    if (!isNearBottomRef.current) return;
+    const viewport = scrollViewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = viewport.scrollHeight;
+  }, [totalLogsCount]);
+  const getStepStatusBadge = (stepId) => {
+    if (stepId === "general") {
+      return { label: "General", color: "blue" };
+    }
+    if (!timelineData) {
+      return null;
+    }
+    const step = timelineData.steps.find((s) => s.stepId === stepId);
+    if (!step) {
+      return null;
+    }
+    const statusConfig = getExecutionStatusConfig(step.status);
+    return {
+      label: statusConfig.label,
+      color: statusConfig.color
+    };
+  };
+  const renderLogsSection = () => {
+    return /* @__PURE__ */ jsxs(Stack, { gap: "xs", style: { flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fw: 500, children: selectedStep ? `Logs for ${selectedStep.stepName} (${totalLogsCount})` : `Logs (${totalLogsCount})` }),
+        timelineData && /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Steps: ",
+            timelineData.steps.filter((s) => s.status === "completed").length,
+            "/",
+            timelineData.steps.length
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Duration:",
+            " ",
+            timelineData.totalDuration < 1e3 ? `${timelineData.totalDuration}ms` : `${(timelineData.totalDuration / 1e3).toFixed(2)}s`
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ScrollArea,
+        {
+          style: { flex: 1 },
+          scrollbarSize: 8,
+          viewportRef: scrollViewportRef,
+          onScrollPositionChange: handleScroll,
+          children: /* @__PURE__ */ jsxs(Stack, { children: [
+            logGroups.map((group) => {
+              const statusBadge = getStepStatusBadge(group.stepId);
+              return /* @__PURE__ */ jsx(
+                LogGroup,
+                {
+                  title: group.stepName,
+                  logs: group.logs,
+                  statusBadge: statusBadge || void 0
+                },
+                group.stepId
+              );
+            }),
+            logGroups.length === 0 && /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", mt: "md", children: selectedStep ? `No logs for ${selectedStep.stepName}` : "No logs available" })
+          ] })
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    BaseExecutionLogs,
+    {
+      resourceId,
+      resourceType: "workflow",
+      executionId,
+      onExecutionDeleted,
+      renderLogsSection,
+      hideInput: isStepSelected,
+      hideResult: isStepSelected,
+      hideError: isStepSelected
+    }
+  );
+}
+function getPriorityColor(priority) {
+  if (priority >= 8) return "red";
+  if (priority >= 5) return "yellow";
+  return "gray";
+}
+function getPriorityLabel(priority) {
+  if (priority >= 8) return "Critical";
+  if (priority >= 5) return "High";
+  if (priority >= 3) return "Medium";
+  return "Low";
+}
+function 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";
+  }
+}
+function getPriorityDotColor(priority) {
+  if (priority >= 8) return "var(--mantine-color-red-6)";
+  if (priority >= 5) return "var(--mantine-color-yellow-6)";
+  if (priority >= 3) return "var(--mantine-color-blue-6)";
+  return "var(--color-text-subtle)";
+}
+function formatRelativeTime(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`;
+}
+function CommandQueueTaskRow({ task, onClick, onDelete }) {
+  const [hovered, setHovered] = useState(false);
+  const OriginIcon = task.originResourceType === "agent" ? IconRobot : IconGitBranch;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      padding: 0,
+      style: {
+        cursor: "pointer",
+        border: "1px solid var(--color-border)",
+        transition: "background var(--duration-fast) var(--easing)",
+        background: hovered ? "var(--active-background)" : "var(--glass-background)"
+      },
+      onClick: (e) => {
+        if (e.target.closest("[data-menu-dropdown]") || e.target.closest("button")) {
+          return;
+        }
+        onClick();
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "10px 80px 1fr 1fr 90px 90px 32px",
+            alignItems: "center",
+            gap: "var(--mantine-spacing-sm)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { label: `P${task.priority} \u2014 ${getPriorityLabel(task.priority)}`, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  flexShrink: 0,
+                  backgroundColor: getPriorityDotColor(task.priority)
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: getPriorityColor(task.priority), children: getPriorityLabel(task.priority).toUpperCase() }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, truncate: true, title: task.description || "Task approval required", children: task.description || "Task approval required" }),
+            /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(OriginIcon, { size: 13, color: "var(--color-text-subtle)", style: { flexShrink: 0 } }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, ff: "monospace", style: { minWidth: 0 }, children: task.originResourceId })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: getStatusColor(task.status), radius: "sm", children: task.status.charAt(0).toUpperCase() + task.status.slice(1) }),
+            /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(IconClock, { size: 11, color: "var(--color-text-subtle)", style: { flexShrink: 0 } }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" }, children: formatRelativeTime(task.createdAt) })
+            ] }),
+            /* @__PURE__ */ jsxs(Menu, { position: "bottom-end", withinPortal: true, children: [
+              /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "gray", children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 }) }) }),
+              /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 14 }), color: "red", onClick: () => onDelete(task.id), children: "Delete" }) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function CheckpointGroup({ name, count, isActive, onClick }) {
+  const theme = useMantineTheme();
+  const activeColor = theme.colors[theme.primaryColor][6];
+  const defaultTextColor = "var(--color-text)";
+  const textColor = isActive ? activeColor : defaultTextColor;
+  const fontWeight = isActive ? 600 : 500;
+  const activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        padding: theme.spacing.xs,
+        borderRadius: theme.radius.sm,
+        backgroundColor: isActive ? activeBg : "transparent",
+        transition: `all var(--duration-fast) var(--easing)`,
+        cursor: "pointer"
+      },
+      onMouseEnter: (e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            fw: fontWeight,
+            style: {
+              color: textColor,
+              fontFamily: "var(--elevasis-font-family-subtitle)",
+              transition: `color var(--duration-fast) var(--easing)`
+            },
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: count })
+      ] })
+    }
+  );
+}
+var CommandQueueSidebarTop = ({
+  status,
+  onStatusChange,
+  priorityRange,
+  onPriorityRangeChange
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconFilter, label: "Filters" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", p: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Status" }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          value: status,
+          onChange: (value) => value && onStatusChange(value),
+          data: [
+            { value: "all", label: "All" },
+            { value: "pending", label: "Pending" },
+            { value: "completed", label: "Completed" },
+            { value: "expired", label: "Expired" }
+          ],
+          leftSection: /* @__PURE__ */ jsx(IconCircleCheck, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx(Group, { justify: "space-between", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Priority" }) }),
+      /* @__PURE__ */ jsx(
+        RangeSlider,
+        {
+          size: "sm",
+          min: 1,
+          max: 10,
+          step: 1,
+          minRange: 0,
+          defaultValue: priorityRange,
+          onChangeEnd: onPriorityRangeChange,
+          marks: [
+            { value: 1, label: "1" },
+            { value: 5, label: "5" },
+            { value: 10, label: "10" }
+          ],
+          styles: { markLabel: { fontSize: 10 } }
+        },
+        `${priorityRange[0]}-${priorityRange[1]}`
+      ),
+      /* @__PURE__ */ jsx(Space, { h: 8 })
+    ] })
+  ] });
+};
+function CommandQueueSidebarMiddle({
+  selectedCheckpoint,
+  onSelectCheckpoint,
+  priorityRange,
+  status,
+  timeRange
+}) {
+  const { data, isLoading } = useCommandQueueTotals({
+    timeRange,
+    priorityMin: priorityRange[0],
+    priorityMax: priorityRange[1],
+    status: status === "all" ? void 0 : status
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconCategory, label: "Checkpoint Groups", withTopBorder: true }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", p: "sm", style: { flex: 1, overflowY: "auto" }, children: isLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CheckpointGroup,
+        {
+          id: void 0,
+          name: "All Tasks",
+          count: data?.total ?? 0,
+          isActive: selectedCheckpoint === void 0,
+          onClick: () => onSelectCheckpoint(void 0)
+        }
+      ),
+      data?.checkpoints.map((checkpoint) => /* @__PURE__ */ jsx(
+        CheckpointGroup,
+        {
+          id: checkpoint.id,
+          name: checkpoint.name,
+          count: checkpoint.count,
+          isActive: selectedCheckpoint === checkpoint.id,
+          onClick: () => onSelectCheckpoint(checkpoint.id)
+        },
+        checkpoint.id
+      ))
+    ] }) })
+  ] });
+}
+var CommandQueueSidebar = ({
+  selectedCheckpoint,
+  onSelectCheckpoint,
+  status,
+  onStatusChange,
+  priorityRange,
+  onPriorityRangeChange,
+  timeRange
+}) => {
+  const colors = useCyberColors();
+  const statusFilter = status === "all" ? void 0 : status;
+  const { data: checkpointData, isLoading: isDonutLoading } = useCommandQueueTotals({
+    timeRange,
+    priorityMin: priorityRange[0],
+    priorityMax: priorityRange[1],
+    status: statusFilter
+  });
+  const {
+    pending: pendingCount,
+    completed: completedCount,
+    expired: expiredCount
+  } = checkpointData?.statusCounts ?? { pending: 0, completed: 0, expired: 0 };
+  const {
+    critical: criticalCount,
+    high: highCount,
+    medium: mediumCount,
+    low: lowCount
+  } = checkpointData?.priorityCounts ?? { critical: 0, high: 0, medium: 0, low: 0 };
+  const totalTasks = checkpointData?.total ?? 0;
+  const statusSegments = [
+    { name: "Pending", value: pendingCount, color: colors.cyan },
+    { name: "Completed", value: completedCount, color: colors.green },
+    { name: "Expired", value: expiredCount, color: colors.red }
+  ];
+  const prioritySegments = [
+    { name: "Critical", value: criticalCount, color: colors.red },
+    { name: "High", value: highCount, color: colors.yellow },
+    { name: "Medium", value: mediumCount, color: colors.blue },
+    { name: "Low", value: lowCount, color: colors.cyanDim }
+  ];
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Box, { p: "sm", style: { borderBottom: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      status === "all" && /* @__PURE__ */ jsx(
+        CyberDonut,
+        {
+          title: "Status",
+          segments: statusSegments,
+          centerValue: totalTasks,
+          centerLabel: "total",
+          glowId: "sbStatusGlow",
+          colors,
+          isLoading: isDonutLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CyberDonut,
+        {
+          title: "Priority",
+          segments: prioritySegments,
+          centerValue: criticalCount + highCount + mediumCount + lowCount,
+          centerLabel: status === "all" ? "total" : status,
+          glowId: "sbPrioGlow",
+          colors,
+          isLoading: isDonutLoading
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      CommandQueueSidebarTop,
+      {
+        status,
+        onStatusChange,
+        priorityRange,
+        onPriorityRangeChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CommandQueueSidebarMiddle,
+      {
+        selectedCheckpoint,
+        onSelectCheckpoint,
+        priorityRange,
+        status,
+        timeRange
+      }
+    )
+  ] });
+};
+var triggerTypeIcons = {
+  webhook: IconWebhook,
+  schedule: IconClock,
+  manual: IconHandClick,
+  event: IconBolt
+};
+var connectionStatusIcons = {
+  connected: IconCircleCheck,
+  disconnected: IconCircleX,
+  error: IconAlertCircle
+};
+var statBubbleBase = {
+  minWidth: 20,
+  height: 20,
+  borderRadius: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 11,
+  fontWeight: 600,
+  padding: "0 6px",
+  color: "white",
+  boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+};
+var CommandViewNode = memo(function CommandViewNode2({ data, selected }) {
+  const Icon = getResourceIcon(data.type);
+  const color = getResourceColor(data.type);
+  const successCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.successCount : 0;
+  const failureCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.failureCount : 0;
+  const warningCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.warningCount : 0;
+  const pendingCount = data.type === "human" && data.stats ? data.stats.pendingCount : 0;
+  const showBubbles = successCount > 0 || failureCount > 0 || warningCount > 0 || pendingCount > 0;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    showBubbles && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: -8,
+          right: -8,
+          display: "flex",
+          gap: 4,
+          zIndex: 10
+        },
+        children: [
+          successCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-green-5), var(--mantine-color-green-7))"
+              },
+              children: successCount
+            }
+          ),
+          warningCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-yellow-5), var(--mantine-color-yellow-7))"
+              },
+              children: warningCount
+            }
+          ),
+          failureCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-red-5), var(--mantine-color-red-7))"
+              },
+              children: failureCount
+            }
+          ),
+          pendingCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-orange-5), var(--mantine-color-orange-7))"
+              },
+              children: pendingCount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(BaseNode, { color, selected, highlighted: Boolean(data.highlighted), children: /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            size: "md",
+            variant: "gradient",
+            gradient: { from: `${color}.4`, to: `${color}.6`, deg: 135 },
+            className: Graph_module_css_default.nodeIcon,
+            children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, children: data.name })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+      /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: data.status === "prod" ? { from: "green.5", to: "green.7", deg: 135 } : { from: "blue.5", to: "blue.7", deg: 135 },
+            className: data.status === "prod" ? Graph_module_css_default.badgeProd : "",
+            style: {
+              textTransform: "uppercase",
+              letterSpacing: "0.5px"
+            },
+            children: data.status
+          }
+        ),
+        data.type === "agent" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              size: "xs",
+              variant: "outline",
+              color: "gray",
+              className: Graph_module_css_default.badge,
+              style: { backdropFilter: "blur(4px)" },
+              children: [
+                data.toolCount,
+                " tools"
+              ]
+            }
+          ),
+          data.hasKnowledgeMap && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "grape.5", to: "grape.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconBrain, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "KM"
+            }
+          ),
+          data.hasMemory && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "cyan.5", to: "cyan.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconDatabase, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "Mem"
+            }
+          ),
+          data.sessionCapable && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "blue.5", to: "blue.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconMessage, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "Session"
+            }
+          )
+        ] }),
+        data.type === "workflow" && /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: [
+              data.stepCount,
+              " steps"
+            ]
+          }
+        ),
+        data.type === "integration" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: data.connectionStatus === "connected" ? { from: "green.5", to: "green.7", deg: 135 } : data.connectionStatus === "error" ? { from: "red.5", to: "red.7", deg: 135 } : { from: "gray.5", to: "gray.7", deg: 135 },
+            leftSection: (() => {
+              const StatusIcon = connectionStatusIcons[data.connectionStatus];
+              return /* @__PURE__ */ jsx(StatusIcon, { size: 10 });
+            })(),
+            className: Graph_module_css_default.badge,
+            children: data.connectionStatus
+          }
+        ),
+        data.type === "trigger" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            leftSection: (() => {
+              const TriggerIcon = triggerTypeIcons[data.triggerType] || IconBolt;
+              return /* @__PURE__ */ jsx(TriggerIcon, { size: 10 });
+            })(),
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: data.triggerType
+          }
+        ),
+        data.type === "external" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 10 }),
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: data.platform
+          }
+        ),
+        data.type === "human" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: { from: "yellow.5", to: "orange.6", deg: 135 },
+            leftSection: /* @__PURE__ */ jsx(IconHandClick, { size: 10 }),
+            className: Graph_module_css_default.badge,
+            children: "Approval Required"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+});
+var relationshipColorMap = {
+  triggers: { color: "edgeTriggers", glow: "edgeTriggersGlow" },
+  uses: { color: "edgeUses", glow: "edgeUsesGlow" },
+  approval: { color: "edgeApproval", glow: "edgeApprovalGlow" }
+};
+function getEdgeColors(relationship, colors) {
+  const mapping = relationshipColorMap[relationship] ?? relationshipColorMap.approval;
+  return {
+    edgeColor: colors[mapping.color],
+    glowColor: colors[mapping.glow]
+  };
+}
+var CommandViewEdge = memo(function CommandViewEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected
+}) {
+  const colors = useGraphTheme();
+  const relationship = data?.relationship || "uses";
+  const { edgeColor, glowColor } = getEdgeColors(relationship, colors);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      color: edgeColor,
+      glowColor,
+      label: data?.label || relationship,
+      animated: data?.animated ?? false,
+      selected,
+      dimmed: data?.dimmed,
+      edgeIndex: data?.edgeIndex,
+      totalEdges: data?.totalEdges
+    }
+  );
+});
+var nodeTypes2 = {
+  commandView: CommandViewNode
+};
+var edgeTypes2 = {
+  commandView: CommandViewEdge
+};
+var CommandViewGraphInner = forwardRef(function CommandViewGraphInner2({ graph, height, selectedNodeId, onNodeSelect }, ref) {
+  const { fitView } = useReactFlow();
+  const { nodes: layoutNodes, edges: layoutEdges } = useCommandViewLayout(graph);
+  const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } = useDirectedChainHighlighting(
+    layoutNodes,
+    layoutEdges,
+    { selectedNodeId }
+  );
+  const { handleNodeClick, handlePaneClick } = useNodeSelection(selectedNodeId ?? null, onNodeSelect ?? (() => {
+  }));
+  const nodesWithSelection = useMemo(
+    () => nodes.map((node) => ({
+      ...node,
+      selected: node.id === selectedNodeId
+    })),
+    [nodes, selectedNodeId]
+  );
+  useImperativeHandle(ref, () => ({
+    fitView: () => fitView({ padding: 0.15, duration: 300 })
+  }));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: Graph_module_css_default.graphContainer,
+      style: {
+        width: "100%",
+        height,
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes: nodesWithSelection,
+          edges,
+          nodeTypes: nodeTypes2,
+          edgeTypes: edgeTypes2,
+          onNodeMouseEnter: handleNodeMouseEnter,
+          onNodeMouseLeave: handleNodeMouseLeave,
+          onNodeClick: onNodeSelect ? handleNodeClick : void 0,
+          onPaneClick: onNodeSelect ? handlePaneClick : void 0,
+          fitView: true,
+          fitViewOptions: { padding: 0.15 },
+          proOptions: { hideAttribution: true },
+          minZoom: GRAPH_CONSTANTS.MIN_ZOOM,
+          maxZoom: GRAPH_CONSTANTS.MAX_ZOOM,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !!onNodeSelect,
+          selectNodesOnDrag: false,
+          panOnDrag: true,
+          zoomOnScroll: true,
+          zoomOnPinch: true,
+          panOnScroll: false,
+          children: [
+            /* @__PURE__ */ jsx(GraphBackground, {}),
+            /* @__PURE__ */ jsx(
+              GraphLegend,
+              {
+                title: "",
+                position: "bottom-right",
+                items: [
+                  { color: "orange", label: "Triggers" },
+                  { color: "violet", label: "Agents" },
+                  { color: "blue", label: "Workflows" },
+                  { color: "teal", label: "Integrations" },
+                  { color: "yellow", label: "Human" },
+                  { color: "gray", label: "External" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              GraphLegend,
+              {
+                title: "",
+                position: "bottom-left",
+                items: [
+                  { color: "blue", label: "Triggers", type: "line" },
+                  { color: "teal", label: "Uses", type: "line" },
+                  { color: "yellow", label: "Requires Approval", type: "line" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(GraphFitViewButton, { padding: 0.15, variant: "mantine", duration: 300 })
+          ]
+        }
+      )
+    }
+  );
+});
+var CommandViewGraph = forwardRef(
+  function CommandViewGraph2(props, ref) {
+    return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(CommandViewGraphInner, { ref, ...props }) });
+  }
+);
+
+export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewEdge, CommandViewGraph, CommandViewNode, ConfigCard, ContentSections, ContractDisplay, ExecutionErrorSection, FormFieldRenderer, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, ResourceDefinitionSection, TaskCard, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, useNewKnowledgeMapLayout };