@elevasis/ui 1.20.1 → 1.22.0

package/dist/{chunk-JIABC3AE.js → chunk-WAEKXBP3.js}

@@ -1,24 +1,27 @@
-import { SubshellSidebarSection } from './chunk-JFRG2JJE.js';
+import { SubshellSidebarSection } from './chunk-AWT255UH.js';
 import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
-import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from './chunk-C7AD6N23.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 { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from './chunk-DLI3F5IV.js';
+import { useCyberColors, CyberDonut } from './chunk-N5SDJP44.js';
+import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, ContextViewer } from './chunk-IAZT3VO6.js';
+import { StyledMarkdown } from './chunk-3KMDHCAR.js';
+import { useCommandViewLayout, useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useSubmitAction, useDeleteTask, showApiErrorNotification, showSuccessNotification } from './chunk-EDAYKRPJ.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 { ResourceStatusColors, 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 { Stack, Group, Text, Badge, ThemeIcon, Box, TextInput, Textarea, Radio, Checkbox, Select, NumberInput, Title, Alert, Button, ActionIcon, Collapse, Card, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, RangeSlider, Loader, Progress, Accordion, 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 { IconBrain, IconFileText, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconMail, IconSend, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconPlayerPlay, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, 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 dagre from '@dagrejs/dagre';
 import '@xyflow/react/dist/style.css';
+import { useClipboard } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import { useNavigate } from '@tanstack/react-router';
 
 function FormFieldRenderer({ field, form, richTextRenderer }) {
   const commonProps = {
@@ -169,251 +172,6 @@ function ActionModal({
     ] })
   ] }) }) });
 }
-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());
@@ -1597,15 +1355,155 @@ function LogGroup({ title, logs, statusBadge }) {
     }
   );
 }
-function AgentExecutionLogs({
-  resourceId,
-  executionId,
-  execution: externalExecution,
-  selectedIterationId,
-  iterationData,
-  onExecutionDeleted
-}) {
-  const isIterationSelected = selectedIterationId !== null;
+var ResourceFilter = ({ value, onChange, fullWidth }) => {
+  const buttonStyles = fullWidth ? { padding: "2px 8px", height: "28px", fontSize: "12px", flex: 1 } : { padding: "2px 8px", height: "24px", fontSize: "12px" };
+  return /* @__PURE__ */ jsxs(Button.Group, { style: fullWidth ? { width: "100%" } : void 0, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: value === "all" ? "filled" : "default",
+        size: "xs",
+        onClick: () => onChange("all"),
+        bg: value === "all" ? void 0 : "var(--color-background)",
+        styles: { root: buttonStyles },
+        children: "All"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: value === "dev" ? "filled" : "default",
+        size: "xs",
+        onClick: () => onChange("dev"),
+        bg: value === "dev" ? void 0 : "var(--color-background)",
+        styles: { root: buttonStyles },
+        children: "Dev"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: value === "prod" ? "filled" : "default",
+        size: "xs",
+        onClick: () => onChange("prod"),
+        bg: value === "prod" ? void 0 : "var(--color-background)",
+        styles: { root: buttonStyles },
+        children: "Prod"
+      }
+    )
+  ] });
+};
+function ResourceHeader({ resource, type, connected, runningCount, sessionCapable }) {
+  const { currentMembership } = useOrganization();
+  const organizationName = currentMembership?.organization?.name;
+  const navigate = useNavigate();
+  const Icon = getResourceIcon(type);
+  const clipboard = useClipboard({ timeout: 2e3 });
+  const handleCopyId = () => {
+    clipboard.copy(`"${organizationName}/${resource.resourceId}"`);
+    notifications.show({
+      message: "Resource ID copied to clipboard",
+      color: "teal"
+    });
+  };
+  const handleGoToSessions = () => {
+    navigate({
+      to: "/operations/sessions",
+      search: { agent: resource.resourceId }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: resource.name,
+        caption: resource.description || `${type.charAt(0).toUpperCase()}${type.slice(1)} details`
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Icon, { size: 20, color: "var(--color-primary)" }),
+        /* @__PURE__ */ jsxs(Badge, { color: "blue", variant: "light", children: [
+          type.charAt(0).toUpperCase(),
+          type.slice(1)
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "outline", size: "sm", children: resource.status.toUpperCase() }),
+        resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "sm", children: [
+          "v",
+          resource.version
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+          /* @__PURE__ */ jsxs(Text, { size: "sm", ff: "monospace", c: "dimmed", children: [
+            organizationName,
+            "/",
+            resource.resourceId
+          ] }),
+          /* @__PURE__ */ jsx(Tooltip, { label: clipboard.copied ? "Copied!" : "Copy ID", children: /* @__PURE__ */ jsx(ActionIcon, { size: "sm", variant: "subtle", onClick: handleCopyId, color: clipboard.copied ? "teal" : "gray", children: /* @__PURE__ */ jsx(IconCopy, { size: 14, color: clipboard.copied ? "teal" : "gray" }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        connected && /* @__PURE__ */ jsx(Badge, { color: "green", variant: "dot", children: "CONNECTED" }),
+        runningCount && runningCount > 0 && /* @__PURE__ */ jsxs(Badge, { color: "blue", variant: "filled", children: [
+          runningCount,
+          " running"
+        ] }),
+        type === "agent" && sessionCapable && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(IconMessage, { size: 16 }), onClick: handleGoToSessions, children: "Go to Sessions" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "light",
+            leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
+            onClick: () => navigate({ to: "/operations/resources" }),
+            children: "Resources"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ResourceErrorState({ error }) {
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
+    /* @__PURE__ */ jsx(Text, { c: "red", children: "Failed to load resource" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: error.message })
+  ] }) }) });
+}
+function ResourceNotFoundState({ type, resourceId }) {
+  const navigate = useNavigate();
+  const { currentMembership } = useOrganization();
+  const orgName = currentMembership?.organization?.name || "current organization";
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
+    /* @__PURE__ */ jsx(Text, { size: "lg", c: "dimmed", fw: 500, children: "Resource not found" }),
+    /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", ta: "center", children: [
+      "The ",
+      type,
+      ' "',
+      resourceId,
+      '" could not be found in ',
+      orgName,
+      "."
+    ] }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "This resource may exist in a different organization. Try switching organizations or returning to the overview." }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "light",
+        leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
+        onClick: () => navigate({ to: "/operations", search: { type: void 0 } }),
+        children: "Back to Operations"
+      }
+    )
+  ] }) }) });
+}
+function AgentExecutionLogs({
+  resourceId,
+  executionId,
+  execution: externalExecution,
+  selectedIterationId,
+  iterationData,
+  onExecutionDeleted
+}) {
+  const isIterationSelected = selectedIterationId !== null;
   const logGroups = useMemo(() => {
     if (!iterationData) {
       return [];
@@ -1952,7 +1850,7 @@ function CommandQueueTaskRow({ task, onClick, onDelete }) {
         cursor: "pointer",
         border: "1px solid var(--color-border)",
         transition: "background var(--duration-fast) var(--easing)",
-        background: hovered ? "var(--active-background)" : "var(--glass-background)"
+        background: hovered ? "var(--active-background)" : "var(--color-surface)"
       },
       onClick: (e) => {
         if (e.target.closest("[data-menu-dropdown]") || e.target.closest("button")) {
@@ -2232,6 +2130,113 @@ var CommandQueueSidebar = ({
     )
   ] });
 };
+function ContextUsageBadge({ currentTokens, maxTokens }) {
+  const percentage = currentTokens / maxTokens * 100;
+  const color = percentage > 90 ? "red" : percentage > 70 ? "yellow" : "green";
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      label: `${currentTokens.toLocaleString()} of ${maxTokens.toLocaleString()} tokens used (${percentage.toFixed(1)}%)`,
+      position: "bottom",
+      children: /* @__PURE__ */ jsxs(Group, { gap: 6, style: { cursor: "help" }, children: [
+        /* @__PURE__ */ jsx(IconBrain, { size: 16, color: `var(--mantine-color-${color}-6)` }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", c: color, fw: 500, children: [
+          currentTokens.toLocaleString(),
+          " / ",
+          maxTokens.toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsx(Progress, { value: percentage, color, size: "sm", w: 80, radius: "xl" })
+      ] })
+    }
+  );
+}
+function parseMemoryContent(memory) {
+  const parsedSessionMemory = {};
+  for (const [key, entry] of Object.entries(memory.sessionMemory || {})) {
+    try {
+      if (typeof entry.content === "string") {
+        parsedSessionMemory[key] = {
+          ...entry,
+          content: JSON.parse(entry.content)
+        };
+      } else {
+        parsedSessionMemory[key] = entry;
+      }
+    } catch {
+      parsedSessionMemory[key] = entry;
+    }
+  }
+  const parsedHistory = (memory.history || []).map((entry) => {
+    try {
+      if (typeof entry.content === "string") {
+        return {
+          ...entry,
+          content: JSON.parse(entry.content)
+        };
+      }
+      return entry;
+    } catch {
+      return entry;
+    }
+  });
+  return {
+    sessionMemory: parsedSessionMemory,
+    history: parsedHistory
+  };
+}
+function SessionMemory({ memory }) {
+  if (!memory) {
+    return /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(IconDatabase, { size: 18 }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No memory data available" })
+    ] });
+  }
+  const sessionMemoryKeys = Object.keys(memory.sessionMemory || {});
+  const historyCount = memory.history?.length || 0;
+  const parsedMemory = parseMemoryContent(memory);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconDatabase, { size: 20 }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Session Memory" })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", children: [
+          sessionMemoryKeys.length,
+          " keys"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", children: [
+          historyCount,
+          " history items"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsibleSection,
+        {
+          title: "Session Memory",
+          count: sessionMemoryKeys.length,
+          countLabel: "keys",
+          emptyMessage: "No session memory stored",
+          defaultExpanded: false,
+          children: /* @__PURE__ */ jsx(JsonViewer, { data: parsedMemory.sessionMemory, maxHeight: 300 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CollapsibleSection,
+        {
+          title: "Conversation History",
+          count: historyCount,
+          countLabel: "items",
+          emptyMessage: "No history available",
+          defaultExpanded: false,
+          children: /* @__PURE__ */ jsx(JsonViewer, { data: parsedMemory.history, maxHeight: 300 })
+        }
+      )
+    ] })
+  ] });
+}
 var triggerTypeIcons = {
   webhook: IconWebhook,
   schedule: IconClock,
@@ -2618,5 +2623,250 @@ var CommandViewGraph = forwardRef(
     return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(CommandViewGraphInner, { ref, ...props }) });
   }
 );
+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"
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
 
-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 };
+export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewEdge, CommandViewGraph, CommandViewNode, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, FormFieldRenderer, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, TaskCard, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, useNewKnowledgeMapLayout };