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

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, Plus, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -35,6 +35,7 @@ import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
 import { C as Colors } from './colors-DrbbnW3f.js';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, MiniMap, Background, BackgroundVariant, ReactFlowProvider, Controls } from '@xyflow/react';
@@ -4371,8 +4372,9 @@ const Reasoning = ({ text }) => {
 
 const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = useMessage();
+  const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
-  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
@@ -4572,7 +4574,9 @@ const UserMessageAttachments = () => {
   return /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
 const UserMessage = () => {
-  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
+  const message = useMessage();
+  const messageId = message?.id;
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
@@ -4833,7 +4837,7 @@ const ComposerAttachments = () => {
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
-const Thread = ({ ToolFallback, agentName, hasMemory }) => {
+const Thread = ({ ToolFallback, agentName, hasMemory, onInputChange }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -4854,7 +4858,7 @@ const Thread = ({ ToolFallback, agentName, hasMemory }) => {
       ) }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer$1, { hasMemory })
+    /* @__PURE__ */ jsx(Composer$1, { hasMemory, onInputChange })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
@@ -4876,7 +4880,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
@@ -4888,7 +4892,8 @@ const Composer$1 = ({ hasMemory }) => {
             autoFocus: true,
             placeholder: "Enter your message...",
             name: "",
-            id: ""
+            id: "",
+            onChange: (e) => onInputChange?.(e.target.value)
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -5164,6 +5169,7 @@ function MastraRuntimeProvider({
   const [messages, setMessages] = useState([]);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
+  const abortControllerRef = useRef(null);
   const {
     frequencyPenalty,
     presencePenalty,
@@ -5215,8 +5221,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);
@@ -5226,6 +5231,13 @@ function MastraRuntimeProvider({
       { role: "user", content: input, attachments: message.attachments }
     ]);
     setIsRunning(true);
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    const clientWithAbort = new MastraClient({
+      ...baseClient.options,
+      abortSignal: controller.signal
+    });
+    const agent = clientWithAbort.getAgent(agentId);
     try {
       if (chatWithGenerate) {
         const generateResponse = await agent.generate({
@@ -5250,7 +5262,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 : [];
@@ -5504,10 +5516,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 = useExternalStoreRuntime({
@@ -5515,6 +5539,7 @@ function MastraRuntimeProvider({
     messages,
     convertMessage: convertMessage$2,
     onNew,
+    onCancel,
     adapters: {
       attachments: new CompositeAttachmentAdapter([
         new SimpleImageAttachmentAdapter(),
@@ -5601,7 +5626,15 @@ const usePlaygroundStore = 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__ */ jsx(
@@ -5615,7 +5648,7 @@ const AgentChat = ({ agentId, agentName, threadId, initialMessages, memory, refr
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory })
+      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, onInputChange })
     }
   );
 };
@@ -5803,26 +5836,41 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-const PlaygroundTabs = ({ children, defaultTab }) => {
-  const [tab, setTab] = useState(defaultTab);
-  return /* @__PURE__ */ jsx(Tabs, { value: tab, onValueChange: (value) => setTab(value), className: "h-full", children });
+const PlaygroundTabs = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange
+}) => {
+  const [internalTab, setInternalTab] = 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__ */ jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children });
 };
 const TabList = ({ children }) => {
-  return /* @__PURE__ */ jsx(TabsList, { className: "border-b-sm border-border1 flex w-full shrink-0", children });
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx(TabsList, { className: "border-b-sm border-border1 flex min-w-full shrink-0", children }) });
 };
 const Tab = ({ children, value, onClick }) => {
   return /* @__PURE__ */ 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__ */ jsx(TabsContent, { value, className: "h-full pb-5", children });
+  return /* @__PURE__ */ jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
 };
 
 const scrollableContentClass = cn(
@@ -7157,6 +7205,7 @@ const columns$2 = [
         {
           variant: "default",
           icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsx(OpenAIIcon, {}),
+          className: "truncate",
           children: row.original.modelId || "N/A"
         }
       ) });
@@ -7326,6 +7375,497 @@ const RuntimeContextWrapper = ({ children }) => {
   ] });
 };
 
+const AgentMetadataSection = ({ title, children, hint }) => {
+  const { Link } = useLinkComponent();
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2 pb-7 last:pb-0", children: [
+    /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-md", className: "text-icon3 flex items-center gap-1", children: [
+      title,
+      hint && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsx(InfoIcon$1, {}) }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: hint.title })
+      ] }) })
+    ] }),
+    children
+  ] });
+};
+
+const AgentMetadataList = ({ children }) => {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children });
+};
+const AgentMetadataListItem = ({ children }) => {
+  return /* @__PURE__ */ jsx("li", { className: "shrink-0 font-medium", children });
+};
+const AgentMetadataListEmpty = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children });
+};
+
+const AgentMetadataWrapper = ({ children }) => {
+  return /* @__PURE__ */ 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] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  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] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScores = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScoresByScorerId({
+          scorerId,
+          page: page || 0,
+          entityId: entityId || void 0,
+          entityType: entityType || void 0,
+          perPage: 10
+        });
+        setScores(res);
+        setIsLoading(false);
+      } catch (error) {
+        setScores(null);
+        setIsLoading(false);
+      }
+    };
+    fetchScores();
+  }, [scorerId, page, entityId, entityType]);
+  return { scores, isLoading };
+};
+const useScorer = (scorerId) => {
+  const client = useMastraClient();
+  const [scorer, setScorer] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  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);
+        toast.error("Error fetching scorer");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorer();
+  }, [scorerId]);
+  return { scorer, isLoading };
+};
+const useScorers = () => {
+  const client = useMastraClient();
+  const [scorers, setScorers] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchScorers = async () => {
+      setIsLoading(true);
+      try {
+        const res = await client.getScorers();
+        setScorers(res);
+      } catch (error) {
+        setScorers({});
+        console.error("Error fetching agents", error);
+        toast.error("Error fetching agents");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchScorers();
+  }, []);
+  return { scorers, isLoading };
+};
+
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
+const ScorerList = ({ entityId, entityType }) => {
+  const { scorers, isLoading } = useScorers();
+  if (isLoading) {
+    return /* @__PURE__ */ 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__ */ jsx(EmptyScorerList, {});
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: scorerList.map((scorer) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ScorerEntity, { scorer }) }, scorer.id)) });
+};
+const EmptyScorerList = () => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: "text-icon6", children: "No scorers were attached to this agent." });
+};
+const ScorerSkeleton = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+  ] });
+};
+const ScorerEntity = ({ scorer }) => {
+  const { Link } = useLinkComponent();
+  const linkRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
+    /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(GaugeIcon, { className: "group-hover/entity:text-accent3" }) }),
+    /* @__PURE__ */ jsxs(EntityContent, { children: [
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.name }) }),
+      /* @__PURE__ */ jsx(EntityDescription, { children: scorer.scorer.description }),
+      scorer.sampling?.type === "ratio" && /* @__PURE__ */ jsxs(Badge$1, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "Sample rate:" }),
+        /* @__PURE__ */ 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__ */ jsxs(AgentMetadataWrapper, { children: [
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }) }),
+    /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Memory",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/agent-memory",
+          title: "Agent Memory documentation"
+        },
+        children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(MemoryIcon, {}), variant: hasMemoryEnabled ? "success" : "error", className: "font-medium", children: hasMemoryEnabled ? "On" : "Off" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Tools",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/using-tools-and-mcp",
+          title: "Using Tools and MCP documentation"
+        },
+        children: /* @__PURE__ */ jsx(AgentMetadataToolList, { tools, computeToolLink })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Workflows",
+        hint: {
+          link: "https://mastra.ai/en/docs/workflows/overview",
+          title: "Workflows documentation"
+        },
+        children: /* @__PURE__ */ jsx(AgentMetadataWorkflowList, { workflows, computeWorkflowLink })
+      }
+    ),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Scorers", children: /* @__PURE__ */ jsx(AgentMetadataScorerList, { entityId: agent.name }) }),
+    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "System Prompt", children: promptSlot })
+  ] });
+};
+const AgentMetadataToolList = ({ tools, computeToolLink }) => {
+  const { Link } = useLinkComponent();
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeToolLink(tool), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+};
+const AgentMetadataScorerList = ({ entityId }) => {
+  return /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx(ScorerList, { entityId, entityType: "AGENT" }) });
+};
+const AgentMetadataWorkflowList = ({ workflows, computeWorkflowLink }) => {
+  const { Link } = useLinkComponent();
+  if (workflows.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No workflows" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeWorkflowLink(workflow), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.name)) });
+};
+
+const AgentMetadataPrompt = ({ prompt }) => {
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
+      isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "pt-2", children })
+  ] });
+};
+
+const AgentEntityHeader = ({ agentId, isLoading, agentName }) => {
+  const { handleCopy } = useCopyToClipboard({ text: agentId });
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EntityHeader, { icon: /* @__PURE__ */ jsx(AgentIcon, {}), title: agentName, isLoading, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: "h-badge-default shrink-0", children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), variant: "default", children: agentId }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: "Copy Agent ID for use in code" })
+  ] }) }) });
+};
+
+const Threads = ({ children }) => {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("ol", { children });
+};
+const ThreadItem = ({ children, isActive }) => {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-icon3" }) })
+    }
+  );
+};
+
+const AlertDialogRoot = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialog({
+  open,
+  onOpenChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange, children });
+}
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.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.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.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.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ 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__ */ 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.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] = useState(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ChatThreadSkeleton, {});
+  }
+  const reverseThreads = [...threads].reverse();
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto h-full w-full", children: [
+    /* @__PURE__ */ jsx(Threads, { children: /* @__PURE__ */ jsxs(ThreadList, { children: [
+      /* @__PURE__ */ jsx(ThreadItem, { children: /* @__PURE__ */ jsx(ThreadLink, { as: Link, to: computeNewThreadLink(), children: /* @__PURE__ */ jsxs("span", { className: "text-accent1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "bg-surface4 rounded-lg", size: "lg", children: /* @__PURE__ */ jsx(Plus, {}) }),
+        "New Chat"
+      ] }) }) }),
+      reverseThreads.length === 0 && /* @__PURE__ */ 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__ */ jsxs(ThreadItem, { isActive, children: [
+          /* @__PURE__ */ jsxs(ThreadLink, { as: Link, to: computeThreadLink(thread.id), children: [
+            /* @__PURE__ */ jsx(ThreadTitle, { title: thread.title }),
+            /* @__PURE__ */ jsx("span", { children: formatDay(thread.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsx(ThreadDeleteButton, { onClick: () => setDeleteId(thread.id) })
+        ] }, thread.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DeleteThreadDialog,
+      {
+        open: !!deleteId,
+        onOpenChange: () => setDeleteId(null),
+        onDelete: () => {
+          if (deleteId) {
+            onDelete(deleteId);
+          }
+        }
+      }
+    )
+  ] });
+};
+const DeleteThreadDialog = ({ open, onOpenChange, onDelete }) => {
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
+    /* @__PURE__ */ jsxs(AlertDialog.Header, { children: [
+      /* @__PURE__ */ jsx(AlertDialog.Title, { children: "Are you absolutely sure?" }),
+      /* @__PURE__ */ jsx(AlertDialog.Description, { children: "This action cannot be undone. This will permanently delete your chat and remove it from our servers." })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [
+      /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsx(AlertDialog.Action, { onClick: onDelete, children: "Continue" })
+    ] })
+  ] }) });
+};
+const ChatThreadSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "p-4 w-full h-full space-y-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }) }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }),
+  /* @__PURE__ */ 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__ */ jsx("span", { className: "text-muted-foreground", children: "Chat from" });
+  }
+  return /* @__PURE__ */ 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;
 };
@@ -10635,41 +11175,6 @@ const NetworkTableSkeleton = () => {
   ] });
 };
 
-const Entity = ({ children, className, onClick }) => {
-  return /* @__PURE__ */ 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__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
-};
-const EntityName = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
-};
-const EntityDescription = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
-};
-const EntityContent = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className, children });
-};
-
 const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   const toolsWithAgents = useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
@@ -11201,7 +11706,7 @@ const DatePicker = ({
           DatePickerOnly,
           {
             value,
-            setValue: (v) => setValue(v ? /* @__PURE__ */ new Date(`${v}z`) : null),
+            setValue,
             clearable: props.clearable,
             setOpenPopover,
             ...props
@@ -13251,57 +13756,6 @@ function devUIStyleRequested(name) {
   }
 }
 
-const Threads = ({ children }) => {
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx("ol", { children });
-};
-const ThreadItem = ({ children, isActive }) => {
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-icon3" }) })
-    }
-  );
-};
-
-const EntityHeader = ({ icon, title, isLoading, children }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-icon6 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
-      isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
-    ] }),
-    children
-  ] });
-};
-
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -13503,5 +13957,268 @@ const PlaygroundQueryClient = ({ children }) => {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, SettingsIcon, SlashIcon, Tab, TabContent, TabList, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatOtelTimestamp, formatOtelTimestamp2, providerMapToIcon, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useWorkingMemory };
+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] = useState("");
+  const [results, setResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [error, setError] = useState(null);
+  const searchTimeoutRef = useRef(void 0);
+  const dropdownRef = useRef(null);
+  const prevThreadIdRef = useRef(currentThreadId);
+  const lastSearchTimeRef = useRef(0);
+  const pendingSearchRef = useRef(null);
+  const handleSearch = 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 = 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 = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+        }
+        handleSearch(query);
+      }
+    },
+    [query, handleSearch]
+  );
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (prevThreadIdRef.current !== currentThreadId && query.trim()) {
+      handleSearch(query);
+    }
+    prevThreadIdRef.current = currentThreadId;
+  }, [currentThreadId, query, handleSearch]);
+  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__ */ jsxs("div", { className: cn("flex flex-col h-full", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-icon3" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: query,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Search memory...",
+          className: "pl-10 pr-10 bg-surface3 border-border1"
+        }
+      ),
+      query && /* @__PURE__ */ 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__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    (isOpen || query && (isSearching || results.length === 0)) && /* @__PURE__ */ jsx("div", { className: "mt-2 flex-1 bg-surface3 border border-border1 rounded-lg shadow-lg overflow-y-auto", children: error ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-red-500", children: error }) }) : isSearching && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Searching..." }) }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3", children: [
+      'No results found for "',
+      query,
+      '"'
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: results.map((result) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          result.context?.before && result.context.before.length > 0 && /* @__PURE__ */ jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.before.map((msg, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ 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__ */ jsx(Txt, { variant: "ui-xs", className: "text-icon3", children: formatRelativeTime(new Date(result.createdAt)) }),
+              result.threadTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ 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__ */ jsx(ExternalLink, { className: "w-3 h-3 text-blue-400" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon5 break-words", children: truncateContent(result.content) })
+          ] }) }),
+          result.context?.after && result.context.after.length > 0 && /* @__PURE__ */ jsx("div", { className: "opacity-50 text-xs space-y-1", children: result.context.after.map((msg, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              msg.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-icon3", children: truncateContent(msg.content, 50) })
+          ] }, idx)) })
+        ] })
+      },
+      result.id
+    )) }) })
+  ] });
+};
+
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, ChatThreads, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SettingsIcon, SlashIcon, Tab, TabContent, TabList, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatOtelTimestamp, formatOtelTimestamp2, providerMapToIcon, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map