@elevasis/ui 1.7.5 → 1.8.0

package/dist/components/index.js

@@ -1,9 +1,9 @@
-import { useCyberColors, EmptyState, CyberLegendItem, CyberAreaChart, ContextViewer, JsonViewer, StyledMarkdown } from '../chunk-4KPI7YCY.js';
-export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-4KPI7YCY.js';
+import { useCyberColors, EmptyState, CyberLegendItem, CyberAreaChart, APIErrorAlert, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, ContextViewer, JsonViewer, StyledMarkdown } from '../chunk-EHXOR5LA.js';
+export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-EHXOR5LA.js';
 export { ElevasisLoader, NavigationButton } from '../chunk-YGYF6G7W.js';
-import '../chunk-TYV5NJV2.js';
-import { useResourcesHealth, useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask } from '../chunk-OK3XFSJJ.js';
-import { getTimeRangeDates, formatBucketTime } from '../chunk-6HZAMY6T.js';
+export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-QWYJHM3S.js';
+import { useResourcesHealth, useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask } from '../chunk-BWZMI4KP.js';
+import { getTimeRangeDates, formatBucketTime } from '../chunk-ARZM3OTI.js';
 import '../chunk-JGJSZ3UE.js';
 import '../chunk-LHQTTUL2.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, useFitViewTrigger, useGraphHighlighting, calculateGraphHeight, GRAPH_CONSTANTS } from '../chunk-F6RBK7NJ.js';
@@ -11,29 +11,32 @@ export { Graph_module_css_default as graphStyles } from '../chunk-F6RBK7NJ.js';
 import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from '../chunk-3Q5V2T6L.js';
 export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-3Q5V2T6L.js';
 import '../chunk-YZ6GTZXL.js';
-import '../chunk-TIRMFDM4.js';
-import '../chunk-LFYO3MDC.js';
-import { getErrorInfo, formatErrorMessage, getErrorTitle } from '../chunk-4VGWQ5AN.js';
-import '../chunk-2JBWPFHF.js';
+import '../chunk-3I2LOKQU.js';
+import '../chunk-RNP5R5I3.js';
+import '../chunk-ESOQEOOX.js';
+import '../chunk-KB5NKPTN.js';
+import '../chunk-JRJW2H57.js';
+import '../chunk-2YBPRE6H.js';
+import '../chunk-JUPCUF77.js';
+import { formatChartAxisDate, PAGE_SIZE_DEFAULT, getErrorInfo, formatErrorMessage } from '../chunk-Z4TPHMRD.js';
+import '../chunk-6TMW6VQ2.js';
 import '../chunk-FWZJH3TL.js';
-import '../chunk-NEK6JKPW.js';
-import '../chunk-L2CM2CUA.js';
-import '../chunk-KA7LO7U5.js';
+import '../chunk-WUQWCUCB.js';
+import '../chunk-GZVH423C.js';
 import '../chunk-DD3CCMCZ.js';
 import '../chunk-7PLEQFHO.js';
-import '../chunk-Q7DJKLEN.js';
-import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Modal, Center, Space, Button, Title, TextInput, Table, Textarea, Radio, Checkbox, Select, NumberInput, Tooltip, Card, Loader, UnstyledButton, Divider, ScrollArea, Popover, Indicator, ActionIcon, SegmentedControl, Alert, ThemeIcon, Menu, Accordion, Collapse, SimpleGrid } from '@mantine/core';
+import { useRouterContext } from '../chunk-Q7DJKLEN.js';
+import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Modal, Center, Space, Button, Title, TextInput, Table, Textarea, Radio, Checkbox, Select, NumberInput, Tooltip, Card, Loader, ActionIcon, SegmentedControl, NumberFormatter, Alert, Switch, Pagination, UnstyledButton, Divider, ScrollArea, Popover, Indicator, ThemeIcon, Menu, Accordion, Collapse, SimpleGrid } from '@mantine/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { memo, useMemo, cloneElement, useEffect, useState, useCallback, Fragment as Fragment$1 } from 'react';
-import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconChartBar, IconCircle, IconCircleFilled, IconBell, IconFocus2, IconAlertCircle, IconRobot, IconGitBranch, IconDotsVertical, IconExternalLink, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconFileOff, IconCircleX, IconCircleCheck } from '@tabler/icons-react';
+import { memo, useMemo, cloneElement, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconChartBar, IconCircleCheck, IconThumbDown, IconThumbUp, IconCircleX, IconSearch, IconFilterOff, IconArrowUpRight, IconAlertCircle, IconExternalLink, IconDownload, IconInfoCircle, IconBug, IconChecks, IconCircle, IconCircleFilled, IconBell, IconFocus2, IconRobot, IconGitBranch, IconDotsVertical, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconArrowDown, IconFileOff, IconKey, IconUser } from '@tabler/icons-react';
 import { AreaChart } from '@mantine/charts';
-import { useDisclosure } from '@mantine/hooks';
 import { formatDistanceToNow } from 'date-fns';
+import { useDisclosure } from '@mantine/hooks';
 import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls, ReactFlowProvider, ReactFlow } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { useForm } from '@mantine/form';
 import dagre from '@dagrejs/dagre';
-import { notifications } from '@mantine/notifications';
 
 var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
   const canClose = loading === true ? false : true;
@@ -283,7 +286,7 @@ function ExecutionLogsTable({ executions, isLoading, onRowClick }) {
       /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Version" })
     ] }) }),
     /* @__PURE__ */ jsx(Table.Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(LoadingState, {}) }) }) : executions.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(EmptyState2, {}) }) }) : executions.map((execution) => {
-      const statusConfig = getStatusConfig(execution.status);
+      const statusConfig3 = getStatusConfig(execution.status);
       return /* @__PURE__ */ jsxs(
         Table.Tr,
         {
@@ -291,7 +294,7 @@ function ExecutionLogsTable({ executions, isLoading, onRowClick }) {
           onClick: () => handleRowClick(execution),
           children: [
             /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 200 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", lineClamp: 1, title: execution.resourceName, children: execution.resourceName }) }),
-            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: statusConfig.color, variant: "light", size: "sm", leftSection: statusConfig.icon, children: statusConfig.label }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: statusConfig3.color, variant: "light", size: "sm", leftSection: statusConfig3.icon, children: statusConfig3.label }) }),
             /* @__PURE__ */ jsx(Table.Td, { style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatStartTime(execution.startTime) }) }),
             /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: execution.status === "running" ? "dimmed" : void 0, children: formatDuration(execution.duration) }) }),
             /* @__PURE__ */ jsx(Table.Td, { ta: "center", children: /* @__PURE__ */ jsx(Badge, { color: execution.resourceStatus === "prod" ? "green" : "gray", variant: "light", size: "sm", children: execution.resourceStatus.toUpperCase() }) }),
@@ -408,6 +411,1108 @@ function ResourceHealthPanel({ resourceId, resourceType, timeRange }) {
     ] })
   ] });
 }
+var statusConfig = {
+  success: { color: "green", icon: IconCircleCheck },
+  failure: { color: "red", icon: IconCircleX },
+  pending: { color: "yellow", icon: IconClock },
+  approved: { color: "green", icon: IconThumbUp },
+  rejected: { color: "red", icon: IconThumbDown },
+  completed: { color: "blue", icon: IconCircleCheck }
+};
+var activityTypeLabels = {
+  workflow_execution: "Workflow",
+  agent_run: "Agent",
+  hitl_action: "HITL Action",
+  webhook_received: "Webhook In",
+  webhook_executed: "Webhook Out",
+  webhook_failed: "Webhook Fail",
+  credential_change: "Credential",
+  api_key_change: "API Key",
+  deployment_change: "Deployment",
+  membership_change: "Membership"
+};
+function getActorDisplay(actorType) {
+  switch (actorType) {
+    case "user":
+      return { label: "User", color: "blue", icon: IconUser };
+    case "api_key":
+      return { label: "API Key", color: "violet", icon: IconKey };
+    default:
+      return { label: "System", color: "gray", icon: IconRobot };
+  }
+}
+var COLUMN_COUNT = 6;
+function LoadingState2() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+}
+function EmptyState3() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconFileOff, { size: 48, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, c: "dimmed", children: "No activities found" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Activities will appear here as workflows and agents run" })
+  ] }) });
+}
+function ActivityTable({ activities, isLoading, onRowClick }) {
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+      /* @__PURE__ */ jsx(Table.Th, { children: "Title" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Type" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Actor" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Entity" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Time" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Table.Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: COLUMN_COUNT, children: /* @__PURE__ */ jsx(LoadingState2, {}) }) }) : activities.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: COLUMN_COUNT, children: /* @__PURE__ */ jsx(EmptyState3, {}) }) }) : activities.map((activity) => {
+      const config = statusConfig[activity.status];
+      const StatusIcon = config.icon;
+      const actor = getActorDisplay(activity.actorType);
+      const ActorIcon = actor.icon;
+      return /* @__PURE__ */ jsxs(
+        Table.Tr,
+        {
+          style: { cursor: onRowClick ? "pointer" : void 0 },
+          onClick: () => onRowClick?.(activity),
+          children: [
+            /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 250 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", lineClamp: 1, title: activity.title, children: activity.title }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", color: "gray", children: activityTypeLabels[activity.activityType] }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: config.color, variant: "light", size: "sm", leftSection: /* @__PURE__ */ jsx(StatusIcon, { size: 14 }), children: activity.status }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: actor.color, variant: "light", size: "sm", leftSection: /* @__PURE__ */ jsx(ActorIcon, { size: 14 }), children: actor.label }) }),
+            /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 200 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 1, title: activity.entityName || activity.entityId, children: activity.entityName || activity.entityId }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDistanceToNow(activity.occurredAt, { addSuffix: true }) }) })
+          ]
+        },
+        activity.id
+      );
+    }) })
+  ] });
+}
+var activityTypeOptions = [
+  { value: "all", label: "All Types" },
+  { value: "workflow_execution", label: "Workflow Executions" },
+  { value: "agent_run", label: "Agent Runs" },
+  { value: "hitl_action", label: "HITL Actions" },
+  { value: "webhook_received", label: "Webhook Received" },
+  { value: "webhook_executed", label: "Webhook Executed" },
+  { value: "webhook_failed", label: "Webhook Failed" },
+  { value: "credential_change", label: "Credential Changes" },
+  { value: "api_key_change", label: "API Key Changes" },
+  { value: "deployment_change", label: "Deployment Changes" },
+  { value: "membership_change", label: "Membership Changes" }
+];
+var statusOptions = [
+  { value: "all", label: "All Statuses" },
+  { value: "success", label: "Success" },
+  { value: "failure", label: "Failure" },
+  { value: "pending", label: "Pending" },
+  { value: "approved", label: "Approved" },
+  { value: "rejected", label: "Rejected" },
+  { value: "completed", label: "Completed" }
+];
+function ActivityFilters({ filters, onFilterChange, onReset }) {
+  return /* @__PURE__ */ jsxs(
+    FilterBar,
+    {
+      actions: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", leftSection: /* @__PURE__ */ jsx(IconFilterOff, { size: 16 }), onClick: onReset, children: "Reset" }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            placeholder: "Activity Type",
+            data: activityTypeOptions,
+            value: filters.activityType || "all",
+            onChange: (value) => onFilterChange("activityType", value),
+            style: { flex: 1, minWidth: 200 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            placeholder: "Status",
+            data: statusOptions,
+            value: filters.status || "all",
+            onChange: (value) => onFilterChange("status", value),
+            style: { flex: 1, minWidth: 150 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: "Search by name...",
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+            value: filters.search || "",
+            onChange: (event) => onFilterChange("search", event.currentTarget.value),
+            style: { flex: 1, minWidth: 200 }
+          }
+        )
+      ]
+    }
+  );
+}
+var statusConfig2 = {
+  success: { color: "green", icon: IconCircleCheck },
+  failure: { color: "red", icon: IconCircleX },
+  pending: { color: "yellow", icon: IconClock },
+  approved: { color: "green", icon: IconThumbUp },
+  rejected: { color: "red", icon: IconThumbDown },
+  completed: { color: "blue", icon: IconCircleCheck }
+};
+function getActorDisplay2(actorType) {
+  switch (actorType) {
+    case "user":
+      return { label: "User", color: "blue", icon: IconUser };
+    case "api_key":
+      return { label: "API Key", color: "violet", icon: IconKey };
+    default:
+      return { label: "System", color: "gray", icon: IconRobot };
+  }
+}
+function getNavigationPath(activity) {
+  switch (activity.activityType) {
+    case "workflow_execution":
+      return `/operations/resources/workflow/${activity.entityId}`;
+    case "agent_run":
+      return `/operations/resources/agent/${activity.entityId}`;
+    case "hitl_action":
+      return "/command-queue";
+    case "credential_change":
+      return "/settings/credentials";
+    case "api_key_change":
+      return "/settings/api-keys";
+    case "deployment_change":
+      return "/settings/deployments";
+    case "membership_change":
+      return "/settings/organization";
+    default:
+      return null;
+  }
+}
+function ActivityCard({ activity }) {
+  const config = statusConfig2[activity.status];
+  const StatusIcon = config.icon;
+  const { navigate } = useRouterContext();
+  const navigationPath = getNavigationPath(activity);
+  const isClickable = navigationPath !== null;
+  const actor = getActorDisplay2(activity.actorType);
+  const ActorIcon = actor.icon;
+  const handleClick = () => {
+    if (navigationPath) {
+      navigate(navigationPath);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      withBorder: true,
+      style: {
+        cursor: isClickable ? "pointer" : "default",
+        transition: "box-shadow var(--duration-fast) var(--easing)"
+      },
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(StatusIcon, { size: 16, color: `var(--mantine-color-${config.color}-6)` }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, truncate: true, children: activity.title })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { size: "sm", color: config.color, variant: "light", children: activity.status })
+        ] }),
+        activity.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: activity.description }),
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, style: { flex: 1 }, children: activity.entityName || activity.entityId }),
+          /* @__PURE__ */ jsx(Badge, { size: "xs", color: actor.color, variant: "dot", leftSection: /* @__PURE__ */ jsx(ActorIcon, { size: 10 }), children: actor.label }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: "nowrap" }, children: formatDistanceToNow(activity.occurredAt, { addSuffix: true }) })
+        ] })
+      ] })
+    }
+  );
+}
+function ErrorAnalysisCard({ data, isLoading, error }) {
+  const topFailures = data?.topFailingResources.map((res) => ({
+    id: res.resourceId,
+    name: res.name,
+    errorCount: res.errorCount,
+    failureRate: res.failureRate
+  })) ?? [];
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load error analysis metrics" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Error Analysis",
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, mb: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Top Failing Resources" }),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { children: "Resource" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Errors" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "% Failed" }),
+        /* @__PURE__ */ jsx(Table.Th, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Tbody, { children: topFailures.map((resource) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(IconAlertCircle, { size: 16, color: "var(--color-error)" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: resource.name })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Badge, { color: "red", variant: "light", children: resource.errorCount }) }),
+        /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: resource.failureRate > 10 ? "red" : "dimmed", children: [
+          resource.failureRate,
+          "%"
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }) }) })
+      ] }, resource.id)) })
+    ] })
+  ] });
+}
+function ExecutionBreakdownTable({ data, isLoading, error }) {
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load execution breakdown" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const totalExecutions = data?.totalExecutions ?? 0;
+  const statusCounts = data?.statusCounts ?? { success: 0, failed: 0, pending: 0, warning: 0 };
+  const p95Duration = data?.p95Duration ?? 0;
+  const statusRows = [
+    {
+      status: "Completed",
+      count: statusCounts.success,
+      percentage: totalExecutions > 0 ? statusCounts.success / totalExecutions * 100 : 0,
+      avgDuration: p95Duration * 0.85,
+      // Estimate avg duration from P95
+      color: "green"
+    },
+    {
+      status: "Warning",
+      count: statusCounts.warning,
+      percentage: totalExecutions > 0 ? statusCounts.warning / totalExecutions * 100 : 0,
+      avgDuration: p95Duration * 0.85,
+      // Warning executions completed, similar to success
+      color: "yellow"
+    },
+    {
+      status: "Failed",
+      count: statusCounts.failed,
+      percentage: totalExecutions > 0 ? statusCounts.failed / totalExecutions * 100 : 0,
+      avgDuration: p95Duration * 0.6,
+      // Failed executions typically shorter
+      color: "red"
+    },
+    {
+      status: "Running",
+      count: 0,
+      // No running count in current data structure
+      percentage: 0,
+      avgDuration: 0,
+      color: "blue"
+    },
+    {
+      status: "Pending",
+      count: statusCounts.pending,
+      percentage: totalExecutions > 0 ? statusCounts.pending / totalExecutions * 100 : 0,
+      avgDuration: 0,
+      // Pending has no duration
+      color: "gray"
+    }
+  ];
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(CardHeader, { title: "Execution Status Breakdown" }),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Count" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Percentage" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Avg Duration" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Tbody, { children: statusRows.map((row) => /* @__PURE__ */ jsxs(
+        Table.Tr,
+        {
+          style: { cursor: "pointer" },
+          onClick: () => {
+            console.log(`Filter to ${row.status} executions`);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: row.color, variant: "light", children: row.status }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: row.count.toLocaleString() }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+              row.percentage.toFixed(1),
+              "%"
+            ] }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: row.avgDuration > 0 ? `${(row.avgDuration / 1e3).toFixed(1)}s` : "-" }) })
+          ]
+        },
+        row.status
+      )) })
+    ] })
+  ] });
+}
+function ExecutionHealthCard({ data, isLoading, error }) {
+  const successRate = data?.successRate ?? 0;
+  const p95Duration = data?.p95Duration ?? 0;
+  const totalExecutions = data?.totalExecutions ?? 0;
+  const failedCount = data?.statusCounts.failed ?? 0;
+  const warningCount = data?.statusCounts.warning ?? 0;
+  const trendData = data?.trendData.map((d) => ({
+    hour: formatChartAxisDate(d.time),
+    errors: d.errorCount,
+    warnings: d.warningCount
+  })) ?? [];
+  const hasExecutions = totalExecutions > 0;
+  const statusColor = hasExecutions ? successRate >= 98 ? "green" : successRate >= 95 ? "yellow" : "red" : "gray";
+  const statusLabel = hasExecutions ? successRate >= 98 ? "Healthy" : successRate >= 95 ? "Warning" : "Critical" : "No Data";
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load execution health metrics" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(StatsCardSkeleton, {});
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Execution Health",
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xl",
+              fw: 700,
+              c: "var(--color-error)",
+              style: { fontFamily: "var(--mantine-font-family-headings)" },
+              children: failedCount
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "failures" })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xl",
+              fw: 700,
+              c: warningCount > 0 ? "yellow" : "dimmed",
+              style: { fontFamily: "var(--mantine-font-family-headings)" },
+              children: warningCount
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "warnings" })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: [
+            (p95Duration / 1e3).toFixed(1),
+            "s"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "P95" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { size: "md", variant: "dot", color: statusColor, children: statusLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: trendData,
+        series: [
+          { dataKey: "warnings", color: "yellow", name: "Warnings" },
+          { dataKey: "errors", color: "red", name: "Errors" }
+        ],
+        xDataKey: "hour",
+        height: 200,
+        yDomain: [0, "auto"]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "sm", children: [
+      totalExecutions.toLocaleString(),
+      " total executions"
+    ] })
+  ] });
+}
+var resourceOptions = [{ value: "", label: "All Resources" }];
+var statusOptions2 = [
+  { value: "all", label: "All" },
+  { value: "running", label: "Running" },
+  { value: "completed", label: "Completed" },
+  { value: "warning", label: "Warning" },
+  { value: "failed", label: "Failed" }
+];
+var environmentOptions = [
+  { value: "all", label: "All" },
+  { value: "dev", label: "Dev" },
+  { value: "prod", label: "Prod" }
+];
+function ExecutionLogsFilters({ filters, onFilterChange, onReset }) {
+  const hasActiveFilters = filters.resourceId !== void 0 || filters.status !== "all" || filters.resourceStatus !== "all";
+  return /* @__PURE__ */ jsx(Paper, { radius: "sm", children: /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        placeholder: "Resource",
+        data: resourceOptions,
+        value: filters.resourceId ?? "",
+        onChange: (value) => onFilterChange("resourceId", value === "" || value === null ? void 0 : value),
+        style: { minWidth: 180 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        data: statusOptions2,
+        value: filters.status,
+        onChange: (value) => onFilterChange("status", value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        data: environmentOptions,
+        value: filters.resourceStatus,
+        onChange: (value) => onFilterChange("resourceStatus", value)
+      }
+    ),
+    hasActiveFilters && /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", leftSection: /* @__PURE__ */ jsx(IconFilterOff, { size: 16 }), onClick: onReset, children: "Reset" })
+  ] }) });
+}
+function CostByModelTable({ data, isLoading, error }) {
+  const [sortField, setSortField] = useState("cost");
+  const [sortDirection, setSortDirection] = useState("desc");
+  const totalCost = data?.totalCostUsd ?? 0;
+  const tableData = data?.models.map((m) => ({
+    model: m.model,
+    cost: m.totalCostUsd,
+    percentage: totalCost > 0 ? m.totalCostUsd / totalCost * 100 : 0,
+    calls: m.callCount,
+    avgCost: m.avgCostPerCall,
+    inputTokens: m.totalInputTokens,
+    outputTokens: m.totalOutputTokens
+  })) ?? [];
+  const sortedData = [...tableData].sort((a, b) => {
+    const aValue = a[sortField];
+    const bValue = b[sortField];
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+    }
+    return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
+  });
+  const highestCost = Math.max(...tableData.map((d) => d.cost), 0);
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("desc");
+    }
+  };
+  const handleExport = () => {
+    if (!data) return;
+    const csvContent = [
+      ["Model", "Cost ($)", "Percentage (%)", "Calls", "Avg Cost/Call ($)", "Input Tokens", "Output Tokens"],
+      ...sortedData.map((d) => [
+        d.model,
+        d.cost.toFixed(4),
+        d.percentage.toFixed(2),
+        d.calls,
+        d.avgCost.toFixed(6),
+        d.inputTokens,
+        d.outputTokens
+      ]),
+      ["Total", totalCost.toFixed(4), "100.00", data.totalCallCount, "", "", ""]
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `cost-by-model-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  const SortIcon = ({ field }) => {
+    if (sortField !== field) return null;
+    return sortDirection === "asc" ? /* @__PURE__ */ jsx(IconArrowUp, { size: 14 }) : /* @__PURE__ */ jsx(IconArrowDown, { size: 14 });
+  };
+  const formatModelName = (model) => {
+    const parts = model.split("/");
+    const modelName = parts.length > 1 ? parts[1] : model;
+    return modelName.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load cost by model" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  return /* @__PURE__ */ jsxs(Paper, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Cost by Model",
+        rightSection: /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "xs", leftSection: /* @__PURE__ */ jsx(IconDownload, { size: 14 }), onClick: handleExport, children: "Export CSV" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { style: { cursor: "pointer" }, onClick: () => handleSort("model"), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          "Model",
+          /* @__PURE__ */ jsx(SortIcon, { field: "model" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Th, { style: { cursor: "pointer" }, onClick: () => handleSort("cost"), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          "Cost",
+          /* @__PURE__ */ jsx(SortIcon, { field: "cost" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Th, { style: { cursor: "pointer" }, onClick: () => handleSort("percentage"), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          "Percentage",
+          /* @__PURE__ */ jsx(SortIcon, { field: "percentage" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Th, { style: { cursor: "pointer" }, onClick: () => handleSort("calls"), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          "Calls",
+          /* @__PURE__ */ jsx(SortIcon, { field: "calls" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Th, { style: { cursor: "pointer" }, onClick: () => handleSort("avgCost"), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          "Avg Cost/Call",
+          /* @__PURE__ */ jsx(SortIcon, { field: "avgCost" })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Table.Tbody, { children: [
+        sortedData.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsxs(Table.Td, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: row.cost === highestCost ? 600 : 400, children: formatModelName(row.model) }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: row.model })
+          ] }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", fw: row.cost === highestCost ? 600 : 400, children: [
+            "$",
+            row.cost.toFixed(4)
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Badge, { color: row.percentage > 30 ? "red" : row.percentage > 15 ? "yellow" : "gray", children: [
+            row.percentage.toFixed(1),
+            "%"
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: row.calls.toLocaleString() }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+            "$",
+            row.avgCost.toFixed(6)
+          ] }) })
+        ] }, row.model)),
+        tableData.length > 0 && /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Total" }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 700, children: [
+            "$",
+            totalCost.toFixed(4)
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { children: "100.0%" }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: (data?.totalCallCount ?? 0).toLocaleString() }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "-" }) })
+        ] })
+      ] })
+    ] }),
+    tableData.length === 0 && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", py: "xl", children: "No cost data available for this time period" })
+  ] });
+}
+function BusinessImpactCard({
+  impactData,
+  summaryData,
+  trendsData,
+  data,
+  isLoading,
+  error,
+  laborRate = 75
+}) {
+  const businessData = impactData ?? data;
+  const laborCostSavings = businessData?.totalSavingsUsd ?? 0;
+  const platformCost = businessData?.totalCostUsd ?? 0;
+  const netSavings = businessData?.netSavingsUsd ?? 0;
+  const roi = businessData?.roi ?? 0;
+  const hoursSaved = Math.round(laborCostSavings / laborRate);
+  const previousCost = summaryData?.previous.totalCostUsd ?? platformCost;
+  const previousSavings = laborCostSavings * (previousCost > 0 ? (summaryData?.previous.totalCostUsd ?? platformCost) / platformCost : 0.8);
+  const previousHoursSaved = Math.round(previousSavings / laborRate);
+  const totalTrendCost = trendsData?.totalCostUsd ?? 0;
+  const trendData = (trendsData?.trendData ?? []).map((point) => {
+    const date = new Date(point.time);
+    const timeLabel = trendsData?.granularity === "hour" ? date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }) : date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    const proportion = totalTrendCost > 0 ? point.totalCostUsd / totalTrendCost : 1 / (trendsData?.trendData.length ?? 1);
+    return {
+      time: timeLabel,
+      savings: laborCostSavings * proportion
+    };
+  });
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load business impact metrics" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Business Impact",
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xl",
+              fw: 700,
+              c: "var(--color-primary)",
+              style: { fontFamily: "var(--mantine-font-family-headings)" },
+              children: hoursSaved
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "hrs saved" }),
+          /* @__PURE__ */ jsx(TrendIndicator, { current: hoursSaved, previous: previousHoursSaved })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: laborCostSavings, thousandSeparator: true }) }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "labor saved" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          size: "lg",
+          variant: roi > 0 ? "dot" : "light",
+          color: roi > 1e3 ? "green" : roi > 500 ? "yellow" : "gray",
+          children: roi > 0 ? `${roi.toFixed(0)}x ROI` : "N/A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: trendData,
+        series: [{ dataKey: "savings", color: "blue", name: "Savings" }],
+        xDataKey: "time",
+        height: 200,
+        yTickFormatter: (v) => `$${v.toFixed(2)}`
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "sm", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        "Platform cost: ",
+        /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: platformCost, decimalScale: 2 })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 500, c: netSavings < 0 ? "var(--color-error)" : "var(--color-primary)", children: [
+        "Net savings: ",
+        /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: netSavings, thousandSeparator: true, decimalScale: 2 })
+      ] })
+    ] })
+  ] });
+}
+function CostBreakdownCard({
+  breakdownData,
+  summaryData,
+  data,
+  isLoading,
+  error,
+  budget = 1500
+}) {
+  const resourceData = breakdownData ?? data;
+  const legacyTotalCost = resourceData?.resources.reduce((sum, r) => sum + r.totalCostUsd, 0) ?? 0;
+  const mtdCost = summaryData?.mtd.totalCostUsd ?? legacyTotalCost * 2;
+  const projectedMonthlyCost = summaryData?.projection.monthlyCostUsd ?? mtdCost * 1.05;
+  const workflowCosts = resourceData?.resources.slice(0, 4).map((r) => ({
+    name: r.resourceId,
+    cost: r.totalCostUsd,
+    executions: r.executionCount,
+    avgCost: r.avgCostUsd
+  })) ?? [];
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load cost breakdown" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(DetailCardSkeleton, { rows: 3 });
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "AI Costs Breakdown",
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", mb: "md", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Top Spenders" }),
+      workflowCosts.length > 0 ? workflowCosts.map((workflow) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          p: "sm",
+          style: {
+            borderLeft: "3px solid var(--color-primary)",
+            backgroundColor: "var(--color-surface)",
+            borderRadius: 4
+          },
+          children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: workflow.name }),
+              /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                workflow.executions,
+                " executions - $",
+                workflow.avgCost.toFixed(4),
+                "/exec"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "sm",
+                fw: 600,
+                c: "var(--color-primary)",
+                style: { fontFamily: "var(--mantine-font-family-headings)" },
+                children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: workflow.cost, decimalScale: 4 })
+              }
+            )
+          ] })
+        },
+        workflow.name
+      )) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", py: "md", children: "No resource data available" })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "sm", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        "Projected: ",
+        /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: projectedMonthlyCost, thousandSeparator: true, decimalScale: 2 })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          c: projectedMonthlyCost > budget ? "red" : "dimmed",
+          style: { fontFamily: "var(--mantine-font-family-headings)" },
+          children: [
+            "Budget: ",
+            /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: budget, thousandSeparator: true, decimalScale: 2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function CostMetricsCard({
+  summaryData,
+  trendsData,
+  data,
+  isLoading,
+  error,
+  budget = 1500
+}) {
+  const legacyTotalCost = data?.resources.reduce((sum, r) => sum + r.totalCostUsd, 0) ?? 0;
+  const todayCost = summaryData?.current.totalCostUsd ?? legacyTotalCost;
+  const previousCost = summaryData?.previous.totalCostUsd ?? legacyTotalCost * 0.9;
+  const mtdCost = summaryData?.mtd.totalCostUsd ?? legacyTotalCost * 2;
+  const projectedMonthlyCost = summaryData?.projection.monthlyCostUsd ?? mtdCost * 1.05;
+  const confidence = summaryData?.projection.confidence ?? "low";
+  const budgetStatus = projectedMonthlyCost <= budget ? "green" : projectedMonthlyCost <= budget * 1.1 ? "yellow" : "red";
+  const budgetLabel = projectedMonthlyCost <= budget ? "On Budget" : projectedMonthlyCost <= budget * 1.1 ? "Warning" : "Over Budget";
+  const chartData = trendsData?.trendData.slice(-7).map((point, idx) => {
+    const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+    return {
+      day: trendsData.granularity === "day" ? new Date(point.time).toLocaleDateString("en-US", { weekday: "short" }) : days[idx % 7],
+      cost: point.totalCostUsd
+    };
+  }) ?? data?.resources.slice(0, 7).map((r, idx) => ({
+    day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][idx] || `Day ${idx + 1}`,
+    cost: r.totalCostUsd
+  })) ?? [];
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load cost metrics" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(StatsCardSkeleton, {});
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "AI Costs",
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: todayCost, decimalScale: 2 }) }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "period" }),
+          /* @__PURE__ */ jsx(TrendIndicator, { current: todayCost, previous: previousCost, inverse: true })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: mtdCost, thousandSeparator: true, decimalScale: 2 }) }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "MTD" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { size: "md", variant: "dot", color: budgetStatus, children: budgetLabel })
+    ] }),
+    chartData.length > 0 ? /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: chartData,
+        series: [{ dataKey: "cost", color: "blue", name: "Cost" }],
+        xDataKey: "day",
+        height: 120,
+        yTickFormatter: (v) => `$${v.toFixed(2)}`
+      }
+    ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", py: "lg", children: "No trend data available" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "sm", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          "Projected monthly:",
+          " ",
+          /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: projectedMonthlyCost, thousandSeparator: true, decimalScale: 2 })
+        ] }),
+        /* @__PURE__ */ jsx(Tooltip, { label: `Projection confidence: ${confidence}`, children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 12, color: "var(--color-text-subtle)" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          c: projectedMonthlyCost > budget ? "red" : "dimmed",
+          style: { fontFamily: "var(--mantine-font-family-headings)" },
+          children: [
+            "Budget: ",
+            /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: budget, thousandSeparator: true, decimalScale: 2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ErrorBreakdownTable({ startDate, endDate, onErrorClick }) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState("all");
+  const [filterSeverity, setFilterSeverity] = useState();
+  const [showResolved, setShowResolved] = useState(false);
+  const resolveError = useResolveError();
+  const resolveAll = useResolveAllErrors();
+  const { page, setPage, totalPages } = usePaginationState(PAGE_SIZE_DEFAULT, [
+    filterType,
+    filterSeverity,
+    searchQuery,
+    showResolved,
+    startDate,
+    endDate
+  ]);
+  const { data, isLoading, isError, error } = useErrorDetails({
+    errorType: filterType === "all" ? void 0 : filterType,
+    severity: filterSeverity,
+    search: searchQuery || void 0,
+    startDate,
+    endDate,
+    page,
+    limit: PAGE_SIZE_DEFAULT,
+    resolved: showResolved ? void 0 : false
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(Stack, { align: "center", justify: "center", mih: 200, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) }) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), title: "Error Loading Data", children: error?.message || "Failed to load error details. Please try again." }) });
+  }
+  if (!data || data.errors.length === 0) {
+    return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Title, { order: 3, children: "Recent Errors" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "0 errors found" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            label: "Show resolved",
+            checked: showResolved,
+            onChange: (e) => setShowResolved(e.currentTarget.checked),
+            size: "sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: IconBug,
+          title: "No errors found",
+          description: showResolved ? "No errors found for the selected time range" : "All errors have been resolved"
+        }
+      )
+    ] }) });
+  }
+  const filteredErrors = data.errors;
+  const errorTypes = Array.from(new Set(data.errors.map((e) => e.errorType)));
+  const total = data.total;
+  const getSeverityIcon = (severity) => {
+    switch (severity) {
+      case "critical":
+        return /* @__PURE__ */ jsx(IconAlertCircle, { size: 16, color: "var(--color-error)" });
+      case "warning":
+        return /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, color: "var(--mantine-color-orange-6)" });
+      default:
+        return /* @__PURE__ */ jsx(IconBug, { size: 16, color: "var(--color-primary)" });
+    }
+  };
+  const getSeverityColor = (severity) => {
+    switch (severity) {
+      case "critical":
+        return "red";
+      case "warning":
+        return "orange";
+      default:
+        return "blue";
+    }
+  };
+  return /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Recent Errors" }),
+        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+          filteredErrors.length,
+          " error",
+          filteredErrors.length !== 1 ? "s" : "",
+          " found"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            label: "Show resolved",
+            checked: showResolved,
+            onChange: (e) => setShowResolved(e.currentTarget.checked),
+            size: "sm"
+          }
+        ),
+        !showResolved && filteredErrors.some((e) => !e.resolved) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            leftSection: /* @__PURE__ */ jsx(IconChecks, { size: 16 }),
+            variant: "light",
+            loading: resolveAll.isPending,
+            onClick: () => resolveAll.mutate(),
+            children: "Resolve All"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FilterBar, { children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          placeholder: "Search errors...",
+          leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+          value: searchQuery,
+          onChange: (e) => {
+            setSearchQuery(e.currentTarget.value);
+          },
+          style: { flex: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          placeholder: "Filter by type",
+          value: filterType,
+          onChange: (value) => {
+            setFilterType(value || "all");
+          },
+          data: [{ value: "all", label: "All Types" }, ...errorTypes.map((type) => ({ value: type, label: type }))],
+          style: { width: 200 },
+          clearable: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          placeholder: "Filter by severity",
+          value: filterSeverity,
+          onChange: (value) => {
+            setFilterSeverity(value);
+          },
+          data: [
+            { value: "critical", label: "Critical" },
+            { value: "warning", label: "Warning" },
+            { value: "info", label: "Info" }
+          ],
+          style: { width: 200 },
+          clearable: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+        /* @__PURE__ */ jsx(Table.Th, { children: "Timestamp" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Type" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Message" }),
+        /* @__PURE__ */ jsx(Table.Th, { children: "Resource" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Severity" }),
+        /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Tbody, { children: filteredErrors.map((error2) => /* @__PURE__ */ jsxs(Table.Tr, { style: { cursor: "pointer" }, onClick: () => onErrorClick?.(error2.executionId), children: [
+        /* @__PURE__ */ jsx(Table.Td, { style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: new Date(error2.timestamp).toLocaleString("en-US", {
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit"
+        }) }) }),
+        /* @__PURE__ */ jsx(Table.Td, { style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: error2.errorType }) }),
+        /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 300 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", lineClamp: 1, children: error2.message }) }),
+        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: error2.resourceName }) }),
+        /* @__PURE__ */ jsx(Table.Td, { ta: "center", style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: getSeverityColor(error2.severity),
+            variant: "light",
+            size: "sm",
+            leftSection: getSeverityIcon(error2.severity),
+            children: error2.severity.toUpperCase()
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsxs(Group, { gap: 4, justify: "flex-end", wrap: "nowrap", children: [
+          error2.resolved ? /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", size: "sm", style: { cursor: "default" }, children: "Resolved" }) : /* @__PURE__ */ jsx(
+            Badge,
+            {
+              color: "gray",
+              variant: "light",
+              size: "sm",
+              style: {
+                cursor: resolveError.isPending && resolveError.variables === error2.id ? "wait" : "pointer",
+                opacity: resolveError.isPending && resolveError.variables === error2.id ? 0.5 : 1
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                resolveError.mutate(error2.id);
+              },
+              children: "Resolve"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "sm",
+              onClick: (e) => {
+                e.stopPropagation();
+                onErrorClick?.(error2.executionId);
+              },
+              children: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 })
+            }
+          )
+        ] }) })
+      ] }, error2.id)) })
+    ] }),
+    totalPages(total) > 1 && /* @__PURE__ */ jsx(Group, { justify: "flex-start", children: /* @__PURE__ */ jsx(Pagination, { total: totalPages(total), value: page, onChange: setPage, size: "sm", boundaries: 1 }) })
+  ] }) });
+}
 var categoryColors = {
   info: "blue",
   queue: "cyan",
@@ -455,18 +1560,18 @@ function NotificationItem({ notification, onClose, onNavigate }) {
     }
   );
 }
-function NotificationList({ notifications: notifications2, isLoading, onClose, onNavigate }) {
+function NotificationList({ notifications, isLoading, onClose, onNavigate }) {
   if (isLoading) {
     return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) });
   }
-  if (notifications2.length === 0) {
+  if (notifications.length === 0) {
     return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No notifications" }) });
   }
-  return /* @__PURE__ */ jsx(Stack, { gap: 0, children: notifications2.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose, onNavigate }, notification.id)) });
+  return /* @__PURE__ */ jsx(Stack, { gap: 0, children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose, onNavigate }, notification.id)) });
 }
-function NotificationPanel({ notifications: notifications2, isLoading, onClose, onNavigate }) {
+function NotificationPanel({ notifications, isLoading, onClose, onNavigate }) {
   const markAllAsRead = useMarkAllAsRead();
-  const hasUnread = notifications2.some((n) => !n.read);
+  const hasUnread = notifications.some((n) => !n.read);
   const handleMarkAllAsRead = async () => {
     await markAllAsRead.mutateAsync();
   };
@@ -479,7 +1584,7 @@ function NotificationPanel({ notifications: notifications2, isLoading, onClose,
     /* @__PURE__ */ jsx(ScrollArea, { h: 400, type: "auto", children: /* @__PURE__ */ jsx(
       NotificationList,
       {
-        notifications: notifications2,
+        notifications,
         isLoading,
         onClose,
         onNavigate
@@ -491,14 +1596,14 @@ function NotificationBell({ unreadCount, onNavigate }) {
   const [opened, { toggle, close }] = useDisclosure(false);
   const { data: apiCount = 0 } = useNotificationCount();
   const { data, isLoading } = useNotifications({ limit: 20 });
-  const notifications2 = data?.notifications ?? [];
+  const notifications = data?.notifications ?? [];
   const count = unreadCount ?? apiCount;
   return /* @__PURE__ */ jsxs(Popover, { opened, onChange: toggle, position: "bottom-end", width: 400, children: [
     /* @__PURE__ */ jsx(Tooltip, { label: "Notifications", disabled: opened, children: /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Indicator, { label: count > 99 ? "99+" : count, disabled: count === 0, size: 16, offset: 4, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "lg", onClick: toggle, children: /* @__PURE__ */ jsx(IconBell, { size: 20, color: "var(--color-text-subtle)" }) }) }) }) }),
     /* @__PURE__ */ jsx(Popover.Dropdown, { p: 0, children: /* @__PURE__ */ jsx(
       NotificationPanel,
       {
-        notifications: notifications2,
+        notifications,
         isLoading,
         onClose: close,
         onNavigate
@@ -1710,8 +2815,8 @@ var iconMap = {
   IconEye,
   IconRocket,
   IconMessageCircle,
-  IconArrowUp,
-  IconClock,
+  IconArrowUp: IconArrowUp,
+  IconClock: IconClock,
   IconFileText,
   IconSend,
   IconMail
@@ -2685,54 +3790,5 @@ function ResourceDefinitionSection({
   }
   return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Unknown resource type" }) });
 }
-var showInfoNotification = (message) => {
-  notifications.show({
-    title: "Info",
-    message,
-    autoClose: 5e3,
-    color: "blue",
-    position: "top-right"
-  });
-};
-var showSuccessNotification = (message) => {
-  notifications.show({
-    title: "Action Successful",
-    message,
-    autoClose: 5e3,
-    color: "green",
-    position: "top-right"
-  });
-};
-var showErrorNotification = (error) => {
-  if (error instanceof Error) {
-    error = error.message;
-  }
-  notifications.show({
-    title: "Action Failed",
-    message: error,
-    autoClose: 5e3,
-    color: "red",
-    position: "top-right"
-  });
-};
-var showWarningNotification = (message) => {
-  notifications.show({
-    title: "Warning",
-    message,
-    autoClose: 5e3,
-    color: "orange",
-    position: "top-right"
-  });
-};
-var showApiErrorNotification = (error) => {
-  const { message, code, requestId, fields, retryAfter } = getErrorInfo(error);
-  notifications.show({
-    title: getErrorTitle(code),
-    message: formatErrorMessage(message, requestId, fields, retryAfter),
-    autoClose: retryAfter ? retryAfter * 1e3 : 5e3,
-    color: "red",
-    position: "top-right"
-  });
-};
 
-export { ActionModal, AgentDefinitionDisplay, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CollapsibleJsonSection, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContractDisplay, CustomModal, EmptyVisualizer, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, ResourceDefinitionSection, ResourceHealthChart, ResourceHealthPanel, SortableHeader, TableSelectionToolbar, TaskCard, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowDefinitionDisplay, WorkflowExecutionTimeline, getGraphBackgroundStyles, getHealthColor, getIcon, iconMap, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };
+export { ActionModal, ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, AgentDefinitionDisplay, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, BusinessImpactCard, CollapsibleJsonSection, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContractDisplay, CostBreakdownCard, CostByModelTable, CostMetricsCard, CustomModal, EmptyVisualizer, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, ResourceDefinitionSection, ResourceHealthChart, ResourceHealthPanel, SortableHeader, TableSelectionToolbar, TaskCard, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowDefinitionDisplay, WorkflowExecutionTimeline, getGraphBackgroundStyles, getHealthColor, getIcon, iconMap, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };