@mastra/playground-ui 6.9.1 → 6.9.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 6.9.2-alpha.0
+
+### Patch Changes
+
+- Fix scorer filtering for SpanScoring, add error and info message for user ([#10164](https://github.com/mastra-ai/mastra/pull/10164))
+
+- Updated dependencies [[`eebb7bb`](https://github.com/mastra-ai/mastra/commit/eebb7bb407c57342a3be3a2efbe68c696589feeb), [`c6e6d07`](https://github.com/mastra-ai/mastra/commit/c6e6d071ecf346a80dceab410af2c567c7e66a57), [`0e6df8f`](https://github.com/mastra-ai/mastra/commit/0e6df8f66340992cb1b319834657deb17368de52), [`6295fd7`](https://github.com/mastra-ai/mastra/commit/6295fd783d49075d5bf2c18ff9486e94d36aaa56), [`d813cf7`](https://github.com/mastra-ai/mastra/commit/d813cf7251695d85cc60469058384ffa74974484)]:
+  - @mastra/core@0.24.2-alpha.0
+  - @mastra/client-js@0.16.11-alpha.0
+  - @mastra/react@0.0.17-alpha.0
+
 ## 6.9.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -13495,10 +13495,18 @@ function getShortId(id) {
   return id.slice(0, 8);
 }
 
-function Notification({ children, className, isVisible, autoDismiss = true, dismissTime = 5e3 }) {
+function Notification({
+  children,
+  className,
+  isVisible,
+  autoDismiss = true,
+  dismissTime = 5e3,
+  dismissible = true,
+  type = "info"
+}) {
   const [localIsVisible, setLocalIsVisible] = React.useState(isVisible);
   React.useEffect(() => {
-    if (autoDismiss && isVisible) {
+    if (dismissible && autoDismiss && isVisible) {
       const timer = setTimeout(() => {
         setLocalIsVisible(false);
       }, dismissTime);
@@ -13513,13 +13521,27 @@ function Notification({ children, className, isVisible, autoDismiss = true, dism
     "div",
     {
       className: cn(
-        "grid grid-cols-[1fr_auto] gap-[0.5rem] rounded-l bg-white/5 p-[1.5rem] py-[1rem] text-[0.875rem] text-icon3 items-center",
-        "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50",
+        "grid grid-cols-[1fr_auto] gap-[0.5rem] rounded-lg bg-white/5 p-[1.5rem] py-[1rem] text-[0.875rem] text-icon3 items-center",
+        {
+          "bg-red-900/10 border border-red-900": type === "error"
+        },
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[0.5rem] items-center", children }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex gap-[0.5rem] items-start",
+              "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-70 [&>svg]:translate-y-[0.2em]",
+              {
+                "[&>svg]:text-red-400": type === "error"
+              }
+            ),
+            children
+          }
+        ),
+        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
           /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
         ] })
@@ -19171,7 +19193,15 @@ function SpanTabs({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
           " Scoring"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SpanScoring, { traceId: trace?.traceId, spanId: span?.spanId, entityType })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SpanScoring,
+          {
+            traceId: trace?.traceId,
+            isTopLevelSpan: span?.parentSpanId === null,
+            spanId: span?.spanId,
+            entityType
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
@@ -19768,8 +19798,8 @@ const useTriggerScorer = () => {
   });
 };
 
-const SpanScoring = ({ traceId, spanId, entityType }) => {
-  const { data: scorers = {}, isLoading } = useScorers();
+const SpanScoring = ({ traceId, spanId, entityType, isTopLevelSpan }) => {
+  const { data: scorers = {}, isLoading, error } = useScorers();
   const [selectedScorer, setSelectedScorer] = React.useState(null);
   const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
   const [notificationIsVisible, setNotificationIsVisible] = React.useState(false);
@@ -19785,7 +19815,7 @@ const SpanScoring = ({ traceId, spanId, entityType }) => {
     isRegistered: scorer.isRegistered,
     type: scorer.scorer.config.type
   })).filter((scorer) => scorer.isRegistered);
-  if (entityType !== "Agent" || spanId) {
+  if (entityType !== "Agent" || !isTopLevelSpan) {
     scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
   }
   const isWaiting = isPending || isLoading;
@@ -19804,6 +19834,19 @@ const SpanScoring = ({ traceId, spanId, entityType }) => {
     setNotificationIsVisible(false);
   };
   const selectedScorerDescription = scorerList.find((s) => s.name === selectedScorer)?.description || "";
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Notification, { isVisible: true, autoDismiss: false, type: "error", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+      " ",
+      error?.message ? error.message : "Failed to load scorers."
+    ] });
+  }
+  if (scorerList.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Notification, { isVisible: true, dismissible: false, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+      " No eligible scorers have been defined to run."
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3fr_1fr] gap-[1rem] items-start", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[0.5rem]", children: [