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

package/dist/index.cjs.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const clientJs = require('@mastra/client-js');
-const react$2 = require('@assistant-ui/react');
+const react$3 = require('@assistant-ui/react');
 const lucideReact = require('lucide-react');
+const React = require('react');
 const reactSlot = require('@radix-ui/react-slot');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
 const AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -50,13 +49,14 @@ const LabelPrimitive = require('@radix-ui/react-label');
 const v4 = require('@autoform/zod/v4');
 const v3 = require('zod/v3');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+const react$2 = require('@mastra/react');
 const reactQuery = require('@tanstack/react-query');
 const reactTable = require('@tanstack/react-table');
 const Markdown = require('react-markdown');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
-const reactHooks = require('@mastra/react-hooks');
-const react$3 = require('motion/react');
+const clientJs = require('@mastra/client-js');
+const react$4 = require('motion/react');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const HoverCard = require('@radix-ui/react-hover-card');
@@ -103,31 +103,6 @@ const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Switch
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 
-const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
-  return new clientJs.MastraClient({
-    baseUrl: baseUrl || "",
-    // only add the header if the baseUrl is not provided i.e it's a local dev environment
-    headers: !baseUrl ? { ...mastraClientHeaders, "x-mastra-dev-playground": "true" } : mastraClientHeaders
-  });
-};
-
-const MastraClientContext = React.createContext(void 0);
-const MastraClientProvider = ({
-  children,
-  baseUrl,
-  headers
-}) => {
-  const client = createMastraClient(baseUrl, headers);
-  return /* @__PURE__ */ jsxRuntime.jsx(MastraClientContext.Provider, { value: { client }, children });
-};
-const useMastraClient = () => {
-  const context = React.useContext(MastraClientContext);
-  if (context === void 0) {
-    throw new Error("useMastraClient must be used within a MastraClientProvider");
-  }
-  return context.client;
-};
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
@@ -7356,7 +7331,7 @@ const WorkflowJsonDialog = ({ result }) => {
 };
 
 const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["workflow-runs", workflowId],
     queryFn: () => client.getWorkflow(workflowId).runs({ limit: 50 }),
@@ -7821,7 +7796,7 @@ const useWorkflowStream = (workflowFullState) => {
 };
 
 const useWorkflow = (workflowId) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const { runtimeContext } = usePlaygroundStore();
   return reactQuery.useQuery({
     queryKey: ["workflow", workflowId],
@@ -7938,13 +7913,15 @@ const Reasoning = ({ text }) => {
   ] });
 };
 
-const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
-  const data = react$2.useMessage();
+const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) => {
+  const data = react$3.useMessage();
   const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
+  const modelMetadata = data.metadata?.custom?.modelMetadata;
+  const showModelUsed = hasModelList && modelMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.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$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           Text: MarkdownText,
@@ -7953,23 +7930,33 @@ const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
         }
       }
     ) }),
-    !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar$1, {}) })
+    !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-6 pt-1 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
+      showModelUsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm leading-ui-sm text-icon6", children: [
+          modelMetadata.modelProvider,
+          "/",
+          modelMetadata.modelId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar$1, {})
+    ] })
   ] });
 };
 const AssistantActionBar$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$2.ActionBarPrimitive.Root,
+    react$3.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       autohideFloat: "single-branch",
       className: "flex gap-1 items-center transition-all relative",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { speaking: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Speak, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Read aloud", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLinesIcon, {}) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { speaking: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Stop", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircleIcon, {}) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { speaking: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Speak, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Read aloud", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLinesIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { speaking: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Stop", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircleIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
         ] }) })
       ]
     }
@@ -7993,7 +7980,7 @@ const useFileSrc = (file) => {
 };
 
 const useAttachmentSrc = () => {
-  const { file, src } = react$2.useAttachment(
+  const { file, src } = react$3.useAttachment(
     shallow.useShallow((a) => {
       if (a.file) {
         const isURL = a.file.name.startsWith("https://");
@@ -8053,11 +8040,11 @@ const TxtPreviewDialog = ({ data, open, onOpenChange }) => {
 };
 
 const InMessageContextWrapper = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Root, { className: "pt-4", 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(InMessageAttachmentWrapper, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Root, { className: "pt-4", 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(InMessageAttachmentWrapper, {}) }) });
 };
 const InMessageAttachmentWrapper = () => {
   const src = useAttachmentSrc();
-  const attachment = react$2.useAttachment((a) => a);
+  const attachment = react$3.useAttachment((a) => a);
   const isUrl = attachment?.name?.startsWith("https://");
   if (attachment.type === "image") {
     const actualSrc = isUrl ? attachment?.name : src;
@@ -8066,7 +8053,7 @@ const InMessageAttachmentWrapper = () => {
       {
         type: "image",
         contentType: void 0,
-        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
         src: actualSrc,
         data: void 0
       }
@@ -8079,7 +8066,7 @@ const InMessageAttachmentWrapper = () => {
       {
         type: "document",
         contentType: attachment.contentType,
-        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
         src: isUrl ? attachment?.name : src,
         data: `data:application/pdf;base64,${pdfText}`
       }
@@ -8090,7 +8077,7 @@ const InMessageAttachmentWrapper = () => {
     {
       type: attachment.type,
       contentType: attachment.contentType,
-      nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+      nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
       src,
       data: attachment.content?.[0]?.text
     }
@@ -8103,14 +8090,14 @@ const InMessageAttachment = ({ type, contentType, nameSlot, src, data }) => {
   ] }) });
 };
 const UserMessageAttachments = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
 const UserMessage = () => {
-  const message = react$2.useMessage();
+  const message = react$3.useMessage();
   const messageId = message?.id;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.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$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           File: (p) => {
@@ -8175,7 +8162,7 @@ const useSpeechRecognition = ({
   language = "en-US",
   agentId
 }) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [agent, setAgent] = React.useState(null);
   const { runtimeContext } = usePlaygroundStore();
   React.useEffect(() => {
@@ -8299,7 +8286,7 @@ const useMastraSpeechToText = ({ agent }) => {
 };
 
 const useHasAttachments = () => {
-  const composer = react$2.useComposerRuntime();
+  const composer = react$3.useComposerRuntime();
   const [hasAttachments, setHasAttachments] = React.useState(false);
   React.useEffect(() => {
     composer.subscribe(() => {
@@ -8368,22 +8355,22 @@ const ComposerPdfAttachment = ({ document }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full w-full", children: state.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(PdfEntry, { data: state.text, url: isUrl ? document.file?.name : void 0 }) });
 };
 const AttachmentThumbnail = () => {
-  const isImage = react$2.useAttachment((a) => a.type === "image");
-  const document = react$2.useAttachment((a) => a.type === "document" ? a : void 0);
+  const isImage = react$3.useAttachment((a) => a.type === "image");
+  const document = react$3.useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
-  const canRemove = react$2.useAttachment((a) => a.source !== "message");
+  const canRemove = react$3.useAttachment((a) => a.source !== "message");
   const isUrl = document?.file?.name.startsWith("https://");
   const actualSrc = isUrl ? document?.file?.name : src;
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: actualSrc ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsxRuntime.jsx(ComposerTxtAttachment, { document }) : null }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: actualSrc ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsxRuntime.jsx(ComposerTxtAttachment, { document }) : null }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}) })
     ] }) }),
     canRemove && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
   ] }) });
 };
 const AttachmentRemove = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     TooltipIconButton,
     {
       tooltip: "Remove file",
@@ -8396,15 +8383,15 @@ const AttachmentRemove = () => {
 const ComposerAttachments = () => {
   const hasAttachments = useHasAttachments();
   if (!hasAttachments) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
 const useComposerAddAttachment = ({
   multiple = true,
   onChange
 } = {}) => {
-  const disabled = react$2.useComposer((c) => !c.isEditing);
-  const composerRuntime = react$2.useComposerRuntime();
+  const disabled = react$3.useComposer((c) => !c.isEditing);
+  const composerRuntime = react$3.useComposerRuntime();
   const callback = React.useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -8471,7 +8458,7 @@ const getFileContentType = async (url) => {
 };
 
 const AttachFileDialog = ({ onOpenChange, open }) => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const addFilInputAttachment = useComposerAddAttachment({
     onChange: () => onOpenChange(false)
   });
@@ -8539,17 +8526,17 @@ const useThreadInput = () => {
   return React.useContext(ThreadInputContext);
 };
 
-const Thread = ({ ToolFallback, agentName, agentId, hasMemory }) => {
+const Thread = ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback });
+    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback, hasModelList });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome$1, { agentName }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$2.ThreadPrimitive.Messages,
+        react$3.ThreadPrimitive.Messages,
         {
           components: {
             UserMessage,
@@ -8558,13 +8545,13 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory }) => {
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, agentId })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
 };
 const ThreadWelcome$1 = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
@@ -8577,7 +8564,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
   } else {
     initials = "A";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
@@ -8585,10 +8572,10 @@ const ThreadWelcome$1 = ({ agentName }) => {
 const Composer$1 = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
@@ -8612,7 +8599,7 @@ const Composer$1 = ({ hasMemory, agentId }) => {
   ] });
 };
 const SpeechInput$1 = ({ agentId }) => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition({ agentId });
   React.useEffect(() => {
     if (!transcript) return;
@@ -8645,7 +8632,7 @@ const ComposerAction$1 = () => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(AttachFileDialog, { open: isAddAttachmentDialogOpen, onOpenChange: setIsAddAttachmentDialogOpen }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
         tooltip: "Send",
@@ -8654,15 +8641,15 @@ const ComposerAction$1 = () => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, {}),
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
     ] })
   ] });
 };
@@ -8678,7 +8665,7 @@ function parseJsonString(jsonString) {
   }
 }
 function useAgentWorkingMemory(agentId, threadId, resourceId) {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [threadExists, setThreadExists] = React.useState(false);
   const [workingMemoryData, setWorkingMemoryData] = React.useState(null);
   const [workingMemorySource, setWorkingMemorySource] = React.useState("thread");
@@ -8896,7 +8883,7 @@ class PDFAttachmentAdapter {
 const useAdapters = (agentId) => {
   const [isReady, setIsReady] = React.useState(false);
   const [speechAdapter, setSpeechAdapter] = React.useState(void 0);
-  const baseClient = useMastraClient();
+  const baseClient = react$2.useMastraClient();
   const { runtimeContext } = usePlaygroundStore();
   React.useEffect(() => {
     const check = async () => {
@@ -8906,7 +8893,7 @@ const useAdapters = (agentId) => {
         setSpeechAdapter(new VoiceAttachmentAdapter(agent));
         setIsReady(true);
       } catch {
-        setSpeechAdapter(new react$2.WebSpeechSynthesisAdapter());
+        setSpeechAdapter(new react$3.WebSpeechSynthesisAdapter());
         setIsReady(true);
       }
     };
@@ -8915,9 +8902,9 @@ const useAdapters = (agentId) => {
   return {
     isReady,
     adapters: {
-      attachments: new react$2.CompositeAttachmentAdapter([
-        new react$2.SimpleImageAttachmentAdapter(),
-        new react$2.SimpleTextAttachmentAdapter(),
+      attachments: new react$3.CompositeAttachmentAdapter([
+        new react$3.SimpleImageAttachmentAdapter(),
+        new react$3.SimpleTextAttachmentAdapter(),
         new PDFAttachmentAdapter()
       ]),
       speech: speechAdapter
@@ -8926,14 +8913,14 @@ const useAdapters = (agentId) => {
 };
 
 const handleNetworkMessageFromMemory = (content) => {
-  if (content.resourceType === "workflow") {
+  if (content.primitiveType === "workflow") {
     return {
       role: "assistant",
       content: [
         {
           type: "tool-call",
           toolCallId: content.finalResult.runId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: { runId: content.finalResult.runId },
           args: {
             __mastraMetadata: {
@@ -8948,7 +8935,7 @@ const handleNetworkMessageFromMemory = (content) => {
       ]
     };
   }
-  if (content.resourceType === "agent") {
+  if (content.primitiveType === "agent") {
     const badgeMessages = [];
     let toolCalls = {};
     const messages = content.finalResult.messages.slice(1);
@@ -8986,7 +8973,7 @@ const handleNetworkMessageFromMemory = (content) => {
         {
           type: "tool-call",
           toolCallId: content.finalResult.runId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: { runId: content.finalResult.runId },
           args: {
             __mastraMetadata: {
@@ -9002,14 +8989,14 @@ const handleNetworkMessageFromMemory = (content) => {
       ]
     };
   }
-  if (content.resourceType === "tool") {
+  if (content.primitiveType === "tool") {
     return {
       role: "assistant",
       content: [
         {
           type: "tool-call",
           toolCallId: content.finalResult.toolCallId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: content.finalResult.result,
           args: {
             ...content?.input,
@@ -9029,34 +9016,45 @@ const handleNetworkMessageFromMemory = (content) => {
 
 const handleStreamChunk = ({ chunk, conversation }) => {
   switch (chunk.type) {
-    default:
-      return [...conversation];
-    case "text-start": {
+    case "start": {
       const newMessage = {
         role: "assistant",
-        content: [{ type: "text", text: "" }]
+        content: []
       };
       return [...conversation, newMessage];
     }
+    case "text-start":
     case "text-delta": {
       const lastMessage = conversation[conversation.length - 1];
-      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-        const updatedContent = lastMessage.content.map((part) => {
-          if (typeof part === "object" && part.type === "text") {
-            return {
-              ...part,
-              text: part.text + chunk.payload.text
-            };
+      if (!lastMessage) return conversation;
+      if (lastMessage.role === "assistant" && typeof lastMessage.content !== `string` && (!lastMessage.content || lastMessage.content.length === 0 || lastMessage.content[lastMessage.content.length - 1]?.type !== `text`)) {
+        return [
+          ...conversation.slice(0, -1),
+          {
+            ...lastMessage,
+            content: [...lastMessage.content || [], { type: "text", text: "" }]
           }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
+        ];
       }
-      return [...conversation];
+      if (chunk.type === `text-start`) return conversation;
+      if (typeof lastMessage.content === `string`) {
+        return [
+          ...conversation.slice(0, -1),
+          {
+            ...lastMessage,
+            content: lastMessage.content + chunk.payload.text
+          }
+        ];
+      }
+      const lastPart = lastMessage.content?.[lastMessage.content.length - 1];
+      if (!lastPart || lastPart.type !== `text`) return conversation;
+      return [
+        ...conversation.slice(0, -1),
+        {
+          ...lastMessage,
+          content: [...lastMessage.content.slice(0, -1), { ...lastPart, text: lastPart.text + chunk.payload.text }]
+        }
+      ];
     }
     case "tool-output": {
       if (chunk.payload.output?.type.startsWith("workflow-")) {
@@ -9175,7 +9173,19 @@ const handleStreamChunk = ({ chunk, conversation }) => {
       return [...conversation];
     }
     case "finish": {
+      const lastMessage = conversation[conversation.length - 1];
       handleFinishReason$1(chunk.payload.stepResult.reason);
+      if (lastMessage && lastMessage.role === "assistant") {
+        const updatedMessage = {
+          ...lastMessage,
+          metadata: {
+            custom: {
+              modelMetadata: chunk.payload.metadata.modelMetadata
+            }
+          }
+        };
+        return [...conversation.slice(0, -1), updatedMessage];
+      }
       return [...conversation];
     }
     case "reasoning-delta": {
@@ -9207,6 +9217,8 @@ const handleStreamChunk = ({ chunk, conversation }) => {
       };
       return [...conversation, newMessage];
     }
+    default:
+      return [...conversation];
   }
 };
 const handleFinishReason$1 = (finishReason) => {
@@ -9561,7 +9573,7 @@ function MastraRuntimeProvider({
     network,
     cancelRun,
     isRunning: isRunningStreamVNext
-  } = reactHooks.useMastraChat({
+  } = react$2.useChat({
     agentId,
     initializeMessages: () => memory ? initializeMessageState(initialMessages || []) : []
   });
@@ -9598,7 +9610,7 @@ function MastraRuntimeProvider({
     instructions,
     providerOptions
   };
-  const baseClient = useMastraClient();
+  const baseClient = react$2.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);
@@ -9686,7 +9698,17 @@ function MastraRuntimeProvider({
             },
             { role: "assistant", content: [] }
           );
-          setMessages((currentConversation) => [...currentConversation, latestMessage]);
+          setMessages((currentConversation) => [
+            ...currentConversation,
+            {
+              ...latestMessage,
+              metadata: {
+                custom: {
+                  modelMetadata: generatedResponse.response.modelMetadata
+                }
+              }
+            }
+          ]);
           if (generatedResponse.finishReason) {
             handleFinishReason(generatedResponse.finishReason);
           }
@@ -9753,7 +9775,7 @@ function MastraRuntimeProvider({
                 if (!currentEntityId) return conversation;
                 return handleWorkflowChunk({ workflowChunk, conversation, entityName: currentEntityId });
               } else if (chunk.type === "workflow-execution-start" || chunk.type === "agent-execution-start") {
-                currentEntityId = chunk.payload?.args?.resourceId;
+                currentEntityId = chunk.payload?.args?.primitiveId;
                 const runId = chunk.payload.runId;
                 if (!currentEntityId || !runId) return conversation;
                 return createRootToolAssistantMessage({
@@ -10131,7 +10153,7 @@ function MastraRuntimeProvider({
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
-  const runtime = react$2.useExternalStoreRuntime({
+  const runtime = react$3.useExternalStoreRuntime({
     isRunning: isRunning || isRunningStreamVNext,
     messages,
     convertMessage: convertMessage$1,
@@ -10140,7 +10162,7 @@ function MastraRuntimeProvider({
     adapters: isReady ? adapters : void 0
   });
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.AssistantRuntimeProvider, { runtime, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.AssistantRuntimeProvider, { runtime, children: [
     " ",
     children,
     " "
@@ -10214,7 +10236,8 @@ const AgentChat = ({
   initialMessages,
   memory,
   refreshThreadList,
-  modelVersion
+  modelVersion,
+  modelList
 }) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
@@ -10230,7 +10253,7 @@ const AgentChat = ({
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId, hasModelList: Boolean(modelList) })
     }
   );
 };
@@ -10484,7 +10507,7 @@ function EvalTable({ evals, isCIMode = false, onRefresh }) {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-48 text-mastra-el-3", children: "Evaluations" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$4.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "h-12 w-16" }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: 4, className: "h-32 px-4 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-5" }),
@@ -13099,7 +13122,7 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
 }
 
 const useScoresByEntityId = (entityId, entityType, page = 0) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [scores, setScores] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   React.useEffect(() => {
@@ -13124,7 +13147,7 @@ const useScoresByEntityId = (entityId, entityType, page = 0) => {
   return { scores, isLoading };
 };
 const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["scores", scorerId, page, entityId, entityType],
     queryFn: () => client.getScoresByScorerId({ scorerId, page, entityId, entityType, perPage: 10 }),
@@ -13132,7 +13155,7 @@ const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
   });
 };
 const useScorer = (scorerId) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [scorer, setScorer] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   React.useEffect(() => {
@@ -13154,7 +13177,7 @@ const useScorer = (scorerId) => {
   return { scorer, isLoading };
 };
 const useScorers = () => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["scorers"],
     queryFn: () => client.getScorers(),
@@ -13837,7 +13860,7 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const scorerList = Object.keys(scorers).filter((scorerKey) => {
     const scorer = scorers[scorerKey];
     if (entityType === "AGENT") {
-      return scorer.agentNames.includes(entityId);
+      return scorer.agentNames?.includes?.(entityId);
     }
     return scorer.workflowIds.includes(entityId);
   }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
@@ -14166,7 +14189,7 @@ const LabelMappings = {
 const StepDropdown = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const { state } = useVNextNetworkChat();
-  const message = react$2.useMessage();
+  const message = react$3.useMessage();
   const id = message?.metadata?.custom?.id;
   if (!id) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Something is wrong" });
   const currentState = state[id];
@@ -14304,7 +14327,7 @@ const StepClock = ({ step }) => {
 const NextAssistantMessage = ({
   ToolFallback: ToolFallbackCustom
 }) => {
-  const data = react$2.useMessage();
+  const data = react$3.useMessage();
   const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
   const content = data.content[0];
   if (!content) {
@@ -14314,9 +14337,9 @@ const NextAssistantMessage = ({
   if (textContent === "start") {
     return /* @__PURE__ */ jsxRuntime.jsx(StepDropdown, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.MessagePrimitive.Root, { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           Text: MarkdownText,
@@ -14329,15 +14352,15 @@ const NextAssistantMessage = ({
 };
 const AssistantActionBar = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$2.ActionBarPrimitive.Root,
+    react$3.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       autohideFloat: "single-branch",
       className: "flex gap-1 items-center transition-all",
-      children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
       ] }) })
     }
   );
@@ -14350,11 +14373,11 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(NextAssistantMessage, { ...props, ToolFallback });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { networkName }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          react$2.ThreadPrimitive.Messages,
+          react$3.ThreadPrimitive.Messages,
           {
             components: {
               UserMessage,
@@ -14364,7 +14387,7 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory })
   ] });
@@ -14372,7 +14395,7 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
 const ThreadWrapper = ({ children }) => {
   const hasAttachments = useHasAttachments();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$2.ThreadPrimitive.Root,
+    react$3.ThreadPrimitive.Root,
     {
       className: clsx(
         "max-w-[568px] w-full mx-auto px-4",
@@ -14393,17 +14416,17 @@ const ThreadWelcome = ({ networkName }) => {
   } else {
     initials = "A";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
 const Composer = ({ hasMemory }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent resize-none",
@@ -14426,7 +14449,7 @@ const Composer = ({ hasMemory }) => {
   ] });
 };
 const SpeechInput = () => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition({});
   React.useEffect(() => {
     if (!transcript) return;
@@ -14446,8 +14469,8 @@ const SpeechInput = () => {
 };
 const ComposerAction = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
         tooltip: "Send",
@@ -14456,15 +14479,15 @@ const ComposerAction = () => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, {}),
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
     ] })
   ] });
 };
@@ -14782,7 +14805,7 @@ ${formatted}\`\`\``;
       }
     }
   }, [initialMessages, threadId, memory, messages]);
-  const mastra = useMastraClient();
+  const mastra = react$2.useMastraClient();
   const network = mastra.getVNextNetwork(networkId);
   const onNew = async (message) => {
     runIdRef.current = void 0;
@@ -14956,13 +14979,13 @@ ${formatted}\`\`\``;
       setIsRunning(false);
     }
   };
-  const runtime = react$2.useExternalStoreRuntime({
+  const runtime = react$3.useExternalStoreRuntime({
     isRunning,
     messages,
     convertMessage,
     onNew
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.AssistantRuntimeProvider, { runtime, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.AssistantRuntimeProvider, { runtime, children: [
     " ",
     children,
     " "
@@ -17513,7 +17536,7 @@ Dropdown.SubTrigger = DropdownMenuSubTrigger;
 Dropdown.RadioGroup = DropdownMenuRadioGroup;
 
 const useTriggerScorer = (onScorerTriggered) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useMutation({
     mutationFn: async ({ scorerName, traceId, spanId }) => {
       const response = await client.score({
@@ -18540,7 +18563,6 @@ exports.LinkComponentProvider = LinkComponentProvider;
 exports.LogsIcon = LogsIcon;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
-exports.MastraClientProvider = MastraClientProvider;
 exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
@@ -18607,6 +18629,7 @@ exports.ThreadLink = ThreadLink;
 exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.ToolCoinIcon = ToolCoinIcon;
+exports.ToolFallback = ToolFallback;
 exports.ToolList = ToolList;
 exports.ToolListEmpty = ToolListEmpty;
 exports.ToolListSkeleton = ToolListSkeleton;
@@ -18655,7 +18678,6 @@ exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
-exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
 exports.useScorer = useScorer;