@mastra/playground-ui 19.0.0-alpha.2 → 19.0.0-alpha.3

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { useMastraClient, resolveToChildMessages, useCreateWorkflowRun, useStrea
 import { useQuery, useQueryClient, useMutation, useInfiniteQuery, useQueries, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { useComposer, useComposerRuntime, useAttachment, ComposerPrimitive, AttachmentPrimitive, useAuiState, useAssistantState, useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, MoveRight, Copy, Folder, Link2, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Pencil, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, FlaskConical, Database, ThumbsUp, ThumbsDown, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, Upload, ClockIcon, BanIcon, MoveRightIcon, GitCompare, ChevronLeftIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
+import { X, Wand2, Link, CloudUpload, FileText, CircleXIcon, ChevronUpIcon, CircleCheck, CircleX, CircleAlert, Info, CheckIcon as CheckIcon$1, CopyIcon, Share2, Check, FolderTree, HardDrive, Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, CloudCog, TerminalSquare, Clock as Clock$1, PlayCircle, Workflow, Layers, List, CalendarClock, Timer, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Footprints, Circle, TrashIcon, Brackets, PlusIcon, TriangleAlertIcon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, AlertCircle, TriangleAlert, Braces, ChevronDownIcon, Plus, EyeOffIcon, EyeIcon, ShieldAlert, PauseIcon, HourglassIcon, CircleDashed, Minus, Maximize, AlertCircleIcon, StopCircle, CirclePause, Tag, ShieldX, SearchIcon, ExternalLinkIcon, CircleSlashIcon, Cpu, ChevronsUpDown, Search, ArrowRight, ArrowLeft, CheckCircleIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, DatabaseIcon, Save, Mic, ArrowUp, SaveIcon, BookOpen, ExternalLink, RotateCcw, GripVertical, ArrowLeftIcon, ArrowRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, CalculatorIcon, ChevronRightIcon, GaugeIcon, ChevronsLeftRightEllipsisIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, XIcon, Type, ToggleLeft, Hash, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Component, Trash2, Ruler, Trash, MoveRight, Copy, Folder, Link2, RefreshCcwIcon, AlignLeft, Trash2Icon, FileTextIcon, BookmarkPlus, PenLine, LaptopMinimal, Plug, File as File$1, FolderOpen, Image, FileJson, FileCode, FolderPlus, Drill, Pencil, Eye, Wrench, MessageSquare, AlertTriangleIcon, BracesIcon, ArrowRightToLineIcon, CoinsIcon, CircleGaugeIcon, PanelTopIcon, ChevronsUpIcon, ChevronsDownIcon, CircleChevronUpIcon, CircleChevronDownIcon, FileIcon, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, CircleDashedIcon, ListTreeIcon, PanelLeftIcon, Award, ClipboardCheck, CheckCircle, FormInput, Sparkles, Play, CheckCircle2, FlaskConical, Database, ThumbsUp, ThumbsDown, FileInput, FileOutput, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, TrendingUpIcon, TrendingDownIcon, Upload, ClockIcon, BanIcon, MoveRightIcon, GitCompare, ChevronLeftIcon, TagIcon, FileCodeIcon, Calendar1Icon, HistoryIcon, History, EllipsisVerticalIcon, AmpersandIcon, GitCompareIcon, Download, FolderOutput, AlertTriangle, MoreVertical, PanelRightIcon, PlayIcon, OctagonAlertIcon, CrosshairIcon, TargetIcon, LayersIcon, EqualIcon, PenIcon, KeyboardIcon, CircleSlash, Cloud, Zap, FileCode2, Code, Server, Home, Package, Github } from 'lucide-react';
 import { S as Shadows, G as Glows, B as BorderColors, C as Colors, a as Sizes, F as FontSizes, L as LineHeights, b as BorderRadius, c as Spacings } from './spacings-ZtORQo9-.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -39,7 +39,7 @@ import { z } from 'zod';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { format, isValid, formatDate, isToday, isYesterday, isThisYear } from 'date-fns';
+import { format, isValid, formatDate, isToday, isYesterday, differenceInDays, isThisYear } from 'date-fns';
 import { useDebouncedCallback, useThrottledCallback, useDebounce } from 'use-debounce';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { VisuallyHidden as VisuallyHidden$1 } from '@radix-ui/react-visually-hidden';
@@ -72,6 +72,7 @@ import semver from 'semver';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { coreFeatures } from '@mastra/core/features';
 import { EntityType } from '@mastra/core/observability';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Line } from 'recharts';
 import Papa from 'papaparse';
 import { createPortal } from 'react-dom';
 import { isToday as isToday$1 } from 'date-fns/isToday';
@@ -12579,6 +12580,10 @@ function EntityListDescriptionCell({ children, className }) {
   return /* @__PURE__ */ jsx(EntityListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsx("span", { className: "truncate", children }) });
 }
 
+function EntityListNoMatch({ message = "Nothing matches your search", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-md", children: message }) });
+}
+
 function EntityListRoot({ children, columns, className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -12690,7 +12695,8 @@ const EntityList = Object.assign(EntityListRoot, {
   Cell: EntityListCell,
   TextCell: EntityListTextCell,
   NameCell: EntityListNameCell,
-  DescriptionCell: EntityListDescriptionCell
+  DescriptionCell: EntityListDescriptionCell,
+  NoMatch: EntityListNoMatch
 });
 
 const widths$2 = ["75%", "50%", "65%", "90%", "60%", "80%"];
@@ -12764,6 +12770,7 @@ function WorkflowsList({ workflows, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsx(EntityList.TopCell, { children: "Description" }),
       /* @__PURE__ */ jsx(EntityList.TopCell, { children: "Number of steps" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Workflows match your search" }) : null,
     filteredData.map((wf) => {
       const name = truncateString(wf.name, 50);
       const description = truncateString(wf.description ?? "", 200);
@@ -13000,7 +13007,7 @@ const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsx(RadixTabs.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
 };
 
-const TabList = ({ children, variant = "default", className }) => {
+const TabList = ({ children, variant = "default", alignment = "left", className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(
     RadixTabs.List,
     {
@@ -13009,7 +13016,8 @@ const TabList = ({ children, variant = "default", className }) => {
         {
           // variant: default
           "text-ui-lg": variant === "default",
-          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button]:flex-1": variant === "default" && alignment === "full-width",
           [`[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`]: variant === "default",
           "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-white/50": variant === "default",
           // variant: buttons
@@ -19957,6 +19965,7 @@ function ScorersList({ scorers, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Agents" }),
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Workflows" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Scorers match your search" }) : null,
     filteredData.map((scorer) => {
       const name = truncateString(scorer.scorer.config?.name ?? scorer.id, 50);
       const description = truncateString(scorer.scorer.config?.description ?? "", 200);
@@ -21993,9 +22002,16 @@ const AgentMetadataSkillList = ({ skills, agentId, workspaceId }) => {
       }
     );
     return /* @__PURE__ */ jsx(AgentMetadataListItem, { children: isActivated ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }),
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: paths.agentSkillLink(agentId, skill.name, skill.path, workspaceId),
+          "data-testid": "skill-badge",
+          children: badge
+        }
+      ) }),
       /* @__PURE__ */ jsx(TooltipContent, { className: "bg-surface3 text-neutral6 border border-border1", children: "Active" })
-    ] }) }) : /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.name);
+    ] }) }) : /* @__PURE__ */ jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, skill.path, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.path);
   }) });
 };
 function formatWorkspaceToolName(toolName) {
@@ -25086,6 +25102,7 @@ function PromptsList({ promptBlocks, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Has Draft" }),
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Is Published" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Prompts match your search" }) : null,
     filteredData.map((block) => {
       const name = truncateString(block.name, 50);
       const description = truncateString(block.description ?? "", 200);
@@ -30594,7 +30611,7 @@ const useWorkspaceSkills = (options) => {
 const useWorkspaceSkill = (skillName, options) => {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["workspace", "skills", skillName, options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, options?.workspaceId],
     queryFn: async () => {
       if (!isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30603,7 +30620,7 @@ const useWorkspaceSkill = (skillName, options) => {
         throw new Error("workspaceId is required");
       }
       const workspace = client.getWorkspace(options.workspaceId);
-      const skill = workspace.getSkill(skillName);
+      const skill = workspace.getSkill(skillName, options?.path);
       return skill.details();
     },
     enabled: options?.enabled !== false && !!skillName && !!options?.workspaceId && isWorkspaceV1Supported(client),
@@ -30613,7 +30630,7 @@ const useWorkspaceSkill = (skillName, options) => {
 const useWorkspaceSkillReferences = (skillName, options) => {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["workspace", "skills", skillName, "references", options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, "references", options?.workspaceId],
     queryFn: async () => {
       if (!isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30622,7 +30639,7 @@ const useWorkspaceSkillReferences = (skillName, options) => {
         throw new Error("workspaceId is required");
       }
       const workspace = client.getWorkspace(options.workspaceId);
-      const skill = workspace.getSkill(skillName);
+      const skill = workspace.getSkill(skillName, options?.path);
       return skill.listReferences();
     },
     enabled: options?.enabled !== false && !!skillName && !!options?.workspaceId && isWorkspaceV1Supported(client),
@@ -30632,7 +30649,7 @@ const useWorkspaceSkillReferences = (skillName, options) => {
 const useWorkspaceSkillReference = (skillName, referencePath, options) => {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["workspace", "skills", skillName, "references", referencePath, options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, "references", referencePath, options?.workspaceId],
     queryFn: async () => {
       if (!isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30641,7 +30658,7 @@ const useWorkspaceSkillReference = (skillName, referencePath, options) => {
         throw new Error("workspaceId is required");
       }
       const workspace = client.getWorkspace(options.workspaceId);
-      const skill = workspace.getSkill(skillName);
+      const skill = workspace.getSkill(skillName, options?.path);
       return skill.getReference(referencePath);
     },
     enabled: options?.enabled !== false && !!skillName && !!referencePath && !!options?.workspaceId && isWorkspaceV1Supported(client),
@@ -30663,7 +30680,7 @@ const useSearchWorkspaceSkills = () => {
 const useAgentSkill = (agentId, skillName, options) => {
   const client = useMastraClient();
   return useQuery({
-    queryKey: ["agents", agentId, "skills", skillName, options?.workspaceId],
+    queryKey: ["agents", agentId, "skills", skillName, options?.path, options?.workspaceId],
     queryFn: async () => {
       if (!isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30672,7 +30689,7 @@ const useAgentSkill = (agentId, skillName, options) => {
         throw new Error("workspaceId is required");
       }
       const workspace = client.getWorkspace(options.workspaceId);
-      const skill = workspace.getSkill(skillName);
+      const skill = workspace.getSkill(skillName, options?.path);
       return skill.details();
     },
     enabled: options?.enabled !== false && !!agentId && !!skillName && !!options?.workspaceId && isWorkspaceV1Supported(client),
@@ -39280,6 +39297,7 @@ function AgentsList({ agents, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Agents match your search" }) : null,
     filteredData.map((agent) => {
       const name = truncateString(agent.name, 50);
       const instructions = truncateString(extractPrompt(agent.instructions), 200);
@@ -39551,6 +39569,7 @@ function ProcessorsList({ processors, isLoading, error, search = "" }) {
       ),
       /* @__PURE__ */ jsx(EntityList.TopCellSmart, { short: "Used by", long: "Used by Agents", className: "text-center" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Processors match your search" }) : null,
     filteredData.map((processor) => {
       const name = truncateString(processor.name || processor.id, 50);
       const description = truncateString(processor.description ?? "", 200);
@@ -40005,6 +40024,7 @@ function ToolsList({ tools, agents, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Tools match your search" }) : null,
     filteredData.map((tool) => {
       const name = truncateString(tool.id, 50);
       const description = truncateString(tool.description ?? "", 200);
@@ -40827,6 +40847,1173 @@ function TemplateFailure({ errorMsg, validationErrors }) {
   ] });
 }
 
+const DATE_PRESETS$1 = [
+  { label: "Last 24 hours", value: "24h" },
+  { label: "Last 3 days", value: "3d" },
+  { label: "Last 7 days", value: "7d" },
+  { label: "Last 14 days", value: "14d" },
+  { label: "Last 30 days", value: "30d" }
+];
+const VALID_PRESETS = new Set(DATE_PRESETS$1.map((p) => p.value));
+function isValidPreset(value) {
+  return typeof value === "string" && (VALID_PRESETS.has(value) || value === "custom");
+}
+const PRESET_DAYS = {
+  "24h": 1,
+  "3d": 3,
+  "7d": 7,
+  "14d": 14,
+  "30d": 30
+};
+const ENV_PCTS = {
+  "Studio Cloud": 42,
+  Production: 31,
+  Staging: 18,
+  Dev: 7,
+  "CI / Preview": 2
+};
+function getMultiplier(preset, customRange, filterGroups) {
+  let dateMul = 1;
+  if (preset !== "custom") {
+    dateMul = PRESET_DAYS[preset] ?? 1;
+  } else if (customRange?.from && customRange?.to) {
+    dateMul = Math.max(1, differenceInDays(customRange.to, customRange.from) + 1);
+  }
+  const envGroups = filterGroups.filter((g) => g.field === "Environment" && g.comparator === "is");
+  const envPct = envGroups.length === 0 ? 100 : envGroups.flatMap((g) => g.values).reduce((s, v) => s + (ENV_PCTS[v] ?? 0), 0);
+  return dateMul * (envPct / 100);
+}
+const MetricsContext = createContext({
+  datePreset: "24h",
+  setDatePreset: () => {
+  },
+  customRange: void 0,
+  setCustomRange: () => {
+  },
+  dateRangeLabel: "Last 24 hours",
+  filterGroups: [],
+  setFilterGroups: () => {
+  },
+  multiplier: 1
+});
+function useMetrics() {
+  return useContext(MetricsContext);
+}
+function getDateRangeLabel(preset, customRange) {
+  if (preset !== "custom") {
+    return DATE_PRESETS$1.find((p) => p.value === preset).label;
+  }
+  if (customRange?.from) {
+    if (customRange.to) {
+      return `${format(customRange.from, "MMM d, yyyy")} – ${format(customRange.to, "MMM d, yyyy")}`;
+    }
+    return format(customRange.from, "MMM d, yyyy");
+  }
+  return "Custom range";
+}
+function MetricsProvider({
+  children,
+  initialPreset,
+  onPresetChange
+}) {
+  const [datePreset, setDatePresetState] = useState(initialPreset ?? "24h");
+  const [customRange, setCustomRange] = useState(void 0);
+  const [filterGroups, setFilterGroups] = useState([]);
+  const dateRangeLabel = getDateRangeLabel(datePreset, customRange);
+  const multiplier = getMultiplier(datePreset, customRange, filterGroups);
+  useEffect(() => {
+    if (initialPreset && initialPreset !== datePreset) {
+      setDatePresetState(initialPreset);
+    }
+  }, [initialPreset]);
+  const setDatePreset = useCallback(
+    (v) => {
+      setDatePresetState(v);
+      onPresetChange?.(v);
+    },
+    [onPresetChange]
+  );
+  return /* @__PURE__ */ jsx(
+    MetricsContext.Provider,
+    {
+      value: {
+        datePreset,
+        setDatePreset,
+        customRange,
+        setCustomRange,
+        dateRangeLabel,
+        filterGroups,
+        setFilterGroups,
+        multiplier
+      },
+      children
+    }
+  );
+}
+
+const PRESET_MS = {
+  "24h": 24 * 60 * 60 * 1e3,
+  "3d": 3 * 24 * 60 * 60 * 1e3,
+  "7d": 7 * 24 * 60 * 60 * 1e3,
+  "14d": 14 * 24 * 60 * 60 * 1e3,
+  "30d": 30 * 24 * 60 * 60 * 1e3
+};
+function buildTimestamp(preset, customRange) {
+  const now = /* @__PURE__ */ new Date();
+  if (preset !== "custom") {
+    const ms = PRESET_MS[preset] ?? PRESET_MS["24h"];
+    return { start: new Date(now.getTime() - ms), end: now };
+  }
+  return {
+    start: customRange?.from ?? new Date(now.getTime() - PRESET_MS["24h"]),
+    end: customRange?.to ?? now
+  };
+}
+function useMetricsFilters() {
+  const { datePreset, customRange } = useMetrics();
+  const timestamp = buildTimestamp(datePreset, customRange);
+  return { datePreset, customRange, timestamp };
+}
+
+async function fetchPercentiles(client, metricName, timestamp) {
+  const res = await client.getMetricPercentiles({
+    name: metricName,
+    percentiles: [0.5, 0.95],
+    interval: "1h",
+    filters: { timestamp }
+  });
+  const p50Series = res.series.find((s) => s.percentile === 0.5);
+  const p95Series = res.series.find((s) => s.percentile === 0.95);
+  if (!p50Series || !p95Series) return [];
+  const p95Map = new Map(p95Series.points.map((p) => [new Date(p.timestamp).getTime(), p.value]));
+  return p50Series.points.map((p) => {
+    const ts = new Date(p.timestamp);
+    return {
+      time: ts.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }),
+      p50: Math.round(p.value),
+      p95: Math.round(p95Map.get(ts.getTime()) ?? 0)
+    };
+  });
+}
+function useLatencyMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "latency", datePreset, customRange],
+    queryFn: async () => {
+      const [agentData, workflowData, toolData] = await Promise.all([
+        fetchPercentiles(client, "mastra_agent_duration_ms", timestamp),
+        fetchPercentiles(client, "mastra_workflow_duration_ms", timestamp),
+        fetchPercentiles(client, "mastra_tool_duration_ms", timestamp)
+      ]);
+      return { agentData, workflowData, toolData };
+    }
+  });
+}
+
+function formatCompact(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+const CHART_COLORS = {
+  green: "#22c55e",
+  orange: "#fb923c",
+  pink: "#f472b6",
+  purple: "#8b5cf6",
+  blue: "#4f83f1",
+  blueDark: "#2b5cd9",
+  blueLight: "#6b8fe5",
+  red: "#f87171",
+  greenDark: "#15613a",
+  redDark: "#991b1b",
+  yellow: "#facc15"
+};
+
+function MetricsCardContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto ", className), children });
+}
+
+function MetricsCardDescription({ children, className }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-ui-md text-neutral2 leading-tight mt-0.5", className), children });
+}
+
+function MetricsCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-sm text-accent2", children: message }) });
+}
+
+function MetricsCardLoading({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: Colors.neutral1 }) });
+}
+
+function MetricsCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center h-full", className), children: /* @__PURE__ */ jsx("p", { className: "text-neutral1 text-sm", children: message }) });
+}
+
+function DashboardCard({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("border border-border1 rounded-lg p-6 bg-surface2", className), children });
+}
+
+function MetricsCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    DashboardCard,
+    {
+      className: cn(
+        "flex-1 grid grid-rows-[4rem_20rem] gap-2 min-w-[20rem] md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem] 3xl:min-w-[32rem]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function MetricsCardSummary({ value, label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid justify-end content-start text-right gap-1", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-ui-lg font-semibold text-neutral4 leading-none", children: value }),
+    label && /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral2", children: label })
+  ] });
+}
+
+function MetricsCardTitle({ children, className }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-ui-md font-normal text-neutral4", className), children });
+}
+
+function MetricsCardTitleAndDescription(props) {
+  if ("children" in props) {
+    return /* @__PURE__ */ jsx("div", { className: props.className, children: props.children });
+  }
+  const { title, description } = props;
+  return /* @__PURE__ */ jsxs("div", { className: props.className, children: [
+    /* @__PURE__ */ jsx(MetricsCardTitle, { children: title }),
+    description && /* @__PURE__ */ jsx(MetricsCardDescription, { children: description })
+  ] });
+}
+
+function MetricsCardTopBar({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-[1fr_auto] gap-4", className), children });
+}
+
+function MetricsKpiCardChange({
+  changePct,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsx(TrendingUpIcon, {}) : /* @__PURE__ */ jsx(TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsx(Spinner, { size: "md", color: Colors.neutral1 }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(DashboardCard, { className: cn("flex-1 min-w-[15rem]", className), children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsx("strong", { className: cn("text-header-lg text-neutral4 font-semibold", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+const MetricsCard = Object.assign(MetricsCardRoot, {
+  Root: MetricsCardRoot,
+  Kpi: MetricsKpiCard,
+  TopBar: MetricsCardTopBar,
+  TitleAndDescription: MetricsCardTitleAndDescription,
+  Title: MetricsCardTitle,
+  Description: MetricsCardDescription,
+  Summary: MetricsCardSummary,
+  Loading: MetricsCardLoading,
+  Error: MetricsCardError,
+  Content: MetricsCardContent,
+  NoData: MetricsCardNoData
+});
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-icon6", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxs("p", { className: "text-icon2", children: [
+      /* @__PURE__ */ jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4", children: series.map((s) => {
+      const aggregated = s.aggregate?.(data);
+      return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-full translate-y-[-1px]", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxs("span", { className: "text-ui-lg text-neutral4", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxs("span", { className: "text-ui-sm text-neutral2", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { stroke: "rgba(255,255,255,0.08)", vertical: false }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: 5
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: false,
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+const latencySeries = [
+  {
+    dataKey: "p50",
+    label: "p50",
+    color: CHART_COLORS.blue,
+    aggregate: (data) => ({
+      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + d.p50, 0) / data.length)}` : "0",
+      suffix: "avg ms"
+    })
+  },
+  {
+    dataKey: "p95",
+    label: "p95",
+    color: CHART_COLORS.yellow,
+    aggregate: (data) => ({
+      value: data.length > 0 ? `${Math.round(data.reduce((s, d) => s + d.p95, 0) / data.length)}` : "0",
+      suffix: "avg ms"
+    })
+  }
+];
+function LatencyChart({ data }) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" });
+  }
+  return /* @__PURE__ */ jsx(MetricsLineChart, { data, series: latencySeries });
+}
+function LatencyCard() {
+  const { data, isLoading, isError } = useLatencyMetrics();
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const avgP50 = data && data.agentData.length > 0 ? `${Math.round(data.agentData.reduce((s, d) => s + d.p50, 0) / data.agentData.length)}ms` : "—";
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Latency", description: "Hourly p50 and p95 latency." }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: avgP50, label: "Avg p50" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "agents", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.agentData }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.workflowData }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsx(LatencyChart, { data: data.toolData }) })
+    ] }) })
+  ] });
+}
+
+function useAgentRunsKpiMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "agent-runs-kpi", datePreset, customRange],
+    queryFn: () => client.getMetricAggregate({
+      name: ["mastra_agent_duration_ms"],
+      aggregation: "count",
+      filters: { timestamp },
+      comparePeriod: "previous_period"
+    })
+  });
+}
+
+function useAvgScoreKpiMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "avg-score-kpi", datePreset, customRange],
+    queryFn: async () => {
+      const scorersMap = await client.listScorers();
+      const scorerIds = Object.keys(scorersMap ?? {});
+      if (scorerIds.length === 0) {
+        return { value: null, previousValue: null, changePercent: null };
+      }
+      const allResults = await Promise.all(
+        scorerIds.map((scorerId) => client.listScoresByScorerId({ scorerId, perPage: 100 }))
+      );
+      const startMs = timestamp.start.getTime();
+      const endMs = timestamp.end.getTime();
+      const allScoreValues = [];
+      for (const result of allResults) {
+        for (const s of result?.scores ?? []) {
+          const ts = new Date(s.createdAt).getTime();
+          if (ts >= startMs && ts <= endMs) {
+            allScoreValues.push(s.score);
+          }
+        }
+      }
+      if (allScoreValues.length === 0) {
+        return { value: null, previousValue: null, changePercent: null };
+      }
+      const avg = allScoreValues.reduce((sum, v) => sum + v, 0) / allScoreValues.length;
+      return { value: Math.round(avg * 100) / 100, previousValue: null, changePercent: null };
+    }
+  });
+}
+
+function useTotalTokensKpiMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "total-tokens-kpi", datePreset, customRange],
+    queryFn: async () => {
+      const [input, output] = await Promise.all([
+        client.getMetricAggregate({
+          name: ["mastra_model_total_input_tokens"],
+          aggregation: "sum",
+          filters: { timestamp },
+          comparePeriod: "previous_period"
+        }),
+        client.getMetricAggregate({
+          name: ["mastra_model_total_output_tokens"],
+          aggregation: "sum",
+          filters: { timestamp },
+          comparePeriod: "previous_period"
+        })
+      ]);
+      const hasCurrent = input.value != null || output.value != null;
+      const hasPrevious = input.previousValue != null || output.previousValue != null;
+      const value = (input.value ?? 0) + (output.value ?? 0);
+      const previousValue = (input.previousValue ?? 0) + (output.previousValue ?? 0);
+      const changePercent = hasPrevious && previousValue > 0 ? (value - previousValue) / previousValue * 100 : null;
+      return {
+        value: hasCurrent ? value : null,
+        previousValue: hasPrevious ? previousValue : null,
+        changePercent
+      };
+    }
+  });
+}
+
+function AgentRunsKpiCard() {
+  const { data: agentRunsKpi, isLoading, isError } = useAgentRunsKpiMetrics();
+  const hasData = agentRunsKpi?.value != null;
+  return /* @__PURE__ */ jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsx(MetricsKpiCard.Label, { children: "Total Agent Runs" }),
+    /* @__PURE__ */ jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? agentRunsKpi.value.toLocaleString() : "—" }),
+    isError ? /* @__PURE__ */ jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsx(MetricsKpiCard.Loading, {}) : hasData ? agentRunsKpi.changePercent != null ? /* @__PURE__ */ jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: agentRunsKpi.changePercent,
+        prevValue: agentRunsKpi.previousValue?.toLocaleString()
+      }
+    ) : /* @__PURE__ */ jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+function TotalTokensKpiCard() {
+  const { data: totalTokensKpi, isLoading, isError } = useTotalTokensKpiMetrics();
+  const hasData = totalTokensKpi?.value != null;
+  return /* @__PURE__ */ jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsx(MetricsKpiCard.Label, { children: "Total Tokens" }),
+    /* @__PURE__ */ jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? formatCompact(totalTokensKpi.value) : "—" }),
+    isError ? /* @__PURE__ */ jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsx(MetricsKpiCard.Loading, {}) : hasData ? totalTokensKpi.changePercent != null ? /* @__PURE__ */ jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: totalTokensKpi.changePercent,
+        prevValue: totalTokensKpi.previousValue != null ? formatCompact(totalTokensKpi.previousValue) : void 0
+      }
+    ) : /* @__PURE__ */ jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+function AvgScoreKpiCard() {
+  const { data: avgScoreKpi, isLoading, isError } = useAvgScoreKpiMetrics();
+  const hasData = avgScoreKpi?.value != null;
+  return /* @__PURE__ */ jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsx(MetricsKpiCard.Label, { children: "Avg Score" }),
+    /* @__PURE__ */ jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? String(avgScoreKpi.value) : "—" }),
+    isError ? /* @__PURE__ */ jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsx(MetricsKpiCard.Loading, {}) : hasData ? avgScoreKpi.changePercent != null ? /* @__PURE__ */ jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: avgScoreKpi.changePercent,
+        prevValue: avgScoreKpi.previousValue != null ? String(avgScoreKpi.previousValue) : void 0
+      }
+    ) : /* @__PURE__ */ jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+
+function useModelUsageCostMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "model-usage-cost", datePreset, customRange],
+    queryFn: async () => {
+      const metrics = [
+        "mastra_model_total_input_tokens",
+        "mastra_model_total_output_tokens",
+        "mastra_model_input_cache_read_tokens",
+        "mastra_model_input_cache_write_tokens"
+      ];
+      const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all(
+        metrics.map(
+          (name) => client.getMetricBreakdown({
+            name: [name],
+            groupBy: ["model"],
+            aggregation: "sum",
+            filters: { timestamp }
+          })
+        )
+      );
+      const modelMap = /* @__PURE__ */ new Map();
+      const ensureModel = (model) => {
+        if (!modelMap.has(model)) {
+          modelMap.set(model, { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 });
+        }
+        return modelMap.get(model);
+      };
+      for (const group of inputRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        ensureModel(m).input = group.value;
+      }
+      for (const group of outputRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        ensureModel(m).output = group.value;
+      }
+      for (const group of cacheReadRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        ensureModel(m).cacheRead = group.value;
+      }
+      for (const group of cacheWriteRes.groups) {
+        const m = group.dimensions.model ?? "unknown";
+        ensureModel(m).cacheWrite = group.value;
+      }
+      return Array.from(modelMap.entries()).map(([model, vals]) => ({
+        model,
+        input: formatCompact(vals.input),
+        output: formatCompact(vals.output),
+        cacheRead: formatCompact(vals.cacheRead),
+        cacheWrite: formatCompact(vals.cacheWrite)
+      })).sort((a, b) => a.model.localeCompare(b.model));
+    }
+  });
+}
+
+function MetricsDataTable({
+  columns,
+  data,
+  className
+}) {
+  if (columns.length === 0) return null;
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cn("w-full h-full", className), maxHeight: "20rem", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid items-center",
+      style: {
+        gridTemplateColumns: `auto ${columns.slice(1).map(() => "1fr").join(" ")}`
+      },
+      children: [
+        columns.map((col, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface2",
+              i === 0 ? "text-left sticky left-0 z-20 bg-surface2 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : "px-4 text-right"
+            ),
+            children: col.label
+          },
+          `${i}-${col.label}`
+        )),
+        data.map((row, rowIndex) => /* @__PURE__ */ jsx(Fragment$1, { children: columns.map((col, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5",
+              rowIndex === 0 && "border-t-transparent",
+              i === 0 ? "text-left text-neutral3 sticky left-0 z-10 bg-surface2 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : cn(
+                "px-4 text-right tabular-nums",
+                col.highlight ? "text-neutral4 font-semibold" : "text-neutral3"
+              )
+            ),
+            children: col.value(row)
+          },
+          `${row.key}-${i}`
+        )) }, row.key))
+      ]
+    }
+  ) });
+}
+
+function ModelUsageCostCard() {
+  const { data: rows, isLoading, isError } = useModelUsageCostMetrics();
+  const hasData = !!rows && rows.length > 0;
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsx(MetricsCard.TopBar, { children: /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Model Usage", description: "Token consumption by model." }) }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load model usage data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No model usage data yet" }) : /* @__PURE__ */ jsx(
+      MetricsDataTable,
+      {
+        columns: [
+          { label: "Model", value: (row) => row.model },
+          { label: "Input", value: (row) => row.input },
+          { label: "Output", value: (row) => row.output },
+          { label: "Cache Read", value: (row) => row.cacheRead },
+          { label: "Cache Write", value: (row) => row.cacheWrite }
+          // { label: 'Cost', value: () => '—', highlight: true },
+        ],
+        data: rows.map((row) => ({ ...row, key: row.model }))
+      }
+    ) })
+  ] });
+}
+
+function useScoresMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "scores-card", datePreset, customRange],
+    queryFn: async () => {
+      const scorersMap = await client.listScorers();
+      const scorerIds = Object.keys(scorersMap ?? {});
+      if (scorerIds.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
+      }
+      const allResults = await Promise.all(
+        // Limited to 100 most recent scores per scorer; pagination not yet implemented
+        scorerIds.map((scorerId) => client.listScoresByScorerId({ scorerId, perPage: 100 }))
+      );
+      const startMs = timestamp.start.getTime();
+      const endMs = timestamp.end.getTime();
+      const allScores = [];
+      for (let i = 0; i < scorerIds.length; i++) {
+        const scores = allResults[i]?.scores ?? [];
+        for (const s of scores) {
+          const ts = new Date(s.createdAt).getTime();
+          if (ts >= startMs && ts <= endMs) {
+            allScores.push({
+              scorerId: scorerIds[i],
+              score: s.score,
+              createdAt: s.createdAt
+            });
+          }
+        }
+      }
+      if (allScores.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
+      }
+      const byScorer = /* @__PURE__ */ new Map();
+      for (const s of allScores) {
+        if (!byScorer.has(s.scorerId)) byScorer.set(s.scorerId, []);
+        byScorer.get(s.scorerId).push(s.score);
+      }
+      const summaryData = Array.from(byScorer.entries()).map(([scorer, vals]) => ({
+        scorer,
+        avg: vals.reduce((a, b) => a + b, 0) / vals.length,
+        min: Math.min(...vals),
+        max: Math.max(...vals),
+        count: vals.length
+      }));
+      const scorerNames = summaryData.map((s) => s.scorer);
+      const avgScore = summaryData.reduce((s, d) => s + d.avg, 0) / summaryData.length;
+      const bucketMap = /* @__PURE__ */ new Map();
+      for (const s of allScores) {
+        const ts = new Date(s.createdAt);
+        const bucket = Math.floor(ts.getTime() / 36e5) * 36e5;
+        if (!bucketMap.has(bucket)) bucketMap.set(bucket, /* @__PURE__ */ new Map());
+        const scorerMap = bucketMap.get(bucket);
+        if (!scorerMap.has(s.scorerId)) scorerMap.set(s.scorerId, []);
+        scorerMap.get(s.scorerId).push(s.score);
+      }
+      const overTimeData = Array.from(bucketMap.entries()).sort(([a], [b]) => a - b).map(([bucket, scorerMap]) => {
+        const point = {
+          time: new Date(bucket).toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false
+          })
+        };
+        for (const name of scorerNames) {
+          const vals = scorerMap.get(name);
+          if (vals && vals.length > 0) {
+            point[name] = +(vals.reduce((a, b) => a + b, 0) / vals.length).toFixed(2);
+          }
+        }
+        return point;
+      });
+      return {
+        summaryData,
+        overTimeData,
+        scorerNames,
+        avgScore: Math.round(avgScore * 100) / 100
+      };
+    }
+  });
+}
+
+const SERIES_COLORS = [
+  CHART_COLORS.green,
+  CHART_COLORS.blue,
+  CHART_COLORS.purple,
+  CHART_COLORS.orange,
+  CHART_COLORS.pink,
+  CHART_COLORS.yellow
+];
+function ScoresCard() {
+  const { data, isLoading, isError } = useScoresMetrics();
+  const hasData = !!data && data.summaryData.length > 0;
+  const series = useMemo(() => {
+    if (!data?.scorerNames) return [];
+    return data.scorerNames.map((name, i) => ({
+      dataKey: name,
+      label: name,
+      color: SERIES_COLORS[i % SERIES_COLORS.length],
+      aggregate: (points) => ({
+        value: points.length > 0 ? (points.reduce((s, d) => s + (d[name] ?? 0), 0) / points.length).toFixed(2) : "0",
+        suffix: "avg"
+      })
+    }));
+  }, [data?.scorerNames]);
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }),
+      hasData && /* @__PURE__ */ jsx(
+        MetricsCard.Summary,
+        {
+          value: data?.avgScore != null ? `avg ${data.avgScore}` : "—",
+          label: "Across all scorers"
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load scores data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No scores data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "over-time", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "over-time", children: "Over Time" }),
+        /* @__PURE__ */ jsx(Tab, { value: "summary", children: "Summary" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent, { value: "over-time", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsx(
+        MetricsDataTable,
+        {
+          columns: [
+            { label: "Scorer", value: (row) => row.scorer },
+            { label: "Avg", value: (row) => row.avg.toFixed(2), highlight: true },
+            { label: "Min", value: (row) => row.min.toFixed(2) },
+            { label: "Max", value: (row) => row.max.toFixed(2) },
+            { label: "Count", value: (row) => row.count.toLocaleString() }
+          ],
+          data: data.summaryData.map((row) => ({ ...row, key: row.scorer }))
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+function useTokenUsageByAgentMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "token-usage-by-agent", datePreset, customRange],
+    queryFn: async () => {
+      const [inputRes, outputRes] = await Promise.all([
+        client.getMetricBreakdown({
+          name: ["mastra_model_total_input_tokens"],
+          groupBy: ["entityName"],
+          aggregation: "sum",
+          filters: { timestamp }
+        }),
+        client.getMetricBreakdown({
+          name: ["mastra_model_total_output_tokens"],
+          groupBy: ["entityName"],
+          aggregation: "sum",
+          filters: { timestamp }
+        })
+      ]);
+      const agentMap = /* @__PURE__ */ new Map();
+      const ensure = (name) => {
+        if (!agentMap.has(name)) {
+          agentMap.set(name, { input: 0, output: 0 });
+        }
+        return agentMap.get(name);
+      };
+      for (const group of inputRes.groups) {
+        const name = group.dimensions.entityName ?? "unknown";
+        ensure(name).input = group.value;
+      }
+      for (const group of outputRes.groups) {
+        const name = group.dimensions.entityName ?? "unknown";
+        ensure(name).output = group.value;
+      }
+      return Array.from(agentMap.entries()).map(([name, vals]) => ({
+        name,
+        input: vals.input,
+        output: vals.output,
+        total: vals.input + vals.output
+      })).sort((a, b) => b.total - a.total);
+    }
+  });
+}
+
+function HorizontalBars({
+  data,
+  segments,
+  maxVal,
+  fmt,
+  className
+}) {
+  const sorted = [...data].sort((a, b) => {
+    const totalB = b.values.reduce((s, v) => s + v, 0);
+    const totalA = a.values.reduce((s, v) => s + v, 0);
+    return totalB - totalA;
+  });
+  const isStacked = segments.length > 1;
+  return /* @__PURE__ */ jsxs(ScrollArea, { className: cn("w-full h-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4 mt-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ui-sm text-neutral2 pr-2", children: "Total" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
+      const total = d.values.reduce((s, v) => s + v, 0);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-14 h-6 ", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-full flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-y-0 left-0 cursor-default",
+                style: { width: `${maxVal > 0 ? total / maxVal * 100 : 0}%` },
+                children: segments.map((seg, si) => {
+                  const val = d.values[si] ?? 0;
+                  const pct = total > 0 ? val / total * 100 : 0;
+                  const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
+                  const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
+                  if (isStacked) {
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-y-0",
+                          si === 0 && "rounded-l",
+                          isLastWithValue && "rounded-r"
+                        ),
+                        style: {
+                          left: `${left}%`,
+                          width: `${pct}%`,
+                          backgroundColor: seg.color
+                        }
+                      },
+                      seg.label
+                    );
+                  }
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-y-0 left-0 rounded",
+                      style: { width: `${pct}%`, backgroundColor: seg.color }
+                    },
+                    seg.label
+                  );
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none", children: d.name })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral4 tabular-nums shrink-0 pr-3", children: fmt(total) })
+      ] }, d.name);
+    }) })
+  ] });
+}
+
+function TokenUsageByAgentCard() {
+  const { data, isLoading, isError } = useTokenUsageByAgentMetrics();
+  const hasData = !!data && data.length > 0;
+  const totalTokens = data?.reduce((s, d) => s + d.total, 0) ?? 0;
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(
+        MetricsCard.TitleAndDescription,
+        {
+          title: "Token Usage by Agent",
+          description: "Token consumption grouped by agent."
+        }
+      ),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load token usage data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "tokens", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsx(TabList, { children: /* @__PURE__ */ jsx(Tab, { value: "tokens", children: "Tokens" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsx(
+        HorizontalBars,
+        {
+          data: data.map((d) => ({ name: d.name, values: [d.input, d.output] })),
+          segments: [
+            { label: "Input", color: CHART_COLORS.blueDark },
+            { label: "Output", color: CHART_COLORS.blue }
+          ],
+          maxVal: Math.max(...data.map((d) => d.input + d.output)),
+          fmt: formatCompact
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+async function fetchVolume(client, metricName, timestamp) {
+  const res = await client.getMetricBreakdown({
+    name: [metricName],
+    groupBy: ["entityName", "status"],
+    aggregation: "count",
+    filters: { timestamp }
+  });
+  const map = /* @__PURE__ */ new Map();
+  for (const group of res.groups) {
+    const name = group.dimensions.entityName ?? "unknown";
+    const status = group.dimensions.status ?? "ok";
+    if (!map.has(name)) {
+      map.set(name, { completed: 0, errors: 0 });
+    }
+    const entry = map.get(name);
+    if (status === "error") {
+      entry.errors += group.value;
+    } else {
+      entry.completed += group.value;
+    }
+  }
+  return Array.from(map.entries()).map(([name, vals]) => ({ name, ...vals })).sort((a, b) => b.completed + b.errors - (a.completed + a.errors));
+}
+function useTraceVolumeMetrics() {
+  const client = useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return useQuery({
+    queryKey: ["metrics", "trace-volume", datePreset, customRange],
+    queryFn: async () => {
+      const [agentData, workflowData, toolData] = await Promise.all([
+        fetchVolume(client, "mastra_agent_duration_ms", timestamp),
+        fetchVolume(client, "mastra_workflow_duration_ms", timestamp),
+        fetchVolume(client, "mastra_tool_duration_ms", timestamp)
+      ]);
+      return { agentData, workflowData, toolData };
+    }
+  });
+}
+
+function VolumeBars({ data }) {
+  return /* @__PURE__ */ jsx(
+    HorizontalBars,
+    {
+      data: data.map((d) => ({ name: d.name, values: [d.completed, d.errors] })),
+      segments: [
+        { label: "Completed", color: CHART_COLORS.blueDark },
+        { label: "Errors", color: CHART_COLORS.pink }
+      ],
+      maxVal: Math.max(...data.map((d) => d.completed + d.errors)),
+      fmt: formatCompact
+    }
+  );
+}
+function TracesVolumeCard() {
+  const { data, isLoading, isError } = useTraceVolumeMetrics();
+  const hasData = !!data && (data.agentData.length > 0 || data.workflowData.length > 0 || data.toolData.length > 0);
+  const total = data ? [...data.agentData, ...data.workflowData, ...data.toolData].reduce((s, d) => s + d.completed + d.errors, 0) : 0;
+  return /* @__PURE__ */ jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxs(Tabs, { defaultTab: "agents", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.agentData }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.workflowData }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsx(VolumeBars, { data: data.toolData }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No tool data yet" }) })
+    ] }) })
+  ] });
+}
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-8", className), children });
+}
+
+const ANALYTICS_OBSERVABILITY_TYPES = /* @__PURE__ */ new Set([
+  // 'ObservabilityStorageClickhouse',
+  // 'ObservabilityStorageDuckDB',
+  "ObservabilityInMemory"
+]);
+function MetricsDashboard() {
+  const { data, isLoading } = useMastraPackages();
+  const observabilityType = data?.observabilityStorageType;
+  const supportsMetrics = observabilityType ? ANALYTICS_OBSERVABILITY_TYPES.has(observabilityType) : false;
+  const isInMemory = observabilityType === "ObservabilityInMemory";
+  if (isLoading) {
+    return null;
+  }
+  if (!supportsMetrics) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(
+      EmptyState$1,
+      {
+        iconSlot: /* @__PURE__ */ jsx(CircleSlashIcon, {}),
+        titleSlot: "Metrics are not available with your current storage",
+        descriptionSlot: "Metrics currently require in-memory storage for observability. ClickHouse and DuckDB support is coming soon. Relational databases (PostgreSQL, LibSQL) do not support metrics collection. To enable metrics on an existing project, switch the observability storage in the Mastra configuration.",
+        actionSlot: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            as: "a",
+            href: "https://mastra.ai/en/docs/observability/metrics",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              "Metrics Documentation ",
+              /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 content-start pb-10", children: [
+    isInMemory && /* @__PURE__ */ jsxs(Alert, { variant: "info", children: [
+      /* @__PURE__ */ jsx(AlertTitle, { children: "Metrics are not persisted" }),
+      /* @__PURE__ */ jsx(AlertDescription, { as: "p", children: "This project uses in-memory storage for observability. Metrics will be lost on every server restart. For persistent metrics, switch the observability storage to ClickHouse or DuckDB." })
+    ] }),
+    /* @__PURE__ */ jsxs(MetricsFlexGrid, { children: [
+      /* @__PURE__ */ jsx(AgentRunsKpiCard, {}),
+      /* @__PURE__ */ jsx(TotalTokensKpiCard, {}),
+      /* @__PURE__ */ jsx(AvgScoreKpiCard, {})
+    ] }),
+    /* @__PURE__ */ jsxs(MetricsFlexGrid, { children: [
+      /* @__PURE__ */ jsx(ModelUsageCostCard, {}),
+      /* @__PURE__ */ jsx(TokenUsageByAgentCard, {}),
+      /* @__PURE__ */ jsx(ScoresCard, {}),
+      /* @__PURE__ */ jsx(TracesVolumeCard, {}),
+      /* @__PURE__ */ jsx(LatencyCard, {})
+    ] })
+  ] });
+}
+
+const DATE_PRESETS = [
+  { label: "Last 24 hours", value: "24h" },
+  { label: "Last 3 days", value: "3d" },
+  { label: "Last 7 days", value: "7d" },
+  { label: "Last 14 days", value: "14d" },
+  { label: "Last 30 days", value: "30d" }
+];
+function DateRangeSelector() {
+  const { datePreset, setDatePreset } = useMetrics();
+  return /* @__PURE__ */ jsx(
+    SelectFieldBlock,
+    {
+      name: "date-range",
+      labelIsHidden: true,
+      value: datePreset,
+      options: DATE_PRESETS,
+      onValueChange: (value) => setDatePreset(value)
+    }
+  );
+}
+
 function groupTracesByThread(traces) {
   const threadMap = /* @__PURE__ */ new Map();
   const ungrouped = [];
@@ -42028,6 +43215,7 @@ function DatasetsList({ datasets, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Version" }),
       /* @__PURE__ */ jsx(EntityList.TopCell, { className: "text-center", children: "Created" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No Datasets match your search" }) : null,
     filteredData.map((ds) => {
       const name = truncateString(ds.name, 50);
       const description = truncateString(ds.description ?? "", 200);
@@ -49025,6 +50213,7 @@ function McpServersList({ mcpServers, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsx(EntityList.NoMatch, { message: "No MCP Servers match your search" }) : null,
     filteredData.map((server) => /* @__PURE__ */ jsx(McpServerRow, { server }, server.id))
   ] });
 }
@@ -49938,7 +51127,7 @@ function SkillsTable({
       /* @__PURE__ */ jsx(EntryList.Header, { columns: effectiveColumns }),
       skills.length > 0 ? /* @__PURE__ */ jsx(EntryList.Entries, { children: skills.map((skill) => {
         const entry = {
-          id: skill.name,
+          id: skill.path,
           name: skill.name,
           description: skill.description || "—"
         };
@@ -49949,7 +51138,7 @@ function SkillsTable({
             entry,
             columns: effectiveColumns,
             onClick: () => {
-              const url = `${basePath}/${encodeURIComponent(skill.name)}`;
+              const url = `${basePath}/${encodeURIComponent(skill.name)}?path=${encodeURIComponent(skill.path)}`;
               navigate(url);
             },
             children: [
@@ -49984,7 +51173,7 @@ function SkillsTable({
               ] }) })
             ]
           },
-          skill.name
+          skill.path
         );
       }) }) : /* @__PURE__ */ jsx(
         EntryList.Message,
@@ -51166,5 +52355,5 @@ const NavigationCommand = () => {
   );
 };
 
-export { AGENT_CMS_SECTIONS, ActionsMenu, ActivatedSkillsProvider, AddField, AddItemDialog, AddItemsToDatasetDialog, AddSkillDialog, AgentCMSBlock, AgentCMSBlocks, AgentCMSRefBlock, AgentChat, AgentCmsBottomBar, AgentCmsFormShell, AgentCmsSidebar, AgentCoinIcon, AgentCombobox, AgentEditFormProvider, AgentEditLayout, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataCombinedProcessorList, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataSkillList, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWorkspaceToolsList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPageTabs, AgentPlaygroundConfig, AgentPlaygroundEvaluate, AgentPlaygroundRequestContext, AgentPlaygroundReview, AgentPlaygroundTestChat, AgentPlaygroundVersionBar, AgentPlaygroundView, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentTopBarControls, AgentTracesPanel, AgentVersionCombobox, AgentVersionPanel, AgentsCmsLayout, AgentsList, AgentsPage, AgentsSection, AgentsTable, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, AuthRequired, AuthStatus, AutoForm, Avatar, Badge, BranchIcon, Breadcrumb$1 as Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CODE_AGENT_OVERRIDE_SECTIONS, CSVImportDialog, Cell, ChatThreads, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ComposerModelSwitcher, ContentBlock, ContentBlocks, CopyButton, CreateDatasetDialog, CreateDatasetFromItemsDialog, CrossIcon, Crumb, DatasetCombobox, DatasetCompareVersionToolbar, DatasetCompareVersionsList, DatasetExperiments, DatasetExperimentsComparison, DatasetItemContent, DatasetItemHeader, DatasetItemVersionsPanel, DatasetItemsList, DatasetPageContent, DatasetVersionsPanel, DatasetsList, DatasetsTable, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeleteDatasetDialog, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayConditionsDialog, DividerIcon, DocsIcon, DuplicateDatasetDialog, DynamicForm, EditDatasetDialog, EditModeContent, ElementSelect, EmptyDatasetsTable, EmptyState$1 as EmptyState, Entity, EntityAccordionItem, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, ExperimentPageContent, ExperimentPageHeader, ExperimentResultSpanPane, ExperimentResultTracePanel, ExperimentResultsPanel, ExperimentStats, ExperimentTriggerDialog, Field, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FileBrowser, FileViewer, FiltersIcon, FolderIcon, GenerationProvider, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HoverPopover, Icon, InfoIcon, InformationPage, Input, InstructionBlocksPage, IntegrationToolsSection, ItemList, ItemListSkeleton, ItemPageToolbar, JSONImportDialog, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, LLMModels, LLMProviders, Label, LatencyIcon, LinkComponentProvider, ListSearch, LoginButton, LoginPage, LogoWithoutText, LogsIcon, MCPClientCreateContent, MCPClientEditLayout, MCPClientFormSidebar, MCPClientList, MCPClientToolPreview, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MarkdownRenderer, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, McpServersList, MemoryIcon, MemoryPage, MemorySearch, MemorySection, MultiColumn, MultiCombobox, NavigationCommand, NestedFields, Notice, Notification, OPERATORS, OPERATOR_LABELS, ObservationalMemoryProvider, OpenAIIcon, PER_PAGE$2 as PER_PAGE, PageHeader, PermissionDenied, PlaygroundConfigGuard, PlaygroundModelProvider, PlaygroundQueryClient, Popover, PopoverContent, PopoverTrigger, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorCombobox, ProcessorIcon, ProcessorPanel, ProcessorTable, ProcessorsList, PromptBlockCreateContent, PromptBlockEditMain, PromptBlockEditSidebar, PromptBlockPickerDialog, PromptBlockVersionCombobox, PromptBlocksTable, PromptIcon, PromptsList, ProviderLogo, RadioGroup, RadioGroupItem, ReferenceViewerDialog, RepoIcon, RequestContext, RequestContextSchemaForm, RequestContextWrapper, ReviewQueueProvider, Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, STORED_SCORER_TYPES, SchemaRequestContext, SchemaRequestContextProvider, ScoreAsItemDialog, ScoreDelta, ScoreDialog, ScorerCombobox, ScorerCreateContent, ScorerEditMain, ScorerEditSidebar, ScorerSelector, ScorerVersionCombobox, ScorersList, ScorersPage, ScorersSection, ScorersTable, ScoresList, ScoresTools, ScrollArea, ScrollBar, SearchSkillsPanel, SearchWorkspacePanel, Searchbar, SearchbarWrapper, Section, SectionHeader, Sections, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectTrigger, SelectValue, SettingsIcon, ShadcnAutoFormFieldComponents, SideDialog, Skeleton, SkillDetail, SkillIcon, SkillRemoveButton, SkillUpdateButton, SkillsNotConfigured, SkillsPage, SkillsTable, SlashIcon, Slider, SpanScoreList, SpanScoring, SpanTabs, Spinner, StudioConfigContext, StudioConfigForm, StudioConfigProvider, SubSectionHeader, Switch, Tab, TabContent, TabList, Table, Tabs, TargetSelector, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolList, ToolPanel, ToolProviderDialog, ToolTable, ToolkitList, ToolsIcon, ToolsList, ToolsPage, ToolsSection, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceAsItemDialog, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracingSettingsContext, TracingSettingsProvider, Tree, Truncate, TsIcon, Txt, TxtCell, UserAvatar, UserMenu, VARIABLE_PATTERN, VariablesIcon, VariablesPage, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkflowsList, WorkflowsPage, WorkflowsSection, WorkingMemoryContext, WorkingMemoryProvider, WorkspaceNotConfigured, agentFormSchema, arrayToRecord, buildObservationalMemoryForApi, buttonVariants, cleanProviderId, cn, collectMCPClientIds, columns$6 as columns, comboboxStyles, computeAgentInitialValues, convertWorkflowRunStateToStreamResult, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createInstructionBlock, createRefInstructionBlock, createVariableAutocomplete, exportItemsToCSV, exportItemsToJSON, extractPrompt, fieldConfig, fieldsToJSONSchema, findProviderById, flattenSchemaToVariables, formatHierarchicalSpans, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getItemListColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getWorkflowRunsNextPageParam, groupTracesByThread, highlight, inputVariants, is403ForbiddenError, isActive, isAuthenticated, isRule, isRuleGroup, isWorkspaceV1Supported, joinModelId, jsonSchemaToFields, makeAuthCapabilitiesRequest, makeLogoutRequest, makeSSOLoginRequest, mapAgentResponseToDataSource, mapInstructionBlocksFromApi, mapInstructionBlocksToApi, mapScorersToApi, normalizeIntegrationToolsToRecord, normalizeScorersFromApi, normalizeSkillsFromApi, normalizeToolsToRecord, normalizeWorkspaceFromApi, parseError, parseFieldPath, parseJSONCell, parseObservationalMemoryFromApi, parseRow, parseSkillSource, promptBlockFormSchema, providerMapToIcon, removeEmptyValues, resolveSerializedZodOutput, scorerFormSchema, scoresListColumns, selectUniqueRuns, shouldRetryQuery, spanTypePrefixes$1 as spanTypePrefixes, splitModelId, toast, traceScoresListColumns, tracesListColumns, transformIntegrationToolsForApi, useActivateAgentVersion, useActivatePromptBlockVersion, useActivateScorerVersion, useActivatedSkills, useAgent, useAgentCmsForm, useAgentCmsNavigation, useAgentEditForm, useAgentEditFormContext, useAgentExperiments, useAgentInformationTab, useAgentSettings, useAgentSkill, useAgentVersion, useAgentVersions, useAgents, useAllIntegrationTools, useAllModels, useAuthCapabilities, useCSVParser, useCloneThread, useCodemirrorTheme$1 as useCodemirrorTheme, useCompareAgentVersions, useCompareExperiments, useCompareScorerVersions, useCreateAgentVersion, useCreatePromptBlockVersion, useCreateScorerVersion, useCreateSkill, useCreateWorkspaceDirectory, useCredentialsLogin, useCredentialsSignUp, useCurrentRun, useCurrentUser, useDataset, useDatasetExperiment, useDatasetExperimentResults, useDatasetExperiments, useDatasetItem, useDatasetItemVersion, useDatasetItemVersions, useDatasetItems, useDatasetMutations, useDatasetVersions, useDatasets, useDeleteAgentVersion, useDeletePromptBlockVersion, useDeleteScorerVersion, useDeleteThread, useDeleteWorkflowRun, useDeleteWorkspaceFile, useExecuteAgentTool, useExecuteMCPTool, useExecuteProcessor, useExecuteTool, useExperimentalFeatures, useFilteredModels, useFilteredProviders, useGenerationTasks, useHasObservability, useInView, useIndexWorkspaceContent, useInstallSkill, useIsCmsAvailable, useItemSelection, useJSONParser, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLLMProviders, useLinkComponent, useLogout, useMCPServerTool, useMCPServerTools, useMCPServerToolsById, useMCPServers, useMainSidebar, useMastraPackages, useMastraPlatform, useMaybeSidebar, useMemory, useMemoryConfig, useMemorySearch, useMemoryWithOMStatus, useMergedRequestContext, useNavigationCommand, useObservationalMemory, useObservationalMemoryContext, useOptionalAgentEditFormContext, usePackageUpdates, usePermissions, usePlaygroundModel, usePlaygroundStore, usePopularSkillsSh, useProcessor, useProcessors, usePromptBlockEditForm, usePromptBlockVersion, usePromptBlockVersions, useProviderTools, useRemoveSkill, useReorderModelList, useRequestContextPresets, useResetAgentModel, useRestoreAgentVersion, useRestorePromptBlockVersion, useRestoreScorerVersion, useReviewQueue, useSSOLogin, useSchemaRequestContext, useScorer, useScorerEditForm, useScorerVersion, useScorerVersions, useScorers, useScoresByExperimentId, useScoresByScorerId, useSearchSkillsSh, useSearchWorkspace, useSearchWorkspaceSkills, useSkillPreview, useSpeechRecognition, useStoredAgent, useStoredAgentMutations, useStoredAgents, useStoredPromptBlock, useStoredPromptBlockMutations, useStoredPromptBlocks, useStoredScorer, useStoredScorerMutations, useStoredSkills, useStudioConfig, useTableKeyboardNavigation, useThread, useThreadInput, useThreads, useTool, useToolProviders, useToolkits, useTools, useTraceSpanScores, useTracingSettings, useTryConnectMcp, useUpdateAgentModel, useUpdateModelInModelList, useUpdateSkills, useWorkflow, useWorkflowRun, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory, useWorkspaceFile, useWorkspaceFileStat, useWorkspaceFiles, useWorkspaceInfo, useWorkspaceSkill, useWorkspaceSkillReference, useWorkspaceSkillReferences, useWorkspaceSkills, useWorkspaces, useWriteWorkspaceFile, useWriteWorkspaceFileFromFile, validateCsvRows, validateJSONData, validateMappedData, variableHighlight };
+export { AGENT_CMS_SECTIONS, ActionsMenu, ActivatedSkillsProvider, AddField, AddItemDialog, AddItemsToDatasetDialog, AddSkillDialog, AgentCMSBlock, AgentCMSBlocks, AgentCMSRefBlock, AgentChat, AgentCmsBottomBar, AgentCmsFormShell, AgentCmsSidebar, AgentCoinIcon, AgentCombobox, AgentEditFormProvider, AgentEditLayout, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentLayout, AgentMemory, AgentMetadata, AgentMetadataCombinedProcessorList, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataSkillList, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWorkspaceToolsList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPageTabs, AgentPlaygroundConfig, AgentPlaygroundEvaluate, AgentPlaygroundRequestContext, AgentPlaygroundReview, AgentPlaygroundTestChat, AgentPlaygroundVersionBar, AgentPlaygroundView, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentTopBarControls, AgentTracesPanel, AgentVersionCombobox, AgentVersionPanel, AgentsCmsLayout, AgentsList, AgentsPage, AgentsSection, AgentsTable, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, ApiIcon, AuthRequired, AuthStatus, AutoForm, Avatar, Badge, BranchIcon, Breadcrumb$1 as Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CHART_COLORS, CODE_AGENT_OVERRIDE_SECTIONS, CSVImportDialog, Cell, ChatThreads, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ComposerModelSwitcher, ContentBlock, ContentBlocks, CopyButton, CreateDatasetDialog, CreateDatasetFromItemsDialog, CrossIcon, Crumb, DatasetCombobox, DatasetCompareVersionToolbar, DatasetCompareVersionsList, DatasetExperiments, DatasetExperimentsComparison, DatasetItemContent, DatasetItemHeader, DatasetItemVersionsPanel, DatasetItemsList, DatasetPageContent, DatasetVersionsPanel, DatasetsList, DatasetsTable, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeleteDatasetDialog, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayConditionsDialog, DividerIcon, DocsIcon, DuplicateDatasetDialog, DynamicForm, EditDatasetDialog, EditModeContent, ElementSelect, EmptyDatasetsTable, EmptyState$1 as EmptyState, Entity, EntityAccordionItem, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, ExperimentPageContent, ExperimentPageHeader, ExperimentResultSpanPane, ExperimentResultTracePanel, ExperimentResultsPanel, ExperimentStats, ExperimentTriggerDialog, Field, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FileBrowser, FileViewer, FiltersIcon, FolderIcon, GenerationProvider, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, InfoIcon, InformationPage, Input, InstructionBlocksPage, IntegrationToolsSection, ItemList, ItemListSkeleton, ItemPageToolbar, JSONImportDialog, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, LLMModels, LLMProviders, Label, LatencyCard, LatencyIcon, LinkComponentProvider, ListSearch, LoginButton, LoginPage, LogoWithoutText, LogsIcon, MCPClientCreateContent, MCPClientEditLayout, MCPClientFormSidebar, MCPClientList, MCPClientToolPreview, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MarkdownRenderer, MastraPackagesInfo, MastraVersionFooter, McpCoinIcon, McpServerIcon, McpServersList, MemoryIcon, MemoryPage, MemorySearch, MemorySection, MetricsCard, MetricsDashboard, MetricsDataTable, MetricsKpiCard, MetricsProvider, ModelUsageCostCard, MultiColumn, MultiCombobox, NavigationCommand, NestedFields, Notice, Notification, OPERATORS, OPERATOR_LABELS, ObservationalMemoryProvider, OpenAIIcon, PER_PAGE$2 as PER_PAGE, PageHeader, PermissionDenied, PlaygroundConfigGuard, PlaygroundModelProvider, PlaygroundQueryClient, Popover, PopoverContent, PopoverTrigger, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorCombobox, ProcessorIcon, ProcessorPanel, ProcessorTable, ProcessorsList, PromptBlockCreateContent, PromptBlockEditMain, PromptBlockEditSidebar, PromptBlockPickerDialog, PromptBlockVersionCombobox, PromptBlocksTable, PromptIcon, PromptsList, ProviderLogo, RadioGroup, RadioGroupItem, ReferenceViewerDialog, RepoIcon, RequestContext, RequestContextSchemaForm, RequestContextWrapper, ReviewQueueProvider, Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, STORED_SCORER_TYPES, SchemaRequestContext, SchemaRequestContextProvider, ScoreAsItemDialog, ScoreDelta, ScoreDialog, ScorerCombobox, ScorerCreateContent, ScorerEditMain, ScorerEditSidebar, ScorerSelector, ScorerVersionCombobox, ScorersList, ScorersPage, ScorersSection, ScorersTable, ScoresCard, ScoresList, ScoresTools, ScrollArea, ScrollBar, SearchSkillsPanel, SearchWorkspacePanel, Searchbar, SearchbarWrapper, Section, SectionHeader, Sections, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectTrigger, SelectValue, SettingsIcon, ShadcnAutoFormFieldComponents, SideDialog, Skeleton, SkillDetail, SkillIcon, SkillRemoveButton, SkillUpdateButton, SkillsNotConfigured, SkillsPage, SkillsTable, SlashIcon, Slider, SpanScoreList, SpanScoring, SpanTabs, Spinner, StudioConfigContext, StudioConfigForm, StudioConfigProvider, SubSectionHeader, Switch, Tab, TabContent, TabList, Table, Tabs, TargetSelector, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, TokenUsageByAgentCard, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolList, ToolPanel, ToolProviderDialog, ToolTable, ToolkitList, ToolsIcon, ToolsList, ToolsPage, ToolsSection, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceAsItemDialog, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineSpan, TraceTimelineTools, TracesList, TracesTools, TracesVolumeCard, TracingSettingsContext, TracingSettingsProvider, Tree, Truncate, TsIcon, Txt, TxtCell, UserAvatar, UserMenu, VARIABLE_PATTERN, VariablesIcon, VariablesPage, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowLayout, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowStepDetailContext, WorkflowStepDetailProvider, WorkflowTable, WorkflowTrigger, WorkflowsList, WorkflowsPage, WorkflowsSection, WorkingMemoryContext, WorkingMemoryProvider, WorkspaceNotConfigured, agentFormSchema, arrayToRecord, buildObservationalMemoryForApi, buttonVariants, cleanProviderId, cn, collectMCPClientIds, columns$6 as columns, comboboxStyles, computeAgentInitialValues, convertWorkflowRunStateToStreamResult, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createInstructionBlock, createRefInstructionBlock, createVariableAutocomplete, exportItemsToCSV, exportItemsToJSON, extractPrompt, fieldConfig, fieldsToJSONSchema, findProviderById, flattenSchemaToVariables, formatCompact, formatHierarchicalSpans, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getItemListColumnTemplate, getMainContentContentClassName, getShortId, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getWorkflowRunsNextPageParam, groupTracesByThread, highlight, inputVariants, is403ForbiddenError, isActive, isAuthenticated, isRule, isRuleGroup, isValidPreset, isWorkspaceV1Supported, joinModelId, jsonSchemaToFields, makeAuthCapabilitiesRequest, makeLogoutRequest, makeSSOLoginRequest, mapAgentResponseToDataSource, mapInstructionBlocksFromApi, mapInstructionBlocksToApi, mapScorersToApi, normalizeIntegrationToolsToRecord, normalizeScorersFromApi, normalizeSkillsFromApi, normalizeToolsToRecord, normalizeWorkspaceFromApi, parseError, parseFieldPath, parseJSONCell, parseObservationalMemoryFromApi, parseRow, parseSkillSource, promptBlockFormSchema, providerMapToIcon, removeEmptyValues, resolveSerializedZodOutput, scorerFormSchema, scoresListColumns, selectUniqueRuns, shouldRetryQuery, spanTypePrefixes$1 as spanTypePrefixes, splitModelId, toast, traceScoresListColumns, tracesListColumns, transformIntegrationToolsForApi, useActivateAgentVersion, useActivatePromptBlockVersion, useActivateScorerVersion, useActivatedSkills, useAgent, useAgentCmsForm, useAgentCmsNavigation, useAgentEditForm, useAgentEditFormContext, useAgentExperiments, useAgentInformationTab, useAgentRunsKpiMetrics, useAgentSettings, useAgentSkill, useAgentVersion, useAgentVersions, useAgents, useAllIntegrationTools, useAllModels, useAuthCapabilities, useAvgScoreKpiMetrics, useCSVParser, useCloneThread, useCodemirrorTheme$1 as useCodemirrorTheme, useCompareAgentVersions, useCompareExperiments, useCompareScorerVersions, useCreateAgentVersion, useCreatePromptBlockVersion, useCreateScorerVersion, useCreateSkill, useCreateWorkspaceDirectory, useCredentialsLogin, useCredentialsSignUp, useCurrentRun, useCurrentUser, useDataset, useDatasetExperiment, useDatasetExperimentResults, useDatasetExperiments, useDatasetItem, useDatasetItemVersion, useDatasetItemVersions, useDatasetItems, useDatasetMutations, useDatasetVersions, useDatasets, useDeleteAgentVersion, useDeletePromptBlockVersion, useDeleteScorerVersion, useDeleteThread, useDeleteWorkflowRun, useDeleteWorkspaceFile, useExecuteAgentTool, useExecuteMCPTool, useExecuteProcessor, useExecuteTool, useExperimentalFeatures, useFilteredModels, useFilteredProviders, useGenerationTasks, useHasObservability, useInView, useIndexWorkspaceContent, useInstallSkill, useIsCmsAvailable, useItemSelection, useJSONParser, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLLMProviders, useLatencyMetrics, useLinkComponent, useLogout, useMCPServerTool, useMCPServerTools, useMCPServerToolsById, useMCPServers, useMainSidebar, useMastraPackages, useMastraPlatform, useMaybeSidebar, useMemory, useMemoryConfig, useMemorySearch, useMemoryWithOMStatus, useMergedRequestContext, useMetrics, useMetricsFilters, useModelUsageCostMetrics, useNavigationCommand, useObservationalMemory, useObservationalMemoryContext, useOptionalAgentEditFormContext, usePackageUpdates, usePermissions, usePlaygroundModel, usePlaygroundStore, usePopularSkillsSh, useProcessor, useProcessors, usePromptBlockEditForm, usePromptBlockVersion, usePromptBlockVersions, useProviderTools, useRemoveSkill, useReorderModelList, useRequestContextPresets, useResetAgentModel, useRestoreAgentVersion, useRestorePromptBlockVersion, useRestoreScorerVersion, useReviewQueue, useSSOLogin, useSchemaRequestContext, useScorer, useScorerEditForm, useScorerVersion, useScorerVersions, useScorers, useScoresByExperimentId, useScoresByScorerId, useScoresMetrics, useSearchSkillsSh, useSearchWorkspace, useSearchWorkspaceSkills, useSkillPreview, useSpeechRecognition, useStoredAgent, useStoredAgentMutations, useStoredAgents, useStoredPromptBlock, useStoredPromptBlockMutations, useStoredPromptBlocks, useStoredScorer, useStoredScorerMutations, useStoredSkills, useStudioConfig, useTableKeyboardNavigation, useThread, useThreadInput, useThreads, useTokenUsageByAgentMetrics, useTool, useToolProviders, useToolkits, useTools, useTotalTokensKpiMetrics, useTraceSpanScores, useTraceVolumeMetrics, useTracingSettings, useTryConnectMcp, useUpdateAgentModel, useUpdateModelInModelList, useUpdateSkills, useWorkflow, useWorkflowRun, useWorkflowRuns, useWorkflowStepDetail, useWorkflows, useWorkingMemory, useWorkspaceFile, useWorkspaceFileStat, useWorkspaceFiles, useWorkspaceInfo, useWorkspaceSkill, useWorkspaceSkillReference, useWorkspaceSkillReferences, useWorkspaceSkills, useWorkspaces, useWriteWorkspaceFile, useWriteWorkspaceFileFromFile, validateCsvRows, validateJSONData, validateMappedData, variableHighlight };
 //# sourceMappingURL=index.es.js.map