@mastra/playground-ui 5.1.14-alpha.1 → 5.1.14-alpha.2

package/dist/index.cjs.js

@@ -37,6 +37,7 @@ const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
 const colors = require('./colors-DLwJ7rFA.cjs');
 const reactTable = require('@tanstack/react-table');
+const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
 const react$2 = require('@xyflow/react');
@@ -85,6 +86,7 @@ const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderP
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
+const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
@@ -4403,8 +4405,9 @@ const Reasoning = ({ text }) => {
 
 const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = react.useMessage();
+  const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.MessagePrimitive.Content,
       {
@@ -4604,7 +4607,9 @@ const UserMessageAttachments = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
 const UserMessage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
+  const message = react.useMessage();
+  const messageId = message?.id;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.MessagePrimitive.Content,
       {
@@ -4865,7 +4870,7 @@ const ComposerAttachments = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
-const Thread = ({ ToolFallback, agentName, hasMemory }) => {
+const Thread = ({ ToolFallback, agentName, hasMemory, onInputChange }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -4886,7 +4891,7 @@ const Thread = ({ ToolFallback, agentName, hasMemory }) => {
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory })
+    /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, onInputChange })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
@@ -4908,7 +4913,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer$1 = ({ hasMemory }) => {
+const Composer$1 = ({ hasMemory, onInputChange }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
@@ -4920,7 +4925,8 @@ const Composer$1 = ({ hasMemory }) => {
             autoFocus: true,
             placeholder: "Enter your message...",
             name: "",
-            id: ""
+            id: "",
+            onChange: (e) => onInputChange?.(e.target.value)
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -5196,6 +5202,7 @@ function MastraRuntimeProvider({
   const [messages, setMessages] = React.useState([]);
   const [currentThreadId, setCurrentThreadId] = React.useState(threadId);
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
+  const abortControllerRef = React.useRef(null);
   const {
     frequencyPenalty,
     presencePenalty,
@@ -5247,8 +5254,7 @@ function MastraRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory]);
-  const mastra = useMastraClient();
-  const agent = mastra.getAgent(agentId);
+  const baseClient = useMastraClient();
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
@@ -5258,6 +5264,13 @@ function MastraRuntimeProvider({
       { role: "user", content: input, attachments: message.attachments }
     ]);
     setIsRunning(true);
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    const clientWithAbort = new clientJs.MastraClient({
+      ...baseClient.options,
+      abortSignal: controller.signal
+    });
+    const agent = clientWithAbort.getAgent(agentId);
     try {
       if (chatWithGenerate) {
         const generateResponse = await agent.generate({
@@ -5282,7 +5295,7 @@ function MastraRuntimeProvider({
           ...memory ? { threadId, resourceId: agentId } : {},
           providerOptions
         });
-        if (generateResponse.response) {
+        if (generateResponse.response && "messages" in generateResponse.response) {
           const latestMessage = generateResponse.response.messages.reduce(
             (acc, message2) => {
               const _content = Array.isArray(acc.content) ? acc.content : [];
@@ -5536,10 +5549,22 @@ function MastraRuntimeProvider({
     } catch (error) {
       console.error("Error occurred in MastraRuntimeProvider", error);
       setIsRunning(false);
+      if (error.name === "AbortError") {
+        return;
+      }
       setMessages((currentConversation) => [
         ...currentConversation,
         { role: "assistant", content: [{ type: "text", text: `${error}` }] }
       ]);
+    } finally {
+      abortControllerRef.current = null;
+    }
+  };
+  const onCancel = async () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsRunning(false);
     }
   };
   const runtime = react.useExternalStoreRuntime({
@@ -5547,6 +5572,7 @@ function MastraRuntimeProvider({
     messages,
     convertMessage: convertMessage$2,
     onNew,
+    onCancel,
     adapters: {
       attachments: new react.CompositeAttachmentAdapter([
         new react.SimpleImageAttachmentAdapter(),
@@ -5633,7 +5659,15 @@ const usePlaygroundStore = zustand.create()(
   )
 );
 
-const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refreshThreadList }) => {
+const AgentChat = ({
+  agentId,
+  agentName,
+  threadId,
+  initialMessages,
+  memory,
+  refreshThreadList,
+  onInputChange
+}) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5647,7 +5681,7 @@ const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refr
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, onInputChange })
     }
   );
 };
@@ -5835,26 +5869,41 @@ const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) =
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 
-const PlaygroundTabs = ({ children, defaultTab }) => {
-  const [tab, setTab] = React.useState(defaultTab);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: tab, onValueChange: (value) => setTab(value), className: "h-full", children });
+const PlaygroundTabs = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange
+}) => {
+  const [internalTab, setInternalTab] = React.useState(defaultTab);
+  const isControlled = value !== void 0 && onValueChange !== void 0;
+  const currentTab = isControlled ? value : internalTab;
+  const handleTabChange = (newValue) => {
+    const typedValue = newValue;
+    if (isControlled) {
+      onValueChange(typedValue);
+    } else {
+      setInternalTab(typedValue);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children });
 };
 const TabList = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b-sm border-border1 flex w-full shrink-0", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b-sm border-border1 flex min-w-full shrink-0", children }) });
 };
 const Tab = ({ children, value, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsTrigger,
     {
       value,
-      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2",
+      className: "text-xs p-3 text-mastra-el-3 data-[state=active]:text-mastra-el-5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0",
       onClick,
       children
     }
   );
 };
 const TabContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full pb-5", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
 };
 
 const scrollableContentClass = cn(
@@ -7189,6 +7238,7 @@ const columns$2 = [
         {
           variant: "default",
           icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsxRuntime.jsx(OpenAIIcon, {}),
+          className: "truncate",
           children: row.original.modelId || "N/A"
         }
       ) });
@@ -7358,6 +7408,497 @@ const RuntimeContextWrapper = ({ children }) => {
   ] });
 };
 
+const AgentMetadataSection = ({ title, children, hint }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2 pb-7 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-md", className: "text-icon3 flex items-center gap-1", children: [
+      title,
+      hint && /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: hint.title })
+      ] }) })
+    ] }),
+    children
+  ] });
+};
+
+const AgentMetadataList = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-2", children });
+};
+const AgentMetadataListItem = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "shrink-0 font-medium", children });
+};
+const AgentMetadataListEmpty = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children });
+};
+
+const AgentMetadataWrapper = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 overflow-y-auto h-full px-5", children });
+};
+
+const useScoresByEntityId = (entityId, entityType, page = 0) => {
+  const client = useMastraClient();
+  const [scores, setScores] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByEntityId({
+          entityId,
+          entityType,
+          page: page || 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [entityId, entityType, page]);
+  return { scores, isLoading };
+};
+const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
+  const client = useMastraClient();
+  const [scores, setScores] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByScorerId({
+          scorerId,
+          page: page || 0,
+          entityId: entityId || void 0,
+          entityType: entityType || void 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [scorerId, page, entityId, entityType]);
+  return { scores, isLoading };
+};
+const useScorer = (scorerId) => {
+  const client = useMastraClient();
+  const [scorer, setScorer] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const fetchScorer = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorer(scorerId);
+        setScorer(res);
+      } catch (error) {
+        setScorer(null);
+        console.error("Error fetching scorer", error);
+        sonner.toast.error("Error fetching scorer");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorer();
+  }, [scorerId]);
+  return { scorer, isLoading };
+};
+const useScorers = () => {
+  const client = useMastraClient();
+  const [scorers, setScorers] = React.useState({});
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const fetchScorers = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorers();
+        setScorers(res);
+      } catch (error) {
+        setScorers({});
+        console.error("Error fetching agents", error);
+        sonner.toast.error("Error fetching agents");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorers();
+  }, []);
+  return { scorers, isLoading };
+};
+
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+};
+
+const ScorerList = ({ entityId, entityType }) => {
+  const { scorers, isLoading } = useScorers();
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ScorerSkeleton, {});
+  }
+  const scorerList = Object.keys(scorers).filter((scorerKey) => {
+    const scorer = scorers[scorerKey];
+    if (entityType === "AGENT") {
+      return scorer.agentIds.includes(entityId);
+    }
+    return scorer.workflowIds.includes(entityId);
+  }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
+  if (scorerList.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyScorerList, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(ScorerEntity, { scorer }) }, scorer.id)) });
+};
+const EmptyScorerList = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon6", children: "No scorers were attached to this agent." });
+};
+const ScorerSkeleton = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-24" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-24" })
+  ] });
+};
+const ScorerEntity = ({ scorer }) => {
+  const { Link } = useLinkComponent();
+  const linkRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "group-hover/entity:text-accent3" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.name }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: scorer.scorer.description }),
+      scorer.sampling?.type === "ratio" && /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "Sample rate:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon6", children: scorer.sampling.rate })
+      ] })
+    ] })
+  ] });
+};
+
+const AgentMetadata = ({
+  agent,
+  promptSlot,
+  hasMemoryEnabled,
+  computeToolLink,
+  computeWorkflowLink
+}) => {
+  const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
+  const agentTools = agent.tools ?? {};
+  const tools = Object.keys(agentTools).map((key) => agentTools[key]);
+  const agentWorkflows = agent.workflows ?? {};
+  const workflows = Object.keys(agentWorkflows).map((key) => agentWorkflows[key]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(AgentMetadataWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Model", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Memory",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/agent-memory",
+          title: "Agent Memory documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: hasMemoryEnabled ? "success" : "error", className: "font-medium", children: hasMemoryEnabled ? "On" : "Off" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Tools",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+          title: "Using Tools and MCP documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataToolList, { tools, computeToolLink })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Workflows",
+        hint: {
+          link: "https://mastra.ai/en/docs/workflows/overview",
+          title: "Workflows documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataScorerList, { entityId: agent.name }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "System Prompt", children: promptSlot })
+  ] });
+};
+const AgentMetadataToolList = ({ tools, computeToolLink }) => {
+  const { Link } = useLinkComponent();
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No tools" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeToolLink(tool), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+};
+const AgentMetadataScorerList = ({ entityId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsxRuntime.jsx(ScorerList, { entityId, entityType: "AGENT" }) });
+};
+const AgentMetadataWorkflowList = ({ workflows, computeWorkflowLink }) => {
+  const { Link } = useLinkComponent();
+  if (workflows.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No workflows" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeWorkflowLink(workflow), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.name)) });
+};
+
+const AgentMetadataPrompt = ({ prompt }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "bg-surface4 text-icon6 whitespace-pre-wrap rounded-lg px-2 py-1.5 text-sm", children: prompt });
+};
+
+const EntityHeader = ({ icon, title, isLoading, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
+    ] }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children })
+  ] });
+};
+
+const AgentEntityHeader = ({ agentId, isLoading, agentName }) => {
+  const { handleCopy } = useCopyToClipboard({ text: agentId });
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityHeader, { icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}), variant: "default", children: agentId }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
+  ] }) }) });
+};
+
+const Threads = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
+};
+const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      href,
+      prefetch,
+      to,
+      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
+      children
+    }
+  );
+};
+const ThreadList = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
+};
+const ThreadItem = ({ children, isActive }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      className: clsx(
+        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
+        isActive && "bg-surface4"
+      ),
+      children
+    }
+  );
+};
+const ThreadDeleteButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-icon3" }) })
+    }
+  );
+};
+
+const AlertDialogRoot = AlertDialogPrimitive__namespace.Root;
+const AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+function AlertDialog({
+  open,
+  onOpenChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogRoot, { open, onOpenChange, children });
+}
+const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
+const AlertDialogContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-[#141414] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
+const AlertDialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
+const AlertDialogAction = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
+const AlertDialogCancel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+AlertDialog.Trigger = AlertDialogTrigger;
+AlertDialog.Portal = AlertDialogPortal;
+AlertDialog.Overlay = AlertDialogOverlay;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = AlertDialogHeader;
+AlertDialog.Footer = AlertDialogFooter;
+AlertDialog.Title = AlertDialogTitle;
+AlertDialog.Description = AlertDialogDescription;
+AlertDialog.Action = AlertDialogAction;
+AlertDialog.Cancel = AlertDialogCancel;
+
+const ChatThreads = ({
+  computeNewThreadLink,
+  computeThreadLink,
+  threads,
+  isLoading,
+  threadId,
+  onDelete
+}) => {
+  const { Link } = useLinkComponent();
+  const [deleteId, setDeleteId] = React.useState(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ChatThreadSkeleton, {});
+  }
+  const reverseThreads = [...threads].reverse();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Threads, { children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThreadItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ThreadLink, { as: Link, to: computeNewThreadLink(), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
+        "New Chat"
+      ] }) }) }),
+      reverseThreads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3 py-3 px-5 max-w-[12rem]", children: "Your conversations will appear here once you start chatting!" }),
+      reverseThreads.map((thread) => {
+        const isActive = thread.id === threadId;
+        return /* @__PURE__ */ jsxRuntime.jsxs(ThreadItem, { isActive, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ThreadLink, { as: Link, to: computeThreadLink(thread.id), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ThreadTitle, { title: thread.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDay(thread.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ThreadDeleteButton, { onClick: () => setDeleteId(thread.id) })
+        ] }, thread.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeleteThreadDialog,
+      {
+        open: !!deleteId,
+        onOpenChange: () => setDeleteId(null),
+        onDelete: () => {
+          if (deleteId) {
+            onDelete(deleteId);
+          }
+        }
+      }
+    )
+  ] });
+};
+const DeleteThreadDialog = ({ open, onOpenChange, onDelete }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Title, { children: "Are you absolutely sure?" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Description, { children: "This action cannot be undone. This will permanently delete your chat and remove it from our servers." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Cancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDialog.Action, { onClick: onDelete, children: "Continue" })
+    ] })
+  ] }) });
+};
+const ChatThreadSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-full h-full space-y-2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-9 w-9" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4" })
+] });
+function isDefaultThreadName(name) {
+  const defaultPattern = /^New Thread \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z$/;
+  return defaultPattern.test(name);
+}
+function ThreadTitle({ title }) {
+  if (!title) {
+    return null;
+  }
+  if (isDefaultThreadName(title)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Chat from" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[14rem]", children: title });
+}
+const formatDay = (date) => {
+  const options = {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true
+  };
+  return new Date(date).toLocaleString("en-us", options).replace(",", " at");
+};
+
 const convertMessage$1 = (message) => {
   return message;
 };
@@ -10667,41 +11208,6 @@ const NetworkTableSkeleton = () => {
   ] });
 };
 
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: (e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      className: clsx(
-        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
-        onClick && "cursor-pointer hover:bg-surface4 transition-all",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
-const EntityIcon = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
-};
-
 const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   const toolsWithAgents = React.useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
@@ -11233,7 +11739,7 @@ const DatePicker = ({
           DatePickerOnly,
           {
             value,
-            setValue: (v) => setValue(v ? /* @__PURE__ */ new Date(`${v}z`) : null),
+            setValue,
             clearable: props.clearable,
             setOpenPopover,
             ...props
@@ -13283,57 +13789,6 @@ function devUIStyleRequested(name) {
   }
 }
 
-const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bg-surface2 border-r-sm border-border1 min-h-full overflow-hidden", children });
-};
-const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      href,
-      prefetch,
-      to,
-      className: clsx("text-ui-sm flex h-full w-full flex-col justify-center font-medium", className),
-      children
-    }
-  );
-};
-const ThreadList = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
-};
-const ThreadItem = ({ children, isActive }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 pl-5 py-2",
-        isActive && "bg-surface4"
-      ),
-      children
-    }
-  );
-};
-const ThreadDeleteButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-icon3" }) })
-    }
-  );
-};
-
-const EntityHeader = ({ icon, title, isLoading, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
-    ] }),
-    children
-  ] });
-};
-
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -13535,10 +13990,284 @@ const PlaygroundQueryClient = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children });
 };
 
+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$1,
+        {
+          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
+    )) }) })
+  ] });
+};
+
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
+exports.AgentEntityHeader = AgentEntityHeader;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
+exports.AgentMetadata = AgentMetadata;
+exports.AgentMetadataList = AgentMetadataList;
+exports.AgentMetadataListEmpty = AgentMetadataListEmpty;
+exports.AgentMetadataListItem = AgentMetadataListItem;
+exports.AgentMetadataPrompt = AgentMetadataPrompt;
+exports.AgentMetadataScorerList = AgentMetadataScorerList;
+exports.AgentMetadataSection = AgentMetadataSection;
+exports.AgentMetadataToolList = AgentMetadataToolList;
+exports.AgentMetadataWorkflowList = AgentMetadataWorkflowList;
+exports.AgentMetadataWrapper = AgentMetadataWrapper;
 exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
 exports.AgentSettings = AgentSettings;
 exports.AgentSettingsContext = AgentSettingsContext;
@@ -13546,12 +14275,14 @@ exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentsTable = AgentsTable;
 exports.AgentsTableSkeleton = AgentsTableSkeleton;
 exports.AiIcon = AiIcon;
+exports.AlertDialog = AlertDialog;
 exports.ApiIcon = ApiIcon;
 exports.Badge = Badge$1;
 exports.BranchIcon = BranchIcon;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Cell = Cell;
+exports.ChatThreads = ChatThreads;
 exports.CheckIcon = CheckIcon;
 exports.ChevronIcon = ChevronIcon;
 exports.CommitIcon = CommitIcon;
@@ -13567,6 +14298,7 @@ exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
 exports.DynamicForm = DynamicForm;
 exports.EmptyAgentsTable = EmptyAgentsTable;
+exports.EmptyScorerList = EmptyScorerList;
 exports.EmptyState = EmptyState;
 exports.EmptyWorkflowsTable = EmptyWorkflowsTable;
 exports.Entity = Entity;
@@ -13604,6 +14336,7 @@ exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
+exports.MemorySearch = MemorySearch;
 exports.NetworkChat = NetworkChat;
 exports.NetworkContext = NetworkContext;
 exports.NetworkProvider = NetworkProvider;
@@ -13621,6 +14354,8 @@ exports.Row = Row;
 exports.RuntimeContext = RuntimeContext;
 exports.RuntimeContextWrapper = RuntimeContextWrapper;
 exports.ScoreIcon = ScoreIcon;
+exports.ScorerList = ScorerList;
+exports.ScorerSkeleton = ScorerSkeleton;
 exports.SettingsIcon = SettingsIcon;
 exports.SlashIcon = SlashIcon;
 exports.Tab = Tab;
@@ -13674,6 +14409,10 @@ exports.useLinkComponent = useLinkComponent;
 exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
+exports.useScorer = useScorer;
+exports.useScorers = useScorers;
+exports.useScoresByEntityId = useScoresByEntityId;
+exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useWorkingMemory = useWorkingMemory;
 Object.keys(reactQuery).forEach(k => {