@mastra/playground-ui 6.9.1 → 6.9.2

package/dist/index.es.js

@@ -13461,10 +13461,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] = useState(isVisible);
   useEffect(() => {
-    if (autoDismiss && isVisible) {
+    if (dismissible && autoDismiss && isVisible) {
       const timer = setTimeout(() => {
         setLocalIsVisible(false);
       }, dismissTime);
@@ -13479,13 +13487,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__ */ jsx("div", { className: "flex gap-[0.5rem] items-center", children }),
-        /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+        /* @__PURE__ */ 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__ */ jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
           /* @__PURE__ */ jsx(XIcon, {}),
           /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Dismiss" })
         ] })
@@ -19137,7 +19159,15 @@ function SpanTabs({
           /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
           " Scoring"
         ] }) }),
-        /* @__PURE__ */ jsx(SpanScoring, { traceId: trace?.traceId, spanId: span?.spanId, entityType })
+        /* @__PURE__ */ jsx(
+          SpanScoring,
+          {
+            traceId: trace?.traceId,
+            isTopLevelSpan: span?.parentSpanId === null,
+            spanId: span?.spanId,
+            entityType
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs(Section, { children: [
         /* @__PURE__ */ jsx(Section.Header, { children: /* @__PURE__ */ jsxs(Section.Heading, { children: [
@@ -19734,8 +19764,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] = useState(null);
   const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
   const [notificationIsVisible, setNotificationIsVisible] = useState(false);
@@ -19751,7 +19781,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;
@@ -19770,6 +19800,19 @@ const SpanScoring = ({ traceId, spanId, entityType }) => {
     setNotificationIsVisible(false);
   };
   const selectedScorerDescription = scorerList.find((s) => s.name === selectedScorer)?.description || "";
+  if (error) {
+    return /* @__PURE__ */ jsxs(Notification, { isVisible: true, autoDismiss: false, type: "error", children: [
+      /* @__PURE__ */ jsx(InfoIcon$1, {}),
+      " ",
+      error?.message ? error.message : "Failed to load scorers."
+    ] });
+  }
+  if (scorerList.length === 0) {
+    return /* @__PURE__ */ jsxs(Notification, { isVisible: true, dismissible: false, children: [
+      /* @__PURE__ */ jsx(InfoIcon$1, {}),
+      " No eligible scorers have been defined to run."
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[3fr_1fr] gap-[1rem] items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-[0.5rem]", children: [