@elevasis/ui 2.17.0 → 2.18.0

package/dist/{chunk-OXWQQCDR.js → chunk-WP3IYOVJ.js}

@@ -1,20 +1,20 @@
 import { ChatHeader, ChatSidebar } from './chunk-ROSMICXG.js';
 import { SubshellLoader } from './chunk-ADSSLKKP.js';
-import { BaseNode, useGraphTheme, BaseEdge, FormFieldRenderer, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-ABUDMATM.js';
-import { ResourceHealthPanel } from './chunk-JU6UB4YA.js';
-import { useCyberColors, CyberDonut } from './chunk-MJ6YV2B5.js';
+import { BaseNode, useGraphTheme, BaseEdge, FormFieldRenderer, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-66VY5EMV.js';
+import { ResourceHealthPanel } from './chunk-FM6LSZ45.js';
+import { useCyberColors, CyberDonut } from './chunk-DDZMBNTY.js';
 import { AppShellLoader } from './chunk-M25JL54Z.js';
 import { PageContainer } from './chunk-BZZCNLT6.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
 import { getResourceStatusColor, useTimelineData, useAgentIterationData, getStatusIcon } from './chunk-E4WQGJNS.js';
-import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, useBulkDeleteExecutions } from './chunk-R7GKX4HW.js';
+import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, useBulkDeleteExecutions } from './chunk-EY322HXF.js';
 import { showApiErrorNotification, showSuccessNotification } from './chunk-GRGRBWIO.js';
 import { useGraphHighlighting, calculateGraphHeight, Graph_module_css_default, GRAPH_CONSTANTS } from './chunk-22UVE3RA.js';
 import { useMergedExecution } from './chunk-3ZMAGTWF.js';
-import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-2TDZBYXI.js';
+import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-A2AZY5SF.js';
 import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
-import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-TTP62HWW.js';
+import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-SQPM2QDH.js';
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { NavigationButton } from './chunk-NYBEU5TE.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
@@ -2375,9 +2375,19 @@ var ResourceFilter = ({ value, onChange, fullWidth }) => {
     )
   ] });
 };
-function ResourceHeader({ resource, type, connected, runningCount, sessionCapable }) {
+function ResourceHeader({
+  resource,
+  type,
+  connected,
+  runningCount,
+  sessionCapable,
+  organizationName: organizationNameProp,
+  onRun,
+  onNavigateToResources,
+  onNavigateToSessions
+}) {
   const { currentMembership } = useOrganization();
-  const organizationName = currentMembership?.organization?.name;
+  const organizationName = organizationNameProp ?? currentMembership?.organization?.name;
   const navigate = useNavigate();
   const Icon = getResourceIcon(type);
   const clipboard = useClipboard({ timeout: 2e3 });
@@ -2388,12 +2398,11 @@ function ResourceHeader({ resource, type, connected, runningCount, sessionCapabl
       color: "teal"
     });
   };
-  const handleGoToSessions = () => {
-    navigate({
-      to: "/operations/sessions",
-      search: { agent: resource.resourceId }
-    });
-  };
+  const handleGoToSessions = onNavigateToSessions ?? (() => navigate({
+    to: "/operations/sessions",
+    search: { agent: resource.resourceId }
+  }));
+  const handleGoToResources = onNavigateToResources ?? (() => navigate({ to: "/operations/resources" }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       PageTitleCaption,
@@ -2429,17 +2438,9 @@ function ResourceHeader({ resource, type, connected, runningCount, sessionCapabl
           runningCount,
           " running"
         ] }),
+        onRun && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "filled", leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 16 }), onClick: onRun, children: "Run" }),
         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"
-          }
-        )
+        /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: handleGoToResources, children: "Resources" })
       ] })
     ] })
   ] });
@@ -3035,7 +3036,7 @@ var CommandQueueSidebar = ({
 }) => {
   const colors = useCyberColors();
   const features = useOptionalElevasisFeatures();
-  const resolvedTimeRange = timeRange ?? features?.timeRange ?? "24h";
+  const resolvedTimeRange = timeRange ?? features?.timeRange ?? "30d";
   const statusFilter = status === "all" ? void 0 : status;
   const { data: checkpointData, isLoading: isDonutLoading } = useCommandQueueTotals({
     timeRange: resolvedTimeRange,
@@ -3709,75 +3710,6 @@ function ResourcesSidebar({ timeRange }) {
     ] })
   ] });
 }
-function ResourceHeader2({
-  resource,
-  type,
-  connected,
-  runningCount,
-  sessionCapable,
-  onRun,
-  onNavigateToResources,
-  onNavigateToSessions
-}) {
-  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 = onNavigateToSessions ?? (() => navigate({
-    to: "/operations/sessions",
-    search: { agent: resource.resourceId }
-  }));
-  const handleGoToResources = onNavigateToResources ?? (() => navigate({ to: "/operations/resources" }));
-  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"
-        ] }),
-        onRun && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "filled", leftSection: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 16 }), onClick: onRun, children: "Run" }),
-        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: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: handleGoToResources, children: "Resources" })
-      ] })
-    ] })
-  ] });
-}
 function ResourceErrorState2({ 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" }),
@@ -4022,7 +3954,7 @@ function ResourceDetailPage({
     ),
     /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsx(
-        ResourceHeader2,
+        ResourceHeader,
         {
           resource: validResource,
           type,
@@ -4071,7 +4003,7 @@ function CommandQueuePage({
   const features = useOptionalElevasisFeatures();
   const [deleteConfirmId, setDeleteConfirmId] = useState(null);
   const { mutate: deleteTask, isPending: isDeleting } = useDeleteTask();
-  const resolvedTimeRange = timeRange ?? features?.timeRange ?? "24h";
+  const resolvedTimeRange = timeRange ?? features?.timeRange ?? "30d";
   const serverStatus = status === "all" ? void 0 : status;
   const { page, setPage, offset, totalPages } = usePaginationState(pageSize, [
     selectedCheckpoint,
@@ -4079,12 +4011,7 @@ function CommandQueuePage({
     resolvedTimeRange,
     priorityRange
   ]);
-  const { data: checkpointData, isLoading: isLoadingCheckpoints } = useCommandQueueTotals({
-    timeRange: resolvedTimeRange,
-    priorityMin: priorityRange[0],
-    priorityMax: priorityRange[1]
-  });
-  const { data: tasks = [], isLoading: isLoadingTasks } = useCommandQueue({
+  const { data: taskList, isLoading: isLoadingTasks } = useCommandQueue({
     status: serverStatus,
     humanCheckpoint: selectedCheckpoint,
     timeRange: resolvedTimeRange,
@@ -4093,16 +4020,46 @@ function CommandQueuePage({
     limit: pageSize,
     offset
   });
+  const tasks = taskList?.tasks ?? [];
   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;
+  if (!organizationReady) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  const totalTasks = taskList?.total ?? 0;
   return /* @__PURE__ */ jsxs(Stack, { 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(
+    /* @__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" }) }) : status === "all" ? (() => {
+      const pending = tasks.filter((t) => t.status === "pending");
+      const other = tasks.filter((t) => t.status !== "pending");
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        pending.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { c: "dimmed", fw: 600, tt: "uppercase", size: "xs", children: "Pending" }),
+          pending.map((task) => /* @__PURE__ */ jsx(
+            CommandQueueTaskRow,
+            {
+              task,
+              onClick: () => onNavigateToTask(task.id),
+              onDelete: (taskId) => setDeleteConfirmId(taskId)
+            },
+            task.id
+          ))
+        ] }),
+        other.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { c: "dimmed", fw: 600, tt: "uppercase", size: "xs", children: "Other" }),
+          other.map((task) => /* @__PURE__ */ jsx(
+            CommandQueueTaskRow,
+            {
+              task,
+              onClick: () => onNavigateToTask(task.id),
+              onDelete: (taskId) => setDeleteConfirmId(taskId)
+            },
+            task.id
+          ))
+        ] })
+      ] });
+    })() : tasks.map((task) => /* @__PURE__ */ jsx(
       CommandQueueTaskRow,
       {
         task,
@@ -4181,8 +4138,8 @@ function CommandQueueDetailPage({
   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 { data: taskList, isLoading } = useCommandQueue();
+  const task = taskList?.tasks.find((t) => t.id === taskId);
   const richTextRenderer = renderRichText ? (props) => renderRichText(props) : void 0;
   const submitCallbacks = {
     onSuccess: (data) => {
@@ -4232,25 +4189,13 @@ function CommandQueueDetailPage({
   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(PageTitleCaption, { title: "Task Not Found" }),
+      /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", title: "Back to Queue", onClick: onNavigateBack, children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }) }) }),
       /* @__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__ */ jsx(PageTitleCaption, { title: "Task Detail", caption: task.description || "Task approval required" }),
     /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
       /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
         /* @__PURE__ */ jsxs(Badge, { color: getPriorityColor2(task.priority), variant: "light", size: "sm", children: [
@@ -4278,6 +4223,7 @@ function CommandQueueDetailPage({
       ] }),
       /* @__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", size: "sm", title: "Back to Queue", onClick: onNavigateBack, children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }) }),
         /* @__PURE__ */ jsx(
           ActionIcon,
           {
@@ -4294,82 +4240,128 @@ function CommandQueueDetailPage({
     ] }),
     /* @__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 })
-              }
-            ) })
-          ] })
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2, md: 3 }, spacing: "xs", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Task ID" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              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)",
+              style: { flexShrink: 0 },
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+            }
+          ) })
         ] }),
-        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 })
-              }
-            ) })
-          ] })
+        task.humanCheckpoint && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Checkpoint" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              children: task.humanCheckpoint
+            }
+          )
         ] }),
-        /* @__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(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Origin Resource" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              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)",
+              style: { flexShrink: 0 },
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+            }
+          ) })
         ] }),
-        /* @__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__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Origin Exec ID" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              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)",
+              style: { flexShrink: 0 },
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Target Resource" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              children: task.targetResourceId || "N/A"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { flexShrink: 0 }, children: "Target Exec ID" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              ff: "monospace",
+              c: "var(--color-text-subtle)",
+              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 },
+              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)",
+              style: { flexShrink: 0 },
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx(IconCopy, { size: 12 })
+            }
+          ) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
@@ -7132,7 +7124,7 @@ function formatGeneratedTimestamp(value) {
     minute: "2-digit"
   }).format(new Date(value));
 }
-function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
+function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const { organizationModel, organizationGraph } = useElevasisFeatures();
   const { data: commandViewData, isLoading, error } = useCommandViewData();
   const { data: commandViewStats } = useCommandViewStats(timeRange, { enabled: lens === "command-view" });
@@ -7808,6 +7800,11 @@ function CommandViewSidebarContent({ timeRange }) {
     if (!selectedNode) return null;
     return getNodeId(selectedNode);
   }, [selectedNode]);
+  const {
+    page: executionPage,
+    setPage: setExecutionPage,
+    totalPages: totalExecutionPages
+  } = usePaginationState(10, [selectedResourceId, timeRange]);
   const getNavigationUrl = () => {
     if (!selectedNode || !selectedResourceId) return null;
     if (selectedNode.type === "agent") return `/operations/resources/agent/${selectedResourceId}`;
@@ -7823,6 +7820,8 @@ function CommandViewSidebarContent({ timeRange }) {
   } = useResourceExecutions({
     resourceId: selectedResourceId,
     timeRange,
+    page: executionPage,
+    limit: 10,
     enabled: isNavigable
   });
   const {
@@ -7979,17 +7978,29 @@ function CommandViewSidebarContent({ timeRange }) {
               /* @__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 && 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 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            EXECUTION_SECTIONS.map((section) => /* @__PURE__ */ jsx(
+              ExecutionStatusSection,
+              {
+                executions: executionsData.executions,
+                status: section.status,
+                title: section.title,
+                badgeColor: section.badgeColor,
+                resourceUrl
+              },
+              section.status
+            )),
+            totalExecutionPages(executionsData.totalExecutions) > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
+              Pagination,
+              {
+                size: "sm",
+                total: totalExecutionPages(executionsData.totalExecutions),
+                value: executionPage,
+                onChange: setExecutionPage,
+                boundaries: 1
+              }
+            ) })
+          ] }) : 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" }),
@@ -9134,6 +9145,7 @@ var ExecutionLogsSidebar = () => {
   const [filter, setFilter] = useState("all");
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const bulkDelete = useBulkDeleteExecutions();
+  const { page, setPage, offset, totalPages } = usePaginationState(PAGE_SIZE_DEFAULT, [resourceId, filter]);
   if (!operationsApiUrl || !operationsSSEManager) {
     return /* @__PURE__ */ jsx(Box, { p: "sm", style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(
       APIErrorAlert,
@@ -9142,11 +9154,12 @@ var ExecutionLogsSidebar = () => {
       }
     ) });
   }
-  const { executions, isLoading, isFetched, selectedId, setSelectedId, setResourceStatusFilter, runningCount } = useExecutionPanelState({
+  const { executions, total, isLoading, isFetched, selectedId, setSelectedId, setResourceStatusFilter, runningCount } = useExecutionPanelState({
     resourceId,
     apiUrl: operationsApiUrl,
     manager: operationsSSEManager,
-    limit: PAGE_SIZE_DEFAULT
+    limit: PAGE_SIZE_DEFAULT,
+    offset
   });
   const handleFilterChange = (value) => {
     const nextFilter = value || "dev";
@@ -9165,6 +9178,7 @@ var ExecutionLogsSidebar = () => {
     }
   };
   const filteredExecutions = filter === "all" ? executions : executions.filter((exec) => exec.resourceStatus === filter);
+  const totalExecutions = total;
   if (isLoading || !isFetched) {
     return /* @__PURE__ */ jsx(Center, { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
   }
@@ -9226,7 +9240,8 @@ var ExecutionLogsSidebar = () => {
         "No ",
         filter === "all" ? "" : filter,
         " executions yet"
-      ] }) }) })
+      ] }) }) }),
+      totalPages(totalExecutions) > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", mt: "md", children: /* @__PURE__ */ jsx(Pagination, { size: "sm", total: totalPages(totalExecutions), value: page, onChange: setPage, boundaries: 1 }) })
     ] }),
     /* @__PURE__ */ jsx(
       ConfirmationModal,
@@ -9292,7 +9307,7 @@ function CommandQueueSidebarConnected() {
 }
 var OperationsSidebarMiddle = () => {
   const { currentPath, currentSearch, navigate } = useRouterContext();
-  const { timeRange = "24h" } = useElevasisFeatures();
+  const { timeRange = "30d" } = useElevasisFeatures();
   if (currentPath.startsWith("/operations/sessions")) {
     return /* @__PURE__ */ jsx(
       SessionsSidebar,