@elevasis/ui 1.21.0 → 1.23.0

package/dist/charts/index.js

@@ -1,5 +1,5 @@
-export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-FVBYSDM4.js';
-import '../chunk-BC6TJEON.js';
+export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-N5SDJP44.js';
+import '../chunk-IAZT3VO6.js';
 import '../chunk-3KMDHCAR.js';
 import '../chunk-NNKKBSJN.js';
 import '../chunk-QJ2S46NI.js';

package/dist/{chunk-CYJILY7M.js → chunk-5266RV46.js}

@@ -1,5 +1,5 @@
-import { useCyberColors, CyberLegendItem, CyberAreaChart } from './chunk-FVBYSDM4.js';
-import { CardHeader, EmptyState } from './chunk-BC6TJEON.js';
+import { useCyberColors, CyberLegendItem, CyberAreaChart } from './chunk-N5SDJP44.js';
+import { CardHeader, EmptyState } from './chunk-IAZT3VO6.js';
 import { useResourcesHealth } from './chunk-EDAYKRPJ.js';
 import { getTimeRangeDates, formatBucketTime } from './chunk-LXHZYSMQ.js';
 import { Paper, Center, Loader, Group } from '@mantine/core';

package/dist/{chunk-V422ET6W.js → chunk-7TLPKXC2.js}

@@ -1,6 +1,6 @@
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CyberAreaChart } from './chunk-FVBYSDM4.js';
-import { APIErrorAlert, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, EmptyState } from './chunk-BC6TJEON.js';
+import { CyberAreaChart } from './chunk-N5SDJP44.js';
+import { APIErrorAlert, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, EmptyState } from './chunk-IAZT3VO6.js';
 import { useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead } from './chunk-EDAYKRPJ.js';
 import { formatBucketTime } from './chunk-LXHZYSMQ.js';
 import { formatDuration } from './chunk-XA34RETF.js';

package/dist/{chunk-UZWZY7TJ.js → chunk-HOYZWSNV.js}

@@ -1,6 +1,6 @@
 import { FilterBar } from './chunk-PDHTXPSF.js';
 import { CustomModal } from './chunk-GBMNCNHX.js';
-import { ListSkeleton, EmptyState, PageTitleCaption, CardHeader, APIErrorAlert } from './chunk-BC6TJEON.js';
+import { ListSkeleton, EmptyState, PageTitleCaption, CardHeader, APIErrorAlert } from './chunk-IAZT3VO6.js';
 import { AppShellLoader } from './chunk-WWEMNIHW.js';
 import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, CredentialSchemas } from './chunk-FATKFO7X.js';
 import { formatDateTime } from './chunk-IOKL7BKE.js';
@@ -535,85 +535,96 @@ function OrganizationMembershipsList({
         subtitle: loading ? "Loading memberships..." : `Showing ${filteredRows.length} ${filteredRows.length === 1 ? "membership" : "memberships"}`
       }
     ),
-    /* @__PURE__ */ jsxs(FilterBar, { children: [
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          placeholder: "Search organizations or roles...",
-          leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
-          value: searchTerm,
-          onChange: (event) => setSearchTerm(event.currentTarget.value),
-          style: { flex: 1 },
-          disabled: loading
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          placeholder: "Filter by status",
-          value: statusFilter,
-          onChange: (value) => setStatusFilter(value),
-          data: [
-            { value: "", label: "All Statuses" },
-            { value: "active", label: "Active" },
-            { value: "inactive", label: "Inactive" }
-          ],
-          style: { minWidth: 150 },
-          clearable: true,
-          disabled: loading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 700, children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-        /* @__PURE__ */ jsx(Table.Th, { children: "Organization" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Role" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
-        /* @__PURE__ */ jsx(Table.Th, { children: "Joined" }),
-        /* @__PURE__ */ jsx(Table.Th, { align: "right", children: "Actions" })
-      ] }) }),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: loading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) }) }) : filteredRows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(
-        EmptyState,
-        {
-          icon: IconBuilding,
-          title: "No memberships found",
-          description: searchTerm || statusFilter ? "Try adjusting your search or filter criteria" : "You are not a member of any organizations yet"
-        }
-      ) }) }) : filteredRows.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(IconBuilding, { size: 16 }),
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: row.organizationName }) })
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(FilterBar, { children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: "Search organizations or roles...",
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+            value: searchTerm,
+            onChange: (event) => setSearchTerm(event.currentTarget.value),
+            style: { flex: 1 },
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            placeholder: "Filter by status",
+            value: statusFilter,
+            onChange: (value) => setStatusFilter(value),
+            data: [
+              { value: "", label: "All Statuses" },
+              { value: "active", label: "Active" },
+              { value: "inactive", label: "Inactive" }
+            ],
+            style: { minWidth: 150 },
+            clearable: true,
+            disabled: loading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 700, children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Th, { children: "Organization" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Role" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Joined" }),
+          /* @__PURE__ */ jsx(Table.Th, { align: "right", children: "Actions" })
         ] }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: "blue", size: "sm", children: row.role }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: row.status }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: row.joinedAt.toLocaleDateString() }) }),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          row.canEdit && onEditRole && /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "subtle",
-              size: "sm",
-              color: "blue",
-              onClick: () => onEditRole(row.id),
-              disabled: row.status !== "active",
-              children: /* @__PURE__ */ jsx(IconEdit, { size: 16 })
-            }
-          ),
-          row.canRemove && onLeaveOrganization && row.status === "active" && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", color: "red", onClick: () => onLeaveOrganization(row.id), children: /* @__PURE__ */ jsx(IconUserX, { size: 16 }) }),
-          row.status === "inactive" && /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "subtle",
-              size: "sm",
-              color: "green",
-              disabled: true,
-              title: "Contact admin to reactivate",
-              children: /* @__PURE__ */ jsx(IconUserCheck, { size: 16 })
-            }
-          )
-        ] }) })
-      ] }, row.id)) })
-    ] }) })
+        /* @__PURE__ */ jsx(Table.Tbody, { children: loading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) }) }) : filteredRows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 5, children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: IconBuilding,
+            title: "No memberships found",
+            description: searchTerm || statusFilter ? "Try adjusting your search or filter criteria" : "You are not a member of any organizations yet"
+          }
+        ) }) }) : filteredRows.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(IconBuilding, { size: 16 }),
+            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: row.organizationName }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", color: "blue", size: "sm", children: row.role }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(MembershipStatusBadge, { status: row.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: row.joinedAt.toLocaleDateString() }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            row.canEdit && onEditRole && /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                color: "blue",
+                onClick: () => onEditRole(row.id),
+                disabled: row.status !== "active",
+                children: /* @__PURE__ */ jsx(IconEdit, { size: 16 })
+              }
+            ),
+            row.canRemove && onLeaveOrganization && row.status === "active" && /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                color: "red",
+                onClick: () => onLeaveOrganization(row.id),
+                children: /* @__PURE__ */ jsx(IconUserX, { size: 16 })
+              }
+            ),
+            row.status === "inactive" && /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                color: "green",
+                disabled: true,
+                title: "Contact admin to reactivate",
+                children: /* @__PURE__ */ jsx(IconUserCheck, { size: 16 })
+              }
+            )
+          ] }) })
+        ] }, row.id)) })
+      ] }) })
+    ] })
   ] });
 }
 function WebhookUrlDisplayModal({ opened, endpoint, webhookUrl, onClose }) {

package/dist/{chunk-BC6TJEON.js → chunk-IAZT3VO6.js}

@@ -1,11 +1,11 @@
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { ResourceStatusColors } from './chunk-ELJIFLCB.js';
-import { getErrorInfo, getErrorTitle, getResourceIcon } from './chunk-IOKL7BKE.js';
+import { getErrorInfo, getErrorTitle, getResourceIcon, formatTimeAgo } from './chunk-IOKL7BKE.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { Center, Stack, Title, Text, Button, Box, Loader, Badge, Group, Collapse, ScrollArea, Card, Skeleton, Select, Alert, Code, ThemeIcon, Paper, Space } from '@mantine/core';
+import { Center, Stack, Title, Text, Button, Box, Loader, Badge, Group, Collapse, ScrollArea, Card, Select, Alert, Code, ThemeIcon, Paper, Grid, Timeline, Space } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconClock, IconInfoCircle, IconChevronRight } from '@tabler/icons-react';
+import { IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconClock, IconInfoCircle, IconChevronRight, IconInbox, IconHeartHandshake, IconUserOff, IconMailForward, IconBell, IconCalendarEvent, IconCalendarCancel, IconMessageReply, IconCircleCheck, IconCreditCard, IconX, IconEye, IconSend, IconFileText, IconArrowRight, IconPlus, IconActivity } from '@tabler/icons-react';
 import { useState } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -107,30 +107,14 @@ var PageTitleCaption = ({ title, caption, rightSection }) => {
     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 StatsCardSkeleton({ chartHeight = 200 }) {
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { mih: chartHeight, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) }) });
 }
 function ListSkeleton({ rows = 3, rowHeight = 50 }) {
-  return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: rowHeight }, i)) });
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Center, { mih: rows * rowHeight, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) }) });
 }
 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)) })
-  ] });
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { mih: rows * 60 + 100, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) }) });
 }
 function CustomSelector({
   value,
@@ -239,13 +223,7 @@ function HeroStatCard({
   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__ */ jsx(Center, { mih: iconSize + 16, children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) });
   }
   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 }) }),
@@ -266,7 +244,7 @@ function HeroStatCard({
   ] }) });
 }
 function StatCardSkeleton() {
-  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) });
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { mih: 60, children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) });
 }
 var jsonTheme = Object.fromEntries(
   Object.entries(oneDark).map(([key, value]) => [
@@ -449,13 +427,14 @@ function ResourceCard({
   onClick,
   layout = "stack",
   rightSection,
+  topSection,
   lastRunLabel,
   style,
   ...rest
 }) {
   const Icon = getResourceIcon(resource.type);
   if (!Icon) {
-    return /* @__PURE__ */ jsx(Paper, { shadow: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+    return /* @__PURE__ */ jsx(Card, { shadow: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Text, { children: [
       "Invalid resource type: ",
       resource.type
     ] }) });
@@ -494,13 +473,55 @@ function ResourceCard({
       /* @__PURE__ */ jsx(Text, { size: layout === "grid" ? "sm" : "xs", c: "dimmed", ff: "monospace", children: resource.resourceId })
     ] })
   ] });
-  if (layout === "row") {
+  if (layout === "card") {
     return /* @__PURE__ */ jsx(
-      Paper,
+      Card,
       {
         withBorder: true,
-        style: { cursor: "pointer", ...style },
+        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(--color-surface)",
+          ...style
+        },
         onClick: () => onClick(resource),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
         "data-resource-id": rest["data-resource-id"],
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -524,15 +545,40 @@ function ResourceCard({
               /* @__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: 0.3 } })
+              /* @__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(
-    Paper,
+    Card,
     {
       shadow: "sm",
       withBorder: true,
@@ -592,5 +638,78 @@ function GlowDot({ color, size = "md" }) {
     }
   );
 }
+var STATUS_COLORS = {
+  // Project
+  active: "blue",
+  on_track: "green",
+  at_risk: "yellow",
+  blocked: "red",
+  completed: "teal",
+  paused: "gray",
+  // Milestone
+  upcoming: "gray",
+  in_progress: "blue",
+  overdue: "red",
+  // Task
+  pending: "gray",
+  planned: "gray",
+  submitted: "yellow",
+  approved: "green",
+  rejected: "red",
+  revision_requested: "orange",
+  cancelled: "gray",
+  // Note
+  call_note: "blue",
+  status_update: "green",
+  issue: "yellow",
+  blocker: "red"
+};
+function StatusBadge({ status, ...props }) {
+  const label = status.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  return /* @__PURE__ */ jsx(Badge, { variant: "light", color: STATUS_COLORS[status] || "gray", size: "sm", ...props, children: label });
+}
+var ICON_MAP = {
+  deal_created: IconPlus,
+  stage_change: IconArrowRight,
+  discovery_submitted: IconFileText,
+  proposal_generated: IconFileText,
+  proposal_sent: IconSend,
+  proposal_reviewed: IconEye,
+  closed_lost: IconX,
+  fees_updated: IconCreditCard,
+  closed_won: IconCircleCheck,
+  reply_received: IconMessageReply,
+  booking_cancelled: IconCalendarCancel,
+  booking_rescheduled: IconCalendarEvent,
+  reminder_sent: IconBell,
+  reply_sent_to_lead: IconMailForward,
+  followup_email_sent: IconMailForward,
+  no_show: IconUserOff,
+  moved_to_nurturing: IconHeartHandshake
+};
+function ActivityTimeline({ activities }) {
+  if (!activities.length) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: IconInbox, title: "No activity events yet" });
+  }
+  const sorted = [...activities].reverse();
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Timeline, { active: sorted.length - 1, bulletSize: 28, lineWidth: 2, color: "var(--color-primary)", children: sorted.map((activity, index) => {
+    const Icon = ICON_MAP[activity.type] || IconActivity;
+    return /* @__PURE__ */ jsx(
+      Timeline.Item,
+      {
+        bullet: /* @__PURE__ */ jsx(ThemeIcon, { size: 28, variant: "filled", color: "var(--color-primary)", radius: "xl", children: /* @__PURE__ */ jsx(Icon, { size: 14 }) }),
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: activity.title }),
+          activity.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: activity.description }),
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            formatTimeAgo(activity.occurredAt),
+            activity.actor && ` by ${activity.actor}`
+          ] })
+        ] })
+      },
+      index
+    );
+  }) }) });
+}
 
-export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition };
+export { APIErrorAlert, ActivityTimeline, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StatusBadge, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition };

package/dist/{chunk-2WLVOFK7.js → chunk-MRBYKPRI.js}

@@ -1,4 +1,4 @@
-import { usePresetsContext } from './chunk-MOBXWBES.js';
+import { usePresetsContext } from './chunk-QGQECEOT.js';
 import { useMemo } from 'react';
 
 var BUILT_IN_NAMES = /* @__PURE__ */ new Set([
@@ -16,8 +16,9 @@ var BUILT_IN_NAMES = /* @__PURE__ */ new Set([
   "canopy",
   "slate",
   "cyber-strike",
-  "cyber-punk",
-  "cyber-void"
+  "cyber-chrome",
+  "cyber-void",
+  "quarry"
 ]);
 function titleCase(str) {
   return str.replace(/(^|-)(\w)/g, (_, sep, char) => (sep ? " " : "") + char.toUpperCase());

package/dist/{chunk-FVBYSDM4.js → chunk-N5SDJP44.js}

@@ -1,4 +1,4 @@
-import { CardHeader, APIErrorAlert, TrendIndicator, EmptyState, StatCard } from './chunk-BC6TJEON.js';
+import { CardHeader, APIErrorAlert, TrendIndicator, EmptyState, StatCard } from './chunk-IAZT3VO6.js';
 import { getTimeRangeLabel, getTimeRangeDates, useErrorTrends, formatBucketTime } from './chunk-LXHZYSMQ.js';
 import { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

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

@@ -276,8 +276,17 @@ function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
     }
   );
 }
+function AppBackground({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PerspectiveGrid, {}),
+    /* @__PURE__ */ jsx(RadiantGlow, {}),
+    /* @__PURE__ */ jsx(FloatingOrbs, {}),
+    /* @__PURE__ */ jsx(FilmGrain, {}),
+    children
+  ] });
+}
 var randRange = (min, max) => min + Math.random() * (max - min);
-var FLUX_SPARKS = Array.from({ length: 32 }, () => {
+var FLUX_SPARKS = Array.from({ length: 30 }, () => {
   const duration = randRange(12, 70);
   const pulse = randRange(0.8, 2.2);
   return {
@@ -291,7 +300,7 @@ var FLUX_SPARKS = Array.from({ length: 32 }, () => {
     pulseDelay: -randRange(0, pulse)
   };
 });
-var FLUX_MOTES = Array.from({ length: 19 }, () => {
+var FLUX_MOTES = Array.from({ length: 18 }, () => {
   const duration = randRange(18, 90);
   const pulse = randRange(1.6, 4);
   return {
@@ -483,7 +492,7 @@ function CyberParticles({ variant: _variant, className }) {
   );
 }
 function CyberBackground({ variant }) {
-  const glowColor = variant === "volt" ? "color-mix(in srgb, var(--color-primary) 12%, transparent)" : void 0;
+  const glowColor = variant === "chrome" ? void 0 : variant === "volt" || variant === "void" ? "color-mix(in srgb, var(--color-primary) 25%, transparent)" : "color-mix(in srgb, var(--color-primary) 35%, transparent)";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(PerspectiveGrid, { lineColor: "var(--color-border)", prominentGlow: true, glowColor }),
     /* @__PURE__ */ jsx(RadiantGlow, {}),
@@ -545,6 +554,12 @@ var STYLE = `
     --wavy-mote-core: rgba(140, 205, 155, 0.85);
     --wavy-mote-halo: rgba(140, 205, 155, 0.3);
   }
+  .wavy-bg-root[data-variant="quarry"] {
+    --wavy-wave-front: #dde0e4;
+    --wavy-wave-back: #e6e9ed;
+    --wavy-mote-core: rgba(150, 158, 170, 0.85);
+    --wavy-mote-halo: rgba(150, 158, 170, 0.3);
+  }
   /* Variant palettes (dark mode overrides) */
   [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="nirvana"] {
     --wavy-wave-front: #140804;
@@ -570,6 +585,12 @@ var STYLE = `
     --wavy-mote-core: rgba(74, 168, 96, 0.4);
     --wavy-mote-halo: rgba(74, 168, 96, 0.12);
   }
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="quarry"] {
+    --wavy-wave-front: #0d0c0a;
+    --wavy-wave-back: #070605;
+    --wavy-mote-core: rgba(168, 164, 156, 0.4);
+    --wavy-mote-halo: rgba(168, 164, 156, 0.12);
+  }
   .wavy-bg-layer {
     position: absolute;
     top: 0;
@@ -706,4 +727,4 @@ function WaveBackground({ variant }) {
   ] });
 }
 
-export { CyberBackground, CyberParticles, FilmGrain, FloatingOrbs, PerspectiveGrid, RadiantGlow, WaveBackground };
+export { AppBackground, CyberBackground, CyberParticles, FilmGrain, FloatingOrbs, PerspectiveGrid, RadiantGlow, WaveBackground };

package/dist/{chunk-NL6EFQYE.js → chunk-PCOE5EBU.js}

@@ -1,8 +1,8 @@
 import { SubshellSidebarSection } from './chunk-AWT255UH.js';
 import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
-import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from './chunk-ST2RSBQ3.js';
-import { useCyberColors, CyberDonut } from './chunk-FVBYSDM4.js';
-import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, ContextViewer } from './chunk-BC6TJEON.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton, GraphFitViewHandler } from './chunk-VDGE7JR6.js';
+import { useCyberColors, CyberDonut } from './chunk-N5SDJP44.js';
+import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, ContextViewer } from './chunk-IAZT3VO6.js';
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { useCommandViewLayout, useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useSubmitAction, useDeleteTask, showApiErrorNotification, showSuccessNotification } from './chunk-EDAYKRPJ.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS, useGraphHighlighting, calculateGraphHeight } from './chunk-F6RBK7NJ.js';
@@ -1850,7 +1850,7 @@ function CommandQueueTaskRow({ task, onClick, onDelete }) {
         cursor: "pointer",
         border: "1px solid var(--color-border)",
         transition: "background var(--duration-fast) var(--easing)",
-        background: hovered ? "var(--active-background)" : "var(--glass-background)"
+        background: hovered ? "var(--active-background)" : "var(--color-surface)"
       },
       onClick: (e) => {
         if (e.target.closest("[data-menu-dropdown]") || e.target.closest("button")) {