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

package/dist/index.cjs.js

@@ -70,6 +70,7 @@ const semver = require('semver');
 const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 const features = require('@mastra/core/features');
 const observability = require('@mastra/core/observability');
+const recharts = require('recharts');
 const Papa = require('papaparse');
 const reactDom = require('react-dom');
 const isToday = require('date-fns/isToday');
@@ -12612,6 +12613,10 @@ function EntityListDescriptionCell({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
 }
 
+function EntityListNoMatch({ message = "Nothing matches your search", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message }) });
+}
+
 function EntityListRoot({ children, columns, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -12723,7 +12728,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%"];
@@ -12797,6 +12803,7 @@ function WorkflowsList({ workflows, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { children: "Description" }),
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { children: "Number of steps" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -13033,7 +13040,7 @@ const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.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__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixTabs__namespace.List,
     {
@@ -13042,7 +13049,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
@@ -19990,6 +19998,7 @@ function ScorersList({ scorers, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Agents" }),
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Workflows" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -22026,9 +22035,16 @@ const AgentMetadataSkillList = ({ skills, agentId, workspaceId }) => {
       }
     );
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: isActivated ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          href: paths.agentSkillLink(agentId, skill.name, skill.path, workspaceId),
+          "data-testid": "skill-badge",
+          children: badge
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "bg-surface3 text-neutral6 border border-border1", children: "Active" })
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.name);
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentSkillLink(agentId, skill.name, skill.path, workspaceId), "data-testid": "skill-badge", children: badge }) }, skill.path);
   }) });
 };
 function formatWorkspaceToolName(toolName) {
@@ -22767,6 +22783,8 @@ const AgentMemoryConfig = ({ agentId }) => {
 };
 
 const formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e5) return `${(n / 1e3).toFixed(0)}k`;
   if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
   return Math.round(n).toString();
 };
@@ -22774,6 +22792,11 @@ const getBarColor = (percentage) => {
   if (percentage >= 60) return "bg-blue-500";
   return "bg-green-500";
 };
+const getModelLabel = (model, modelRouting) => {
+  if (typeof model === "string") return model;
+  if (modelRouting?.length) return "Auto (tiered)";
+  return void 0;
+};
 const useElapsedTime = (isActive) => {
   const [elapsed, setElapsed] = React.useState(0);
   const startTimeRef = React.useRef(null);
@@ -22800,6 +22823,7 @@ const ProgressBar = ({
   label,
   isActive = false,
   model,
+  modelRouting,
   baseThreshold,
   totalBudget
 }) => {
@@ -22832,7 +22856,15 @@ const ProgressBar = ({
               " ",
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral5", children: model || "not configured" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            modelRouting?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4", children: "Routing:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 pl-2 space-y-0.5", children: modelRouting.map((route) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral5", children: [
+                "≤",
+                formatTokens(route.upTo),
+                " → ",
+                route.model
+              ] }, `${route.upTo}-${route.model}`)) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4", children: "Threshold:" }),
               " ",
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral5", children: [
@@ -22953,8 +22985,16 @@ const AgentObservationalMemory = ({ agentId, resourceId, threadId }) => {
   const history = omData?.history ?? [];
   const omAgentConfig = configData?.config?.observationalMemory;
   const recordConfig = record?.config;
-  const observationModel = recordConfig?.observationModel ?? omAgentConfig?.observationModel;
-  const reflectionModel = recordConfig?.reflectionModel ?? omAgentConfig?.reflectionModel;
+  const observationModelRouting = recordConfig?.observationModelRouting ?? recordConfig?.observation?.routing ?? omAgentConfig?.observationModelRouting ?? omAgentConfig?.observation?.routing;
+  const reflectionModelRouting = recordConfig?.reflectionModelRouting ?? recordConfig?.reflection?.routing ?? omAgentConfig?.reflectionModelRouting ?? omAgentConfig?.reflection?.routing;
+  const observationModel = getModelLabel(
+    recordConfig?.observationModel ?? recordConfig?.observation?.model ?? omAgentConfig?.observationModel ?? omAgentConfig?.model ?? omAgentConfig?.observation?.model,
+    observationModelRouting
+  );
+  const reflectionModel = getModelLabel(
+    recordConfig?.reflectionModel ?? recordConfig?.reflection?.model ?? omAgentConfig?.reflectionModel ?? omAgentConfig?.model ?? omAgentConfig?.reflection?.model,
+    reflectionModelRouting
+  );
   const getThresholdValue = (threshold, defaultValue) => {
     if (!threshold) return defaultValue;
     if (typeof threshold === "number") return threshold;
@@ -23063,6 +23103,7 @@ const AgentObservationalMemory = ({ agentId, resourceId, threadId }) => {
           label: "Messages",
           isActive: isObserving,
           model: observationModel,
+          modelRouting: observationModelRouting,
           baseThreshold: baseMessageTokens,
           totalBudget
         }
@@ -23076,6 +23117,7 @@ const AgentObservationalMemory = ({ agentId, resourceId, threadId }) => {
           isActive: isReflecting,
           baseThreshold: baseObservationTokens,
           model: reflectionModel,
+          modelRouting: reflectionModelRouting,
           totalBudget
         }
       )
@@ -25119,6 +25161,7 @@ function PromptsList({ promptBlocks, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Has Draft" }),
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Is Published" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -30627,7 +30670,7 @@ const useWorkspaceSkills = (options) => {
 const useWorkspaceSkill = (skillName, options) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["workspace", "skills", skillName, options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, options?.workspaceId],
     queryFn: async () => {
       if (!compatibility.isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30636,7 +30679,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 && compatibility.isWorkspaceV1Supported(client),
@@ -30646,7 +30689,7 @@ const useWorkspaceSkill = (skillName, options) => {
 const useWorkspaceSkillReferences = (skillName, options) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["workspace", "skills", skillName, "references", options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, "references", options?.workspaceId],
     queryFn: async () => {
       if (!compatibility.isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30655,7 +30698,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 && compatibility.isWorkspaceV1Supported(client),
@@ -30665,7 +30708,7 @@ const useWorkspaceSkillReferences = (skillName, options) => {
 const useWorkspaceSkillReference = (skillName, referencePath, options) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["workspace", "skills", skillName, "references", referencePath, options?.workspaceId],
+    queryKey: ["workspace", "skills", skillName, options?.path, "references", referencePath, options?.workspaceId],
     queryFn: async () => {
       if (!compatibility.isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30674,7 +30717,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 && compatibility.isWorkspaceV1Supported(client),
@@ -30696,7 +30739,7 @@ const useSearchWorkspaceSkills = () => {
 const useAgentSkill = (agentId, skillName, options) => {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["agents", agentId, "skills", skillName, options?.workspaceId],
+    queryKey: ["agents", agentId, "skills", skillName, options?.path, options?.workspaceId],
     queryFn: async () => {
       if (!compatibility.isWorkspaceV1Supported(client)) {
         throw new Error("Workspace v1 not supported by core or client");
@@ -30705,7 +30748,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 && compatibility.isWorkspaceV1Supported(client),
@@ -39313,6 +39356,7 @@ function AgentsList({ agents, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -39584,6 +39628,7 @@ function ProcessorsList({ processors, isLoading, error, search = "" }) {
       ),
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCellSmart, { short: "Used by", long: "Used by Agents", className: "text-center" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -40038,6 +40083,7 @@ function ToolsList({ tools, agents, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -40860,6 +40906,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, dateFns.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 = React.createContext({
+  datePreset: "24h",
+  setDatePreset: () => {
+  },
+  customRange: void 0,
+  setCustomRange: () => {
+  },
+  dateRangeLabel: "Last 24 hours",
+  filterGroups: [],
+  setFilterGroups: () => {
+  },
+  multiplier: 1
+});
+function useMetrics() {
+  return React.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 `${dateFns.format(customRange.from, "MMM d, yyyy")} – ${dateFns.format(customRange.to, "MMM d, yyyy")}`;
+    }
+    return dateFns.format(customRange.from, "MMM d, yyyy");
+  }
+  return "Custom range";
+}
+function MetricsProvider({
+  children,
+  initialPreset,
+  onPresetChange
+}) {
+  const [datePreset, setDatePresetState] = React.useState(initialPreset ?? "24h");
+  const [customRange, setCustomRange] = React.useState(void 0);
+  const [filterGroups, setFilterGroups] = React.useState([]);
+  const dateRangeLabel = getDateRangeLabel(datePreset, customRange);
+  const multiplier = getMultiplier(datePreset, customRange, filterGroups);
+  React.useEffect(() => {
+    if (initialPreset && initialPreset !== datePreset) {
+      setDatePresetState(initialPreset);
+    }
+  }, [initialPreset]);
+  const setDatePreset = React.useCallback(
+    (v) => {
+      setDatePresetState(v);
+      onPresetChange?.(v);
+    },
+    [onPresetChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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__ */ jsxRuntime.jsx("div", { className: cn("overflow-x-auto ", className), children });
+}
+
+function MetricsCardDescription({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm text-accent2", children: message }) });
+}
+
+function MetricsCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: spacings.Colors.neutral1 }) });
+}
+
+function MetricsCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral1 text-sm", children: message }) });
+}
+
+function DashboardCard({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-lg p-6 bg-surface2", className), children });
+}
+
+function MetricsCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("grid justify-end content-start text-right gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-lg font-semibold text-neutral4 leading-none", children: value }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral2", children: label })
+  ] });
+}
+
+function MetricsCardTitle({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-ui-md font-normal text-neutral4", className), children });
+}
+
+function MetricsCardTitleAndDescription(props) {
+  if ("children" in props) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: props.className, children: props.children });
+  }
+  const { title, description } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsCardTitle, { children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(MetricsCardDescription, { children: description })
+  ] });
+}
+
+function MetricsCardTopBar({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: spacings.Colors.neutral1 }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DashboardCard, { className: cn("flex-1 min-w-[15rem]", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-icon6", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-icon2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-full translate-y-[-1px]", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-lg text-neutral4", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral2", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: "rgba(255,255,255,0.08)", vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: 5
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.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__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No latency data yet" });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Latency", description: "Hourly p50 and p95 latency." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: avgP50, label: "Avg p50" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load latency data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No latency data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "agents", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "agents", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.agentData }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "workflows", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.workflowData }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tools", children: /* @__PURE__ */ jsxRuntime.jsx(LatencyChart, { data: data.toolData }) })
+    ] }) })
+  ] });
+}
+
+function useAgentRunsKpiMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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__ */ jsxRuntime.jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Label, { children: "Total Agent Runs" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? agentRunsKpi.value.toLocaleString() : "—" }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Loading, {}) : hasData ? agentRunsKpi.changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: agentRunsKpi.changePercent,
+        prevValue: agentRunsKpi.previousValue?.toLocaleString()
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+function TotalTokensKpiCard() {
+  const { data: totalTokensKpi, isLoading, isError } = useTotalTokensKpiMetrics();
+  const hasData = totalTokensKpi?.value != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Label, { children: "Total Tokens" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? formatCompact(totalTokensKpi.value) : "—" }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Loading, {}) : hasData ? totalTokensKpi.changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: totalTokensKpi.changePercent,
+        prevValue: totalTokensKpi.previousValue != null ? formatCompact(totalTokensKpi.previousValue) : void 0
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+function AvgScoreKpiCard() {
+  const { data: avgScoreKpi, isLoading, isError } = useAvgScoreKpiMetrics();
+  const hasData = avgScoreKpi?.value != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MetricsKpiCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Label, { children: "Avg Score" }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Value, { className: hasData ? void 0 : "invisible", children: hasData ? String(avgScoreKpi.value) : "—" }),
+    isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Error, {}) : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.Loading, {}) : hasData ? avgScoreKpi.changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      MetricsKpiCard.Change,
+      {
+        changePct: avgScoreKpi.changePercent,
+        prevValue: avgScoreKpi.previousValue != null ? String(avgScoreKpi.previousValue) : void 0
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoChange, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetricsKpiCard.NoData, {})
+  ] });
+}
+
+function useModelUsageCostMetrics() {
+  const client = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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__ */ jsxRuntime.jsx(ScrollArea, { className: cn("w-full h-full", className), maxHeight: "20rem", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "grid items-center",
+      style: {
+        gridTemplateColumns: `auto ${columns.slice(1).map(() => "1fr").join(" ")}`
+      },
+      children: [
+        columns.map((col, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(React.Fragment, { children: columns.map((col, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TopBar, { children: /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Model Usage", description: "Token consumption by model." }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load model usage data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No model usage data yet" }) : /* @__PURE__ */ jsxRuntime.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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 = React.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__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(
+        MetricsCard.Summary,
+        {
+          value: data?.avgScore != null ? `avg ${data.avgScore}` : "—",
+          label: "Across all scorers"
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load scores data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No scores data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "over-time", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "over-time", children: "Over Time" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "summary", children: "Summary" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "over-time", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsxRuntime.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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__ */ jsxRuntime.jsxs(ScrollArea, { className: cn("w-full h-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4 mt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-ui-sm text-neutral2 pr-2", children: "Total" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
+      const total = d.values.reduce((s, v) => s + v, 0);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-14 h-6 ", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute inset-y-0 left-0 rounded",
+                      style: { width: `${pct}%`, backgroundColor: seg.color }
+                    },
+                    seg.label
+                  );
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MetricsCard.TitleAndDescription,
+        {
+          title: "Token Usage by Agent",
+          description: "Token consumption grouped by agent."
+        }
+      ),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCompact(totalTokens), label: "Total tokens" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load token usage data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No token usage data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "tokens", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TabList, { children: /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tokens", children: "Tokens" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tokens", children: /* @__PURE__ */ jsxRuntime.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 = react.useMastraClient();
+  const { datePreset, customRange, timestamp } = useMetricsFilters();
+  return reactQuery.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MetricsCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Trace Volume", description: "Runs and call counts." }),
+      hasData && /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Summary, { value: formatCompact(total), label: "Total runs" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load trace volume data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No trace volume data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "agents", className: "grid grid-rows-[auto_1fr] overflow-y-auto h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "agents", children: "Agents" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "workflows", children: "Workflows" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tools", children: "Tools" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "agents", children: data.agentData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.agentData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No agent data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "workflows", children: data.workflowData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.workflowData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No workflow data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tools", children: data.toolData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeBars, { data: data.toolData }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No tool data yet" }) })
+    ] }) })
+  ] });
+}
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState$1,
+      {
+        iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "ghost",
+            as: "a",
+            href: "https://mastra.ai/en/docs/observability/metrics",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              "Metrics Documentation ",
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {})
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 content-start pb-10", children: [
+    isInMemory && /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "info", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Metrics are not persisted" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MetricsFlexGrid, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AgentRunsKpiCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(TotalTokensKpiCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(AvgScoreKpiCard, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MetricsFlexGrid, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ModelUsageCostCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(TokenUsageByAgentCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ScoresCard, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(TracesVolumeCard, {}),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = [];
@@ -42061,6 +43274,7 @@ function DatasetsList({ datasets, isLoading, error, search = "" }) {
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Version" }),
       /* @__PURE__ */ jsxRuntime.jsx(EntityList.TopCell, { className: "text-center", children: "Created" })
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.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);
@@ -49058,6 +50272,7 @@ function McpServersList({ mcpServers, isLoading, error, search = "" }) {
         }
       )
     ] }),
+    filteredData.length === 0 && search ? /* @__PURE__ */ jsxRuntime.jsx(EntityList.NoMatch, { message: "No MCP Servers match your search" }) : null,
     filteredData.map((server) => /* @__PURE__ */ jsxRuntime.jsx(McpServerRow, { server }, server.id))
   ] });
 }
@@ -49971,7 +51186,7 @@ function SkillsTable({
       /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: effectiveColumns }),
       skills.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: skills.map((skill) => {
         const entry = {
-          id: skill.name,
+          id: skill.path,
           name: skill.name,
           description: skill.description || "—"
         };
@@ -49982,7 +51197,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: [
@@ -50017,7 +51232,7 @@ function SkillsTable({
               ] }) })
             ]
           },
-          skill.name
+          skill.path
         );
       }) }) : /* @__PURE__ */ jsxRuntime.jsx(
         EntryList.Message,
@@ -51284,6 +52499,7 @@ exports.Breadcrumb = Breadcrumb$1;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
+exports.CHART_COLORS = CHART_COLORS;
 exports.CODE_AGENT_OVERRIDE_SECTIONS = CODE_AGENT_OVERRIDE_SECTIONS;
 exports.CSVImportDialog = CSVImportDialog;
 exports.Cell = Cell;
@@ -51334,6 +52550,7 @@ exports.DatasetVersionsPanel = DatasetVersionsPanel;
 exports.DatasetsList = DatasetsList;
 exports.DatasetsTable = DatasetsTable;
 exports.DatePicker = DatePicker;
+exports.DateRangeSelector = DateRangeSelector;
 exports.DateTimeCell = DateTimeCell;
 exports.DateTimePicker = DateTimePicker;
 exports.DateTimePickerContent = DateTimePickerContent;
@@ -51407,6 +52624,7 @@ exports.HeaderAction = HeaderAction;
 exports.HeaderGroup = HeaderGroup;
 exports.HeaderTitle = HeaderTitle;
 exports.HomeIcon = HomeIcon;
+exports.HorizontalBars = HorizontalBars;
 exports.HoverPopover = HoverPopover;
 exports.Icon = Icon;
 exports.InfoIcon = InfoIcon;
@@ -51425,6 +52643,7 @@ exports.KeyValueList = KeyValueList;
 exports.LLMModels = LLMModels;
 exports.LLMProviders = LLMProviders;
 exports.Label = Label;
+exports.LatencyCard = LatencyCard;
 exports.LatencyIcon = LatencyIcon;
 exports.LinkComponentProvider = LinkComponentProvider;
 exports.ListSearch = ListSearch;
@@ -51456,6 +52675,12 @@ exports.MemoryIcon = MemoryIcon;
 exports.MemoryPage = MemoryPage;
 exports.MemorySearch = MemorySearch;
 exports.MemorySection = MemorySection;
+exports.MetricsCard = MetricsCard;
+exports.MetricsDashboard = MetricsDashboard;
+exports.MetricsDataTable = MetricsDataTable;
+exports.MetricsKpiCard = MetricsKpiCard;
+exports.MetricsProvider = MetricsProvider;
+exports.ModelUsageCostCard = ModelUsageCostCard;
 exports.MultiColumn = MultiColumn;
 exports.MultiCombobox = MultiCombobox;
 exports.NavigationCommand = NavigationCommand;
@@ -51523,6 +52748,7 @@ exports.ScorersList = ScorersList;
 exports.ScorersPage = ScorersPage;
 exports.ScorersSection = ScorersSection;
 exports.ScorersTable = ScorersTable;
+exports.ScoresCard = ScoresCard;
 exports.ScoresList = ScoresList;
 exports.ScoresTools = ScoresTools;
 exports.ScrollArea = ScrollArea;
@@ -51587,6 +52813,7 @@ exports.ThreadLink = ThreadLink;
 exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.TimePicker = TimePicker;
+exports.TokenUsageByAgentCard = TokenUsageByAgentCard;
 exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolCombobox = ToolCombobox;
 exports.ToolFallback = ToolFallback;
@@ -51613,6 +52840,7 @@ exports.TraceTimelineSpan = TraceTimelineSpan;
 exports.TraceTimelineTools = TraceTimelineTools;
 exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
+exports.TracesVolumeCard = TracesVolumeCard;
 exports.TracingSettingsContext = TracingSettingsContext;
 exports.TracingSettingsProvider = TracingSettingsProvider;
 exports.Tree = Tree;
@@ -51670,6 +52898,7 @@ exports.fieldConfig = fieldConfig;
 exports.fieldsToJSONSchema = fieldsToJSONSchema;
 exports.findProviderById = findProviderById;
 exports.flattenSchemaToVariables = flattenSchemaToVariables;
+exports.formatCompact = formatCompact;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.getChildFieldOptions = getChildFieldOptions;
 exports.getColumnTemplate = getColumnTemplate;
@@ -51692,6 +52921,7 @@ exports.isActive = isActive;
 exports.isAuthenticated = isAuthenticated;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
+exports.isValidPreset = isValidPreset;
 exports.joinModelId = joinModelId;
 exports.jsonSchemaToFields = jsonSchemaToFields;
 exports.makeAuthCapabilitiesRequest = makeAuthCapabilitiesRequest;
@@ -51736,6 +52966,7 @@ exports.useAgentEditForm = useAgentEditForm;
 exports.useAgentEditFormContext = useAgentEditFormContext;
 exports.useAgentExperiments = useAgentExperiments;
 exports.useAgentInformationTab = useAgentInformationTab;
+exports.useAgentRunsKpiMetrics = useAgentRunsKpiMetrics;
 exports.useAgentSettings = useAgentSettings;
 exports.useAgentSkill = useAgentSkill;
 exports.useAgentVersion = useAgentVersion;
@@ -51744,6 +52975,7 @@ exports.useAgents = useAgents;
 exports.useAllIntegrationTools = useAllIntegrationTools;
 exports.useAllModels = useAllModels;
 exports.useAuthCapabilities = useAuthCapabilities;
+exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCSVParser = useCSVParser;
 exports.useCloneThread = useCloneThread;
 exports.useCodemirrorTheme = useCodemirrorTheme$1;
@@ -51795,6 +53027,7 @@ exports.useJSONSchemaForm = useJSONSchemaForm;
 exports.useJSONSchemaFormField = useJSONSchemaFormField;
 exports.useJSONSchemaFormNestedContext = useJSONSchemaFormNestedContext;
 exports.useLLMProviders = useLLMProviders;
+exports.useLatencyMetrics = useLatencyMetrics;
 exports.useLinkComponent = useLinkComponent;
 exports.useLogout = useLogout;
 exports.useMCPServerTool = useMCPServerTool;
@@ -51810,6 +53043,9 @@ exports.useMemoryConfig = useMemoryConfig;
 exports.useMemorySearch = useMemorySearch;
 exports.useMemoryWithOMStatus = useMemoryWithOMStatus;
 exports.useMergedRequestContext = useMergedRequestContext;
+exports.useMetrics = useMetrics;
+exports.useMetricsFilters = useMetricsFilters;
+exports.useModelUsageCostMetrics = useModelUsageCostMetrics;
 exports.useNavigationCommand = useNavigationCommand;
 exports.useObservationalMemory = useObservationalMemory;
 exports.useObservationalMemoryContext = useObservationalMemoryContext;
@@ -51842,6 +53078,7 @@ exports.useScorerVersions = useScorerVersions;
 exports.useScorers = useScorers;
 exports.useScoresByExperimentId = useScoresByExperimentId;
 exports.useScoresByScorerId = useScoresByScorerId;
+exports.useScoresMetrics = useScoresMetrics;
 exports.useSearchSkillsSh = useSearchSkillsSh;
 exports.useSearchWorkspace = useSearchWorkspace;
 exports.useSearchWorkspaceSkills = useSearchWorkspaceSkills;
@@ -51861,11 +53098,14 @@ exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
 exports.useThread = useThread;
 exports.useThreadInput = useThreadInput;
 exports.useThreads = useThreads;
+exports.useTokenUsageByAgentMetrics = useTokenUsageByAgentMetrics;
 exports.useTool = useTool;
 exports.useToolProviders = useToolProviders;
 exports.useToolkits = useToolkits;
 exports.useTools = useTools;
+exports.useTotalTokensKpiMetrics = useTotalTokensKpiMetrics;
 exports.useTraceSpanScores = useTraceSpanScores;
+exports.useTraceVolumeMetrics = useTraceVolumeMetrics;
 exports.useTracingSettings = useTracingSettings;
 exports.useTryConnectMcp = useTryConnectMcp;
 exports.useUpdateAgentModel = useUpdateAgentModel;