@mastra/playground-ui 6.1.2 → 6.1.3-alpha.1

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Fragment as Fragment$1, Suspense, useId, startTransition, isValidElement } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, EditIcon, LoaderCircle, ExternalLinkIcon, Users, Brain, NetworkIcon, SearchIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, HashIcon, PanelLeftIcon } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, EditIcon, LoaderCircle, ExternalLinkIcon, Users, Brain, NetworkIcon, SearchIcon, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, HashIcon, PanelLeftIcon } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -18,6 +18,7 @@ import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { toast } from 'sonner';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useDebouncedCallback } from 'use-debounce';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';export * from '@tanstack/react-query';
@@ -26,7 +27,6 @@ import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
@@ -4340,45 +4340,173 @@ const BadgeWrapper = ({
   initialCollapsed = true,
   icon,
   title,
-  collapsible = true
+  collapsible = true,
+  extraInfo
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: collapsible ? () => setIsCollapsed((s) => !s) : void 0,
+          className: "flex items-center gap-2 disabled:cursor-not-allowed",
+          disabled: !collapsible,
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
+            /* @__PURE__ */ jsx(Badge$1, { icon, children: title })
+          ]
+        }
+      ),
+      extraInfo
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx("div", { className: "p-4 rounded-lg bg-surface2 flex flex-col gap-4", children }) })
+  ] });
+};
+
+const Dialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: clsx("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive.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__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const NetworkChoiceMetadata = ({ selectionReason, open, onOpenChange, input }) => {
+  let inputSlot = null;
+  if (input) {
+    try {
+      inputSlot = typeof input === "object" ? /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: input }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: JSON.parse(input) });
+    } catch {
+      inputSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: input });
+    }
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "border-border1 border-sm bg-surface3 p-0 gap-0", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "p-4", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Agent Network Metadata" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "View the metadata of the agent's network choice." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4 border-t-sm border-border1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Txt, { className: "text-icon3", children: "Selection Reason" }),
+        /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-md", children: selectionReason })
+      ] }),
+      inputSlot && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Txt, { className: "text-icon3", children: "Input" }),
+        /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-md", children: inputSlot })
+      ] })
+    ] })
+  ] }) });
+};
+const NetworkChoiceMetadataDialogTrigger = ({
+  selectionReason,
+  input
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Show selection reason", side: "top", onClick: () => setIsOpen((s) => !s), children: /* @__PURE__ */ jsx(Share2, { className: "text-icon3 size-5" }) }),
+    /* @__PURE__ */ jsx(
+      NetworkChoiceMetadata,
       {
-        onClick: collapsible ? () => setIsCollapsed((s) => !s) : void 0,
-        className: "flex items-center gap-2 disabled:cursor-not-allowed",
-        disabled: !collapsible,
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
-          /* @__PURE__ */ jsx(Badge$1, { icon, children: title })
-        ]
+        selectionReason: selectionReason || "",
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        input
       }
-    ),
-    !isCollapsed && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx("div", { className: "p-4 rounded-lg bg-surface2", children }) })
+    )
   ] });
 };
 
-const ToolBadge = ({ toolName, argsText, result }) => {
-  let argSlot;
+const ToolBadge = ({ toolName, args, result, networkMetadata }) => {
+  let argSlot = null;
   try {
-    const parsedArgs = JSON.parse(argsText);
-    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: parsedArgs });
+    const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
+    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: formattedArgs });
   } catch {
-    argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
+    argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
-  return /* @__PURE__ */ jsx(BadgeWrapper, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), title: toolName, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
-      argSlot
-    ] }),
-    result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-      typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result })
-    ] })
-  ] }) });
+  let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result });
+  return /* @__PURE__ */ jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }),
+      title: toolName,
+      extraInfo: networkMetadata && /* @__PURE__ */ jsx(
+        NetworkChoiceMetadataDialogTrigger,
+        {
+          selectionReason: networkMetadata?.selectionReason || "",
+          input: networkMetadata?.input
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
+          argSlot
+        ] }),
+        result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
+          resultSlot
+        ] })
+      ] })
+    }
+  );
 };
 
 function Skeleton({ className, ...props }) {
@@ -4390,7 +4518,8 @@ const useWorkflow = (workflowId) => {
   return useQuery({
     queryKey: ["workflow", workflowId],
     queryFn: () => client.getWorkflow(workflowId).details(),
-    retry: false
+    retry: false,
+    refetchOnWindowFocus: false
   });
 };
 const useLegacyWorkflow = (workflowId) => {
@@ -5269,56 +5398,6 @@ const CollapsibleTrigger = (props) => {
 };
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-const Dialog = DialogPrimitive.Root;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader.displayName = "DialogHeader";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: clsx("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
 const useAutoscroll = (ref, { enabled = true }) => {
   const shouldScrollRef = useRef(enabled);
   React__default.useEffect(() => {
@@ -5470,9 +5549,9 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
           ...chunk.payload
         },
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           steps: {
-            ...prev.payload.workflowState.steps,
+            ...prev?.payload?.workflowState?.steps,
             [chunk.payload.id]: {
               ...current || {},
               ...chunk.payload
@@ -5488,17 +5567,17 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     return {
       ...prev,
       payload: {
-        ...prev.payload,
+        ...prev?.payload,
         currentStep: {
           id: chunk.payload.id,
-          ...prev?.payload?.currentStep || {},
+          ...prev?.payload?.currentStep,
           ...chunk.payload
         },
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           status: "suspended",
           steps: {
-            ...prev.payload.workflowState.steps,
+            ...prev?.payload?.workflowState?.steps,
             [chunk.payload.id]: {
               ...current || {},
               ...chunk.payload
@@ -5514,17 +5593,17 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     return {
       ...prev,
       payload: {
-        ...prev.payload,
+        ...prev?.payload,
         currentStep: {
           id: chunk.payload.id,
           ...prev?.payload?.currentStep || {},
           ...chunk.payload
         },
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           status: "waiting",
           steps: {
-            ...prev.payload.workflowState.steps,
+            ...prev?.payload?.workflowState?.steps,
             [chunk.payload.id]: {
               ...current,
               ...chunk.payload
@@ -5538,20 +5617,20 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
   if (chunk.type === "workflow-step-result") {
     const status = chunk.payload.status;
     const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
+    const next = {
       ...prev,
       payload: {
-        ...prev.payload,
+        ...prev?.payload,
         currentStep: {
           id: chunk.payload.id,
           ...prev?.payload?.currentStep || {},
           ...chunk.payload
         },
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           status,
           steps: {
-            ...prev.payload.workflowState.steps,
+            ...prev?.payload?.workflowState?.steps,
             [chunk.payload.id]: {
               ...current,
               ...chunk.payload
@@ -5561,14 +5640,15 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
       },
       eventTimestamp: /* @__PURE__ */ new Date()
     };
+    return next;
   }
   if (chunk.type === "workflow-canceled") {
     return {
       ...prev,
       payload: {
-        ...prev.payload,
+        ...prev?.payload,
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           status: "canceled"
         }
       },
@@ -5579,10 +5659,10 @@ const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
     return {
       ...prev,
       payload: {
-        ...prev.payload,
+        ...prev?.payload,
         currentStep: void 0,
         workflowState: {
-          ...prev.payload.workflowState,
+          ...prev?.payload?.workflowState,
           status: chunk.payload.workflowStatus
         }
       },
@@ -5610,10 +5690,8 @@ function WorkflowRunProvider({
   useEffect(() => {
     if (snapshot?.runId) {
       setResult(convertWorkflowRunStateToWatchResult(snapshot));
-    } else {
-      setResult(null);
     }
-  }, [snapshot?.runId ?? ""]);
+  }, [snapshot]);
   return /* @__PURE__ */ jsx(
     WorkflowRunContext.Provider,
     {
@@ -5723,20 +5801,6 @@ const CodeDialogContent = ({ data }) => {
   }
 };
 
-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__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
 const formatJSON = async (code) => {
   const formatted = await prettier.format(code, {
     semi: false,
@@ -6613,7 +6677,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     ref,
     align,
     sideOffset,
-    className: cn(
+    className: clsx(
       "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -7971,7 +8035,7 @@ function WorkflowTrigger({
   }, [isStreamingWorkflow]);
   useEffect(() => {
     if (!streamResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
-    const suspended = Object.entries(streamResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
+    const suspended = Object.entries(streamResultToUse?.payload?.workflowState?.steps || {}).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
       stepId,
       runId: result.runId,
       suspendPayload: payload2,
@@ -8504,15 +8568,6 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex
   }
 ) });
 
-const useHandleAgentWorkflowStream = (workflowOutput) => {
-  const [streamResult, setStreamResult] = useState({});
-  useEffect(() => {
-    if (!workflowOutput) return;
-    setStreamResult((prev) => mapWorkflowStreamChunkToWatchResult(prev, workflowOutput));
-  }, [workflowOutput]);
-  return streamResult;
-};
-
 const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   const client = useMastraClient();
   return useQuery({
@@ -8522,17 +8577,32 @@ const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
   });
 };
 
-const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming }) => {
+const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, networkMetadata }) => {
   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;
-  return /* @__PURE__ */ jsxs(BadgeWrapper, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), title: workflow.name, initialCollapsed: false, children: [
-    !isStreaming && !isLoading && /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
-    isStreaming && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }),
+      title: workflow.name,
+      initialCollapsed: false,
+      extraInfo: networkMetadata && /* @__PURE__ */ jsx(
+        NetworkChoiceMetadataDialogTrigger,
+        {
+          selectionReason: networkMetadata?.selectionReason || "",
+          input: networkMetadata?.input
+        }
+      ),
+      children: [
+        !isStreaming && !isLoading && /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
+        isStreaming && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId })
+      ]
+    }
+  );
 };
 const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
   const { Link } = useLinkComponent();
@@ -8544,13 +8614,12 @@ const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
     /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow }) })
   ] });
 };
-const useWorkflowStream = (partialWorkflowOutput) => {
-  const streamResult = useHandleAgentWorkflowStream(partialWorkflowOutput);
+const useWorkflowStream = (workflowFullState) => {
   const { setResult } = useContext(WorkflowRunContext);
   useEffect(() => {
-    if (!streamResult) return;
-    setResult(streamResult);
-  }, [streamResult]);
+    if (!workflowFullState) return;
+    setResult(workflowFullState);
+  }, [workflowFullState]);
 };
 
 const LoadingBadge = () => {
@@ -8564,12 +8633,61 @@ const LoadingBadge = () => {
   );
 };
 
-const ToolFallback$1 = ({ toolName, argsText, result, args, ...props }) => {
-  return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsx(ToolFallbackInner, { toolName, argsText, result, args, ...props }) });
+const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
+  return /* @__PURE__ */ jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsx(AgentIcon, { className: "text-accent1" }),
+      title: agentId,
+      initialCollapsed: false,
+      extraInfo: networkMetadata && /* @__PURE__ */ jsx(
+        NetworkChoiceMetadataDialogTrigger,
+        {
+          selectionReason: networkMetadata?.selectionReason || "",
+          input: networkMetadata?.input
+        }
+      ),
+      children: messages.map((message, index) => {
+        if (message.type === "text") {
+          return /* @__PURE__ */ jsx(React__default.Fragment, { children: message.content }, index);
+        }
+        const result = typeof message.toolOutput === "string" ? JSON.parse(message.toolOutput) : message.toolOutput;
+        return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsx(
+          ToolFallback$1,
+          {
+            toolName: message.toolName,
+            argsText: typeof message.args === "string" ? message.args : JSON.stringify(message.args),
+            result,
+            args: message.args,
+            status: { type: "complete" },
+            type: "tool-call",
+            toolCallId: message.toolCallId,
+            addResult: () => {
+            }
+          }
+        ) }, index);
+      })
+    }
+  );
+};
+
+const ToolFallback$1 = ({ toolName, result, args, ...props }) => {
+  return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
-const ToolFallbackInner = ({ toolName, argsText, result, args }) => {
-  useWorkflowStream(args.__mastraMetadata?.partialChunk);
+const ToolFallbackInner = ({ toolName, result, args }) => {
+  useWorkflowStream(args.__mastraMetadata?.workflowFullState);
   const { data: workflow, isLoading } = useWorkflow(toolName);
+  const isAgent = args.__mastraMetadata?.from === "AGENT";
+  if (isAgent) {
+    return /* @__PURE__ */ jsx(
+      AgentBadge,
+      {
+        agentId: toolName,
+        messages: args?.__mastraMetadata?.messages,
+        networkMetadata: args?.__mastraMetadata?.networkMetadata
+      }
+    );
+  }
   if (isLoading) return /* @__PURE__ */ jsx(LoadingBadge, {});
   if (workflow) {
     return /* @__PURE__ */ jsx(
@@ -8578,11 +8696,20 @@ const ToolFallbackInner = ({ toolName, argsText, result, args }) => {
         workflowId: toolName,
         workflow,
         isStreaming: args.__mastraMetadata?.isStreaming,
-        runId: result?.runId
+        runId: result?.runId,
+        networkMetadata: args?.__mastraMetadata?.networkMetadata
       }
     );
   }
-  return /* @__PURE__ */ jsx(ToolBadge, { toolName, argsText, result });
+  return /* @__PURE__ */ jsx(
+    ToolBadge,
+    {
+      toolName,
+      args,
+      result,
+      networkMetadata: args?.__mastraMetadata?.networkMetadata
+    }
+  );
 };
 
 const Reasoning = ({ text }) => {
@@ -8838,12 +8965,13 @@ const useSpeechRecognition = ({
 }) => {
   const client = useMastraClient();
   const [agent, setAgent] = useState(null);
+  const { runtimeContext } = usePlaygroundStore();
   useEffect(() => {
     if (!agentId) return;
     const agent2 = client.getAgent(agentId);
     const check = async () => {
       try {
-        await agent2.voice.getSpeakers();
+        await agent2.voice.getSpeakers(runtimeContext);
         setAgent(agent2);
       } catch (error) {
         setAgent(null);
@@ -9186,7 +9314,20 @@ const AttachFileDialog = ({ onOpenChange, open }) => {
   ] }) });
 };
 
-const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange }) => {
+const ThreadInputContext = createContext({
+  threadInput: "",
+  setThreadInput: () => {
+  }
+});
+const ThreadInputProvider = ({ children }) => {
+  const [threadInput, setThreadInput] = useState("");
+  return /* @__PURE__ */ jsx(ThreadInputContext.Provider, { value: { threadInput, setThreadInput }, children });
+};
+const useThreadInput = () => {
+  return useContext(ThreadInputContext);
+};
+
+const Thread = ({ ToolFallback, agentName, agentId, hasMemory }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
@@ -9207,7 +9348,7 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange })
       ) }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer$1, { hasMemory, onInputChange, agentId })
+    /* @__PURE__ */ jsx(Composer$1, { hasMemory, agentId })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
@@ -9229,7 +9370,8 @@ const ThreadWelcome$1 = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer$1 = ({ hasMemory, onInputChange, agentId }) => {
+const Composer$1 = ({ hasMemory, agentId }) => {
+  const { setThreadInput } = useThreadInput();
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
@@ -9242,7 +9384,7 @@ const Composer$1 = ({ hasMemory, onInputChange, agentId }) => {
             placeholder: "Enter your message...",
             name: "",
             id: "",
-            onChange: (e) => onInputChange?.(e.target.value)
+            onChange: (e) => setThreadInput?.(e.target.value)
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -9543,11 +9685,12 @@ const useAdapters = (agentId) => {
   const [isReady, setIsReady] = useState(false);
   const [speechAdapter, setSpeechAdapter] = useState(void 0);
   const baseClient = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
   useEffect(() => {
     const check = async () => {
       const agent = baseClient.getAgent(agentId);
       try {
-        await agent.voice.getSpeakers();
+        await agent.voice.getSpeakers(runtimeContext);
         setSpeechAdapter(new VoiceAttachmentAdapter(agent));
         setIsReady(true);
       } catch {
@@ -9570,21 +9713,550 @@ const useAdapters = (agentId) => {
   };
 };
 
-const convertMessage$2 = (message) => {
-  return message;
-};
-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 || "";
+const handleNetworkMessageFromMemory = (content) => {
+  if (content.resourceType === "workflow") {
+    return {
+      role: "assistant",
+      content: [
+        {
+          type: "tool-call",
+          toolCallId: content.finalResult.runId,
+          toolName: content.resourceId,
+          result: { runId: content.finalResult.runId },
+          args: {
+            __mastraMetadata: {
+              from: "WORKFLOW",
+              networkMetadata: {
+                selectionReason: content?.selectionReason,
+                input: content?.input
+              }
+            }
+          }
+        }
+      ]
+    };
+  }
+  if (content.resourceType === "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;
+        }
+      }
+    }
+    return {
+      role: "assistant",
+      content: [
+        {
+          type: "tool-call",
+          toolCallId: content.finalResult.runId,
+          toolName: content.resourceId,
+          result: { runId: content.finalResult.runId },
+          args: {
+            __mastraMetadata: {
+              from: "AGENT",
+              networkMetadata: {
+                selectionReason: content?.selectionReason || "",
+                input: content?.input || ""
+              },
+              messages: badgeMessages
+            }
+          }
+        }
+      ]
+    };
+  }
+  if (content.resourceType === "tool") {
+    return {
+      role: "assistant",
+      content: [
+        {
+          type: "tool-call",
+          toolCallId: content.finalResult.toolCallId,
+          toolName: content.resourceId,
+          result: content.finalResult.result,
+          args: {
+            ...content?.input,
+            __mastraMetadata: {
+              networkMetadata: {
+                selectionReason: content?.selectionReason || "",
+                input: content?.input || ""
+              }
+            }
+          }
+        }
+      ]
+    };
+  }
+  return { role: "assistant", content: [{ type: "text", text: "Unknown response" }] };
+};
+
+const handleStreamChunk = async ({
+  chunk,
+  setMessages,
+  refreshWorkingMemory,
+  _sideEffects
+}) => {
+  function updater() {
+    setMessages((currentConversation) => {
+      const message = {
+        role: "assistant",
+        content: [{ type: "text", text: _sideEffects.content }]
+      };
+      if (!_sideEffects.assistantMessageAdded) {
+        _sideEffects.assistantMessageAdded = true;
+        if (_sideEffects.assistantToolCallAddedForUpdater) {
+          _sideEffects.assistantToolCallAddedForUpdater = false;
+        }
+        return [...currentConversation, message];
+      }
+      if (_sideEffects.assistantToolCallAddedForUpdater) {
+        _sideEffects.assistantToolCallAddedForUpdater = false;
+        return [...currentConversation, message];
+      }
+      return [...currentConversation.slice(0, -1), message];
+    });
+  }
+  switch (chunk.type) {
+    case "text-delta": {
+      if (_sideEffects.assistantToolCallAddedForContent) {
+        _sideEffects.assistantToolCallAddedForContent = false;
+        _sideEffects.content = chunk.payload.text;
+      } else {
+        _sideEffects.content += chunk.payload.text;
+      }
+      updater();
+      break;
+    }
+    case "tool-output": {
+      if (chunk.payload.output?.type.startsWith("workflow-")) {
+        handleWorkflowChunk({ workflowChunk: chunk.payload.output, setMessages, entityName: chunk.payload.toolName });
+      }
+      break;
+    }
+    case "tool-call": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.length - 1];
+        if (lastMessage && lastMessage.role === "assistant") {
+          const updatedMessage = {
+            ...lastMessage,
+            content: Array.isArray(lastMessage.content) ? [
+              ...lastMessage.content,
+              {
+                type: "tool-call",
+                toolCallId: chunk.payload.toolCallId,
+                toolName: chunk.payload.toolName,
+                args: {
+                  ...chunk.payload.args,
+                  __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
+                  }
+                }
+              }
+            ]
+          };
+          _sideEffects.assistantToolCallAddedForUpdater = true;
+          _sideEffects.assistantToolCallAddedForContent = true;
+          return [...currentConversation.slice(0, -1), updatedMessage];
+        }
+        const newMessage = {
+          role: "assistant",
+          content: [
+            { type: "text", text: _sideEffects.content },
+            {
+              type: "tool-call",
+              toolCallId: chunk.payload.toolCallId,
+              toolName: chunk.payload.toolName,
+              args: {
+                ...chunk.payload.args,
+                __mastraMetadata: { ...chunk.payload.args?.__mastraMetadata, isStreaming: true }
+              }
+            }
+          ]
+        };
+        _sideEffects.assistantToolCallAddedForUpdater = true;
+        _sideEffects.assistantToolCallAddedForContent = true;
+        return [...currentConversation, newMessage];
+      });
+      _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId] = chunk.payload.toolName;
+      break;
+    }
+    case "tool-result": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.length - 1];
+        if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+          const updatedContent = lastMessage.content.map((part) => {
+            if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
+              return {
+                ...part,
+                result: chunk.payload.result
+              };
+            }
+            return part;
+          });
+          const updatedMessage = {
+            ...lastMessage,
+            content: updatedContent
+          };
+          return [...currentConversation.slice(0, -1), updatedMessage];
+        }
+        return currentConversation;
+      });
+      try {
+        const toolName = _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId];
+        if (toolName === "updateWorkingMemory" && chunk.payload.result?.success) {
+          await refreshWorkingMemory?.();
+        }
+      } finally {
+        delete _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId];
+      }
+      break;
+    }
+    case "error": {
+      if (typeof chunk.payload.error === "string") {
+        throw new Error(chunk.payload.error);
+      }
+      break;
+    }
+    case "finish": {
+      handleFinishReason$1(chunk.payload.finishReason);
+      break;
+    }
+    case "reasoning-delta": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.length - 1];
+        if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+          const updatedContent = lastMessage.content.map((part) => {
+            if (typeof part === "object" && part.type === "reasoning") {
+              return {
+                ...part,
+                text: part.text + chunk.payload.text
+              };
+            }
+            return part;
+          });
+          const updatedMessage = {
+            ...lastMessage,
+            content: updatedContent
+          };
+          return [...currentConversation.slice(0, -1), updatedMessage];
+        }
+        const newMessage = {
+          role: "assistant",
+          content: [
+            {
+              type: "reasoning",
+              text: chunk.payload.text
+            },
+            { type: "text", text: _sideEffects.content }
+          ]
+        };
+        return [...currentConversation, newMessage];
+      });
+      break;
+    }
+  }
+};
+const handleFinishReason$1 = (finishReason) => {
+  switch (finishReason) {
+    case "tool-calls":
+      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
+  }
+};
+const handleWorkflowChunk = ({ workflowChunk, setMessages, entityName }) => {
+  flushSync(() => {
+    setMessages((currentConversation) => {
+      const lastMessage = currentConversation[currentConversation.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: mapWorkflowStreamChunkToWatchResult(
+                    part.args?.__mastraMetadata?.workflowFullState || {},
+                    workflowChunk
+                  ),
+                  isStreaming: true
+                }
+              }
+            };
+          }
+          return part;
+        })
+      };
+      return [...currentConversation.slice(0, -1), newMessage];
+    });
+  });
+};
+const handleAgentChunk = ({ agentChunk, setMessages, entityName }) => {
+  switch (agentChunk.type) {
+    case "tool-result": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.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 [...currentConversation.slice(0, -1), newMessage];
+      });
+      break;
+    }
+    case "tool-call": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.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 [...currentConversation.slice(0, -1), newMessage];
+      });
+      break;
+    }
+    case "text-delta": {
+      setMessages((currentConversation) => {
+        const lastMessage = currentConversation[currentConversation.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 [...currentConversation.slice(0, -1), newMessage];
+      });
+      break;
+    }
+    case "tool-output": {
+      flushSync(() => {
+        setMessages((currentConversation) => {
+          if (!agentChunk.payload.output.type.startsWith("workflow-")) return currentConversation;
+          const lastMessage = currentConversation[currentConversation.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: 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 [...currentConversation.slice(0, -1), newMessage];
+        });
+      });
+      break;
+    }
+  }
+};
+const createRootToolAssistantMessage = ({
+  chunk,
+  entityName,
+  setMessages,
+  runId,
+  _sideEffects,
+  from,
+  networkMetadata
+}) => {
+  setMessages((currentConversation) => {
+    if (!entityName || !runId) return currentConversation;
+    const newMessage = {
+      role: "assistant",
+      content: [
+        { type: "text", text: _sideEffects.content },
+        {
+          type: "tool-call",
+          toolCallId: runId,
+          toolName: entityName,
+          args: {
+            ...chunk?.payload?.args,
+            __mastraMetadata: {
+              from,
+              networkMetadata,
+              ...chunk.payload.args?.__mastraMetadata,
+              isStreaming: true
+            }
+          }
+        }
+      ]
+    };
+    _sideEffects.assistantToolCallAddedForUpdater = true;
+    _sideEffects.assistantToolCallAddedForContent = true;
+    return [...currentConversation, newMessage];
+  });
+};
+
+const convertMessage$2 = (message) => {
+  return message;
+};
+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: [
@@ -9644,7 +10316,7 @@ function MastraRuntimeProvider({
     instructions,
     chatWithGenerate,
     chatWithGenerateVNext,
-    chatWithStreamVNext,
+    chatWithNetwork,
     providerOptions
   } = settings?.modelSettings ?? {};
   const toolCallIdToName = useRef({});
@@ -9657,6 +10329,14 @@ function MastraRuntimeProvider({
     if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
       if (initialMessages && threadId && memory) {
         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,
@@ -9803,63 +10483,15 @@ function MastraRuntimeProvider({
         }
       };
       if (modelVersion === "v2") {
-        if (chatWithGenerateVNext) {
-          const response = await agent.generateVNext({
+        if (chatWithNetwork) {
+          const response = await agent.network({
             messages: [
               {
                 role: "user",
                 content: input
-              },
-              ...attachments
-            ],
-            runId: agentId,
-            modelSettings: {
-              frequencyPenalty,
-              presencePenalty,
-              maxRetries,
-              temperature,
-              topK,
-              topP,
-              maxOutputTokens: maxTokens
-            },
-            providerOptions,
-            instructions,
-            runtimeContext: runtimeContextInstance,
-            ...memory ? { threadId, resourceId: agentId } : {}
-          });
-          handleGenerateResponse(response);
-          setIsRunning(false);
-          return;
-        } else {
-          let updater = function() {
-            setMessages((currentConversation) => {
-              const message2 = {
-                role: "assistant",
-                content: [{ type: "text", text: content }]
-              };
-              if (!assistantMessageAdded) {
-                assistantMessageAdded = true;
-                if (assistantToolCallAddedForUpdater) {
-                  assistantToolCallAddedForUpdater = false;
-                }
-                return [...currentConversation, message2];
               }
-              if (assistantToolCallAddedForUpdater) {
-                assistantToolCallAddedForUpdater = false;
-                return [...currentConversation, message2];
-              }
-              return [...currentConversation.slice(0, -1), message2];
-            });
-          };
-          const response = await agent.streamVNext({
-            messages: [
-              {
-                role: "user",
-                content: input
-              },
-              ...attachments
             ],
-            runId: agentId,
+            maxSteps,
             modelSettings: {
               frequencyPenalty,
               presencePenalty,
@@ -9869,203 +10501,159 @@ function MastraRuntimeProvider({
               topK,
               topP
             },
-            instructions,
+            runId: agentId,
             runtimeContext: runtimeContextInstance,
-            ...memory ? { threadId, resourceId: agentId } : {},
-            providerOptions
+            ...memory ? { thread: threadId, resourceId: agentId } : {}
           });
-          if (!response.body) {
-            throw new Error("No response body");
-          }
-          let content = "";
-          let assistantMessageAdded = false;
-          let assistantToolCallAddedForUpdater = false;
-          let assistantToolCallAddedForContent = false;
+          const _sideEffects = {
+            assistantMessageAdded: false,
+            assistantToolCallAddedForUpdater: false,
+            assistantToolCallAddedForContent: false,
+            content: "",
+            toolCallIdToName
+          };
+          let currentEntityId;
           await response.processDataStream({
             onChunk: async (chunk) => {
-              switch (chunk.type) {
-                case "text-delta": {
-                  if (assistantToolCallAddedForContent) {
-                    assistantToolCallAddedForContent = false;
-                    content = chunk.payload.text;
-                  } else {
-                    content += chunk.payload.text;
-                  }
-                  updater();
-                  break;
-                }
-                case "tool-output": {
-                  if (!chunk.payload.output?.type.startsWith("workflow-")) return;
-                  flushSync(() => {
-                    setMessages((currentConversation) => {
-                      const lastMessage = currentConversation[currentConversation.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,
-                              ...chunk.payload,
-                              args: {
-                                ...part.args,
-                                __mastraMetadata: {
-                                  ...part.args?.__mastraMetadata,
-                                  partialChunk: chunk?.payload?.output,
-                                  isStreaming: true
-                                }
-                              }
-                            };
-                          }
-                          return part;
-                        })
-                      };
-                      return [...currentConversation.slice(0, -1), newMessage];
-                    });
-                  });
-                  break;
-                }
-                case "tool-call": {
-                  setMessages((currentConversation) => {
-                    const lastMessage = currentConversation[currentConversation.length - 1];
-                    if (lastMessage && lastMessage.role === "assistant") {
-                      const updatedMessage = {
-                        ...lastMessage,
-                        content: Array.isArray(lastMessage.content) ? [
-                          ...lastMessage.content,
-                          {
-                            type: "tool-call",
-                            toolCallId: chunk.payload.toolCallId,
-                            toolName: chunk.payload.toolName,
-                            args: {
-                              ...chunk.payload.args,
-                              __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
-                              }
-                            }
-                          }
-                        ]
-                      };
-                      assistantToolCallAddedForUpdater = true;
-                      assistantToolCallAddedForContent = true;
-                      return [...currentConversation.slice(0, -1), updatedMessage];
-                    }
-                    const newMessage = {
-                      role: "assistant",
-                      content: [
-                        { type: "text", text: content },
-                        {
-                          type: "tool-call",
-                          toolCallId: chunk.payload.toolCallId,
-                          toolName: chunk.payload.toolName,
-                          args: {
-                            ...chunk.payload.args,
-                            __mastraMetadata: { ...chunk.payload.args?.__mastraMetadata, isStreaming: true }
+              if (chunk.type.startsWith("agent-execution-event-")) {
+                const agentChunk = chunk.payload;
+                if (!currentEntityId) return;
+                await handleAgentChunk({ agentChunk, setMessages, entityName: currentEntityId });
+              } else if (chunk.type === "tool-execution-start") {
+                await handleStreamChunk({
+                  chunk: {
+                    ...chunk,
+                    type: "tool-call",
+                    payload: {
+                      ...chunk?.payload,
+                      toolCallId: chunk?.payload?.args?.toolCallId,
+                      toolName: chunk?.payload?.args?.toolName,
+                      args: {
+                        ...chunk?.payload?.args?.args,
+                        __mastraMetadata: {
+                          ...chunk?.payload?.args?.__mastraMetadata,
+                          networkMetadata: {
+                            selectionReason: chunk?.payload?.args?.selectionReason || "",
+                            input: chunk?.payload?.args?.args
                           }
                         }
-                      ]
-                    };
-                    assistantToolCallAddedForUpdater = true;
-                    assistantToolCallAddedForContent = true;
-                    return [...currentConversation, newMessage];
-                  });
-                  toolCallIdToName.current[chunk.payload.toolCallId] = chunk.payload.toolName;
-                  break;
-                }
-                case "tool-result": {
-                  setMessages((currentConversation) => {
-                    const lastMessage = currentConversation[currentConversation.length - 1];
-                    if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-                      const updatedContent = lastMessage.content.map((part) => {
-                        if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-                          return {
-                            ...part,
-                            result: chunk.payload.result
-                          };
-                        }
-                        return part;
-                      });
-                      const updatedMessage = {
-                        ...lastMessage,
-                        content: updatedContent
-                      };
-                      return [...currentConversation.slice(0, -1), updatedMessage];
-                    }
-                    return currentConversation;
-                  });
-                  try {
-                    const toolName = toolCallIdToName.current[chunk.payload.toolCallId];
-                    if (toolName === "updateWorkingMemory" && chunk.payload.result?.success) {
-                      await refreshWorkingMemory?.();
+                      }
                     }
-                  } finally {
-                    delete toolCallIdToName.current[chunk.payload.toolCallId];
-                  }
-                  break;
-                }
-                case "error": {
-                  if (typeof chunk.payload.error === "string") {
-                    throw new Error(chunk.payload.error);
+                  },
+                  setMessages,
+                  refreshWorkingMemory,
+                  _sideEffects
+                });
+              } else if (chunk.type === "tool-execution-end") {
+                await handleStreamChunk({
+                  chunk: { ...chunk, type: "tool-result" },
+                  setMessages,
+                  refreshWorkingMemory,
+                  _sideEffects
+                });
+              } else if (chunk.type.startsWith("workflow-execution-event-")) {
+                const workflowChunk = chunk.payload;
+                if (!currentEntityId) return;
+                await handleWorkflowChunk({ workflowChunk, setMessages, entityName: currentEntityId });
+              } else if (chunk.type === "workflow-execution-start" || chunk.type === "agent-execution-start") {
+                currentEntityId = chunk.payload?.args?.resourceId;
+                const runId = chunk.payload.runId;
+                if (!currentEntityId || !runId) return;
+                createRootToolAssistantMessage({
+                  entityName: currentEntityId,
+                  setMessages,
+                  runId,
+                  _sideEffects,
+                  chunk,
+                  from: chunk.type === "agent-execution-start" ? "AGENT" : "WORKFLOW",
+                  networkMetadata: {
+                    selectionReason: chunk?.payload?.args?.selectionReason || "",
+                    input: chunk?.payload?.args?.prompt
                   }
-                  break;
-                }
-                case "finish": {
-                  handleFinishReason(chunk.payload.finishReason);
-                  break;
-                }
-                case "reasoning-delta": {
-                  setMessages((currentConversation) => {
-                    const lastMessage = currentConversation[currentConversation.length - 1];
-                    if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-                      const updatedContent = lastMessage.content.map((part) => {
-                        if (typeof part === "object" && part.type === "reasoning") {
-                          return {
-                            ...part,
-                            text: part.text + chunk.payload.text
-                          };
-                        }
-                        return part;
-                      });
-                      const updatedMessage = {
-                        ...lastMessage,
-                        content: updatedContent
-                      };
-                      return [...currentConversation.slice(0, -1), updatedMessage];
-                    }
-                    const newMessage = {
-                      role: "assistant",
-                      content: [
-                        {
-                          type: "reasoning",
-                          text: chunk.payload.text
-                        },
-                        { type: "text", text: content }
-                      ]
-                    };
-                    return [...currentConversation, newMessage];
-                  });
-                  break;
-                }
+                });
+                _sideEffects.toolCallIdToName.current[runId] = currentEntityId;
+              } else if (chunk.type === "network-execution-event-step-finish") {
+                setMessages((currentConversation) => {
+                  return [
+                    ...currentConversation,
+                    { role: "assistant", content: [{ type: "text", text: chunk?.payload?.result || "" }] }
+                  ];
+                });
+              } else {
+                await handleStreamChunk({ chunk, setMessages, refreshWorkingMemory, _sideEffects });
               }
             }
           });
-          setIsRunning(false);
-          return;
+        } else {
+          if (chatWithGenerateVNext) {
+            const response = await agent.generateVNext({
+              messages: [
+                {
+                  role: "user",
+                  content: input
+                },
+                ...attachments
+              ],
+              runId: agentId,
+              modelSettings: {
+                frequencyPenalty,
+                presencePenalty,
+                maxRetries,
+                temperature,
+                topK,
+                topP,
+                maxOutputTokens: maxTokens
+              },
+              providerOptions,
+              instructions,
+              runtimeContext: runtimeContextInstance,
+              ...memory ? { threadId, resourceId: agentId } : {}
+            });
+            handleGenerateResponse(response);
+            setIsRunning(false);
+            return;
+          } else {
+            const response = await agent.streamVNext({
+              messages: [
+                {
+                  role: "user",
+                  content: input
+                },
+                ...attachments
+              ],
+              runId: agentId,
+              modelSettings: {
+                frequencyPenalty,
+                presencePenalty,
+                maxRetries,
+                maxOutputTokens: maxTokens,
+                temperature,
+                topK,
+                topP
+              },
+              instructions,
+              runtimeContext: runtimeContextInstance,
+              ...memory ? { threadId, resourceId: agentId } : {},
+              providerOptions
+            });
+            if (!response.body) {
+              throw new Error("No response body");
+            }
+            const _sideEffects = {
+              assistantMessageAdded: false,
+              assistantToolCallAddedForUpdater: false,
+              assistantToolCallAddedForContent: false,
+              content: "",
+              toolCallIdToName
+            };
+            await response.processDataStream({
+              onChunk: async (chunk) => {
+                await handleStreamChunk({ chunk, setMessages, refreshWorkingMemory, _sideEffects });
+              }
+            });
+            setIsRunning(false);
+            return;
+          }
         }
       } else {
         if (chatWithGenerate) {
@@ -10448,7 +11036,6 @@ const AgentChat = ({
   initialMessages,
   memory,
   refreshThreadList,
-  onInputChange,
   modelVersion
 }) => {
   const { settings } = useAgentSettings();
@@ -10465,7 +11052,7 @@ const AgentChat = ({
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, onInputChange, agentId })
+      children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId })
     }
   );
 };
@@ -11072,7 +11659,11 @@ const AgentSettings = ({ modelVersion }) => {
   const { settings, setSettings, resetAll } = useAgentSettings();
   let radioValue;
   if (modelVersion === "v2") {
-    radioValue = settings?.modelSettings?.chatWithGenerateVNext ? "generateVNext" : "streamVNext";
+    if (settings?.modelSettings?.chatWithNetwork) {
+      radioValue = "network";
+    } else {
+      radioValue = settings?.modelSettings?.chatWithGenerateVNext ? "generateVNext" : "streamVNext";
+    }
   } else {
     radioValue = settings?.modelSettings?.chatWithGenerate ? "generate" : "stream";
   }
@@ -11089,7 +11680,8 @@ const AgentSettings = ({ modelVersion }) => {
               ...settings?.modelSettings,
               chatWithGenerate: value === "generate",
               chatWithGenerateVNext: value === "generateVNext",
-              chatWithStreamVNext: value === "streamVNext"
+              chatWithStreamVNext: value === "streamVNext",
+              chatWithNetwork: value === "network"
             }
           }),
           className: "flex flex-row gap-4",
@@ -11109,6 +11701,10 @@ const AgentSettings = ({ modelVersion }) => {
             modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: "streamVNext", id: "streamVNext", className: "text-icon6" }),
               /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "streamVNext", children: "Stream vNext" })
+            ] }),
+            modelVersion === "v2" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: "network", id: "network", className: "text-icon6" }),
+              /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "network", children: "Network" })
             ] })
           ]
         }
@@ -12242,10 +12838,18 @@ const AgentMetadataModelSwitcher = ({
   ] }) });
 };
 
+const AgentMetadataNetworkList = ({ agents, computeAgentLink }) => {
+  const { Link } = useLinkComponent();
+  if (agents.length === 0) {
+    return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
+  }
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: computeAgentLink(agent), children: /* @__PURE__ */ jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+};
 const AgentMetadata = ({
   agent,
   promptSlot,
   hasMemoryEnabled,
+  computeAgentLink,
   computeToolLink,
   computeWorkflowLink,
   updateModel,
@@ -12253,6 +12857,8 @@ const AgentMetadata = ({
 }) => {
   const [isEditingModel, setIsEditingModel] = useState(false);
   const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
+  const networkAgentsMap = agent.agents ?? {};
+  const networkAgents = Object.values(networkAgentsMap);
   const agentTools = agent.tools ?? {};
   const tools = Object.keys(agentTools).map((key) => agentTools[key]);
   const agentWorkflows = agent.workflows ?? {};
@@ -12269,7 +12875,16 @@ const AgentMetadata = ({
       }
     ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: agent.modelId || "N/A" }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setIsEditingModel(true), className: "text-icon3 hover:text-icon6", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(EditIcon, {}) }) })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          title: "Edit model",
+          type: "button",
+          onClick: () => setIsEditingModel(true),
+          className: "text-icon3 hover:text-icon6",
+          children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(EditIcon, {}) })
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx(
       AgentMetadataSection,
@@ -12282,6 +12897,17 @@ const AgentMetadata = ({
         children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(MemoryIcon, {}), variant: hasMemoryEnabled ? "success" : "error", className: "font-medium", children: hasMemoryEnabled ? "On" : "Off" })
       }
     ),
+    networkAgents.length > 0 && /* @__PURE__ */ jsx(
+      AgentMetadataSection,
+      {
+        title: "Agents",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/overview",
+          title: "Agents documentation"
+        },
+        children: /* @__PURE__ */ jsx(AgentMetadataNetworkList, { agents: networkAgents, computeAgentLink })
+      }
+    ),
     /* @__PURE__ */ jsx(
       AgentMetadataSection,
       {
@@ -15749,42 +16375,31 @@ function TemplateInfo({
 }) {
   const branchName = templateSlug ? `feat/install-template-${templateSlug}` : "feat/install-template-[slug]";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] lg:min-h-[4rem] items-center "), children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "text-[1.5rem] flex items-center gap-[0.75rem] ",
-            "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+    /* @__PURE__ */ jsx("div", { className: cn("grid mt-[2rem] items-center"), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "text-[1.5rem] flex items-center gap-[0.75rem]",
+          "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+          {
+            "[&>svg]:opacity-20": isLoading
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(PackageIcon, {}),
+          /* @__PURE__ */ jsx(
+            "h2",
             {
-              "[&>svg]:opacity-20": isLoading
+              className: cn({
+                "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
+              }),
+              children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : title
             }
-          ),
-          children: [
-            /* @__PURE__ */ jsx(PackageIcon, {}),
-            /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn({
-                  "bg-surface4 flex rounded-lg min-w-[50%]": isLoading
-                }),
-                children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: " " }) : title
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "w-full h-full bg-cover bg-center transition-scale duration-150 rounded-lg overflow-hidden min-h-[2rem] mt-[2rem] lg:mt-0",
-          style: {
-            backgroundImage: `url(${imageURL})`
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] mt-[2rem] ", children: [
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1fr] gap-x-[6rem] ", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid", children: [
         /* @__PURE__ */ jsx(
           "p",
@@ -18382,5 +18997,5 @@ const MemorySearch = ({
   ] });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map