@mastra/playground-ui 6.7.2-alpha.0 → 6.7.2

package/dist/index.cjs.js

@@ -15,7 +15,7 @@ const remarkGfm = require('remark-gfm');
 const reactSyntaxHighlighter = require('@assistant-ui/react-syntax-highlighter');
 const prism = require('react-syntax-highlighter/dist/cjs/styles/prism');
 const langJson = require('@codemirror/lang-json');
-const highlight = require('@lezer/highlight');
+const highlight$1 = require('@lezer/highlight');
 const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
@@ -4377,7 +4377,7 @@ const useCodemirrorTheme$2 = () => {
         background: "transparent",
         gutterForeground: "#939393"
       },
-      styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -4394,6 +4394,19 @@ const SyntaxHighlighter$2 = ({
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
 };
+async function highlight(code, language) {
+  const { codeToTokens, bundledLanguages } = await import('shiki');
+  if (!(language in bundledLanguages)) return null;
+  const { tokens } = await codeToTokens(code, {
+    lang: language,
+    defaultColor: false,
+    themes: {
+      light: "github-light",
+      dark: "github-dark"
+    }
+  });
+  return tokens;
+}
 
 const variantClasses$2 = {
   default: "text-icon3",
@@ -5289,7 +5302,7 @@ const useCodemirrorTheme$1 = () => {
         gutterForeground: "#939393",
         background: "transparent"
       },
-      styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -12792,7 +12805,7 @@ const useCodemirrorTheme = () => {
         gutterForeground: "#939393",
         background: "transparent"
       },
-      styles: [{ tag: [highlight.tags.className, highlight.tags.propertyName] }]
+      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
     }),
     []
   );
@@ -15199,367 +15212,1873 @@ const AgentToolPanel = ({ toolId, agentId }) => {
   );
 };
 
-const NameCell$1 = ({ row }) => {
-  const { Link, paths } = useLinkComponent();
-  const tool = row.original;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EntryCell,
-    {
-      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.toolLink(tool.id), children: tool.id }),
-      description: tool.description
-    }
-  );
-};
-const columns$1 = [
-  {
-    header: "Name",
-    accessorKey: "name",
-    cell: NameCell$1
-  },
-  {
-    header: "Attached entities",
-    accessorKey: "attachedEntities",
-    cell: ({ row }) => {
-      const tool = row.original;
-      const agentsCount = tool.agents.length;
-      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
-        agentsCount,
-        " agent",
-        agentsCount > 1 ? "s" : ""
-      ] }) });
-    }
-  }
-];
-
-const prepareToolsTable = (tools, agents) => {
-  const toolsWithAgents = /* @__PURE__ */ new Map();
-  const agentsKeys = Object.keys(agents);
-  for (const k of agentsKeys) {
-    const agent = agents[k];
-    const agentToolsDict = agent.tools;
-    const agentToolsKeys = Object.keys(agentToolsDict);
-    for (const key of agentToolsKeys) {
-      const tool = agentToolsDict[key];
-      if (!toolsWithAgents.has(tool.id)) {
-        toolsWithAgents.set(tool.id, {
-          ...tool,
-          agents: []
-        });
-      }
-      toolsWithAgents.get(tool.id).agents.push({ ...agent, id: k });
-    }
-  }
-  for (const [_, tool] of Object.entries(tools)) {
-    if (!toolsWithAgents.has(tool.id)) {
-      toolsWithAgents.set(tool.id, {
-        ...tool,
-        agents: []
-      });
-    }
-  }
-  return Array.from(toolsWithAgents.values());
-};
-
-function ToolTable({ tools, agents, isLoading }) {
-  const [search, setSearch] = React.useState("");
-  const { navigate, paths } = useLinkComponent();
-  const toolData = React.useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
-  const table = reactTable.useReactTable({
-    data: toolData,
-    columns: columns$1,
-    getCoreRowModel: reactTable.getCoreRowModel()
-  });
-  const ths = table.getHeaderGroups()[0];
-  const rows = table.getRowModel().rows.concat();
-  if (rows.length === 0 && !isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
-  }
-  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
-        const firstAgent = row.original.agents[0];
-        const link = firstAgent ? paths.agentToolLink(firstAgent.id, row.original.id) : paths.toolLink(row.original.id);
-        return /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
-      }) })
-    ] }) }) })
-  ] });
-}
-const ToolTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
-  ] }, index)) })
-] });
-const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-  EmptyState,
-  {
-    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
-    titleSlot: "Configure Tools",
-    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
-    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button$1,
-      {
-        size: "lg",
-        className: "w-full",
-        variant: "light",
-        as: "a",
-        href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
-        target: "_blank",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
-          "Docs"
-        ]
-      }
-    )
-  }
-) });
-
-const useExecuteTool = () => {
+const useMemory = (agentId) => {
   const client = react$3.useMastraClient();
-  return reactQuery.useMutation({
-    mutationFn: async ({
-      toolId,
-      input,
-      runtimeContext: playgroundRuntimeContext
-    }) => {
-      const runtimeContext = new di.RuntimeContext();
-      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
-        runtimeContext.set(key, value);
-      });
-      try {
-        const tool = client.getTool(toolId);
-        const response = await tool.execute({ data: input, runtimeContext });
-        return response;
-      } catch (error) {
-        sonner.toast.error("Error executing dev tool");
-        console.error("Error executing dev tool:", error);
-        throw error;
-      }
-    }
+  return reactQuery.useQuery({
+    queryKey: ["memory", agentId],
+    queryFn: () => agentId ? client.getMemoryStatus(agentId) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false
   });
 };
-
-const useTools = () => {
-  const { runtimeContext } = usePlaygroundStore();
+const useMemoryConfig = (agentId) => {
   const client = react$3.useMastraClient();
   return reactQuery.useQuery({
-    queryKey: ["tools"],
-    queryFn: () => client.getTools(runtimeContext)
+    queryKey: ["memory", "config", agentId],
+    queryFn: () => agentId ? client.getMemoryConfig({ agentId }) : null,
+    enabled: Boolean(agentId),
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: false,
+    refetchOnWindowFocus: false
   });
 };
-const useTool = (toolId) => {
+const useThreads = ({
+  resourceId,
+  agentId,
+  isMemoryEnabled
+}) => {
   const client = react$3.useMastraClient();
-  const { runtimeContext } = usePlaygroundStore();
   return reactQuery.useQuery({
-    queryKey: ["tool", toolId],
-    queryFn: () => client.getTool(toolId).details(runtimeContext)
+    queryKey: ["memory", "threads", resourceId, agentId],
+    queryFn: () => isMemoryEnabled ? client.getMemoryThreads({ resourceId, agentId }) : null,
+    enabled: Boolean(isMemoryEnabled),
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: false
   });
 };
-
-const ToolPanel = ({ toolId }) => {
-  const { data: tool, isLoading } = useTool(toolId);
-  const { mutateAsync: executeTool, isPending: isExecuting, data: result } = useExecuteTool();
-  const { runtimeContext: playgroundRuntimeContext } = usePlaygroundStore();
-  const handleExecuteTool = async (data) => {
-    if (!tool) return;
-    return executeTool({
-      toolId: tool.id,
-      input: data,
-      runtimeContext: playgroundRuntimeContext
-    });
-  };
-  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
-  if (isLoading) return null;
-  if (!tool)
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToolExecutor,
-    {
-      executionResult: result,
-      isExecutingTool: isExecuting,
-      zodInputSchema,
-      handleExecuteTool,
-      toolDescription: tool.description,
-      toolId: tool.id
+const useDeleteThread = () => {
+  const client = react$3.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ threadId, agentId, networkId }) => client.deleteThread(threadId, { agentId, networkId }),
+    onSuccess: (_, variables) => {
+      const { agentId, networkId } = variables;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
+      }
+      if (networkId) {
+        queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
+      }
+      sonner.toast.success("Chat deleted successfully");
+    },
+    onError: () => {
+      sonner.toast.error("Failed to delete chat");
     }
-  );
+  });
 };
-
-function TemplatesTools({
-  tagOptions,
-  selectedTag,
-  providerOptions,
-  selectedProvider,
-  onTagChange,
-  onProviderChange,
-  searchTerm,
-  onSearchChange,
-  onReset,
-  className,
-  isLoading
-}) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "h-[6.5rem] flex items-center gap-[2rem]",
-          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("div", {})
-        ]
+const useMemorySearch = ({
+  agentId,
+  resourceId,
+  threadId
+}) => {
+  const searchMemory = async (searchQuery, memoryConfig) => {
+    if (!searchQuery.trim()) {
+      return { results: [], count: 0, query: searchQuery };
+    }
+    const params = new URLSearchParams({
+      searchQuery,
+      resourceId,
+      agentId
+    });
+    if (threadId) {
+      params.append("threadId", threadId);
+    }
+    if (memoryConfig) {
+      params.append("memoryConfig", JSON.stringify(memoryConfig));
+    }
+    const response = await fetch(`/api/memory/search?${params}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "x-mastra-dev-playground": "true"
       }
-    );
+    });
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: "Unknown error" }));
+      console.error("Search memory error:", errorData);
+      throw new Error(errorData.message || errorData.error || "Failed to search memory");
+    }
+    return response.json();
+  };
+  return { searchMemory };
+};
+
+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 });
+}
+const HighlightedPre = React.memo(({ children, language, ...props }) => {
+  const [tokens, setTokens] = React.useState([]);
+  React.useEffect(() => {
+    highlight(children, language).then((tokens2) => {
+      if (tokens2) setTokens(tokens2);
+    });
+  }, [children, language]);
+  if (!tokens.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SearchField,
-      {
-        label: "Search templates",
-        value: searchTerm,
-        onChange: (e) => onSearchChange?.(e.target.value),
-        placeholder: "Search Template"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: line.map((token, tokenIndex) => {
+      const style = typeof token.htmlStyle === "string" ? void 0 : token.htmlStyle;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
+          style,
+          children: token.content
+        },
+        tokenIndex
+      );
+    }) }, lineIndex),
+    lineIndex !== tokens.length - 1 && "\n"
+  ] })) }) });
+});
+HighlightedPre.displayName = "HighlightedCode";
+const CodeBlock = ({ children, className, language, ...restProps }) => {
+  const code = typeof children === "string" ? children : childrenTakeAllStringContents(children);
+  const preClass = cn(
+    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/code relative mb-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      SelectField,
+      React.Suspense,
       {
-        label: "Filter by provider",
-        value: selectedProvider,
-        onValueChange: onProviderChange,
-        options: providerOptions
+        fallback: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: preClass, ...restProps, children }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedPre, { language, className: preClass, children: code })
       }
     ),
-    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
-      "Reset ",
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })
   ] });
+};
+function childrenTakeAllStringContents(element) {
+  if (typeof element === "string") {
+    return element;
+  }
+  if (element?.props?.children) {
+    let children = element.props.children;
+    if (Array.isArray(children)) {
+      return children.map((child) => childrenTakeAllStringContents(child)).join("");
+    } else {
+      return childrenTakeAllStringContents(children);
+    }
+  }
+  return "";
 }
-
-function getRepoName(githubUrl) {
-  return githubUrl.replace(/\/$/, "").split("/").pop();
-}
-function Container({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+const COMPONENTS = {
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-xl", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-lg", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base", ...props, children }),
+  h5: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "font-medium", ...props, children }),
+  strong: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", ...props, children }),
+  a: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: "underline underline-offset-2", ...props, children }),
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "border-l-2 border-primary pl-4", ...props, children }),
+  code: ({ children, className, ...rest }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { className, language: match[1], ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: cn(
+          "font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        ),
+        ...rest,
+        children
+      }
+    );
+  },
+  pre: ({ children }) => children,
+  ol: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal space-y-2 pl-6", ...props, children }),
+  ul: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc space-y-2 pl-6", ...props, children }),
+  li: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "my-1.5", ...props, children }),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20", ...props, children }),
+  th: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
     {
-      className: cn(
-        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
-        className
-      ),
+      className: "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
       children
     }
-  );
+  ),
+  td: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+      ...props,
+      children
+    }
+  ),
+  tr: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "m-0 border-t p-0 even:bg-muted", ...props, children }),
+  p: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap leading-relaxed", ...props, children }),
+  hr: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-foreground/20", ...props })
+};
+
+function CodeDisplay({
+  content,
+  height = "150px",
+  isCopied = false,
+  isDraft = false,
+  onCopy,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded-md border ${className}`, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 cursor-pointer hover:bg-mastra-bg-3/50 transition-colors group relative", onClick: onCopy, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-[10px] whitespace-pre-wrap font-mono", children: content }),
+    isDraft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-500", children: "Draft - Save changes to apply" }) }),
+    isCopied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Copied!" }),
+    onCopy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-mastra-bg-3 text-mastra-el-4 opacity-0 group-hover:opacity-100 transition-opacity", children: "Click to copy" })
+  ] }) }) });
 }
 
-function TemplatesList({ templates, linkComponent, className, isLoading }) {
-  const LinkComponent = linkComponent || "a";
+const AgentWorkingMemory = ({ agentId }) => {
+  const { threadExists, workingMemoryData, workingMemorySource, isLoading, isUpdating, updateWorkingMemory } = useWorkingMemory();
+  const { data } = useMemoryConfig(agentId);
+  const config = data?.config;
+  const isWorkingMemoryEnabled = Boolean(config?.workingMemory?.enabled);
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: workingMemoryData ?? "",
+    copyMessage: "Working memory copied!"
+  });
+  const [editValue, setEditValue] = React.useState(workingMemoryData ?? "");
+  const [isEditing, setIsEditing] = React.useState(false);
+  React.useEffect(() => {
+    setEditValue(workingMemoryData ?? "");
+  }, [workingMemoryData]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-32 w-full" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
-    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "article",
-      {
-        className: cn(
-          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5", children: "Working Memory" }),
+        isWorkingMemoryEnabled && workingMemorySource && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-medium px-2 py-0.5 rounded",
+              workingMemorySource === "resource" ? "bg-purple-500/20 text-purple-400" : "bg-blue-500/20 text-blue-400"
+            ),
+            title: workingMemorySource === "resource" ? "Shared across all threads for this agent" : "Specific to this conversation thread",
+            children: workingMemorySource
+          }
+        )
+      ] }),
+      isWorkingMemoryEnabled && !threadExists && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-icon3", children: "Send a message to the agent to enable working memory." })
+    ] }),
+    isWorkingMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: workingMemoryData ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: workingMemoryData.trim().startsWith("{") ? /* @__PURE__ */ jsxRuntime.jsx(
+        CodeDisplay,
+        {
+          content: workingMemoryData || "",
+          isCopied,
+          onCopy: handleCopy,
+          className: "bg-surface3 text-sm font-mono min-h-[150px] border border-border1 rounded-lg"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface3 border border-border1 rounded-lg", style: { height: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-3 cursor-pointer hover:bg-surface4/20 transition-colors relative group text-[10px]",
+          onClick: handleCopy,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { children: workingMemoryData }),
+            isCopied && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Copied!" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 text-[10px] px-1.5 py-0.5 rounded-full bg-surface3 text-icon4 opacity-0 group-hover:opacity-100 transition-opacity", children: "Click to copy" })
+          ]
+        }
+      ) }) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-icon3 font-mono", children: 'No working memory content yet. Click "Edit Working Memory" to add content.' }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "w-full min-h-[150px] p-3 border border-border1 rounded-lg bg-surface3 font-mono text-sm text-icon5 resize-none",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          disabled: isUpdating,
+          placeholder: "Enter working memory content..."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: !isEditing ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button$2,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: () => setIsEditing(true),
+          disabled: !threadExists || isUpdating,
+          className: "text-xs",
+          children: "Edit Working Memory"
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button$2,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: async () => {
+              try {
+                await updateWorkingMemory(editValue);
+                setIsEditing(false);
+              } catch (error) {
+                console.error("Failed to update working memory:", error);
+                sonner.toast.error("Failed to update working memory");
+              }
+            },
+            disabled: isUpdating,
+            className: "text-xs",
+            children: isUpdating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcwIcon, { className: "w-3 h-3 animate-spin" }) : "Save Changes"
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            LinkComponent,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button$2,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: () => {
+              setEditValue(workingMemoryData ?? "");
+              setIsEditing(false);
+            },
+            disabled: isUpdating,
+            className: "text-xs",
+            children: "Cancel"
+          }
+        )
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 border border-border1 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-icon3 mb-3", children: "Working memory is not enabled for this agent. Enable it to maintain context across conversations." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: "https://mastra.ai/en/docs/memory/working-memory",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors",
+          children: [
+            "Learn about working memory",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+const AgentMemoryConfig = ({ agentId }) => {
+  const { data, isLoading } = useMemoryConfig(agentId);
+  const [expandedSections, setExpandedSections] = React.useState(/* @__PURE__ */ new Set(["General", "Semantic Recall"]));
+  const config = data?.config;
+  const configSections = React.useMemo(() => {
+    if (!config) return [];
+    const memoryEnabled = !!config;
+    const sections = [
+      {
+        title: "General",
+        items: [
+          { label: "Memory Enabled", value: memoryEnabled, badge: memoryEnabled ? "success" : void 0 },
+          { label: "Last Messages", value: config.lastMessages || 0 },
+          {
+            label: "Auto-generate Titles",
+            value: !!config.threads?.generateTitle,
+            badge: config.threads?.generateTitle ? "info" : void 0
+          }
+        ]
+      }
+    ];
+    if (config.semanticRecall) {
+      const enabled = Boolean(config.semanticRecall);
+      const semanticRecall = typeof config.semanticRecall === "object" ? config.semanticRecall : {};
+      sections.push({
+        title: "Semantic Recall",
+        items: [
+          { label: "Enabled", value: enabled, badge: enabled ? "success" : void 0 },
+          ...enabled ? [
+            { label: "Scope", value: semanticRecall.scope || "thread" },
+            { label: "Top K Results", value: semanticRecall.topK || 5 },
             {
-              to: `/templates/${template.slug}`,
-              className: cn("grid [&:hover_p]:text-icon5", {
-                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
-              }),
-              children: [
-                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
-                    style: {
-                      backgroundImage: `url(${template.imageURL})`
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
-                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
-                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-                          "ul",
-                          {
-                            className: cn(
-                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
-                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
-                            ),
-                            children: [
-                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
-                                " ",
-                                template.agents.length
-                              ] }),
-                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
-                                " ",
-                                template.tools.length
-                              ] }),
-                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
-                                " ",
-                                template.networks.length
-                              ] }),
-                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
-                                " ",
-                                template.workflows.length
-                              ] }),
-                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
-                                " ",
-                                template.mcp.length
-                              ] })
-                            ]
-                          }
-                        ),
-                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
-                      ] })
-                    ]
-                  }
-                )
-              ]
+              label: "Message Range",
+              value: typeof semanticRecall.messageRange === "object" ? `${semanticRecall.messageRange.before || 0} before, ${semanticRecall.messageRange.after || 0} after` : `${semanticRecall.messageRange || 20} messages`
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: template.githubUrl,
-              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
-              target: "_blank",
+          ] : []
+        ]
+      });
+    }
+    if (config.workingMemory) {
+      sections.push({
+        title: "Working Memory",
+        items: [
+          {
+            label: "Enabled",
+            value: config.workingMemory.enabled,
+            badge: config.workingMemory.enabled ? "success" : void 0
+          },
+          ...config.workingMemory.enabled ? [
+            { label: "Scope", value: config.workingMemory.scope || "thread" },
+            { label: "Template", value: config.workingMemory.template || "default" }
+          ] : []
+        ]
+      });
+    }
+    return sections;
+  }, [config]);
+  const toggleSection = (title) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(title)) {
+      newExpanded.delete(title);
+    } else {
+      newExpanded.add(title);
+    }
+    setExpandedSections(newExpanded);
+  };
+  const renderValue = (value, badge) => {
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "text-xs font-medium px-2 py-0.5 rounded",
+            value ? badge === "info" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400" : "bg-red-500/20 text-red-400"
+          ),
+          children: value ? "Yes" : "No"
+        }
+      );
+    }
+    if (badge) {
+      const badgeColors = {
+        success: "bg-green-500/20 text-green-400",
+        info: "bg-blue-500/20 text-blue-400",
+        warning: "bg-yellow-500/20 text-yellow-400"
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium px-2 py-0.5 rounded", badgeColors[badge]), children: value });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon3", children: value });
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-32 w-full" }) });
+  }
+  if (!config || configSections.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5 mb-3", children: "Memory Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-icon3", children: "No memory configuration available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5 mb-3", children: "Memory Configuration" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: configSections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-border1 rounded-lg bg-surface3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => toggleSection(section.title),
+          className: "w-full px-3 py-2 flex items-center justify-between hover:bg-surface4 transition-colors rounded-t-lg",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-icon5", children: section.title }),
+            expandedSections.has(section.title) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-icon3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-icon3" })
+          ]
+        }
+      ),
+      expandedSections.has(section.title) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2 space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-icon3", children: item.label }),
+        renderValue(item.value || "", item.badge)
+      ] }, `${section.title}-${item.label}`)) })
+    ] }, section.title)) })
+  ] });
+};
+
+const formatRelativeTime = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
+  return date.toLocaleDateString();
+};
+const MemorySearch = ({
+  searchMemory,
+  onResultClick,
+  className,
+  currentThreadId,
+  chatInputValue
+}) => {
+  const [query, setQuery] = React.useState("");
+  const [results, setResults] = React.useState([]);
+  const [isSearching, setIsSearching] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const searchTimeoutRef = React.useRef(void 0);
+  const dropdownRef = React.useRef(null);
+  const prevThreadIdRef = React.useRef(currentThreadId);
+  const lastSearchTimeRef = React.useRef(0);
+  const pendingSearchRef = React.useRef(null);
+  const handleSearch = React.useCallback(
+    async (searchQuery) => {
+      if (!searchQuery.trim()) {
+        setError(null);
+        return;
+      }
+      setIsSearching(true);
+      setError(null);
+      try {
+        const response = await searchMemory(searchQuery);
+        setResults(response.results);
+        setIsOpen((prev) => prev || response.results.length > 0);
+      } catch (err) {
+        setError("Failed to search memory");
+        console.error("Memory search error:", err);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchMemory]
+  );
+  const handleInputChange = React.useCallback(
+    (e) => {
+      const value = e.target.value;
+      setQuery(value);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (value.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(value);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = value;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    },
+    [handleSearch]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+        }
+        handleSearch(query);
+      }
+    },
+    [query, handleSearch]
+  );
+  React.useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  React.useEffect(() => {
+    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
+      handleSearch(query);
+    }
+    prevThreadIdRef.current = currentThreadId;
+  }, [currentThreadId, query, handleSearch]);
+  React.useEffect(() => {
+    if (chatInputValue !== void 0 && chatInputValue !== query) {
+      setQuery(chatInputValue);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (chatInputValue.trim()) {
+        const now = Date.now();
+        const timeSinceLastSearch = now - lastSearchTimeRef.current;
+        if (timeSinceLastSearch >= 500) {
+          setIsSearching(true);
+          handleSearch(chatInputValue);
+          lastSearchTimeRef.current = now;
+        } else {
+          setIsSearching(true);
+          pendingSearchRef.current = chatInputValue;
+          const remainingTime = 500 - timeSinceLastSearch;
+          searchTimeoutRef.current = setTimeout(() => {
+            if (pendingSearchRef.current) {
+              handleSearch(pendingSearchRef.current);
+              lastSearchTimeRef.current = Date.now();
+              pendingSearchRef.current = null;
+            }
+          }, remainingTime);
+        }
+      } else {
+        setResults([]);
+        setIsOpen(false);
+        setIsSearching(false);
+        pendingSearchRef.current = null;
+      }
+    }
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [chatInputValue]);
+  const handleResultClick = (messageId, threadId) => {
+    onResultClick?.(messageId, threadId);
+  };
+  const clearSearch = () => {
+    setQuery("");
+    setResults([]);
+    setIsOpen(false);
+    setError(null);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+  };
+  const truncateContent = (content, maxLength = 100) => {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + "...";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "text",
+          value: query,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Search memory...",
+          className: "pl-10 pr-10 bg-surface3 border-border1"
+        }
+      ),
+      query && /* @__PURE__ */ jsxRuntime.jsx(
+        Button$2,
+        {
+          onClick: clearSearch,
+          variant: "ghost",
+          size: "sm",
+          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
+      'No results found for "',
+      query,
+      '"'
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => handleResultClick(result.id, result.threadId),
+        className: cn(
+          "w-full px-4 py-3 hover:bg-surface4 transition-colors duration-150 text-left border-b border-border1 last:border-b-0",
+          result.threadId !== currentThreadId && "border-l-2 border-l-blue-400"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs font-medium px-2 py-0.5 rounded",
+                    result.role === "user" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400"
+                  ),
+                  children: result.role
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
+              result.threadTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Txt,
+                  {
+                    variant: "ui-xs",
+                    className: cn(
+                      "truncate max-w-[150px]",
+                      result.threadId !== currentThreadId ? "text-blue-400 font-medium" : "text-icon3"
+                    ),
+                    title: result.threadTitle,
+                    children: [
+                      "• ",
+                      result.threadTitle
+                    ]
+                  }
+                ),
+                result.threadId !== currentThreadId && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3 text-blue-400" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
+          ] }) }),
+          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) })
+        ] })
+      },
+      result.id
+    )) }) })
+  ] });
+};
+
+function AgentMemory({ agentId, threadId }) {
+  const { threadInput: chatInputValue } = useThreadInput();
+  const { paths, navigate } = useLinkComponent();
+  const [searchScope, setSearchScope] = React.useState(null);
+  const { data } = useMemoryConfig(agentId);
+  const config = data?.config;
+  const isSemanticRecallEnabled = Boolean(config?.semanticRecall);
+  const { searchMemory } = useMemorySearch({
+    agentId: agentId || "",
+    resourceId: agentId || "",
+    // In playground, agentId is the resourceId
+    threadId
+  });
+  const searchSemanticRecall = React.useCallback(
+    async (query) => {
+      const result = await searchMemory(query, { lastMessages: 0 });
+      if (result.searchScope) {
+        setSearchScope(result.searchScope);
+      }
+      return result;
+    },
+    [searchMemory]
+  );
+  const handleResultClick = React.useCallback(
+    (messageId, resultThreadId) => {
+      if (resultThreadId && resultThreadId !== threadId) {
+        navigate(paths.agentThreadLink(agentId, resultThreadId, messageId));
+      } else {
+        const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (messageElement) {
+          messageElement.scrollIntoView({ behavior: "smooth", block: "center" });
+          messageElement.classList.add("bg-surface4");
+          setTimeout(() => {
+            messageElement.classList.remove("bg-surface4");
+          }, 2e3);
+        }
+      }
+    },
+    [agentId, threadId, navigate]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-border1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-icon5", children: "Semantic Recall" }),
+        searchScope && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-medium px-2 py-0.5 rounded",
+              searchScope === "resource" ? "bg-purple-500/20 text-purple-400" : "bg-blue-500/20 text-blue-400"
+            ),
+            title: searchScope === "resource" ? "Searching across all threads" : "Searching within current thread only",
+            children: searchScope
+          }
+        )
+      ] }) }),
+      isSemanticRecallEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+        MemorySearch,
+        {
+          searchMemory: searchSemanticRecall,
+          onResultClick: handleResultClick,
+          currentThreadId: threadId,
+          className: "w-full",
+          chatInputValue
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 border border-border1 rounded-lg p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-icon3 mb-3", children: "Semantic recall is not enabled for this agent. Enable it to search through conversation history." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: "https://mastra.ai/en/docs/memory/semantic-recall",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors",
+            children: [
+              "Learn about semantic recall",
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AgentWorkingMemory, { agentId }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemoryConfig, { agentId }) })
+    ] })
+  ] });
+}
+
+function CurrentInstructions({
+  instructions,
+  enhancedPrompt,
+  isEnhancing,
+  userComment,
+  onEnhance,
+  onCancel,
+  onSave,
+  onCommentChange,
+  onShowHistory
+}) {
+  const currentContent = enhancedPrompt || extractPrompt(instructions);
+  const { isCopied, handleCopy } = useCopyToClipboard({ text: currentContent || "" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 pb-2", children: enhancedPrompt ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-accent2" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Discard prompt suggestions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onSave, disabled: !enhancedPrompt, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "text-accent1" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Save prompt suggestions" })
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onShowHistory, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "hover:bg-surface2 rounded-lg text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileClock, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Version history" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("p-[1px] rounded-lg overflow-hidden relative"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx(
+            "absolute inset-0 bg-surface4 transition-all",
+            enhancedPrompt && "bg-gradient-to-br from-accent1 to-accent3"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 bg-surface4 rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeDisplay,
+          {
+            content: currentContent || "",
+            isCopied,
+            isDraft: !!enhancedPrompt,
+            onCopy: () => currentContent && handleCopy(),
+            className: "border-none bg-surface4 text-ui-sm p-2 !h-[260px]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between rounded-lg border border-border1 bg-surface5 shadow-lg disabled:bg-surface3 text-icon6 w-full py-2 px-3 gap-3 relative z-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              value: userComment,
+              onChange: (e) => onCommentChange(e.target.value),
+              placeholder: "Add your comments or requirements for enhancing your agent's prompt...",
+              className: "resize-none text-ui-sm w-full placeholder:text-icon3 bg-transparent block disabled:text-icon3",
+              disabled: Boolean(isEnhancing || enhancedPrompt)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onEnhance, disabled: isEnhancing || !instructions || Boolean(enhancedPrompt), children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3 hover:text-icon6 disabled:hover:text-icon3", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wand2, {}) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: isEnhancing ? "Enhancing..." : "Enhance prompt" })
+          ] }) })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+function usePromptEnhancer({
+  agentId,
+  instructions,
+  versions,
+  onVersionCreate,
+  onVersionUpdate
+}) {
+  const [enhancedPrompt, setEnhancedPrompt] = React.useState("");
+  const [explanation, setExplanation] = React.useState("");
+  const [isEnhancing, setIsEnhancing] = React.useState(false);
+  const [userComment, setUserComment] = React.useState("");
+  const enhancePrompt = async () => {
+    if (!instructions) return;
+    setIsEnhancing(true);
+    try {
+      const response = await fetch(`/api/agents/${agentId}/instructions/enhance`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-mastra-dev-playground": "true"
+        },
+        body: JSON.stringify({
+          instructions,
+          comment: userComment
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to enhance prompt");
+      }
+      const data = await response.json();
+      setEnhancedPrompt(data.new_prompt);
+      setExplanation(data.explanation);
+      setUserComment("");
+    } catch (error) {
+      console.error("Failed to enhance prompt:", error);
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+  const clearEnhancement = () => {
+    setEnhancedPrompt("");
+    setExplanation("");
+  };
+  const applyChanges = () => {
+    if (!enhancedPrompt) return;
+    const draftIndex = versions.findIndex((v) => v.status === "draft");
+    if (draftIndex !== -1) {
+      onVersionUpdate(draftIndex, {
+        content: enhancedPrompt,
+        analysis: explanation,
+        status: "published",
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    } else {
+      const newVersion = {
+        content: enhancedPrompt,
+        timestamp: /* @__PURE__ */ new Date(),
+        analysis: explanation,
+        status: "published"
+      };
+      onVersionCreate(newVersion);
+    }
+    clearEnhancement();
+  };
+  return {
+    enhancedPrompt,
+    explanation,
+    isEnhancing,
+    userComment,
+    enhancePrompt,
+    setUserComment,
+    clearEnhancement,
+    applyChanges
+  };
+}
+
+function usePromptVersions(agentId, instructions) {
+  const [versions, setVersions] = React.useState([]);
+  const [copiedVersions, setCopiedVersions] = React.useState({});
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [versionToDelete, setVersionToDelete] = React.useState(null);
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  const fetchEvalResults = async () => {
+    try {
+      const response = await client.getAgent(agentId).liveEvals(runtimeContext);
+      return response?.evals;
+    } catch (error) {
+      console.error("Failed to fetch eval results:", error);
+      return [];
+    }
+  };
+  React.useEffect(() => {
+    const loadVersions = async () => {
+      const evals = await fetchEvalResults();
+      const storedVersions = localStorage.getItem(`agent-${agentId}-versions`);
+      if (storedVersions) {
+        const parsedVersions = JSON.parse(storedVersions);
+        const originalVersion = parsedVersions.find((v) => v.status === "original");
+        if (instructions && originalVersion && originalVersion.content !== instructions) {
+          const originalEvals = evals?.filter((m) => m.meta.instructions === instructions);
+          const newVersions = [
+            {
+              content: instructions,
+              timestamp: /* @__PURE__ */ new Date(),
+              analysis: "Original instructions",
+              status: "original",
+              evals: originalEvals
+            }
+          ];
+          newVersions[0].evals = evals;
+          setVersions(newVersions);
+          localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(newVersions));
+        } else {
+          const updatedVersions = await Promise.all(
+            parsedVersions.map(async (v) => {
+              const originalEvals = evals?.filter((m) => m.meta.instructions === v.content);
+              const version = {
+                ...v,
+                timestamp: new Date(v.timestamp),
+                status: v.content === instructions ? "active" : v.status === "active" ? "published" : v.status
+              };
+              return { ...version, evals: originalEvals };
+            })
+          );
+          setVersions(updatedVersions);
+        }
+      } else if (instructions) {
+        const initialVersions = [
+          {
+            content: instructions,
+            timestamp: /* @__PURE__ */ new Date(),
+            analysis: "Original instructions",
+            status: "original",
+            evals: []
+          }
+        ];
+        const originalEvals = evals?.filter((m) => m.meta.instructions === instructions);
+        initialVersions[0].evals = originalEvals;
+        setVersions(initialVersions);
+        localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(initialVersions));
+      }
+    };
+    loadVersions();
+  }, [instructions, agentId]);
+  React.useEffect(() => {
+    if (versions.length > 0) {
+      localStorage.setItem(`agent-${agentId}-versions`, JSON.stringify(versions));
+    }
+  }, [versions, agentId]);
+  const copyToClipboard = async (text, versionIndex) => {
+    setCopiedVersions((prev) => ({ ...prev, [versionIndex]: true }));
+    const timer = setTimeout(() => {
+      setCopiedVersions((prev) => ({ ...prev, [versionIndex]: false }));
+    }, 1e3);
+    return () => clearTimeout(timer);
+  };
+  const setVersionActive = async (version, index) => {
+    setIsUpdating(true);
+    try {
+      const response = await fetch(`/api/agents/${agentId}/instructions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-mastra-dev-playground": "true"
+        },
+        body: JSON.stringify({
+          instructions: version.content
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to update instructions");
+      }
+      setVersions(
+        (prev) => prev.map((v, i) => ({
+          ...v,
+          status: i === index ? "active" : v.status === "active" ? "published" : v.status
+        }))
+      );
+    } catch (error) {
+      console.error("Failed to set version as active:", error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  const deleteVersion = (index) => {
+    setVersions((prev) => prev.filter((_, i) => i !== index));
+    setVersionToDelete(null);
+  };
+  const updateVersion = async (index, updates) => {
+    const updatedVersion = {
+      ...versions[index],
+      ...updates
+    };
+    setVersions((prev) => prev.map((version, i) => i === index ? updatedVersion : version));
+  };
+  return {
+    versions,
+    copiedVersions,
+    isUpdating,
+    versionToDelete,
+    setVersions,
+    setVersionToDelete,
+    copyToClipboard,
+    setVersionActive,
+    deleteVersion,
+    updateVersion
+  };
+}
+
+function VersionActions({ version, index, isUpdating, onSetActive, onDelete }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+    version.status !== "active" && version.status !== "draft" && /* @__PURE__ */ jsxRuntime.jsx(
+      Button$2,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 hover:bg-mastra-bg-3 relative group",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSetActive(version, index);
+        },
+        disabled: isUpdating,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-3 w-3" })
+      }
+    ),
+    index !== 0 && version.status !== "active" && /* @__PURE__ */ jsxRuntime.jsx(
+      Button$2,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 hover:bg-mastra-bg-3 relative group",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete(index);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3 text-red-400 hover:text-red-500" })
+      }
+    )
+  ] });
+}
+
+function VersionItem({
+  version,
+  index,
+  isExpanded,
+  isUpdating,
+  onToggleExpand,
+  onToggleAnalysis,
+  onSetActive,
+  onDelete
+}) {
+  const [showEvals, setShowEvals] = React.useState(false);
+  const [showInstructions, setShowInstructions] = React.useState(true);
+  const [showAnalysis, setShowAnalysis] = React.useState(false);
+  const { handleCopy, isCopied } = useCopyToClipboard({
+    text: version.content
+  });
+  const formatText = (text) => {
+    return text.replace(/\\n/g, "\n");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `rounded-md border ${isExpanded ? "border-mastra-purple/30" : "border-mastra-bg-3"} bg-mastra-bg-2`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "p-2 flex items-center justify-between cursor-pointer hover:bg-mastra-bg-3/50",
+            onClick: onToggleExpand,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronRight,
+                  {
+                    className: `h-3 w-3 transition-transform ${isExpanded ? "rotate-90 text-mastra-purple" : ""}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-medium text-mastra-el-4", children: [
+                      "Version ",
+                      index + 1
+                    ] }),
+                    version.status === "active" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/20 text-green-500", children: "Active" }),
+                    version.status === "original" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-blue-500/20 text-blue-500", children: "Original" }),
+                    version.status === "draft" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-500", children: "Draft" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-mastra-el-3", children: version.timestamp.toLocaleString() })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                VersionActions,
+                {
+                  version,
+                  index,
+                  isUpdating,
+                  onSetActive,
+                  onDelete
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[250px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 pb-2 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md mb-2",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowInstructions(!showInstructions);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showInstructions ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-mastra-el-4", children: "Instructions" })
+                ]
+              }
+            ),
+            showInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-mastra-bg-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDisplay, { content: formatText(version.content), isCopied, onCopy: handleCopy }) }) })
+          ] }),
+          version.analysis && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md mb-2",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowAnalysis(!showAnalysis);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showAnalysis ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-mastra-el-4", children: "Analysis" })
+                ]
+              }
+            ),
+            showAnalysis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-mastra-bg-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-[10px] text-mastra-el-4 whitespace-pre-wrap font-mono", children: formatText(version.analysis || "") }) }) })
+          ] }),
+          version.evals && version.evals.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center space-x-1 cursor-pointer hover:bg-mastra-bg-3/50 p-1 rounded-md",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowEvals(!showEvals);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `h-3 w-3 transition-transform ${showEvals ? "rotate-90" : ""}` }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-medium text-mastra-el-4", children: [
+                    "Evaluations (",
+                    version.evals.length,
+                    ")"
+                  ] })
+                ]
+              }
+            ),
+            showEvals && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 pr-4", children: version.evals.map((metric, evalIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-mastra-bg-3 p-1.5 text-[10px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `px-1.5 py-0.5 rounded-full min-w-[32px] text-center ${metric.result.score >= 0.7 ? "bg-green-500/20 text-green-500" : metric.result.score >= 0.4 ? "bg-yellow-500/20 text-yellow-500" : "bg-red-500/20 text-red-500"}`,
+                    children: metric.result.score.toFixed(2)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 text-[9px]", children: new Date(metric.createdAt).toLocaleTimeString() })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 shrink-0", children: "→" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-4", children: metric.input })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-3 shrink-0", children: "←" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-mastra-el-4", children: metric.output })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 text-[9px] text-mastra-el-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: "⚬" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: metric.result.info.reason })
+                ] })
+              ] })
+            ] }, evalIndex)) }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+function VersionHistory({
+  versions,
+  isUpdating,
+  copiedVersions,
+  onCopy,
+  onSetActive,
+  onDelete
+}) {
+  const [expandedVersion, setExpandedVersion] = React.useState(null);
+  const [expandedAnalysis, setExpandedAnalysis] = React.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 pr-4", children: versions.map((version, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    VersionItem,
+    {
+      version,
+      index,
+      isExpanded: expandedVersion === index,
+      isUpdating,
+      copiedVersions,
+      onToggleExpand: () => {
+        if (expandedVersion === index) {
+          return setExpandedVersion(null);
+        }
+        setExpandedVersion(index);
+      },
+      onToggleAnalysis: () => {
+        if (expandedAnalysis === index) {
+          return setExpandedAnalysis(null);
+        }
+        setExpandedAnalysis(index);
+      },
+      onCopy,
+      onSetActive,
+      onDelete
+    },
+    index
+  )) }) });
+}
+
+const VersionHistoryDialog = ({
+  open,
+  onOpenChange,
+  onDelete,
+  onSetActive,
+  versions,
+  isUpdating
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "bg-surface4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Version History" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "View the history of changes to the agent's instructions." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VersionHistory,
+      {
+        versions,
+        isUpdating,
+        copiedVersions: {},
+        onCopy: async (content, key) => {
+          await navigator.clipboard.writeText(content);
+        },
+        onSetActive,
+        onDelete
+      }
+    )
+  ] }) });
+};
+
+function AgentPromptEnhancer({ agentId }) {
+  const { data: agent } = useAgent(agentId);
+  const [showVersionHistoryDialog, setShowVersionHistoryDialog] = React.useState(false);
+  const formattedInstructions = extractPrompt(agent?.instructions || "");
+  const {
+    versions,
+    isUpdating,
+    versionToDelete,
+    setVersions,
+    setVersionToDelete,
+    deleteVersion,
+    updateVersion,
+    setVersionActive
+  } = usePromptVersions(agentId, formattedInstructions);
+  const { enhancedPrompt, isEnhancing, userComment, enhancePrompt, setUserComment, clearEnhancement, applyChanges } = usePromptEnhancer({
+    agentId,
+    instructions: formattedInstructions,
+    versions,
+    onVersionCreate: (newVersion) => {
+      setVersions((prev) => [...prev, newVersion]);
+    },
+    onVersionUpdate: updateVersion
+  });
+  if (!agent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CurrentInstructions,
+      {
+        instructions: agent.instructions,
+        enhancedPrompt,
+        isEnhancing,
+        userComment,
+        onEnhance: enhancePrompt,
+        onCancel: clearEnhancement,
+        onSave: applyChanges,
+        onCommentChange: setUserComment,
+        agentId,
+        onShowHistory: () => setShowVersionHistoryDialog(true)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VersionHistoryDialog,
+      {
+        versions,
+        isUpdating,
+        onSetActive: setVersionActive,
+        onDelete: setVersionToDelete,
+        open: showVersionHistoryDialog,
+        onOpenChange: setShowVersionHistoryDialog
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open: versionToDelete !== null, onOpenChange: () => setVersionToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Title, { children: [
+          "Delete Version ",
+          versionToDelete !== null ? versionToDelete + 1 : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Description, { children: "Are you sure you want to delete this version? This action cannot be undone." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Cancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AlertDialog.Action,
+          {
+            className: "bg-red-500 hover:bg-red-600",
+            onClick: () => {
+              if (versionToDelete !== null) {
+                deleteVersion(versionToDelete);
+              }
+            },
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+function AgentInformation({ agentId, threadId }) {
+  const { data: agent, isLoading } = useAgent(agentId);
+  const { data: modelProviders } = useModelProviders();
+  const { mutateAsync: updateModel } = useUpdateAgentModel(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 [selectedTab, setSelectedTab] = React.useState(() => {
+    return sessionStorage.getItem(STORAGE_KEY) || "overview";
+  });
+  const handleTabChange = (value) => {
+    setSelectedTab(value);
+    sessionStorage.setItem(STORAGE_KEY, value);
+  };
+  React.useEffect(() => {
+    if (agent?.modelId?.includes("gpt-5")) {
+      setSettings({
+        ...settings || {},
+        modelSettings: {
+          ...settings?.modelSettings || {},
+          temperature: 1
+        }
+      });
+    }
+  }, [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,
+            updateModelInModelList,
+            reorderModelList,
+            modelProviders: modelProviders || [],
+            hasMemoryEnabled: Boolean(memory?.result),
+            promptSlot: /* @__PURE__ */ jsxRuntime.jsx(AgentPromptEnhancer, { agentId }),
+            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 }) })
+    ] }) })
+  ] });
+}
+
+const NameCell$1 = ({ row }) => {
+  const { Link, paths } = useLinkComponent();
+  const tool = row.original;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntryCell,
+    {
+      name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.toolLink(tool.id), children: tool.id }),
+      description: tool.description
+    }
+  );
+};
+const columns$1 = [
+  {
+    header: "Name",
+    accessorKey: "name",
+    cell: NameCell$1
+  },
+  {
+    header: "Attached entities",
+    accessorKey: "attachedEntities",
+    cell: ({ row }) => {
+      const tool = row.original;
+      const agentsCount = tool.agents.length;
+      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "default", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }), children: [
+        agentsCount,
+        " agent",
+        agentsCount > 1 ? "s" : ""
+      ] }) });
+    }
+  }
+];
+
+const prepareToolsTable = (tools, agents) => {
+  const toolsWithAgents = /* @__PURE__ */ new Map();
+  const agentsKeys = Object.keys(agents);
+  for (const k of agentsKeys) {
+    const agent = agents[k];
+    const agentToolsDict = agent.tools;
+    const agentToolsKeys = Object.keys(agentToolsDict);
+    for (const key of agentToolsKeys) {
+      const tool = agentToolsDict[key];
+      if (!toolsWithAgents.has(tool.id)) {
+        toolsWithAgents.set(tool.id, {
+          ...tool,
+          agents: []
+        });
+      }
+      toolsWithAgents.get(tool.id).agents.push({ ...agent, id: k });
+    }
+  }
+  for (const [_, tool] of Object.entries(tools)) {
+    if (!toolsWithAgents.has(tool.id)) {
+      toolsWithAgents.set(tool.id, {
+        ...tool,
+        agents: []
+      });
+    }
+  }
+  return Array.from(toolsWithAgents.values());
+};
+
+function ToolTable({ tools, agents, isLoading }) {
+  const [search, setSearch] = React.useState("");
+  const { navigate, paths } = useLinkComponent();
+  const toolData = React.useMemo(() => prepareToolsTable(tools, agents), [tools, agents]);
+  const table = reactTable.useReactTable({
+    data: toolData,
+    columns: columns$1,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  const ths = table.getHeaderGroups()[0];
+  const rows = table.getRowModel().rows.concat();
+  if (rows.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
+  }
+  const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: filteredRows.map((row) => {
+        const firstAgent = row.original.agents[0];
+        const link = firstAgent ? paths.agentToolLink(firstAgent.id, row.original.id) : paths.toolLink(row.original.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
+      }) })
+    ] }) }) })
+  ] });
+}
+const ToolTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Used by" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) })
+  ] }, index)) })
+] });
+const EmptyToolsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  EmptyState,
+  {
+    iconSlot: /* @__PURE__ */ jsxRuntime.jsx(ToolCoinIcon, {}),
+    titleSlot: "Configure Tools",
+    descriptionSlot: "Mastra tools are not configured yet. You can find more information in the documentation.",
+    actionSlot: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button$1,
+      {
+        size: "lg",
+        className: "w-full",
+        variant: "light",
+        as: "a",
+        href: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}) }),
+          "Docs"
+        ]
+      }
+    )
+  }
+) });
+
+const useExecuteTool = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({
+      toolId,
+      input,
+      runtimeContext: playgroundRuntimeContext
+    }) => {
+      const runtimeContext = new di.RuntimeContext();
+      Object.entries(playgroundRuntimeContext ?? {}).forEach(([key, value]) => {
+        runtimeContext.set(key, value);
+      });
+      try {
+        const tool = client.getTool(toolId);
+        const response = await tool.execute({ data: input, runtimeContext });
+        return response;
+      } catch (error) {
+        sonner.toast.error("Error executing dev tool");
+        console.error("Error executing dev tool:", error);
+        throw error;
+      }
+    }
+  });
+};
+
+const useTools = () => {
+  const { runtimeContext } = usePlaygroundStore();
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["tools"],
+    queryFn: () => client.getTools(runtimeContext)
+  });
+};
+const useTool = (toolId) => {
+  const client = react$3.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["tool", toolId],
+    queryFn: () => client.getTool(toolId).details(runtimeContext)
+  });
+};
+
+const ToolPanel = ({ toolId }) => {
+  const { data: tool, isLoading } = useTool(toolId);
+  const { mutateAsync: executeTool, isPending: isExecuting, data: result } = useExecuteTool();
+  const { runtimeContext: playgroundRuntimeContext } = usePlaygroundStore();
+  const handleExecuteTool = async (data) => {
+    if (!tool) return;
+    return executeTool({
+      toolId: tool.id,
+      input: data,
+      runtimeContext: playgroundRuntimeContext
+    });
+  };
+  const zodInputSchema = tool?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(tool?.inputSchema))) : z.z.object({});
+  if (isLoading) return null;
+  if (!tool)
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 text-center px-6", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", className: "text-icon3", children: "Tool not found" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolExecutor,
+    {
+      executionResult: result,
+      isExecutingTool: isExecuting,
+      zodInputSchema,
+      handleExecuteTool,
+      toolDescription: tool.description,
+      toolId: tool.id
+    }
+  );
+};
+
+function TemplatesTools({
+  tagOptions,
+  selectedTag,
+  providerOptions,
+  selectedProvider,
+  onTagChange,
+  onProviderChange,
+  searchTerm,
+  onSearchChange,
+  onReset,
+  className,
+  isLoading
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "h-[6.5rem] flex items-center gap-[2rem]",
+          "[&>div]:bg-surface3 [&>div]:w-[12rem] [&>div]:h-[2rem] [&>div]:animate-pulse",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("div", {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap mx-auto sticky top-0 gap-[2rem] bg-surface2 py-[2rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchField,
+      {
+        label: "Search templates",
+        value: searchTerm,
+        onChange: (e) => onSearchChange?.(e.target.value),
+        placeholder: "Search Template"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectField, { label: "Filter by tag", value: selectedTag, onValueChange: onTagChange, options: tagOptions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
+      {
+        label: "Filter by provider",
+        value: selectedProvider,
+        onValueChange: onProviderChange,
+        options: providerOptions
+      }
+    ),
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onReset, children: [
+      "Reset ",
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    ] })
+  ] });
+}
+
+function getRepoName(githubUrl) {
+  return githubUrl.replace(/\/$/, "").split("/").pop();
+}
+function Container({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "border border-border1 rounded-lg mt-[3rem] py-[2rem] lg:min-h-[25rem] transition-height px-[1rem] lg:px-[3rem]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function TemplatesList({ templates, linkComponent, className, isLoading }) {
+  const LinkComponent = linkComponent || "a";
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4rem] bg-surface3 animate-pulse rounded-lg" }, index)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-y-[1rem]", className), children: templates.map((template) => {
+    const hasMetaInfo = template?.agents || template?.tools || template?.networks || template?.workflows || template?.mcp;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "article",
+      {
+        className: cn(
+          "border border-border1 rounded-lg overflow-hidden w-full grid grid-cols-[1fr_auto] bg-surface3 transition-colors hover:bg-surface4"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            LinkComponent,
+            {
+              to: `/templates/${template.slug}`,
+              className: cn("grid [&:hover_p]:text-icon5", {
+                "grid-cols-[8rem_1fr] lg:grid-cols-[12rem_1fr]": template.imageURL
+              }),
+              children: [
+                template.imageURL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-full h-full bg-cover thumb transition-scale duration-150",
+                    style: {
+                      backgroundImage: `url(${template.imageURL})`
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "grid py-[.75rem] px-[1.5rem] w-full gap-[0.1rem]",
+                      "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[1rem] text-icon5", children: template.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-icon4 transition-colors duration-500", children: template.description }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden 2xl:flex text-icon3 text-[0.875rem] flex-wrap items-center gap-[1rem] mt-[0.75rem]", children: [
+                        hasMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "ul",
+                          {
+                            className: cn(
+                              "flex gap-[1rem] text-[0.875rem] text-icon3 m-0 p-0 list-none",
+                              "[&>li]:flex [&>li]:items-center [&>li]:gap-[0.1rem] text-icon4"
+                            ),
+                            children: [
+                              template?.agents && template.agents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
+                                " ",
+                                template.agents.length
+                              ] }),
+                              template?.tools && template.tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
+                                " ",
+                                template.tools.length
+                              ] }),
+                              template?.networks && template.networks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, {}),
+                                " ",
+                                template.networks.length
+                              ] }),
+                              template?.workflows && template.workflows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WorkflowIcon, {}),
+                                " ",
+                                template.workflows.length
+                              ] }),
+                              template?.mcp && template.mcp.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(McpServerIcon, {}),
+                                " ",
+                                template.mcp.length
+                              ] })
+                            ]
+                          }
+                        ),
+                        hasMetaInfo && template.supportedProviders && /* @__PURE__ */ jsxRuntime.jsx("small", { children: "|" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-icon3 gap-[1rem]", children: template.supportedProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: provider }, provider)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: template.githubUrl,
+              className: cn("group items-center gap-[0.5rem] text-[0.875rem] ml-auto pr-[1rem] hidden", "lg:flex"),
+              target: "_blank",
               rel: "noopener noreferrer",
               children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-[0.5rem]  px-[0.5rem] py-[0.25rem] rounded bg-surface1 group-hover:bg-surface2 text-icon3 transition-colors group-hover:text-icon5 ", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(GithubIcon, {}),
@@ -18326,434 +19845,71 @@ function usePolling({
         onSuccess?.(result);
         if (shouldContinue(result) && refetch2) {
           timeoutRef.current = setTimeout(executePoll, interval);
-        } else {
-          stopPolling();
-        }
-      } catch (err) {
-        if (!mountedRef.current) return;
-        setError(err);
-        onError?.(err);
-        stopPolling();
-      } finally {
-        if (mountedRef.current) {
-          setFirstCallLoading(false);
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
-  );
-  const refetch = React.useCallback(
-    (withPolling = false) => {
-      console.log("refetch", { withPolling });
-      if (withPolling) {
-        setIsPolling(true);
-      } else {
-        executePoll(false);
-      }
-      setError(null);
-    },
-    [executePoll]
-  );
-  React.useEffect(() => {
-    mountedRef.current = true;
-    if (enabled && isPolling) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  React.useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  React.useEffect(() => {
-    if (restart && !isPolling) {
-      setIsPolling(true);
-      executePoll();
-      setRestart(false);
-    }
-  }, [restart]);
-  return {
-    isPolling,
-    isLoading,
-    error,
-    data,
-    startPolling,
-    stopPolling,
-    firstCallLoading,
-    refetch
-  };
-}
-
-const PlaygroundQueryClient = ({ children }) => {
-  const queryClient = new reactQuery.QueryClient();
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
-};
-
-const useMemory = (agentId) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useQuery({
-    queryKey: ["memory", agentId],
-    queryFn: () => agentId ? client.getMemoryStatus(agentId) : 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();
-  return reactQuery.useQuery({
-    queryKey: ["memory", "config", agentId],
-    queryFn: () => agentId ? client.getMemoryConfig({ agentId }) : 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();
-  return reactQuery.useQuery({
-    queryKey: ["memory", "threads", resourceId, agentId],
-    queryFn: () => isMemoryEnabled ? client.getMemoryThreads({ resourceId, agentId }) : null,
-    enabled: Boolean(isMemoryEnabled),
-    staleTime: 0,
-    gcTime: 0,
-    retry: false,
-    refetchOnWindowFocus: false
-  });
-};
-const useDeleteThread = () => {
-  const client = react$3.useMastraClient();
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: ({ threadId, agentId, networkId }) => client.deleteThread(threadId, { agentId, networkId }),
-    onSuccess: (_, variables) => {
-      const { agentId, networkId } = variables;
-      if (agentId) {
-        queryClient.invalidateQueries({ queryKey: ["memory", "threads", agentId, agentId] });
-      }
-      if (networkId) {
-        queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
-      }
-      sonner.toast.success("Chat deleted successfully");
-    },
-    onError: () => {
-      sonner.toast.error("Failed to delete chat");
-    }
-  });
-};
-const useMemorySearch = ({
-  agentId,
-  resourceId,
-  threadId
-}) => {
-  const searchMemory = async (searchQuery, memoryConfig) => {
-    if (!searchQuery.trim()) {
-      return { results: [], count: 0, query: searchQuery };
-    }
-    const params = new URLSearchParams({
-      searchQuery,
-      resourceId,
-      agentId
-    });
-    if (threadId) {
-      params.append("threadId", threadId);
-    }
-    if (memoryConfig) {
-      params.append("memoryConfig", JSON.stringify(memoryConfig));
-    }
-    const response = await fetch(`/api/memory/search?${params}`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "x-mastra-dev-playground": "true"
-      }
-    });
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({ message: "Unknown error" }));
-      console.error("Search memory error:", errorData);
-      throw new Error(errorData.message || errorData.error || "Failed to search memory");
-    }
-    return response.json();
-  };
-  return { searchMemory };
-};
-
-const formatRelativeTime = (date) => {
-  const now = /* @__PURE__ */ new Date();
-  const seconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
-  return date.toLocaleDateString();
-};
-const MemorySearch = ({
-  searchMemory,
-  onResultClick,
-  className,
-  currentThreadId,
-  chatInputValue
-}) => {
-  const [query, setQuery] = React.useState("");
-  const [results, setResults] = React.useState([]);
-  const [isSearching, setIsSearching] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const searchTimeoutRef = React.useRef(void 0);
-  const dropdownRef = React.useRef(null);
-  const prevThreadIdRef = React.useRef(currentThreadId);
-  const lastSearchTimeRef = React.useRef(0);
-  const pendingSearchRef = React.useRef(null);
-  const handleSearch = React.useCallback(
-    async (searchQuery) => {
-      if (!searchQuery.trim()) {
-        setError(null);
-        return;
-      }
-      setIsSearching(true);
-      setError(null);
-      try {
-        const response = await searchMemory(searchQuery);
-        setResults(response.results);
-        setIsOpen((prev) => prev || response.results.length > 0);
+        } else {
+          stopPolling();
+        }
       } catch (err) {
-        setError("Failed to search memory");
-        console.error("Memory search error:", err);
+        if (!mountedRef.current) return;
+        setError(err);
+        onError?.(err);
+        stopPolling();
       } finally {
-        setIsSearching(false);
-      }
-    },
-    [searchMemory]
-  );
-  const handleInputChange = React.useCallback(
-    (e) => {
-      const value = e.target.value;
-      setQuery(value);
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-      if (value.trim()) {
-        const now = Date.now();
-        const timeSinceLastSearch = now - lastSearchTimeRef.current;
-        if (timeSinceLastSearch >= 500) {
-          setIsSearching(true);
-          handleSearch(value);
-          lastSearchTimeRef.current = now;
-        } else {
-          setIsSearching(true);
-          pendingSearchRef.current = value;
-          const remainingTime = 500 - timeSinceLastSearch;
-          searchTimeoutRef.current = setTimeout(() => {
-            if (pendingSearchRef.current) {
-              handleSearch(pendingSearchRef.current);
-              lastSearchTimeRef.current = Date.now();
-              pendingSearchRef.current = null;
-            }
-          }, remainingTime);
+        if (mountedRef.current) {
+          setFirstCallLoading(false);
+          setIsLoading(false);
         }
-      } else {
-        setResults([]);
-        setIsOpen(false);
-        setIsSearching(false);
-        pendingSearchRef.current = null;
       }
     },
-    [handleSearch]
+    [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
   );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        if (searchTimeoutRef.current) {
-          clearTimeout(searchTimeoutRef.current);
-        }
-        handleSearch(query);
+  const refetch = React.useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
+      } else {
+        executePoll(false);
       }
+      setError(null);
     },
-    [query, handleSearch]
+    [executePoll]
   );
   React.useEffect(() => {
+    mountedRef.current = true;
+    if (enabled && isPolling) {
+      executePoll(true);
+    }
     return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-    };
-  }, []);
-  React.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
+      console.log("cleanup poll");
+      mountedRef.current = false;
+      cleanup();
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  }, [enabled, isPolling, executePoll, cleanup]);
   React.useEffect(() => {
-    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
-      handleSearch(query);
-    }
-    prevThreadIdRef.current = currentThreadId;
-  }, [currentThreadId, query, handleSearch]);
+    setRestart(restartPolling);
+  }, [restartPolling]);
   React.useEffect(() => {
-    if (chatInputValue !== void 0 && chatInputValue !== query) {
-      setQuery(chatInputValue);
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-      if (chatInputValue.trim()) {
-        const now = Date.now();
-        const timeSinceLastSearch = now - lastSearchTimeRef.current;
-        if (timeSinceLastSearch >= 500) {
-          setIsSearching(true);
-          handleSearch(chatInputValue);
-          lastSearchTimeRef.current = now;
-        } else {
-          setIsSearching(true);
-          pendingSearchRef.current = chatInputValue;
-          const remainingTime = 500 - timeSinceLastSearch;
-          searchTimeoutRef.current = setTimeout(() => {
-            if (pendingSearchRef.current) {
-              handleSearch(pendingSearchRef.current);
-              lastSearchTimeRef.current = Date.now();
-              pendingSearchRef.current = null;
-            }
-          }, remainingTime);
-        }
-      } else {
-        setResults([]);
-        setIsOpen(false);
-        setIsSearching(false);
-        pendingSearchRef.current = null;
-      }
-    }
-    return () => {
-      if (searchTimeoutRef.current) {
-        clearTimeout(searchTimeoutRef.current);
-      }
-    };
-  }, [chatInputValue]);
-  const handleResultClick = (messageId, threadId) => {
-    onResultClick?.(messageId, threadId);
-  };
-  const clearSearch = () => {
-    setQuery("");
-    setResults([]);
-    setIsOpen(false);
-    setError(null);
-    if (searchTimeoutRef.current) {
-      clearTimeout(searchTimeoutRef.current);
+    if (restart && !isPolling) {
+      setIsPolling(true);
+      executePoll();
+      setRestart(false);
     }
+  }, [restart]);
+  return {
+    isPolling,
+    isLoading,
+    error,
+    data,
+    startPolling,
+    stopPolling,
+    firstCallLoading,
+    refetch
   };
-  const truncateContent = (content, maxLength = 100) => {
-    if (content.length <= maxLength) return content;
-    return content.substring(0, maxLength) + "...";
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "text",
-          value: query,
-          onChange: handleInputChange,
-          onKeyDown: handleKeyDown,
-          placeholder: "Search memory...",
-          className: "pl-10 pr-10 bg-surface3 border-border1"
-        }
-      ),
-      query && /* @__PURE__ */ jsxRuntime.jsx(
-        Button$2,
-        {
-          onClick: clearSearch,
-          variant: "ghost",
-          size: "sm",
-          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
-      'No results found for "',
-      query,
-      '"'
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => handleResultClick(result.id, result.threadId),
-        className: cn(
-          "w-full px-4 py-3 hover:bg-surface4 transition-colors duration-150 text-left border-b border-border1 last:border-b-0",
-          result.threadId !== currentThreadId && "border-l-2 border-l-blue-400"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-              msg.role,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
-          ] }, idx)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-xs font-medium px-2 py-0.5 rounded",
-                    result.role === "user" ? "bg-blue-500/20 text-blue-400" : "bg-green-500/20 text-green-400"
-                  ),
-                  children: result.role
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
-              result.threadTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Txt,
-                  {
-                    variant: "ui-xs",
-                    className: cn(
-                      "truncate max-w-[150px]",
-                      result.threadId !== currentThreadId ? "text-blue-400 font-medium" : "text-icon3"
-                    ),
-                    title: result.threadTitle,
-                    children: [
-                      "• ",
-                      result.threadTitle
-                    ]
-                  }
-                ),
-                result.threadId !== currentThreadId && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3 h-3 text-blue-400" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
-          ] }) }),
-          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-              msg.role,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
-          ] }, idx)) })
-        ] })
-      },
-      result.id
-    )) }) })
-  ] });
+}
+
+const PlaygroundQueryClient = ({ children }) => {
+  const queryClient = new reactQuery.QueryClient();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
 };
 
 const errorFallback = "Something went wrong while fetching the data.";
@@ -19188,6 +20344,7 @@ exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentEntityHeader = AgentEntityHeader;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
+exports.AgentInformation = AgentInformation;
 exports.AgentMetadata = AgentMetadata;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;