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

package/dist/index.css

@@ -1657,6 +1657,10 @@
     min-height: var(--spacing-12);
   }
 
+  .min-h-72 {
+    min-height: var(--spacing-72);
+  }
+
   .min-h-\[5\.5rem\] {
     min-height: 5.5rem;
   }
@@ -2345,8 +2349,9 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .translate-y-\[-1px\] {
-    --tw-translate-y: -1px;
+  .-translate-y-px {
+    --tw-translate-y: calc(var(--spacing-px) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -2612,8 +2617,8 @@
     grid-template-rows: 2fr 3fr;
   }
 
-  .grid-rows-\[4rem_20rem\] {
-    grid-template-rows: 4rem 20rem;
+  .grid-rows-\[4rem_1fr\] {
+    grid-template-rows: 4rem 1fr;
   }
 
   .grid-rows-\[auto\] {
@@ -7353,10 +7358,6 @@
       min-width: var(--spacing-64);
     }
 
-    .\33 xl\:min-w-\[32rem\] {
-      min-width: 32rem;
-    }
-
     .\33 xl\:gap-14 {
       gap: var(--spacing-14);
     }
@@ -7728,6 +7729,10 @@
     color: var(--color-white);
   }
 
+  .dark\:opacity-100:is(.dark *) {
+    opacity: 1;
+  }
+
   .dark\:brightness-0:is(.dark *) {
     --tw-brightness: brightness(0%);
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );

package/dist/index.es.js

@@ -14612,6 +14612,14 @@ const GroqIcon = (props) => /* @__PURE__ */ jsxs(
   }
 );
 
+const MastraIcon = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 34 21", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M4.49805 11.6934C6.98237 11.6934 8.99609 13.7081 8.99609 16.1924C8.9959 18.6765 6.98225 20.6904 4.49805 20.6904C2.01394 20.6903 0.000196352 18.6765 0 16.1924C0 13.7081 2.01382 11.6935 4.49805 11.6934ZM10.3867 0C12.8709 0 14.8846 2.01388 14.8848 4.49805C14.8848 4.8377 14.847 5.16846 14.7755 5.48643C14.4618 6.88139 14.1953 8.4633 14.9928 9.65L16.2575 11.5319C16.3363 11.6491 16.4727 11.7115 16.6137 11.703C16.7369 11.6957 16.8525 11.6343 16.9214 11.5318L18.1876 9.64717C18.9772 8.47198 18.7236 6.90783 18.4205 5.52484C18.3523 5.21392 18.3164 4.89094 18.3164 4.55957C18.3167 2.07546 20.3313 0.0615234 22.8154 0.0615234C25.2994 0.0617476 27.3132 2.0756 27.3135 4.55957C27.3135 4.93883 27.2665 5.30712 27.178 5.65896C26.8547 6.94441 26.5817 8.37932 27.2446 9.52714L28.459 11.6301C28.4819 11.6697 28.5245 11.6934 28.5703 11.6934C31.0545 11.6935 33.0684 13.7081 33.0684 16.1924C33.0682 18.6765 31.0544 20.6903 28.5703 20.6904C26.0861 20.6904 24.0725 18.6765 24.0723 16.1924C24.0723 15.8049 24.1212 15.4288 24.2133 15.0701C24.5458 13.7746 24.8298 12.3251 24.1609 11.1668L23.0044 9.16384C22.9656 9.09659 22.8931 9.05859 22.8154 9.05859C22.7983 9.05859 22.7824 9.06614 22.7728 9.08033L21.4896 10.9895C20.686 12.1851 20.9622 13.781 21.284 15.1851C21.3582 15.5089 21.3975 15.8461 21.3975 16.1924C21.3973 18.6764 19.3834 20.6902 16.8994 20.6904C14.4152 20.6904 12.4006 18.6765 12.4004 16.1924C12.4004 15.932 12.4226 15.6768 12.4651 15.4286C12.6859 14.14 12.8459 12.7122 12.1167 11.6271L11.2419 10.3253C10.6829 9.49347 9.71913 9.05932 8.78286 8.70188C7.0906 8.05584 5.88867 6.41734 5.88867 4.49805C5.88886 2.0139 7.90254 3.29835e-05 10.3867 0Z",
+    fill: props.fill || "currentColor"
+  }
+) });
+
 const MistralIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -14846,7 +14854,8 @@ const providerMapToIcon = {
   GROQ: /* @__PURE__ */ jsx(GroqIcon, {}),
   X_GROK: /* @__PURE__ */ jsx(XGroqIcon, {}),
   MISTRAL: /* @__PURE__ */ jsx(MistralIcon, {}),
-  netlify: /* @__PURE__ */ jsx(NetlifyIcon, {})
+  netlify: /* @__PURE__ */ jsx(NetlifyIcon, {}),
+  mastra: /* @__PURE__ */ jsx(MastraIcon, {})
 };
 
 const cleanProviderId$1 = (providerId) => {
@@ -14870,12 +14879,13 @@ const ProviderLogo$1 = ({ providerId, className = "", size = 20 }) => {
       perplexity: "perplexity",
       fireworks_ai: "fireworks",
       openrouter: "openrouter",
-      netlify: "netlify"
+      netlify: "netlify",
+      mastra: "mastra"
     };
     return iconMap[id] || "DEFAULT";
   };
   const fallbackIcon = getFallbackProviderIcon(cleanedProviderId);
-  const isGateway = ["netlify"].includes(cleanProviderId);
+  const isGateway = ["netlify", "mastra"].includes(cleanProviderId);
   if (isGateway || imageError || !providerId) {
     if (providerMapToIcon[fallbackIcon]) {
       return /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[fallbackIcon] });
@@ -15518,12 +15528,13 @@ const ProviderLogo = ({ providerId, className = "", size = 20 }) => {
       perplexity: "perplexity",
       fireworks_ai: "fireworks",
       openrouter: "openrouter",
-      netlify: "netlify"
+      netlify: "netlify",
+      mastra: "mastra"
     };
     return iconMap[id] || "DEFAULT";
   };
   const fallbackIcon = getFallbackProviderIcon(cleanedProviderId);
-  const isGateway = ["netlify"].includes(cleanProviderId$1);
+  const isGateway = ["netlify", "mastra"].includes(cleanProviderId$1);
   if (isGateway || imageError || !providerId) {
     if (providerMapToIcon[fallbackIcon]) {
       return /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[fallbackIcon] });
@@ -19731,8 +19742,9 @@ function ScoreDialog({
   usageContext = "scorerPage"
 }) {
   const [datasetDialogOpen, setDatasetDialogOpen] = 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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       SideDialog,
@@ -19795,7 +19807,7 @@ function ScoreDialog({
                     ...usageContext === "SpanDialog" ? [
                       {
                         label: "Scorer",
-                        value: score?.scorer?.name || "-",
+                        value: scorerDetailHref ? /* @__PURE__ */ jsx(Link, { href: scorerDetailHref, children: score?.scorer?.name || "-" }) : score?.scorer?.name || "-",
                         key: "scorer-name"
                       }
                     ] : [],
@@ -23233,11 +23245,11 @@ const AgentObservationalMemory = ({ agentId, resourceId, threadId }) => {
     return threshold.min;
   };
   const isAdaptiveMode = omAgentConfig?.messageTokens !== void 0 && typeof omAgentConfig.messageTokens !== "number";
-  const totalBudget = isAdaptiveMode ? getThresholdValue(omAgentConfig?.messageTokens, 1e4) : 0;
-  const baseMessageTokens = isAdaptiveMode ? getBaseThresholdValue(omAgentConfig?.messageTokens, 1e4) : void 0;
-  const baseObservationTokens = isAdaptiveMode ? getBaseThresholdValue(omAgentConfig?.observationTokens, 3e4) : void 0;
-  const messageTokensThreshold = streamProgress?.windows?.active?.messages?.threshold ?? recordConfig?.observation?.messageTokens ?? getThresholdValue(omAgentConfig?.messageTokens, 1e4);
-  const configObservationTokens = getThresholdValue(omAgentConfig?.observationTokens, 3e4);
+  const totalBudget = isAdaptiveMode ? getThresholdValue(omAgentConfig?.messageTokens, 3e4) : 0;
+  const baseMessageTokens = isAdaptiveMode ? getBaseThresholdValue(omAgentConfig?.messageTokens, 3e4) : void 0;
+  const baseObservationTokens = isAdaptiveMode ? getBaseThresholdValue(omAgentConfig?.observationTokens, 4e4) : void 0;
+  const messageTokensThreshold = streamProgress?.windows?.active?.messages?.threshold ?? recordConfig?.observation?.messageTokens ?? getThresholdValue(omAgentConfig?.messageTokens, 3e4);
+  const configObservationTokens = getThresholdValue(omAgentConfig?.observationTokens, 4e4);
   const observationTokensThreshold = streamProgress?.windows?.active?.observations?.threshold ?? recordConfig?.reflection?.observationTokens ?? configObservationTokens;
   const pendingMessageTokens = streamProgress?.windows?.active?.messages?.tokens ?? record?.pendingMessageTokens ?? 0;
   const observationTokenCount = streamProgress?.windows?.active?.observations?.tokens ?? record?.observationTokenCount ?? 0;
@@ -23868,7 +23880,8 @@ const MemorySearch = ({
   ] });
 };
 
-function AgentMemory({ agentId, threadId }) {
+function AgentMemory({ agentId, threadId, memoryType }) {
+  const isGatewayMemory = memoryType === "gateway";
   const { threadInput: chatInputValue } = useThreadInput();
   const { paths, navigate } = useLinkComponent();
   const { data: thread } = useThread({ threadId, agentId });
@@ -23932,7 +23945,7 @@ function AgentMemory({ agentId, threadId }) {
       ] })
     ] }) }),
     isOMEnabled && /* @__PURE__ */ jsx("div", { className: "border-b border-border1 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx(AgentObservationalMemory, { agentId, resourceId: effectiveResourceId, threadId }) }),
-    /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-border1", children: [
+    !isGatewayMemory && /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-border1", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-neutral5", children: "Semantic Recall" }),
         searchMemoryData?.searchScope && /* @__PURE__ */ jsx(
@@ -23973,10 +23986,17 @@ function AgentMemory({ agentId, threadId }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+    !isGatewayMemory && /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
       /* @__PURE__ */ jsx(AgentWorkingMemory, { agentId }),
       /* @__PURE__ */ jsx("div", { className: "border-t border-border1", children: /* @__PURE__ */ jsx(AgentMemoryConfig, { agentId }) })
-    ] })
+    ] }),
+    isGatewayMemory && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border1", children: /* @__PURE__ */ jsxs("div", { className: "bg-surface3 border border-border1 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium px-2 py-0.5 rounded bg-green-500/20 text-green-400", children: "Gateway" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-neutral5", children: "Memory Gateway" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-neutral3", children: "Memory is managed by the Memory Gateway. Threads and observations are stored remotely." })
+    ] }) })
   ] });
 }
 
@@ -24001,7 +24021,7 @@ function AgentInformation({ agentId, threadId }) {
       /* @__PURE__ */ jsx(TabContent, { value: "overview", children: /* @__PURE__ */ jsx(AgentMetadata, { agentId }) }),
       /* @__PURE__ */ jsx(TabContent, { value: "model-settings", children: /* @__PURE__ */ jsx(AgentSettings, { agentId }) }),
       agent?.requestContextSchema && /* @__PURE__ */ jsx(TabContent, { value: "request-context", children: /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(RequestContextSchemaForm, { requestContextSchema: agent.requestContextSchema }) }) }),
-      hasMemory && /* @__PURE__ */ jsx(TabContent, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) }),
+      hasMemory && /* @__PURE__ */ jsx(TabContent, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId, memoryType: memory?.memoryType }) }),
       /* @__PURE__ */ jsx(TabContent, { value: "tracing-options", children: /* @__PURE__ */ jsx(TracingRunOptions, {}) })
     ] }) })
   ] });
@@ -34435,7 +34455,10 @@ function TraceDialog({
     if (initialSpanId) {
       setSelectedSpanId(initialSpanId);
       setDialogIsOpen(true);
+      return;
     }
+    setSelectedSpanId(void 0);
+    setDialogIsOpen(false);
   }, [initialSpanId]);
   useEffect(() => {
     if (spanScoresPage > 0) {
@@ -34466,11 +34489,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 = () => {
@@ -39703,11 +39732,31 @@ function BulkAddToDatasetBar({
     ] })
   ] });
 }
-function AgentTracesPanel({ agentId }) {
+function AgentTracesPanel({
+  agentId,
+  basePath,
+  initialTraceId,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
+}) {
   const client = useMastraClient();
   const filters = useAgentTracesFilters(agentId);
-  const [selectedTraceId, setSelectedTraceId] = useState();
-  const [dialogIsOpen, setDialogIsOpen] = useState(false);
+  const { navigate } = useLinkComponent();
+  const buildTraceUrl = 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] = useState(initialTraceId);
+  const [dialogIsOpen, setDialogIsOpen] = useState(Boolean(initialTraceId));
   const [checkedTraceIds, setCheckedTraceIds] = useState(/* @__PURE__ */ new Set());
   const [sort, setSort] = useState(null);
   const {
@@ -39820,20 +39869,31 @@ function AgentTracesPanel({ agentId }) {
       return next.size === prev.size ? prev : next;
     });
   }, [displayTraces, checkedTraceIds.size]);
+  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 = 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 = useCallback((traceId, checked) => {
     setCheckedTraceIds((prev) => {
@@ -39872,14 +39932,16 @@ function AgentTracesPanel({ agentId }) {
     },
     [displayTraces, checkedTraceIds, batchInsertItems]
   );
-  const computeTraceLink = useCallback((traceId, spanId) => {
-    return `/observability?traceId=${traceId}${spanId ? `&spanId=${spanId}` : ""}`;
-  }, []);
+  const computeTraceLink = useCallback(
+    (traceId, spanId, tab) => buildTraceUrl(traceId, spanId, void 0, tab),
+    [buildTraceUrl]
+  );
   const toNextTrace = useMemo(
     () => getToNextEntryFn({
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -39891,6 +39953,7 @@ function AgentTracesPanel({ agentId }) {
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -39992,6 +40055,7 @@ function AgentTracesPanel({ agentId }) {
         traceDetails: selectedTrace?.spans?.find((s) => s.traceId === selectedTraceId && !s.parentSpanId),
         isOpen: dialogIsOpen,
         onClose: () => {
+          navigate(buildTraceUrl());
           setDialogIsOpen(false);
           setSelectedTraceId(void 0);
         },
@@ -39999,6 +40063,9 @@ function AgentTracesPanel({ agentId }) {
         onPrevious: toPreviousTrace,
         isLoadingSpans: isSelectedTraceLoading,
         computeTraceLink,
+        initialSpanId,
+        initialSpanTab,
+        initialScoreId,
         scorers: scorersMap,
         isLoadingScorers
       }
@@ -41855,7 +41922,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
@@ -42006,12 +42073,12 @@ function MetricsLineChart({
   yDomain
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4", children: series.map((s) => {
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 ", children: series.map((s) => {
       const aggregated = s.aggregate?.(data);
       return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-full translate-y-[-1px]", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-full -translate-y-px", style: { backgroundColor: s.color } }),
         /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
-        aggregated && /* @__PURE__ */ jsxs("span", { className: "text-ui-lg text-neutral4", children: [
+        aggregated && /* @__PURE__ */ jsxs("span", { className: "text-ui-sm text-neutral4", children: [
           aggregated.value,
           aggregated.suffix && /* @__PURE__ */ jsxs("span", { className: "text-ui-sm text-neutral2", children: [
             " ",
@@ -42021,7 +42088,15 @@ function MetricsLineChart({
       ] }, s.dataKey);
     }) }),
     /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, children: [
-      /* @__PURE__ */ jsx(CartesianGrid, { stroke: "rgba(255,255,255,0.08)", vertical: false }),
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
       /* @__PURE__ */ jsx(
         XAxis,
         {
@@ -42132,24 +42207,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 };
     }
   });
@@ -42428,78 +42504,84 @@ function useScoresMetrics() {
   return 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
       };
     }
   });
@@ -42544,7 +42626,7 @@ function ScoresCard() {
         /* @__PURE__ */ jsx(Tab, { value: "over-time", children: "Over Time" }),
         /* @__PURE__ */ jsx(Tab, { value: "summary", children: "Summary" })
       ] }),
-      /* @__PURE__ */ jsx(TabContent, { value: "over-time", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsx(TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
       /* @__PURE__ */ jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsx(
         MetricsDataTable,
         {
@@ -42682,7 +42764,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"
                         ),
@@ -42698,7 +42780,7 @@ function HorizontalBars({
                   return /* @__PURE__ */ 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
@@ -43794,6 +43876,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__ */ jsx(EntryListSkeleton, { columns: traceScoresListColumns });