@mastra/playground-ui 5.1.8 → 5.1.9

package/dist/index.cjs.js

@@ -28,16 +28,18 @@ const middleware = require('zustand/middleware');
 const dateFns = require('date-fns');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const react$1 = require('motion/react');
-const colors = require('./colors-Du4i-E0i.cjs');
+const colors = require('./colors-BjoU9dWU.cjs');
+const SliderPrimitive = require('@radix-ui/react-slider');
+const LabelPrimitive = require('@radix-ui/react-label');
+const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
 const react$2 = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
 const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
-const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-const SliderPrimitive = require('@radix-ui/react-slider');
 const useDebounce = require('use-debounce');
 const uuid = require('@lukeed/uuid');
 const prettier = require('prettier');
@@ -52,7 +54,6 @@ const reactDayPicker = require('react-day-picker');
 const PopoverPrimitive = require('@radix-ui/react-popover');
 const SelectPrimitive = require('@radix-ui/react-select');
 const zod = require('@autoform/zod');
-const LabelPrimitive = require('@radix-ui/react-label');
 const reactCodeBlock = require('react-code-block');
 const reactTable = require('@tanstack/react-table');
 
@@ -78,13 +79,14 @@ const TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(Toolti
 const AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AvatarPrimitive);
 const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
+const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
+const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
+const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
 const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
-const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
-const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new clientJs.MastraClient({
@@ -4759,7 +4761,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4775,7 +4777,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4787,7 +4789,7 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon$2 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -5218,83 +5220,79 @@ function MastraRuntimeProvider({
   ] });
 }
 
-const useAgentStore = zustand.create()(
-  middleware.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 = React.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 = React.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] = React.useState(void 0);
+  const [chatWithGenerate, setChatWithGenerateState] = React.useState(false);
+  const LOCAL_STORAGE_KEY = `mastra-agent-store-${agentId}`;
+  React.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]);
+  React.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 = React.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__ */ jsxRuntime.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 React.useContext(AgentSettingsContext);
+};
 
 const usePlaygroundStore = zustand.create()(
   middleware.persist(
@@ -5317,7 +5315,7 @@ const AgentChat = ({
   refreshThreadList,
   showFileSupport
 }) => {
-  const { modelSettings, chatWithGenerate } = React.useContext(AgentContext);
+  const { modelSettings, chatWithGenerate } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsxRuntime.jsx(
     MastraRuntimeProvider,
@@ -6030,7 +6028,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
     }
@@ -6408,11 +6409,11 @@ function SpanDetail() {
         span.name
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 items-center", children: span.status.code === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(LatencyIcon, {}), variant: "success", children: [
-        toSigFigs(span.duration / 1e3, 3),
+        toSigFigs(span.duration, 3),
         "ms"
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "error", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), children: [
         "Failed in ",
-        toSigFigs(span.duration / 1e3, 3),
+        toSigFigs(span.duration, 3),
         "ms"
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
@@ -6510,6 +6511,218 @@ function AgentTracesInner({ className, traces, error }) {
   ] });
 }
 
+const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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__namespace.Root.displayName;
+
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+
+const RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
+const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+
+const Entry = ({ label, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon3", children: label }),
+    children
+  ] });
+};
+
+const Collapsible = CollapsiblePrimitive__namespace.Root;
+const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
+
+const AgentAdvancedSettings = () => {
+  const { modelSettings, setModelSettings } = useAgentSettings();
+  const [isOpen, setIsOpen] = React.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__ */ jsxRuntime.jsxs(Collapsible, { className: collapsibleClassName, open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: collapsibleTriggerClassName, children: [
+      "Advanced Settings",
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("transition-transform", isOpen ? "rotate-0" : "-rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleContent, { className: collapsibleContentClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "top-k", children: "Top K" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "frequency-penalty", children: "Frequency Penalty" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "presence-penalty", children: "Presence Penalty" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-tokens", children: "Max Tokens" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-steps", children: "Max Steps" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", className: "text-icon3", variant: "ui-sm", htmlFor: "max-retries", children: "Max Retries" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-5 text-xs py-2 pb-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-7", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Chat Method", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        RadioGroup,
+        {
+          orientation: "horizontal",
+          value: chatWithGenerate ? "generate" : "stream",
+          onValueChange: (value) => setChatWithGenerate(value === "generate"),
+          className: "flex flex-row gap-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "generate", id: "generate", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "generate", children: "Generate" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "stream", id: "stream", className: "text-icon6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-icon6 text-ui-md", htmlFor: "stream", children: "Stream" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Temperature", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.temperature ?? "n/a" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Entry, { label: "Top P", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon3", children: modelSettings?.topP ?? "n/a" })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-7", children: /* @__PURE__ */ jsxRuntime.jsx(AgentAdvancedSettings, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => resetModelSettings(), variant: "light", className: "w-full", size: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}) }),
+      "Reset"
+    ] })
+  ] });
+}
+
 const convertMessage$1 = (message) => {
   return message;
 };
@@ -6927,18 +7140,21 @@ const VNextNetworkChatProvider = ({ children }) => {
   const [state, setState] = React.useState({});
   const { chatWithLoop } = React.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 {
@@ -6951,7 +7167,7 @@ const VNextNetworkChatProvider = ({ children }) => {
             ...current?.steps,
             [id]: {
               ...current?.steps?.[id] || {},
-              [record.type]: record.payload,
+              [record.type]: record.payload || record?.error,
               metadata: {
                 startTime,
                 endTime
@@ -7385,11 +7601,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;
@@ -7402,7 +7623,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 = [
@@ -7432,7 +7653,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 } : {}
         }
       }
     ];
@@ -7469,6 +7691,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";
@@ -7653,10 +7939,6 @@ const Text = ({ className, weight, variant, as: Tag = "span", size, ...props })
   return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn(textVariants({ size, variant, weight, className })), ...props });
 };
 
-const Collapsible = CollapsiblePrimitive__namespace.Root;
-const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
-
 const ScrollArea = React__namespace.forwardRef(
   ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
     const areaRef = React__namespace.useRef(null);
@@ -7796,7 +8078,8 @@ const useCurrentRun = () => {
         endedAt: value.endedAt,
         status: value.status,
         output: value.output,
-        input: value.payload
+        input: value.payload,
+        resumeData: value.resumePayload
       }
     };
   }, {});
@@ -7828,18 +8111,22 @@ const CodeDialogContent = ({ data }) => {
 const WorkflowStepActionBar = ({
   input,
   output,
+  resumeData,
   error,
   mapConfig,
   stepName,
-  onShowTrace
+  onShowTrace,
+  onShowNestedGraph
 }) => {
   const [isInputOpen, setIsInputOpen] = React.useState(false);
   const [isOutputOpen, setIsOutputOpen] = React.useState(false);
+  const [isResumeDataOpen, setIsResumeDataOpen] = React.useState(false);
   const [isErrorOpen, setIsErrorOpen] = React.useState(false);
   const [isMapConfigOpen, setIsMapConfigOpen] = React.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || mapConfig) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
     mapConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
       /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7860,6 +8147,16 @@ const WorkflowStepActionBar = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: input }) })
       ] }) })
     ] }),
+    resumeData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsResumeDataOpen(true), children: "Resume data" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isResumeDataOpen, onOpenChange: setIsResumeDataOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+          stepName,
+          " resume data"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: resumeData }) })
+      ] }) })
+    ] }),
     output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
       /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7993,7 +8290,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8004,14 +8301,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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             isRunning && /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
               step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-icon3" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
               step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
               !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
             ] }),
@@ -8022,14 +8322,30 @@ function WorkflowDefaultNode({
             ] })
           ] }),
           description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          event && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "waits for event: ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: event })
+          ] }),
+          duration && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "sleeps for ",
+            /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+              duration,
+              "ms"
+            ] })
+          ] }),
+          date && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: [
+            "sleeps until ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: new Date(date).toLocaleString() })
+          ] }),
           /* @__PURE__ */ jsxRuntime.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
             }
           )
@@ -8092,20 +8408,6 @@ function WorkflowLoopResultNode({ data }) {
   ] });
 }
 
-const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SliderPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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__namespace.Root.displayName;
-
 const ZoomSlider = React.forwardRef(({ className, ...props }) => {
   const { zoom } = react$2.useViewport();
   const { zoomTo, zoomIn, zoomOut, fitView } = react$2.useReactFlow();
@@ -8134,7 +8436,7 @@ const ZoomSlider = React.forwardRef(({ className, ...props }) => {
 });
 ZoomSlider.displayName = "ZoomSlider";
 
-function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
+function WorkflowNestedGraph({ stepGraph, open, workflowName, onShowTrace }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
   });
@@ -8143,11 +8445,11 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
   const [edges] = react$2.useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, onShowTrace, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, onShowTrace, ...props })
   };
   React.useEffect(() => {
     if (open) {
@@ -8187,24 +8489,22 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
 const WorkflowNestedGraphContext = React.createContext(
   {}
 );
-function WorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({
+  children,
+  onShowTrace
+}) {
   const [stepGraph, setStepGraph] = React.useState(null);
   const [parentStepGraphList, setParentStepGraphList] = React.useState([]);
   const [openDialog, setOpenDialog] = React.useState(false);
   const [label, setLabel] = React.useState("");
   const [fullStep, setFullStep] = React.useState("");
-  const [switching, setSwitching] = React.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);
@@ -8218,16 +8518,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__ */ jsxRuntime.jsxs(
     WorkflowNestedGraphContext.Provider,
@@ -8239,15 +8535,23 @@ function WorkflowNestedGraphProvider({ children }) {
       children: [
         children,
         /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-3 left-3 z-50", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
               label,
               " workflow"
             ] })
           ] }),
-          switching ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
-        ] }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            WorkflowNestedGraph,
+            {
+              stepGraph,
+              open: openDialog,
+              workflowName: fullStep,
+              onShowTrace
+            }
+          ) })
+        ] }) }) }, `${label}-${fullStep}`)
       ]
     }
   );
@@ -8255,19 +8559,14 @@ function WorkflowNestedGraphProvider({ children }) {
 
 function WorkflowNestedNode({
   data,
-  parentWorkflowName
+  parentWorkflowName,
+  onShowTrace
 }) {
-  const [isInputOpen, setIsInputOpen] = React.useState(false);
-  const [isOutputOpen, setIsOutputOpen] = React.useState(false);
-  const [isErrorOpen, setIsErrorOpen] = React.useState(false);
-  const [isMapConfigOpen, setIsMapConfigOpen] = React.useState(false);
-  const { steps, isRunning } = useCurrentRun();
+  const { steps, isRunning, runId } = useCurrentRun();
   const { showNestedGraph } = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8294,49 +8593,19 @@ function WorkflowNestedNode({
             ] })
           ] }),
           description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { onClick: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }), children: "View workflow" }),
-            mapConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " map config"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: mapConfig }) })
-              ] }) })
-            ] }),
-            step?.input && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " input"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.input }) })
-              ] }) })
-            ] }),
-            step?.output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " output"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.output }) })
-              ] }) })
-            ] }),
-            step?.error && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
-                  label,
-                  " error"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step?.error }) })
-              ] }) })
-            ] })
-          ] })
+          /* @__PURE__ */ jsxRuntime.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 })
+            }
+          )
         ]
       }
     ),
@@ -8354,7 +8623,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { onShowTrace, ...props })
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
@@ -8399,7 +8668,7 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { onShowTrace, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowGraphInner,
     {
       workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
@@ -8627,9 +8896,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 = () => {
@@ -8639,14 +8913,20 @@ const StepDropdown = () => {
   const id = message?.metadata?.custom?.id;
   if (!id) return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+  const failed = Object.values(currentState?.steps || {}).some(
+    (step) => step?.["error"] || step?.["step-result"]?.status === "failed"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => setIsExpanded(!isExpanded), children: [
-      hasFinished ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      hasFinished ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: failed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }) }),
+        "Failed"
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }) }),
         "Done"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) }),
         "Thinking..."
       ] }),
@@ -8658,11 +8938,29 @@ const StepDropdown = () => {
 const Steps = ({ id }) => {
   const { state } = useVNextNetworkChat();
   const currentState = state[id];
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsxRuntime.jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps?.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsxRuntime.jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
 };
 const StepEntry = ({ stepId, step, runId }) => {
   const [expanded, setExpanded] = React.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__ */ jsxRuntime.jsx("div", { className: "bg-surface4 py-2 px-3 text-icon6 flex items-center gap-4 justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: "Process completed" }) });
   }
@@ -8681,7 +8979,7 @@ const StepEntry = ({ stepId, step, runId }) => {
         ]
       }
     ),
-    stepId === "routing-step" && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
+    (stepId === "routing-step" || stepId === "Agent-Network-Outer-Workflow.routing-step") && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Selection reason:" }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.selectionReason || "N/A" })
@@ -8689,8 +8987,20 @@ const StepEntry = ({ stepId, step, runId }) => {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Resource ID" }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.resourceId || "N/A" })
-      ] })
+      ] }),
+      stepResult?.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "bg-surface1 p-3 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepError?.message || stepError?.data?.error?.message || stepResult?.error || "N/A" })
+    ] }) }),
     stepId === "final-step" && expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Task:" }),
@@ -8701,7 +9011,7 @@ const StepEntry = ({ stepId, step, runId }) => {
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.iteration || "N/A" })
       ] })
     ] }),
-    stepId === "workflow-step" && stepResult?.output?.resourceId ? /* @__PURE__ */ jsxRuntime.jsx(
+    (stepId === "workflow-step" || stepId === "Agent-Network-Outer-Workflow.workflow-step") && stepResult?.output?.resourceId ? /* @__PURE__ */ jsxRuntime.jsx(
       WorkflowStepResultDialog,
       {
         open: expanded,
@@ -8722,7 +9032,7 @@ const WorkflowStepResultDialog = ({ open, onOpenChange, workflowId, runId }) =>
   ] }) }) }) });
 };
 const StatusIcon = ({ status }) => {
-  if (status === "error") {
+  if (status === "failed") {
     return /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }) });
   }
   if (status === "success") {
@@ -8873,7 +9183,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -8889,7 +9199,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -8901,7 +9211,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -8964,26 +9274,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]);
   React.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
@@ -8998,84 +9312,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 = uuid.v4();
-            const formattedMessageId = uuid.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);
@@ -9151,9 +9600,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 = uuid.v4();
                   setMessages((msgs) => [
@@ -9192,9 +9642,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 {
@@ -9210,9 +9662,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);
@@ -9240,9 +9689,11 @@ ${formatted}\`\`\``;
                 ];
               });
             }
-            setTimeout(() => {
-              refreshThreadList?.();
-            }, 500);
+            if (record.type === "start" || record.type === "step-start" || record.type === "finish") {
+              setTimeout(() => {
+                refreshThreadList?.();
+              }, 500);
+            }
           }
         );
       }
@@ -9263,6 +9714,21 @@ ${formatted}\`\`\``;
     children,
     " "
   ] });
+  function safeParse(str) {
+    try {
+      return JSON.parse(str);
+    } catch {
+      return void 0;
+    }
+  }
+  function freshAssistantStep() {
+    return {
+      id: uuid.v4(),
+      formattedMessageId: uuid.v4(),
+      finalStepId: uuid.v4(),
+      finalResponse: ""
+    };
+  }
 }
 
 const VNextNetworkChat = ({
@@ -10199,10 +10665,6 @@ class CustomZodProvider extends zod.ZodProvider {
   }
 }
 
-const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
-
 function isEmptyZodObject(schema) {
   if (schema instanceof z.ZodObject) {
     return Object.keys(schema.shape).length === 0;
@@ -10281,9 +10743,13 @@ function CodeBlockDemo({
 }
 
 const WorkflowCard = ({ header, children, footer }) => {
+  const [expanded, setExpanded] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t-sm border-border1", children }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "py-1 px-2 flex items-center gap-3 justify-between w-full", onClick: () => setExpanded((s) => !s), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("text-icon3 transition-transform -rotate-90", expanded && "rotate-0") }) })
+    ] }),
+    children && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t-sm border-border1", children }),
     footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
   ] });
 };
@@ -10486,33 +10952,59 @@ function LegacyWorkflowTrigger({
   ] }) });
 }
 
+const WorkflowStatus = ({ stepId, status, result }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-accent3" }),
+          status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
+          status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
+        /* @__PURE__ */ jsxRuntime.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 } = React.useContext(WorkflowRunContext);
   const [suspendedSteps, setSuspendedSteps] = React.useState([]);
   const [isRunning, setIsRunning] = React.useState(false);
+  const [innerRunId, setInnerRunId] = React.useState("");
+  const [cancelResponse, setCancelResponse] = React.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);
       sonner.toast.error("Error executing workflow");
@@ -10520,9 +11012,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,
@@ -10531,25 +11023,29 @@ function WorkflowTrigger({
       runtimeContext
     });
   };
-  const watchResultToUse = result ?? watchResult;
+  const handleCancelWorkflowRun = async () => {
+    const response = await cancelWorkflowRun({ workflowId, runId: innerRunId });
+    setCancelResponse(response);
+  };
+  const streamResultToUse = result ?? streamResult;
   React.useEffect(() => {
-    setIsRunning(isWatchingWorkflow);
-  }, [isWatchingWorkflow]);
+    setIsRunning(isStreamingWorkflow);
+  }, [isStreamingWorkflow]);
   React.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]);
   React.useEffect(() => {
-    if (watchResult) {
-      setResult(watchResult);
+    if (streamResult) {
+      setResult(streamResult);
     }
-  }, [watchResult]);
+  }, [streamResult]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10" }),
@@ -10559,10 +11055,23 @@ function WorkflowTrigger({
   if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result || {};
+  const workflowActivePaths = streamResultToUse?.payload?.workflowState?.steps ?? {};
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      (isResumingWorkflow || isSuspendedSteps && isWatchingWorkflow) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "light",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
+      (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
       ] }),
@@ -10571,7 +11080,7 @@ function WorkflowTrigger({
         {
           schema: zodInputSchema,
           defaultValues: payload,
-          isSubmitLoading: isWatchingWorkflow,
+          isSubmitLoading: isStreamingWorkflow,
           submitButtonLabel: "Run",
           onSubmit: (data) => {
             setPayload(data);
@@ -10588,8 +11097,9 @@ function WorkflowTrigger({
           children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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(superjson.parse(stepDefinition.resumeSchema))) : z.z.record(z.z.string(), z.z.any());
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
@@ -10608,18 +11118,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(WorkflowStatus, { stepId, status, result: output ?? {} }, stepId);
+          }) })
+        ] })
+      ] })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result: restResult }) })
+    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result }) })
   ] });
 }
 const WorkflowJsonDialog = ({ result }) => {
@@ -10635,6 +11155,9 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }) }) })
   ] });
 };
+const CircleStopIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
+};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {
@@ -11071,11 +11594,12 @@ function usePolling({
 
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
-exports.AgentContext = AgentContext;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
+exports.AgentModelSettings = AgentModelSettings;
 exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
-exports.AgentProvider = AgentProvider;
+exports.AgentSettingsContext = AgentSettingsContext;
+exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentTraces = AgentTraces;
 exports.AiIcon = AiIcon;
 exports.ApiIcon = ApiIcon;
@@ -11104,6 +11628,7 @@ exports.EntityContent = EntityContent;
 exports.EntityDescription = EntityDescription;
 exports.EntityIcon = EntityIcon;
 exports.EntityName = EntityName;
+exports.Entry = Entry;
 exports.EntryCell = EntryCell;
 exports.EnvIcon = EnvIcon;
 exports.EvaluatorCoinIcon = EvaluatorCoinIcon;
@@ -11136,6 +11661,8 @@ exports.NetworkContext = NetworkContext;
 exports.NetworkProvider = NetworkProvider;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PromptIcon = PromptIcon;
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupItem = RadioGroupItem;
 exports.RepoIcon = RepoIcon;
 exports.Row = Row;
 exports.ScoreIcon = ScoreIcon;
@@ -11167,6 +11694,7 @@ exports.WorkflowRunProvider = WorkflowRunProvider;
 exports.WorkflowRuns = WorkflowRuns;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
+exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
 exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;