@mastra/playground-ui 0.0.0-zod-v4-compat-part-2-20250820135355 → 0.0.0-zod-v4-stuff-20250825154219

package/dist/index.cjs.js

@@ -37,6 +37,8 @@ const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
 const colors = require('./colors-DLwJ7rFA.cjs');
 const reactTable = require('@tanstack/react-table');
+const SelectPrimitive = require('@radix-ui/react-select');
+const PopoverPrimitive = require('@radix-ui/react-popover');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
@@ -54,9 +56,8 @@ const z = require('zod');
 const react$3 = require('@autoform/react');
 const CheckboxPrimitive = require('@radix-ui/react-checkbox');
 const reactDayPicker = require('react-day-picker');
-const PopoverPrimitive = require('@radix-ui/react-popover');
-const SelectPrimitive = require('@radix-ui/react-select');
 const v4 = require('@autoform/zod/v4');
+const v3 = require('zod/v3');
 const reactCodeBlock = require('react-code-block');
 const reactQuery = require('@tanstack/react-query');
 
@@ -86,11 +87,11 @@ const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderP
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
+const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
+const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
-const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
-const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new clientJs.MastraClient({
@@ -5394,7 +5395,8 @@ function MastraRuntimeProvider({
   threadId,
   refreshThreadList,
   settings,
-  runtimeContext
+  runtimeContext,
+  modelVersion
 }) {
   const [isRunning, setIsRunning] = React.useState(false);
   const [messages, setMessages] = React.useState([]);
@@ -5412,6 +5414,8 @@ function MastraRuntimeProvider({
     topP,
     instructions,
     chatWithGenerate,
+    chatWithGenerateVNext,
+    chatWithStreamVNext,
     providerOptions
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = React.useRef({});
@@ -5424,27 +5428,46 @@ function MastraRuntimeProvider({
     if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
       if (initialMessages && threadId && memory) {
         const convertedMessages = initialMessages?.map((message) => {
-          const toolInvocationsAsContentParts = (message.toolInvocations || []).map((toolInvocation) => ({
-            type: "tool-call",
-            toolCallId: toolInvocation?.toolCallId,
-            toolName: toolInvocation?.toolName,
-            args: toolInvocation?.args,
-            result: toolInvocation?.result
-          }));
           const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
             type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
             mimeType: image.contentType,
             image: image.url
           }));
-          const reasoning = message?.parts?.find(({ type }) => type === "reasoning")?.details?.map((detail) => detail?.text)?.join(" ");
+          const formattedParts = (message.parts || []).map((part) => {
+            if (part.type === "reasoning") {
+              return {
+                type: "reasoning",
+                text: part.reasoning || part?.details?.filter((detail) => detail.type === "text")?.map((detail) => detail.text).join(" ")
+              };
+            }
+            if (part.type === "tool-invocation") {
+              if (part.toolInvocation.state === "result") {
+                return {
+                  type: "tool-call",
+                  toolCallId: part.toolInvocation.toolCallId,
+                  toolName: part.toolInvocation.toolName,
+                  args: part.toolInvocation.args,
+                  result: part.toolInvocation.result
+                };
+              }
+            }
+            if (part.type === "file") {
+              return {
+                type: "file",
+                mimeType: part.mimeType,
+                data: part.data
+              };
+            }
+            if (part.type === "text") {
+              return {
+                type: "text",
+                text: part.text
+              };
+            }
+          }).filter(Boolean);
           return {
             ...message,
-            content: [
-              ...reasoning ? [{ type: "reasoning", text: reasoning }] : [],
-              ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
-              ...toolInvocationsAsContentParts,
-              ...attachmentsAsContentParts
-            ]
+            content: [...formattedParts, ...attachmentsAsContentParts]
           };
         }).filter(Boolean);
         setMessages(convertedMessages);
@@ -5470,31 +5493,9 @@ function MastraRuntimeProvider({
     });
     const agent = clientWithAbort.getAgent(agentId);
     try {
-      if (chatWithGenerate) {
-        const generateResponse = await agent.generate({
-          messages: [
-            {
-              role: "user",
-              content: input
-            },
-            ...attachments
-          ],
-          runId: agentId,
-          frequencyPenalty,
-          presencePenalty,
-          maxRetries,
-          maxSteps,
-          maxTokens,
-          temperature,
-          topK,
-          topP,
-          instructions,
-          runtimeContext: runtimeContextInstance,
-          ...memory ? { threadId, resourceId: agentId } : {},
-          providerOptions
-        });
-        if (generateResponse.response && "messages" in generateResponse.response) {
-          const latestMessage = generateResponse.response.messages.reduce(
+      let handleGenerateResponse = function(generatedResponse) {
+        if (generatedResponse.response && "messages" in generatedResponse.response) {
+          const latestMessage = generatedResponse.response.messages.reduce(
             (acc, message2) => {
               const _content = Array.isArray(acc.content) ? acc.content : [];
               if (typeof message2.content === "string") {
@@ -5502,7 +5503,7 @@ function MastraRuntimeProvider({
                   ...acc,
                   content: [
                     ..._content,
-                    ...generateResponse.reasoning ? [{ type: "reasoning", text: generateResponse.reasoning }] : [],
+                    ...generatedResponse.reasoning ? [{ type: "reasoning", text: generatedResponse.reasoning }] : [],
                     {
                       type: "text",
                       text: message2.content
@@ -5514,9 +5515,14 @@ function MastraRuntimeProvider({
                 const toolCallContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-call") : void 0;
                 const reasoningContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "reasoning") : void 0;
                 if (toolCallContent) {
-                  const newContent = _content.map((c) => {
+                  const newContent = message2.content.map((c) => {
                     if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
-                      return { ...c, ...toolCallContent };
+                      return {
+                        ...c,
+                        toolCallId: toolCallContent.toolCallId,
+                        toolName: toolCallContent.toolName,
+                        args: toolCallContent.input
+                      };
                     }
                     return c;
                   });
@@ -5539,7 +5545,7 @@ function MastraRuntimeProvider({
                 if (toolResult) {
                   const newContent = _content.map((c) => {
                     if (c.type === "tool-call" && c.toolCallId === toolResult?.toolCallId) {
-                      return { ...c, result: toolResult.result };
+                      return { ...c, result: toolResult.output?.value };
                     }
                     return c;
                   });
@@ -5548,7 +5554,7 @@ function MastraRuntimeProvider({
                     ...acc,
                     content: containsToolCall ? newContent : [
                       ..._content,
-                      { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.result }
+                      { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.output?.value }
                     ]
                   };
                 }
@@ -5562,84 +5568,418 @@ function MastraRuntimeProvider({
             { role: "assistant", content: [] }
           );
           setMessages((currentConversation) => [...currentConversation, latestMessage]);
-          handleFinishReason(generateResponse.finishReason);
+          if (generatedResponse.finishReason) {
+            handleFinishReason(generatedResponse.finishReason);
+          }
         }
-      } else {
-        let updater = function() {
-          setMessages((currentConversation) => {
-            const message2 = {
-              role: "assistant",
-              content: [{ type: "text", text: content }]
-            };
-            if (!assistantMessageAdded) {
-              assistantMessageAdded = true;
+      };
+      if (modelVersion === "v2") {
+        if (chatWithGenerateVNext) {
+          const response = await agent.generateVNext({
+            messages: [
+              {
+                role: "user",
+                content: input
+              },
+              ...attachments
+            ],
+            runId: agentId,
+            modelSettings: {
+              frequencyPenalty,
+              presencePenalty,
+              maxRetries,
+              temperature,
+              topK,
+              topP,
+              maxOutputTokens: maxTokens
+            },
+            providerOptions,
+            instructions,
+            runtimeContext: runtimeContextInstance,
+            ...memory ? { threadId, resourceId: agentId } : {}
+          });
+          handleGenerateResponse(response);
+          setIsRunning(false);
+          return;
+        } else {
+          let updater = function() {
+            setMessages((currentConversation) => {
+              const message2 = {
+                role: "assistant",
+                content: [{ type: "text", text: content }]
+              };
+              if (!assistantMessageAdded) {
+                assistantMessageAdded = true;
+                if (assistantToolCallAddedForUpdater) {
+                  assistantToolCallAddedForUpdater = false;
+                }
+                return [...currentConversation, message2];
+              }
               if (assistantToolCallAddedForUpdater) {
                 assistantToolCallAddedForUpdater = false;
+                return [...currentConversation, message2];
+              }
+              return [...currentConversation.slice(0, -1), message2];
+            });
+          };
+          const response = await agent.streamVNext({
+            messages: [
+              {
+                role: "user",
+                content: input
+              },
+              ...attachments
+            ],
+            runId: agentId,
+            modelSettings: {
+              frequencyPenalty,
+              presencePenalty,
+              maxRetries,
+              maxOutputTokens: maxTokens,
+              temperature,
+              topK,
+              topP
+            },
+            instructions,
+            runtimeContext: runtimeContextInstance,
+            ...memory ? { threadId, resourceId: agentId } : {},
+            providerOptions
+          });
+          if (!response.body) {
+            throw new Error("No response body");
+          }
+          let content = "";
+          let assistantMessageAdded = false;
+          let assistantToolCallAddedForUpdater = false;
+          let assistantToolCallAddedForContent = false;
+          await response.processDataStream({
+            onChunk: async (chunk) => {
+              switch (chunk.type) {
+                case "text-delta": {
+                  if (assistantToolCallAddedForContent) {
+                    assistantToolCallAddedForContent = false;
+                    content = chunk.payload.text;
+                  } else {
+                    content += chunk.payload.text;
+                  }
+                  console.log(chunk.payload.text, "VALUE");
+                  updater();
+                  break;
+                }
+                case "tool-call": {
+                  setMessages((currentConversation) => {
+                    const lastMessage = currentConversation[currentConversation.length - 1];
+                    if (lastMessage && lastMessage.role === "assistant") {
+                      const updatedMessage = {
+                        ...lastMessage,
+                        content: Array.isArray(lastMessage.content) ? [
+                          ...lastMessage.content,
+                          {
+                            type: "tool-call",
+                            toolCallId: chunk.payload.toolCallId,
+                            toolName: chunk.payload.toolName,
+                            args: chunk.payload.args
+                          }
+                        ] : [
+                          ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+                          {
+                            type: "tool-call",
+                            toolCallId: chunk.payload.toolCallId,
+                            toolName: chunk.payload.toolName,
+                            args: chunk.payload.args
+                          }
+                        ]
+                      };
+                      assistantToolCallAddedForUpdater = true;
+                      assistantToolCallAddedForContent = true;
+                      return [...currentConversation.slice(0, -1), updatedMessage];
+                    }
+                    const newMessage = {
+                      role: "assistant",
+                      content: [
+                        { type: "text", text: content },
+                        {
+                          type: "tool-call",
+                          toolCallId: chunk.payload.toolCallId,
+                          toolName: chunk.payload.toolName,
+                          args: chunk.payload.args
+                        }
+                      ]
+                    };
+                    assistantToolCallAddedForUpdater = true;
+                    assistantToolCallAddedForContent = true;
+                    return [...currentConversation, newMessage];
+                  });
+                  toolCallIdToName.current[chunk.payload.toolCallId] = chunk.payload.toolName;
+                  break;
+                }
+                case "tool-result": {
+                  setMessages((currentConversation) => {
+                    const lastMessage = currentConversation[currentConversation.length - 1];
+                    if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                      const updatedContent = lastMessage.content.map((part) => {
+                        if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
+                          return {
+                            ...part,
+                            result: chunk.payload.result
+                          };
+                        }
+                        return part;
+                      });
+                      const updatedMessage = {
+                        ...lastMessage,
+                        content: updatedContent
+                      };
+                      return [...currentConversation.slice(0, -1), updatedMessage];
+                    }
+                    return currentConversation;
+                  });
+                  try {
+                    const toolName = toolCallIdToName.current[chunk.payload.toolCallId];
+                    if (toolName === "updateWorkingMemory" && chunk.payload.result?.success) {
+                      await refreshWorkingMemory?.();
+                    }
+                  } finally {
+                    delete toolCallIdToName.current[chunk.payload.toolCallId];
+                  }
+                  break;
+                }
+                case "error": {
+                  if (typeof chunk.payload.error === "string") {
+                    throw new Error(chunk.payload.error);
+                  }
+                  break;
+                }
+                case "finish": {
+                  handleFinishReason(chunk.payload.finishReason);
+                  break;
+                }
+                case "reasoning-delta": {
+                  setMessages((currentConversation) => {
+                    const lastMessage = currentConversation[currentConversation.length - 1];
+                    if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                      const updatedContent = lastMessage.content.map((part) => {
+                        if (typeof part === "object" && part.type === "reasoning") {
+                          return {
+                            ...part,
+                            text: part.text + chunk.payload.text
+                          };
+                        }
+                        return part;
+                      });
+                      const updatedMessage = {
+                        ...lastMessage,
+                        content: updatedContent
+                      };
+                      return [...currentConversation.slice(0, -1), updatedMessage];
+                    }
+                    const newMessage = {
+                      role: "assistant",
+                      content: [
+                        {
+                          type: "reasoning",
+                          text: chunk.payload.text
+                        },
+                        { type: "text", text: content }
+                      ]
+                    };
+                    return [...currentConversation, newMessage];
+                  });
+                  break;
+                }
               }
-              return [...currentConversation, message2];
-            }
-            if (assistantToolCallAddedForUpdater) {
-              assistantToolCallAddedForUpdater = false;
-              return [...currentConversation, message2];
             }
-            return [...currentConversation.slice(0, -1), message2];
           });
-        };
-        const response = await agent.stream({
-          messages: [
-            {
-              role: "user",
-              content: input
-            },
-            ...attachments
-          ],
-          runId: agentId,
-          frequencyPenalty,
-          presencePenalty,
-          maxRetries,
-          maxSteps,
-          maxTokens,
-          temperature,
-          topK,
-          topP,
-          instructions,
-          runtimeContext: runtimeContextInstance,
-          ...memory ? { threadId, resourceId: agentId } : {},
-          providerOptions
-        });
-        if (!response.body) {
-          throw new Error("No response body");
+          setIsRunning(false);
+          return;
         }
-        let content = "";
-        let assistantMessageAdded = false;
-        let assistantToolCallAddedForUpdater = false;
-        let assistantToolCallAddedForContent = false;
-        await response.processDataStream({
-          onTextPart(value) {
-            if (assistantToolCallAddedForContent) {
-              assistantToolCallAddedForContent = false;
-              content = value;
-            } else {
-              content += value;
-            }
-            updater();
-          },
-          async onToolCallPart(value) {
+      } else {
+        if (chatWithGenerate) {
+          const generateResponse = await agent.generate({
+            messages: [
+              {
+                role: "user",
+                content: input
+              },
+              ...attachments
+            ],
+            runId: agentId,
+            frequencyPenalty,
+            presencePenalty,
+            maxRetries,
+            maxSteps,
+            maxTokens,
+            temperature,
+            topK,
+            topP,
+            instructions,
+            runtimeContext: runtimeContextInstance,
+            ...memory ? { threadId, resourceId: agentId } : {},
+            providerOptions
+          });
+          if (generateResponse.response && "messages" in generateResponse.response) {
+            const latestMessage = generateResponse.response.messages.reduce(
+              (acc, message2) => {
+                const _content = Array.isArray(acc.content) ? acc.content : [];
+                if (typeof message2.content === "string") {
+                  return {
+                    ...acc,
+                    content: [
+                      ..._content,
+                      ...generateResponse.reasoning ? [{ type: "reasoning", text: generateResponse.reasoning }] : [],
+                      {
+                        type: "text",
+                        text: message2.content
+                      }
+                    ]
+                  };
+                }
+                if (message2.role === "assistant") {
+                  const toolCallContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-call") : void 0;
+                  const reasoningContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "reasoning") : void 0;
+                  if (toolCallContent) {
+                    const newContent = _content.map((c) => {
+                      if (c.type === "tool-call" && c.toolCallId === toolCallContent?.toolCallId) {
+                        return { ...c, ...toolCallContent };
+                      }
+                      return c;
+                    });
+                    const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                    return {
+                      ...acc,
+                      content: containsToolCall ? [...reasoningContent ? [reasoningContent] : [], ...newContent] : [..._content, ...reasoningContent ? [reasoningContent] : [], toolCallContent]
+                    };
+                  }
+                  const textContent = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "text" && content.text) : void 0;
+                  if (textContent) {
+                    return {
+                      ...acc,
+                      content: [..._content, ...reasoningContent ? [reasoningContent] : [], textContent]
+                    };
+                  }
+                }
+                if (message2.role === "tool") {
+                  const toolResult = Array.isArray(message2.content) ? message2.content.find((content) => content.type === "tool-result") : void 0;
+                  if (toolResult) {
+                    const newContent = _content.map((c) => {
+                      if (c.type === "tool-call" && c.toolCallId === toolResult?.toolCallId) {
+                        return { ...c, result: toolResult.result };
+                      }
+                      return c;
+                    });
+                    const containsToolCall = newContent.some((c) => c.type === "tool-call");
+                    return {
+                      ...acc,
+                      content: containsToolCall ? newContent : [
+                        ..._content,
+                        { type: "tool-result", toolCallId: toolResult.toolCallId, result: toolResult.result }
+                      ]
+                    };
+                  }
+                  return {
+                    ...acc,
+                    content: [..._content, toolResult]
+                  };
+                }
+                return acc;
+              },
+              { role: "assistant", content: [] }
+            );
+            setMessages((currentConversation) => [...currentConversation, latestMessage]);
+            handleFinishReason(generateResponse.finishReason);
+          }
+        } else {
+          let updater = function() {
             setMessages((currentConversation) => {
-              const lastMessage = currentConversation[currentConversation.length - 1];
-              if (lastMessage && lastMessage.role === "assistant") {
-                const updatedMessage = {
-                  ...lastMessage,
-                  content: Array.isArray(lastMessage.content) ? [
-                    ...lastMessage.content,
-                    {
-                      type: "tool-call",
-                      toolCallId: value.toolCallId,
-                      toolName: value.toolName,
-                      args: value.args
-                    }
-                  ] : [
-                    ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+              const message2 = {
+                role: "assistant",
+                content: [{ type: "text", text: content }]
+              };
+              if (!assistantMessageAdded) {
+                assistantMessageAdded = true;
+                if (assistantToolCallAddedForUpdater) {
+                  assistantToolCallAddedForUpdater = false;
+                }
+                return [...currentConversation, message2];
+              }
+              if (assistantToolCallAddedForUpdater) {
+                assistantToolCallAddedForUpdater = false;
+                return [...currentConversation, message2];
+              }
+              return [...currentConversation.slice(0, -1), message2];
+            });
+          };
+          const response = await agent.stream({
+            messages: [
+              {
+                role: "user",
+                content: input
+              },
+              ...attachments
+            ],
+            runId: agentId,
+            frequencyPenalty,
+            presencePenalty,
+            maxRetries,
+            maxSteps,
+            maxTokens,
+            temperature,
+            topK,
+            topP,
+            instructions,
+            runtimeContext: runtimeContextInstance,
+            ...memory ? { threadId, resourceId: agentId } : {},
+            providerOptions
+          });
+          if (!response.body) {
+            throw new Error("No response body");
+          }
+          let content = "";
+          let assistantMessageAdded = false;
+          let assistantToolCallAddedForUpdater = false;
+          let assistantToolCallAddedForContent = false;
+          await response.processDataStream({
+            onTextPart(value) {
+              if (assistantToolCallAddedForContent) {
+                assistantToolCallAddedForContent = false;
+                content = value;
+              } else {
+                content += value;
+              }
+              updater();
+            },
+            async onToolCallPart(value) {
+              setMessages((currentConversation) => {
+                const lastMessage = currentConversation[currentConversation.length - 1];
+                if (lastMessage && lastMessage.role === "assistant") {
+                  const updatedMessage = {
+                    ...lastMessage,
+                    content: Array.isArray(lastMessage.content) ? [
+                      ...lastMessage.content,
+                      {
+                        type: "tool-call",
+                        toolCallId: value.toolCallId,
+                        toolName: value.toolName,
+                        args: value.args
+                      }
+                    ] : [
+                      ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
+                      {
+                        type: "tool-call",
+                        toolCallId: value.toolCallId,
+                        toolName: value.toolName,
+                        args: value.args
+                      }
+                    ]
+                  };
+                  assistantToolCallAddedForUpdater = true;
+                  assistantToolCallAddedForContent = true;
+                  return [...currentConversation.slice(0, -1), updatedMessage];
+                }
+                const newMessage = {
+                  role: "assistant",
+                  content: [
+                    { type: "text", text: content },
                     {
                       type: "tool-call",
                       toolCallId: value.toolCallId,
@@ -5650,95 +5990,80 @@ function MastraRuntimeProvider({
                 };
                 assistantToolCallAddedForUpdater = true;
                 assistantToolCallAddedForContent = true;
-                return [...currentConversation.slice(0, -1), updatedMessage];
+                return [...currentConversation, newMessage];
+              });
+              toolCallIdToName.current[value.toolCallId] = value.toolName;
+            },
+            async onToolResultPart(value) {
+              setMessages((currentConversation) => {
+                const lastMessage = currentConversation[currentConversation.length - 1];
+                if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                  const updatedContent = lastMessage.content.map((part) => {
+                    if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === value.toolCallId) {
+                      return {
+                        ...part,
+                        result: value.result
+                      };
+                    }
+                    return part;
+                  });
+                  const updatedMessage = {
+                    ...lastMessage,
+                    content: updatedContent
+                  };
+                  return [...currentConversation.slice(0, -1), updatedMessage];
+                }
+                return currentConversation;
+              });
+              try {
+                const toolName = toolCallIdToName.current[value.toolCallId];
+                if (toolName === "updateWorkingMemory" && value.result?.success) {
+                  await refreshWorkingMemory?.();
+                }
+              } finally {
+                delete toolCallIdToName.current[value.toolCallId];
               }
-              const newMessage = {
-                role: "assistant",
-                content: [
-                  { type: "text", text: content },
-                  {
-                    type: "tool-call",
-                    toolCallId: value.toolCallId,
-                    toolName: value.toolName,
-                    args: value.args
-                  }
-                ]
-              };
-              assistantToolCallAddedForUpdater = true;
-              assistantToolCallAddedForContent = true;
-              return [...currentConversation, newMessage];
-            });
-            toolCallIdToName.current[value.toolCallId] = value.toolName;
-          },
-          async onToolResultPart(value) {
-            setMessages((currentConversation) => {
-              const lastMessage = currentConversation[currentConversation.length - 1];
-              if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-                const updatedContent = lastMessage.content.map((part) => {
-                  if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === value.toolCallId) {
-                    return {
-                      ...part,
-                      result: value.result
-                    };
-                  }
-                  return part;
-                });
-                const updatedMessage = {
-                  ...lastMessage,
-                  content: updatedContent
+            },
+            onErrorPart(error) {
+              throw new Error(error);
+            },
+            onFinishMessagePart({ finishReason }) {
+              handleFinishReason(finishReason);
+            },
+            onReasoningPart(value) {
+              setMessages((currentConversation) => {
+                const lastMessage = currentConversation[currentConversation.length - 1];
+                if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+                  const updatedContent = lastMessage.content.map((part) => {
+                    if (typeof part === "object" && part.type === "reasoning") {
+                      return {
+                        ...part,
+                        text: part.text + value
+                      };
+                    }
+                    return part;
+                  });
+                  const updatedMessage = {
+                    ...lastMessage,
+                    content: updatedContent
+                  };
+                  return [...currentConversation.slice(0, -1), updatedMessage];
+                }
+                const newMessage = {
+                  role: "assistant",
+                  content: [
+                    {
+                      type: "reasoning",
+                      text: value
+                    },
+                    { type: "text", text: content }
+                  ]
                 };
-                return [...currentConversation.slice(0, -1), updatedMessage];
-              }
-              return currentConversation;
-            });
-            try {
-              const toolName = toolCallIdToName.current[value.toolCallId];
-              if (toolName === "updateWorkingMemory" && value.result?.success) {
-                await refreshWorkingMemory?.();
-              }
-            } finally {
-              delete toolCallIdToName.current[value.toolCallId];
+                return [...currentConversation, newMessage];
+              });
             }
-          },
-          onErrorPart(error) {
-            throw new Error(error);
-          },
-          onFinishMessagePart({ finishReason }) {
-            handleFinishReason(finishReason);
-          },
-          onReasoningPart(value) {
-            setMessages((currentConversation) => {
-              const lastMessage = currentConversation[currentConversation.length - 1];
-              if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-                const updatedContent = lastMessage.content.map((part) => {
-                  if (typeof part === "object" && part.type === "reasoning") {
-                    return {
-                      ...part,
-                      text: part.text + value
-                    };
-                  }
-                  return part;
-                });
-                const updatedMessage = {
-                  ...lastMessage,
-                  content: updatedContent
-                };
-                return [...currentConversation.slice(0, -1), updatedMessage];
-              }
-              const newMessage = {
-                role: "assistant",
-                content: [
-                  {
-                    type: "reasoning",
-                    text: value
-                  },
-                  { type: "text", text: content }
-                ]
-              };
-              return [...currentConversation, newMessage];
-            });
-          }
-        });
+          });
+        }
       }
       setIsRunning(false);
       setTimeout(() => {
@@ -5788,7 +6113,8 @@ const defaultSettings = {
     maxSteps: 5,
     temperature: 0.5,
     topP: 1,
-    chatWithGenerate: false
+    chatWithGenerate: false,
+    chatWithGenerateVNext: false
   }
 };
 function useAgentSettingsState({ agentId }) {
@@ -5860,7 +6186,8 @@ const AgentChat = ({
   initialMessages,
   memory,
   refreshThreadList,
-  onInputChange
+  onInputChange,
+  modelVersion
 }) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
@@ -5869,6 +6196,7 @@ const AgentChat = ({
     {
       agentId,
       agentName,
+      modelVersion,
       threadId,
       initialMessages,
       memory,
@@ -6636,28 +6964,47 @@ const AgentAdvancedSettings = () => {
   ] }) });
 };
 
-const AgentSettings = () => {
+const AgentSettings = ({ modelVersion }) => {
   const { settings, setSettings, resetAll } = useAgentSettings();
+  let radioValue;
+  if (modelVersion === "v2") {
+    radioValue = settings?.modelSettings?.chatWithGenerateVNext ? "generateVNext" : "streamVNext";
+  } else {
+    radioValue = settings?.modelSettings?.chatWithGenerate ? "generate" : "stream";
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxRuntime.jsxs(
         RadioGroup,
         {
           orientation: "horizontal",
-          value: settings?.modelSettings?.chatWithGenerate ? "generate" : "stream",
+          value: radioValue,
           onValueChange: (value) => setSettings({
             ...settings,
-            modelSettings: { ...settings?.modelSettings, chatWithGenerate: value === "generate" }
+            modelSettings: {
+              ...settings?.modelSettings,
+              chatWithGenerate: value === "generate",
+              chatWithGenerateVNext: value === "generateVNext",
+              chatWithStreamVNext: value === "streamVNext"
+            }
           }),
           className: "flex flex-row gap-4",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generateVNext", id: "generateVNext", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generateVNext", children: "Generate vNext" })
+            ] }),
+            modelVersion !== "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
               /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
+            ] }),
+            modelVersion === "v2" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "streamVNext", id: "streamVNext", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamVNext", children: "Stream vNext" })
             ] })
           ]
         }
@@ -7794,8 +8141,8 @@ const ScorerEntity = ({ scorer }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
     /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "group-hover/entity:text-accent3" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(EntityContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.name }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: scorer.scorer.description }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityName, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { ref: linkRef, href: `/scorers/${scorer.id}`, children: scorer.scorer.config.name }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityDescription, { children: scorer.scorer.config.description }),
       scorer.sampling?.type === "ratio" && /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "Sample rate:" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon6", children: scorer.sampling.rate })
@@ -7804,20 +8151,365 @@ const ScorerEntity = ({ scorer }) => {
   ] });
 };
 
+const openaiModels = [
+  "o1",
+  "o1-2024-12-17",
+  "o3-mini",
+  "o3-mini-2025-01-31",
+  "o3",
+  "o3-2025-04-16",
+  "o4-mini",
+  "o4-mini-2025-04-16",
+  "codex-mini-latest",
+  "computer-use-preview",
+  "gpt-4.1",
+  "gpt-4.1-2025-04-14",
+  "gpt-4.1-mini",
+  "gpt-4.1-mini-2025-04-14",
+  "gpt-4.1-nano",
+  "gpt-4.1-nano-2025-04-14",
+  "gpt-4o",
+  "gpt-4o-2024-05-13",
+  "gpt-4o-2024-08-06",
+  "gpt-4o-2024-11-20",
+  "gpt-4o-audio-preview",
+  "gpt-4o-audio-preview-2024-10-01",
+  "gpt-4o-audio-preview-2024-12-17",
+  "gpt-4o-search-preview",
+  "gpt-4o-search-preview-2025-03-11",
+  "gpt-4o-mini-search-preview",
+  "gpt-4o-mini-search-preview-2025-03-11",
+  "gpt-4o-mini",
+  "gpt-4o-mini-2024-07-18",
+  "gpt-4-turbo",
+  "gpt-4-turbo-2024-04-09",
+  "gpt-4-turbo-preview",
+  "gpt-4-0125-preview",
+  "gpt-4-1106-preview",
+  "gpt-4",
+  "gpt-4-0613",
+  "gpt-4.5-preview",
+  "gpt-4.5-preview-2025-02-27",
+  "gpt-3.5-turbo-0125",
+  "gpt-3.5-turbo",
+  "gpt-3.5-turbo-1106",
+  "chatgpt-4o-latest",
+  "gpt-5",
+  "gpt-5-2025-08-07",
+  "gpt-5-mini",
+  "gpt-5-mini-2025-08-07",
+  "gpt-5-nano",
+  "gpt-5-nano-2025-08-07",
+  "gpt-5-chat-latest"
+];
+const anthropicModels = [
+  "claude-opus-4-20250514",
+  "claude-sonnet-4-20250514",
+  "claude-3-7-sonnet-20250219",
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-sonnet-20241022",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-5-haiku-latest",
+  "claude-3-5-haiku-20241022",
+  "claude-3-opus-latest",
+  "claude-3-opus-20240229",
+  "claude-3-sonnet-20240229",
+  "claude-3-haiku-20240307"
+];
+const googleModels = [
+  "gemini-1.5-flash",
+  "gemini-1.5-flash-latest",
+  "gemini-1.5-flash-001",
+  "gemini-1.5-flash-002",
+  "gemini-1.5-flash-8b",
+  "gemini-1.5-flash-8b-latest",
+  "gemini-1.5-flash-8b-001",
+  "gemini-1.5-pro",
+  "gemini-1.5-pro-latest",
+  "gemini-1.5-pro-001",
+  "gemini-1.5-pro-002",
+  "gemini-2.0-flash",
+  "gemini-2.0-flash-001",
+  "gemini-2.0-flash-live-001",
+  "gemini-2.0-flash-lite",
+  "gemini-2.0-pro-exp-02-05",
+  "gemini-2.0-flash-thinking-exp-01-21",
+  "gemini-2.0-flash-exp",
+  "gemini-2.5-pro",
+  "gemini-2.5-flash",
+  "gemini-2.5-flash-lite",
+  "gemini-2.5-pro-exp-03-25",
+  "gemini-2.5-flash-preview-04-17",
+  "gemini-exp-1206",
+  "gemma-3-12b-it",
+  "gemma-3-27b-it"
+];
+const xAIModels = [
+  "grok-4",
+  "grok-4-0709",
+  "grok-4-latest",
+  "grok-3",
+  "grok-3-latest",
+  "grok-3-fast",
+  "grok-3-fast-latest",
+  "grok-3-mini",
+  "grok-3-mini-latest",
+  "grok-3-mini-fast",
+  "grok-3-mini-fast-latest",
+  "grok-2-vision-1212",
+  "grok-2-vision",
+  "grok-2-vision-latest",
+  "grok-2-image-1212",
+  "grok-2-image",
+  "grok-2-image-latest",
+  "grok-2-1212",
+  "grok-2",
+  "grok-2-latest",
+  "grok-vision-beta",
+  "grok-beta"
+];
+const groqModels = [
+  "gemma2-9b-it",
+  "llama-3.1-8b-instant",
+  "llama-3.3-70b-versatile",
+  "meta-llama/llama-guard-4-12b",
+  "openai/gpt-oss-120b",
+  "openai/gpt-oss-20b",
+  "deepseek-r1-distill-llama-70b",
+  "meta-llama/llama-4-maverick-17b-128e-instruct",
+  "meta-llama/llama-4-scout-17b-16e-instruct",
+  "meta-llama/llama-prompt-guard-2-22m",
+  "meta-llama/llama-prompt-guard-2-86m",
+  "mistral-saba-24b",
+  "moonshotai/kimi-k2-instruct",
+  "qwen/qwen3-32b",
+  "llama-guard-3-8b",
+  "llama3-70b-8192",
+  "llama3-8b-8192",
+  "mixtral-8x7b-32768",
+  "qwen-qwq-32b",
+  "qwen-2.5-32b",
+  "deepseek-r1-distill-qwen-32b"
+];
+
+const Select = SelectPrimitive__namespace.Root;
+const SelectValue = SelectPrimitive__namespace.Value;
+const SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SelectPrimitive__namespace.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
+  }
+) }));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+
+const Popover = PopoverPrimitive__namespace.Root;
+const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+
+const Models = {
+  openai: {
+    models: openaiModels?.map((model) => ({ provider: "openai", model, icon: "openai.chat" })),
+    icon: "openai.chat"
+  },
+  anthropic: {
+    models: anthropicModels?.map((model) => ({ provider: "anthropic", model, icon: "anthropic.messages" })),
+    icon: "anthropic.messages"
+  },
+  google: {
+    models: googleModels?.map((model) => ({ provider: "google", model, icon: "GOOGLE" })),
+    icon: "GOOGLE"
+  },
+  xAi: {
+    models: xAIModels?.map((model) => ({ provider: "xai", model, icon: "X_GROK" })),
+    icon: "X_GROK"
+  },
+  groq: {
+    models: groqModels?.map((model) => ({ provider: "groq", model, icon: "GROQ" })),
+    icon: "GROQ"
+  }
+};
+const AgentMetadataModelSwitcher = ({
+  defaultProvider,
+  defaultModel,
+  updateModel,
+  closeEditor,
+  modelProviders
+}) => {
+  const [selectedModel, setSelectedModel] = React.useState(defaultModel);
+  const [showSuggestions, setShowSuggestions] = React.useState(false);
+  const [selectedProvider, setSelectedProvider] = React.useState(() => {
+    if (defaultProvider) {
+      const providerOnly = defaultProvider.split(".")[0];
+      return providerOnly;
+    }
+    return "";
+  });
+  const [loading, setLoading] = React.useState(false);
+  const modelsList = Object.entries(Models).filter(([provider]) => modelProviders.includes(provider));
+  const allModels = modelsList.flatMap(([_, { models }]) => models);
+  const providersList = modelsList.map(([provider, { icon }]) => ({ provider, icon }));
+  const model = allModels.find((model2) => model2.model === selectedModel);
+  const handleSave = async () => {
+    setLoading(true);
+    const providerToUse = model?.provider ?? selectedProvider;
+    await updateModel({ provider: providerToUse, modelId: selectedModel });
+    setLoading(false);
+    closeEditor();
+  };
+  const filteredModels = allModels.filter((model2) => model2.model.includes(selectedModel));
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: model?.provider ?? selectedProvider,
+        onValueChange: setSelectedProvider,
+        disabled: !!model?.provider,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "max-w-[150px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select provider" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: providersList.map((provider) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: provider.provider, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: providerMapToIcon[provider.icon] }),
+            provider.provider
+          ] }) }, provider.provider)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: showSuggestions, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "model-input",
+          list: "model-suggestions",
+          className: "flex-1",
+          type: "text",
+          value: selectedModel,
+          onChange: (e) => {
+            setSelectedModel(e.target.value);
+            setShowSuggestions(true);
+          },
+          placeholder: "Enter model name or select from suggestions..."
+        }
+      ) }),
+      filteredModels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          className: "flex flex-col gap-2 w-[var(--radix-popover-trigger-width)] max-h-[calc(var(--radix-popover-content-available-height)-50px)] overflow-y-auto",
+          children: filteredModels.map((model2) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 cursor-pointer hover:bg-surface5 p-2",
+              onClick: () => {
+                setSelectedModel(model2.model);
+                setShowSuggestions(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: providerMapToIcon[model2.icon] }),
+                model2.model
+              ]
+            },
+            model2.provider + model2.model
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleSave, className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: loading ? "Saving..." : "Save new model" })
+    ] })
+  ] }) });
+};
+
 const AgentMetadata = ({
   agent,
   promptSlot,
   hasMemoryEnabled,
   computeToolLink,
-  computeWorkflowLink
+  computeWorkflowLink,
+  updateModel,
+  modelProviders
 }) => {
+  const [isEditingModel, setIsEditingModel] = React.useState(false);
   const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
   const agentTools = agent.tools ?? {};
   const tools = Object.keys(agentTools).map((key) => agentTools[key]);
   const agentWorkflows = agent.workflows ?? {};
   const workflows = Object.keys(agentWorkflows).map((key) => agentWorkflows[key]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AgentMetadataWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Model", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataModelSwitcher,
+      {
+        defaultProvider: agent.provider,
+        defaultModel: agent.modelId,
+        updateModel,
+        closeEditor: () => setIsEditingModel(false),
+        modelProviders
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setIsEditingModel(true), className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EditIcon, {}) }) })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AgentMetadataSection,
       {
@@ -11888,23 +12580,6 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 }
 Calendar.displayName = "Calendar";
 
-const Popover = PopoverPrimitive__namespace.Root;
-const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-
 const DatePicker = ({
   value,
   setValue,
@@ -12089,65 +12764,6 @@ const DateField = ({ inputProps, field, error, id }) => {
   );
 };
 
-const Select = SelectPrimitive__namespace.Root;
-const SelectValue = SelectPrimitive__namespace.Value;
-const SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      SelectPrimitive__namespace.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-
 const SelectField = ({ field, inputProps, error, id, value }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12349,6 +12965,92 @@ function AutoForm({
 
 react$3.buildZodFieldConfig();
 
+function inferFieldType(schema, fieldConfig) {
+  if (fieldConfig?.fieldType) {
+    return fieldConfig.fieldType;
+  }
+  if (schema instanceof z.z.ZodObject) return "object";
+  if (schema instanceof z.z.ZodNumber) return "number";
+  if (schema instanceof z.z.ZodBoolean) return "boolean";
+  if (schema instanceof z.z.ZodString) {
+    const checks = schema._zod.def.checks || [];
+    const hasDateTimeCheck = checks.some(
+      //@ts-expect-error - zod string_format check has format property
+      (check) => check._zod.def.check === "string_format" && check._zod.def.format === "datetime"
+    );
+    if (hasDateTimeCheck) return "date";
+    return "string";
+  }
+  if (schema instanceof z.z.ZodEnum) return "select";
+  if (schema instanceof v3.z.ZodNativeEnum) return "select";
+  if (schema instanceof z.z.ZodArray) return "array";
+  if (schema instanceof z.z.ZodRecord) return "record";
+  return "string";
+}
+
+function parseField(key, schema) {
+  const baseSchema = getBaseSchema(schema);
+  const fieldConfig = v4.getFieldConfigInZodStack(schema);
+  const type = inferFieldType(baseSchema, fieldConfig);
+  const defaultValue = v4.getDefaultValueInZodStack(schema);
+  console.log({ baseSchema });
+  const options = baseSchema._zod.def?.entries;
+  let optionValues = [];
+  if (options) {
+    if (!Array.isArray(options)) {
+      optionValues = Object.entries(options);
+    } else {
+      optionValues = options.map((value) => [value, value]);
+    }
+  }
+  let subSchema = [];
+  if (baseSchema instanceof v3.z.ZodObject || baseSchema instanceof z.z.ZodObject) {
+    subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
+  }
+  if (baseSchema instanceof v3.z.ZodArray || baseSchema instanceof z.z.ZodArray) {
+    subSchema = [parseField("0", baseSchema._zod.def.element)];
+  }
+  return {
+    key,
+    type,
+    required: !schema.optional(),
+    default: defaultValue,
+    description: baseSchema.description,
+    fieldConfig,
+    options: optionValues,
+    schema: subSchema
+  };
+}
+function getBaseSchema(schema) {
+  if ("innerType" in schema._zod.def) {
+    return getBaseSchema(schema._zod.def.innerType);
+  }
+  if ("schema" in schema._zod.def) {
+    return getBaseSchema(schema._zod.def.schema);
+  }
+  return schema;
+}
+function parseSchema(schema) {
+  const shape = schema.shape;
+  const fields = Object.entries(shape).map(([key, field]) => parseField(key, field));
+  return { fields };
+}
+class CustomZodProvider extends v4.ZodProvider {
+  _schema;
+  constructor(schema) {
+    super(schema);
+    this._schema = schema;
+  }
+  validateSchema(values) {
+    const result = super.validateSchema(values);
+    console.log({ result });
+    return result;
+  }
+  parseSchema() {
+    return parseSchema(this._schema);
+  }
+}
+
 function isEmptyZodObject(schema) {
   if (schema instanceof z.ZodObject) {
     return Object.keys(schema.shape).length === 0;
@@ -12380,7 +13082,7 @@ function DynamicForm({
     }
     return schema2;
   };
-  const schemaProvider = new v4.ZodProvider(normalizedSchema(schema));
+  const schemaProvider = new CustomZodProvider(normalizedSchema(schema));
   const formProps = {
     schema: schemaProvider,
     onSubmit: async (values) => {
@@ -13152,7 +13854,7 @@ const TracesTableError = ({ error, colsCount }) => {
 };
 const TraceRow = ({ trace, index, isActive }) => {
   const { openTrace } = useOpenTrace();
-  const hasFailure = trace.trace.some((span) => span.status.code !== 0);
+  const hasFailure = trace.trace.some((span) => span.status.code === 2);
   return /* @__PURE__ */ jsxRuntime.jsxs(Row, { className: isActive ? "bg-surface4" : "", onClick: () => openTrace(trace.trace, index), children: [
     /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
     /* @__PURE__ */ jsxRuntime.jsxs(TxtCell, { title: trace.traceId, children: [
@@ -13523,7 +14225,7 @@ function TraceDetails() {
   const { trace, currentTraceIndex, prevTrace, nextTrace, traces } = React.useContext(TraceContext);
   const actualTrace = traces[currentTraceIndex];
   if (!actualTrace || !trace) return null;
-  const hasFailure = trace.some((span) => span.status.code !== 0);
+  const hasFailure = trace.some((span) => span.status.code === 2);
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -13645,11 +14347,11 @@ function SpanDetail() {
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(SpanIcon, { className: variantClass }) }),
         span.name
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 2 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
+        "Failed in ",
         toSigFigs(span.duration, 3),
         "ms"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
-        "Failed in ",
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
         toSigFigs(span.duration, 3),
         "ms"
       ] }) }),