@mastra/playground-ui 7.0.0-beta.2 → 7.0.0-beta.3

package/dist/index.es.js

@@ -3129,10 +3129,18 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const TooltipIconButton = forwardRef(
   ({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$2, { variant: "ghost", size: "icon", ...rest, className: cn("size-6 p-1", className), ref, children: [
-        children,
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: tooltip })
-      ] }) }),
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button$2,
+        {
+          variant: "ghost",
+          size: "icon",
+          ...rest,
+          className: cn("size-6 p-1", className),
+          ref,
+          "aria-label": tooltip,
+          children
+        }
+      ) }),
       /* @__PURE__ */ jsx(TooltipContent, { side, children: tooltip })
     ] }) });
   }
@@ -11551,6 +11559,102 @@ const AgentAdvancedSettings = () => {
   ] }) });
 };
 
+const useAgent = (agentId) => {
+  const client = useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["agent", agentId, JSON.stringify(requestContext)],
+    queryFn: () => agentId ? client.getAgent(agentId).details(requestContext) : null,
+    retry: false,
+    enabled: Boolean(agentId)
+  });
+};
+
+const useMemory = (agentId) => {
+  const client = useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["memory", agentId],
+    queryFn: () => agentId ? client.getMemoryStatus(agentId, requestContext) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false
+  });
+};
+const useMemoryConfig = (agentId) => {
+  const client = useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["memory", "config", agentId],
+    queryFn: () => agentId ? client.getMemoryConfig({ agentId, requestContext }) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useThreads = ({
+  resourceId,
+  agentId,
+  isMemoryEnabled
+}) => {
+  const client = useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["memory", "threads", resourceId, agentId],
+    queryFn: async () => {
+      if (!isMemoryEnabled) return null;
+      const result = await client.listMemoryThreads({ resourceId, agentId, requestContext });
+      return result.threads;
+    },
+    enabled: Boolean(isMemoryEnabled),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+};
+const useDeleteThread = () => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  const { requestContext } = usePlaygroundStore();
+  return useMutation({
+    mutationFn: ({ threadId, agentId }) => {
+      const thread = client.getMemoryThread({ threadId, agentId });
+      return thread.delete({ requestContext });
+    },
+    onSuccess: (_, variables) => {
+      const { agentId } = variables;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
+      }
+      toast$1.success("Chat deleted successfully");
+    },
+    onError: () => {
+      toast$1.error("Failed to delete chat");
+    }
+  });
+};
+const useMemorySearch = ({
+  agentId,
+  resourceId,
+  threadId
+}) => {
+  const { requestContext } = usePlaygroundStore();
+  const client = useMastraClient();
+  return useMutation({
+    mutationFn: async ({ searchQuery, memoryConfig }) => {
+      return client.searchMemory({ agentId, resourceId, threadId, searchQuery, memoryConfig, requestContext });
+    }
+  });
+};
+
 const NetworkCheckbox = ({ hasMemory, hasSubAgents }) => {
   const isNetworkAvailable = hasMemory && hasSubAgents;
   const radio = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -11583,8 +11687,19 @@ const NetworkCheckbox = ({ hasMemory, hasSubAgents }) => {
     ] }) })
   ] });
 };
-const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }) => {
+const AgentSettings = ({ agentId }) => {
+  const { data: agent, isLoading } = useAgent(agentId);
+  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
   const { settings, setSettings, resetAll } = useAgentSettings();
+  if (isLoading || isMemoryLoading) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-full" });
+  }
+  if (!agent) {
+    return /* @__PURE__ */ jsx("div", { children: "Agent not found" });
+  }
+  const hasMemory = Boolean(memory?.result);
+  const hasSubAgents = Boolean(Object.keys(agent.agents || {}).length > 0);
+  const modelVersion = agent.modelVersion;
   let radioValue;
   if (modelVersion === "v2") {
     if (settings?.modelSettings?.chatWithNetwork) {
@@ -13077,10 +13192,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);
@@ -13095,13 +13218,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" })
         ] })
@@ -14511,6 +14648,67 @@ const PromptEnhancerTextarea = ({ agentId }) => {
   ] });
 };
 
+const useAgents = () => {
+  const client = useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return useQuery({
+    queryKey: ["agents", JSON.stringify(requestContext)],
+    queryFn: () => client.listAgents(requestContext)
+  });
+};
+const useUpdateAgentModel = (agentId) => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).updateModel(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error updating model", err);
+    }
+  });
+};
+const useReorderModelList = (agentId) => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).reorderModelList(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error reordering model list", err);
+    }
+  });
+};
+const useUpdateModelInModelList = (agentId) => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => client.getAgent(agentId).updateModelInModelList(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error updating model in model list", err);
+    }
+  });
+};
+const useResetAgentModel = (agentId) => {
+  const client = useMastraClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => client.getAgent(agentId).resetModel(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
+    },
+    onError: (err) => {
+      console.error("Error resetting model", err);
+    }
+  });
+};
+
 const AgentMetadataNetworkList = ({ agents }) => {
   const { Link, paths } = useLinkComponent();
   if (agents.length === 0) {
@@ -14518,16 +14716,20 @@ const AgentMetadataNetworkList = ({ agents }) => {
   }
   return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentLink(agent.id), "data-testid": "agent-badge", children: /* @__PURE__ */ jsx(Badge, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
-const AgentMetadata = ({
-  agentId,
-  agent,
-  hasMemoryEnabled,
-  updateModel,
-  resetModel,
-  updateModelInModelList,
-  reorderModelList,
-  modelVersion
-}) => {
+const AgentMetadata = ({ agentId }) => {
+  const { data: agent, isLoading } = useAgent(agentId);
+  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
+  const { mutate: reorderModelList } = useReorderModelList(agentId);
+  const { mutateAsync: resetModel } = useResetAgentModel(agentId);
+  const { mutateAsync: updateModelInModelList } = useUpdateModelInModelList(agentId);
+  const { mutateAsync: updateModel } = useUpdateAgentModel(agentId);
+  const hasMemoryEnabled = Boolean(memory?.result);
+  if (isLoading || isMemoryLoading) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-full" });
+  }
+  if (!agent) {
+    return /* @__PURE__ */ jsx("div", { children: "Agent not found" });
+  }
   const networkAgentsMap = agent.agents ?? {};
   const networkAgents = Object.keys(networkAgentsMap).map((key) => ({ ...networkAgentsMap[key], id: key }));
   const agentTools = agent.tools ?? {};
@@ -14546,7 +14748,7 @@ const AgentMetadata = ({
       AgentMetadataSection,
       {
         title: "Model",
-        hint: modelVersion === "v2" ? void 0 : {
+        hint: agent.modelVersion === "v2" ? void 0 : {
           link: "https://mastra.ai/guides/migrations/vnext-to-standard-apis",
           title: "You are using a legacy v1 model",
           icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
@@ -14663,8 +14865,10 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   return /* @__PURE__ */ jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
-const AgentEntityHeader = ({ agentId, isLoading, agentName }) => {
+const AgentEntityHeader = ({ agentId }) => {
+  const { data: agent, isLoading } = useAgent(agentId);
   const { handleCopy } = useCopyToClipboard({ text: agentId });
+  const agentName = agent?.name || "";
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EntityHeader, { icon: /* @__PURE__ */ jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), variant: "default", children: agentId }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
@@ -14868,67 +15072,6 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
-const useAgents = () => {
-  const client = useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["agents", JSON.stringify(requestContext)],
-    queryFn: () => client.listAgents(requestContext)
-  });
-};
-const useUpdateAgentModel = (agentId) => {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (payload) => client.getAgent(agentId).updateModel(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
-    },
-    onError: (err) => {
-      console.error("Error updating model", err);
-    }
-  });
-};
-const useReorderModelList = (agentId) => {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (payload) => client.getAgent(agentId).reorderModelList(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
-    },
-    onError: (err) => {
-      console.error("Error reordering model list", err);
-    }
-  });
-};
-const useUpdateModelInModelList = (agentId) => {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (payload) => client.getAgent(agentId).updateModelInModelList(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
-    },
-    onError: (err) => {
-      console.error("Error updating model in model list", err);
-    }
-  });
-};
-const useResetAgentModel = (agentId) => {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async () => client.getAgent(agentId).resetModel(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agent", agentId] });
-    },
-    onError: (err) => {
-      console.error("Error resetting model", err);
-    }
-  });
-};
-
 function AgentCombobox({
   value,
   onValueChange,
@@ -14976,17 +15119,6 @@ function AgentCombobox({
   );
 }
 
-const useAgent = (agentId) => {
-  const client = useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["agent", agentId, JSON.stringify(requestContext)],
-    queryFn: () => agentId ? client.getAgent(agentId).details(requestContext) : null,
-    retry: false,
-    enabled: Boolean(agentId)
-  });
-};
-
 const useExecuteAgentTool = () => {
   const client = useMastraClient();
   return useMutation({
@@ -15094,91 +15226,6 @@ const AgentToolPanel = ({ toolId, agentId }) => {
   );
 };
 
-const useMemory = (agentId) => {
-  const client = useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["memory", agentId],
-    queryFn: () => agentId ? client.getMemoryStatus(agentId, requestContext) : null,
-    enabled: Boolean(agentId),
-    staleTime: 5 * 60 * 1e3,
-    // 5 minutes
-    gcTime: 10 * 60 * 1e3,
-    // 10 minutes
-    retry: false
-  });
-};
-const useMemoryConfig = (agentId) => {
-  const client = useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["memory", "config", agentId],
-    queryFn: () => agentId ? client.getMemoryConfig({ agentId, requestContext }) : null,
-    enabled: Boolean(agentId),
-    staleTime: 5 * 60 * 1e3,
-    // 5 minutes
-    gcTime: 10 * 60 * 1e3,
-    // 10 minutes
-    retry: false,
-    refetchOnWindowFocus: false
-  });
-};
-const useThreads = ({
-  resourceId,
-  agentId,
-  isMemoryEnabled
-}) => {
-  const client = useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return useQuery({
-    queryKey: ["memory", "threads", resourceId, agentId],
-    queryFn: async () => {
-      if (!isMemoryEnabled) return null;
-      const result = await client.listMemoryThreads({ resourceId, agentId, requestContext });
-      return result.threads;
-    },
-    enabled: Boolean(isMemoryEnabled),
-    staleTime: 0,
-    gcTime: 0,
-    retry: false,
-    refetchOnWindowFocus: false
-  });
-};
-const useDeleteThread = () => {
-  const client = useMastraClient();
-  const queryClient = useQueryClient();
-  const { requestContext } = usePlaygroundStore();
-  return useMutation({
-    mutationFn: ({ threadId, agentId }) => {
-      const thread = client.getMemoryThread({ threadId, agentId });
-      return thread.delete({ requestContext });
-    },
-    onSuccess: (_, variables) => {
-      const { agentId } = variables;
-      if (agentId) {
-        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
-      }
-      toast$1.success("Chat deleted successfully");
-    },
-    onError: () => {
-      toast$1.error("Failed to delete chat");
-    }
-  });
-};
-const useMemorySearch = ({
-  agentId,
-  resourceId,
-  threadId
-}) => {
-  const { requestContext } = usePlaygroundStore();
-  const client = useMastraClient();
-  return useMutation({
-    mutationFn: async ({ searchQuery, memoryConfig }) => {
-      return client.searchMemory({ agentId, resourceId, threadId, searchQuery, memoryConfig, requestContext });
-    }
-  });
-};
-
 function MarkdownRenderer({ children }) {
   const processedText = children.replace(/\\n/g, "\n");
   return /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
@@ -15960,14 +16007,24 @@ const TabContent$1 = ({ children, value }) => {
 };
 
 function AgentInformation({ agentId, threadId }) {
-  const { data: agent, isLoading } = useAgent(agentId);
-  const { mutateAsync: updateModel } = useUpdateAgentModel(agentId);
-  const { mutateAsync: resetModel } = useResetAgentModel(agentId);
-  const { mutate: reorderModelList } = useReorderModelList(agentId);
-  const { mutateAsync: updateModelInModelList } = useUpdateModelInModelList(agentId);
-  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
-  const { settings, setSettings } = useAgentSettings();
-  const STORAGE_KEY = "agent-info-selected-tab";
+  const { data: memory } = useMemory(agentId);
+  const hasMemory = Boolean(memory?.result);
+  return /* @__PURE__ */ jsxs(AgentInformationLayout, { agentId, children: [
+    /* @__PURE__ */ jsx(AgentEntityHeader, { agentId }),
+    /* @__PURE__ */ jsxs(AgentInformationTabLayout, { agentId, children: [
+      /* @__PURE__ */ jsxs(TabList$1, { children: [
+        /* @__PURE__ */ jsx(Tab$1, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
+        hasMemory && /* @__PURE__ */ jsx(Tab$1, { value: "memory", children: "Memory" })
+      ] }),
+      /* @__PURE__ */ jsx(TabContent$1, { value: "overview", children: /* @__PURE__ */ jsx(AgentMetadata, { agentId }) }),
+      /* @__PURE__ */ jsx(TabContent$1, { value: "model-settings", children: /* @__PURE__ */ jsx(AgentSettings, { agentId }) }),
+      hasMemory && /* @__PURE__ */ jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) })
+    ] })
+  ] });
+}
+const STORAGE_KEY = "agent-info-selected-tab";
+const useAgentInformationTab = ({ isMemoryLoading, hasMemory }) => {
   const [selectedTab, setSelectedTab] = useState(() => {
     return sessionStorage.getItem(STORAGE_KEY) || "overview";
   });
@@ -15976,7 +16033,20 @@ function AgentInformation({ agentId, threadId }) {
     sessionStorage.setItem(STORAGE_KEY, value);
   };
   useEffect(() => {
-    if (agent?.modelId?.includes("gpt-5")) {
+    if (!isMemoryLoading && !hasMemory && selectedTab === "memory") {
+      setSelectedTab("overview");
+      sessionStorage.setItem(STORAGE_KEY, "overview");
+    }
+  }, [isMemoryLoading, hasMemory, selectedTab]);
+  return {
+    selectedTab,
+    handleTabChange
+  };
+};
+const useAgentInformationSettings = ({ modelId }) => {
+  const { settings, setSettings } = useAgentSettings();
+  useEffect(() => {
+    if (modelId?.includes("gpt-5")) {
       setSettings({
         ...settings || {},
         modelSettings: {
@@ -15985,51 +16055,26 @@ function AgentInformation({ agentId, threadId }) {
         }
       });
     }
-  }, [agent]);
-  useEffect(() => {
-    if (!isMemoryLoading && !memory?.result && selectedTab === "memory") {
-      handleTabChange("overview");
-    }
-  }, [isMemoryLoading, memory?.result, selectedTab]);
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children: [
-    /* @__PURE__ */ jsx(AgentEntityHeader, { agentId, isLoading: isMemoryLoading, agentName: agent?.name || "" }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children: [
-      /* @__PURE__ */ jsxs(TabList$1, { children: [
-        /* @__PURE__ */ jsx(Tab$1, { value: "overview", children: "Overview" }),
-        /* @__PURE__ */ jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
-        memory?.result && /* @__PURE__ */ jsx(Tab$1, { value: "memory", children: "Memory" })
-      ] }),
-      /* @__PURE__ */ jsxs(TabContent$1, { value: "overview", children: [
-        isLoading && /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }),
-        agent && /* @__PURE__ */ jsx(
-          AgentMetadata,
-          {
-            agentId,
-            agent,
-            updateModel,
-            resetModel,
-            updateModelInModelList,
-            reorderModelList,
-            hasMemoryEnabled: Boolean(memory?.result),
-            modelVersion: agent.modelVersion
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(TabContent$1, { value: "model-settings", children: [
-        isLoading && /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }),
-        agent && /* @__PURE__ */ jsx(
-          AgentSettings,
-          {
-            modelVersion: agent.modelVersion,
-            hasMemory: Boolean(memory?.result),
-            hasSubAgents: Boolean(Object.keys(agent.agents || {}).length > 0)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(TabContent$1, { value: "memory", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) : /* @__PURE__ */ jsx(AgentMemory, { agentId, threadId }) })
-    ] }) })
-  ] });
-}
+  }, [modelId]);
+  return {
+    settings,
+    setSettings
+  };
+};
+const AgentInformationLayout = ({ children, agentId }) => {
+  const { data: agent } = useAgent(agentId);
+  useAgentInformationSettings({ modelId: agent?.modelId || "" });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children });
+};
+const AgentInformationTabLayout = ({ children, agentId }) => {
+  const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
+  const hasMemory = Boolean(memory?.result);
+  const { selectedTab, handleTabChange } = useAgentInformationTab({
+    isMemoryLoading,
+    hasMemory
+  });
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsx(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
+};
 
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
@@ -17703,7 +17748,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: [
@@ -18300,8 +18353,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);
@@ -18317,7 +18370,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;
@@ -18336,6 +18389,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: [
@@ -18932,5 +18998,5 @@ function MCPServerCombobox({
   );
 }
 
-export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentCombobox, AgentEntityHeader, AgentIcon, AgentInformation, AgentInformationLayout, AgentInformationTabLayout, AgentMemory, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentPromptExperimentProvider, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, CommitIcon, CrossIcon, Crumb, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogoWithoutText, LogsIcon, MCPDetail, MCPServerCombobox, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, RequestContext, RequestContextWrapper, Row, ScoreDialog, ScorerCombobox, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, Skeleton, SlashIcon, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolCombobox, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TsIcon, Txt, TxtCell, VariablesIcon, WorkflowCoinIcon, WorkflowCombobox, WorkflowGraph, WorkflowIcon, WorkflowInformation, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, convertWorkflowRunStateToStreamResult, extractPrompt, formatHierarchicalSpans, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, useAgent, useAgentInformationSettings, useAgentInformationTab, useAgentPromptExperiment, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, usePlaygroundStore, useReorderModelList, useResetAgentModel, useScorer, useScorers, useScoresByScorerId, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRunExecutionResult, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map