@elevasis/ui 1.19.0 → 1.20.1

package/dist/features/operations/index.js

@@ -1,40 +1,72 @@
-import { ExecutionStats } from '../../chunk-BVNAC4SQ.js';
-import { SubshellLoader, SubshellSidebarSection } from '../../chunk-35UWYH2A.js';
-import { PageTitleCaption, TabCountBadge, ResourceCard, useCyberColors, CyberDonut } from '../../chunk-LBY7FVFD.js';
-import '../../chunk-KBLGVZBD.js';
-import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters } from '../../chunk-UTWJZEOJ.js';
-import { usePaginationState, useResources, useRecentExecutionsByResource } from '../../chunk-2Z7LYTIX.js';
-import '../../chunk-LXHZYSMQ.js';
+import { ResourceDefinitionSection, CommandQueueTaskRow, getIcon, ActionModal, CommandViewGraph, WorkflowExecutionLogs, AgentExecutionLogs } from '../../chunk-JIABC3AE.js';
+import { SubshellLoader, SubshellSidebarSection, PageContainer } from '../../chunk-JFRG2JJE.js';
+import { ResourceHealthPanel } from '../../chunk-4SY4EQSK.js';
+import { ConfirmationModal, CustomModal } from '../../chunk-GBMNCNHX.js';
+import { ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline } from '../../chunk-C7AD6N23.js';
+import { useCyberColors, CyberDonut } from '../../chunk-ERVB3QJQ.js';
+import { PageTitleCaption, TabCountBadge, ResourceCard, ContextViewer, JsonViewer, APIErrorAlert, EmptyState } from '../../chunk-AWMZCYKH.js';
+import '../../chunk-NNKKBSJN.js';
+import { AppShellLoader } from '../../chunk-WWEMNIHW.js';
+import '../../chunk-QJ2S46NI.js';
+import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters, useCommandViewDomainFilters, showApiErrorNotification } from '../../chunk-XOTN3X3Z.js';
+import { usePaginationState, useResources, useRecentExecutionsByResource, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueueTotals, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStore, useCommandViewStats, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useExecution } from '../../chunk-AQ5MQDSS.js';
 import '../../chunk-NJJ3NQ7B.js';
+import '../../chunk-LXHZYSMQ.js';
 import '../../chunk-MHW43EOH.js';
 import '../../chunk-F6RBK7NJ.js';
-import '../../chunk-XA34RETF.js';
-import '../../chunk-ELJIFLCB.js';
+import { useMergedExecution, useTimelineData, useAgentIterationData } from '../../chunk-XA34RETF.js';
+import { ResourceStatusColors } from '../../chunk-ELJIFLCB.js';
 import '../../chunk-L4XXM55J.js';
 import '../../chunk-SLVC5OJ2.js';
 import '../../chunk-RNP5R5I3.js';
-import '../../chunk-KNJKCD73.js';
-import '../../chunk-NUULWBAD.js';
+import '../../chunk-VLTVZXP6.js';
+import '../../chunk-R3R367QY.js';
 import '../../chunk-SZHARWKU.js';
-import '../../chunk-2YW3LDFT.js';
-import '../../chunk-7ATCF6UL.js';
-import '../../chunk-UANJP5P7.js';
+import '../../chunk-OFAXUZPZ.js';
+import '../../chunk-3DIU726S.js';
+import '../../chunk-R7WLWGPO.js';
+import '../../chunk-NVOCKXUQ.js';
+import '../../chunk-V7XHGJQZ.js';
 import '../../chunk-QJ2KCHKX.js';
-import '../../chunk-U2522LSW.js';
-import '../../chunk-JNBHUCKW.js';
-import { formatRelativeTime, DOMAIN_MAP } from '../../chunk-MBZDE6UT.js';
-import '../../chunk-CC3SDRIF.js';
+import { formatRelativeTime, DOMAIN_MAP, getNodeId, PAGE_SIZE_DEFAULT, getErrorInfo, formatErrorMessage, getResourceIcon } from '../../chunk-IOKL7BKE.js';
+import '../../chunk-RWQIFKMJ.js';
 import '../../chunk-ALA56RGZ.js';
-import { useInitialization } from '../../chunk-DVKEEY5J.js';
-import '../../chunk-QEPXAWE2.js';
-import '../../chunk-DD3CCMCZ.js';
+import { useInitialization } from '../../chunk-TUXTSEAF.js';
+import { useOrganization } from '../../chunk-DD3CCMCZ.js';
+import { useElevasisServices } from '../../chunk-QEPXAWE2.js';
 import '../../chunk-BRJ3QZ4E.js';
 import '../../chunk-Q7DJKLEN.js';
-import { Stack, Card, Text, Button, Tabs, Group, Pagination, useMantineTheme, Box, Center, Loader, UnstyledButton, TextInput, Divider } from '@mantine/core';
-import { IconApps, IconRoute, IconBrain, IconRefresh, IconAdjustmentsHorizontal, IconSearch, IconChevronDown, IconCircleX, IconCircleCheck, IconCircleDashed } from '@tabler/icons-react';
-import { useState, useEffect, useMemo } from 'react';
+import { Stack, Card, Text, Button, Tabs, Group, Pagination, useMantineTheme, Box, Center, Loader, UnstyledButton, TextInput, Divider, Paper, Badge, ActionIcon, Title, SimpleGrid, CopyButton, SegmentedControl, ThemeIcon, Alert, Switch, Space, Collapse, Tooltip, Menu, Modal, Textarea, Table, Progress } from '@mantine/core';
+import { IconApps, IconRoute, IconBrain, IconRefresh, IconAdjustmentsHorizontal, IconSearch, IconChevronDown, IconCircleX, IconCircleCheck, IconCircleDashed, IconTrash, IconArrowLeft, IconClock, IconCheck, IconCopy, IconExternalLink, IconPlayerPlay, IconAlertCircle, IconPlus, IconAdjustments, IconSitemap, IconSettings, IconReportAnalytics, IconX, IconCoin, IconChevronRight, IconInfoCircle, IconMessage, IconFlask, IconDotsVertical } from '@tabler/icons-react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useClipboard } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { useForm } from '@mantine/form';
+import { formatDistanceToNow } from 'date-fns';
 
+// ../core/src/platform/utils/debounce.ts
+function debounce(fn, wait) {
+  let timeoutId = null;
+  const debounced = (...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, wait);
+  };
+  debounced.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  return debounced;
+}
 function ResourcesPage({
   initialFilter,
   onTypeChange,
@@ -201,7 +233,6 @@ function ResourcesPage({
           resource,
           onClick: onResourceClick,
           layout: "row",
-          dormant: isDormant,
           "data-resource-id": resource.resourceId,
           lastRunLabel: resource.lastExecution ? `Last run ${formatRelativeTime(resource.lastExecution)}` : void 0,
           rightSection: /* @__PURE__ */ jsx(
@@ -446,9 +477,11 @@ function ResourcesSidebar({ timeRange }) {
             {
               size: "sm",
               fw: 600,
-              c: "dimmed",
               tt: "uppercase",
-              style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+              style: {
+                color: "var(--color-text-subtle)",
+                fontFamily: "var(--elevasis-font-family-subtitle)"
+              },
               children: "Domains"
             }
           ),
@@ -522,5 +555,2092 @@ function ResourcesSidebar({ timeRange }) {
     ] })
   ] });
 }
+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 ResourceDetailPage({ type, resourceId, timeRange, renderExecutionPanel }) {
+  const { organizationReady } = useInitialization();
+  const { data, isLoading, error } = useResources();
+  const [connected, setConnected] = useState(false);
+  const [runningCount, setRunningCount] = useState(0);
+  const resource = data ? (() => {
+    const resources = [...data.workflows, ...data.agents];
+    const found = resources.find((r) => r.resourceId === resourceId && r.type === type);
+    return found || null;
+  })() : null;
+  const {
+    data: resourceDefinition,
+    isLoading: definitionLoading,
+    error: definitionError
+  } = useResourceDefinition(resourceId, true);
+  const handleConnectionStatus = (isConnected, count) => {
+    setConnected(isConnected);
+    setRunningCount(count);
+  };
+  if (!organizationReady || isLoading || definitionLoading) {
+    return /* @__PURE__ */ jsx(SubshellLoader, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(ResourceErrorState, { error });
+  }
+  if (!resource) {
+    return /* @__PURE__ */ jsx(ResourceNotFoundState, { type, resourceId });
+  }
+  const validResource = resource;
+  const sessionCapable = isSessionCapable(type, resourceDefinition);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      ResourceHeader,
+      {
+        resource: validResource,
+        type,
+        connected,
+        runningCount,
+        sessionCapable
+      }
+    ),
+    /* @__PURE__ */ jsx(ResourceHealthPanel, { resourceId, resourceType: type, timeRange }),
+    resourceDefinition && /* @__PURE__ */ jsx(ResourceDefinitionSection, { resourceDefinition }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        withBorder: true,
+        p: "0",
+        style: {
+          flex: 1,
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: definitionError ? /* @__PURE__ */ jsx(ResourceErrorState, { error: definitionError }) : !resourceDefinition ? /* @__PURE__ */ jsx(ResourceErrorState, { error: new Error("Resource definition not found") }) : renderExecutionPanel({
+          resourceId,
+          resourceType: type,
+          resourceName: validResource.name,
+          resourceDefinition,
+          onConnectionStatus: handleConnectionStatus
+        })
+      }
+    )
+  ] });
+}
+function CommandQueuePage({
+  timeRange,
+  pageSize = 20,
+  onNavigateToTask,
+  selectedCheckpoint,
+  status = "pending",
+  priorityRange = [1, 10]
+}) {
+  const { organizationReady } = useInitialization();
+  const [deleteConfirmId, setDeleteConfirmId] = useState(null);
+  const { mutate: deleteTask, isPending: isDeleting } = useDeleteTask();
+  const serverStatus = status === "all" ? void 0 : status;
+  const { page, setPage, offset, totalPages } = usePaginationState(pageSize, [
+    selectedCheckpoint,
+    status,
+    timeRange,
+    priorityRange
+  ]);
+  const { data: checkpointData, isLoading: isLoadingCheckpoints } = useCommandQueueTotals({
+    timeRange,
+    priorityMin: priorityRange[0],
+    priorityMax: priorityRange[1]
+  });
+  const { data: tasks = [], isLoading: isLoadingTasks } = useCommandQueue({
+    status: serverStatus,
+    humanCheckpoint: selectedCheckpoint,
+    timeRange,
+    priorityMin: priorityRange[0],
+    priorityMax: priorityRange[1],
+    limit: pageSize,
+    offset
+  });
+  useEffect(() => {
+    if (!isLoadingTasks && tasks.length === 0 && page > 1) {
+      setPage(page - 1);
+    }
+  }, [tasks.length, isLoadingTasks]);
+  if (isLoadingCheckpoints || !organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  const totalTasks = checkpointData?.total ?? 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Command Queue", caption: "Human-in-the-loop approval system for agent/workflow actions" }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: isLoadingTasks ? /* @__PURE__ */ jsx(AppShellLoader, {}) : tasks.length === 0 ? /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Text, { ta: "center", c: "dimmed", children: "No tasks found" }) }) : tasks.map((task) => /* @__PURE__ */ jsx(
+      CommandQueueTaskRow,
+      {
+        task,
+        onClick: () => onNavigateToTask(task.id),
+        onDelete: (taskId) => setDeleteConfirmId(taskId)
+      },
+      task.id
+    )) }),
+    totalPages(totalTasks) > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Pagination, { size: "sm", total: totalPages(totalTasks), value: page, onChange: setPage, boundaries: 1 }) }),
+    /* @__PURE__ */ jsx(
+      ConfirmationModal,
+      {
+        opened: deleteConfirmId !== null,
+        onClose: () => setDeleteConfirmId(null),
+        loading: isDeleting,
+        icon: /* @__PURE__ */ jsx(IconTrash, { color: "red" }),
+        title: "Delete Task",
+        text: "Are you sure you want to delete this task? This action cannot be undone.",
+        buttonText: "Delete Task",
+        buttonColor: "red",
+        confirmationHandler: () => {
+          if (deleteConfirmId) {
+            deleteTask(deleteConfirmId, {
+              onSuccess: () => setDeleteConfirmId(null),
+              onError: () => setDeleteConfirmId(null)
+            });
+          }
+        }
+      }
+    )
+  ] });
+}
+function getPriorityColor(priority) {
+  if (priority >= 8) return "red";
+  if (priority >= 5) return "yellow";
+  return "gray";
+}
+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 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`;
+}
+function CommandQueueDetailPage({
+  taskId,
+  orgName,
+  renderRichText,
+  onNavigateBack,
+  onViewExecution
+}) {
+  const { mutate: submitAction, isPending, error: submitError, reset: resetSubmitAction } = 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 [contextView, setContextView] = useState("formatted");
+  const [submitResultError, setSubmitResultError] = useState(null);
+  const { data: tasks, isLoading } = useCommandQueue();
+  const task = tasks?.find((t) => t.id === taskId);
+  const richTextRenderer = renderRichText ? (props) => renderRichText(props) : void 0;
+  const submitCallbacks = {
+    onSuccess: (data) => {
+      if (data.execution?.success === false) {
+        setSubmitResultError(data.execution.error?.message || "Action execution failed.");
+      } else {
+        setSubmitResultError(null);
+      }
+    },
+    onError: (error) => {
+      const { message, fields, requestId } = getErrorInfo(error);
+      setSubmitResultError(formatErrorMessage(message, requestId, fields));
+    }
+  };
+  const handleActionClick = (action) => {
+    if (action.requiresConfirmation) {
+      setConfirmAction(action);
+    } else if (action.form) {
+      setSubmitResultError(null);
+      setSelectedAction(action);
+      setActionModalOpened(true);
+    } else {
+      submitAction({ taskId, actionId: action.id }, submitCallbacks);
+    }
+  };
+  const handleConfirm = () => {
+    if (!confirmAction) return;
+    if (confirmAction.form) {
+      setSubmitResultError(null);
+      setSelectedAction(confirmAction);
+      setActionModalOpened(true);
+    } else {
+      submitAction({ taskId, actionId: confirmAction.id }, submitCallbacks);
+    }
+    setConfirmAction(null);
+  };
+  const handleRetry = () => {
+    if (task?.selectedAction) {
+      setSubmitResultError(null);
+      submitAction({ taskId, actionId: task.selectedAction, payload: task.actionPayload }, submitCallbacks);
+    }
+  };
+  const handleViewExecution = () => {
+    if (!task?.targetExecutionId || !task.targetResourceId || !task.targetResourceType) return;
+    onViewExecution(task.targetResourceType, task.targetResourceId, task.targetExecutionId);
+  };
+  if (isLoading) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  if (!task) {
+    return /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        PageTitleCaption,
+        {
+          title: "Task Not Found",
+          rightSection: /* @__PURE__ */ jsx(Button, { variant: "subtle", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: onNavigateBack, size: "sm", children: "Back to Queue" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Text, { ta: "center", c: "dimmed", children: "This task no longer exists or could not be loaded." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: "Task Detail",
+        caption: task.description || "Task approval required",
+        rightSection: /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: onNavigateBack, size: "sm", children: "Back to Queue" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs(Badge, { color: getPriorityColor(task.priority), variant: "light", size: "sm", children: [
+          "P",
+          task.priority
+        ] }),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: getStatusColor(task.status),
+            variant: "light",
+            size: "sm",
+            leftSection: task.status === "processing" ? /* @__PURE__ */ jsx(Loader, { size: 6 }) : void 0,
+            children: task.status.toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+          /* @__PURE__ */ jsx(IconClock, { size: 14, style: { verticalAlign: "middle", marginRight: 4 } }),
+          formatDate(task.createdAt)
+        ] }),
+        task.expiresAt && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+          "Expires ",
+          formatDate(task.expiresAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        task.status === "failed" && /* @__PURE__ */ jsx(Button, { variant: "light", color: "red", size: "xs", loading: isPending, onClick: handleRetry, children: "Retry" }),
+        /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "subtle",
+            color: "red",
+            size: "sm",
+            disabled: task.status === "processing",
+            onClick: () => setDeleteConfirmOpened(true),
+            title: "Delete task",
+            children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Resources" }),
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Task ID" }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.id }),
+            /* @__PURE__ */ jsx(CopyButton, { value: task.id, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: copy,
+                variant: "subtle",
+                size: "xs",
+                color: copied ? "green" : "var(--color-text-subtle)",
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+              }
+            ) })
+          ] })
+        ] }),
+        task.humanCheckpoint && /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Checkpoint" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.humanCheckpoint })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Origin Resource" }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.originResourceId }),
+            /* @__PURE__ */ jsx(CopyButton, { value: task.originResourceId, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: copy,
+                variant: "subtle",
+                size: "xs",
+                color: copied ? "green" : "var(--color-text-subtle)",
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Origin Execution ID" }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.originExecutionId }),
+            /* @__PURE__ */ jsx(CopyButton, { value: `${orgName}/${task.originResourceId} ${task.originExecutionId}`, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: copy,
+                variant: "subtle",
+                size: "xs",
+                color: copied ? "green" : "var(--color-text-subtle)",
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+              }
+            ) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Target Resource" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.targetResourceId || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: "Target Execution ID" }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: task.targetExecutionId ?? "N/A" }),
+            task.targetExecutionId && /* @__PURE__ */ jsx(CopyButton, { value: `${orgName}/${task.targetResourceId} ${task.targetExecutionId}`, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: copy,
+                variant: "subtle",
+                size: "xs",
+                color: copied ? "green" : "var(--color-text-subtle)",
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+              }
+            ) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "light",
+          color: "var(--color-primary)",
+          size: "sm",
+          leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+          onClick: () => window.open(
+            `/operations/resources/${task.originResourceType}/${task.originResourceId}?exec=${task.originExecutionId}`,
+            "_blank",
+            "noopener,noreferrer"
+          ),
+          children: "View Origin Execution"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Context" }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: contextView,
+            onChange: (v) => setContextView(v),
+            size: "xs",
+            data: [
+              { label: "Formatted", value: "formatted" },
+              { label: "JSON", value: "json" }
+            ]
+          }
+        )
+      ] }),
+      contextView === "formatted" ? /* @__PURE__ */ jsx(ContextViewer, { data: task.context }) : /* @__PURE__ */ jsx(JsonViewer, { data: task.context })
+    ] }) }),
+    (task.status === "pending" || task.status === "failed") && task.actions.length > 0 && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Actions" }),
+      /* @__PURE__ */ jsx(Group, { gap: "sm", 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: "sm",
+            children: action.label
+          },
+          action.id
+        );
+      }) })
+    ] }) }),
+    task.selectedAction && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Action" }),
+      /* @__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, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, 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" })
+      ] }),
+      task.actionPayload !== void 0 && task.actionPayload !== null && /* @__PURE__ */ jsx(JsonViewer, { data: task.actionPayload, maxHeight: 200 }),
+      task.completedAt && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
+        "Completed ",
+        formatDate(task.completedAt),
+        task.completedBy ? ` by ${task.completedBy}` : ""
+      ] }),
+      task.targetExecutionId && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "light",
+          size: "sm",
+          leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+          onClick: handleViewExecution,
+          w: "fit-content",
+          children: "View Target Execution"
+        }
+      )
+    ] }) }),
+    submitResultError && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        color: "red",
+        variant: "light",
+        icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }),
+        title: "Submission failed",
+        withCloseButton: true,
+        onClose: () => setSubmitResultError(null),
+        children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-line" }, children: submitResultError })
+      }
+    ),
+    /* @__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);
+          resetSubmitAction();
+        },
+        onSubmit: (payload, notes) => {
+          submitAction(
+            { taskId, actionId: selectedAction.id, payload, notes },
+            {
+              onSuccess: (data) => {
+                submitCallbacks.onSuccess(data);
+                setActionModalOpened(false);
+              },
+              onError: submitCallbacks.onError
+            }
+          );
+        },
+        richTextRenderer,
+        error: submitError,
+        isPending
+      }
+    ),
+    /* @__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, {
+                onSuccess: () => onNavigateBack()
+              });
+              setDeleteConfirmOpened(false);
+            },
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/hooks/operations/command-view/utils/transformCommandViewData.ts
+function transformCommandViewData(data) {
+  const nodes = [
+    // Map triggers (resourceId -> id)
+    ...data.triggers.map((trigger) => ({
+      id: trigger.resourceId,
+      type: "trigger",
+      name: trigger.name,
+      description: trigger.description,
+      status: trigger.status,
+      triggerType: trigger.triggerType,
+      webhookPath: trigger.webhookPath,
+      schedule: trigger.schedule
+    })),
+    // Map agents (resourceId -> id)
+    ...data.agents.map((agent) => {
+      const agentWithStats = agent;
+      return {
+        id: agent.resourceId,
+        type: "agent",
+        name: agent.name,
+        description: agent.description,
+        status: agent.status,
+        modelProvider: agent.modelProvider,
+        modelId: agent.modelId,
+        toolCount: agent.toolCount,
+        hasKnowledgeMap: agent.hasKnowledgeMap,
+        hasMemory: agent.hasMemory,
+        stats: agentWithStats.stats || null
+        // Preserve stats if present
+      };
+    }),
+    // Map workflows (resourceId -> id)
+    ...data.workflows.map((workflow) => {
+      const workflowWithStats = workflow;
+      return {
+        id: workflow.resourceId,
+        type: "workflow",
+        name: workflow.name,
+        description: workflow.description,
+        status: workflow.status,
+        stepCount: workflow.stepCount,
+        entryPoint: workflow.entryPoint,
+        stats: workflowWithStats.stats || null
+        // Preserve stats if present
+      };
+    }),
+    // Map integrations (resourceId -> id)
+    ...data.integrations.map((integration) => ({
+      id: integration.resourceId,
+      type: "integration",
+      name: integration.name,
+      description: integration.description,
+      status: integration.status,
+      provider: integration.provider,
+      connectionStatus: "connected",
+      // Default - runtime status not yet available
+      credentialName: integration.credentialName
+    })),
+    // Map external resources (resourceId -> id)
+    ...(data.externalResources ?? []).map((external) => ({
+      id: external.resourceId,
+      type: "external",
+      name: external.name,
+      description: external.description,
+      status: external.status,
+      platform: external.platform,
+      platformUrl: external.platformUrl,
+      externalId: external.externalId
+    })),
+    // Map human checkpoints to human nodes (resourceId -> id)
+    ...(data.humanCheckpoints ?? []).map((humanCheckpoint) => {
+      const checkpointWithStats = humanCheckpoint;
+      return {
+        id: humanCheckpoint.resourceId,
+        type: "human",
+        name: humanCheckpoint.name,
+        description: humanCheckpoint.description ?? "",
+        status: humanCheckpoint.status,
+        stats: checkpointWithStats.stats || null
+        // Preserve stats if present
+      };
+    })
+  ];
+  const edges = data.edges.map((edge, index) => ({
+    id: edge.id || `edge-${index}`,
+    source: edge.source,
+    target: edge.target,
+    relationship: edge.relationship
+  }));
+  return { nodes, edges };
+}
+
+// src/hooks/operations/command-view/utils/filterCommandViewData.ts
+function filterCommandViewData(data, filters) {
+  const { domains: selectedDomains, excludedDomains = [], status: statusFilter, showIntegrations } = filters;
+  const hasDomainFilter = selectedDomains.length > 0;
+  const hasExcludeFilter = excludedDomains.length > 0;
+  const hasStatusFilter = statusFilter !== "all";
+  const hasIntegrationFilter = !showIntegrations;
+  if (!hasDomainFilter && !hasExcludeFilter && !hasStatusFilter && !hasIntegrationFilter) {
+    return data;
+  }
+  const matchesDomainFilter = (domains) => {
+    if (hasExcludeFilter && (domains?.some((d) => excludedDomains.includes(d)) ?? false)) return false;
+    if (hasDomainFilter && !(domains?.some((d) => selectedDomains.includes(d)) ?? false)) return false;
+    return true;
+  };
+  const filteredAgents = data.agents.filter((agent) => {
+    if (hasStatusFilter && agent.status !== statusFilter) return false;
+    if (!matchesDomainFilter(agent.domains)) return false;
+    return true;
+  });
+  const filteredWorkflows = data.workflows.filter((workflow) => {
+    if (hasStatusFilter && workflow.status !== statusFilter) return false;
+    if (!matchesDomainFilter(workflow.domains)) return false;
+    return true;
+  });
+  const filteredTriggers = data.triggers.filter((trigger) => {
+    if (hasStatusFilter && trigger.status !== statusFilter) return false;
+    if (!matchesDomainFilter(trigger.domains)) return false;
+    return true;
+  });
+  const filteredIntegrations = showIntegrations ? data.integrations.filter((integration) => {
+    if (hasStatusFilter && integration.status !== statusFilter) return false;
+    if (!matchesDomainFilter(integration.domains)) return false;
+    return true;
+  }) : [];
+  const filteredExternalResources = (data.externalResources ?? []).filter((external) => {
+    if (hasStatusFilter && external.status !== statusFilter) return false;
+    if (!matchesDomainFilter(external.domains)) return false;
+    return true;
+  });
+  const filteredHumanCheckpoints = (data.humanCheckpoints ?? []).filter((checkpoint) => {
+    if (hasStatusFilter && checkpoint.status !== statusFilter) return false;
+    if (!matchesDomainFilter(checkpoint.domains)) return false;
+    return true;
+  });
+  const remainingNodeIds = /* @__PURE__ */ new Set([
+    ...filteredAgents.map((a) => a.resourceId),
+    ...filteredWorkflows.map((w) => w.resourceId),
+    ...filteredTriggers.map((t) => t.resourceId),
+    ...filteredIntegrations.map((i) => i.resourceId),
+    ...filteredExternalResources.map((e) => e.resourceId),
+    ...filteredHumanCheckpoints.map((h) => h.resourceId)
+  ]);
+  const filteredEdges = data.edges.filter(
+    (edge) => remainingNodeIds.has(edge.source) && remainingNodeIds.has(edge.target)
+  );
+  return {
+    ...data,
+    agents: filteredAgents,
+    workflows: filteredWorkflows,
+    triggers: filteredTriggers,
+    integrations: filteredIntegrations,
+    externalResources: filteredExternalResources,
+    humanCheckpoints: filteredHumanCheckpoints,
+    edges: filteredEdges
+  };
+}
+
+// src/hooks/operations/command-view/utils/mergeStatsWithTopology.ts
+function mergeStatsWithTopology(topology, stats) {
+  return {
+    ...topology,
+    agents: topology.agents.map((agent) => ({
+      ...agent,
+      stats: stats.resources[agent.resourceId] || null
+    })),
+    workflows: topology.workflows.map((workflow) => ({
+      ...workflow,
+      stats: stats.resources[workflow.resourceId] || null
+    })),
+    humanCheckpoints: topology.humanCheckpoints.map((checkpoint) => ({
+      ...checkpoint,
+      stats: stats.humanCheckpoints[checkpoint.resourceId] || null
+    }))
+  };
+}
+var FILTER_DEBOUNCE_DELAY = 150;
+var TOPBAR_AND_PADDING = 54;
+function CommandViewPage({ timeRange }) {
+  const { organizationReady } = useInitialization();
+  const { data, isLoading, error } = useCommandViewData();
+  const graphRef = useRef(null);
+  const statusFilter = useCommandViewStore((s) => s.statusFilter);
+  const showIntegrations = useCommandViewStore((s) => s.showIntegrations);
+  const fitViewOnFilter = useCommandViewStore((s) => s.fitViewOnFilter);
+  const selectedNodeId = useCommandViewStore((s) => s.selectedNodeId);
+  const setSelectedNodeId = useCommandViewStore((s) => s.setSelectedNodeId);
+  const domainFilters = useCommandViewDomainFilters((s) => s.filters);
+  const { includedDomains, excludedDomains } = useMemo(() => {
+    const included = [];
+    const excluded = [];
+    for (const [id, state] of Object.entries(domainFilters)) {
+      if (state === "include") included.push(id);
+      else if (state === "exclude") excluded.push(id);
+    }
+    return { includedDomains: included, excludedDomains: excluded };
+  }, [domainFilters]);
+  const { data: statsData, error: statsError } = useCommandViewStats(timeRange);
+  const cleanData = data ?? null;
+  const dataWithStats = useMemo(() => {
+    if (!cleanData) return null;
+    if (!statsData) return cleanData;
+    return mergeStatsWithTopology(cleanData, statsData);
+  }, [cleanData, statsData]);
+  const filteredData = useMemo(() => {
+    if (!dataWithStats) return null;
+    return filterCommandViewData(dataWithStats, {
+      domains: includedDomains,
+      excludedDomains,
+      status: statusFilter,
+      showIntegrations
+    });
+  }, [dataWithStats, includedDomains, excludedDomains, statusFilter, showIntegrations]);
+  const debouncedFitView = useCallback(
+    debounce(() => {
+      graphRef.current?.fitView();
+    }, FILTER_DEBOUNCE_DELAY),
+    []
+  );
+  useEffect(() => {
+    return () => debouncedFitView.cancel();
+  }, [debouncedFitView]);
+  useEffect(() => {
+    if (fitViewOnFilter) {
+      debouncedFitView();
+    }
+  }, [domainFilters, statusFilter, showIntegrations, debouncedFitView, fitViewOnFilter]);
+  if (!organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  const showLoader = isLoading && !data;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        height: `calc(100vh - ${TOPBAR_AND_PADDING}px)`,
+        position: "relative",
+        overflow: "hidden",
+        padding: "var(--mantine-spacing-sm)"
+      },
+      children: [
+        showLoader && /* @__PURE__ */ jsx(Center, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Loader, { size: "xl" }) }),
+        error && !data && /* @__PURE__ */ jsx(APIErrorAlert, { error }),
+        statsError && /* @__PURE__ */ jsx(APIErrorAlert, { error: statsError, title: "Failed to load execution stats", color: "yellow" }),
+        !showLoader && !error && !data && /* @__PURE__ */ jsx(Alert, { color: "gray", title: "No Resources", children: "No resources found for this organization. Create agents, workflows, or integrations to see them here." }),
+        filteredData && /* @__PURE__ */ jsx(
+          CommandViewGraph,
+          {
+            ref: graphRef,
+            graph: transformCommandViewData(filteredData),
+            height: "100%",
+            selectedNodeId,
+            onNodeSelect: setSelectedNodeId
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/operations/calibration/queryKeys.ts
+var calibrationKeys = {
+  all: ["calibration"],
+  // Projects
+  projects: (org) => [...calibrationKeys.all, "projects", org],
+  projectsByResource: (org, resourceId, resourceType) => [...calibrationKeys.all, "projects", org, resourceId, resourceType],
+  project: (org, projectId) => [...calibrationKeys.all, "project", org, projectId],
+  // Runs
+  runs: (org, projectId) => [...calibrationKeys.all, "runs", org, projectId],
+  run: (org, runId) => [...calibrationKeys.all, "run", org, runId],
+  runFull: (org, runId) => [...calibrationKeys.all, "run-full", org, runId]
+};
+
+// src/hooks/operations/calibration/useCalibrationProjects.ts
+function useAllCalibrationProjects() {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.projects(organizationId ?? "none"),
+    queryFn: async () => {
+      const response = await apiRequest("/calibration/projects");
+      return response.projects;
+    },
+    enabled: isReady && !!organizationId
+  });
+}
+function useCalibrationProjects(resourceId, resourceType) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", resourceId, resourceType),
+    queryFn: async () => {
+      const response = await apiRequest(
+        `/calibration/projects?resourceId=${resourceId}&resourceType=${resourceType}`
+      );
+      return response.projects;
+    },
+    enabled: isReady && !!resourceId && !!resourceType && !!organizationId
+  });
+}
+function useCalibrationProject(projectId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.project(organizationId ?? "none", projectId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/projects/${projectId}`);
+      return response.project;
+    },
+    enabled: isReady && !!projectId && !!organizationId
+  });
+}
+function useCreateProject() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (input) => {
+      const response = await apiRequest("/calibration/projects", {
+        method: "POST",
+        body: JSON.stringify(input)
+      });
+      return response.project;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projects(organizationId ?? "none")
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", data.resourceId, data.resourceType)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useDeleteProject() {
+  const { apiRequest } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id) => {
+      await apiRequest(`/calibration/projects/${id}`, {
+        method: "DELETE"
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.all
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function ProjectCard({ project, onNavigate }) {
+  const deleteProject = useDeleteProject();
+  const handleClick = () => {
+    onNavigate(project.id);
+  };
+  const handleDelete = async (e) => {
+    e.stopPropagation();
+    if (window.confirm("Delete this project and all its runs?")) {
+      await deleteProject.mutateAsync(project.id);
+    }
+  };
+  return /* @__PURE__ */ jsx(Card, { shadow: "sm", withBorder: true, style: { cursor: "pointer" }, onClick: handleClick, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+        /* @__PURE__ */ jsx(IconFlask, { size: 20, color: "var(--color-primary)" }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, lineClamp: 1, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: project.name })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: project.resourceType }),
+        /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 150, position: "bottom-end", children: [
+          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 }) }) }),
+          /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 14 }), color: "red", onClick: handleDelete, children: "Delete" }) })
+        ] })
+      ] })
+    ] }),
+    project.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 1, children: project.description }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+      "Created ",
+      new Date(project.createdAt).toLocaleDateString()
+    ] })
+  ] }) });
+}
+function CreateProjectModal({ opened, onClose, resourceId, resourceType }) {
+  const createProject = useCreateProject();
+  const form = useForm({
+    initialValues: {
+      name: "",
+      description: ""
+    },
+    validate: {
+      name: (value) => value.trim().length === 0 ? "Name is required" : null
+    }
+  });
+  const handleSubmit = async (values) => {
+    await createProject.mutateAsync({
+      resourceId,
+      resourceType,
+      name: values.name.trim(),
+      description: values.description.trim() || void 0
+    });
+    form.reset();
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(Modal, { opened, onClose, title: "Create Calibration Project", children: /* @__PURE__ */ jsx("form", { onSubmit: form.onSubmit(handleSubmit), children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Project Name",
+        placeholder: "e.g., Q1 2025 Model Selection",
+        required: true,
+        ...form.getInputProps("name")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Description",
+        placeholder: "Optional: Describe the goal of this calibration project",
+        minRows: 2,
+        ...form.getInputProps("description")
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: createProject.isPending, children: "Create Project" })
+    ] })
+  ] }) }) });
+}
+function CalibrationPage({ resourceId, resourceType, onProjectNavigate }) {
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const { data: projects, isLoading, error } = useCalibrationProjects(resourceId, resourceType);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: "Error", color: "red", children: "Failed to load calibration projects. Please try again." });
+  }
+  return /* @__PURE__ */ jsx(PageContainer, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Calibration Lab" }),
+        /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "Compare AI configurations and optimize performance" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setCreateModalOpen(true), children: "New Project" })
+    ] }),
+    projects && projects.length === 0 ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: IconAdjustments,
+        title: "No projects yet",
+        description: "Create your first calibration project to start comparing AI configurations."
+      }
+    ) : /* @__PURE__ */ jsx(Stack, { children: projects?.map((project) => /* @__PURE__ */ jsx(ProjectCard, { project, onNavigate: onProjectNavigate }, project.id)) }),
+    /* @__PURE__ */ jsx(
+      CreateProjectModal,
+      {
+        opened: createModalOpen,
+        onClose: () => setCreateModalOpen(false),
+        resourceId,
+        resourceType
+      }
+    )
+  ] }) });
+}
+function CalibrationProjectDetailPage({
+  projectId,
+  calibrationRootPath,
+  renderRunCard,
+  renderCreateModal,
+  runs,
+  runsLoading
+}) {
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const { organizationReady } = useInitialization();
+  const { data: project, isLoading: projectLoading, error: projectError } = useCalibrationProject(projectId);
+  const projectNotFound = !projectLoading && (projectError || !project);
+  const isLoading = projectLoading || runsLoading;
+  if (!organizationReady || isLoading) return /* @__PURE__ */ jsx(SubshellLoader, {});
+  if (!project || projectNotFound) {
+    return null;
+  }
+  const runCount = runs?.length ?? 0;
+  const caption = `${project.resourceType} \xB7 ${runCount} run${runCount !== 1 ? "s" : ""}`;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: project.name,
+        caption,
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "light",
+              size: "sm",
+              leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
+              component: Link,
+              to: calibrationRootPath,
+              children: "Calibration"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setCreateModalOpen(true), children: "New Run" })
+        ] })
+      }
+    ),
+    runs && runs.length === 0 ? /* @__PURE__ */ jsx(Alert, { color: "gray", title: "No runs yet", children: "Create your first calibration run to start testing configurations." }) : /* @__PURE__ */ jsx(Stack, { gap: "md", children: runs?.map((run) => renderRunCard({ run, projectId })) }),
+    renderCreateModal({
+      opened: createModalOpen,
+      onClose: () => setCreateModalOpen(false),
+      projectId
+    })
+  ] });
+}
+function CalibrationProjectsPage({ onNavigateToProject }) {
+  const { organizationReady } = useInitialization();
+  const { data: projects, isLoading } = useAllCalibrationProjects();
+  if (!organizationReady || isLoading) return /* @__PURE__ */ jsx(SubshellLoader, {});
+  const projectCount = projects?.length ?? 0;
+  const caption = `${projectCount} Project${projectCount !== 1 ? "s" : ""}`;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Calibration Lab", caption }),
+    projects && projects.length > 0 && /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, md: 2 }, children: projects.map((project) => /* @__PURE__ */ jsx(ProjectCard, { project, onNavigate: onNavigateToProject }, project.id)) })
+  ] });
+}
+function formatRelativeTime2(date) {
+  if (!date) return "N/A";
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return formatDistanceToNow(dateObj, { addSuffix: true });
+}
+var FILTER_STATE_ICONS2 = {
+  neutral: IconCircleDashed,
+  include: IconCircleCheck,
+  exclude: IconCircleX
+};
+var FILTER_STATE_COLORS2 = {
+  neutral: "var(--color-surface-hover)",
+  include: "var(--mantine-color-green-6)",
+  exclude: "var(--mantine-color-red-6)"
+};
+var FILTER_STATE_LABELS2 = {
+  neutral: "Not filtered",
+  include: "Include only",
+  exclude: "Exclude"
+};
+var EXECUTION_SECTIONS = [
+  { status: "failed", title: "Failed Executions", badgeColor: "red" },
+  { status: "warning", title: "Warning Executions", badgeColor: "yellow" },
+  { status: "completed", title: "Successful Executions", badgeColor: null }
+];
+var HOVER_CARD_STYLE = {
+  cursor: "pointer",
+  transition: "box-shadow var(--duration-fast) var(--easing)",
+  textDecoration: "none",
+  color: "inherit"
+};
+function handleHoverEnter(e) {
+  e.currentTarget.style.boxShadow = "var(--standard-box-shadow)";
+}
+function handleHoverLeave(e) {
+  e.currentTarget.style.boxShadow = "";
+}
+function ExecutionStatusSection({ executions, status, title, badgeColor, resourceUrl }) {
+  const filtered = executions.filter((e) => e.status === status);
+  if (filtered.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 8, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: title }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: filtered.length })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: filtered.map((execution) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        padding: "xs",
+        withBorder: true,
+        component: "a",
+        href: `${resourceUrl}?exec=${execution.executionId}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: HOVER_CARD_STYLE,
+        onMouseEnter: handleHoverEnter,
+        onMouseLeave: handleHoverLeave,
+        children: [
+          /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: status === "failed" && execution.errorMessage ? 4 : 0, children: [
+            badgeColor ? /* @__PURE__ */ jsx(Badge, { size: "xs", color: badgeColor, variant: "light", children: status }) : /* @__PURE__ */ jsx(Text, { size: "xs", c: "green", children: "\u2713 Completed" }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime2(execution.startedAt) })
+          ] }),
+          status === "failed" && execution.errorMessage && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", lineClamp: 2, children: execution.errorMessage })
+        ]
+      },
+      execution.executionId
+    )) }),
+    /* @__PURE__ */ jsx(Space, { h: "sm" })
+  ] });
+}
+function CommandViewSidebarContent({ timeRange }) {
+  const theme = useMantineTheme();
+  const colors = useCyberColors();
+  const statusFilter = useCommandViewStore((s) => s.statusFilter);
+  const setStatusFilter = useCommandViewStore((s) => s.setStatusFilter);
+  const showIntegrations = useCommandViewStore((s) => s.showIntegrations);
+  const setShowIntegrations = useCommandViewStore((s) => s.setShowIntegrations);
+  const fitViewOnFilter = useCommandViewStore((s) => s.fitViewOnFilter);
+  const setFitViewOnFilter = useCommandViewStore((s) => s.setFitViewOnFilter);
+  const selectedNodeId = useCommandViewStore((s) => s.selectedNodeId);
+  const domainFilters = useCommandViewDomainFilters((s) => s.filters);
+  const cycleDomainFilter = useCommandViewDomainFilters((s) => s.cycle);
+  const { data, isLoading } = useCommandViewData();
+  const { data: statsData } = useCommandViewStats(timeRange);
+  const cleanData = data ?? null;
+  const dataWithStats = useMemo(() => {
+    if (!cleanData) return null;
+    if (!statsData) return cleanData;
+    return mergeStatsWithTopology(cleanData, statsData);
+  }, [cleanData, statsData]);
+  const { donutSuccessCount, donutFailedCount } = useMemo(() => {
+    if (!cleanData || !statsData) return { donutSuccessCount: 0, donutFailedCount: 0 };
+    const allResources = [...cleanData.agents, ...cleanData.workflows];
+    const includes = Object.entries(domainFilters).filter(([, v]) => v === "include").map(([k]) => k);
+    const excludes = Object.entries(domainFilters).filter(([, v]) => v === "exclude").map(([k]) => k);
+    const filtered = allResources.filter((r) => {
+      const domains = r.domains || [];
+      if (excludes.length > 0 && domains.some((d) => excludes.includes(d))) return false;
+      if (includes.length > 0 && !domains.some((d) => includes.includes(d))) return false;
+      if (statusFilter !== "all" && r.status !== statusFilter) return false;
+      return true;
+    });
+    const filteredIds = new Set(filtered.map((r) => r.resourceId));
+    let success = 0;
+    let failed = 0;
+    for (const [id, stats] of Object.entries(statsData.resources)) {
+      if (filteredIds.has(id)) {
+        success += stats.successCount;
+        failed += stats.failureCount;
+      }
+    }
+    return { donutSuccessCount: success, donutFailedCount: failed };
+  }, [cleanData, statsData, domainFilters, statusFilter]);
+  const domainDefinitions = cleanData?.domainDefinitions ?? [];
+  const selectedNode = useMemo(() => {
+    if (!selectedNodeId || !dataWithStats) return null;
+    const allNodes = [
+      ...dataWithStats.agents || [],
+      ...dataWithStats.workflows || [],
+      ...dataWithStats.triggers || [],
+      ...dataWithStats.integrations || [],
+      ...dataWithStats.externalResources || [],
+      ...dataWithStats.humanCheckpoints || []
+    ];
+    return allNodes.find((node) => {
+      const nodeId = getNodeId(node);
+      return nodeId === selectedNodeId || node.name === selectedNodeId;
+    }) || null;
+  }, [selectedNodeId, dataWithStats]);
+  const isNavigable = selectedNode?.type === "agent" || selectedNode?.type === "workflow";
+  const isHumanCheckpoint = selectedNode?.type === "human";
+  const selectedResourceId = useMemo(() => {
+    if (!selectedNode) return null;
+    return getNodeId(selectedNode);
+  }, [selectedNode]);
+  const getNavigationUrl = () => {
+    if (!selectedNode || !selectedResourceId) return null;
+    if (selectedNode.type === "agent") return `/operations/resources/agent/${selectedResourceId}`;
+    if (selectedNode.type === "workflow") return `/operations/resources/workflow/${selectedResourceId}`;
+    if (selectedNode.type === "human") return `/command-center/command-queue?checkpoint=${selectedResourceId}`;
+    return null;
+  };
+  const resourceUrl = selectedNode?.type === "agent" ? `/operations/resources/agent/${selectedResourceId}` : `/operations/resources/workflow/${selectedResourceId}`;
+  const {
+    data: executionsData,
+    isLoading: executionsLoading,
+    error: executionsError
+  } = useResourceExecutions({
+    resourceId: selectedResourceId,
+    timeRange,
+    enabled: isNavigable
+  });
+  const {
+    data: checkpointTasksData,
+    isLoading: checkpointTasksLoading,
+    error: checkpointTasksError
+  } = useCheckpointTasks({
+    checkpointId: selectedResourceId,
+    enabled: isHumanCheckpoint
+  });
+  const totalExecutions = donutSuccessCount + donutFailedCount;
+  const successRate = totalExecutions > 0 ? donutSuccessCount / totalExecutions * 100 : 0;
+  const healthSegments = [
+    { name: "Completed", value: donutSuccessCount, color: colors.green },
+    { name: "Failed", value: donutFailedCount, color: colors.red }
+  ];
+  const centerValueColor = totalExecutions === 0 ? "var(--mantine-color-dimmed)" : successRate >= 95 ? colors.green : successRate >= 80 ? colors.yellow : colors.red;
+  if (isLoading && !data) {
+    return /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSitemap, label: "Command View" }),
+        /* @__PURE__ */ jsx(Box, { style: { padding: theme.spacing.sm, paddingBottom: 0 }, children: /* @__PURE__ */ jsx(Box, { pb: "xs", mb: 4, children: /* @__PURE__ */ jsx(
+          CyberDonut,
+          {
+            title: `Execution Health (${timeRange})`,
+            segments: healthSegments,
+            centerValue: totalExecutions === 0 ? "\u2014" : `${Math.round(successRate)}%`,
+            centerLabel: `${totalExecutions} runs`,
+            centerValueColor,
+            glowId: "cvHealthGlow",
+            colors
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconAdjustmentsHorizontal, label: "Node Filters", withTopBorder: true }),
+          /* @__PURE__ */ jsxs(Stack, { gap: "sm", p: "sm", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", mb: 8, children: "Environment" }),
+              /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  value: statusFilter,
+                  onChange: (value) => setStatusFilter(value),
+                  data: [
+                    { label: "All", value: "all" },
+                    { label: "Prod", value: "prod" },
+                    { label: "Dev", value: "dev" }
+                  ],
+                  size: "xs",
+                  fullWidth: true,
+                  color: "var(--color-primary)"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                label: "Show Integrations",
+                description: "Toggle integration relationship edges",
+                checked: showIntegrations,
+                onChange: (event) => setShowIntegrations(event.currentTarget.checked),
+                size: "sm"
+              }
+            ),
+            domainDefinitions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", mb: 8, children: "Domain" }),
+              /* @__PURE__ */ jsx(Stack, { gap: 2, children: [...domainDefinitions].sort((a, b) => {
+                const bottom = /* @__PURE__ */ new Set(["utility", "diagnostic"]);
+                const aB = bottom.has(a.id) ? 1 : 0;
+                const bB = bottom.has(b.id) ? 1 : 0;
+                if (aB !== bB) return aB - bB;
+                return a.name.localeCompare(b.name);
+              }).map((domain) => {
+                const filterState = domainFilters[domain.id] || "neutral";
+                const StateIcon = FILTER_STATE_ICONS2[filterState];
+                return /* @__PURE__ */ jsx(
+                  UnstyledButton,
+                  {
+                    title: FILTER_STATE_LABELS2[filterState],
+                    onClick: () => cycleDomainFilter(domain.id),
+                    py: 5,
+                    px: 6,
+                    style: {
+                      transition: "background-color var(--duration-fast) var(--easing)",
+                      "&:hover": { backgroundColor: "var(--color-surface-hover)" }
+                    },
+                    children: /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", children: [
+                      /* @__PURE__ */ jsx(
+                        StateIcon,
+                        {
+                          size: 16,
+                          style: {
+                            color: FILTER_STATE_COLORS2[filterState],
+                            flexShrink: 0,
+                            transition: "color var(--duration-fast) var(--easing)"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          size: "sm",
+                          truncate: true,
+                          fw: filterState !== "neutral" ? 500 : 400,
+                          c: filterState !== "neutral" ? void 0 : "dimmed",
+                          children: domain.name
+                        }
+                      )
+                    ] })
+                  },
+                  domain.id
+                );
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSettings, label: "Settings", withTopBorder: true }),
+          /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              label: "Fit view on filter",
+              description: "Re-center graph when filters change",
+              checked: fitViewOnFilter,
+              onChange: (event) => setFitViewOnFilter(event.currentTarget.checked),
+              size: "sm"
+            }
+          ) }),
+          selectedNode && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsxs(Stack, { gap: "xs", p: "sm", mt: 8, children: [
+              /* @__PURE__ */ jsx(Title, { order: 4, children: selectedNode.name }),
+              selectedNode.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: selectedNode.description }),
+              (isNavigable || isHumanCheckpoint) && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  component: "a",
+                  href: getNavigationUrl() || "#",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  variant: "light",
+                  size: "xs",
+                  leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+                  mt: 4,
+                  children: [
+                    "Go to",
+                    " ",
+                    selectedNode.type === "agent" ? "Agent" : selectedNode.type === "workflow" ? "Workflow" : "Queue"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Space, { h: "sm" })
+            ] })
+          ] }),
+          selectedNode && isNavigable && /* @__PURE__ */ jsx(Stack, { p: "sm", children: executionsLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : executionsError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: executionsError, title: "Failed to load executions" }) : executionsData && executionsData.executions.length > 0 ? EXECUTION_SECTIONS.map((section) => /* @__PURE__ */ jsx(
+            ExecutionStatusSection,
+            {
+              executions: executionsData.executions,
+              status: section.status,
+              title: section.title,
+              badgeColor: section.badgeColor,
+              resourceUrl
+            },
+            section.status
+          )) : executionsData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No executions in the selected time range" }) : null }),
+          selectedNode && isHumanCheckpoint && /* @__PURE__ */ jsx(Stack, { p: "sm", children: checkpointTasksLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : checkpointTasksError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: checkpointTasksError, title: "Failed to load pending tasks" }) : checkpointTasksData && checkpointTasksData.tasks.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 8, children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Pending Tasks" }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: checkpointTasksData.tasks.length })
+            ] }),
+            /* @__PURE__ */ jsx(Stack, { gap: "xs", children: checkpointTasksData.tasks.map((task) => /* @__PURE__ */ jsxs(
+              Card,
+              {
+                padding: "xs",
+                withBorder: true,
+                component: "a",
+                href: `/command-center/command-queue?task=${task.id}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: HOVER_CARD_STYLE,
+                onMouseEnter: handleHoverEnter,
+                onMouseLeave: handleHoverLeave,
+                children: [
+                  /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: task.description ? 4 : 0, children: [
+                    /* @__PURE__ */ jsx(Badge, { size: "xs", color: "orange", variant: "light", children: "pending" }),
+                    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime2(task.createdAt) })
+                  ] }),
+                  task.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: task.description })
+                ]
+              },
+              task.id
+            )) })
+          ] }) : checkpointTasksData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No pending tasks" }) : null })
+        ] })
+      ]
+    }
+  );
+}
+function useCalibrationRunFull(runId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.runFull(organizationId ?? "none", runId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/runs/${runId}/full`);
+      return response;
+    },
+    enabled: isReady && !!runId && !!organizationId
+  });
+}
+function useExecuteRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (runId) => {
+      await apiRequest(`/calibration/runs/${runId}/execute`, {
+        method: "POST"
+      });
+    },
+    onSuccess: (_, runId) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useGradeRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      runId,
+      rubric,
+      graderModel
+    }) => {
+      await apiRequest(`/calibration/runs/${runId}/grade`, {
+        method: "POST",
+        body: JSON.stringify({ rubric, graderModel })
+      });
+    },
+    onSuccess: (_, { runId }) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.runFull(organizationId ?? "none", runId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function ComparisonTable({ run, logs, metrics }) {
+  if (run.results.length === 0) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", children: "No results yet. Execute the calibration run to see comparisons." }) });
+  }
+  return /* @__PURE__ */ jsx(Stack, { children: run.results.map((result, index) => /* @__PURE__ */ jsx(ResultCard, { result, run, logs, metrics }, index)) });
+}
+function ResultCard({ result, run, logs, metrics }) {
+  const [expanded, setExpanded] = useState(false);
+  const isSingleResult = "executionId" in result;
+  const executionId = isSingleResult ? result.executionId : result.sessionId;
+  const inputIndex = isSingleResult ? result.inputIndex : 0;
+  const log = logs[executionId];
+  const metric = metrics[executionId];
+  const statusColors = {
+    pending: "gray",
+    running: "blue",
+    completed: "green",
+    failed: "red"
+  };
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      withBorder: true,
+      style: {
+        cursor: "pointer",
+        transition: "background-color var(--duration-fast) var(--easing)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", onClick: () => setExpanded(!expanded), children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: expanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }) }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: result.variantName }),
+              run.executionMode === "single" && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                "Input #",
+                inputIndex + 1
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", children: [
+            metric?.totalDuration && metric.totalDuration > 0 && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(IconClock, { size: 14, style: { opacity: 0.5 } }),
+              /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                (metric.totalDuration / 1e3).toFixed(2),
+                "s"
+              ] })
+            ] }),
+            metric?.totalCost && metric.totalCost > 0 && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(IconCoin, { size: 14, style: { opacity: 0.5 } }),
+              /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                "$",
+                metric.totalCost.toFixed(4)
+              ] })
+            ] }),
+            run.gradingRubric && result.grade && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+              result.grade.passed ? /* @__PURE__ */ jsx(IconCheck, { size: 14, color: "var(--color-success)" }) : /* @__PURE__ */ jsx(IconX, { size: 14, color: "var(--color-error)" }),
+              /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+                (result.grade.score * 100).toFixed(0),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { color: statusColors[result.status], size: "sm", children: result.status })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", mt: "md", pt: "md", style: { borderTop: "1px solid var(--color-border)" }, children: [
+          run.testInputs[inputIndex] !== void 0 && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", mb: "xs", children: "INPUT" }),
+            /* @__PURE__ */ jsx(Paper, { style: { background: "var(--color-background)" }, children: /* @__PURE__ */ jsx(JsonViewer, { data: run.testInputs[inputIndex], maxHeight: "200px" }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", mb: "xs", children: "OUTPUT" }),
+            /* @__PURE__ */ jsx(Paper, { style: { background: "var(--color-background)" }, children: log?.output ? /* @__PURE__ */ jsx(JsonViewer, { data: log.output, maxHeight: "300px" }) : result.errorMessage ? /* @__PURE__ */ jsx(Text, { c: "red", size: "sm", children: result.errorMessage }) : /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "No output available" }) })
+          ] }),
+          log?.error && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "red", mb: "xs", children: "ERROR" }),
+            /* @__PURE__ */ jsxs(Paper, { style: { background: "var(--color-background)" }, children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", children: log.error.message }),
+              log.error.category && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+                "Category: ",
+                log.error.category
+              ] })
+            ] })
+          ] }),
+          result.grade && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", mb: "xs", children: "GRADE DETAILS" }),
+            /* @__PURE__ */ jsx(Paper, { style: { background: "var(--color-background)" }, children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Object.entries(result.grade.details).map(([criterion, detail]) => {
+              const d = detail;
+              return /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: criterion }),
+                /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+                  /* @__PURE__ */ jsxs(Badge, { size: "sm", color: d.score >= 0.7 ? "green" : d.score >= 0.4 ? "yellow" : "red", children: [
+                    (d.score * 100).toFixed(0),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { maxWidth: 300 }, lineClamp: 1, children: d.justification })
+                ] })
+              ] }, criterion);
+            }) }) })
+          ] }),
+          result.gradeError && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "red", mb: "xs", children: "GRADING ERROR" }),
+            /* @__PURE__ */ jsx(Paper, { style: { background: "var(--color-background)" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", children: result.gradeError }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function GradingPanel({ run, rubric }) {
+  const variantSummaries = run.configVariants.map((variant) => {
+    const variantResults = run.results.filter((r) => r.variantName === variant.variantName);
+    const gradedResults = variantResults.filter((r) => r.grade);
+    const avgScore = gradedResults.length > 0 ? gradedResults.reduce((sum, r) => sum + (r.grade?.score ?? 0), 0) / gradedResults.length : null;
+    const passRate = gradedResults.length > 0 ? gradedResults.filter((r) => r.grade?.passed).length / gradedResults.length : null;
+    return {
+      variantName: variant.variantName,
+      avgScore,
+      passRate,
+      total: variantResults.length,
+      graded: gradedResults.length
+    };
+  });
+  return /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsx(Title, { order: 4, mb: "md", children: "Grading Rubric" }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", mb: "md", children: [
+        "Passing threshold: ",
+        (rubric.passingThreshold * 100).toFixed(0),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Th, { children: "Criterion" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Weight" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Description" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Tbody, { children: rubric.criteria.map((criterion, i) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { fw: 500, children: criterion.name }),
+          /* @__PURE__ */ jsxs(Table.Td, { children: [
+            (criterion.weight * 100).toFixed(0),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: criterion.description }) })
+        ] }, i)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsx(Title, { order: 4, mb: "md", children: "Results by Variant" }),
+      /* @__PURE__ */ jsx(Stack, { gap: "md", children: variantSummaries.map((summary, i) => /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { fw: 500, children: summary.variantName }),
+          summary.avgScore !== null && /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(
+              ThemeIcon,
+              {
+                size: "sm",
+                color: summary.avgScore >= rubric.passingThreshold ? "green" : "red",
+                variant: "light",
+                children: summary.avgScore >= rubric.passingThreshold ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconX, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { fw: 500, children: [
+              (summary.avgScore * 100).toFixed(0),
+              "%"
+            ] })
+          ] })
+        ] }),
+        summary.avgScore !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Progress,
+            {
+              value: summary.avgScore * 100,
+              color: summary.avgScore >= rubric.passingThreshold ? "green" : "red",
+              size: "sm",
+              mb: "xs"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Pass rate: ",
+            summary.passRate !== null ? `${(summary.passRate * 100).toFixed(0)}%` : "-",
+            " \xB7",
+            " ",
+            summary.graded,
+            "/",
+            summary.total,
+            " graded"
+          ] })
+        ] }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Not graded yet" })
+      ] }, i)) })
+    ] })
+  ] });
+}
+var STATUS_COLORS = {
+  pending: "gray",
+  running: "blue",
+  completed: "green",
+  partial: "yellow",
+  failed: "red"
+};
+function CalibrationRunDetailPage({
+  runId,
+  onNavigateToProject,
+  renderSessionComparison,
+  renderProgressPanel
+}) {
+  const { organizationReady } = useInitialization();
+  const { data: fullData, isLoading, error, refetch } = useCalibrationRunFull(runId);
+  const executeRun = useExecuteRun();
+  const gradeRun = useGradeRun();
+  const [inputsExpanded, setInputsExpanded] = useState(false);
+  if (!organizationReady || isLoading) return /* @__PURE__ */ jsx(SubshellLoader, {});
+  if (!fullData || error) {
+    return null;
+  }
+  const { run, logs, metrics } = fullData;
+  const handleExecute = async () => {
+    await executeRun.mutateAsync(runId);
+    refetch();
+  };
+  const handleGrade = async () => {
+    await gradeRun.mutateAsync({
+      runId,
+      rubric: run.gradingRubric ?? void 0,
+      graderModel: run.graderModel ?? void 0
+    });
+    refetch();
+  };
+  const completedCount = run.results.filter((r) => r.status === "completed").length;
+  const failedCount = run.results.filter((r) => r.status === "failed").length;
+  const totalDuration = Object.values(metrics).reduce((sum, m) => {
+    const metric = m;
+    return sum + (metric.totalDuration || 0);
+  }, 0);
+  const totalCost = Object.values(metrics).reduce((sum, m) => {
+    const metric = m;
+    return sum + (metric.totalCost || 0);
+  }, 0);
+  const caption = `${run.configVariants.length} variants \xB7 ${run.testInputs.length} inputs`;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: run.name,
+        caption,
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "light",
+              size: "sm",
+              leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }),
+              onClick: () => onNavigateToProject(run.projectId),
+              children: "Project"
+            }
+          ),
+          /* @__PURE__ */ jsx(Badge, { color: STATUS_COLORS[run.status], children: run.status }),
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", children: run.executionMode }),
+          run.status === "pending" && /* @__PURE__ */ jsx(Button, { leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 16 }), onClick: handleExecute, loading: executeRun.isPending, children: "Execute" }),
+          run.status === "completed" && run.gradingRubric && /* @__PURE__ */ jsx(
+            Button,
+            {
+              leftSection: /* @__PURE__ */ jsx(IconReportAnalytics, { size: 16 }),
+              variant: "outline",
+              onClick: handleGrade,
+              loading: gradeRun.isPending,
+              children: "Re-Grade"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "sm", children: [
+        run.results.length > 0 && /* @__PURE__ */ jsxs(Group, { gap: "md", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(IconCheck, { size: 14, color: "var(--color-success)" }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "green", children: completedCount }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "completed" })
+          ] }),
+          failedCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(IconX, { size: 14, color: "var(--color-error)" }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "red", children: failedCount }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "failed" })
+          ] }),
+          totalDuration > 0 && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(IconClock, { size: 14, style: { opacity: 0.5 } }),
+            /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+              (totalDuration / 1e3).toFixed(1),
+              "s"
+            ] })
+          ] }),
+          totalCost > 0 && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            /* @__PURE__ */ jsx(IconCoin, { size: 14, style: { opacity: 0.5 } }),
+            /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+              "$",
+              totalCost.toFixed(4)
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "md", children: [
+          run.createdAt && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Created: ",
+            new Date(run.createdAt).toLocaleString()
+          ] }),
+          run.completedAt && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Completed: ",
+            new Date(run.completedAt).toLocaleString()
+          ] })
+        ] })
+      ] }),
+      run.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: "xs", children: run.description }),
+      /* @__PURE__ */ jsxs(Box, { mt: "sm", pt: "sm", style: { borderTop: "1px solid var(--color-border)" }, children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", style: { cursor: "pointer" }, onClick: () => setInputsExpanded(!inputsExpanded), children: [
+          /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: inputsExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }) }),
+          /* @__PURE__ */ jsxs(Text, { fw: 500, size: "sm", children: [
+            "Test Inputs (",
+            run.testInputs.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Collapse, { in: inputsExpanded, children: /* @__PURE__ */ jsx(Stack, { mt: "sm", children: run.testInputs.map((input, index) => /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mb: "xs", children: [
+            "Input #",
+            index + 1
+          ] }),
+          /* @__PURE__ */ jsx(Paper, { style: { background: "var(--color-background)" }, children: /* @__PURE__ */ jsx(JsonViewer, { data: input, maxHeight: "150px" }) })
+        ] }, index)) }) })
+      ] })
+    ] }),
+    run.status === "running" && renderProgressPanel?.({ runId }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "comparison", children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        /* @__PURE__ */ jsx(Tabs.Tab, { value: "comparison", children: "Results" }),
+        run.gradingRubric && /* @__PURE__ */ jsx(Tabs.Tab, { value: "grading", children: "Grading" })
+      ] }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "comparison", pt: "sm", children: run.executionMode === "session" ? renderSessionComparison?.({ run }) : /* @__PURE__ */ jsx(ComparisonTable, { run, logs, metrics }) }),
+      run.gradingRubric && /* @__PURE__ */ jsx(Tabs.Panel, { value: "grading", pt: "sm", children: /* @__PURE__ */ jsx(GradingPanel, { run, rubric: run.gradingRubric }) })
+    ] })
+  ] });
+}
+function WorkflowExecutionPanel({
+  resourceId,
+  resourceDefinition,
+  sseManager,
+  apiUrl,
+  onConnectionStatus
+}) {
+  const theme = useMantineTheme();
+  const { executions, isLoading, selectedId, setSelectedId, streamingLogs } = useExecutionPanelState({
+    resourceId,
+    manager: sseManager,
+    apiUrl,
+    limit: PAGE_SIZE_DEFAULT,
+    onConnectionStatus
+  });
+  const [selectedStepId, setSelectedStepId] = useState(null);
+  const isValidSelection = selectedId && executions.some((e) => e.id === selectedId);
+  const { data: selectedExecution } = useExecution(resourceId, isValidSelection ? selectedId : "");
+  const executionStreamingLogs = selectedId ? streamingLogs.get(selectedId) : void 0;
+  const mergedExecution = useMergedExecution(selectedExecution, executionStreamingLogs);
+  const timelineData = useTimelineData(mergedExecution, resourceDefinition);
+  const isRemoteStub = resourceDefinition.steps.length === 1 && resourceDefinition.steps[0]?.id === "_remote";
+  useEffect(() => {
+    setSelectedStepId(null);
+  }, [selectedId]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { h: "100%", children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "0", style: { height: "100%", overflow: "hidden" }, children: [
+    isRemoteStub ? /* @__PURE__ */ jsx(Alert, { variant: "light", icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 16 }), m: "sm", children: "Workflow topology is not available for remotely deployed resources. Execution logs are shown below." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        UnifiedWorkflowGraph,
+        {
+          resourceDefinition,
+          executionLogs: mergedExecution?.executionLogs,
+          selectedStepId,
+          onStepSelect: setSelectedStepId
+        }
+      ),
+      timelineData && /* @__PURE__ */ jsx(WorkflowExecutionTimeline, { timelineData, selectedStepId })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          overflow: "hidden",
+          padding: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsx(
+          WorkflowExecutionLogs,
+          {
+            resourceId,
+            executionId: selectedId,
+            execution: mergedExecution,
+            selectedStepId,
+            timelineData,
+            onExecutionDeleted: () => setSelectedId(void 0)
+          }
+        )
+      }
+    )
+  ] });
+}
+function AgentExecutionPanel({
+  resourceId,
+  resourceDefinition,
+  sseManager,
+  apiUrl,
+  onConnectionStatus
+}) {
+  const theme = useMantineTheme();
+  const { isLoading, selectedId, setSelectedId, liveExecutions, streamingLogs } = useExecutionPanelState({
+    resourceId,
+    manager: sseManager,
+    apiUrl,
+    limit: PAGE_SIZE_DEFAULT,
+    onConnectionStatus
+  });
+  const [selectedIterationId, setSelectedIterationId] = useState(null);
+  const { data: selectedExecution } = useExecution(resourceId, selectedId || "");
+  const executionStreamingLogs = selectedId ? streamingLogs.get(selectedId) : void 0;
+  const mergedExecution = useMergedExecution(selectedExecution, executionStreamingLogs);
+  const iterationData = useAgentIterationData(mergedExecution, resourceDefinition);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { h: "100%", p: "lg", children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "0", style: { height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(
+      AgentExecutionVisualizer,
+      {
+        resourceDefinition,
+        iterationData,
+        selectedExecutionId: selectedId,
+        liveExecutions,
+        selectedIterationId,
+        onIterationSelect: setSelectedIterationId
+      }
+    ),
+    iterationData && /* @__PURE__ */ jsx(AgentExecutionTimeline, { iterationData, selectedIterationId }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          overflow: "hidden",
+          padding: theme.spacing.sm
+        },
+        children: /* @__PURE__ */ jsx(
+          AgentExecutionLogs,
+          {
+            resourceId,
+            executionId: selectedId,
+            execution: mergedExecution,
+            selectedIterationId,
+            iterationData,
+            onExecutionDeleted: () => setSelectedId(void 0)
+          }
+        )
+      }
+    )
+  ] });
+}
+function ResourceDefinitionError({
+  resourceId,
+  resourceType,
+  resourceName
+}) {
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Alert, { variant: "light", color: "red", title: "Resource Definition Error", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+      "Failed to load resource definition for ",
+      resourceType,
+      ' "',
+      resourceName || resourceId,
+      '". This may indicate a data loading issue or an incompatible resource format.'
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+      "Resource ID: ",
+      resourceId,
+      /* @__PURE__ */ jsx("br", {}),
+      "Resource Type: ",
+      resourceType
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "light", size: "xs", leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 14 }), onClick: handleRefresh, mt: "xs", children: "Refresh Page" })
+  ] }) }) });
+}
+function isWorkflowDefinition(structure) {
+  return structure.config.type === "workflow";
+}
+function isAgentDefinition(structure) {
+  return structure.config.type === "agent";
+}
+function ExecutionPanel({
+  resourceId,
+  resourceType,
+  resourceName,
+  resourceDefinition,
+  sseManager,
+  apiUrl,
+  onConnectionStatus
+}) {
+  const diProps = { resourceId, resourceName, sseManager, apiUrl, onConnectionStatus };
+  switch (resourceType) {
+    case "workflow":
+      return isWorkflowDefinition(resourceDefinition) ? /* @__PURE__ */ jsx(WorkflowExecutionPanel, { ...diProps, resourceDefinition }) : /* @__PURE__ */ jsx(ResourceDefinitionError, { resourceId, resourceType, resourceName });
+    case "agent":
+      return isAgentDefinition(resourceDefinition) ? /* @__PURE__ */ jsx(AgentExecutionPanel, { ...diProps, resourceDefinition }) : /* @__PURE__ */ jsx(ResourceDefinitionError, { resourceId, resourceType, resourceName });
+    default:
+      return isWorkflowDefinition(resourceDefinition) ? /* @__PURE__ */ jsx(WorkflowExecutionPanel, { ...diProps, resourceDefinition }) : /* @__PURE__ */ jsx(ResourceDefinitionError, { resourceId, resourceType, resourceName });
+  }
+}
 
-export { ResourcesPage, ResourcesSidebar };
+export { AgentExecutionPanel, CalibrationPage, CalibrationProjectDetailPage, CalibrationProjectsPage, CalibrationRunDetailPage, CommandQueueDetailPage, CommandQueuePage, CommandViewPage, CommandViewSidebarContent, ExecutionPanel, ResourceDetailPage, ResourcesPage, ResourcesSidebar, WorkflowExecutionPanel };