@elevasis/ui 1.19.0 → 1.20.1

package/dist/api/index.js

@@ -1,4 +1,4 @@
 import '../chunk-XCYKC6OZ.js';
-export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-JNBHUCKW.js';
-import '../chunk-MBZDE6UT.js';
+export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-NVOCKXUQ.js';
+import '../chunk-IOKL7BKE.js';
 import '../chunk-DD3CCMCZ.js';

package/dist/auth/index.js

@@ -1,6 +1,6 @@
-export { AdminGuard, ProtectedRoute, useSessionCheck as useRefocusSessionCheck, useSessionCheck } from '../chunk-CC3SDRIF.js';
+export { AdminGuard, ProtectedRoute, useSessionCheck as useRefocusSessionCheck, useSessionCheck } from '../chunk-RWQIFKMJ.js';
 export { useStableAccessToken } from '../chunk-ALA56RGZ.js';
-import '../chunk-DVKEEY5J.js';
-import '../chunk-QEPXAWE2.js';
+import '../chunk-TUXTSEAF.js';
 import '../chunk-DD3CCMCZ.js';
+import '../chunk-QEPXAWE2.js';
 export { AuthProvider, useAuthContext } from '../chunk-BRJ3QZ4E.js';

package/dist/charts/index.css

@@ -91,6 +91,9 @@
   animation: chevronPulse 2s ease-in-out infinite;
   filter: drop-shadow(0 0 1.5px var(--loader-color));
 }
+[data-mantine-color-scheme=light] .chevron {
+  filter: none;
+}
 .c1 {
   animation-delay: 0s;
 }
@@ -110,3 +113,14 @@
     filter: drop-shadow(0 0 3px var(--loader-color));
   }
 }
+[data-mantine-color-scheme=light] .chevron {
+  animation-name: chevronPulseLight;
+}
+@keyframes chevronPulseLight {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  40%, 60% {
+    opacity: 1;
+  }
+}

package/dist/charts/index.js

@@ -1,14 +1,16 @@
-export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-LBY7FVFD.js';
-import '../chunk-KBLGVZBD.js';
+export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-ERVB3QJQ.js';
+import '../chunk-AWMZCYKH.js';
+import '../chunk-NNKKBSJN.js';
+import '../chunk-QJ2S46NI.js';
 import '../chunk-LXHZYSMQ.js';
 import '../chunk-MHW43EOH.js';
 import '../chunk-ELJIFLCB.js';
 import '../chunk-SZHARWKU.js';
-import '../chunk-MBZDE6UT.js';
-import '../chunk-CC3SDRIF.js';
+import '../chunk-IOKL7BKE.js';
+import '../chunk-RWQIFKMJ.js';
 import '../chunk-ALA56RGZ.js';
-import '../chunk-DVKEEY5J.js';
-import '../chunk-QEPXAWE2.js';
+import '../chunk-TUXTSEAF.js';
 import '../chunk-DD3CCMCZ.js';
+import '../chunk-QEPXAWE2.js';
 import '../chunk-BRJ3QZ4E.js';
 import '../chunk-Q7DJKLEN.js';

package/dist/{chunk-7ATCF6UL.js → chunk-3DIU726S.js}

@@ -2,12 +2,18 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useComputedColorScheme } from '@mantine/core';
 
 // src/components/layout/backgrounds/PerspectiveGrid.tsx
+var SUBTLE_DEFAULT_GLOW = "color-mix(in srgb, color-mix(in srgb, var(--color-primary) 20%, var(--color-border)) 30%, transparent)";
+var PROMINENT_DEFAULT_GLOW = "color-mix(in srgb, var(--color-primary) 22%, transparent)";
 function PerspectiveGrid({
-  glowColor = "color-mix(in srgb, color-mix(in srgb, var(--color-primary) 20%, var(--color-border)) 30%, transparent)",
+  glowColor: glowColorProp,
   lineColor: lineColorProp,
+  prominentGlow = false,
   className
 }) {
   const lineColor = lineColorProp ?? "color-mix(in srgb, var(--color-border) 50%, transparent)";
+  const glowColor = glowColorProp ?? (prominentGlow ? PROMINENT_DEFAULT_GLOW : SUBTLE_DEFAULT_GLOW);
+  const glowHeight = prominentGlow ? "70%" : "60%";
+  const glowGradient = prominentGlow ? `radial-gradient(ellipse 100% 80% at 50% 110%, ${glowColor} -10%, transparent 50%)` : `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -29,8 +35,8 @@ function PerspectiveGrid({
               left: "50%",
               transform: "translateX(-50%)",
               width: "100%",
-              height: "60%",
-              background: `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`,
+              height: glowHeight,
+              background: glowGradient,
               pointerEvents: "none"
             }
           }
@@ -477,8 +483,9 @@ function CyberParticles({ variant: _variant, className }) {
   );
 }
 function CyberBackground({ variant }) {
+  const glowColor = variant === "volt" ? "color-mix(in srgb, var(--color-primary) 12%, transparent)" : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PerspectiveGrid, { lineColor: "var(--color-border)" }),
+    /* @__PURE__ */ jsx(PerspectiveGrid, { lineColor: "var(--color-border)", prominentGlow: true, glowColor }),
     /* @__PURE__ */ jsx(RadiantGlow, {}),
     /* @__PURE__ */ jsx(FloatingOrbs, {}),
     /* @__PURE__ */ jsx(CyberParticles, { variant }),

package/dist/chunk-4SY4EQSK.js

@@ -0,0 +1,68 @@
+import { useCyberColors, CyberLegendItem, CyberAreaChart } from './chunk-ERVB3QJQ.js';
+import { CardHeader, EmptyState } from './chunk-AWMZCYKH.js';
+import { useResourcesHealth } from './chunk-AQ5MQDSS.js';
+import { getTimeRangeDates, formatBucketTime } from './chunk-LXHZYSMQ.js';
+import { Paper, Center, Loader, Group } from '@mantine/core';
+import { IconActivity, IconChartBar } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ResourceHealthPanel({ resourceId, resourceType, timeRange }) {
+  const colors = useCyberColors();
+  const { startDate, endDate } = useMemo(() => getTimeRangeDates(timeRange), [timeRange]);
+  const granularity = ["1h", "24h"].includes(timeRange) ? "hour" : "day";
+  const { data, isLoading } = useResourcesHealth({
+    resources: [{ entityType: resourceType, entityId: resourceId }],
+    startDate,
+    endDate,
+    granularity
+  });
+  const resourceHealth = data?.resources?.[0];
+  const chartData = useMemo(() => {
+    if (!resourceHealth?.trendData) return [];
+    return resourceHealth.trendData.map((point) => ({
+      time: point.time,
+      Success: (point.success || 0) - (point.warning || 0),
+      Warning: point.warning || 0,
+      Failed: point.failure || 0
+    }));
+  }, [resourceHealth?.trendData]);
+  const xTickFormatter = useMemo(() => (value) => formatBucketTime(value, granularity), [granularity]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const summary = resourceHealth?.summary;
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconActivity, { size: 18 }),
+        title: "Execution Health",
+        subtitle: `${summary?.total || 0} executions, ${summary?.successRate?.toFixed(1) || 0}% success rate`
+      }
+    ),
+    chartData.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: IconChartBar, title: "No execution data for this time range" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.green, label: "Success" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.yellow, label: "Warning" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.red, label: "Failed" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: chartData,
+          series: [
+            { dataKey: "Success", color: "green", name: "Success" },
+            { dataKey: "Warning", color: "yellow", name: "Warning" },
+            { dataKey: "Failed", color: "red", name: "Failed" }
+          ],
+          height: 200,
+          yDomain: [0, "auto"],
+          xTickFormatter
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ResourceHealthPanel };

package/dist/{chunk-2Z7LYTIX.js → chunk-AQ5MQDSS.js}

@@ -1,12 +1,12 @@
-import { getTimeRangeDates, observabilityKeys } from './chunk-LXHZYSMQ.js';
 import { useSupabase } from './chunk-NJJ3NQ7B.js';
+import { getTimeRangeDates, observabilityKeys } from './chunk-LXHZYSMQ.js';
 import { GRAPH_CONSTANTS } from './chunk-F6RBK7NJ.js';
-import { useNotificationAdapter } from './chunk-UANJP5P7.js';
-import { HTTP_HEADERS } from './chunk-JNBHUCKW.js';
-import { STALE_TIME_MONITORING, REFETCH_INTERVAL_DASHBOARD, REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, STALE_TIME_DEFAULT, STALE_TIME_ADMIN } from './chunk-MBZDE6UT.js';
+import { useNotificationAdapter } from './chunk-R7WLWGPO.js';
+import { HTTP_HEADERS } from './chunk-NVOCKXUQ.js';
+import { STALE_TIME_MONITORING, REFETCH_INTERVAL_DASHBOARD, REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, STALE_TIME_DEFAULT, STALE_TIME_ADMIN } from './chunk-IOKL7BKE.js';
 import { useStableAccessToken } from './chunk-ALA56RGZ.js';
-import { useElevasisServices } from './chunk-QEPXAWE2.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
+import { useElevasisServices } from './chunk-QEPXAWE2.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useQuery, useQueryClient, useMutation, useQueries } from '@tanstack/react-query';
 import { z } from 'zod';
@@ -891,6 +891,31 @@ function useExecutionHealth({ timeRange }) {
     // 30s monitoring stale time
   });
 }
+function useNotificationCount(args) {
+  const { notificationCount, notificationConnected, notificationError } = args;
+  const { apiRequest, isReady, organizationId } = useElevasisServices();
+  const query = useQuery({
+    queryKey: ["notifications", "unread-count", organizationId],
+    queryFn: async () => {
+      const response = await apiRequest("/notifications/unread-count");
+      return response.count;
+    },
+    enabled: isReady,
+    staleTime: Infinity
+    // SSE will keep it updated
+  });
+  return {
+    data: notificationCount !== null && notificationCount !== void 0 ? notificationCount : query.data,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: query.error,
+    isSuccess: query.isSuccess,
+    status: query.status,
+    refetch: query.refetch,
+    sseConnected: notificationConnected,
+    sseError: notificationError
+  };
+}
 function useMarkAsRead() {
   const queryClient = useQueryClient();
   const { apiRequest } = useElevasisServices();
@@ -928,18 +953,6 @@ function useMarkAllAsRead() {
     }
   });
 }
-function useNotificationCount() {
-  const { apiRequest, isReady, organizationId } = useElevasisServices();
-  return useQuery({
-    queryKey: ["notifications", "unread-count", organizationId],
-    queryFn: async () => {
-      const response = await apiRequest("/notifications/unread-count");
-      return response.count;
-    },
-    enabled: isReady,
-    staleTime: 3e4
-  });
-}
 function useErrorNotification() {
   const adapter = useNotificationAdapter();
   return useCallback(