@elevasis/ui 1.7.4 → 1.7.5

package/dist/chunk-4KPI7YCY.js

@@ -0,0 +1,1590 @@
+import { getTimeRangeLabel, getTimeRangeDates, useErrorTrends, formatBucketTime } from './chunk-6HZAMY6T.js';
+import { ResourceStatusColors } from './chunk-YZ6GTZXL.js';
+import { getResourceIcon } from './chunk-LFYO3MDC.js';
+import { getErrorInfo, getErrorTitle } from './chunk-4VGWQ5AN.js';
+import { useAuthContext } from './chunk-7PLEQFHO.js';
+import { useRouterContext } from './chunk-Q7DJKLEN.js';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useComputedColorScheme, Group, Text, Box, Stack, Center, Title, Button, Loader, Badge, Collapse, ScrollArea, Card, Skeleton, Select, Alert, Code, ThemeIcon, Paper, Grid, NumberFormatter, Space, Tooltip as Tooltip$1, SimpleGrid, SegmentedControl } from '@mantine/core';
+import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine as ReferenceLine$1, Area, PieChart, Pie, Cell } from 'recharts';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconClock, IconInfoCircle, IconChevronRight, IconDownload, IconChartLine, IconApps, IconPlayerPlay, IconChartBar, IconAlertTriangle, IconRocket } from '@tabler/icons-react';
+import Markdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+var THEME_DERIVED = {
+  grid: "var(--color-border)",
+  gridLine: "var(--color-border)",
+  tickText: "var(--mantine-color-dimmed)",
+  tooltipBg: "var(--glass-background)",
+  tooltipBorder: "var(--color-border)",
+  tooltipText: "var(--mantine-color-dimmed)",
+  dotStroke: "var(--mantine-color-body)"
+};
+var DARK = {
+  cyan: "#00e5ff",
+  cyanDim: "#00b8d4",
+  blue: "#448aff",
+  green: "#00ff88",
+  greenDim: "#00c853",
+  red: "#ff1744",
+  redDim: "#d50000",
+  yellow: "#ffab00",
+  magenta: "#ff4081",
+  ...THEME_DERIVED,
+  cardGlow: "0 0 30px rgba(0, 229, 255, 0.06)"
+};
+var LIGHT = {
+  cyan: "#0091ea",
+  cyanDim: "#0277bd",
+  blue: "#4d8af0",
+  green: "#00a854",
+  greenDim: "#00873e",
+  red: "#d32f2f",
+  redDim: "#b71c1c",
+  yellow: "#f9a825",
+  magenta: "#c51162",
+  ...THEME_DERIVED,
+  cardGlow: "0 0 20px rgba(0, 145, 234, 0.06)"
+};
+function useCyberColors() {
+  const scheme = useComputedColorScheme("dark");
+  return useMemo(() => scheme === "dark" ? DARK : LIGHT, [scheme]);
+}
+function getSeriesColor(key, colors) {
+  switch (key) {
+    case "Success Rate":
+      return colors.cyan;
+    case "Executions":
+      return colors.blue;
+    case "Success Count":
+      return colors.green;
+    case "Error Count":
+      return colors.red;
+    default:
+      return colors.cyan;
+  }
+}
+var ReferenceLine = ReferenceLine$1;
+function CyberDefs({ colors }) {
+  const gradients = [
+    { id: "gradCyan", color: colors.cyan, opacity: 0.35 },
+    { id: "gradBlue", color: colors.blue, opacity: 0.3 },
+    { id: "gradGreen", color: colors.green, opacity: 0.3 },
+    { id: "gradRed", color: colors.red, opacity: 0.3 },
+    { id: "gradYellow", color: colors.yellow, opacity: 0.3 }
+  ];
+  const filters = [
+    { id: "glowCyan", std: 3 },
+    { id: "glowBlue", std: 3 },
+    { id: "glowGreen", std: 2.5 },
+    { id: "glowRed", std: 2.5 },
+    { id: "glowYellow", std: 2.5 }
+  ];
+  return /* @__PURE__ */ jsxs("defs", { children: [
+    gradients.map((g) => /* @__PURE__ */ jsxs("linearGradient", { id: g.id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: g.color, stopOpacity: g.opacity }),
+      /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: g.color, stopOpacity: g.opacity * 0.2 }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: g.color, stopOpacity: 0 })
+    ] }, g.id)),
+    filters.map((f) => /* @__PURE__ */ jsxs("filter", { id: f.id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: f.std, result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }, f.id)),
+    /* @__PURE__ */ jsxs("filter", { id: "dotGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("filter", { id: "pulseGlow", x: "-30%", y: "-30%", width: "160%", height: "160%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] })
+  ] });
+}
+function PulseDefs({ series, colors, isLight }) {
+  return /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+    const color = colors[s.color ?? "cyan"];
+    const dur = "6s";
+    const delay = "0s";
+    const keyTimes = "0;0.3;1";
+    const keySplines = "0.33 0 0.67 1;0 0 1 1";
+    const animateProps = {
+      dur,
+      keyTimes,
+      keySplines,
+      repeatCount: "indefinite",
+      calcMode: "spline",
+      begin: delay
+    };
+    return /* @__PURE__ */ jsxs("linearGradient", { id: `pulse-${i}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.15;1.0;1.0", ...animateProps }) }),
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: isLight ? "white" : color, stopOpacity: isLight ? 0.6 : 0.9, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.075;1.075;1.075", ...animateProps }) }),
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "0;1.15;1.15", ...animateProps }) })
+    ] }, i);
+  }) });
+}
+function CyberActiveDot({
+  cx,
+  cy,
+  color,
+  dotStroke
+}) {
+  if (cx == null || cy == null) return null;
+  return /* @__PURE__ */ jsxs("g", { filter: "url(#dotGlow)", children: [
+    /* @__PURE__ */ jsxs("circle", { cx, cy, r: 6, fill: "none", stroke: color, strokeWidth: 2, opacity: 0.5, children: [
+      /* @__PURE__ */ jsx("animate", { attributeName: "r", from: "4", to: "10", dur: "1.2s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: "1.2s", repeatCount: "indefinite" })
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 4, fill: color, stroke: dotStroke, strokeWidth: 2 })
+  ] });
+}
+function CyberTooltipContent({
+  active,
+  payload,
+  label,
+  colors,
+  labelFormatter,
+  valueFormatter
+}) {
+  if (!active || !payload?.length) return null;
+  const filtered = payload.filter((entry) => !entry.name?.startsWith("_pulse_"));
+  if (!filtered.length) return null;
+  const displayLabel = label && labelFormatter ? labelFormatter(label) : label;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: colors.tooltipBg,
+        border: `1px solid ${colors.tooltipBorder}`,
+        borderRadius: 8,
+        padding: "10px 14px",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)",
+        boxShadow: "var(--standard-box-shadow)",
+        fontFamily: "var(--mantine-font-family-monospace, monospace)",
+        minWidth: 160
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: colors.tickText,
+              marginBottom: 8,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              borderBottom: `1px solid ${colors.tooltipBorder}`,
+              paddingBottom: 6
+            },
+            children: displayLabel
+          }
+        ),
+        filtered.map((entry) => {
+          const color = entry.color || getSeriesColor(entry.dataKey, colors);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: 16,
+                padding: "3px 0",
+                fontSize: 12
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        backgroundColor: color,
+                        boxShadow: `0 0 6px ${color}`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { color: colors.tooltipText }, children: entry.name ?? entry.dataKey })
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { color, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: entry.value != null && valueFormatter ? valueFormatter(entry.value) : String(entry.value) })
+              ]
+            },
+            entry.dataKey
+          );
+        })
+      ]
+    }
+  );
+}
+function CyberLegendItem({ color, label }) {
+  return /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 10,
+          height: 10,
+          borderRadius: "50%",
+          backgroundColor: color,
+          boxShadow: `0 0 8px ${color}, 0 0 16px ${color}40`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { letterSpacing: "0.03em" }, children: label })
+  ] });
+}
+var COLOR_MAP = {
+  cyan: { gradient: "url(#gradCyan)", filter: "url(#glowCyan)", key: "cyan" },
+  blue: { gradient: "url(#gradBlue)", filter: "url(#glowBlue)", key: "blue" },
+  green: { gradient: "url(#gradGreen)", filter: "url(#glowGreen)", key: "green" },
+  red: { gradient: "url(#gradRed)", filter: "url(#glowRed)", key: "red" },
+  yellow: { gradient: "url(#gradYellow)", filter: "url(#glowYellow)", key: "yellow" }
+};
+function CyberAreaChart({
+  data,
+  series,
+  xDataKey = "time",
+  height = 300,
+  yAxisLabel,
+  yDomain,
+  yTickFormatter,
+  showGrid = true,
+  showZeroBaseline = true,
+  baselineColor,
+  lineOnly = false,
+  margin = { top: 8, right: 20, left: 0, bottom: 0 },
+  xTickFormatter,
+  tooltipFormatter
+}) {
+  const isLight = useComputedColorScheme("dark") === "light";
+  const colors = useCyberColors();
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const allZero = useMemo(() => {
+    if (!showZeroBaseline || !data.length) return false;
+    return data.every((row) => series.every((s) => row[s.dataKey] === 0));
+  }, [data, series, showZeroBaseline]);
+  if (!ready || !data.length) return /* @__PURE__ */ jsx(Box, { style: { height } });
+  const gridProps = {
+    stroke: colors.gridLine,
+    strokeDasharray: "3 6",
+    strokeOpacity: 1
+  };
+  const xAxisConfig = {
+    stroke: "none",
+    tick: {
+      fill: colors.tickText,
+      fontSize: 11,
+      fontFamily: "var(--mantine-font-family-monospace, monospace)"
+    },
+    tickLine: false,
+    axisLine: { stroke: colors.grid, strokeWidth: 1 }
+  };
+  const yTickStyle = {
+    fill: colors.tickText,
+    fontSize: 11,
+    fontFamily: "var(--mantine-font-family-monospace, monospace)"
+  };
+  return /* @__PURE__ */ jsx(Box, { style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data, margin, children: [
+    /* @__PURE__ */ jsx(CyberDefs, { colors }),
+    /* @__PURE__ */ jsx(PulseDefs, { series, colors, isLight }),
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridProps }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xDataKey, ...xAxisConfig, tickFormatter: xTickFormatter }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        domain: yDomain ?? [0, (max) => Math.max(max, 1)],
+        allowDecimals: false,
+        stroke: "none",
+        tick: yTickStyle,
+        tickFormatter: yTickFormatter,
+        tickLine: false,
+        axisLine: { stroke: colors.grid, strokeWidth: 1 },
+        label: yAxisLabel ? {
+          value: yAxisLabel,
+          angle: -90,
+          position: "insideLeft",
+          offset: 0,
+          style: { fill: colors.tickText, fontSize: 11 }
+        } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: /* @__PURE__ */ jsx(CyberTooltipContent, { colors, labelFormatter: xTickFormatter, valueFormatter: tooltipFormatter }),
+        cursor: { stroke: colors.cyan, strokeOpacity: 0.2 }
+      }
+    ),
+    allZero && (() => {
+      const bColor = colors[baselineColor ?? series[0]?.color ?? "cyan"];
+      return /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          y: 0,
+          stroke: bColor,
+          strokeWidth: 2,
+          style: {
+            filter: `drop-shadow(0 0 4px ${bColor}) drop-shadow(0 0 8px ${bColor})`
+          }
+        }
+      );
+    })(),
+    series.map((s) => {
+      const cm = COLOR_MAP[s.color ?? "cyan"];
+      const strokeColor = colors[cm.key];
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.name ?? s.dataKey,
+          stroke: strokeColor,
+          strokeWidth: lineOnly ? 3 : 2,
+          fill: lineOnly ? "transparent" : cm.gradient,
+          filter: cm.filter,
+          dot: false,
+          activeDot: /* @__PURE__ */ jsx(CyberActiveDot, { color: strokeColor, dotStroke: colors.dotStroke }),
+          animationBegin: 100,
+          animationDuration: s.animationDuration ?? 1200,
+          animationEasing: "ease-out"
+        },
+        s.dataKey
+      );
+    }),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: `_pulse_${s.dataKey}`,
+        stroke: `url(#pulse-${i})`,
+        strokeWidth: 3,
+        fill: "none",
+        filter: "url(#pulseGlow)",
+        dot: false,
+        activeDot: false,
+        tooltipType: "none",
+        isAnimationActive: false,
+        style: { pointerEvents: "none" }
+      },
+      `pulse-${s.dataKey}`
+    ))
+  ] }) }) });
+}
+function CyberDonutTooltip({
+  active,
+  payload,
+  colors
+}) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  if (!entry) return null;
+  const color = entry.payload?.color ?? colors.cyan;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: colors.tooltipBg,
+        border: `1px solid ${colors.tooltipBorder}`,
+        borderRadius: 8,
+        padding: "8px 12px",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)",
+        boxShadow: "var(--standard-box-shadow)",
+        fontFamily: "var(--mantine-font-family-monospace, monospace)",
+        display: "flex",
+        alignItems: "center",
+        gap: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: color,
+              boxShadow: `0 0 6px ${color}`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: colors.tooltipText, fontSize: 12 }, children: entry.name }),
+        /* @__PURE__ */ jsx("span", { style: { color, fontWeight: 600, fontSize: 12, fontVariantNumeric: "tabular-nums" }, children: entry.value })
+      ]
+    }
+  );
+}
+function CyberDonut({
+  title,
+  segments,
+  centerValue,
+  centerLabel,
+  centerValueColor = "var(--mantine-color-text)",
+  glowId,
+  colors,
+  size = 120,
+  innerRadius = 36,
+  outerRadius = 52,
+  isLoading,
+  showLegend = true
+}) {
+  const filtered = segments.filter((s) => s.value > 0);
+  const isEmpty = filtered.length === 0;
+  const pieData = isEmpty ? [{ name: "Empty", value: 1, color: "var(--color-border)" }] : filtered;
+  return /* @__PURE__ */ jsxs(Stack, { gap: 6, align: "center", children: [
+    title && /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", style: { letterSpacing: "0.03em", textTransform: "uppercase" }, children: title }),
+    /* @__PURE__ */ jsxs(Box, { style: { width: size, height: size, position: "relative" }, children: [
+      /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+        !isEmpty && /* @__PURE__ */ jsx("defs", { children: filtered.map((_, i) => /* @__PURE__ */ jsxs("filter", { id: `${glowId}-${i}`, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+          /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
+          /* @__PURE__ */ jsxs("feMerge", { children: [
+            /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+            /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+          ] })
+        ] }, i)) }),
+        /* @__PURE__ */ jsx(
+          Pie,
+          {
+            data: pieData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius,
+            outerRadius,
+            paddingAngle: isEmpty ? 0 : 3,
+            dataKey: "value",
+            stroke: "none",
+            animationBegin: 100,
+            animationDuration: 1e3,
+            animationEasing: "ease-out",
+            isAnimationActive: !isEmpty,
+            children: pieData.map((entry, i) => /* @__PURE__ */ jsx(
+              Cell,
+              {
+                fill: entry.color,
+                style: {
+                  filter: isEmpty ? void 0 : `url(#${glowId}-${i})`,
+                  fillOpacity: isEmpty ? 0.3 : 0.9
+                }
+              },
+              entry.name
+            ))
+          }
+        ),
+        !isEmpty && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CyberDonutTooltip, { colors }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            textAlign: "center",
+            pointerEvents: "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: 18,
+                  fontWeight: 700,
+                  fontFamily: "var(--mantine-font-family-monospace, monospace)",
+                  color: centerValueColor,
+                  lineHeight: 1
+                },
+                children: isLoading ? "-" : centerValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: 8,
+                  color: "var(--mantine-color-dimmed)",
+                  letterSpacing: "0.05em",
+                  textTransform: "uppercase",
+                  marginTop: 2
+                },
+                children: centerLabel
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    showLegend && /* @__PURE__ */ jsx(Stack, { gap: 4, style: { width: "100%" }, children: segments.map((seg) => /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", px: "xs", children: [
+      /* @__PURE__ */ jsx(CyberLegendItem, { color: seg.color, label: seg.name }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          style: {
+            fontFamily: "var(--mantine-font-family-monospace, monospace)",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: isLoading ? "-" : seg.value
+        }
+      )
+    ] }, seg.name)) })
+  ] });
+}
+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 GRANULARITY_MAP = {
+  "1h": "hour",
+  "24h": "hour",
+  "7d": "day",
+  "30d": "day"
+};
+var BUCKET_CONFIG = {
+  "1h": { size: 5 * 60 * 1e3, count: 12 },
+  "24h": { size: 60 * 60 * 1e3, count: 24 },
+  "7d": { size: 24 * 60 * 60 * 1e3, count: 7 },
+  "30d": { size: 24 * 60 * 60 * 1e3, count: 30 }
+};
+function groupTimestampsByTime(timestamps, timeRange) {
+  const { size: bucketSize, count: bucketCount } = BUCKET_CONFIG[timeRange];
+  const granularity = GRANULARITY_MAP[timeRange];
+  const now = /* @__PURE__ */ new Date();
+  const buckets = /* @__PURE__ */ new Map();
+  for (let i = bucketCount - 1; i >= 0; i--) {
+    const bucketTime = new Date(now.getTime() - i * bucketSize);
+    const label = formatBucketTime(bucketTime.toISOString(), granularity);
+    buckets.set(label, 0);
+  }
+  timestamps.forEach((occurredAt) => {
+    const timeDiff = now.getTime() - occurredAt.getTime();
+    const bucketIndex = Math.floor(timeDiff / bucketSize);
+    if (bucketIndex >= 0 && bucketIndex < bucketCount) {
+      const bucketTime = new Date(now.getTime() - bucketIndex * bucketSize);
+      const label = formatBucketTime(bucketTime.toISOString(), granularity);
+      buckets.set(label, (buckets.get(label) || 0) + 1);
+    }
+  });
+  return Array.from(buckets.entries()).map(([time, count]) => ({
+    time,
+    "Activity Count": count
+  }));
+}
+function ActivityTrendChart({ timestamps, total, isLoading, timeRange }) {
+  const chartData = useMemo(() => {
+    return groupTimestampsByTime(timestamps, timeRange);
+  }, [timestamps, timeRange]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) });
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(CardHeader, { title: "Activity Trend", subtitle: `${total} activities in ${getTimeRangeLabel(timeRange)}` }),
+    /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: chartData,
+        series: [{ dataKey: "Activity Count", color: "blue" }],
+        height: 200,
+        yAxisLabel: "Count",
+        yDomain: [0, "auto"]
+      }
+    )
+  ] });
+}
+function formatDollar(value) {
+  return `$${value.toFixed(2)}`;
+}
+function CostTrendChart({ data, summaryData, isLoading, error }) {
+  const todayCost = summaryData?.current.totalCostUsd ?? 0;
+  const previousCost = summaryData?.previous.totalCostUsd ?? 0;
+  const mtdCost = summaryData?.mtd.totalCostUsd ?? 0;
+  const projectedMonthlyCost = summaryData?.projection.monthlyCostUsd ?? 0;
+  const confidence = summaryData?.projection.confidence ?? "low";
+  const budget = 1500;
+  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 = data?.trendData.map((point) => {
+    const date = new Date(point.time);
+    const timeLabel = data.granularity === "hour" ? date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }) : date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    return {
+      time: timeLabel,
+      "Total Cost": point.totalCostUsd
+    };
+  }) ?? [];
+  const handleExport = () => {
+    if (!data) return;
+    const csvContent = [
+      ["Time", "Total Cost ($)", "Executions", "Avg Cost/Execution ($)"],
+      ...data.trendData.map((d) => [
+        d.time,
+        d.totalCostUsd.toFixed(4),
+        d.executionCount,
+        d.avgCostPerExecution.toFixed(4)
+      ])
+    ].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-trends-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load cost trends" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const granularityLabel = data?.granularity === "hour" ? "Hourly" : "Daily";
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: `Cost Trend (${granularityLabel})`,
+        rightSection: /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "xs", leftSection: /* @__PURE__ */ jsx(IconDownload, { size: 14 }), onClick: handleExport, children: "Export CSV" })
+      }
+    ),
+    /* @__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: "Total Cost", color: "blue", name: "Total Cost" }],
+        height: 200,
+        yDomain: [0, (max) => Math.max(max * 1.1, 0.01)],
+        yTickFormatter: formatDollar,
+        tooltipFormatter: formatDollar,
+        baselineColor: "blue"
+      }
+    ) : /* @__PURE__ */ jsx(EmptyState, { icon: IconChartLine, title: "No cost data available for this time period" }),
+    /* @__PURE__ */ jsx(Space, { h: "lg" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", 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$1, { 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 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var EM_DASH = "\u2014";
+function getSuccessRateColor(rate) {
+  if (rate >= 95) return "var(--mantine-color-teal-6)";
+  if (rate >= 80) return "var(--mantine-color-yellow-6)";
+  return "var(--mantine-color-red-6)";
+}
+function getErrorCountColor(count) {
+  if (count === 0) return "var(--mantine-color-teal-6)";
+  if (count <= 5) return "var(--mantine-color-yellow-6)";
+  return "var(--mantine-color-red-6)";
+}
+function HeroStatsRow({
+  resourcesData,
+  resourcesLoading,
+  dashboardData,
+  dashboardLoading,
+  unresolvedErrorCount,
+  errorsLoading
+}) {
+  const health = dashboardData?.executionHealth;
+  const resourceCount = resourcesData?.total ?? null;
+  const totalExecutions = health?.totalExecutions ?? null;
+  const successRate = totalExecutions ? health?.successRate ?? null : null;
+  return /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 5 }, children: [
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconApps,
+        value: resourceCount ?? EM_DASH,
+        label: "Resources",
+        isLoading: resourcesLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconPlayerPlay,
+        value: totalExecutions ?? EM_DASH,
+        label: "Executions",
+        isLoading: dashboardLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconChartBar,
+        value: successRate != null ? `${Math.round(successRate)}%` : EM_DASH,
+        label: "Success Rate",
+        valueColor: successRate != null ? getSuccessRateColor(successRate) : void 0,
+        isLoading: dashboardLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconAlertTriangle,
+        value: unresolvedErrorCount ?? EM_DASH,
+        label: "Errors",
+        valueColor: unresolvedErrorCount != null ? getErrorCountColor(unresolvedErrorCount) : void 0,
+        isLoading: errorsLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconRocket,
+        value: dashboardData?.activeDeploymentVersion ?? EM_DASH,
+        label: "Deployment Version",
+        isLoading: dashboardLoading
+      }
+    )
+  ] });
+}
+function getGranularityFromTimeRange(timeRange) {
+  return ["1h", "24h"].includes(timeRange) ? "hour" : "day";
+}
+function formatPeakPeriod(peakPeriod, granularity) {
+  if (!peakPeriod) return "N/A";
+  const date = new Date(peakPeriod);
+  if (granularity === "hour") {
+    return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
+  } else {
+    return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+  }
+}
+function CombinedTrendChart({
+  healthData,
+  errorData: _errorData,
+  isLoading,
+  error,
+  timeRange,
+  navigationAction
+}) {
+  const [activeTab, setActiveTab] = useState("success");
+  const colors = useCyberColors();
+  const { startDate: start, endDate: end } = useMemo(() => getTimeRangeDates(timeRange), [timeRange]);
+  const granularity = getGranularityFromTimeRange(timeRange);
+  const { data: errorTrends } = useErrorTrends({
+    startDate: start,
+    endDate: end,
+    granularity
+  });
+  const xTickFormatter = useCallback((value) => formatBucketTime(value, granularity), [granularity]);
+  if (error) {
+    return /* @__PURE__ */ jsx(APIErrorAlert, { error, title: "Failed to load trend data" });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const errorTrendsMap = new Map(errorTrends?.map((trend) => [trend.time, trend.errorCount]) || []);
+  const successErrorData = healthData?.trendData.length ? healthData.trendData.map((d) => {
+    const errorCount = errorTrendsMap.get(d.time) || 0;
+    return {
+      time: d.time,
+      "Success Count": d.successCount,
+      "Error Count": errorCount
+    };
+  }) : [];
+  const throughputData = healthData?.trendData.length ? healthData.trendData.map((d) => ({
+    time: d.time,
+    Executions: d.executionCount
+  })) : [];
+  const totalExecutions = healthData?.totalExecutions ?? 0;
+  const peakPeriod = healthData?.peakPeriod ?? "";
+  const dataGranularity = healthData?.granularity ?? granularity;
+  if (!successErrorData.length) {
+    return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { h: 300, children: /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), color: "gray", variant: "light", children: "No trend data available for the selected time range" }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Execution Trends",
+        subtitle: `${getTimeRangeLabel(timeRange)} - ${dataGranularity === "hour" ? "Hourly" : "Daily"} data`,
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              value: activeTab ?? "success",
+              onChange: setActiveTab,
+              size: "xs",
+              data: [
+                { label: "Success & Errors", value: "success" },
+                { label: "Throughput", value: "throughput" }
+              ]
+            }
+          ),
+          navigationAction
+        ] })
+      }
+    ),
+    activeTab === "success" && /* @__PURE__ */ jsxs(Box, { style: { height: 280 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.green, label: "Success Count" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.red, label: "Error Count" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: successErrorData,
+          series: [
+            { dataKey: "Error Count", color: "red" },
+            { dataKey: "Success Count", color: "green", animationDuration: 1400 }
+          ],
+          height: 250,
+          yAxisLabel: "Count",
+          baselineColor: "green",
+          xTickFormatter
+        }
+      )
+    ] }),
+    activeTab === "throughput" && /* @__PURE__ */ jsxs(Box, { style: { height: 280 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { color: colors.blue, fontVariantNumeric: "tabular-nums" }, children: totalExecutions.toLocaleString() }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "executions" })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "|" }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "peak" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { color: colors.blue, fontVariantNumeric: "tabular-nums" }, children: formatPeakPeriod(peakPeriod, dataGranularity) })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "dot", color: "green", children: "Normal" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: throughputData,
+          series: [{ dataKey: "Executions", color: "blue" }],
+          height: 250,
+          xTickFormatter
+        }
+      )
+    ] })
+  ] });
+}
+
+export { APIErrorAlert, ActivityTrendChart, CardHeader, CollapsibleSection, CombinedTrendChart, ContextViewer, CostTrendChart, CustomSelector, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, DetailCardSkeleton, EmptyState, HeroStatsRow, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition, getSeriesColor, useCyberColors };