@mastra/playground-ui 21.0.1-alpha.0 → 21.0.1-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @mastra/playground-ui
 
+## 21.0.1-alpha.1
+
+### Patch Changes
+
+- Updated scores metrics to use aggregate and time series APIs instead of fetching raw scores. Scores Over Time chart now always shows hourly data points regardless of the selected time range. Avg Score KPI uses weighted averages via the aggregate API. Updated metrics card layout to use flexible row heights and refined chart legend styling. ([#14937](https://github.com/mastra-ai/mastra/pull/14937))
+
+- Fixed deep links for scorer, observability, and agent trace dialogs. ([#14970](https://github.com/mastra-ai/mastra/pull/14970))
+
+  Developers can now share and reload URLs that keep the selected trace, scoring tab, span, and score in Studio.
+
+  **Before**
+  `/observability`
+  `/agents/chef-agent/traces`
+  `/evaluation/scorers/response-quality`
+
+  **After**
+  `/observability?traceId=...&spanId=...&tab=scores&scoreId=...`
+  `/agents/chef-agent/traces?traceId=...&spanId=...&tab=scores&scoreId=...`
+  `/evaluation/scorers/response-quality?entity=...&scoreId=...`
+
+  This makes review links reliable across the scorer page, observability, and the agent traces view.
+
+- Fixed light theme visibility for metrics charts: CartesianGrid lines now adapt to the current theme, and HorizontalBars use reduced opacity in light mode so labels remain readable. Updated MetricsCard minimum height. ([#14975](https://github.com/mastra-ai/mastra/pull/14975))
+
+- Updated dependencies [[`81e4259`](https://github.com/mastra-ai/mastra/commit/81e425939b4ceeb4f586e9b6d89c3b1c1f2d2fe7), [`951b8a1`](https://github.com/mastra-ai/mastra/commit/951b8a1b5ef7e1474c59dc4f2b9fc1a8b1e508b6)]:
+  - @mastra/core@1.22.0-alpha.1
+  - @mastra/client-js@1.12.1-alpha.1
+  - @mastra/react@0.2.22-alpha.1
+
 ## 21.0.1-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -19774,8 +19774,9 @@ function ScoreDialog({
   usageContext = "scorerPage"
 }) {
   const [datasetDialogOpen, setDatasetDialogOpen] = React.useState(false);
-  const { Link } = useLinkComponent();
+  const { Link, paths } = useLinkComponent();
   const isCodeBased = isCodeBasedScorer$1(score);
+  const scorerDetailHref = score?.scorerId && score?.entityId ? `${paths.scorerLink(score.scorerId)}?entity=${encodeURIComponent(score.entityId)}&scoreId=${encodeURIComponent(score.id)}` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       SideDialog,
@@ -19838,7 +19839,7 @@ function ScoreDialog({
                     ...usageContext === "SpanDialog" ? [
                       {
                         label: "Scorer",
-                        value: score?.scorer?.name || "-",
+                        value: scorerDetailHref ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: scorerDetailHref, children: score?.scorer?.name || "-" }) : score?.scorer?.name || "-",
                         key: "scorer-name"
                       }
                     ] : [],
@@ -34486,7 +34487,10 @@ function TraceDialog({
     if (initialSpanId) {
       setSelectedSpanId(initialSpanId);
       setDialogIsOpen(true);
+      return;
     }
+    setSelectedSpanId(void 0);
+    setDialogIsOpen(false);
   }, [initialSpanId]);
   React.useEffect(() => {
     if (spanScoresPage > 0) {
@@ -34517,11 +34521,17 @@ function TraceDialog({
   });
   const handleSpanClick = (id) => {
     if (selectedSpanId === id) {
+      if (traceId) {
+        navigate(computeTraceLink(traceId));
+      }
       setSelectedSpanId(void 0);
-    } else {
-      setSelectedSpanId(id);
-      setSpanDialogDefaultTab("details");
-      setDialogIsOpen(true);
+      return;
+    }
+    setSelectedSpanId(id);
+    setSpanDialogDefaultTab("details");
+    setDialogIsOpen(true);
+    if (traceId) {
+      navigate(computeTraceLink(traceId, id));
     }
   };
   const handleToScoring = () => {
@@ -39754,11 +39764,31 @@ function BulkAddToDatasetBar({
     ] })
   ] });
 }
-function AgentTracesPanel({ agentId }) {
+function AgentTracesPanel({
+  agentId,
+  basePath,
+  initialTraceId,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
+}) {
   const client = react.useMastraClient();
   const filters = useAgentTracesFilters(agentId);
-  const [selectedTraceId, setSelectedTraceId] = React.useState();
-  const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
+  const { navigate } = useLinkComponent();
+  const buildTraceUrl = React.useCallback(
+    (traceId, spanId, scoreId, tab) => {
+      const params = new URLSearchParams();
+      if (traceId) params.set("traceId", traceId);
+      if (spanId) params.set("spanId", spanId);
+      if (tab) params.set("tab", tab);
+      if (scoreId) params.set("scoreId", scoreId);
+      const query = params.toString();
+      return query ? `${basePath ?? `/agents/${agentId}/traces`}?${query}` : basePath ?? `/agents/${agentId}/traces`;
+    },
+    [agentId, basePath]
+  );
+  const [selectedTraceId, setSelectedTraceId] = React.useState(initialTraceId);
+  const [dialogIsOpen, setDialogIsOpen] = React.useState(Boolean(initialTraceId));
   const [checkedTraceIds, setCheckedTraceIds] = React.useState(/* @__PURE__ */ new Set());
   const [sort, setSort] = React.useState(null);
   const {
@@ -39871,20 +39901,31 @@ function AgentTracesPanel({ agentId }) {
       return next.size === prev.size ? prev : next;
     });
   }, [displayTraces, checkedTraceIds.size]);
+  React.useEffect(() => {
+    if (initialTraceId) {
+      setSelectedTraceId(initialTraceId);
+      setDialogIsOpen(true);
+      return;
+    }
+    setSelectedTraceId(void 0);
+    setDialogIsOpen(false);
+  }, [initialTraceId]);
   const { batchInsertItems } = useDatasetMutations();
   const allSelected = displayTraces.length > 0 && displayTraces.every((t) => checkedTraceIds.has(t.traceId));
   const someSelected = checkedTraceIds.size > 0;
   const handleTraceClick = React.useCallback(
     (traceId) => {
       if (selectedTraceId === traceId) {
+        navigate(buildTraceUrl());
         setSelectedTraceId(void 0);
         setDialogIsOpen(false);
       } else {
+        navigate(buildTraceUrl(traceId));
         setSelectedTraceId(traceId);
         setDialogIsOpen(true);
       }
     },
-    [selectedTraceId]
+    [buildTraceUrl, navigate, selectedTraceId]
   );
   const handleCheckToggle = React.useCallback((traceId, checked) => {
     setCheckedTraceIds((prev) => {
@@ -39923,14 +39964,16 @@ function AgentTracesPanel({ agentId }) {
     },
     [displayTraces, checkedTraceIds, batchInsertItems]
   );
-  const computeTraceLink = React.useCallback((traceId, spanId) => {
-    return `/observability?traceId=${traceId}${spanId ? `&spanId=${spanId}` : ""}`;
-  }, []);
+  const computeTraceLink = React.useCallback(
+    (traceId, spanId, tab) => buildTraceUrl(traceId, spanId, void 0, tab),
+    [buildTraceUrl]
+  );
   const toNextTrace = React.useMemo(
     () => getToNextEntryFn({
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -39942,6 +39985,7 @@ function AgentTracesPanel({ agentId }) {
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -40043,6 +40087,7 @@ function AgentTracesPanel({ agentId }) {
         traceDetails: selectedTrace?.spans?.find((s) => s.traceId === selectedTraceId && !s.parentSpanId),
         isOpen: dialogIsOpen,
         onClose: () => {
+          navigate(buildTraceUrl());
           setDialogIsOpen(false);
           setSelectedTraceId(void 0);
         },
@@ -40050,6 +40095,9 @@ function AgentTracesPanel({ agentId }) {
         onPrevious: toPreviousTrace,
         isLoadingSpans: isSelectedTraceLoading,
         computeTraceLink,
+        initialSpanId,
+        initialSpanTab,
+        initialScoreId,
         scorers: scorersMap,
         isLoadingScorers
       }
@@ -41906,7 +41954,7 @@ function MetricsCardRoot({ children, className }) {
     DashboardCard,
     {
       className: cn(
-        "flex-1 grid grid-rows-[4rem_20rem] gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem] 3xl:min-w-[32rem]",
+        "flex-1 grid grid-rows-[4rem_1fr] min-h-72 gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem]",
         className
       ),
       children
@@ -42057,12 +42105,12 @@ function MetricsLineChart({
   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) => {
+    /* @__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("div", { className: "size-2 shrink-0 rounded-full -translate-y-px", 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 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral4", children: [
           aggregated.value,
           aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral2", children: [
             " ",
@@ -42072,7 +42120,15 @@ function MetricsLineChart({
       ] }, 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.CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         recharts.XAxis,
         {
@@ -42183,24 +42239,25 @@ function useAvgScoreKpiMetrics() {
       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 filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
+      const results = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg2, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return { avg: avg2.value ?? 0, count: count.value ?? 0 };
+        })
       );
-      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) {
+      const withData = results.filter((r) => r.count > 0);
+      if (withData.length === 0) {
         return { value: null, previousValue: null, changePercent: null };
       }
-      const avg = allScoreValues.reduce((sum, v) => sum + v, 0) / allScoreValues.length;
+      const totalCount = withData.reduce((sum, r) => sum + r.count, 0);
+      const weightedSum = withData.reduce((sum, r) => sum + r.avg * r.count, 0);
+      const avg = weightedSum / totalCount;
       return { value: Math.round(avg * 100) / 100, previousValue: null, changePercent: null };
     }
   });
@@ -42479,78 +42536,84 @@ function useScoresMetrics() {
   return reactQuery.useQuery({
     queryKey: ["metrics", "scores-card", datePreset, customRange],
     queryFn: async () => {
+      const filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
       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 summaryResults = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg, min, max, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "min", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "max", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return {
+            scorer: scorerId,
+            avg: avg.value ?? 0,
+            min: min.value ?? 0,
+            max: max.value ?? 0,
+            count: count.value ?? 0
+          };
+        })
       );
-      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 summaryData = summaryResults.filter((s) => s.count > 0);
       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);
+      if (summaryData.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
       }
-      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
+      const totalWeighted = summaryData.reduce((s, d) => s + d.avg * d.count, 0);
+      const totalCount = summaryData.reduce((s, d) => s + d.count, 0);
+      const avgScore = totalCount ? Math.round(totalWeighted / totalCount * 100) / 100 : 0;
+      const interval = "1h";
+      const timeSeriesResults = await Promise.all(
+        scorerNames.map(
+          (scorerId) => client.getScoreTimeSeries({
+            scorerId,
+            interval,
+            aggregation: "avg",
+            filters
           })
-        };
-        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);
+        )
+      );
+      const bucketMap = /* @__PURE__ */ new Map();
+      const rangeSpansDays = timestamp.end.toDateString() !== timestamp.start.toDateString();
+      for (let i = 0; i < scorerNames.length; i++) {
+        const scorerId = scorerNames[i];
+        const series = timeSeriesResults[i]?.series ?? [];
+        for (const s of series) {
+          for (const point of s.points) {
+            const ts = new Date(point.timestamp);
+            const key = ts.toISOString();
+            if (!bucketMap.has(key)) {
+              bucketMap.set(key, {
+                time: rangeSpansDays ? ts.toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: false
+                }) : ts.toLocaleTimeString("en-US", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: false
+                })
+              });
+            }
+            bucketMap.get(key)[scorerId] = +point.value.toFixed(2);
           }
         }
-        return point;
-      });
+      }
+      const overTimeData = Array.from(bucketMap.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([, point]) => point);
       return {
         summaryData,
         overTimeData,
         scorerNames,
-        avgScore: Math.round(avgScore * 100) / 100
+        avgScore
       };
     }
   });
@@ -42595,7 +42658,7 @@ function ScoresCard() {
         /* @__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: "over-time", className: "pb-0", 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,
         {
@@ -42733,7 +42796,7 @@ function HorizontalBars({
                       "div",
                       {
                         className: cn(
-                          "absolute inset-y-0",
+                          "absolute inset-y-0 opacity-40 dark:opacity-100",
                           si === 0 && "rounded-l",
                           isLastWithValue && "rounded-r"
                         ),
@@ -42749,7 +42812,7 @@ function HorizontalBars({
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "absolute inset-y-0 left-0 rounded",
+                      className: "absolute inset-y-0 left-0 rounded opacity-40 dark:opacity-100",
                       style: { width: `${pct}%`, backgroundColor: seg.color }
                     },
                     seg.label
@@ -43845,6 +43908,9 @@ function SpanScoreList({
     const score = scoresData?.scores?.find((s) => s?.id === scoreId);
     setSelectedScore(score);
     setDialogIsOpen(true);
+    if (traceId) {
+      navigate(`${computeTraceLink(traceId, spanId)}&tab=scores&scoreId=${encodeURIComponent(scoreId)}`);
+    }
   };
   if (isLoadingScoresData) {
     return /* @__PURE__ */ jsxRuntime.jsx(EntryListSkeleton, { columns: traceScoresListColumns });