@elevasis/ui 2.17.2 → 2.19.0

package/dist/{chunk-HH3RNG2O.js → chunk-JEQM67SO.js}

@@ -1,32 +1,32 @@
 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 { SubshellSidebarLoader, SubshellLoader } from './chunk-3JCMO7SD.js';
+import { BaseNode, useGraphTheme, BaseEdge, FormFieldRenderer, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-TKEKYPZA.js';
+import { ResourceHealthPanel } from './chunk-LVCJ2H2T.js';
+import { useCyberColors, CyberDonut } from './chunk-CTTY6FUT.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 { showApiErrorNotification, showSuccessNotification } from './chunk-GRGRBWIO.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-UU6PJ4EJ.js';
+import { showApiErrorNotification, showSuccessNotification } from './chunk-M7W7CGPL.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-LR5CRY5A.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-BHR7IV72.js';
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { NavigationButton } from './chunk-NYBEU5TE.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { useAppearance } from './chunk-QJ2KCHKX.js';
 import { topbarHeight } from './chunk-DT3QYZVU.js';
-import { getErrorInfo, formatErrorMessage, getResourceIcon, formatRelativeTime, DOMAIN_MAP, getNodeId, PAGE_SIZE_DEFAULT, debounce } from './chunk-GCBWGGI6.js';
+import { getErrorInfo, formatErrorMessage, getResourceIcon, formatRelativeTime, DOMAIN_MAP, getNodeId, PAGE_SIZE_DEFAULT, debounce } from './chunk-OD7GWIZS.js';
 import { ResourceStatusColors, toWorkflowLogMessages } from './chunk-KRWALB24.js';
 import { useInitialization } from './chunk-DK2HVHCY.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
 import { z } from 'zod';
-import { Stack, Group, Text, Badge, Title, Textarea, Alert, Button, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, Select, RangeSlider, Loader, Box, Progress, Tabs, Pagination, TextInput, Modal, LoadingOverlay, SegmentedControl, Switch, ScrollArea, MultiSelect } from '@mantine/core';
-import { IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconCode, IconAlertCircle, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconPlayerPlay, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconActivityHeartbeat, IconClockPause, IconArrowsMaximize, IconShare2, IconHistory } from '@tabler/icons-react';
+import { Stack, Group, Text, Badge, Title, Textarea, Alert, Button, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, Select, RangeSlider, Box, Progress, Tabs, Pagination, TextInput, Modal, LoadingOverlay, Loader, SegmentedControl, Switch, ScrollArea, MultiSelect } from '@mantine/core';
+import { IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconCode, IconAlertCircle, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconPlayerPlay, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconFolders, IconBraces, IconBolt, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconActivityHeartbeat, IconClockPause, IconArrowsMaximize, IconShare2, IconHistory } from '@tabler/icons-react';
 import { useForm } from '@mantine/form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, useState, useMemo, useRef, useCallback, useEffect, useDeferredValue, useEffectEvent } from 'react';
@@ -1108,8 +1108,16 @@ function ActionModal({
       {}
     );
   };
+  const fieldDefaults = (action.form?.fields || []).reduce(
+    (acc, field) => {
+      acc[field.name] = field.defaultValue ?? "";
+      return acc;
+    },
+    {}
+  );
   const form = useForm({
     initialValues: {
+      ...fieldDefaults,
       ...getInitialValuesFromContext(),
       ...action.payloadTemplate || {},
       notes: ""
@@ -3000,7 +3008,7 @@ function CommandQueueSidebarMiddle({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconCategory, label: "Checkpoint Groups", withTopBorder: true }),
-    /* @__PURE__ */ jsx(Stack, { gap: "xs", p: "sm", style: { flex: 1, overflowY: "auto" }, children: isLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", p: "sm", style: { flex: 1, overflowY: "auto" }, children: isLoading ? /* @__PURE__ */ jsx(SubshellSidebarLoader, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         CheckpointGroup,
         {
@@ -3036,7 +3044,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,
@@ -3485,7 +3493,7 @@ function ResourcesSidebar({ timeRange }) {
     return { donutSuccessCount: success, donutFailedCount: failed };
   }, [executionData, domainFilteredResources]);
   if (!organizationReady || isResourcesLoading) {
-    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__ */ jsx(SubshellSidebarLoader, {});
   }
   if (error) {
     return /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: [
@@ -4003,7 +4011,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,
@@ -4011,12 +4019,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,
@@ -4025,16 +4028,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,
@@ -4112,9 +4145,11 @@ function CommandQueueDetailPage({
   const [confirmAction, setConfirmAction] = useState(null);
   const [deleteConfirmOpened, setDeleteConfirmOpened] = useState(false);
   const [contextView, setContextView] = useState("formatted");
+  const [actionsView, setActionsView] = useState("formatted");
+  const [payloadView, setPayloadView] = 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) => {
@@ -4164,25 +4199,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: [
@@ -4210,6 +4233,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,
           {
@@ -4225,128 +4249,201 @@ 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__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconFolders, { size: 18 }),
+          title: "Resources",
+          rightSection: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "light",
+              color: "var(--color-primary)",
+              size: "xs",
+              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__ */ 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__ */ 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"
+        /* @__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
+            }
           ),
-          children: "View Origin Execution"
-        }
-      ) })
+          /* @__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(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" }
-            ]
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconBraces, { size: 18 }),
+          title: "Context",
+          rightSection: /* @__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) => {
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconBolt, { size: 18 }),
+          title: "Actions",
+          rightSection: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              value: actionsView,
+              onChange: (v) => setActionsView(v),
+              size: "xs",
+              data: [
+                { label: "Formatted", value: "formatted" },
+                { label: "JSON", value: "json" }
+              ]
+            }
+          )
+        }
+      ),
+      actionsView === "formatted" ? /* @__PURE__ */ jsx(Group, { gap: "sm", children: task.actions.map((action) => {
         const Icon = getIcon(action.icon);
-        const variant = "light";
         return /* @__PURE__ */ jsx(
           Button,
           {
-            variant,
+            variant: "light",
             color: action.color || (action.type === "danger" ? "red" : "blue"),
             leftSection: Icon ? /* @__PURE__ */ jsx(Icon, { size: 16 }) : null,
             loading: isPending,
@@ -4357,10 +4454,24 @@ function CommandQueueDetailPage({
           },
           action.id
         );
-      }) })
+      }) }) : /* @__PURE__ */ jsx(JsonViewer, { data: task.actions })
     ] }) }),
     task.selectedAction && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-      /* @__PURE__ */ jsx(Title, { order: 3, children: "Action" }),
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Action" }),
+        task.actionPayload != null && (typeof task.actionPayload !== "object" || Object.keys(task.actionPayload).length > 0) && /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: payloadView,
+            onChange: (v) => setPayloadView(v),
+            size: "xs",
+            data: [
+              { label: "Formatted", value: "formatted" },
+              { label: "JSON", value: "json" }
+            ]
+          }
+        )
+      ] }),
       /* @__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: [
@@ -4369,7 +4480,7 @@ function CommandQueueDetailPage({
         ] }),
         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.actionPayload != null && (typeof task.actionPayload !== "object" || Object.keys(task.actionPayload).length > 0) && (payloadView === "formatted" ? /* @__PURE__ */ jsx(ContextViewer, { data: task.actionPayload }) : /* @__PURE__ */ jsx(JsonViewer, { data: task.actionPayload, maxHeight: 200 })),
       task.completedAt && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
         "Completed ",
         formatDate(task.completedAt),
@@ -7064,7 +7175,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" });
@@ -7740,6 +7851,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}`;
@@ -7755,6 +7871,8 @@ function CommandViewSidebarContent({ timeRange }) {
   } = useResourceExecutions({
     resourceId: selectedResourceId,
     timeRange,
+    page: executionPage,
+    limit: 10,
     enabled: isNavigable
   });
   const {
@@ -7773,7 +7891,7 @@ function CommandViewSidebarContent({ timeRange }) {
   ];
   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__ */ jsx(SubshellSidebarLoader, {});
   }
   return /* @__PURE__ */ jsxs(
     Box,
@@ -7911,17 +8029,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" }),
@@ -8955,9 +9085,9 @@ function SessionsSidebar({
   const hasResourcesData = agents.length > 0;
   const hasSessionsData = agentSessions.length > 0;
   const isInitialLoading = !isReady || !organizationReady || isResourcesLoading && !hasResourcesData || isSessionView && (isCurrentSessionLoading || isSessionsLoading) && !hasSessionsData;
-  return /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: [
+  return /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm, display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", mb: "md", children: isSessionView ? "Sessions" : "Agents" }),
-    /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, scrollbarSize: 8, children: isInitialLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : isSessionView ? agentSessions.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: agentSessions.map((session) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(ScrollArea, { style: { flex: 1, minHeight: 0 }, scrollbarSize: 8, children: isInitialLoading ? /* @__PURE__ */ jsx(SubshellSidebarLoader, {}) : isSessionView ? agentSessions.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: agentSessions.map((session) => /* @__PURE__ */ jsx(
       SessionListItem,
       {
         session,
@@ -9066,6 +9196,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,
@@ -9074,11 +9205,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";
@@ -9097,8 +9229,9 @@ 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" }) });
+    return /* @__PURE__ */ jsx(SubshellSidebarLoader, {});
   }
   if (!resourceId) {
     return /* @__PURE__ */ jsx(Box, { p: "sm", style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(APIErrorAlert, { error: new Error("Resource ID not found in current operations route.") }) });
@@ -9158,7 +9291,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,
@@ -9224,7 +9358,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,