@mastra/playground-ui 6.2.2-alpha.2 → 6.2.2

package/dist/index.es.js

@@ -22,7 +22,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useDebouncedCallback } from 'use-debounce';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -63,6 +63,7 @@ import * as HoverCard from '@radix-ui/react-hover-card';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/runtime-context';
 import { format as format$1 } from 'date-fns/format';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new MastraClient({
@@ -4518,16 +4519,16 @@ const usePlaygroundStore = create()(
   )
 );
 
-const useWorkflow = (workflowId, enabled = true) => {
+const useWorkflow = (workflowId) => {
   const client = useMastraClient();
   const { runtimeContext } = usePlaygroundStore();
   return useQuery({
     queryKey: ["workflow", workflowId],
-    queryFn: () => client.getWorkflow(workflowId).details(runtimeContext),
+    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
+    enabled: Boolean(workflowId),
     retry: false,
     refetchOnWindowFocus: false,
-    throwOnError: false,
-    enabled
+    throwOnError: false
   });
 };
 const useLegacyWorkflow = (workflowId) => {
@@ -8258,7 +8259,7 @@ const Row = forwardRef(
       "tr",
       {
         className: clsx(
-          "border-b-sm border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2",
+          "border-b-sm border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2 last:border-b-0",
           selected && "bg-surface4",
           onClick && "cursor-pointer",
           className
@@ -12913,13 +12914,13 @@ function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoadi
               style: { width: `${Math.floor(Math.random() * (90 - 30 + 1)) + 50}%` },
               children: " "
             }
-          ) : /* @__PURE__ */ jsx(Fragment, { children: isValueItemArray ? value?.map((item) => {
+          ) : isValueItemArray ? value?.map((item) => {
             return item.path ? /* @__PURE__ */ jsx(RelationWrapper, { description: item.description, children: /* @__PURE__ */ jsxs(Link, { href: item.path, children: [
               item?.name,
               " ",
               /* @__PURE__ */ jsx(ChevronRightIcon, {})
             ] }) }, item.id) : /* @__PURE__ */ jsx("span", { children: item?.name }, item.id);
-          }) : /* @__PURE__ */ jsx(Fragment, { children: value ? value : /* @__PURE__ */ jsx("span", { className: "text-icon3 text-[0.75rem]", children: "n/a" }) }) })
+          }) : /* @__PURE__ */ jsx(Fragment, { children: value ? value : /* @__PURE__ */ jsx("span", { className: "text-icon3 text-[0.75rem]", children: "n/a" }) })
         }
       )
     ] }, label + index);
@@ -13615,7 +13616,7 @@ const DateTimePicker = ({
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        className: "backdrop-blur-4xl w-auto p-0 bg-surface4 max-w-[16.5rem]",
+        className: "backdrop-blur-4xl w-auto !p-0 bg-surface4 max-w-[16.5rem]",
         align: "start",
         "data-testid": "datepicker-calendar",
         children: /* @__PURE__ */ jsx(
@@ -13741,7 +13742,7 @@ const DateTimePickerContent = ({
     "div",
     {
       "aria-label": "Choose date",
-      className: cn("relative mt-2 flex flex-col ", className),
+      className: cn("relative flex flex-col", className),
       onKeyDown: (e) => {
         e.stopPropagation();
         if (e.key === "Escape") {
@@ -13838,7 +13839,16 @@ function getShortId(id) {
   return id.slice(0, 8);
 }
 
-function ScoreDialog({ scorer, score, isOpen, onClose, onNext, onPrevious }) {
+function ScoreDialog({
+  scorer,
+  score,
+  isOpen,
+  onClose,
+  onNext,
+  onPrevious,
+  computeTraceLink
+}) {
+  const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxs(
     SideDialog,
     {
@@ -13861,10 +13871,30 @@ function ScoreDialog({ scorer, score, isOpen, onClose, onNext, onPrevious }) {
           ] })
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
+          score?.traceId && /* @__PURE__ */ jsx(
+            KeyValueList,
+            {
+              data: [
+                {
+                  label: "Trace ID",
+                  value: /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }),
+                  key: "traceId"
+                },
+                ...score?.spanId ? [
+                  {
+                    label: "Span ID",
+                    value: /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }),
+                    key: "spanId"
+                  }
+                ] : []
+              ],
+              LinkComponent: Link
+            }
+          ),
           /* @__PURE__ */ jsx(
             SideDialogCodeSection,
             {
-              title: `Score: ${score?.score ? score?.score : "n/a"}`,
+              title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
               codeStr: score?.reason,
               simplified: true
             }
@@ -13956,29 +13986,11 @@ const useScoresByEntityId = (entityId, entityType, page = 0) => {
 };
 const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
   const client = useMastraClient();
-  const [scores, setScores] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScores = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScoresByScorerId({
-          scorerId,
-          page: page || 0,
-          entityId: entityId || void 0,
-          entityType: entityType || void 0,
-          perPage: 10
-        });
-        setScores(res);
-        setIsLoading(false);
-      } catch (error) {
-        setScores(null);
-        setIsLoading(false);
-      }
-    };
-    fetchScores();
-  }, [scorerId, page, entityId, entityType]);
-  return { scores, isLoading };
+  return useQuery({
+    queryKey: ["scores", scorerId, page, entityId, entityType],
+    queryFn: () => client.getScoresByScorerId({ scorerId, page, entityId, entityType, perPage: 10 }),
+    refetchInterval: 5e3
+  });
 };
 const useScorer = (scorerId) => {
   const client = useMastraClient();
@@ -14004,25 +14016,12 @@ const useScorer = (scorerId) => {
 };
 const useScorers = () => {
   const client = useMastraClient();
-  const [scorers, setScorers] = useState({});
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    const fetchScorers = async () => {
-      setIsLoading(true);
-      try {
-        const res = await client.getScorers();
-        setScorers(res);
-      } catch (error) {
-        setScorers({});
-        console.error("Error fetching agents", error);
-        toast.error("Error fetching agents");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchScorers();
-  }, []);
-  return { scorers, isLoading };
+  return useQuery({
+    queryKey: ["scorers"],
+    queryFn: () => client.getScorers(),
+    staleTime: 0,
+    gcTime: 0
+  });
 };
 
 const NameCell = ({ row }) => {
@@ -14269,7 +14268,9 @@ const AgentMetadataModelSwitcher = ({
   defaultModel,
   updateModel,
   closeEditor,
-  modelProviders
+  modelProviders,
+  autoSave = false,
+  selectProviderPlaceholder = "Select provider"
 }) => {
   const [selectedModel, setSelectedModel] = useState(defaultModel);
   const [showSuggestions, setShowSuggestions] = useState(false);
@@ -14281,10 +14282,19 @@ const AgentMetadataModelSwitcher = ({
     return "";
   });
   const [loading, setLoading] = useState(false);
+  const [infoMsg, setInfoMsg] = useState("");
   const modelsList = Object.entries(Models).filter(([provider]) => modelProviders.includes(provider));
   const allModels = modelsList.flatMap(([_, { models }]) => models);
   const providersList = modelsList.map(([provider, { icon }]) => ({ provider, icon }));
   const model = allModels.find((model2) => model2.model === selectedModel);
+  useEffect(() => {
+    const isValidModel = allModels.some((model2) => model2.model === selectedModel);
+    if (selectedModel && !isValidModel) {
+      setInfoMsg("Model not in suggestions—make sure the name is correct.");
+    } else {
+      setInfoMsg("");
+    }
+  }, [selectedModel, allModels]);
   const handleSave = async () => {
     setLoading(true);
     const providerToUse = model?.provider ?? selectedProvider;
@@ -14292,67 +14302,156 @@ const AgentMetadataModelSwitcher = ({
     setLoading(false);
     closeEditor();
   };
-  const filteredModels = allModels.filter((model2) => model2.model.includes(selectedModel));
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  const filteredModels = allModels.filter((model2) => {
+    if (selectedProvider) {
+      return model2.model.includes(selectedModel) && model2.provider === selectedProvider;
+    }
+    return model2.model.includes(selectedModel);
+  });
+  const handleProviderChange = (provider) => {
+    setSelectedProvider(provider);
+    setSelectedModel("");
+    if (autoSave) {
+      updateModel({
+        provider,
+        modelId: ""
+      });
+    }
+  };
+  const handleModelInputBlur = (e) => {
+    setShowSuggestions(false);
+    const isValidModel = allModels.some((model2) => model2.model === e.target.value);
+    if (!isValidModel) {
+      if (autoSave) {
+        updateModel({
+          provider: selectedProvider,
+          modelId: e.target.value
+        });
+      }
+    }
+  };
+  const handleModelClick = (model2) => {
+    setSelectedModel(model2.model);
+    const isValidModel = allModels.some((m) => m.model === model2.model);
+    if (isValidModel) {
+      setSelectedProvider(model2.provider);
+    }
+    if (autoSave) {
+      updateModel({
+        provider: model2.provider,
+        modelId: model2.model
+      });
+    }
+    setShowSuggestions(false);
+  };
+  const handleModelInputChange = (e) => {
+    setSelectedModel(e.target.value);
+    const isValidModel = allModels.some((m) => m.model === e.target.value);
+    if (isValidModel) {
+      const model2 = allModels.find((m) => m.model === e.target.value);
+      if (model2) {
+        setSelectedProvider(model2.provider);
+      }
+    }
+  };
+  const handleModelReset = () => {
+    setSelectedModel("");
+    setInfoMsg("");
+    if (autoSave) {
+      updateModel({
+        provider: selectedProvider,
+        modelId: ""
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
-      Select$1,
+      "div",
       {
-        value: model?.provider ?? selectedProvider,
-        onValueChange: setSelectedProvider,
-        disabled: !!model?.provider,
+        className: cn("grid  items-center gap-2", {
+          "xl:grid-cols-[auto_1fr_auto]": !autoSave,
+          "xl:grid-cols-[auto_1fr]": autoSave
+        }),
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "max-w-[150px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select provider" }) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: providersList.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.provider, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[provider.icon] }),
-            provider.provider
-          ] }) }, provider.provider)) })
+          /* @__PURE__ */ jsxs(Select$1, { value: selectedProvider, onValueChange: handleProviderChange, disabled: !!model?.provider, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectProviderPlaceholder }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: providersList.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.provider, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[provider.icon] }),
+              provider.provider
+            ] }) }, provider.provider)) })
+          ] }),
+          /* @__PURE__ */ jsxs(Popover, { open: showSuggestions, children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "model-input",
+                  list: "model-suggestions",
+                  className: "flex-1 w-full h-[2.25rem] rounded-md min-w-[12rem]",
+                  type: "text",
+                  value: selectedModel,
+                  onChange: handleModelInputChange,
+                  onFocus: () => setShowSuggestions(true),
+                  onBlur: handleModelInputBlur,
+                  placeholder: "Enter model name or select from suggestions...",
+                  autoComplete: "off"
+                }
+              ) }),
+              selectedModel && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "flex items-center justify-center absolute top-0 right-0 text-icon3 hover:text-white hover:text-icon4 w-[2.25rem] h-[2.25rem] p-[.5rem] rounded-md",
+                  onClick: handleModelReset,
+                  children: /* @__PURE__ */ jsx(XIcon, {})
+                }
+              )
+            ] }),
+            filteredModels.length > 0 && /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                onOpenAutoFocus: (e) => e.preventDefault(),
+                className: "flex flex-col  w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto",
+                children: filteredModels.map((model2) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "flex items-center justify-start gap-2 cursor-pointer hover:bg-surface5 p-2 text-[0.875rem]",
+                    onClick: () => handleModelClick(model2),
+                    children: model2.model
+                  },
+                  model2.provider + model2.model
+                ))
+              }
+            )
+          ] }),
+          !autoSave && /* @__PURE__ */ jsx(
+            Button$2,
+            {
+              onClick: handleSave,
+              variant: "secondary",
+              size: "sm",
+              disabled: loading || !selectedModel,
+              className: "w-full",
+              children: loading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : "Save"
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Popover, { open: showSuggestions, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: "model-input",
-          list: "model-suggestions",
-          className: "flex-1",
-          type: "text",
-          value: selectedModel,
-          onChange: (e) => {
-            setSelectedModel(e.target.value);
-            setShowSuggestions(true);
-          },
-          placeholder: "Enter model name or select from suggestions..."
-        }
-      ) }),
-      filteredModels.length > 0 && /* @__PURE__ */ jsx(
-        PopoverContent,
-        {
-          onOpenAutoFocus: (e) => e.preventDefault(),
-          className: "flex flex-col gap-2 w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto",
-          children: filteredModels.map((model2) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2 cursor-pointer hover:bg-surface5 p-2",
-              onClick: () => {
-                setSelectedModel(model2.model);
-                setShowSuggestions(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx(Icon, { children: providerMapToIcon[model2.icon] }),
-                model2.model
-              ]
-            },
-            model2.provider + model2.model
-          ))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleSave, className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsx(Icon, { children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(CircleCheck, {}) }) }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: loading ? "Saving..." : "Save new model" })
-    ] })
-  ] }) });
+    infoMsg && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "text-[0.75rem] text-icon3 flex gap-[.5rem] mt-[0.5rem] ml-[.5rem]",
+          "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-7 [&>svg]:flex-shrink-0 [&>svg]:mt-[0.1rem]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(InfoIcon$1, {}),
+          " ",
+          infoMsg
+        ]
+      }
+    )
+  ] });
 };
 
 const AgentMetadataNetworkList = ({ agents }) => {
@@ -14465,11 +14564,11 @@ const AgentMetadataWorkflowList = ({ workflows }) => {
 };
 const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const { Link, paths } = useLinkComponent();
-  const { scorers, isLoading } = useScorers();
+  const { data: scorers = {}, isLoading } = useScorers();
   const scorerList = Object.keys(scorers).filter((scorerKey) => {
     const scorer = scorers[scorerKey];
     if (entityType === "AGENT") {
-      return scorer.agentIds.includes(entityId);
+      return scorer.agentNames.includes(entityId);
     }
     return scorer.workflowIds.includes(entityId);
   }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
@@ -15882,10 +15981,11 @@ const ToolListInner = ({ toolsWithAgents }) => {
 const ToolEntity = ({ tool }) => {
   const linkRef = useRef(null);
   const { Link, paths } = useLinkComponent();
+  const toolLink = tool.agents.length > 0 ? paths.agentToolLink(tool.agents[0].id, tool.id) : paths.toolLink(tool.id);
   return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
     /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(ToolsIcon, { className: "group-hover/entity:text-[#ECB047]" }) }),
     /* @__PURE__ */ jsxs(EntityContent, { children: [
-      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: paths.toolLink(tool.id), children: tool.id }) }),
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: toolLink, children: tool.id }) }),
       /* @__PURE__ */ jsx(EntityDescription, { children: tool.description }),
       /* @__PURE__ */ jsx("div", { className: "inline-flex flex-wrap gap-2 pt-4", children: tool.agents.map((agent) => {
         return /* @__PURE__ */ jsx(
@@ -16258,7 +16358,7 @@ function TemplateForm({
       "h2",
       {
         className: cn(
-          "text-icon5 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
+          "text-icon4 text-[1.125rem] font-semibold flex items-center gap-[0.5rem]",
           "[&>svg]:w-[1.2em] [&_svg]:h-[1.2em] [&_svg]:opacity-70 "
         ),
         children: [
@@ -16271,29 +16371,13 @@ function TemplateForm({
       SelectField,
       {
         options: providerOptions,
-        label: "Provider",
+        label: "Template AI Model Provider",
         onValueChange: onProviderChange,
         value: selectedProvider,
-        placeholder: "Select a provider"
+        placeholder: "Select"
       }
     ),
     selectedProvider && Object.entries(variables || {}).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-[0.5rem]", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem] font-medium", children: "Select AI Model for Template Installation *" }),
-        /* @__PURE__ */ jsx("p", { className: "text-icon4 text-[0.75rem]", children: "This model will be used by the workflow to process and install the template" }),
-        /* @__PURE__ */ jsx(
-          AgentMetadataModelSwitcher,
-          {
-            defaultProvider: defaultModelProvider || "",
-            defaultModel: defaultModelId || "",
-            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
-            closeEditor: () => {
-            },
-            modelProviders: ["openai", "anthropic", "google", "xai", "groq"]
-          }
-        ),
-        (!defaultModelProvider || !defaultModelId) && /* @__PURE__ */ jsx("p", { className: "text-red-500 text-[0.75rem]", children: "Please select an AI model to continue" })
-      ] }),
       /* @__PURE__ */ jsx("h3", { className: "text-icon3 text-[0.875rem]", children: "Set required Environmental Variables" }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[1fr_1fr] gap-[1rem] items-start", children: isLoadingEnvVars ? /* @__PURE__ */ jsxs(
         "div",
@@ -16333,13 +16417,31 @@ function TemplateForm({
             className: "w-full"
           }
         )
-      ] }, key)) })
+      ] }, key)) }),
+      /* @__PURE__ */ jsxs("div", { className: "border-t border-border1 pt-[3rem] mt-[0.875rem] relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute w-[2rem] h-[2rem] rounded-full bg-surface2 top-0 left-[50%] translate-x-[-50%] translate-y-[-1rem] text-[0.75rem] text-icon3 flex items-center justify-center", children: "And" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-icon4 text-[1rem]", children: "Set AI Model for Template Installation" }),
+        /* @__PURE__ */ jsx("p", { className: "text-icon3 text-[0.875rem] mt-[.5rem] mb-[2rem]", children: "This model will be used by the workflow to process and install the template" }),
+        /* @__PURE__ */ jsx(
+          AgentMetadataModelSwitcher,
+          {
+            defaultProvider: defaultModelProvider || "",
+            defaultModel: defaultModelId || "",
+            updateModel: onModelUpdate || (() => Promise.resolve({ message: "Updated" })),
+            closeEditor: () => {
+            },
+            modelProviders: ["openai", "anthropic", "google", "xai", "groq"],
+            autoSave: true,
+            selectProviderPlaceholder: "Provider"
+          }
+        )
+      ] })
     ] }),
     selectedProvider && !isLoadingEnvVars && /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
         className: cn(
-          "flex items-center gap-[0.5rem] justify-center text-[0.875rem] w-full bg-surface5 min-h-[2.5rem] rounded-lg text-icon5 hover:bg-surface6 transition-colors",
+          "flex items-center gap-[0.5rem] mt-[1rem] justify-center text-[0.875rem] w-full bg-surface5 min-h-[2.5rem] rounded-lg text-icon5 hover:bg-surface6 transition-colors",
           "[&>svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon5"
         ),
         onClick: handleInstallTemplate,
@@ -16578,7 +16680,7 @@ function TemplateFailure({ errorMsg, validationErrors }) {
     };
   };
   const { icon, title } = getIconAndTitle();
-  return /* @__PURE__ */ jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center max-w-2xl mx-auto", children: [
+  return /* @__PURE__ */ jsxs(Container, { className: "space-y-4 text-icon3 mb-[2rem] content-center", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -17676,10 +17778,14 @@ function TraceTimeline({
     ) : /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("grid items-start content-start gap-y-[2px]", "xl:gap-x-[1rem] xl:py-[1rem]", {
-          "xl:grid-cols-[3fr_auto]": !overallEndTime,
-          "xl:grid-cols-[3fr_2fr]": overallEndTime
-        }),
+        className: cn(
+          "grid items-start content-start gap-y-[2px] bg-surface2 rounded-lg overflow-hidden pl-[1.5rem] py-[1.5rem]",
+          "xl:gap-x-[1rem] xl:py-[1rem]",
+          {
+            "xl:grid-cols-[3fr_auto]": !overallEndTime,
+            "xl:grid-cols-[3fr_2fr]": overallEndTime
+          }
+        ),
         children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsx(
           TraceTimelineSpan,
           {
@@ -17953,7 +18059,24 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   return baseInfo;
 }
 
-function SpanDetails({ span }) {
+const ScoreTable = ({ scores, onItemClick }) => {
+  return /* @__PURE__ */ jsxs(Table$1, { children: [
+    /* @__PURE__ */ jsxs(Thead, { children: [
+      /* @__PURE__ */ jsx(Th, { children: "Type" }),
+      /* @__PURE__ */ jsx(Th, { children: "Scorer" }),
+      /* @__PURE__ */ jsx(Th, { children: "Score" }),
+      /* @__PURE__ */ jsx(Th, { children: "Created At" })
+    ] }),
+    /* @__PURE__ */ jsx(Tbody, { children: scores.map((score) => /* @__PURE__ */ jsxs(Row, { onClick: () => onItemClick(score.scorerName), children: [
+      /* @__PURE__ */ jsx(TxtCell, { children: /* @__PURE__ */ jsx(Badge$1, { children: score.type }) }),
+      /* @__PURE__ */ jsx(TxtCell, { children: score.scorerName }),
+      /* @__PURE__ */ jsx(TxtCell, { children: score.score }),
+      /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(score.createdAt) })
+    ] }, score.scoreId)) })
+  ] });
+};
+
+function SpanDetails({ span, onScorerTriggered }) {
   if (!span) {
     return null;
   }
@@ -17961,18 +18084,226 @@ function SpanDetails({ span }) {
     /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
     /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
     /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
-    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) })
+    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) }),
+    span?.links?.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
+      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
+        /* @__PURE__ */ jsx(GaugeIcon, {}),
+        " Scores"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsx(
+        ScoreTable,
+        {
+          scores: span?.links,
+          onItemClick: (scorerName) => onScorerTriggered(scorerName, span.traceId, span.spanId)
+        }
+      ) })
+    ] })
   ] });
 }
 
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, className: cn("cursor-pointer focus-visible:rounded", className), ...props, children }));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto -rotate-90" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "popover-background data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] overflow-auto overflow-x-hidden rounded-none p-1",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, container, sideOffset = 4, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: clsx(
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-surface2 text-icon3 border-sm border-border1 z-50 min-w-[8rem] overflow-auto rounded-md p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "focus:text-accent-foreground relative flex cursor-default cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-[0.8125rem] transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:truncate",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default cursor-pointer select-none items-center gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "border-sm border-border1 flex h-4 w-4 items-center justify-center rounded-sm", children: checked && /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Check, {}) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("popover-dividers-bg -mx-1 my-1 h-px", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+function Dropdown({
+  open,
+  onOpenChange,
+  children,
+  modal
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu, { modal, open, onOpenChange, children });
+}
+Dropdown.Trigger = DropdownMenuTrigger;
+Dropdown.Content = DropdownMenuContent;
+Dropdown.Group = DropdownMenuGroup;
+Dropdown.Portal = DropdownMenuPortal;
+Dropdown.Item = DropdownMenuItem;
+Dropdown.CheckboxItem = DropdownMenuCheckboxItem;
+Dropdown.RadioItem = DropdownMenuRadioItem;
+Dropdown.Label = DropdownMenuLabel;
+Dropdown.Separator = DropdownMenuSeparator;
+Dropdown.Shortcut = DropdownMenuShortcut;
+Dropdown.Sub = DropdownMenuSub;
+Dropdown.SubContent = DropdownMenuSubContent;
+Dropdown.SubTrigger = DropdownMenuSubTrigger;
+Dropdown.RadioGroup = DropdownMenuRadioGroup;
+
+const useTriggerScorer = (onScorerTriggered) => {
+  const client = useMastraClient();
+  return useMutation({
+    mutationFn: async ({ scorerName, traceId, spanId }) => {
+      const response = await client.score({
+        scorerName,
+        targets: [{ traceId, spanId }]
+      });
+      return response;
+    },
+    onSuccess: (_, variables) => {
+      toast.success("Scorer triggered successfully");
+      onScorerTriggered(variables.scorerName, variables.traceId, variables.spanId);
+    },
+    onError: () => {
+      toast.error("Error triggering scorer");
+    }
+  });
+};
+
+const ScorersDropdown = ({ trace, spanId, onScorerTriggered, entityType }) => {
+  const { data: scorers = {}, isLoading } = useScorers();
+  const { mutate: triggerScorer, isPending } = useTriggerScorer(onScorerTriggered);
+  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
+    id: key,
+    name: scorer.scorer.config.name,
+    description: scorer.scorer.config.description,
+    isRegistered: scorer.isRegistered,
+    type: scorer.scorer.config.type
+  })).filter((scorer) => scorer.isRegistered);
+  if (entityType !== "Agent" || spanId) {
+    scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
+  }
+  const isWaiting = isPending || isLoading;
+  return /* @__PURE__ */ jsxs(Dropdown, { children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "light", disabled: isWaiting, children: [
+      isWaiting ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(GaugeIcon, {}) }),
+      "Run scorer",
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dropdown.Content, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(
+      Dropdown.Item,
+      {
+        onClick: () => triggerScorer({ scorerName: scorer.name, traceId: trace.traceId, spanId }),
+        children: /* @__PURE__ */ jsx("span", { children: scorer.name })
+      },
+      scorer.id
+    )) })
+  ] });
+};
+
 function SpanDialog({
+  trace,
   span,
   isOpen,
   onClose,
   onNext,
   onPrevious,
   onViewToggle,
-  spanInfo = []
+  spanInfo = [],
+  onScorerTriggered
 }) {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxs(
@@ -18001,21 +18332,24 @@ function SpanDialog({
           /* @__PURE__ */ jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsx(PanelTopIcon, {}) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
-          /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
-            /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
-              /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
-              " ",
-              span?.name
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+              /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
+                /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+                " ",
+                span?.name
+              ] }),
+              /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                /* @__PURE__ */ jsx(HashIcon, {}),
+                " ",
+                span?.spanId
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsx(HashIcon, {}),
-              " ",
-              span?.spanId
-            ] })
+            span?.traceId && span?.spanId && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ScorersDropdown, { trace, spanId: span?.spanId, onScorerTriggered }) })
           ] }),
           span?.attributes?.usage && /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
           /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsx(SpanDetails, { span })
+          /* @__PURE__ */ jsx(SpanDetails, { span, onScorerTriggered })
         ] })
       ]
     }
@@ -18030,11 +18364,15 @@ function TraceDialog({
   onClose,
   onNext,
   onPrevious,
-  isLoadingSpans
+  isLoadingSpans,
+  computeAgentsLink,
+  computeWorkflowsLink,
+  onScorerTriggered,
+  initialSpanId
 }) {
   const { Link } = useLinkComponent();
-  const [dialogIsOpen, setDialogIsOpen] = useState(false);
-  const [selectedSpanId, setSelectedSpanId] = useState(void 0);
+  const [dialogIsOpen, setDialogIsOpen] = useState(Boolean(initialSpanId));
+  const [selectedSpanId, setSelectedSpanId] = useState(initialSpanId);
   const [combinedView, setCombinedView] = useState(false);
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
   const traceInfo = useTraceInfo(traceDetails);
@@ -18082,6 +18420,12 @@ function TraceDialog({
     return currentIndex > 0;
   };
   const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
+  let entityType;
+  if (traceDetails?.attributes?.agentId) {
+    entityType = "Agent";
+  } else if (traceDetails?.attributes?.workflowId) {
+    entityType = "Workflow";
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       SideDialog,
@@ -18105,7 +18449,7 @@ function TraceDialog({
                 "grid-rows-[auto_1fr_1fr]": selectedSpan && combinedView
               }),
               children: [
-                /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
+                /* @__PURE__ */ jsxs(SideDialogHeader, { className: "pr-[2.5rem]", children: [
                   /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
                     /* @__PURE__ */ jsx(EyeIcon, {}),
                     " ",
@@ -18118,6 +18462,15 @@ function TraceDialog({
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
+                  traceDetails && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    ScorersDropdown,
+                    {
+                      trace: traceDetails,
+                      spanId: selectedSpanId,
+                      onScorerTriggered,
+                      entityType
+                    }
+                  ) }),
                   traceDetails?.metadata?.usage && /* @__PURE__ */ jsx(
                     TraceSpanUsage,
                     {
@@ -18137,7 +18490,20 @@ function TraceDialog({
                       isLoading: isLoadingSpans,
                       className: "pr-[2.5rem] pt-[2.5rem]"
                     }
-                  )
+                  ),
+                  traceDetails?.links?.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
+                    /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
+                      /* @__PURE__ */ jsx(GaugeIcon, {}),
+                      " Scores"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsx(
+                      ScoreTable,
+                      {
+                        scores: traceDetails?.links,
+                        onItemClick: (scorerName) => onScorerTriggered(scorerName, traceDetails.traceId, selectedSpanId)
+                      }
+                    ) })
+                  ] })
                 ] }),
                 selectedSpan && combinedView && /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
                   /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
@@ -18168,11 +18534,11 @@ function TraceDialog({
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
                     /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
-                      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
+                      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
                         /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
                         " ",
                         selectedSpan?.name
-                      ] }),
+                      ] }) }),
                       selectedSpan?.attributes?.usage && /* @__PURE__ */ jsx(
                         TraceSpanUsage,
                         {
@@ -18182,7 +18548,7 @@ function TraceDialog({
                       ),
                       /* @__PURE__ */ jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
                     ] }),
-                    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsx(SpanDetails, { span: selectedSpan }) })
+                    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsx(SpanDetails, { span: selectedSpan, onScorerTriggered }) })
                   ] })
                 ] })
               ]
@@ -18191,16 +18557,21 @@ function TraceDialog({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
+    traceDetails && /* @__PURE__ */ jsx(
       SpanDialog,
       {
+        trace: traceDetails,
         span: selectedSpan,
         isOpen: Boolean(dialogIsOpen && selectedSpanId && !combinedView),
-        onClose: () => setDialogIsOpen(false),
+        onClose: () => {
+          setDialogIsOpen(false);
+          setSelectedSpanId(void 0);
+        },
         onNext: thereIsNextSpan() ? toNextSpan : void 0,
         onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
         onViewToggle: () => setCombinedView(!combinedView),
-        spanInfo: selectedSpanInfo
+        spanInfo: selectedSpanInfo,
+        onScorerTriggered
       }
     )
   ] });