@elevasis/ui 2.20.0 → 2.22.0

package/dist/{chunk-7YQKVWSD.js → chunk-SQ5JGELM.js}

@@ -1,10 +1,16 @@
 import { useUserProfile } from './chunk-QHSW4WHM.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Button, Loader, Menu, Text, Badge } from '@mantine/core';
-import { IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
+import { Badge, Group, Button, Loader, Menu, Text } from '@mantine/core';
+import { IconLock, IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+function RoleBadge({ name, isSystem }) {
+  return /* @__PURE__ */ jsx(Badge, { color: isSystem ? "gray" : "primary", variant: "light", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+    isSystem && /* @__PURE__ */ jsx(IconLock, { size: 10 }),
+    name
+  ] }) });
+}
 function OrganizationSwitcher({
   currentOrganization,
   memberships,
@@ -64,7 +70,14 @@ function OrganizationSwitcher({
             Menu.Item,
             {
               leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-              rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+              rightSection: /* @__PURE__ */ jsx(
+                RoleBadge,
+                {
+                  slug: membership.role.slug,
+                  name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                  isSystem: true
+                }
+              ),
               onClick: () => {
                 const workosOrgId = membership.organization?.workos_org_id;
                 if (!workosOrgId) {
@@ -84,7 +97,14 @@ function OrganizationSwitcher({
               Menu.Item,
               {
                 leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-                rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+                rightSection: /* @__PURE__ */ jsx(
+                  RoleBadge,
+                  {
+                    slug: membership.role.slug,
+                    name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                    isSystem: true
+                  }
+                ),
                 onClick: () => {
                   const workosOrgId = membership.organization?.workos_org_id;
                   if (!workosOrgId) {
@@ -346,4 +366,4 @@ function createUseOrgInitialization(useOrganizations, useApiClient) {
   };
 }
 
-export { OrganizationSwitcher, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };
+export { OrganizationSwitcher, RoleBadge, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };

package/dist/{chunk-R7OJCNL3.js → chunk-T6INEVX6.js}

@@ -1,4 +1,4 @@
-import { APIClientError } from './chunk-OD7GWIZS.js';
+import { APIClientError } from './chunk-SGXXJE52.js';
 import { OrganizationContext } from './chunk-DD3CCMCZ.js';
 import { createContext, useContext, useMemo, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-RX4UWZZR.js → chunk-TKAYX2SP.js}

@@ -79,9 +79,11 @@ var SubshellSidebar = ({
           borderRight: "1px solid var(--color-border)",
           boxShadow: "var(--card-shadow)",
           clipPath: "inset(-100px -100px -100px 0)",
-          minHeight: `calc(100vh - ${topbarHeight}px)`,
+          height: `calc(100vh - ${topbarHeight}px)`,
+          minHeight: 0,
           marginTop: `${topbarHeight}px`,
-          fontFamily: "var(--elevasis-font-family-subtitle)"
+          fontFamily: "var(--elevasis-font-family-subtitle)",
+          overflow: "hidden"
         },
         children
       }
@@ -94,7 +96,8 @@ var SubshellSidebar = ({
         position: "relative",
         flexShrink: 0,
         marginTop: `${topbarHeight}px`,
-        minHeight: `calc(100vh - ${topbarHeight}px)`
+        height: `calc(100vh - ${topbarHeight}px)`,
+        minHeight: 0
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -123,6 +126,8 @@ var SubshellSidebar = ({
                 style: {
                   width: `${width}px`,
                   flexShrink: 0,
+                  height: "100%",
+                  minHeight: 0,
                   display: "flex",
                   flexDirection: "column",
                   opacity: isOpen ? 1 : 0,

package/dist/{chunk-CTTY6FUT.js → chunk-TSSKOQBX.js}

@@ -1,6 +1,6 @@
 import { useErrorTrends } from './chunk-QSTH6T77.js';
-import { CardHeader, CenteredErrorState, TrendIndicator, EmptyState, StatCard } from './chunk-BHR7IV72.js';
-import { getTimeRangeLabel, getTimeRangeDates, formatBucketTime } from './chunk-OD7GWIZS.js';
+import { CardHeader, CenteredErrorState, TrendIndicator, EmptyState, StatCard } from './chunk-XUYBOO32.js';
+import { getTimeRangeLabel, getTimeRangeDates, formatBucketTime } from './chunk-SGXXJE52.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';

package/dist/{chunk-GTYUP7MB.js → chunk-WWJ6S2HQ.js}

@@ -1,12 +1,12 @@
-import { CyberAreaChart, CostTrendChart, ActivityTrendChart } from './chunk-CTTY6FUT.js';
+import { CyberAreaChart, CostTrendChart, ActivityTrendChart } from './chunk-TSSKOQBX.js';
 import { AppShellLoader } from './chunk-M25JL54Z.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
 import { formatDuration } from './chunk-E4WQGJNS.js';
-import { useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useExecutionLogsFilters, useExecutionLogs, useExecutionHealth, useErrorAnalysis, useTimeRangeDates, useErrorDetail, useResolveErrorsByExecution, useResources, useCostTrends, useCostSummary, useCostByModel, useCostBreakdown, useActivityFilters, useActivityTrend, useActivities, useNotifications, useMarkAllAsRead, useTestNotification } from './chunk-FMFX4K6E.js';
-import { CenteredErrorState, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, EmptyState, PageTitleCaption, JsonViewer } from './chunk-BHR7IV72.js';
+import { useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useExecutionLogsFilters, useExecutionLogs, useExecutionHealth, useErrorAnalysis, useTimeRangeDates, useErrorDetail, useResolveErrorsByExecution, useResources, useCostTrends, useCostSummary, useCostByModel, useCostBreakdown, useActivityFilters, useActivityTrend, useActivities, useNotifications, useMarkAllAsRead, useTestNotification } from './chunk-B4FHWKEF.js';
+import { CenteredErrorState, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, EmptyState, PageTitleCaption, JsonViewer } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { formatBucketTime, PAGE_SIZE_DEFAULT, getTimeRangeDates } from './chunk-OD7GWIZS.js';
+import { formatBucketTime, PAGE_SIZE_DEFAULT, getTimeRangeDates } from './chunk-SGXXJE52.js';
 import { useState, useMemo, useCallback } from 'react';
 import { Table, Text, Badge, Tooltip, Card, Group, Select, SegmentedControl, Button, TextInput, Stack, Paper, Center, Loader, ActionIcon, NumberFormatter, Box, Alert, Switch, Pagination, UnstyledButton, Title, Divider, Code, CopyButton, Accordion } from '@mantine/core';
 import { IconActivity, IconFilterOff, IconCircleCheck, IconThumbDown, IconThumbUp, IconClock, IconCircleX, IconSearch, IconArrowUpRight, IconAlertTriangle, IconAlertCircle, IconExternalLink, IconChartPie, IconHeartbeat, IconDownload, IconCpu, IconTrendingUp, IconChartBar, IconCash, IconInfoCircle, IconExclamationCircle, IconBug, IconChecks, IconCircle, IconCircleFilled, IconCheck, IconCopy, IconCircleDashed, IconPlus, IconArrowUp, IconArrowDown, IconFileOff, IconRobot, IconKey, IconUser } from '@tabler/icons-react';
@@ -175,6 +175,7 @@ var activityTypeLabels = {
   webhook_executed: "Webhook Out",
   webhook_failed: "Webhook Fail",
   credential_change: "Credential",
+  credential_read: "Credential Read",
   api_key_change: "API Key",
   deployment_change: "Deployment",
   membership_change: "Membership"
@@ -243,6 +244,7 @@ var activityTypeOptions = [
   { value: "webhook_executed", label: "Webhook Executed" },
   { value: "webhook_failed", label: "Webhook Failed" },
   { value: "credential_change", label: "Credential Changes" },
+  { value: "credential_read", label: "Credential Reads" },
   { value: "api_key_change", label: "API Key Changes" },
   { value: "deployment_change", label: "Deployment Changes" },
   { value: "membership_change", label: "Membership Changes" }
@@ -323,6 +325,7 @@ function getNavigationPath(activity) {
     case "hitl_action":
       return "/command-queue";
     case "credential_change":
+    case "credential_read":
       return "/settings/credentials";
     case "api_key_change":
       return "/settings/api-keys";
@@ -1599,6 +1602,7 @@ function getNavigationPath2(activity) {
     case "hitl_action":
       return "/operations/command-queue";
     case "credential_change":
+    case "credential_read":
       return "/settings/credentials";
     case "api_key_change":
       return "/settings/api-keys";
@@ -1789,23 +1793,7 @@ function NotificationCenter({ pageSize = 20 }) {
 var monitoringManifest = {
   key: "monitoring",
   featureId: "monitoring",
-  navEntry: {
-    label: "Monitoring",
-    icon: IconActivity,
-    dataOnboardingTourId: "sidebar-monitoring",
-    links: [
-      { label: "Activity Log", link: "/monitoring/activity-log" },
-      { label: "Execution Logs", link: "/monitoring/execution-logs" },
-      { label: "Execution Health", link: "/monitoring/execution-health" },
-      { label: "Cost Analytics", link: "/monitoring/cost-analytics" },
-      { label: "Notifications", link: "/monitoring/notifications" },
-      {
-        label: "Submitted Requests",
-        link: "/monitoring/requests",
-        featureKey: "submitted-requests"
-      }
-    ]
-  }
+  icon: IconActivity
 };
 
 export { ActivityCard, ActivityFeed, ActivityFilters, ActivityLog, ActivityTable, BusinessImpactCard, CostAnalytics, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ErrorDetailsModal, ExecutionBreakdownTable, ExecutionHealth, ExecutionHealthCard, ExecutionLogsFilters, ExecutionLogsPage, ExecutionLogsTable, NotificationCenter, NotificationItem, NotificationList, monitoringManifest };

package/dist/{chunk-Q5HC6ENG.js → chunk-XOTJNW4Q.js}

@@ -129,7 +129,7 @@ var tacticalPreset = {
     Fragment,
     null,
     createElement(AppBackground, {
-      gridGlowColor: "color-mix(in srgb, #5A6070 30%, transparent)",
+      gridGlowColor: "color-mix(in srgb, #5A5A5A 30%, transparent)",
       gridGlowIntensity: 50
     }),
     createElement(AmbientBloomGrid, { intensity: 0.07, color: "#5A6070", size: 1.2 })

package/dist/{chunk-BHR7IV72.js → chunk-XUYBOO32.js}

@@ -1,6 +1,6 @@
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { getErrorInfo, getErrorTitle, getResourceIcon, formatTimeAgo } from './chunk-OD7GWIZS.js';
+import { getErrorInfo, getErrorTitle, getResourceIcon, formatTimeAgo } from './chunk-SGXXJE52.js';
 import { ResourceStatusColors } from './chunk-KRWALB24.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { Center, Stack, Title, Text, Button, Box, Loader, Badge, Group, Collapse, ScrollArea, Card, Select, Alert, Code, ThemeIcon, Paper, Grid, Timeline, Space } from '@mantine/core';

package/dist/{chunk-M7W7CGPL.js → chunk-Z6FAH4XV.js}

@@ -1,4 +1,4 @@
-import { getErrorInfo, formatErrorMessage, getErrorTitle } from './chunk-OD7GWIZS.js';
+import { getErrorInfo, formatErrorMessage, getErrorTitle } from './chunk-SGXXJE52.js';
 import { useElevasisServices } from './chunk-IRW7JMQ4.js';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import { notifications } from '@mantine/notifications';

package/dist/{chunk-Q4QJOSVS.js → chunk-ZBCTB5CA.js}

@@ -1,4 +1,4 @@
-import { ElevasisFeaturesProvider } from './chunk-LR5CRY5A.js';
+import { ElevasisFeaturesProvider } from './chunk-LJWV4TWV.js';
 import { jsx } from 'react/jsx-runtime';
 
 function createTestFeaturesProvider({

package/dist/components/index.css

@@ -125,83 +125,14 @@
   }
 }
 
-/* src/theme/custom.css */
-.mantine-Button-root[data-variant=default] {
-  background-color: var(--color-surface);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-}
-.mantine-Button-root[data-variant=default]:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Accordion-control:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Menu-item:hover:not([data-disabled]) {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Select-option:hover {
-  background-color: var(--color-surface-hover) !important;
-}
-[data-mantine-color-scheme=dark] .mantine-Tabs-root {
-  --tab-border-color: var(--color-border);
-}
-.mantine-Tabs-tab:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Pagination-control:not([data-active]) {
-  background: var(--color-surface);
-}
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-subtle);
-}
-.mantine-Checkbox-input {
-  background-color: var(--color-surface);
-  border-color: var(--color-border);
-}
-.mantine-Checkbox-input:checked {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
-  background-color: var(--color-surface-hover);
-  border-color: var(--color-border);
-}
-.mantine-Timeline-root {
-  --tl-color: var(--color-primary);
-}
-.mantine-Timeline-item {
-  --item-border-color: var(--color-border);
-}
-.mantine-Timeline-itemBullet {
-  border-color: var(--color-border);
-}
-.mantine-Timeline-itemBullet:where([data-with-child]) {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-.recharts-surface:focus {
-  outline: none;
-}
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+/* src/graph/Graph.globals.css */
+.elevasis-graph-root .react-flow__node.selected,
+.elevasis-graph-root .react-flow__node:focus,
+.elevasis-graph-root .react-flow__node:focus-visible {
+  outline: none !important;
 }
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
+.elevasis-graph-root .react-flow__node.selected > * {
+  box-shadow: none;
 }
 
 /* src/graph/Graph.module.css */
@@ -309,7 +240,7 @@
       transparent 1px),
     radial-gradient(
       ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
+      color-mix(in srgb, var(--color-primary) 1.25%, transparent) 0%,
       transparent 70%);
   background-color: color-mix(in srgb, var(--color-background) 50%, var(--glass-background));
   backdrop-filter: var(--glass-blur);
@@ -328,7 +259,7 @@
       transparent 1px),
     radial-gradient(
       ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 9%, transparent) 0%,
+      color-mix(in srgb, var(--color-primary) 2.25%, transparent) 0%,
       transparent 70%);
   background-size:
     40px 40px,
@@ -578,12 +509,81 @@
   }
 }
 
-/* src/graph/Graph.globals.css */
-.elevasis-graph-root .react-flow__node.selected,
-.elevasis-graph-root .react-flow__node:focus,
-.elevasis-graph-root .react-flow__node:focus-visible {
-  outline: none !important;
+/* src/theme/custom.css */
+.mantine-Button-root[data-variant=default] {
+  background-color: var(--color-surface);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
 }
-.elevasis-graph-root .react-flow__node.selected > * {
-  box-shadow: none;
+.mantine-Button-root[data-variant=default]:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Accordion-control:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Menu-item:hover:not([data-disabled]) {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Select-option:hover {
+  background-color: var(--color-surface-hover) !important;
+}
+[data-mantine-color-scheme=dark] .mantine-Tabs-root {
+  --tab-border-color: var(--color-border);
+}
+.mantine-Tabs-tab:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Pagination-control:not([data-active]) {
+  background: var(--color-surface);
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-subtle);
+}
+.mantine-Checkbox-input {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
+}
+.mantine-Checkbox-input:checked {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border);
+}
+.mantine-Timeline-root {
+  --tl-color: var(--color-primary);
+}
+.mantine-Timeline-item {
+  --item-border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet {
+  border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet:where([data-with-child]) {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.recharts-surface:focus {
+  outline: none;
+}
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }