@elevasis/ui 1.7.4 → 1.7.6

package/dist/components/index.js

@@ -1,30 +1,31 @@
+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';
 export { ElevasisLoader, NavigationButton } from '../chunk-YGYF6G7W.js';
 import '../chunk-TYV5NJV2.js';
-import { useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask } from '../chunk-G4TAF3T6.js';
+import { useResourcesHealth, useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications, useSubmitAction, useDeleteTask } from '../chunk-OK3XFSJJ.js';
+import { getTimeRangeDates, formatBucketTime } from '../chunk-6HZAMY6T.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';
 export { Graph_module_css_default as graphStyles } from '../chunk-F6RBK7NJ.js';
-import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, ResourceStatusColors, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from '../chunk-YJFTZUJJ.js';
-export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-YJFTZUJJ.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 { getResourceIcon } from '../chunk-LFYO3MDC.js';
-import { getErrorInfo, getErrorTitle, formatErrorMessage } from '../chunk-4VGWQ5AN.js';
+import '../chunk-LFYO3MDC.js';
+import { getErrorInfo, formatErrorMessage, getErrorTitle } from '../chunk-4VGWQ5AN.js';
 import '../chunk-2JBWPFHF.js';
 import '../chunk-FWZJH3TL.js';
 import '../chunk-NEK6JKPW.js';
 import '../chunk-L2CM2CUA.js';
 import '../chunk-KA7LO7U5.js';
 import '../chunk-DD3CCMCZ.js';
-import { useAuthContext } from '../chunk-7PLEQFHO.js';
-import { useRouterContext } from '../chunk-Q7DJKLEN.js';
-import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Center, Title, Button, Loader, Collapse, ScrollArea, Card, Skeleton, Select, Alert, Code, ThemeIcon, Grid, Modal, Space, TextInput, Table, Textarea, Radio, Checkbox, NumberInput, Tooltip, UnstyledButton, Divider, Popover, Indicator, ActionIcon, SegmentedControl, Menu, Accordion, SimpleGrid } from '@mantine/core';
+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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconInfoCircle, IconChevronRight, IconSelector, IconTrash, IconCircle, IconCircleFilled, IconBell, IconFocus2, IconRobot, IconGitBranch, IconDotsVertical, IconExternalLink, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconFileOff, IconCircleX, IconCircleCheck } from '@tabler/icons-react';
-import { memo, useMemo, useState, cloneElement, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
-import Markdown from 'react-markdown';
-import { Prism } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+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 { AreaChart } from '@mantine/charts';
 import { useDisclosure } from '@mantine/hooks';
 import { formatDistanceToNow } from 'date-fns';
@@ -34,677 +35,6 @@ import { useForm } from '@mantine/form';
 import dagre from '@dagrejs/dagre';
 import { notifications } from '@mantine/notifications';
 
-function EmptyState({ icon: Icon, title, description, action, py = "xl" }) {
-  return /* @__PURE__ */ jsx(Center, { py, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
-    /* @__PURE__ */ jsx(Icon, { size: 48, style: { opacity: 0.5 } }),
-    /* @__PURE__ */ jsx(Title, { order: 4, children: title }),
-    description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", children: description }),
-    action && /* @__PURE__ */ jsx(Button, { variant: "light", onClick: action.onClick, leftSection: action.icon, mt: "sm", children: action.label })
-  ] }) });
-}
-function TabCountBadge({ count, isLoading }) {
-  return /* @__PURE__ */ jsx(Box, { miw: 20, h: 20, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: isLoading ? /* @__PURE__ */ jsx(Loader, { size: 12 }) : /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", circle: count < 10, children: count }) });
-}
-function TrendIndicator({ current, previous, inverse }) {
-  const change = previous === 0 ? 0 : (current - previous) / previous * 100;
-  const isPositive = inverse ? change < 0 : change > 0;
-  const isFlat = Math.abs(change) < 0.1;
-  const color = isFlat ? "gray" : isPositive ? "green" : "red";
-  const Icon = isFlat ? IconMinus : change > 0 ? IconTrendingUp : IconTrendingDown;
-  return /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-    /* @__PURE__ */ jsx(Icon, { size: 12 }),
-    /* @__PURE__ */ jsx(Badge, { size: "sm", color, variant: "light", children: isFlat ? "No change" : `${isPositive ? "+" : ""}${Math.abs(change).toFixed(1)}%` })
-  ] });
-}
-function CollapsibleSection({
-  title,
-  count,
-  countLabel,
-  children,
-  emptyMessage,
-  defaultExpanded = true,
-  maxHeight = 300
-}) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const isEmpty = count === 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        borderRadius: "8px",
-        padding: "8px",
-        border: "1px solid var(--color-border)",
-        boxShadow: "var(--standard-box-shadow)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          Group,
-          {
-            gap: "xs",
-            mb: expanded ? "xs" : 0,
-            justify: "space-between",
-            align: "center",
-            style: { cursor: "pointer" },
-            onClick: () => setExpanded(!expanded),
-            children: [
-              /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", style: { flex: 1 }, children: [
-                typeof title === "string" ? /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    fw: 600,
-                    size: "sm",
-                    c: "var(--color-text)",
-                    style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
-                    children: title
-                  }
-                ) : title,
-                count !== void 0 && countLabel && /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
-                  count,
-                  " ",
-                  count === 1 ? countLabel.replace(/s$/, "") : countLabel
-                ] })
-              ] }),
-              expanded ? /* @__PURE__ */ jsx(IconChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 16 })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Collapse, { in: expanded, children: isEmpty && emptyMessage ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: emptyMessage }) : /* @__PURE__ */ jsx(ScrollArea, { h: maxHeight, type: "scroll", offsetScrollbars: true, children }) })
-      ]
-    }
-  );
-}
-var PageTitleCaption = ({ title, caption, rightSection }) => {
-  const renderCaption = () => {
-    if (!caption) return null;
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: caption }) });
-  };
-  const titleContent = /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
-    /* @__PURE__ */ jsx(Space, { h: "4" }),
-    renderCaption()
-  ] });
-  if (!rightSection) {
-    return titleContent;
-  }
-  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "end", children: [
-    titleContent,
-    rightSection
-  ] });
-};
-function StatsCardSkeleton({ chartHeight = 120, withChart = true, statCount = 3 }) {
-  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
-    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "xl", children: [
-      /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
-      statCount >= 2 && /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
-    ] }),
-    withChart && /* @__PURE__ */ jsx(Skeleton, { height: chartHeight })
-  ] });
-}
-function ListSkeleton({ rows = 3, rowHeight = 50 }) {
-  return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: rowHeight }, i)) });
-}
-function DetailCardSkeleton({ rows = 3 }) {
-  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
-    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "lg", children: [
-      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
-    ] }),
-    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 60 }, i)) })
-  ] });
-}
-function CustomSelector({
-  value,
-  onChange,
-  data,
-  leftSection,
-  placeholder,
-  w,
-  withCheckIcon = false,
-  disabled
-}) {
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      value,
-      onChange,
-      data,
-      leftSection,
-      placeholder,
-      w,
-      size: "xs",
-      variant: "unstyled",
-      withCheckIcon,
-      disabled,
-      styles: {
-        wrapper: {
-          border: "1px solid var(--color-border)",
-          borderRadius: "var(--mantine-radius-default)",
-          backgroundColor: "var(--color-surface)",
-          transition: "border-color 150ms ease, background-color 150ms ease",
-          "&:hover": {
-            borderColor: "var(--color-border-hover, var(--mantine-color-dark-3))"
-          }
-        },
-        input: {
-          fontSize: "var(--mantine-font-size-xs)",
-          fontWeight: 500,
-          height: "30px",
-          minHeight: "30px",
-          paddingLeft: leftSection ? "30px" : void 0,
-          borderRadius: "var(--mantine-radius-default)",
-          cursor: "pointer"
-        },
-        section: {
-          color: "var(--color-text-subtle)"
-        },
-        dropdown: {
-          border: "1px solid var(--color-border)",
-          backgroundColor: "var(--color-surface)",
-          boxShadow: "var(--card-shadow)"
-        },
-        option: {
-          fontSize: "var(--mantine-font-size-xs)"
-        }
-      }
-    }
-  );
-}
-function APIErrorAlert({
-  error,
-  title,
-  showRequestId = true,
-  icon = /* @__PURE__ */ jsx(IconAlertCircle, {}),
-  color = "red"
-}) {
-  const { message, code, requestId, retryAfter } = getErrorInfo(error);
-  const alertTitle = title || getErrorTitle(code);
-  return /* @__PURE__ */ jsxs(Alert, { icon, title: alertTitle, color, variant: "light", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", children: message }),
-    retryAfter && /* @__PURE__ */ jsxs(Text, { size: "sm", mt: "xs", children: [
-      "Please wait ",
-      retryAfter,
-      " seconds before retrying."
-    ] }),
-    showRequestId && requestId && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
-      "Request ID: ",
-      /* @__PURE__ */ jsx(Code, { children: requestId })
-    ] })
-  ] });
-}
-
-// src/components/display/StatCard.module.css.js
-var StatCard_module_css_default = { "heroCard": "heroCard", "iconRing": "iconRing", "iconRingSm": "iconRingSm", "heroValue": "heroValue", "heroValueSm": "heroValueSm", "heroLabel": "heroLabel", "heroLabelSm": "heroLabelSm" };
-function StatCard(props) {
-  if (props.variant === "hero") {
-    return /* @__PURE__ */ jsx(HeroStatCard, { ...props });
-  }
-  const { label, value, icon: IconComponent, color } = props;
-  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color, children: /* @__PURE__ */ jsx(IconComponent, { size: 18 }) }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: label }),
-      /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: value })
-    ] })
-  ] }) });
-}
-function HeroStatCard({
-  icon: IconComponent,
-  value,
-  label,
-  valueColor,
-  isLoading,
-  size = "sm",
-  children
-}) {
-  const sm = size === "sm";
-  const iconSize = sm ? 36 : 46;
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_module_css_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx(Skeleton, { circle: true, height: iconSize }),
-      /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-        /* @__PURE__ */ jsx(Skeleton, { height: sm ? 24 : 32, width: 60 }),
-        /* @__PURE__ */ jsx(Skeleton, { height: 12, width: 80 })
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_module_css_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx("div", { className: sm ? StatCard_module_css_default.iconRingSm : StatCard_module_css_default.iconRing, children: /* @__PURE__ */ jsx(IconComponent, { size: sm ? 18 : 22 }) }),
-    /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: children ? 1 : void 0 }, children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: sm ? StatCard_module_css_default.heroValueSm : StatCard_module_css_default.heroValue,
-          style: valueColor ? { color: valueColor } : void 0,
-          children: value
-        }
-      ),
-      children ? /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx("span", { className: sm ? StatCard_module_css_default.heroLabelSm : StatCard_module_css_default.heroLabel, children: label }),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children })
-      ] }) : /* @__PURE__ */ jsx("span", { className: sm ? StatCard_module_css_default.heroLabelSm : StatCard_module_css_default.heroLabel, children: label })
-    ] })
-  ] }) });
-}
-function StatCardSkeleton() {
-  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) });
-}
-var customCodeTheme = Object.fromEntries(
-  Object.entries(oneDark).map(([key, value]) => [
-    key,
-    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
-  ])
-);
-var defaultComponents = {
-  h1: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 3, c: "var(--color-primary)", mb: "xs", mt: "md", children }),
-  h2: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 4, c: "var(--color-primary)", mb: "xs", mt: "sm", children }),
-  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
-  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
-  li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem", fontSize: "var(--mantine-font-size-sm)" }, children }),
-  code: ({ className, children, ...props }) => {
-    const match = /language-(\w+)/.exec(className || "");
-    const codeString = String(children).replace(/\n$/, "");
-    if (match) {
-      return /* @__PURE__ */ jsx(
-        Prism,
-        {
-          style: customCodeTheme,
-          language: match[1],
-          PreTag: "div",
-          customStyle: {
-            margin: "0.5rem 0",
-            borderRadius: "var(--mantine-radius-default)",
-            fontSize: "0.8rem"
-          },
-          children: codeString
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(Code, { ...props, children });
-  },
-  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
-  blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, { pl: "sm", my: "xs", style: { borderLeft: "2px solid var(--color-border)" }, children }),
-  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children }),
-  strong: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fw: 700, children }),
-  em: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fs: "italic", children })
-};
-function StyledMarkdown({ children, components, className, style }) {
-  const mergedComponents = components ? { ...defaultComponents, ...components } : defaultComponents;
-  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Markdown, { components: mergedComponents, children }) });
-}
-var jsonTheme = Object.fromEntries(
-  Object.entries(oneDark).map(([key, value]) => [
-    key,
-    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
-  ])
-);
-function JsonViewer({ data, maxHeight, fontSize = "0.8rem" }) {
-  const jsonString = typeof data === "string" ? data : JSON.stringify(data, null, 2);
-  return /* @__PURE__ */ jsx(
-    Prism,
-    {
-      language: "json",
-      style: jsonTheme,
-      customStyle: {
-        margin: 0,
-        fontSize,
-        maxHeight,
-        overflow: maxHeight ? "auto" : void 0,
-        overflowX: "auto"
-      },
-      children: jsonString
-    }
-  );
-}
-var subtleMarkdownComponents = {
-  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children })
-};
-var subtleMarkdownWrapperStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 8
-};
-function ContextViewer({ data }) {
-  return /* @__PURE__ */ jsx(ContextNode, { data, depth: 0 });
-}
-function ContextNode({ data, depth }) {
-  if (data === null || data === void 0) {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No context provided" });
-  }
-  if (typeof data === "string") {
-    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, style: subtleMarkdownWrapperStyle, children: data });
-  }
-  if (typeof data === "number" || typeof data === "boolean") {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
-  }
-  if (Array.isArray(data)) {
-    return /* @__PURE__ */ jsx(ArrayView, { items: data, depth });
-  }
-  if (typeof data === "object") {
-    return /* @__PURE__ */ jsx(ObjectView, { data, depth });
-  }
-  return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
-}
-function formatLabel(key) {
-  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-}
-function hasMarkdown(value) {
-  return /(\*\*.+\*\*|^#{1,6}\s|^\s*[-*]\s|\[.+\]\(.+\)|^\|.+\|$|^>\s|```)/.test(value);
-}
-function NestedSection({ title, children }) {
-  const [expanded, setExpanded] = useState(true);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
-    /* @__PURE__ */ jsxs(Group, { gap: 4, style: { cursor: "pointer", userSelect: "none" }, onClick: () => setExpanded((v) => !v), children: [
-      /* @__PURE__ */ jsx(
-        IconChevronRight,
-        {
-          size: 14,
-          color: "var(--color-primary)",
-          style: {
-            transition: "transform 150ms ease",
-            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-            flexShrink: 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title })
-    ] }),
-    expanded && /* @__PURE__ */ jsx(Box, { pl: "sm", style: { borderLeft: "2px solid var(--color-border)" }, children })
-  ] });
-}
-function PrimitiveValue({ value }) {
-  if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "\u2014" });
-  }
-  if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value ? "Yes" : "No" });
-  }
-  if (typeof value === "number") {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value.toLocaleString() });
-  }
-  const str = String(value);
-  if (hasMarkdown(str)) {
-    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, children: str });
-  }
-  return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children: str });
-}
-function ArrayView({ items, depth }) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty list" });
-  }
-  const allPrimitive = items.every((item) => typeof item !== "object" || item === null);
-  if (allPrimitive) {
-    return /* @__PURE__ */ jsx(Stack, { gap: 2, children: items.map((item, i) => /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-start", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { userSelect: "none" }, children: "\u2022" }),
-      /* @__PURE__ */ jsx(PrimitiveValue, { value: item })
-    ] }, i)) });
-  }
-  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: items.map((item, i) => /* @__PURE__ */ jsx(Paper, { p: "sm", style: { border: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsx(ContextNode, { data: item, depth: depth + 1 }) }, i)) });
-}
-function ObjectView({ data, depth }) {
-  const entries = Object.entries(data);
-  if (entries.length === 0) {
-    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty" });
-  }
-  const simpleEntries = [];
-  const complexEntries = [];
-  for (const [key, value] of entries) {
-    if (value === null || value === void 0 || typeof value === "boolean" || typeof value === "number") {
-      simpleEntries.push([key, value]);
-    } else if (typeof value === "string") {
-      if (hasMarkdown(value) || value.length > 120) {
-        complexEntries.push([key, value]);
-      } else {
-        simpleEntries.push([key, value]);
-      }
-    } else {
-      complexEntries.push([key, value]);
-    }
-  }
-  return /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
-    simpleEntries.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: 6, children: simpleEntries.map(([key, value]) => /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: "sm",
-          style: { minWidth: 140, flexShrink: 0, fontFamily: "var(--mantine-font-family-headings)" },
-          children: formatLabel(key)
-        }
-      ),
-      /* @__PURE__ */ jsx(PrimitiveValue, { value })
-    ] }, key)) }),
-    complexEntries.map(([key, value]) => /* @__PURE__ */ jsx(NestedSection, { title: formatLabel(key), children: /* @__PURE__ */ jsx(ContextNode, { data: value, depth: depth + 1 }) }, key))
-  ] });
-}
-var TIME_RANGE_OPTIONS = [
-  { value: "1h", label: "Last 1 hour" },
-  { value: "24h", label: "Last 24 hours" },
-  { value: "7d", label: "Last 7 days" },
-  { value: "30d", label: "Last 30 days" }
-];
-function TimeRangeSelector({ value, onChange, width = 180 }) {
-  return /* @__PURE__ */ jsx(
-    CustomSelector,
-    {
-      value,
-      onChange: (newValue) => newValue && onChange(newValue),
-      data: TIME_RANGE_OPTIONS,
-      leftSection: /* @__PURE__ */ jsx(IconClock, { size: 16, color: "var(--color-text-subtle)" }),
-      w: width,
-      withCheckIcon: true
-    }
-  );
-}
-function PageNotFound() {
-  const { currentPath, navigate } = useRouterContext();
-  const { user, isLoading } = useAuthContext();
-  const isAuthPage = currentPath === "/login" || currentPath === "/auth-redirect";
-  const shouldShowSidebar = user && !isLoading && !isAuthPage;
-  const height = shouldShowSidebar ? "100%" : "100vh";
-  return /* @__PURE__ */ jsx(Center, { h: height, bg: "var(--color-background)", children: /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", children: [
-    /* @__PURE__ */ jsx(IconInfoCircle, { size: 60, color: "var(--color-text-subtle)" }),
-    /* @__PURE__ */ jsx(Title, { order: 1, children: "Page Not Found" }),
-    /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "lg", children: "The page you are looking for does not exist." }),
-    /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { size: "md", onClick: () => navigate("/"), children: "Go Home" }) })
-  ] }) });
-}
-function ResourceCard({
-  resource,
-  onClick,
-  layout = "stack",
-  rightSection,
-  topSection,
-  lastRunLabel,
-  style,
-  ...rest
-}) {
-  const Icon = getResourceIcon(resource.type);
-  if (!Icon) {
-    return /* @__PURE__ */ jsx(Card, { shadow: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-      "Invalid resource type: ",
-      resource.type
-    ] }) });
-  }
-  const cardStyle = {
-    cursor: "pointer",
-    ...layout === "grid" || layout === "card" ? { transition: "box-shadow var(--duration-fast) var(--easing)" } : {},
-    ...style
-  };
-  const iconSize = layout === "grid" ? 28 : 20;
-  const details = /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(Icon, { size: iconSize, color: "var(--color-primary)" }),
-    /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            fw: 600,
-            size: "sm",
-            style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
-            ...layout === "stack" ? { lineClamp: 1 } : { truncate: true },
-            children: resource.name
-          }
-        ),
-        /* @__PURE__ */ jsx(Badge, { variant: "light", size: layout === "grid" ? "xs" : "sm", children: resource.type })
-      ] }),
-      resource.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ...layout === "stack" ? { lineClamp: 1 } : { truncate: true }, children: resource.description }),
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "xs", children: [
-          "v",
-          resource.version
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "outline", size: layout === "grid" ? "xs" : "sm", children: resource.status.toUpperCase() })
-      ] }),
-      lastRunLabel && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lastRunLabel }),
-      /* @__PURE__ */ jsx(Text, { size: layout === "grid" ? "sm" : "xs", c: "dimmed", ff: "monospace", children: resource.resourceId })
-    ] })
-  ] });
-  if (layout === "card") {
-    return /* @__PURE__ */ jsx(
-      Card,
-      {
-        withBorder: true,
-        padding: 0,
-        style: cardStyle,
-        onClick: () => onClick(resource),
-        "data-resource-id": rest["data-resource-id"],
-        children: /* @__PURE__ */ jsxs(Stack, { gap: 8, p: "sm", pb: "xs", children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", justify: "space-between", children: [
-            /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(Icon, { size: 20, color: "var(--color-primary)", style: { flexShrink: 0 } }),
-              /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, truncate: true, children: resource.name })
-            ] }),
-            /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", style: { flexShrink: 0 }, children: [
-              resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
-                "v",
-                resource.version
-              ] }),
-              /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "light", size: "sm", children: resource.status.toUpperCase() })
-            ] })
-          ] }),
-          resource.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, children: resource.description }),
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", children: [
-            rightSection || /* @__PURE__ */ jsx("span", {}),
-            lastRunLabel && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: lastRunLabel })
-          ] }),
-          topSection
-        ] })
-      }
-    );
-  }
-  if (layout === "row") {
-    const [hovered, setHovered] = useState(false);
-    return /* @__PURE__ */ jsx(
-      Card,
-      {
-        padding: 0,
-        style: {
-          cursor: "pointer",
-          border: "1px solid var(--color-border)",
-          transition: "background 150ms ease",
-          background: hovered ? "var(--active-background)" : "var(--glass-background)",
-          ...style
-        },
-        onClick: () => onClick(resource),
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        "data-resource-id": rest["data-resource-id"],
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "grid",
-              gridTemplateColumns: "18px 200px 120px 1fr 180px 140px 14px",
-              alignItems: "center",
-              gap: "var(--mantine-spacing-sm)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Icon, { size: 18, color: "var(--color-primary)" }),
-              /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", truncate: true, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: resource.name }),
-              /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
-                resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
-                  "v",
-                  resource.version
-                ] }),
-                /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "light", size: "sm", children: resource.status.toUpperCase() })
-              ] }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, style: { minWidth: 0 }, children: resource.description || "" }),
-              /* @__PURE__ */ jsx("div", { style: { whiteSpace: "nowrap" }, children: rightSection }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap", textAlign: "right" }, children: lastRunLabel || "" }),
-              /* @__PURE__ */ jsx(
-                IconChevronRight,
-                {
-                  size: 14,
-                  style: {
-                    opacity: hovered ? 0.7 : 0,
-                    transition: "opacity 150ms ease"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-  if (layout === "grid") {
-    return /* @__PURE__ */ jsx(
-      Card,
-      {
-        withBorder: true,
-        padding: "sm",
-        style: cardStyle,
-        onClick: () => onClick(resource),
-        "data-resource-id": rest["data-resource-id"],
-        children: /* @__PURE__ */ jsxs(Grid, { gutter: "sm", align: "center", children: [
-          /* @__PURE__ */ jsx(Grid.Col, { span: 8, children: details }),
-          rightSection && /* @__PURE__ */ jsx(Grid.Col, { span: 4, children: /* @__PURE__ */ jsx(Group, { justify: "flex-end", gap: "md", wrap: "nowrap", children: rightSection }) })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      shadow: "sm",
-      withBorder: true,
-      style: cardStyle,
-      onClick: () => onClick(resource),
-      "data-resource-id": rest["data-resource-id"],
-      children: /* @__PURE__ */ jsx(Stack, { children: details })
-    }
-  );
-}
-
-// src/components/display/ResourceCardAdapters.ts
-function catalogItemToResourceDefinition(item) {
-  return {
-    resourceId: item.resourceId,
-    name: item.resourceName,
-    description: item.description || "",
-    version: item.version,
-    type: item.resourceType,
-    status: item.status
-  };
-}
-function CardHeader({ icon, title, subtitle, rightSection }) {
-  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "md", children: [
-    subtitle ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        icon,
-        /* @__PURE__ */ jsx(Title, { order: 3, children: title })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: 2, children: subtitle })
-    ] }) : /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      icon,
-      /* @__PURE__ */ jsx(Title, { order: 3, children: title })
-    ] }),
-    rightSection
-  ] });
-}
 var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
   const canClose = loading === true ? false : true;
   return /* @__PURE__ */ jsx(
@@ -1020,6 +350,64 @@ function ResourceHealthChart({
     }
   ) });
 }
+function ResourceHealthPanel({ resourceId, resourceType, timeRange }) {
+  const colors = useCyberColors();
+  const { startDate, endDate } = useMemo(() => getTimeRangeDates(timeRange), [timeRange]);
+  const granularity = ["1h", "24h"].includes(timeRange) ? "hour" : "day";
+  const { data, isLoading } = useResourcesHealth({
+    resources: [{ entityType: resourceType, entityId: resourceId }],
+    startDate,
+    endDate,
+    granularity
+  });
+  const resourceHealth = data?.resources?.[0];
+  const chartData = useMemo(() => {
+    if (!resourceHealth?.trendData) return [];
+    return resourceHealth.trendData.map((point) => ({
+      time: point.time,
+      Success: (point.success || 0) - (point.warning || 0),
+      Warning: point.warning || 0,
+      Failed: point.failure || 0
+    }));
+  }, [resourceHealth?.trendData]);
+  const xTickFormatter = useMemo(() => (value) => formatBucketTime(value, granularity), [granularity]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const summary = resourceHealth?.summary;
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(Group, { justify: "space-between", mb: "md", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Execution Health" }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+        summary?.total || 0,
+        " executions, ",
+        summary?.successRate?.toFixed(1) || 0,
+        "% success rate"
+      ] })
+    ] }) }),
+    chartData.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: IconChartBar, title: "No execution data for this time range" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.green, label: "Success" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.yellow, label: "Warning" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.red, label: "Failed" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: chartData,
+          series: [
+            { dataKey: "Success", color: "green", name: "Success" },
+            { dataKey: "Warning", color: "yellow", name: "Warning" },
+            { dataKey: "Failed", color: "red", name: "Failed" }
+          ],
+          height: 200,
+          yDomain: [0, "auto"],
+          xTickFormatter
+        }
+      )
+    ] })
+  ] });
+}
 var categoryColors = {
   info: "blue",
   queue: "cyan",
@@ -2323,7 +1711,7 @@ var iconMap = {
   IconRocket,
   IconMessageCircle,
   IconArrowUp,
-  IconClock: IconClock,
+  IconClock,
   IconFileText,
   IconSend,
   IconMail
@@ -3347,4 +2735,4 @@ var showApiErrorNotification = (error) => {
   });
 };
 
-export { APIErrorAlert, ActionModal, AgentDefinitionDisplay, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CardHeader, CollapsibleJsonSection, CollapsibleSection, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContextViewer, ContractDisplay, CustomModal, CustomSelector, DetailCardSkeleton, EmptyState, EmptyVisualizer, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, JsonViewer, ListSkeleton, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, PageNotFound, PageTitleCaption, ResourceCard, ResourceDefinitionSection, ResourceHealthChart, SortableHeader, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TableSelectionToolbar, TaskCard, TimeRangeSelector, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, TrendIndicator, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowDefinitionDisplay, WorkflowExecutionTimeline, catalogItemToResourceDefinition, getGraphBackgroundStyles, getHealthColor, getIcon, iconMap, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };
+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 };