@elevasis/ui 2.34.0 → 2.35.0

package/dist/chunk-LAWLB6CT.js

@@ -1,951 +0,0 @@
-import { useErrorTrends } from './chunk-VNAZTCHA.js';
-import { CardHeader, CenteredErrorState, TrendIndicator, EmptyState, StatCard } from './chunk-HRWLKKWM.js';
-import { getTimeRangeLabel, getTimeRangeDates, formatBucketTime } from './chunk-2RJMVWFJ.js';
-import { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComputedColorScheme, Group, Text, Box, Stack, Center, Loader, Paper, Button, NumberFormatter, Badge, Space, Tooltip as Tooltip$1, SimpleGrid, Alert, SegmentedControl } from '@mantine/core';
-import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine as ReferenceLine$1, Area, PieChart, Pie, Cell } from 'recharts';
-import { IconActivity, IconDownload, IconChartLine, IconInfoCircle, IconApps, IconPlayerPlay, IconChartBar, IconAlertTriangle, IconRocket, IconAlertCircle } from '@tabler/icons-react';
-
-function ChartFrame({ h, debounceMs = 150, children }) {
-  const ref = useRef(null);
-  const [width, setWidth] = useState(0);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const w = el.getBoundingClientRect().width;
-    if (w > 0) setWidth(w);
-  }, []);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    let timeout;
-    const ro = new ResizeObserver((entries) => {
-      if (timeout !== void 0) window.clearTimeout(timeout);
-      const nextWidth = entries[0]?.contentRect.width ?? 0;
-      timeout = window.setTimeout(() => {
-        if (nextWidth > 0) setWidth(nextWidth);
-      }, debounceMs);
-    });
-    ro.observe(el);
-    return () => {
-      ro.disconnect();
-      if (timeout !== void 0) window.clearTimeout(timeout);
-    };
-  }, [debounceMs]);
-  return /* @__PURE__ */ jsx("div", { ref, style: { width: "100%", height: h, position: "relative" }, children: width > 0 && /* @__PURE__ */ jsx("div", { style: { width, height: h }, children }) });
-}
-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, isLight }) {
-  const gradMul = isLight ? 0.5 : 1;
-  const gradients = [
-    { id: "gradCyan", color: colors.cyan, opacity: 0.35 * gradMul },
-    { id: "gradBlue", color: colors.blue, opacity: 0.3 * gradMul },
-    { id: "gradGreen", color: colors.green, opacity: 0.3 * gradMul },
-    { id: "gradRed", color: colors.red, opacity: 0.3 * gradMul },
-    { id: "gradYellow", color: colors.yellow, opacity: 0.3 * gradMul }
-  ];
-  const glowMul = isLight ? 0.25 : 1;
-  const filters = [
-    { id: "glowCyan", std: 3 * glowMul },
-    { id: "glowBlue", std: 3 * glowMul },
-    { id: "glowGreen", std: 2.5 * glowMul },
-    { id: "glowRed", std: 2.5 * glowMul },
-    { id: "glowYellow", std: 2.5 * glowMul }
-  ];
-  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", style: { color: "var(--color-text-subtle)", 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, isLight }),
-    /* @__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)],
-        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"];
-      const glow = isLight ? `drop-shadow(0 0 2px ${bColor})` : `drop-shadow(0 0 4px ${bColor}) drop-shadow(0 0 8px ${bColor})`;
-      return /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: bColor, strokeWidth: isLight ? 1.5 : 2, style: { filter: glow } });
-    })(),
-    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
-      );
-    }),
-    !isLight && 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,
-        style: { color: "var(--color-text)", 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)) })
-  ] });
-}
-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 flooredNow = new Date(now.getTime() - now.getTime() % bucketSize);
-  const buckets = /* @__PURE__ */ new Map();
-  for (let i = bucketCount - 1; i >= 0; i--) {
-    const bucketTime = new Date(flooredNow.getTime() - i * bucketSize);
-    const label = formatBucketTime(bucketTime.toISOString(), granularity);
-    buckets.set(label, 0);
-  }
-  timestamps.forEach((occurredAt) => {
-    const timeDiff = flooredNow.getTime() - occurredAt.getTime();
-    const bucketIndex = Math.floor(timeDiff / bucketSize);
-    if (bucketIndex >= 0 && bucketIndex < bucketCount) {
-      const bucketTime = new Date(flooredNow.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(Paper, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        icon: /* @__PURE__ */ jsx(IconActivity, { size: 18 }),
-        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(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load cost trends" }) });
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
-  }
-  const granularityLabel = data?.granularity === "hour" ? "Hourly" : "Daily";
-  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        icon: /* @__PURE__ */ jsx(IconChartLine, { size: 18 }),
-        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: errorsLoading ? EM_DASH : unresolvedErrorCount ?? EM_DASH,
-        label: "Errors",
-        valueColor: unresolvedErrorCount != null ? getErrorCountColor(unresolvedErrorCount) : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      StatCard,
-      {
-        variant: "hero",
-        icon: IconRocket,
-        value: dashboardData?.activeDeploymentVersion ?? EM_DASH,
-        label: "Deployment",
-        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,
-  compact = false
-}) {
-  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(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load trend data" }) });
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Paper, { 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(Paper, { 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(Paper, { withBorder: true, children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        icon: /* @__PURE__ */ jsx(IconChartLine, { size: 18 }),
-        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: compact ? 180 : 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: compact ? 150 : 250,
-          yAxisLabel: "Count",
-          baselineColor: "green",
-          xTickFormatter
-        }
-      )
-    ] }),
-    activeTab === "throughput" && /* @__PURE__ */ jsxs(Box, { style: { height: compact ? 180 : 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: compact ? 150 : 250,
-          xTickFormatter
-        }
-      )
-    ] })
-  ] });
-}
-
-export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors };