@mastra/playground-ui 6.4.1-alpha.1 → 6.5.0-alpha.0

package/dist/index.cjs.js

@@ -3450,42 +3450,6 @@ const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
   img: ImageWithFallback
 });
 
-const ErrorAwareText = () => {
-  const part = react.useMessagePart();
-  const text = part.text || "";
-  try {
-    const trimmedText = text.trim();
-    if (trimmedText.startsWith("__ERROR__:")) {
-      const errorMessage = trimmedText.substring("__ERROR__:".length);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
-      ] });
-    } else if (trimmedText.startsWith("Error:")) {
-      const errorMessage = trimmedText.substring("Error:".length).trim();
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(MarkdownText, {});
-  } catch (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: String(text) })
-      ] })
-    ] });
-  }
-};
-
 const AgentIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -4278,6 +4242,91 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
   ) }) })
 ] });
 
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const variantClasses$3 = {
+  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
+  destructive: "bg-red-900/20 border-sm border-red-200 text-red-200"
+};
+const variantIcons = {
+  warning: lucideReact.TriangleAlert,
+  destructive: lucideReact.AlertCircle
+};
+const Alert$1 = ({ children, variant = "destructive" }) => {
+  const Ico = variantIcons[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(variantClasses$3[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+  ] }) });
+};
+const AlertTitle$1 = ({ children, as: As = "h5" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
+};
+const AlertDescription$1 = ({ children, as: As = "p" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
+};
+
+const ErrorAwareText = () => {
+  const part = react.useMessagePart();
+  const text = part.text || "";
+  const metadata = part.metadata || {};
+  if (metadata?.status === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Warning" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription$1, { as: "p", children: text })
+    ] });
+  }
+  if (metadata?.status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription$1, { as: "p", children: text })
+    ] });
+  }
+  try {
+    const trimmedText = text.trim();
+    if (trimmedText.startsWith("__ERROR__:")) {
+      const errorMessage = trimmedText.substring("__ERROR__:".length);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
+        ] })
+      ] });
+    } else if (trimmedText.startsWith("Error:")) {
+      const errorMessage = trimmedText.substring("Error:".length).trim();
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(MarkdownText, {});
+  } catch (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: String(text) })
+      ] })
+    ] });
+  }
+};
+
 function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
   const [isCopied, setIsCopied] = React.useState(false);
   const timeoutRef = React.useRef(null);
@@ -4343,12 +4392,12 @@ const SyntaxHighlighter$2 = ({
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-[9999]" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
 };
 
-const variantClasses$3 = {
+const variantClasses$2 = {
   default: "text-icon3",
   success: "text-accent1",
   error: "text-accent2",
@@ -4361,12 +4410,12 @@ const Badge$1 = ({ icon, variant = "default", className, children, ...props }) =
       className: clsx(
         "font-mono bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md shrink-0",
         icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses$3[variant],
+        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$3[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -4453,20 +4502,6 @@ DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
 const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
 const NetworkChoiceMetadata = ({ selectionReason, open, onOpenChange, input }) => {
   let inputSlot = null;
   if (input) {
@@ -4512,7 +4547,7 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
+const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
@@ -4521,16 +4556,18 @@ const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
   let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result });
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }),
       title: toolName,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason || "",
+          input: agentNetworkInput
         }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -5136,7 +5173,7 @@ const sizeClasses = {
   md: "h-button-md gap-md",
   lg: "h-button-lg gap-lg"
 };
-const variantClasses$2 = {
+const variantClasses$1 = {
   default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
   light: "bg-surface3 hover:bg-surface5 text-icon6"
 };
@@ -5147,7 +5184,7 @@ const Button$1 = ({ className, as, size = "md", variant = "default", ...props })
     {
       className: clsx(
         "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses$2[variant],
+        variantClasses$1[variant],
         sizeClasses[size],
         className,
         {
@@ -6106,20 +6143,20 @@ const alertVariants = cva(
     }
   }
 );
-const Alert$1 = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-Alert$1.displayName = "Alert";
-const AlertTitle$1 = React__namespace.forwardRef(
+const Alert = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+Alert.displayName = "Alert";
+const AlertTitle = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
 );
-AlertTitle$1.displayName = "AlertTitle";
-const AlertDescription$1 = React__namespace.forwardRef(
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
 );
-AlertDescription$1.displayName = "AlertDescription";
+AlertDescription.displayName = "AlertDescription";
 
-const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "destructive", children: [
+const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { children: error })
+  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: error })
 ] });
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button$2, { type: "submit", children });
@@ -7736,24 +7773,26 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classN
   }
 ) });
 
-const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, networkMetadata }) => {
+const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) => {
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
   });
   const run = runs?.runs.find((run2) => run2.runId === runId);
   const isLoading = isRunsLoading || !run;
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     BadgeWrapper,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }),
       title: workflow.name,
       initialCollapsed: false,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason ?? "",
+          input: agentNetworkInput
         }
       ),
       children: [
@@ -7805,18 +7844,20 @@ const LoadingBadge = () => {
   );
 };
 
-const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
+const AgentBadge = ({ agentId, messages = [], metadata }) => {
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }),
       title: agentId,
       initialCollapsed: false,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason ?? "",
+          input: agentNetworkInput
         }
       ),
       children: messages.map((message, index) => {
@@ -7835,6 +7876,9 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
             type: "tool-call",
             toolCallId: message.toolCallId,
             addResult: () => {
+            },
+            metadata: {
+              mode: "stream"
             }
           }
         ) }, index);
@@ -7846,30 +7890,25 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
-const ToolFallbackInner = ({ toolName, result, args }) => {
-  useWorkflowStream(args.__mastraMetadata?.workflowFullState);
+const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
+  useWorkflowStream(result);
   const { data: workflow, isLoading } = useWorkflow(toolName);
-  const isAgent = args.__mastraMetadata?.from === "AGENT";
+  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT";
   if (isAgent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AgentBadge,
-      {
-        agentId: toolName,
-        messages: args?.__mastraMetadata?.messages,
-        networkMetadata: args?.__mastraMetadata?.networkMetadata
-      }
-    );
+    const messages = result?.childMessages ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentBadge, { agentId: toolName, messages, metadata });
   }
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(LoadingBadge, {});
   if (workflow) {
+    const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
     return /* @__PURE__ */ jsxRuntime.jsx(
       WorkflowBadge,
       {
         workflowId: toolName,
         workflow,
-        isStreaming: args.__mastraMetadata?.isStreaming,
+        isStreaming,
         runId: result?.runId,
-        networkMetadata: args?.__mastraMetadata?.networkMetadata
+        metadata
       }
     );
   }
@@ -7879,8 +7918,8 @@ const ToolFallbackInner = ({ toolName, result, args }) => {
       toolName,
       args,
       result,
-      toolOutput: args?.__mastraMetadata?.toolOutput || [],
-      networkMetadata: args?.__mastraMetadata?.networkMetadata
+      toolOutput: result?.toolOutput || [],
+      metadata
     }
   );
 };
@@ -8445,32 +8484,23 @@ const ProviderLogo = ({ providerId, className = "", size = 20 }) => {
   );
 };
 
-const statusClasses = {
-  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200 rounded-lg px-4 py-2 flex gap-4 items-center",
-  default: ""
-};
-const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) => {
+const AssistantMessage = ({ hasModelList }) => {
   const data = react.useMessage();
   const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
   const modelMetadata = data.metadata?.custom?.modelMetadata;
-  const messageStatus = data.metadata?.custom?.status;
-  const statusClass = statusClasses[messageStatus || "default"];
   const showModelUsed = hasModelList && modelMetadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("text-icon6 text-ui-lg leading-ui-lg", statusClass), children: [
-      messageStatus === "warning" && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.MessagePrimitive.Parts,
-        {
-          components: {
-            Text: ErrorAwareText,
-            tools: { Fallback: ToolFallbackCustom || ToolFallback },
-            Reasoning
-          }
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.MessagePrimitive.Parts,
+      {
+        components: {
+          Text: ErrorAwareText,
+          tools: { Fallback: ToolFallback },
+          Reasoning
         }
-      )
-    ] }),
+      }
+    ) }),
     !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
       showModelUsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: modelMetadata.modelProvider, size: 14 }),
@@ -9067,11 +9097,11 @@ const useThreadInput = () => {
   return React.useContext(ThreadInputContext);
 };
 
-const Thread = ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }) => {
+const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback, hasModelList });
+    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, hasModelList });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
@@ -9447,645 +9477,72 @@ const useAdapters = (agentId) => {
   };
 };
 
-const handleNetworkMessageFromMemory = (content) => {
-  if (content.primitiveType === "workflow") {
-    return {
-      role: "assistant",
-      content: [
-        {
-          type: "tool-call",
-          toolCallId: content.finalResult.runId,
-          toolName: content.primitiveId,
-          result: { runId: content.finalResult.runId },
-          args: {
-            __mastraMetadata: {
-              from: "WORKFLOW",
-              networkMetadata: {
-                selectionReason: content?.selectionReason,
-                input: content?.input
-              }
-            }
-          }
-        }
-      ]
-    };
+const handleFinishReason = (finishReason) => {
+  switch (finishReason) {
+    case "tool-calls":
+      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
   }
-  if (content.primitiveType === "agent") {
-    const badgeMessages = [];
-    let toolCalls = {};
-    const messages = content.finalResult.messages.slice(1);
-    for (const message of messages) {
-      if (typeof message.content === "string") {
-        badgeMessages.push({
-          type: "text",
-          content: message.content
-        });
-        continue;
-      }
-      for (const part of message.content) {
-        if (part.type === "text") {
-          badgeMessages.push({
-            type: "text",
-            content: part.content
-          });
-        } else if (part.type === "tool-result") {
-          badgeMessages.push({
-            type: "tool",
-            toolName: part.toolName,
-            toolOutput: part.result,
-            // tool output
-            toolCallId: part.toolCallId,
-            args: toolCalls?.[part.toolCallId]?.args || {}
-          });
-        } else if (part.type === "tool-call") {
-          toolCalls[part.toolCallId] = part;
-        }
+};
+const convertToAIAttachments = async (attachments) => {
+  const promises = (attachments ?? []).filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
+    const isFileFromURL = attachment.name.startsWith("https://");
+    if (attachment.type === "document") {
+      if (attachment.contentType === "application/pdf") {
+        const pdfText = attachment.content?.[0]?.text || "";
+        return {
+          role: "user",
+          content: [
+            {
+              type: "file",
+              data: isFileFromURL ? attachment.name : `data:application/pdf;base64,${pdfText}`,
+              mimeType: attachment.contentType,
+              filename: attachment.name
+            }
+          ]
+        };
       }
+      return {
+        role: "user",
+        // @ts-expect-error - TODO: fix this type issue somehow
+        content: attachment.content[0]?.text || ""
+      };
     }
     return {
-      role: "assistant",
-      content: [
-        {
-          type: "tool-call",
-          toolCallId: content.finalResult.runId,
-          toolName: content.primitiveId,
-          result: { runId: content.finalResult.runId },
-          args: {
-            __mastraMetadata: {
-              from: "AGENT",
-              networkMetadata: {
-                selectionReason: content?.selectionReason || "",
-                input: content?.input || ""
-              },
-              messages: badgeMessages
-            }
-          }
-        }
-      ]
-    };
-  }
-  if (content.primitiveType === "tool") {
-    return {
-      role: "assistant",
+      role: "user",
       content: [
         {
-          type: "tool-call",
-          toolCallId: content.finalResult.toolCallId,
-          toolName: content.primitiveId,
-          result: content.finalResult.result,
-          args: {
-            ...content?.input,
-            __mastraMetadata: {
-              networkMetadata: {
-                selectionReason: content?.selectionReason || "",
-                input: content?.input || ""
-              }
-            }
-          }
+          type: "image",
+          image: isFileFromURL ? attachment.name : await fileToBase64(attachment.file),
+          mimeType: attachment.file.type
         }
       ]
     };
-  }
-  return { role: "assistant", content: [{ type: "text", text: "Unknown response" }] };
+  });
+  return Promise.all(promises);
 };
-
-const handleStreamChunk = ({ chunk, conversation }) => {
-  switch (chunk.type) {
-    case "tripwire": {
-      return [
-        ...conversation,
-        {
-          role: "assistant",
-          metadata: {
-            custom: {
-              status: "warning"
-            }
-          },
-          content: [
-            {
-              type: "text",
-              text: chunk.payload.tripwireReason
-            }
-          ]
-        }
-      ];
-    }
-    case "start": {
-      const newMessage = {
-        role: "assistant",
-        content: []
-      };
-      return [...conversation, newMessage];
-    }
-    case "text-start":
-    case "text-delta": {
-      const lastMessage = conversation[conversation.length - 1];
-      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: "" }]
-          }
-        ];
-      }
-      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 initializeMessageState = (initialMessages) => {
+  const convertedMessages = initialMessages?.map((message) => {
+    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 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(" ")
+        };
       }
-      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-")) {
-        return handleWorkflowChunk({
-          workflowChunk: chunk.payload.output,
-          conversation,
-          entityName: chunk.payload.toolName
-        });
-      }
-      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 === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-            const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
-            return {
-              ...part,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  toolOutput: [...existingToolOutput, chunk?.payload?.output]
-                }
-              }
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      return [...conversation];
-    }
-    case "tool-call": {
-      const lastMessage = conversation[conversation.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,
-                __mastraMetadata: {
-                  ...chunk.payload.args?.__mastraMetadata,
-                  isStreaming: true
-                }
-              }
-            }
-          ] : [
-            ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
-            {
-              type: "tool-call",
-              toolCallId: chunk.payload.toolCallId,
-              toolName: chunk.payload.toolName,
-              args: {
-                ...chunk.payload.args,
-                __mastraMetadata: {
-                  ...chunk.payload.args?.__mastraMetadata,
-                  isStreaming: true
-                }
-              }
-            }
-          ]
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      const newMessage = {
-        role: "assistant",
-        content: [
-          {
-            type: "tool-call",
-            toolCallId: chunk.payload.toolCallId,
-            toolName: chunk.payload.toolName,
-            args: {
-              ...chunk.payload.args,
-              __mastraMetadata: {
-                ...chunk.payload.args?.__mastraMetadata,
-                isStreaming: true
-              }
-            }
-          }
-        ]
-      };
-      return [...conversation, newMessage];
-    }
-    case "tool-result": {
-      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 === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-            return {
-              ...part,
-              result: chunk.payload.result
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      return [...conversation];
-    }
-    case "error": {
-      if (typeof chunk.payload.error === "string") {
-        const errorMessage = {
-          role: "assistant",
-          content: `Error: ${chunk.payload.error}`
-        };
-        return [...conversation, errorMessage];
-      }
-      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": {
-      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 === "reasoning") {
-            return {
-              ...part,
-              text: part.text + chunk.payload.text
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      const newMessage = {
-        role: "assistant",
-        content: [
-          {
-            type: "reasoning",
-            text: chunk.payload.text
-          }
-        ]
-      };
-      return [...conversation, newMessage];
-    }
-    default:
-      return [...conversation];
-  }
-};
-const handleFinishReason$1 = (finishReason) => {
-  switch (finishReason) {
-    case "tool-calls":
-      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
-  }
-};
-const handleWorkflowChunk = ({
-  workflowChunk,
-  conversation,
-  entityName
-}) => {
-  const lastMessage = conversation[conversation.length - 1];
-  const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-  const newMessage = {
-    ...lastMessage,
-    content: contentArray.map((part) => {
-      if (part.type === "tool-call") {
-        return {
-          ...part,
-          toolName: part?.entityName || entityName,
-          args: {
-            ...part.args,
-            __mastraMetadata: {
-              ...part.args?.__mastraMetadata,
-              workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
-                part.args?.__mastraMetadata?.workflowFullState || {},
-                workflowChunk
-              ),
-              isStreaming: true
-            }
-          }
-        };
-      }
-      return part;
-    })
-  };
-  return [...conversation.slice(0, -1), newMessage];
-};
-const handleAgentChunk = ({
-  agentChunk,
-  conversation,
-  entityName
-}) => {
-  switch (agentChunk.type) {
-    case "tool-result": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const next = {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: [
-                    ...messages.slice(0, -1),
-                    {
-                      ...messages[messages.length - 1],
-                      type: "tool",
-                      toolName: agentChunk.payload.toolName,
-                      args: agentChunk.payload.args,
-                      toolOutput: agentChunk.payload.result
-                    }
-                  ]
-                }
-              }
-            };
-            return next;
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "tool-call": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const next = {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: [
-                    ...messages,
-                    {
-                      type: "tool",
-                      toolCallId: agentChunk.payload.toolCallId,
-                      toolName: agentChunk.payload.toolName,
-                      args: {
-                        ...agentChunk.payload.args,
-                        __mastraMetadata: {
-                          ...agentChunk.payload.args?.__mastraMetadata,
-                          isStreaming: true
-                        }
-                      }
-                    }
-                  ]
-                }
-              }
-            };
-            return next;
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "text-delta": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const lastMastraMessage = messages[messages.length - 1];
-            const nextMessages = lastMastraMessage?.type === "text" ? [
-              ...messages.slice(0, -1),
-              { type: "text", content: (lastMastraMessage?.content || "") + agentChunk.payload.text }
-            ] : [...messages, { type: "text", content: agentChunk.payload.text }];
-            return {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: nextMessages
-                }
-              }
-            };
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "tool-output": {
-      if (!agentChunk.payload.output.type.startsWith("workflow-")) return [...conversation];
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const lastMastraMessage = messages[messages.length - 1];
-            const nextMessages = lastMastraMessage?.type === "tool" ? [
-              ...messages.slice(0, -1),
-              {
-                ...lastMastraMessage,
-                args: {
-                  ...agentChunk.payload.args,
-                  __mastraMetadata: {
-                    ...agentChunk.payload.args?.__mastraMetadata,
-                    workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
-                      lastMastraMessage.args?.__mastraMetadata?.workflowFullState || {},
-                      agentChunk.payload.output
-                    ),
-                    isStreaming: true
-                  }
-                }
-              }
-            ] : messages;
-            return {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: nextMessages
-                }
-              }
-            };
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    default:
-    case "agent-execution-end":
-      return [...conversation];
-  }
-};
-const createRootToolAssistantMessage = ({
-  chunk,
-  entityName,
-  conversation,
-  runId,
-  from,
-  networkMetadata
-}) => {
-  if (!entityName || !runId) return [...conversation];
-  const newMessage = {
-    role: "assistant",
-    content: [
-      {
-        type: "tool-call",
-        toolCallId: runId,
-        toolName: entityName,
-        args: {
-          ...chunk?.payload?.args,
-          __mastraMetadata: {
-            from,
-            networkMetadata,
-            ...chunk.payload.args?.__mastraMetadata,
-            isStreaming: true
-          }
-        }
-      }
-    ]
-  };
-  return [...conversation, newMessage];
-};
-
-const handleFinishReason = (finishReason) => {
-  switch (finishReason) {
-    case "tool-calls":
-      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
-  }
-};
-const convertToAIAttachments = async (attachments) => {
-  const promises = (attachments ?? []).filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
-    const isFileFromURL = attachment.name.startsWith("https://");
-    if (attachment.type === "document") {
-      if (attachment.contentType === "application/pdf") {
-        const pdfText = attachment.content?.[0]?.text || "";
-        return {
-          role: "user",
-          content: [
-            {
-              type: "file",
-              data: isFileFromURL ? attachment.name : `data:application/pdf;base64,${pdfText}`,
-              mimeType: attachment.contentType,
-              filename: attachment.name
-            }
-          ]
-        };
-      }
-      return {
-        role: "user",
-        // @ts-expect-error - TODO: fix this type issue somehow
-        content: attachment.content[0]?.text || ""
-      };
-    }
-    return {
-      role: "user",
-      content: [
-        {
-          type: "image",
-          image: isFileFromURL ? attachment.name : await fileToBase64(attachment.file),
-          mimeType: attachment.file.type
-        }
-      ]
-    };
-  });
-  return Promise.all(promises);
-};
-const initializeMessageState = (initialMessages) => {
-  const convertedMessages = initialMessages?.map((message) => {
-    let content;
-    try {
-      content = JSON.parse(message.content);
-      if (content.isNetwork) {
-        return handleNetworkMessageFromMemory(content);
-      }
-    } catch (e) {
-    }
-    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 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 === "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") {
@@ -10113,6 +9570,7 @@ function MastraRuntimeProvider({
   children,
   agentId,
   initialMessages,
+  initialLegacyMessages,
   memory,
   threadId,
   refreshThreadList,
@@ -10120,9 +9578,10 @@ function MastraRuntimeProvider({
   runtimeContext,
   modelVersion
 }) {
-  const initializeMessages = () => memory ? initializeMessageState(initialMessages || []) : [];
   const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
-  const [legacyMessages, setLegacyMessages] = React.useState(initializeMessages());
+  const [legacyMessages, setLegacyMessages] = React.useState(
+    () => memory ? initializeMessageState(initialLegacyMessages || []) : []
+  );
   const {
     setMessages,
     messages,
@@ -10133,7 +9592,7 @@ function MastraRuntimeProvider({
     isRunning: isRunningStream
   } = react$3.useChat({
     agentId,
-    initializeMessages
+    initializeMessages: () => initialMessages || []
   });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
@@ -10166,7 +9625,8 @@ function MastraRuntimeProvider({
     topP,
     maxTokens,
     instructions,
-    providerOptions
+    providerOptions,
+    maxSteps
   };
   const baseClient = react$3.useMastraClient();
   const isVNext = modelVersion === "v2";
@@ -10175,7 +9635,7 @@ function MastraRuntimeProvider({
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
     if (isVNext) {
-      setMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
+      setMessages((s) => [...s, { role: "user", parts: [{ type: "text", text: input }] }]);
     } else {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
@@ -10189,7 +9649,6 @@ function MastraRuntimeProvider({
     try {
       if (isVNext) {
         if (chatWithNetwork) {
-          let currentEntityId;
           await network({
             coreUserMessages: [
               {
@@ -10202,73 +9661,9 @@ function MastraRuntimeProvider({
             threadId,
             modelSettings: modelSettingsArgs,
             signal: controller.signal,
-            onNetworkChunk: (chunk, conversation) => {
-              if (chunk.type.startsWith("agent-execution-event-")) {
-                const agentChunk = chunk.payload;
-                if (!currentEntityId) return conversation;
-                return handleAgentChunk({ agentChunk, conversation, entityName: currentEntityId });
-              } else if (chunk.type === "tool-execution-start") {
-                const { args: argsData } = chunk.payload;
-                const nestedArgs = argsData.args || {};
-                const mastraMetadata = argsData.__mastraMetadata || {};
-                const selectionReason = argsData.selectionReason || "";
-                return handleStreamChunk({
-                  chunk: {
-                    ...chunk,
-                    type: "tool-call",
-                    payload: {
-                      ...chunk.payload,
-                      toolCallId: argsData.toolCallId || "unknown",
-                      toolName: argsData.toolName || "unknown",
-                      args: {
-                        ...nestedArgs,
-                        __mastraMetadata: {
-                          ...mastraMetadata,
-                          networkMetadata: {
-                            selectionReason,
-                            input: nestedArgs
-                          }
-                        }
-                      }
-                    }
-                  },
-                  conversation
-                });
-              } else if (chunk.type === "tool-execution-end") {
-                const next = handleStreamChunk({
-                  chunk: { ...chunk, type: "tool-result" },
-                  conversation
-                });
-                if (chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
-                  refreshWorkingMemory?.();
-                }
-                return next;
-              } else if (chunk.type.startsWith("workflow-execution-event-")) {
-                const workflowChunk = chunk.payload;
-                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?.primitiveId;
-                const runId = chunk.payload.runId;
-                if (!currentEntityId || !runId) return conversation;
-                return createRootToolAssistantMessage({
-                  entityName: currentEntityId,
-                  conversation,
-                  runId,
-                  chunk,
-                  from: chunk.type === "agent-execution-start" ? "AGENT" : "WORKFLOW",
-                  networkMetadata: {
-                    selectionReason: chunk?.payload?.args?.selectionReason || "",
-                    input: chunk?.payload?.args?.prompt
-                  }
-                });
-              } else if (chunk.type === "network-execution-event-step-finish") {
-                return [
-                  ...conversation,
-                  { role: "assistant", content: [{ type: "text", text: chunk?.payload?.result || "" }] }
-                ];
-              } else {
-                return handleStreamChunk({ chunk, conversation });
+            onNetworkChunk: async (chunk) => {
+              if (chunk.type === "tool-execution-end" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
+                refreshWorkingMemory?.();
               }
             }
           });
@@ -10285,18 +9680,7 @@ function MastraRuntimeProvider({
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              signal: controller.signal,
-              onFinish: ({ messages: messages2, tripwireReason }) => {
-                const next = messages2.length > 0 ? messages2.map((message2) => react$3.toAssistantUIMessage(message2)) : [];
-                if (tripwireReason) {
-                  next.push({
-                    role: "assistant",
-                    content: [{ type: "text", text: tripwireReason }],
-                    metadata: { custom: { status: "warning" } }
-                  });
-                }
-                return next;
-              }
+              signal: controller.signal
             });
             return;
           } else {
@@ -10311,12 +9695,10 @@ function MastraRuntimeProvider({
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              onChunk: (chunk, conversation) => {
-                const next = handleStreamChunk({ chunk, conversation });
+              onChunk: async (chunk) => {
                 if (chunk.type === "tool-result" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
                   refreshWorkingMemory?.();
                 }
-                return next;
               },
               signal: controller.signal
             });
@@ -10611,7 +9993,7 @@ function MastraRuntimeProvider({
       if (isVNext) {
         setMessages((currentConversation) => [
           ...currentConversation,
-          { role: "assistant", content: [{ type: "text", text: `${error}` }] }
+          { role: "assistant", parts: [{ type: "text", text: `${error}` }] }
         ]);
       } else {
         setLegacyMessages((currentConversation) => [
@@ -10632,20 +10014,17 @@ function MastraRuntimeProvider({
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
+  const vnextmessages = messages.map(react$3.toAssistantUIMessage);
   const runtime = react.useExternalStoreRuntime({
     isRunning: isLegacyRunning || isRunningStream,
-    messages: isVNext ? messages : legacyMessages,
+    messages: isVNext ? vnextmessages : legacyMessages,
     convertMessage: (x) => x,
     onNew,
     onCancel,
     adapters: isReady ? adapters : void 0
   });
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
-    " ",
-    children,
-    " "
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AssistantRuntimeProvider, { runtime, children });
 }
 
 const defaultSettings = {
@@ -10713,6 +10092,7 @@ const AgentChat = ({
   agentName,
   threadId,
   initialMessages,
+  initialLegacyMessages,
   memory,
   refreshThreadList,
   modelVersion,
@@ -10728,6 +10108,7 @@ const AgentChat = ({
       modelVersion,
       threadId,
       initialMessages,
+      initialLegacyMessages,
       memory,
       refreshThreadList,
       settings,
@@ -11486,13 +10867,35 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
   ] });
 };
 
+const resolveInstructionPart = (part) => {
+  if (typeof part === "string") {
+    return part.trim();
+  }
+  return part.text?.trim() || "";
+};
+const extractPrompt = (instructions) => {
+  if (typeof instructions === "string") {
+    return instructions.trim();
+  }
+  if (typeof instructions === "object" && "content" in instructions) {
+    if (Array.isArray(instructions.content)) {
+      return instructions.content.map(resolveInstructionPart).join("\n\n").trim();
+    }
+    return instructions.content.trim();
+  }
+  if (Array.isArray(instructions)) {
+    return instructions.map(extractPrompt).join("\n\n").trim();
+  }
+  return "";
+};
+
 const NameCell$3 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
     {
       name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.agentLink(row.original.id), children: row.original.name }),
-      description: row.original.instructions
+      description: extractPrompt(row.original.instructions)
     }
   );
 };
@@ -12211,36 +11614,8 @@ function RelationWrapper({ description, children }) {
   ] }) : children;
 }
 
-function EntryListTextCell({ children, isLoading }) {
-  const [randomWidth, setRandomWidth] = React.useState(void 0);
-  React.useEffect(() => {
-    setRandomWidth(Math.floor(Math.random() * (90 - 50 + 1)) + 50);
-  }, []);
-  if (!randomWidth) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
-      style: { width: `${randomWidth}%` }
-    }
-  ) : children });
-}
-function EntryListStatusCell({ status }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
-    status ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
-          "bg-green-600": status === "success",
-          "bg-red-700": status === "failed"
-        })
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
-      "Status: ",
-      status ? status : "not provided"
-    ] })
-  ] });
+function EntryListRoot({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid mb-[3rem]", children });
 }
 
 function getColumnTemplate(columns) {
@@ -12252,33 +11627,53 @@ function getColumnTemplate(columns) {
   }).join(" ");
 }
 
-function EntryListItem({
-  item,
-  selectedItemId,
-  onClick,
-  children,
-  columns,
-  isLoading
-}) {
-  const isSelected = selectedItemId === item.id;
+function EntryListHeader({ columns }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg px-[1.5rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("grid gap-[1.5rem] text-left uppercase py-[.75rem] text-icon3 text-[0.75rem]"),
+      style: { gridTemplateColumns: getColumnTemplate(columns) },
+      children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
+    }
+  ) });
+}
+
+function EntryListEntries({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid bg-surface3 overflow-y-auto", children });
+}
+
+function EntryListTrim({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg border border-border1 overflow-clip"), children });
+}
+
+function EntryListEntry({ entry, isSelected, onClick, children, columns }) {
   const handleClick = () => {
-    return onClick && onClick(item?.id);
+    onClick?.(entry?.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
-      className: cn("border-b text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]", {
-        "bg-surface5": isSelected
-      }),
+      className: cn(
+        "border-t text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]",
+        "[&:last-child>button]:rounded-b-lg",
+        {
+          "bg-surface5": isSelected
+        }
+      ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleClick,
-          className: cn("grid w-full px-[1.5rem] gap-[2rem] text-left items-center min-h-[3rem]", {
-            "hover:bg-surface5": !isLoading
-          }),
+          className: cn(
+            "grid w-full px-[1.5rem] gap-[1.5rem] text-left items-center min-h-[3rem]",
+            "focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_1px_rgba(24,251,111,.75)]",
+            {
+              // hover effect only not for skeleton and selected
+              "hover:bg-surface4": entry && !isSelected
+            }
+          ),
           style: { gridTemplateColumns: getColumnTemplate(columns) },
-          disabled: isLoading,
+          disabled: !entry,
           children
         }
       )
@@ -12286,152 +11681,155 @@ function EntryListItem({
   );
 }
 
-function EntryList({
-  items: dataItems,
-  selectedItemId,
-  onItemClick,
+function EntryListMessage({ children, message, className, type }) {
+  if (!children && !message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid border-t border-border1", className), children: message ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "p",
+    {
+      className: cn(
+        "text-icon3 text-[0.875rem] text-center grid p-[2rem] justify-center justify-items-center gap-[.5rem]",
+        "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-75",
+        {
+          "[&>svg]:text-red-500": type === "error"
+        }
+      ),
+      children: [
+        type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+        " ",
+        message
+      ]
+    }
+  ) : children });
+}
+
+function EntryListNextPageLoading({
   isLoading,
-  isLoadingNextPage,
-  total,
-  page,
   hasMore,
-  onNextPage,
-  onPrevPage,
-  perPage,
-  columns,
-  searchTerm,
   setEndOfListElement,
-  errorMsg
+  loadingText = "Loading more data...",
+  noMoreDataText = "No more data to load"
 }) {
-  const loadingItems = Array.from({ length: 3 }).map((_, index) => {
-    return {
-      id: `loading-${index + 1}`,
-      ...(columns || []).reduce(
-        (acc, col) => {
-          acc[col.name] = `...`;
-          return acc;
-        },
-        {}
-      )
-    };
-  });
-  const items = isLoading ? loadingItems : dataItems;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid mb-[3rem]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg border border-border1  px-[1.5rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setEndOfListElement, className: "text-[0.875rem] text-icon3 opacity-50 flex mt-[2rem] justify-center", children: [
+    isLoading && loadingText,
+    !hasMore && !isLoading && noMoreDataText
+  ] });
+}
+
+function EntryListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex pt-[1.5rem] items-center justify-center text-icon3 text-[0.875rem] gap-[2rem] "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
-      {
-        className: cn("grid gap-[2rem] text-left uppercase py-[.75rem] text-icon3 text-[0.75rem]"),
-        style: { gridTemplateColumns: getColumnTemplate(columns) },
-        children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
-      }
-    ) }),
-    errorMsg && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "p",
       {
         className: cn(
-          "text-[0.875rem] text-center items-center flex justify-center p-[2.5rem] gap-[1rem] text-icon3",
-          "[&>svg]:w-[1.5em]",
-          "[&>svg]:h-[1.5em]",
-          "[&>svg]:text-red-500"
+          "flex gap-[1rem]",
+          "[&>button]:flex [&>button]:items-center [&>button]:gap-[0.5rem] [&>button]:text-icon4 [&>button:hover]:text-icon5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-[0.25rem] [&>button]:px-[0.5rem] [&>button]:rounded-md",
+          "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
-          " ",
-          errorMsg || "Something went wrong while fetching the data."
+          typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
+            "Previous"
+          ] }),
+          hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, children: [
+            "Next",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+          ] })
         ]
       }
-    ) }),
-    !isLoading && !errorMsg && items?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.875rem] text-center h-[3.5rem] items-center flex justify-center", children: searchTerm ? `No results found for "${searchTerm}"` : "No entries found" }) }),
-    !errorMsg && items?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none overflow-y-auto", children: items.map((item) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          EntryListItem,
-          {
-            item,
-            selectedItemId,
-            onClick: isLoading ? void 0 : onItemClick,
-            columns,
-            isLoading,
-            children: (columns || []).map((col, index) => {
-              const isValidReactElement = React.isValidElement(item?.[col.name]);
-              const key = `${index}-${item.id}`;
-              return isValidReactElement ? /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: item?.[col.name] }, key) : /* @__PURE__ */ jsxRuntime.jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, key);
-            })
-          },
-          item.id
-        );
-      }) }),
-      setEndOfListElement && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: setEndOfListElement,
-          className: "text-[0.875rem] text-icon3 opacity-50 flex mt-[2rem] justify-center",
-          children: [
-            isLoadingNextPage && "Loading...",
-            !hasMore && !isLoadingNextPage && !isLoading && "No more data to load"
-          ]
-        }
-      ),
-      typeof page === "number" && typeof perPage === "number" && typeof total === "number" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex pt-[1.5rem] items-center justify-center text-icon3 text-[0.875rem] gap-[2rem]"), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Page ",
-          page ? page + 1 : "1"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex gap-[1rem]",
-              "[&>button]:flex [&>button]:items-center [&>button]:gap-[0.5rem] [&>button]:text-icon4 [&>button:hover]:text-icon5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-[0.25rem] [&>button]:px-[0.5rem] [&>button]:rounded-md",
-              " [&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
-            ),
-            children: [
-              typeof page === "number" && page > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, disabled: page === 0, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
-                "Previous"
-              ] }),
-              hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, disabled: !hasMore, children: [
-                "Next",
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-              ] })
-            ]
-          }
-        )
-      ] })
+    )
+  ] });
+}
+
+function EntryListEntryTextCol({ children, isLoading }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none" }) : children });
+}
+function EntryListEntryStatusCol({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
+    status ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
+          "bg-green-600": status === "success",
+          "bg-red-700": status === "failed"
+        })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
+      "Status: ",
+      status ? status : "not provided"
     ] })
   ] });
 }
 
-function EntryListToolbar({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("flex justify-between bg-surface4 z-[1] mt-[1rem] mb-[1rem] rounded-lg px-[1.5rem] ", className),
-      children
-    }
-  );
+const EntryList = Object.assign(EntryListRoot, {
+  Header: EntryListHeader,
+  Trim: EntryListTrim,
+  Entries: EntryListEntries,
+  Entry: EntryListEntry,
+  Message: EntryListMessage,
+  NextPageLoading: EntryListNextPageLoading,
+  Pagination: EntryListPagination,
+  EntryText: EntryListEntryTextCol,
+  EntryStatus: EntryListEntryStatusCol
+});
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+function EntryListEntriesSkeleton({ columns, numberOfRows = 3 }) {
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths.length;
+    return widths[index];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(EntryListEntries, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntryListEntry, { columns, children: (columns || []).map((col, colIdx) => {
+    const key = `${col.name}-${colIdx}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
+        style: { width: `${getPseudoRandomWidth(rowIdx, colIdx)}` }
+      },
+      key
+    );
+  }) }, rowIdx)) });
 }
 
-function EntryListPageHeader({ title, description, icon, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "grid z-[1] top-0 gap-y-[0.5rem] text-icon4 bg-surface2 py-[3rem]",
-        "3xl:h-full 3xl:content-start 3xl:grid-rows-[auto_1fr] h-full 3xl:overflow-y-auto"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1rem] w", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[.75em] items-center", "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:text-icon4"), children: [
-            icon,
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-icon6 text-[1.25rem]", children: title })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[0.875rem]", children: description })
-        ] }),
-        children
-      ]
-    }
-  );
+function EntryListSkeleton({ columns, numberOfRows }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(EntryList, { children: /* @__PURE__ */ jsxRuntime.jsxs(EntryListTrim, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntryListHeader, { columns }),
+    /* @__PURE__ */ jsxRuntime.jsx(EntryListEntriesSkeleton, { columns, numberOfRows })
+  ] }) });
+}
+
+function getToNextEntryFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsNextItem = currentIndex < entries.length - 1;
+  if (thereIsNextItem) {
+    return () => {
+      const nextItem = entries[currentIndex + 1];
+      update(nextItem.id);
+    };
+  }
+  return void 0;
+}
+function getToPreviousEntryFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsPreviousItem = currentIndex > 0;
+  if (thereIsPreviousItem) {
+    return () => {
+      const previousItem = entries[currentIndex - 1];
+      update(previousItem.id);
+    };
+  }
+  return void 0;
 }
 
 function SideDialog({
@@ -12723,26 +12121,36 @@ function EntityMainHeader({
 }
 
 function PageHeader({ title, description, icon, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "header",
-    {
-      className: cn(
-        "grid gap-[.5rem] pt-[2rem] pb-[2rem]",
-        "[&>h1]:text-icon6 [&>h1]:text-[1.25rem] [&>h1]:font-normal [&>h1]:flex [&>h1]:items-center [&>h1]:gap-[0.5rem]",
-        "[&_svg]:w-[1.4rem] [&_svg]:h-[1.4rem] [&_svg]:text-icon3",
-        "[&>p]:text-icon4 [&>p]:text-[0.875rem] [&>p]:m-0",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h1", { children: [
+  const titleIsLoading = title === "loading";
+  const descriptionIsLoading = description === "loading";
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("grid gap-[.5rem] pt-[2rem] pb-[2rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h1",
+      {
+        className: cn(
+          "text-icon6 text-[1.25rem] font-normal flex items-center gap-[0.5rem]",
+          "[&>svg]:w-[1.4rem] [&>svg]:h-[1.4rem] [&>svg]:text-icon3",
+          {
+            "bg-surface4 w-[15rem] max-w-[50%] rounded-md animate-pulse": titleIsLoading
+          }
+        ),
+        children: titleIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon && icon,
           " ",
           title
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
-      ]
-    }
-  );
+        ] })
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn("text-icon4 text-[0.875rem] m-0", {
+          "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": descriptionIsLoading
+        }),
+        children: descriptionIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
+      }
+    )
+  ] });
 }
 
 function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
@@ -13106,6 +12514,77 @@ function getShortId(id) {
   return id.slice(0, 8);
 }
 
+const scoresListColumns = [
+  { name: "date", label: "Date", size: "4.5rem" },
+  { name: "time", label: "Time", size: "6.5rem" },
+  { name: "input", label: "Input", size: "1fr" },
+  { name: "entityId", label: "Entity", size: "10rem" },
+  { name: "score", label: "Score", size: "3rem" }
+];
+function ScoresList({
+  scores,
+  pagination,
+  onScoreClick,
+  onPageChange,
+  errorMsg,
+  selectedScoreId
+}) {
+  if (!scores) {
+    return null;
+  }
+  const scoresHasMore = pagination?.hasMore;
+  const handleNextPage = () => {
+    if (scoresHasMore) {
+      onPageChange?.(pagination.page + 1);
+    }
+  };
+  const handlePrevPage = () => {
+    if (pagination?.page && pagination.page > 0) {
+      onPageChange?.(pagination.page - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: scoresListColumns }),
+      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scores.map((score) => {
+        const createdAtDate = new Date(score.createdAt);
+        const isTodayDate = dateFns.isToday(createdAtDate);
+        const entry = {
+          id: score.id,
+          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+          input: JSON.stringify(score?.input),
+          entityId: score.entityId,
+          score: score.score
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedScoreId === score.id,
+            columns: scoresListColumns,
+            onClick: onScoreClick,
+            children: scoresListColumns.map((col, index) => {
+              const key = `${index}-${score.id}`;
+              return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EntryList.Pagination,
+      {
+        currentPage: pagination?.page || 0,
+        onNextPage: handleNextPage,
+        onPrevPage: handlePrevPage,
+        hasMore: scoresHasMore
+      }
+    )
+  ] });
+}
+
 function ScoreDialog({
   scorer,
   score,
@@ -13370,34 +12849,14 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classNam
   }
 ) });
 
-const variantClasses$1 = {
-  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
-  destructive: "bg-red-900/20 border-sm border-red-200 text-red-200"
-};
-const variantIcons = {
-  warning: lucideReact.TriangleAlert,
-  destructive: lucideReact.AlertCircle
-};
-const Alert = ({ children, variant = "destructive" }) => {
-  const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-  ] }) });
-};
-const AlertTitle = ({ children, as: As = "h5" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
-};
-const AlertDescription = ({ children, as: As = "p" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
-};
-
 const AgentMetadataModelSwitcher = ({
   defaultProvider,
   defaultModel,
   updateModel,
   apiUrl = "/api/agents/providers"
 }) => {
+  const [originalProvider] = React.useState(defaultProvider);
+  const [originalModel] = React.useState(defaultModel);
   const [selectedModel, setSelectedModel] = React.useState(defaultModel);
   const [showModelSuggestions, setShowModelSuggestions] = React.useState(false);
   const [selectedProvider, setSelectedProvider] = React.useState(defaultProvider || "");
@@ -13528,15 +12987,15 @@ const AgentMetadataModelSwitcher = ({
       if (modelInputRef.current === document.activeElement || providerInputRef.current === document.activeElement || showProviderSuggestions || showModelSuggestions) {
         return;
       }
-      const providerChanged = currentModelProvider && currentModelProvider !== defaultProvider;
+      const providerChanged = currentModelProvider && currentModelProvider !== originalProvider;
       const modelEmpty = !selectedModel || selectedModel === "";
       if (providerChanged && modelEmpty) {
-        setSelectedProvider(cleanProviderId(defaultProvider));
-        setSelectedModel(defaultModel);
-        if (defaultProvider && defaultModel) {
+        setSelectedProvider(cleanProviderId(originalProvider));
+        setSelectedModel(originalModel);
+        if (originalProvider && originalModel) {
           updateModel({
-            provider: defaultProvider,
-            modelId: defaultModel
+            provider: originalProvider,
+            modelId: originalModel
           }).catch((error) => {
             console.error("Failed to reset model:", error);
           });
@@ -13551,8 +13010,8 @@ const AgentMetadataModelSwitcher = ({
     registerResetFn,
     currentModelProvider,
     selectedModel,
-    defaultProvider,
-    defaultModel,
+    originalProvider,
+    originalModel,
     updateModel,
     showProviderSuggestions,
     showModelSuggestions
@@ -13563,6 +13022,27 @@ const AgentMetadataModelSwitcher = ({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Loading providers..." })
     ] });
   }
+  const handleReset = async () => {
+    setSelectedProvider(cleanProviderId(originalProvider));
+    setSelectedModel(originalModel);
+    setProviderSearch("");
+    setModelSearch("");
+    setIsSearchingProvider(false);
+    setIsSearchingModel(false);
+    setShowProviderSuggestions(false);
+    setShowModelSuggestions(false);
+    try {
+      setLoading(true);
+      await updateModel({
+        provider: originalProvider,
+        modelId: originalModel
+      });
+    } catch (error) {
+      console.error("Failed to reset model:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col xl:flex-row items-stretch xl:items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13905,14 +13385,26 @@ const AgentMetadataModelSwitcher = ({
             )
           ]
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button$1,
+        {
+          variant: "light",
+          size: "md",
+          onClick: handleReset,
+          disabled: loading,
+          className: "flex items-center gap-1.5 text-xs whitespace-nowrap !border-0",
+          title: "Reset to original model",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-3.5 h-3.5" })
+        }
       )
     ] }),
     (() => {
       const currentProvider = providers.find((p) => p.id === currentModelProvider);
       if (currentProvider && !currentProvider.connected) {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Provider not connected" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Provider not connected" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription$1, { as: "p", children: [
             "Set the",
             " ",
             /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/50 rounded", children: Array.isArray(currentProvider.envVar) ? currentProvider.envVar.join(", ") : currentProvider.envVar }),
@@ -14086,7 +13578,7 @@ const AgentMetadata = ({
       {
         title: "Model",
         hint: modelVersion === "v2" ? void 0 : {
-          link: "https://mastra.ai/en/reference/agents/migration-guide",
+          link: "https://mastra.ai/guides/migrations/vnext-to-standard-apis",
           title: "You are using a legacy v1 model",
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
         },
@@ -14109,9 +13601,9 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/agent-memory",
           title: "Agent Memory documentation"
         },
-        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Memory not enabled" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Memory not enabled" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription$1, { as: "p", children: [
             "Thread messages will not be stored. To activate memory, see the",
             " ",
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -17111,6 +16603,76 @@ function TracesTools({
   ] });
 }
 
+const tracesListColumns = [
+  { name: "shortId", label: "ID", size: "6rem" },
+  { name: "date", label: "Date", size: "4.5rem" },
+  { name: "time", label: "Time", size: "6.5rem" },
+  { name: "name", label: "Name", size: "1fr" },
+  { name: "entityId", label: "Entity", size: "10rem" },
+  { name: "status", label: "Status", size: "3rem" }
+];
+function TracesList({
+  traces,
+  selectedTraceId,
+  onTraceClick,
+  errorMsg,
+  setEndOfListElement,
+  filtersApplied,
+  isFetchingNextPage,
+  hasNextPage
+}) {
+  if (!traces) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: tracesListColumns }),
+      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: traces.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: traces.map((trace) => {
+        const createdAtDate = new Date(trace.createdAt);
+        const isTodayDate = dateFns.isToday(createdAtDate);
+        const entry = {
+          id: trace.traceId,
+          shortId: getShortId(trace?.traceId) || "n/a",
+          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+          name: trace?.name,
+          entityId: trace?.attributes?.agentId || trace?.attributes?.workflowId,
+          status: trace?.attributes?.status
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedTraceId === trace.traceId,
+            columns: tracesListColumns,
+            onClick: onTraceClick,
+            children: tracesListColumns.map((col, index) => {
+              const key = `${index}-${trace.traceId}`;
+              return col.name === "status" ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryStatus, { status: entry?.[col.name] }, key) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        EntryList.Message,
+        {
+          message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EntryList.NextPageLoading,
+      {
+        setEndOfListElement,
+        loadingText: "Loading more traces...",
+        noMoreDataText: "All traces loaded",
+        isLoading: isFetchingNextPage,
+        hasMore: hasNextPage
+      }
+    )
+  ] });
+}
+
 function MainContentLayout({
   children,
   className,
@@ -17880,10 +17442,10 @@ exports.AgentSettingsContext = AgentSettingsContext;
 exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentsTable = AgentsTable;
 exports.AiIcon = AiIcon;
-exports.Alert = Alert;
-exports.AlertDescription = AlertDescription;
+exports.Alert = Alert$1;
+exports.AlertDescription = AlertDescription$1;
 exports.AlertDialog = AlertDialog;
-exports.AlertTitle = AlertTitle;
+exports.AlertTitle = AlertTitle$1;
 exports.ApiIcon = ApiIcon;
 exports.Badge = Badge$1;
 exports.BranchIcon = BranchIcon;
@@ -17921,11 +17483,7 @@ exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;
 exports.EntryList = EntryList;
-exports.EntryListItem = EntryListItem;
-exports.EntryListPageHeader = EntryListPageHeader;
-exports.EntryListStatusCell = EntryListStatusCell;
-exports.EntryListTextCell = EntryListTextCell;
-exports.EntryListToolbar = EntryListToolbar;
+exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
 exports.EvaluatorCoinIcon = EvaluatorCoinIcon;
 exports.FiltersIcon = FiltersIcon;
@@ -17972,6 +17530,7 @@ exports.RuntimeContextWrapper = RuntimeContextWrapper;
 exports.ScoreDialog = ScoreDialog;
 exports.ScoreIcon = ScoreIcon;
 exports.ScorersTable = ScorersTable;
+exports.ScoresList = ScoresList;
 exports.ScoresTools = ScoresTools;
 exports.SearchField = SearchField;
 exports.Searchbar = Searchbar;
@@ -18021,6 +17580,7 @@ exports.TraceIcon = TraceIcon;
 exports.TraceTimeline = TraceTimeline;
 exports.TraceTimelineLegend = TraceTimelineLegend;
 exports.TraceTimelineSpan = TraceTimelineSpan;
+exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
 exports.TracesView = TracesView;
 exports.TracesViewSkeleton = TracesViewSkeleton;
@@ -18043,6 +17603,7 @@ exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.allowedAiSpanAttributes = allowedAiSpanAttributes;
 exports.cleanString = cleanString;
 exports.convertWorkflowRunStateToStreamResult = convertWorkflowRunStateToStreamResult;
+exports.extractPrompt = extractPrompt;
 exports.formatDuration = formatDuration;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatOtelTimestamp = formatOtelTimestamp;
@@ -18050,9 +17611,13 @@ exports.formatOtelTimestamp2 = formatOtelTimestamp2;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getShortId = getShortId;
 exports.getSpanTypeUi = getSpanTypeUi;
+exports.getToNextEntryFn = getToNextEntryFn;
+exports.getToPreviousEntryFn = getToPreviousEntryFn;
 exports.parseError = parseError;
 exports.providerMapToIcon = providerMapToIcon;
+exports.scoresListColumns = scoresListColumns;
 exports.spanTypePrefixes = spanTypePrefixes;
+exports.tracesListColumns = tracesListColumns;
 exports.transformKey = transformKey;
 exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;