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

package/dist/index.cjs.js

@@ -3163,10 +3163,18 @@ TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 const TooltipIconButton = React.forwardRef(
   ({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button$2, { variant: "ghost", size: "icon", ...rest, className: cn("size-6 p-1", className), ref, children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: tooltip })
-      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button$2,
+        {
+          variant: "ghost",
+          size: "icon",
+          ...rest,
+          className: cn("size-6 p-1", className),
+          ref,
+          "aria-label": tooltip,
+          children
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, children: tooltip })
     ] }) });
   }
@@ -11585,6 +11593,102 @@ const AgentAdvancedSettings = () => {
   ] }) });
 };
 
+const useAgent = (agentId) => {
+  const client = react$3.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.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 = react$3.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.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 = react$3.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.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 = react$3.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.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 = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.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] });
+      }
+      sonner.toast.success("Chat deleted successfully");
+    },
+    onError: () => {
+      sonner.toast.error("Failed to delete chat");
+    }
+  });
+};
+const useMemorySearch = ({
+  agentId,
+  resourceId,
+  threadId
+}) => {
+  const { requestContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -11617,8 +11721,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__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" });
+  }
+  if (!agent) {
+    return /* @__PURE__ */ jsxRuntime.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) {
@@ -13111,10 +13226,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);
@@ -13129,13 +13252,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" })
         ] })
@@ -14545,6 +14682,67 @@ const PromptEnhancerTextarea = ({ agentId }) => {
   ] });
 };
 
+const useAgents = () => {
+  const client = react$3.useMastraClient();
+  const { requestContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["agents", JSON.stringify(requestContext)],
+    queryFn: () => client.listAgents(requestContext)
+  });
+};
+const useUpdateAgentModel = (agentId) => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.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 = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.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 = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.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 = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.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) {
@@ -14552,16 +14750,20 @@ const AgentMetadataNetworkList = ({ agents }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), "data-testid": "agent-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" });
+  }
+  if (!agent) {
+    return /* @__PURE__ */ jsxRuntime.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 ?? {};
@@ -14580,7 +14782,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__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
@@ -14697,8 +14899,10 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityHeader, { icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), variant: "default", children: agentId }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
@@ -14902,67 +15106,6 @@ const formatDay = (date) => {
   return new Date(date).toLocaleString("en-us", options).replace(",", " at");
 };
 
-const useAgents = () => {
-  const client = react$3.useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.useQuery({
-    queryKey: ["agents", JSON.stringify(requestContext)],
-    queryFn: () => client.listAgents(requestContext)
-  });
-};
-const useUpdateAgentModel = (agentId) => {
-  const client = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.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 = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.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 = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.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 = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.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,
@@ -15010,17 +15153,6 @@ function AgentCombobox({
   );
 }
 
-const useAgent = (agentId) => {
-  const client = react$3.useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.useQuery({
-    queryKey: ["agent", agentId, JSON.stringify(requestContext)],
-    queryFn: () => agentId ? client.getAgent(agentId).details(requestContext) : null,
-    retry: false,
-    enabled: Boolean(agentId)
-  });
-};
-
 const useExecuteAgentTool = () => {
   const client = react$3.useMastraClient();
   return reactQuery.useMutation({
@@ -15128,91 +15260,6 @@ const AgentToolPanel = ({ toolId, agentId }) => {
   );
 };
 
-const useMemory = (agentId) => {
-  const client = react$3.useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.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 = react$3.useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.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 = react$3.useMastraClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.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 = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  const { requestContext } = usePlaygroundStore();
-  return reactQuery.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] });
-      }
-      sonner.toast.success("Chat deleted successfully");
-    },
-    onError: () => {
-      sonner.toast.error("Failed to delete chat");
-    }
-  });
-};
-const useMemorySearch = ({
-  agentId,
-  resourceId,
-  threadId
-}) => {
-  const { requestContext } = usePlaygroundStore();
-  const client = react$3.useMastraClient();
-  return reactQuery.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__ */ jsxRuntime.jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
@@ -15994,14 +16041,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__ */ jsxRuntime.jsxs(AgentInformationLayout, { agentId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AgentEntityHeader, { agentId }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AgentInformationTabLayout, { agentId, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
+        hasMemory && /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "memory", children: "Memory" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "overview", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadata, { agentId }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "model-settings", children: /* @__PURE__ */ jsxRuntime.jsx(AgentSettings, { agentId }) }),
+      hasMemory && /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "memory", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId }) })
+    ] })
+  ] });
+}
+const STORAGE_KEY = "agent-info-selected-tab";
+const useAgentInformationTab = ({ isMemoryLoading, hasMemory }) => {
   const [selectedTab, setSelectedTab] = React.useState(() => {
     return sessionStorage.getItem(STORAGE_KEY) || "overview";
   });
@@ -16010,7 +16067,20 @@ function AgentInformation({ agentId, threadId }) {
     sessionStorage.setItem(STORAGE_KEY, value);
   };
   React.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();
+  React.useEffect(() => {
+    if (modelId?.includes("gpt-5")) {
       setSettings({
         ...settings || {},
         modelSettings: {
@@ -16019,51 +16089,26 @@ function AgentInformation({ agentId, threadId }) {
         }
       });
     }
-  }, [agent]);
-  React.useEffect(() => {
-    if (!isMemoryLoading && !memory?.result && selectedTab === "memory") {
-      handleTabChange("overview");
-    }
-  }, [isMemoryLoading, memory?.result, selectedTab]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full items-start overflow-y-auto border-l-sm border-border1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AgentEntityHeader, { agentId, isLoading: isMemoryLoading, agentName: agent?.name || "" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "overview", children: "Overview" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "model-settings", children: "Model Settings" }),
-        memory?.result && /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "memory", children: "Memory" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "overview", children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }),
-        agent && /* @__PURE__ */ jsxRuntime.jsx(
-          AgentMetadata,
-          {
-            agentId,
-            agent,
-            updateModel,
-            resetModel,
-            updateModelInModelList,
-            reorderModelList,
-            hasMemoryEnabled: Boolean(memory?.result),
-            modelVersion: agent.modelVersion
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(TabContent$1, { value: "model-settings", children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }),
-        agent && /* @__PURE__ */ jsxRuntime.jsx(
-          AgentSettings,
-          {
-            modelVersion: agent.modelVersion,
-            hasMemory: Boolean(memory?.result),
-            hasSubAgents: Boolean(Object.keys(agent.agents || {}).length > 0)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "memory", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) : /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId }) })
-    ] }) })
-  ] });
-}
+  }, [modelId]);
+  return {
+    settings,
+    setSettings
+  };
+};
+const AgentInformationLayout = ({ children, agentId }) => {
+  const { data: agent } = useAgent(agentId);
+  useAgentInformationSettings({ modelId: agent?.modelId || "" });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t-sm border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(PlaygroundTabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
+};
 
 const NameCell$1 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
@@ -17737,7 +17782,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: [
@@ -18334,8 +18387,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);
@@ -18351,7 +18404,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;
@@ -18370,6 +18423,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: [
@@ -18976,6 +19042,9 @@ exports.AgentCombobox = AgentCombobox;
 exports.AgentEntityHeader = AgentEntityHeader;
 exports.AgentIcon = AgentIcon;
 exports.AgentInformation = AgentInformation;
+exports.AgentInformationLayout = AgentInformationLayout;
+exports.AgentInformationTabLayout = AgentInformationTabLayout;
+exports.AgentMemory = AgentMemory;
 exports.AgentMetadata = AgentMetadata;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;
@@ -19172,6 +19241,8 @@ exports.toast = toast;
 exports.traceScoresListColumns = traceScoresListColumns;
 exports.tracesListColumns = tracesListColumns;
 exports.useAgent = useAgent;
+exports.useAgentInformationSettings = useAgentInformationSettings;
+exports.useAgentInformationTab = useAgentInformationTab;
 exports.useAgentPromptExperiment = useAgentPromptExperiment;
 exports.useAgentSettings = useAgentSettings;
 exports.useAgents = useAgents;