@elevasis/ui 2.69.0 → 2.71.0

package/dist/{chunk-YGCMMOY4.js → chunk-JTSNU6KA.js}

@@ -1,16 +1,24 @@
 import { ZodFormRenderer } from './chunk-3MEXPLWT.js';
+import { ResourceHealthChart } from './chunk-LGKLC5MG.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, useFitViewTrigger } from './chunk-HENXLGVD.js';
-import { JsonViewer, useExecuteResource, useCyberColors, GlowDot } from './chunk-WXHAHKKI.js';
-import { glassBase } from './chunk-FLECOYUS.js';
+import { AppShellCenteredContainer, AppShellLoader } from './chunk-DCMFNSJ6.js';
+import { useCyberColors, GlowDot, JsonViewer, useExecuteResource, EmptyState, useDashboardMetrics, useResources, useTimeRangeDates, useUnresolvedErrors, useRecentExecutionsByResource, PageTitleCaption, HeroStatsRow, useCommandQueue, useScheduledTasks, TabCountBadge, useResourcesHealth } from './chunk-UZ7MSORW.js';
+import { glassBase } from './chunk-R6NMRXNO.js';
+import { CardHeader } from './chunk-62GVNH5U.js';
+import { useInitialization } from './chunk-P45GQ3ZW.js';
 import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from './chunk-BLXJEIQS.js';
+import { formatTimeAgo, formatRelativeTime } from './chunk-NM4A63KJ.js';
+import { getTimeRangeDates } from './chunk-Y6I3IC45.js';
+import { ResourceStatusColors } from './chunk-6SSQGWK7.js';
 import { memo, useMemo, useEffect, useState, useCallback, Fragment } from 'react';
-import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Card, ActionIcon, Loader, SegmentedControl, Collapse, Button, Modal } from '@mantine/core';
+import { Paper, Stack, Text, Group, Badge, Box, useComputedColorScheme, Card, ActionIcon, Loader, SegmentedControl, Collapse, Button, Modal, Center, SimpleGrid, Title, Tabs, Grid, ThemeIcon } from '@mantine/core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls, ReactFlowProvider, ReactFlow } from '@xyflow/react';
-import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconFocus2, IconChevronRight, IconTool, IconWand, IconBrain, IconCheck, IconAlertCircle } from '@tabler/icons-react';
+import { IconPlayerPlay, IconPlayerStop, IconArrowsSplit, IconSquare, IconFocus2, IconChevronRight, IconArrowUpRight, IconLayoutDashboard, IconActivity, IconAlertTriangle, IconHandStop, IconCalendarEvent, IconCircleCheck, IconBrain, IconGitBranch, IconTool, IconWand, IconCheck, IconAlertCircle } from '@tabler/icons-react';
 import '@xyflow/react/dist/style.css';
 import { z } from 'zod';
 import { notifications } from '@mantine/notifications';
+import '@mantine/charts/styles.css';
 
 var DOMAIN_COLORS = {
   primary: "var(--color-primary)",
@@ -367,6 +375,82 @@ function ExecutionStatusBadge({
     }
   );
 }
+function getRateColor(rate) {
+  if (rate >= 95) return "var(--color-success)";
+  if (rate >= 80) return "var(--color-warning)";
+  return "var(--color-error)";
+}
+function getMantineRateColor(rate) {
+  if (rate >= 95) return "green";
+  if (rate >= 80) return "yellow";
+  return "red";
+}
+function ExecutionStats({
+  totalExecutions,
+  successCount,
+  failureCount,
+  warningCount,
+  successRate,
+  align = "flex-end",
+  compact = false
+}) {
+  const cyberColors = useCyberColors();
+  if (totalExecutions === 0 && !compact) {
+    return null;
+  }
+  if (compact && totalExecutions === 0) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "md", fw: 700, ff: "monospace", c: "dimmed", style: { minWidth: 42 }, children: "\u2014" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: "No recent executions" })
+    ] });
+  }
+  if (compact) {
+    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Text, { size: "md", fw: 700, ff: "monospace", style: { color: getRateColor(successRate), minWidth: 42 }, children: [
+          successRate,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.green }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
+        ] }),
+        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.red }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "red", children: failureCount })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: [
+        totalExecutions,
+        " ",
+        totalExecutions === 1 ? "run" : "runs"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, align, style: { whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "blue", children: [
+      totalExecutions,
+      " ",
+      totalExecutions === 1 ? "execution" : "executions"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "green", children: [
+      successCount,
+      " success"
+    ] }),
+    warningCount != null && warningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "yellow", children: [
+      warningCount,
+      " warning"
+    ] }),
+    failureCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "red", children: [
+      failureCount,
+      " failed"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: getMantineRateColor(successRate), children: [
+      successRate,
+      "% Success Rate"
+    ] })
+  ] });
+}
 function TimelineAxis({ totalDuration }) {
   const markers = [
     { position: 0, time: 0 },
@@ -1404,81 +1488,619 @@ function RunResourceButton({
     ) })
   ] });
 }
-function getRateColor(rate) {
-  if (rate >= 95) return "var(--color-success)";
-  if (rate >= 80) return "var(--color-warning)";
-  return "var(--color-error)";
-}
-function getMantineRateColor(rate) {
-  if (rate >= 95) return "green";
-  if (rate >= 80) return "yellow";
-  return "red";
-}
-function ExecutionStats({
-  totalExecutions,
-  successCount,
-  failureCount,
-  warningCount,
-  successRate,
-  align = "flex-end",
-  compact = false
-}) {
+var DEFAULT_LIMIT = 6;
+var typeIcons = {
+  workflow: IconGitBranch,
+  agent: IconBrain
+};
+function ResourceCard({ resource, onClick }) {
+  const [hovered, setHovered] = useState(false);
+  const Icon = typeIcons[resource.type] ?? IconActivity;
   const cyberColors = useCyberColors();
-  if (totalExecutions === 0 && !compact) {
-    return null;
-  }
-  if (compact && totalExecutions === 0) {
-    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsx(Text, { size: "md", fw: 700, ff: "monospace", c: "dimmed", style: { minWidth: 42 }, children: "\u2014" }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: "No recent executions" })
-    ] });
-  }
-  if (compact) {
-    return /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", children: [
-        /* @__PURE__ */ jsxs(Text, { size: "md", fw: 700, ff: "monospace", style: { color: getRateColor(successRate), minWidth: 42 }, children: [
-          successRate,
-          "%"
-        ] }),
-        /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.green }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "green", children: successCount })
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      withBorder: true,
+      style: {
+        cursor: "pointer",
+        transition: "all 150ms ease",
+        borderColor: hovered ? "var(--border-primary-strong)" : "var(--color-border)",
+        boxShadow: hovered ? "var(--card-shadow), 0 0 12px color-mix(in srgb, var(--color-primary) 25%, transparent)" : "var(--card-shadow)",
+        transform: hovered ? "translateY(-1px)" : "none"
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "sm", wrap: "nowrap", align: "flex-start", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: 32, radius: "md", variant: "light", children: /* @__PURE__ */ jsx(Icon, { size: 18 }) }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, children: resource.name })
+          ] }),
+          resource.active && resource.execution ? (() => {
+            const rate = resource.execution.successRate;
+            const color = rate >= 95 ? cyberColors.green : rate >= 80 ? cyberColors.yellow : cyberColors.red;
+            return /* @__PURE__ */ jsxs(Group, { gap: 8, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 500, style: { color, letterSpacing: "0.03em" }, children: [
+                rate.toFixed(0),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(GlowDot, { size: "md", color })
+            ] });
+          })() : null
         ] }),
-        failureCount > 0 && /* @__PURE__ */ jsxs(Group, { gap: 5, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(GlowDot, { size: "sm", color: cyberColors.red }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "red", children: failureCount })
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: resource.type }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                size: "xs",
+                variant: "light",
+                color: ResourceStatusColors[resource.status],
+                children: resource.status
+              }
+            )
+          ] }),
+          resource.active && resource.execution ? /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              resource.execution.totalExecutions,
+              " runs"
+            ] }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "\xB7" }),
+            /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              "Last run ",
+              formatTimeAgo(resource.execution.lastExecution)
+            ] })
+          ] }) : /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No recent activity" })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap" }, children: [
-        totalExecutions,
-        " ",
-        totalExecutions === 1 ? "run" : "runs"
-      ] })
-    ] });
+      ]
+    }
+  );
+}
+function ResourceOverview({
+  recentExecutions,
+  allResources,
+  isLoading,
+  limit = DEFAULT_LIMIT,
+  onResourceClick
+}) {
+  const { displayResources, totalCount } = useMemo(() => {
+    const items = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const resourceLookup = /* @__PURE__ */ new Map();
+    if (allResources) {
+      for (const r of [...allResources.workflows, ...allResources.agents]) {
+        resourceLookup.set(r.resourceId, r);
+      }
+    }
+    if (recentExecutions) {
+      for (const exec of recentExecutions) {
+        const def = resourceLookup.get(exec.resourceId);
+        items.push({
+          resourceId: exec.resourceId,
+          name: def?.name ?? exec.resourceName ?? exec.resourceId,
+          type: def?.type ?? exec.resourceType ?? "",
+          status: def?.status ?? "dev",
+          active: true,
+          execution: exec
+        });
+        seenIds.add(exec.resourceId);
+      }
+    }
+    if (allResources) {
+      for (const r of [...allResources.workflows, ...allResources.agents]) {
+        if (!seenIds.has(r.resourceId)) {
+          items.push({
+            resourceId: r.resourceId,
+            name: r.name,
+            type: r.type,
+            status: r.status,
+            active: false
+          });
+          seenIds.add(r.resourceId);
+        }
+      }
+    }
+    return { displayResources: items.slice(0, limit), totalCount: items.length };
+  }, [recentExecutions, allResources, limit]);
+  const handleClick = (resource) => {
+    onResourceClick?.(resource);
+  };
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconLayoutDashboard, { size: 18 }),
+        title: "Resources",
+        subtitle: totalCount > limit ? `Showing ${limit} of ${totalCount}` : void 0,
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          totalCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+            totalCount,
+            " total"
+          ] }),
+          /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: () => onResourceClick?.(displayResources[0]), children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 16 }) })
+        ] })
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : displayResources.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: IconLayoutDashboard, title: "No resources registered" }) : /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2, lg: 3 }, children: displayResources.map((resource) => /* @__PURE__ */ jsx(ResourceCard, { resource, onClick: () => handleClick(resource) }, resource.resourceId)) })
+  ] });
+}
+var severityColor = {
+  critical: "red",
+  warning: "yellow",
+  info: "blue"
+};
+function OperationsOverview({
+  timeRange,
+  onResourceClick,
+  onErrorsNavigate,
+  onCommandQueueNavigate,
+  onScheduledTasksNavigate,
+  renderTrendChart,
+  renderOperationalOverview
+}) {
+  const { organizationReady, error: initError } = useInitialization();
+  const { data: dashboardDataRaw, isLoading, error } = useDashboardMetrics(timeRange);
+  const dashboardData = dashboardDataRaw;
+  const { data: resourcesData, isLoading: resourcesLoading } = useResources();
+  const { startDate, endDate } = useTimeRangeDates(timeRange);
+  const { data: errorData, isLoading: errorsLoading } = useUnresolvedErrors({ startDate, endDate });
+  const { data: recentExecData, isLoading: recentExecLoading } = useRecentExecutionsByResource({
+    timeRange,
+    limit: 6
+  });
+  if (initError?.layer === "organization") {
+    return /* @__PURE__ */ jsx(AppShellCenteredContainer, { children: /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, c: "dimmed", children: "No organization detected" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: initError?.message })
+    ] }) });
   }
-  return /* @__PURE__ */ jsxs(Stack, { gap: 2, align, style: { whiteSpace: "nowrap" }, children: [
-    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "blue", children: [
-      totalExecutions,
-      " ",
-      totalExecutions === 1 ? "execution" : "executions"
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { size: "xs", c: "green", children: [
-      successCount,
-      " success"
-    ] }),
-    warningCount != null && warningCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "yellow", children: [
-      warningCount,
-      " warning"
-    ] }),
-    failureCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "red", children: [
-      failureCount,
-      " failed"
+  if (!organizationReady || isLoading || resourcesLoading) return /* @__PURE__ */ jsx(AppShellLoader, {});
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title: "Overview", caption: "AI Operations Health & Performance" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(
+        HeroStatsRow,
+        {
+          resourcesData,
+          resourcesLoading,
+          dashboardData,
+          dashboardLoading: isLoading,
+          unresolvedErrorCount: errorData?.total ?? null,
+          errorsLoading
+        }
+      ),
+      renderTrendChart?.(dashboardData?.executionHealth, isLoading, error ?? void 0)
     ] }),
-    /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 600, c: getMantineRateColor(successRate), children: [
-      successRate,
-      "% Success Rate"
+    /* @__PURE__ */ jsx(
+      ResourceOverview,
+      {
+        recentExecutions: recentExecData?.resources,
+        allResources: resourcesData,
+        isLoading: resourcesLoading || recentExecLoading,
+        limit: 6,
+        onResourceClick: onResourceClick ? (resource) => onResourceClick({
+          resourceId: resource.resourceId,
+          resourceType: resource.type
+        }) : void 0
+      }
+    ),
+    renderOperationalOverview ? renderOperationalOverview({
+      timeRange,
+      onErrorsNavigate,
+      onCommandQueueNavigate,
+      onScheduledTasksNavigate
+    }) : /* @__PURE__ */ jsx(
+      DashboardOperationsOverview,
+      {
+        timeRange,
+        onErrorsNavigate,
+        onCommandQueueNavigate,
+        onScheduledTasksNavigate
+      }
+    )
+  ] });
+}
+var Dashboard = OperationsOverview;
+function DashboardOperationsOverview({
+  timeRange,
+  onErrorsNavigate,
+  onCommandQueueNavigate,
+  onScheduledTasksNavigate
+}) {
+  const { startDate, endDate } = useTimeRangeDates(timeRange);
+  const { data: errorData, isLoading: errorsLoading } = useUnresolvedErrors({ startDate, endDate });
+  const errors = errorData?.errors ?? [];
+  const errorCount = errorData?.total ?? 0;
+  const { data: allCommands } = useCommandQueue({ status: "pending", limit: 100 });
+  const commands = allCommands?.tasks ?? [];
+  const commandCount = commands.length;
+  const { data: allTasks, isLoading: tasksLoading } = useScheduledTasks();
+  const tasks = allTasks ?? [];
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const { totalScheduled, upcomingTasks } = useMemo(() => {
+    const totalScheduled2 = tasks.filter((t) => t.status === "active").length;
+    const upcomingTasks2 = tasks.filter((t) => t.status === "active" && t.nextRunAt).sort((a, b) => new Date(a.nextRunAt).getTime() - new Date(b.nextRunAt).getTime()).slice(0, 5);
+    return { totalScheduled: totalScheduled2, upcomingTasks: upcomingTasks2 };
+  }, [tasks]);
+  const defaultTab = useMemo(() => {
+    if (errorCount > 0) return "errors";
+    if (commandCount > 0) return "commands";
+    if (totalScheduled > 0) return "scheduled";
+    return "errors";
+  }, [errorCount, commandCount, totalScheduled]);
+  const [activeTab, setActiveTab] = useState(null);
+  const effectiveTab = activeTab ?? defaultTab;
+  const formatDaysUntil = (runAt) => {
+    const diffMs = runAt.getTime() - now.getTime();
+    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+    const diffHours = Math.floor(diffMs / (1e3 * 60 * 60));
+    if (diffHours < 0) return "Overdue";
+    if (diffHours < 1) return "Soon";
+    if (diffDays === 0) return "Today";
+    if (diffDays === 1) return "Tomorrow";
+    if (diffDays <= 7) return `In ${diffDays}d`;
+    return `In ${Math.floor(diffDays / 7)}w`;
+  };
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(CardHeader, { icon: /* @__PURE__ */ jsx(IconActivity, { size: 18 }), title: "Operational Overview" }),
+    /* @__PURE__ */ jsxs(Tabs, { value: effectiveTab, onChange: setActiveTab, variant: "default", children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        /* @__PURE__ */ jsx(
+          Tabs.Tab,
+          {
+            value: "errors",
+            leftSection: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }),
+            rightSection: /* @__PURE__ */ jsx(TabCountBadge, { count: errorCount, isLoading: errorsLoading }),
+            children: "Unresolved Errors"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Tab,
+          {
+            value: "commands",
+            leftSection: /* @__PURE__ */ jsx(IconHandStop, { size: 16 }),
+            rightSection: /* @__PURE__ */ jsx(TabCountBadge, { count: commandCount }),
+            children: "Command Queue"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Tab,
+          {
+            value: "scheduled",
+            leftSection: /* @__PURE__ */ jsx(IconCalendarEvent, { size: 16 }),
+            rightSection: /* @__PURE__ */ jsx(TabCountBadge, { count: totalScheduled, isLoading: tasksLoading }),
+            children: "Scheduled Tasks"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "errors", pt: "sm", children: errorsLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : errors.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No unresolved errors" }) : /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        errors.map((error) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: "sm",
+            py: 6,
+            onClick: onErrorsNavigate,
+            style: {
+              borderRadius: 4,
+              cursor: onErrorsNavigate ? "pointer" : "default"
+            },
+            children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 200, width: 200, flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      backgroundColor: `var(--mantine-color-${severityColor[error.severity]}-6)`,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", lineClamp: 1, children: error.resourceName || error.resourceId }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: error.errorType })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, style: { flex: "1 1 auto", minWidth: 0 }, children: error.message }),
+              /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: severityColor[error.severity], children: error.severity }),
+                /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatTimeAgo(error.timestamp) })
+              ] })
+            ] })
+          },
+          error.id
+        )),
+        errorCount > 5 && /* @__PURE__ */ jsx(
+          Group,
+          {
+            gap: 4,
+            justify: "center",
+            pt: 4,
+            onClick: onErrorsNavigate,
+            style: { cursor: onErrorsNavigate ? "pointer" : "default" },
+            children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "See all errors" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "commands", pt: "sm", children: commands.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No pending decisions" }) : /* @__PURE__ */ jsx(Stack, { gap: 4, children: commands.slice(0, 5).map((task) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          px: "sm",
+          py: 6,
+          onClick: onCommandQueueNavigate,
+          style: {
+            borderRadius: 4,
+            cursor: onCommandQueueNavigate ? "pointer" : "default"
+          },
+          children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    backgroundColor: `var(--mantine-color-${task.priority >= 8 ? "red" : task.priority >= 4 ? "yellow" : "blue"}-6)`,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { size: "xs", lineClamp: 1, children: task.description || "No description" })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: task.status })
+          ] })
+        },
+        task.id
+      )) }) }),
+      /* @__PURE__ */ jsx(Tabs.Panel, { value: "scheduled", pt: "sm", children: tasksLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : upcomingTasks.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No scheduled tasks" }) : /* @__PURE__ */ jsx(Stack, { gap: 4, children: upcomingTasks.map((task) => {
+        const runAt = new Date(task.nextRunAt);
+        const daysUntilNum = Math.floor((runAt.getTime() - today.getTime()) / (1e3 * 60 * 60 * 24));
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: "sm",
+            py: 6,
+            onClick: onScheduledTasksNavigate,
+            style: {
+              borderRadius: 4,
+              cursor: onScheduledTasksNavigate ? "pointer" : "default"
+            },
+            children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      backgroundColor: `var(--mantine-color-${daysUntilNum < 0 ? "red" : daysUntilNum <= 1 ? "yellow" : "blue"}-6)`,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "xs", truncate: true, children: task.name || task.target.resourceId })
+              ] }),
+              /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: daysUntilNum <= 1 ? void 0 : "gray", children: formatDaysUntil(runAt) })
+            ] })
+          },
+          task.id
+        );
+      }) }) })
     ] })
   ] });
 }
+var entityTypeConfig = {
+  workflow: { icon: IconGitBranch, hasPath: true },
+  agent: { icon: IconBrain, hasPath: true }
+};
+function getEntityConfig(entityType) {
+  return entityTypeConfig[entityType] || { icon: IconActivity, hasPath: false };
+}
+function RecentExecutionsByResource({ timeRange, limit = 5, onResourceClick }) {
+  const { data, isLoading, isFetching, error } = useRecentExecutionsByResource({
+    timeRange,
+    limit
+  });
+  const showLoading = (isLoading || isFetching) && !data;
+  const { data: resourcesData } = useResources();
+  const resourceDefLookup = useMemo(() => {
+    if (!resourcesData) return /* @__PURE__ */ new Map();
+    const allResources = [...resourcesData.workflows || [], ...resourcesData.agents || []];
+    return new Map(allResources.map((r) => [r.resourceId, r]));
+  }, [resourcesData]);
+  const enrichedExecutions = useMemo(() => {
+    if (!data?.resources) return [];
+    return data.resources.map((exec) => {
+      const resourceDef = resourceDefLookup.get(exec.resourceId);
+      return {
+        ...exec,
+        resourceType: resourceDef?.type || "",
+        resourceName: resourceDef?.name || exec.resourceId
+      };
+    });
+  }, [data, resourceDefLookup]);
+  const resourceIds = useMemo(
+    () => enrichedExecutions.map((r) => ({
+      entityType: r.resourceType,
+      entityId: r.resourceId
+    })),
+    [enrichedExecutions]
+  );
+  const { startDate, endDate } = useMemo(() => getTimeRangeDates(timeRange), [timeRange]);
+  const granularity = timeRange === "1h" || timeRange === "24h" ? "hour" : "day";
+  const { data: healthData } = useResourcesHealth({
+    resources: resourceIds,
+    startDate,
+    endDate,
+    granularity
+  });
+  const healthLookup = useMemo(() => {
+    if (!healthData?.resources) return /* @__PURE__ */ new Map();
+    return new Map(healthData.resources.map((r) => [`${r.entityType}-${r.entityId}`, r]));
+  }, [healthData]);
+  const handleResourceClick = (resource) => {
+    const config = getEntityConfig(resource.resourceType);
+    if (config.hasPath) {
+      onResourceClick?.({ resourceType: resource.resourceType, resourceId: resource.resourceId });
+    }
+  };
+  if (showLoading) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "red.6", children: [
+      "Failed to load: ",
+      error.message
+    ] }) });
+  }
+  if (enrichedExecutions.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: IconPlayerPlay, title: "No executions in this time range" });
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: enrichedExecutions.map((resource) => {
+    const config = getEntityConfig(resource.resourceType);
+    const Icon = config.icon;
+    const resourceKey = `${resource.resourceType}-${resource.resourceId}`;
+    const resourceHealth = healthLookup.get(resourceKey);
+    const resourceDef = resourceDefLookup.get(resource.resourceId);
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        withBorder: true,
+        style: {
+          cursor: config.hasPath ? "pointer" : "default",
+          transition: "box-shadow var(--duration-fast) var(--easing)"
+        },
+        onClick: () => handleResourceClick(resource),
+        children: /* @__PURE__ */ jsxs(Grid, { gutter: "sm", align: "center", children: [
+          /* @__PURE__ */ jsx(Grid.Col, { span: 8, children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(Icon, { size: 24, color: "var(--color-primary)" }),
+            /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, truncate: true, children: resource.resourceName }),
+              resourceDef?.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, children: resourceDef.description }),
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                resourceDef?.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "xs", children: [
+                  "v",
+                  resourceDef.version
+                ] }),
+                resourceDef?.status && /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resourceDef.status], variant: "outline", size: "xs", children: resourceDef.status.toUpperCase() })
+              ] }),
+              /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                "Last run ",
+                formatRelativeTime(resource.lastExecution)
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid.Col, { span: 4, children: /* @__PURE__ */ jsxs(Group, { justify: "flex-end", gap: "md", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(
+              ExecutionStats,
+              {
+                totalExecutions: resource.totalExecutions,
+                successCount: resource.successCount,
+                failureCount: resource.failureCount,
+                warningCount: resource.warningCount,
+                successRate: resource.successRate
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ResourceHealthChart,
+              {
+                healthData: resourceHealth,
+                hasExecutions: resource.totalExecutions > 0,
+                width: 300,
+                height: 60
+              }
+            )
+          ] }) })
+        ] })
+      },
+      resource.resourceId
+    );
+  }) });
+}
+var severityColor2 = {
+  critical: "red",
+  warning: "yellow",
+  info: "blue"
+};
+function UnresolvedErrorsTeaser({ timeRange, onNavigateToAllErrors }) {
+  const { startDate, endDate } = useTimeRangeDates(timeRange);
+  const { data, isLoading } = useUnresolvedErrors({ startDate, endDate });
+  const errors = data?.errors ?? [];
+  const total = data?.total ?? 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        style: {
+          background: "var(--glass-background)",
+          backdropFilter: "var(--glass-blur)",
+          border: "1px solid var(--color-border)",
+          borderRadius: 8
+        },
+        children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      style: {
+        background: "var(--glass-background)",
+        backdropFilter: "var(--glass-blur)",
+        border: "1px solid var(--color-border)",
+        borderRadius: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: errors.length > 0 ? "sm" : 0, children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: 28, radius: "md", variant: "light", color: total > 0 ? "red" : "green", children: total > 0 ? /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconCircleCheck, { size: 16 }) }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, children: "Unresolved Errors" })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            total > 0 && /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", color: "red", children: [
+              total,
+              " unresolved"
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onNavigateToAllErrors, children: /* @__PURE__ */ jsx(IconArrowUpRight, { size: 14 }) })
+          ] })
+        ] }),
+        errors.length === 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No unresolved errors" }),
+        errors.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: 4, children: errors.map((error) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: "sm",
+            py: 6,
+            onClick: onNavigateToAllErrors,
+            style: {
+              borderLeft: `2px solid var(--mantine-color-${severityColor2[error.severity]}-6)`,
+              borderRadius: 4,
+              cursor: onNavigateToAllErrors ? "pointer" : "default",
+              textDecoration: "none",
+              color: "inherit"
+            },
+            children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Text, { size: "xs", lineClamp: 1, children: error.resourceName || error.resourceId }),
+                /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: error.errorType })
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: severityColor2[error.severity], children: error.severity }),
+                /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatTimeAgo(error.timestamp) })
+              ] })
+            ] })
+          },
+          error.id
+        )) })
+      ]
+    }
+  );
+}
 
-export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationDetailPanel, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CollapsibleJsonSection, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme };
+export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationDetailPanel, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CollapsibleJsonSection, Dashboard, DashboardOperationsOverview, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, OperationsOverview, RecentExecutionsByResource, ResourceOverview, RunResourceButton, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, UnresolvedErrorsTeaser, VisualizerContainer, WorkflowExecutionTimeline, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme };