@mastra/playground-ui 5.1.8 → 5.1.9

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, HourglassIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, CirclePause } 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';
@@ -26,16 +26,18 @@ import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { AnimatePresence } from 'motion/react';
-import { C as Colors } from './colors-CBG_Mm7P.js';
+import { C as Colors } from './colors-BauMYA7t.js';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, MiniMap, Background, BackgroundVariant, ReactFlowProvider, Controls } from '@xyflow/react';
 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 ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useDebouncedCallback } from 'use-debounce';
 import { v4 } from '@lukeed/uuid';
 import prettier from 'prettier';
@@ -50,7 +52,6 @@ import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
@@ -4727,7 +4728,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4743,7 +4744,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$2, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4755,7 +4756,7 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon$2 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -5186,83 +5187,79 @@ function MastraRuntimeProvider({
   ] });
 }
 
-const useAgentStore = create()(
-  persist(
-    (set) => ({
-      modelSettings: {},
-      setModelSettings: (modelSettings) => set((state) => ({ modelSettings: { ...state.modelSettings, ...modelSettings } })),
-      chatWithGenerate: {},
-      setChatWithGenerate: (chatWithGenerate) => set((state) => ({ chatWithGenerate: { ...state.chatWithGenerate, ...chatWithGenerate } }))
-    }),
-    {
-      name: "mastra-agent-store"
-    }
-  )
-);
-
 const defaultModelSettings$1 = {
   maxRetries: 2,
   maxSteps: 5,
   temperature: 0.5,
   topP: 1
 };
-const AgentContext = createContext({});
-function AgentProvider({
-  agentId,
-  defaultGenerateOptions,
-  defaultStreamOptions,
-  children
-}) {
-  const {
-    modelSettings: modelSettingsStore,
-    setModelSettings: setModelSettingsStore,
-    chatWithGenerate: chatWithGenerateStore,
-    setChatWithGenerate: setChatWithGenerateStore
-  } = useAgentStore();
-  const chatWithGenerate = chatWithGenerateStore[agentId] || false;
-  const setChatWithGenerate = (chatWithGenerate2) => {
-    setChatWithGenerateStore({ [agentId]: chatWithGenerate2 });
-  };
-  const modelSettings = useMemo(() => {
-    if (modelSettingsStore[agentId]) return modelSettingsStore[agentId];
-    if (chatWithGenerate) {
-      return {
-        maxRetries: defaultGenerateOptions?.maxRetries ?? defaultModelSettings$1.maxRetries,
-        maxSteps: defaultGenerateOptions?.maxSteps ?? defaultModelSettings$1.maxSteps,
-        temperature: defaultGenerateOptions?.temperature ?? defaultModelSettings$1.temperature,
-        topP: defaultGenerateOptions?.topP ?? defaultModelSettings$1.topP,
-        ...defaultGenerateOptions
-      };
-    } else {
-      return {
-        maxRetries: defaultStreamOptions?.maxRetries ?? defaultModelSettings$1.maxRetries,
-        maxSteps: defaultStreamOptions?.maxSteps ?? defaultModelSettings$1.maxSteps,
-        temperature: defaultStreamOptions?.temperature ?? defaultModelSettings$1.temperature,
-        topP: defaultStreamOptions?.topP ?? defaultModelSettings$1.topP,
-        ...defaultStreamOptions
-      };
+function useAgentModelSettingsState({ agentId }) {
+  const [modelSettings, setModelSettingsState] = useState(void 0);
+  const [chatWithGenerate, setChatWithGenerateState] = useState(false);
+  const LOCAL_STORAGE_KEY = `mastra-agent-store-${agentId}`;
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        setModelSettingsState(parsed.modelSettings ?? void 0);
+        setChatWithGenerateState(parsed.chatWithGenerate ?? false);
+      }
+    } catch (e) {
+      console.error(e);
     }
-  }, [agentId, defaultGenerateOptions, defaultStreamOptions, chatWithGenerate, modelSettingsStore]);
-  const setModelSettings = (modelSettings2) => {
-    setModelSettingsStore({ [agentId]: modelSettings2 });
+  }, [LOCAL_STORAGE_KEY]);
+  useEffect(() => {
+    if (modelSettings) {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ modelSettings, chatWithGenerate, agentId }));
+    }
+  }, [modelSettings, chatWithGenerate, LOCAL_STORAGE_KEY]);
+  const setModelSettings = (modelSettingsValue) => setModelSettingsState((prev) => ({ ...prev, ...modelSettingsValue }));
+  const setChatWithGenerate = (chatWithGenerateValue) => setChatWithGenerateState(chatWithGenerateValue);
+  const resetAll = () => {
+    setModelSettingsState(defaultModelSettings$1);
+    setChatWithGenerate(false);
   };
-  const resetModelSettings = () => {
-    setModelSettingsStore({ [agentId]: null });
+  return {
+    modelSettings,
+    chatWithGenerate,
+    setModelSettings,
+    setChatWithGenerate,
+    resetAll
+  };
+}
+
+const AgentSettingsContext = createContext({});
+function AgentSettingsProvider({ children, agentId }) {
+  const { modelSettings, setModelSettings, chatWithGenerate, setChatWithGenerate, resetAll } = useAgentModelSettingsState({
+    agentId
+  });
+  const onChangeModelSettings = (modelSettings2) => {
+    setModelSettings(modelSettings2);
+  };
+  const onChangeChatWithGenerate = (chatWithGenerate2) => {
+    setChatWithGenerate(chatWithGenerate2);
+  };
+  const onReset = () => {
+    resetAll();
   };
   return /* @__PURE__ */ jsx(
-    AgentContext.Provider,
+    AgentSettingsContext.Provider,
     {
       value: {
-        modelSettings,
-        setModelSettings,
-        resetModelSettings,
-        chatWithGenerate,
-        setChatWithGenerate
+        modelSettings: modelSettings ?? defaultModelSettings$1,
+        setModelSettings: onChangeModelSettings,
+        resetModelSettings: onReset,
+        chatWithGenerate: chatWithGenerate ?? false,
+        setChatWithGenerate: onChangeChatWithGenerate
       },
       children
     }
   );
 }
+const useAgentSettings = () => {
+  return useContext(AgentSettingsContext);
+};
 
 const usePlaygroundStore = create()(
   persist(
@@ -5285,7 +5282,7 @@ const AgentChat = ({
   refreshThreadList,
   showFileSupport
 }) => {
-  const { modelSettings, chatWithGenerate } = useContext(AgentContext);
+  const { modelSettings, chatWithGenerate } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsx(
     MastraRuntimeProvider,
@@ -5998,7 +5995,10 @@ const Button = ({ className, as, size = "md", variant = "default", ...props }) =
         "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
         variantClasses$1[variant],
         sizeClasses[size],
-        className
+        className,
+        {
+          "cursor-not-allowed": props.disabled
+        }
       ),
       ...props
     }
@@ -6376,11 +6376,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), variant: "success", children: [
-        toSigFigs(span.duration / 1e3, 3),
+        toSigFigs(span.duration, 3),
         "ms"
       ] }) : /* @__PURE__ */ jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsx(X, {}), children: [
         "Failed in ",
-        toSigFigs(span.duration / 1e3, 3),
+        toSigFigs(span.duration, 3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -6478,6 +6478,218 @@ function AgentTracesInner({ className, traces, error }) {
   ] });
 }
 
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+const Entry = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon3", children: label }),
+    children
+  ] });
+};
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+const AgentAdvancedSettings = () => {
+  const { modelSettings, setModelSettings } = useAgentSettings();
+  const [isOpen, setIsOpen] = useState(false);
+  const collapsibleClassName = "rounded-lg border-sm border-border1 bg-surface3 overflow-clip";
+  const collapsibleTriggerClassName = "text-icon3 text-ui-lg font-medium flex items-center gap-2 w-full p-[10px] justify-between";
+  const collapsibleContentClassName = "bg-surface2 p-[10px] grid grid-cols-2 gap-[10px]";
+  return /* @__PURE__ */ jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
+      "Advanced Settings",
+      /* @__PURE__ */ jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "top-k",
+            type: "number",
+            value: modelSettings?.topK || "",
+            onChange: (e) => setModelSettings({ ...modelSettings, topK: e.target.value ? Number(e.target.value) : void 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "frequency-penalty",
+            type: "number",
+            value: modelSettings?.frequencyPenalty || "",
+            onChange: (e) => setModelSettings({
+              ...modelSettings,
+              frequencyPenalty: e.target.value ? Number(e.target.value) : void 0
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "presence-penalty",
+            type: "number",
+            value: modelSettings?.presencePenalty || "",
+            onChange: (e) => setModelSettings({
+              ...modelSettings,
+              presencePenalty: e.target.value ? Number(e.target.value) : void 0
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "max-tokens",
+            type: "number",
+            value: modelSettings?.maxTokens || "",
+            onChange: (e) => setModelSettings({
+              ...modelSettings,
+              maxTokens: e.target.value ? Number(e.target.value) : void 0
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "max-steps",
+            type: "number",
+            value: modelSettings?.maxSteps || "",
+            onChange: (e) => setModelSettings({
+              ...modelSettings,
+              maxSteps: e.target.value ? Number(e.target.value) : void 0
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "max-retries",
+            type: "number",
+            value: modelSettings?.maxRetries || "",
+            onChange: (e) => setModelSettings({
+              ...modelSettings,
+              maxRetries: e.target.value ? Number(e.target.value) : void 0
+            })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+function AgentModelSettings() {
+  const { modelSettings, setModelSettings, chatWithGenerate, setChatWithGenerate, resetModelSettings } = useAgentSettings();
+  return /* @__PURE__ */ jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
+    /* @__PURE__ */ jsxs("section", { className: "space-y-7", children: [
+      /* @__PURE__ */ jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          orientation: "horizontal",
+          value: chatWithGenerate ? "generate" : "stream",
+          onValueChange: (value) => setChatWithGenerate(value === "generate"),
+          className: "flex flex-row gap-4",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
+              /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
+              /* @__PURE__ */ jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+        /* @__PURE__ */ jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              value: [modelSettings?.temperature ?? -0.1],
+              max: 1,
+              min: -0.1,
+              step: 0.1,
+              onValueChange: (value) => setModelSettings({ ...modelSettings, temperature: value[0] < 0 ? void 0 : value[0] })
+            }
+          ),
+          /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.temperature ?? "n/a" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Entry, { label: "Top P", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              onValueChange: (value) => setModelSettings({ ...modelSettings, topP: value[0] < 0 ? void 0 : value[0] }),
+              value: [modelSettings?.topP ?? -0.1],
+              max: 1,
+              min: -0.1,
+              step: 0.1
+            }
+          ),
+          /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.topP ?? "n/a" })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("section", { className: "py-7", children: /* @__PURE__ */ jsx(AgentAdvancedSettings, {}) }),
+    /* @__PURE__ */ jsxs(Button, { onClick: () => resetModelSettings(), variant: "light", className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(RefreshCw, {}) }),
+      "Reset"
+    ] })
+  ] });
+}
+
 const convertMessage$1 = (message) => {
   return message;
 };
@@ -6895,18 +7107,21 @@ const VNextNetworkChatProvider = ({ children }) => {
   const [state, setState] = useState({});
   const { chatWithLoop } = useContext(NetworkContext);
   const handleStep = (uuid, record) => {
-    const addFinishStep = chatWithLoop && record.type === "step-finish" && record.payload?.id === "final-step";
-    const id = record?.type === "finish" ? "finish" : record.type === "start" ? "start" : record.payload?.id;
-    if (id.includes("mapping_")) return;
+    const addFinishStep = chatWithLoop && record.type === "step-finish" && record.payload?.id === "final-step" || record.type === "error";
+    let id = record?.type === "finish" ? "finish" : record.type === "start" ? "start" : record.payload?.id;
+    if (id?.includes("mapping_")) return;
     setState((prevState) => {
       const current = prevState[uuid];
+      if (record.type === "error") {
+        id = current?.executionSteps?.[current?.executionSteps.length - 1];
+      }
       const currentMetadata = current?.steps?.[id]?.metadata;
       let startTime = currentMetadata?.startTime;
       let endTime = currentMetadata?.endTime;
       if (record.type === "step-start") {
         startTime = Date.now();
       }
-      if (record.type === "step-finish") {
+      if (record.type === "step-finish" || record.type === "error") {
         endTime = Date.now();
       }
       return {
@@ -6919,7 +7134,7 @@ const VNextNetworkChatProvider = ({ children }) => {
             ...current?.steps,
             [id]: {
               ...current?.steps?.[id] || {},
-              [record.type]: record.payload,
+              [record.type]: record.payload || record?.error,
               metadata: {
                 startTime,
                 endTime
@@ -7353,11 +7568,16 @@ const getStepNodeAndEdge = ({
 }) => {
   let nextNodeIds = [];
   let nextStepIds = [];
-  if (nextStepFlow?.type === "step" || nextStepFlow?.type === "foreach" || nextStepFlow?.type === "loop") {
+  if (nextStepFlow?.type === "step" || nextStepFlow?.type === "foreach" || nextStepFlow?.type === "loop" || nextStepFlow?.type === "waitForEvent") {
     const nextStepId = allPrevNodeIds?.includes(nextStepFlow.step.id) ? `${nextStepFlow.step.id}-${yIndex + 1}` : nextStepFlow.step.id;
     nextNodeIds = [nextStepId];
     nextStepIds = [nextStepFlow.step.id];
   }
+  if (nextStepFlow?.type === "sleep" || nextStepFlow?.type === "sleepUntil") {
+    const nextStepId = allPrevNodeIds?.includes(nextStepFlow.id) ? `${nextStepFlow.id}-${yIndex + 1}` : nextStepFlow.id;
+    nextNodeIds = [nextStepId];
+    nextStepIds = [nextStepFlow.id];
+  }
   if (nextStepFlow?.type === "parallel") {
     nextNodeIds = nextStepFlow?.steps.map((step) => {
       const stepId = step.step.id;
@@ -7370,7 +7590,7 @@ const getStepNodeAndEdge = ({
     nextNodeIds = nextStepFlow?.serializedConditions.map((cond) => cond.id) || [];
     nextStepIds = nextStepFlow?.steps?.map((step) => step.step.id) || [];
   }
-  if (stepFlow.type === "step" || stepFlow.type === "foreach") {
+  if (stepFlow.type === "step" || stepFlow.type === "foreach" || stepFlow.type === "waitForEvent") {
     const hasGraph = stepFlow.step.component === "WORKFLOW";
     const nodeId = allPrevNodeIds?.includes(stepFlow.step.id) ? `${stepFlow.step.id}-${yIndex}` : stepFlow.step.id;
     const nodes = [
@@ -7400,7 +7620,8 @@ const getStepNodeAndEdge = ({
           withoutTopHandle: condition ? false : !prevNodeIds.length,
           withoutBottomHandle: !nextNodeIds.length,
           stepGraph: hasGraph ? stepFlow.step.serializedStepFlow : void 0,
-          mapConfig: stepFlow.step.mapConfig
+          mapConfig: stepFlow.step.mapConfig,
+          ...stepFlow.type === "waitForEvent" ? { event: stepFlow.event } : {}
         }
       }
     ];
@@ -7437,6 +7658,70 @@ const getStepNodeAndEdge = ({
     ];
     return { nodes, edges, nextPrevNodeIds: [nodeId], nextPrevStepIds: [stepFlow.step.id] };
   }
+  if (stepFlow.type === "sleep" || stepFlow.type === "sleepUntil") {
+    const nodeId = allPrevNodeIds?.includes(stepFlow.id) ? `${stepFlow.id}-${yIndex}` : stepFlow.id;
+    const nodes = [
+      ...condition ? [
+        {
+          id: condition.id,
+          position: { x: xIndex * 300, y: yIndex * 100 },
+          type: "condition-node",
+          data: {
+            label: condition.id,
+            previousStepId: prevStepIds[prevStepIds.length - 1],
+            nextStepId: stepFlow.id,
+            withoutTopHandle: false,
+            withoutBottomHandle: !nextNodeIds.length,
+            isLarge: true,
+            conditions: [{ type: "when", fnString: condition.fn }]
+          }
+        }
+      ] : [],
+      {
+        id: nodeId,
+        position: { x: xIndex * 300, y: (yIndex + (condition ? 1 : 0)) * 100 },
+        type: "default-node",
+        data: {
+          label: stepFlow.id,
+          withoutTopHandle: condition ? false : !prevNodeIds.length,
+          withoutBottomHandle: !nextNodeIds.length,
+          ...stepFlow.type === "sleepUntil" ? { date: stepFlow.date } : { duration: stepFlow.duration }
+        }
+      }
+    ];
+    const edges = [
+      ...!prevNodeIds.length ? [] : condition ? [
+        ...prevNodeIds.map((prevNodeId, i) => ({
+          id: `e${prevNodeId}-${condition.id}`,
+          source: prevNodeId,
+          data: { previousStepId: prevStepIds[i], nextStepId: stepFlow.id },
+          target: condition.id,
+          ...defaultEdgeOptions
+        })),
+        {
+          id: `e${condition.id}-${nodeId}`,
+          source: condition.id,
+          data: { previousStepId: prevStepIds[prevStepIds.length - 1], nextStepId: stepFlow.id },
+          target: nodeId,
+          ...defaultEdgeOptions
+        }
+      ] : prevNodeIds.map((prevNodeId, i) => ({
+        id: `e${prevNodeId}-${nodeId}`,
+        source: prevNodeId,
+        data: { previousStepId: prevStepIds[i], nextStepId: stepFlow.id },
+        target: nodeId,
+        ...defaultEdgeOptions
+      })),
+      ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId, i) => ({
+        id: `e${nodeId}-${nextNodeId}`,
+        source: nodeId,
+        data: { previousStepId: stepFlow.id, nextStepId: nextStepIds[i] },
+        target: nextNodeId,
+        ...defaultEdgeOptions
+      }))
+    ];
+    return { nodes, edges, nextPrevNodeIds: [nodeId], nextPrevStepIds: [stepFlow.id] };
+  }
   if (stepFlow.type === "loop") {
     const { step: _step, serializedCondition, loopType } = stepFlow;
     const hasGraph = _step.component === "WORKFLOW";
@@ -7621,10 +7906,6 @@ const Text = ({ className, weight, variant, as: Tag = "span", size, ...props })
   return /* @__PURE__ */ jsx(Tag, { className: cn(textVariants({ size, variant, weight, className })), ...props });
 };
 
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
 const ScrollArea = React.forwardRef(
   ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
     const areaRef = React.useRef(null);
@@ -7764,7 +8045,8 @@ const useCurrentRun = () => {
         endedAt: value.endedAt,
         status: value.status,
         output: value.output,
-        input: value.payload
+        input: value.payload,
+        resumeData: value.resumePayload
       }
     };
   }, {});
@@ -7796,18 +8078,22 @@ const CodeDialogContent = ({ data }) => {
 const WorkflowStepActionBar = ({
   input,
   output,
+  resumeData,
   error,
   mapConfig,
   stepName,
-  onShowTrace
+  onShowTrace,
+  onShowNestedGraph
 }) => {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [isResumeDataOpen, setIsResumeDataOpen] = useState(false);
   const [isErrorOpen, setIsErrorOpen] = useState(false);
   const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
   const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
   const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
-  return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || mapConfig) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+    onShowNestedGraph && /* @__PURE__ */ jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
     mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
       /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7828,6 +8114,16 @@ const WorkflowStepActionBar = ({
         /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: input }) })
       ] }) })
     ] }),
+    resumeData && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
+      /* @__PURE__ */ jsx(Dialog, { open: isResumeDataOpen, onOpenChange: setIsResumeDataOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+          stepName,
+          " resume data"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: resumeData }) })
+      ] }) })
+    ] }),
     output && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
       /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7961,7 +8257,7 @@ function WorkflowDefaultNode({
   parentWorkflowName
 }) {
   const { steps, isRunning, runId } = useCurrentRun();
-  const { label, description, withoutTopHandle, withoutBottomHandle } = data;
+  const { label, description, withoutTopHandle, withoutBottomHandle, mapConfig, event, duration, date } = data;
   const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
   const step = steps[fullLabel];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7972,14 +8268,17 @@ function WorkflowDefaultNode({
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
           step?.status === "success" && "ring-2 ring-accent1",
-          step?.status === "failed" && "ring-2 ring-accent2"
+          step?.status === "failed" && "ring-2 ring-accent2",
+          step?.status === "suspended" && "ring-2 ring-accent3",
+          step?.status === "waiting" && "ring-2 ring-accent5"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
               step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
               step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
               !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
             ] }),
@@ -7990,14 +8289,30 @@ function WorkflowDefaultNode({
             ] })
           ] }),
           description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          event && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "waits for event: ",
+            /* @__PURE__ */ jsx("strong", { children: event })
+          ] }),
+          duration && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "sleeps for ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              duration,
+              "ms"
+            ] })
+          ] }),
+          date && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "sleeps until ",
+            /* @__PURE__ */ jsx("strong", { children: new Date(date).toLocaleString() })
+          ] }),
           /* @__PURE__ */ jsx(
             WorkflowStepActionBar,
             {
               stepName: label,
               input: step?.input,
+              resumeData: step?.resumeData,
               output: step?.output,
               error: step?.error,
-              mapConfig: data.mapConfig,
+              mapConfig,
               onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0
             }
           )
@@ -8060,20 +8375,6 @@ function WorkflowLoopResultNode({ data }) {
   ] });
 }
 
-const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
 const ZoomSlider = forwardRef(({ className, ...props }) => {
   const { zoom } = useViewport();
   const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
@@ -8102,7 +8403,7 @@ const ZoomSlider = forwardRef(({ className, ...props }) => {
 });
 ZoomSlider.displayName = "ZoomSlider";
 
-function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
+function WorkflowNestedGraph({ stepGraph, open, workflowName, onShowTrace }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
   });
@@ -8111,11 +8412,11 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
   const [edges] = useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, onShowTrace, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, onShowTrace, ...props })
   };
   useEffect(() => {
     if (open) {
@@ -8155,24 +8456,22 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
 const WorkflowNestedGraphContext = createContext(
   {}
 );
-function WorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({
+  children,
+  onShowTrace
+}) {
   const [stepGraph, setStepGraph] = useState(null);
   const [parentStepGraphList, setParentStepGraphList] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [label, setLabel] = useState("");
   const [fullStep, setFullStep] = useState("");
-  const [switching, setSwitching] = useState(false);
   const closeNestedGraph = () => {
     if (parentStepGraphList.length) {
-      setSwitching(true);
       const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
       setStepGraph(lastStepGraph.stepGraph);
       setLabel(lastStepGraph.label);
       setFullStep(lastStepGraph.fullStep);
       setParentStepGraphList(parentStepGraphList.slice(0, -1));
-      setTimeout(() => {
-        setSwitching(false);
-      }, 500);
     } else {
       setOpenDialog(false);
       setStepGraph(null);
@@ -8186,16 +8485,12 @@ function WorkflowNestedGraphProvider({ children }) {
     fullStep: newFullStep
   }) => {
     if (stepGraph) {
-      setSwitching(true);
       setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
     }
     setLabel(newLabel);
     setFullStep(newFullStep);
     setStepGraph(newStepGraph);
     setOpenDialog(true);
-    setTimeout(() => {
-      setSwitching(false);
-    }, 500);
   };
   return /* @__PURE__ */ jsxs(
     WorkflowNestedGraphContext.Provider,
@@ -8207,15 +8502,23 @@ function WorkflowNestedGraphProvider({ children }) {
       children: [
         children,
         /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
-          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-3 left-3 z-50", children: [
             /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
               label,
               " workflow"
             ] })
           ] }),
-          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
-        ] }) }) })
+          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+            WorkflowNestedGraph,
+            {
+              stepGraph,
+              open: openDialog,
+              workflowName: fullStep,
+              onShowTrace
+            }
+          ) })
+        ] }) }) }, `${label}-${fullStep}`)
       ]
     }
   );
@@ -8223,19 +8526,14 @@ function WorkflowNestedGraphProvider({ children }) {
 
 function WorkflowNestedNode({
   data,
-  parentWorkflowName
+  parentWorkflowName,
+  onShowTrace
 }) {
-  const [isInputOpen, setIsInputOpen] = useState(false);
-  const [isOutputOpen, setIsOutputOpen] = useState(false);
-  const [isErrorOpen, setIsErrorOpen] = useState(false);
-  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
-  const { steps, isRunning } = useCurrentRun();
+  const { steps, isRunning, runId } = useCurrentRun();
   const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
   const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
   const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
   const step = steps[fullLabel];
-  const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
-  const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxs(
@@ -8262,49 +8560,19 @@ function WorkflowNestedNode({
             ] })
           ] }),
           description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
-            /* @__PURE__ */ jsx(Button, { onClick: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }), children: "View workflow" }),
-            mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " map config"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
-              ] }) })
-            ] }),
-            step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " input"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.input }) })
-              ] }) })
-            ] }),
-            step?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " output"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.output }) })
-              ] }) })
-            ] }),
-            step?.error && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
-              /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " error"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step?.error }) })
-              ] }) })
-            ] })
-          ] })
+          /* @__PURE__ */ jsx(
+            WorkflowStepActionBar,
+            {
+              stepName: label,
+              input: step?.input,
+              resumeData: step?.resumeData,
+              output: step?.output,
+              error: step?.error,
+              mapConfig,
+              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
+              onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph })
+            }
+          )
         ]
       }
     ),
@@ -8322,7 +8590,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { onShowTrace, ...props })
   };
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -8367,7 +8635,7 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { onShowTrace, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
     WorkflowGraphInner,
     {
       workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
@@ -8595,9 +8863,14 @@ const useResumeWorkflow = () => {
 };
 
 const LabelMappings = {
+  "Agent-Network-Outer-Workflow.routing-step": "Decision making process",
   "routing-step": "Decision making process",
   "agent-step": "Agent execution",
+  "Agent-Network-Outer-Workflow.agent-step": "Agent execution",
   "workflow-step": "Workflow execution",
+  "Agent-Network-Outer-Workflow.workflow-step": "Workflow execution",
+  toolStep: "Tool execution",
+  "Agent-Network-Outer-Workflow.toolStep": "Tool execution",
   "final-step": "Task completed"
 };
 const StepDropdown = () => {
@@ -8607,14 +8880,20 @@ const StepDropdown = () => {
   const id = message?.metadata?.custom?.id;
   if (!id) return /* @__PURE__ */ jsx("div", { children: "Something is wrong" });
   const currentState = state[id];
-  const latestStepId = currentState.executionSteps[currentState.executionSteps.length - 1];
+  const latestStepId = currentState.executionSteps ? currentState.executionSteps?.[currentState.executionSteps.length - 1] : "";
   const hasFinished = latestStepId === "finish";
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  const failed = Object.values(currentState?.steps || {}).some(
+    (step) => step?.["error"] || step?.["step-result"]?.status === "failed"
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 mb-2", children: [
     /* @__PURE__ */ jsxs(Button, { onClick: () => setIsExpanded(!isExpanded), children: [
-      hasFinished ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasFinished ? /* @__PURE__ */ jsx(Fragment, { children: failed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }) }),
+        "Failed"
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }) }),
         "Done"
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) }),
         "Thinking..."
       ] }),
@@ -8626,11 +8905,29 @@ const StepDropdown = () => {
 const Steps = ({ id }) => {
   const { state } = useVNextNetworkChat();
   const currentState = state[id];
-  return /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
+  return /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps?.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
 };
 const StepEntry = ({ stepId, step, runId }) => {
   const [expanded, setExpanded] = useState(false);
-  const stepResult = step["step-result"];
+  let stepResult = step["step-result"];
+  const stepError = step["error"];
+  if (stepId === "workflow-step" || stepId === "Agent-Network-Outer-Workflow.workflow-step") {
+    const parsedResult = JSON.parse(stepResult?.output?.result ?? "{}") ?? {};
+    if (!parsedResult?.runResult && stepResult?.status === "success") {
+      stepResult = {
+        ...stepResult,
+        status: "failed",
+        error: "Something went wrong"
+      };
+    }
+  }
+  if (stepError) {
+    stepResult = {
+      ...stepResult,
+      status: "failed",
+      error: stepError?.data?.error?.message
+    };
+  }
   if (stepId === "finish") {
     return /* @__PURE__ */ jsx("div", { className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: "Process completed" }) });
   }
@@ -8649,7 +8946,7 @@ const StepEntry = ({ stepId, step, runId }) => {
         ]
       }
     ),
-    stepId === "routing-step" && expanded && /* @__PURE__ */ jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
+    (stepId === "routing-step" || stepId === "Agent-Network-Outer-Workflow.routing-step") && expanded && /* @__PURE__ */ jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Selection reason:" }),
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.selectionReason || "N/A" })
@@ -8657,8 +8954,20 @@ const StepEntry = ({ stepId, step, runId }) => {
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Resource ID" }),
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.resourceId || "N/A" })
-      ] })
+      ] }),
+      stepResult?.error ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.error || "N/A" })
+      ] }) : null
     ] }),
+    (stepId === "agent-step" || stepId === "Agent-Network-Outer-Workflow.agent-step") && (stepError || stepResult?.error) && expanded && /* @__PURE__ */ jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepError?.message || stepError?.data?.error?.message || stepResult?.error || "N/A" })
+    ] }) }),
+    (stepId === "toolStep" || stepId === "Agent-Network-Outer-Workflow.toolStep") && (stepError || stepResult?.error) && expanded && /* @__PURE__ */ jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepError?.message || stepError?.data?.error?.message || stepResult?.error || "N/A" })
+    ] }) }),
     stepId === "final-step" && expanded && /* @__PURE__ */ jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Task:" }),
@@ -8669,7 +8978,7 @@ const StepEntry = ({ stepId, step, runId }) => {
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.iteration || "N/A" })
       ] })
     ] }),
-    stepId === "workflow-step" && stepResult?.output?.resourceId ? /* @__PURE__ */ jsx(
+    (stepId === "workflow-step" || stepId === "Agent-Network-Outer-Workflow.workflow-step") && stepResult?.output?.resourceId ? /* @__PURE__ */ jsx(
       WorkflowStepResultDialog,
       {
         open: expanded,
@@ -8690,7 +8999,7 @@ const WorkflowStepResultDialog = ({ open, onOpenChange, workflowId, runId }) =>
   ] }) }) }) });
 };
 const StatusIcon = ({ status }) => {
-  if (status === "error") {
+  if (status === "failed") {
     return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }) });
   }
   if (status === "success") {
@@ -8841,7 +9150,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -8857,7 +9166,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -8869,7 +9178,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -8932,26 +9241,30 @@ function VNextMastraNetworkRuntimeProvider({
     const hasFinished = Boolean(currentState?.steps?.["finish"]);
     if (!hasFinished) return;
     const workflowStep = currentState?.steps?.["workflow-step"];
-    if (!workflowStep) return;
+    const toolStep = currentState?.steps?.["toolStep"];
+    if (!workflowStep && !toolStep) return;
     const workflowStepResult = workflowStep?.["step-result"];
-    if (!workflowStepResult) return;
+    const toolStepResult = toolStep?.["step-result"];
+    if (!workflowStepResult && !toolStepResult) return;
     const workflowStepResultOutput = workflowStepResult?.output;
-    if (!workflowStepResultOutput) return;
+    const toolStepResultOutput = toolStepResult?.output;
+    if (!workflowStepResultOutput && !toolStepResultOutput) return;
     const run = async () => {
-      const parsedResult = JSON.parse(workflowStepResult?.output?.result ?? "{}") ?? {};
-      const runResult = parsedResult?.runResult ?? {};
-      const formatted = await formatJSON(JSON.stringify(runResult));
-      setMessages((msgs) => [
-        ...msgs,
-        { role: "assistant", content: [{ type: "text", text: `\`\`\`json
+      const parsedResult = workflowStepResult ? JSON.parse(workflowStepResult?.output?.result ?? "{}") ?? {} : { runResult: toolStepResultOutput?.result ?? {} };
+      if (parsedResult?.runResult) {
+        const runResult = parsedResult?.runResult ?? {};
+        const formatted = await formatJSON(JSON.stringify(runResult));
+        setMessages((msgs) => [
+          ...msgs,
+          { role: "assistant", content: [{ type: "text", text: `\`\`\`json
 ${formatted}\`\`\`` }] }
-      ]);
+        ]);
+      }
     };
     run();
   }, [currentState]);
   useEffect(() => {
-    const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
-    if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
+    if (messages.length === 0 || currentThreadId !== threadId) {
       const run = async (result, messageId) => {
         const formatted = await formatJSON(result);
         const finalResponse = `\`\`\`json
@@ -8966,84 +9279,219 @@ ${formatted}\`\`\``;
         });
       };
       if (initialMessages && threadId && memory) {
-        for (const message of initialMessages) {
+        let userMessage = "";
+        let iteration = 1;
+        const formattedMessages = [];
+        let assistantStep = freshAssistantStep();
+        for (let i = 0; i < initialMessages.length; i++) {
+          const message = initialMessages[i];
           if (message.role === "user") {
-            setMessages((currentConversation) => [...currentConversation, message]);
+            assistantStep = freshAssistantStep();
+            userMessage = message.content;
+            formattedMessages.push({
+              role: "user",
+              message
+            });
+            continue;
           }
           if (message.role === "assistant") {
-            const id2 = v4();
-            const formattedMessageId = v4();
-            const parts = message.parts;
-            const routingStep = parts?.[2];
-            const responseStep = parts?.[3];
-            const routingDecision = JSON.parse(routingStep?.text ?? "{}");
-            const resourceStepId = routingDecision?.resourceType === "agent" ? "agent-step" : "workflow-step";
-            let finalResponse = responseStep?.text ?? "";
+            const responseArray = message.parts ?? [];
+            let hasRoutingDecision = false;
+            let hasTaskCompleteDecision = false;
+            let directText = "";
+            let jsonStringResponse = "";
+            for (const part of responseArray) {
+              if (part.type === "text" && part.text) {
+                const parsed = safeParse(part.text);
+                if (parsed?.resourceId && parsed?.resourceType) {
+                  hasRoutingDecision = true;
+                  assistantStep.routingDecision = parsed;
+                }
+                if (typeof parsed?.isComplete === "boolean") {
+                  hasTaskCompleteDecision = true;
+                  assistantStep.taskCompleteDecision = parsed;
+                  if (parsed?.isComplete) {
+                    assistantStep.finalResponse = parsed.finalResult;
+                    formattedMessages.push({ role: "assistant", message: assistantStep });
+                    assistantStep = freshAssistantStep();
+                  }
+                }
+                if (!parsed || !parsed.resourceId && !parsed.runResult && typeof parsed.isComplete !== "boolean") {
+                  directText = part.text;
+                }
+                if (parsed && !parsed.resourceId && typeof parsed.isComplete !== "boolean") {
+                  jsonStringResponse = part.text;
+                }
+              }
+            }
+            if (!hasRoutingDecision && !hasTaskCompleteDecision) {
+              assistantStep.finalResponse = directText || jsonStringResponse;
+              if (assistantStep.routingDecision || assistantStep.finalResponse) {
+                formattedMessages.push({ role: "assistant", message: assistantStep });
+                assistantStep = freshAssistantStep();
+              }
+            }
+          }
+          if (i === initialMessages.length - 1 && (assistantStep.routingDecision || assistantStep.finalResponse)) {
+            formattedMessages.push({ role: "assistant", message: assistantStep });
+          }
+        }
+        for (const formattedMessage of formattedMessages) {
+          const { role, message } = formattedMessage;
+          if (role === "user") {
+            iteration = 1;
+            userMessage = message.content;
+            setMessages((currentConversation) => {
+              if (currentConversation.some((m) => m.id === message.id)) {
+                return currentConversation;
+              }
+              return [...currentConversation, message];
+            });
+          }
+          if (role === "assistant") {
+            const { id: id2, formattedMessageId, finalStepId, routingDecision, finalResponse, taskCompleteDecision } = message;
+            let resourceStepId = "";
+            if (routingDecision?.resourceType === "agent") resourceStepId = "agent-step";
+            if (routingDecision?.resourceType === "tool") resourceStepId = "toolStep";
+            if (routingDecision?.resourceType === "workflow") resourceStepId = "workflow-step";
             let runId = "";
             let runResult = {};
-            if (resourceStepId === "workflow-step") {
-              const parsedResult = JSON.parse(responseStep?.text ?? "{}") ?? {};
-              runResult = parsedResult?.runResult ?? {};
+            let finalStep = null;
+            let finalResult = "";
+            if (resourceStepId === "workflow-step" || resourceStepId === "toolStep") {
+              const parsedResult = JSON.parse(finalResponse ?? "{}") ?? {};
+              runResult = resourceStepId === "workflow-step" ? parsedResult?.runResult ?? {} : parsedResult ?? {};
               runId = parsedResult?.runId ?? "";
             }
+            if (taskCompleteDecision?.isComplete) {
+              finalStep = {
+                executionSteps: ["start", "routing-step", "final-step", "finish"],
+                runId: "",
+                steps: {
+                  start: {},
+                  "routing-step": {
+                    "step-result": {
+                      output: {
+                        selectionReason: taskCompleteDecision?.completionReason ?? ""
+                      },
+                      status: "success"
+                    }
+                  },
+                  "final-step": {
+                    "step-result": {
+                      output: {
+                        iteration,
+                        task: userMessage
+                      },
+                      status: "success"
+                    }
+                  },
+                  finish: {}
+                }
+              };
+              finalResult = taskCompleteDecision?.finalResult;
+            }
+            const routingStepFailed = resourceStepId === "workflow-step" || resourceStepId === "toolStep" ? Object.keys(runResult).length === 0 : !finalResponse;
             setState((currentState2) => {
               return {
                 ...currentState2,
-                [id2]: {
-                  executionSteps: ["start", "routing-step", resourceStepId, "finish"],
-                  runId,
-                  steps: {
-                    start: {},
-                    "routing-step": {
-                      "step-result": {
-                        output: routingDecision,
-                        status: "success"
-                      }
-                    },
-                    [resourceStepId]: {
-                      "step-result": {
-                        output: {
-                          resourceId: routingDecision?.resourceId
-                        },
-                        status: "success"
-                      }
-                    },
-                    finish: {}
+                ...finalStep ? { [finalStepId]: finalStep } : {
+                  [id2]: {
+                    executionSteps: ["start", "routing-step", resourceStepId, "finish"],
+                    runId,
+                    steps: {
+                      start: {},
+                      "routing-step": {
+                        "step-result": {
+                          output: routingDecision,
+                          status: routingDecision ? "success" : "failed",
+                          ...routingDecision ? {} : { error: "Something went wrong" }
+                        }
+                      },
+                      [resourceStepId]: {
+                        "step-result": {
+                          output: {
+                            resourceId: routingDecision?.resourceId,
+                            result: finalResponse ?? ""
+                          },
+                          status: routingStepFailed ? "failed" : "success",
+                          ...routingStepFailed ? { error: "Something went wrong" } : {}
+                        }
+                      },
+                      finish: {}
+                    }
                   }
                 }
               };
             });
             setMessages((currentConversation) => {
+              const assistantRoutingMessageExist = currentConversation.some(
+                (message2) => message2.metadata?.custom?.id === id2
+              );
+              const assistantResponseMessageExist = currentConversation.some(
+                (message2) => message2.metadata?.custom?.id === formattedMessageId
+              );
               return [
                 ...currentConversation,
-                {
-                  role: "assistant",
-                  metadata: {
-                    custom: {
-                      id: id2
-                    }
+                ...finalResult ? [
+                  {
+                    role: "assistant",
+                    metadata: {
+                      custom: {
+                        id: finalStepId
+                      }
+                    },
+                    content: [
+                      {
+                        type: "text",
+                        text: "start"
+                      }
+                    ]
                   },
-                  content: [
+                  {
+                    role: "assistant",
+                    content: [{ type: "text", text: finalResult }]
+                  }
+                ] : [
+                  ...assistantRoutingMessageExist ? [] : [
                     {
-                      type: "text",
-                      text: "start"
+                      role: "assistant",
+                      metadata: {
+                        custom: {
+                          id: id2
+                        }
+                      },
+                      content: [
+                        {
+                          type: "text",
+                          text: "start"
+                        }
+                      ]
                     }
-                  ]
-                },
-                {
-                  role: "assistant",
-                  content: [{ type: "text", text: resourceStepId === "workflow-step" ? "" : finalResponse }],
-                  metadata: {
-                    custom: {
-                      id: formattedMessageId
+                  ],
+                  ...assistantResponseMessageExist ? [] : [
+                    {
+                      role: "assistant",
+                      content: [
+                        {
+                          type: "text",
+                          text: resourceStepId === "workflow-step" || resourceStepId === "toolStep" ? "" : finalResponse
+                        }
+                      ],
+                      metadata: {
+                        custom: {
+                          id: formattedMessageId
+                        }
+                      }
                     }
-                  }
-                }
+                  ]
+                ]
               ];
             });
-            if (resourceStepId === "workflow-step") {
+            if ((resourceStepId === "workflow-step" || resourceStepId === "toolStep") && !routingStepFailed) {
               run(JSON.stringify(runResult), formattedMessageId);
             }
+            iteration++;
           }
         }
         setCurrentThreadId(threadId);
@@ -9119,9 +9567,10 @@ ${formatted}\`\`\``;
                     handleStep(runIdRef.current, { ...record, type: "finish" });
                     runIdRef.current = void 0;
                   }
-                } else if (record.type === "step-result" && record.payload?.id === "workflow-step") {
+                } else if (record.type === "step-result" && (record.payload?.id === "Agent-Network-Outer-Workflow.workflow-step" || record.payload?.id === "Agent-Network-Outer-Workflow.toolStep")) {
                   handleStep(runIdRef.current, record);
-                  const parsedResult = JSON.parse(record?.payload?.output?.result ?? "{}") ?? {};
+                  const result = record?.payload?.output?.result;
+                  const parsedResult = typeof result === "string" ? JSON.parse(record?.payload?.output?.result ?? "{}") ?? {} : { runResult: result };
                   const runResult = parsedResult?.runResult ?? {};
                   const formatedOutputId = v4();
                   setMessages((msgs) => [
@@ -9160,9 +9609,11 @@ ${formatted}\`\`\``;
             if (record.type === "step-finish" && record.payload?.id === "final-step") {
               runIdRef.current = void 0;
             }
-            setTimeout(() => {
-              refreshThreadList?.();
-            }, 500);
+            if (record.type === "start" || record.type === "step-start" || record.type === "finish") {
+              setTimeout(() => {
+                refreshThreadList?.();
+              }, 500);
+            }
           }
         );
       } else {
@@ -9178,9 +9629,6 @@ ${formatted}\`\`\``;
                 appendToLastMessage(record.argsTextDelta);
               } else if (record.type === "tool-call-streaming-start") {
                 setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
-                setTimeout(() => {
-                  refreshThreadList?.();
-                }, 500);
                 return;
               } else {
                 handleStep(runIdRef.current, record);
@@ -9208,9 +9656,11 @@ ${formatted}\`\`\``;
                 ];
               });
             }
-            setTimeout(() => {
-              refreshThreadList?.();
-            }, 500);
+            if (record.type === "start" || record.type === "step-start" || record.type === "finish") {
+              setTimeout(() => {
+                refreshThreadList?.();
+              }, 500);
+            }
           }
         );
       }
@@ -9231,6 +9681,21 @@ ${formatted}\`\`\``;
     children,
     " "
   ] });
+  function safeParse(str) {
+    try {
+      return JSON.parse(str);
+    } catch {
+      return void 0;
+    }
+  }
+  function freshAssistantStep() {
+    return {
+      id: v4(),
+      formattedMessageId: v4(),
+      finalStepId: v4(),
+      finalResponse: ""
+    };
+  }
 }
 
 const VNextNetworkChat = ({
@@ -10167,10 +10632,6 @@ class CustomZodProvider extends ZodProvider {
   }
 }
 
-const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
 function isEmptyZodObject(schema) {
   if (schema instanceof ZodObject) {
     return Object.keys(schema.shape).length === 0;
@@ -10249,9 +10710,13 @@ function CodeBlockDemo({
 }
 
 const WorkflowCard = ({ header, children, footer }) => {
+  const [expanded, setExpanded] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
-    /* @__PURE__ */ jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
-    children && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
+    /* @__PURE__ */ jsxs("button", { className: "py-1 px-2 flex items-center gap-3 justify-between w-full", onClick: () => setExpanded((s) => !s), children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("text-icon3 transition-transform -rotate-90", expanded && "rotate-0") }) })
+    ] }),
+    children && expanded && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
     footer && /* @__PURE__ */ jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
   ] });
 };
@@ -10454,33 +10919,59 @@ function LegacyWorkflowTrigger({
   ] }) });
 }
 
+const WorkflowStatus = ({ stepId, status, result }) => {
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
+          status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
+          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
+        /* @__PURE__ */ jsx(SyntaxHighlighter, { data: result })
+      ] })
+    }
+  );
+};
+
 function WorkflowTrigger({
   workflowId,
   setRunId,
   workflow,
   isLoading,
   createWorkflowRun,
-  startWorkflowRun,
   resumeWorkflow,
-  watchWorkflow,
-  watchResult,
-  isWatchingWorkflow,
-  isResumingWorkflow
+  streamWorkflow,
+  isStreamingWorkflow,
+  streamResult,
+  isResumingWorkflow,
+  isCancellingWorkflowRun,
+  cancelWorkflowRun
 }) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
+  const [innerRunId, setInnerRunId] = useState("");
+  const [cancelResponse, setCancelResponse] = useState(null);
   const triggerSchema = workflow?.inputSchema;
   const handleExecuteWorkflow = async (data) => {
     try {
       if (!workflow) return;
       setIsRunning(true);
+      setCancelResponse(null);
       setResult(null);
       const { runId } = await createWorkflowRun({ workflowId });
       setRunId?.(runId);
-      watchWorkflow({ workflowId, runId });
-      startWorkflowRun({ workflowId, runId, input: data, runtimeContext });
+      setInnerRunId(runId);
+      streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
       toast.error("Error executing workflow");
@@ -10488,9 +10979,9 @@ function WorkflowTrigger({
   };
   const handleResumeWorkflow = async (step) => {
     if (!workflow) return;
+    setCancelResponse(null);
     const { stepId, runId: prevRunId, resumeData } = step;
     const { runId } = await createWorkflowRun({ workflowId, prevRunId });
-    watchWorkflow({ workflowId, runId });
     await resumeWorkflow({
       step: stepId,
       runId,
@@ -10499,25 +10990,29 @@ function WorkflowTrigger({
       runtimeContext
     });
   };
-  const watchResultToUse = result ?? watchResult;
+  const handleCancelWorkflowRun = async () => {
+    const response = await cancelWorkflowRun({ workflowId, runId: innerRunId });
+    setCancelResponse(response);
+  };
+  const streamResultToUse = result ?? streamResult;
   useEffect(() => {
-    setIsRunning(isWatchingWorkflow);
-  }, [isWatchingWorkflow]);
+    setIsRunning(isStreamingWorkflow);
+  }, [isStreamingWorkflow]);
   useEffect(() => {
-    if (!watchResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
-    const suspended = Object.entries(watchResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
+    if (!streamResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
+    const suspended = Object.entries(streamResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
       stepId,
       runId: result.runId,
       suspendPayload: payload2,
       isLoading: false
     }));
     setSuspendedSteps(suspended);
-  }, [watchResultToUse, result]);
+  }, [streamResultToUse, result]);
   useEffect(() => {
-    if (watchResult) {
-      setResult(watchResult);
+    if (streamResult) {
+      setResult(streamResult);
     }
-  }, [watchResult]);
+  }, [streamResult]);
   if (isLoading) {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
@@ -10527,10 +11022,23 @@ function WorkflowTrigger({
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result || {};
+  const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      (isResumingWorkflow || isSuspendedSteps && isWatchingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+      result?.runId && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "light",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
+      (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
       ] }),
@@ -10539,7 +11047,7 @@ function WorkflowTrigger({
         {
           schema: zodInputSchema,
           defaultValues: payload,
-          isSubmitLoading: isWatchingWorkflow,
+          isSubmitLoading: isStreamingWorkflow,
           submitButtonLabel: "Run",
           onSubmit: (data) => {
             setPayload(data);
@@ -10556,8 +11064,9 @@ function WorkflowTrigger({
           children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
         }
       ) }),
-      !isWatchingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
-        const stepDefinition = workflow.steps[step.stepId];
+      !isStreamingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
+        const stepDefinition = workflow.allSteps[step.stepId];
+        if (!stepDefinition || stepDefinition.isWorkflow) return null;
         const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
         return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
           /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
@@ -10576,18 +11085,28 @@ function WorkflowTrigger({
               isSubmitLoading: isResumingWorkflow,
               submitButtonLabel: "Resume",
               onSubmit: (data) => {
+                const stepIds = step.stepId?.split(".");
                 handleResumeWorkflow({
-                  stepId: step.stepId,
+                  stepId: stepIds,
                   runId: step.runId,
                   suspendPayload: step.suspendPayload,
                   resumeData: data});
               }
             }
           )
-        ] });
-      })
+        ] }, step.stepId);
+      }),
+      hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
+          /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths).filter(([key, _]) => key !== "input" && !key.endsWith(".input")).map(([stepId, { status, output }]) => {
+            return /* @__PURE__ */ jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
+          }) })
+        ] })
+      ] })
     ] }),
-    result && /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsx(WorkflowJsonDialog, { result: restResult }) })
+    result && /* @__PURE__ */ jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsx(WorkflowJsonDialog, { result }) })
   ] });
 }
 const WorkflowJsonDialog = ({ result }) => {
@@ -10603,6 +11122,9 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }) }) })
   ] });
 };
+const CircleStopIcon = () => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
+};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {
@@ -11037,5 +11559,5 @@ function usePolling({
   };
 }
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
+export { AgentChat, AgentCoinIcon, AgentEvals, AgentIcon, AgentModelSettings, AgentNetworkCoinIcon, AgentSettingsContext, AgentSettingsProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useAgentSettings, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
 //# sourceMappingURL=index.es.js.map