@mastra/playground-ui 6.2.2 → 6.2.3-alpha.1

package/dist/index.cjs.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const clientJs = require('@mastra/client-js');
-const react$2 = require('@assistant-ui/react');
+const react$3 = require('@assistant-ui/react');
 const lucideReact = require('lucide-react');
+const React = require('react');
 const reactSlot = require('@radix-ui/react-slot');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
 const AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -21,26 +20,27 @@ const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
 const DialogPrimitive = require('@radix-ui/react-dialog');
-const useDebounce = require('use-debounce');
-const zustand = require('zustand');
-const middleware = require('zustand/middleware');
-const reactQuery = require('@tanstack/react-query');
 const react = 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 colors = require('./colors-DLwJ7rFA.cjs');
 const prettier = require('prettier');
 const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
-const colors = require('./colors-DLwJ7rFA.cjs');
+const SliderPrimitive = require('@radix-ui/react-slider');
 const jsonSchemaToZod = require('json-schema-to-zod');
 const superjson = require('superjson');
 const z = require('zod');
+const reactCodeBlock = require('react-code-block');
+const zustand = require('zustand');
+const middleware = require('zustand/middleware');
 const react$1 = require('@autoform/react');
 const CheckboxPrimitive = require('@radix-ui/react-checkbox');
 const dateFns = require('date-fns');
+const useDebounce = require('use-debounce');
 const reactDayPicker = require('react-day-picker');
 const PopoverPrimitive = require('@radix-ui/react-popover');
 const SelectPrimitive = require('@radix-ui/react-select');
@@ -48,18 +48,20 @@ const uuid = require('@lukeed/uuid');
 const LabelPrimitive = require('@radix-ui/react-label');
 const v4 = require('@autoform/zod/v4');
 const v3 = require('zod/v3');
-const reactCodeBlock = require('react-code-block');
-const SliderPrimitive = require('@radix-ui/react-slider');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+const react$2 = require('@mastra/react');
+const reactQuery = require('@tanstack/react-query');
 const reactTable = require('@tanstack/react-table');
 const Markdown = require('react-markdown');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
-const reactDom = require('react-dom');
-const react$3 = require('motion/react');
+const clientJs = require('@mastra/client-js');
+const react$4 = require('motion/react');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const HoverCard = require('@radix-ui/react-hover-card');
+const dnd = require('@hello-pangea/dnd');
+const SwitchPrimitives = require('@radix-ui/react-switch');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const runtimeContext = require('@mastra/core/runtime-context');
 const format = require('date-fns/format');
@@ -88,43 +90,19 @@ const AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AvatarP
 const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 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 SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
+const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 
-const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
-  return new clientJs.MastraClient({
-    baseUrl: baseUrl || "",
-    // only add the header if the baseUrl is not provided i.e it's a local dev environment
-    headers: !baseUrl ? { ...mastraClientHeaders, "x-mastra-dev-playground": "true" } : mastraClientHeaders
-  });
-};
-
-const MastraClientContext = React.createContext(void 0);
-const MastraClientProvider = ({
-  children,
-  baseUrl,
-  headers
-}) => {
-  const client = createMastraClient(baseUrl, headers);
-  return /* @__PURE__ */ jsxRuntime.jsx(MastraClientContext.Provider, { value: { client }, children });
-};
-const useMastraClient = () => {
-  const context = React.useContext(MastraClientContext);
-  if (context === void 0) {
-    throw new Error("useMastraClient must be used within a MastraClientProvider");
-  }
-  return context.client;
-};
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
@@ -4538,244 +4516,254 @@ const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
   );
 };
 
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
-
-const usePlaygroundStore = zustand.create()(
-  middleware.persist(
-    (set) => ({
-      runtimeContext: {},
-      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
-    }),
-    {
-      name: "mastra-playground-store"
+function convertWorkflowRunStateToWatchResult(runState) {
+  const runId = runState.runId;
+  const steps = {};
+  const context = runState.context || {};
+  Object.entries(context).forEach(([stepId, stepResult]) => {
+    if (stepId !== "input" && "status" in stepResult) {
+      const result = stepResult;
+      steps[stepId] = {
+        status: result.status,
+        output: "output" in result ? result.output : void 0,
+        payload: "payload" in result ? result.payload : void 0,
+        resumePayload: "resumePayload" in result ? result.resumePayload : void 0,
+        error: "error" in result ? result.error : void 0,
+        startedAt: "startedAt" in result ? result.startedAt : Date.now(),
+        endedAt: "endedAt" in result ? result.endedAt : void 0,
+        suspendedAt: "suspendedAt" in result ? result.suspendedAt : void 0,
+        resumedAt: "resumedAt" in result ? result.resumedAt : void 0
+      };
     }
-  )
-);
-
-const useWorkflow = (workflowId) => {
-  const client = useMastraClient();
-  const { runtimeContext } = usePlaygroundStore();
-  return reactQuery.useQuery({
-    queryKey: ["workflow", workflowId],
-    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
-    enabled: Boolean(workflowId),
-    retry: false,
-    refetchOnWindowFocus: false,
-    throwOnError: false
   });
-};
-const useLegacyWorkflow = (workflowId) => {
-  const [legacyWorkflow, setLegacyWorkflow] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const client = useMastraClient();
-  React.useEffect(() => {
-    const fetchWorkflow = async () => {
-      setIsLoading(true);
-      try {
-        if (!workflowId) {
-          setLegacyWorkflow(null);
-          setIsLoading(false);
-          return;
-        }
-        const { runtimeContext } = usePlaygroundStore.getState();
-        const res = await client.getLegacyWorkflow(workflowId).details(runtimeContext);
-        if (!res) {
-          setLegacyWorkflow(null);
-          console.error("Error fetching legacy workflow");
-          sonner.toast.error("Error fetching legacy workflow");
-          return;
+  const status = determineWorkflowStatus(steps);
+  return {
+    type: "watch",
+    payload: {
+      workflowState: {
+        status,
+        steps,
+        result: runState.value,
+        payload: context.input,
+        error: void 0
+      }
+    },
+    eventTimestamp: new Date(runState.timestamp),
+    runId
+  };
+}
+function determineWorkflowStatus(steps) {
+  const stepStatuses = Object.values(steps).map((step) => step.status);
+  if (stepStatuses.includes("failed")) {
+    return "failed";
+  }
+  if (stepStatuses.includes("suspended")) {
+    return "suspended";
+  }
+  if (stepStatuses.every((status) => status === "success")) {
+    return "success";
+  }
+  return "running";
+}
+const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
+  if (chunk.type === "workflow-start") {
+    return {
+      ...prev,
+      runId: chunk.runId,
+      eventTimestamp: /* @__PURE__ */ new Date(),
+      payload: {
+        ...prev?.payload || {},
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: "running",
+          steps: {}
         }
-        const steps = res.steps;
-        const stepsWithWorkflow = await Promise.all(
-          Object.values(steps)?.map(async (step) => {
-            if (!step.workflowId) return step;
-            const wFlow = await client.getLegacyWorkflow(step.workflowId).details(runtimeContext);
-            if (!wFlow) return step;
-            return { ...step, stepGraph: wFlow.stepGraph, stepSubscriberGraph: wFlow.stepSubscriberGraph };
-          })
-        );
-        const _steps = stepsWithWorkflow.reduce((acc, b) => {
-          return { ...acc, [b.id]: b };
-        }, {});
-        setLegacyWorkflow({ ...res, steps: _steps });
-      } catch (error) {
-        setLegacyWorkflow(null);
-        console.error("Error fetching legacy workflow", error);
-        sonner.toast.error("Error fetching legacy workflow");
-      } finally {
-        setIsLoading(false);
       }
     };
-    fetchWorkflow();
-  }, [workflowId]);
-  return { legacyWorkflow, isLoading };
-};
-const useExecuteWorkflow = () => {
-  const client = useMastraClient();
-  const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
-    try {
-      const workflow = client.getLegacyWorkflow(workflowId);
-      const { runId: newRunId } = await workflow.createRun({ runId: prevRunId });
-      return { runId: newRunId };
-    } catch (error) {
-      console.error("Error creating workflow run:", error);
-      throw error;
-    }
-  };
-  const startLegacyWorkflowRun = async ({
-    workflowId,
-    runId,
-    input
-  }) => {
-    try {
-      const workflow = client.getLegacyWorkflow(workflowId);
-      await workflow.start({ runId, triggerData: input || {} });
-    } catch (error) {
-      console.error("Error starting workflow run:", error);
-      throw error;
-    }
-  };
-  return {
-    startLegacyWorkflowRun,
-    createLegacyWorkflowRun
-  };
-};
-const useWatchWorkflow = () => {
-  const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = React.useState(false);
-  const [legacyWatchResult, setLegacyWatchResult] = React.useState(null);
-  const client = useMastraClient();
-  const debouncedSetLegacyWorkflowWatchResult = useDebounce.useDebouncedCallback((record) => {
-    const formattedResults = Object.entries(record.results || {}).reduce(
-      (acc, [key, value]) => {
-        let output = value.status === "success" ? value.output : void 0;
-        if (output) {
-          output = Object.entries(output).reduce(
-            (_acc, [_key, _value]) => {
-              const val = _value;
-              _acc[_key] = val.type?.toLowerCase() === "buffer" ? { type: "Buffer", data: `[...buffered data]` } : val;
-              return _acc;
-            },
-            {}
-          );
+  }
+  if (chunk.type === "workflow-step-start") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          steps: {
+            ...prev?.payload?.workflowState?.steps,
+            [chunk.payload.id]: {
+              ...current || {},
+              ...chunk.payload
+            }
+          }
         }
-        acc[key] = { ...value, output };
-        return acc;
       },
-      {}
-    );
-    const sanitizedRecord = {
-      ...record,
-      sanitizedOutput: record ? JSON.stringify({ ...record, results: formattedResults }, null, 2).slice(0, 5e4) : null
+      eventTimestamp: /* @__PURE__ */ new Date()
     };
-    setLegacyWatchResult(sanitizedRecord);
-  }, 100);
-  const watchLegacyWorkflow = async ({ workflowId, runId }) => {
-    try {
-      setIsWatchingLegacyWorkflow(true);
-      const workflow = client.getLegacyWorkflow(workflowId);
-      await workflow.watch({ runId }, (record) => {
-        try {
-          debouncedSetLegacyWorkflowWatchResult(record);
-        } catch (err) {
-          console.error("Error processing workflow record:", err);
-          setLegacyWatchResult({
-            ...record
-          });
-        }
-      });
-    } catch (error) {
-      console.error("Error watching workflow:", error);
-      throw error;
-    } finally {
-      setIsWatchingLegacyWorkflow(false);
-    }
-  };
-  return {
-    watchLegacyWorkflow,
-    isWatchingLegacyWorkflow,
-    legacyWatchResult
-  };
-};
-const useResumeWorkflow = () => {
-  const [isResumingLegacyWorkflow, setIsResumingLegacyWorkflow] = React.useState(false);
-  const client = useMastraClient();
-  const resumeLegacyWorkflow = async ({
-    workflowId,
-    stepId,
-    runId,
-    context
-  }) => {
-    try {
-      setIsResumingLegacyWorkflow(true);
-      const response = await client.getLegacyWorkflow(workflowId).resume({ stepId, runId, context });
-      return response;
-    } catch (error) {
-      console.error("Error resuming workflow:", error);
-      throw error;
-    } finally {
-      setIsResumingLegacyWorkflow(false);
-    }
-  };
-  return {
-    resumeLegacyWorkflow,
-    isResumingLegacyWorkflow
-  };
-};
-
-function extractConditions(group, type) {
-  let result = [];
-  if (!group) return result;
-  function recurse(group2, conj) {
-    if (typeof group2 === "string") {
-      result.push({ type, fnString: group2 });
-    } else {
-      const simpleCondition = Object.entries(group2).find(([key]) => key.includes("."));
-      if (simpleCondition) {
-        const [key, queryValue] = simpleCondition;
-        const [stepId, ...pathParts] = key.split(".");
-        const ref = {
-          step: {
-            id: stepId
-          },
-          path: pathParts.join(".")
-        };
-        result.push({
-          type,
-          ref,
-          query: { [queryValue === true || queryValue === false ? "is" : "eq"]: String(queryValue) },
-          conj
-        });
-      }
-      if ("ref" in group2) {
-        const { ref, query } = group2;
-        result.push({ type, ref, query, conj });
-      }
-      if ("and" in group2) {
-        for (const subGroup of group2.and) {
-          recurse({ ...subGroup }, "and");
+  }
+  if (chunk.type === "workflow-step-suspended") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev?.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep,
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: "suspended",
+          steps: {
+            ...prev?.payload?.workflowState?.steps,
+            [chunk.payload.id]: {
+              ...current || {},
+              ...chunk.payload
+            }
+          }
         }
-      }
-      if ("or" in group2) {
-        for (const subGroup of group2.or) {
-          recurse({ ...subGroup }, "or");
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-step-waiting") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev?.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep || {},
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: "waiting",
+          steps: {
+            ...prev?.payload?.workflowState?.steps,
+            [chunk.payload.id]: {
+              ...current,
+              ...chunk.payload
+            }
+          }
         }
-      }
-      if ("not" in group2) {
-        recurse({ ...group2.not }, "not");
-      }
-    }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
   }
-  recurse(group);
-  return result.reverse();
-}
-const getLayoutedElements = (nodes, edges) => {
-  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-  g.setGraph({ rankdir: "TB" });
-  edges.forEach((edge) => g.setEdge(edge.source, edge.target));
-  nodes.forEach(
-    (node) => g.setNode(node.id, {
+  if (chunk.type === "workflow-step-result") {
+    const status = chunk.payload.status;
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    const next = {
+      ...prev,
+      payload: {
+        ...prev?.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep || {},
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status,
+          steps: {
+            ...prev?.payload?.workflowState?.steps,
+            [chunk.payload.id]: {
+              ...current,
+              ...chunk.payload
+            }
+          }
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+    return next;
+  }
+  if (chunk.type === "workflow-canceled") {
+    return {
+      ...prev,
+      payload: {
+        ...prev?.payload,
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: "canceled"
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-finish") {
+    return {
+      ...prev,
+      payload: {
+        ...prev?.payload,
+        currentStep: void 0,
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: chunk.payload.workflowStatus
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  return prev;
+};
+
+const WorkflowRunContext = React.createContext({});
+function WorkflowRunProvider({
+  children,
+  snapshot
+}) {
+  const [result, setResult] = React.useState(
+    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+  );
+  const [payload, setPayload] = React.useState(null);
+  const clearData = () => {
+    setResult(null);
+    setPayload(null);
+  };
+  React.useEffect(() => {
+    if (snapshot?.runId) {
+      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+    }
+  }, [snapshot]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowRunContext.Provider,
+    {
+      value: {
+        result,
+        setResult,
+        payload,
+        setPayload,
+        clearData,
+        snapshot
+      },
+      children
+    }
+  );
+}
+
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+}
+
+const lodashTitleCase = (str) => {
+  const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
+  return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
+};
+
+const getLayoutedElements = (nodes, edges) => {
+  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "TB" });
+  edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+  nodes.forEach(
+    (node) => g.setNode(node.id, {
       ...node,
       width: node.measured?.width ?? 274,
       height: node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)
@@ -4807,281 +4795,6 @@ const defaultEdgeOptions = {
     color: "#8e8e8e"
   }
 };
-const contructLegacyNodesAndEdges = ({
-  stepGraph,
-  stepSubscriberGraph,
-  steps: mainSteps = {}
-}) => {
-  if (!stepGraph) {
-    return { nodes: [], edges: [] };
-  }
-  const { initial, ...stepsList } = stepGraph;
-  if (!initial.length) {
-    return { nodes: [], edges: [] };
-  }
-  let nodes = [];
-  let edges = [];
-  let allSteps = [];
-  for (const [_index, _step] of initial.entries()) {
-    const step = _step.step;
-    const stepId = step.id;
-    const steps = [_step, ...stepsList?.[stepId] || []]?.reduce((acc, step2, i) => {
-      const { stepGraph: stepWflowGraph, stepSubscriberGraph: stepWflowSubscriberGraph } = mainSteps[step2.step.id] || {};
-      const hasGraph = !!stepWflowGraph;
-      const nodeId = nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id;
-      let newStep = {
-        ...step2.step,
-        label: step2.step.id,
-        originalId: step2.step.id,
-        type: hasGraph ? "nested-node" : "default-node",
-        id: nodeId,
-        stepGraph: stepWflowGraph,
-        stepSubscriberGraph: stepWflowSubscriberGraph
-      };
-      let conditionType = "when";
-      if (step2.config?.serializedWhen) {
-        conditionType = step2.step.id?.endsWith("_if") ? "if" : step2.step.id?.endsWith("_else") ? "else" : "when";
-        const conditions = extractConditions(step2.config.serializedWhen, conditionType);
-        const conditionStep = {
-          id: crypto.randomUUID(),
-          conditions,
-          type: "condition-node",
-          isLarge: (conditions?.length > 1 || conditions.some(({ fnString }) => !!fnString)) && conditionType !== "else"
-        };
-        acc.push(conditionStep);
-      }
-      if (conditionType === "if" || conditionType === "else") {
-        newStep = {
-          ...newStep,
-          label: conditionType === "if" ? "start if" : "start else"
-        };
-      }
-      newStep = {
-        ...newStep,
-        label: step2.config?.loopLabel || newStep.label
-      };
-      acc.push(newStep);
-      return acc;
-    }, []);
-    allSteps = [...allSteps, ...steps];
-    const newNodes = [...steps].map((step2, index) => {
-      const subscriberGraph = stepSubscriberGraph?.[step2.id];
-      return {
-        id: step2.id,
-        position: { x: _index * 300, y: index * 100 },
-        type: step2.type,
-        data: {
-          conditions: step2.conditions,
-          label: step2.label,
-          description: step2.description,
-          withoutTopHandle: subscriberGraph?.[step2.id] ? false : index === 0,
-          withoutBottomHandle: subscriberGraph ? false : index === steps.length - 1,
-          isLarge: step2.isLarge,
-          stepGraph: step2.stepGraph,
-          stepSubscriberGraph: step2.stepSubscriberGraph
-        }
-      };
-    });
-    nodes = [...nodes, ...newNodes];
-    const edgeSteps = [...steps].slice(0, -1);
-    const newEdges = edgeSteps.map((step2, index) => ({
-      id: `e${step2.id}-${steps[index + 1].id}`,
-      source: step2.id,
-      target: steps[index + 1].id,
-      ...defaultEdgeOptions
-    }));
-    edges = [...edges, ...newEdges];
-  }
-  if (!stepSubscriberGraph || !Object.keys(stepSubscriberGraph).length) {
-    const { nodes: layoutedNodes2, edges: layoutedEdges2 } = getLayoutedElements(nodes, edges);
-    return { nodes: layoutedNodes2, edges: layoutedEdges2 };
-  }
-  for (const [connectingStepId, stepInfoGraph] of Object.entries(stepSubscriberGraph)) {
-    const { initial: initial2, ...stepsList2 } = stepInfoGraph;
-    let untilOrWhileConditionId;
-    const loopResultSteps = [];
-    let finishedLoopStep;
-    let otherLoopStep;
-    if (initial2.length) {
-      for (const [_index, _step] of initial2.entries()) {
-        const step = _step.step;
-        const stepId = step.id;
-        const steps = [_step, ...stepsList2?.[stepId] || []]?.reduce((acc, step2, i) => {
-          const { stepGraph: stepWflowGraph, stepSubscriberGraph: stepWflowSubscriberGraph } = mainSteps[step2.step.id] || {};
-          const hasGraph = !!stepWflowGraph;
-          const nodeId = nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id;
-          let newStep = {
-            ...step2.step,
-            originalId: step2.step.id,
-            label: step2.step.id,
-            type: hasGraph ? "nested-node" : "default-node",
-            id: nodeId,
-            stepGraph: stepWflowGraph,
-            stepSubscriberGraph: stepWflowSubscriberGraph
-          };
-          let conditionType = "when";
-          const isFinishedLoop = step2.config?.loopLabel?.endsWith("loop finished");
-          if (step2.config?.serializedWhen && !isFinishedLoop) {
-            conditionType = step2.step.id?.endsWith("_if") ? "if" : step2.step.id?.endsWith("_else") ? "else" : step2.config?.loopType ?? "when";
-            const conditions = extractConditions(step2.config.serializedWhen, conditionType);
-            const conditionStep = {
-              id: crypto.randomUUID(),
-              conditions,
-              type: "condition-node",
-              isLarge: (conditions?.length > 1 || conditions.some(({ fnString }) => !!fnString)) && conditionType !== "else"
-            };
-            if (conditionType === "until" || conditionType === "while") {
-              untilOrWhileConditionId = conditionStep.id;
-            }
-            acc.push(conditionStep);
-          }
-          if (isFinishedLoop) {
-            const loopResultStep = {
-              id: crypto.randomUUID(),
-              type: "loop-result-node",
-              loopType: "finished",
-              loopResult: step2.config.loopType === "until" ? true : false
-            };
-            loopResultSteps.push(loopResultStep);
-            acc.push(loopResultStep);
-          }
-          if (!isFinishedLoop && step2.config?.loopType) {
-            const loopResultStep = {
-              id: crypto.randomUUID(),
-              type: "loop-result-node",
-              loopType: step2.config.loopType,
-              loopResult: step2.config.loopType === "until" ? false : true
-            };
-            loopResultSteps.push(loopResultStep);
-            acc.push(loopResultStep);
-          }
-          if (conditionType === "if" || conditionType === "else") {
-            newStep = {
-              ...newStep,
-              label: conditionType === "if" ? "start if" : "start else"
-            };
-          }
-          if (step2.config.loopType) {
-            if (isFinishedLoop) {
-              finishedLoopStep = newStep;
-            } else {
-              otherLoopStep = newStep;
-            }
-          }
-          newStep = {
-            ...newStep,
-            loopType: isFinishedLoop ? "finished" : step2.config.loopType,
-            label: step2.config?.loopLabel || newStep.label
-          };
-          acc.push(newStep);
-          return acc;
-        }, []);
-        let afterStep = [];
-        let afterStepStepList = connectingStepId?.includes("&&") ? connectingStepId.split("&&") : [];
-        if (connectingStepId?.includes("&&")) {
-          afterStep = [
-            {
-              id: connectingStepId,
-              label: connectingStepId,
-              type: "after-node",
-              steps: afterStepStepList
-            }
-          ];
-        }
-        const newNodes = [...steps, ...afterStep].map((step2, index) => {
-          const subscriberGraph = stepSubscriberGraph?.[step2.id];
-          const withBottomHandle = step2.originalId === connectingStepId || subscriberGraph;
-          return {
-            id: step2.id,
-            position: { x: _index * 300 + 300, y: index * 100 + 100 },
-            type: step2.type,
-            data: {
-              conditions: step2.conditions,
-              label: step2.label,
-              description: step2.description,
-              result: step2.loopResult,
-              loopType: step2.loopType,
-              steps: step2.steps,
-              withoutBottomHandle: withBottomHandle ? false : index === steps.length - 1,
-              isLarge: step2.isLarge,
-              stepGraph: step2.stepGraph,
-              stepSubscriberGraph: step2.stepSubscriberGraph
-            }
-          };
-        });
-        nodes = [...nodes, ...newNodes].map((node) => ({
-          ...node,
-          data: {
-            ...node.data,
-            withoutBottomHandle: afterStepStepList.includes(node.id) ? false : node.data.withoutBottomHandle
-          }
-        }));
-        const edgeSteps = [...steps].slice(0, -1);
-        const firstEdgeStep = steps[0];
-        const lastEdgeStep = steps[steps.length - 1];
-        const afterEdges = afterStepStepList?.map((step2) => ({
-          id: `e${step2}-${connectingStepId}`,
-          source: step2,
-          target: connectingStepId,
-          ...defaultEdgeOptions
-        }));
-        const finishedLoopResult = loopResultSteps?.find((step2) => step2.loopType === "finished");
-        const newEdges = edgeSteps.map((step2, index) => ({
-          id: `e${step2.id}-${steps[index + 1].id}`,
-          source: step2.id,
-          target: steps[index + 1].id,
-          remove: finishedLoopResult?.id === steps[index + 1].id,
-          //remove if target is a finished loop result
-          ...defaultEdgeOptions
-        }))?.filter((edge) => !edge.remove);
-        const connectingEdge = connectingStepId === firstEdgeStep.id ? [] : [
-          {
-            id: `e${connectingStepId}-${firstEdgeStep.id}`,
-            source: connectingStepId,
-            target: firstEdgeStep.id,
-            remove: finishedLoopResult?.id === firstEdgeStep.id,
-            ...defaultEdgeOptions
-          }
-        ]?.filter((edge) => !edge.remove);
-        const lastEdge = lastEdgeStep.originalId === connectingStepId ? [
-          {
-            id: `e${lastEdgeStep.id}-${connectingStepId}`,
-            source: lastEdgeStep.id,
-            target: connectingStepId,
-            ...defaultEdgeOptions
-          }
-        ] : [];
-        edges = [...edges, ...afterEdges, ...connectingEdge, ...newEdges, ...lastEdge];
-        allSteps = [...allSteps, ...steps];
-      }
-      if (untilOrWhileConditionId && loopResultSteps.length && finishedLoopStep && otherLoopStep) {
-        const loopResultStepsEdges = loopResultSteps.map((step) => ({
-          id: `e${untilOrWhileConditionId}-${step.id}`,
-          source: untilOrWhileConditionId,
-          target: step.id,
-          ...defaultEdgeOptions
-        }));
-        const finishedLoopResult = loopResultSteps?.find((res) => res.loopType === "finished");
-        const otherLoopResult = loopResultSteps?.find((res) => res.loopType !== "finished");
-        const otherLoopEdge = {
-          id: `e${otherLoopResult?.id}-${otherLoopStep?.id}`,
-          source: otherLoopResult?.id,
-          target: otherLoopStep.id,
-          ...defaultEdgeOptions
-        };
-        const finishedLoopEdge = {
-          id: `e${finishedLoopResult?.id}-${finishedLoopStep?.id}`,
-          source: finishedLoopResult?.id,
-          target: finishedLoopStep.id,
-          ...defaultEdgeOptions
-        };
-        edges = [...edges, ...loopResultStepsEdges, otherLoopEdge, finishedLoopEdge];
-      }
-    }
-  }
-  const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges);
-  return { nodes: layoutedNodes, edges: layoutedEdges };
-};
 const getStepNodeAndEdge = ({
   stepFlow,
   xIndex,
@@ -5518,257 +5231,20 @@ const ScrollBar = React__namespace.forwardRef(({ className, orientation = "verti
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
 
-function convertWorkflowRunStateToWatchResult(runState) {
-  const runId = runState.runId;
-  const steps = {};
-  const context = runState.context || {};
-  Object.entries(context).forEach(([stepId, stepResult]) => {
-    if (stepId !== "input" && "status" in stepResult) {
-      const result = stepResult;
-      steps[stepId] = {
-        status: result.status,
-        output: "output" in result ? result.output : void 0,
-        payload: "payload" in result ? result.payload : void 0,
-        resumePayload: "resumePayload" in result ? result.resumePayload : void 0,
-        error: "error" in result ? result.error : void 0,
-        startedAt: "startedAt" in result ? result.startedAt : Date.now(),
-        endedAt: "endedAt" in result ? result.endedAt : void 0,
-        suspendedAt: "suspendedAt" in result ? result.suspendedAt : void 0,
-        resumedAt: "resumedAt" in result ? result.resumedAt : void 0
-      };
-    }
-  });
-  const status = determineWorkflowStatus(steps);
-  return {
-    type: "watch",
-    payload: {
-      workflowState: {
-        status,
-        steps,
-        result: runState.value,
-        payload: context.input,
-        error: void 0
-      }
-    },
-    eventTimestamp: new Date(runState.timestamp),
-    runId
-  };
-}
-function determineWorkflowStatus(steps) {
-  const stepStatuses = Object.values(steps).map((step) => step.status);
-  if (stepStatuses.includes("failed")) {
-    return "failed";
-  }
-  if (stepStatuses.includes("suspended")) {
-    return "suspended";
-  }
-  if (stepStatuses.every((status) => status === "success")) {
-    return "success";
-  }
-  return "running";
-}
-const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
-  if (chunk.type === "workflow-start") {
+const useCurrentRun = () => {
+  const context = React.useContext(WorkflowRunContext);
+  const workflowCurrentSteps = context.result?.payload?.workflowState?.steps ?? {};
+  const steps = Object.entries(workflowCurrentSteps).reduce((acc, [key, value]) => {
     return {
-      ...prev,
-      runId: chunk.runId,
-      eventTimestamp: /* @__PURE__ */ new Date(),
-      payload: {
-        ...prev?.payload || {},
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "running",
-          steps: {}
-        }
-      }
-    };
-  }
-  if (chunk.type === "workflow-step-start") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      payload: {
-        ...prev.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current || {},
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-suspended") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep,
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "suspended",
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current || {},
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-waiting") {
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    return {
-      ...prev,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep || {},
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "waiting",
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current,
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-step-result") {
-    const status = chunk.payload.status;
-    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
-    const next = {
-      ...prev,
-      payload: {
-        ...prev?.payload,
-        currentStep: {
-          id: chunk.payload.id,
-          ...prev?.payload?.currentStep || {},
-          ...chunk.payload
-        },
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status,
-          steps: {
-            ...prev?.payload?.workflowState?.steps,
-            [chunk.payload.id]: {
-              ...current,
-              ...chunk.payload
-            }
-          }
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-    return next;
-  }
-  if (chunk.type === "workflow-canceled") {
-    return {
-      ...prev,
-      payload: {
-        ...prev?.payload,
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: "canceled"
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  if (chunk.type === "workflow-finish") {
-    return {
-      ...prev,
-      payload: {
-        ...prev?.payload,
-        currentStep: void 0,
-        workflowState: {
-          ...prev?.payload?.workflowState,
-          status: chunk.payload.workflowStatus
-        }
-      },
-      eventTimestamp: /* @__PURE__ */ new Date()
-    };
-  }
-  return prev;
-};
-
-const WorkflowRunContext = React.createContext({});
-function WorkflowRunProvider({
-  children,
-  snapshot
-}) {
-  const [legacyResult, setLegacyResult] = React.useState(null);
-  const [result, setResult] = React.useState(
-    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
-  );
-  const [payload, setPayload] = React.useState(null);
-  const clearData = () => {
-    setLegacyResult(null);
-    setResult(null);
-    setPayload(null);
-  };
-  React.useEffect(() => {
-    if (snapshot?.runId) {
-      setResult(convertWorkflowRunStateToWatchResult(snapshot));
-    }
-  }, [snapshot]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowRunContext.Provider,
-    {
-      value: {
-        legacyResult,
-        setLegacyResult,
-        result,
-        setResult,
-        payload,
-        setPayload,
-        clearData,
-        snapshot
-      },
-      children
-    }
-  );
-}
-
-const useCurrentRun = () => {
-  const context = React.useContext(WorkflowRunContext);
-  const workflowCurrentSteps = context.result?.payload?.workflowState?.steps ?? {};
-  const steps = Object.entries(workflowCurrentSteps).reduce((acc, [key, value]) => {
-    return {
-      ...acc,
-      [key]: {
-        error: value.error,
-        startedAt: value.startedAt,
-        endedAt: value.endedAt,
-        status: value.status,
-        output: value.output,
-        input: value.payload,
-        resumeData: value.resumePayload
+      ...acc,
+      [key]: {
+        error: value.error,
+        startedAt: value.startedAt,
+        endedAt: value.endedAt,
+        status: value.status,
+        output: value.output,
+        input: value.payload,
+        resumeData: value.resumePayload
       }
     };
   }, {});
@@ -6323,23 +5799,84 @@ function Spinner({ color = "#fff", className }) {
   );
 }
 
-function LegacyWorkflowNestedGraph({
+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 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+
+const ZoomSlider = React.forwardRef(({ className, ...props }) => {
+  const { zoom } = react.useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = react.useReactFlow();
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Slider,
+      {
+        className: "w-[140px]",
+        value: [zoom],
+        min: 0.01,
+        max: 1,
+        step: 0.01,
+        onValueChange: (values) => {
+          zoomTo(values[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-4 w-4" }) })
+  ] });
+});
+ZoomSlider.displayName = "ZoomSlider";
+
+function WorkflowNestedGraph({
   stepGraph,
-  stepSubscriberGraph,
-  open
+  open,
+  workflowName,
+  onShowTrace,
+  onSendEvent
 }) {
-  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
-    stepGraph,
-    stepSubscriberGraph
+  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
+    stepGraph
   });
   const [isMounted, setIsMounted] = React.useState(false);
   const [nodes, _, onNodesChange] = react.useNodesState(initialNodes);
   const [edges] = react.useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowDefaultNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    ),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowNestedNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    )
   };
   React.useEffect(() => {
     if (open) {
@@ -6348,49 +5885,75 @@ function LegacyWorkflowNestedGraph({
       }, 500);
     }
   }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full relative", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(
     react.ReactFlow,
     {
       nodes,
-      edges,
-      fitView: true,
-      fitViewOptions: { maxZoom: 0.85 },
-      nodeTypes,
-      onNodesChange,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Controls, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Lines, gap: 12, size: 0.5 })
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : e.data?.conditionNode && !steps[`${workflowName}.${e.data?.previousStepId}`] && Boolean(steps[`${workflowName}.${e.data?.nextStepId}`]?.status) ? "#22c55e" : void 0
+        }
+      })),
+      fitView: true,
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      minZoom: 0.01,
+      maxZoom: 1,
+      nodeTypes,
+      onNodesChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) });
 }
 
-const LegacyWorkflowNestedGraphContext = React.createContext(
+const WorkflowNestedGraphContext = React.createContext(
   {}
 );
-function LegacyWorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({
+  children,
+  onShowTrace,
+  onSendEvent
+}) {
   const [stepGraph, setStepGraph] = React.useState(null);
-  const [stepSubscriberGraph, setStepSubscriberGraph] = 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 closeNestedGraph = () => {
-    setOpenDialog(false);
-    setStepGraph(null);
-    setStepSubscriberGraph(null);
-    setLabel("");
+    if (parentStepGraphList.length) {
+      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
+      setStepGraph(lastStepGraph.stepGraph);
+      setLabel(lastStepGraph.label);
+      setFullStep(lastStepGraph.fullStep);
+      setParentStepGraphList(parentStepGraphList.slice(0, -1));
+    } else {
+      setOpenDialog(false);
+      setStepGraph(null);
+      setLabel("");
+      setFullStep("");
+    }
   };
   const showNestedGraph = ({
-    label: label2,
-    stepGraph: stepGraph2,
-    stepSubscriberGraph: stepSubscriberGraph2
+    label: newLabel,
+    stepGraph: newStepGraph,
+    fullStep: newFullStep
   }) => {
-    setLabel(label2);
-    setStepGraph(stepGraph2);
-    setStepSubscriberGraph(stepSubscriberGraph2);
+    if (stepGraph) {
+      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
+    }
+    setLabel(newLabel);
+    setFullStep(newFullStep);
+    setStepGraph(newStepGraph);
     setOpenDialog(true);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    LegacyWorkflowNestedGraphContext.Provider,
+    WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -6398,8 +5961,8 @@ function LegacyWorkflowNestedGraphProvider({ children }) {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[40rem] h-[40rem] 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.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-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,
@@ -6407,77 +5970,131 @@ function LegacyWorkflowNestedGraphProvider({ children }) {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            LegacyWorkflowNestedGraph,
+            WorkflowNestedGraph,
             {
               stepGraph,
               open: openDialog,
-              stepSubscriberGraph
+              workflowName: fullStep,
+              onShowTrace,
+              onSendEvent
             }
           ) })
-        ] }) }) })
+        ] }) }) }, `${label}-${fullStep}`)
       ]
     }
   );
 }
 
-function LegacyWorkflowNestedNode({ data }) {
-  const { label, withoutTopHandle, withoutBottomHandle, stepGraph, stepSubscriberGraph } = data;
-  const { showNestedGraph } = React.useContext(LegacyWorkflowNestedGraphContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
+function WorkflowNestedNode({
+  data,
+  parentWorkflowName,
+  onShowTrace,
+  onSendEvent
+}) {
+  const { steps, runId } = useCurrentRun();
+  const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
+  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig, event } = data;
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const step = steps[fullLabel];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph, stepSubscriberGraph }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Workflow, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
+          step?.status === "success" && "bg-accent1Darker",
+          step?.status === "failed" && "bg-accent2Darker",
+          step?.status === "suspended" && "bg-accent3Darker",
+          step?.status === "waiting" && "bg-accent5Darker",
+          step?.status === "running" && "bg-accent6Darker"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            /* @__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-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
+              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-accent6 animate-spin" }),
+              !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
+              label,
+              " ",
+              step?.startedAt && /* @__PURE__ */ jsxRuntime.jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          /* @__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 }),
+              onSendEvent,
+              event: step?.status === "waiting" ? event : void 0,
+              runId,
+              status: step?.status
+            }
+          )
+        ]
+      }
+    ),
     !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Bottom, style: { visibility: "hidden" } })
   ] });
 }
 
-function LegacyWorkflowGraphInner({ workflow }) {
-  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
-    stepGraph: workflow.serializedStepGraph || workflow.stepGraph,
-    stepSubscriberGraph: workflow.serializedStepSubscriberGraph || workflow.stepSubscriberGraph,
-    steps: workflow.steps
-  });
+function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
+  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = react.useNodesState(initialNodes);
   const [edges] = react.useEdgesState(initialEdges);
+  const { steps, runId } = useCurrentRun();
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": LegacyWorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react.ReactFlow,
     {
       nodes,
-      edges,
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[e.data?.previousStepId]?.status === "success" && steps[e.data?.nextStepId] ? "#22c55e" : e.data?.conditionNode && !steps[e.data?.previousStepId] && Boolean(steps[e.data?.nextStepId]?.status) ? "#22c55e" : void 0
+        }
+      })),
       nodeTypes,
       onNodesChange,
       fitView: true,
       fitViewOptions: {
-        maxZoom: 0.85
+        maxZoom: 1
       },
+      minZoom: 0.01,
+      maxZoom: 1,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Controls, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
     }
   ) });
 }
 
-const lodashTitleCase = (str) => {
-  const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
-  return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
-};
-
-function LegacyWorkflowGraph({ workflowId }) {
-  const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId);
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEvent }) {
+  const { snapshot } = React.useContext(WorkflowRunContext);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) });
   }
-  if (!legacyWorkflow) {
+  if (!workflow) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -6487,9 +6104,95 @@ function LegacyWorkflowGraph({ workflowId }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowGraphInner, { workflow: legacyWorkflow }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowNestedGraphProvider,
+    {
+      onShowTrace,
+      onSendEvent,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowGraphInner,
+        {
+          workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+          onShowTrace,
+          onSendEvent
+        }
+      ) })
+    },
+    snapshot?.runId ?? workflowId
+  );
+}
+
+function resolveSerializedZodOutput(obj) {
+  return Function("z", `"use strict";return (${obj});`)(z.z);
+}
+
+function CodeBlockDemo({
+  code = "",
+  language = "ts",
+  filename,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactCodeBlock.CodeBlock, { code, language, theme: prismReactRenderer.themes.oneDark, children: [
+    filename ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute w-full px-6 py-2 pl-4 text-sm rounded bg-mastra-bg-2 text-mastra-el-6/50", children: filename }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactCodeBlock.CodeBlock.Code,
+      {
+        className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
+        ] }) })
+      }
+    )
+  ] });
 }
 
+const usePlaygroundStore = zustand.create()(
+  middleware.persist(
+    (set) => ({
+      runtimeContext: {},
+      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
+
+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.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 })
+  ] });
+};
+
+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-accent6 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$1, { data: result })
+      ] })
+    }
+  );
+};
+
 const Form = React.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx("form", { ref, className: "space-y-4", ...props, children });
 });
@@ -7322,592 +7025,12 @@ function DynamicForm({
       SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
     },
     formComponents: {
-      Label: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-normal", children: value })
-    },
-    withSubmit: true
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps, readOnly });
-}
-
-function resolveSerializedZodOutput(obj) {
-  return Function("z", `"use strict";return (${obj});`)(z.z);
-}
-
-function CodeBlockDemo({
-  code = "",
-  language = "ts",
-  filename,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactCodeBlock.CodeBlock, { code, language, theme: prismReactRenderer.themes.oneDark, children: [
-    filename ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute w-full px-6 py-2 pl-4 text-sm rounded bg-mastra-bg-2 text-mastra-el-6/50", children: filename }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactCodeBlock.CodeBlock.Code,
-      {
-        className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(reactCodeBlock.CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
-        ] }) })
-      }
-    )
-  ] });
-}
-
-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.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 })
-  ] });
-};
-
-const LegacyWorkflowStatus = ({ stepId, pathStatus, path }) => {
-  const status = pathStatus === "completed" ? "Completed" : stepId === path ? pathStatus.charAt(0).toUpperCase() + pathStatus.slice(1) : pathStatus === "executing" ? "Executing" : "Completed";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
-          status === "Completed" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
-          status === "Failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
-          status === "Executing" && /* @__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: path })
-      ] })
-    }
-  );
-};
-
-const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
-  const { handleCopy } = useCopyToClipboard({ text: jsonResult });
-  const [expanded, setExpanded] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 flex items-center gap-3 font-medium", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(DeploymentIcon, {}) }),
-          "Workflow Execution (JSON)"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "p-2 rounded-lg hover:bg-surface5 transition-colors duration-150 ease-in-out text-icon3 hover:text-icon6",
-              onClick: () => handleCopy(),
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy result" })
-        ] })
-      ] }),
-      footer: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: "w-full h-full text-center text-icon2 hover:text-icon6 text-ui-md",
-          onClick: () => setExpanded((s) => !s),
-          children: expanded ? "collapse" : "expand"
-        }
-      ),
-      children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: sanitizedJsonResult || jsonResult, language: "json" }) : null
-    }
-  );
-};
-
-function LegacyWorkflowTrigger({
-  workflowId,
-  setRunId
-}) {
-  const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
-  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId);
-  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow();
-  const {
-    watchLegacyWorkflow: watchWorkflow,
-    legacyWatchResult: watchResult,
-    isWatchingLegacyWorkflow: isWatchingWorkflow
-  } = useWatchWorkflow();
-  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow();
-  const [suspendedSteps, setSuspendedSteps] = React.useState([]);
-  const [isRunning, setIsRunning] = React.useState(false);
-  const triggerSchema = workflow?.triggerSchema;
-  const handleExecuteWorkflow = async (data) => {
-    try {
-      if (!workflow) return;
-      setIsRunning(true);
-      setResult(null);
-      const { runId } = await createWorkflowRun({ workflowId });
-      setRunId?.(runId);
-      watchWorkflow({ workflowId, runId });
-      startWorkflowRun({ workflowId, runId, input: data });
-    } catch (err) {
-      setIsRunning(false);
-      sonner.toast.error("Error executing workflow");
-    }
-  };
-  const handleResumeWorkflow = async (step) => {
-    if (!workflow) return;
-    const { stepId, runId: prevRunId, context } = step;
-    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
-    watchWorkflow({ workflowId, runId });
-    await resumeWorkflow({
-      stepId,
-      runId,
-      context,
-      workflowId
-    });
-  };
-  const watchResultToUse = result ?? watchResult;
-  const workflowActivePaths = watchResultToUse?.activePaths ?? {};
-  React.useEffect(() => {
-    setIsRunning(isWatchingWorkflow);
-  }, [isWatchingWorkflow]);
-  React.useEffect(() => {
-    if (!watchResultToUse?.activePaths || !result?.runId) return;
-    const suspended = Object.entries(watchResultToUse.activePaths).filter(([_, { status }]) => status === "suspended").map(([stepId, { suspendPayload }]) => ({
-      stepId,
-      runId: result.runId,
-      suspendPayload
-    }));
-    setSuspendedSteps(suspended);
-  }, [watchResultToUse, result]);
-  React.useEffect(() => {
-    if (watchResult) {
-      setResult(watchResult);
-    }
-  }, [watchResult]);
-  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" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10" })
-    ] }) });
-  }
-  if (!workflow) return null;
-  const isSuspendedSteps = suspendedSteps.length > 0;
-  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result ?? {};
-  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    isResumingWorkflow && /* @__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" })
-    ] }),
-    !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicForm,
-      {
-        schema: zodInputSchema,
-        defaultValues: payload,
-        isSubmitLoading: isWatchingWorkflow,
-        submitButtonLabel: "Run",
-        onSubmit: (data) => {
-          setPayload(data);
-          handleExecuteWorkflow(data);
-        }
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      Button$1,
-      {
-        className: "w-full",
-        variant: "light",
-        disabled: isRunning,
-        onClick: () => handleExecuteWorkflow(null),
-        children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : "Trigger"
-      }
-    ) }),
-    isSuspendedSteps && suspendedSteps?.map((step) => {
-      const stepDefinition = workflow.steps[step.stepId];
-      const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.inputSchema))) : 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 }),
-        step.suspendPayload && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlockDemo,
-          {
-            className: "w-full overflow-x-auto p-2",
-            code: JSON.stringify(step.suspendPayload, null, 2),
-            language: "json"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicForm,
-          {
-            schema: stepSchema,
-            isSubmitLoading: isResumingWorkflow,
-            submitButtonLabel: "Resume",
-            onSubmit: (data) => {
-              handleResumeWorkflow({
-                stepId: step.stepId,
-                runId: step.runId,
-                suspendPayload: step.suspendPayload,
-                context: data
-              });
-            }
-          }
-        )
-      ] });
-    }),
-    hasWorkflowActivePaths && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
-        }) }, stepId);
-      }) })
-    ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsxRuntime.jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
-    ] })
-  ] }) });
-}
-
-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 disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive__namespace.Root.displayName;
-
-const ZoomSlider = React.forwardRef(({ className, ...props }) => {
-  const { zoom } = react.useViewport();
-  const { zoomTo, zoomIn, zoomOut, fitView } = react.useReactFlow();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Slider,
-      {
-        className: "w-[140px]",
-        value: [zoom],
-        min: 0.01,
-        max: 1,
-        step: 0.01,
-        onValueChange: (values) => {
-          zoomTo(values[0]);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
-      (100 * zoom).toFixed(0),
-      "%"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-4 w-4" }) })
-  ] });
-});
-ZoomSlider.displayName = "ZoomSlider";
-
-function WorkflowNestedGraph({
-  stepGraph,
-  open,
-  workflowName,
-  onShowTrace,
-  onSendEvent
-}) {
-  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
-    stepGraph
-  });
-  const [isMounted, setIsMounted] = React.useState(false);
-  const [nodes, _, onNodesChange] = react.useNodesState(initialNodes);
-  const [edges] = react.useEdgesState(initialEdges);
-  const { steps } = useCurrentRun();
-  const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      WorkflowDefaultNode,
-      {
-        parentWorkflowName: workflowName,
-        onShowTrace,
-        onSendEvent,
-        ...props
-      }
-    ),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      WorkflowNestedNode,
-      {
-        parentWorkflowName: workflowName,
-        onShowTrace,
-        onSendEvent,
-        ...props
-      }
-    )
-  };
-  React.useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setIsMounted(true);
-      }, 500);
-    }
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(
-    react.ReactFlow,
-    {
-      nodes,
-      edges: edges.map((e) => ({
-        ...e,
-        style: {
-          ...e.style,
-          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : e.data?.conditionNode && !steps[`${workflowName}.${e.data?.previousStepId}`] && Boolean(steps[`${workflowName}.${e.data?.nextStepId}`]?.status) ? "#22c55e" : void 0
-        }
-      })),
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 1
-      },
-      minZoom: 0.01,
-      maxZoom: 1,
-      nodeTypes,
-      onNodesChange,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Lines, gap: 12, size: 0.5 })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) });
-}
-
-const WorkflowNestedGraphContext = React.createContext(
-  {}
-);
-function WorkflowNestedGraphProvider({
-  children,
-  onShowTrace,
-  onSendEvent
-}) {
-  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 closeNestedGraph = () => {
-    if (parentStepGraphList.length) {
-      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
-      setStepGraph(lastStepGraph.stepGraph);
-      setLabel(lastStepGraph.label);
-      setFullStep(lastStepGraph.fullStep);
-      setParentStepGraphList(parentStepGraphList.slice(0, -1));
-    } else {
-      setOpenDialog(false);
-      setStepGraph(null);
-      setLabel("");
-      setFullStep("");
-    }
-  };
-  const showNestedGraph = ({
-    label: newLabel,
-    stepGraph: newStepGraph,
-    fullStep: newFullStep
-  }) => {
-    if (stepGraph) {
-      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
-    }
-    setLabel(newLabel);
-    setFullStep(newFullStep);
-    setStepGraph(newStepGraph);
-    setOpenDialog(true);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    WorkflowNestedGraphContext.Provider,
-    {
-      value: {
-        showNestedGraph,
-        closeNestedGraph
-      },
-      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-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"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            WorkflowNestedGraph,
-            {
-              stepGraph,
-              open: openDialog,
-              workflowName: fullStep,
-              onShowTrace,
-              onSendEvent
-            }
-          ) })
-        ] }) }) }, `${label}-${fullStep}`)
-      ]
-    }
-  );
-}
-
-function WorkflowNestedNode({
-  data,
-  parentWorkflowName,
-  onShowTrace,
-  onSendEvent
-}) {
-  const { steps, runId } = useCurrentRun();
-  const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
-  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig, event } = data;
-  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
-  const step = steps[fullLabel];
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "bg-accent1Darker",
-          step?.status === "failed" && "bg-accent2Darker",
-          step?.status === "suspended" && "bg-accent3Darker",
-          step?.status === "waiting" && "bg-accent5Darker",
-          step?.status === "running" && "bg-accent6Darker"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
-            /* @__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-accent3" }),
-              step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-accent6 animate-spin" }),
-              !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
-              label,
-              " ",
-              step?.startedAt && /* @__PURE__ */ jsxRuntime.jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
-            ] })
-          ] }),
-          description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          /* @__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 }),
-              onSendEvent,
-              event: step?.status === "waiting" ? event : void 0,
-              runId,
-              status: step?.status
-            }
-          )
-        ]
-      }
-    ),
-    !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Bottom, style: { visibility: "hidden" } })
-  ] });
-}
-
-function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
-  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
-  const [nodes, _, onNodesChange] = react.useNodesState(initialNodes);
-  const [edges] = react.useEdgesState(initialEdges);
-  const { steps, runId } = useCurrentRun();
-  const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.ReactFlow,
-    {
-      nodes,
-      edges: edges.map((e) => ({
-        ...e,
-        style: {
-          ...e.style,
-          stroke: steps[e.data?.previousStepId]?.status === "success" && steps[e.data?.nextStepId] ? "#22c55e" : e.data?.conditionNode && !steps[e.data?.previousStepId] && Boolean(steps[e.data?.nextStepId]?.status) ? "#22c55e" : void 0
-        }
-      })),
-      nodeTypes,
-      onNodesChange,
-      fitView: true,
-      fitViewOptions: {
-        maxZoom: 1
-      },
-      minZoom: 0.01,
-      maxZoom: 1,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 0.5 })
-      ]
-    }
-  ) });
-}
-
-function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEvent }) {
-  const { snapshot } = React.useContext(WorkflowRunContext);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) });
-  }
-  if (!workflow) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "We couldn't find ",
-        lodashTitleCase(workflowId),
-        " workflow."
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowNestedGraphProvider,
-    {
-      onShowTrace,
-      onSendEvent,
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        WorkflowGraphInner,
-        {
-          workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
-          onShowTrace,
-          onSendEvent
-        }
-      ) })
-    },
-    snapshot?.runId ?? workflowId
-  );
-}
-
-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-accent6 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$1, { data: result })
-      ] })
-    }
-  );
-};
+      Label: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-normal", children: value })
+    },
+    withSubmit: true
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps, readOnly });
+}
 
 const RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref });
@@ -8208,7 +7331,7 @@ const WorkflowJsonDialog = ({ result }) => {
 };
 
 const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["workflow-runs", workflowId],
     queryFn: () => client.getWorkflow(workflowId).runs({ limit: 50 }),
@@ -8555,18 +7678,15 @@ const columns$3 = [
     id: "stepsCount",
     header: "Steps",
     size: 300,
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, {}), className: "!h-button-md", children: [
-        row.original.stepsCount,
-        " step",
-        row.original.stepsCount > 1 ? "s" : ""
-      ] }),
-      row.original.isLegacy ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { className: "!text-foreground/80 !h-button-md", children: "Legacy" }) : null
-    ] }) })
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, {}), className: "!h-button-md", children: [
+      row.original.stepsCount,
+      " step",
+      row.original.stepsCount > 1 ? "s" : ""
+    ] }) }) })
   }
 ];
 
-function WorkflowTable({ workflows, legacyWorkflows, isLoading }) {
+function WorkflowTable({ workflows, isLoading }) {
   const { navigate, paths } = useLinkComponent();
   const workflowData = React.useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
@@ -8575,22 +7695,11 @@ function WorkflowTable({ workflows, legacyWorkflows, isLoading }) {
         id: key,
         name: workflow?.name || "N/A",
         stepsCount: Object.keys(workflow?.steps ?? {})?.length,
-        isLegacy: false,
-        link: paths.workflowLink(key)
-      };
-    });
-    const legacyWorkflowsData = Object.keys(legacyWorkflows ?? {}).map((key) => {
-      const workflow = legacyWorkflows?.[key];
-      return {
-        id: key,
-        name: workflow?.name || "N/A",
-        stepsCount: Object.keys(workflow?.steps ?? {})?.length,
-        isLegacy: true,
         link: paths.workflowLink(key)
       };
     });
-    return [..._workflowsData, ...legacyWorkflowsData];
-  }, [workflows, legacyWorkflows]);
+    return _workflowsData;
+  }, [workflows]);
   const table = reactTable.useReactTable({
     data: workflowData,
     columns: columns$3,
@@ -8686,6 +7795,19 @@ const useWorkflowStream = (workflowFullState) => {
   }, [workflowFullState]);
 };
 
+const useWorkflow = (workflowId) => {
+  const client = react$2.useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return reactQuery.useQuery({
+    queryKey: ["workflow", workflowId],
+    queryFn: () => workflowId ? client.getWorkflow(workflowId).details(runtimeContext) : null,
+    enabled: Boolean(workflowId),
+    retry: false,
+    refetchOnWindowFocus: false,
+    throwOnError: false
+  });
+};
+
 const LoadingBadge = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
@@ -8791,13 +7913,15 @@ const Reasoning = ({ text }) => {
   ] });
 };
 
-const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
-  const data = react$2.useMessage();
+const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) => {
+  const data = react$3.useMessage();
   const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
+  const modelMetadata = data.metadata?.custom?.modelMetadata;
+  const showModelUsed = hasModelList && modelMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           Text: MarkdownText,
@@ -8806,23 +7930,33 @@ const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
         }
       }
     ) }),
-    !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar$1, {}) })
+    !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-6 pt-1 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
+      showModelUsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm leading-ui-sm text-icon6", children: [
+          modelMetadata.modelProvider,
+          "/",
+          modelMetadata.modelId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar$1, {})
+    ] })
   ] });
 };
 const AssistantActionBar$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$2.ActionBarPrimitive.Root,
+    react$3.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       autohideFloat: "single-branch",
       className: "flex gap-1 items-center transition-all relative",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { speaking: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Speak, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Read aloud", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLinesIcon, {}) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { speaking: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Stop", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircleIcon, {}) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { speaking: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Speak, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Read aloud", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLinesIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { speaking: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Stop", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircleIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
         ] }) })
       ]
     }
@@ -8846,7 +7980,7 @@ const useFileSrc = (file) => {
 };
 
 const useAttachmentSrc = () => {
-  const { file, src } = react$2.useAttachment(
+  const { file, src } = react$3.useAttachment(
     shallow.useShallow((a) => {
       if (a.file) {
         const isURL = a.file.name.startsWith("https://");
@@ -8906,11 +8040,11 @@ const TxtPreviewDialog = ({ data, open, onOpenChange }) => {
 };
 
 const InMessageContextWrapper = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Root, { className: "pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(InMessageAttachmentWrapper, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Root, { className: "pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(InMessageAttachmentWrapper, {}) }) });
 };
 const InMessageAttachmentWrapper = () => {
   const src = useAttachmentSrc();
-  const attachment = react$2.useAttachment((a) => a);
+  const attachment = react$3.useAttachment((a) => a);
   const isUrl = attachment?.name?.startsWith("https://");
   if (attachment.type === "image") {
     const actualSrc = isUrl ? attachment?.name : src;
@@ -8919,7 +8053,7 @@ const InMessageAttachmentWrapper = () => {
       {
         type: "image",
         contentType: void 0,
-        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
         src: actualSrc,
         data: void 0
       }
@@ -8932,7 +8066,7 @@ const InMessageAttachmentWrapper = () => {
       {
         type: "document",
         contentType: attachment.contentType,
-        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
         src: isUrl ? attachment?.name : src,
         data: `data:application/pdf;base64,${pdfText}`
       }
@@ -8943,7 +8077,7 @@ const InMessageAttachmentWrapper = () => {
     {
       type: attachment.type,
       contentType: attachment.contentType,
-      nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}),
+      nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}),
       src,
       data: attachment.content?.[0]?.text
     }
@@ -8956,14 +8090,14 @@ const InMessageAttachment = ({ type, contentType, nameSlot, src, data }) => {
   ] }) });
 };
 const UserMessageAttachments = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
 const UserMessage = () => {
-  const message = react$2.useMessage();
+  const message = react$3.useMessage();
   const messageId = message?.id;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", "data-message-id": messageId, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           File: (p) => {
@@ -9028,7 +8162,7 @@ const useSpeechRecognition = ({
   language = "en-US",
   agentId
 }) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [agent, setAgent] = React.useState(null);
   const { runtimeContext } = usePlaygroundStore();
   React.useEffect(() => {
@@ -9152,7 +8286,7 @@ const useMastraSpeechToText = ({ agent }) => {
 };
 
 const useHasAttachments = () => {
-  const composer = react$2.useComposerRuntime();
+  const composer = react$3.useComposerRuntime();
   const [hasAttachments, setHasAttachments] = React.useState(false);
   React.useEffect(() => {
     composer.subscribe(() => {
@@ -9221,22 +8355,22 @@ const ComposerPdfAttachment = ({ document }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full w-full", children: state.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(PdfEntry, { data: state.text, url: isUrl ? document.file?.name : void 0 }) });
 };
 const AttachmentThumbnail = () => {
-  const isImage = react$2.useAttachment((a) => a.type === "image");
-  const document = react$2.useAttachment((a) => a.type === "document" ? a : void 0);
+  const isImage = react$3.useAttachment((a) => a.type === "image");
+  const document = react$3.useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
-  const canRemove = react$2.useAttachment((a) => a.source !== "message");
+  const canRemove = react$3.useAttachment((a) => a.source !== "message");
   const isUrl = document?.file?.name.startsWith("https://");
   const actualSrc = isUrl ? document?.file?.name : src;
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: actualSrc ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsxRuntime.jsx(ComposerTxtAttachment, { document }) : null }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Name, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: actualSrc ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsxRuntime.jsx(ComposerTxtAttachment, { document }) : null }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Name, {}) })
     ] }) }),
     canRemove && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
   ] }) });
 };
 const AttachmentRemove = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     TooltipIconButton,
     {
       tooltip: "Remove file",
@@ -9249,15 +8383,15 @@ const AttachmentRemove = () => {
 const ComposerAttachments = () => {
   const hasAttachments = useHasAttachments();
   if (!hasAttachments) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
 };
 
 const useComposerAddAttachment = ({
   multiple = true,
   onChange
 } = {}) => {
-  const disabled = react$2.useComposer((c) => !c.isEditing);
-  const composerRuntime = react$2.useComposerRuntime();
+  const disabled = react$3.useComposer((c) => !c.isEditing);
+  const composerRuntime = react$3.useComposerRuntime();
   const callback = React.useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -9324,7 +8458,7 @@ const getFileContentType = async (url) => {
 };
 
 const AttachFileDialog = ({ onOpenChange, open }) => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const addFilInputAttachment = useComposerAddAttachment({
     onChange: () => onOpenChange(false)
   });
@@ -9392,17 +8526,17 @@ const useThreadInput = () => {
   return React.useContext(ThreadInputContext);
 };
 
-const Thread = ({ ToolFallback, agentName, agentId, hasMemory }) => {
+const Thread = ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback });
+    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback, hasModelList });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome$1, { agentName }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$2.ThreadPrimitive.Messages,
+        react$3.ThreadPrimitive.Messages,
         {
           components: {
             UserMessage,
@@ -9411,13 +8545,13 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory }) => {
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, agentId })
   ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
 };
 const ThreadWelcome$1 = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
@@ -9430,7 +8564,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
   } else {
     initials = "A";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
@@ -9438,10 +8572,10 @@ const ThreadWelcome$1 = ({ agentName }) => {
 const Composer$1 = ({ hasMemory, agentId }) => {
   const { setThreadInput } = useThreadInput();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1 -outline-offset-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
@@ -9465,7 +8599,7 @@ const Composer$1 = ({ hasMemory, agentId }) => {
   ] });
 };
 const SpeechInput$1 = ({ agentId }) => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition({ agentId });
   React.useEffect(() => {
     if (!transcript) return;
@@ -9498,7 +8632,7 @@ const ComposerAction$1 = () => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(AttachFileDialog, { open: isAddAttachmentDialogOpen, onOpenChange: setIsAddAttachmentDialogOpen }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
         tooltip: "Send",
@@ -9507,15 +8641,15 @@ const ComposerAction$1 = () => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, {}),
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
     ] })
   ] });
 };
@@ -9531,7 +8665,7 @@ function parseJsonString(jsonString) {
   }
 }
 function useAgentWorkingMemory(agentId, threadId, resourceId) {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [threadExists, setThreadExists] = React.useState(false);
   const [workingMemoryData, setWorkingMemoryData] = React.useState(null);
   const [workingMemorySource, setWorkingMemorySource] = React.useState("thread");
@@ -9749,7 +8883,7 @@ class PDFAttachmentAdapter {
 const useAdapters = (agentId) => {
   const [isReady, setIsReady] = React.useState(false);
   const [speechAdapter, setSpeechAdapter] = React.useState(void 0);
-  const baseClient = useMastraClient();
+  const baseClient = react$2.useMastraClient();
   const { runtimeContext } = usePlaygroundStore();
   React.useEffect(() => {
     const check = async () => {
@@ -9759,7 +8893,7 @@ const useAdapters = (agentId) => {
         setSpeechAdapter(new VoiceAttachmentAdapter(agent));
         setIsReady(true);
       } catch {
-        setSpeechAdapter(new react$2.WebSpeechSynthesisAdapter());
+        setSpeechAdapter(new react$3.WebSpeechSynthesisAdapter());
         setIsReady(true);
       }
     };
@@ -9768,9 +8902,9 @@ const useAdapters = (agentId) => {
   return {
     isReady,
     adapters: {
-      attachments: new react$2.CompositeAttachmentAdapter([
-        new react$2.SimpleImageAttachmentAdapter(),
-        new react$2.SimpleTextAttachmentAdapter(),
+      attachments: new react$3.CompositeAttachmentAdapter([
+        new react$3.SimpleImageAttachmentAdapter(),
+        new react$3.SimpleTextAttachmentAdapter(),
         new PDFAttachmentAdapter()
       ]),
       speech: speechAdapter
@@ -9779,14 +8913,14 @@ const useAdapters = (agentId) => {
 };
 
 const handleNetworkMessageFromMemory = (content) => {
-  if (content.resourceType === "workflow") {
+  if (content.primitiveType === "workflow") {
     return {
       role: "assistant",
       content: [
         {
           type: "tool-call",
           toolCallId: content.finalResult.runId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: { runId: content.finalResult.runId },
           args: {
             __mastraMetadata: {
@@ -9801,7 +8935,7 @@ const handleNetworkMessageFromMemory = (content) => {
       ]
     };
   }
-  if (content.resourceType === "agent") {
+  if (content.primitiveType === "agent") {
     const badgeMessages = [];
     let toolCalls = {};
     const messages = content.finalResult.messages.slice(1);
@@ -9839,7 +8973,7 @@ const handleNetworkMessageFromMemory = (content) => {
         {
           type: "tool-call",
           toolCallId: content.finalResult.runId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: { runId: content.finalResult.runId },
           args: {
             __mastraMetadata: {
@@ -9855,14 +8989,14 @@ const handleNetworkMessageFromMemory = (content) => {
       ]
     };
   }
-  if (content.resourceType === "tool") {
+  if (content.primitiveType === "tool") {
     return {
       role: "assistant",
       content: [
         {
           type: "tool-call",
           toolCallId: content.finalResult.toolCallId,
-          toolName: content.resourceId,
+          toolName: content.primitiveId,
           result: content.finalResult.result,
           args: {
             ...content?.input,
@@ -9880,213 +9014,211 @@ const handleNetworkMessageFromMemory = (content) => {
   return { role: "assistant", content: [{ type: "text", text: "Unknown response" }] };
 };
 
-const handleStreamChunk = async ({
-  chunk,
-  setMessages,
-  refreshWorkingMemory,
-  _sideEffects
-}) => {
-  function updater() {
-    setMessages((currentConversation) => {
-      const message = {
+const handleStreamChunk = ({ chunk, conversation }) => {
+  switch (chunk.type) {
+    case "start": {
+      const newMessage = {
         role: "assistant",
-        content: [{ type: "text", text: _sideEffects.content }]
+        content: []
       };
-      if (!_sideEffects.assistantMessageAdded) {
-        _sideEffects.assistantMessageAdded = true;
-        if (_sideEffects.assistantToolCallAddedForUpdater) {
-          _sideEffects.assistantToolCallAddedForUpdater = false;
-        }
-        return [...currentConversation, message];
-      }
-      if (_sideEffects.assistantToolCallAddedForUpdater) {
-        _sideEffects.assistantToolCallAddedForUpdater = false;
-        return [...currentConversation, message];
-      }
-      return [...currentConversation.slice(0, -1), message];
-    });
-  }
-  switch (chunk.type) {
+      return [...conversation, newMessage];
+    }
+    case "text-start":
     case "text-delta": {
-      if (_sideEffects.assistantToolCallAddedForContent) {
-        _sideEffects.assistantToolCallAddedForContent = false;
-        _sideEffects.content = chunk.payload.text;
-      } else {
-        _sideEffects.content += chunk.payload.text;
+      const lastMessage = conversation[conversation.length - 1];
+      if (!lastMessage) return conversation;
+      if (lastMessage.role === "assistant" && typeof lastMessage.content !== `string` && (!lastMessage.content || lastMessage.content.length === 0 || lastMessage.content[lastMessage.content.length - 1]?.type !== `text`)) {
+        return [
+          ...conversation.slice(0, -1),
+          {
+            ...lastMessage,
+            content: [...lastMessage.content || [], { type: "text", text: "" }]
+          }
+        ];
+      }
+      if (chunk.type === `text-start`) return conversation;
+      if (typeof lastMessage.content === `string`) {
+        return [
+          ...conversation.slice(0, -1),
+          {
+            ...lastMessage,
+            content: lastMessage.content + chunk.payload.text
+          }
+        ];
       }
-      updater();
-      break;
+      const lastPart = lastMessage.content?.[lastMessage.content.length - 1];
+      if (!lastPart || lastPart.type !== `text`) return conversation;
+      return [
+        ...conversation.slice(0, -1),
+        {
+          ...lastMessage,
+          content: [...lastMessage.content.slice(0, -1), { ...lastPart, text: lastPart.text + chunk.payload.text }]
+        }
+      ];
     }
     case "tool-output": {
       if (chunk.payload.output?.type.startsWith("workflow-")) {
-        handleWorkflowChunk({ workflowChunk: chunk.payload.output, setMessages, entityName: chunk.payload.toolName });
-      } else {
-        setMessages((currentConversation) => {
-          const lastMessage = currentConversation[currentConversation.length - 1];
-          if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-            const updatedContent = lastMessage.content.map((part) => {
-              if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-                const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
-                return {
-                  ...part,
-                  args: {
-                    ...part.args,
-                    __mastraMetadata: {
-                      ...part.args?.__mastraMetadata,
-                      toolOutput: [...existingToolOutput, chunk?.payload?.output]
-                    }
-                  }
-                };
+        return handleWorkflowChunk({
+          workflowChunk: chunk.payload.output,
+          conversation,
+          entityName: chunk.payload.toolName
+        });
+      }
+      const lastMessage = conversation[conversation.length - 1];
+      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+        const updatedContent = lastMessage.content.map((part) => {
+          if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
+            const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
+            return {
+              ...part,
+              args: {
+                ...part.args,
+                __mastraMetadata: {
+                  ...part.args?.__mastraMetadata,
+                  toolOutput: [...existingToolOutput, chunk?.payload?.output]
+                }
               }
-              return part;
-            });
-            const updatedMessage = {
-              ...lastMessage,
-              content: updatedContent
             };
-            return [...currentConversation.slice(0, -1), updatedMessage];
           }
-          return currentConversation;
+          return part;
         });
+        const updatedMessage = {
+          ...lastMessage,
+          content: updatedContent
+        };
+        return [...conversation.slice(0, -1), updatedMessage];
       }
-      break;
+      return [...conversation];
     }
     case "tool-call": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        if (lastMessage && lastMessage.role === "assistant") {
-          const updatedMessage = {
-            ...lastMessage,
-            content: Array.isArray(lastMessage.content) ? [
-              ...lastMessage.content,
-              {
-                type: "tool-call",
-                toolCallId: chunk.payload.toolCallId,
-                toolName: chunk.payload.toolName,
-                args: {
-                  ...chunk.payload.args,
-                  __mastraMetadata: {
-                    ...chunk.payload.args?.__mastraMetadata,
-                    isStreaming: true
-                  }
-                }
-              }
-            ] : [
-              ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
-              {
-                type: "tool-call",
-                toolCallId: chunk.payload.toolCallId,
-                toolName: chunk.payload.toolName,
-                args: {
-                  ...chunk.payload.args,
-                  __mastraMetadata: {
-                    ...chunk.payload.args?.__mastraMetadata,
-                    isStreaming: true
-                  }
+      const lastMessage = conversation[conversation.length - 1];
+      if (lastMessage && lastMessage.role === "assistant") {
+        const updatedMessage = {
+          ...lastMessage,
+          content: Array.isArray(lastMessage.content) ? [
+            ...lastMessage.content,
+            {
+              type: "tool-call",
+              toolCallId: chunk.payload.toolCallId,
+              toolName: chunk.payload.toolName,
+              args: {
+                ...chunk.payload.args,
+                __mastraMetadata: {
+                  ...chunk.payload.args?.__mastraMetadata,
+                  isStreaming: true
                 }
               }
-            ]
-          };
-          _sideEffects.assistantToolCallAddedForUpdater = true;
-          _sideEffects.assistantToolCallAddedForContent = true;
-          return [...currentConversation.slice(0, -1), updatedMessage];
-        }
-        const newMessage = {
-          role: "assistant",
-          content: [
-            { type: "text", text: _sideEffects.content },
+            }
+          ] : [
+            ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
             {
               type: "tool-call",
               toolCallId: chunk.payload.toolCallId,
               toolName: chunk.payload.toolName,
               args: {
                 ...chunk.payload.args,
-                __mastraMetadata: { ...chunk.payload.args?.__mastraMetadata, isStreaming: true }
+                __mastraMetadata: {
+                  ...chunk.payload.args?.__mastraMetadata,
+                  isStreaming: true
+                }
               }
             }
           ]
         };
-        _sideEffects.assistantToolCallAddedForUpdater = true;
-        _sideEffects.assistantToolCallAddedForContent = true;
-        return [...currentConversation, newMessage];
-      });
-      _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId] = chunk.payload.toolName;
-      break;
+        return [...conversation.slice(0, -1), updatedMessage];
+      }
+      const newMessage = {
+        role: "assistant",
+        content: [
+          {
+            type: "tool-call",
+            toolCallId: chunk.payload.toolCallId,
+            toolName: chunk.payload.toolName,
+            args: {
+              ...chunk.payload.args,
+              __mastraMetadata: {
+                ...chunk.payload.args?.__mastraMetadata,
+                isStreaming: true
+              }
+            }
+          }
+        ]
+      };
+      return [...conversation, newMessage];
     }
     case "tool-result": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-          const updatedContent = lastMessage.content.map((part) => {
-            if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-              return {
-                ...part,
-                result: chunk.payload.result
-              };
-            }
-            return part;
-          });
-          const updatedMessage = {
-            ...lastMessage,
-            content: updatedContent
-          };
-          return [...currentConversation.slice(0, -1), updatedMessage];
-        }
-        return currentConversation;
-      });
-      try {
-        const toolName = _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId];
-        if (toolName === "updateWorkingMemory" && chunk.payload.result?.success) {
-          await refreshWorkingMemory?.();
-        }
-      } finally {
-        delete _sideEffects.toolCallIdToName.current[chunk.payload.toolCallId];
+      const lastMessage = conversation[conversation.length - 1];
+      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+        const updatedContent = lastMessage.content.map((part) => {
+          if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
+            return {
+              ...part,
+              result: chunk.payload.result
+            };
+          }
+          return part;
+        });
+        const updatedMessage = {
+          ...lastMessage,
+          content: updatedContent
+        };
+        return [...conversation.slice(0, -1), updatedMessage];
       }
-      break;
+      return [...conversation];
     }
     case "error": {
       if (typeof chunk.payload.error === "string") {
         throw new Error(chunk.payload.error);
       }
-      break;
+      return [...conversation];
     }
     case "finish": {
-      handleFinishReason$1(chunk.payload.finishReason);
-      break;
+      const lastMessage = conversation[conversation.length - 1];
+      handleFinishReason$1(chunk.payload.stepResult.reason);
+      if (lastMessage && lastMessage.role === "assistant") {
+        const updatedMessage = {
+          ...lastMessage,
+          metadata: {
+            custom: {
+              modelMetadata: chunk.payload.metadata.modelMetadata
+            }
+          }
+        };
+        return [...conversation.slice(0, -1), updatedMessage];
+      }
+      return [...conversation];
     }
     case "reasoning-delta": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-          const updatedContent = lastMessage.content.map((part) => {
-            if (typeof part === "object" && part.type === "reasoning") {
-              return {
-                ...part,
-                text: part.text + chunk.payload.text
-              };
-            }
-            return part;
-          });
-          const updatedMessage = {
-            ...lastMessage,
-            content: updatedContent
-          };
-          return [...currentConversation.slice(0, -1), updatedMessage];
-        }
-        const newMessage = {
-          role: "assistant",
-          content: [
-            {
-              type: "reasoning",
-              text: chunk.payload.text
-            },
-            { type: "text", text: _sideEffects.content }
-          ]
+      const lastMessage = conversation[conversation.length - 1];
+      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+        const updatedContent = lastMessage.content.map((part) => {
+          if (typeof part === "object" && part.type === "reasoning") {
+            return {
+              ...part,
+              text: part.text + chunk.payload.text
+            };
+          }
+          return part;
+        });
+        const updatedMessage = {
+          ...lastMessage,
+          content: updatedContent
         };
-        return [...currentConversation, newMessage];
-      });
-      break;
+        return [...conversation.slice(0, -1), updatedMessage];
+      }
+      const newMessage = {
+        role: "assistant",
+        content: [
+          {
+            type: "reasoning",
+            text: chunk.payload.text
+          }
+        ]
+      };
+      return [...conversation, newMessage];
     }
+    default:
+      return [...conversation];
   }
 };
 const handleFinishReason$1 = (finishReason) => {
@@ -10095,15 +9227,179 @@ const handleFinishReason$1 = (finishReason) => {
       throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
   }
 };
-const handleWorkflowChunk = ({ workflowChunk, setMessages, entityName }) => {
-  reactDom.flushSync(() => {
-    setMessages((currentConversation) => {
-      const lastMessage = currentConversation[currentConversation.length - 1];
+const handleWorkflowChunk = ({
+  workflowChunk,
+  conversation,
+  entityName
+}) => {
+  const lastMessage = conversation[conversation.length - 1];
+  const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
+  const newMessage = {
+    ...lastMessage,
+    content: contentArray.map((part) => {
+      if (part.type === "tool-call") {
+        return {
+          ...part,
+          toolName: part?.entityName || entityName,
+          args: {
+            ...part.args,
+            __mastraMetadata: {
+              ...part.args?.__mastraMetadata,
+              workflowFullState: mapWorkflowStreamChunkToWatchResult(
+                part.args?.__mastraMetadata?.workflowFullState || {},
+                workflowChunk
+              ),
+              isStreaming: true
+            }
+          }
+        };
+      }
+      return part;
+    })
+  };
+  return [...conversation.slice(0, -1), newMessage];
+};
+const handleAgentChunk = ({
+  agentChunk,
+  conversation,
+  entityName
+}) => {
+  switch (agentChunk.type) {
+    case "tool-result": {
+      const lastMessage = conversation[conversation.length - 1];
+      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
+      const newMessage = {
+        ...lastMessage,
+        content: contentArray.map((part) => {
+          if (part.type === "tool-call") {
+            const messages = part.args?.__mastraMetadata?.messages || [];
+            const next = {
+              ...part,
+              toolName: part?.entityName || entityName,
+              args: {
+                ...part.args,
+                __mastraMetadata: {
+                  ...part.args?.__mastraMetadata,
+                  isStreaming: true,
+                  messages: [
+                    ...messages.slice(0, -1),
+                    {
+                      ...messages[messages.length - 1],
+                      type: "tool",
+                      toolName: agentChunk.payload.toolName,
+                      args: agentChunk.payload.args,
+                      toolOutput: agentChunk.payload.result
+                    }
+                  ]
+                }
+              }
+            };
+            return next;
+          }
+          return part;
+        })
+      };
+      return [...conversation.slice(0, -1), newMessage];
+    }
+    case "tool-call": {
+      const lastMessage = conversation[conversation.length - 1];
+      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
+      const newMessage = {
+        ...lastMessage,
+        content: contentArray.map((part) => {
+          if (part.type === "tool-call") {
+            const messages = part.args?.__mastraMetadata?.messages || [];
+            const next = {
+              ...part,
+              toolName: part?.entityName || entityName,
+              args: {
+                ...part.args,
+                __mastraMetadata: {
+                  ...part.args?.__mastraMetadata,
+                  isStreaming: true,
+                  messages: [
+                    ...messages,
+                    {
+                      type: "tool",
+                      toolCallId: agentChunk.payload.toolCallId,
+                      toolName: agentChunk.payload.toolName,
+                      args: {
+                        ...agentChunk.payload.args,
+                        __mastraMetadata: {
+                          ...agentChunk.payload.args?.__mastraMetadata,
+                          isStreaming: true
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            };
+            return next;
+          }
+          return part;
+        })
+      };
+      return [...conversation.slice(0, -1), newMessage];
+    }
+    case "text-delta": {
+      const lastMessage = conversation[conversation.length - 1];
+      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
+      const newMessage = {
+        ...lastMessage,
+        content: contentArray.map((part) => {
+          if (part.type === "tool-call") {
+            const messages = part.args?.__mastraMetadata?.messages || [];
+            const lastMastraMessage = messages[messages.length - 1];
+            const nextMessages = lastMastraMessage?.type === "text" ? [
+              ...messages.slice(0, -1),
+              { type: "text", content: (lastMastraMessage?.content || "") + agentChunk.payload.text }
+            ] : [...messages, { type: "text", content: agentChunk.payload.text }];
+            return {
+              ...part,
+              toolName: part?.entityName || entityName,
+              args: {
+                ...part.args,
+                __mastraMetadata: {
+                  ...part.args?.__mastraMetadata,
+                  isStreaming: true,
+                  messages: nextMessages
+                }
+              }
+            };
+          }
+          return part;
+        })
+      };
+      return [...conversation.slice(0, -1), newMessage];
+    }
+    case "tool-output": {
+      if (!agentChunk.payload.output.type.startsWith("workflow-")) return [...conversation];
+      const lastMessage = conversation[conversation.length - 1];
       const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
       const newMessage = {
         ...lastMessage,
         content: contentArray.map((part) => {
           if (part.type === "tool-call") {
+            const messages = part.args?.__mastraMetadata?.messages || [];
+            const lastMastraMessage = messages[messages.length - 1];
+            const nextMessages = lastMastraMessage?.type === "tool" ? [
+              ...messages.slice(0, -1),
+              {
+                ...lastMastraMessage,
+                args: {
+                  ...agentChunk.payload.args,
+                  __mastraMetadata: {
+                    ...agentChunk.payload.args?.__mastraMetadata,
+                    workflowFullState: mapWorkflowStreamChunkToWatchResult(
+                      lastMastraMessage.args?.__mastraMetadata?.workflowFullState || {},
+                      agentChunk.payload.output
+                    ),
+                    isStreaming: true
+                  }
+                }
+              }
+            ] : messages;
             return {
               ...part,
               toolName: part?.entityName || entityName,
@@ -10111,11 +9407,8 @@ const handleWorkflowChunk = ({ workflowChunk, setMessages, entityName }) => {
                 ...part.args,
                 __mastraMetadata: {
                   ...part.args?.__mastraMetadata,
-                  workflowFullState: mapWorkflowStreamChunkToWatchResult(
-                    part.args?.__mastraMetadata?.workflowFullState || {},
-                    workflowChunk
-                  ),
-                  isStreaming: true
+                  isStreaming: true,
+                  messages: nextMessages
                 }
               }
             };
@@ -10123,216 +9416,42 @@ const handleWorkflowChunk = ({ workflowChunk, setMessages, entityName }) => {
           return part;
         })
       };
-      return [...currentConversation.slice(0, -1), newMessage];
-    });
-  });
-};
-const handleAgentChunk = ({ agentChunk, setMessages, entityName }) => {
-  switch (agentChunk.type) {
-    case "tool-result": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-        const newMessage = {
-          ...lastMessage,
-          content: contentArray.map((part) => {
-            if (part.type === "tool-call") {
-              const messages = part.args?.__mastraMetadata?.messages || [];
-              const next = {
-                ...part,
-                toolName: part?.entityName || entityName,
-                args: {
-                  ...part.args,
-                  __mastraMetadata: {
-                    ...part.args?.__mastraMetadata,
-                    isStreaming: true,
-                    messages: [
-                      ...messages.slice(0, -1),
-                      {
-                        ...messages[messages.length - 1],
-                        type: "tool",
-                        toolName: agentChunk.payload.toolName,
-                        args: agentChunk.payload.args,
-                        toolOutput: agentChunk.payload.result
-                      }
-                    ]
-                  }
-                }
-              };
-              return next;
-            }
-            return part;
-          })
-        };
-        return [...currentConversation.slice(0, -1), newMessage];
-      });
-      break;
-    }
-    case "tool-call": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-        const newMessage = {
-          ...lastMessage,
-          content: contentArray.map((part) => {
-            if (part.type === "tool-call") {
-              const messages = part.args?.__mastraMetadata?.messages || [];
-              const next = {
-                ...part,
-                toolName: part?.entityName || entityName,
-                args: {
-                  ...part.args,
-                  __mastraMetadata: {
-                    ...part.args?.__mastraMetadata,
-                    isStreaming: true,
-                    messages: [
-                      ...messages,
-                      {
-                        type: "tool",
-                        toolCallId: agentChunk.payload.toolCallId,
-                        toolName: agentChunk.payload.toolName,
-                        args: {
-                          ...agentChunk.payload.args,
-                          __mastraMetadata: {
-                            ...agentChunk.payload.args?.__mastraMetadata,
-                            isStreaming: true
-                          }
-                        }
-                      }
-                    ]
-                  }
-                }
-              };
-              return next;
-            }
-            return part;
-          })
-        };
-        return [...currentConversation.slice(0, -1), newMessage];
-      });
-      break;
-    }
-    case "text-delta": {
-      setMessages((currentConversation) => {
-        const lastMessage = currentConversation[currentConversation.length - 1];
-        const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-        const newMessage = {
-          ...lastMessage,
-          content: contentArray.map((part) => {
-            if (part.type === "tool-call") {
-              const messages = part.args?.__mastraMetadata?.messages || [];
-              const lastMastraMessage = messages[messages.length - 1];
-              const nextMessages = lastMastraMessage?.type === "text" ? [
-                ...messages.slice(0, -1),
-                { type: "text", content: (lastMastraMessage?.content || "") + agentChunk.payload.text }
-              ] : [...messages, { type: "text", content: agentChunk.payload.text }];
-              return {
-                ...part,
-                toolName: part?.entityName || entityName,
-                args: {
-                  ...part.args,
-                  __mastraMetadata: {
-                    ...part.args?.__mastraMetadata,
-                    isStreaming: true,
-                    messages: nextMessages
-                  }
-                }
-              };
-            }
-            return part;
-          })
-        };
-        return [...currentConversation.slice(0, -1), newMessage];
-      });
-      break;
-    }
-    case "tool-output": {
-      reactDom.flushSync(() => {
-        setMessages((currentConversation) => {
-          if (!agentChunk.payload.output.type.startsWith("workflow-")) return currentConversation;
-          const lastMessage = currentConversation[currentConversation.length - 1];
-          const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-          const newMessage = {
-            ...lastMessage,
-            content: contentArray.map((part) => {
-              if (part.type === "tool-call") {
-                const messages = part.args?.__mastraMetadata?.messages || [];
-                const lastMastraMessage = messages[messages.length - 1];
-                const nextMessages = lastMastraMessage?.type === "tool" ? [
-                  ...messages.slice(0, -1),
-                  {
-                    ...lastMastraMessage,
-                    args: {
-                      ...agentChunk.payload.args,
-                      __mastraMetadata: {
-                        ...agentChunk.payload.args?.__mastraMetadata,
-                        workflowFullState: mapWorkflowStreamChunkToWatchResult(
-                          lastMastraMessage.args?.__mastraMetadata?.workflowFullState || {},
-                          agentChunk.payload.output
-                        ),
-                        isStreaming: true
-                      }
-                    }
-                  }
-                ] : messages;
-                return {
-                  ...part,
-                  toolName: part?.entityName || entityName,
-                  args: {
-                    ...part.args,
-                    __mastraMetadata: {
-                      ...part.args?.__mastraMetadata,
-                      isStreaming: true,
-                      messages: nextMessages
-                    }
-                  }
-                };
-              }
-              return part;
-            })
-          };
-          return [...currentConversation.slice(0, -1), newMessage];
-        });
-      });
-      break;
+      return [...conversation.slice(0, -1), newMessage];
     }
+    default:
+    case "agent-execution-end":
+      return [...conversation];
   }
 };
 const createRootToolAssistantMessage = ({
   chunk,
   entityName,
-  setMessages,
+  conversation,
   runId,
-  _sideEffects,
   from,
   networkMetadata
 }) => {
-  setMessages((currentConversation) => {
-    if (!entityName || !runId) return currentConversation;
-    const newMessage = {
-      role: "assistant",
-      content: [
-        { type: "text", text: _sideEffects.content },
-        {
-          type: "tool-call",
-          toolCallId: runId,
-          toolName: entityName,
-          args: {
-            ...chunk?.payload?.args,
-            __mastraMetadata: {
-              from,
-              networkMetadata,
-              ...chunk.payload.args?.__mastraMetadata,
-              isStreaming: true
-            }
+  if (!entityName || !runId) return [...conversation];
+  const newMessage = {
+    role: "assistant",
+    content: [
+      {
+        type: "tool-call",
+        toolCallId: runId,
+        toolName: entityName,
+        args: {
+          ...chunk?.payload?.args,
+          __mastraMetadata: {
+            from,
+            networkMetadata,
+            ...chunk.payload.args?.__mastraMetadata,
+            isStreaming: true
           }
         }
-      ]
-    };
-    _sideEffects.assistantToolCallAddedForUpdater = true;
-    _sideEffects.assistantToolCallAddedForContent = true;
-    return [...currentConversation, newMessage];
-  });
+      }
+    ]
+  };
+  return [...conversation, newMessage];
 };
 
 const convertMessage$1 = (message) => {
@@ -10381,6 +9500,60 @@ const convertToAIAttachments = async (attachments) => {
   });
   return Promise.all(promises);
 };
+const initializeMessageState = (initialMessages) => {
+  const convertedMessages = initialMessages?.map((message) => {
+    let content;
+    try {
+      content = JSON.parse(message.content);
+      if (content.isNetwork) {
+        return handleNetworkMessageFromMemory(content);
+      }
+    } catch (e) {
+    }
+    const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
+      type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
+      mimeType: image.contentType,
+      image: image.url
+    }));
+    const formattedParts = (message.parts || []).map((part) => {
+      if (part.type === "reasoning") {
+        return {
+          type: "reasoning",
+          text: part.reasoning || part?.details?.filter((detail) => detail.type === "text")?.map((detail) => detail.text).join(" ")
+        };
+      }
+      if (part.type === "tool-invocation") {
+        if (part.toolInvocation.state === "result") {
+          return {
+            type: "tool-call",
+            toolCallId: part.toolInvocation.toolCallId,
+            toolName: part.toolInvocation.toolName,
+            args: part.toolInvocation.args,
+            result: part.toolInvocation.result
+          };
+        }
+      }
+      if (part.type === "file") {
+        return {
+          type: "file",
+          mimeType: part.mimeType,
+          data: part.data
+        };
+      }
+      if (part.type === "text") {
+        return {
+          type: "text",
+          text: part.text
+        };
+      }
+    }).filter(Boolean);
+    return {
+      ...message,
+      content: [...formattedParts, ...attachmentsAsContentParts]
+    };
+  }).filter(Boolean);
+  return convertedMessages;
+};
 function MastraRuntimeProvider({
   children,
   agentId,
@@ -10393,8 +9566,17 @@ function MastraRuntimeProvider({
   modelVersion
 }) {
   const [isRunning, setIsRunning] = React.useState(false);
-  const [messages, setMessages] = React.useState([]);
-  const [currentThreadId, setCurrentThreadId] = React.useState(threadId);
+  const {
+    messages,
+    setMessages,
+    streamVNext,
+    network,
+    cancelRun,
+    isRunning: isRunningStreamVNext
+  } = react$2.useChat({
+    agentId,
+    initializeMessages: () => memory ? initializeMessageState(initialMessages || []) : []
+  });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
   const {
@@ -10417,76 +9599,23 @@ function MastraRuntimeProvider({
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
-  React.useEffect(() => {
-    const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
-    if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
-      if (initialMessages && threadId && memory) {
-        const convertedMessages = initialMessages?.map((message) => {
-          let content;
-          try {
-            content = JSON.parse(message.content);
-            if (content.isNetwork) {
-              return handleNetworkMessageFromMemory(content);
-            }
-          } catch (e) {
-          }
-          const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
-            type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
-            mimeType: image.contentType,
-            image: image.url
-          }));
-          const formattedParts = (message.parts || []).map((part) => {
-            if (part.type === "reasoning") {
-              return {
-                type: "reasoning",
-                text: part.reasoning || part?.details?.filter((detail) => detail.type === "text")?.map((detail) => detail.text).join(" ")
-              };
-            }
-            if (part.type === "tool-invocation") {
-              if (part.toolInvocation.state === "result") {
-                return {
-                  type: "tool-call",
-                  toolCallId: part.toolInvocation.toolCallId,
-                  toolName: part.toolInvocation.toolName,
-                  args: part.toolInvocation.args,
-                  result: part.toolInvocation.result
-                };
-              }
-            }
-            if (part.type === "file") {
-              return {
-                type: "file",
-                mimeType: part.mimeType,
-                data: part.data
-              };
-            }
-            if (part.type === "text") {
-              return {
-                type: "text",
-                text: part.text
-              };
-            }
-          }).filter(Boolean);
-          return {
-            ...message,
-            content: [...formattedParts, ...attachmentsAsContentParts]
-          };
-        }).filter(Boolean);
-        setMessages(convertedMessages);
-        setCurrentThreadId(threadId);
-      }
-    }
-  }, [initialMessages, threadId, memory]);
-  const baseClient = useMastraClient();
+  const modelSettingsArgs = {
+    frequencyPenalty,
+    presencePenalty,
+    maxRetries,
+    temperature,
+    topK,
+    topP,
+    maxTokens,
+    instructions,
+    providerOptions
+  };
+  const baseClient = react$2.useMastraClient();
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    setMessages((currentConversation) => [
-      ...currentConversation,
-      { role: "user", content: input, attachments: message.attachments }
-    ]);
-    setIsRunning(true);
+    setMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     const controller = new AbortController();
     abortControllerRef.current = controller;
     const clientWithAbort = new clientJs.MastraClient({
@@ -10496,7 +9625,7 @@ function MastraRuntimeProvider({
     const agent = clientWithAbort.getAgent(agentId);
     try {
       let handleGenerateResponse = function(generatedResponse) {
-        if (generatedResponse.response && "messages" in generatedResponse.response) {
+        if (generatedResponse.response && "messages" in generatedResponse.response && generatedResponse.response.messages) {
           const latestMessage = generatedResponse.response.messages.reduce(
             (acc, message2) => {
               const _content = Array.isArray(acc.content) ? acc.content : [];
@@ -10569,7 +9698,17 @@ function MastraRuntimeProvider({
             },
             { role: "assistant", content: [] }
           );
-          setMessages((currentConversation) => [...currentConversation, latestMessage]);
+          setMessages((currentConversation) => [
+            ...currentConversation,
+            {
+              ...latestMessage,
+              metadata: {
+                custom: {
+                  modelMetadata: generatedResponse.response.modelMetadata
+                }
+              }
+            }
+          ]);
           if (generatedResponse.finishReason) {
             handleFinishReason(generatedResponse.finishReason);
           }
@@ -10577,86 +9716,72 @@ function MastraRuntimeProvider({
       };
       if (modelVersion === "v2") {
         if (chatWithNetwork) {
-          const response = await agent.network({
-            messages: [
+          let currentEntityId;
+          await network({
+            coreUserMessages: [
               {
                 role: "user",
                 content: input
-              }
+              },
+              ...attachments
             ],
-            maxSteps,
-            modelSettings: {
-              frequencyPenalty,
-              presencePenalty,
-              maxRetries,
-              maxOutputTokens: maxTokens,
-              temperature,
-              topK,
-              topP
-            },
-            runId: agentId,
             runtimeContext: runtimeContextInstance,
-            ...memory ? { thread: threadId, resourceId: agentId } : {}
-          });
-          const _sideEffects = {
-            assistantMessageAdded: false,
-            assistantToolCallAddedForUpdater: false,
-            assistantToolCallAddedForContent: false,
-            content: "",
-            toolCallIdToName
-          };
-          let currentEntityId;
-          await response.processDataStream({
-            onChunk: async (chunk) => {
+            threadId,
+            modelSettings: modelSettingsArgs,
+            signal: controller.signal,
+            onNetworkChunk: (chunk, conversation) => {
               if (chunk.type.startsWith("agent-execution-event-")) {
                 const agentChunk = chunk.payload;
-                if (!currentEntityId) return;
-                await handleAgentChunk({ agentChunk, setMessages, entityName: currentEntityId });
+                if (!currentEntityId) return conversation;
+                return handleAgentChunk({ agentChunk, conversation, entityName: currentEntityId });
               } else if (chunk.type === "tool-execution-start") {
-                await handleStreamChunk({
+                const { args: argsData } = chunk.payload;
+                const nestedArgs = argsData.args || {};
+                const mastraMetadata = argsData.__mastraMetadata || {};
+                const selectionReason = argsData.selectionReason || "";
+                return handleStreamChunk({
                   chunk: {
                     ...chunk,
                     type: "tool-call",
                     payload: {
-                      ...chunk?.payload,
-                      toolCallId: chunk?.payload?.args?.toolCallId,
-                      toolName: chunk?.payload?.args?.toolName,
+                      ...chunk.payload,
+                      toolCallId: argsData.toolCallId || "unknown",
+                      toolName: argsData.toolName || "unknown",
                       args: {
-                        ...chunk?.payload?.args?.args,
+                        ...nestedArgs,
                         __mastraMetadata: {
-                          ...chunk?.payload?.args?.__mastraMetadata,
+                          ...mastraMetadata,
                           networkMetadata: {
-                            selectionReason: chunk?.payload?.args?.selectionReason || "",
-                            input: chunk?.payload?.args?.args
+                            selectionReason,
+                            input: nestedArgs
                           }
                         }
                       }
                     }
                   },
-                  setMessages,
-                  refreshWorkingMemory,
-                  _sideEffects
+                  conversation
                 });
               } else if (chunk.type === "tool-execution-end") {
-                await handleStreamChunk({
+                const next = handleStreamChunk({
                   chunk: { ...chunk, type: "tool-result" },
-                  setMessages,
-                  refreshWorkingMemory,
-                  _sideEffects
+                  conversation
                 });
+                if (chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
+                  refreshWorkingMemory?.();
+                }
+                return next;
               } else if (chunk.type.startsWith("workflow-execution-event-")) {
                 const workflowChunk = chunk.payload;
-                if (!currentEntityId) return;
-                await handleWorkflowChunk({ workflowChunk, setMessages, entityName: currentEntityId });
+                if (!currentEntityId) return conversation;
+                return handleWorkflowChunk({ workflowChunk, conversation, entityName: currentEntityId });
               } else if (chunk.type === "workflow-execution-start" || chunk.type === "agent-execution-start") {
-                currentEntityId = chunk.payload?.args?.resourceId;
+                currentEntityId = chunk.payload?.args?.primitiveId;
                 const runId = chunk.payload.runId;
-                if (!currentEntityId || !runId) return;
-                createRootToolAssistantMessage({
+                if (!currentEntityId || !runId) return conversation;
+                return createRootToolAssistantMessage({
                   entityName: currentEntityId,
-                  setMessages,
+                  conversation,
                   runId,
-                  _sideEffects,
                   chunk,
                   from: chunk.type === "agent-execution-start" ? "AGENT" : "WORKFLOW",
                   networkMetadata: {
@@ -10664,21 +9789,19 @@ function MastraRuntimeProvider({
                     input: chunk?.payload?.args?.prompt
                   }
                 });
-                _sideEffects.toolCallIdToName.current[runId] = currentEntityId;
               } else if (chunk.type === "network-execution-event-step-finish") {
-                setMessages((currentConversation) => {
-                  return [
-                    ...currentConversation,
-                    { role: "assistant", content: [{ type: "text", text: chunk?.payload?.result || "" }] }
-                  ];
-                });
+                return [
+                  ...conversation,
+                  { role: "assistant", content: [{ type: "text", text: chunk?.payload?.result || "" }] }
+                ];
               } else {
-                await handleStreamChunk({ chunk, setMessages, refreshWorkingMemory, _sideEffects });
+                return handleStreamChunk({ chunk, conversation });
               }
             }
           });
         } else {
           if (chatWithGenerateVNext) {
+            setIsRunning(true);
             const response = await agent.generateVNext({
               messages: [
                 {
@@ -10706,50 +9829,32 @@ function MastraRuntimeProvider({
             setIsRunning(false);
             return;
           } else {
-            const response = await agent.streamVNext({
-              messages: [
+            await streamVNext({
+              coreUserMessages: [
                 {
                   role: "user",
                   content: input
                 },
                 ...attachments
               ],
-              runId: agentId,
-              modelSettings: {
-                frequencyPenalty,
-                presencePenalty,
-                maxRetries,
-                maxOutputTokens: maxTokens,
-                temperature,
-                topK,
-                topP
-              },
-              instructions,
               runtimeContext: runtimeContextInstance,
-              ...memory ? { threadId, resourceId: agentId } : {},
-              providerOptions
-            });
-            if (!response.body) {
-              throw new Error("No response body");
-            }
-            const _sideEffects = {
-              assistantMessageAdded: false,
-              assistantToolCallAddedForUpdater: false,
-              assistantToolCallAddedForContent: false,
-              content: "",
-              toolCallIdToName
-            };
-            await response.processDataStream({
-              onChunk: async (chunk) => {
-                await handleStreamChunk({ chunk, setMessages, refreshWorkingMemory, _sideEffects });
-              }
+              threadId,
+              modelSettings: modelSettingsArgs,
+              onChunk: (chunk, conversation) => {
+                const next = handleStreamChunk({ chunk, conversation });
+                if (chunk.type === "tool-result" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
+                  refreshWorkingMemory?.();
+                }
+                return next;
+              },
+              signal: controller.signal
             });
-            setIsRunning(false);
             return;
           }
         }
       } else {
         if (chatWithGenerate) {
+          setIsRunning(true);
           const generateResponse = await agent.generate({
             messages: [
               {
@@ -10864,6 +9969,7 @@ function MastraRuntimeProvider({
               return [...currentConversation.slice(0, -1), message2];
             });
           };
+          setIsRunning(true);
           const response = await agent.stream({
             messages: [
               {
@@ -11043,11 +10149,12 @@ function MastraRuntimeProvider({
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
       setIsRunning(false);
+      cancelRun?.();
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
-  const runtime = react$2.useExternalStoreRuntime({
-    isRunning,
+  const runtime = react$3.useExternalStoreRuntime({
+    isRunning: isRunning || isRunningStreamVNext,
     messages,
     convertMessage: convertMessage$1,
     onNew,
@@ -11055,7 +10162,7 @@ function MastraRuntimeProvider({
     adapters: isReady ? adapters : void 0
   });
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.AssistantRuntimeProvider, { runtime, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.AssistantRuntimeProvider, { runtime, children: [
     " ",
     children,
     " "
@@ -11129,7 +10236,8 @@ const AgentChat = ({
   initialMessages,
   memory,
   refreshThreadList,
-  modelVersion
+  modelVersion,
+  modelList
 }) => {
   const { settings } = useAgentSettings();
   const { runtimeContext } = usePlaygroundStore();
@@ -11145,7 +10253,7 @@ const AgentChat = ({
       refreshThreadList,
       settings,
       runtimeContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, agentId, hasModelList: Boolean(modelList) })
     }
   );
 };
@@ -11399,7 +10507,7 @@ function EvalTable({ evals, isCIMode = false, onRefresh }) {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-48 text-mastra-el-3", children: "Evaluations" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$3.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$4.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "h-12 w-16" }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: 4, className: "h-32 px-4 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-5" }),
@@ -12268,6 +11376,7 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
 
 const providerMapToIcon = {
   "openai.chat": /* @__PURE__ */ jsxRuntime.jsx(OpenaiChatIcon, {}),
+  "openai.responses": /* @__PURE__ */ jsxRuntime.jsx(OpenaiChatIcon, {}),
   "anthropic.chat": /* @__PURE__ */ jsxRuntime.jsx(AnthropicChatIcon, {}),
   "anthropic.messages": /* @__PURE__ */ jsxRuntime.jsx(AnthropicMessagesIcon, {}),
   AZURE: /* @__PURE__ */ jsxRuntime.jsx(AzureIcon, {}),
@@ -12299,17 +11408,34 @@ const columns$2 = [
   {
     header: "Model",
     accessorKey: "model",
-    size: 160,
+    size: 300,
     cell: ({ row }) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Badge$1,
-        {
-          variant: "default",
-          icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsxRuntime.jsx(OpenAIIcon, {}),
-          className: "truncate",
-          children: row.original.modelId || "N/A"
-        }
-      ) });
+      return /* @__PURE__ */ jsxRuntime.jsxs(Cell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Badge$1,
+          {
+            variant: "default",
+            icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsxRuntime.jsx(OpenAIIcon, {}),
+            className: "truncate",
+            children: row.original.modelId || "N/A"
+          }
+        ),
+        row.original.modelList && row.original.modelList.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { variant: "info", className: "ml-2", children: [
+            "+ ",
+            row.original.modelList.length - 1,
+            " more"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "bg-surface5 flex flex-col gap-2", children: row.original.modelList.slice(1).map((mdl) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Badge$1,
+            {
+              variant: "default",
+              icon: providerMapToIcon[mdl.model.provider],
+              children: mdl.model.modelId
+            }
+          ) }, mdl.id)) })
+        ] }) : null
+      ] });
     }
   },
   {
@@ -12342,7 +11468,8 @@ function AgentsTable({ agents, isLoading }) {
         repoUrl: void 0,
         tools: agent.tools,
         modelId: agent.modelId,
-        link: paths.agentLink(key)
+        link: paths.agentLink(key),
+        modelList: agent.modelList
       };
     }),
     [agents]
@@ -12358,10 +11485,10 @@ function AgentsTable({ agents, isLoading }) {
   if (rows.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyAgentsTable, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
     /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) });
+  ] }) }) });
 }
 const AgentsTableSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
@@ -13995,7 +13122,7 @@ function ScoresTools({ onEntityChange, onReset, selectedEntity, entityOptions, i
 }
 
 const useScoresByEntityId = (entityId, entityType, page = 0) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [scores, setScores] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   React.useEffect(() => {
@@ -14020,7 +13147,7 @@ const useScoresByEntityId = (entityId, entityType, page = 0) => {
   return { scores, isLoading };
 };
 const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["scores", scorerId, page, entityId, entityType],
     queryFn: () => client.getScoresByScorerId({ scorerId, page, entityId, entityType, perPage: 10 }),
@@ -14028,7 +13155,7 @@ const useScoresByScorerId = ({ scorerId, page = 0, entityId, entityType }) => {
   });
 };
 const useScorer = (scorerId) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   const [scorer, setScorer] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   React.useEffect(() => {
@@ -14050,7 +13177,7 @@ const useScorer = (scorerId) => {
   return { scorer, isLoading };
 };
 const useScorers = () => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["scorers"],
     queryFn: () => client.getScorers(),
@@ -14489,6 +13616,126 @@ const AgentMetadataModelSwitcher = ({
   ] });
 };
 
+const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-mastra-bg-7 data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+
+const AgentMetadataModelList = ({
+  modelList,
+  modelProviders,
+  updateModelInModelList,
+  reorderModelList
+}) => {
+  const [modelConfigs, setModelConfigs] = React.useState(() => modelList);
+  const handleDragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+    const items = Array.from(modelConfigs);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+    setModelConfigs(items);
+    reorderModelList({ reorderedModelIds: items.map((item) => item.id) });
+  };
+  const updateModel = (params) => {
+    setModelConfigs(
+      (prev) => prev.map(
+        (modelConfig) => modelConfig.id === params.modelConfigId ? {
+          ...modelConfig,
+          enabled: params.enabled ?? modelConfig.enabled,
+          maxRetries: params.maxRetries ?? modelConfig.maxRetries,
+          model: {
+            modelId: params.model?.modelId ?? modelConfig.model.modelId,
+            provider: params.model?.provider ?? modelConfig.model.provider,
+            modelVersion: modelConfig.model.modelVersion
+          }
+        } : modelConfig
+      )
+    );
+    return updateModelInModelList(params);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: "model-list", children: (provided) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...provided.droppableProps, ref: provided.innerRef, className: "flex flex-col gap-2", children: [
+    modelConfigs.map((modelConfig, index) => /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: modelConfig.id, index, children: (provided2) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: provided2.innerRef,
+        ...provided2.draggableProps,
+        ...provided2.dragHandleProps,
+        style: provided2.draggableProps.style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          AgentMetadataModelListItem,
+          {
+            modelConfig,
+            modelProviders,
+            updateModelInModelList: updateModel
+          }
+        )
+      }
+    ) }, modelConfig.id)),
+    provided.placeholder
+  ] }) }) });
+};
+const AgentMetadataModelListItem = ({
+  modelConfig,
+  modelProviders,
+  updateModelInModelList
+}) => {
+  const [isEditingModel, setIsEditingModel] = React.useState(false);
+  const [enabled, setEnabled] = React.useState(() => modelConfig.enabled);
+  const providerIcon = providerMapToIcon[modelConfig.model.provider || "openai.chat"];
+  return isEditingModel ? /* @__PURE__ */ jsxRuntime.jsx(
+    AgentMetadataModelSwitcher,
+    {
+      defaultProvider: modelConfig.model.provider,
+      defaultModel: modelConfig.model.modelId,
+      updateModel: (params) => updateModelInModelList({ modelConfigId: modelConfig.id, model: params }),
+      closeEditor: () => setIsEditingModel(false),
+      modelProviders
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 rounded-lg bg-background hover:bg-muted/50 transition-colors", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon3 cursor-grab active:cursor-grabbing", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: modelConfig.model.modelId || "N/A" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Switch,
+      {
+        checked: enabled,
+        onCheckedChange: (checked) => {
+          setEnabled(checked);
+          updateModelInModelList({ modelConfigId: modelConfig.id, enabled: checked });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setIsEditingModel(true),
+        className: "text-icon3 hover:text-icon6",
+        title: "Edit model",
+        type: "button",
+        "aria-label": "Edit model",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EditIcon, {}) })
+      }
+    )
+  ] });
+};
+
 const AgentMetadataNetworkList = ({ agents }) => {
   const { Link, paths } = useLinkComponent();
   if (agents.length === 0) {
@@ -14502,7 +13749,9 @@ const AgentMetadata = ({
   promptSlot,
   hasMemoryEnabled,
   updateModel,
-  modelProviders
+  modelProviders,
+  updateModelInModelList,
+  reorderModelList
 }) => {
   const [isEditingModel, setIsEditingModel] = React.useState(false);
   const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
@@ -14513,7 +13762,15 @@ const AgentMetadata = ({
   const agentWorkflows = agent.workflows ?? {};
   const workflows = Object.keys(agentWorkflows).map((key) => ({ id: key, ...agentWorkflows[key] }));
   return /* @__PURE__ */ jsxRuntime.jsxs(AgentMetadataWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsxRuntime.jsx(
+    agent.modelList ? /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Models", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataModelList,
+      {
+        modelList: agent.modelList,
+        modelProviders,
+        updateModelInModelList,
+        reorderModelList
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsxRuntime.jsx(
       AgentMetadataModelSwitcher,
       {
         defaultProvider: agent.provider,
@@ -14603,7 +13860,7 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const scorerList = Object.keys(scorers).filter((scorerKey) => {
     const scorer = scorers[scorerKey];
     if (entityType === "AGENT") {
-      return scorer.agentNames.includes(entityId);
+      return scorer.agentNames?.includes?.(entityId);
     }
     return scorer.workflowIds.includes(entityId);
   }).map((scorerKey) => ({ ...scorers[scorerKey], id: scorerKey }));
@@ -14932,7 +14189,7 @@ const LabelMappings = {
 const StepDropdown = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const { state } = useVNextNetworkChat();
-  const message = react$2.useMessage();
+  const message = react$3.useMessage();
   const id = message?.metadata?.custom?.id;
   if (!id) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Something is wrong" });
   const currentState = state[id];
@@ -15070,7 +14327,7 @@ const StepClock = ({ step }) => {
 const NextAssistantMessage = ({
   ToolFallback: ToolFallbackCustom
 }) => {
-  const data = react$2.useMessage();
+  const data = react$3.useMessage();
   const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
   const content = data.content[0];
   if (!content) {
@@ -15080,9 +14337,9 @@ const NextAssistantMessage = ({
   if (textContent === "start") {
     return /* @__PURE__ */ jsxRuntime.jsx(StepDropdown, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.MessagePrimitive.Root, { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.MessagePrimitive.Root, { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$2.MessagePrimitive.Parts,
+      react$3.MessagePrimitive.Parts,
       {
         components: {
           Text: MarkdownText,
@@ -15095,15 +14352,15 @@ const NextAssistantMessage = ({
 };
 const AssistantActionBar = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$2.ActionBarPrimitive.Root,
+    react$3.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       autohideFloat: "single-branch",
       className: "flex gap-1 items-center transition-all",
-      children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipIconButton, { tooltip: "Copy", className: "bg-transparent text-icon3 hover:text-icon6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.MessagePrimitive.If, { copied: false, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
       ] }) })
     }
   );
@@ -15116,11 +14373,11 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(NextAssistantMessage, { ...props, ToolFallback });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { networkName }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          react$2.ThreadPrimitive.Messages,
+          react$3.ThreadPrimitive.Messages,
           {
             components: {
               UserMessage,
@@ -15130,7 +14387,7 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory })
   ] });
@@ -15138,7 +14395,7 @@ const NetworkThread = ({ ToolFallback, networkName, hasMemory }) => {
 const ThreadWrapper = ({ children }) => {
   const hasAttachments = useHasAttachments();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$2.ThreadPrimitive.Root,
+    react$3.ThreadPrimitive.Root,
     {
       className: clsx(
         "max-w-[568px] w-full mx-auto px-4",
@@ -15159,17 +14416,17 @@ const ThreadWelcome = ({ networkName }) => {
   } else {
     initials = "A";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-grow flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials }) }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
 const Composer = ({ hasMemory }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent resize-none",
@@ -15192,7 +14449,7 @@ const Composer = ({ hasMemory }) => {
   ] });
 };
 const SpeechInput = () => {
-  const composerRuntime = react$2.useComposerRuntime();
+  const composerRuntime = react$3.useComposerRuntime();
   const { start, stop, isListening, transcript } = useSpeechRecognition({});
   React.useEffect(() => {
     if (!transcript) return;
@@ -15212,8 +14469,8 @@ const SpeechInput = () => {
 };
 const ComposerAction = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
         tooltip: "Send",
@@ -15222,15 +14479,15 @@ const ComposerAction = () => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.ComposerPrimitive.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Input, {}),
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.ComposerPrimitive.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Input, {}),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$2.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { variant: "ghost", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$3.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button$2, { children: "Send" }) })
     ] })
   ] });
 };
@@ -15548,7 +14805,7 @@ ${formatted}\`\`\``;
       }
     }
   }, [initialMessages, threadId, memory, messages]);
-  const mastra = useMastraClient();
+  const mastra = react$2.useMastraClient();
   const network = mastra.getVNextNetwork(networkId);
   const onNew = async (message) => {
     runIdRef.current = void 0;
@@ -15722,13 +14979,13 @@ ${formatted}\`\`\``;
       setIsRunning(false);
     }
   };
-  const runtime = react$2.useExternalStoreRuntime({
+  const runtime = react$3.useExternalStoreRuntime({
     isRunning,
     messages,
     convertMessage,
     onNew
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.AssistantRuntimeProvider, { runtime, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$3.AssistantRuntimeProvider, { runtime, children: [
     " ",
     children,
     " "
@@ -18279,7 +17536,7 @@ Dropdown.SubTrigger = DropdownMenuSubTrigger;
 Dropdown.RadioGroup = DropdownMenuRadioGroup;
 
 const useTriggerScorer = (onScorerTriggered) => {
-  const client = useMastraClient();
+  const client = react$2.useMastraClient();
   return reactQuery.useMutation({
     mutationFn: async ({ scorerName, traceId, spanId }) => {
       const response = await client.score({
@@ -19302,13 +18559,10 @@ exports.JudgeIcon = JudgeIcon;
 exports.Kbd = Kbd;
 exports.KeyValueList = KeyValueList;
 exports.LatencyIcon = LatencyIcon;
-exports.LegacyWorkflowGraph = LegacyWorkflowGraph;
-exports.LegacyWorkflowTrigger = LegacyWorkflowTrigger;
 exports.LinkComponentProvider = LinkComponentProvider;
 exports.LogsIcon = LogsIcon;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
-exports.MastraClientProvider = MastraClientProvider;
 exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
@@ -19375,6 +18629,7 @@ exports.ThreadLink = ThreadLink;
 exports.ThreadList = ThreadList;
 exports.Threads = Threads;
 exports.ToolCoinIcon = ToolCoinIcon;
+exports.ToolFallback = ToolFallback;
 exports.ToolList = ToolList;
 exports.ToolListEmpty = ToolListEmpty;
 exports.ToolListSkeleton = ToolListSkeleton;
@@ -19421,21 +18676,16 @@ exports.spanTypePrefixes = spanTypePrefixes;
 exports.transformKey = transformKey;
 exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
-exports.useExecuteWorkflow = useExecuteWorkflow;
 exports.useInView = useInView;
-exports.useLegacyWorkflow = useLegacyWorkflow;
 exports.useLinkComponent = useLinkComponent;
-exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
-exports.useResumeWorkflow = useResumeWorkflow;
 exports.useScorer = useScorer;
 exports.useScorers = useScorers;
 exports.useScoresByEntityId = useScoresByEntityId;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useThreadInput = useThreadInput;
-exports.useWatchWorkflow = useWatchWorkflow;
 exports.useWorkflow = useWorkflow;
 exports.useWorkflowRuns = useWorkflowRuns;
 exports.useWorkingMemory = useWorkingMemory;