@mastra/playground-ui 6.2.2-alpha.3 → 6.2.3-alpha.0

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Fragment as Fragment$1, isValidElement, useId, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Plus, ChevronDownIcon, Minus, Maximize, CirclePause, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, EditIcon, Users, Brain, NetworkIcon, SearchIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, AlertCircle, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, GripVertical, EditIcon, Users, Brain, NetworkIcon, SearchIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, AlertTriangleIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -19,27 +19,27 @@ import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { toast } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useDebouncedCallback } from 'use-debounce';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import './index.css';export * from '@tanstack/react-query';
-import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
+import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, Background, BackgroundVariant, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
-import { C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$2, { z, ZodObject, ZodIntersection } from 'zod';
+import { CodeBlock } from 'react-code-block';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { format, isValid, formatDate, formatDistanceToNow } from 'date-fns';
+import { useDebouncedCallback } from 'use-debounce';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -47,19 +47,21 @@ import { v4 } from '@lukeed/uuid';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod/v4';
 import { z as z$1 } from 'zod/v3';
-import { CodeBlock } from 'react-code-block';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import './index.css';export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import Markdown from 'react-markdown';
 import { useShallow } from 'zustand/shallow';
 import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/di';
-import { flushSync } from 'react-dom';
+import { useMastraChat } from '@mastra/react-hooks';
 import { AnimatePresence } from 'motion/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { VisuallyHidden as VisuallyHidden$1 } from '@radix-ui/react-visually-hidden';
 import * as HoverCard from '@radix-ui/react-hover-card';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { RuntimeContext as RuntimeContext$2 } from '@mastra/core/runtime-context';
 import { format as format$1 } from 'date-fns/format';
@@ -4503,549 +4505,284 @@ const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
   );
 };
 
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
-
-const usePlaygroundStore = create()(
-  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 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] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const client = useMastraClient();
-  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");
-          toast.error("Error fetching legacy workflow");
-          return;
-        }
-        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);
-        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] = useState(false);
-  const [legacyWatchResult, setLegacyWatchResult] = useState(null);
-  const client = useMastraClient();
-  const debouncedSetLegacyWorkflowWatchResult = 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;
-            },
-            {}
-          );
-        }
-        acc[key] = { ...value, output };
-        return acc;
-      },
-      {}
-    );
-    const sanitizedRecord = {
-      ...record,
-      sanitizedOutput: record ? JSON.stringify({ ...record, results: formattedResults }, null, 2).slice(0, 5e4) : null
-    };
-    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] = 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);
-    }
-  };
+  const status = determineWorkflowStatus(steps);
   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 ("or" in group2) {
-        for (const subGroup of group2.or) {
-          recurse({ ...subGroup }, "or");
-        }
-      }
-      if ("not" in group2) {
-        recurse({ ...group2.not }, "not");
+    type: "watch",
+    payload: {
+      workflowState: {
+        status,
+        steps,
+        result: runState.value,
+        payload: context.input,
+        error: void 0
       }
-    }
-  }
-  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, {
-      ...node,
-      width: node.measured?.width ?? 274,
-      height: node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)
-    })
-  );
-  Dagre.layout(g);
-  const fullWidth = g.graph()?.width ? g.graph().width / 2 : 0;
-  const fullHeight = g.graph()?.height ? g.graph().height / 2 : 0;
-  return {
-    nodes: nodes.map((node) => {
-      const position = g.node(node.id);
-      const positionX = position.x - (node.measured?.width ?? 274) / 2;
-      const positionY = position.y - (node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)) / 2;
-      const x = positionX;
-      const y = positionY;
-      return { ...node, position: { x, y } };
-    }),
-    edges,
-    fullWidth,
-    fullHeight
+    },
+    eventTimestamp: new Date(runState.timestamp),
+    runId
   };
-};
-const defaultEdgeOptions = {
-  animated: true,
-  markerEnd: {
-    type: MarkerType.ArrowClosed,
-    width: 20,
-    height: 20,
-    color: "#8e8e8e"
+}
+function determineWorkflowStatus(steps) {
+  const stepStatuses = Object.values(steps).map((step) => step.status);
+  if (stepStatuses.includes("failed")) {
+    return "failed";
   }
-};
-const contructLegacyNodesAndEdges = ({
-  stepGraph,
-  stepSubscriberGraph,
-  steps: mainSteps = {}
-}) => {
-  if (!stepGraph) {
-    return { nodes: [], edges: [] };
+  if (stepStatuses.includes("suspended")) {
+    return "suspended";
   }
-  const { initial, ...stepsList } = stepGraph;
-  if (!initial.length) {
-    return { nodes: [], edges: [] };
+  if (stepStatuses.every((status) => status === "success")) {
+    return "success";
   }
-  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
+  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: {}
         }
-      };
-    });
-    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;
+  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.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;
+        }
+      },
+      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
             }
           }
-          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
+      },
+      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
             }
-          };
-        });
-        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
+        }
+      },
+      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
+            }
           }
-        ] : [];
-        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];
-      }
+        }
+      },
+      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 = createContext({});
+function WorkflowRunProvider({
+  children,
+  snapshot
+}) {
+  const [result, setResult] = useState(
+    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+  );
+  const [payload, setPayload] = useState(null);
+  const clearData = () => {
+    setResult(null);
+    setPayload(null);
+  };
+  useEffect(() => {
+    if (snapshot?.runId) {
+      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+    }
+  }, [snapshot]);
+  return /* @__PURE__ */ jsx(
+    WorkflowRunContext.Provider,
+    {
+      value: {
+        result,
+        setResult,
+        payload,
+        setPayload,
+        clearData,
+        snapshot
+      },
+      children
     }
+  );
+}
+
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ 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)
+    })
+  );
+  Dagre.layout(g);
+  const fullWidth = g.graph()?.width ? g.graph().width / 2 : 0;
+  const fullHeight = g.graph()?.height ? g.graph().height / 2 : 0;
+  return {
+    nodes: nodes.map((node) => {
+      const position = g.node(node.id);
+      const positionX = position.x - (node.measured?.width ?? 274) / 2;
+      const positionY = position.y - (node.measured?.height ?? (node?.data?.isLarge ? 260 : 100)) / 2;
+      const x = positionX;
+      const y = positionY;
+      return { ...node, position: { x, y } };
+    }),
+    edges,
+    fullWidth,
+    fullHeight
+  };
+};
+const defaultEdgeOptions = {
+  animated: true,
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 20,
+    height: 20,
+    color: "#8e8e8e"
   }
-  const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges);
-  return { nodes: layoutedNodes, edges: layoutedEdges };
 };
 const getStepNodeAndEdge = ({
   stepFlow,
@@ -5483,257 +5220,20 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.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") {
-    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 = createContext({});
-function WorkflowRunProvider({
-  children,
-  snapshot
-}) {
-  const [legacyResult, setLegacyResult] = useState(null);
-  const [result, setResult] = useState(
-    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
-  );
-  const [payload, setPayload] = useState(null);
-  const clearData = () => {
-    setLegacyResult(null);
-    setResult(null);
-    setPayload(null);
-  };
-  useEffect(() => {
-    if (snapshot?.runId) {
-      setResult(convertWorkflowRunStateToWatchResult(snapshot));
-    }
-  }, [snapshot]);
-  return /* @__PURE__ */ jsx(
-    WorkflowRunContext.Provider,
-    {
-      value: {
-        legacyResult,
-        setLegacyResult,
-        result,
-        setResult,
-        payload,
-        setPayload,
-        clearData,
-        snapshot
-      },
-      children
-    }
-  );
-}
-
-const useCurrentRun = () => {
-  const context = 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
+const useCurrentRun = () => {
+  const context = 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
       }
     };
   }, {});
@@ -6288,74 +5788,161 @@ function Spinner({ color = "#fff", className }) {
   );
 }
 
-function LegacyWorkflowNestedGraph({
-  stepGraph,
-  stepSubscriberGraph,
-  open
-}) {
-  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
-    stepGraph,
-    stepSubscriberGraph
-  });
-  const [isMounted, setIsMounted] = useState(false);
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-  const [edges] = useEdgesState(initialEdges);
-  const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode
-  };
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setIsMounted(true);
-      }, 500);
-    }
-  }, [open]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative", children: isMounted ? /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      fitView: true,
-      fitViewOptions: { maxZoom: 0.85 },
-      nodeTypes,
-      onNodesChange,
-      children: [
-        /* @__PURE__ */ jsx(Controls, {}),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
-}
-
-const LegacyWorkflowNestedGraphContext = createContext(
-  {}
-);
-function LegacyWorkflowNestedGraphProvider({ children }) {
-  const [stepGraph, setStepGraph] = useState(null);
-  const [stepSubscriberGraph, setStepSubscriberGraph] = useState(null);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [label, setLabel] = useState("");
-  const closeNestedGraph = () => {
-    setOpenDialog(false);
-    setStepGraph(null);
-    setStepSubscriberGraph(null);
-    setLabel("");
-  };
-  const showNestedGraph = ({
-    label: label2,
-    stepGraph: stepGraph2,
-    stepSubscriberGraph: stepSubscriberGraph2
-  }) => {
-    setLabel(label2);
-    setStepGraph(stepGraph2);
-    setStepSubscriberGraph(stepSubscriberGraph2);
-    setOpenDialog(true);
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+const ZoomSlider = forwardRef(({ className, ...props }) => {
+  const { zoom } = useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        className: "w-[140px]",
+        value: [zoom],
+        min: 0.01,
+        max: 1,
+        step: 0.01,
+        onValueChange: (values) => {
+          zoomTo(values[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(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] = useState(false);
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
+  const nodeTypes = {
+    "default-node": (props) => /* @__PURE__ */ jsx(
+      WorkflowDefaultNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    ),
+    "condition-node": WorkflowConditionNode,
+    "after-node": WorkflowAfterNode,
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": (props) => /* @__PURE__ */ jsx(
+      WorkflowNestedNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    )
+  };
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        setIsMounted(true);
+      }, 500);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
+    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__ */ jsx(ZoomSlider, { position: "bottom-left" }),
+        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
+}
+
+const WorkflowNestedGraphContext = createContext(
+  {}
+);
+function WorkflowNestedGraphProvider({
+  children,
+  onShowTrace,
+  onSendEvent
+}) {
+  const [stepGraph, setStepGraph] = useState(null);
+  const [parentStepGraphList, setParentStepGraphList] = useState([]);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [label, setLabel] = useState("");
+  const [fullStep, setFullStep] = 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__ */ jsxs(
-    LegacyWorkflowNestedGraphContext.Provider,
+    WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -6363,8 +5950,8 @@ function LegacyWorkflowNestedGraphProvider({ children }) {
       },
       children: [
         children,
-        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[40rem] h-[40rem] bg-[#121212] p-[0.5rem]", children: [
-          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
+        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-3 left-3 z-50", children: [
             /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
               label,
@@ -6372,77 +5959,131 @@ function LegacyWorkflowNestedGraphProvider({ children }) {
             ] })
           ] }),
           /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ 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 } = useContext(LegacyWorkflowNestedGraphContext);
-  return /* @__PURE__ */ 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 } = useContext(WorkflowNestedGraphContext);
+  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig, event } = data;
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const step = steps[fullLabel];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph, stepSubscriberGraph }), children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
-      /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            /* @__PURE__ */ jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" }),
+              !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          /* @__PURE__ */ jsx(
+            WorkflowStepActionBar,
+            {
+              stepName: label,
+              input: step?.input,
+              resumeData: step?.resumeData,
+              output: step?.output,
+              error: step?.error,
+              mapConfig,
+              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
+              onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
+              onSendEvent,
+              event: step?.status === "waiting" ? event : void 0,
+              runId,
+              status: step?.status
+            }
+          )
+        ]
+      }
+    ),
     !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: 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] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
+  const { steps, runId } = useCurrentRun();
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": LegacyWorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
   };
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
     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__ */ jsx(Controls, {}),
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsx(Background, { variant: 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 } = useContext(WorkflowRunContext);
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
   }
-  if (!legacyWorkflow) {
+  if (!workflow) {
     return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsx(AlertCircleIcon, {}),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -6452,13 +6093,99 @@ function LegacyWorkflowGraph({ workflowId }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(LegacyWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(LegacyWorkflowGraphInner, { workflow: legacyWorkflow }) }) });
-}
-
-const Form = React__default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
-});
-
+  return /* @__PURE__ */ jsx(
+    WorkflowNestedGraphProvider,
+    {
+      onShowTrace,
+      onSendEvent,
+      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ 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);
+}
+
+function CodeBlockDemo({
+  code = "",
+  language = "ts",
+  filename,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(CodeBlock, { code, language, theme: themes.oneDark, children: [
+    filename ? /* @__PURE__ */ 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__ */ jsx(
+      CodeBlock.Code,
+      {
+        className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
+        children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsx(CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+const usePlaygroundStore = create()(
+  persist(
+    (set) => ({
+      runtimeContext: {},
+      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
+
+const WorkflowCard = ({ header, children, footer }) => {
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
+    /* @__PURE__ */ jsxs("button", { className: "py-1 px-2 flex items-center gap-3 justify-between w-full", onClick: () => setExpanded((s) => !s), children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("text-icon3 transition-transform -rotate-90", expanded && "rotate-0") }) })
+    ] }),
+    children && expanded && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
+  ] });
+};
+
+const WorkflowStatus = ({ stepId, status, result }) => {
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
+          status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
+          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
+        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
+      ] })
+    }
+  );
+};
+
+const Form = React__default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
+});
+
 const DISABLED_LABELS = ["boolean", "object", "array"];
 const FieldWrapper = ({ label, children, id, field, error }) => {
   const isDisabled = DISABLED_LABELS.includes(field.type);
@@ -7269,610 +6996,30 @@ function DynamicForm({
     if (isNotZodObject) {
       return z$2.object({
         "​": schema2
-      });
-    }
-    return schema2;
-  };
-  const schemaProvider = new CustomZodProvider(normalizedSchema(schema));
-  const formProps = {
-    schema: schemaProvider,
-    onSubmit: async (values) => {
-      await onSubmit?.(isNotZodObject ? values["​"] || {} : values);
-    },
-    defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
-    formProps: {
-      className
-    },
-    uiComponents: {
-      SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
-    },
-    formComponents: {
-      Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
-    },
-    withSubmit: true
-  };
-  return /* @__PURE__ */ jsx(AutoForm, { ...formProps, readOnly });
-}
-
-function resolveSerializedZodOutput(obj) {
-  return Function("z", `"use strict";return (${obj});`)(z);
-}
-
-function CodeBlockDemo({
-  code = "",
-  language = "ts",
-  filename,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(CodeBlock, { code, language, theme: themes.oneDark, children: [
-    filename ? /* @__PURE__ */ 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__ */ jsx(
-      CodeBlock.Code,
-      {
-        className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
-        children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx(CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsx(CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
-        ] }) })
-      }
-    )
-  ] });
-}
-
-const WorkflowCard = ({ header, children, footer }) => {
-  const [expanded, setExpanded] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
-    /* @__PURE__ */ jsxs("button", { className: "py-1 px-2 flex items-center gap-3 justify-between w-full", onClick: () => setExpanded((s) => !s), children: [
-      /* @__PURE__ */ jsx("div", { className: "w-full", children: header }),
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("text-icon3 transition-transform -rotate-90", expanded && "rotate-0") }) })
-    ] }),
-    children && expanded && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
-    footer && /* @__PURE__ */ jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
-  ] });
-};
-
-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__ */ jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs(Icon, { children: [
-          status === "Completed" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-          status === "Failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-          status === "Executing" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
-        ] }),
-        /* @__PURE__ */ 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] = useState(false);
-  return /* @__PURE__ */ jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [
-        /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 flex items-center gap-3 font-medium", children: [
-          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(DeploymentIcon, {}) }),
-          "Workflow Execution (JSON)"
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(CopyIcon, {}) })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy result" })
-        ] })
-      ] }),
-      footer: /* @__PURE__ */ 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__ */ 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 } = 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] = useState([]);
-  const [isRunning, setIsRunning] = 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);
-      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 ?? {};
-  useEffect(() => {
-    setIsRunning(isWatchingWorkflow);
-  }, [isWatchingWorkflow]);
-  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]);
-  useEffect(() => {
-    if (watchResult) {
-      setResult(watchResult);
-    }
-  }, [watchResult]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
-    ] }) });
-  }
-  if (!workflow) return null;
-  const isSuspendedSteps = suspendedSteps.length > 0;
-  const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = result ?? {};
-  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
-  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
-      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
-    ] }),
-    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-      DynamicForm,
-      {
-        schema: zodInputSchema,
-        defaultValues: payload,
-        isSubmitLoading: isWatchingWorkflow,
-        submitButtonLabel: "Run",
-        onSubmit: (data) => {
-          setPayload(data);
-          handleExecuteWorkflow(data);
-        }
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        className: "w-full",
-        variant: "light",
-        disabled: isRunning,
-        onClick: () => handleExecuteWorkflow(null),
-        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
-      }
-    ) }),
-    isSuspendedSteps && suspendedSteps?.map((step) => {
-      const stepDefinition = workflow.steps[step.stepId];
-      const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.inputSchema))) : z.record(z.string(), z.any());
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
-        step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          CodeBlockDemo,
-          {
-            className: "w-full overflow-x-auto p-2",
-            code: JSON.stringify(step.suspendPayload, null, 2),
-            language: "json"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          DynamicForm,
-          {
-            schema: stepSchema,
-            isSubmitLoading: isResumingWorkflow,
-            submitButtonLabel: "Resume",
-            onSubmit: (data) => {
-              handleResumeWorkflow({
-                stepId: step.stepId,
-                runId: step.runId,
-                suspendPayload: step.suspendPayload,
-                context: data
-              });
-            }
-          }
-        )
-      ] });
-    }),
-    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
-          return /* @__PURE__ */ jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
-        }) }, stepId);
-      }) })
-    ] }),
-    result && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
-      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
-    ] })
-  ] }) });
-}
-
-const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-const ZoomSlider = forwardRef(({ className, ...props }) => {
-  const { zoom } = useViewport();
-  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
-  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        className: "w-[140px]",
-        value: [zoom],
-        min: 0.01,
-        max: 1,
-        step: 0.01,
-        onValueChange: (values) => {
-          zoomTo(values[0]);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxs(Button$2, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
-      (100 * zoom).toFixed(0),
-      "%"
-    ] }),
-    /* @__PURE__ */ jsx(Button$2, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(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] = useState(false);
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-  const [edges] = useEdgesState(initialEdges);
-  const { steps } = useCurrentRun();
-  const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(
-      WorkflowDefaultNode,
-      {
-        parentWorkflowName: workflowName,
-        onShowTrace,
-        onSendEvent,
-        ...props
-      }
-    ),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(
-      WorkflowNestedNode,
-      {
-        parentWorkflowName: workflowName,
-        onShowTrace,
-        onSendEvent,
-        ...props
-      }
-    )
-  };
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setIsMounted(true);
-      }, 500);
-    }
-  }, [open]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
-    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__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
-}
-
-const WorkflowNestedGraphContext = createContext(
-  {}
-);
-function WorkflowNestedGraphProvider({
-  children,
-  onShowTrace,
-  onSendEvent
-}) {
-  const [stepGraph, setStepGraph] = useState(null);
-  const [parentStepGraphList, setParentStepGraphList] = useState([]);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [label, setLabel] = useState("");
-  const [fullStep, setFullStep] = 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__ */ jsxs(
-    WorkflowNestedGraphContext.Provider,
-    {
-      value: {
-        showNestedGraph,
-        closeNestedGraph
-      },
-      children: [
-        children,
-        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
-          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-3 left-3 z-50", children: [
-            /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
-            /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
-              label,
-              " workflow"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-            WorkflowNestedGraph,
-            {
-              stepGraph,
-              open: openDialog,
-              workflowName: fullStep,
-              onShowTrace,
-              onSendEvent
-            }
-          ) })
-        ] }) }) }, `${label}-${fullStep}`)
-      ]
-    }
-  );
-}
-
-function WorkflowNestedNode({
-  data,
-  parentWorkflowName,
-  onShowTrace,
-  onSendEvent
-}) {
-  const { steps, runId } = useCurrentRun();
-  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
-  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig, event } = data;
-  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
-  const step = steps[fullLabel];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
-            /* @__PURE__ */ jsxs(Icon, { children: [
-              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
-              step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" }),
-              !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
-            ] }),
-            /* @__PURE__ */ 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__ */ jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
-            ] })
-          ] }),
-          description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          /* @__PURE__ */ jsx(
-            WorkflowStepActionBar,
-            {
-              stepName: label,
-              input: step?.input,
-              resumeData: step?.resumeData,
-              output: step?.output,
-              error: step?.error,
-              mapConfig,
-              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
-              onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
-              onSendEvent,
-              event: step?.status === "waiting" ? event : void 0,
-              runId,
-              status: step?.status
-            }
-          )
-        ]
-      }
-    ),
-    !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
-  ] });
-}
-
-function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
-  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-  const [edges] = useEdgesState(initialEdges);
-  const { steps, runId } = useCurrentRun();
-  const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
-    "condition-node": WorkflowConditionNode,
-    "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
-  };
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
-    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__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
-      ]
-    }
-  ) });
-}
-
-function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEvent }) {
-  const { snapshot } = useContext(WorkflowRunContext);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
-  }
-  if (!workflow) {
-    return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-      /* @__PURE__ */ jsx(AlertCircleIcon, {}),
-      /* @__PURE__ */ jsxs("div", { children: [
-        "We couldn't find ",
-        lodashTitleCase(workflowId),
-        " workflow."
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(
-    WorkflowNestedGraphProvider,
-    {
-      onShowTrace,
-      onSendEvent,
-      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-        WorkflowGraphInner,
-        {
-          workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
-          onShowTrace,
-          onSendEvent
-        }
-      ) })
-    },
-    snapshot?.runId ?? workflowId
-  );
-}
-
-const WorkflowStatus = ({ stepId, status, result }) => {
-  return /* @__PURE__ */ jsx(
-    WorkflowCard,
-    {
-      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs(Icon, { children: [
-          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
-          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-accent3" }),
-          status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
-          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin" })
-        ] }),
-        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
-      ] }),
-      children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
-        /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
-      ] })
+      });
     }
-  );
-};
+    return schema2;
+  };
+  const schemaProvider = new CustomZodProvider(normalizedSchema(schema));
+  const formProps = {
+    schema: schemaProvider,
+    onSubmit: async (values) => {
+      await onSubmit?.(isNotZodObject ? values["​"] || {} : values);
+    },
+    defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
+    formProps: {
+      className
+    },
+    uiComponents: {
+      SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
+    },
+    formComponents: {
+      Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
+    },
+    withSubmit: true
+  };
+  return /* @__PURE__ */ jsx(AutoForm, { ...formProps, readOnly });
+}
 
 const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
@@ -8520,18 +7667,15 @@ const columns$3 = [
     id: "stepsCount",
     header: "Steps",
     size: 300,
-    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2", children: [
-      /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(Footprints, {}), className: "!h-button-md", children: [
-        row.original.stepsCount,
-        " step",
-        row.original.stepsCount > 1 ? "s" : ""
-      ] }),
-      row.original.isLegacy ? /* @__PURE__ */ jsx(Badge$1, { className: "!text-foreground/80 !h-button-md", children: "Legacy" }) : null
-    ] }) })
+    cell: ({ row }) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center gap-2", children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(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 = useMemo(() => {
     const _workflowsData = Object.keys(workflows ?? {}).map((key) => {
@@ -8540,22 +7684,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 = useReactTable({
     data: workflowData,
     columns: columns$3,
@@ -8651,6 +7784,19 @@ const useWorkflowStream = (workflowFullState) => {
   }, [workflowFullState]);
 };
 
+const useWorkflow = (workflowId) => {
+  const client = useMastraClient();
+  const { runtimeContext } = usePlaygroundStore();
+  return 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__ */ jsx(
     BadgeWrapper,
@@ -9845,212 +8991,185 @@ 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) {
+    default:
+      return [...conversation];
+    case "text-start": {
+      const newMessage = {
         role: "assistant",
-        content: [{ type: "text", text: _sideEffects.content }]
+        content: [{ type: "text", text: "" }]
       };
-      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-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 && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
+        const updatedContent = lastMessage.content.map((part) => {
+          if (typeof part === "object" && part.type === "text") {
+            return {
+              ...part,
+              text: part.text + chunk.payload.text
+            };
+          }
+          return part;
+        });
+        const updatedMessage = {
+          ...lastMessage,
+          content: updatedContent
+        };
+        return [...conversation.slice(0, -1), updatedMessage];
       }
-      updater();
-      break;
+      return [...conversation];
     }
     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;
+      handleFinishReason$1(chunk.payload.stepResult.reason);
+      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];
     }
   }
 };
@@ -10060,15 +9179,179 @@ const handleFinishReason$1 = (finishReason) => {
       throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
   }
 };
-const handleWorkflowChunk = ({ workflowChunk, setMessages, entityName }) => {
-  flushSync(() => {
-    setMessages((currentConversation) => {
-      const lastMessage = currentConversation[currentConversation.length - 1];
+const 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,
@@ -10076,11 +9359,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
                 }
               }
             };
@@ -10088,216 +9368,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": {
-      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) => {
@@ -10346,6 +9452,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,
@@ -10358,8 +9518,17 @@ function MastraRuntimeProvider({
   modelVersion
 }) {
   const [isRunning, setIsRunning] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const {
+    messages,
+    setMessages,
+    streamVNext,
+    network,
+    cancelRun,
+    isRunning: isRunningStreamVNext
+  } = useMastraChat({
+    agentId,
+    initializeMessages: () => memory ? initializeMessageState(initialMessages || []) : []
+  });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = useRef(null);
   const {
@@ -10382,76 +9551,23 @@ function MastraRuntimeProvider({
   Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
     runtimeContextInstance.set(key, value);
   });
-  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 modelSettingsArgs = {
+    frequencyPenalty,
+    presencePenalty,
+    maxRetries,
+    temperature,
+    topK,
+    topP,
+    maxTokens,
+    instructions,
+    providerOptions
+  };
   const baseClient = 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 MastraClient({
@@ -10461,7 +9577,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 : [];
@@ -10542,86 +9658,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;
                 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: {
@@ -10629,21 +9731,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: [
                 {
@@ -10671,50 +9771,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: [
               {
@@ -10829,6 +9911,7 @@ function MastraRuntimeProvider({
               return [...currentConversation.slice(0, -1), message2];
             });
           };
+          setIsRunning(true);
           const response = await agent.stream({
             messages: [
               {
@@ -11008,11 +10091,12 @@ function MastraRuntimeProvider({
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
       setIsRunning(false);
+      cancelRun?.();
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
   const runtime = useExternalStoreRuntime({
-    isRunning,
+    isRunning: isRunning || isRunningStreamVNext,
     messages,
     convertMessage: convertMessage$1,
     onNew,
@@ -12233,6 +11317,7 @@ const MistralIcon = (props) => /* @__PURE__ */ jsxs(
 
 const providerMapToIcon = {
   "openai.chat": /* @__PURE__ */ jsx(OpenaiChatIcon, {}),
+  "openai.responses": /* @__PURE__ */ jsx(OpenaiChatIcon, {}),
   "anthropic.chat": /* @__PURE__ */ jsx(AnthropicChatIcon, {}),
   "anthropic.messages": /* @__PURE__ */ jsx(AnthropicMessagesIcon, {}),
   AZURE: /* @__PURE__ */ jsx(AzureIcon, {}),
@@ -12264,17 +11349,34 @@ const columns$2 = [
   {
     header: "Model",
     accessorKey: "model",
-    size: 160,
+    size: 300,
     cell: ({ row }) => {
-      return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
-        Badge$1,
-        {
-          variant: "default",
-          icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsx(OpenAIIcon, {}),
-          className: "truncate",
-          children: row.original.modelId || "N/A"
-        }
-      ) });
+      return /* @__PURE__ */ jsxs(Cell, { children: [
+        /* @__PURE__ */ jsx(
+          Badge$1,
+          {
+            variant: "default",
+            icon: providerMapToIcon[row.original.provider] || /* @__PURE__ */ jsx(OpenAIIcon, {}),
+            className: "truncate",
+            children: row.original.modelId || "N/A"
+          }
+        ),
+        row.original.modelList && row.original.modelList.length > 1 ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Badge$1, { variant: "info", className: "ml-2", children: [
+            "+ ",
+            row.original.modelList.length - 1,
+            " more"
+          ] }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { className: "bg-surface5 flex flex-col gap-2", children: row.original.modelList.slice(1).map((mdl) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Badge$1,
+            {
+              variant: "default",
+              icon: providerMapToIcon[mdl.model.provider],
+              children: mdl.model.modelId
+            }
+          ) }, mdl.id)) })
+        ] }) : null
+      ] });
     }
   },
   {
@@ -12307,7 +11409,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]
@@ -12323,10 +11426,10 @@ function AgentsTable({ agents, isLoading }) {
   if (rows.length === 0) {
     return /* @__PURE__ */ jsx(EmptyAgentsTable, {});
   }
-  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
+  return /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
     /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
     /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsx(Row, { onClick: () => navigate(row.original.link), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
-  ] }) });
+  ] }) }) });
 }
 const AgentsTableSkeleton = () => /* @__PURE__ */ jsxs(Table$1, { children: [
   /* @__PURE__ */ jsxs(Thead, { children: [
@@ -14454,6 +13557,126 @@ const AgentMetadataModelSwitcher = ({
   ] });
 };
 
+const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.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__ */ jsx(
+      SwitchPrimitives.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.Root.displayName;
+
+const AgentMetadataModelList = ({
+  modelList,
+  modelProviders,
+  updateModelInModelList,
+  reorderModelList
+}) => {
+  const [modelConfigs, setModelConfigs] = 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__ */ jsx(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "model-list", children: (provided) => /* @__PURE__ */ jsxs("div", { ...provided.droppableProps, ref: provided.innerRef, className: "flex flex-col gap-2", children: [
+    modelConfigs.map((modelConfig, index) => /* @__PURE__ */ jsx(Draggable, { draggableId: modelConfig.id, index, children: (provided2) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: provided2.innerRef,
+        ...provided2.draggableProps,
+        ...provided2.dragHandleProps,
+        style: provided2.draggableProps.style,
+        children: /* @__PURE__ */ jsx(
+          AgentMetadataModelListItem,
+          {
+            modelConfig,
+            modelProviders,
+            updateModelInModelList: updateModel
+          }
+        )
+      }
+    ) }, modelConfig.id)),
+    provided.placeholder
+  ] }) }) });
+};
+const AgentMetadataModelListItem = ({
+  modelConfig,
+  modelProviders,
+  updateModelInModelList
+}) => {
+  const [isEditingModel, setIsEditingModel] = useState(false);
+  const [enabled, setEnabled] = useState(() => modelConfig.enabled);
+  const providerIcon = providerMapToIcon[modelConfig.model.provider || "openai.chat"];
+  return isEditingModel ? /* @__PURE__ */ jsx(
+    AgentMetadataModelSwitcher,
+    {
+      defaultProvider: modelConfig.model.provider,
+      defaultModel: modelConfig.model.modelId,
+      updateModel: (params) => updateModelInModelList({ modelConfigId: modelConfig.id, model: params }),
+      closeEditor: () => setIsEditingModel(false),
+      modelProviders
+    }
+  ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 rounded-lg bg-background hover:bg-muted/50 transition-colors", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-icon3 cursor-grab active:cursor-grabbing", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(GripVertical, {}) }) }),
+    /* @__PURE__ */ jsx(Badge$1, { icon: providerIcon, className: "font-medium", children: modelConfig.model.modelId || "N/A" }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        checked: enabled,
+        onCheckedChange: (checked) => {
+          setEnabled(checked);
+          updateModelInModelList({ modelConfigId: modelConfig.id, enabled: checked });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsEditingModel(true),
+        className: "text-icon3 hover:text-icon6",
+        title: "Edit model",
+        type: "button",
+        "aria-label": "Edit model",
+        children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(EditIcon, {}) })
+      }
+    )
+  ] });
+};
+
 const AgentMetadataNetworkList = ({ agents }) => {
   const { Link, paths } = useLinkComponent();
   if (agents.length === 0) {
@@ -14467,7 +13690,9 @@ const AgentMetadata = ({
   promptSlot,
   hasMemoryEnabled,
   updateModel,
-  modelProviders
+  modelProviders,
+  updateModelInModelList,
+  reorderModelList
 }) => {
   const [isEditingModel, setIsEditingModel] = useState(false);
   const providerIcon = providerMapToIcon[agent.provider || "openai.chat"];
@@ -14478,7 +13703,15 @@ const AgentMetadata = ({
   const agentWorkflows = agent.workflows ?? {};
   const workflows = Object.keys(agentWorkflows).map((key) => ({ id: key, ...agentWorkflows[key] }));
   return /* @__PURE__ */ jsxs(AgentMetadataWrapper, { children: [
-    /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsx(
+    agent.modelList ? /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Models", children: /* @__PURE__ */ jsx(
+      AgentMetadataModelList,
+      {
+        modelList: agent.modelList,
+        modelProviders,
+        updateModelInModelList,
+        reorderModelList
+      }
+    ) }) : /* @__PURE__ */ jsx(AgentMetadataSection, { title: "Model", children: isEditingModel ? /* @__PURE__ */ jsx(
       AgentMetadataModelSwitcher,
       {
         defaultProvider: agent.provider,
@@ -15981,10 +15214,11 @@ const ToolListInner = ({ toolsWithAgents }) => {
 const ToolEntity = ({ tool }) => {
   const linkRef = useRef(null);
   const { Link, paths } = useLinkComponent();
+  const toolLink = tool.agents.length > 0 ? paths.agentToolLink(tool.agents[0].id, tool.id) : paths.toolLink(tool.id);
   return /* @__PURE__ */ jsxs(Entity, { onClick: () => linkRef.current?.click(), children: [
     /* @__PURE__ */ jsx(EntityIcon, { children: /* @__PURE__ */ jsx(ToolsIcon, { className: "group-hover/entity:text-[#ECB047]" }) }),
     /* @__PURE__ */ jsxs(EntityContent, { children: [
-      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: paths.toolLink(tool.id), children: tool.id }) }),
+      /* @__PURE__ */ jsx(EntityName, { children: /* @__PURE__ */ jsx(Link, { ref: linkRef, href: toolLink, children: tool.id }) }),
       /* @__PURE__ */ jsx(EntityDescription, { children: tool.description }),
       /* @__PURE__ */ jsx("div", { className: "inline-flex flex-wrap gap-2 pt-4", children: tool.agents.map((agent) => {
         return /* @__PURE__ */ jsx(
@@ -19177,5 +18411,5 @@ const parseError = (error) => {
   }
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, parseError, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useExecuteWorkflow, useInView, useLegacyWorkflow, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useResumeWorkflow, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWatchWorkflow, useWorkflow, useWorkflowRuns, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorersTable, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScorersTableSkeleton, ScoresTools, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, parseError, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWorkflow, useWorkflowRuns, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map